jouw-stem__design-system 0.1.0

package/tokens/themes/theme-high-contrast-solarized-dark/spacing.json

@@ -0,0 +1,44 @@
+{
+  "space": {
+    "3xs": { "value": "{spacing.1}", "type": "dimension", "description": "Canonical spacer 3xs (2px)" },
+    "2xs": { "value": "{spacing.2}", "type": "dimension", "description": "Canonical spacer 2xs (4px)" },
+    "xs": { "value": "{spacing.3}", "type": "dimension", "description": "Canonical spacer xs (6px)" },
+    "s": { "value": "{spacing.4}", "type": "dimension", "description": "Canonical spacer s (10px)" },
+    "m": { "value": "{spacing.5}", "type": "dimension", "description": "Canonical spacer m (16px)" },
+    "l": { "value": "{spacing.6}", "type": "dimension", "description": "Canonical spacer l (26px)" },
+    "xl": { "value": "{spacing.7}", "type": "dimension", "description": "Canonical spacer xl (42px)" },
+    "2xl": { "value": "{spacing.8}", "type": "dimension", "description": "Canonical spacer 2xl (68px)" },
+    "3xl": { "value": "{spacing.9}", "type": "dimension", "description": "Canonical spacer 3xl (110px)" },
+    "4xl": { "value": "{spacing.10}", "type": "dimension", "description": "Canonical spacer 4xl (178px)" }
+  },
+  "inset": {
+    "3xs": { "value": "{spacing.1}", "type": "dimension", "description": "Extra extra extra small inset padding" },
+    "2xs": { "value": "{spacing.2}", "type": "dimension", "description": "Extra extra small inset padding" },
+    "xs": { "value": "{spacing.3}", "type": "dimension", "description": "Extra small inset padding" },
+    "s": { "value": "{spacing.4}", "type": "dimension", "description": "Small inset padding" },
+    "m": { "value": "{spacing.5}", "type": "dimension", "description": "Medium inset padding" },
+    "l": { "value": "{spacing.6}", "type": "dimension", "description": "Large inset padding" },
+    "xl": { "value": "{spacing.7}", "type": "dimension", "description": "Extra large inset padding" },
+    "2xl": { "value": "{spacing.8}", "type": "dimension", "description": "Extra extra large inset padding" }
+  },
+  "stack": {
+    "3xs": { "value": "{spacing.1}", "type": "dimension", "description": "Vertical spacing between stacked items" },
+    "2xs": { "value": "{spacing.2}", "type": "dimension" },
+    "xs": { "value": "{spacing.3}", "type": "dimension" },
+    "s": { "value": "{spacing.4}", "type": "dimension" },
+    "m": { "value": "{spacing.5}", "type": "dimension" },
+    "l": { "value": "{spacing.6}", "type": "dimension" },
+    "xl": { "value": "{spacing.7}", "type": "dimension" },
+    "2xl": { "value": "{spacing.8}", "type": "dimension" }
+  },
+  "inline": {
+    "3xs": { "value": "{spacing.1}", "type": "dimension", "description": "Horizontal spacing between inline items" },
+    "2xs": { "value": "{spacing.2}", "type": "dimension" },
+    "xs": { "value": "{spacing.3}", "type": "dimension" },
+    "s": { "value": "{spacing.4}", "type": "dimension" },
+    "m": { "value": "{spacing.5}", "type": "dimension" },
+    "l": { "value": "{spacing.6}", "type": "dimension" },
+    "xl": { "value": "{spacing.7}", "type": "dimension" },
+    "2xl": { "value": "{spacing.8}", "type": "dimension" }
+  }
+}

package/tokens/themes/theme-high-contrast-solarized-light/color.json

