@uncinq/design-tokens 0.4.0 → 1.0.0

package/tokens/semantic/color.css

@@ -1,119 +0,0 @@
-/* semantic/color.css */
-/*
- * Purposeful color aliases — reference primitives, never raw values.
- * Override --color-brand (and optionally --color-*) in your project to rebrand.
- *
- * Default brand: sienna (mix crimson #a90940 × terracotta, H ≈ 23°).
- *
- * A11y notes:
- * - Status colors (danger, success, info) use 600-level primitives so white
- *   text meets WCAG AA (4.5:1) when used as button/badge backgrounds.
- * - Warning uses amber-500 (inherently bright); --color-text-on-warning is
- *   dark (gray-900) to maintain contrast.
- */
-@layer config {
-  :root {
-    color-scheme: light;
-
-    /* ── Accent ─────────────────────────────────────────────────────────── */
-    --color-accent:        var(--color-sienna-600);
-    --color-accent-muted:  var(--color-sienna-100);
-    --color-accent-hover:  var(--color-sienna-700);
-    --color-accent-strong: var(--color-sienna-900);
-
-    /* ── Brand ─────────────────────────────────────────────────────────── */
-    --color-brand:        var(--color-sienna-600);
-    --color-brand-muted:  var(--color-sienna-100);
-    --color-brand-hover:  var(--color-sienna-700);
-    --color-brand-strong: var(--color-sienna-900);
-
-    /* ── Overlay ───────────────────────────────────────────────────────── */
-    --color-backdrop: rgb(var(--color-black-rgb) / var(--opacity-backdrop));
-
-    /* ── Backgrounds ───────────────────────────────────────────────────── */
-    --color-bg:         var(--color-white);
-    --color-bg-accent:  var(--color-accent);
-    --color-bg-media:   var(--color-gray-200);
-    --color-bg-muted:   var(--color-gray-100);
-    --color-bg-muted-hover: var(--color-gray-200);
-    --color-bg-surface: var(--color-bg);
-
-    /* ── Borders & focus ───────────────────────────────────────────────── */
-    --color-border: var(--color-gray-200);
-    --color-border-hover: var(--color-gray-500);
-    --color-focus:  var(--color-text);
-
-    /* ── Shadows ───────────────────────────────────────────────────────── */
-    /* --color-shadow holds raw RGB channels so rgb(var(--color-shadow) / α) works. */
-    /* In dark mode, flip to 255 255 255 → all shadows become a white glow.  */
-    --color-shadow:        var(--color-black-rgb);
-    --color-shadow-light:  rgb(var(--color-shadow) / var(--opacity-shadow));  /* sm, center-* */
-    --color-shadow-normal: rgb(var(--color-shadow) / var(--opacity-shadow));  /* md, lg */
-
-    /* ── Text ──────────────────────────────────────────────────────────── */
-    --color-active:          var(--color-accent);
-    --color-credit:          var(--color-text-muted);
-    --color-heading:         var(--color-black);
-    --color-link:            var(--color-text);
-    --color-link-active:     var(--color-active);
-    --color-link-hover:      var(--color-accent);
-    --color-text:            var(--color-gray-900);
-    --color-text-hover:      var(--color-gray-700);
-    --color-text-muted:      var(--color-gray-500);
-    --color-text-disabled:   var(--color-gray-300);
-    --color-text-on-accent:    var(--color-white);
-    --color-text-on-brand:     var(--color-white);
-    --color-text-on-danger:    var(--color-white);
-    --color-text-on-dark:      var(--color-white);
-    --color-text-on-info:      var(--color-white);
-    --color-text-on-light:     var(--color-gray-900);
-    --color-text-on-primary:   var(--color-white);
-    --color-text-on-secondary: var(--color-white);
-    --color-text-on-surface:   var(--color-text);
-    --color-text-on-success:   var(--color-white);
-    --color-text-on-warning:   var(--color-gray-900); /* amber is bright — dark text */
-
-    /* ── Semantic variants ─────────────────────────────────────────────── */
-
-    /* Primary (alias of brand) */
-    --color-primary:        var(--color-brand);
-    --color-primary-muted:  var(--color-brand-muted);
-    --color-primary-hover:  var(--color-brand-hover);
-    --color-primary-strong: var(--color-brand-strong);
-
-    /* Secondary */
-    --color-secondary:        var(--color-gray-600);
-    --color-secondary-muted:  var(--color-gray-100);
-    --color-secondary-strong: var(--color-gray-800);
-
-    /* Danger — red-600 ensures white text meets WCAG AA */
-    --color-danger:        var(--color-red-600);
-    --color-danger-muted:  var(--color-red-100);
-    --color-danger-strong: var(--color-red-800);
-
-    /* Dark */
-    --color-dark:        var(--color-gray-900);
-    --color-dark-muted:  var(--color-gray-100);
-    --color-dark-strong: var(--color-black);
-
-    /* Info — blue-600 ensures white text meets WCAG AA */
-    --color-info:        var(--color-blue-600);
-    --color-info-muted:  var(--color-blue-100);
-    --color-info-strong: var(--color-blue-800);
-
-    /* Light */
-    --color-light:        var(--color-gray-200);
-    --color-light-muted:  var(--color-gray-100);
-    --color-light-strong: var(--color-gray-700);
-
-    /* Success — green-600 ensures white text meets WCAG AA */
-    --color-success:        var(--color-green-600);
-    --color-success-muted:  var(--color-green-100);
-    --color-success-strong: var(--color-green-800);
-
-    /* Warning — amber-500 is bright; pair with dark text (see text-on-warning above) */
-    --color-warning:        var(--color-amber-500);
-    --color-warning-muted:  var(--color-amber-100);
-    --color-warning-strong: var(--color-amber-700);
-  }
-}

