Interface DesignTokens

Tokens de design para customização visual avançada dos componentes.

Sistema robusto de design tokens que permite controle granular sobre todos os aspectos visuais da biblioteca. Suporta responsive design, estados interativos, acessibilidade e temas dark/light.

Since

0.1.3

Remarks

Histórico: v0.4.1 - Expandido substancialmente com novos tokens

Mapa de tokens (top-level)

colors: cores base, semânticas e por componente
typography: fonte, tamanhos, pesos e hierarquia
spacing: espaçamentos, padding/margin e radius
layout: posição, largura, backdrop e z-index
effects: sombras, transições e filtros
accessibility: contraste, motion e foco
themes: overrides para light/dark

Overrides complementares (MUI)

Mesmo com tokens, você pode ajustar detalhes via sx e ThemeProvider. Ex.: cookieBannerProps.PaperProps.sx e preferencesModalProps.DialogProps.sx.

Example: Configuração básica

const tokens: DesignTokens = {
  colors: {
    primary: '#1976d2',
    background: '#ffffff',
    text: '#333333'
  }
}

Example: Configuração avançada com responsive e estados

const advancedTokens: DesignTokens = {
  colors: {
    primary: { light: '#42a5f5', main: '#1976d2', dark: '#1565c0' },
    semantic: {
      error: '#f44336',
      warning: '#ff9800',
      success: '#4caf50',
      info: '#2196f3'
    }
  },
  spacing: {
    responsive: {
      mobile: { padding: '12px', margin: '8px' },
      tablet: { padding: '16px', margin: '12px' },
      desktop: { padding: '24px', margin: '16px' }
    }
  }
}