@@ -0,0 +1,90 @@
+{
+  "$comment": "Full semantic color set for theme-high-contrast-solarized-light. Solarized base3 canvas (#fdf6e3) + Solarized base03 text (#002b36) → 13:1 (AAA). Accents darkened from canonical Solarized (yellow #b58900, blue #268bd2 etc.) to hit ≥7:1 vs base3 while preserving the Solarized identity. Disabled state uses Solarized base01 (#586e75) for visible-but-greyed semantics. Self-contained — not a diff against theme-light or theme-high-contrast-solarized-dark.",
+
+  "surface": {
+    "canvas":    { "value": "#fdf6e3", "type": "color", "description": "Main page background — Solarized base3" },
+    "panel":     { "value": "#fdf6e3", "type": "color", "description": "Card/panel background (collapses to canvas in HC — borders carry structure)" },
+    "elevated":  { "value": "#fdf6e3", "type": "color", "description": "Elevated surface (no shadow elevation in HC — borders mark elevation)" },
+    "overlay":   { "value": "rgba(253, 246, 227, 0.85)", "type": "color", "description": "Modal overlay backdrop (translucent base3)" },
+    "muted":     { "value": "#fdf6e3", "type": "color", "description": "Subtle/recessed background (collapses to canvas in HC; borders carry hierarchy)" },
+    "inverse":   { "value": "#002b36", "type": "color", "description": "Dark surface for contrast (tooltips, banners on light) — Solarized base03" },
+    "highlight": { "value": "#eee8d5", "type": "color", "description": "Selected/active background — Solarized base2 (subtle drop below canvas)" },
+    "gradient": {
+      "start": { "value": "#fdf6e3", "type": "color", "description": "Gradient background start (HC has no gradient — solid base3)" },
+      "end":   { "value": "#fdf6e3", "type": "color", "description": "Gradient background end (HC has no gradient — solid base3)" }
+    }
+  },
+
+  "text": {
+    "default":     { "value": "#002b36", "type": "color", "description": "Primary text — Solarized base03, ~13:1 on base3 (AAA)" },
+    "primary":     { "value": "#002b36", "type": "color", "description": "Primary text (alias)" },
+    "secondary":   { "value": "#002b36", "type": "color", "description": "Secondary text (HC collapses tones — hierarchy via weight + spacing in component SCSS)" },
+    "muted":       { "value": "#002b36", "type": "color", "description": "Helper/secondary text (HC collapses tones)" },
+    "subtle":      { "value": "#002b36", "type": "color", "description": "Placeholder text (HC collapses tones)" },
+    "inverse":     { "value": "#fdf6e3", "type": "color", "description": "Text on dark backgrounds" },
+    "link":        { "value": "#134f7d", "type": "color", "description": "Link text — darkened Solarized blue, ~7:1 on base3 (AAA)" },
+    "linkHover":   { "value": "#002b36", "type": "color", "description": "Link hover — always-underline; collapse to body text" },
+    "linkVisited": { "value": "#6c2566", "type": "color", "description": "Visited link — darkened Solarized magenta, ~7:1 on base3" },
+    "heading":     { "value": "#002b36", "type": "color", "description": "Heading text" }
+  },
+
+  "border": {
+    "subtle":  { "value": "#002b36", "type": "color", "description": "Subtle borders (HC: every element gets a real ≥2px border)" },
+    "default": { "value": "#002b36", "type": "color", "description": "Default borders" },
+    "strong":  { "value": "#134f7d", "type": "color", "description": "Emphasised borders — darkened Solarized blue, ~7:1 on base3" },
+    "focus":   { "value": "#134f7d", "type": "color", "description": "Focus ring colour — darkened Solarized blue" },
+    "vibrant": {
+      "start": { "value": "#134f7d", "type": "color", "description": "Vibrant gradient border start (HC: solid blue)" },
+      "end":   { "value": "#134f7d", "type": "color", "description": "Vibrant gradient border end (HC: solid blue)" }
+    }
+  },
+
+  "feedback": {
+    "success":          { "value": "#4a5a00", "type": "color", "description": "Success — darkened Solarized green, ~7:1 on base3" },
+    "successSubtle":    { "value": "#eef2c2", "type": "color", "description": "Success background — light green wash on base3" },
+    "successEmphasis":  { "value": "#4a5a00", "type": "color", "description": "Success text" },
+    "warning":          { "value": "#8a3409", "type": "color", "description": "Warning — darkened Solarized orange, ~7:1 on base3" },
+    "warningSubtle":    { "value": "#f9e0c5", "type": "color", "description": "Warning background — light orange wash on base3" },
+    "warningEmphasis":  { "value": "#8a3409", "type": "color", "description": "Warning text" },
+    "error":            { "value": "#98221f", "type": "color", "description": "Error — darkened Solarized red, ~7.5:1 on base3" },
+    "errorSubtle":      { "value": "#f9d6d4", "type": "color", "description": "Error background — light red wash on base3" },
+    "errorEmphasis":    { "value": "#98221f", "type": "color", "description": "Error text" },
+    "info":             { "value": "#16554f", "type": "color", "description": "Info — darkened Solarized cyan, ~7:1 on base3" },
+    "infoSubtle":       { "value": "#eee8d5", "type": "color", "description": "Info background — Solarized base2" },
+    "infoEmphasis":     { "value": "#16554f", "type": "color", "description": "Info text" }
+  },
+
+  "accent": {
+    "gradient": {
+      "start":      { "value": "#134f7d", "type": "color", "description": "Accent gradient start — darkened Solarized blue (HC: solid)" },
+      "end":        { "value": "#134f7d", "type": "color", "description": "Accent gradient end (HC: solid)" },
+      "hoverStart": { "value": "#002b36", "type": "color", "description": "Accent gradient hover — collapse to body text colour for max contrast" },
+      "hoverEnd":   { "value": "#002b36", "type": "color", "description": "Accent gradient hover (HC: solid)" }
+    }
+  },
+
+  "intent": {
+    "action": {
+      "default":  { "value": "#134f7d", "type": "color", "description": "Primary CTA — darkened Solarized blue, ~7:1 on base3" },
+      "hover":    { "value": "#002b36", "type": "color", "description": "Primary CTA hover — body text colour for max contrast" },
+      "active":   { "value": "#002b36", "type": "color", "description": "Primary CTA pressed" },
+      "disabled": { "value": "#586e75", "type": "color", "description": "Disabled — Solarized base01, visible-but-greyed" }
+    },
+    "secondary": {
+      "default": { "value": "transparent", "type": "color", "description": "Secondary action bg" },
+      "hover":   { "value": "#eee8d5", "type": "color", "description": "Secondary action hover — Solarized base2 wash" },
+      "border":  { "value": "#002b36", "type": "color", "description": "Secondary action border" }
+    }
+  },
+
+  "focus": {
+    "ring": { "value": "#134f7d", "type": "color", "description": "Focus ring — darkened Solarized blue, used at ≥3px width by consumers" }
+  },
+
+  "brand": {
+    "primary":   { "value": "#134f7d", "type": "color", "description": "Primary brand — darkened Solarized blue" },
+    "secondary": { "value": "#16554f", "type": "color", "description": "Secondary brand — darkened Solarized cyan" },
+    "accent":    { "value": "#98221f", "type": "color", "description": "Accent brand — darkened Solarized red" },
+    "subtle":    { "value": "#eee8d5", "type": "color", "description": "Subtle brand background — Solarized base2" }
+  }
+}