package/tokens/semantic/dark.css

@@ -1,48 +0,0 @@
-/* semantic/dark.css */
-/*
- * Dark mode token overrides — activated by OS preference.
- * Projects without dark mode: add `color-scheme: only light` in @layer config.
- * Manual toggle ([data-theme]): handled at project level.
- *
- * Tokens that adapt automatically (reference semantic tokens that change here):
- *   --color-bg-surface  → var(--color-bg)
- *   --color-link        → var(--color-text)
- *   --form-color-border → var(--color-border)
- *   --form-color-text   → var(--color-text)
- *   --input-color-bg    → var(--form-color-bg)
- *
- * Not changed: brand, status (danger/success/info/warning), secondary, dark,
- * light — functional colors that stay consistent in dark mode.
- * Override at project level if needed.
- */
-@layer config {
-  @media (prefers-color-scheme: dark) {
-    :root:not([data-color-scheme="light"]) {
-      color-scheme: dark;
-
-      /* ── Backgrounds ─────────────────────────────────────────────────── */
-      --color-bg:             var(--color-gray-950);
-      --color-bg-muted:       var(--color-gray-900);
-      --color-bg-muted-hover: var(--color-gray-800);
-      --color-bg-media:       var(--color-gray-800);
-
-      /* ── Borders ─────────────────────────────────────────────────────── */
-      --color-border:        var(--color-gray-800);
-
-      /* ── Text ────────────────────────────────────────────────────────── */
-      --color-heading:       var(--color-white);
-      --color-text:          var(--color-gray-200);
-      --color-text-muted:    var(--color-gray-400);
-      --color-text-disabled: var(--color-gray-600);
-      --color-text-hover:    var(--color-gray-300);
-
-      /* ── Forms ───────────────────────────────────────────────────────── */
-      /* --form-color-bg references --color-white directly — must be explicit */
-      --form-color-bg:       var(--color-gray-900);
-
-      /* ── Shadows ─────────────────────────────────────────────────────── */
-      /* Flip to white → all shadows become a subtle white glow */
-      --color-shadow: var(--color-white-rgb);
-    }
-  }
-}

package/tokens/semantic/focus.css

