@sebgroup/green-core 3.1.0 → 3.5.0

package/generated/mcp/tokens.json

@@ -0,0 +1,1282 @@
+{
+  "generatedAt": "2026-04-10T07:14:04.518Z",
+  "categories": {
+    "space": {
+      "description": "Spacing tokens for padding, margin, gap, and other spacing",
+      "cssVariablePrefix": "--gds-sys-space-",
+      "styleExpressionProperties": [
+        "padding",
+        "margin",
+        "gap",
+        "row-gap",
+        "column-gap",
+        "inset",
+        "top",
+        "right",
+        "bottom",
+        "left"
+      ],
+      "styleExpressionUsage": "Use the short token name directly on layout components. Example: padding=\"m\" resolves to var(--gds-sys-space-m). Supports CSS shorthand: padding=\"xs m\" sets vertical xs, horizontal m. Also supports negative values with a leading dash: margin=\"-s\".",
+      "tokens": [
+        {
+          "name": "0",
+          "cssVariable": "--gds-sys-space-0",
+          "value": "0"
+        },
+        {
+          "name": "5xs",
+          "cssVariable": "--gds-sys-space-5xs",
+          "value": "1px"
+        },
+        {
+          "name": "4xs",
+          "cssVariable": "--gds-sys-space-4xs",
+          "value": "2px"
+        },
+        {
+          "name": "3xs",
+          "cssVariable": "--gds-sys-space-3xs",
+          "value": "4px"
+        },
+        {
+          "name": "2xs",
+          "cssVariable": "--gds-sys-space-2xs",
+          "value": "6px"
+        },
+        {
+          "name": "xs",
+          "cssVariable": "--gds-sys-space-xs",
+          "value": "8px"
+        },
+        {
+          "name": "s",
+          "cssVariable": "--gds-sys-space-s",
+          "value": "12px"
+        },
+        {
+          "name": "m",
+          "cssVariable": "--gds-sys-space-m",
+          "value": "16px"
+        },
+        {
+          "name": "l",
+          "cssVariable": "--gds-sys-space-l",
+          "value": "20px"
+        },
+        {
+          "name": "xl",
+          "cssVariable": "--gds-sys-space-xl",
+          "value": "24px"
+        },
+        {
+          "name": "2xl",
+          "cssVariable": "--gds-sys-space-2xl",
+          "value": "32px"
+        },
+        {
+          "name": "3xl",
+          "cssVariable": "--gds-sys-space-3xl",
+          "value": "40px"
+        },
+        {
+          "name": "4xl",
+          "cssVariable": "--gds-sys-space-4xl",
+          "value": "48px"
+        },
+        {
+          "name": "5xl",
+          "cssVariable": "--gds-sys-space-5xl",
+          "value": "64px"
+        },
+        {
+          "name": "6xl",
+          "cssVariable": "--gds-sys-space-6xl",
+          "value": "80px"
+        },
+        {
+          "name": "7xl",
+          "cssVariable": "--gds-sys-space-7xl",
+          "value": "96px"
+        },
+        {
+          "name": "8xl",
+          "cssVariable": "--gds-sys-space-8xl",
+          "value": "112px"
+        },
+        {
+          "name": "9xl",
+          "cssVariable": "--gds-sys-space-9xl",
+          "value": "120px"
+        },
+        {
+          "name": "max",
+          "cssVariable": "--gds-sys-space-max",
+          "value": "999px"
+        }
+      ]
+    },
+    "radius": {
+      "description": "Border radius tokens",
+      "cssVariablePrefix": "--gds-sys-radius-",
+      "styleExpressionProperties": [
+        "border-radius"
+      ],
+      "styleExpressionUsage": "Use the short token name: border-radius=\"m\" resolves to var(--gds-sys-radius-m).",
+      "tokens": [
+        {
+          "name": "0",
+          "cssVariable": "--gds-sys-radius-0",
+          "value": "0"
+        },
+        {
+          "name": "none",
+          "cssVariable": "--gds-sys-radius-none",
+          "value": "0"
+        },
+        {
+          "name": "5xs",
+          "cssVariable": "--gds-sys-radius-5xs",
+          "value": "1px"
+        },
+        {
+          "name": "4xs",
+          "cssVariable": "--gds-sys-radius-4xs",
+          "value": "2px"
+        },
+        {
+          "name": "3xs",
+          "cssVariable": "--gds-sys-radius-3xs",
+          "value": "4px"
+        },
+        {
+          "name": "2xs",
+          "cssVariable": "--gds-sys-radius-2xs",
+          "value": "6px"
+        },
+        {
+          "name": "xs",
+          "cssVariable": "--gds-sys-radius-xs",
+          "value": "8px"
+        },
+        {
+          "name": "s",
+          "cssVariable": "--gds-sys-radius-s",
+          "value": "12px"
+        },
+        {
+          "name": "m",
+          "cssVariable": "--gds-sys-radius-m",
+          "value": "16px"
+        },
+        {
+          "name": "l",
+          "cssVariable": "--gds-sys-radius-l",
+          "value": "20px"
+        },
+        {
+          "name": "xl",
+          "cssVariable": "--gds-sys-radius-xl",
+          "value": "24px"
+        },
+        {
+          "name": "2xl",
+          "cssVariable": "--gds-sys-radius-2xl",
+          "value": "32px"
+        },
+        {
+          "name": "3xl",
+          "cssVariable": "--gds-sys-radius-3xl",
+          "value": "40px"
+        },
+        {
+          "name": "4xl",
+          "cssVariable": "--gds-sys-radius-4xl",
+          "value": "48px"
+        },
+        {
+          "name": "5xl",
+          "cssVariable": "--gds-sys-radius-5xl",
+          "value": "64px"
+        },
+        {
+          "name": "max",
+          "cssVariable": "--gds-sys-radius-max",
+          "value": "999px"
+        }
+      ]
+    },
+    "typography": {
+      "description": "Typography tokens for text sizing and font weight. Use <gds-text> component with font and font-weight style expression properties.",
+      "cssVariablePrefix": "--gds-sys-text-",
+      "styleExpressionProperties": [
+        "font",
+        "font-weight"
+      ],
+      "styleExpressionUsage": "On <gds-text>, use font=\"heading-m\" which resolves to var(--gds-sys-text-heading-m). For weights, use font-weight=\"medium\" which resolves to var(--gds-sys-text-weight-medium). Do NOT use HTML heading elements (h1-h6); always use <gds-text> with the font property.",
+      "meta": {
+        "display": {
+          "tone": "Expressive",
+          "description": "Used for large, expressive text that highlights key messages and creates strong visual impact. Typically used in hero sections, landing pages, and promotional content. Display text is perfect when you need to raise the volume."
+        },
+        "heading": {
+          "tone": "Structural",
+          "description": "Used for structuring content and establishing a clear hierarchy across a page. Suitable for page titles, section headings, and titles in cards or content sections."
+        },
+        "preamble": {
+          "tone": "Introductory",
+          "description": "Used for introductory text placed below a display or a heading to provide context or summarize the content that follows. The preamble is generally larger than body text but smaller than headings."
+        },
+        "detail": {
+          "tone": "Functional",
+          "description": "Used for small UI text such as labels, metadata, helper text, and component text. Can also be used as an overline above headings or display text."
+        },
+        "body": {
+          "tone": "Readable",
+          "description": "Used for running text and longer passages of content such as paragraphs, articles, and descriptions."
+        }
+      },
+      "tokens": [
+        {
+          "name": "display-l",
+          "cssVariable": "--gds-sys-text-display-l",
+          "fontSize": "64px",
+          "lineHeight": "72px",
+          "fontWeight": "book (450)",
+          "pairings": [
+            "preamble-xl",
+            "body-m",
+            "body-l"
+          ]
+        },
+        {
+          "name": "display-m",
+          "cssVariable": "--gds-sys-text-display-m",
+          "fontSize": "48px",
+          "lineHeight": "56px",
+          "fontWeight": "book (450)",
+          "pairings": [
+            "preamble-l",
+            "body-m",
+            "body-l"
+          ]
+        },
+        {
+          "name": "display-s",
+          "cssVariable": "--gds-sys-text-display-s",
+          "fontSize": "36px",
+          "lineHeight": "44px",
+          "fontWeight": "book (450)",
+          "pairings": [
+            "preamble-m",
+            "body-m",
+            "body-l"
+          ]
+        },
+        {
+          "name": "heading-xl",
+          "cssVariable": "--gds-sys-text-heading-xl",
+          "fontSize": "32px",
+          "lineHeight": "38px",
+          "fontWeight": "book (450)",
+          "pairings": [
+            "preamble-m",
+            "body-m",
+            "body-l"
+          ]
+        },
+        {
+          "name": "heading-l",
+          "cssVariable": "--gds-sys-text-heading-l",
+          "fontSize": "28px",
+          "lineHeight": "34px",
+          "fontWeight": "book (450)",
+          "pairings": [
+            "preamble-s",
+            "body-m",
+            "body-l"
+          ]
+        },
+        {
+          "name": "heading-m",
+          "cssVariable": "--gds-sys-text-heading-m",
+          "fontSize": "24px",
+          "lineHeight": "30px",
+          "fontWeight": "book (450)",
+          "pairings": [
+            "preamble-s",
+            "body-m",
+            "body-l"
+          ]
+        },
+        {
+          "name": "heading-s",
+          "cssVariable": "--gds-sys-text-heading-s",
+          "fontSize": "20px",
+          "lineHeight": "26px",
+          "fontWeight": "book (450)",
+          "pairings": [
+            "preamble-s",
+            "body-l",
+            "body-m",
+            "body-s"
+          ]
+        },
+        {
+          "name": "heading-xs",
+          "cssVariable": "--gds-sys-text-heading-xs",
+          "fontSize": "16px",
+          "lineHeight": "22px",
+          "fontWeight": "book (450)",
+          "pairings": [
+            "body-m",
+            "body-s"
+          ]
+        },
+        {
+          "name": "preamble-xl",
+          "cssVariable": "--gds-sys-text-preamble-xl",
+          "fontSize": "28px",
+          "lineHeight": "36px",
+          "fontWeight": "book (450)"
+        },
+        {
+          "name": "preamble-l",
+          "cssVariable": "--gds-sys-text-preamble-l",
+          "fontSize": "24px",
+          "lineHeight": "32px",
+          "fontWeight": "book (450)"
+        },
+        {
+          "name": "preamble-m",
+          "cssVariable": "--gds-sys-text-preamble-m",
+          "fontSize": "20px",
+          "lineHeight": "28px",
+          "fontWeight": "book (450)"
+        },
+        {
+          "name": "preamble-s",
+          "cssVariable": "--gds-sys-text-preamble-s",
+          "fontSize": "18px",
+          "lineHeight": "26px",
+          "fontWeight": "book (450)"
+        },
+        {
+          "name": "detail-l-regular",
+          "cssVariable": "--gds-sys-text-detail-l-regular",
+          "fontSize": "18px",
+          "lineHeight": "22px",
+          "fontWeight": "regular (400)"
+        },
+        {
+          "name": "detail-l-book",
+          "cssVariable": "--gds-sys-text-detail-l-book",
+          "fontSize": "18px",
+          "lineHeight": "22px",
+          "fontWeight": "book (450)"
+        },
+        {
+          "name": "detail-l-medium",
+          "cssVariable": "--gds-sys-text-detail-l-medium",
+          "fontSize": "18px",
+          "lineHeight": "22px",
+          "fontWeight": "medium (500)"
+        },
+        {
+          "name": "detail-m-regular",
+          "cssVariable": "--gds-sys-text-detail-m-regular",
+          "fontSize": "16px",
+          "lineHeight": "20px",
+          "fontWeight": "regular (400)"
+        },
+        {
+          "name": "detail-m-book",
+          "cssVariable": "--gds-sys-text-detail-m-book",
+          "fontSize": "16px",
+          "lineHeight": "20px",
+          "fontWeight": "book (450)"
+        },
+        {
+          "name": "detail-m-medium",
+          "cssVariable": "--gds-sys-text-detail-m-medium",
+          "fontSize": "16px",
+          "lineHeight": "20px",
+          "fontWeight": "medium (500)"
+        },
+        {
+          "name": "detail-s-regular",
+          "cssVariable": "--gds-sys-text-detail-s-regular",
+          "fontSize": "14px",
+          "lineHeight": "18px",
+          "fontWeight": "regular (400)"
+        },
+        {
+          "name": "detail-s-book",
+          "cssVariable": "--gds-sys-text-detail-s-book",
+          "fontSize": "14px",
+          "lineHeight": "18px",
+          "fontWeight": "book (450)"
+        },
+        {
+          "name": "detail-s-medium",
+          "cssVariable": "--gds-sys-text-detail-s-medium",
+          "fontSize": "14px",
+          "lineHeight": "18px",
+          "fontWeight": "medium (500)"
+        },
+        {
+          "name": "detail-xs-regular",
+          "cssVariable": "--gds-sys-text-detail-xs-regular",
+          "fontSize": "12px",
+          "lineHeight": "16px",
+          "fontWeight": "regular (400)"
+        },
+        {
+          "name": "detail-xs-book",
+          "cssVariable": "--gds-sys-text-detail-xs-book",
+          "fontSize": "12px",
+          "lineHeight": "16px",
+          "fontWeight": "book (450)"
+        },
+        {
+          "name": "detail-xs-medium",
+          "cssVariable": "--gds-sys-text-detail-xs-medium",
+          "fontSize": "12px",
+          "lineHeight": "16px",
+          "fontWeight": "medium (500)"
+        },
+        {
+          "name": "detail-2xs-regular",
+          "cssVariable": "--gds-sys-text-detail-2xs-regular",
+          "fontSize": "10px",
+          "lineHeight": "14px",
+          "fontWeight": "regular (400)"
+        },
+        {
+          "name": "detail-2xs-book",
+          "cssVariable": "--gds-sys-text-detail-2xs-book",
+          "fontSize": "10px",
+          "lineHeight": "14px",
+          "fontWeight": "book (450)"
+        },
+        {
+          "name": "detail-2xs-medium",
+          "cssVariable": "--gds-sys-text-detail-2xs-medium",
+          "fontSize": "10px",
+          "lineHeight": "14px",
+          "fontWeight": "medium (500)"
+        },
+        {
+          "name": "body-l-regular",
+          "cssVariable": "--gds-sys-text-body-l-regular",
+          "fontSize": "18px",
+          "lineHeight": "26px",
+          "fontWeight": "regular (400)"
+        },
+        {
+          "name": "body-l-regular-italic",
+          "cssVariable": "--gds-sys-text-body-l-regular-italic",
+          "fontSize": "18px",
+          "lineHeight": "26px",
+          "fontWeight": "regular (400)"
+        },
+        {
+          "name": "body-l-book",
+          "cssVariable": "--gds-sys-text-body-l-book",
+          "fontSize": "18px",
+          "lineHeight": "26px",
+          "fontWeight": "book (450)"
+        },
+        {
+          "name": "body-l-medium",
+          "cssVariable": "--gds-sys-text-body-l-medium",
+          "fontSize": "18px",
+          "lineHeight": "26px",
+          "fontWeight": "medium (500)"
+        },
+        {
+          "name": "body-m-regular",
+          "cssVariable": "--gds-sys-text-body-m-regular",
+          "fontSize": "16px",
+          "lineHeight": "24px",
+          "fontWeight": "regular (400)"
+        },
+        {
+          "name": "body-m-regular-italic",
+          "cssVariable": "--gds-sys-text-body-m-regular-italic",
+          "fontSize": "16px",
+          "lineHeight": "24px",
+          "fontWeight": "regular (400)"
+        },
+        {
+          "name": "body-m-book",
+          "cssVariable": "--gds-sys-text-body-m-book",
+          "fontSize": "16px",
+          "lineHeight": "24px",
+          "fontWeight": "book (450)"
+        },
+        {
+          "name": "body-m-medium",
+          "cssVariable": "--gds-sys-text-body-m-medium",
+          "fontSize": "16px",
+          "lineHeight": "24px",
+          "fontWeight": "medium (500)"
+        },
+        {
+          "name": "body-s-regular",
+          "cssVariable": "--gds-sys-text-body-s-regular",
+          "fontSize": "14px",
+          "lineHeight": "22px",
+          "fontWeight": "regular (400)"
+        },
+        {
+          "name": "body-s-regular-italic",
+          "cssVariable": "--gds-sys-text-body-s-regular-italic",
+          "fontSize": "14px",
+          "lineHeight": "22px",
+          "fontWeight": "regular (400)"
+        },
+        {
+          "name": "body-s-book",
+          "cssVariable": "--gds-sys-text-body-s-book",
+          "fontSize": "14px",
+          "lineHeight": "22px",
+          "fontWeight": "book (450)"
+        },
+        {
+          "name": "body-s-medium",
+          "cssVariable": "--gds-sys-text-body-s-medium",
+          "fontSize": "14px",
+          "lineHeight": "22px",
+          "fontWeight": "medium (500)"
+        },
+        {
+          "name": "light",
+          "cssVariable": "--gds-sys-text-weight-light",
+          "value": "300"
+        },
+        {
+          "name": "regular",
+          "cssVariable": "--gds-sys-text-weight-regular",
+          "value": "400"
+        },
+        {
+          "name": "book",
+          "cssVariable": "--gds-sys-text-weight-book",
+          "value": "450"
+        },
+        {
+          "name": "medium",
+          "cssVariable": "--gds-sys-text-weight-medium",
+          "value": "500"
+        },
+        {
+          "name": "bold",
+          "cssVariable": "--gds-sys-text-weight-bold",
+          "value": "700"
+        }
+      ]
+    },
+    "color": {
+      "description": "Color tokens organized by usage context. When using style expression properties, the color context (background, content, border) is inferred from the property name — you only need the short color name.",
+      "subcategories": {
+        "background": {
+          "description": "Background color tokens organized in three levels (L1, L2, L3). The active level is controlled by the `level` attribute on layout components. Colors adapt automatically to light/dark mode.",
+          "cssVariablePrefix": "--gds-sys-color-l{level}-",
+          "styleExpressionProperties": [
+            "background"
+          ],
+          "styleExpressionUsage": "Use background=\"positive-01\" on layout components. The component's current `level` attribute determines which level the color is resolved from. The full CSS variable includes the level: var(--gds-sys-color-l3-positive-01). You only need the short name in style expressions.",
+          "levels": {
+            "L1": {
+              "tokens": [
+                {
+                  "name": "neutral-01",
+                  "cssVariable": "--gds-sys-color-l1-neutral-01"
+                },
+                {
+                  "name": "neutral-02",
+                  "cssVariable": "--gds-sys-color-l1-neutral-02"
+                },
+                {
+                  "name": "brand-01",
+                  "cssVariable": "--gds-sys-color-l1-brand-01"
+                },
+                {
+                  "name": "neutral-03",
+                  "cssVariable": "--gds-sys-color-l1-neutral-03"
+                }
+              ]
+            },
+            "L2": {
+              "tokens": [
+                {
+                  "name": "neutral-01",
+                  "cssVariable": "--gds-sys-color-l2-neutral-01"
+                },
+                {
+                  "name": "neutral-01-2",
+                  "cssVariable": "--gds-sys-color-l2-neutral-01-2"
+                },
+                {
+                  "name": "neutral-02",
+                  "cssVariable": "--gds-sys-color-l2-neutral-02"
+                },
+                {
+                  "name": "neutral-02-2",
+                  "cssVariable": "--gds-sys-color-l2-neutral-02-2"
+                },
+                {
+                  "name": "neutral-03",
+                  "cssVariable": "--gds-sys-color-l2-neutral-03"
+                },
+                {
+                  "name": "brand-01",
+                  "cssVariable": "--gds-sys-color-l2-brand-01"
+                },
+                {
+                  "name": "brand-02",
+                  "cssVariable": "--gds-sys-color-l2-brand-02"
+                },
+                {
+                  "name": "positive-01",
+                  "cssVariable": "--gds-sys-color-l2-positive-01"
+                },
+                {
+                  "name": "negative-01",
+                  "cssVariable": "--gds-sys-color-l2-negative-01"
+                },
+                {
+                  "name": "warning-01",
+                  "cssVariable": "--gds-sys-color-l2-warning-01"
+                },
+                {
+                  "name": "information-01",
+                  "cssVariable": "--gds-sys-color-l2-information-01"
+                },
+                {
+                  "name": "notice-01",
+                  "cssVariable": "--gds-sys-color-l2-notice-01"
+                }
+              ]
+            },
+            "L3": {
+              "tokens": [
+                {
+                  "name": "neutral-01",
+                  "cssVariable": "--gds-sys-color-l3-neutral-01"
+                },
+                {
+                  "name": "neutral-01-2",
+                  "cssVariable": "--gds-sys-color-l3-neutral-01-2"
+                },
+                {
+                  "name": "neutral-02",
+                  "cssVariable": "--gds-sys-color-l3-neutral-02"
+                },
+                {
+                  "name": "neutral-02-2",
+                  "cssVariable": "--gds-sys-color-l3-neutral-02-2"
+                },
+                {
+                  "name": "neutral-03",
+                  "cssVariable": "--gds-sys-color-l3-neutral-03"
+                },
+                {
+                  "name": "neutral-03-2",
+                  "cssVariable": "--gds-sys-color-l3-neutral-03-2"
+                },
+                {
+                  "name": "brand-01",
+                  "cssVariable": "--gds-sys-color-l3-brand-01"
+                },
+                {
+                  "name": "brand-02",
+                  "cssVariable": "--gds-sys-color-l3-brand-02"
+                },
+                {
+                  "name": "brand-02-2",
+                  "cssVariable": "--gds-sys-color-l3-brand-02-2"
+                },
+                {
+                  "name": "positive-01",
+                  "cssVariable": "--gds-sys-color-l3-positive-01"
+                },
+                {
+                  "name": "positive-02",
+                  "cssVariable": "--gds-sys-color-l3-positive-02"
+                },
+                {
+                  "name": "positive-03",
+                  "cssVariable": "--gds-sys-color-l3-positive-03"
+                },
+                {
+                  "name": "negative-01",
+                  "cssVariable": "--gds-sys-color-l3-negative-01"
+                },
+                {
+                  "name": "negative-02",
+                  "cssVariable": "--gds-sys-color-l3-negative-02"
+                },
+                {
+                  "name": "negative-03",
+                  "cssVariable": "--gds-sys-color-l3-negative-03"
+                },
+                {
+                  "name": "notice-01",
+                  "cssVariable": "--gds-sys-color-l3-notice-01"
+                },
+                {
+                  "name": "notice-02",
+                  "cssVariable": "--gds-sys-color-l3-notice-02"
+                },
+                {
+                  "name": "notice-03",
+                  "cssVariable": "--gds-sys-color-l3-notice-03"
+                },
+                {
+                  "name": "warning-01",
+                  "cssVariable": "--gds-sys-color-l3-warning-01"
+                },
+                {
+                  "name": "warning-02",
+                  "cssVariable": "--gds-sys-color-l3-warning-02"
+                },
+                {
+                  "name": "warning-03",
+                  "cssVariable": "--gds-sys-color-l3-warning-03"
+                },
+                {
+                  "name": "information-01",
+                  "cssVariable": "--gds-sys-color-l3-information-01"
+                },
+                {
+                  "name": "information-02",
+                  "cssVariable": "--gds-sys-color-l3-information-02"
+                },
+                {
+                  "name": "information-03",
+                  "cssVariable": "--gds-sys-color-l3-information-03"
+                },
+                {
+                  "name": "disabled-01",
+                  "cssVariable": "--gds-sys-color-l3-disabled-01"
+                },
+                {
+                  "name": "disabled-02",
+                  "cssVariable": "--gds-sys-color-l3-disabled-02"
+                },
+                {
+                  "name": "disabled-03",
+                  "cssVariable": "--gds-sys-color-l3-disabled-03"
+                }
+              ]
+            }
+          }
+        },
+        "content": {
+          "description": "Content (text/foreground) color tokens. Colors adapt automatically to light/dark mode.",
+          "cssVariablePrefix": "--gds-sys-color-content-",
+          "styleExpressionProperties": [
+            "color"
+          ],
+          "styleExpressionUsage": "Use color=\"neutral-01\" on layout components. Resolves to var(--gds-sys-color-content-neutral-01). You only need the short name in style expressions.",
+          "tokens": [
+            {
+              "name": "neutral-01",
+              "cssVariable": "--gds-sys-color-content-neutral-01"
+            },
+            {
+              "name": "neutral-02",
+              "cssVariable": "--gds-sys-color-content-neutral-02"
+            },
+            {
+              "name": "neutral-03",
+              "cssVariable": "--gds-sys-color-content-neutral-03"
+            },
+            {
+              "name": "neutral-04",
+              "cssVariable": "--gds-sys-color-content-neutral-04"
+            },
+            {
+              "name": "neutral-05",
+              "cssVariable": "--gds-sys-color-content-neutral-05"
+            },
+            {
+              "name": "brand-01",
+              "cssVariable": "--gds-sys-color-content-brand-01"
+            },
+            {
+              "name": "brand-02",
+              "cssVariable": "--gds-sys-color-content-brand-02"
+            },
+            {
+              "name": "positive-01",
+              "cssVariable": "--gds-sys-color-content-positive-01"
+            },
+            {
+              "name": "positive-02",
+              "cssVariable": "--gds-sys-color-content-positive-02"
+            },
+            {
+              "name": "positive-03",
+              "cssVariable": "--gds-sys-color-content-positive-03"
+            },
+            {
+              "name": "negative-01",
+              "cssVariable": "--gds-sys-color-content-negative-01"
+            },
+            {
+              "name": "negative-02",
+              "cssVariable": "--gds-sys-color-content-negative-02"
+            },
+            {
+              "name": "warning-01",
+              "cssVariable": "--gds-sys-color-content-warning-01"
+            },
+            {
+              "name": "warning-02",
+              "cssVariable": "--gds-sys-color-content-warning-02"
+            },
+            {
+              "name": "notice-01",
+              "cssVariable": "--gds-sys-color-content-notice-01"
+            },
+            {
+              "name": "notice-02",
+              "cssVariable": "--gds-sys-color-content-notice-02"
+            },
+            {
+              "name": "disabled-01",
+              "cssVariable": "--gds-sys-color-content-disabled-01"
+            },
+            {
+              "name": "disabled-02",
+              "cssVariable": "--gds-sys-color-content-disabled-02"
+            }
+          ]
+        },
+        "border": {
+          "description": "Border color tokens. Colors adapt automatically to light/dark mode.",
+          "cssVariablePrefix": "--gds-sys-color-border-",
+          "styleExpressionProperties": [
+            "border-color"
+          ],
+          "styleExpressionUsage": "Border colors are used within the border style expression shorthand on layout components. Example: border=\"4xs 0 0 0 / neutral-01\" sets a top border with color neutral-01. Resolves to var(--gds-sys-color-border-neutral-01).",
+          "tokens": [
+            {
+              "name": "neutral-01",
+              "cssVariable": "--gds-sys-color-border-neutral-01"
+            },
+            {
+              "name": "neutral-02",
+              "cssVariable": "--gds-sys-color-border-neutral-02"
+            },
+            {
+              "name": "neutral-03",
+              "cssVariable": "--gds-sys-color-border-neutral-03"
+            },
+            {
+              "name": "neutral-04",
+              "cssVariable": "--gds-sys-color-border-neutral-04"
+            },
+            {
+              "name": "neutral-05",
+              "cssVariable": "--gds-sys-color-border-neutral-05"
+            },
+            {
+              "name": "information-01",
+              "cssVariable": "--gds-sys-color-border-information-01"
+            },
+            {
+              "name": "information-02",
+              "cssVariable": "--gds-sys-color-border-information-02"
+            },
+            {
+              "name": "positive-01",
+              "cssVariable": "--gds-sys-color-border-positive-01"
+            },
+            {
+              "name": "positive-02",
+              "cssVariable": "--gds-sys-color-border-positive-02"
+            },
+            {
+              "name": "negative-01",
+              "cssVariable": "--gds-sys-color-border-negative-01"
+            },
+            {
+              "name": "negative-02",
+              "cssVariable": "--gds-sys-color-border-negative-02"
+            },
+            {
+              "name": "warning-01",
+              "cssVariable": "--gds-sys-color-border-warning-01"
+            },
+            {
+              "name": "warning-02",
+              "cssVariable": "--gds-sys-color-border-warning-02"
+            },
+            {
+              "name": "notice-01",
+              "cssVariable": "--gds-sys-color-border-notice-01"
+            },
+            {
+              "name": "notice-02",
+              "cssVariable": "--gds-sys-color-border-notice-02"
+            }
+          ]
+        },
+        "state": {
+          "description": "State color tokens for interactive states (hover, focus, active). These are typically used internally by components and rarely set directly via style expressions.",
+          "cssVariablePrefix": "--gds-sys-color-state-",
+          "styleExpressionProperties": [],
+          "styleExpressionUsage": "State tokens are primarily used internally by components. Access them directly as CSS variables when needed: var(--gds-sys-color-state-neutral-03).",
+          "tokens": [
+            {
+              "name": "neutral-01",
+              "cssVariable": "--gds-sys-color-state-neutral-01"
+            },
+            {
+              "name": "neutral-02",
+              "cssVariable": "--gds-sys-color-state-neutral-02"
+            },
+            {
+              "name": "neutral-03",
+              "cssVariable": "--gds-sys-color-state-neutral-03"
+            },
+            {
+              "name": "neutral-04",
+              "cssVariable": "--gds-sys-color-state-neutral-04"
+            },
+            {
+              "name": "neutral-05",
+              "cssVariable": "--gds-sys-color-state-neutral-05"
+            },
+            {
+              "name": "neutral-06",
+              "cssVariable": "--gds-sys-color-state-neutral-06"
+            },
+            {
+              "name": "brand-01",
+              "cssVariable": "--gds-sys-color-state-brand-01"
+            },
+            {
+              "name": "brand-02",
+              "cssVariable": "--gds-sys-color-state-brand-02"
+            },
+            {
+              "name": "brand-03",
+              "cssVariable": "--gds-sys-color-state-brand-03"
+            },
+            {
+              "name": "brand-04",
+              "cssVariable": "--gds-sys-color-state-brand-04"
+            },
+            {
+              "name": "brand-05",
+              "cssVariable": "--gds-sys-color-state-brand-05"
+            },
+            {
+              "name": "brand-06",
+              "cssVariable": "--gds-sys-color-state-brand-06"
+            },
+            {
+              "name": "brand-02-02",
+              "cssVariable": "--gds-sys-color-state-brand-02-02"
+            },
+            {
+              "name": "brand-02-03",
+              "cssVariable": "--gds-sys-color-state-brand-02-03"
+            },
+            {
+              "name": "positive-01",
+              "cssVariable": "--gds-sys-color-state-positive-01"
+            },
+            {
+              "name": "positive-02",
+              "cssVariable": "--gds-sys-color-state-positive-02"
+            },
+            {
+              "name": "positive-03",
+              "cssVariable": "--gds-sys-color-state-positive-03"
+            },
+            {
+              "name": "positive-04",
+              "cssVariable": "--gds-sys-color-state-positive-04"
+            },
+            {
+              "name": "positive-05",
+              "cssVariable": "--gds-sys-color-state-positive-05"
+            },
+            {
+              "name": "positive-06",
+              "cssVariable": "--gds-sys-color-state-positive-06"
+            },
+            {
+              "name": "negative-01",
+              "cssVariable": "--gds-sys-color-state-negative-01"
+            },
+            {
+              "name": "negative-02",
+              "cssVariable": "--gds-sys-color-state-negative-02"
+            },
+            {
+              "name": "negative-03",
+              "cssVariable": "--gds-sys-color-state-negative-03"
+            },
+            {
+              "name": "negative-04",
+              "cssVariable": "--gds-sys-color-state-negative-04"
+            },
+            {
+              "name": "negative-05",
+              "cssVariable": "--gds-sys-color-state-negative-05"
+            },
+            {
+              "name": "negative-06",
+              "cssVariable": "--gds-sys-color-state-negative-06"
+            },
+            {
+              "name": "notice-01",
+              "cssVariable": "--gds-sys-color-state-notice-01"
+            },
+            {
+              "name": "notice-02",
+              "cssVariable": "--gds-sys-color-state-notice-02"
+            },
+            {
+              "name": "notice-03",
+              "cssVariable": "--gds-sys-color-state-notice-03"
+            },
+            {
+              "name": "notice-04",
+              "cssVariable": "--gds-sys-color-state-notice-04"
+            },
+            {
+              "name": "notice-05",
+              "cssVariable": "--gds-sys-color-state-notice-05"
+            },
+            {
+              "name": "notice-06",
+              "cssVariable": "--gds-sys-color-state-notice-06"
+            },
+            {
+              "name": "warning-01",
+              "cssVariable": "--gds-sys-color-state-warning-01"
+            },
+            {
+              "name": "warning-02",
+              "cssVariable": "--gds-sys-color-state-warning-02"
+            },
+            {
+              "name": "warning-03",
+              "cssVariable": "--gds-sys-color-state-warning-03"
+            },
+            {
+              "name": "warning-04",
+              "cssVariable": "--gds-sys-color-state-warning-04"
+            },
+            {
+              "name": "warning-05",
+              "cssVariable": "--gds-sys-color-state-warning-05"
+            },
+            {
+              "name": "warning-06",
+              "cssVariable": "--gds-sys-color-state-warning-06"
+            }
+          ]
+        }
+      }
+    },
+    "viewport": {
+      "description": "Viewport breakpoint tokens used in responsive style expressions",
+      "cssVariablePrefix": "--gds-sys-viewport-",
+      "styleExpressionProperties": [],
+      "styleExpressionUsage": "Viewport tokens define breakpoints for responsive style expressions. Use them in media query syntax: padding=\"xs; m {l}\" means padding is xs by default and l at the m breakpoint (1024px). Named breakpoints: 2xs (320px), xs (425px), s (768px), m (1024px), l (1280px), xl (1440px), 2xl (2560px).",
+      "tokens": [
+        {
+          "name": "0",
+          "cssVariable": "--gds-sys-viewport-0",
+          "value": "0"
+        },
+        {
+          "name": "2xs",
+          "cssVariable": "--gds-sys-viewport-2xs",
+          "value": "320px"
+        },
+        {
+          "name": "xs",
+          "cssVariable": "--gds-sys-viewport-xs",
+          "value": "425px"
+        },
+        {
+          "name": "s",
+          "cssVariable": "--gds-sys-viewport-s",
+          "value": "768px"
+        },
+        {
+          "name": "m",
+          "cssVariable": "--gds-sys-viewport-m",
+          "value": "1024px"
+        },
+        {
+          "name": "l",
+          "cssVariable": "--gds-sys-viewport-l",
+          "value": "1280px"
+        },
+        {
+          "name": "xl",
+          "cssVariable": "--gds-sys-viewport-xl",
+          "value": "1440px"
+        },
+        {
+          "name": "2xl",
+          "cssVariable": "--gds-sys-viewport-2xl",
+          "value": "2560px"
+        },
+        {
+          "name": "3xl",
+          "cssVariable": "--gds-sys-viewport-3xl",
+          "value": "3840px"
+        },
+        {
+          "name": "4xl",
+          "cssVariable": "--gds-sys-viewport-4xl",
+          "value": "4320px"
+        },
+        {
+          "name": "5xl",
+          "cssVariable": "--gds-sys-viewport-5xl",
+          "value": "6016px"
+        },
+        {
+          "name": "6xl",
+          "cssVariable": "--gds-sys-viewport-6xl",
+          "value": "7680px"
+        }
+      ]
+    },
+    "shadow": {
+      "description": "Shadow tokens. Shadows come in pairs (-01 and -02) that are combined for the final effect.",
+      "cssVariablePrefix": "--gds-sys-shadow-",
+      "styleExpressionProperties": [
+        "box-shadow"
+      ],
+      "styleExpressionUsage": "Shadow tokens can be used as CSS variables: box-shadow: var(--gds-sys-shadow-m-01), var(--gds-sys-shadow-m-02). Sizes: xs, s, m, l, xl, 2xl — each with a -01 (primary) and -02 (secondary) layer.",
+      "tokens": [
+        {
+          "name": "xs-01",
+          "cssVariable": "--gds-sys-shadow-xs-01",
+          "value": "0px 1px 2px 0px rgba(10, 11, 10, 0.05)"
+        },
+        {
+          "name": "xs-02",
+          "cssVariable": "--gds-sys-shadow-xs-02",
+          "value": "0px 0px 0px 0px transparent"
+        },
+        {
+          "name": "s-01",
+          "cssVariable": "--gds-sys-shadow-s-01",
+          "value": "0px 1px 2px 0px rgba(10, 11, 10, 0.10)"
+        },
+        {
+          "name": "s-02",
+          "cssVariable": "--gds-sys-shadow-s-02",
+          "value": "0px 1px 3px 0px rgba(10, 11, 10, 0.06)"
+        },
+        {
+          "name": "m-01",
+          "cssVariable": "--gds-sys-shadow-m-01",
+          "value": "0px 2px 4px -2px rgba(10, 11, 10, 0.10)"
+        },
+        {
+          "name": "m-02",
+          "cssVariable": "--gds-sys-shadow-m-02",
+          "value": "0px 4px 8px -2px rgba(10, 11, 10, 0.06)"
+        },
+        {
+          "name": "l-01",
+          "cssVariable": "--gds-sys-shadow-l-01",
+          "value": "0px 4px 6px -2px rgba(10, 11, 10, 0.08)"
+        },
+        {
+          "name": "l-02",
+          "cssVariable": "--gds-sys-shadow-l-02",
+          "value": "0px 12px 16px -4px rgba(10, 11, 10, 0.03)"
+        },
+        {
+          "name": "xl-01",
+          "cssVariable": "--gds-sys-shadow-xl-01",
+          "value": "0px 20px 24px -4px rgba(10, 11, 10, 0.08)"
+        },
+        {
+          "name": "xl-02",
+          "cssVariable": "--gds-sys-shadow-xl-02",
+          "value": "0px 0px 0px 0px rgba(10, 11, 10, 0.08)"
+        },
+        {
+          "name": "2xl-01",
+          "cssVariable": "--gds-sys-shadow-2xl-01",
+          "value": "0px 24px 48px -12px rgba(10, 11, 10, 0.18)"
+        },
+        {
+          "name": "2xl-02",
+          "cssVariable": "--gds-sys-shadow-2xl-02",
+          "value": "0px 0px 0px 0px transparent"
+        }
+      ]
+    },
+    "motion": {
+      "description": "Motion tokens for animation easing and duration",
+      "cssVariablePrefix": "--gds-sys-motion-",
+      "styleExpressionProperties": [],
+      "styleExpressionUsage": "Motion tokens are used as CSS variables for transitions and animations. Example: transition: opacity var(--gds-sys-motion-duration-fast) var(--gds-sys-motion-easing-ease-out).",
+      "tokens": [
+        {
+          "name": "easing-ease-in",
+          "cssVariable": "--gds-sys-motion-easing-ease-in",
+          "value": "cubic-bezier(0.64, 0, 0.78, 0)"
+        },
+        {
+          "name": "easing-ease-in-out",
+          "cssVariable": "--gds-sys-motion-easing-ease-in-out",
+          "value": "cubic-bezier(0.83, 0, 0.17, 1)"
+        },
+        {
+          "name": "easing-ease-out",
+          "cssVariable": "--gds-sys-motion-easing-ease-out",
+          "value": "cubic-bezier(0.22, 1, 0.36, 1)"
+        },
+        {
+          "name": "easing-linear",
+          "cssVariable": "--gds-sys-motion-easing-linear",
+          "value": "cubic-bezier(0, 0, 1, 1)"
+        },
+        {
+          "name": "duration-fastest",
+          "cssVariable": "--gds-sys-motion-duration-fastest",
+          "value": ".2s"
+        },
+        {
+          "name": "duration-fast",
+          "cssVariable": "--gds-sys-motion-duration-fast",
+          "value": ".4s"
+        },
+        {
+          "name": "duration-default",
+          "cssVariable": "--gds-sys-motion-duration-default",
+          "value": ".5s"
+        },
+        {
+          "name": "duration-slow",
+          "cssVariable": "--gds-sys-motion-duration-slow",
+          "value": "1s"
+        },
+        {
+          "name": "duration-slowest",
+          "cssVariable": "--gds-sys-motion-duration-slowest",
+          "value": "1.5s"
+        }
+      ]
+    }
+  }
+}