package/tokens/themes/theme-high-contrast-solarized-light/container.json

@@ -0,0 +1,9 @@
+{
+  "container": {
+    "max-width": {
+      "narrow": { "value": "720px", "type": "dimension", "description": "Long-form reading / forms / articles (~65ch comfortable line length)" },
+      "default": { "value": "1200px", "type": "dimension", "description": "Standard app shell" },
+      "wide": { "value": "1600px", "type": "dimension", "description": "Data-heavy / multi-column dashboards" }
+    }
+  }
+}

package/tokens/themes/theme-high-contrast-solarized-light/radius.json

@@ -0,0 +1,10 @@
+{
+  "radius": {
+    "none": { "value": "{radius.0}", "type": "dimension", "description": "No rounding" },
+    "subtle": { "value": "{radius.1}", "type": "dimension", "description": "Subtle rounding" },
+    "default": { "value": "{radius.3}", "type": "dimension", "description": "Default border radius" },
+    "rounded": { "value": "{radius.4}", "type": "dimension", "description": "More rounded corners" },
+    "large": { "value": "{radius.5}", "type": "dimension", "description": "Large radius for cards" },
+    "pill": { "value": "{radius.full}", "type": "dimension", "description": "Fully rounded (pills, circles)" }
+  }
+}

package/tokens/themes/theme-high-contrast-solarized-light/shadow.json

