{
  "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": "weekend-color",
        "type": "Color",
        "description": "Color for weekend days. Auto-derived from content-foreground."
      },
      {
        "name": "inactive-color",
        "type": "Color",
        "description": "Color for inactive dates (outside current month). Auto-derived from content-background."
      },
      {
        "name": "date-border-radius",
        "type": "List",
        "description": "Border radius for date cells."
      },
      {
        "name": "date-border-color",
        "type": "Color",
        "description": "Border color for date cells."
      },
      {
        "name": "date-hover-border-color",
        "type": "Color",
        "description": ":Hover border color for date cells."
      },
      {
        "name": "date-focus-border-color",
        "type": "Color",
        "description": ":Focus border color for date cells."
      },
      {
        "name": "date-hover-background",
        "type": "Color",
        "description": ":Hover background for date cells. Auto-derived from content-background."
      },
      {
        "name": "date-focus-background",
        "type": "Color",
        "description": ":Focus background for date cells. Auto-derived from date-hover-background."
      },
      {
        "name": "date-hover-foreground",
        "type": "Color",
        "description": ":Hover foreground for date cells. Auto-derived from date-hover-background."
      },
      {
        "name": "date-focus-foreground",
        "type": "Color",
        "description": ":Focus foreground for date cells. Auto-derived from date-hover-foreground."
      },
      {
        "name": "date-selected-border-color",
        "type": "Color",
        "description": "Border color for selected date."
      },
      {
        "name": "date-selected-hover-border-color",
        "type": "Color",
        "description": ":Hover border color for selected date."
      },
      {
        "name": "date-selected-focus-border-color",
        "type": "Color",
        "description": ":Focus border color for selected date."
      },
      {
        "name": "date-selected-background",
        "type": "Color",
        "description": "Background for selected date. Auto-derived from header-background."
      },
      {
        "name": "date-selected-foreground",
        "type": "Color",
        "description": "Foreground for selected date. Auto-derived from date-selected-background."
      },
      {
        "name": "date-selected-hover-background",
        "type": "Color",
        "description": ":Hover background for selected date. Auto-derived from date-selected-background."
      },
      {
        "name": "date-selected-focus-background",
        "type": "Color",
        "description": ":Focus background for selected date."
      },
      {
        "name": "date-selected-hover-foreground",
        "type": "Color",
        "description": ":Hover foreground for selected date."
      },
      {
        "name": "date-selected-focus-foreground",
        "type": "Color",
        "description": ":Focus foreground for selected date."
      },
      {
        "name": "date-selected-special-border-color",
        "type": "Color",
        "description": "Border color for selected special date."
      },
      {
        "name": "date-selected-special-hover-border-color",
        "type": "Color",
        "description": ":Hover border color for selected special date."
      },
      {
        "name": "date-selected-special-focus-border-color",
        "type": "Color",
        "description": ":Focus border color for selected special date."
      },
      {
        "name": "date-selected-special-background",
        "type": "Color",
        "description": "Background for selected special date."
      },
      {
        "name": "date-selected-special-foreground",
        "type": "Color",
        "description": "Foreground for selected special date."
      },
      {
        "name": "date-selected-special-hover-background",
        "type": "Color",
        "description": ":Hover background for selected special date."
      },
      {
        "name": "date-selected-special-focus-background",
        "type": "Color",
        "description": ":Focus background for selected special date."
      },
      {
        "name": "date-selected-special-hover-foreground",
        "type": "Color",
        "description": ":Hover foreground for selected special date."
      },
      {
        "name": "date-selected-special-focus-foreground",
        "type": "Color",
        "description": ":Focus foreground for selected special date."
      },
      {
        "name": "date-range-border-radius",
        "type": "List",
        "description": "Border radius for date range selection."
      },
      {
        "name": "date-range-border-color",
        "type": "Color",
        "description": "Border color for date range selection."
      },
      {
        "name": "date-range-preview-border-color",
        "type": "Color",
        "description": "Preview border color for date range selection."
      },
      {
        "name": "date-selected-range-foreground",
        "type": "Color",
        "description": "Foreground for dates in selected range."
      },
      {
        "name": "date-selected-range-background",
        "type": "Color",
        "description": "Background for dates in selected range."
      },
      {
        "name": "date-selected-range-hover-foreground",
        "type": "Color",
        "description": ":Hover foreground for dates in selected range."
      },
      {
        "name": "date-selected-range-hover-background",
        "type": "Color",
        "description": ":Hover background for dates in selected range."
      },
      {
        "name": "date-selected-range-focus-foreground",
        "type": "Color",
        "description": ":Focus foreground for dates in selected range."
      },
      {
        "name": "date-selected-range-focus-background",
        "type": "Color",
        "description": ":Focus background for dates in selected range."
      },
      {
        "name": "date-selected-current-range-foreground",
        "type": "Color",
        "description": "Foreground for current date in selected range."
      },
      {
        "name": "date-selected-current-range-background",
        "type": "Color",
        "description": "Background for current date in selected range."
      },
      {
        "name": "date-selected-current-range-hover-foreground",
        "type": "Color",
        "description": ":Hover foreground for current date in selected range."
      },
      {
        "name": "date-selected-current-range-hover-background",
        "type": "Color",
        "description": ":Hover background for current date in selected range."
      },
      {
        "name": "date-selected-current-range-focus-foreground",
        "type": "Color",
        "description": ":Focus foreground for current date in selected range."
      },
      {
        "name": "date-selected-current-range-focus-background",
        "type": "Color",
        "description": ":Focus background for current date in selected range."
      },
      {
        "name": "date-current-border-radius",
        "type": "List",
        "description": "Border radius for current date."
      },
      {
        "name": "date-current-border-color",
        "type": "Color",
        "description": "Border color for current date."
      },
      {
        "name": "date-current-hover-border-color",
        "type": "Color",
        "description": ":Hover border color for current date."
      },
      {
        "name": "date-current-focus-border-color",
        "type": "Color",
        "description": ":Focus border color for current date."
      },
      {
        "name": "date-current-background",
        "type": "Color",
        "description": "Background for current date."
      },
      {
        "name": "date-current-foreground",
        "type": "Color",
        "description": "Foreground for current date."
      },
      {
        "name": "date-current-hover-background",
        "type": "Color",
        "description": ":Hover background for current date."
      },
      {
        "name": "date-current-focus-background",
        "type": "Color",
        "description": ":Focus background for current date."
      },
      {
        "name": "date-current-hover-foreground",
        "type": "Color",
        "description": ":Hover foreground for current date."
      },
      {
        "name": "date-current-focus-foreground",
        "type": "Color",
        "description": ":Focus foreground for current date."
      },
      {
        "name": "date-selected-current-border-color",
        "type": "Color",
        "description": "Border color for selected current date."
      },
      {
        "name": "date-selected-current-hover-border-color",
        "type": "Color",
        "description": ":Hover border color for selected current date."
      },
      {
        "name": "date-selected-current-focus-border-color",
        "type": "Color",
        "description": ":Focus border color for selected current date."
      },
      {
        "name": "date-selected-current-background",
        "type": "Color",
        "description": "Background for selected current date."
      },
      {
        "name": "date-selected-current-hover-background",
        "type": "Color",
        "description": ":Hover background for selected current date."
      },
      {
        "name": "date-selected-current-focus-background",
        "type": "Color",
        "description": ":Focus background for selected current date."
      },
      {
        "name": "date-selected-current-foreground",
        "type": "Color",
        "description": "Foreground for selected current date."
      },
      {
        "name": "date-selected-current-hover-foreground",
        "type": "Color",
        "description": ":Hover foreground for selected current date."
      },
      {
        "name": "date-selected-current-focus-foreground",
        "type": "Color",
        "description": ":Focus foreground for selected current date."
      },
      {
        "name": "date-special-border-radius",
        "type": "List",
        "description": "Border radius for special date."
      },
      {
        "name": "date-special-border-color",
        "type": "Color",
        "description": "Border color for special date."
      },
      {
        "name": "date-special-hover-border-color",
        "type": "Color",
        "description": ":Hover border color for special date."
      },
      {
        "name": "date-special-focus-border-color",
        "type": "Color",
        "description": ":Focus border color for special date."
      },
      {
        "name": "date-special-foreground",
        "type": "Color",
        "description": "Foreground for special date. Auto-derived from header-background."
      },
      {
        "name": "date-special-background",
        "type": "Color",
        "description": "Background for special date."
      },
      {
        "name": "date-special-hover-foreground",
        "type": "Color",
        "description": ":Hover foreground for special date."
      },
      {
        "name": "date-special-hover-background",
        "type": "Color",
        "description": ":Hover background for special date."
      },
      {
        "name": "date-special-focus-foreground",
        "type": "Color",
        "description": ":Focus foreground for special date."
      },
      {
        "name": "date-special-focus-background",
        "type": "Color",
        "description": ":Focus background for special date."
      },
      {
        "name": "date-special-range-border-color",
        "type": "Color",
        "description": "Border color for special date in range."
      },
      {
        "name": "date-special-range-hover-border-color",
        "type": "Color",
        "description": ":Hover border color for special date in range."
      },
      {
        "name": "date-special-range-focus-border-color",
        "type": "Color",
        "description": ":Focus border color for special date in range."
      },
      {
        "name": "date-special-range-foreground",
        "type": "Color",
        "description": "Foreground for special date in range."
      },
      {
        "name": "date-special-range-hover-foreground",
        "type": "Color",
        "description": ":Hover foreground for special date in range."
      },
      {
        "name": "date-special-range-focus-foreground",
        "type": "Color",
        "description": ":Focus foreground for special date in range."
      },
      {
        "name": "date-special-range-background",
        "type": "Color",
        "description": "Background for special date in range."
      },
      {
        "name": "date-special-range-hover-background",
        "type": "Color",
        "description": ":Hover background for special date in range."
      },
      {
        "name": "date-special-range-focus-background",
        "type": "Color",
        "description": ":Focus background for special date in range."
      },
      {
        "name": "date-disabled-foreground",
        "type": "Color",
        "description": "Foreground for disabled dates."
      },
      {
        "name": "date-disabled-range-foreground",
        "type": "Color",
        "description": "Foreground for disabled dates in selected range."
      }
    ]
  },
  "card": {
    "name": "card",
    "themeFunctionName": "card-theme",
    "description": "Card Theme",
    "primaryTokens": [
      {
        "name": "background",
        "description": "The card background color."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "The card background color. PRIMARY - derives all text colors."
      },
      {
        "name": "outline-color",
        "type": "Color",
        "description": "The color of the outline for outlined type cards."
      },
      {
        "name": "header-text-color",
        "type": "Color",
        "description": "The text color of the card title. Auto-derived from background."
      },
      {
        "name": "subtitle-text-color",
        "type": "Color",
        "description": "The text color of the card subtitle. Auto-derived from background (muted)."
      },
      {
        "name": "content-text-color",
        "type": "Color",
        "description": "The text color of the card content. Auto-derived from background (muted)."
      },
      {
        "name": "actions-text-color",
        "type": "Color",
        "description": "The text color of the card buttons. Auto-derived from background."
      },
      {
        "name": "resting-shadow",
        "type": "List",
        "description": "The shadow of the card in its resting state."
      },
      {
        "name": "hover-shadow",
        "type": "List",
        "description": "The shadow of the card in its hover state."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius used for card component.\n"
      }
    ]
  },
  "carousel": {
    "name": "carousel",
    "themeFunctionName": "carousel-theme",
    "description": "Carousel Theme",
    "primaryTokens": [
      {
        "name": "button-background",
        "description": "The nav button background."
      },
      {
        "name": "indicator-background",
        "description": "The indicator container background."
      }
    ],
    "primaryTokensSummary": "Button colors cascade from button-background through hover and disabled states.",
    "tokens": [
      {
        "name": "slide-background",
        "type": "Color",
        "description": "The slide background color."
      },
      {
        "name": "button-background",
        "type": "Color",
        "description": "The previous/next buttons idle background color. PRIMARY - derives arrow, hover, disabled, focus colors."
      },
      {
        "name": "button-hover-background",
        "type": "Color",
        "description": "The previous/next buttons hover background color. Auto-derived from button-background."
      },
      {
        "name": "button-disabled-background",
        "type": "Color",
        "description": "The previous/next buttons disabled background color. Auto-derived from button-background."
      },
      {
        "name": "button-arrow-color",
        "type": "Color",
        "description": "The previous/next buttons idle arrow color. Auto-derived from button-background."
      },
      {
        "name": "button-hover-arrow-color",
        "type": "Color",
        "description": "The previous/next buttons hover arrow color. Auto-derived from button-hover-background."
      },
      {
        "name": "button-disabled-arrow-color",
        "type": "Color",
        "description": "The previous/next buttons disabled arrow color. Auto-derived from button-disabled-background."
      },
      {
        "name": "button-border-color",
        "type": "Color",
        "description": "The previous/next buttons idle border color. Auto-derived from button-background (indigo)."
      },
      {
        "name": "button-hover-border-color",
        "type": "Color",
        "description": "The previous/next buttons hover border color. Auto-derived from button-border-color."
      },
      {
        "name": "button-focus-border-color",
        "type": "Color",
        "description": "The navigation buttons border color on focus. Auto-derived from button-focus-arrow-color or button-background."
      },
      {
        "name": "button-disabled-border-color",
        "type": "Color",
        "description": "The previous/next buttons disabled border color."
      },
      {
        "name": "indicator-background",
        "type": "Color",
        "description": "The indicators container background color. PRIMARY - derives dot, border, active, focus colors."
      },
      {
        "name": "label-indicator-background",
        "type": "Color",
        "description": "The label indicator container background color."
      },
      {
        "name": "indicator-dot-color",
        "type": "Color",
        "description": "The idle indicator dot color. Auto-derived from indicator-background."
      },
      {
        "name": "indicator-hover-dot-color",
        "type": "Color",
        "description": "The hover indicator dot color. Auto-derived from indicator-dot-color."
      },
      {
        "name": "indicator-focus-color",
        "type": "Color",
        "description": "The indicators border and dot color on focus. Auto-derived from indicator-background or button-background."
      },
      {
        "name": "indicator-border-color",
        "type": "Color",
        "description": "The idle indicator border color. Auto-derived from indicator-background or indicator-dot-color."
      },
      {
        "name": "indicator-active-dot-color",
        "type": "Color",
        "description": "The active indicator dot color. Auto-derived from indicator-background or button-background."
      },
      {
        "name": "indicator-active-border-color",
        "type": "Color",
        "description": "The active indicator border color. Auto-derived from indicator-active-dot-color."
      },
      {
        "name": "indicator-active-hover-dot-color",
        "type": "Color",
        "description": "The active indicator dot color on hover. Auto-derived from indicator-active-dot-color."
      },
      {
        "name": "button-shadow",
        "type": "List",
        "description": "Shadow underneath the previous/next buttons."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius used for carousel component.\n"
      }
    ]
  },
  "chat": {
    "name": "chat",
    "themeFunctionName": "chat-theme",
    "description": "Chat Theme",
    "primaryTokens": [
      {
        "name": "header-background",
        "description": "The background color of the chat header."
      },
      {
        "name": "sent-message-background",
        "description": "The background color for sent messages."
      },
      {
        "name": "received-message-background",
        "description": "The background color for received messages."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "The background color of the chat component."
      },
      {
        "name": "header-background",
        "type": "Color",
        "description": "The background color of the chat header."
      },
      {
        "name": "header-color",
        "type": "Color",
        "description": "The text color of the chat header. Auto-derived from header-background."
      },
      {
        "name": "header-border",
        "type": "Color",
        "description": "The color used for the chat header border."
      },
      {
        "name": "sent-message-background",
        "type": "Color",
        "description": "The background color for sent messages."
      },
      {
        "name": "sent-message-color",
        "type": "Color",
        "description": "The text color of the chat messages. Auto-derived from sent-message-background."
      },
      {
        "name": "received-message-background",
        "type": "Color",
        "description": "The background color for received messages."
      },
      {
        "name": "received-message-color",
        "type": "Color",
        "description": "The text color for received messages. Auto-derived from received-message-background."
      },
      {
        "name": "message-actions-color",
        "type": "Color",
        "description": "The icon color of the chat received message actions. Auto-derived from received-message-color."
      },
      {
        "name": "message-border-radius",
        "type": "Number",
        "description": "The border radius of the chat messages."
      },
      {
        "name": "file-background",
        "type": "Color",
        "description": "The background color of the image message container."
      },
      {
        "name": "file-icon-color",
        "type": "Color",
        "description": "The color of the attached file icon."
      },
      {
        "name": "file-icon-accent-color",
        "type": "Color",
        "description": "The accent color of the attached file icon."
      },
      {
        "name": "image-background",
        "type": "Color",
        "description": "The background color of the image message container."
      },
      {
        "name": "image-border",
        "type": "Color",
        "description": "The border color of the image message container."
      },
      {
        "name": "image-attachment-icon",
        "type": "Color",
        "description": "The color of the message attachment icon."
      },
      {
        "name": "chat-input-border",
        "type": "Color",
        "description": "The border color of the chat input area."
      },
      {
        "name": "progress-indicator-color",
        "type": "Color",
        "description": "The color of the progress indicator in the chat component."
      },
      {
        "name": "code-background",
        "type": "Color",
        "description": "The background color of the code snippets in the chat component."
      },
      {
        "name": "code-border",
        "type": "Color",
        "description": "The border color of the code snippets in the chat component."
      }
    ]
  },
  "checkbox": {
    "name": "checkbox",
    "themeFunctionName": "checkbox-theme",
    "description": "Checkbox Theme",
    "primaryTokens": [
      {
        "name": "fill-color",
        "description": "The checked state border and fill color."
      },
      {
        "name": "empty-color",
        "description": "The unchecked border color."
      },
      {
        "name": "error-color",
        "description": "The invalid state color."
      }
    ],
    "primaryTokensSummary": "Setting just `$fill-color` will theme all checked states consistently.",
    "tokens": [
      {
        "name": "label-color",
        "type": "Color",
        "description": "The text color used for the label text."
      },
      {
        "name": "label-color-hover",
        "type": "Color",
        "description": "The text color used for the label text on hover. Auto-derived from label-color."
      },
      {
        "name": "empty-color",
        "type": "Color",
        "description": "The unchecked border color. PRIMARY for unchecked states."
      },
      {
        "name": "empty-color-hover",
        "type": "Color",
        "description": "The unchecked border color on hover. Auto-derived from empty-color."
      },
      {
        "name": "empty-fill-color",
        "type": "Color",
        "description": "The unchecked fill color."
      },
      {
        "name": "fill-color",
        "type": "Color",
        "description": "The checked border and fill colors. PRIMARY - derives tick-color, focus colors."
      },
      {
        "name": "fill-color-hover",
        "type": "Color",
        "description": "The checked border and fill colors on hover. Auto-derived from fill-color."
      },
      {
        "name": "tick-color",
        "type": "Color",
        "description": "The checked mark color. Auto-derived from fill-color (contrast)."
      },
      {
        "name": "tick-color-hover",
        "type": "Color",
        "description": "The checked mark color on hover."
      },
      {
        "name": "tick-width",
        "type": "Number",
        "description": "The checked mark width."
      },
      {
        "name": "disabled-color",
        "type": "Color",
        "description": "The disabled border and fill colors."
      },
      {
        "name": "disabled-fill-color",
        "type": "Color",
        "description": "The disabled border and fill colors in checked state. Auto-derived from disabled-color (material/fluent) or disabled-indeterminate-color (bootstrap/indigo)."
      },
      {
        "name": "disabled-tick-color",
        "type": "Color",
        "description": "The checked mark color in disabled state."
      },
      {
        "name": "disabled-indeterminate-color",
        "type": "Color",
        "description": "The disabled border and fill colors in indeterminate state. Auto-derived from fill-color."
      },
      {
        "name": "disabled-color-label",
        "type": "Color",
        "description": "The disabled label color."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius used for checkbox component."
      },
      {
        "name": "border-radius-ripple",
        "type": "List",
        "description": "The border radius used for checkbox ripple."
      },
      {
        "name": "focus-outline-color",
        "type": "Color",
        "description": "The focus outlined color. Auto-derived from empty-color (indigo) or fill-color (bootstrap)."
      },
      {
        "name": "focus-outline-color-focused",
        "type": "Color",
        "description": "The focus outlined color for focused state. Auto-derived from fill-color (indigo)."
      },
      {
        "name": "focus-border-color",
        "type": "Color",
        "description": "The focus border color. Auto-derived from fill-color."
      },
      {
        "name": "error-color",
        "type": "Color",
        "description": "The border and fill colors in invalid state. PRIMARY for error states."
      },
      {
        "name": "error-color-hover",
        "type": "Color",
        "description": "The border and fill colors in invalid state on hover. Auto-derived from error-color."
      },
      {
        "name": "focus-outline-color-error",
        "type": "Color",
        "description": "The focus outline error color. Auto-derived from error-color.\nSet to light when the surrounding area is dark.\n"
      }
    ]
  },
  "chip": {
    "name": "chip",
    "themeFunctionName": "chip-theme",
    "description": "Chip Theme",
    "primaryTokens": [
      {
        "name": "background",
        "description": "The main chip background."
      },
      {
        "name": "selected-background",
        "description": "Selected state background."
      }
    ],
    "primaryTokensSummary": "Setting just `$background` will create a complete chip theme with all states properly derived.",
    "tokens": [
      {
        "name": "border-radius",
        "type": "List",
        "description": "The chip border-radius.\n"
      },
      {
        "name": "text-color",
        "type": "Color",
        "description": "The chip text color. Auto-derived from background."
      },
      {
        "name": "background",
        "type": "Color",
        "description": "The chip background color. PRIMARY - derives text-color, border-color, hover/focus states."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The chip border color. Auto-derived from background.\n"
      },
      {
        "name": "disabled-text-color",
        "type": "Color",
        "description": "The disabled chip text color."
      },
      {
        "name": "disabled-background",
        "type": "Color",
        "description": "The disabled chip background color."
      },
      {
        "name": "disabled-border-color",
        "type": "Color",
        "description": "The disabled chip border color.\n"
      },
      {
        "name": "ghost-background",
        "type": "Color",
        "description": "The chip ghost background color."
      },
      {
        "name": "ghost-text-color",
        "type": "Color",
        "description": "The chip ghost text color."
      },
      {
        "name": "ghost-shadow",
        "type": "List",
        "description": "The chip ghost shadow.\n"
      },
      {
        "name": "hover-text-color",
        "type": "Color",
        "description": "The chip text hover color. Auto-derived from hover-background."
      },
      {
        "name": "hover-background",
        "type": "Color",
        "description": "The chip hover background color. Auto-derived from background."
      },
      {
        "name": "hover-border-color",
        "type": "Color",
        "description": "The chip hover border color. Auto-derived from hover-background.\n"
      },
      {
        "name": "focus-text-color",
        "type": "Color",
        "description": "The chip text focus color. Auto-derived from focus-background."
      },
      {
        "name": "focus-background",
        "type": "Color",
        "description": "The chip focus background color. Auto-derived from background."
      },
      {
        "name": "focus-border-color",
        "type": "color",
        "description": "The chip focus border color. Auto-derived from focus-background.\n"
      },
      {
        "name": "selected-text-color",
        "type": "color",
        "description": "The selected chip text color. Auto-derived from selected-background."
      },
      {
        "name": "selected-background",
        "type": "color",
        "description": "The selected chip background color. Auto-derived from background."
      },
      {
        "name": "selected-border-color",
        "type": "color",
        "description": "The selected chip border color. Auto-derived from selected-background.\n"
      },
      {
        "name": "hover-selected-text-color",
        "type": "color",
        "description": "The selected chip hover text color. Auto-derived from hover-selected-background."
      },
      {
        "name": "hover-selected-background",
        "type": "color",
        "description": "The selected chip hover background color. Auto-derived from selected-background."
      },
      {
        "name": "hover-selected-border-color",
        "type": "color",
        "description": "The selected chip hover border color. Auto-derived from hover-selected-background.\n"
      },
      {
        "name": "focus-selected-text-color",
        "type": "color",
        "description": "The selected chip text focus color. Auto-derived from focus-selected-background."
      },
      {
        "name": "focus-selected-background",
        "type": "color",
        "description": "The selected chip focus background color. Auto-derived from selected-background."
      },
      {
        "name": "focus-selected-border-color",
        "type": "color",
        "description": "The selected chip focus border color. Auto-derived from focus-selected-background.\n"
      },
      {
        "name": "remove-icon-color",
        "type": "color",
        "description": "The remove icon color for the chip."
      },
      {
        "name": "remove-icon-color-focus",
        "type": "color",
        "description": "The remove icon color on focus for the chip.\n"
      }
    ]
  },
  "column-actions": {
    "name": "column-actions",
    "themeFunctionName": "column-actions-theme",
    "description": "Column Actions Theme",
    "primaryTokens": [
      {
        "name": "background-color",
        "description": "The background color of the panel."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "title-color",
        "type": "Color",
        "description": "The text color used for the title of the list. Auto-derived from background-color."
      },
      {
        "name": "background-color",
        "type": "Color",
        "description": "The background color of the panel. PRIMARY - derives title-color.\n"
      }
    ]
  },
  "combo": {
    "name": "combo",
    "themeFunctionName": "combo-theme",
    "description": "Combo Theme",
    "primaryTokens": [
      {
        "name": "toggle-button-background",
        "description": "The toggle button background."
      },
      {
        "name": "empty-list-background",
        "description": "The empty list background."
      },
      {
        "name": "clear-button-background-focus",
        "description": "The clear button focus background."
      }
    ],
    "primaryTokensSummary": "Toggle button colors cascade from toggle-button-background through focus and disabled states.",
    "tokens": [
      {
        "name": "search-separator-border-color",
        "type": "Color",
        "description": "The combo search box separator color."
      },
      {
        "name": "empty-list-placeholder-color",
        "type": "Color",
        "description": "The combo placeholder text color. Auto-derived from empty-list-background."
      },
      {
        "name": "empty-list-background",
        "type": "Color",
        "description": "The combo list background color. PRIMARY - derives empty-list-placeholder-color."
      },
      {
        "name": "toggle-button-background",
        "type": "Color",
        "description": "The combo toggle button background color. PRIMARY - derives all toggle button colors."
      },
      {
        "name": "toggle-button-background-focus",
        "type": "Color",
        "description": "The combo toggle button background color when the combo is focused in material box variant. Auto-derived from toggle-button-background."
      },
      {
        "name": "toggle-button-background-focus--border",
        "type": "Color",
        "description": "The combo toggle button background color when the combo is focused in material border variant. Auto-derived from toggle-button-background."
      },
      {
        "name": "toggle-button-background-disabled",
        "type": "Color",
        "description": "The combo toggle button background color when the combo is disabled. Auto-derived from toggle-button-background."
      },
      {
        "name": "toggle-button-foreground",
        "type": "Color",
        "description": "The combo toggle button foreground color. Auto-derived from toggle-button-background."
      },
      {
        "name": "toggle-button-foreground-focus",
        "type": "Color",
        "description": "The combo toggle button foreground color when the combo is focused. Auto-derived from toggle-button-background-focus."
      },
      {
        "name": "toggle-button-foreground-disabled",
        "type": "Color",
        "description": "The combo toggle button foreground color when the combo is disabled. Auto-derived from toggle-button-background."
      },
      {
        "name": "toggle-button-foreground-filled",
        "type": "Color",
        "description": "The combo toggle button foreground color when the combo is filled. Auto-derived from toggle-button-background."
      },
      {
        "name": "clear-button-background",
        "type": "Color",
        "description": "The combo clear button background color."
      },
      {
        "name": "clear-button-background-focus",
        "type": "Color",
        "description": "The combo clear button background color when the combo is focused. PRIMARY for clear button focus."
      },
      {
        "name": "clear-button-foreground",
        "type": "Color",
        "description": "The combo clear button foreground color."
      },
      {
        "name": "clear-button-foreground-focus",
        "type": "Color",
        "description": "The combo clear button foreground color when the combo is focused. Auto-derived from clear-button-background-focus."
      }
    ]
  },
  "date-range-picker": {
    "name": "date-range-picker",
    "themeFunctionName": "date-range-picker-theme",
    "description": "Date Range Picker Theme\n\nNOTE: This component has no automatic token derivation.\nAll tokens are directly passed to the schema without calculations.",
    "primaryTokens": [],
    "tokens": [
      {
        "name": "label-color",
        "type": "color",
        "description": "The color for date range separator label."
      }
    ]
  },
  "dialog": {
    "name": "dialog",
    "themeFunctionName": "dialog-theme",
    "description": "Dialog Theme",
    "primaryTokens": [
      {
        "name": "background",
        "description": "The dialog background color."
      }
    ],
    "primaryTokensSummary": "Setting just `$background` will create a complete dialog theme with proper text contrast.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "The dialog background color. PRIMARY - derives title-color, message-color, border-color."
      },
      {
        "name": "title-color",
        "type": "Color",
        "description": "The dialog title text color. Auto-derived from background."
      },
      {
        "name": "message-color",
        "type": "Color",
        "description": "The dialog message text color. Auto-derived from background (slightly transparent)."
      },
      {
        "name": "shadow",
        "type": "List",
        "description": "The shadow used for the dialog."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius used for dialog component."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The border color used for dialog component. Auto-derived from background."
      }
    ]
  },
  "divider": {
    "name": "divider",
    "themeFunctionName": "divider-theme",
    "description": "Divider Theme\n\nThis theme has no automatic token derivation. All tokens are independent.",
    "primaryTokens": [],
    "tokens": [
      {
        "name": "color",
        "type": "Color",
        "description": "The color of the divider. (Gradients are not supported for dashed dividers)."
      },
      {
        "name": "inset",
        "type": "number",
        "description": "The inset value of the divider."
      }
    ]
  },
  "dock-manager": {
    "name": "dock-manager",
    "themeFunctionName": "dock-manager-theme",
    "description": "Dock Manager Theme\n\nNOTE: This component uses a pass-through pattern with meta.keywords($rest).\nAll tokens are directly passed to the schema without automatic derivation.\nEach token must be set individually for full customization.",
    "primaryTokens": [],
    "tokens": [
      {
        "name": "accent-color",
        "type": "Color",
        "description": "Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color."
      },
      {
        "name": "active-color",
        "type": "Color",
        "description": "Sets the active text and border colors for tabs, panes, and menus."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors."
      },
      {
        "name": "button-text",
        "type": "Color",
        "description": "Sets the button text color."
      },
      {
        "name": "context-menu-background",
        "type": "Color",
        "description": "Sets the background color for context menus."
      },
      {
        "name": "context-menu-background-active",
        "type": "Color",
        "description": "Sets the background color for active context menus."
      },
      {
        "name": "context-menu-color",
        "type": "Color",
        "description": "Sets the text color for context menus."
      },
      {
        "name": "context-menu-color-active",
        "type": "Color",
        "description": "Sets the text color for active context menus."
      },
      {
        "name": "dock-background",
        "type": "Color",
        "description": "Sets the background color of the dock manager."
      },
      {
        "name": "dock-text",
        "type": "Color",
        "description": "Sets the text color of the dock manager."
      },
      {
        "name": "drop-shadow-background",
        "type": "Color",
        "description": "Sets the drop-shadow background color."
      },
      {
        "name": "floating-pane-border-color",
        "type": "Color",
        "description": "Sets the border color for floating panes."
      },
      {
        "name": "flyout-shadow-color",
        "type": "Color",
        "description": "Sets the flyout shadow color."
      },
      {
        "name": "joystick-background",
        "type": "Color",
        "description": "Sets the background color of the joystick."
      },
      {
        "name": "joystick-background-active",
        "type": "Color",
        "description": "Sets the background color of the joysticks."
      },
      {
        "name": "joystick-border-color",
        "type": "Color",
        "description": "Sets the border color of the joystick."
      },
      {
        "name": "joystick-icon-color",
        "type": "Color",
        "description": "Sets the color for the joystick icons."
      },
      {
        "name": "joystick-icon-color-active",
        "type": "Color",
        "description": "Sets the color of the active joystick icons."
      },
      {
        "name": "pane-content-background",
        "type": "Color",
        "description": "Sets the background color of the content panes."
      },
      {
        "name": "pane-content-text",
        "type": "Color",
        "description": "Sets the text color of the content panes."
      },
      {
        "name": "pane-header-background",
        "type": "Color",
        "description": "Sets the background color for pane headers."
      },
      {
        "name": "pane-header-text",
        "type": "Color",
        "description": "Sets the text color for pane headers."
      },
      {
        "name": "pinned-header-background",
        "type": "Color",
        "description": "Sets the background colors of pinned headers."
      },
      {
        "name": "pinned-header-text",
        "type": "Color",
        "description": "Sets the text colors of pinned headers."
      },
      {
        "name": "background-color",
        "type": "Color",
        "description": "Sets the base dock manager color as well as the pane headers and tabs background colors."
      },
      {
        "name": "splitter-background",
        "type": "Color",
        "description": "Sets the background color for the splitters."
      },
      {
        "name": "splitter-handle",
        "type": "Color",
        "description": "Sets the background color for the splitter handles."
      },
      {
        "name": "tab-background",
        "type": "Color",
        "description": "Sets the background color for tabs."
      },
      {
        "name": "tab-background-active",
        "type": "Color",
        "description": "Sets the background color for active tabs."
      },
      {
        "name": "tab-border-color",
        "type": "Color",
        "description": "Sets the border color for tabs."
      },
      {
        "name": "tab-border-color-active",
        "type": "Color",
        "description": "Sets the border color for active tabs."
      },
      {
        "name": "tab-text",
        "type": "Color",
        "description": "Sets the text color for tabs."
      },
      {
        "name": "tab-text-active",
        "type": "Color",
        "description": "Sets the text color for active tabs."
      },
      {
        "name": "text-color",
        "type": "Color",
        "description": "Sets the text color for most elements in the dock manager. Used as the default joystick icon color."
      }
    ]
  },
  "drop-down": {
    "name": "drop-down",
    "themeFunctionName": "drop-down-theme",
    "description": "Drop-down Theme",
    "primaryTokens": [
      {
        "name": "background-color",
        "description": "The drop-down background."
      },
      {
        "name": "selected-item-background",
        "description": "The selected item background."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "background-color",
        "type": "Color",
        "description": "The drop-down background color. PRIMARY - derives item, hover, focus, selected, disabled colors."
      },
      {
        "name": "header-text-color",
        "type": "Color",
        "description": "The drop-down header text color. Auto-derived from background-color."
      },
      {
        "name": "item-text-color",
        "type": "Color",
        "description": "The drop-down item text color. Auto-derived from background-color."
      },
      {
        "name": "item-icon-color",
        "type": "Color",
        "description": "The drop-down item icon color. Auto-derived from item-text-color."
      },
      {
        "name": "hover-item-text-color",
        "type": "Color",
        "description": "The drop-down item hover text color. Auto-derived from item-text-color."
      },
      {
        "name": "hover-item-icon-color",
        "type": "Color",
        "description": "The drop-down item hover icon color. Auto-derived from hover-item-text-color."
      },
      {
        "name": "hover-item-background",
        "type": "Color",
        "description": "The drop-down hover item background color. Auto-derived from background-color."
      },
      {
        "name": "focused-item-background",
        "type": "Color",
        "description": "The drop-down focused item background color. Auto-derived from background-color."
      },
      {
        "name": "focused-item-text-color",
        "type": "Color",
        "description": "The drop-down focused item text color. Auto-derived from focused-item-background."
      },
      {
        "name": "focused-item-border-color",
        "type": "Color",
        "description": "The drop-down item focused border color. Auto-derived from selected-item-background (indigo)."
      },
      {
        "name": "selected-item-background",
        "type": "Color",
        "description": "The drop-down selected item background color. PRIMARY - derives selected text/icon and hover/focus states. Auto-derived from background-color."
      },
      {
        "name": "selected-item-text-color",
        "type": "Color",
        "description": "The drop-down selected item text color. Auto-derived from selected-item-background."
      },
      {
        "name": "selected-item-icon-color",
        "type": "Color",
        "description": "The drop-down selected item icon color. Auto-derived from selected-item-text-color."
      },
      {
        "name": "selected-hover-item-background",
        "type": "Color",
        "description": "The drop-down selected item hover background color. Auto-derived from selected-item-background."
      },
      {
        "name": "selected-hover-item-text-color",
        "type": "Color",
        "description": "The drop-down selected item hover text color. Auto-derived from selected-hover-item-background."
      },
      {
        "name": "selected-hover-item-icon-color",
        "type": "Color",
        "description": "The drop-down selected item hover icon color. Auto-derived from selected-hover-item-text-color."
      },
      {
        "name": "selected-focus-item-background",
        "type": "Color",
        "description": "The drop-down selected item focus background color. Auto-derived from selected-item-background."
      },
      {
        "name": "selected-focus-item-text-color",
        "type": "Color",
        "description": "The drop-down selected item focus text color. Auto-derived from selected-focus-item-background."
      },
      {
        "name": "disabled-item-background",
        "type": "Color",
        "description": "The drop-down disabled item background color."
      },
      {
        "name": "disabled-item-text-color",
        "type": "Color",
        "description": "The drop-down disabled item text color. Auto-derived from background-color or disabled-item-background."
      },
      {
        "name": "shadow",
        "type": "List",
        "description": "Sets a shadow to be used for the drop-down."
      },
      {
        "name": "border-width",
        "type": "Number",
        "description": "The border width used for drop-down component."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The border color used for drop-down component."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius used for drop-down component."
      },
      {
        "name": "item-border-radius",
        "type": "List",
        "description": "The border radius used for drop-down items."
      }
    ]
  },
  "expansion-panel": {
    "name": "expansion-panel",
    "themeFunctionName": "expansion-panel-theme",
    "description": "Expansion Panel Theme",
    "primaryTokens": [
      {
        "name": "header-background",
        "description": "The panel header background."
      },
      {
        "name": "body-background",
        "description": "The panel body background."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "header-background",
        "type": "Color",
        "description": "The panel header background color. PRIMARY - derives header colors, focus, disabled."
      },
      {
        "name": "header-focus-background",
        "type": "Color",
        "description": "The panel header focus background color. Auto-derived from header-background."
      },
      {
        "name": "header-title-color",
        "type": "Color",
        "description": "The panel header title text color. Auto-derived from header-background."
      },
      {
        "name": "header-description-color",
        "type": "Color",
        "description": "The panel header description text color. Auto-derived from header-background (muted)."
      },
      {
        "name": "header-icon-color",
        "type": "Color",
        "description": "The panel header icon color. Auto-derived from header-background."
      },
      {
        "name": "body-color",
        "type": "Color",
        "description": "The panel body text color. Auto-derived from body-background."
      },
      {
        "name": "body-background",
        "type": "Color",
        "description": "The panel body background color. PRIMARY for body - derives body-color."
      },
      {
        "name": "disabled-text-color",
        "type": "Color",
        "description": "The panel disabled text color. Auto-derived from header-background."
      },
      {
        "name": "disabled-description-color",
        "type": "Color",
        "description": "The panel disabled header description text color. Auto-derived from header-background."
      },
      {
        "name": "expanded-margin",
        "type": "Number",
        "description": "The expansion panel margin in expanded state when positioned inside accordion."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius used for expansion-panel component."
      }
    ]
  },
  "accordion": {
    "name": "accordion",
    "themeFunctionName": "accordion-theme",
    "description": "Accordion Theme",
    "primaryTokens": [
      {
        "name": "header-background",
        "description": "The panel header background."
      },
      {
        "name": "body-background",
        "description": "The panel body background."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "header-background",
        "type": "Color",
        "description": "The panel header background color. PRIMARY - derives header colors, focus, disabled."
      },
      {
        "name": "header-focus-background",
        "type": "Color",
        "description": "The panel header focus background color. Auto-derived from header-background."
      },
      {
        "name": "header-title-color",
        "type": "Color",
        "description": "The panel header title text color. Auto-derived from header-background."
      },
      {
        "name": "header-description-color",
        "type": "Color",
        "description": "The panel header description text color. Auto-derived from header-background (muted)."
      },
      {
        "name": "header-icon-color",
        "type": "Color",
        "description": "The panel header icon color. Auto-derived from header-background."
      },
      {
        "name": "body-color",
        "type": "Color",
        "description": "The panel body text color. Auto-derived from body-background."
      },
      {
        "name": "body-background",
        "type": "Color",
        "description": "The panel body background color. PRIMARY for body - derives body-color."
      },
      {
        "name": "disabled-text-color",
        "type": "Color",
        "description": "The panel disabled text color. Auto-derived from header-background."
      },
      {
        "name": "disabled-description-color",
        "type": "Color",
        "description": "The panel disabled header description text color. Auto-derived from header-background."
      },
      {
        "name": "expanded-margin",
        "type": "Number",
        "description": "The expansion panel margin in expanded state when positioned inside accordion."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius used for expansion-panel component."
      }
    ]
  },
  "grid-summary": {
    "name": "grid-summary",
    "themeFunctionName": "grid-summary-theme",
    "description": "Grid Summary Theme",
    "primaryTokens": [
      {
        "name": "background-color",
        "description": "The summaries background color."
      },
      {
        "name": "label-color",
        "description": "The summaries label color."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "background-color",
        "type": "Color",
        "description": "The summaries background color. PRIMARY - derives label-color, result-color, border-color, pinned-border-color."
      },
      {
        "name": "label-color",
        "type": "Color",
        "description": "The summaries label color. PRIMARY - derives label-hover-color. Auto-derived from background-color."
      },
      {
        "name": "result-color",
        "type": "Color",
        "description": "The summaries value/result color. Auto-derived from background-color."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The summaries border color. Auto-derived from background-color."
      },
      {
        "name": "pinned-border-width",
        "type": "Color",
        "description": "The border width of the summary panel."
      },
      {
        "name": "pinned-border-style",
        "type": "Color",
        "description": "The border style of the summary panel."
      },
      {
        "name": "pinned-border-color",
        "type": "Color",
        "description": "The border color of the summary panel. Auto-derived from background-color."
      },
      {
        "name": "label-hover-color",
        "type": "Color",
        "description": "The summaries hover label color. Auto-derived from label-color."
      }
    ]
  },
  "grid": {
    "name": "grid",
    "themeFunctionName": "grid-theme",
    "description": "Grid Theme",
    "primaryTokens": [
      {
        "name": "background",
        "description": "Controls the overall background color of the grid, including header and content."
      },
      {
        "name": "foreground",
        "description": "Controls the overall foreground color of the grid, including text and icons."
      },
      {
        "name": "accent-color",
        "description": "Controls the accent color used for interactive elements in the grid."
      }
    ],
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "The background color of the grid."
      },
      {
        "name": "foreground",
        "type": "Color",
        "description": "The foreground color of the grid."
      },
      {
        "name": "accent-color",
        "type": "Color",
        "description": "The accent color used for interactive elements in the grid."
      },
      {
        "name": "header-background",
        "type": "Color",
        "description": "The table header background color - derives header-text-color, header-border-color, and many more."
      },
      {
        "name": "header-text-color",
        "type": "Color",
        "description": "The table header text color. Auto-derived from header-background."
      },
      {
        "name": "header-border-width",
        "type": "String",
        "description": "The border width used for header borders."
      },
      {
        "name": "header-border-style",
        "type": "String",
        "description": "The border style used for header borders."
      },
      {
        "name": "header-border-color",
        "type": "Color",
        "description": "The color used for header borders. Auto-derived from header-background."
      },
      {
        "name": "header-selected-background",
        "type": "Color",
        "description": "The table header background color when selected. Auto-derived from header-background."
      },
      {
        "name": "header-selected-text-color",
        "type": "Color",
        "description": "The table header text color when selected. Auto-derived from header-selected-background."
      },
      {
        "name": "sorted-header-icon-color",
        "type": "Color",
        "description": "The sort icon color when sorted. Auto-derived from header-background."
      },
      {
        "name": "sortable-header-icon-hover-color",
        "type": "color",
        "description": "The icon color on hover when sortable. Auto-derived from sorted-header-icon-color."
      },
      {
        "name": "content-background",
        "type": "Color",
        "description": "The table body background color - derives content-text-color, row backgrounds, cell backgrounds, borders."
      },
      {
        "name": "content-text-color",
        "type": "Color",
        "description": "The table body text color. Auto-derived from content-background."
      },
      {
        "name": "ghost-header-text-color",
        "type": "Color",
        "description": "The dragged header text color. Auto-derived from ghost-header-background."
      },
      {
        "name": "ghost-header-icon-color",
        "type": "Color",
        "description": "The dragged header icon color. Auto-derived from ghost-header-background."
      },
      {
        "name": "ghost-header-background",
        "type": "Color",
        "description": "The dragged header background color - derives ghost-header-text-color, ghost-header-icon-color."
      },
      {
        "name": "row-odd-background",
        "type": "Color",
        "description": "The background color of odd rows. Auto-derived from content-background."
      },
      {
        "name": "row-even-background",
        "type": "Color",
        "description": "The background color of even rows. Auto-derived from content-background."
      },
      {
        "name": "row-odd-text-color",
        "type": "Color",
        "description": "The text color of odd rows. Auto-derived from row-odd-background."
      },
      {
        "name": "row-even-text-color",
        "type": "Color",
        "description": "The text color of even rows. Auto-derived from row-even-background."
      },
      {
        "name": "row-selected-background",
        "type": "Color",
        "description": "The selected row background color. Auto-derived from content-background."
      },
      {
        "name": "row-selected-hover-background",
        "type": "Color",
        "description": "The selected row hover background color. Auto-derived from row-selected-background."
      },
      {
        "name": "row-selected-text-color",
        "type": "Color",
        "description": "The selected row text color. Auto-derived from row-selected-background."
      },
      {
        "name": "row-selected-hover-text-color",
        "type": "Color",
        "description": "The selected row hover text color. Auto-derived from row-selected-hover-background."
      },
      {
        "name": "row-hover-background",
        "type": "Color",
        "description": "The hover row background color. Auto-derived from content-background."
      },
      {
        "name": "row-hover-text-color",
        "type": "Color",
        "description": "The hover row text color. Auto-derived from row-hover-background."
      },
      {
        "name": "row-border-color",
        "type": "Color",
        "description": "The row bottom border color. Auto-derived from content-background."
      },
      {
        "name": "pinned-border-width",
        "type": "String",
        "description": "The border width of the pinned border."
      },
      {
        "name": "pinned-border-style",
        "type": "String",
        "description": "The CSS border style of the pinned border."
      },
      {
        "name": "pinned-border-color",
        "type": "Color",
        "description": "The color of the pinned border. Auto-derived from content-background."
      },
      {
        "name": "cell-active-border-color",
        "type": "Color",
        "description": "The border color for the active cell. Auto-derived from content-background."
      },
      {
        "name": "cell-selected-background",
        "type": "Color",
        "description": "The selected cell background color. Auto-derived from content-background."
      },
      {
        "name": "cell-selected-text-color",
        "type": "Color",
        "description": "The selected cell text color. Auto-derived from cell-selected-background."
      },
      {
        "name": "cell-editing-background",
        "type": "Color",
        "description": "The background of the cell being edited. Auto-derived from content-background."
      },
      {
        "name": "cell-editing-foreground",
        "type": "Color",
        "description": "The cell text color in edit mode. Auto-derived from cell-editing-background."
      },
      {
        "name": "cell-editing-focus-foreground",
        "type": "Color",
        "description": "The cell text color in edit mode on focus. Auto-derived from cell-editing-background."
      },
      {
        "name": "cell-edited-value-color",
        "type": "Color",
        "description": "The text color of an edited cell."
      },
      {
        "name": "cell-new-color",
        "type": "Color",
        "description": "The text color of a new cell."
      },
      {
        "name": "cell-disabled-color",
        "type": "Color",
        "description": "The text color of a disabled cell."
      },
      {
        "name": "cell-selected-within-background",
        "type": "Color",
        "description": "The background of selected cell in selected row. Auto-derived from row-selected-background."
      },
      {
        "name": "cell-selected-within-text-color",
        "type": "Color",
        "description": "The color of selected cell in selected row. Auto-derived from cell-selected-within-background."
      },
      {
        "name": "edit-mode-color",
        "type": "Color",
        "description": "The color around the row/cell in edit mode. Auto-derived from content-background."
      },
      {
        "name": "edited-row-indicator",
        "type": "Color",
        "description": "The edited row indicator line color."
      },
      {
        "name": "resize-line-color",
        "type": "Color",
        "description": "The table header resize line color."
      },
      {
        "name": "drop-indicator-color",
        "type": "Color",
        "description": "The color of the column drag indicator line."
      },
      {
        "name": "grouparea-background",
        "type": "Color",
        "description": "The grid group area background color - derives grouparea-color, drop-area-background. Auto-derived from header-background."
      },
      {
        "name": "grouparea-color",
        "type": "Color",
        "description": "The grid group area color. Auto-derived from grouparea-background."
      },
      {
        "name": "group-row-background",
        "type": "Color",
        "description": "The grid group row background color - derives expand-icon-color, group-row-selected-background, group-label-text, group-count-background. Auto-derived from header-background."
      },
      {
        "name": "group-row-selected-background",
        "type": "Color",
        "description": "The group row selected background. Auto-derived from group-row-background."
      },
      {
        "name": "group-label-column-name-text",
        "type": "Color",
        "description": "The grid group row column name text color."
      },
      {
        "name": "group-label-icon",
        "type": "Color",
        "description": "The grid group row icon color."
      },
      {
        "name": "group-label-text",
        "type": "Color",
        "description": "The grid group row text color. Auto-derived from group-row-background or group-row-selected-background."
      },
      {
        "name": "expand-all-icon-color",
        "type": "Color",
        "description": "The header expand all icon color. Auto-derived from header-background."
      },
      {
        "name": "expand-all-icon-hover-color",
        "type": "Color",
        "description": "The header expand all icon hover color. Auto-derived from header-background."
      },
      {
        "name": "expand-icon-color",
        "type": "Color",
        "description": "The grid row expand icon color. Auto-derived from group-row-background or group-row-selected-background."
      },
      {
        "name": "expand-icon-hover-color",
        "type": "Color",
        "description": "The grid row expand icon hover color. Auto-derived from expand-icon-color."
      },
      {
        "name": "active-expand-icon-color",
        "type": "Color",
        "description": "The active expand icon color."
      },
      {
        "name": "active-expand-icon-hover-color",
        "type": "Color",
        "description": "The active expand icon hover color."
      },
      {
        "name": "group-count-background",
        "type": "Color",
        "description": "The group row count badge background. Auto-derived from group-row-background or group-row-selected-background."
      },
      {
        "name": "group-count-text-color",
        "type": "Color",
        "description": "The group row count badge text color. Auto-derived from group-count-background."
      },
      {
        "name": "drop-area-text-color",
        "type": "Color",
        "description": "The drop area text color. Auto-derived from drop-area-background."
      },
      {
        "name": "drop-area-icon-color",
        "type": "Color",
        "description": "The drop area icon color. Auto-derived from drop-area-background."
      },
      {
        "name": "drop-area-background",
        "type": "Color",
        "description": "The drop area background color. Auto-derived from grouparea-background."
      },
      {
        "name": "drop-area-on-drop-background",
        "type": "Color",
        "description": "The drop area background on drop. Auto-derived from drop-area-background."
      },
      {
        "name": "filtering-header-background",
        "type": "Color",
        "description": "The filtered column header background. Auto-derived from header-background."
      },
      {
        "name": "filtering-header-text-color",
        "type": "Color",
        "description": "The filtered column header text color. Auto-derived from filtering-header-background."
      },
      {
        "name": "filtering-row-background",
        "type": "Color",
        "description": "The filtering row background. Auto-derived from header-background."
      },
      {
        "name": "filtering-row-text-color",
        "type": "Color",
        "description": "The filtering row text color. Auto-derived from filtering-row-background."
      },
      {
        "name": "filtering-dialog-background",
        "type": "Color",
        "description": "The background color of the advanced filtering dialog."
      },
      {
        "name": "excel-filtering-header-foreground",
        "type": "Color",
        "description": "The excel filtering header text color. Auto-derived from filtering-row-background."
      },
      {
        "name": "excel-filtering-subheader-foreground",
        "type": "Color",
        "description": "The excel filtering subheader text color. Auto-derived from filtering-row-background."
      },
      {
        "name": "excel-filtering-actions-foreground",
        "type": "Color",
        "description": "The excel filtering actions text color. Auto-derived from filtering-row-background."
      },
      {
        "name": "excel-filtering-actions-hover-foreground",
        "type": "Color",
        "description": "The excel filtering actions hover text color."
      },
      {
        "name": "excel-filtering-actions-disabled-foreground",
        "type": "Color",
        "description": "The excel filtering actions disabled text color. Auto-derived from filtering-row-background."
      },
      {
        "name": "excel-filtering-border-color",
        "type": "Color",
        "description": "The border color used in the excel style filter. Auto-derived from foreground and background."
      },
      {
        "name": "tree-filtered-text-color",
        "type": "Color",
        "description": "Grouping row background color on focus."
      },
      {
        "name": "summaries-patch-background",
        "type": "Color",
        "description": "The leading summaries patch background."
      },
      {
        "name": "row-highlight",
        "type": "Color",
        "description": "The grid row highlight indication color."
      },
      {
        "name": "grid-shadow",
        "type": "List",
        "description": "The shadow of the grid."
      },
      {
        "name": "drag-shadow",
        "type": "List",
        "description": "The shadow for movable elements."
      },
      {
        "name": "row-ghost-background",
        "type": "color",
        "description": "The dragged row background color."
      },
      {
        "name": "row-drag-color",
        "type": "color",
        "description": "The row drag handle color."
      },
      {
        "name": "grid-border-color",
        "type": "Color",
        "description": "The color of the grid border."
      },
      {
        "name": "drop-area-border-radius",
        "type": "List",
        "description": "The border radius for column drop area."
      },
      {
        "name": "active-state-border-style",
        "type": "List",
        "description": "The border style used for row active state and cell active state."
      },
      {
        "name": "body-column-border-color",
        "type": "Color",
        "description": "The border color used for the body column."
      },
      {
        "name": "body-column-hover-border-color",
        "type": "Color",
        "description": "The border color used for the body column when in hovered row."
      },
      {
        "name": "body-column-hover-selected-border-color",
        "type": "Color",
        "description": "The border color used for the body column when in hovered + selected row."
      },
      {
        "name": "body-column-selected-border-color",
        "type": "Color",
        "description": "The border color used for the body column when in selected row."
      }
    ]
  },
  "grid-toolbar": {
    "name": "grid-toolbar",
    "themeFunctionName": "grid-toolbar-theme",
    "description": "Grid Toolbar Theme",
    "primaryTokens": [
      {
        "name": "background-color",
        "description": "The toolbar background color."
      },
      {
        "name": "dropdown-background",
        "description": "The toolbar drop-down background color."
      },
      {
        "name": "item-hover-background",
        "description": "The drop-down item hover background."
      },
      {
        "name": "item-focus-background",
        "description": "The drop-down item focus background."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "background-color",
        "type": "Color",
        "description": "The toolbar background color. PRIMARY - derives title-text-color."
      },
      {
        "name": "title-text-color",
        "type": "Color",
        "description": "The toolbar title text color. Auto-derived from background-color."
      },
      {
        "name": "dropdown-background",
        "type": "Color",
        "description": "The toolbar drop-down background color. PRIMARY - derives item-text-color."
      },
      {
        "name": "item-text-color",
        "type": "Color",
        "description": "The toolbar drop-down item text color. Auto-derived from dropdown-background."
      },
      {
        "name": "item-hover-background",
        "type": "Color",
        "description": "The toolbar drop-down item hover background color. PRIMARY - derives item-hover-text-color."
      },
      {
        "name": "item-hover-text-color",
        "type": "Color",
        "description": "The toolbar drop-down item hover text color. Auto-derived from dropdown-background or item-hover-background."
      },
      {
        "name": "item-focus-background",
        "type": "Color",
        "description": "The toolbar drop-down item focus background color. PRIMARY - derives item-focus-text-color."
      },
      {
        "name": "item-focus-text-color",
        "type": "Color",
        "description": "The toolbar drop-down item focus text color. Auto-derived from dropdown-background or item-focus-background."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The toolbar border-bottom color."
      }
    ]
  },
  "pivot-data-selector": {
    "name": "pivot-data-selector",
    "themeFunctionName": "pivot-data-selector-theme",
    "description": "Pivot Data Selector Theme\n\nNOTE: This component has no automatic token derivation.\nAll tokens are directly passed to the schema without calculations.",
    "primaryTokens": [],
    "tokens": []
  },
  "highlight": {
    "name": "highlight",
    "themeFunctionName": "highlight-theme",
    "description": "Highlight Theme",
    "primaryTokens": [
      {
        "name": "resting-background",
        "description": "The resting state background."
      },
      {
        "name": "active-background",
        "description": "The active state background."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "resting-background",
        "type": "Color",
        "description": "The background color used for the highlight in its resting state. PRIMARY - derives resting-color."
      },
      {
        "name": "resting-color",
        "type": "Color",
        "description": "The text color used for the highlight in its resting state. Auto-derived from resting-background."
      },
      {
        "name": "active-background",
        "type": "Color",
        "description": "The background color used for the highlight in its active state. PRIMARY - derives active-color."
      },
      {
        "name": "active-color",
        "type": "Color",
        "description": "The text color used for the highlight in its active state. Auto-derived from active-background."
      }
    ]
  },
  "contained-icon-button": {
    "name": "contained-icon-button",
    "themeFunctionName": "contained-icon-button-theme",
    "description": "Contained Icon Button Theme",
    "primaryTokens": [
      {
        "name": "background",
        "description": "Background color for the contained icon button."
      },
      {
        "name": "foreground",
        "description": "Foreground (icon) color. Used as fallback for state foreground colors. Auto-derived from background."
      },
      {
        "name": "border-color",
        "description": "Border color."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "Background color for the contained icon button. PRIMARY - derives foreground, hover-background, focus-background, active-background."
      },
      {
        "name": "foreground",
        "type": "Color",
        "description": "Foreground (icon) color. Auto-derived from background."
      },
      {
        "name": "shadow-color",
        "type": "Color",
        "description": "Shadow color. Auto-derived from focus-background."
      },
      {
        "name": "hover-background",
        "type": "Color",
        "description": "Background color on hover. Auto-derived from background."
      },
      {
        "name": "hover-foreground",
        "type": "Color",
        "description": "Foreground color on hover. Auto-derived from foreground or hover-background."
      },
      {
        "name": "focus-background",
        "type": "Color",
        "description": "Background color on focus. Auto-derived from background."
      },
      {
        "name": "focus-foreground",
        "type": "Color",
        "description": "Foreground color on focus. Auto-derived from foreground or focus-background."
      },
      {
        "name": "focus-hover-background",
        "type": "Color",
        "description": "Background color on focus + hover. Auto-derived from focus-background."
      },
      {
        "name": "focus-hover-foreground",
        "type": "Color",
        "description": "Foreground color on focus + hover. Auto-derived from foreground or focus-hover-background."
      },
      {
        "name": "active-background",
        "type": "Color",
        "description": "Background color when active. Auto-derived from background."
      },
      {
        "name": "active-foreground",
        "type": "Color",
        "description": "Foreground color when active. Auto-derived from foreground or active-background."
      },
      {
        "name": "border-radius",
        "type": "Length",
        "description": "Border radius for the icon button."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "Border color. PRIMARY - derives focus-border-color."
      },
      {
        "name": "focus-border-color",
        "type": "Color",
        "description": "Border color on focus. Auto-derived from foreground or border-color."
      },
      {
        "name": "disabled-background",
        "type": "Color",
        "description": "Background color when disabled. Auto-derived from background (bootstrap/indigo)."
      },
      {
        "name": "disabled-foreground",
        "type": "Color",
        "description": "Foreground color when disabled. Auto-derived from foreground or disabled-background."
      },
      {
        "name": "disabled-border-color",
        "type": "Color",
        "description": "Border color when disabled."
      },
      {
        "name": "size",
        "type": "Length",
        "description": "Size of the icon button."
      }
    ]
  },
  "flat-icon-button": {
    "name": "flat-icon-button",
    "themeFunctionName": "flat-icon-button-theme",
    "description": "Flat Icon Button Theme",
    "primaryTokens": [
      {
        "name": "foreground",
        "description": "Foreground (icon) color."
      },
      {
        "name": "hover-background",
        "description": "Background color on hover."
      },
      {
        "name": "focus-background",
        "description": "Background color on focus."
      },
      {
        "name": "active-background",
        "description": "Background color when active."
      }
    ],
    "primaryTokensSummary": "For flat icon buttons, the foreground color is the primary token.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "Background color for the flat icon button."
      },
      {
        "name": "foreground",
        "type": "Color",
        "description": "Foreground (icon) color. PRIMARY - derives hover/focus/active backgrounds and foregrounds."
      },
      {
        "name": "shadow-color",
        "type": "Color",
        "description": "Shadow color. Auto-derived from foreground (bootstrap)."
      },
      {
        "name": "hover-background",
        "type": "Color",
        "description": "Background color on hover. PRIMARY - derives hover-foreground. Auto-derived from foreground."
      },
      {
        "name": "hover-foreground",
        "type": "Color",
        "description": "Foreground color on hover. Auto-derived from hover-background or foreground."
      },
      {
        "name": "focus-background",
        "type": "Color",
        "description": "Background color on focus. PRIMARY - derives focus-foreground. Auto-derived from foreground."
      },
      {
        "name": "focus-foreground",
        "type": "Color",
        "description": "Foreground color on focus. Auto-derived from focus-background or foreground."
      },
      {
        "name": "focus-hover-background",
        "type": "Color",
        "description": "Background color on focus + hover. Auto-derived from foreground or hover-background."
      },
      {
        "name": "focus-hover-foreground",
        "type": "Color",
        "description": "Foreground color on focus + hover. Auto-derived from focus-hover-background or foreground."
      },
      {
        "name": "active-background",
        "type": "Color",
        "description": "Background color when active. Auto-derived from foreground."
      },
      {
        "name": "active-foreground",
        "type": "Color",
        "description": "Foreground color when active. Auto-derived from active-background, foreground, or hover-foreground."
      },
      {
        "name": "border-radius",
        "type": "Length",
        "description": "Border radius for the icon button."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "Border color."
      },
      {
        "name": "focus-border-color",
        "type": "Color",
        "description": "Border color on focus. Auto-derived from foreground (indigo)."
      },
      {
        "name": "disabled-background",
        "type": "Color",
        "description": "Background color when disabled."
      },
      {
        "name": "disabled-foreground",
        "type": "Color",
        "description": "Foreground color when disabled. Auto-derived from foreground (bootstrap/indigo)."
      },
      {
        "name": "disabled-border-color",
        "type": "Color",
        "description": "Border color when disabled."
      },
      {
        "name": "size",
        "type": "Length",
        "description": "Size of the icon button."
      }
    ]
  },
  "icon-button": {
    "name": "icon-button",
    "themeFunctionName": "icon-button-theme",
    "description": "Icon Button Theme",
    "primaryTokens": [
      {
        "name": "background",
        "description": "Background color for the icon button."
      },
      {
        "name": "hover-background",
        "description": "Background color on hover."
      },
      {
        "name": "focus-background",
        "description": "Background color on focus."
      },
      {
        "name": "focus-hover-background",
        "description": "Background color on focus + hover."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast. Generates a theme map for the icon button component.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "Background color for the icon button. PRIMARY - derives foreground."
      },
      {
        "name": "foreground",
        "type": "Color",
        "description": "Foreground (icon) color. Auto-derived from background."
      },
      {
        "name": "shadow-color",
        "type": "Color",
        "description": "Shadow color for the icon button."
      },
      {
        "name": "hover-background",
        "type": "Color",
        "description": "Background color on hover. PRIMARY - derives hover-foreground."
      },
      {
        "name": "hover-foreground",
        "type": "Color",
        "description": "Foreground color on hover. Auto-derived from hover-background."
      },
      {
        "name": "focus-background",
        "type": "Color",
        "description": "Background color on focus. PRIMARY - derives focus-foreground."
      },
      {
        "name": "focus-foreground",
        "type": "Color",
        "description": "Foreground color on focus. Auto-derived from focus-background."
      },
      {
        "name": "focus-hover-background",
        "type": "Color",
        "description": "Background color on focus + hover. PRIMARY - derives focus-hover-foreground."
      },
      {
        "name": "focus-hover-foreground",
        "type": "Color",
        "description": "Foreground color on focus + hover. Auto-derived from focus-hover-background."
      },
      {
        "name": "active-background",
        "type": "Color",
        "description": "Background color when active."
      },
      {
        "name": "active-foreground",
        "type": "Color",
        "description": "Foreground color when active."
      },
      {
        "name": "border-radius",
        "type": "Length",
        "description": "Border radius for the icon button."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "Border color."
      },
      {
        "name": "focus-border-color",
        "type": "Color",
        "description": "Border color on focus."
      },
      {
        "name": "disabled-background",
        "type": "Color",
        "description": "Background color when disabled."
      },
      {
        "name": "disabled-foreground",
        "type": "Color",
        "description": "Foreground color when disabled."
      },
      {
        "name": "disabled-border-color",
        "type": "Color",
        "description": "Border color when disabled."
      },
      {
        "name": "size",
        "type": "Length",
        "description": "Size of the icon button."
      }
    ]
  },
  "outlined-icon-button": {
    "name": "outlined-icon-button",
    "themeFunctionName": "outlined-icon-button-theme",
    "description": "Outlined Icon Button Theme",
    "primaryTokens": [
      {
        "name": "foreground",
        "description": "Foreground (icon) color."
      },
      {
        "name": "hover-background",
        "description": "Background color on hover."
      },
      {
        "name": "focus-background",
        "description": "Background color on focus."
      },
      {
        "name": "active-background",
        "description": "Background color when active."
      }
    ],
    "primaryTokensSummary": "For outlined icon buttons, the foreground color is the primary token.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "Background color for the outlined icon button."
      },
      {
        "name": "foreground",
        "type": "Color",
        "description": "Foreground (icon) color. PRIMARY - derives hover/focus/active backgrounds, foregrounds, and borders."
      },
      {
        "name": "shadow-color",
        "type": "Color",
        "description": "Shadow color. Auto-derived from focus-background (bootstrap)."
      },
      {
        "name": "hover-background",
        "type": "Color",
        "description": "Background color on hover. PRIMARY - derives hover-foreground. Auto-derived from foreground."
      },
      {
        "name": "hover-foreground",
        "type": "Color",
        "description": "Foreground color on hover. Auto-derived from hover-background or foreground."
      },
      {
        "name": "focus-background",
        "type": "Color",
        "description": "Background color on focus. PRIMARY - derives focus-foreground. Auto-derived from foreground."
      },
      {
        "name": "focus-foreground",
        "type": "Color",
        "description": "Foreground color on focus. Auto-derived from focus-background or foreground."
      },
      {
        "name": "focus-hover-background",
        "type": "Color",
        "description": "Background color on focus + hover. Auto-derived from foreground or focus-background."
      },
      {
        "name": "focus-hover-foreground",
        "type": "Color",
        "description": "Foreground color on focus + hover. Auto-derived from focus-hover-background or foreground."
      },
      {
        "name": "active-background",
        "type": "Color",
        "description": "Background color when active. Auto-derived from foreground."
      },
      {
        "name": "active-foreground",
        "type": "Color",
        "description": "Foreground color when active. Auto-derived from active-background or hover-foreground."
      },
      {
        "name": "border-radius",
        "type": "Length",
        "description": "Border radius for the icon button."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "Border color. Auto-derived from foreground."
      },
      {
        "name": "focus-border-color",
        "type": "Color",
        "description": "Border color on focus. Auto-derived from foreground or active-background."
      },
      {
        "name": "disabled-background",
        "type": "Color",
        "description": "Background color when disabled."
      },
      {
        "name": "disabled-foreground",
        "type": "Color",
        "description": "Foreground color when disabled. Auto-derived from foreground (bootstrap/indigo)."
      },
      {
        "name": "disabled-border-color",
        "type": "Color",
        "description": "Border color when disabled. Auto-derived from border-color (bootstrap/indigo)."
      },
      {
        "name": "size",
        "type": "Length",
        "description": "Size of the icon button."
      }
    ]
  },
  "icon": {
    "name": "icon",
    "themeFunctionName": "icon-theme",
    "description": "Icon Theme\n\nThis theme has no automatic token derivation. All tokens are independent.",
    "primaryTokens": [],
    "tokens": [
      {
        "name": "color",
        "type": "Color",
        "description": "The icon color."
      },
      {
        "name": "size",
        "type": "String",
        "description": "The icon size."
      },
      {
        "name": "disabled-color",
        "type": "Color",
        "description": "The disabled icon color."
      }
    ]
  },
  "file-input": {
    "name": "file-input",
    "themeFunctionName": "file-input-theme",
    "description": "File Input Theme",
    "primaryTokens": [
      {
        "name": "file-names-background",
        "description": "The file names container background color."
      },
      {
        "name": "file-selector-button-background",
        "description": "The file input selector button background color."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "file-names-background",
        "type": "Color",
        "description": "The file names container background color. PRIMARY - derives all file-names foreground colors."
      },
      {
        "name": "file-names-background--focused",
        "type": "Color",
        "description": "The file names container background color when focused. Auto-derived from file-names-background."
      },
      {
        "name": "file-names-background--filled",
        "type": "Color",
        "description": "The file names container background color when filled. Auto-derived from file-names-background."
      },
      {
        "name": "file-names-background--disabled",
        "type": "Color",
        "description": "The file names container background color when disabled. Auto-derived from file-names-background."
      },
      {
        "name": "file-names-foreground",
        "type": "Color",
        "description": "The file names color. Auto-derived from file-names-background."
      },
      {
        "name": "file-names-foreground--focused",
        "type": "Color",
        "description": "The file names color when focused. Auto-derived from file-names-background--focused."
      },
      {
        "name": "file-names-foreground--filled",
        "type": "Color",
        "description": "The file names color when filled. Auto-derived from file-names-background--filled."
      },
      {
        "name": "file-names-foreground--disabled",
        "type": "Color",
        "description": "The file names color when disabled. Auto-derived from file-names-background--disabled."
      },
      {
        "name": "file-selector-button-background",
        "type": "Color",
        "description": "The selector button background color. PRIMARY - derives all selector button foreground colors."
      },
      {
        "name": "file-selector-button-background--focused",
        "type": "Color",
        "description": "The selector button background color when focused. Auto-derived from file-selector-button-background."
      },
      {
        "name": "file-selector-button-background--filled",
        "type": "Color",
        "description": "The selector button background color when filled. Auto-derived from file-selector-button-background."
      },
      {
        "name": "file-selector-button-background--disabled",
        "type": "Color",
        "description": "The selector button background color when disabled. Auto-derived from file-selector-button-background."
      },
      {
        "name": "file-selector-button-foreground",
        "type": "Color",
        "description": "The selector button foreground color. Auto-derived from file-selector-button-background."
      },
      {
        "name": "file-selector-button-foreground--focused",
        "type": "Color",
        "description": "The selector button foreground color when focused. Auto-derived from file-selector-button-background--focused."
      },
      {
        "name": "file-selector-button-foreground--filled",
        "type": "Color",
        "description": "The selector button foreground color when filled. Auto-derived from file-selector-button-background--filled."
      },
      {
        "name": "file-selector-button-foreground--disabled",
        "type": "Color",
        "description": "The selector button foreground color when disabled. Auto-derived from file-selector-button-background--disabled."
      }
    ]
  },
  "input-group": {
    "name": "input-group",
    "themeFunctionName": "input-group-theme",
    "description": "Input Group Theme",
    "primaryTokens": [
      {
        "name": "box-background",
        "description": "Box type input background."
      },
      {
        "name": "search-background",
        "description": "Search type input background."
      },
      {
        "name": "border-color",
        "description": "Border color for border/fluent types."
      },
      {
        "name": "idle-bottom-line-color",
        "description": "Bottom line color (material)."
      },
      {
        "name": "focused-border-color",
        "description": "Focused state accent color."
      }
    ],
    "primaryTokensSummary": "For Material variant, set `$box-background` for box type inputs.",
    "tokens": [
      {
        "name": "idle-text-color",
        "type": "Color",
        "description": "The input text color in the idle state. Auto-derived from box/search-background."
      },
      {
        "name": "filled-text-color",
        "type": "Color",
        "description": "The input text color in the filled state. Auto-derived from box/search-background."
      },
      {
        "name": "filled-text-hover-color",
        "type": "Color",
        "description": "The input text color in the filled state on hover."
      },
      {
        "name": "focused-text-color",
        "type": "Color",
        "description": "The input text color in the focused state. Auto-derived from box-background-focus or search-background."
      },
      {
        "name": "disabled-text-color",
        "type": "Color",
        "description": "The input text color in the disabled state. Auto-derived from disabled background."
      },
      {
        "name": "helper-text-color",
        "type": "Color",
        "description": "The helper text color."
      },
      {
        "name": "text-error-color",
        "type": "Color",
        "description": "The color used for the error message."
      },
      {
        "name": "icon-error-color",
        "type": "Color",
        "description": "The color used for the error icon."
      },
      {
        "name": "input-prefix-color",
        "type": "Color",
        "description": "The input prefix color in the idle state. Auto-derived from box/search-background."
      },
      {
        "name": "input-prefix-background",
        "type": "Color",
        "description": "The background color of an input prefix in the idle state. Synced with suffix-background."
      },
      {
        "name": "input-prefix-color--filled",
        "type": "Color",
        "description": "The input prefix color in the filled state. Auto-derived from prefix-color or background."
      },
      {
        "name": "input-prefix-background--filled",
        "type": "Color",
        "description": "The background color of an input prefix in the filled state."
      },
      {
        "name": "input-prefix-color--focused",
        "type": "Color",
        "description": "The input prefix color in the focused state. Auto-derived from prefix-color--filled or background."
      },
      {
        "name": "input-prefix-background--focused",
        "type": "Color",
        "description": "The background color of an input prefix in the focused state."
      },
      {
        "name": "input-suffix-color",
        "type": "Color",
        "description": "The input suffix color in the idle state. Auto-derived from box/search-background. Synced with prefix-color."
      },
      {
        "name": "input-suffix-background",
        "type": "Color",
        "description": "The background color of an input suffix in the idle state. Synced with prefix-background."
      },
      {
        "name": "input-suffix-color--filled",
        "type": "Color",
        "description": "The input suffix color in the filled state."
      },
      {
        "name": "input-suffix-background-filled",
        "type": "Color",
        "description": "The background color of an input suffix in the filled state."
      },
      {
        "name": "input-suffix-color--focused",
        "type": "Color",
        "description": "The input suffix color in the focused state."
      },
      {
        "name": "input-suffix-background--focused",
        "type": "Color",
        "description": "The background color of an input suffix in the focused state."
      },
      {
        "name": "idle-secondary-color",
        "type": "Color",
        "description": "The label color in the idle state. Auto-derived from box-background or placeholder-color."
      },
      {
        "name": "focused-secondary-color",
        "type": "Color",
        "description": "The label color in the focused state. Auto-derived from focused-bottom-line-color or focused-border-color."
      },
      {
        "name": "idle-bottom-line-color",
        "type": "Color",
        "description": "The bottom line and border colors in the idle state. PRIMARY for material bottom line."
      },
      {
        "name": "hover-bottom-line-color",
        "type": "Color",
        "description": "The bottom line and border colors in the hover state. Auto-derived from idle-bottom-line-color."
      },
      {
        "name": "focused-bottom-line-color",
        "type": "Color",
        "description": "The bottom line and border colors in the focused state. Auto-derived from hover-bottom-line-color."
      },
      {
        "name": "disabled-bottom-line-color",
        "type": "Color",
        "description": "The bottom line and border colors in the disabled state."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The border color for input groups of type border and fluent. PRIMARY for border inputs."
      },
      {
        "name": "hover-border-color",
        "type": "Color",
        "description": "The hover input border for input groups of type border and fluent. Auto-derived from border-color."
      },
      {
        "name": "focused-border-color",
        "type": "Color",
        "description": "The focused input border color for input groups of type border and fluent. Auto-derived from hover-border-color."
      },
      {
        "name": "disabled-border-color",
        "type": "Color",
        "description": "The disabled border color for input groups of type border and fluent."
      },
      {
        "name": "box-background",
        "type": "Color",
        "description": "The background color of an input group of type box. PRIMARY for material box inputs."
      },
      {
        "name": "box-background-hover",
        "type": "Color",
        "description": "The background color on hover of an input group of type box. Auto-derived from box-background."
      },
      {
        "name": "box-background-focus",
        "type": "Color",
        "description": "The background color on focus of an input group of type box. Auto-derived from box-background."
      },
      {
        "name": "box-disabled-background",
        "type": "Color",
        "description": "The background color of an input group of type box in the disabled state. Auto-derived from box-background."
      },
      {
        "name": "border-background",
        "type": "Color",
        "description": "The background color of an input group of type border."
      },
      {
        "name": "border-disabled-background",
        "type": "Color",
        "description": "The background color of an input group of type border in the disabled state."
      },
      {
        "name": "search-background",
        "type": "Color",
        "description": "The background color of an input group of type search. PRIMARY for search inputs."
      },
      {
        "name": "search-disabled-background",
        "type": "Color",
        "description": "The background color of an input group of type search in the disabled state. Auto-derived from search-background."
      },
      {
        "name": "search-resting-shadow",
        "type": "List",
        "description": "The shadow color of an input group of type search in its resting state."
      },
      {
        "name": "search-hover-shadow",
        "type": "List",
        "description": "The shadow color of an input group of type search in its hover state."
      },
      {
        "name": "search-disabled-shadow",
        "type": "List",
        "description": "The shadow color of an input group of type search in its disabled state."
      },
      {
        "name": "success-secondary-color",
        "type": "Color",
        "description": "The success color used in the valid state."
      },
      {
        "name": "warning-secondary-color",
        "type": "Color",
        "description": "The warning color used in the warning state."
      },
      {
        "name": "error-secondary-color",
        "type": "Color",
        "description": "The error color used in the error state."
      },
      {
        "name": "box-border-radius",
        "type": "List",
        "description": "The border radius used for box input."
      },
      {
        "name": "border-border-radius",
        "type": "List",
        "description": "The border radius used for border input."
      },
      {
        "name": "search-border-radius",
        "type": "List",
        "description": "The border radius used for search input."
      },
      {
        "name": "placeholder-color",
        "type": "Color",
        "description": "The placeholder color of an input group. Auto-derived from box/search-background."
      },
      {
        "name": "hover-placeholder-color",
        "type": "Color",
        "description": "The placeholder color of an input group on hover. Auto-derived from box-background-hover or placeholder-color."
      },
      {
        "name": "disabled-placeholder-color",
        "type": "Color",
        "description": "The disabled placeholder color of an input group. Auto-derived from disabled background."
      }
    ]
  },
  "date-time-input": {
    "name": "date-time-input",
    "themeFunctionName": "date-time-input-theme",
    "description": "Date Time Input Theme",
    "primaryTokens": [
      {
        "name": "box-background",
        "description": "Box type input background."
      },
      {
        "name": "search-background",
        "description": "Search type input background."
      },
      {
        "name": "border-color",
        "description": "Border color for border/fluent types."
      },
      {
        "name": "idle-bottom-line-color",
        "description": "Bottom line color (material)."
      },
      {
        "name": "focused-border-color",
        "description": "Focused state accent color."
      }
    ],
    "primaryTokensSummary": "For Material variant, set `$box-background` for box type inputs.",
    "tokens": [
      {
        "name": "idle-text-color",
        "type": "Color",
        "description": "The input text color in the idle state. Auto-derived from box/search-background."
      },
      {
        "name": "filled-text-color",
        "type": "Color",
        "description": "The input text color in the filled state. Auto-derived from box/search-background."
      },
      {
        "name": "filled-text-hover-color",
        "type": "Color",
        "description": "The input text color in the filled state on hover."
      },
      {
        "name": "focused-text-color",
        "type": "Color",
        "description": "The input text color in the focused state. Auto-derived from box-background-focus or search-background."
      },
      {
        "name": "disabled-text-color",
        "type": "Color",
        "description": "The input text color in the disabled state. Auto-derived from disabled background."
      },
      {
        "name": "helper-text-color",
        "type": "Color",
        "description": "The helper text color."
      },
      {
        "name": "text-error-color",
        "type": "Color",
        "description": "The color used for the error message."
      },
      {
        "name": "icon-error-color",
        "type": "Color",
        "description": "The color used for the error icon."
      },
      {
        "name": "input-prefix-color",
        "type": "Color",
        "description": "The input prefix color in the idle state. Auto-derived from box/search-background."
      },
      {
        "name": "input-prefix-background",
        "type": "Color",
        "description": "The background color of an input prefix in the idle state. Synced with suffix-background."
      },
      {
        "name": "input-prefix-color--filled",
        "type": "Color",
        "description": "The input prefix color in the filled state. Auto-derived from prefix-color or background."
      },
      {
        "name": "input-prefix-background--filled",
        "type": "Color",
        "description": "The background color of an input prefix in the filled state."
      },
      {
        "name": "input-prefix-color--focused",
        "type": "Color",
        "description": "The input prefix color in the focused state. Auto-derived from prefix-color--filled or background."
      },
      {
        "name": "input-prefix-background--focused",
        "type": "Color",
        "description": "The background color of an input prefix in the focused state."
      },
      {
        "name": "input-suffix-color",
        "type": "Color",
        "description": "The input suffix color in the idle state. Auto-derived from box/search-background. Synced with prefix-color."
      },
      {
        "name": "input-suffix-background",
        "type": "Color",
        "description": "The background color of an input suffix in the idle state. Synced with prefix-background."
      },
      {
        "name": "input-suffix-color--filled",
        "type": "Color",
        "description": "The input suffix color in the filled state."
      },
      {
        "name": "input-suffix-background-filled",
        "type": "Color",
        "description": "The background color of an input suffix in the filled state."
      },
      {
        "name": "input-suffix-color--focused",
        "type": "Color",
        "description": "The input suffix color in the focused state."
      },
      {
        "name": "input-suffix-background--focused",
        "type": "Color",
        "description": "The background color of an input suffix in the focused state."
      },
      {
        "name": "idle-secondary-color",
        "type": "Color",
        "description": "The label color in the idle state. Auto-derived from box-background or placeholder-color."
      },
      {
        "name": "focused-secondary-color",
        "type": "Color",
        "description": "The label color in the focused state. Auto-derived from focused-bottom-line-color or focused-border-color."
      },
      {
        "name": "idle-bottom-line-color",
        "type": "Color",
        "description": "The bottom line and border colors in the idle state. PRIMARY for material bottom line."
      },
      {
        "name": "hover-bottom-line-color",
        "type": "Color",
        "description": "The bottom line and border colors in the hover state. Auto-derived from idle-bottom-line-color."
      },
      {
        "name": "focused-bottom-line-color",
        "type": "Color",
        "description": "The bottom line and border colors in the focused state. Auto-derived from hover-bottom-line-color."
      },
      {
        "name": "disabled-bottom-line-color",
        "type": "Color",
        "description": "The bottom line and border colors in the disabled state."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The border color for input groups of type border and fluent. PRIMARY for border inputs."
      },
      {
        "name": "hover-border-color",
        "type": "Color",
        "description": "The hover input border for input groups of type border and fluent. Auto-derived from border-color."
      },
      {
        "name": "focused-border-color",
        "type": "Color",
        "description": "The focused input border color for input groups of type border and fluent. Auto-derived from hover-border-color."
      },
      {
        "name": "disabled-border-color",
        "type": "Color",
        "description": "The disabled border color for input groups of type border and fluent."
      },
      {
        "name": "box-background",
        "type": "Color",
        "description": "The background color of an input group of type box. PRIMARY for material box inputs."
      },
      {
        "name": "box-background-hover",
        "type": "Color",
        "description": "The background color on hover of an input group of type box. Auto-derived from box-background."
      },
      {
        "name": "box-background-focus",
        "type": "Color",
        "description": "The background color on focus of an input group of type box. Auto-derived from box-background."
      },
      {
        "name": "box-disabled-background",
        "type": "Color",
        "description": "The background color of an input group of type box in the disabled state. Auto-derived from box-background."
      },
      {
        "name": "border-background",
        "type": "Color",
        "description": "The background color of an input group of type border."
      },
      {
        "name": "border-disabled-background",
        "type": "Color",
        "description": "The background color of an input group of type border in the disabled state."
      },
      {
        "name": "search-background",
        "type": "Color",
        "description": "The background color of an input group of type search. PRIMARY for search inputs."
      },
      {
        "name": "search-disabled-background",
        "type": "Color",
        "description": "The background color of an input group of type search in the disabled state. Auto-derived from search-background."
      },
      {
        "name": "search-resting-shadow",
        "type": "List",
        "description": "The shadow color of an input group of type search in its resting state."
      },
      {
        "name": "search-hover-shadow",
        "type": "List",
        "description": "The shadow color of an input group of type search in its hover state."
      },
      {
        "name": "search-disabled-shadow",
        "type": "List",
        "description": "The shadow color of an input group of type search in its disabled state."
      },
      {
        "name": "success-secondary-color",
        "type": "Color",
        "description": "The success color used in the valid state."
      },
      {
        "name": "warning-secondary-color",
        "type": "Color",
        "description": "The warning color used in the warning state."
      },
      {
        "name": "error-secondary-color",
        "type": "Color",
        "description": "The error color used in the error state."
      },
      {
        "name": "box-border-radius",
        "type": "List",
        "description": "The border radius used for box input."
      },
      {
        "name": "border-border-radius",
        "type": "List",
        "description": "The border radius used for border input."
      },
      {
        "name": "search-border-radius",
        "type": "List",
        "description": "The border radius used for search input."
      },
      {
        "name": "placeholder-color",
        "type": "Color",
        "description": "The placeholder color of an input group. Auto-derived from box/search-background."
      },
      {
        "name": "hover-placeholder-color",
        "type": "Color",
        "description": "The placeholder color of an input group on hover. Auto-derived from box-background-hover or placeholder-color."
      },
      {
        "name": "disabled-placeholder-color",
        "type": "Color",
        "description": "The disabled placeholder color of an input group. Auto-derived from disabled background."
      }
    ]
  },
  "label": {
    "name": "label",
    "themeFunctionName": "label-theme",
    "description": "Label Theme\n\nThis theme has no automatic token derivation. All tokens are independent.",
    "primaryTokens": [],
    "tokens": [
      {
        "name": "color",
        "type": "Map",
        "description": "The text color."
      },
      {
        "name": "disabled-color",
        "type": "Map",
        "description": "The disabled text color."
      }
    ]
  },
  "list": {
    "name": "list",
    "themeFunctionName": "list-theme",
    "description": "List Theme",
    "primaryTokens": [],
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "The list background color. PRIMARY - derives item-background if not set."
      },
      {
        "name": "header-background",
        "type": "Color",
        "description": "The list header background color. Auto-derived from background or item-background."
      },
      {
        "name": "header-text-color",
        "type": "Color",
        "description": "The list header text color. Auto-derived from header-background."
      },
      {
        "name": "item-background",
        "type": "Color",
        "description": "The list item background color. PRIMARY - derives all item state colors."
      },
      {
        "name": "item-background-hover",
        "type": "Color",
        "description": "The list item hover background color. Auto-derived from item-background."
      },
      {
        "name": "item-background-active",
        "type": "Color",
        "description": "The active list item background color. Auto-derived from item-background-hover."
      },
      {
        "name": "item-background-selected",
        "type": "Color",
        "description": "The selected list item background color. Auto-derived from item-background-active."
      },
      {
        "name": "item-text-color",
        "type": "Color",
        "description": "The list item text color. Auto-derived from item-background."
      },
      {
        "name": "item-text-color-hover",
        "type": "Color",
        "description": "The list item hover text color. Auto-derived from item-background-hover."
      },
      {
        "name": "item-text-color-active",
        "type": "Color",
        "description": "The active list item text color. Auto-derived from item-background-active."
      },
      {
        "name": "item-text-color-selected",
        "type": "Color",
        "description": "The selected list item text color. Auto-derived from item-background-selected."
      },
      {
        "name": "item-title-color",
        "type": "Color",
        "description": "The list item title color. Auto-derived from item-text-color."
      },
      {
        "name": "item-title-color-hover",
        "type": "Color",
        "description": "The list item hover title color. Auto-derived from item-text-color-hover."
      },
      {
        "name": "item-title-color-active",
        "type": "Color",
        "description": "The active list item title color. Auto-derived from item-text-color-active."
      },
      {
        "name": "item-title-color-selected",
        "type": "Color",
        "description": "The selected list item title color. Auto-derived from item-text-color-selected."
      },
      {
        "name": "item-subtitle-color",
        "type": "Color",
        "description": "The list item subtitle color. Auto-derived from item-text-color (muted)."
      },
      {
        "name": "item-subtitle-color-hover",
        "type": "Color",
        "description": "The list item hover subtitle color. Auto-derived from item-text-color-hover (muted)."
      },
      {
        "name": "item-subtitle-color-active",
        "type": "Color",
        "description": "The active list item subtitle color. Auto-derived from item-text-color-active (muted)."
      },
      {
        "name": "item-subtitle-color-selected",
        "type": "Color",
        "description": "The selected list item subtitle color. Auto-derived from item-text-color-selected (muted)."
      },
      {
        "name": "item-action-color",
        "type": "Color",
        "description": "The list item action color. Auto-derived from item-text-color."
      },
      {
        "name": "item-action-color-hover",
        "type": "Color",
        "description": "The list item hover action color. Auto-derived from item-text-color-hover."
      },
      {
        "name": "item-action-color-active",
        "type": "Color",
        "description": "The active list item action color. Auto-derived from item-text-color-active."
      },
      {
        "name": "item-action-color-selected",
        "type": "Color",
        "description": "The selected list item action color. Auto-derived from item-text-color-selected."
      },
      {
        "name": "item-thumbnail-color",
        "type": "Color",
        "description": "The list item thumbnail color. Auto-derived from item-text-color."
      },
      {
        "name": "item-thumbnail-color-hover",
        "type": "Color",
        "description": "The list item hover thumbnail color. Auto-derived from item-text-color-hover."
      },
      {
        "name": "item-thumbnail-color-active",
        "type": "Color",
        "description": "The active list item thumbnail color. Auto-derived from item-text-color-active."
      },
      {
        "name": "item-thumbnail-color-selected",
        "type": "Color",
        "description": "The selected list item thumbnail color. Auto-derived from item-text-color-selected."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius used for list component."
      },
      {
        "name": "item-border-radius",
        "type": "List",
        "description": "The border radius used for list item."
      },
      {
        "name": "border-width",
        "type": "Color",
        "description": "The list border width."
      },
      {
        "name": "border-color",
        "type": "Number",
        "description": "The list border color. Auto-derived from item-background (fluent/bootstrap)."
      }
    ]
  },
  "navbar": {
    "name": "navbar",
    "themeFunctionName": "navbar-theme",
    "description": "Navbar Theme",
    "primaryTokens": [
      {
        "name": "background",
        "description": "The navbar background color."
      }
    ],
    "primaryTokensSummary": "Setting just `$background` will create a complete navbar theme with proper contrast.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "The navbar background color. PRIMARY - derives text-color and icon colors."
      },
      {
        "name": "text-color",
        "type": "Color",
        "description": "The navbar text color. Auto-derived from background."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The navbar border color. Auto-derived from background (indigo)."
      },
      {
        "name": "shadow",
        "type": "List",
        "description": "The shadow of the navbar."
      },
      {
        "name": "idle-icon-color",
        "type": "Color",
        "description": "The navbar idle icon color. Auto-derived from background."
      },
      {
        "name": "hover-icon-color",
        "type": "Color",
        "description": "The navbar hover icon color. Auto-derived from idle-icon-color or background."
      },
      {
        "name": "disable-shadow",
        "type": "Bool",
        "description": "Sets the navbar shadow visibility."
      }
    ]
  },
  "navdrawer": {
    "name": "navdrawer",
    "themeFunctionName": "navdrawer-theme",
    "description": "Navigation Drawer Theme",
    "primaryTokens": [
      {
        "name": "background",
        "description": "The drawer background color."
      },
      {
        "name": "item-active-background",
        "description": "The active item background."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "The navigation drawer background color. PRIMARY - derives all item colors."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The navigation drawer right border color."
      },
      {
        "name": "item-header-text-color",
        "type": "Color",
        "description": "The header's idle text color. Auto-derived from background."
      },
      {
        "name": "item-text-color",
        "type": "Color",
        "description": "The item's idle text color. Auto-derived from background."
      },
      {
        "name": "item-icon-color",
        "type": "Color",
        "description": "The item's icon color. Auto-derived from background."
      },
      {
        "name": "item-active-text-color",
        "type": "Color",
        "description": "The item's active text color. Auto-derived from item-active-background."
      },
      {
        "name": "item-active-background",
        "type": "Color",
        "description": "The item's active background color. PRIMARY for active state - derives active text/icon. Auto-derived from background."
      },
      {
        "name": "item-active-icon-color",
        "type": "Color",
        "description": "The item's icon active color. Auto-derived from item-active-background."
      },
      {
        "name": "item-hover-background",
        "type": "Color",
        "description": "The item's hover background color. Auto-derived from background."
      },
      {
        "name": "item-hover-text-color",
        "type": "Color",
        "description": "The item's hover text color. Auto-derived from background."
      },
      {
        "name": "item-hover-icon-color",
        "type": "Color",
        "description": "The item's hover icon color. Auto-derived from background."
      },
      {
        "name": "item-disabled-text-color",
        "type": "Color",
        "description": "The item's disabled text color. Auto-derived from background (muted)."
      },
      {
        "name": "item-disabled-icon-color",
        "type": "Color",
        "description": "The item's disabled icon color. Auto-derived from background (muted)."
      },
      {
        "name": "shadow",
        "type": "Color",
        "description": "Sets a custom shadow to be used by the drawer."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius used for the navdrawer."
      },
      {
        "name": "item-border-radius",
        "type": "List",
        "description": "The border radius used for the navdrawer item."
      }
    ]
  },
  "overlay": {
    "name": "overlay",
    "themeFunctionName": "overlay-theme",
    "description": "Overlay Theme\n\nThis theme has no automatic token derivation. Only one token: background-color.",
    "primaryTokens": [],
    "tokens": [
      {
        "name": "background-color",
        "type": "Color",
        "description": "The background color used for modal overlays."
      }
    ]
  },
  "paginator": {
    "name": "paginator",
    "themeFunctionName": "paginator-theme",
    "description": "Paginator Theme",
    "primaryTokens": [
      {
        "name": "background-color",
        "description": "The paginator background."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "text-color",
        "type": "Color",
        "description": "The text color. Auto-derived from background-color."
      },
      {
        "name": "background-color",
        "type": "Color",
        "description": "The background color of the paging panel. PRIMARY - derives text-color."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The border color of the paging panel."
      }
    ]
  },
  "progress-circular": {
    "name": "progress-circular",
    "themeFunctionName": "progress-circular-theme",
    "description": "Circular Progress Theme\n\nThis theme has no automatic token derivation. All fill colors are independent.\nThe fill-color-default can accept a single color or a list of two colors for gradient effect.",
    "primaryTokens": [],
    "tokens": [
      {
        "name": "track-color",
        "type": "Color",
        "description": "The base circle fill color."
      },
      {
        "name": "fill-color-default",
        "type": "Color | List<Color>",
        "description": "The progress circle fill color. Can be a single color or list of two colors for gradient."
      },
      {
        "name": "fill-color-danger",
        "type": "Color",
        "description": "The track danger fill color."
      },
      {
        "name": "fill-color-warning",
        "type": "Color",
        "description": "The track warning fill color."
      },
      {
        "name": "fill-color-info",
        "type": "Color",
        "description": "The track info fill color."
      },
      {
        "name": "fill-color-success",
        "type": "Color",
        "description": "The track success fill color."
      },
      {
        "name": "text-color",
        "type": "Color",
        "description": "The value text color."
      },
      {
        "name": "diameter",
        "type": "Number",
        "description": "The progress circle diameter.\n"
      }
    ]
  },
  "progress-linear": {
    "name": "progress-linear",
    "themeFunctionName": "progress-linear-theme",
    "description": "Linear Progress Theme\n\nThis theme has no automatic token derivation. All tokens are independent.\nUse the semantic fill colors (danger, warning, info, success) for status-based progress indicators.",
    "primaryTokens": [],
    "tokens": [
      {
        "name": "track-color",
        "type": "Color",
        "description": "The main track color."
      },
      {
        "name": "fill-color-default",
        "type": "Color",
        "description": "The track default fill color."
      },
      {
        "name": "fill-color-danger",
        "type": "Color",
        "description": "The track danger fill color."
      },
      {
        "name": "fill-color-warning",
        "type": "Color",
        "description": "The track warning fill color."
      },
      {
        "name": "fill-color-info",
        "type": "Color",
        "description": "The track info fill color."
      },
      {
        "name": "fill-color-success",
        "type": "Color",
        "description": "The track success fill color."
      },
      {
        "name": "stripes-color",
        "type": "Color",
        "description": "The track stripes color."
      },
      {
        "name": "text-color",
        "type": "Color",
        "description": "The track value text color."
      },
      {
        "name": "track-border-radius",
        "type": "List",
        "description": "The border radius fraction, between 0 - 8 to be used fot the progress bar track"
      },
      {
        "name": "track-height",
        "type": "Number",
        "description": "The linear progress track height."
      },
      {
        "name": "strip-size",
        "type": "Number",
        "description": "The linear progress bar strip width."
      }
    ]
  },
  "query-builder": {
    "name": "query-builder",
    "themeFunctionName": "query-builder-theme",
    "description": "Query Builder Theme",
    "primaryTokens": [
      {
        "name": "background",
        "description": "The background color."
      },
      {
        "name": "header-background",
        "description": "The header background color."
      },
      {
        "name": "subquery-header-background",
        "description": "The subquery header background."
      },
      {
        "name": "subquery-border-color",
        "description": "The subquery border color."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "The background color of the filtering row. PRIMARY - derives label-foreground, header-background."
      },
      {
        "name": "header-background",
        "type": "Color",
        "description": "The background color of the query builder header. PRIMARY - derives header-foreground, subquery-header-background. Auto-derived from background."
      },
      {
        "name": "header-foreground",
        "type": "Color",
        "description": "The foreground color of the query builder header. Auto-derived from header-background."
      },
      {
        "name": "header-border",
        "type": "Color",
        "description": "The border color of the query builder header. Auto-derived from subquery-border-color (bootstrap only).\n"
      },
      {
        "name": "subquery-header-background",
        "type": "Map",
        "description": "The background color of the subquery header. PRIMARY - derives subquery-border-color. Auto-derived from header-background."
      },
      {
        "name": "subquery-border-color",
        "type": "Map",
        "description": "The border color of the query block. PRIMARY - derives separator-color. Auto-derived from subquery-header-background."
      },
      {
        "name": "separator-color",
        "type": "Map",
        "description": "The separator color of the query block. Auto-derived from subquery-border-color."
      },
      {
        "name": "subquery-border-radius",
        "type": "Number",
        "description": "The border radius of the subquery block.\n"
      },
      {
        "name": "label-foreground",
        "type": "Map",
        "description": "The color for query builder labels \"from\" & \"select\". Auto-derived from background."
      },
      {
        "name": "border-radius",
        "type": "Number",
        "description": "The border radius of the query builder.\n"
      },
      {
        "name": "color-expression-group-and",
        "type": "Color",
        "description": "The color of advanced filtering \"AND\" condition group."
      },
      {
        "name": "color-expression-group-or",
        "type": "Color",
        "description": "The color of advanced filtering \"OR\" condition group.\n"
      }
    ]
  },
  "radio": {
    "name": "radio",
    "themeFunctionName": "radio-theme",
    "description": "Radio Theme",
    "primaryTokens": [
      {
        "name": "fill-color",
        "description": "The checked state border and dot color."
      },
      {
        "name": "empty-color",
        "description": "The unchecked border color."
      },
      {
        "name": "error-color",
        "description": "The invalid state color."
      }
    ],
    "primaryTokensSummary": "Setting just `$fill-color` will theme all checked states consistently.",
    "tokens": [
      {
        "name": "label-color",
        "type": "Color",
        "description": "The text color used for the label text."
      },
      {
        "name": "label-color-hover",
        "type": "Color",
        "description": "The text color used for the label text on hover. Auto-derived from label-color."
      },
      {
        "name": "empty-color",
        "type": "Color",
        "description": "The unchecked border color. PRIMARY for unchecked states."
      },
      {
        "name": "empty-fill-color",
        "type": "Color",
        "description": "The unchecked radio fill color."
      },
      {
        "name": "fill-color",
        "type": "Color",
        "description": "The checked border and dot colors. PRIMARY - derives hover/focus colors."
      },
      {
        "name": "disabled-color",
        "type": "Color",
        "description": "The disabled border and dot colors."
      },
      {
        "name": "disabled-label-color",
        "type": "Color",
        "description": "The disabled label color."
      },
      {
        "name": "disabled-fill-color",
        "type": "Color",
        "description": "The disabled checked border and dot colors."
      },
      {
        "name": "hover-color",
        "type": "Color",
        "description": "The border and dot colors on hover. Auto-derived from empty-color."
      },
      {
        "name": "fill-color-hover",
        "type": "Color",
        "description": "The checked dot color on hover. Auto-derived from fill-color."
      },
      {
        "name": "fill-hover-border-color",
        "type": "Color",
        "description": "The checked border color on hover. Auto-derived from fill-color-hover."
      },
      {
        "name": "focus-border-color",
        "type": "Color",
        "description": "The focus border color. Auto-derived from fill-color (bootstrap)."
      },
      {
        "name": "focus-outline-color",
        "type": "Color",
        "description": "The focus outlined color. Auto-derived from empty-color (indigo) or fill-color (bootstrap)."
      },
      {
        "name": "focus-outline-color-filled",
        "type": "Color",
        "description": "The focus outline color when radio is filled. Auto-derived from fill-color (indigo)."
      },
      {
        "name": "error-color",
        "type": "Color",
        "description": "The label, border and dot color in invalid state. PRIMARY for error states."
      },
      {
        "name": "error-color-hover",
        "type": "Color",
        "description": "The label, border and dot color in invalid state on hover. Auto-derived from error-color."
      },
      {
        "name": "focus-outline-color-error",
        "type": "Color",
        "description": "The focus outline color in invalid state. Auto-derived from error-color.\n"
      }
    ]
  },
  "rating": {
    "name": "rating",
    "themeFunctionName": "rating-theme",
    "description": "Rating Theme\n\nThis theme has no automatic token derivation. All tokens are independent.\nUse symbol-empty-color and symbol-full-color for text-based symbols.\nUse symbol-empty-filter and symbol-full-filter for image/SVG-based symbols.",
    "primaryTokens": [],
    "tokens": [
      {
        "name": "label-color",
        "type": "Color",
        "description": "sets the color for the label."
      },
      {
        "name": "symbol-size",
        "type": "Number",
        "description": "the size of the symbols."
      },
      {
        "name": "symbol-empty-color",
        "type": "Color",
        "description": "sets the idle color for the symbol when it is a plane text."
      },
      {
        "name": "symbol-full-color",
        "type": "Color",
        "description": "sets the color in selected state for the symbol when it is a plane text."
      },
      {
        "name": "symbol-empty-filter",
        "type": "Color",
        "description": "the filter(s) used for the empty symbol."
      },
      {
        "name": "symbol-full-filter",
        "type": "Color",
        "description": "the filter(s) used for the filled symbol."
      },
      {
        "name": "disabled-label-color",
        "type": "Color",
        "description": "sets the color for the label in disabled state."
      },
      {
        "name": "disabled-empty-symbol-color",
        "type": "Color",
        "description": "sets the idle color for the symbol in disabled state when it is a plane text."
      },
      {
        "name": "disabled-full-symbol-color",
        "type": "Color",
        "description": "sets the color for the symbol in selected/disabled state when it is a plane text."
      }
    ]
  },
  "ripple": {
    "name": "ripple",
    "themeFunctionName": "ripple-theme",
    "description": "Ripple Theme\n\nThis theme has no automatic token derivation. Only one token: color.",
    "primaryTokens": [],
    "tokens": [
      {
        "name": "color",
        "type": "Color",
        "description": "The color of the ripple."
      }
    ]
  },
  "scrollbar": {
    "name": "scrollbar",
    "themeFunctionName": "scrollbar-theme",
    "description": "Scrollbar Theme\n\nThis theme has no automatic token derivation. All tokens are independent.\nConfigure thumb, track, and corner elements separately.",
    "primaryTokens": [],
    "tokens": [
      {
        "name": "sb-size",
        "type": "String | Number",
        "description": "The size of the scrollbar."
      },
      {
        "name": "sb-thumb-min-height",
        "type": "String | Number",
        "description": "The min-height of the thumb."
      },
      {
        "name": "sb-thumb-bg-color",
        "type": "Color",
        "description": "The background color of the thumb."
      },
      {
        "name": "sb-thumb-bg-color-hover",
        "type": "Color",
        "description": "The :hover background color of the thumb."
      },
      {
        "name": "sb-thumb-border-color",
        "type": "Color",
        "description": "The border color of the thumb."
      },
      {
        "name": "sb-thumb-border-size",
        "type": "String | Number",
        "description": "The border size of the thumb."
      },
      {
        "name": "sb-thumb-border-radius",
        "type": "String | Number",
        "description": "The border radius of the thumb."
      },
      {
        "name": "sb-track-bg-color",
        "type": "Color",
        "description": "The background color of the track."
      },
      {
        "name": "sb-track-bg-color-hover",
        "type": "Color",
        "description": "The :hover background color of the track."
      },
      {
        "name": "sb-track-border-color",
        "type": "Color",
        "description": "The border color of the track."
      },
      {
        "name": "sb-track-border-size",
        "type": "String | Number",
        "description": "The border size of the track."
      },
      {
        "name": "sb-corner-bg",
        "type": "Color",
        "description": "The background color of the corner."
      },
      {
        "name": "sb-corner-border-color",
        "type": "Color",
        "description": "The border color of the corner."
      },
      {
        "name": "sb-corner-border-size",
        "type": "String | Number",
        "description": "The border size of the corner."
      }
    ]
  },
  "select": {
    "name": "select",
    "themeFunctionName": "select-theme",
    "description": "Select Theme",
    "primaryTokens": [
      {
        "name": "toggle-button-background",
        "description": "The toggle button background."
      }
    ],
    "primaryTokensSummary": "Toggle button colors cascade from toggle-button-background through focus states.",
    "tokens": [
      {
        "name": "toggle-button-background",
        "type": "Color",
        "description": "The select toggle button background color. PRIMARY - derives all toggle button colors."
      },
      {
        "name": "toggle-button-background-focus",
        "type": "Color",
        "description": "The select toggle button background color when the select is focused. Auto-derived from toggle-button-background (variant-dependent)."
      },
      {
        "name": "toggle-button-background-disabled",
        "type": "Color",
        "description": "The select toggle button background color when the select is disabled."
      },
      {
        "name": "toggle-button-foreground",
        "type": "Color",
        "description": "The select toggle button foreground color. Auto-derived from toggle-button-background."
      },
      {
        "name": "toggle-button-foreground-focus",
        "type": "Color",
        "description": "The select toggle button foreground color when the select is focused. Auto-derived from toggle-button-background-focus (variant-dependent)."
      },
      {
        "name": "toggle-button-foreground-disabled",
        "type": "Color",
        "description": "The select toggle button foreground color when the select is disabled."
      },
      {
        "name": "toggle-button-foreground-filled",
        "type": "Color",
        "description": "The select toggle button foreground color when the select is filled. Auto-derived from toggle-button-background."
      },
      {
        "name": "toggle-button-background-focus--border",
        "type": "Color",
        "description": "The select toggle button background color when the select is focused in material border variant. Auto-derived from toggle-button-background (bootstrap/indigo)."
      }
    ]
  },
  "slider": {
    "name": "slider",
    "themeFunctionName": "slider-theme",
    "description": "Slider Theme",
    "primaryTokens": [
      {
        "name": "track-color",
        "description": "The filled track color."
      },
      {
        "name": "base-track-color",
        "description": "The unfilled track background."
      },
      {
        "name": "thumb-color",
        "description": "The thumb color (material)."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "track-color",
        "type": "Color",
        "description": "The color of the track. PRIMARY - derives hover, label, and thumb colors."
      },
      {
        "name": "track-step-color",
        "type": "Color",
        "description": "The color of the track steps. Auto-derived from base-track-color."
      },
      {
        "name": "track-step-size",
        "type": "Number",
        "description": "The size of the track steps."
      },
      {
        "name": "track-hover-color",
        "type": "Color",
        "description": "The color of the track on hover. Auto-derived from track-color."
      },
      {
        "name": "thumb-color",
        "type": "Color",
        "description": "The color of the thumb. Auto-derived from track-color (material) or set independently."
      },
      {
        "name": "thumb-focus-color",
        "type": "Color",
        "description": "The focus color of the thumb. Auto-derived from thumb-border-color or thumb-color."
      },
      {
        "name": "thumb-border-color",
        "type": "Color",
        "description": "The thumb border color. Auto-derived from track-color (fluent/indigo) or thumb-color (bootstrap)."
      },
      {
        "name": "thumb-border-hover-color",
        "type": "Color",
        "description": "The thumb border color when hovered. Auto-derived from thumb-border-color."
      },
      {
        "name": "thumb-border-focus-color",
        "type": "Color",
        "description": "The thumb border color when focused."
      },
      {
        "name": "thumb-disabled-border-color",
        "type": "Color",
        "description": "The thumb border color when it's disabled. Auto-derived from thumb-border-color."
      },
      {
        "name": "disabled-thumb-color",
        "type": "Color",
        "description": "The thumb color when its disabled. Auto-derived from thumb-color."
      },
      {
        "name": "label-background-color",
        "type": "Color",
        "description": "The background color of the bubble label. Auto-derived from track-color or thumb-color."
      },
      {
        "name": "label-text-color",
        "type": "Color",
        "description": "The text color of the bubble label. Auto-derived from label-background-color."
      },
      {
        "name": "base-track-color",
        "type": "Color",
        "description": "The base background color of the track. PRIMARY for unfilled track. Auto-derived from track-color (material)."
      },
      {
        "name": "base-track-hover-color",
        "type": "Color",
        "description": "The base background color of the track on hover. Auto-derived from base-track-color."
      },
      {
        "name": "disabled-base-track-color",
        "type": "Color",
        "description": "The base background color of the track when is disabled. Auto-derived from base-track-color."
      },
      {
        "name": "disabled-fill-track-color",
        "type": "Color",
        "description": "The base background color of the fill track when is disabled. Auto-derived from track-color."
      },
      {
        "name": "tick-label-color",
        "type": "Color",
        "description": "The color of the tick label."
      },
      {
        "name": "tick-color",
        "type": "Color",
        "description": "The background-color of the tick."
      }
    ]
  },
  "snackbar": {
    "name": "snackbar",
    "themeFunctionName": "snackbar-theme",
    "description": "Snackbar Theme",
    "primaryTokens": [
      {
        "name": "background",
        "description": "The background color."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "The background color used in the snackbar. PRIMARY - derives text-color, button-color."
      },
      {
        "name": "text-color",
        "type": "Color",
        "description": "The text color used in the snackbar. Auto-derived from background."
      },
      {
        "name": "button-color",
        "type": "Color",
        "description": "The button color used in the snackbar. Auto-derived from background."
      },
      {
        "name": "shadow",
        "type": "List",
        "description": "Sets a shadow to be used for the snackbar."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius used for the snackbar component."
      }
    ]
  },
  "splitter": {
    "name": "splitter",
    "themeFunctionName": "splitter-theme",
    "description": "Splitter Theme",
    "primaryTokens": [
      {
        "name": "bar-color",
        "description": "The bar background color."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "bar-color",
        "type": "Color",
        "description": "The background color of the bar. PRIMARY - derives handle, expander, focus colors."
      },
      {
        "name": "handle-color",
        "type": "Color",
        "description": "The color for the bar drag handle. Auto-derived from bar-color."
      },
      {
        "name": "expander-color",
        "type": "Color",
        "description": "The color for the arrow expander's. Auto-derived from bar-color."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "the border radios of the splitter bar drag handle"
      },
      {
        "name": "focus-color",
        "type": "Color",
        "description": "The color used for focused splitter bar. Auto-derived from bar-color (variant-dependent)."
      },
      {
        "name": "bar-color-active",
        "type": "Color",
        "description": "The background color of the bar when pressed."
      },
      {
        "name": "handle-color-active",
        "type": "Color",
        "description": "The color for the bar drag handle when pressed."
      },
      {
        "name": "expander-color-active",
        "type": "Color",
        "description": "The color for the arrow expander's when pressed."
      },
      {
        "name": "size",
        "type": "Number",
        "description": "The size of the splitter, its width for vertical and height for horizontal splitter."
      }
    ]
  },
  "stepper": {
    "name": "stepper",
    "themeFunctionName": "stepper-theme",
    "description": "Stepper Theme",
    "primaryTokens": [
      {
        "name": "step-background",
        "description": "The base step background."
      },
      {
        "name": "indicator-background",
        "description": "The step indicator background."
      },
      {
        "name": "invalid-indicator-background",
        "description": "The invalid step indicator."
      },
      {
        "name": "current-indicator-background",
        "description": "The current step indicator."
      },
      {
        "name": "complete-indicator-background",
        "description": "The completed step indicator."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "content-foreground",
        "type": "Color",
        "description": "The foreground of the step content."
      },
      {
        "name": "step-background",
        "type": "Color",
        "description": "The background of the step header. PRIMARY - derives all step states."
      },
      {
        "name": "step-hover-background",
        "type": "Color",
        "description": "The background of the step header on hover. Auto-derived from step-background."
      },
      {
        "name": "step-focus-background",
        "type": "Color",
        "description": "The background of the step header on focus. Auto-derived from step-background."
      },
      {
        "name": "title-color",
        "type": "Color",
        "description": "The color of the step title. Auto-derived from step-background."
      },
      {
        "name": "title-hover-color",
        "type": "Color",
        "description": "The color of the step title on hover. Auto-derived from step-hover-background."
      },
      {
        "name": "title-focus-color",
        "type": "Color",
        "description": "The color of the step title on focus. Auto-derived from step-focus-background."
      },
      {
        "name": "subtitle-color",
        "type": "Color",
        "description": "The color of the step subtitle. Auto-derived from step-background."
      },
      {
        "name": "subtitle-hover-color",
        "type": "Color",
        "description": "The color of the step subtitle on hover. Auto-derived from step-hover-background."
      },
      {
        "name": "subtitle-focus-color",
        "type": "Color",
        "description": "The color of the step subtitle on focus. Auto-derived from step-focus-background."
      },
      {
        "name": "indicator-color",
        "type": "Color",
        "description": "The text color of the step indicator. Auto-derived from indicator-background."
      },
      {
        "name": "indicator-background",
        "type": "Color",
        "description": "The background color of the step indicator. PRIMARY for indicator - derives indicator-color, indicator-outline. Auto-derived from step-background."
      },
      {
        "name": "indicator-outline",
        "type": "Color",
        "description": "The outline color of the step indicator. Auto-derived from indicator-background.\n"
      },
      {
        "name": "invalid-step-background",
        "type": "Color",
        "description": "The background of the invalid step header. Auto-derived from step-background."
      },
      {
        "name": "invalid-step-hover-background",
        "type": "Color",
        "description": "The background of the invalid step header on hover. Auto-derived from invalid-step-background."
      },
      {
        "name": "invalid-step-focus-background",
        "type": "Color",
        "description": "The background of the invalid step header on focus. Auto-derived from invalid-step-background."
      },
      {
        "name": "invalid-title-color",
        "type": "Color",
        "description": "The color of the invalid step title. Auto-derived from invalid-indicator-background."
      },
      {
        "name": "invalid-title-hover-color",
        "type": "Color",
        "description": "The color of the invalid step title on hover. Auto-derived from invalid-indicator-background."
      },
      {
        "name": "invalid-title-focus-color",
        "type": "Color",
        "description": "The color of the invalid step title on focus. Auto-derived from invalid-indicator-background."
      },
      {
        "name": "invalid-subtitle-color",
        "type": "Color",
        "description": "The color of the invalid step subtitle. Auto-derived from invalid-indicator-background."
      },
      {
        "name": "invalid-subtitle-hover-color",
        "type": "Color",
        "description": "The color of the invalid step subtitle on hover. Auto-derived from invalid-indicator-background."
      },
      {
        "name": "invalid-subtitle-focus-color",
        "type": "Color",
        "description": "The color of the invalid step subtitle on focus. Auto-derived from invalid-indicator-background."
      },
      {
        "name": "invalid-indicator-color",
        "type": "Color",
        "description": "The color of the invalid step indicator. Auto-derived from invalid-indicator-background."
      },
      {
        "name": "invalid-indicator-background",
        "type": "Color",
        "description": "The background color of the invalid step indicator. PRIMARY for invalid state."
      },
      {
        "name": "invalid-indicator-outline",
        "type": "Color",
        "description": "The outline color of the invalid step indicator. Auto-derived from invalid-indicator-background.\n"
      },
      {
        "name": "current-step-background",
        "type": "Color",
        "description": "The background of the current step header. Auto-derived from step-background."
      },
      {
        "name": "current-step-hover-background",
        "type": "Color",
        "description": "The background of the current step header on hover. Auto-derived from current-step-background."
      },
      {
        "name": "current-step-focus-background",
        "type": "Color",
        "description": "The background of the current step header on focus. Auto-derived from current-step-background."
      },
      {
        "name": "current-title-color",
        "type": "Color",
        "description": "The color of the current step title. Auto-derived from current-step-background."
      },
      {
        "name": "current-title-hover-color",
        "type": "Color",
        "description": "The color of the current step title on hover. Auto-derived from current-step-hover-background."
      },
      {
        "name": "current-title-focus-color",
        "type": "Color",
        "description": "The color of the current step title on focus. Auto-derived from current-step-focus-background."
      },
      {
        "name": "current-subtitle-color",
        "type": "Color",
        "description": "The color of the current step subtitle. Auto-derived from current-step-background."
      },
      {
        "name": "current-subtitle-hover-color",
        "type": "Color",
        "description": "The color of the current step subtitle on hover. Auto-derived from current-step-hover-background."
      },
      {
        "name": "current-subtitle-focus-color",
        "type": "Color",
        "description": "The color of the current step subtitle on focus. Auto-derived from current-step-focus-background."
      },
      {
        "name": "current-indicator-color",
        "type": "Color",
        "description": "The color of the current step indicator. Auto-derived from current-indicator-background."
      },
      {
        "name": "current-indicator-background",
        "type": "Color",
        "description": "The background color of the current step indicator. PRIMARY for current state. Auto-derived from current-step-background."
      },
      {
        "name": "current-indicator-outline",
        "type": "Color",
        "description": "The outline color of the current step indicator. Auto-derived from current-indicator-background.\n"
      },
      {
        "name": "complete-step-background",
        "type": "Color",
        "description": "The background of the complete step header. Auto-derived from step-background."
      },
      {
        "name": "complete-step-hover-background",
        "type": "Color",
        "description": "The background of the complete step header on hover. Auto-derived from complete-step-background."
      },
      {
        "name": "complete-step-focus-background",
        "type": "Color",
        "description": "The background of the complete step header on focus. Auto-derived from complete-step-background."
      },
      {
        "name": "complete-title-color",
        "type": "Color",
        "description": "The color of the complete step title. Auto-derived from complete-step-background."
      },
      {
        "name": "complete-title-hover-color",
        "type": "Color",
        "description": "The color of the complete step title on hover. Auto-derived from complete-step-hover-background."
      },
      {
        "name": "complete-title-focus-color",
        "type": "Color",
        "description": "The color of the complete step title on focus. Auto-derived from complete-step-focus-background."
      },
      {
        "name": "complete-subtitle-color",
        "type": "Color",
        "description": "The color of the complete step subtitle. Auto-derived from complete-step-background."
      },
      {
        "name": "complete-subtitle-hover-color",
        "type": "Color",
        "description": "The color of the complete step subtitle on hover. Auto-derived from complete-step-hover-background."
      },
      {
        "name": "complete-subtitle-focus-color",
        "type": "Color",
        "description": "The color of the complete step subtitle on focus. Auto-derived from complete-step-focus-background."
      },
      {
        "name": "complete-indicator-color",
        "type": "Color",
        "description": "The color of the completed step indicator. Auto-derived from complete-indicator-background."
      },
      {
        "name": "complete-indicator-background",
        "type": "Color",
        "description": "The background color of the completed step indicator. PRIMARY for complete state. Auto-derived from complete-step-background."
      },
      {
        "name": "complete-indicator-outline",
        "type": "Color",
        "description": "The outline color of the completed step indicator.\n"
      },
      {
        "name": "disabled-title-color",
        "type": "Color",
        "description": "The title color of the disabled step. Auto-derived from step-background."
      },
      {
        "name": "disabled-subtitle-color",
        "type": "Color",
        "description": "The subtitle color of the disabled step. Auto-derived from step-background."
      },
      {
        "name": "disabled-indicator-color",
        "type": "Color",
        "description": "The indicator color of the disabled step. Auto-derived from disabled-indicator-background."
      },
      {
        "name": "disabled-indicator-background",
        "type": "Color",
        "description": "The indicator background of the disabled step. Auto-derived from step-background."
      },
      {
        "name": "disabled-indicator-outline",
        "type": "Color",
        "description": "The indicator outline color of the disabled step. Auto-derived from disabled-indicator-background.\n"
      },
      {
        "name": "step-separator-color",
        "type": "Color",
        "description": "The separator border-color of between the steps. Auto-derived from step-background or indicator-background."
      },
      {
        "name": "complete-step-separator-color",
        "type": "Color",
        "description": "The separator border-color between the completed steps.\n"
      },
      {
        "name": "step-separator-style",
        "type": "Color",
        "description": "The separator border-style of between the steps."
      },
      {
        "name": "complete-step-separator-style",
        "type": "Color",
        "description": "The separator border-style between the completed steps.\n"
      },
      {
        "name": "border-radius-indicator",
        "type": "List",
        "description": "The border-radius of the step indicator."
      },
      {
        "name": "border-radius-step-header",
        "type": "List",
        "description": "The border-radius of the step header.\n"
      }
    ]
  },
  "switch": {
    "name": "switch",
    "themeFunctionName": "switch-theme",
    "description": "Switch Theme",
    "primaryTokens": [
      {
        "name": "track-on-color",
        "description": "The ON state track color."
      },
      {
        "name": "track-off-color",
        "description": "The OFF state track color."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "thumb-on-color",
        "type": "Color",
        "description": "The color of the thumb when the switch is on. Auto-derived from track-on-color (non-material) or bidirectional with track-on-color (material)."
      },
      {
        "name": "track-on-color",
        "type": "Color",
        "description": "The color of the track when the switch is on. PRIMARY for ON state."
      },
      {
        "name": "track-on-hover-color",
        "type": "Color",
        "description": "The color of the track when the switch is on and hovered. Auto-derived from track-on-color."
      },
      {
        "name": "thumb-off-color",
        "type": "Color",
        "description": "The color of the thumb when the switch is off. Auto-derived from track-off-color or border-color."
      },
      {
        "name": "thumb-off-hover-color",
        "type": "Color",
        "description": "The color of the thumb when the switch is off and hovered. Auto-derived from thumb-off-color."
      },
      {
        "name": "track-off-color",
        "type": "Color",
        "description": "The color of the track when the switch is off. PRIMARY for OFF state."
      },
      {
        "name": "thumb-disabled-color",
        "type": "Color",
        "description": "The color of the thumb when the switch is disabled. Auto-derived from thumb-off-color."
      },
      {
        "name": "thumb-on-disabled-color",
        "type": "Color",
        "description": "The color of the thumb when the switch is on and disabled. Auto-derived from thumb-on-color."
      },
      {
        "name": "track-disabled-color",
        "type": "Color",
        "description": "The color of the track when the switch is disabled. Auto-derived from track-off-color."
      },
      {
        "name": "track-on-disabled-color",
        "type": "Color",
        "description": "The color of the track when the switch is on and disabled. Auto-derived from track-on-color."
      },
      {
        "name": "label-color",
        "type": "Color",
        "description": "The color of the switch label"
      },
      {
        "name": "label-hover-color",
        "type": "Color",
        "description": "The color of the switch label on hover."
      },
      {
        "name": "label-disabled-color",
        "type": "Color",
        "description": "The color of the switch label when the switch is disabled"
      },
      {
        "name": "resting-shadow",
        "type": "List",
        "description": "The shadow used for the thumb in resting state of the switch."
      },
      {
        "name": "hover-shadow",
        "type": "List",
        "description": "The shadow used for the thumb in hover state of the switch."
      },
      {
        "name": "disabled-shadow",
        "type": "List",
        "description": "The shadow used for the thumb in disable state of the switch."
      },
      {
        "name": "border-radius-track",
        "type": "List",
        "description": "The border radius used for switch track."
      },
      {
        "name": "border-radius-thumb",
        "type": "List",
        "description": "The border radius used for switch thumb."
      },
      {
        "name": "border-radius-ripple",
        "type": "List",
        "description": "The border radius used for switch ripple."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The border color of the switch. Auto-derived from thumb-off-color."
      },
      {
        "name": "border-hover-color",
        "type": "Color",
        "description": "The border color of the switch on hover. Auto-derived from track-off-color or border-color."
      },
      {
        "name": "border-disabled-color",
        "type": "Color",
        "description": "The border color of the switch when it is disabled. Auto-derived from border-color."
      },
      {
        "name": "border-on-color",
        "type": "Color",
        "description": "The border color when the switch is on. Auto-derived from track-on-color."
      },
      {
        "name": "border-on-hover-color",
        "type": "Color",
        "description": "The border color when the switch is on and hovered. Auto-derived from border-on-color."
      },
      {
        "name": "focus-outline-color",
        "type": "Color",
        "description": "The focus outlined color. Auto-derived from border-color (indigo) or track-on-color (bootstrap)."
      },
      {
        "name": "focus-outline-color-focused",
        "type": "Color",
        "description": "The focus outlined color for focused state. Auto-derived from border-on-color (indigo)."
      },
      {
        "name": "focus-fill-color",
        "type": "Color",
        "description": "The focus fill color. Auto-derived from track-on-color (bootstrap)."
      },
      {
        "name": "focus-fill-hover-color",
        "type": "Color",
        "description": "The focus fill color on hover. Auto-derived from focus-fill-color."
      }
    ]
  },
  "tabs": {
    "name": "tabs",
    "themeFunctionName": "tabs-theme",
    "description": "Tabs Theme",
    "primaryTokens": [
      {
        "name": "item-background",
        "description": "The tabs header background."
      },
      {
        "name": "item-active-color",
        "description": "The active tab text color."
      }
    ],
    "primaryTokensSummary": "Setting just `$item-background` will theme all tab states consistently.",
    "tokens": [
      {
        "name": "item-text-color",
        "type": "Color",
        "description": "The color used for the tab text color. Auto-derived from item-background or synced with item-icon-color."
      },
      {
        "name": "item-background",
        "type": "Color",
        "description": "The background color used for the tabs header. PRIMARY - derives most colors."
      },
      {
        "name": "item-hover-background",
        "type": "Color",
        "description": "The background used for the tabs on hover. Auto-derived from item-background."
      },
      {
        "name": "item-hover-color",
        "type": "Color",
        "description": "The text color used for the tabs on hover. Auto-derived from item-text-color or item-hover-background."
      },
      {
        "name": "item-icon-color",
        "type": "Color",
        "description": "The color used for the tab icon. Auto-derived from item-background or synced with item-text-color."
      },
      {
        "name": "item-active-icon-color",
        "type": "Color",
        "description": "The color used for the active tab icon. Auto-derived from item-active-color or item-active-background."
      },
      {
        "name": "item-active-hover-icon-color",
        "type": "Color",
        "description": "The color used for the active tab icon on hover and focus. Auto-derived from item-active-icon-color."
      },
      {
        "name": "item-hover-icon-color",
        "type": "Color",
        "description": "The color used for the tab icon on hover. Auto-derived from item-icon-color or item-hover-background."
      },
      {
        "name": "item-disabled-icon-color",
        "type": "Color",
        "description": "The color used for the disabled tab icon."
      },
      {
        "name": "item-active-color",
        "type": "Color",
        "description": "The color used for the active tabs text. PRIMARY for active/indicator - derives indicator-color."
      },
      {
        "name": "item-active-hover-color",
        "type": "Color",
        "description": "The color used for the active tabs text on hover and focus. Auto-derived from item-active-color."
      },
      {
        "name": "item-active-background",
        "type": "Color",
        "description": "The color used for the active tab background. Auto-derived from item-background."
      },
      {
        "name": "item-active-hover-background",
        "type": "Color",
        "description": "The color used for the active tab background on hover and focus. Auto-derived from item-active-background."
      },
      {
        "name": "item-disabled-color",
        "type": "Color",
        "description": "The color used for the disabled tabs text."
      },
      {
        "name": "indicator-color",
        "type": "Color",
        "description": "The color used for the active tab indicator. Auto-derived from item-active-color."
      },
      {
        "name": "button-color",
        "type": "Color",
        "description": "The color used for the button icon/text color. Auto-derived from button-background or item-text-color."
      },
      {
        "name": "button-hover-color",
        "type": "Color",
        "description": "The color used for the button icon/text color on hover. Auto-derived from button-color or button-hover-background."
      },
      {
        "name": "button-disabled-color",
        "type": "Color",
        "description": "The color used for the disabled button icon/text. Auto-derived from button-color."
      },
      {
        "name": "button-background",
        "type": "Color",
        "description": "The color used for the button background. Auto-derived from item-background."
      },
      {
        "name": "button-hover-background",
        "type": "Color",
        "description": "The color used for the button background on hover. Auto-derived from item-background or button-background."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius for the tabs."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The border color of the tabs. Auto-derived from item-background (bootstrap)."
      },
      {
        "name": "border-color--hover",
        "type": "Color",
        "description": "The border color of the tabs on hover. Auto-derived from border-color."
      },
      {
        "name": "tab-ripple-color",
        "type": "Color",
        "description": "The color used for the tab ripple effect. Auto-derived from item-active-background or item-background."
      },
      {
        "name": "button-ripple-color",
        "type": "Color",
        "description": "The color used for the button ripple effect. Auto-derived from button-color."
      }
    ]
  },
  "time-picker": {
    "name": "time-picker",
    "themeFunctionName": "time-picker-theme",
    "description": "Time Picker Theme",
    "primaryTokens": [
      {
        "name": "background-color",
        "description": "The picker panel background."
      },
      {
        "name": "header-background",
        "description": "The header background."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "text-color",
        "type": "Color",
        "description": "The text color of a open time picker. Auto-derived from background-color."
      },
      {
        "name": "hover-text-color",
        "type": "Color",
        "description": "The hover text color of a open time picker. Auto-derived from text-color."
      },
      {
        "name": "selected-text-color",
        "type": "Color",
        "description": "The text color of a selected item in time picker. Auto-derived from background-color or active-item-background."
      },
      {
        "name": "active-item-background",
        "type": "Color",
        "description": "The background color for current item in focused column inside the time picker. Auto-derived from selected-text-color or background-color."
      },
      {
        "name": "active-item-foreground",
        "type": "Color",
        "description": "The foreground color for current item in focused column inside the time picker. Auto-derived from active-item-background."
      },
      {
        "name": "disabled-text-color",
        "type": "Color",
        "description": "The text color for disabled values. Auto-derived from disabled-item-background."
      },
      {
        "name": "disabled-item-background",
        "type": "Color",
        "description": "The background color for disabled values."
      },
      {
        "name": "header-background",
        "type": "Color",
        "description": "The header background color of a time picker. Auto-derived from selected-text-color or background-color."
      },
      {
        "name": "header-hour-text-color",
        "type": "Color",
        "description": "The header hour text color of a time picker. Auto-derived from header-background."
      },
      {
        "name": "background-color",
        "type": "Color",
        "description": "The time-picker panel background color. PRIMARY - derives text, selected, active, border colors."
      },
      {
        "name": "time-item-size",
        "type": "Number",
        "description": "The height of the time item."
      },
      {
        "name": "divider-color",
        "type": "Color",
        "description": "The color for the actions area divider. Auto-derived from border-color."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The border color around the time picker. Auto-derived from background-color."
      },
      {
        "name": "modal-shadow",
        "type": "List",
        "description": "The custom shadow to be used for the time picker in modal mode."
      },
      {
        "name": "dropdown-shadow",
        "type": "List",
        "description": "The custom shadow to be used for the time picker in dropdown mode."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius used for the outline of the picker."
      },
      {
        "name": "active-item-border-radius",
        "type": "List",
        "description": "The border radius used for the outline of the currently active item (hours, minutes, AM/PM)."
      }
    ]
  },
  "toast": {
    "name": "toast",
    "themeFunctionName": "toast-theme",
    "description": "Toast Theme",
    "primaryTokens": [
      {
        "name": "background",
        "description": "The background color."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "The background color used for the toast. PRIMARY - derives text-color, border-color."
      },
      {
        "name": "text-color",
        "type": "Color",
        "description": "The text-color used for the toast. Auto-derived from background."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The border-color used for the toast. Auto-derived from text-color."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius used for the toast component."
      },
      {
        "name": "shadow",
        "type": "List",
        "description": "Sets a shadow to be used for the toast."
      }
    ]
  },
  "tooltip": {
    "name": "tooltip",
    "themeFunctionName": "tooltip-theme",
    "description": "Tooltip Theme",
    "primaryTokens": [
      {
        "name": "background",
        "description": "The background color."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "The background color of the tooltip. PRIMARY - derives text-color."
      },
      {
        "name": "text-color",
        "type": "Color",
        "description": "The text color of the tooltip. Auto-derived from background."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius used for the tooltip component."
      },
      {
        "name": "shadow",
        "type": "List",
        "description": "Sets a shadow to be used for the tooltip component."
      }
    ]
  },
  "tree": {
    "name": "tree",
    "themeFunctionName": "tree-theme",
    "description": "Tree Theme",
    "primaryTokens": [
      {
        "name": "background",
        "description": "The node background."
      },
      {
        "name": "background-selected",
        "description": "The selected node background."
      },
      {
        "name": "background-active",
        "description": "The active node background."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "background",
        "type": "Color",
        "description": "The background color used for the tree node. PRIMARY - derives all state colors."
      },
      {
        "name": "foreground",
        "type": "Color",
        "description": "The color used for the tree node content. Auto-derived from background."
      },
      {
        "name": "icon-color",
        "type": "Color",
        "description": "The color used for the tree node icon."
      },
      {
        "name": "background-selected",
        "type": "Color",
        "description": "The background color used for the selected tree node. Auto-derived from background."
      },
      {
        "name": "foreground-selected",
        "type": "Color",
        "description": "The color used for the content of the selected tree node. Auto-derived from background-selected."
      },
      {
        "name": "background-active",
        "type": "Color",
        "description": "The background color used for the active tree node. Auto-derived from background."
      },
      {
        "name": "foreground-active",
        "type": "Color",
        "description": "The color used for the content of the active tree node. Auto-derived from background-active."
      },
      {
        "name": "background-active-selected",
        "type": "Color",
        "description": "The background color used for the active selected tree node. Auto-derived from background-active."
      },
      {
        "name": "foreground-active-selected",
        "type": "Color",
        "description": "The color used for the content of the active selected tree node. Auto-derived from background-active-selected."
      },
      {
        "name": "background-disabled",
        "type": "Color",
        "description": "The background color used for the tree node in disabled state. Auto-derived from background."
      },
      {
        "name": "foreground-disabled",
        "type": "Color",
        "description": "The color used for the content of the disabled tree node. Auto-derived from background-disabled."
      },
      {
        "name": "drop-area-color",
        "type": "Color",
        "description": "The background color used for the tree node drop aria."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The outline shadow color used for tree node in focus state."
      },
      {
        "name": "hover-color",
        "type": "Color",
        "description": "The background color used for the tree node on hover. Auto-derived from background."
      },
      {
        "name": "hover-selected-color",
        "type": "Color",
        "description": "The background color used for the selected tree node on hover. Auto-derived from background-selected."
      }
    ]
  },
  "watermark": {
    "name": "watermark",
    "themeFunctionName": "watermark-theme",
    "description": "Watermark Theme",
    "primaryTokens": [
      {
        "name": "link-background",
        "description": "The link background color."
      }
    ],
    "primaryTokensSummary": "Derived colors are auto-calculated for contrast.",
    "tokens": [
      {
        "name": "base-color",
        "type": "Color",
        "description": "The base color for all elements of the watermark."
      },
      {
        "name": "image-color",
        "type": "Color",
        "description": "The color used for the stamp image."
      },
      {
        "name": "image-opacity",
        "type": "Number",
        "description": "The opacity of the stamp image."
      },
      {
        "name": "link-background",
        "type": "Color",
        "description": "The background color used for the link. PRIMARY - derives color."
      },
      {
        "name": "color",
        "type": "Color",
        "description": "The color used for the link text. Auto-derived from link-background."
      },
      {
        "name": "border-color",
        "type": "Color",
        "description": "The border color used for the  link."
      },
      {
        "name": "border-radius",
        "type": "List",
        "description": "The border radius used for the link.\n"
      }
    ]
  }
}