interface DesignTokens {
    accessibility?: {
        contrast?: { enhanced?: number; normal?: number };
        focus?: {
            color?: string;
            offset?: string;
            style?: "solid" | "dashed" | "dotted";
            width?: string;
        };
        motion?: {
            reducedMotion?: { duration?: string; easing?: string };
            respectPreferences?: boolean;
        };
    };
    colors?: {
        background?: | string
        | { default?: string; main?: string; overlay?: string; paper?: string };
        border?: ColorVariant;
        components?: {
            banner?: {
                background?: string;
                border?: string;
                shadow?: string;
                text?: string;
            };
            button?: {
                outlined?: { border?: string; hover?: string; text?: string };
                primary?: { background?: string; hover?: string; text?: string };
                secondary?: { background?: string; hover?: string; text?: string };
            };
            modal?: {
                background?: string;
                border?: string;
                overlay?: string;
                text?: string;
            };
        };
        primary?: ColorVariant;
        secondary?: ColorVariant;
        semantic?: {
            error?: string;
            info?: string;
            success?: string;
            warning?: string;
        };
        text?: | string
        | { disabled?: string; primary?: string; secondary?: string };
    };
    effects?: {
        filters?: { backdrop?: string; disabled?: string };
        shadow?: {
            banner?: string;
            button?: string;
            modal?: string;
            scale?: {
                lg?: string;
                md?: string;
                none?: string;
                sm?: string;
                xl?: string;
            };
        };
        transitions?: {
            banner?: { enter?: string; exit?: string };
            duration?: { fast?: string; normal?: string; slow?: string };
            easing?: {
                easeIn?: string;
                easeInOut?: string;
                easeOut?: string;
                linear?: string;
            };
            modal?: { enter?: string; exit?: string };
        };
    };
    layout?: {
        backdrop?: BackdropConfig;
        borderRadius?: | string
        | number
        | {
            banner?: string
            | number;
            button?: string | number;
            modal?: string | number;
            scale?: {
                full?: string | number;
                lg?: string | number;
                md?: string | number;
                none?: string | number;
                sm?: string | number;
                xl?: string | number;
            };
        };
        breakpoints?: {
            desktop?: string;
            mobile?: string;
            tablet?: string;
            wide?: string;
        };
        height?: {
            banner?: HeightValue;
            button?: HeightValue;
            modal?: HeightValue;
        };
        position?: "bottom"
        | "top"
        | "floating"
        | "center";
        width?: {
            desktop?: string;
            max?: string;
            mobile?: string;
            tablet?: string;
        };
        zIndex?: {
            backdrop?: number;
            banner?: number;
            floatingButton?: number;
            modal?: number;
        };
    };
    spacing?: {
        borderRadius?: {
            banner?: string
            | number;
            button?: string | number;
            modal?: string | number;
            scale?: {
                full?: string | number;
                lg?: string | number;
                md?: string | number;
                none?: string | number;
                sm?: string | number;
                xl?: string | number;
            };
        };
        lg?: string
        | number;
        margin?: {
            banner?: SpacingValue;
            button?: SpacingValue;
            modal?: SpacingValue;
        };
        md?: string
        | number;
        padding?: {
            banner?: SpacingValue;
            button?: SpacingValue;
            modal?: SpacingValue;
        };
        responsive?: {
            desktop?: {
                borderRadius?: string
                | number;
                margin?: string | number;
                padding?: string | number;
            };
            mobile?: {
                borderRadius?: string
                | number;
                margin?: string | number;
                padding?: string | number;
            };
            tablet?: {
                borderRadius?: string
                | number;
                margin?: string | number;
                padding?: string | number;
            };
        };
        scale?: {
            "2xl"?: string
            | number;
            "3xl"?: string | number;
            lg?: string | number;
            md?: string | number;
            sm?: string | number;
            xl?: string | number;
            xs?: string | number;
        };
        sm?: string
        | number;
        xl?: string | number;
        xs?: string | number;
    };
    themes?: {
        auto?: boolean;
        dark?: Partial<Omit<DesignTokens, "themes">>;
        light?: Partial<Omit<DesignTokens, "themes">>;
    };
    typography?: {
        fontFamily?: | string
        | { monospace?: string; primary?: string; secondary?: string };
        fontSize?: {
            banner?: { button?: string; message?: string; title?: string };
            h1?: string;
            h2?: string;
            h3?: string;
            h4?: string;
            h5?: string;
            h6?: string;
            modal?: {
                body?: string;
                button?: string;
                caption?: string;
                title?: string;
            };
            scale?: {
                "2xl"?: string;
                "3xl"?: string;
                base?: string;
                lg?: string;
                sm?: string;
                xl?: string;
                xs?: string;
            };
        };
        fontWeight?: {
            bold?: number;
            light?: number;
            medium?: number;
            normal?: number;
            semibold?: number;
        };
        letterSpacing?: { normal?: string; tight?: string; wide?: string };
        lineHeight?: {
            loose?: number;
            normal?: number;
            relaxed?: number;
            tight?: number;
        };
    };
}

Index

Properties

accessibility? colors? effects? layout? spacing? themes? typography?

Properties

`Optional`accessibility

accessibility?: {
    contrast?: { enhanced?: number; normal?: number };
    focus?: {
        color?: string;
        offset?: string;
        style?: "solid" | "dashed" | "dotted";
        width?: string;
    };
    motion?: {
        reducedMotion?: { duration?: string; easing?: string };
        respectPreferences?: boolean;
    };
}

Configurações de acessibilidade

Type Declaration

Optionalcontrast?: { enhanced?: number; normal?: number }

Contraste mínimo
Optionalfocus?: {
    color?: string;
    offset?: string;
    style?: "solid" | "dashed" | "dotted";
    width?: string;
}

Focus indicators
Optionalmotion?: {
reducedMotion?: { duration?: string; easing?: string };
respectPreferences?: boolean;
}

Configurações para motion

`Optional`colors

colors?: {
    background?:
        | string
        | { default?: string; main?: string; overlay?: string; paper?: string };
    border?: ColorVariant;
    components?: {
        banner?: {
            background?: string;
            border?: string;
            shadow?: string;
            text?: string;
        };
        button?: {
            outlined?: { border?: string; hover?: string; text?: string };
            primary?: { background?: string; hover?: string; text?: string };
            secondary?: { background?: string; hover?: string; text?: string };
        };
        modal?: {
            background?: string;
            border?: string;
            overlay?: string;
            text?: string;
        };
    };
    primary?: ColorVariant;
    secondary?: ColorVariant;
    semantic?: {
        error?: string;
        info?: string;
        success?: string;
        warning?: string;
    };
    text?: string
    | { disabled?: string; primary?: string; secondary?: string };
}

