@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;
  $description?: 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;
        negative: {
          m: DesignToken;
          xl: DesignToken;
        };
      };
    };
    color: {
      background: {
        body: DesignToken;
        default: 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;
      };
      progress: {
        current: DesignToken;
        completed: DesignToken;
        upcoming: 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: {
        "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;
        };
        "font-weight": DesignToken;
        "text-wrap": DesignToken;
      };
    };
    inputs: {
      "background-color": DesignToken;
      "border-color": DesignToken;
      "border-style": DesignToken;
      "border-width": 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: {
        color: DesignToken;
      };
      hover: {
        "box-shadow": DesignToken;
      };
      invalid: {
        "border-color": DesignToken;
        hover: {
          "border-color": DesignToken;
          "box-shadow": DesignToken;
        };
      };
      placeholder: {
        color: 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;
        gap: DesignToken;
        "outline-offset": DesignToken;
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
        hover: {
          color: DesignToken;
        };
      };
    };
    "action-group": {
      gap: DesignToken;
    };
    alert: {
      "background-color": DesignToken;
      "border-color": DesignToken;
      "border-style": DesignToken;
      "border-width": DesignToken;
      "severity-indicator": {
        "background-color": DesignToken;
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
      };
      content: {
        gap: DesignToken;
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
      };
      error: {
        "border-color": DesignToken;
        "severity-indicator": {
          "background-color": DesignToken;
        };
      };
      success: {
        "border-color": DesignToken;
        "severity-indicator": {
          "background-color": DesignToken;
        };
      };
      warning: {
        "border-color": DesignToken;
        "severity-indicator": {
          "background-color": DesignToken;
        };
      };
    };
    avatar: {
      "aspect-ratio": DesignToken;
      "background-color": DesignToken;
      "border-color": DesignToken;
      "border-style": DesignToken;
      "border-width": 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;
        "border-color": DesignToken;
        color: DesignToken;
      };
      green: {
        "background-color": DesignToken;
        "border-color": DesignToken;
        color: DesignToken;
      };
      lime: {
        "background-color": DesignToken;
        "border-color": DesignToken;
        color: DesignToken;
      };
      magenta: {
        "background-color": DesignToken;
        "border-color": DesignToken;
        color: DesignToken;
      };
      orange: {
        "background-color": DesignToken;
        "border-color": DesignToken;
        color: DesignToken;
      };
      yellow: {
        "background-color": DesignToken;
        "border-color": DesignToken;
        color: DesignToken;
      };
    };
    badge: {
      "background-color": DesignToken;
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      gap: 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;
      };
    };
    body: {
      "background-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: {
      "border-style": DesignToken;
      "border-width": DesignToken;
      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;
      };
      "icon-only": {
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
      };
      primary: {
        "background-color": DesignToken;
        "border-color": DesignToken;
        color: DesignToken;
        disabled: {
          "background-color": DesignToken;
          "border-color": DesignToken;
        };
        hover: {
          "background-color": DesignToken;
          "border-color": DesignToken;
        };
      };
      secondary: {
        "background-color": DesignToken;
        "border-color": DesignToken;
        color: DesignToken;
        disabled: {
          "border-color": DesignToken;
          color: DesignToken;
        };
        hover: {
          "box-shadow": DesignToken;
          color: DesignToken;
        };
      };
      tertiary: {
        "background-color": DesignToken;
        "border-color": DesignToken;
        color: DesignToken;
        disabled: {
          color: DesignToken;
        };
        hover: {
          "border-color": DesignToken;
          color: DesignToken;
        };
      };
    };
    "call-to-action-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;
      "text-decoration-thickness": DesignToken;
      "text-underline-offset": DesignToken;
      hover: {
        "background-color": DesignToken;
        "text-decoration-thickness": DesignToken;
        "text-underline-offset": DesignToken;
      };
    };
    card: {
      heading: {
        "margin-block-end": DesignToken;
      };
      "heading-group": {
        gap: DesignToken;
        "margin-block-end": DesignToken;
      };
      image: {
        "margin-block-end": 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;
      "text-decoration-thickness": DesignToken;
      "text-underline-offset": DesignToken;
      disabled: {
        cursor: DesignToken;
        color: DesignToken;
      };
      hover: {
        color: DesignToken;
        "text-decoration-line": DesignToken;
      };
      "checked-indicator": {
        stroke: DesignToken;
      };
      "hover-indicator": {
        hover: {
          stroke: DesignToken;
        };
        invalid: {
          hover: {
            stroke: DesignToken;
          };
        };
      };
      "icon-container": {
        "block-size": DesignToken;
        "inline-size": DesignToken;
      };
      "indeterminate-indicator": {
        stroke: DesignToken;
      };
      rectangle: {
        fill: DesignToken;
        stroke: DesignToken;
        checked: {
          fill: DesignToken;
          disabled: {
            fill: DesignToken;
          };
          hover: {
            fill: DesignToken;
          };
          invalid: {
            fill: DesignToken;
            hover: {
              fill: DesignToken;
            };
          };
        };
        disabled: {
          stroke: DesignToken;
        };
        hover: {
          stroke: DesignToken;
        };
        indeterminate: {
          fill: DesignToken;
          disabled: {
            fill: DesignToken;
          };
          hover: {
            fill: DesignToken;
          };
          invalid: {
            fill: DesignToken;
            hover: {
              fill: DesignToken;
            };
          };
        };
        invalid: {
          stroke: DesignToken;
          hover: {
            stroke: DesignToken;
          };
        };
      };
    };
    column: {
      gap: {
        "x-small": DesignToken;
        small: DesignToken;
        medium: DesignToken;
        large: DesignToken;
        "x-large": DesignToken;
      };
    };
    "date-input": {
      "background-color": DesignToken;
      "border-color": DesignToken;
      "border-style": DesignToken;
      "border-width": 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: {
        color: DesignToken;
        cursor: DesignToken;
      };
      hover: {
        "box-shadow": DesignToken;
        "calendar-picker-indicator": {
          "background-image": DesignToken;
        };
      };
      invalid: {
        "border-color": DesignToken;
        hover: {
          "border-color": DesignToken;
          "box-shadow": DesignToken;
        };
      };
      "calendar-picker-indicator": {
        "background-image": DesignToken;
        cursor: 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-size": DesignToken;
        "font-weight": DesignToken;
        "line-height": DesignToken;
        "margin-block-end": DesignToken;
        "text-wrap": DesignToken;
        "vi-medium": {
          "margin-block-end": DesignToken;
        };
      };
      description: {
        "font-weight": DesignToken;
        "margin-block-end": DesignToken;
        "padding-inline-start": DesignToken;
      };
      section: {
        "margin-block-end": DesignToken;
      };
      narrow: {
        "grid-template-columns": DesignToken;
      };
      medium: {
        "grid-template-columns": DesignToken;
      };
      wide: {
        "grid-template-columns": DesignToken;
      };
      "vi-medium": {
        "column-gap": DesignToken;
        narrow: {
          "grid-template-columns": DesignToken;
        };
        medium: {
          "grid-template-columns": DesignToken;
        };
        wide: {
          "grid-template-columns": DesignToken;
        };
      };
    };
    dialog: {
      "background-color": DesignToken;
      "border-color": DesignToken;
      "border-radius": DesignToken;
      "border-style": DesignToken;
      "border-width": DesignToken;
      "box-shadow": DesignToken;
      gap: DesignToken;
      "inline-size": DesignToken;
      "max-block-size": DesignToken;
      "max-inline-size": DesignToken;
      medium: {
        "inline-size": DesignToken;
        "max-block-size": DesignToken;
      };
      "vi-medium": {
        "inline-size": DesignToken;
        "max-block-size": DesignToken;
      };
      backdrop: {
        "background-color": DesignToken;
      };
      header: {
        gap: DesignToken;
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
        medium: {
          "padding-block": DesignToken;
          "padding-inline": DesignToken;
        };
        "vi-medium": {
          "padding-block": DesignToken;
          "padding-inline": DesignToken;
        };
      };
      body: {
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
        medium: {
          "padding-inline": DesignToken;
        };
        "vi-medium": {
          "padding-inline": DesignToken;
        };
      };
      footer: {
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
        medium: {
          "padding-block": DesignToken;
          "padding-inline": DesignToken;
        };
        "vi-medium": {
          "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": {
      child: {
        "margin-block-end": DesignToken;
        "before-error-message": {
          "margin-block-end": DesignToken;
        };
        "before-field-or-field-set": {
          "margin-block-end": DesignToken;
        };
        "between-fields-and-field-sets": {
          "margin-block-end": DesignToken;
        };
      };
      invalid: {
        "border-inline-start": DesignToken;
        "padding-inline-start": DesignToken;
      };
      legend: {
        "margin-block-end": DesignToken;
        color: DesignToken;
        "font-family": DesignToken;
        "font-size": DesignToken;
        "font-weight": DesignToken;
        "line-height": DesignToken;
        "text-wrap": DesignToken;
        "in-fieldset": {
          "font-weight": DesignToken;
        };
      };
    };
    field: {
      gap: DesignToken;
      child: {
        "margin-block-end": DesignToken;
        "before-error-message": {
          "margin-block-end": 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-color": DesignToken;
      "border-style": DesignToken;
      "border-width": 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;
        "border-color": DesignToken;
        "border-style": DesignToken;
        "border-width": DesignToken;
        color: DesignToken;
        cursor: DesignToken;
        "line-height": DesignToken;
        "margin-inline-end": DesignToken;
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
        disabled: {
          color: DesignToken;
          cursor: DesignToken;
        };
        hover: {
          "box-shadow": DesignToken;
          color: 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;
        };
      };
    };
    grid: {
      "column-count": DesignToken;
      "column-gap": DesignToken;
      "padding-block": {
        l: DesignToken;
        xl: DesignToken;
        "2xl": DesignToken;
      };
      "padding-inline": DesignToken;
      "row-gap": {
        l: DesignToken;
        xl: DesignToken;
        "2xl": DesignToken;
      };
      medium: {
        "column-count": DesignToken;
        "padding-inline": DesignToken;
      };
      wide: {
        "column-count": DesignToken;
        "padding-inline": DesignToken;
      };
      "vi-medium": {
        "column-count": DesignToken;
        "padding-inline": DesignToken;
      };
      "vi-wide": {
        "column-count": DesignToken;
        "padding-inline": DesignToken;
      };
      cell: {
        "background-color": DesignToken;
        "padding-block": DesignToken;
        "padding-inline": 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;
      };
      color: DesignToken;
      "font-family": DesignToken;
      "font-weight": DesignToken;
      "text-wrap": DesignToken;
      inverse: {
        color: DesignToken;
      };
    };
    hint: {
      "font-weight": DesignToken;
      "in-fieldset": {
        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-1": {
        "font-size": DesignToken;
        "line-height": DesignToken;
      };
      "heading-2": {
        "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;
      };
      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;
          };
        };
      };
      figure: {
        "margin-block-end": 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;
      "text-wrap": DesignToken;
      "in-fieldset": {
        "font-weight": 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-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      "outline-offset": DesignToken;
      "text-decoration-thickness": DesignToken;
      "text-underline-offset": DesignToken;
      hover: {
        color: DesignToken;
        "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;
    };
    menu: {
      "background-color": DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      "padding-block": DesignToken;
      wide: {
        "max-inline-size": DesignToken;
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
      };
      "vi-wide": {
        "max-inline-size": DesignToken;
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
      };
      link: {
        color: DesignToken;
        gap: DesignToken;
        "outline-offset": DesignToken;
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
        "text-decoration-line": DesignToken;
        "text-decoration-thickness": DesignToken;
        "text-underline-offset": DesignToken;
        hover: {
          color: DesignToken;
          "text-decoration-line": DesignToken;
        };
        wide: {
          gap: DesignToken;
        };
        "vi-wide": {
          gap: DesignToken;
        };
      };
      list: {
        gap: 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-footer": {
      menu: {
        "background-color": DesignToken;
        "column-gap": DesignToken;
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
        "row-gap": DesignToken;
        medium: {
          "padding-inline": DesignToken;
        };
        wide: {
          "padding-inline": DesignToken;
        };
        "vi-medium": {
          "padding-inline": DesignToken;
        };
        "vi-wide": {
          "padding-inline": 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;
      };
    };
    "page-header": {
      "background-color": DesignToken;
      "font-family": DesignToken;
      "padding-block": DesignToken;
      "padding-inline": DesignToken;
      medium: {
        "padding-inline": DesignToken;
      };
      wide: {
        "padding-inline": DesignToken;
      };
      "vi-medium": {
        "padding-inline": DesignToken;
      };
      "vi-wide": {
        "padding-inline": DesignToken;
      };
      "logo-link": {
        "column-gap": DesignToken;
        "outline-offset": DesignToken;
      };
      "brand-name": {
        color: DesignToken;
        "font-size": DesignToken;
        "font-weight": DesignToken;
        "line-height": DesignToken;
        "text-wrap": DesignToken;
      };
      "mega-menu": {
        "padding-block": DesignToken;
        button: {
          "background-color": DesignToken;
          color: DesignToken;
          cursor: DesignToken;
          label: {
            open: {
              "font-weight": DesignToken;
            };
          };
          "padding-inline": DesignToken;
          hover: {
            "background-color": DesignToken;
            color: 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: {
          color: DesignToken;
          gap: DesignToken;
          "text-decoration-line": DesignToken;
          "text-decoration-thickness": DesignToken;
          "text-underline-offset": DesignToken;
          hover: {
            "text-decoration-line": DesignToken;
          };
        };
      };
      navigation: {
        "column-gap": DesignToken;
        "row-gap": DesignToken;
      };
    };
    page: {
      "background-color": DesignToken;
      "max-inline-size": DesignToken;
      "with-menu": {
        "max-inline-size": DesignToken;
        "area-skip-link": {
          "margin-inline-end": 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;
        "text-wrap": DesignToken;
      };
    };
    "password-input": {
      "background-color": DesignToken;
      "border-color": DesignToken;
      "border-style": DesignToken;
      "border-width": 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: {
        color: DesignToken;
        cursor: DesignToken;
      };
      hover: {
        "box-shadow": DesignToken;
      };
      invalid: {
        "border-color": DesignToken;
        hover: {
          "border-color": DesignToken;
          "box-shadow": DesignToken;
        };
      };
      placeholder: {
        color: DesignToken;
      };
    };
    "progress-list": {
      "heading-2": {
        step: {
          marker: {
            "block-size": DesignToken;
            "margin-block-start": DesignToken;
          };
        };
      };
      "heading-3": {
        step: {
          marker: {
            "block-size": DesignToken;
            "margin-block-start": DesignToken;
          };
        };
      };
      "heading-4": {
        step: {
          marker: {
            "block-size": DesignToken;
            "margin-block-start": DesignToken;
          };
        };
      };
      button: {
        color: DesignToken;
        cursor: DesignToken;
        gap: DesignToken;
        "outline-offset": DesignToken;
        "padding-block": DesignToken;
        "padding-inline": DesignToken;
        hover: {
          color: DesignToken;
        };
      };
      icon: {
        "transition-duration": DesignToken;
        "transition-timing-function": DesignToken;
      };
      step: {
        gap: DesignToken;
        medium: {
          gap: DesignToken;
        };
        "vi-medium": {
          gap: DesignToken;
        };
        marker: {
          shape: {
            "block-size": DesignToken;
            "background-color": DesignToken;
            "border-color": DesignToken;
            "border-style": DesignToken;
            "border-width": DesignToken;
            "outline-color": DesignToken;
            "outline-style": DesignToken;
            "outline-width": DesignToken;
          };
        };
        connector: {
          "border-inline-color": DesignToken;
          "border-inline-style": DesignToken;
          "border-inline-width": DesignToken;
        };
        heading: {
          "margin-block-end": DesignToken;
        };
        content: {
          "margin-block-end": DesignToken;
        };
        completed: {
          marker: {
            shape: {
              "background-color": DesignToken;
              "border-color": DesignToken;
            };
          };
          connector: {
            "border-inline-color": DesignToken;
            "border-inline-style": DesignToken;
          };
        };
        current: {
          marker: {
            shape: {
              "background-color": DesignToken;
              "border-color": DesignToken;
            };
          };
          connector: {
            "border-inline-color": DesignToken;
          };
        };
      };
      substeps: {
        "padding-block-start": DesignToken;
        step: {
          indicator: {
            "margin-inline-end": DesignToken;
            medium: {
              "margin-inline-end": DesignToken;
            };
            "vi-medium": {
              "margin-inline-end": DesignToken;
            };
          };
          marker: {
            "block-size": DesignToken;
            "inline-size": DesignToken;
            shape: {
              "block-size": DesignToken;
              "background-color": DesignToken;
              "border-color": DesignToken;
              "border-style": DesignToken;
              "border-width": DesignToken;
              "outline-color": DesignToken;
              "outline-style": DesignToken;
              "outline-width": DesignToken;
            };
          };
          connector: {
            "background-color": DesignToken;
            "border-inline-color": DesignToken;
            "border-inline-style": DesignToken;
            "border-inline-width": DesignToken;
            "margin-block-start": DesignToken;
            "last-child": {
              "border-inline-color": DesignToken;
            };
          };
          content: {
            "margin-block-end": DesignToken;
          };
          completed: {
            marker: {
              shape: {
                "background-color": DesignToken;
                "border-color": DesignToken;
              };
            };
            connector: {
              "border-inline-color": DesignToken;
              "border-inline-style": DesignToken;
            };
          };
          current: {
            marker: {
              shape: {
                "background-color": DesignToken;
                "border-color": DesignToken;
              };
            };
          };
        };
        "last-child": {
          content: {
            "margin-block-end": 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": {
        hover: {
          stroke: DesignToken;
        };
        invalid: {
          hover: {
            stroke: DesignToken;
          };
        };
      };
      circle: {
        fill: DesignToken;
        stroke: 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;
      };
    };
    "search-field": {
      input: {
        "background-color": DesignToken;
        "border-color": DesignToken;
        "border-style": DesignToken;
        "border-width": 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: {
          "box-shadow": DesignToken;
        };
        invalid: {
          "border-color": DesignToken;
          hover: {
            "border-color": DesignToken;
            "box-shadow": DesignToken;
          };
        };
        "cancel-button": {
          "background-image": DesignToken;
          "block-size": DesignToken;
          color: DesignToken;
          cursor: DesignToken;
          "inline-size": DesignToken;
        };
        placeholder: {
          color: DesignToken;
        };
      };
    };
    select: {
      "background-color": DesignToken;
      "background-image": DesignToken;
      "background-position": DesignToken;
      "border-color": DesignToken;
      "border-style": DesignToken;
      "border-width": 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;
        color: DesignToken;
        cursor: DesignToken;
      };
      hover: {
        "box-shadow": DesignToken;
        "background-image": DesignToken;
      };
      invalid: {
        "border-color": DesignToken;
        hover: {
          "border-color": DesignToken;
          "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;
      };
    };
    "standalone-link": {
      color: DesignToken;
      "column-gap": 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;
      };
      contrast: {
        color: DesignToken;
        hover: {
          color: DesignToken;
        };
      };
      inverse: {
        color: DesignToken;
        hover: {
          color: DesignToken;
        };
      };
    };
    switch: {
      "background-color": DesignToken;
      cursor: DesignToken;
      "outline-offset": DesignToken;
      "inline-size": DesignToken;
      thumb: {
        "background-color": DesignToken;
        "block-size": DesignToken;
        "inline-size": DesignToken;
        hover: {
          "box-shadow": DesignToken;
          color: DesignToken;
        };
      };
      checked: {
        "background-color": DesignToken;
      };
      disabled: {
        "background-color": DesignToken;
        cursor: DesignToken;
      };
    };
    "tab-navigation": {
      list: {
        "box-shadow": DesignToken;
        vertical: {
          "box-shadow": DesignToken;
        };
      };
      link: {
        gap: 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;
        hover: {
          "box-shadow": DesignToken;
          color: DesignToken;
        };
        current: {
          "box-shadow": DesignToken;
          "font-weight": DesignToken;
        };
        vertical: {
          hover: {
            "box-shadow": DesignToken;
          };
          current: {
            "box-shadow": 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;
        };
      };
    };
    table: {
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken;
      "font-weight": DesignToken;
      "line-height": DesignToken;
      caption: {
        "font-weight": DesignToken;
        "margin-block-end": 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: {
          "box-shadow": DesignToken;
          color: DesignToken;
        };
        selected: {
          "box-shadow": DesignToken;
          "font-weight": DesignToken;
        };
        disabled: {
          color: DesignToken;
          cursor: DesignToken;
        };
      };
    };
    "text-area": {
      "background-color": DesignToken;
      "border-color": DesignToken;
      "border-style": DesignToken;
      "border-width": 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: {
        color: DesignToken;
        cursor: DesignToken;
      };
      hover: {
        "box-shadow": DesignToken;
      };
      invalid: {
        "border-color": DesignToken;
        hover: {
          "border-color": DesignToken;
          "box-shadow": DesignToken;
        };
      };
      placeholder: {
        color: DesignToken;
      };
    };
    "text-input": {
      "background-color": DesignToken;
      "border-color": DesignToken;
      "border-style": DesignToken;
      "border-width": 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: {
        color: DesignToken;
        cursor: DesignToken;
      };
      hover: {
        "box-shadow": DesignToken;
      };
      invalid: {
        "border-color": DesignToken;
        hover: {
          "border-color": DesignToken;
          "box-shadow": DesignToken;
        };
      };
      placeholder: {
        color: DesignToken;
      };
    };
    "time-input": {
      "background-color": DesignToken;
      "border-color": DesignToken;
      "border-style": DesignToken;
      "border-width": DesignToken;
      color: DesignToken;
      "font-family": DesignToken;
      "font-size": DesignToken