@@ -1,10 +0,0 @@
-/* semantic/focus.css */
-@layer config {
-  :root {
-    --focus:                 var(--focus-outline-width) var(--focus-outline-style) var(--focus-color);
-    --focus-color:           var(--color-focus);
-    --focus-outline-style:   solid;
-    --focus-outline-width:   1px;
-    --focus-outline-offset:  2px;
-  }
-}

package/tokens/semantic/form.css

@@ -1,107 +0,0 @@
-/* semantic/form.css */
-@layer config {
-  :root {
-    /* ── Base form ─────────────────────────────────────────────────────── */
-    --form-border-radius:        var(--radius-xs);
-    --form-border-width:         var(--border-width-normal);
-    --form-color-accent:         var(--color-black);
-    --form-color-bg:             var(--color-white);
-    --form-color-border:         var(--color-border);
-    --form-color-border-hover:   var(--color-border-hover);
-    --form-color-text:           var(--color-text);
-    --form-padding:              var(--spacing-control);
-    --form-shadow:               var(--shadow-control);
-    --form-shadow-hover:         var(--shadow-control-hover);
-    --form-transition:           var(--transition-normal);
-
-    /* ── Input ─────────────────────────────────────────────────────────── */
-    --input-border-radius:        var(--form-border-radius);
-    --input-border-width:         var(--form-border-width);
-    --input-color-bg:             var(--form-color-bg);
-    --input-color-border:         var(--form-color-border);
-    --input-color-border-hover:   var(--form-color-border-hover);
-    --input-color-placeholder:    var(--color-text-muted);
-    --input-color-text:           var(--form-color-text);
-    --input-padding:              var(--form-padding);
-
-    /* ── File button ───────────────────────────────────────────────────── */
-    --file-button-margin-end:     var(--spacing-12);
-    --file-button-padding:        var(--spacing-8) var(--spacing-12);
-
-    /* ── Textarea ──────────────────────────────────────────────────────── */
-    --textarea-border-radius:      var(--form-border-radius);
-    --textarea-border-width:       var(--form-border-width);
-    --textarea-color-bg:          var(--form-color-bg);
-    --textarea-color-border:      var(--form-color-border);
-    --textarea-color-border-hover: var(--form-color-border-hover);
-    --textarea-color-placeholder:  var(--color-text-muted);
-    --textarea-color-text:         var(--form-color-text);
-    --textarea-min-height:         5lh;
-    --textarea-padding:            var(--form-padding);
-
-    /* ── Select ────────────────────────────────────────────────────────── */
-    --select-border-radius:        var(--form-border-radius);
-    --select-border-width:         var(--form-border-width);
-    --select-color-bg:             var(--form-color-bg);
-    --select-color-border:         var(--form-color-border);
-    --select-color-border-hover:   var(--form-color-border-hover);
-    --select-color-optgroup:       var(--color-text-muted);
-    --select-color-text:           var(--form-color-text);
-    --select-icon:                 var(--icon-chevron);
-    --select-icon-size:            var(--icon-size);
-    --select-padding:              var(--form-padding);
-    --select-padding-end:          2rem;
-
-    /* ── Label ─────────────────────────────────────────────────────────── */
-    --label-color-text:     var(--form-color-text);
-    --label-font-size:      var(--font-size-xs);
-    --label-font-weight:    var(--font-weight-medium);
-    --label-padding:        var(--spacing-2xs) 0;
-    --label-text-transform: uppercase;
-
-    /* ── Help text ─────────────────────────────────────────────────────── */
-    --help-color-text:  var(--color-text-muted);
-    --help-font-size:   var(--font-size-xs);
-    --help-font-weight: var(--font-weight-normal);
-    --help-margin:      0;
-
-    /* ── Checkables (checkbox + radio shared) ──────────────────────────── */
-    --checkable-color: var(--form-color-accent);
-    --checkable-size:  1.25em;
-
-    /* ── Checkbox ──────────────────────────────────────────────────────── */
-    --checkbox-border-radius:        0;
-    --checkbox-border-width:         var(--form-border-width);
-    --checkbox-color-bg:             var(--form-color-bg);
-    --checkbox-color-bg-checked:     var(--form-color-bg);
-    --checkbox-color-bg-hover:       var(--form-color-bg);
-    --checkbox-color-border:         var(--form-color-border);
-    --checkbox-color-border-checked: var(--checkable-color);
-    --checkbox-color-border-hover:   var(--form-color-border-hover);
-    --checkbox-label-padding:        0 0 0 .3125rem;
-    --checkbox-mask-checked:         var(--icon-tick) center no-repeat;
-    --checkbox-mask-indeterminate:   var(--icon-dash) center no-repeat;
-    --checkbox-scale-checked:        0.7;
-
-    /* ── Radio ─────────────────────────────────────────────────────────── */
-    --radio-border-radius:        var(--radius-pill);
-    --radio-border-width:         var(--form-border-width);
-    --radio-border-width-checked: var(--border-width-large);
-    --radio-color-bg:             var(--form-color-bg);
-    --radio-color-bg-checked:     var(--checkable-color);
-    --radio-color-bg-hover:       var(--form-color-bg);
-    --radio-color-border:         var(--form-color-border);
-    --radio-color-border-checked: var(--checkable-color);
-    --radio-color-border-hover:   var(--form-color-border-hover);
-    --radio-label-padding:        0 0 0 .3125rem;
-    --radio-scale-checked:        0.5;
-
-    /* ── Range ─────────────────────────────────────────────────────────── */
-    --range-thumb-color:        var(--form-color-accent);
-    --range-thumb-color-border: var(--color-white);
-    --range-thumb-border-width: var(--size-4);
-    --range-thumb-size:         var(--size-24);
-    --range-track-color:        var(--form-color-border);
-    --range-track-height:       calc(var(--border-width-normal) + 2px);
-  }
-}