Sistema de cores expandido com suporte a variações e semântica

Type Declaration

Optionalbackground?: string | { default?: string; main?: string; overlay?: string; paper?: string }

Cor de fundo principal
Optionalborder?: ColorVariant

Cor da borda
Optionalcomponents?: {
    banner?: {
        background?: string;
        border?: string;
        shadow?: string;
        text?: string;
    };
    button?: {
        outlined?: { border?: string; hover?: string; text?: string };
        primary?: { background?: string; hover?: string; text?: string };
        secondary?: { background?: string; hover?: string; text?: string };
    };
    modal?: {
        background?: string;
        border?: string;
        overlay?: string;
        text?: string;
    };
}

Cores específicas para componentes
Optionalprimary?: ColorVariant

Cor primária da aplicação
Optionalsecondary?: ColorVariant

Cor secundária
Optionalsemantic?: { error?: string; info?: string; success?: string; warning?: string }

Cores semânticas para estados
Optionaltext?: string | { disabled?: string; primary?: string; secondary?: string }

Cor do texto

`Optional`effects

effects?: {
    filters?: { backdrop?: string; disabled?: string };
    shadow?: {
        banner?: string;
        button?: string;
        modal?: string;
        scale?: {
            lg?: string;
            md?: string;
            none?: string;
            sm?: string;
            xl?: string;
        };
    };
    transitions?: {
        banner?: { enter?: string; exit?: string };
        duration?: { fast?: string; normal?: string; slow?: string };
        easing?: {
            easeIn?: string;
            easeInOut?: string;
            easeOut?: string;
            linear?: string;
        };
        modal?: { enter?: string; exit?: string };
    };
}

Efeitos visuais e interações

Type Declaration

Optionalfilters?: { backdrop?: string; disabled?: string }

Blur e filtros
Optionalshadow?: {
    banner?: string;
    button?: string;
    modal?: string;
    scale?: {
        lg?: string;
        md?: string;
        none?: string;
        sm?: string;
        xl?: string;
    };
}

Sombras
- Optionalbanner?: string
- Optionalbutton?: string
- Optionalmodal?: string
- Optionalscale?: { lg?: string; md?: string; none?: string; sm?: string; xl?: string }
  
  Scale de sombras
Optionaltransitions?: {
    banner?: { enter?: string; exit?: string };
    duration?: { fast?: string; normal?: string; slow?: string };
    easing?: {
        easeIn?: string;
        easeInOut?: string;
        easeOut?: string;
        linear?: string;
    };
    modal?: { enter?: string; exit?: string };
}

Transições e animações
- Optionalbanner?: { enter?: string; exit?: string }
  
  Transições específicas
- Optionalduration?: { fast?: string; normal?: string; slow?: string }
- Optionaleasing?: { easeIn?: string; easeInOut?: string; easeOut?: string; linear?: string }
- Optionalmodal?: { enter?: string; exit?: string }

`Optional`layout

layout?: {
    backdrop?: BackdropConfig;
    borderRadius?:
        | string
        | number
        | {
            banner?: string
            | number;
            button?: string | number;
            modal?: string | number;
            scale?: {
                full?: string | number;
                lg?: string | number;
                md?: string | number;
                none?: string | number;
                sm?: string | number;
                xl?: string | number;
            };
        };
    breakpoints?: {
        desktop?: string;
        mobile?: string;
        tablet?: string;
        wide?: string;
    };
    height?: {
        banner?: HeightValue;
        button?: HeightValue;
        modal?: HeightValue;
    };
    position?: "bottom"
    | "top"
    | "floating"
    | "center";
    width?: {
        desktop?: string;
        max?: string;
        mobile?: string;
        tablet?: string;
    };
    zIndex?: {
        backdrop?: number;
        banner?: number;
        floatingButton?: number;
        modal?: number;
    };
}

Configurações de layout e posicionamento

Type Declaration

Optionalbackdrop?: BackdropConfig

