@sinchsmb/ui-kit/src/theme/types.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';