package/tokens/semantic/grid.css

@@ -1,39 +0,0 @@
-/* semantic/grid.css */
-@layer config {
-  :root {
-    /* ── Grid base ──────────────────────────────────────────────────────── */
-    --columns: 12;
-    --gap:     var(--spacing-md);
-
-    /* ── Grid column spans ──────────────────────────────────────────────── */
-    /* Integer spans — grid-agnostic. Comments show col-12 / col-24 fractions. */
-    --span-full: span var(--columns);
-    --span-half: span calc(var(--columns) / 2);
-    --span-quarter: span calc(var(--columns) / 4);
-    --span-third: span calc(var(--columns) / 3);
-    --span-24:   span 24;
-    --span-23:   span 23;
-    --span-22:   span 22;
-    --span-21:   span 21;
-    --span-20:   span 20;
-    --span-19:   span 19;
-    --span-18:   span 18;
-    --span-17:   span 17;
-    --span-16:   span 16;
-    --span-15:   span 15;
-    --span-14:   span 14;
-    --span-13:   span 13;
-    --span-12:   span 12;
-    --span-11:   span 11;
-    --span-10:   span 10;
-    --span-9:    span 9; 
-    --span-8:    span 8; 
-    --span-7:    span 7;
-    --span-6:    span 6; 
-    --span-5:    span 5;
-    --span-4:    span 4; 
-    --span-3:    span 3; 
-    --span-2:    span 2; 
-    --span-1:    span 1; 
-  }
-}

package/tokens/semantic/icon.css

