@amsterdam/design-system-tokens/dist/index.d.ts

All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.

/**
 * Do not edit directly, this file was auto-generated.
 */

export default tokens;

declare interface DesignToken {
  value?: any;
  type?: string;
  comment?: string;
  name?: string;
  themeable?: boolean;
  attributes?: Record<string, unknown>;
  [key: string]: any;
}

declare const tokens: {
  ams: {
    "aspect-ratio": {
      "9-16": DesignToken;
      "3-4": DesignToken;
      "1-1": DesignToken;
      "4-3": DesignToken;
      "16-9": DesignToken;
      "16-5": DesignToken;
    };
    border: {
      width: {
        s: DesignToken;
        m: DesignToken;
        l: DesignToken;
        xl: DesignToken;
      };
    };
    color: {
      background: DesignToken;
      feedback: {
        error: DesignToken;
        info: DesignToken;
        success: DesignToken;
        warning: DesignToken;
      };
      highlight: {
        azure: DesignToken;
        green: DesignToken;
        lime: DesignToken;
        magenta: DesignToken;
        orange: DesignToken;
        purple: DesignToken;
        yellow: DesignToken;
      };
      interactive: {
        contrast: DesignToken;
        default: DesignToken;
        disabled: DesignToken;
        hover: DesignToken;
        invalid: {
          default: DesignToken;
          hover: DesignToken;
        };
        inverse: DesignToken;
        secondary: DesignToken;
      };
      separator: DesignToken;
      text: {
        default: DesignToken;
        inverse: DesignToken;
        secondary: DesignToken;
      };
    };
    cursor: {
      disabled: DesignToken;
      interactive: DesignToken;
    };
    focus: {
      "outline-offset": DesignToken;
    };
    space: {
      xs: DesignToken;
      s: DesignToken;
      m: DesignToken;
      l: DesignToken;
      xl: DesignToken;
      "2xl": DesignToken;
    };
    typography: {
      "font-family": DesignToken;
      "hyphenate-limit-chars": DesignToken;
      "body-text": {
        "font-size": DesignToken;
        "font-weight": DesignToken;
        "line-height": DesignToken;
        bold: {
          "font-weight": DesignToken;
        };
        small: {
          "font-size": DesignToken;
          "line-height": DesignToken;
        };
        large: {
          "font-size": DesignToken;
          "line-height": DesignToken;
        };
        "x-large": {
          "font-size": DesignToken;
          "line-height": DesignToken;
        };
      };
      heading: {
        "0": {
          "font-size": DesignToken;
          "line-height": DesignToken;
        };
        "1": {
          "font-size": DesignToken;
          "line-height": DesignToken;
        };
        "2": {
          "font-size": DesignToken;
          "line-height": DesignToken;
        };
        "3": {
          "font-size": DesignToken;
          "line-height": DesignToken;
        };
        "4": {
          "font-size": DesignToken;
          "line-height": DesignToken;
        };
        "5": {
          "font-size": DesignToken;
          "line-height": DesignToken;
        };
        "6": {
          "font-size": DesignToken;
          "line-height": DesignToken;
        };
        "font-weight": DesignToken;
      };
    };
    links: {
      color: DesignToken;
      "text-decoration-thickness": DesignToken;
      "text-underline-offset": DesignToken;
      hover: {
        color: DesignToken;
        "text-decoration-thickness": DesignToken;
        "text-underline-offset": DesignToken;
      };
      subtle: {
        "text-decoration-line": DesignToken;
        hover: {
          "text-decoration-line": DesignToken;
        };
      };
      contrast: {
        color: DesignToken;
        hover: {
          color: DesignToken;
        };
      };
      inverse: {
        color: DesignToken;
        hover: {
          color: DesignToken;
        };
      };
    };
    accordion: {
      gap: DesignToken;
      button: {
        color: DesignToken;
        cursor: DesignToken;
        "font-family": DesignToken;
        "font-size": DesignToken;
        "font-weight": DesignToken;
        gap: DesignToken;
        "line-height": DesignToken;
        "outline-offset": DesignToken;
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
        hover: {
          color: DesignToken;
        };
      };
      panel: {
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
      };
    };
    "action-group": {
      gap: DesignToken;
    };
    alert: {
      "background-color": DesignToken;
      "box-shadow": DesignToken;
      "forced-colors": {
        "border-width": DesignToken;
      };
      "severity-indicator": {
        "background-color": DesignToken;
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
      };
      content: {
        gap: DesignToken;
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
      };
      error: {
        "box-shadow": DesignToken;
        "severity-indicator": {
          "background-color": DesignToken;
        };
      };
      success: {
        "box-shadow": DesignToken;
        "severity-indicator": {
          "background-color": DesignToken;
        };
      };
      warning: {
        "box-shadow": DesignToken;
        "severity-indicator": {
          "background-color": DesignToken;
        };
      };
    };
    avatar: {
      "aspect-ratio": DesignToken;
      "background-color": DesignToken;
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      "padding-block": DesignToken;
      "padding-inline": DesignToken;
      "forced-colors": {
        "border-width": DesignToken;
      };
      azure: {
        "background-color": DesignToken;
        color: DesignToken;
      };
      green: {
        "background-color": DesignToken;
        color: DesignToken;
      };
      lime: {
        "background-color": DesignToken;
        color: DesignToken;
      };
      magenta: {
        "background-color": DesignToken;
        color: DesignToken;
      };
      orange: {
        "background-color": DesignToken;
        color: DesignToken;
      };
      yellow: {
        "background-color": DesignToken;
        color: DesignToken;
      };
    };
    badge: {
      "background-color": DesignToken;
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      "padding-inline": DesignToken;
      azure: {
        "background-color": DesignToken;
        color: DesignToken;
      };
      lime: {
        "background-color": DesignToken;
        color: DesignToken;
      };
      magenta: {
        "background-color": DesignToken;
        color: DesignToken;
      };
      orange: {
        "background-color": DesignToken;
        color: DesignToken;
      };
      purple: {
        "background-color": DesignToken;
        color: DesignToken;
      };
      red: {
        "background-color": DesignToken;
        color: DesignToken;
      };
      yellow: {
        "background-color": DesignToken;
        color: DesignToken;
      };
    };
    blockquote: {
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      inverse: {
        color: DesignToken;
      };
    };
    breadcrumb: {
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      separator: {
        "background-image": DesignToken;
        "block-size": DesignToken;
        "inline-size": DesignToken;
        "margin-inline": DesignToken;
      };
      link: {
        color: DesignToken;
        "outline-offset": DesignToken;
        "text-decoration-line": DesignToken;
        "text-decoration-thickness": DesignToken;
        "text-underline-offset": DesignToken;
        hover: {
          color: DesignToken;
          "text-decoration-line": DesignToken;
        };
      };
    };
    button: {
      cursor: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      gap: DesignToken;
      "outline-offset": DesignToken;
      "padding-block": DesignToken;
      "padding-inline": DesignToken;
      disabled: {
        cursor: DesignToken;
      };
      "forced-color-mode": {
        border: DesignToken;
      };
      primary: {
        "background-color": DesignToken;
        "box-shadow": DesignToken;
        color: DesignToken;
        disabled: {
          "background-color": DesignToken;
          "box-shadow": DesignToken;
        };
        hover: {
          "background-color": DesignToken;
          "box-shadow": DesignToken;
        };
      };
      secondary: {
        "background-color": DesignToken;
        color: DesignToken;
        "box-shadow": DesignToken;
        hover: {
          "box-shadow": DesignToken;
          color: DesignToken;
        };
        disabled: {
          "background-color": DesignToken;
          "box-shadow": DesignToken;
          color: DesignToken;
        };
      };
      tertiary: {
        "background-color": DesignToken;
        color: DesignToken;
        hover: {
          "box-shadow": DesignToken;
          color: DesignToken;
        };
        disabled: {
          "background-color": DesignToken;
          color: DesignToken;
        };
      };
      "icon-only": {
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
      };
    };
    card: {
      gap: DesignToken;
      "heading-group": {
        gap: DesignToken;
      };
      link: {
        color: DesignToken;
        "text-decoration-line": DesignToken;
        "text-decoration-thickness": DesignToken;
        "text-underline-offset": DesignToken;
        hover: {
          color: DesignToken;
          "text-decoration-line": DesignToken;
        };
      };
      "outline-offset": DesignToken;
    };
    "character-count": {
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      error: {
        color: DesignToken;
      };
    };
    checkbox: {
      color: DesignToken;
      cursor: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      gap: DesignToken;
      "line-height": DesignToken;
      "outline-offset": DesignToken;
      checkmark: {
        "border-color": DesignToken;
        "border-width": DesignToken;
        checked: {
          "background-color": DesignToken;
          "background-image": DesignToken;
          hover: {
            "background-color": DesignToken;
          };
        };
        disabled: {
          "border-color": DesignToken;
          "border-width": DesignToken;
          checked: {
            "background-color": DesignToken;
            hover: {
              "background-color": DesignToken;
            };
          };
          indeterminate: {
            "background-color": DesignToken;
            hover: {
              "background-color": DesignToken;
            };
          };
        };
        hover: {
          "border-color": DesignToken;
          "border-width": DesignToken;
        };
        invalid: {
          "border-color": DesignToken;
          checked: {
            "background-color": DesignToken;
            hover: {
              "background-color": DesignToken;
            };
          };
          hover: {
            "border-color": DesignToken;
          };
          indeterminate: {
            "background-color": DesignToken;
            hover: {
              "background-color": DesignToken;
            };
          };
        };
        indeterminate: {
          "background-color": DesignToken;
          "background-image": DesignToken;
          hover: {
            "background-color": DesignToken;
          };
        };
      };
      disabled: {
        cursor: DesignToken;
        color: DesignToken;
      };
      hover: {
        color: DesignToken;
        "text-decoration-thickness": DesignToken;
      };
    };
    column: {
      gap: {
        "x-small": DesignToken;
        small: DesignToken;
        medium: DesignToken;
        large: DesignToken;
        "x-large": DesignToken;
      };
    };
    "date-input": {
      "background-color": DesignToken;
      "box-shadow": DesignToken;
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      "outline-offset": DesignToken;
      "padding-block": DesignToken;
      "padding-inline": DesignToken;
      "calender-picker-indicator": {
        "background-image": DesignToken;
        cursor: DesignToken;
      };
      disabled: {
        "background-color": DesignToken;
        "box-shadow": DesignToken;
        color: DesignToken;
        cursor: DesignToken;
        "calender-picker-indicator": {
          "background-image": DesignToken;
        };
      };
      hover: {
        "box-shadow": DesignToken;
        "calender-picker-indicator": {
          "background-image": DesignToken;
        };
      };
      invalid: {
        "box-shadow": DesignToken;
        hover: {
          "box-shadow": DesignToken;
        };
      };
    };
    "description-list": {
      color: DesignToken;
      "column-gap": DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "line-height": DesignToken;
      "row-gap": DesignToken;
      inverse: {
        color: DesignToken;
      };
      term: {
        "font-weight": DesignToken;
      };
      description: {
        "font-weight": DesignToken;
        "padding-inline-start": DesignToken;
      };
      narrow: {
        "grid-template-columns": DesignToken;
      };
      medium: {
        "grid-template-columns": DesignToken;
      };
      wide: {
        "grid-template-columns": DesignToken;
      };
    };
    dialog: {
      "background-color": DesignToken;
      border: DesignToken;
      gap: DesignToken;
      "inline-size": DesignToken;
      "max-block-size": DesignToken;
      "max-inline-size": DesignToken;
      backdrop: {
        "background-color": DesignToken;
      };
      header: {
        gap: DesignToken;
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
      };
      body: {
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
      };
      footer: {
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
      };
    };
    "error-message": {
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      gap: DesignToken;
      "line-height": DesignToken;
    };
    "field-set": {
      invalid: {
        "border-inline-start": DesignToken;
        "padding-inline-start": DesignToken;
      };
      legend: {
        color: DesignToken;
        "font-family": DesignToken;
        "font-size": DesignToken;
        "font-weight": DesignToken;
        "line-height": DesignToken;
        "margin-block-end": DesignToken;
      };
    };
    field: {
      gap: DesignToken;
      invalid: {
        "border-inline-start": DesignToken;
        "padding-inline-start": DesignToken;
      };
    };
    figure: {
      gap: DesignToken;
      caption: {
        color: DesignToken;
        "font-family": DesignToken;
        "font-size": DesignToken;
        "font-weight": DesignToken;
        "line-height": DesignToken;
        inverse: {
          color: DesignToken;
        };
      };
    };
    "file-input": {
      "background-color": DesignToken;
      border: DesignToken;
      color: DesignToken;
      cursor: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      "outline-offset": DesignToken;
      "padding-block": DesignToken;
      "padding-inline": DesignToken;
      disabled: {
        color: DesignToken;
        cursor: DesignToken;
      };
      "file-selector-button": {
        "background-color": DesignToken;
        "box-shadow": DesignToken;
        color: DesignToken;
        cursor: DesignToken;
        "margin-inline-end": DesignToken;
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
        hover: {
          "box-shadow": DesignToken;
          color: DesignToken;
        };
        disabled: {
          "box-shadow": DesignToken;
          color: DesignToken;
          cursor: DesignToken;
        };
        "forced-color-mode": {
          border: DesignToken;
        };
      };
    };
    "file-list": {
      gap: DesignToken;
      "padding-block": DesignToken;
      file: {
        "font-family": DesignToken;
        "font-size": DesignToken;
        "font-weight": DesignToken;
        gap: DesignToken;
        "line-height": DesignToken;
        details: {
          color: DesignToken;
        };
        preview: {
          width: DesignToken;
        };
      };
    };
    footer: {
      menu: {
        "column-gap": DesignToken;
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
        "row-gap": DesignToken;
        link: {
          color: DesignToken;
          "font-family": DesignToken;
          "font-size": DesignToken;
          "font-weight": DesignToken;
          "line-height": DesignToken;
          "outline-offset": DesignToken;
          "text-decoration-line": DesignToken;
          "text-decoration-thickness": DesignToken;
          "text-underline-offset": DesignToken;
          hover: {
            color: DesignToken;
            "text-decoration-line": DesignToken;
          };
        };
      };
      spotlight: {
        "background-color": DesignToken;
      };
    };
    grid: {
      "column-count": DesignToken;
      "column-gap": DesignToken;
      "padding-block": {
        s: DesignToken;
        m: DesignToken;
        l: DesignToken;
      };
      "padding-inline": DesignToken;
      "row-gap": {
        s: DesignToken;
        m: DesignToken;
        l: DesignToken;
      };
      medium: {
        "column-count": DesignToken;
        "padding-inline": DesignToken;
      };
      wide: {
        "column-count": DesignToken;
        "padding-inline": DesignToken;
      };
    };
    header: {
      "font-family": DesignToken;
      "padding-block": DesignToken;
      "padding-inline": DesignToken;
      "logo-link": {
        "column-gap": DesignToken;
        "outline-offset": DesignToken;
      };
      "brand-name": {
        color: DesignToken;
        "font-size": DesignToken;
        "font-weight": DesignToken;
      };
      "mega-menu": {
        button: {
          cursor: DesignToken;
          label: {
            open: {
              "font-weight": DesignToken;
            };
          };
        };
      };
      menu: {
        "column-gap": DesignToken;
        "row-gap": DesignToken;
        item: {
          color: DesignToken;
          "column-gap": DesignToken;
          "font-family": DesignToken;
          "font-size": DesignToken;
          "font-weight": DesignToken;
          "line-height": DesignToken;
          "outline-offset": DesignToken;
          "padding-block": DesignToken;
          hover: {
            color: DesignToken;
          };
        };
        link: {
          "text-decoration-line": DesignToken;
          "text-decoration-thickness": DesignToken;
          "text-underline-offset": DesignToken;
          hover: {
            "text-decoration-line": DesignToken;
          };
        };
      };
      navigation: {
        "column-gap": DesignToken;
        "row-gap": DesignToken;
      };
    };
    heading: {
      "1": {
        "font-size": DesignToken;
        "line-height": DesignToken;
      };
      "2": {
        "font-size": DesignToken;
        "line-height": DesignToken;
      };
      "3": {
        "font-size": DesignToken;
        "line-height": DesignToken;
      };
      "4": {
        "font-size": DesignToken;
        "line-height": DesignToken;
      };
      "5": {
        "font-size": DesignToken;
        "line-height": DesignToken;
      };
      "6": {
        "font-size": DesignToken;
        "line-height": DesignToken;
      };
      color: DesignToken;
      "font-family": DesignToken;
      "font-weight": DesignToken;
      inverse: {
        color: DesignToken;
      };
    };
    hint: {
      color: DesignToken;
    };
    "icon-button": {
      color: DesignToken;
      cursor: DesignToken;
      "outline-offset": DesignToken;
      hover: {
        "background-color": DesignToken;
        color: DesignToken;
      };
      disabled: {
        color: DesignToken;
        cursor: DesignToken;
      };
      contrast: {
        color: DesignToken;
        hover: {
          "background-color": DesignToken;
          color: DesignToken;
        };
        disabled: {
          color: DesignToken;
        };
      };
      inverse: {
        "background-color": DesignToken;
        color: DesignToken;
        hover: {
          "background-color": DesignToken;
          color: DesignToken;
        };
        disabled: {
          color: DesignToken;
          "background-color": DesignToken;
        };
      };
    };
    icon: {
      "font-size": DesignToken;
      "line-height": DesignToken;
      small: {
        "font-size": DesignToken;
        "line-height": DesignToken;
      };
      large: {
        "font-size": DesignToken;
        "line-height": DesignToken;
      };
      "heading-3": {
        "font-size": DesignToken;
        "line-height": DesignToken;
      };
      "heading-4": {
        "font-size": DesignToken;
        "line-height": DesignToken;
      };
      "heading-5": {
        "font-size": DesignToken;
        "line-height": DesignToken;
      };
      "heading-6": {
        "font-size": DesignToken;
        "line-height": DesignToken;
      };
      inverse: {
        color: DesignToken;
      };
    };
    "image-slider": {
      gap: DesignToken;
      scroller: {
        gap: DesignToken;
        "outline-offset": DesignToken;
      };
      thumbnails: {
        gap: DesignToken;
        thumbnail: {
          "background-color": DesignToken;
          cursor: DesignToken;
          opacity: DesignToken;
          "outline-offset": DesignToken;
          "in-view": {
            opacity: DesignToken;
          };
          hover: {
            opacity: DesignToken;
          };
        };
      };
    };
    image: {
      "aspect-ratio": DesignToken;
    };
    "invalid-form-alert": {
      "outline-offset": DesignToken;
    };
    label: {
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
    };
    "link-list": {
      gap: DesignToken;
      link: {
        color: DesignToken;
        "font-family": DesignToken;
        "font-size": DesignToken;
        "font-weight": DesignToken;
        gap: DesignToken;
        "line-height": DesignToken;
        "outline-offset": DesignToken;
        "text-decoration-line": DesignToken;
        "text-decoration-thickness": DesignToken;
        "text-underline-offset": DesignToken;
        small: {
          "font-size": DesignToken;
          "line-height": DesignToken;
        };
        large: {
          "font-size": DesignToken;
          "line-height": DesignToken;
        };
        hover: {
          color: DesignToken;
          "text-decoration-line": DesignToken;
        };
        contrast: {
          color: DesignToken;
          hover: {
            color: DesignToken;
          };
        };
        inverse: {
          color: DesignToken;
          hover: {
            color: DesignToken;
          };
        };
      };
    };
    link: {
      color: DesignToken;
      "font-family": DesignToken;
      "font-weight": DesignToken;
      "outline-offset": DesignToken;
      hover: {
        color: DesignToken;
      };
      inline: {
        "text-decoration-thickness": DesignToken;
        "text-underline-offset": DesignToken;
        "font-family": DesignToken;
        "font-size": DesignToken;
        "line-height": DesignToken;
        hover: {
          "text-decoration-thickness": DesignToken;
          "text-underline-offset": DesignToken;
        };
      };
      standalone: {
        "font-size": DesignToken;
        "line-height": DesignToken;
        "text-decoration-thickness": DesignToken;
        "text-underline-offset": DesignToken;
        hover: {
          "text-decoration-thickness": DesignToken;
          "text-underline-offset": DesignToken;
        };
      };
      contrast: {
        color: DesignToken;
        hover: {
          color: DesignToken;
        };
      };
      inverse: {
        color: DesignToken;
        hover: {
          color: DesignToken;
        };
      };
    };
    logo: {
      "block-size": DesignToken;
      "min-block-size": DesignToken;
      emblem: {
        color: DesignToken;
      };
      subsite: {
        color: DesignToken;
      };
      title: {
        color: DesignToken;
      };
    };
    mark: {
      "background-color": DesignToken;
    };
    "mega-menu": {
      "list-category": {
        "column-gap": DesignToken;
        "column-width": DesignToken;
        "padding-block-start": DesignToken;
        "padding-block-end": DesignToken;
      };
    };
    "ordered-list": {
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      gap: DesignToken;
      "line-height": DesignToken;
      "list-style-type": DesignToken;
      small: {
        "font-size": DesignToken;
        "line-height": DesignToken;
      };
      inverse: {
        color: DesignToken;
      };
      item: {
        "margin-inline-start": DesignToken;
        "padding-inline-start": DesignToken;
      };
      "ordered-list": {
        gap: DesignToken;
        "list-style-type": DesignToken;
        "padding-block-end": DesignToken;
        "padding-block-start": DesignToken;
        item: {
          "margin-inline-start": DesignToken;
          "padding-inline-start": DesignToken;
        };
      };
    };
    "page-heading": {
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      inverse: {
        color: DesignToken;
      };
    };
    "page-menu": {
      "column-gap": DesignToken;
      "row-gap": DesignToken;
      item: {
        color: DesignToken;
        "font-family": DesignToken;
        "font-size": DesignToken;
        "font-weight": DesignToken;
        gap: DesignToken;
        "line-height": DesignToken;
        "outline-offset": DesignToken;
        "text-decoration-line": DesignToken;
        "text-decoration-thickness": DesignToken;
        "text-underline-offset": DesignToken;
        hover: {
          color: DesignToken;
          "text-decoration-line": DesignToken;
        };
      };
    };
    pagination: {
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      link: {
        color: DesignToken;
        gap: DesignToken;
        "outline-offset": DesignToken;
        "padding-inline": DesignToken;
        "text-decoration-line": DesignToken;
        "text-decoration-thickness": DesignToken;
        "text-underline-offset": DesignToken;
        current: {
          "font-weight": DesignToken;
        };
        hover: {
          color: DesignToken;
          "text-decoration-line": DesignToken;
        };
      };
    };
    paragraph: {
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      inverse: {
        color: DesignToken;
      };
      small: {
        "font-size": DesignToken;
        "line-height": DesignToken;
      };
      large: {
        "font-size": DesignToken;
        "line-height": DesignToken;
      };
    };
    "password-input": {
      "background-color": DesignToken;
      "box-shadow": DesignToken;
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      "outline-offset": DesignToken;
      "padding-block": DesignToken;
      "padding-inline": DesignToken;
      disabled: {
        "background-color": DesignToken;
        "box-shadow": DesignToken;
        color: DesignToken;
        cursor: DesignToken;
      };
      hover: {
        "box-shadow": DesignToken;
      };
      invalid: {
        "box-shadow": DesignToken;
        hover: {
          "box-shadow": DesignToken;
        };
      };
      placeholder: {
        color: DesignToken;
      };
    };
    radio: {
      color: DesignToken;
      cursor: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      gap: DesignToken;
      "line-height": DesignToken;
      "outline-offset": DesignToken;
      "text-decoration-thickness": DesignToken;
      "text-underline-offset": DesignToken;
      "checked-indicator": {
        fill: DesignToken;
        disabled: {
          fill: DesignToken;
        };
        "disabled-invalid": {
          fill: DesignToken;
          hover: {
            fill: DesignToken;
          };
        };
        hover: {
          fill: DesignToken;
        };
        invalid: {
          fill: DesignToken;
          hover: {
            fill: DesignToken;
          };
        };
      };
      "hover-indicator": {
        "stroke-width": DesignToken;
        hover: {
          stroke: DesignToken;
        };
        invalid: {
          hover: {
            stroke: DesignToken;
          };
        };
      };
      circle: {
        fill: DesignToken;
        stroke: DesignToken;
        "stroke-width": DesignToken;
        disabled: {
          stroke: DesignToken;
        };
        "disabled-invalid": {
          stroke: DesignToken;
          hover: {
            stroke: DesignToken;
          };
        };
        hover: {
          stroke: DesignToken;
        };
        invalid: {
          stroke: DesignToken;
          hover: {
            stroke: DesignToken;
          };
        };
      };
      disabled: {
        color: DesignToken;
        cursor: DesignToken;
      };
      hover: {
        color: DesignToken;
        "text-decoration-line": DesignToken;
      };
      "icon-container": {
        "block-size": DesignToken;
        "inline-size": DesignToken;
      };
    };
    row: {
      gap: {
        "x-small": DesignToken;
        small: DesignToken;
        medium: DesignToken;
        large: DesignToken;
        "x-large": DesignToken;
      };
    };
    screen: {
      "background-color": DesignToken;
      wide: {
        "max-inline-size": DesignToken;
      };
      "x-wide": {
        "max-inline-size": DesignToken;
      };
    };
    "search-field": {
      input: {
        "background-color": DesignToken;
        "box-shadow": DesignToken;
        color: DesignToken;
        "font-family": DesignToken;
        "font-size": DesignToken;
        "font-weight": DesignToken;
        "line-height": DesignToken;
        "outline-offset": DesignToken;
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
        "cancel-button": {
          "background-image": DesignToken;
          "block-size": DesignToken;
          color: DesignToken;
          cursor: DesignToken;
          "inline-size": DesignToken;
        };
        hover: {
          "box-shadow": DesignToken;
        };
        invalid: {
          "box-shadow": DesignToken;
          hover: {
            "box-shadow": DesignToken;
          };
        };
        placeholder: {
          color: DesignToken;
        };
      };
    };
    select: {
      "background-color": DesignToken;
      "background-image": DesignToken;
      "background-position": DesignToken;
      "box-shadow": DesignToken;
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      "outline-offset": DesignToken;
      "padding-block": DesignToken;
      "padding-inline": DesignToken;
      disabled: {
        "background-image": DesignToken;
        "box-shadow": DesignToken;
        color: DesignToken;
        cursor: DesignToken;
      };
      hover: {
        "box-shadow": DesignToken;
      };
      invalid: {
        "box-shadow": DesignToken;
        hover: {
          "box-shadow": DesignToken;
        };
      };
      option: {
        disabled: {
          color: DesignToken;
        };
      };
    };
    "skip-link": {
      "background-color": DesignToken;
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      "outline-offset": DesignToken;
      "padding-block": DesignToken;
      "padding-inline": DesignToken;
      hover: {
        "background-color": DesignToken;
      };
    };
    spotlight: {
      "background-color": DesignToken;
      azure: {
        "background-color": DesignToken;
      };
      green: {
        "background-color": DesignToken;
      };
      lime: {
        "background-color": DesignToken;
      };
      magenta: {
        "background-color": DesignToken;
      };
      orange: {
        "background-color": DesignToken;
      };
      yellow: {
        "background-color": DesignToken;
      };
    };
    switch: {
      "background-color": DesignToken;
      cursor: DesignToken;
      "outline-offset": DesignToken;
      "inline-size": DesignToken;
      thumb: {
        "background-color": DesignToken;
        "inline-size": DesignToken;
        "block-size": DesignToken;
        hover: {
          "box-shadow": DesignToken;
          color: DesignToken;
        };
      };
      checked: {
        "background-color": DesignToken;
      };
      disabled: {
        "background-color": DesignToken;
        cursor: DesignToken;
      };
    };
    "table-of-contents": {
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      gap: DesignToken;
      "line-height": DesignToken;
      link: {
        color: DesignToken;
        "outline-offset": DesignToken;
        "text-decoration-line": DesignToken;
        "text-decoration-thickness": DesignToken;
        "text-underline-offset": DesignToken;
        hover: {
          color: DesignToken;
          "text-decoration-line": DesignToken;
        };
      };
      list: {
        gap: DesignToken;
        list: {
          "padding-block-start": DesignToken;
          "padding-inline-start": DesignToken;
        };
      };
      heading: {
        "font-weight": DesignToken;
        "font-size": DesignToken;
        "line-height": DesignToken;
      };
    };
    table: {
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      caption: {
        "font-weight": DesignToken;
      };
      cell: {
        "border-block-end": DesignToken;
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
      };
      "header-cell": {
        "font-weight": DesignToken;
      };
    };
    tabs: {
      gap: DesignToken;
      list: {
        "box-shadow": DesignToken;
      };
      button: {
        color: DesignToken;
        cursor: DesignToken;
        "font-family": DesignToken;
        "font-size": DesignToken;
        "font-weight": DesignToken;
        "line-height": DesignToken;
        "outline-offset": DesignToken;
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
        hover: {
          color: DesignToken;
          "box-shadow": DesignToken;
        };
        selected: {
          "box-shadow": DesignToken;
          "font-weight": DesignToken;
        };
        disabled: {
          color: DesignToken;
          cursor: DesignToken;
        };
      };
    };
    "text-area": {
      "background-color": DesignToken;
      "box-shadow": DesignToken;
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      "min-block-size": DesignToken;
      "outline-offset": DesignToken;
      "padding-block": DesignToken;
      "padding-inline": DesignToken;
      disabled: {
        "background-color": DesignToken;
        "box-shadow": DesignToken;
        color: DesignToken;
        cursor: DesignToken;
      };
      hover: {
        "box-shadow": DesignToken;
      };
      invalid: {
        "box-shadow": DesignToken;
        hover: {
          "box-shadow": DesignToken;
        };
      };
      placeholder: {
        color: DesignToken;
      };
    };
    "text-input": {
      "background-color": DesignToken;
      "box-shadow": DesignToken;
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      "outline-offset": DesignToken;
      "padding-block": DesignToken;
      "padding-inline": DesignToken;
      disabled: {
        "background-color": DesignToken;
        "box-shadow": DesignToken;
        color: DesignToken;
        cursor: DesignToken;
      };
      hover: {
        "box-shadow": DesignToken;
      };
      invalid: {
        "box-shadow": DesignToken;
        hover: {
          "box-shadow": DesignToken;
        };
      };
      placeholder: {
        color: DesignToken;
      };
    };
    "time-input": {
      "background-color": DesignToken;
      "box-shadow": DesignToken;
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      "outline-offset": DesignToken;
      "padding-block": DesignToken;
      "padding-inline": DesignToken;
      "calender-picker-indicator": {
        "background-image": DesignToken;
        cursor: DesignToken;
      };
      disabled: {
        "background-color": DesignToken;
        "box-shadow": DesignToken;
        color: DesignToken;
        cursor: DesignToken;
        "calender-picker-indicator": {
          "background-image": DesignToken;
        };
      };
      hover: {
        "box-shadow": DesignToken;
        "calender-picker-indicator": {
          "background-image": DesignToken;
        };
      };
      invalid: {
        "box-shadow": DesignToken;
        hover: {
          "box-shadow": DesignToken;
        };
      };
    };
    "top-task-link": {
      gap: DesignToken;
      description: {
        color: DesignToken;
        "font-family": DesignToken;
        "font-size": DesignToken;
        "font-weight": DesignToken;
        "line-height": DesignToken;
      };
      label: {
        color: DesignToken;
        "font-family": DesignToken;
        "font-size": DesignToken;
        "font-weight": DesignToken;
        "line-height": DesignToken;
        "text-decoration-line": DesignToken;
        "text-decoration-thickness": DesignToken;
        "text-underline-offset": DesignToken;
        hover: {
          color: DesignToken;
          "text-decoration-line": DesignToken;
        };
      };
      "outline-offset": DesignToken;
    };
    "unordered-list": {
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      gap: DesignToken;
      "line-height": DesignToken;
      "list-style-type": DesignToken;
      inverse: {
        color: DesignToken;
      };
      small: {
        "font-size": DesignToken;
        "line-height": DesignToken;
      };
      item: {
        "margin-inline-start": DesignToken;
        "padding-inline-start": DesignToken;
      };
      "unordered-list": {
        gap: DesignToken;
        "list-style-type": DesignToken;
        "padding-block-end": DesignToken;
        "padding-block-start": DesignToken;
        item: {
          "margin-inline-start": DesignToken;
          "padding-inline-start": DesignToken;
        };
      };
    };
  };
};