@sinchsmb/ui-kit/dist/types/theme/types.d.ts

UI kit for SinchSMB frontend

/**
 * Generated by @sinchsmb/update-themes
 * do not edit by hand
 */
export type BorderRadiusToken = string;
export type BoxShadowToken = string;
export type ColorToken = string;
export type FontFamilyToken = string;
export type OtherToken = string;
export type TypographyToken = string;
export interface DefaultTheme {
    ref: {
        palette: {
            gray: {
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.06:1 against background #ffffff */
                25: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.13:1 against background #ffffff */
                50: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.3:1 against background #ffffff */
                100: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.48:1 against background #ffffff */
                150: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.71:1 against background #ffffff */
                200: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.96:1 against background #ffffff */
                250: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.3:1 against background #ffffff */
                300: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.68:1 against background #ffffff */
                350: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 3.15:1 against background #ffffff */
                400: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 3.74:1 against background #ffffff */
                450: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 4.48:1 against background #ffffff */
                500: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 5.41:1 against background #ffffff */
                550: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 6.48:1 against background #ffffff */
                600: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 9.29:1 against background #ffffff */
                700: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 13.2:1 against background #ffffff */
                800: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 17.22:1 against background #ffffff */
                900: ColorToken;
            };
            green: {
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.06:1 against background #ffffff */
                25: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.13:1 against background #ffffff */
                50: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.3:1 against background #ffffff */
                100: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.48:1 against background #ffffff */
                150: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.71:1 against background #ffffff */
                200: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.96:1 against background #ffffff */
                250: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.3:1 against background #ffffff */
                300: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.68:1 against background #ffffff */
                350: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 3.15:1 against background #ffffff */
                400: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 3.74:1 against background #ffffff */
                450: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 4.48:1 against background #ffffff */
                500: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 5.41:1 against background #ffffff */
                550: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 6.48:1 against background #ffffff */
                600: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 9.29:1 against background #ffffff */
                700: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 13.2:1 against background #ffffff */
                800: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 17.22:1 against background #ffffff */
                900: ColorToken;
            };
            blue: {
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.06:1 against background #ffffff */
                25: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.13:1 against background #ffffff */
                50: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.3:1 against background #ffffff */
                100: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.48:1 against background #ffffff */
                150: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.71:1 against background #ffffff */
                200: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.96:1 against background #ffffff */
                250: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.3:1 against background #ffffff */
                300: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.68:1 against background #ffffff */
                350: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 3.15:1 against background #ffffff */
                400: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 3.74:1 against background #ffffff */
                450: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 4.48:1 against background #ffffff */
                500: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 5.41:1 against background #ffffff */
                550: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 6.48:1 against background #ffffff */
                600: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 9.29:1 against background #ffffff */
                700: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 13.2:1 against background #ffffff */
                800: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 17.22:1 against background #ffffff. */
                900: ColorToken;
            };
            purple: {
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.06:1 against background #ffffff */
                25: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.13:1 against background #ffffff */
                50: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.3:1 against background #ffffff */
                100: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.48:1 against background #ffffff */
                150: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.71:1 against background #ffffff */
                200: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.96:1 against background #ffffff */
                250: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.3:1 against background #ffffff */
                300: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.68:1 against background #ffffff */
                350: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 3.15:1 against background #ffffff */
                400: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 3.74:1 against background #ffffff */
                450: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 4.48:1 against background #ffffff */
                500: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 5.41:1 against background #ffffff */
                550: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 6.48:1 against background #ffffff */
                600: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 9.29:1 against background #ffffff */
                700: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 13.2:1 against background #ffffff */
                800: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 17.22:1 against background #ffffff */
                900: ColorToken;
            };
            pink: {
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.06:1 against background #ffffff */
                25: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.13:1 against background #ffffff */
                50: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.3:1 against background #ffffff */
                100: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.48:1 against background #ffffff */
                150: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.71:1 against background #ffffff */
                200: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.96:1 against background #ffffff */
                250: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.3:1 against background #ffffff */
                300: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.68:1 against background #ffffff */
                350: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 3.15:1 against background #ffffff */
                400: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 3.74:1 against background #ffffff */
                450: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 4.48:1 against background #ffffff */
                500: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 5.41:1 against background #ffffff */
                550: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 6.48:1 against background #ffffff */
                600: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 9.29:1 against background #ffffff */
                700: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 13.2:1 against background #ffffff */
                800: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 17.22:1 against background #ffffff */
                900: ColorToken;
            };
            red: {
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.06:1 against background #ffffff */
                25: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.13:1 against background #ffffff */
                50: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.3:1 against background #ffffff */
                100: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.48:1 against background #ffffff */
                150: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.71:1 against background #ffffff */
                200: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.96:1 against background #ffffff */
                250: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.3:1 against background #ffffff */
                300: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.68:1 against background #ffffff */
                350: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 3.15:1 against background #ffffff */
                400: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 3.74:1 against background #ffffff */
                450: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 4.48:1 against background #ffffff */
                500: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 5.41:1 against background #ffffff */
                550: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 6.48:1 against background #ffffff */
                600: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 9.29:1 against background #ffffff */
                700: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 13.2:1 against background #ffffff */
                800: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 17.22:1 against background #ffffff */
                900: ColorToken;
            };
            orange: {
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.06:1 against background #ffffff */
                25: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.13:1 against background #ffffff */
                50: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.3:1 against background #ffffff */
                100: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.48:1 against background #ffffff */
                150: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.71:1 against background #ffffff */
                200: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.96:1 against background #ffffff */
                250: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.3:1 against background #ffffff */
                300: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.68:1 against background #ffffff */
                350: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 3.15:1 against background #ffffff */
                400: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 3.74:1 against background #ffffff */
                450: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 4.48:1 against background #ffffff */
                500: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 5.41:1 against background #ffffff */
                550: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 6.48:1 against background #ffffff */
                600: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 9.29:1 against background #ffffff */
                700: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 13.2:1 against background #ffffff */
                800: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 17.22:1 against background #ffffff */
                900: ColorToken;
            };
            yellow: {
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.06:1 against background #ffffff */
                25: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.13:1 against background #ffffff */
                50: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.3:1 against background #ffffff */
                100: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.48:1 against background #ffffff */
                150: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.71:1 against background #ffffff */
                200: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 1.96:1 against background #ffffff */
                250: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.3:1 against background #ffffff */
                300: ColorToken;
                /** Do not use for UI elements or text. WCAG 2.x (relative luminance) contrast is 2.68:1 against background #ffffff */
                350: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 3.15:1 against background #ffffff */
                400: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 3.74:1 against background #ffffff */
                450: ColorToken;
                /** Color can be used for UI elements or large text. WCAG 2.x (relative luminance) contrast is 4.48:1 against background #ffffff */
                500: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 5.41:1 against background #ffffff */
                550: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 6.48:1 against background #ffffff */
                600: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 9.29:1 against background #ffffff */
                700: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 13.2:1 against background #ffffff */
                800: ColorToken;
                /** Color can be used for small text. WCAG 2.x (relative luminance) contrast is 17.22:1 against background #ffffff */
                900: ColorToken;
            };
        };
        'font-family': {
            body: FontFamilyToken;
            mono: FontFamilyToken;
        };
    };
    sys: {
        radius: {
            /** Form item border radius */
            'form-item': BorderRadiusToken;
        };
        color: {
            danger: ColorToken;
            warning: ColorToken;
            success: ColorToken;
            divider: ColorToken;
            /** The general bacground for the main App container */
            background: ColorToken;
            white: ColorToken;
            transparent: ColorToken;
            primary: {
                /** The color is used mostly to emphasize active elements or CTAs */
                default: ColorToken;
                backdrop: {
                    hover: ColorToken;
                    active: ColorToken;
                };
            };
            input: {
                border: {
                    default: ColorToken;
                    focus: ColorToken;
                    invalid: ColorToken;
                    disabled: ColorToken;
                };
                background: {
                    default: ColorToken;
                    disabled: ColorToken;
                };
            };
            text: {
                primary: ColorToken;
                secondary: ColorToken;
                disabled: ColorToken;
            };
            list: {
                hover: ColorToken;
                selected: ColorToken;
            };
        };
        shadow: {
            /** External focus effect. Works fine in most cases. */
            focus: BoxShadowToken;
            /** External selection effect. You can use it to highlight a selected object to make the selection more visible. E.g.: Avatar Group */
            selection: BoxShadowToken;
            elevation: {
                /** Reset alivation. Use for animations */
                0: BoxShadowToken;
                2: BoxShadowToken;
                /** Filled not pressed buttons */
                4: BoxShadowToken;
                /** Cards, dropdowns, toasts */
                8: BoxShadowToken;
                /** Popup menus */
                16: BoxShadowToken;
                /** Modal windows and dialogs */
                32: BoxShadowToken;
            };
        };
        'timing-function': {
            /** Smooth timing function used in 0.3s animations */
            smooth: OtherToken;
        };
        typography: {
            /** The main font sets are added as global (sys) values and can be used as reference for other font styles */
            'section-headline': TypographyToken;
            /** The main font sets are added as global (sys) values and can be used as reference for other font styles */
            'card-title': TypographyToken;
            /** The main font sets are added as global (sys) values and can be used as reference for other font styles */
            'card-subtitle': TypographyToken;
            /** The main font sets are added as global (sys) values and can be used as reference for other font styles */
            'group-header': TypographyToken;
            /** The main font sets are added as global (sys) values and can be used as reference for other font styles */
            body: TypographyToken;
            /** The main font sets are added as global (sys) values and can be used as reference for other font styles */
            'body-strong': TypographyToken;
            /** The main font sets are added as global (sys) values and can be used as reference for other font styles */
            'body-link': TypographyToken;
            /** The main font sets are added as global (sys) values and can be used as reference for other font styles */
            caption: TypographyToken;
            /** The main font sets are added as global (sys) values and can be used as reference for other font styles */
            'caption-link': TypographyToken;
        };
    };
    comp: {
        button: {
            primary: {
                background: {
                    /** Primary button background. Used only for this component. */
                    default: ColorToken;
                    /** Primary button background on hover. Used only for this component. */
                    hover: ColorToken;
                    /** Primary button background on active/pressed. Used only for this component. */
                    active: ColorToken;
                    /** This color is inherited from themes */
                    toggled: ColorToken;
                    disabled: ColorToken;
                };
                border: {
                    /** This color inherits the corresponding background value. Feel free to customize it in your theme. */
                    default: ColorToken;
                    /** This color inherits the corresponding background value. Feel free to customize it in your theme. */
                    hover: ColorToken;
                    /** This color inherits the corresponding background value. Feel free to customize it in your theme. */
                    active: ColorToken;
                    /** This color inherits the corresponding background value. Feel free to customize it in your theme. */
                    toggled: ColorToken;
                    disabled: ColorToken;
                };
                text: {
                    /** Always contrast to the Primary Button background. */
                    default: ColorToken;
                    /** Always contrast to the Primary Button background. */
                    hover: ColorToken;
                    /** Always contrast to the Primary Button background. */
                    active: ColorToken;
                    /** Always contrast to the Primary Button background. */
                    toggled: ColorToken;
                    disabled: ColorToken;
                };
                elevation: {
                    default: BoxShadowToken;
                    hover: BoxShadowToken;
                };
            };
            default: {
                background: {
                    default: ColorToken;
                    /** This color is inherited from themes */
                    hover: ColorToken;
                    /** This color is inherited from themes */
                    active: ColorToken;
                    /** This color is inherited from themes */
                    toggled: ColorToken;
                    disabled: ColorToken;
                };
                border: {
                    /** This color is inherited from themes */
                    default: ColorToken;
                    /** This color is inherited from themes */
                    hover: ColorToken;
                    /** This color is inherited from themes */
                    active: ColorToken;
                    /** This color is inherited from themes */
                    toggled: ColorToken;
                    disabled: ColorToken;
                };
                text: {
                    /** This color is inherited from themes */
                    default: ColorToken;
                    /** This color is inherited from themes */
                    hover: ColorToken;
                    /** This color is inherited from themes */
                    active: ColorToken;
                    /** This color is inherited from themes */
                    toggled: ColorToken;
                    disabled: ColorToken;
                };
                elevation: {
                    default: BoxShadowToken;
                    hover: BoxShadowToken;
                };
            };
            subtle: {
                background: {
                    default: ColorToken;
                    /** This color is inherited from themes */
                    hover: ColorToken;
                    /** This color is inherited from themes */
                    active: ColorToken;
                    /** This color is inherited from themes */
                    toggled: ColorToken;
                    disabled: ColorToken;
                };
                border: {
                    default: ColorToken;
                    /** This color is inherited from themes */
                    hover: ColorToken;
                    /** This color is inherited from themes */
                    active: ColorToken;
                    /** This color is inherited from themes */
                    toggled: ColorToken;
                    disabled: ColorToken;
                };
                text: {
                    default: ColorToken;
                    hover: ColorToken;
                    active: ColorToken;
                    toggled: ColorToken;
                    disabled: ColorToken;
                };
            };
            subtlePrimary: {
                background: {
                    default: ColorToken;
                    /** This color is inherited from themes */
                    hover: ColorToken;
                    /** This color is inherited from themes */
                    active: ColorToken;
                    /** This color is inherited from themes */
                    toggled: ColorToken;
                    disabled: ColorToken;
                };
                border: {
                    default: ColorToken;
                    /** This color is inherited from themes */
                    hover: ColorToken;
                    /** This color is inherited from themes */
                    active: ColorToken;
                    /** This color is inherited from themes */
                    toggled: ColorToken;
                    disabled: ColorToken;
                };
                text: {
                    /** This color is inherited from themes */
                    default: ColorToken;
                    /** This color is inherited from themes */
                    hover: ColorToken;
                    /** This color is inherited from themes */
                    active: ColorToken;
                    /** This color is inherited from themes */
                    toggled: ColorToken;
                    disabled: ColorToken;
                };
            };
            danger: {
                background: {
                    default: ColorToken;
                    hover: ColorToken;
                    active: ColorToken;
                    toggled: ColorToken;
                    disabled: ColorToken;
                };
                border: {
                    default: ColorToken;
                    hover: ColorToken;
                    active: ColorToken;
                    toggled: ColorToken;
                    disabled: ColorToken;
                };
                text: {
                    default: ColorToken;
                    hover: ColorToken;
                    active: ColorToken;
                    toggled: ColorToken;
                    disabled: ColorToken;
                };
                elevation: {
                    default: BoxShadowToken;
                    hover: BoxShadowToken;
                };
            };
        };
        'segmented-control': {
            item: {
                /** Radius for segmented control item. {container radius} - 3 */
                radius: BorderRadiusToken;
                background: {
                    default: ColorToken;
                    active: ColorToken;
                };
                border: {
                    default: ColorToken;
                    active: ColorToken;
                };
                text: {
                    default: ColorToken;
                    active: ColorToken;
                };
                elevation: {
                    active: BoxShadowToken;
                };
            };
            container: {
                background: ColorToken;
                radius: BorderRadiusToken;
            };
        };
        card: {
            radius: BorderRadiusToken;
        };
        modal: {
            radius: BorderRadiusToken;
        };
        section: {
            headline: {
                background: ColorToken;
            };
            footer: {
                background: ColorToken;
            };
        };
        skeleton: {
            rounded: {
                /** Border-radius for the 'Rounded' variant of the Skeleton component */
                radius: BorderRadiusToken;
            };
            /** Skeleton animation gradient */
            gradient: ColorToken;
            /** The color is a background under the Skeleton's child gradient sub-element and must match gradient edge colors. */
            background: ColorToken;
        };
        'button-group': {
            /** Resets border radius for internal buttons */
            'radius-between': BorderRadiusToken;
        };
        checkbox: {
            background: {
                checked: {
                    default: ColorToken;
                    hover: ColorToken;
                };
            };
        };
        radio: {
            background: {
                checked: {
                    default: ColorToken;
                    hover: ColorToken;
                };
            };
        };
        switch: {
            background: {
                toggled: {
                    default: ColorToken;
                    hover: ColorToken;
                };
            };
        };
        datepicker: {
            day: {
                text: {
                    default: ColorToken;
                    hover: ColorToken;
                    selected: ColorToken;
                    outsideMonth: ColorToken;
                    outsideMonthSelected: ColorToken;
                };
                background: {
                    default: ColorToken;
                    hover: ColorToken;
                    selected: ColorToken;
                    outsideMonth: ColorToken;
                    outsideMonthSelected: ColorToken;
                };
            };
        };
        numberfield: {
            'suffix-button': {
                /** Border radius for the suffix button in the number field component. */
                radius: BorderRadiusToken;
                background: {
                    hover: ColorToken;
                };
            };
        };
    };
}
export interface PropsWithTheme {
    theme: DefaultTheme;
}
export type BorderRadiusTokenRef = 'sys/radius/form-item' | 'comp/segmented-control/item/radius' | 'comp/segmented-control/container/radius' | 'comp/card/radius' | 'comp/modal/radius' | 'comp/skeleton/rounded/radius' | 'comp/button-group/radius-between' | 'comp/numberfield/suffix-button/radius';
export type BoxShadowTokenRef = 'sys/shadow/focus' | 'sys/shadow/selection' | 'sys/shadow/elevation/0' | 'sys/shadow/elevation/2' | 'sys/shadow/elevation/4' | 'sys/shadow/elevation/8' | 'sys/shadow/elevation/16' | 'sys/shadow/elevation/32' | 'comp/button/primary/elevation/default' | 'comp/button/primary/elevation/hover' | 'comp/button/default/elevation/default' | 'comp/button/default/elevation/hover' | 'comp/button/danger/elevation/default' | 'comp/button/danger/elevation/hover' | 'comp/segmented-control/item/elevation/active';
export type ColorTokenRef = 'ref/palette/gray/25' | 'ref/palette/gray/50' | 'ref/palette/gray/100' | 'ref/palette/gray/150' | 'ref/palette/gray/200' | 'ref/palette/gray/250' | 'ref/palette/gray/300' | 'ref/palette/gray/350' | 'ref/palette/gray/400' | 'ref/palette/gray/450' | 'ref/palette/gray/500' | 'ref/palette/gray/550' | 'ref/palette/gray/600' | 'ref/palette/gray/700' | 'ref/palette/gray/800' | 'ref/palette/gray/900' | 'ref/palette/green/25' | 'ref/palette/green/50' | 'ref/palette/green/100' | 'ref/palette/green/150' | 'ref/palette/green/200' | 'ref/palette/green/250' | 'ref/palette/green/300' | 'ref/palette/green/350' | 'ref/palette/green/400' | 'ref/palette/green/450' | 'ref/palette/green/500' | 'ref/palette/green/550' | 'ref/palette/green/600' | 'ref/palette/green/700' | 'ref/palette/green/800' | 'ref/palette/green/900' | 'ref/palette/blue/25' | 'ref/palette/blue/50' | 'ref/palette/blue/100' | 'ref/palette/blue/150' | 'ref/palette/blue/200' | 'ref/palette/blue/250' | 'ref/palette/blue/300' | 'ref/palette/blue/350' | 'ref/palette/blue/400' | 'ref/palette/blue/450' | 'ref/palette/blue/500' | 'ref/palette/blue/550' | 'ref/palette/blue/600' | 'ref/palette/blue/700' | 'ref/palette/blue/800' | 'ref/palette/blue/900' | 'ref/palette/purple/25' | 'ref/palette/purple/50' | 'ref/palette/purple/100' | 'ref/palette/purple/150' | 'ref/palette/purple/200' | 'ref/palette/purple/250' | 'ref/palette/purple/300' | 'ref/palette/purple/350' | 'ref/palette/purple/400' | 'ref/palette/purple/450' | 'ref/palette/purple/500' | 'ref/palette/purple/550' | 'ref/palette/purple/600' | 'ref/palette/purple/700' | 'ref/palette/purple/800' | 'ref/palette/purple/900' | 'ref/palette/pink/25' | 'ref/palette/pink/50' | 'ref/palette/pink/100' | 'ref/palette/pink/150' | 'ref/palette/pink/200' | 'ref/palette/pink/250' | 'ref/palette/pink/300' | 'ref/palette/pink/350' | 'ref/palette/pink/400' | 'ref/palette/pink/450' | 'ref/palette/pink/500' | 'ref/palette/pink/550' | 'ref/palette/pink/600' | 'ref/palette/pink/700' | 'ref/palette/pink/800' | 'ref/palette/pink/900' | 'ref/palette/red/25' | 'ref/palette/red/50' | 'ref/palette/red/100' | 'ref/palette/red/150' | 'ref/palette/red/200' | 'ref/palette/red/250' | 'ref/palette/red/300' | 'ref/palette/red/350' | 'ref/palette/red/400' | 'ref/palette/red/450' | 'ref/palette/red/500' | 'ref/palette/red/550' | 'ref/palette/red/600' | 'ref/palette/red/700' | 'ref/palette/red/800' | 'ref/palette/red/900' | 'ref/palette/orange/25' | 'ref/palette/orange/50' | 'ref/palette/orange/100' | 'ref/palette/orange/150' | 'ref/palette/orange/200' | 'ref/palette/orange/250' | 'ref/palette/orange/300' | 'ref/palette/orange/350' | 'ref/palette/orange/400' | 'ref/palette/orange/450' | 'ref/palette/orange/500' | 'ref/palette/orange/550' | 'ref/palette/orange/600' | 'ref/palette/orange/700' | 'ref/palette/orange/800' | 'ref/palette/orange/900' | 'ref/palette/yellow/25' | 'ref/palette/yellow/50' | 'ref/palette/yellow/100' | 'ref/palette/yellow/150' | 'ref/palette/yellow/200' | 'ref/palette/yellow/250' | 'ref/palette/yellow/300' | 'ref/palette/yellow/350' | 'ref/palette/yellow/400' | 'ref/palette/yellow/450' | 'ref/palette/yellow/500' | 'ref/palette/yellow/550' | 'ref/palette/yellow/600' | 'ref/palette/yellow/700' | 'ref/palette/yellow/800' | 'ref/palette/yellow/900' | 'sys/color/danger' | 'sys/color/warning' | 'sys/color/success' | 'sys/color/divider' | 'sys/color/background' | 'sys/color/white' | 'sys/color/transparent' | 'sys/color/primary/default' | 'sys/color/primary/backdrop/hover' | 'sys/color/primary/backdrop/active' | 'sys/color/input/border/default' | 'sys/color/input/border/focus' | 'sys/color/input/border/invalid' | 'sys/color/input/border/disabled' | 'sys/color/input/background/default' | 'sys/color/input/background/disabled' | 'sys/color/text/primary' | 'sys/color/text/secondary' | 'sys/color/text/disabled' | 'sys/color/list/hover' | 'sys/color/list/selected' | 'comp/button/primary/background/default' | 'comp/button/primary/background/hover' | 'comp/button/primary/background/active' | 'comp/button/primary/background/toggled' | 'comp/button/primary/background/disabled' | 'comp/button/primary/border/default' | 'comp/button/primary/border/hover' | 'comp/button/primary/border/active' | 'comp/button/primary/border/toggled' | 'comp/button/primary/border/disabled' | 'comp/button/primary/text/default' | 'comp/button/primary/text/hover' | 'comp/button/primary/text/active' | 'comp/button/primary/text/toggled' | 'comp/button/primary/text/disabled' | 'comp/button/default/background/default' | 'comp/button/default/background/hover' | 'comp/button/default/background/active' | 'comp/button/default/background/toggled' | 'comp/button/default/background/disabled' | 'comp/button/default/border/default' | 'comp/button/default/border/hover' | 'comp/button/default/border/active' | 'comp/button/default/border/toggled' | 'comp/button/default/border/disabled' | 'comp/button/default/text/default' | 'comp/button/default/text/hover' | 'comp/button/default/text/active' | 'comp/button/default/text/toggled' | 'comp/button/default/text/disabled' | 'comp/button/subtle/background/default' | 'comp/button/subtle/background/hover' | 'comp/button/subtle/background/active' | 'comp/button/subtle/background/toggled' | 'comp/button/subtle/background/disabled' | 'comp/button/subtle/border/default' | 'comp/button/subtle/border/hover' | 'comp/button/subtle/border/active' | 'comp/button/subtle/border/toggled' | 'comp/button/subtle/border/disabled' | 'comp/button/subtle/text/default' | 'comp/button/subtle/text/hover' | 'comp/button/subtle/text/active' | 'comp/button/subtle/text/toggled' | 'comp/button/subtle/text/disabled' | 'comp/button/subtlePrimary/background/default' | 'comp/button/subtlePrimary/background/hover' | 'comp/button/subtlePrimary/background/active' | 'comp/button/subtlePrimary/background/toggled' | 'comp/button/subtlePrimary/background/disabled' | 'comp/button/subtlePrimary/border/default' | 'comp/button/subtlePrimary/border/hover' | 'comp/button/subtlePrimary/border/active' | 'comp/button/subtlePrimary/border/toggled' | 'comp/button/subtlePrimary/border/disabled' | 'comp/button/subtlePrimary/text/default' | 'comp/button/subtlePrimary/text/hover' | 'comp/button/subtlePrimary/text/active' | 'comp/button/subtlePrimary/text/toggled' | 'comp/button/subtlePrimary/text/disabled' | 'comp/button/danger/background/default' | 'comp/button/danger/background/hover' | 'comp/button/danger/background/active' | 'comp/button/danger/background/toggled' | 'comp/button/danger/background/disabled' | 'comp/button/danger/border/default' | 'comp/button/danger/border/hover' | 'comp/button/danger/border/active' | 'comp/button/danger/border/toggled' | 'comp/button/danger/border/disabled' | 'comp/button/danger/text/default' | 'comp/button/danger/text/hover' | 'comp/button/danger/text/active' | 'comp/button/danger/text/toggled' | 'comp/button/danger/text/disabled' | 'comp/segmented-control/item/background/default' | 'comp/segmented-control/item/background/active' | 'comp/segmented-control/item/border/default' | 'comp/segmented-control/item/border/active' | 'comp/segmented-control/item/text/default' | 'comp/segmented-control/item/text/active' | 'comp/segmented-control/container/background' | 'comp/section/headline/background' | 'comp/section/footer/background' | 'comp/skeleton/gradient' | 'comp/skeleton/background' | 'comp/checkbox/background/checked/default' | 'comp/checkbox/background/checked/hover' | 'comp/radio/background/checked/default' | 'comp/radio/background/checked/hover' | 'comp/switch/background/toggled/default' | 'comp/switch/background/toggled/hover' | 'comp/datepicker/day/text/default' | 'comp/datepicker/day/text/hover' | 'comp/datepicker/day/text/selected' | 'comp/datepicker/day/text/outsideMonth' | 'comp/datepicker/day/text/outsideMonthSelected' | 'comp/datepicker/day/background/default' | 'comp/datepicker/day/background/hover' | 'comp/datepicker/day/background/selected' | 'comp/datepicker/day/background/outsideMonth' | 'comp/datepicker/day/background/outsideMonthSelected' | 'comp/numberfield/suffix-button/background/hover';
export type FontFamilyTokenRef = 'ref/font-family/body' | 'ref/font-family/mono';
export type OtherTokenRef = 'sys/timing-function/smooth';
export type TypographyTokenRef = 'sys/typography/section-headline' | 'sys/typography/card-title' | 'sys/typography/card-subtitle' | 'sys/typography/group-header' | 'sys/typography/body' | 'sys/typography/body-strong' | 'sys/typography/body-link' | 'sys/typography/caption' | 'sys/typography/caption-link';