@@ -1,19 +0,0 @@
-/* semantic/icon.css */
-@layer config {
-  :root {
-    --icon-size: var(--size-16);
-
-    /* Icons */
-    --icon-arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="8" x2="12" y2="8"/><polyline points="8 4 12 8 8 12"/></svg>');
-    --icon-arrow-skip: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="8" x2="10" y2="8"/><polyline points="6 4 10 8 6 12"/><line x1="14" y1="3" x2="14" y2="13"/></svg>');
-    --icon-chevron: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><polyline points="2 5 8 11 14 5"/></svg>');
-    --icon-close: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round"><line x1="3" y1="3" x2="13" y2="13"/><line x1="13" y1="3" x2="3" y2="13"/></svg>');
-    --icon-dash: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M431 256c0 17.7-14.3 32-32 32H49c-17.7 0-32-14.3-32-32s14.3-32 32-32h350c17.7 0 32 14.3 32 32z"/></svg>');
-    --icon-filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M1.3 3.3h13.4"/><path d="M4 8h8"/><path d="M6 12.7h4"/></svg>');
-    --icon-menu: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round"><line x1="2" y1="4" x2="14" y2="4"/><line x1="2" y1="8" x2="14" y2="8"/><line x1="2" y1="12" x2="14" y2="12"/></svg>');
-    --icon-plus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round"><line x1="8" y1="3" x2="8" y2="13"/><line x1="3" y1="8" x2="13" y2="8"/></svg>');
-    --icon-share: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M8 1.3v8.7"/><path d="m10.7 4-2.7-2.7-2.7 2.7"/><path d="M2.7 8v5.3a1.3 1.3 0 0 0 1.3 1.3h8a1.3 1.3 0 0 0 1.3-1.3v-5.3"/></svg>');
-    --icon-tick: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>');
-    --icon-toc: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M10.7 3.3H2"/><path d="M10.7 8H2"/><path d="M10.7 12.7H2"/><path d="M14 3.3h.01"/><path d="M14 8h.01"/><path d="M14 12.7h.01"/></svg>');
-  }
-}

package/tokens/semantic/motion.css

@@ -1,46 +0,0 @@
-/* semantic/motion.css */
-@layer config {
-  :root {
-    /* ── Duration ───────────────────────────────────────────────────────── */
-    --duration-fast:   150ms;
-    --duration-normal: 300ms;
-    --duration-slow:   600ms;
-
-    /* ── Easing — standard ──────────────────────────────────────────────── */
-    --easing-linear:  linear;
-    --easing-default: ease-in-out;
-    --easing-in:      ease-in;
-    --easing-out:     ease-out;
-
-    /* ── Easing — expressive ─────────────────────────────────────────────── */
-    /* Fast deceleration, natural feel — good for elements entering the screen */
-    --easing-out-circ: cubic-bezier(0, 0.55, 0.45, 1);
-    /* Dramatic deceleration — good for modals, drawers */
-    --easing-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
-    /* Slight overshoot then settle — good for confirmations, badges */
-    --easing-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
-    /* Bounce — ease-out-quart curve */
-    --easing-bounce:   cubic-bezier(0.165, 0.84, 0.44, 1);
-
-    /* ── Easing — physics (requires modern browser linear() support) ─────── */
-    /* Spring — overshoots slightly, settles naturally */
-    --easing-spring: linear(
-      0, 0.006, 0.025 2.8%, 0.101, 0.197, 0.325, 0.474, 0.638, 0.806,
-      0.962, 1.065, 1.12, 1.14, 1.12 30.9%, 1.034, 0.997, 0.986, 0.998, 1
-    );
-
-    /* ── Blur ───────────────────────────────────────────────────────────── */
-    --blur-overlay: 4px;
-
-    /* ── Transition shorthands ──────────────────────────────────────────── */
-    --transition-fast:   all var(--duration-fast)   var(--easing-default);
-    --transition-normal: all var(--duration-normal) var(--easing-default);
-    --transition-slow:   all var(--duration-slow)   var(--easing-default);
-    /* Targeted transitions — prefer over `all` for performance */
-    --transition-opacity:   opacity   var(--duration-normal) var(--easing-default);
-    --transition-transform: transform var(--duration-normal) var(--easing-default);
-    /* Targeted color transitions */
-    --transition-property-color: color, background-color, border-color, outline-color, fill, stroke, text-decoration;
-    --transition-color: var(--transition-property-color) var(--duration-normal) var(--easing-default);
-  }
-}