Configuração do backdrop
OptionalborderRadius?:
    | string
    | number
    | {
        banner?: string
        | number;
        button?: string | number;
        modal?: string | number;
        scale?: {
            full?: string | number;
            lg?: string | number;
            md?: string | number;
            none?: string | number;
            sm?: string | number;
            xl?: string | number;
        };
    }

Border radius para componentes
Optionalbreakpoints?: { desktop?: string; mobile?: string; tablet?: string; wide?: string }

Breakpoints customizados
Optionalheight?: { banner?: HeightValue; button?: HeightValue; modal?: HeightValue }

Alturas específicas
Optionalposition?: "bottom" | "top" | "floating" | "center"

Posição do banner
Optionalwidth?: { desktop?: string; max?: string; mobile?: string; tablet?: string }

Larguras por breakpoint
OptionalzIndex?: { backdrop?: number; banner?: number; floatingButton?: number; modal?: number }

Z-index para layering

`Optional`spacing

spacing?: {
    borderRadius?: {
        banner?: string | number;
        button?: string | number;
        modal?: string | number;
        scale?: {
            full?: string | number;
            lg?: string | number;
            md?: string | number;
            none?: string | number;
            sm?: string | number;
            xl?: string | number;
        };
    };
    lg?: string
    | number;
    margin?: {
        banner?: SpacingValue;
        button?: SpacingValue;
        modal?: SpacingValue;
    };
    md?: string
    | number;
    padding?: {
        banner?: SpacingValue;
        button?: SpacingValue;
        modal?: SpacingValue;
    };
    responsive?: {
        desktop?: {
            borderRadius?: string
            | number;
            margin?: string | number;
            padding?: string | number;
        };
        mobile?: {
            borderRadius?: string
            | number;
            margin?: string | number;
            padding?: string | number;
        };
        tablet?: {
            borderRadius?: string
            | number;
            margin?: string | number;
            padding?: string | number;
        };
    };
    scale?: {
        "2xl"?: string
        | number;
        "3xl"?: string | number;
        lg?: string | number;
        md?: string | number;
        sm?: string | number;
        xl?: string | number;
        xs?: string | number;
    };
    sm?: string
    | number;
    xl?: string | number;
    xs?: string | number;
}

Sistema de espaçamento e dimensões flexível

Type Declaration

OptionalborderRadius?: {
    banner?: string | number;
    button?: string | number;
    modal?: string | number;
    scale?: {
        full?: string | number;
        lg?: string | number;
        md?: string | number;
        none?: string | number;
        sm?: string | number;
        xl?: string | number;
    };
}

Bordas arredondadas
- Optionalbanner?: string | number
- Optionalbutton?: string | number
- Optionalmodal?: string | number
- Optionalscale?: {
      full?: string | number;
      lg?: string | number;
      md?: string | number;
      none?: string | number;
      sm?: string | number;
      xl?: string | number;
  }
  
  Scale de border radius
Optionallg?: string | number
Optionalmargin?: { banner?: SpacingValue; button?: SpacingValue; modal?: SpacingValue }

Margem específica por componente
Optionalmd?: string | number
Optionalpadding?: { banner?: SpacingValue; button?: SpacingValue; modal?: SpacingValue }

Padding específico por componente
Optionalresponsive?: {
    desktop?: {
        borderRadius?: string | number;
        margin?: string | number;
        padding?: string | number;
    };
    mobile?: {
        borderRadius?: string
        | number;
        margin?: string | number;
        padding?: string | number;
    };
    tablet?: {
        borderRadius?: string
        | number;
        margin?: string | number;
        padding?: string | number;
    };
}

Configurações responsive
Optionalscale?: {
    "2xl"?: string | number;
    "3xl"?: string | number;
    lg?: string | number;
    md?: string | number;
    sm?: string | number;
    xl?: string | number;
    xs?: string | number;
}

Escala de espaçamento base
Optionalsm?: string | number
Optionalxl?: string | number
Optionalxs?: string | number

Valores diretos de espaçamento

`Optional`themes

themes?: {
    auto?: boolean;
    dark?: Partial<Omit<DesignTokens, "themes">>;
    light?: Partial<Omit<DesignTokens, "themes">>;
}

Temas e variações

Type Declaration

Optionalauto?: boolean

