igniteui-theming/dist/json/components/themes.json

A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.

{
  "action-strip": {
    "name": "action-strip",
    "themeFunctionName": "action-strip-theme",
    "description": "Action Strip Theme",
    "primaryTokens": [
      {
        "name": "actions-background",
        "description": "The actions background color."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "icon-color",
        "type": "Color",
        "description": "The color used for the actions icons. Auto-derived from actions-background."
      },
      {
        "name": "background",
        "type": "Color",
        "description": "The color used for the action strip component content background."
      },
      {
        "name": "actions-background",
        "type": "Color",
        "description": "The color used for the actions background. PRIMARY - derives icon-color."
      },
      {
        "name": "delete-action",
        "type": "Color",
        "description": "The color used for the delete icon in action strip component."
      },
      {
        "name": "actions-border-radius",
        "type": "List",
        "description": "The border radius used for actions container inside action strip component.\n"
      }
    ]
  },
  "avatar": {
    "name": "avatar",
    "themeFunctionName": "avatar-theme",
    "description": "Avatar Theme",
    "primaryTokens": [
      {
        "name": "background",
        "description": "The avatar background color."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "The background color used of the avatar. PRIMARY - derives color, icon-color."
      },
      {
        "name": "color",
        "type": "Color",
        "description": "The text color used of the avatar. Auto-derived from background."
      },
      {
        "name": "icon-color",
        "type": "Color",
        "description": "The icon color used of the avatar. Auto-derived from background."
      },
      {
        "name": "border-radius",
        "type": "Number",
        "description": "The border-radius used of the avatar."
      },
      {
        "name": "size",
        "type": "Number",
        "description": "The size of the avatar."
      }
    ]
  },
  "badge": {
    "name": "badge",
    "themeFunctionName": "badge-theme",
    "description": "Badge Theme",
    "primaryTokens": [
      {
        "name": "background-color",
        "description": "The badge background color."
      }
    ],
    "primaryTokensSummary": "Setting just `$background-color` will create a complete badge theme with proper text/icon contrast.",
    "tokens": [
      {
        "name": "icon-color",
        "type": "Color",
        "description": "The icon color used. Auto-derived from background-color."
      },
      {
        "name": "text-color",
        "type": "Color",
        "description": "The text color used. Auto-derived from background-color."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The border color used."
      },
      {
        "name": "background-color",
        "type": "Color",
        "description": "The background color used. PRIMARY - derives icon-color and text-color."
      },
      {
        "name": "shadow",
        "type": "List",
        "description": "Sets a shadow to be used for the badge."
      },
      {
        "name": "border-radius",
        "type": "Number",
        "description": "The border radius used for badge component."
      },
      {
        "name": "size",
        "type": "Number",
        "description": "The size of the badge component."
      },
      {
        "name": "dot-size",
        "type": "Number",
        "description": "The size of the dot type badge."
      }
    ]
  },
  "banner": {
    "name": "banner",
    "themeFunctionName": "banner-theme",
    "description": "Banner Theme",
    "primaryTokens": [
      {
        "name": "banner-background",
        "description": "The banner background color."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "banner-background",
        "type": "Color",
        "description": "The color used for the banner background. PRIMARY - derives message and illustration colors."
      },
      {
        "name": "banner-message-color",
        "type": "Color",
        "description": "The color used for the banner label. Auto-derived from banner-background."
      },
      {
        "name": "banner-border-color",
        "type": "Color",
        "description": "The color used for the banner border."
      },
      {
        "name": "banner-illustration-color",
        "type": "Color",
        "description": "The color used for the banner illustration. Auto-derived from banner-background."
      },
      {
        "name": "border-radius",
        "type": "Number",
        "description": "The border-radius for the banner.\n"
      }
    ]
  },
  "bottom-nav": {
    "name": "bottom-nav",
    "themeFunctionName": "bottom-nav-theme",
    "description": "Bottom Navigation Theme",
    "primaryTokens": [
      {
        "name": "background",
        "description": "The bar background color."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "The background color used for the bar. PRIMARY - derives label-color, icon-color."
      },
      {
        "name": "label-color",
        "type": "Color",
        "description": "The label color used in idle state. Auto-derived from background. Derives icon-color if not set."
      },
      {
        "name": "icon-color",
        "type": "Color",
        "description": "The icon color used in idle state. Auto-derived from label-color if not set."
      },
      {
        "name": "label-selected-color",
        "type": "Color",
        "description": "The label color used in selected state. Derives icon-selected-color if not set."
      },
      {
        "name": "icon-selected-color",
        "type": "Color",
        "description": "The icon color used in selected state. Auto-derived from label-selected-color if not set."
      },
      {
        "name": "icon-disabled-color",
        "type": "Color",
        "description": "The disabled color of the icon. Auto-derived from label-disabled-color if not set."
      },
      {
        "name": "label-disabled-color",
        "type": "Color",
        "description": "The disabled color of the label. Auto-derived from label-color."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The border color of the bottom navigation."
      },
      {
        "name": "shadow",
        "type": "List | Number",
        "description": "Sets a shadow to be used for the bar."
      }
    ]
  },
  "button-group": {
    "name": "button-group",
    "themeFunctionName": "button-group-theme",
    "description": "Button Group Theme",
    "primaryTokens": [
      {
        "name": "item-background",
        "description": "The base item background."
      },
      {
        "name": "item-selected-background",
        "description": "The selected item background."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "shadow",
        "type": "List",
        "description": "The shadow to be applied for the button group."
      },
      {
        "name": "item-text-color",
        "type": "Color",
        "description": "The text color for button group items. Auto-derived from item-background."
      },
      {
        "name": "item-icon-color",
        "type": "color",
        "description": "The icon color for button group items. Auto-derived from item-text-color."
      },
      {
        "name": "item-background",
        "type": "Color",
        "description": "The background color for button group items. PRIMARY - derives all state colors."
      },
      {
        "name": "item-border-color",
        "type": "Color",
        "description": "The border color between button group items. Auto-derived from item-background.\n"
      },
      {
        "name": "item-hover-text-color",
        "type": "Color",
        "description": "The hover text color for button group items. Auto-derived from item-hover-background."
      },
      {
        "name": "item-hover-icon-color",
        "type": "Color",
        "description": "The hover icon color for button group items. Auto-derived from item-hover-text-color."
      },
      {
        "name": "item-hover-background",
        "type": "Color",
        "description": "The hover background color for button group items. Auto-derived from item-background."
      },
      {
        "name": "item-hover-border-color",
        "type": "Color",
        "description": "The hover border color between button group items. Auto-derived from item-border-color.\n"
      },
      {
        "name": "item-focused-text-color",
        "type": "Color",
        "description": "The focused text color for button group items. Auto-derived from item-focused-background."
      },
      {
        "name": "item-focused-background",
        "type": "Color",
        "description": "The focused background color for button group items. Auto-derived from item-hover-background."
      },
      {
        "name": "item-focused-border-color",
        "type": "Color",
        "description": "The focused border color for an item from the button group. Auto-derived from item-border-color."
      },
      {
        "name": "item-focused-hover-text-color",
        "type": "Color",
        "description": "The focused & hover text color for button group items. Auto-derived from item-focused-text-color."
      },
      {
        "name": "item-focused-hover-border-color",
        "type": "Color",
        "description": "The focused & hover border color for an item from the button group. Auto-derived from item-focused-border-color."
      },
      {
        "name": "item-focused-hover-background",
        "type": "Color",
        "description": "The focused & hover background color for button group items. Auto-derived from item-focused-background."
      },
      {
        "name": "item-active-background",
        "type": "Color",
        "description": "The active background color for button group items. Auto-derived from item-hover-background."
      },
      {
        "name": "item-active-border-color",
        "type": "Color",
        "description": "The active border color for button group items. Auto-derived from item-hover-border-color."
      },
      {
        "name": "idle-shadow-color",
        "type": "Color",
        "description": "The outline color of focused button group items. Auto-derived from item-background or selected-shadow-color."
      },
      {
        "name": "selected-shadow-color",
        "type": "Color",
        "description": "The outline color of focused/selected button group items. Auto-derived from idle-shadow-color.\n"
      },
      {
        "name": "disabled-text-color",
        "type": "Color",
        "description": "The text/icon color for a disabled item in the button group. Auto-derived from disabled-background-color."
      },
      {
        "name": "disabled-background-color",
        "type": "Color",
        "description": "The background color for a disabled item in the button group. Auto-derived from item-background."
      },
      {
        "name": "item-disabled-border",
        "type": "Color",
        "description": "The border color for a disabled item in the button group. Auto-derived from item-border-color.\n"
      },
      {
        "name": "item-selected-text-color",
        "type": "Color",
        "description": "The text color for a selected item in the button group. Auto-derived from item-selected-background."
      },
      {
        "name": "item-selected-icon-color",
        "type": "Color",
        "description": "The icon color for a selected item in the button group. Auto-derived from item-selected-text-color."
      },
      {
        "name": "item-selected-background",
        "type": "Color",
        "description": "The background color for a selected item in the button group. PRIMARY for selected state. Auto-derived from item-background."
      },
      {
        "name": "item-selected-border-color",
        "type": "Color",
        "description": "The border color for a selected item from the button group. Auto-derived from item-border-color.\n"
      },
      {
        "name": "item-selected-hover-text-color",
        "type": "Color",
        "description": "The text color for a selected item in hover state in the button group. Auto-derived from item-selected-hover-background."
      },
      {
        "name": "item-selected-hover-icon-color",
        "type": "Color",
        "description": "The icon color for a selected item in hover state in the button group. Auto-derived from item-selected-hover-text-color."
      },
      {
        "name": "item-selected-hover-background",
        "type": "Color",
        "description": "The background color for a selected item in hover state in the button group. Auto-derived from item-selected-background."
      },
      {
        "name": "item-selected-hover-border-color",
        "type": "Color",
        "description": "The border color for a selected item in hover state in the button group. Auto-derived from item-border-color."
      },
      {
        "name": "item-selected-focus-background",
        "type": "Color",
        "description": "The background color for a selected item in focused state in the button group. Auto-derived from item-selected-background."
      },
      {
        "name": "item-selected-focus-hover-background",
        "type": "Color",
        "description": "The background color for a selected item in focused & hover state in the button group. Auto-derived from item-selected-hover-background."
      },
      {
        "name": "item-selected-active-background",
        "type": "Color",
        "description": "The active background color for a selected item in the button group. Auto-derived from item-selected-hover-background."
      },
      {
        "name": "item-selected-active-border-color",
        "type": "Color",
        "description": "The active border color for a selected item in the button group. Auto-derived from item-selected-hover-border-color.\n"
      },
      {
        "name": "disabled-selected-text-color",
        "type": "Color",
        "description": "The disabled text color for a selected item in the button group. Auto-derived from disabled-text-color."
      },
      {
        "name": "disabled-selected-icon-color",
        "type": "Color",
        "description": "The disabled icon color for a selected item in the button group. Auto-derived from disabled-selected-text-color."
      },
      {
        "name": "disabled-selected-background",
        "type": "Color",
        "description": "The disabled background color for a selected item in the button group. Auto-derived from item-selected-background."
      },
      {
        "name": "disabled-selected-border-color",
        "type": "Color",
        "description": "The disabled border color for a selected item from the button group. Auto-derived from item-border-color.\n"
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius used for button-group component.\n"
      }
    ]
  },
  "button": {
    "name": "button",
    "themeFunctionName": "button-theme",
    "description": "Button Theme",
    "primaryTokens": [
      {
        "name": "background",
        "description": "The main button background."
      },
      {
        "name": "hover-background",
        "description": "Hover state background."
      },
      {
        "name": "focus-background",
        "description": "Focus state background."
      }
    ],
    "primaryTokensSummary": "Setting just `$background` will create a properly contrasted button.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "The background color of the button. PRIMARY - derives foreground and icon-color."
      },
      {
        "name": "foreground",
        "type": "Color",
        "description": "The text color of the button. Auto-derived from background."
      },
      {
        "name": "icon-color",
        "type": "Color",
        "description": "The icon color in the button. Auto-derived from background."
      },
      {
        "name": "icon-color-hover",
        "type": "Color",
        "description": "The icon color in the button on hover. Auto-derived from hover-foreground."
      },
      {
        "name": "hover-background",
        "type": "Color",
        "description": "The hover background color of the button."
      },
      {
        "name": "hover-foreground",
        "type": "Color",
        "description": "The hover text color of the button. Auto-derived from hover-background."
      },
      {
        "name": "focus-background",
        "type": "Color",
        "description": "The focus background color of the button."
      },
      {
        "name": "focus-foreground",
        "type": "Color",
        "description": "The focus text color of the button. Auto-derived from focus-background."
      },
      {
        "name": "focus-hover-background",
        "type": "Color",
        "description": "The background color on focus hovered state of the button."
      },
      {
        "name": "focus-hover-foreground",
        "type": "Color",
        "description": "The text color on focus hovered state of the button. Auto-derived from focus-hover-background."
      },
      {
        "name": "focus-visible-background",
        "type": "Color",
        "description": "The focus-visible background color of the button. Auto-derived from focus-background."
      },
      {
        "name": "focus-visible-foreground",
        "type": "Color",
        "description": "The focus-visible text color of the button. Auto-derived from focus-visible-background."
      },
      {
        "name": "active-background",
        "type": "Color",
        "description": "The active background of the button."
      },
      {
        "name": "active-foreground",
        "type": "Color",
        "description": "The active text color of the button."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius of the button."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The border color of the button."
      },
      {
        "name": "hover-border-color",
        "type": "Color",
        "description": "The hover border color of the button."
      },
      {
        "name": "focus-border-color",
        "type": "Color",
        "description": "The focus border color of the button."
      },
      {
        "name": "focus-visible-border-color",
        "type": "Color",
        "description": "The focus-visible border color of the button. Auto-derived from focus-border-color."
      },
      {
        "name": "active-border-color",
        "type": "Color",
        "description": "The active border color of the button."
      },
      {
        "name": "shadow-color",
        "type": "Color",
        "description": "The shadow color of the button."
      },
      {
        "name": "resting-shadow",
        "type": "Color",
        "description": "The shadow of the button in its idle state."
      },
      {
        "name": "hover-shadow",
        "type": "Color",
        "description": "The shadow of the button in its hover state."
      },
      {
        "name": "focus-shadow",
        "type": "Color",
        "description": "The shadow of the button in its focus state."
      },
      {
        "name": "active-shadow",
        "type": "Color",
        "description": "The shadow of the button in its active state."
      },
      {
        "name": "disabled-background",
        "type": "Color",
        "description": "The disabled background color of the button."
      },
      {
        "name": "disabled-foreground",
        "type": "Color",
        "description": "The disabled text color of the button."
      },
      {
        "name": "disabled-icon-color",
        "type": "Color",
        "description": "The disabled icon color of the button."
      },
      {
        "name": "disabled-border-color",
        "type": "Color",
        "description": "The disabled border color of the button.\n"
      }
    ]
  },
  "contained-button": {
    "name": "contained-button",
    "themeFunctionName": "contained-button-theme",
    "description": "Contained Button Theme",
    "primaryTokens": [
      {
        "name": "background",
        "description": "The background color of the button."
      },
      {
        "name": "foreground",
        "description": "The text color of the button."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "The background color of the button. PRIMARY - derives foreground, icon-color, hover-background, focus-background, active-background."
      },
      {
        "name": "foreground",
        "type": "Color",
        "description": "The text color of the button. Auto-derived from background. PRIMARY for foreground inheritance."
      },
      {
        "name": "icon-color",
        "type": "Color",
        "description": "The icon color in the button. Auto-derived from background."
      },
      {
        "name": "icon-color-hover",
        "type": "Color",
        "description": "The icon color in the button on hover. Auto-derived from icon-color or hover-background."
      },
      {
        "name": "hover-background",
        "type": "Color",
        "description": "The hover background color of the button. Auto-derived from background."
      },
      {
        "name": "hover-foreground",
        "type": "Color",
        "description": "The hover text color of the button. Auto-derived from foreground or hover-background."
      },
      {
        "name": "focus-background",
        "type": "Color",
        "description": "The focus background color of the button. Auto-derived from background or focus-hover-background."
      },
      {
        "name": "focus-foreground",
        "type": "Color",
        "description": "The focus text color of the button. Auto-derived from foreground or focus-background."
      },
      {
        "name": "focus-hover-background",
        "type": "Color",
        "description": "The background color on focus hovered state. Auto-derived from hover-background."
      },
      {
        "name": "focus-hover-foreground",
        "type": "Color",
        "description": "The text color on focus hovered state. Auto-derived from foreground or focus-hover-background."
      },
      {
        "name": "focus-visible-background",
        "type": "Color",
        "description": "The focus-visible background color. Auto-derived from focus-background or background."
      },
      {
        "name": "focus-visible-foreground",
        "type": "Color",
        "description": "The focus-visible text color. Auto-derived from foreground or focus-visible-background."
      },
      {
        "name": "active-background",
        "type": "Color",
        "description": "The active background of the button. Auto-derived from background, focus-background, or hover-background."
      },
      {
        "name": "active-foreground",
        "type": "Color",
        "description": "The active text color of the button. Auto-derived from foreground or active-background."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius of the button."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The border color of the button."
      },
      {
        "name": "hover-border-color",
        "type": "Color",
        "description": "The hover border color of the button."
      },
      {
        "name": "focus-border-color",
        "type": "Color",
        "description": "The focus border color of the button."
      },
      {
        "name": "focus-visible-border-color",
        "type": "Color",
        "description": "The focus-visible border color. Auto-derived from focus-visible-foreground (fluent)."
      },
      {
        "name": "active-border-color",
        "type": "Color",
        "description": "The active border color of the button."
      },
      {
        "name": "shadow-color",
        "type": "Color",
        "description": "The shadow color of the button. Auto-derived from focus-visible-background (bootstrap/indigo)."
      },
      {
        "name": "resting-shadow",
        "type": "Color",
        "description": "The shadow of the button in its idle state."
      },
      {
        "name": "hover-shadow",
        "type": "Color",
        "description": "The shadow of the button in its hover state."
      },
      {
        "name": "focus-shadow",
        "type": "Color",
        "description": "The shadow of the button in its focus state."
      },
      {
        "name": "active-shadow",
        "type": "Color",
        "description": "The shadow of the button in its focus state."
      },
      {
        "name": "disabled-background",
        "type": "Color",
        "description": "The disabled background color. Auto-derived from background (bootstrap/indigo)."
      },
      {
        "name": "disabled-foreground",
        "type": "Color",
        "description": "The disabled text color. Auto-derived from disabled-background."
      },
      {
        "name": "disabled-icon-color",
        "type": "Color",
        "description": "The disabled icon color. Auto-derived from disabled-foreground."
      },
      {
        "name": "disabled-border-color",
        "type": "Color",
        "description": "The disabled border color of the button.\n"
      }
    ]
  },
  "fab-button": {
    "name": "fab-button",
    "themeFunctionName": "fab-button-theme",
    "description": "FAB Button Theme",
    "primaryTokens": [
      {
        "name": "background",
        "description": "The background color of the button."
      },
      {
        "name": "foreground",
        "description": "The text color of the button. Used as fallback for state foreground colors."
      },
      {
        "name": "icon-color",
        "description": "The icon color in the button. Used as fallback for icon-color-hover."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "The background color of the button. PRIMARY - derives foreground, icon-color, hover-background, focus-background, active-background."
      },
      {
        "name": "foreground",
        "type": "Color",
        "description": "The text color of the button. Auto-derived from background."
      },
      {
        "name": "icon-color",
        "type": "Color",
        "description": "The icon color in the button. Auto-derived from background."
      },
      {
        "name": "icon-color-hover",
        "type": "Color",
        "description": "The icon color in the button on hover. Auto-derived from icon-color or hover-background."
      },
      {
        "name": "hover-background",
        "type": "Color",
        "description": "The hover background color. Auto-derived from background."
      },
      {
        "name": "hover-foreground",
        "type": "Color",
        "description": "The hover text color. Auto-derived from foreground or hover-background."
      },
      {
        "name": "focus-background",
        "type": "Color",
        "description": "The focus background color. Auto-derived from background or focus-hover-background."
      },
      {
        "name": "focus-foreground",
        "type": "Color",
        "description": "The focus text color. Auto-derived from foreground or focus-background."
      },
      {
        "name": "focus-hover-background",
        "type": "Color",
        "description": "The background color on focus hovered state. Auto-derived from hover-background."
      },
      {
        "name": "focus-hover-foreground",
        "type": "Color",
        "description": "The text color on focus hovered state. Auto-derived from foreground or focus-hover-background."
      },
      {
        "name": "focus-visible-background",
        "type": "Color",
        "description": "The focus-visible background color. Auto-derived from focus-background or background."
      },
      {
        "name": "focus-visible-foreground",
        "type": "Color",
        "description": "The focus-visible text color. Auto-derived from focus-visible-background."
      },
      {
        "name": "active-background",
        "type": "Color",
        "description": "The active background. Auto-derived from background, focus-background, or hover-background."
      },
      {
        "name": "active-foreground",
        "type": "Color",
        "description": "The active text color. Auto-derived from active-background."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius of the button."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The border color of the button."
      },
      {
        "name": "hover-border-color",
        "type": "Color",
        "description": "The hover border color of the button."
      },
      {
        "name": "focus-border-color",
        "type": "Color",
        "description": "The focus border color of the button."
      },
      {
        "name": "focus-visible-border-color",
        "type": "Color",
        "description": "The focus-visible border color. Auto-derived from focus-visible-foreground (fluent)."
      },
      {
        "name": "active-border-color",
        "type": "Color",
        "description": "The active border color of the button."
      },
      {
        "name": "shadow-color",
        "type": "Color",
        "description": "The shadow color. Auto-derived from focus-visible-background (bootstrap/indigo)."
      },
      {
        "name": "resting-shadow",
        "type": "Color",
        "description": "The shadow of the button in its idle state."
      },
      {
        "name": "hover-shadow",
        "type": "Color",
        "description": "The shadow of the button in its hover state."
      },
      {
        "name": "focus-shadow",
        "type": "Color",
        "description": "The shadow of the button in its focus state."
      },
      {
        "name": "active-shadow",
        "type": "Color",
        "description": "The shadow of the button in its focus state."
      },
      {
        "name": "disabled-background",
        "type": "Color",
        "description": "The disabled background color. Auto-derived from background (bootstrap/indigo)."
      },
      {
        "name": "disabled-foreground",
        "type": "Color",
        "description": "The disabled text color. Auto-derived from disabled-background."
      },
      {
        "name": "disabled-icon-color",
        "type": "Color",
        "description": "The disabled icon color. Auto-derived from disabled-foreground or disabled-background."
      },
      {
        "name": "disabled-border-color",
        "type": "Color",
        "description": "The disabled border color of the button.\n"
      }
    ]
  },
  "flat-button": {
    "name": "flat-button",
    "themeFunctionName": "flat-button-theme",
    "description": "Flat Button Theme",
    "primaryTokens": [
      {
        "name": "foreground",
        "description": "The text color of the button."
      },
      {
        "name": "hover-background",
        "description": "The hover background color."
      },
      {
        "name": "focus-background",
        "description": "The focus background color."
      },
      {
        "name": "active-background",
        "description": "The active background color."
      }
    ],
    "primaryTokensSummary": "For flat buttons, the foreground color is the primary token.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "The background color of the button."
      },
      {
        "name": "foreground",
        "type": "Color",
        "description": "The text color of the button. PRIMARY - derives hover/focus/active backgrounds and foregrounds."
      },
      {
        "name": "icon-color",
        "type": "Color",
        "description": "The icon color in the button."
      },
      {
        "name": "icon-color-hover",
        "type": "Color",
        "description": "The icon color in the button on hover. Auto-derived from hover-foreground."
      },
      {
        "name": "hover-background",
        "type": "Color",
        "description": "The hover background color of the button. PRIMARY - derives hover-foreground. Auto-derived from foreground."
      },
      {
        "name": "hover-foreground",
        "type": "Color",
        "description": "The hover text color of the button. Auto-derived from hover-background."
      },
      {
        "name": "focus-background",
        "type": "Color",
        "description": "The focus background color of the button. PRIMARY - derives focus-foreground. Auto-derived from foreground."
      },
      {
        "name": "focus-foreground",
        "type": "Color",
        "description": "The focus text color of the button. Auto-derived from focus-background."
      },
      {
        "name": "focus-hover-background",
        "type": "Color",
        "description": "The background color on focus hovered state. Auto-derived from foreground."
      },
      {
        "name": "focus-hover-foreground",
        "type": "Color",
        "description": "The text color on focus hovered state. Auto-derived from focus-hover-background."
      },
      {
        "name": "focus-visible-background",
        "type": "Color",
        "description": "The focus-visible background color. Auto-derived from focus-background or foreground."
      },
      {
        "name": "focus-visible-foreground",
        "type": "Color",
        "description": "The focus-visible text color. Auto-derived from focus-visible-background."
      },
      {
        "name": "active-background",
        "type": "Color",
        "description": "The active background of the button. Auto-derived from foreground."
      },
      {
        "name": "active-foreground",
        "type": "Color",
        "description": "The active text color of the button. Auto-derived from active-background."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius of the button."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The border color of the button."
      },
      {
        "name": "hover-border-color",
        "type": "Color",
        "description": "The hover border color of the button."
      },
      {
        "name": "focus-border-color",
        "type": "Color",
        "description": "The focus border color of the button."
      },
      {
        "name": "focus-visible-border-color",
        "type": "Color",
        "description": "The focus-visible border color. Auto-derived from focus-border-color or focus-visible-foreground."
      },
      {
        "name": "active-border-color",
        "type": "Color",
        "description": "The active border color of the button."
      },
      {
        "name": "shadow-color",
        "type": "Color",
        "description": "The shadow color of the button. Auto-derived from focus-visible-foreground."
      },
      {
        "name": "disabled-background",
        "type": "Color",
        "description": "The disabled background color of the button."
      },
      {
        "name": "disabled-foreground",
        "type": "Color",
        "description": "The disabled text color of the button. Auto-derived from foreground (bootstrap/indigo)."
      },
      {
        "name": "disabled-icon-color",
        "type": "Color",
        "description": "The disabled icon color of the button. Auto-derived from disabled-foreground."
      },
      {
        "name": "disabled-border-color",
        "type": "Color",
        "description": "The disabled border color of the button.\n"
      }
    ]
  },
  "outlined-button": {
    "name": "outlined-button",
    "themeFunctionName": "outlined-button-theme",
    "description": "Outlined Button Theme",
    "primaryTokens": [
      {
        "name": "foreground",
        "description": "The text color of the button."
      },
      {
        "name": "hover-background",
        "description": "The hover background color."
      },
      {
        "name": "focus-background",
        "description": "The focus background color."
      },
      {
        "name": "active-background",
        "description": "The active background color."
      }
    ],
    "primaryTokensSummary": "For outlined buttons, the foreground color is the primary token.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "The background color of the button."
      },
      {
        "name": "foreground",
        "type": "Color",
        "description": "The text color of the button. PRIMARY - derives hover/focus/active backgrounds, foregrounds, and borders."
      },
      {
        "name": "icon-color",
        "type": "Color",
        "description": "The icon color in the button."
      },
      {
        "name": "icon-color-hover",
        "type": "Color",
        "description": "The icon color in the button on hover. Auto-derived from hover-foreground."
      },
      {
        "name": "hover-background",
        "type": "Color",
        "description": "The hover background color. PRIMARY - derives hover-foreground. Auto-derived from foreground."
      },
      {
        "name": "hover-foreground",
        "type": "Color",
        "description": "The hover text color. Auto-derived from hover-background."
      },
      {
        "name": "focus-background",
        "type": "Color",
        "description": "The focus background color. PRIMARY - derives focus-foreground. Auto-derived from foreground."
      },
      {
        "name": "focus-foreground",
        "type": "Color",
        "description": "The focus text color. Auto-derived from focus-background."
      },
      {
        "name": "focus-hover-background",
        "type": "Color",
        "description": "The background color on focus hovered state. Auto-derived from foreground or hover-background."
      },
      {
        "name": "focus-hover-foreground",
        "type": "Color",
        "description": "The text color on focus hovered state. Auto-derived from focus-hover-background."
      },
      {
        "name": "focus-visible-background",
        "type": "Color",
        "description": "The focus-visible background color. Auto-derived from focus-background or hover-background."
      },
      {
        "name": "focus-visible-foreground",
        "type": "Color",
        "description": "The focus-visible text color. Auto-derived from focus-visible-background or foreground."
      },
      {
        "name": "active-background",
        "type": "Color",
        "description": "The active background of the button. Auto-derived from foreground."
      },
      {
        "name": "active-foreground",
        "type": "Color",
        "description": "The active text color. Auto-derived from active-background."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius of the button."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The border color of the button. Auto-derived from foreground."
      },
      {
        "name": "hover-border-color",
        "type": "Color",
        "description": "The hover border color. Auto-derived from hover-foreground or hover-background."
      },
      {
        "name": "focus-border-color",
        "type": "Color",
        "description": "The focus border color. Auto-derived from focus-foreground or focus-background."
      },
      {
        "name": "focus-visible-border-color",
        "type": "Color",
        "description": "The focus-visible border color. Auto-derived from focus-border-color or focus-visible-background."
      },
      {
        "name": "active-border-color",
        "type": "Color",
        "description": "The active border color. Auto-derived from active-foreground or active-background."
      },
      {
        "name": "shadow-color",
        "type": "Color",
        "description": "The shadow color of the button. Auto-derived from focus-visible-foreground or focus-visible-background."
      },
      {
        "name": "disabled-background",
        "type": "Color",
        "description": "The disabled background color of the button."
      },
      {
        "name": "disabled-foreground",
        "type": "Color",
        "description": "The disabled text color. Auto-derived from foreground (bootstrap)."
      },
      {
        "name": "disabled-icon-color",
        "type": "Color",
        "description": "The disabled icon color. Auto-derived from disabled-foreground."
      },
      {
        "name": "disabled-border-color",
        "type": "Color",
        "description": "The disabled border color. Auto-derived from disabled-foreground (bootstrap).\n"
      }
    ]
  },
  "calendar": {
    "name": "calendar",
    "themeFunctionName": "calendar-theme",
    "description": "Calendar Theme",
    "primaryTokens": [
      {
        "name": "header-background",
        "description": "The main accent color."
      },
      {
        "name": "content-background",
        "description": "The calendar body background."
      }
    ],
    "primaryTokensSummary": "Text and icon colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "size",
        "type": "Number",
        "description": "Size of days, months, and years views."
      },
      {
        "name": "inner-size",
        "type": "Number",
        "description": "Inner size for calendar elements."
      },
      {
        "name": "weekday-color",
        "type": "Color",
        "description": "Color for weekday labels. Auto-derived from content-background."
      },
      {
        "name": "actions-divider-color",
        "type": "Color",
        "description": "Divider color for date-picker actions."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "Border radius for calendar container."
      },
      {
        "name": "content-background",
        "type": "Color",
        "description": "Background color for calendar. PRIMARY - derives content-foreground, inactive-color, date-hover colors, week-number colors."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "Border color for calendar container."
      },
      {
        "name": "header-background",
        "type": "Color",
        "description": "Header background color. PRIMARY - derives header-foreground and most accent/selection colors."
      },
      {
        "name": "header-foreground",
        "type": "Color",
        "description": "Header foreground color. Auto-derived from header-background."
      },
      {
        "name": "picker-foreground",
        "type": "Color",
        "description": "Foreground for the calendar picker. Auto-derived from picker-background."
      },
      {
        "name": "picker-background",
        "type": "Color",
        "description": "Background for the calendar picker."
      },
      {
        "name": "picker-hover-foreground",
        "type": "Color",
        "description": ":Hover foreground for the calendar picker. Auto-derived from header-background."
      },
      {
        "name": "picker-focus-foreground",
        "type": "Color",
        "description": ":Focus foreground for the calendar picker. Auto-derived from picker-hover-foreground."
      },
      {
        "name": "navigation-color",
        "type": "Color",
        "description": "Icon color for month navigation. Auto-derived from picker-background."
      },
      {
        "name": "navigation-hover-color",
        "type": "Color",
        "description": ":Hover color for navigation icons. Auto-derived from picker-hover-foreground."
      },
      {
        "name": "navigation-focus-color",
        "type": "Color",
        "description": ":Focus color for navigation icons. Auto-derived from navigation-hover-color."
      },
      {
        "name": "ym-border-radius",
        "type": "List",
        "description": "Border radius for year/month views."
      },
      {
        "name": "ym-hover-foreground",
        "type": "Color",
        "description": ":Hover foreground for year/month. Auto-derived from ym-hover-background."
      },
      {
        "name": "ym-hover-background",
        "type": "Color",
        "description": ":Hover background for year/month. Auto-derived from date-hover-background."
      },
      {
        "name": "ym-current-outline-color",
        "type": "Color",
        "description": "Outline color for current year/month. Auto-derived from date-current-border-color."
      },
      {
        "name": "ym-current-outline-hover-color",
        "type": "Color",
        "description": ":Hover outline color for current year/month."
      },
      {
        "name": "ym-current-outline-focus-color",
        "type": "Color",
        "description": ":Focus outline color for current year/month."
      },
      {
        "name": "ym-current-background",
        "type": "Color",
        "description": "Background for current year/month."
      },
      {
        "name": "ym-current-foreground",
        "type": "Color",
        "description": "Foreground for current year/month. Auto-derived from ym-current-background."
      },
      {
        "name": "ym-current-hover-foreground",
        "type": "Color",
        "description": ":Hover foreground for current year/month."
      },
      {
        "name": "ym-current-hover-background",
        "type": "Color",
        "description": ":Hover background for current year/month."
      },
      {
        "name": "ym-selected-outline-color",
        "type": "Color",
        "description": "Outline color for selected year/month."
      },
      {
        "name": "ym-selected-hover-outline-color",
        "type": "Color",
        "description": ":Hover outline color for selected year/month."
      },
      {
        "name": "ym-selected-focus-outline-color",
        "type": "Color",
        "description": ":Focus outline color for selected year/month."
      },
      {
        "name": "ym-selected-foreground",
        "type": "Color",
        "description": "Foreground for selected year/month. Auto-derived from ym-selected-background."
      },
      {
        "name": "ym-selected-background",
        "type": "Color",
        "description": "Background for selected year/month. Auto-derived from header-background."
      },
      {
        "name": "ym-selected-hover-foreground",
        "type": "Color",
        "description": ":Hover foreground for selected year/month."
      },
      {
        "name": "ym-selected-hover-background",
        "type": "Color",
        "description": ":Hover background for selected year/month."
      },
      {
        "name": "ym-selected-current-outline-color",
        "type": "Color",
        "description": "Outline color for selected current year/month."
      },
      {
        "name": "ym-selected-current-outline-hover-color",
        "type": "Color",
        "description": ":Hover outline color for selected current year/month."
      },
      {
        "name": "ym-selected-current-outline-focus-color",
        "type": "Color",
        "description": ":Focus outline color for selected current year/month."
      },
      {
        "name": "ym-selected-current-foreground",
        "type": "Color",
        "description": "Foreground for selected current year/month."
      },
      {
        "name": "ym-selected-current-background",
        "type": "Color",
        "description": "Background for selected current year/month."
      },
      {
        "name": "ym-selected-current-hover-foreground",
        "type": "Color",
        "description": ":Hover foreground for selected current year/month."
      },
      {
        "name": "ym-selected-current-hover-background",
        "type": "Color",
        "description": ":Hover background for selected current year/month."
      },
      {
        "name": "week-number-border-radius",
        "type": "List",
        "description": "Border radius for week number column."
      },
      {
        "name": "week-number-foreground",
        "type": "Color",
        "description": "Foreground for week number column. Auto-derived from week-number-background."
      },
      {
        "name": "week-number-background",
        "type": "Color",
        "description": "Background for week number column. Auto-derived from content-background."
      },
      {
        "name": "content-foreground",
        "type": "Color",
        "description": "The foreground color for idle dates. Auto-derived from content-background."
      },
      {
        "name": "