@@ -0,0 +1,10 @@
+{
+  "$comment": "HC-Light shadows: every level resolves to `none`. Drop-shadows convey nothing in high-contrast mode (and forced-colors mode strips them anyway); replicate elevation with solid borders in component SCSS. Source: project_high_contrast_theme_research.md.",
+  "shadow": {
+    "xs": { "value": "none", "type": "shadow", "description": "Subtle depth (HC: no shadow)" },
+    "s":  { "value": "none", "type": "shadow", "description": "Low elevation (HC: no shadow)" },
+    "m":  { "value": "none", "type": "shadow", "description": "Medium elevation (HC: no shadow)" },
+    "l":  { "value": "none", "type": "shadow", "description": "High elevation (HC: no shadow)" },
+    "xl": { "value": "none", "type": "shadow", "description": "Highest elevation (HC: no shadow)" }
+  }
+}

package/tokens/themes/theme-high-contrast-solarized-light/spacing.json

@@ -0,0 +1,44 @@
+{
+  "space": {
+    "3xs": { "value": "{spacing.1}", "type": "dimension", "description": "Canonical spacer 3xs (2px)" },
+    "2xs": { "value": "{spacing.2}", "type": "dimension", "description": "Canonical spacer 2xs (4px)" },
+    "xs": { "value": "{spacing.3}", "type": "dimension", "description": "Canonical spacer xs (6px)" },
+    "s": { "value": "{spacing.4}", "type": "dimension", "description": "Canonical spacer s (10px)" },
+    "m": { "value": "{spacing.5}", "type": "dimension", "description": "Canonical spacer m (16px)" },
+    "l": { "value": "{spacing.6}", "type": "dimension", "description": "Canonical spacer l (26px)" },
+    "xl": { "value": "{spacing.7}", "type": "dimension", "description": "Canonical spacer xl (42px)" },
+    "2xl": { "value": "{spacing.8}", "type": "dimension", "description": "Canonical spacer 2xl (68px)" },
+    "3xl": { "value": "{spacing.9}", "type": "dimension", "description": "Canonical spacer 3xl (110px)" },
+    "4xl": { "value": "{spacing.10}", "type": "dimension", "description": "Canonical spacer 4xl (178px)" }
+  },
+  "inset": {
+    "3xs": { "value": "{spacing.1}", "type": "dimension", "description": "Extra extra extra small inset padding" },
+    "2xs": { "value": "{spacing.2}", "type": "dimension", "description": "Extra extra small inset padding" },
+    "xs": { "value": "{spacing.3}", "type": "dimension", "description": "Extra small inset padding" },
+    "s": { "value": "{spacing.4}", "type": "dimension", "description": "Small inset padding" },
+    "m": { "value": "{spacing.5}", "type": "dimension", "description": "Medium inset padding" },
+    "l": { "value": "{spacing.6}", "type": "dimension", "description": "Large inset padding" },
+    "xl": { "value": "{spacing.7}", "type": "dimension", "description": "Extra large inset padding" },
+    "2xl": { "value": "{spacing.8}", "type": "dimension", "description": "Extra extra large inset padding" }
+  },
+  "stack": {
+    "3xs": { "value": "{spacing.1}", "type": "dimension", "description": "Vertical spacing between stacked items" },
+    "2xs": { "value": "{spacing.2}", "type": "dimension" },
+    "xs": { "value": "{spacing.3}", "type": "dimension" },
+    "s": { "value": "{spacing.4}", "type": "dimension" },
+    "m": { "value": "{spacing.5}", "type": "dimension" },
+    "l": { "value": "{spacing.6}", "type": "dimension" },
+    "xl": { "value": "{spacing.7}", "type": "dimension" },
+    "2xl": { "value": "{spacing.8}", "type": "dimension" }
+  },
+  "inline": {
+    "3xs": { "value": "{spacing.1}", "type": "dimension", "description": "Horizontal spacing between inline items" },
+    "2xs": { "value": "{spacing.2}", "type": "dimension" },
+    "xs": { "value": "{spacing.3}", "type": "dimension" },
+    "s": { "value": "{spacing.4}", "type": "dimension" },
+    "m": { "value": "{spacing.5}", "type": "dimension" },
+    "l": { "value": "{spacing.6}", "type": "dimension" },
+    "xl": { "value": "{spacing.7}", "type": "dimension" },
+    "2xl": { "value": "{spacing.8}", "type": "dimension" }
+  }
+}

