Interface Theme

Theme interface for customizing the design system.

Custom classes can be specified for each component. Custom values can be specified for variables.

interface Theme {
    classes?: {
        avatar?: string;
        badge?: string;
        button?: string;
        chatMessage?: string;
        chatMessagePrimary?: string;
        checkbox?: string;
        checkboxField?: string;
        chip?: string;
        circularProgressIndicator?: string;
        dropzone?: string;
        faq?: string;
        footer?: string;
        footerNavigation?: string;
        heroImage?: string;
        howToUse?: string;
        icon?: string;
        input?: string;
        inputDate?: string;
        inputText?: string;
        inputTime?: string;
        link?: string;
        menu?: string;
        merits?: string;
        modal?: string;
        navbar?: string;
        newProductList?: string;
        page?: string;
        pagination?: string;
        radioGroup?: string;
        radioGroupItem?: string;
        row?: string;
        searchByButtons?: string;
        searchByChips?: string;
        select?: string;
        showPageStatus?: string;
        sidebar?: string;
        skeletonLine?: string;
        step?: string;
        switch?: string;
        tab?: string;
        table?: string;
        tag?: string;
        toast?: string;
        typography?: string;
    };
    configs?: {
        timezone?: string;
    };
    variables?: {
        --border-radius-1?: string;
        --border-radius-2?: string;
        --border-radius-3?: string;
        --border-radius-4?: string;
        --border-radius-5?: string;
        --border-radius-6?: string;
        --box-shadow-1?: string;
        --box-shadow-2?: string;
        --box-shadow-3?: string;
        --box-shadow-4?: string;
        --box-shadow-5?: string;
        --box-shadow-6?: string;
        --box-shadow-7?: string;
        --color-additional-1?: string;
        --color-additional-10?: string;
        --color-additional-2?: string;
        --color-additional-3?: string;
        --color-additional-4?: string;
        --color-additional-5?: string;
        --color-additional-6?: string;
        --color-additional-7?: string;
        --color-additional-8?: string;
        --color-additional-9?: string;
        --color-background?: string;
        --color-border-high-emphasis?: string;
        --color-border-low-emphasis?: string;
        --color-border-mid-emphasis?: string;
        --color-brand?: string;
        --color-error?: string;
        --color-error-100?: string;
        --color-error-200?: string;
        --color-error-300?: string;
        --color-error-400?: string;
        --color-error-50?: string;
        --color-error-500?: string;
        --color-error-600?: string;
        --color-error-700?: string;
        --color-error-800?: string;
        --color-error-900?: string;
        --color-feedback-high-emphasis?: string;
        --color-feedback-low-emphasis?: string;
        --color-feedback-mid-emphasis?: string;
        --color-grey-100?: string;
        --color-grey-200?: string;
        --color-grey-25?: string;
        --color-grey-300?: string;
        --color-grey-400?: string;
        --color-grey-50?: string;
        --color-grey-500?: string;
        --color-grey-600?: string;
        --color-grey-700?: string;
        --color-grey-75?: string;
        --color-grey-800?: string;
        --color-grey-900?: string;
        --color-highlight-error?: string;
        --color-highlight-text-selected?: string;
        --color-object-accent-primary?: string;
        --color-object-accent-primary-emphasis?: string;
        --color-object-disable?: string;
        --color-object-mid-emphasis?: string;
        --color-overlay?: string;
        --color-primary-100?: string;
        --color-primary-200?: string;
        --color-primary-25?: string;
        --color-primary-300?: string;
        --color-primary-400?: string;
        --color-primary-50?: string;
        --color-primary-500?: string;
        --color-primary-600?: string;
        --color-primary-700?: string;
        --color-primary-800?: string;
        --color-primary-900?: string;
        --color-surface-accent-high-emphasis?: string;
        --color-surface-accent-light-low-emphasis?: string;
        --color-surface-accent-mid-emphasis?: string;
        --color-surface-disable?: string;
        --color-surface-primary?: string;
        --color-surface-secondary?: string;
        --color-surface-tertiary?: string;
        --color-text-accent-primary?: string;
        --color-text-disable?: string;
        --color-text-link?: string;
        --color-text-low-emphasis?: string;
        --color-text-mid-emphasis?: string;
        --color-text-on-error?: string;
        --color-text-on-primary?: string;
        --color-text-placeholder?: string;
        --color-white?: string;
        --font-family?: string;
        --font-size-100?: string;
        --font-size-1000?: string;
        --font-size-1100?: string;
        --font-size-1200?: string;
        --font-size-1300?: string;
        --font-size-150?: string;
        --font-size-200?: string;
        --font-size-300?: string;
        --font-size-400?: string;
        --font-size-50?: string;
        --font-size-500?: string;
        --font-size-600?: string;
        --font-size-700?: string;
        --font-size-75?: string;
        --font-size-800?: string;
        --font-size-900?: string;
        --font-weight-bold?: string;
        --font-weight-regular?: string;
        --icon-size-3xl?: string;
        --icon-size-4xl?: string;
        --icon-size-l?: string;
        --icon-size-m?: string;
        --icon-size-s?: string;
        --icon-size-xl?: string;
        --icon-size-xs?: string;
        --icon-size-xxl?: string;
        --icon-size-xxs?: string;
        --spacing-3xl?: string;
        --spacing-3xs?: string;
        --spacing-4xl?: string;
        --spacing-4xs?: string;
        --spacing-5xl?: string;
        --spacing-5xs?: string;
        --spacing-6xs?: string;
        --spacing-7xs?: string;
        --spacing-l?: string;
        --spacing-m?: string;
        --spacing-s?: string;
        --spacing-xl?: string;
        --spacing-xs?: string;
        --spacing-xxl?: string;
        --spacing-xxs?: string;
    };
}