Auto-detecção baseada no sistema
Optionaldark?: Partial<Omit<DesignTokens, "themes">>

Configurações específicas para tema escuro
Optionallight?: Partial<Omit<DesignTokens, "themes">>

Configurações específicas para tema claro

`Optional`typography

typography?: {
    fontFamily?:
        | string
        | { monospace?: string; primary?: string; secondary?: string };
    fontSize?: {
        banner?: { button?: string; message?: string; title?: string };
        h1?: string;
        h2?: string;
        h3?: string;
        h4?: string;
        h5?: string;
        h6?: string;
        modal?: {
            body?: string;
            button?: string;
            caption?: string;
            title?: string;
        };
        scale?: {
            "2xl"?: string;
            "3xl"?: string;
            base?: string;
            lg?: string;
            sm?: string;
            xl?: string;
            xs?: string;
        };
    };
    fontWeight?: {
        bold?: number;
        light?: number;
        medium?: number;
        normal?: number;
        semibold?: number;
    };
    letterSpacing?: { normal?: string; tight?: string; wide?: string };
    lineHeight?: {
        loose?: number;
        normal?: number;
        relaxed?: number;
        tight?: number;
    };
}

Sistema tipográfico completo com hierarquia e responsive

Type Declaration

OptionalfontFamily?: string | { monospace?: string; primary?: string; secondary?: string }

Família de fontes principal
OptionalfontSize?: {
    banner?: { button?: string; message?: string; title?: string };
    h1?: string;
    h2?: string;
    h3?: string;
    h4?: string;
    h5?: string;
    h6?: string;
    modal?: {
        body?: string;
        button?: string;
        caption?: string;
        title?: string;
    };
    scale?: {
        "2xl"?: string;
        "3xl"?: string;
        base?: string;
        lg?: string;
        sm?: string;
        xl?: string;
        xs?: string;
    };
}

Tamanhos de fonte com hierarchy
- Optionalbanner?: { button?: string; message?: string; title?: string }
  
  Tamanhos para banner
- Optionalh1?: string
  
  Tamanhos específicos de cabeçalhos
- Optionalh2?: string
- Optionalh3?: string
- Optionalh4?: string
- Optionalh5?: string
- Optionalh6?: string
- Optionalmodal?: { body?: string; button?: string; caption?: string; title?: string }
  
  Tamanhos para modal
- Optionalscale?: {
      "2xl"?: string;
      "3xl"?: string;
      base?: string;
      lg?: string;
      sm?: string;
      xl?: string;
      xs?: string;
  }
  
  Scale tipográfica
OptionalfontWeight?: {
    bold?: number;
    light?: number;
    medium?: number;
    normal?: number;
    semibold?: number;
}

Pesos de fonte
OptionalletterSpacing?: { normal?: string; tight?: string; wide?: string }

Espaçamento de letras
OptionallineHeight?: { loose?: number; normal?: number; relaxed?: number; tight?: number }

Altura de linha

Interface DesignTokens

Category

Since

Remarks

Mapa de tokens (top-level)

Overrides complementares (MUI)

Example: Configuração básica

Example: Configuração avançada com responsive e estados

Index

Properties

Properties

Optionalaccessibility

Type Declaration

Optionalcontrast?: { enhanced?: number; normal?: number }

Optionalfocus?: { color?: string; offset?: string; style?: "solid" | "dashed" | "dotted"; width?: string;}

Optionalmotion?: { reducedMotion?: { duration?: string; easing?: string }; respectPreferences?: boolean;}

Optionalcolors

Type Declaration

Optionalbackground?: string | { default?: string; main?: string; overlay?: string; paper?: string }

Optionalborder?: ColorVariant

Optionalprimary?: ColorVariant

Optionalsecondary?: ColorVariant

Optionalsemantic?: { error?: string; info?: string; success?: string; warning?: string }

Optionaltext?: string | { disabled?: string; primary?: string; secondary?: string }

Optionaleffects

Type Declaration

Optionalfilters?: { backdrop?: string; disabled?: string }

Optionalshadow?: { banner?: string; button?: string; modal?: string; scale?: { lg?: string; md?: string; none?: string; sm?: string; xl?: string; };}

Optionalbanner?: string