package/tokens/themes/theme-light/color.json

@@ -0,0 +1,90 @@
+{
+  "$comment": "Full semantic color set for the light theme. Palette derived from https://www.nu.nl on 2026-05-09T00:00:00Z via Playwright getComputedStyle. Source page measurements: body text rgb(31,37,68) → navy #1f2544; canvas white #ffffff; secondary text/links rgb(0,108,222) → #006cde; breaking-news red rgb(224,6,19) → #e00613; deep promo red rgb(196,0,0) → #c40000; hairline border rgb(238,238,238) → #eeeeee. Gradient tokens are intentionally flattened (start === end) so consumers that ship a linear-gradient render as a solid colour — matches nu.nl which uses no surface gradients.",
+
+  "surface": {
+    "canvas": { "value": "#ffffff", "type": "color", "description": "Main page background — nu.nl pure white" },
+    "panel": { "value": "#f5f5f5", "type": "color", "description": "Card/panel background — light grey, derived above the #eeeeee hairline" },
+    "elevated": { "value": "#ffffff", "type": "color", "description": "Elevated surface (modals, dropdowns)" },
+    "overlay": { "value": "rgba(0, 0, 0, 0.5)", "type": "color", "description": "Modal overlay backdrop" },
+    "muted": { "value": "#f0f1f4", "type": "color", "description": "Subtle/recessed background — slightly navy-tinted neutral" },
+    "inverse": { "value": "#1f2544", "type": "color", "description": "Dark surface for contrast (tooltips, banners) — nu.nl navy" },
+    "highlight": { "value": "#fde8ea", "type": "color", "description": "Warm accent surface — light tint of breaking-news red" },
+    "gradient": {
+      "start": { "value": "#ffffff", "type": "color", "description": "Gradient background start — flattened to solid (no nu.nl gradient)" },
+      "end": { "value": "#ffffff", "type": "color", "description": "Gradient background end — flattened to solid (no nu.nl gradient)" }
+    }
+  },
+
+  "text": {
+    "default": { "value": "#1f2544", "type": "color", "description": "Primary text — nu.nl navy rgb(31,37,68)" },
+    "primary": { "value": "#1f2544", "type": "color", "description": "Primary text (alias)" },
+    "secondary": { "value": "#3d4467", "type": "color", "description": "Secondary text — slightly lifted navy" },
+    "muted": { "value": "#5e6481", "type": "color", "description": "Helper/secondary text" },
+    "subtle": { "value": "#8e93a8", "type": "color", "description": "Placeholder text" },
+    "inverse": { "value": "#ffffff", "type": "color", "description": "Text on dark backgrounds" },
+    "link": { "value": "#006cde", "type": "color", "description": "Link text — nu.nl link blue rgb(0,108,222)" },
+    "linkHover": { "value": "#0050a8", "type": "color", "description": "Link hover — darker blue" },
+    "linkVisited": { "value": "#5d3da8", "type": "color", "description": "Visited link" },
+    "heading": { "value": "#1f2544", "type": "color", "description": "Heading text — nu.nl navy" }
+  },
+
+  "border": {
+    "subtle": { "value": "#eeeeee", "type": "color", "description": "Subtle borders — nu.nl hairline rgb(238,238,238)" },
+    "default": { "value": "#d9dadf", "type": "color", "description": "Default borders" },
+    "strong": { "value": "#1f2544", "type": "color", "description": "Emphasised borders — navy rule (nu.nl uses navy under nav, headings)" },
+    "focus": { "value": "#006cde", "type": "color", "description": "Focus ring colour — nu.nl link blue" },
+    "vibrant": {
+      "start": { "value": "#1f2544", "type": "color", "description": "Vibrant gradient border start — flattened to solid navy" },
+      "end": { "value": "#1f2544", "type": "color", "description": "Vibrant gradient border end — flattened to solid navy" }
+    }
+  },
+
+  "feedback": {
+    "success": { "value": "#2a8a3a", "type": "color", "description": "Success state" },
+    "successSubtle": { "value": "#e6f4e9", "type": "color", "description": "Success background" },
+    "successEmphasis": { "value": "#1d6429", "type": "color", "description": "Success text" },
+    "warning": { "value": "#d97706", "type": "color", "description": "Warning state" },
+    "warningSubtle": { "value": "#fef3e6", "type": "color", "description": "Warning background" },
+    "warningEmphasis": { "value": "#a8590e", "type": "color", "description": "Warning text" },
+    "error": { "value": "#e00613", "type": "color", "description": "Error state — nu.nl breaking-news red rgb(224,6,19)" },
+    "errorSubtle": { "value": "#fde8ea", "type": "color", "description": "Error background" },
+    "errorEmphasis": { "value": "#c40000", "type": "color", "description": "Error text — nu.nl deeper promo red rgb(196,0,0)" },
+    "info": { "value": "#006cde", "type": "color", "description": "Info state — nu.nl link blue" },
+    "infoSubtle": { "value": "#e0eef9", "type": "color", "description": "Info background" },
+    "infoEmphasis": { "value": "#0050a8", "type": "color", "description": "Info text" }
+  },
+
+  "accent": {
+    "gradient": {
+      "start": { "value": "#1f2544", "type": "color", "description": "Accent gradient start — flattened to solid navy (nu.nl uses solid)" },
+      "end": { "value": "#1f2544", "type": "color", "description": "Accent gradient end — flattened to solid navy" },
+      "hoverStart": { "value": "#3d4467", "type": "color", "description": "Accent hover start — flattened to lifted navy" },
+      "hoverEnd": { "value": "#3d4467", "type": "color", "description": "Accent hover end — flattened to lifted navy" }
+    }
+  },
+
+  "intent": {
+    "action": {
+      "default": { "value": "#1f2544", "type": "color", "description": "Primary CTA colour — nu.nl navy" },
+      "hover": { "value": "#3d4467", "type": "color", "description": "Primary CTA hover" },
+      "active": { "value": "#0f1422", "type": "color", "description": "Primary CTA pressed" },
+      "disabled": { "value": "#d9dadf", "type": "color", "description": "Disabled state" }
+    },
+    "secondary": {
+      "default": { "value": "transparent", "type": "color", "description": "Secondary action bg" },
+      "hover": { "value": "#f0f1f4", "type": "color", "description": "Secondary action hover" },
+      "border": { "value": "#1f2544", "type": "color", "description": "Secondary action border — navy outline (nu.nl button pattern)" }
+    }
+  },
+
+  "focus": {
+    "ring": { "value": "#006cde", "type": "color", "description": "Focus ring colour — nu.nl link blue" }
+  },
+
+  "brand": {
+    "primary": { "value": "#1f2544", "type": "color", "description": "Primary brand colour — nu.nl navy rgb(31,37,68)" },
+    "secondary": { "value": "#006cde", "type": "color", "description": "Secondary brand colour (CTA / link) — nu.nl blue rgb(0,108,222)" },
+    "accent": { "value": "#e00613", "type": "color", "description": "Accent brand colour — nu.nl breaking red rgb(224,6,19)" },
+    "subtle": { "value": "#f0f1f4", "type": "color", "description": "Subtle brand background" }
+  }
+}

