@rijkshuisstijl-community/design-tokens 9.0.0 → 10.0.1

package/dist/kern-lintblauw/tokens.d.ts

@@ -0,0 +1,2245 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Mon, 15 Dec 2025 18:39:48 GMT
+ */
+
+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: {
+  rhc: {
+    "border-radius": {
+      round: DesignToken;
+      none: DesignToken;
+      sm: DesignToken;
+      md: DesignToken;
+    };
+    "border-width": {
+      sm: DesignToken;
+      md: DesignToken;
+      none: DesignToken;
+    };
+    color: {
+      "cool-grey": {
+        "50": DesignToken;
+        "100": DesignToken;
+        "200": DesignToken;
+        "300": DesignToken;
+        "400": DesignToken;
+        "500": DesignToken;
+        "600": DesignToken;
+        "700": DesignToken;
+        "800": DesignToken;
+        "900": DesignToken;
+      };
+      lichtblauw: {
+        "50": DesignToken;
+        "100": DesignToken;
+        "200": DesignToken;
+        "300": DesignToken;
+        "400": DesignToken;
+        "500": DesignToken;
+      };
+      violet: {
+        "50": DesignToken;
+        "100": DesignToken;
+        "200": DesignToken;
+        "300": DesignToken;
+        "400": DesignToken;
+        "500": DesignToken;
+      };
+      paars: {
+        "50": DesignToken;
+        "100": DesignToken;
+        "200": DesignToken;
+        "300": DesignToken;
+        "400": DesignToken;
+        "500": DesignToken;
+      };
+      hemelblauw: {
+        "50": DesignToken;
+        "100": DesignToken;
+        "200": DesignToken;
+        "300": DesignToken;
+        "400": DesignToken;
+        "500": DesignToken;
+      };
+      donkerblauw: {
+        "50": DesignToken;
+        "100": DesignToken;
+        "200": DesignToken;
+        "300": DesignToken;
+        "400": DesignToken;
+        "500": DesignToken;
+      };
+      mintgroen: {
+        "50": DesignToken;
+        "100": DesignToken;
+        "200": DesignToken;
+        "300": DesignToken;
+        "400": DesignToken;
+        "500": DesignToken;
+      };
+      mosgroen: {
+        "50": DesignToken;
+        "100": DesignToken;
+        "200": DesignToken;
+        "300": DesignToken;
+        "400": DesignToken;
+        "500": DesignToken;
+      };
+      groen: {
+        "50": DesignToken;
+        "100": DesignToken;
+        "200": DesignToken;
+        "300": DesignToken;
+        "400": DesignToken;
+        "500": DesignToken;
+      };
+      donkergroen: {
+        "50": DesignToken;
+        "100": DesignToken;
+        "200": DesignToken;
+        "300": DesignToken;
+        "400": DesignToken;
+        "500": DesignToken;
+      };
+      bruin: {
+        "50": DesignToken;
+        "100": DesignToken;
+        "200": DesignToken;
+        "300": DesignToken;
+        "400": DesignToken;
+        "500": DesignToken;
+      };
+      donkerbruin: {
+        "50": DesignToken;
+        "100": DesignToken;
+        "200": DesignToken;
+        "300": DesignToken;
+        "400": DesignToken;
+        "500": DesignToken;
+      };
+      geel: {
+        "50": DesignToken;
+        "100": DesignToken;
+        "200": DesignToken;
+        "300": DesignToken;
+        "400": DesignToken;
+        "500": DesignToken;
+      };
+      donkergeel: {
+        "50": DesignToken;
+        "100": DesignToken;
+        "200": DesignToken;
+        "300": DesignToken;
+        "400": DesignToken;
+        "500": DesignToken;
+      };
+      oranje: {
+        "50": DesignToken;
+        "100": DesignToken;
+        "200": DesignToken;
+        "300": DesignToken;
+        "400": DesignToken;
+        "500": DesignToken;
+      };
+      rood: {
+        "50": DesignToken;
+        "100": DesignToken;
+        "200": DesignToken;
+        "300": DesignToken;
+        "400": DesignToken;
+        "500": DesignToken;
+      };
+      roze: {
+        "50": DesignToken;
+        "100": DesignToken;
+        "200": DesignToken;
+        "300": DesignToken;
+        "400": DesignToken;
+        "500": DesignToken;
+      };
+      robijnrood: {
+        "50": DesignToken;
+        "100": DesignToken;
+        "200": DesignToken;
+        "300": DesignToken;
+        "400": DesignToken;
+        "500": DesignToken;
+      };
+      lintblauw: {
+        "50": DesignToken;
+        "100": DesignToken;
+        "200": DesignToken;
+        "300": DesignToken;
+        "400": DesignToken;
+        "500": DesignToken;
+      };
+      wit: DesignToken;
+      zwart: DesignToken;
+      transparent: DesignToken;
+      foreground: {
+        default: DesignToken;
+        subtle: DesignToken;
+        link: DesignToken;
+        "on-dark-color": DesignToken;
+        "on-light-color": DesignToken;
+      };
+      border: {
+        default: DesignToken;
+        subtle: DesignToken;
+        strong: DesignToken;
+      };
+      "bg-document": DesignToken;
+      positive: {
+        default: DesignToken;
+        subtle: DesignToken;
+      };
+      info: {
+        default: DesignToken;
+        subtle: DesignToken;
+      };
+      negative: {
+        default: DesignToken;
+        subtle: DesignToken;
+      };
+      warning: {
+        default: DesignToken;
+        subtle: DesignToken;
+      };
+      primary: {
+        "50": DesignToken;
+        "100": DesignToken;
+        "200": DesignToken;
+        "300": DesignToken;
+        "400": DesignToken;
+        "500": DesignToken;
+        hover: DesignToken;
+        active: DesignToken;
+      };
+    };
+    size: {
+      "quarter-lint": DesignToken;
+      "half-lint": DesignToken;
+      lint: DesignToken;
+      "2-lint": DesignToken;
+      "3-lint": DesignToken;
+      "pointer-target": DesignToken;
+      icon: {
+        md: DesignToken;
+      };
+    };
+    space: {
+      "0": DesignToken;
+      "25": DesignToken;
+      "50": DesignToken;
+      "100": DesignToken;
+      "150": DesignToken;
+      "200": DesignToken;
+      "300": DesignToken;
+      "400": DesignToken;
+      "500": DesignToken;
+      "600": DesignToken;
+      "700": DesignToken;
+    };
+    focus: {
+      "outline-color": DesignToken;
+      inverse: {
+        "outline-color": DesignToken;
+      };
+      "outline-offset": DesignToken;
+      "outline-style": DesignToken;
+      "outline-width": DesignToken;
+    };
+    "rounded-corner": {
+      overflow: DesignToken;
+      sm: {
+        "border-radius": DesignToken;
+      };
+      md: {
+        "border-radius": DesignToken;
+      };
+      lg: {
+        "border-radius": DesignToken;
+      };
+    };
+    blockquote: {
+      "margin-block-end": DesignToken;
+      "margin-block-start": DesignToken;
+      "margin-inline-end": DesignToken;
+      "margin-inline-start": DesignToken;
+    };
+    "breadcrumb-nav": {
+      link: {
+        current: {
+          color: DesignToken;
+        };
+      };
+    };
+    "icon-only-button": {
+      "padding-block-end": DesignToken;
+      "padding-block-start": DesignToken;
+      "padding-inline-end": DesignToken;
+      "padding-inline-start": DesignToken;
+    };
+    card: {
+      "background-color": DesignToken;
+      "border-color": DesignToken;
+      "border-radius": DesignToken;
+      "border-width": DesignToken;
+      color: DesignToken;
+      "column-gap": DesignToken;
+      "inline-size": DesignToken;
+      icon: {
+        color: DesignToken;
+        size: DesignToken;
+      };
+      link: {
+        color: DesignToken;
+        "text-decoration": DesignToken;
+        active: {
+          "text-decoration": DesignToken;
+        };
+        hover: {
+          "text-decoration": DesignToken;
+        };
+        focus: {
+          "text-decoration": DesignToken;
+        };
+      };
+      metadata: {
+        color: DesignToken;
+      };
+      "padding-block-end": DesignToken;
+      "padding-block-start": DesignToken;
+      "padding-inline-end": DesignToken;
+      "padding-inline-start": DesignToken;
+      "row-gap": DesignToken;
+      active: {
+        "background-color": DesignToken;
+        "text-decoration": DesignToken;
+      };
+      hover: {
+        "background-color": DesignToken;
+        "text-decoration": DesignToken;
+      };
+      focus: {
+        "background-color": DesignToken;
+        "text-decoration": DesignToken;
+      };
+      "full-bleed": {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+        opacity: DesignToken;
+      };
+      heading: {
+        color: DesignToken;
+        "padding-block-start": DesignToken;
+        "font-size": DesignToken;
+        "font-weight": DesignToken;
+      };
+      horizontal: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+        "max-block-size": DesignToken;
+        "padding-block-end": DesignToken;
+        "padding-block-start": DesignToken;
+        "padding-inline-end": DesignToken;
+        "padding-inline-start": DesignToken;
+        heading: {
+          "inline-size": DesignToken;
+        };
+      };
+    };
+    "card-as-link": {
+      "background-color": DesignToken;
+      "border-color": DesignToken;
+      "border-radius": DesignToken;
+      "border-width": DesignToken;
+      color: DesignToken;
+      "column-gap": DesignToken;
+      icon: {
+        color: DesignToken;
+        size: DesignToken;
+      };
+      link: {
+        color: DesignToken;
+        "text-decoration": DesignToken;
+        active: {
+          "text-decoration": DesignToken;
+        };
+        hover: {
+          "text-decoration": DesignToken;
+        };
+        focus: {
+          "text-decoration": DesignToken;
+        };
+      };
+      metadata: {
+        color: DesignToken;
+      };
+      "padding-block-end": DesignToken;
+      "padding-block-start": DesignToken;
+      "padding-inline-end": DesignToken;
+      "padding-inline-start": DesignToken;
+      "row-gap": DesignToken;
+      active: {
+        "background-color": DesignToken;
+        "text-decoration": DesignToken;
+      };
+      hover: {
+        "background-color": DesignToken;
+        "text-decoration": DesignToken;
+      };
+      focus: {
+        "background-color": DesignToken;
+        "text-decoration": DesignToken;
+      };
+      "full-bleed": {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+        opacity: DesignToken;
+      };
+      heading: {
+        color: DesignToken;
+        "padding-block-start": DesignToken;
+        "font-size": DesignToken;
+        "font-weight": DesignToken;
+      };
+      horizontal: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+        "max-block-size": DesignToken;
+        "padding-block-end": DesignToken;
+        "padding-block-start": DesignToken;
+        "padding-inline-end": DesignToken;
+        "padding-inline-start": DesignToken;
+        heading: {
+          "inline-size": DesignToken;
+        };
+      };
+    };
+    "checkbox-group": {
+      "padding-block-end": DesignToken;
+      "padding-block-start": DesignToken;
+      "row-gap": DesignToken;
+    };
+    "code-input": {
+      size: DesignToken;
+    };
+    "code-input-group": {
+      "column-gap": DesignToken;
+    };
+    "data-badge-button": {
+      "column-gap": DesignToken;
+      hover: {
+        "background-color": DesignToken;
+        color: DesignToken;
+      };
+    };
+    "data-summary": {
+      "font-family": DesignToken;
+      "item-value": {
+        "font-weight": DesignToken;
+        row: {
+          "padding-block-end": DesignToken;
+          "padding-block-start": DesignToken;
+          "padding-inline-end": DesignToken;
+          "padding-inline-start": DesignToken;
+        };
+        "padding-block-end": DesignToken;
+        "padding-block-start": DesignToken;
+        "padding-inline-end": DesignToken;
+        "padding-inline-start": DesignToken;
+      };
+      "item-key": {
+        "font-weight": DesignToken;
+        row: {
+          "padding-block-end": DesignToken;
+          "padding-block-start": DesignToken;
+          "padding-inline-end": DesignToken;
+          "padding-inline-start": DesignToken;
+        };
+        "padding-block-end": DesignToken;
+        "padding-block-start": DesignToken;
+        "padding-inline-end": DesignToken;
+        "padding-inline-start": DesignToken;
+      };
+      item: {
+        "border-width": DesignToken;
+        "border-color": DesignToken;
+        "border-block-end-style": DesignToken;
+        color: DesignToken;
+      };
+      "font-size": DesignToken;
+      "line-height": DesignToken;
+      "item-action": {
+        row: {
+          "padding-block-end": DesignToken;
+          "padding-block-start": DesignToken;
+          "padding-inline-end": DesignToken;
+          "padding-inline-start": DesignToken;
+        };
+        "padding-block-end": DesignToken;
+        "padding-block-start": DesignToken;
+        "padding-inline-end": DesignToken;
+        "padding-inline-start": DesignToken;
+      };
+    };
+    "dot-badge": {
+      "border-radius": DesignToken;
+      color: DesignToken;
+      size: DesignToken;
+    };
+    "expandable-checkbox-group": {
+      details: {
+        "margin-block-start": DesignToken;
+      };
+      summary: {
+        color: DesignToken;
+        "margin-block-end": DesignToken;
+        "margin-block-start": DesignToken;
+        "text-decoration": DesignToken;
+      };
+    };
+    "file-input": {
+      "column-gap": DesignToken;
+      "row-gap": DesignToken;
+      feedback: {
+        color: DesignToken;
+        "font-size": DesignToken;
+      };
+    };
+    file: {
+      "border-style": DesignToken;
+      "border-color": DesignToken;
+      "border-width": DesignToken;
+      "border-radius": DesignToken;
+      "padding-inline-start": DesignToken;
+      "padding-inline-end": DesignToken;
+      "padding-block-start": DesignToken;
+      "padding-block-end": DesignToken;
+      "column-gap": DesignToken;
+      error: {
+        "border-color": DesignToken;
+      };
+      subtitle: {
+        color: DesignToken;
+      };
+    };
+    "form-field-checkbox-option": {
+      "column-gap": DesignToken;
+      "margin-block-end": DesignToken;
+    };
+    "form-field-radio-option": {
+      "column-gap": DesignToken;
+      "font-weight": DesignToken;
+      "row-gap": DesignToken;
+      label: {
+        "margin-block-end": DesignToken;
+      };
+      input: {
+        margin: {
+          "block-start": DesignToken;
+        };
+      };
+    };
+    hero: {
+      heading: {
+        "font-weight": DesignToken;
+        "line-height": DesignToken;
+        "font-size": DesignToken;
+        "font-family": DesignToken;
+      };
+      "sub-heading": {
+        "font-weight": DesignToken;
+        "line-height": DesignToken;
+        "font-size": DesignToken;
+        "font-family": DesignToken;
+      };
+      message: {
+        "background-color": DesignToken;
+        color: DesignToken;
+        "row-gap": DesignToken;
+        "padding-block-end": DesignToken;
+        "padding-inline-end": DesignToken;
+        "padding-inline-start": DesignToken;
+        "padding-block-start": DesignToken;
+        "border-radius": DesignToken;
+        "inline-size": DesignToken;
+      };
+      "border-radius": DesignToken;
+      "inline-size": DesignToken;
+    };
+    "link-list-card": {
+      "background-color": DesignToken;
+      "padding-block-start": DesignToken;
+      "padding-block-end": DesignToken;
+      "row-gap": DesignToken;
+      "padding-inline-start": DesignToken;
+      "padding-inline-end": DesignToken;
+    };
+    link: {
+      "column-gap": DesignToken;
+    };
+    logo: {
+      image: {
+        "background-color": DesignToken;
+        "inline-size": DesignToken;
+        "block-size": DesignToken;
+        color: DesignToken;
+      };
+      title: {
+        "font-weight": DesignToken;
+        "line-height": DesignToken;
+        "font-size": DesignToken;
+        "padding-block-start": DesignToken;
+      };
+      subtitle: {
+        "font-weight": DesignToken;
+        "line-height": DesignToken;
+        "font-size": DesignToken;
+      };
+      "column-gap": DesignToken;
+      "font-family": DesignToken;
+      color: DesignToken;
+    };
+    "message-list": {
+      item: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        "border-width": DesignToken;
+        color: DesignToken;
+        "column-gap": DesignToken;
+        icon: {
+          size: DesignToken;
+          color: DesignToken;
+        };
+        "min-height": DesignToken;
+        "padding-block": DesignToken;
+        "padding-inline": DesignToken;
+        content: {
+          "font-size": DesignToken;
+          "column-gap": DesignToken;
+          "row-gap": DesignToken;
+        };
+        label: {
+          "font-family": DesignToken;
+          "font-size": DesignToken;
+          "font-weight": DesignToken;
+          "line-height": DesignToken;
+        };
+        heading: {
+          color: DesignToken;
+        };
+      };
+    };
+    "nav-bar": {
+      "border-block-end-width": DesignToken;
+      "max-inline-size": DesignToken;
+      "padding-inline": DesignToken;
+      container: {
+        "inline-size": DesignToken;
+      };
+      content: {
+        "column-gap": DesignToken;
+      };
+      icon: {
+        color: DesignToken;
+        active: {
+          color: DesignToken;
+        };
+        size: DesignToken;
+      };
+      link: {
+        active: {
+          "background-color": DesignToken;
+          color: DesignToken;
+        };
+        "background-color": DesignToken;
+        color: DesignToken;
+        focus: {
+          "background-color": DesignToken;
+          color: DesignToken;
+        };
+        hover: {
+          "background-color": DesignToken;
+          color: DesignToken;
+        };
+        "padding-block-end": DesignToken;
+        "padding-block-start": DesignToken;
+        "padding-inline-end": DesignToken;
+        "padding-inline-start": DesignToken;
+        "column-gap": DesignToken;
+        "font-size": DesignToken;
+      };
+      heading: {
+        "font-weight": DesignToken;
+      };
+      "background-color": DesignToken;
+      color: DesignToken;
+      "border-color": DesignToken;
+    };
+    "navigation-list": {
+      icon: {
+        "background-color": DesignToken;
+        "border-radius": DesignToken;
+        color: DesignToken;
+      };
+      item: {
+        icon: {
+          "padding-inline": DesignToken;
+          "padding-block": DesignToken;
+          size: DesignToken;
+        };
+        content: {
+          "font-size": DesignToken;
+          "column-gap": DesignToken;
+          "row-gap": DesignToken;
+        };
+        label: {
+          "font-family": DesignToken;
+          "font-size": DesignToken;
+          "font-weight": DesignToken;
+          "line-height": DesignToken;
+        };
+        active: {
+          "background-color": DesignToken;
+        };
+        hover: {
+          "background-color": DesignToken;
+        };
+        focus: {
+          "background-color": DesignToken;
+        };
+        "background-color": DesignToken;
+        color: DesignToken;
+        "border-width": DesignToken;
+        "border-color": DesignToken;
+        heading: {
+          color: DesignToken;
+        };
+        "column-gap": DesignToken;
+        "min-height": DesignToken;
+        "padding-block": DesignToken;
+        "padding-inline": DesignToken;
+      };
+    };
+    "radio-group": {
+      "padding-block-end": DesignToken;
+      "padding-block-start": DesignToken;
+      "row-gap": DesignToken;
+    };
+    sidenav: {
+      display: DesignToken;
+      link: {
+        "line-height": DesignToken;
+        icon: {
+          size: DesignToken;
+          "margin-inline": DesignToken;
+        };
+        "font-size": DesignToken;
+        "font-family": DesignToken;
+        "font-weight": DesignToken;
+        current: {
+          "font-weight": DesignToken;
+          color: DesignToken;
+        };
+        color: DesignToken;
+        active: {
+          color: DesignToken;
+          "text-decoration": DesignToken;
+        };
+        focus: {
+          "border-radius": DesignToken;
+          "border-width": DesignToken;
+          "border-style": DesignToken;
+          "border-color": DesignToken;
+          "background-color": DesignToken;
+          color: DesignToken;
+          "text-decoration": DesignToken;
+        };
+        hover: {
+          color: DesignToken;
+          "text-decoration": DesignToken;
+        };
+        "padding-block-start": DesignToken;
+        "padding-block-end": DesignToken;
+        "text-decoration": DesignToken;
+        "column-gap": DesignToken;
+      };
+    };
+    "sub-nav-bar": {
+      "background-color": DesignToken;
+      "column-gap": DesignToken;
+      "column-width": DesignToken;
+      "padding-block-end": DesignToken;
+      "padding-block-start": DesignToken;
+      "inline-size": DesignToken;
+      content: {
+        "padding-inline-end": DesignToken;
+        "padding-inline-start": DesignToken;
+        "max-inline-size": DesignToken;
+        list: {
+          "row-gap": DesignToken;
+        };
+      };
+    };
+    textarea: {
+      focus: {
+        "border-width": DesignToken;
+      };
+    };
+    toggletip: {
+      color: DesignToken;
+      "background-color": DesignToken;
+      "border-color": DesignToken;
+      "border-radius": DesignToken;
+      "border-width": DesignToken;
+      icon: {
+        size: DesignToken;
+      };
+      size: DesignToken;
+      active: {
+        color: DesignToken;
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+      };
+      hover: {
+        color: DesignToken;
+        "background-color": DesignToken;
+      };
+      focus: {
+        color: DesignToken;
+        "background-color": DesignToken;
+      };
+    };
+    "unordered-list": {
+      nested: {
+        "margin-inline-start": DesignToken;
+      };
+    };
+    "page-footer": {
+      "column-gap": DesignToken;
+      "column-width": DesignToken;
+      column: {
+        title: {
+          "margin-block-end": DesignToken;
+        };
+      };
+      content: {
+        "max-inline-size": DesignToken;
+        "padding-inline-start": DesignToken;
+        "padding-inline-end": DesignToken;
+        "column-gap": DesignToken;
+      };
+      "border-block-start-width": DesignToken;
+      "border-block-start-color": DesignToken;
+      "border-block-start-style": DesignToken;
+      outlined: {
+        "background-color": DesignToken;
+        color: DesignToken;
+        "border-color": DesignToken;
+      };
+      "padding-block-start": DesignToken;
+      "padding-block-end": DesignToken;
+      "padding-inline-start": DesignToken;
+      "padding-inline-end": DesignToken;
+      flex: {
+        direction: DesignToken;
+      };
+    };
+    text: {
+      "font-weight": {
+        "extra-bold": DesignToken;
+        bold: DesignToken;
+        "semi-bold": DesignToken;
+        regular: DesignToken;
+        light: DesignToken;
+        thin: DesignToken;
+        default: DesignToken;
+        strong: DesignToken;
+      };
+      "font-family": {
+        sans: DesignToken;
+        serif: DesignToken;
+        default: DesignToken;
+      };
+      "font-size": {
+        max: {
+          md: DesignToken;
+          lg: DesignToken;
+          xl: DesignToken;
+          "2xl": DesignToken;
+          "3xl": DesignToken;
+        };
+        min: {
+          md: DesignToken;
+          lg: DesignToken;
+          xl: DesignToken;
+          "2xl": DesignToken;
+          "3xl": DesignToken;
+        };
+        md: DesignToken;
+        lg: DesignToken;
+        xl: DesignToken;
+        "2xl": DesignToken;
+        "3xl": DesignToken;
+      };
+      "line-height": {
+        sm: DesignToken;
+        md: DesignToken;
+      };
+    };
+  };
+  todo: {
+    accordion: {
+      button: {
+        "font-family": DesignToken;
+        "font-size": DesignToken;
+        "font-weight": DesignToken;
+        "line-height": DesignToken;
+      };
+    };
+    checkbox: {
+      indeterminate: {
+        active: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          "border-width": DesignToken;
+          color: DesignToken;
+        };
+        disabled: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+        };
+        hover: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          "border-width": DesignToken;
+          color: DesignToken;
+        };
+        "focus-visible": {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          "border-width": DesignToken;
+          color: DesignToken;
+        };
+      };
+      checked: {
+        active: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          "border-width": DesignToken;
+          color: DesignToken;
+        };
+        disabled: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+        };
+        hover: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          "border-width": DesignToken;
+          color: DesignToken;
+        };
+        "focus-visible": {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          "border-width": DesignToken;
+          color: DesignToken;
+        };
+      };
+    };
+    figure: {
+      "row-gap": DesignToken;
+    };
+    "form-field-error-message": {
+      "column-gap": DesignToken;
+      icon: {
+        size: DesignToken;
+      };
+    };
+    "form-field-option-label": {
+      color: DesignToken;
+      "font-size": DesignToken;
+      "line-height": DesignToken;
+      "font-family": DesignToken;
+      "font-weight": DesignToken;
+      disabled: {
+        color: DesignToken;
+      };
+    };
+    "link-list": {
+      link: {
+        hover: {
+          "text-decoration": DesignToken;
+        };
+      };
+    };
+    "radio-button": {
+      checked: {
+        disabled: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+        };
+      };
+    };
+    textbox: {
+      hover: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+    };
+    textarea: {
+      hover: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+    };
+  };
+  utrecht: {
+    accordion: {
+      "margin-block-end": DesignToken;
+      "margin-block-start": DesignToken;
+      "row-gap": DesignToken;
+      panel: {
+        "border-color": DesignToken;
+        "border-width": DesignToken;
+        "padding-block-end": DesignToken;
+        "padding-block-start": DesignToken;
+        "padding-inline-end": DesignToken;
+        "padding-inline-start": DesignToken;
+      };
+      button: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        "border-radius": DesignToken;
+        "border-width": DesignToken;
+        color: DesignToken;
+        gap: DesignToken;
+        "padding-block-end": DesignToken;
+        "padding-block-start": DesignToken;
+        "padding-inline-end": DesignToken;
+        "padding-inline-start": DesignToken;
+        icon: {
+          size: DesignToken;
+        };
+        active: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+        };
+        hover: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+        };
+        "focus-visible": {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          "border-width": DesignToken;
+          color: DesignToken;
+        };
+      };
+      section: {
+        "border-color": DesignToken;
+        hover: {
+          "border-color": DesignToken;
+        };
+        "border-width": DesignToken;
+        "margin-block-end": DesignToken;
+        "margin-block-start": DesignToken;
+      };
+    };
+    "action-group": {
+      "background-color": DesignToken;
+      "column-gap": DesignToken;
+      "padding-block-end": DesignToken;
+      "padding-block-start": DesignToken;
+      "row-gap": DesignToken;
+    };
+    alert: {
+      "background-color": DesignToken;
+      "border-color": DesignToken;
+      "border-radius": DesignToken;
+      "border-width": DesignToken;
+      color: DesignToken;
+      "column-gap": DesignToken;
+      "margin-block-end": DesignToken;
+      "margin-block-start": DesignToken;
+      "padding-block-end": DesignToken;
+      "padding-block-start": DesignToken;
+      "padding-inline-end": DesignToken;
+      "padding-inline-start": DesignToken;
+      content: {
+        "row-gap": DesignToken;
+      };
+      error: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+      info: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+      message: {
+        "row-gap": DesignToken;
+      };
+      ok: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+      warning: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+      icon: {
+        color: DesignToken;
+        "inset-block-start": DesignToken;
+        size: DesignToken;
+        error: {
+          color: DesignToken;
+        };
+        info: {
+          color: DesignToken;
+        };
+        ok: {
+          color: DesignToken;
+        };
+        warning: {
+          color: DesignToken;
+        };
+      };
+    };
+    article: {
+      "max-inline-size": DesignToken;
+    };
+    backdrop: {
+      "background-color": DesignToken;
+      color: DesignToken;
+      opacity: DesignToken;
+      "fade-in": {
+        "animation-duration": DesignToken;
+      };
+      "reduced-transparency": {
+        opacity: DesignToken;
+      };
+    };
+    blockquote: {
+      "background-color": DesignToken;
+      "border-inline-start-width": DesignToken;
+      "border-color": DesignToken;
+      "border-radius": DesignToken;
+      "border-width": DesignToken;
+      color: DesignToken;
+      "font-size": DesignToken;
+      "font-family": DesignToken;
+      "padding-block-end": DesignToken;
+      "padding-block-start": DesignToken;
+      "padding-inline-end": DesignToken;
+      "padding-inline-start": DesignToken;
+      "row-gap": DesignToken;
+      attribution: {
+        color: DesignToken;
+        "font-size": DesignToken;
+      };
+      content: {
+        color: DesignToken;
+        "font-size": DesignToken;
+      };
+    };
+    "breadcrumb-nav": {
+      "font-family": DesignToken;
+      "font-size": DesignToken;
+      "line-height": DesignToken;
+      "min-block-size": DesignToken;
+      item: {
+        "padding-block-end": DesignToken;
+        "padding-block-start": DesignToken;
+        "padding-inline-end": DesignToken;
+        "padding-inline-start": DesignToken;
+        first: {
+          "padding-inline-start": DesignToken;
+        };
+      };
+      separator: {
+        color: DesignToken;
+        icon: {
+          size: DesignToken;
+        };
+      };
+      link: {
+        color: DesignToken;
+        "text-decoration": DesignToken;
+        current: {
+          "font-weight": DesignToken;
+        };
+        active: {
+          color: DesignToken;
+          "text-decoration": DesignToken;
+        };
+        disabled: {
+          color: DesignToken;
+        };
+        focus: {
+          "background-color": DesignToken;
+          color: DesignToken;
+          "text-decoration": DesignToken;
+        };
+        hover: {
+          "text-decoration": DesignToken;
+          color: DesignToken;
+        };
+        icon: {
+          size: DesignToken;
+        };
+      };
+    };
+    button: {
+      "background-color": DesignToken;
+      "border-color": DesignToken;
+      "border-radius": DesignToken;
+      "border-width": DesignToken;
+      color: DesignToken;
+      "column-gap": DesignToken;
+      "font-family": DesignToken;
+      "font-size": DesignToken;
+      "font-weight": DesignToken;
+      "line-height": DesignToken;
+      "min-block-size": DesignToken;
+      "min-inline-size": DesignToken;
+      "padding-block-end": DesignToken;
+      "padding-block-start": DesignToken;
+      "padding-inline-end": DesignToken;
+      "padding-inline-start": DesignToken;
+      icon: {
+        size: DesignToken;
+      };
+      pressed: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+      active: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+      disabled: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+      hover: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+      focus: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+      "primary-action": {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+        "font-size": DesignToken;
+        "font-weight": DesignToken;
+        "line-height": DesignToken;
+        disabled: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+        };
+        hover: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+        };
+        focus: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+        };
+        pressed: {
+          "border-color": DesignToken;
+          color: DesignToken;
+          "background-color": DesignToken;
+        };
+        active: {
+          "border-color": DesignToken;
+          color: DesignToken;
+          "background-color": DesignToken;
+        };
+      };
+      "secondary-action": {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+        "font-size": DesignToken;
+        "font-weight": DesignToken;
+        "line-height": DesignToken;
+        disabled: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+        };
+        hover: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+        };
+        focus: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+        };
+        pressed: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+        };
+        active: {
+          "background-color": DesignToken;
+          color: DesignToken;
+          "border-color": DesignToken;
+        };
+      };
+      subtle: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+        "font-size": DesignToken;
+        "font-weight": DesignToken;
+        "line-height": DesignToken;
+        disabled: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+        };
+        hover: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+        };
+        focus: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+        };
+        pressed: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+        };
+        active: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+        };
+      };
+    };
+    "button-group": {
+      "margin-block-end": DesignToken;
+      "margin-block-start": DesignToken;
+    };
+    checkbox: {
+      "background-color": DesignToken;
+      "border-color": DesignToken;
+      "border-radius": DesignToken;
+      "border-width": DesignToken;
+      size: DesignToken;
+      icon: {
+        size: DesignToken;
+      };
+      invalid: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        "border-width": DesignToken;
+      };
+      active: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        "border-width": DesignToken;
+      };
+      disabled: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+      };
+      hover: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        "border-width": DesignToken;
+      };
+      focus: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        "border-width": DesignToken;
+      };
+      indeterminate: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        "border-width": DesignToken;
+        color: DesignToken;
+        active: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+          "border-width": DesignToken;
+        };
+        disabled: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+        };
+        hover: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+          "border-width": DesignToken;
+        };
+        focus: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+          "border-width": DesignToken;
+        };
+      };
+      checked: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        "border-width": DesignToken;
+        color: DesignToken;
+        active: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+          "border-width": DesignToken;
+        };
+        disabled: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+        };
+        hover: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+          "border-width": DesignToken;
+        };
+        focus: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          color: DesignToken;
+          "border-width": DesignToken;
+        };
+      };
+    };
+    "column-layout": {
+      "column-rule-color": DesignToken;
+      "column-rule-width": DesignToken;
+      "column-width": DesignToken;
+      gap: DesignToken;
+    };
+    "data-badge": {
+      "background-color": DesignToken;
+      "border-radius": DesignToken;
+      color: DesignToken;
+      "padding-block": DesignToken;
+      "padding-inline": DesignToken;
+    };
+    drawer: {
+      "max-inline-size": DesignToken;
+      "z-index": DesignToken;
+      "background-color": DesignToken;
+      "border-color": DesignToken;
+      "border-width": DesignToken;
+      color: DesignToken;
+      "max-block-size": DesignToken;
+      "padding-block-start": DesignToken;
+      "padding-block-end": DesignToken;
+      "padding-inline-start": DesignToken;
+      "padding-inline-end": DesignToken;
+    };
+    "form-fieldset": {
+      legend: {
+        color: DesignToken;
+        "font-family": DesignToken;
+        "font-size": DesignToken;
+        "font-weight": DesignToken;
+        "line-height": DesignToken;
+        disabled: {
+          color: DesignToken;
+        };
+      };
+      section: {
+        "background-color": DesignToken;
+        color: DesignToken;
+      };
+      invalid: {
+        "border-inline-start": {
+          color: DesignToken;
+        };
+        "padding-inline-start": DesignToken;
+        "border-inline-start-width": DesignToken;
+      };
+    };
+    figure: {
+      caption: {
+        color: DesignToken;
+        "font-size": DesignToken;
+        "line-height": DesignToken;
+      };
+    };
+    "form-field": {
+      label: {
+        "margin-block-end": DesignToken;
+      };
+      "margin-block-end": DesignToken;
+      "margin-block-start": DesignToken;
+      invalid: {
+        "border-inline-start-color": DesignToken;
+        "border-inline-start-width": DesignToken;
+        "padding-inline-start": DesignToken;
+      };
+    };
+    "form-field-description": {
+      color: DesignToken;
+      "font-family": DesignToken;
+      "font-size": DesignToken;
+      "line-height": DesignToken;
+      "margin-block-end": DesignToken;
+      "margin-block-start": DesignToken;
+    };
+    "form-field-error-message": {
+      "background-color": DesignToken;
+      color: DesignToken;
+      "font-family": DesignToken;
+      "font-size": DesignToken;
+      "font-weight": DesignToken;
+      "line-height": DesignToken;
+      "margin-block-end": DesignToken;
+      "margin-block-start": DesignToken;
+      "padding-block-end": DesignToken;
+      "padding-block-start": DesignToken;
+      "padding-inline-end": DesignToken;
+      "padding-inline-start": DesignToken;
+    };
+    icon: {
+      baseline: {
+        "inset-block-start": DesignToken;
+      };
+      color: DesignToken;
+      size: DesignToken;
+      "inset-block-start": DesignToken;
+    };
+    "link-list": {
+      "margin-block-end": DesignToken;
+      "margin-block-start": DesignToken;
+      "row-gap": DesignToken;
+      icon: {
+        "inset-block-start": DesignToken;
+        size: DesignToken;
+      };
+      link: {
+        "column-gap": DesignToken;
+        "text-decoration": DesignToken;
+        "font-weight": DesignToken;
+      };
+    };
+    link: {
+      color: DesignToken;
+      "text-decoration-color": DesignToken;
+      "column-gap": DesignToken;
+      "text-decoration": DesignToken;
+      "text-decoration-thickness": DesignToken;
+      "text-underline-offset": DesignToken;
+      icon: {
+        size: DesignToken;
+      };
+      active: {
+        color: DesignToken;
+      };
+      hover: {
+        color: DesignToken;
+        "text-decoration": DesignToken;
+        "text-decoration-thickness": DesignToken;
+      };
+      focus: {
+        "background-color": DesignToken;
+        color: DesignToken;
+      };
+      "focus-visible": {
+        "text-decoration": DesignToken;
+        "text-decoration-thickness": DesignToken;
+      };
+      visited: {
+        color: DesignToken;
+      };
+    };
+    "number-badge": {
+      "background-color": DesignToken;
+      "border-color": DesignToken;
+      "border-radius": DesignToken;
+      "border-width": DesignToken;
+      color: DesignToken;
+      "font-family": DesignToken;
+      "font-size": DesignToken;
+      "font-weight": DesignToken;
+      "min-block-size": DesignToken;
+      "min-inline-size": DesignToken;
+      "padding-block": DesignToken;
+      "padding-inline": DesignToken;
+    };
+    "ordered-list": {
+      "font-size": DesignToken;
+      "line-height": DesignToken;
+      "margin-block-end": DesignToken;
+      "margin-block-start": DesignToken;
+      "padding-inline-start": DesignToken;
+      item: {
+        "margin-block-end": DesignToken;
+        "margin-block-start": DesignToken;
+        "padding-inline-start": DesignToken;
+      };
+    };
+    "pre-heading": {
+      color: DesignToken;
+      "font-family": DesignToken;
+      "font-weight": DesignToken;
+      "line-height": DesignToken;
+      "font-size": DesignToken;
+    };
+    "radio-button": {
+      "background-color": DesignToken;
+      "border-color": DesignToken;
+      color: DesignToken;
+      "border-width": DesignToken;
+      size: DesignToken;
+      icon: {
+        size: DesignToken;
+      };
+      invalid: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+        "border-width": DesignToken;
+      };
+      active: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+        "border-width": DesignToken;
+      };
+      disabled: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+      hover: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+        "border-width": DesignToken;
+      };
+      focus: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+        "border-width": DesignToken;
+      };
+      checked: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        "border-width": DesignToken;
+        color: DesignToken;
+        active: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          "border-width": DesignToken;
+          color: DesignToken;
+        };
+        hover: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          "border-width": DesignToken;
+          color: DesignToken;
+        };
+        focus: {
+          "background-color": DesignToken;
+          "border-color": DesignToken;
+          "border-width": DesignToken;
+          color: DesignToken;
+        };
+      };
+    };
+    select: {
+      "background-color": DesignToken;
+      "border-block-end-width": DesignToken;
+      "border-color": DesignToken;
+      "border-radius": DesignToken;
+      "border-width": DesignToken;
+      color: DesignToken;
+      "font-family": DesignToken;
+      "font-size": DesignToken;
+      "font-weight": DesignToken;
+      icon: {
+        size: DesignToken;
+      };
+      "image-background-position": DesignToken;
+      "line-height": DesignToken;
+      "max-inline-size": DesignToken;
+      "min-block-size": DesignToken;
+      "padding-block-end": DesignToken;
+      "padding-block-start": DesignToken;
+      "padding-inline-end": DesignToken;
+      "padding-inline-start": DesignToken;
+      invalid: {
+        "background-color": DesignToken;
+        "border-block-end-width": DesignToken;
+        "border-color": DesignToken;
+        "border-width": DesignToken;
+      };
+      disabled: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+      hover: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+      focus: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        "border-width": DesignToken;
+        color: DesignToken;
+      };
+    };
+    separator: {
+      "block-size": DesignToken;
+      color: DesignToken;
+      "margin-block-end": DesignToken;
+      "margin-block-start": DesignToken;
+    };
+    "status-badge": {
+      "font-size": DesignToken;
+      "line-height": DesignToken;
+      "font-weight": DesignToken;
+      "border-width": DesignToken;
+      "font-family": DesignToken;
+      "border-radius": DesignToken;
+      "padding-inline": DesignToken;
+      "padding-block": DesignToken;
+      informative: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+      positive: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+      negative: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+      warning: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+      "background-color": DesignToken;
+      "border-color": DesignToken;
+      color: DesignToken;
+    };
+    table: {
+      "header-cell": {
+        "line-height": DesignToken;
+        color: DesignToken;
+        "font-family": DesignToken;
+        "font-weight": DesignToken;
+        "font-size": DesignToken;
+      };
+      caption: {
+        "line-height": DesignToken;
+        "margin-block-end": DesignToken;
+        color: DesignToken;
+        "font-family": DesignToken;
+        "font-weight": DesignToken;
+        "font-size": DesignToken;
+      };
+      cell: {
+        "padding-block-end": DesignToken;
+        "padding-block-start": DesignToken;
+        "padding-inline-end": DesignToken;
+        "padding-inline-start": DesignToken;
+        "line-height": DesignToken;
+      };
+      "data-cell": {
+        color: DesignToken;
+        "font-family": DesignToken;
+        "font-weight": DesignToken;
+        "line-height": DesignToken;
+        "font-size": DesignToken;
+      };
+      header: {
+        "border-block-end-width": DesignToken;
+        "border-block-end-color": DesignToken;
+        "background-color": DesignToken;
+      };
+      footer: {
+        "border-block-end-width": DesignToken;
+        "border-block-end-color": DesignToken;
+        "background-color": DesignToken;
+      };
+      row: {
+        "border-block-end-width": DesignToken;
+        "border-block-end-color": DesignToken;
+        "background-color": DesignToken;
+      };
+      "footer-cell": {
+        "font-weight": DesignToken;
+        "font-size": DesignToken;
+        color: DesignToken;
+        "font-family": DesignToken;
+        "line-height": DesignToken;
+      };
+      container: {
+        "box-inline-end-shadow": {
+          x: DesignToken;
+          y: DesignToken;
+          blur: DesignToken;
+          spread: DesignToken;
+          color: DesignToken;
+        };
+        "box-inline-start-shadow": {
+          x: DesignToken;
+          y: DesignToken;
+          blur: DesignToken;
+          spread: DesignToken;
+          color: DesignToken;
+        };
+      };
+      "font-size": DesignToken;
+    };
+    textbox: {
+      "background-color": DesignToken;
+      "border-block-end-width": DesignToken;
+      "border-color": DesignToken;
+      "border-radius": DesignToken;
+      "border-width": DesignToken;
+      color: DesignToken;
+      "font-family": DesignToken;
+      "font-size": DesignToken;
+      "font-weight": DesignToken;
+      "line-height": DesignToken;
+      "max-inline-size": DesignToken;
+      "min-block-size": DesignToken;
+      "padding-block-end": DesignToken;
+      "padding-block-start": DesignToken;
+      "padding-inline-end": DesignToken;
+      "padding-inline-start": DesignToken;
+      invalid: {
+        "background-color": DesignToken;
+        "border-block-end-width": DesignToken;
+        "border-color": DesignToken;
+        "border-width": DesignToken;
+        color: DesignToken;
+      };
+      placeholder: {
+        color: DesignToken;
+      };
+      "read-only": {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+      disabled: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+      focus: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+        "border-width": DesignToken;
+      };
+      hover: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        "border-width": DesignToken;
+        color: DesignToken;
+      };
+    };
+    textarea: {
+      "background-color": DesignToken;
+      "border-block-end-width": DesignToken;
+      "border-color": DesignToken;
+      "border-radius": DesignToken;
+      "border-width": DesignToken;
+      color: DesignToken;
+      "font-family": DesignToken;
+      "font-size": DesignToken;
+      "font-weight": DesignToken;
+      "line-height": DesignToken;
+      "max-inline-size": DesignToken;
+      "min-block-size": DesignToken;
+      "padding-block-end": DesignToken;
+      "padding-block-start": DesignToken;
+      "padding-inline-end": DesignToken;
+      "padding-inline-start": DesignToken;
+      invalid: {
+        "background-color": DesignToken;
+        "border-block-end-width": DesignToken;
+        "border-color": DesignToken;
+        "border-width": DesignToken;
+        color: DesignToken;
+      };
+      placeholder: {
+        color: DesignToken;
+      };
+      "read-only": {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+      disabled: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+      focus: {
+        "background-color": DesignToken;
+        "border-color": DesignToken;
+        color: DesignToken;
+      };
+    };
+    "unordered-list": {
+      "font-size": DesignToken;
+      "line-height": DesignToken;
+      "margin-block-end": DesignToken;
+      "margin-block-start": DesignToken;
+      "padding-inline-start": DesignToken;
+      item: {
+        "margin-block-end": DesignToken;
+        "margin-block-start": DesignToken;
+        "padding-inline-start": DesignToken;
+      };
+      marker: {
+        color: DesignToken;
+      };
+    };
+    document: {
+      "background-color": DesignToken;
+      color: DesignToken;
+      "font-family": DesignToken;
+      "font-size": DesignToken;
+      "line-height": DesignToken;
+      "font-weight": DesignToken;
+    };
+    "rich-text": {
+      stranger: {
+        "margin-block-end": DesignToken;
+      };
+      acquaintance: {
+        "margin-block-end": DesignToken;
+      };
+      friend: {
+        "margin-block-end": DesignToken;
+      };
+      "best-friend": {
+        "margin-block-end": DesignToken;
+      };
+      confidant: {
+        "margin-block-end": DesignToken;
+      };
+    };
+    "form-label": {
+      color: DesignToken;
+      "font-size": DesignToken;
+      "font-weight": DesignToken;
+      checkbox: {
+        color: DesignToken;
+        "font-weight": DesignToken;
+      };
+      radio: {
+        color: DesignToken;
+        "font-weight": DesignToken;
+      };
+      checked: {
+        "font-weight": DesignToken;
+      };
+      disabled: {
+        color: DesignToken;
+      };
+    };
+    "page-footer": {
+      "background-color": DesignToken;
+      color: DesignToken;
+      "padding-block-start": DesignToken;
+      "padding-block-end": DesignToken;
+      "padding-inline-start": DesignToken;
+      "padding-inline-end": DesignToken;
+    };
+    focus: {
+      "outline-color": DesignToken;
+      inverse: {
+        "outline-color": DesignToken;
+      };
+      "outline-offset": DesignToken;
+      "outline-width": DesignToken;
+      "outline-style": DesignToken;
+    };
+    "pointer-target": {
+      "min-size": DesignToken;
+    };
+    action: {
+      activate: {
+        cursor: DesignToken;
+      };
+      busy: {
+        cursor: DesignToken;
+      };
+      disabled: {
+        cursor: DesignToken;
+      };
+      inert: {
+        cursor: DesignToken;
+      };
+      navigate: {
+        cursor: DesignToken;
+      };
+      submit: {
+        cursor: DesignToken;
+      };
+    };
+  };
+  nl: {
+    link: {
+      color: DesignToken;
+      "text-decoration-color": DesignToken;
+      "text-decoration-line": DesignToken;
+      "text-decoration-thickness": DesignToken;
+      "text-underline-offset": DesignToken;
+      current: {
+        cursor: DesignToken;
+      };
+      active: {
+        color: DesignToken;
+      };
+      disabled: {
+        color: DesignToken;
+        cursor: DesignToken;
+      };
+      hover: {
+        "text-decoration-line": DesignToken;
+        "text-decoration-thickness": DesignToken;
+        color: DesignToken;
+      };
+    };
+    "number-badge": {
+      "background-color": DesignToken;
+      "border-color": DesignToken;
+      "border-radius": DesignToken;
+      "border-width": DesignToken;
+      color: DesignToken;
+      "font-family": DesignToken;
+      "font-size": DesignToken;
+      "font-weight": DesignToken;
+      "min-block-size": DesignToken;
+      "min-inline-size": DesignToken;
+      "padding-block": DesignToken;
+      "padding-inline": DesignToken;
+    };
+    paragraph: {
+      color: DesignToken;
+      "font-family": DesignToken;
+      "font-size": DesignToken;
+      "font-weight": DesignToken;
+      "line-height": DesignToken;
+      "margin-block-end": DesignToken;
+      "margin-block-start": DesignToken;
+      lead: {
+        "font-size": DesignToken;
+        "font-weight": DesignToken;
+        "line-height": DesignToken;
+        "margin-block-end": DesignToken;
+        "margin-block-start": DesignToken;
+      };
+    };
+    "skip-link": {
+      "background-color": DesignToken;
+      color: DesignToken;
+      "padding-block": DesignToken;
+      "padding-inline": DesignToken;
+      "min-block-size": DesignToken;
+      "min-inline-size": DesignToken;
+      "text-decoration-thickness": DesignToken;
+      "text-underline-offset": DesignToken;
+      "line-height": DesignToken;
+      "font-size": DesignToken;
+    };
+    heading: {
+      "level-1": {
+        color: DesignToken;
+        "font-family": DesignToken;
+        "font-size": DesignToken;
+        "font-weight": DesignToken;
+        "line-height": DesignToken;
+        "margin-block-end": DesignToken;
+        "margin-block-start": DesignToken;
+      };
+      "level-2": {
+        color: DesignToken;
+        "font-family": DesignToken;
+        "font-size": DesignToken;
+        "font-weight": DesignToken;
+        "line-height": DesignToken;
+        "margin-block-end": DesignToken;
+        "margin-block-start": DesignToken;
+      };
+      "level-3": {
+        color: DesignToken;
+        "font-family": DesignToken;
+        "font-size": DesignToken;
+        "font-weight": DesignToken;
+        "line-height": DesignToken;
+        "margin-block-end": DesignToken;
+        "margin-block-start": DesignToken;
+      };
+      "level-4": {
+        color: DesignToken;
+        "font-family": DesignToken;
+        "font-size": DesignToken;
+        "font-weight": DesignToken;
+        "line-height": DesignToken;
+        "margin-block-end": DesignToken;
+        "margin-block-start": DesignToken;
+      };
+      "level-5": {
+        color: DesignToken;
+        "font-family": DesignToken;
+        "font-size": DesignToken;
+        "font-weight": DesignToken;
+        "line-height": DesignToken;
+        "margin-block-end": DesignToken;
+        "margin-block-start": DesignToken;
+      };
+      "level-6": {
+        color: DesignToken;
+        "font-family": DesignToken;
+        "font-size": DesignToken;
+        "font-weight": DesignToken;
+        "line-height": DesignToken;
+        "margin-block-end": DesignToken;
+        "margin-block-start": DesignToken;
+      };
+    };
+  };
+  figma: {
+    link: {
+      icon: {
+        size: DesignToken;
+      };
+    };
+  };
+  ams: {
+    pagination: {
+      "font-family": DesignToken;
+      "font-size": DesignToken;
+      "font-weight": DesignToken;
+      "line-height": DesignToken;
+      link: {
+        color: DesignToken;
+        gap: DesignToken;
+        "outline-offset": DesignToken;
+        "padding-inline": DesignToken;
+        current: {
+          "font-weight": DesignToken;
+        };
+        hover: {
+          color: DesignToken;
+          "text-decoration-line": DesignToken;
+        };
+      };
+    };
+  };
+  basis: {
+    color: {
+      default: {
+        "bg-document": DesignToken;
+        "color-document": DesignToken;
+        "color-subtle": DesignToken;
+        "border-subtle": DesignToken;
+        "border-default": DesignToken;
+        "bg-subtle": DesignToken;
+      };
+      highlight: {
+        "bg-default": DesignToken;
+      };
+    };
+    text: {
+      "font-family": {
+        default: DesignToken;
+      };
+      "font-weight": {
+        default: DesignToken;
+        bold: DesignToken;
+      };
+      "font-size": {
+        md: DesignToken;
+      };
+      "line-height": {
+        md: DesignToken;
+      };
+    };
+    heading: {
+      color: DesignToken;
+      "font-family": DesignToken;
+      "font-weight": DesignToken;
+    };
+    "border-width": {
+      sm: DesignToken;
+    };
+    "box-shadow": {
+      md: DesignToken;
+    };
+    focus: {
+      "outline-color": DesignToken;
+      inverse: {
+        "outline-color": DesignToken;
+      };
+      "outline-width": DesignToken;
+    };
+  };
+};