package/tokens/semantic/opacity.css

@@ -1,10 +0,0 @@
-/* semantic/opacity.css */
-@layer config {
-  :root {
-    --opacity-backdrop: var(--opacity-50);
-    --opacity-disabled: var(--opacity-50);
-    --opacity-overlay:  var(--opacity-75);
-    --opacity-shadow:   var(--opacity-10);
-    --opacity-subtle:   var(--opacity-25);
-  }
-}

package/tokens/semantic/radius.css

@@ -1,19 +0,0 @@
-/* semantic/radius.css */
-@layer config {
-  :root {
-    /* ── T-shirt scale ──────────────────────────────────────────────────── */
-    --radius-2xs: var(--size-2);
-    --radius-xs:  var(--size-4);
-    --radius-sm:  var(--size-8);
-    --radius-md:  var(--size-12);
-    --radius-lg:  var(--size-16);
-    --radius-xl:  var(--size-24);
-    --radius-2xl: var(--size-32);
-
-    /* ── Purposeful aliases ─────────────────────────────────────────────── */
-    --radius-none:    0;                  /* no rounding — sharp edges */
-    --radius-control: var(--radius-sm);   /* button, input, select */
-    --radius-surface: var(--radius-md);   /* card, modal, panel */
-    --radius-pill:    9999px;             /* badge, tag, avatar */
-  }
-}

package/tokens/semantic/ratio.css

@@ -1,23 +0,0 @@
-/* semantic/ratio.css */
-@layer config {
-  :root {
-    /* Generic ratios */
-    --ratio-1-1:   1 / 1;
-    --ratio-2-3:   2 / 3;
-    --ratio-3-2:   3 / 2;
-    --ratio-3-4:   3 / 4;
-    --ratio-4-3:   4 / 3;
-    --ratio-9-16:  9 / 16;
-    --ratio-16-9:  16 / 9;
-    --ratio-21-9:  21 / 9;
-
-    /* Specific ratios */
-    --ratio-banner: 21 / 9;
-    --ratio-cinema: 21 / 9;
-    --ratio-hero: 4 / 1;
-    --ratio-portrait: 4 / 5;
-    --ratio-square: 1 / 1;
-    --ratio-story: 9 / 16;
-    --ratio-video: 16 / 9;
-  }
-}

package/tokens/semantic/shadow.css

@@ -1,14 +0,0 @@
-/* semantic/shadow.css */
-/*
- * Semantic shadow aliases — map primitive shadows to purposeful roles.
- * Override in @layer config to restyle elevation system-wide.
- * In dark mode (semantic/dark.css), --shadow-sm/md/lg are overridden with
- * higher opacity — these aliases adapt automatically.
- */
-@layer config {
-  :root {
-    --shadow-control:        none;
-    --shadow-control-hover:  none;
-    --shadow-surface:        var(--shadow-sm);
-  }
-}

package/tokens/semantic/size.css

@@ -1,20 +0,0 @@
-/* semantic/size.css */
-@layer config {
-  :root {
-    /* ── Breakpoints ────────────────────────────────────────────────────── */
-    --size-tablet:       var(--size-768);   /* 48rem  — 768px  */
-    --size-tablet-wide:  var(--size-1024);  /* 64rem  — 1024px */
-    --size-laptop:       var(--size-1440);  /* 90rem  — 1440px */
-    --size-desktop:      var(--size-1600);  /* 100rem — 1600px */
-    --size-desktop-wide: var(--size-1920);  /* 120rem — 1920px */
-
-    /* ── T-shirt scale ──────────────────────────────────────────────────── */
-    --size-2xs: var(--size-5);
-    --size-xs:  var(--size-10);
-    --size-sm:  var(--size-20);
-    --size-md:  var(--size-40);
-    --size-lg:  var(--size-60);
-    --size-xl:  var(--size-80);
-    --size-2xl: var(--size-100);
-  }
-}

package/tokens/semantic/spacing.css