Optionalbutton?: string

Optionalmodal?: string

Optionalscale?: { lg?: string; md?: string; none?: string; sm?: string; xl?: string }

Optionaltransitions?: { banner?: { enter?: string; exit?: string }; duration?: { fast?: string; normal?: string; slow?: string }; easing?: { easeIn?: string; easeInOut?: string; easeOut?: string; linear?: string; }; modal?: { enter?: string; exit?: string };}

Optionalbanner?: { enter?: string; exit?: string }

Optionalduration?: { fast?: string; normal?: string; slow?: string }

Optionaleasing?: { easeIn?: string; easeInOut?: string; easeOut?: string; linear?: string }

Optionalmodal?: { enter?: string; exit?: string }

Optionallayout

Type Declaration

Optionalbackdrop?: BackdropConfig

OptionalborderRadius?: | string | number | { banner?: string | number; button?: string | number; modal?: string | number; scale?: { full?: string | number; lg?: string | number; md?: string | number; none?: string | number; sm?: string | number; xl?: string | number; }; }

Optionalbreakpoints?: { desktop?: string; mobile?: string; tablet?: string; wide?: string }

Optionalheight?: { banner?: HeightValue; button?: HeightValue; modal?: HeightValue }

Optionalposition?: "bottom" | "top" | "floating" | "center"

Optionalwidth?: { desktop?: string; max?: string; mobile?: string; tablet?: string }

OptionalzIndex?: { backdrop?: number; banner?: number; floatingButton?: number; modal?: number }

Optionalspacing

Type Declaration

OptionalborderRadius?: { banner?: string | number; button?: string | number; modal?: string | number; scale?: { full?: string | number; lg?: string | number; md?: string | number; none?: string | number; sm?: string | number; xl?: string | number; };}

Optionalbanner?: string | number

Optionalbutton?: string | number

Optionalmodal?: string | number

Optionalscale?: { full?: string | number; lg?: string | number; md?: string | number; none?: string | number; sm?: string | number; xl?: string | number;}

Optionallg?: string | number

Optionalmargin?: { banner?: SpacingValue; button?: SpacingValue; modal?: SpacingValue }

Optionalmd?: string | number

Optionalpadding?: { banner?: SpacingValue; button?: SpacingValue; modal?: SpacingValue }

Optionalscale?: { "2xl"?: string | number; "3xl"?: string | number; lg?: string | number; md?: string | number; sm?: string | number; xl?: string | number; xs?: string | number;}

Optionalsm?: string | number

Optionalxl?: string | number

Optionalxs?: string | number

Optionalthemes

Type Declaration

Optionalauto?: boolean

Optionaldark?: Partial<Omit<DesignTokens, "themes">>

Optionallight?: Partial<Omit<DesignTokens, "themes">>

Optionaltypography

Type Declaration

OptionalfontFamily?: string | { monospace?: string; primary?: string; secondary?: string }

Optionalbanner?: { button?: string; message?: string; title?: string }

Optionalh1?: string

Optionalh2?: string

Optionalh3?: string

Optionalh4?: string

Optionalh5?: string

Optionalh6?: string

Optionalmodal?: { body?: string; button?: string; caption?: string; title?: string }

Optionalscale?: { "2xl"?: string; "3xl"?: string; base?: string; lg?: string; sm?: string; xl?: string; xs?: string;}

OptionalfontWeight?: { bold?: number; light?: number; medium?: number; normal?: number; semibold?: number;}

OptionalletterSpacing?: { normal?: string; tight?: string; wide?: string }

`Optional`accessibility

`Optional`contrast?: { enhanced?: number; normal?: number }

`Optional`focus?: {
color?: string;
offset?: string;
style?: "solid" | "dashed" | "dotted";
width?: string;
}

`Optional`motion?: {
reducedMotion?: { duration?: string; easing?: string };
respectPreferences?: boolean;
}

`Optional`colors

`Optional`background?: string | { default?: string; main?: string; overlay?: string; paper?: string }

`Optional`border?: ColorVariant

`Optional`primary?: ColorVariant

`Optional`secondary?: ColorVariant

`Optional`semantic?: { error?: string; info?: string; success?: string; warning?: string }