Properties

classes? configs? variables?

Properties

Optional classes

classes?: {
    avatar?: string;
    badge?: string;
    button?: string;
    chatMessage?: string;
    chatMessagePrimary?: string;
    checkbox?: string;
    checkboxField?: string;
    chip?: string;
    circularProgressIndicator?: string;
    dropzone?: string;
    faq?: string;
    footer?: string;
    footerNavigation?: string;
    heroImage?: string;
    howToUse?: string;
    icon?: string;
    input?: string;
    inputDate?: string;
    inputText?: string;
    inputTime?: string;
    link?: string;
    menu?: string;
    merits?: string;
    modal?: string;
    navbar?: string;
    newProductList?: string;
    page?: string;
    pagination?: string;
    radioGroup?: string;
    radioGroupItem?: string;
    row?: string;
    searchByButtons?: string;
    searchByChips?: string;
    select?: string;
    showPageStatus?: string;
    sidebar?: string;
    skeletonLine?: string;
    step?: string;
    switch?: string;
    tab?: string;
    table?: string;
    tag?: string;
    toast?: string;
    typography?: string;
}

Type declaration

  • Optional avatar?: string
  • Optional badge?: string
  • Optional button?: string
  • Optional chatMessage?: string
  • Optional chatMessagePrimary?: string
  • Optional checkbox?: string
  • Optional checkboxField?: string
  • Optional chip?: string
  • Optional circularProgressIndicator?: string
  • Optional dropzone?: string
  • Optional faq?: string
  • Optional footer?: string
  • Optional footerNavigation?: string
  • Optional heroImage?: string
  • Optional howToUse?: string
  • Optional icon?: string
  • Optional input?: string
  • Optional inputDate?: string
  • Optional inputText?: string
  • Optional inputTime?: string
  • Optional link?: string
  • Optional menu?: string
  • Optional merits?: string
  • Optional modal?: string
  • Optional navbar?: string
  • Optional newProductList?: string
  • Optional page?: string
  • Optional pagination?: string
  • Optional radioGroup?: string
  • Optional radioGroupItem?: string
  • Optional row?: string
  • Optional searchByButtons?: string
  • Optional searchByChips?: string
  • Optional select?: string
  • Optional showPageStatus?: string
  • Optional sidebar?: string
  • Optional skeletonLine?: string
  • Optional step?: string
  • Optional switch?: string
  • Optional tab?: string
  • Optional table?: string
  • Optional tag?: string
  • Optional toast?: string
  • Optional typography?: string

Optional configs

configs?: {
    timezone?: string;
}

Type declaration

  • Optional timezone?: string

Optional variables