@@ -1,42 +0,0 @@
-/* semantic/spacing.css */
-@layer config {
-  :root {
-
-    /* ── T-shirt scale ──────────────────────────────────────────────────── */
-    --spacing-2xs: var(--size-5);
-    --spacing-xs:  var(--size-10);
-    --spacing-sm:  var(--size-20);
-    --spacing-md:  var(--size-30);
-    --spacing-lg:  var(--size-40);
-    --spacing-xl:  var(--size-60);
-    --spacing-2xl: var(--size-100);
-    --spacing-3xl: var(--size-150);
-
-    /* ── Fluid spacing scale ────────────────────────────────────────────── */
-    /*
-     * Fluid spacing using the Utopia method — https://utopia.fyi
-     *
-     * Each value is a clamp(min, intercept + slope×vw, max) expression where
-     * intercept and slope are calculated so the spacing equals exactly `min`
-     * at a 360px viewport and exactly `max` at a 1440px viewport.
-     *
-     *   slope     = (max_px − min_px) / (1440 − 360)
-     *   intercept = min_px − slope × 360   (converted to rem)
-     */
-    --spacing-fluid-2xs: clamp(0.3125rem, 0.2083rem + 0.4630vw, 0.625rem);  /*   5 →  10px */
-    --spacing-fluid-xs:  clamp(0.625rem,  0.4167rem + 0.9259vw, 1.25rem);  /*  10 →  20px */
-    --spacing-fluid-sm:  clamp(1.25rem,   0.8333rem + 1.8519vw, 2.5rem);   /*  20 →  40px */
-    --spacing-fluid-md:  clamp(1.875rem,  1.25rem   + 2.7778vw, 3.75rem);  /*  30 →  60px */
-    --spacing-fluid-lg:  clamp(2.5rem,    1.6667rem + 3.7037vw, 5rem);     /*  40 →  80px */
-    --spacing-fluid-xl:  clamp(3.125rem,  2.0833rem + 4.6296vw, 6.25rem);  /*  50 → 100px */
-    --spacing-fluid-2xl: clamp(3.75rem,   2.5rem    + 5.5556vw, 7.5rem);   /*  60 → 120px */
-
-    /* ── Purposeful aliases ─────────────────────────────────────────────── */
-    --spacing-card:       var(--spacing-sm);         /* padding inside surfaces (card) */
-    --spacing-control:    var(--spacing-xs);         /* padding inside interactive controls */
-    --spacing-heading:    var(--spacing-fluid-sm);   /* gap below headings */
-    --spacing-section:    var(--spacing-fluid-2xl);  /* vertical rhythm between sections */
-    --spacing-surface:    var(--spacing-fluid-sm);   /* padding inside surfaces (panel) */
-    --spacing-typography: var(--spacing-fluid-xs);   /* gap between typographic elements */
-  }
-}

package/tokens/semantic/typography.css