`Optional`text?: string | { disabled?: string; primary?: string; secondary?: string }

`Optional`effects

`Optional`filters?: { backdrop?: string; disabled?: string }

`Optional`shadow?: {
banner?: string;
button?: string;
modal?: string;
scale?: {
lg?: string;
md?: string;
none?: string;
sm?: string;
xl?: string;
};
}

`Optional`banner?: string

`Optional`button?: string

`Optional`modal?: string

`Optional`scale?: { lg?: string; md?: string; none?: string; sm?: string; xl?: string }

`Optional`transitions?: {
banner?: { enter?: string; exit?: string };
duration?: { fast?: string; normal?: string; slow?: string };
easing?: {
easeIn?: string;
easeInOut?: string;
easeOut?: string;
linear?: string;
};
modal?: { enter?: string; exit?: string };
}

`Optional`banner?: { enter?: string; exit?: string }

`Optional`duration?: { fast?: string; normal?: string; slow?: string }

`Optional`easing?: { easeIn?: string; easeInOut?: string; easeOut?: string; linear?: string }

`Optional`modal?: { enter?: string; exit?: string }

`Optional`layout

`Optional`backdrop?: BackdropConfig

`Optional`borderRadius?:
| string
| number
| {
banner?: string
| number;
button?: string | number;
modal?: string | number;
scale?: {
full?: string | number;
lg?: string | number;
md?: string | number;
none?: string | number;
sm?: string | number;
xl?: string | number;
};
}

`Optional`breakpoints?: { desktop?: string; mobile?: string; tablet?: string; wide?: string }

`Optional`height?: { banner?: HeightValue; button?: HeightValue; modal?: HeightValue }

`Optional`position?: "bottom" | "top" | "floating" | "center"

`Optional`width?: { desktop?: string; max?: string; mobile?: string; tablet?: string }

`Optional`zIndex?: { backdrop?: number; banner?: number; floatingButton?: number; modal?: number }

`Optional`spacing

`Optional`borderRadius?: {
banner?: string | number;
button?: string | number;
modal?: string | number;
scale?: {
full?: string | number;
lg?: string | number;
md?: string | number;
none?: string | number;
sm?: string | number;
xl?: string | number;
};
}

`Optional`banner?: string | number

`Optional`button?: string | number

`Optional`modal?: string | number

`Optional`scale?: {
full?: string | number;
lg?: string | number;
md?: string | number;
none?: string | number;
sm?: string | number;
xl?: string | number;
}

`Optional`lg?: string | number

`Optional`margin?: { banner?: SpacingValue; button?: SpacingValue; modal?: SpacingValue }

`Optional`md?: string | number

`Optional`padding?: { banner?: SpacingValue; button?: SpacingValue; modal?: SpacingValue }

`Optional`scale?: {
"2xl"?: string | number;
"3xl"?: string | number;
lg?: string | number;
md?: string | number;
sm?: string | number;
xl?: string | number;
xs?: string | number;
}

`Optional`sm?: string | number

`Optional`xl?: string | number

`Optional`xs?: string | number

`Optional`themes

`Optional`auto?: boolean

`Optional`dark?: Partial<Omit<DesignTokens, "themes">>

`Optional`light?: Partial<Omit<DesignTokens, "themes">>

`Optional`typography

`Optional`fontFamily?: string | { monospace?: string; primary?: string; secondary?: string }

`Optional`banner?: { button?: string; message?: string; title?: string }

`Optional`h1?: string

`Optional`h2?: string

`Optional`h3?: string

`Optional`h4?: string

`Optional`h5?: string

`Optional`h6?: string

`Optional`modal?: { body?: string; button?: string; caption?: string; title?: string }

`Optional`scale?: {
"2xl"?: string;
"3xl"?: string;
base?: string;
lg?: string;
sm?: string;
xl?: string;
xs?: string;
}

`Optional`fontWeight?: {
bold?: number;
light?: number;
medium?: number;
normal?: number;
semibold?: number;
}

`Optional`letterSpacing?: { normal?: string; tight?: string; wide?: string }

`Optional`lineHeight?: { loose?: number; normal?: number; relaxed?: number; tight?: number }