package/tokens/themes/theme-light/container.json

@@ -0,0 +1,9 @@
+{
+  "container": {
+    "max-width": {
+      "narrow": { "value": "720px", "type": "dimension", "description": "Long-form reading / forms / articles (~65ch comfortable line length)" },
+      "default": { "value": "1200px", "type": "dimension", "description": "Standard app shell" },
+      "wide": { "value": "1600px", "type": "dimension", "description": "Data-heavy / multi-column dashboards" }
+    }
+  }
+}

package/tokens/themes/theme-light/radius.json

@@ -0,0 +1,10 @@
+{
+  "radius": {
+    "none": { "value": "{radius.0}", "type": "dimension", "description": "No rounding" },
+    "subtle": { "value": "{radius.1}", "type": "dimension", "description": "Subtle rounding" },
+    "default": { "value": "{radius.3}", "type": "dimension", "description": "Default border radius" },
+    "rounded": { "value": "{radius.4}", "type": "dimension", "description": "More rounded corners" },
+    "large": { "value": "{radius.5}", "type": "dimension", "description": "Large radius for cards" },
+    "pill": { "value": "{radius.full}", "type": "dimension", "description": "Fully rounded (pills, circles)" }
+  }
+}

package/tokens/themes/theme-light/shadow.json

@@ -0,0 +1,9 @@
+{
+  "shadow": {
+    "xs": { "value": "{shadow.1}", "type": "shadow", "description": "Subtle depth - hover states" },
+    "s": { "value": "{shadow.2}", "type": "shadow", "description": "Low elevation - cards, buttons" },
+    "m": { "value": "{shadow.3}", "type": "shadow", "description": "Medium elevation - dropdowns" },
+    "l": { "value": "{shadow.4}", "type": "shadow", "description": "High elevation - modals" },
+    "xl": { "value": "{shadow.5}", "type": "shadow", "description": "Highest elevation - toasts" }
+  }
+}

package/tokens/themes/theme-light/spacing.json

@@ -0,0 +1,44 @@
+{
+  "space": {
+    "3xs": { "value": "{spacing.1}", "type": "dimension", "description": "Canonical spacer 3xs (2px)" },
+    "2xs": { "value": "{spacing.2}", "type": "dimension", "description": "Canonical spacer 2xs (4px)" },
+    "xs": { "value": "{spacing.3}", "type": "dimension", "description": "Canonical spacer xs (6px)" },
+    "s": { "value": "{spacing.4}", "type": "dimension", "description": "Canonical spacer s (10px)" },
+    "m": { "value": "{spacing.5}", "type": "dimension", "description": "Canonical spacer m (16px)" },
+    "l": { "value": "{spacing.6}", "type": "dimension", "description": "Canonical spacer l (26px)" },
+    "xl": { "value": "{spacing.7}", "type": "dimension", "description": "Canonical spacer xl (42px)" },
+    "2xl": { "value": "{spacing.8}", "type": "dimension", "description": "Canonical spacer 2xl (68px)" },
+    "3xl": { "value": "{spacing.9}", "type": "dimension", "description": "Canonical spacer 3xl (110px)" },
+    "4xl": { "value": "{spacing.10}", "type": "dimension", "description": "Canonical spacer 4xl (178px)" }
+  },
+  "inset": {
+    "3xs": { "value": "{spacing.1}", "type": "dimension", "description": "Extra extra extra small inset padding" },
+    "2xs": { "value": "{spacing.2}", "type": "dimension", "description": "Extra extra small inset padding" },
+    "xs": { "value": "{spacing.3}", "type": "dimension", "description": "Extra small inset padding" },
+    "s": { "value": "{spacing.4}", "type": "dimension", "description": "Small inset padding" },
+    "m": { "value": "{spacing.5}", "type": "dimension", "description": "Medium inset padding" },
+    "l": { "value": "{spacing.6}", "type": "dimension", "description": "Large inset padding" },
+    "xl": { "value": "{spacing.7}", "type": "dimension", "description": "Extra large inset padding" },
+    "2xl": { "value": "{spacing.8}", "type": "dimension", "description": "Extra extra large inset padding" }
+  },
+  "stack": {
+    "3xs": { "value": "{spacing.1}", "type": "dimension", "description": "Vertical spacing between stacked items" },
+    "2xs": { "value": "{spacing.2}", "type": "dimension" },
+    "xs": { "value": "{spacing.3}", "type": "dimension" },
+    "s": { "value": "{spacing.4}", "type": "dimension" },
+    "m": { "value": "{spacing.5}", "type": "dimension" },
+    "l": { "value": "{spacing.6}", "type": "dimension" },
+    "xl": { "value": "{spacing.7}", "type": "dimension" },
+    "2xl": { "value": "{spacing.8}", "type": "dimension" }
+  },
+  "inline": {
+    "3xs": { "value": "{spacing.1}", "type": "dimension", "description": "Horizontal spacing between inline items" },
+    "2xs": { "value": "{spacing.2}", "type": "dimension" },
+    "xs": { "value": "{spacing.3}", "type": "dimension" },
+    "s": { "value": "{spacing.4}", "type": "dimension" },
+    "m": { "value": "{spacing.5}", "type": "dimension" },
+    "l": { "value": "{spacing.6}", "type": "dimension" },
+    "xl": { "value": "{spacing.7}", "type": "dimension" },
+    "2xl": { "value": "{spacing.8}", "type": "dimension" }
+  }
+}