variables?: {
    --border-radius-1?: string;
    --border-radius-2?: string;
    --border-radius-3?: string;
    --border-radius-4?: string;
    --border-radius-5?: string;
    --border-radius-6?: string;
    --box-shadow-1?: string;
    --box-shadow-2?: string;
    --box-shadow-3?: string;
    --box-shadow-4?: string;
    --box-shadow-5?: string;
    --box-shadow-6?: string;
    --box-shadow-7?: string;
    --color-additional-1?: string;
    --color-additional-10?: string;
    --color-additional-2?: string;
    --color-additional-3?: string;
    --color-additional-4?: string;
    --color-additional-5?: string;
    --color-additional-6?: string;
    --color-additional-7?: string;
    --color-additional-8?: string;
    --color-additional-9?: string;
    --color-background?: string;
    --color-border-high-emphasis?: string;
    --color-border-low-emphasis?: string;
    --color-border-mid-emphasis?: string;
    --color-brand?: string;
    --color-error?: string;
    --color-error-100?: string;
    --color-error-200?: string;
    --color-error-300?: string;
    --color-error-400?: string;
    --color-error-50?: string;
    --color-error-500?: string;
    --color-error-600?: string;
    --color-error-700?: string;
    --color-error-800?: string;
    --color-error-900?: string;
    --color-feedback-high-emphasis?: string;
    --color-feedback-low-emphasis?: string;
    --color-feedback-mid-emphasis?: string;
    --color-grey-100?: string;
    --color-grey-200?: string;
    --color-grey-25?: string;
    --color-grey-300?: string;
    --color-grey-400?: string;
    --color-grey-50?: string;
    --color-grey-500?: string;
    --color-grey-600?: string;
    --color-grey-700?: string;
    --color-grey-75?: string;
    --color-grey-800?: string;
    --color-grey-900?: string;
    --color-highlight-error?: string;
    --color-highlight-text-selected?: string;
    --color-object-accent-primary?: string;
    --color-object-accent-primary-emphasis?: string;
    --color-object-disable?: string;
    --color-object-mid-emphasis?: string;
    --color-overlay?: string;
    --color-primary-100?: string;
    --color-primary-200?: string;
    --color-primary-25?: string;
    --color-primary-300?: string;
    --color-primary-400?: string;
    --color-primary-50?: string;
    --color-primary-500?: string;
    --color-primary-600?: string;
    --color-primary-700?: string;
    --color-primary-800?: string;
    --color-primary-900?: string;
    --color-surface-accent-high-emphasis?: string;
    --color-surface-accent-light-low-emphasis?: string;
    --color-surface-accent-mid-emphasis?: string;
    --color-surface-disable?: string;
    --color-surface-primary?: string;
    --color-surface-secondary?: string;
    --color-surface-tertiary?: string;
    --color-text-accent-primary?: string;
    --color-text-disable?: string;
    --color-text-link?: string;
    --color-text-low-emphasis?: string;
    --color-text-mid-emphasis?: string;
    --color-text-on-error?: string;
    --color-text-on-primary?: string;
    --color-text-placeholder?: string;
    --color-white?: string;
    --font-family?: string;
    --font-size-100?: string;
    --font-size-1000?: string;
    --font-size-1100?: string;
    --font-size-1200?: string;
    --font-size-1300?: string;
    --font-size-150?: string;
    --font-size-200?: string;
    --font-size-300?: string;
    --font-size-400?: string;
    --font-size-50?: string;
    --font-size-500?: string;
    --font-size-600?: string;
    --font-size-700?: string;
    --font-size-75?: string;
    --font-size-800?: string;
    --font-size-900?: string;
    --font-weight-bold?: string;
    --font-weight-regular?: string;
    --icon-size-3xl?: string;
    --icon-size-4xl?: string;
    --icon-size-l?: string;
    --icon-size-m?: string;
    --icon-size-s?: string;
    --icon-size-xl?: string;
    --icon-size-xs?: string;
    --icon-size-xxl?: string;
    --icon-size-xxs?: string;
    --spacing-3xl?: string;
    --spacing-3xs?: string;
    --spacing-4xl?: string;
    --spacing-4xs?: string;
    --spacing-5xl?: string;
    --spacing-5xs?: string;
    --spacing-6xs?: string;
    --spacing-7xs?: string;
    --spacing-l?: string;
    --spacing-m?: string;
    --spacing-s?: string;
    --spacing-xl?: string;
    --spacing-xs?: string;
    --spacing-xxl?: string;
    --spacing-xxs?: string;
}