@@ -1,78 +0,0 @@
-/* semantic/typography.css */
-@layer config {
-  :root {
-    /* ── Font families ──────────────────────────────────────────────────── */
-    --font-family-code:    var(--font-family-mono);
-    --font-family-heading: var(--font-family-sans);
-    --font-family-text:    var(--font-family-sans);
-
-    /* ── Font weights ───────────────────────────────────────────────────── */
-    --font-weight-control: var(--font-weight-medium);
-    --font-weight-heading: var(--font-weight-bold);
-    --font-weight-text:    var(--font-weight-normal);
-
-    /* ── Letter spacing ─────────────────────────────────────────────────── */
-    --letter-spacing-normal: 0;
-    --letter-spacing-medium: 0.025em;
-    --letter-spacing-large:  0.05em;
-
-    /* ── Line heights ───────────────────────────────────────────────────── */
-    --line-height-heading: var(--line-height-tight);
-    --line-height-text:    var(--line-height-normal);
-
-    /* ── Font size scale (T-shirt) ──────────────────────────────────────── */
-    --font-size-2xs:     var(--size-12);
-    --font-size-xs:      var(--size-14);
-    --font-size-sm:      var(--size-16);
-    --font-size-md:      var(--size-18);
-    --font-size-lg:      var(--size-24);
-    --font-size-xl:      var(--size-48);
-    --font-size-2xl:     var(--size-64);
-    --font-size-display: var(--size-96);
-
-    /* ── Fluid font sizes ───────────────────────────────────────────────── */
-    /*
-     * Fluid typography using the Utopia method — https://utopia.fyi
-     *
-     * Each value is a clamp(min, intercept + slope×vw, max) expression where
-     * intercept and slope are calculated so the font size equals exactly `min`
-     * at a 320px viewport and exactly `max` at a 1440px viewport, with a
-     * perfectly linear scale in between.
-     *
-     *   slope     = (max_px − min_px) / (1440 − 320)
-     *   intercept = min_px − slope × 320   (converted to rem)
-     *
-     * Use these instead of fixed T-shirt sizes wherever you want type to
-     * scale continuously with the viewport, without breakpoints.
-     */
-    --font-size-fluid-2xs:     clamp(0.625rem,  0.5893rem + 0.1786vw, 0.75rem);   /*  10 →  12px */
-    --font-size-fluid-xs:      clamp(0.75rem,   0.7143rem + 0.1786vw, 0.875rem);  /*  12 →  14px */
-    --font-size-fluid-sm:      clamp(0.875rem,  0.8393rem + 0.1786vw, 1rem);      /*  14 →  16px */
-    --font-size-fluid-md:      clamp(1rem,      0.9643rem + 0.1786vw, 1.125rem);  /*  16 →  18px */
-    --font-size-fluid-lg:      clamp(1.125rem,  1.0179rem + 0.5357vw, 1.5rem);    /*  18 →  24px */
-    --font-size-fluid-xl:      clamp(1.5rem,    1.0714rem + 2.1429vw, 3rem);      /*  24 →  48px */
-    --font-size-fluid-2xl:     clamp(3rem,      2.7143rem + 1.4286vw, 4rem);      /*  48 →  64px */
-    --font-size-fluid-display: clamp(4rem,      3.4286rem + 2.8571vw, 6rem);      /*  64 →  96px */
-
-    /* ── Body ───────────────────────────────────────────────────────────── */
-    --font-size-text: var(--font-size-fluid-md);
-    --font-size-small: var(--font-size-fluid-sm);
-
-    /* ── Headings ───────────────────────────────────────────────────────── */
-    --font-size-heading-01: var(--font-size-fluid-xl);
-    --font-size-heading-02: var(--font-size-fluid-lg);
-    --font-size-heading-03: var(--font-size-fluid-md);
-    --font-size-heading-04: var(--font-size-fluid-sm);
-    --font-size-heading-05: var(--font-size-fluid-sm);
-    --font-size-heading-06: var(--font-size-fluid-sm);
-
-    /* ── Readability ────────────────────────────────────────────────────── */
-    /*
-     * Max line length in ch units (width of "0" character).
-     * Prevents overly long lines causing reading fatigue (WCAG 1.4.8).
-     * Headings use a shorter value: larger font = physically wider chars.
-     */
-    --max-width-heading:   50ch;
-    --max-width-paragraph: 70ch;
-  }
-}

package/tokens/semantic/z-index.css

@@ -1,14 +0,0 @@
-/* semantic/z-index.css */
-@layer config {
-  :root {
-    --z-index-below:     -1;   /* background decorative elements */
-    --z-index-base:       0;
-    --z-index-raised:    10;   /* cards, sticky elements within flow */
-    --z-index-dropdown:  100;  /* dropdowns, popovers */
-    --z-index-sticky:    200;  /* sticky header/sidebar */
-    --z-index-drawer:    300;  /* drawer, side panel */
-    --z-index-modal:     400;  /* modal dialogs */
-    --z-index-toast:     500;  /* notifications, toasts */
-    --z-index-tooltip:   600;  /* tooltips (always on top) */
-  }
-}