Type declaration

  • Optional --border-radius-1?: string
  • Optional --border-radius-2?: string
  • Optional --border-radius-3?: string
  • Optional --border-radius-4?: string
  • Optional --border-radius-5?: string
  • Optional --border-radius-6?: string
  • Optional --box-shadow-1?: string
  • Optional --box-shadow-2?: string
  • Optional --box-shadow-3?: string
  • Optional --box-shadow-4?: string
  • Optional --box-shadow-5?: string
  • Optional --box-shadow-6?: string
  • Optional --box-shadow-7?: string
  • Optional --color-additional-1?: string
  • Optional --color-additional-10?: string
  • Optional --color-additional-2?: string
  • Optional --color-additional-3?: string
  • Optional --color-additional-4?: string
  • Optional --color-additional-5?: string
  • Optional --color-additional-6?: string
  • Optional --color-additional-7?: string
  • Optional --color-additional-8?: string
  • Optional --color-additional-9?: string
  • Optional --color-background?: string
  • Optional --color-border-high-emphasis?: string
  • Optional --color-border-low-emphasis?: string
  • Optional --color-border-mid-emphasis?: string
  • Optional --color-brand?: string
  • Optional --color-error?: string
  • Optional --color-error-100?: string
  • Optional --color-error-200?: string
  • Optional --color-error-300?: string
  • Optional --color-error-400?: string
  • Optional --color-error-50?: string
  • Optional --color-error-500?: string
  • Optional --color-error-600?: string
  • Optional --color-error-700?: string
  • Optional --color-error-800?: string
  • Optional --color-error-900?: string
  • Optional --color-feedback-high-emphasis?: string
  • Optional --color-feedback-low-emphasis?: string
  • Optional --color-feedback-mid-emphasis?: string
  • Optional --color-grey-100?: string
  • Optional --color-grey-200?: string
  • Optional --color-grey-25?: string
  • Optional --color-grey-300?: string
  • Optional --color-grey-400?: string
  • Optional --color-grey-50?: string
  • Optional --color-grey-500?: string
  • Optional --color-grey-600?: string
  • Optional --color-grey-700?: string
  • Optional --color-grey-75?: string
  • Optional --color-grey-800?: string
  • Optional --color-grey-900?: string
  • Optional --color-highlight-error?: string
  • Optional --color-highlight-text-selected?: string
  • Optional --color-object-accent-primary?: string
  • Optional --color-object-accent-primary-emphasis?: string
  • Optional --color-object-disable?: string
  • Optional --color-object-mid-emphasis?: string
  • Optional --color-overlay?: string
  • Optional --color-primary-100?: string
  • Optional --color-primary-200?: string
  • Optional --color-primary-25?: string
  • Optional --color-primary-300?: string
  • Optional --color-primary-400?: string
  • Optional --color-primary-50?: string
  • Optional --color-primary-500?: string
  • Optional --color-primary-600?: string
  • Optional --color-primary-700?: string
  • Optional --color-primary-800?: string
  • Optional --color-primary-900?: string
  • Optional --color-surface-accent-high-emphasis?: string
  • Optional --color-surface-accent-light-low-emphasis?: string
  • Optional --color-surface-accent-mid-emphasis?: string
  • Optional --color-surface-disable?: string
  • Optional --color-surface-primary?: string
  • Optional --color-surface-secondary?: string
  • Optional --color-surface-tertiary?: string
  • Optional --color-text-accent-primary?: string
  • Optional --color-text-disable?: string
  • Optional --color-text-link?: string
  • Optional --color-text-low-emphasis?: string
  • Optional --color-text-mid-emphasis?: string
  • Optional --color-text-on-error?: string
  • Optional --color-text-on-primary?: string
  • Optional --color-text-placeholder?: string
  • Optional --color-white?: string
  • Optional --font-family?: string
  • Optional --font-size-100?: string
  • Optional --font-size-1000?: string
  • Optional --font-size-1100?: string
  • Optional --font-size-1200?: string
  • Optional --font-size-1300?: string
  • Optional --font-size-150?: string
  • Optional --font-size-200?: string
  • Optional --font-size-300?: string
  • Optional --font-size-400?: string
  • Optional --font-size-50?: string
  • Optional --font-size-500?: string
  • Optional --font-size-600?: string
  • Optional --font-size-700?: string
  • Optional --font-size-75?: string
  • Optional --font-size-800?: string
  • Optional --font-size-900?: string
  • Optional --font-weight-bold?: string
  • Optional --font-weight-regular?: string
  • Optional --icon-size-3xl?: string
  • Optional --icon-size-4xl?: string
  • Optional --icon-size-l?: string
  • Optional --icon-size-m?: string
  • Optional --icon-size-s?: string
  • Optional --icon-size-xl?: string
  • Optional --icon-size-xs?: string
  • Optional --icon-size-xxl?: string
  • Optional --icon-size-xxs?: string
  • Optional --spacing-3xl?: string
  • Optional --spacing-3xs?: string
  • Optional --spacing-4xl?: string
  • Optional --spacing-4xs?: string
  • Optional --spacing-5xl?: string
  • Optional --spacing-5xs?: string
  • Optional --spacing-6xs?: string
  • Optional --spacing-7xs?: string
  • Optional --spacing-l?: string
  • Optional --spacing-m?: string
  • Optional --spacing-s?: string
  • Optional --spacing-xl?: string
  • Optional --spacing-xs?: string
  • Optional --spacing-xxl?: string
  • Optional --spacing-xxs?: string

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc