@teseor/css 1.15.7 → 2.0.0

package/src/components/typography/heading/index.scss

@@ -8,9 +8,9 @@
     // @desc Font size
     --_font-size: var(--ui-heading-font-size, var(--ui-font-size-xl, #{t.$font-size-xl}));
     // @desc Line height
-    --_line-height: var(--ui-heading-line-height, var(--ui-leading-xl, #{t.$leading-xl}));
+    --_line-height: var(--ui-heading-line-height, var(--ui-line-height-xl, #{t.$line-height-xl}));
     // @desc Weight
-    --_weight: var(--ui-heading-weight, var(--ui-weight-bold, #{t.$weight-bold}));
+    --_weight: var(--ui-heading-weight, var(--ui-font-weight-bold, #{t.$font-weight-bold}));
     // @desc Text color
     --_color: var(--ui-heading-color, var(--ui-color-text, #{t.$color-text}));
   }
@@ -20,49 +20,49 @@
     // @desc Font size 4xl
     --_font-size: var(--ui-heading-font-size-4xl, var(--ui-font-size-4xl, #{t.$font-size-4xl}));
     // @desc Line height 4xl
-    --_line-height: var(--ui-heading-line-height-4xl, var(--ui-leading-4xl, #{t.$leading-4xl}));
+    --_line-height: var(--ui-heading-line-height-4xl, var(--ui-line-height-4xl, #{t.$line-height-4xl}));
   }
 
   .heading--3xl {
     // @desc Font size 3xl
     --_font-size: var(--ui-heading-font-size-3xl, var(--ui-font-size-3xl, #{t.$font-size-3xl}));
     // @desc Line height 3xl
-    --_line-height: var(--ui-heading-line-height-3xl, var(--ui-leading-3xl, #{t.$leading-3xl}));
+    --_line-height: var(--ui-heading-line-height-3xl, var(--ui-line-height-3xl, #{t.$line-height-3xl}));
   }
 
   .heading--2xl {
     // @desc Font size 2xl
     --_font-size: var(--ui-heading-font-size-2xl, var(--ui-font-size-2xl, #{t.$font-size-2xl}));
     // @desc Line height 2xl
-    --_line-height: var(--ui-heading-line-height-2xl, var(--ui-leading-2xl, #{t.$leading-2xl}));
+    --_line-height: var(--ui-heading-line-height-2xl, var(--ui-line-height-2xl, #{t.$line-height-2xl}));
   }
 
   .heading--xl {
     // @desc Font size at extra-large size
     --_font-size: var(--ui-heading-font-size-xl, var(--ui-font-size-xl, #{t.$font-size-xl}));
     // @desc Line height at extra-large size
-    --_line-height: var(--ui-heading-line-height-xl, var(--ui-leading-xl, #{t.$leading-xl}));
+    --_line-height: var(--ui-heading-line-height-xl, var(--ui-line-height-xl, #{t.$line-height-xl}));
   }
 
   .heading--lg {
     // @desc Font size at large size
     --_font-size: var(--ui-heading-font-size-lg, var(--ui-font-size-lg, #{t.$font-size-lg}));
     // @desc Line height at large size
-    --_line-height: var(--ui-heading-line-height-lg, var(--ui-leading-lg, #{t.$leading-lg}));
+    --_line-height: var(--ui-heading-line-height-lg, var(--ui-line-height-lg, #{t.$line-height-lg}));
   }
 
   .heading--md {
     // @desc Font size at medium size
     --_font-size: var(--ui-heading-font-size-md, var(--ui-font-size-md, #{t.$font-size-md}));
     // @desc Line height at medium size
-    --_line-height: var(--ui-heading-line-height-md, var(--ui-leading-tight-md, #{t.$leading-tight-md}));
+    --_line-height: var(--ui-heading-line-height-md, var(--ui-line-height-tight-md, #{t.$line-height-tight-md}));
   }
 
   .heading--sm {
     // @desc Font size at small size
     --_font-size: var(--ui-heading-font-size-sm, var(--ui-font-size-sm, #{t.$font-size-sm}));
     // @desc Line height at small size
-    --_line-height: var(--ui-heading-line-height-sm, var(--ui-leading-tight-sm, #{t.$leading-tight-sm}));
+    --_line-height: var(--ui-heading-line-height-sm, var(--ui-line-height-tight-sm, #{t.$line-height-tight-sm}));
   }
 
 }

package/src/components/typography/list/api.json

@@ -31,7 +31,7 @@
     },
     {
       "name": "--ui-list-line-height",
-      "default": "var(--ui-leading-md)",
+      "default": "var(--ui-line-height-md)",
       "description": "Line height"
     }
   ]

package/src/components/typography/list/index.scss

@@ -13,7 +13,7 @@
     // @desc Indent
     --_indent: var(--ui-list-indent, var(--ui-space-3, #{t.$space-3}));
     // @desc Line height
-    --_line-height: var(--ui-list-line-height, var(--ui-leading-md, #{t.$leading-md}));
+    --_line-height: var(--ui-list-line-height, var(--ui-line-height-md, #{t.$line-height-md}));
   }
 
   // @modifier spacing

package/src/config/guides/accessibility.docs.html

@@ -2,7 +2,7 @@
 title: Accessibility
 description: Built-in accessibility features: reduced motion, system theme detection, high contrast, and keyboard focus indicators
 skipValidation: true
-weight: 3
+weight: 4
 ---
 
 <!-- @reduced_motion -->

package/src/config/guides/getting-started.docs.html

@@ -40,6 +40,6 @@ import '@teseor/css/dist/index.css';
 
 <!-- @customize -->
 <!-- Override design tokens with CSS custom properties. No build step required. -->
-<div class="theme-demo" style="--ui-hue-primary: 270">
+<div class="demo-theme" style="--ui-color-primary: oklch(55% 0.22 290)">
   <button class="ui-button">{{ t('purple_brand', 'Purple brand') }}</button>
 </div>

package/src/config/guides/theming.docs.html

@@ -6,64 +6,97 @@ weight: 2
 ---
 
 <!-- @brand_colors -->
-<!-- Change the entire color palette by adjusting hue values -->
-<div class="theme-demo">
+<!-- Override --ui-color-primary to change the entire color palette. All shades (light, dark, subtle, hover) derive automatically via color-mix(). -->
+<div class="demo-theme">
   <button class="ui-button">{{ t('primary', 'Primary') }}</button>
   <button class="ui-button ui-button--secondary">{{ t('secondary', 'Secondary') }}</button>
   <button class="ui-button ui-button--danger">{{ t('danger', 'Danger') }}</button>
 </div>
-<div class="theme-demo theme-purple">
+<div class="demo-theme demo-theme--purple">
   <button class="ui-button">{{ t('primary', 'Primary') }}</button>
   <button class="ui-button ui-button--secondary">{{ t('secondary', 'Secondary') }}</button>
   <button class="ui-button ui-button--danger">{{ t('danger', 'Danger') }}</button>
 </div>
-<div class="theme-demo theme-teal">
+<div class="demo-theme demo-theme--teal">
   <button class="ui-button">{{ t('primary', 'Primary') }}</button>
   <button class="ui-button ui-button--secondary">{{ t('secondary', 'Secondary') }}</button>
   <button class="ui-button ui-button--danger">{{ t('danger', 'Danger') }}</button>
 </div>
-<div class="theme-demo theme-orange">
+<div class="demo-theme demo-theme--orange">
   <button class="ui-button">{{ t('primary', 'Primary') }}</button>
   <button class="ui-button ui-button--secondary">{{ t('secondary', 'Secondary') }}</button>
   <button class="ui-button ui-button--danger">{{ t('danger', 'Danger') }}</button>
 </div>
 
+<!-- @radius_theming -->
+<!-- Override --ui-radius-base to control all corner radii at once. Set to 0 for sharp corners or increase for a softer look. sm/md/lg derive automatically via calc(). -->
+<div class="demo-theme demo-theme--sharp">
+  <button class="ui-button">{{ t('sharp_button', 'Sharp') }}</button>
+  <div class="ui-card">
+    <p>{{ t('sharp_radius', 'radius-base: 0') }}</p>
+  </div>
+</div>
+<div class="demo-theme">
+  <button class="ui-button">{{ t('default_button', 'Default') }}</button>
+  <div class="ui-card">
+    <p>{{ t('default_radius', 'radius-base: 0.5rem') }}</p>
+  </div>
+</div>
+<div class="demo-theme demo-theme--round">
+  <button class="ui-button">{{ t('round_button', 'Round') }}</button>
+  <div class="ui-card">
+    <p>{{ t('round_radius', 'radius-base: 1rem') }}</p>
+  </div>
+</div>
+
 <!-- @dark_mode -->
 <!-- Dark mode uses the CSS light-dark() function. Tokens resolve automatically based on color-scheme. Override with data-theme attribute. -->
-<div class="theme-demo">
+<div class="demo-theme">
   <div class="ui-card">
     <p>{{ t('follows_os_color_scheme', 'Follows OS color scheme') }}</p>
   </div>
 </div>
-<div class="theme-demo" data-theme="light">
+<div class="demo-theme" data-theme="light">
   <div class="ui-card">
     <p>{{ t('always_light', 'Always light') }}</p>
   </div>
 </div>
-<div class="theme-demo" data-theme="dark">
+<div class="demo-theme" data-theme="dark">
   <div class="ui-card">
     <p>{{ t('always_dark', 'Always dark') }}</p>
   </div>
 </div>
 
+<!-- @full_theme_examples -->
+<!-- Complete theme customization using just 2-3 root tokens. -->
+<div class="demo-theme demo-theme--corporate">
+  <button class="ui-button">{{ t('action', 'Action') }}</button>
+  <div class="ui-card">
+    <p>{{ t('corporate_theme', 'Corporate: teal, sharp corners, system font') }}</p>
+  </div>
+</div>
+<div class="demo-theme demo-theme--playful">
+  <button class="ui-button">{{ t('action', 'Action') }}</button>
+  <div class="ui-card">
+    <p>{{ t('playful_theme', 'Playful: orange, round corners') }}</p>
+  </div>
+</div>
+<div class="demo-theme demo-theme--minimal">
+  <button class="ui-button">{{ t('action', 'Action') }}</button>
+  <div class="ui-card">
+    <p>{{ t('minimal_theme', 'Minimal: neutral palette, no radius') }}</p>
+  </div>
+</div>
+
 <!-- @component_overrides -->
-<!-- Override specific component tokens -->
-<div class="theme-demo custom-buttons">
+<!-- Override specific component tokens for fine-grained control. -->
+<div class="demo-theme demo-buttons">
   <button class="ui-button ui-button--sm">{{ t('small', 'Small') }}</button>
   <button class="ui-button">{{ t('default', 'Default') }}</button>
   <button class="ui-button ui-button--lg">{{ t('large', 'Large') }}</button>
 </div>
-<div class="theme-demo custom-cards">
+<div class="demo-theme demo-cards">
   <div class="ui-card">
     <p>{{ t('card_with_custom_padding', 'Card with custom padding') }}</p>
   </div>
 </div>
-
-<!-- @full_theme_example -->
-<!-- Complete theme customization -->
-<div class="theme-demo theme-corporate">
-  <button class="ui-button">{{ t('action', 'Action') }}</button>
-  <div class="ui-card">
-    <p>{{ t('corporate_theme_with_teal_accent_and_sharp_corners', 'Corporate theme with teal accent and sharp corners') }}</p>
-  </div>
-</div>

package/src/config/guides/token-architecture.docs.html

@@ -0,0 +1,87 @@
+---
+title: Token Architecture
+description: Design token taxonomy — tiers, naming dictionary, theme roots, and derivation patterns
+skipValidation: true
+weight: 3
+---
+
+<!-- @token_tiers -->
+<!-- Tokens are organized into four tiers. Theme roots feed primitives, primitives feed semantic tokens, and semantic tokens feed component tokens. -->
+<pre>
+{{ t('tier_diagram',
+'Theme Roots          Primitives           Semantic              Component
+--ui-color-primary    --ui-color-*         --ui-color-text       --ui-button-bg
+--ui-unit             --ui-space-*         --ui-color-bg         --ui-input-height
+--ui-radius-base      --ui-row-*           --ui-color-border     --ui-card-radius
+--ui-font-sans        --ui-font-size-*     --ui-opacity-*        --ui-alert-bg
+                      --ui-radius-*        --ui-overlay-*') }}
+</pre>
+
+<!-- @naming_dictionary -->
+<!-- Every --ui-* token must use a prefix from this dictionary. The lint enforces it. -->
+<table class="ui-table">
+  <thead>
+    <tr>
+      <th>{{ t('col_prefix', 'Prefix') }}</th>
+      <th>{{ t('col_scales', 'Scales') }}</th>
+      <th>{{ t('col_example', 'Example') }}</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td>unit</td><td>{{ t('singleton', 'singleton') }}</td><td>--ui-unit</td></tr>
+    <tr><td>row</td><td>1–6</td><td>--ui-row-2</td></tr>
+    <tr><td>space</td><td>px, quarter, half, 0–8</td><td>--ui-space-2</td></tr>
+    <tr><td>color</td><td>{{ t('open_ended', 'open-ended') }}</td><td>--ui-color-primary</td></tr>
+    <tr><td>font</td><td>sans, mono</td><td>--ui-font-sans</td></tr>
+    <tr><td>font-size</td><td>xs–4xl</td><td>--ui-font-size-lg</td></tr>
+    <tr><td>font-weight</td><td>normal, medium, semibold, bold</td><td>--ui-font-weight-bold</td></tr>
+    <tr><td>line-height</td><td>{{ t('open_ended', 'open-ended') }}</td><td>--ui-line-height-md</td></tr>
+    <tr><td>letter-spacing</td><td>display, body, caps</td><td>--ui-letter-spacing-caps</td></tr>
+    <tr><td>radius</td><td>base, sm, md, lg, full</td><td>--ui-radius-md</td></tr>
+    <tr><td>border-width</td><td>sm, md, lg</td><td>--ui-border-width-sm</td></tr>
+    <tr><td>shadow</td><td>sm, md, lg</td><td>--ui-shadow-lg</td></tr>
+    <tr><td>z-index</td><td>base–debug (10 levels)</td><td>--ui-z-index-modal</td></tr>
+    <tr><td>duration</td><td>instant–slower</td><td>--ui-duration-fast</td></tr>
+    <tr><td>ease</td><td>default, in, out, in-out</td><td>--ui-ease-out</td></tr>
+    <tr><td>opacity</td><td>disabled, loading</td><td>--ui-opacity-disabled</td></tr>
+    <tr><td>overlay</td><td>bg, bg-light, bg-blur, bg-subtle</td><td>--ui-overlay-bg</td></tr>
+    <tr><td>heading</td><td>{{ t('open_ended', 'open-ended') }}</td><td>--ui-heading-1-size</td></tr>
+    <tr><td>body / body-sm</td><td>{{ t('open_ended', 'open-ended') }}</td><td>--ui-body-weight</td></tr>
+    <tr><td>caption / lead / eyebrow</td><td>{{ t('open_ended', 'open-ended') }}</td><td>--ui-caption-size</td></tr>
+    <tr><td>input</td><td>{{ t('open_ended', 'open-ended') }}</td><td>--ui-input-height</td></tr>
+  </tbody>
+</table>
+
+<!-- @theme_root_tokens -->
+<!-- Theme roots are the small set of tokens you override to create a brand theme. Everything else derives from them. -->
+<pre>
+{{ t('theme_roots_code',
+':root {
+  --ui-color-primary: oklch(0.6 0.2 260);   /* brand hue */
+  --ui-color-neutral: oklch(0.5 0.01 260);  /* neutral tint */
+  --ui-unit: 8px;                            /* grid base */
+  --ui-radius-base: 0.5rem;                  /* corner radius */
+  --ui-font-sans: system-ui, sans-serif;     /* body typeface */
+  --ui-font-mono: monospace;                 /* code typeface */
+}') }}
+</pre>
+
+<!-- @derivation -->
+<!-- Tokens use color-mix() and calc() to derive values from roots. Change one root and dozens of tokens update automatically. -->
+<pre>
+{{ t('derivation_code',
+'/* color-mix(): shade derivation from --ui-color-primary */
+--ui-color-primary-light:  color-mix(in oklch, var(--ui-color-primary), white 40%);
+--ui-color-primary-dark:   color-mix(in oklch, var(--ui-color-primary), black 30%);
+--ui-color-primary-subtle: color-mix(in oklch, var(--ui-color-primary), transparent 85%);
+
+/* calc(): radius derivation from --ui-radius-base */
+--ui-radius-sm:   calc(var(--ui-radius-base) * 0.5);
+--ui-radius-md:   var(--ui-radius-base);
+--ui-radius-lg:   calc(var(--ui-radius-base) * 1.5);
+--ui-radius-full: 9999px;
+
+/* calc(): spacing from --ui-unit */
+--ui-space-1: var(--ui-unit);           /* 8px */
+--ui-space-2: calc(var(--ui-unit) * 2); /* 16px */') }}
+</pre>

package/src/config/tokens/_variables.scss

@@ -21,9 +21,6 @@ $row-6: $row * 6;
 // 2. Colors — OKLCH for perceptual uniformity
 // ==========================================================================
 
-// Theming hue — used in HSL fallbacks for shadows, debug overlays
-$hue-primary: 220;
-
 // Base palette
 $color-primary: oklch(55% 0.22 250);
 $color-success: oklch(60% 0.18 145);
@@ -31,6 +28,30 @@ $color-warning: oklch(75% 0.18 70);
 $color-danger: oklch(60% 0.22 25);
 $color-neutral: oklch(50% 0.02 250);
 
+// Primary shades (CSS uses color-mix)
+$color-primary-light: oklch(75% 0.15 250);
+$color-primary-dark: oklch(40% 0.18 250);
+$color-primary-subtle: oklch(95% 0.03 250);
+$color-primary-hover: oklch(48% 0.20 250);
+
+// Success shades (CSS uses color-mix)
+$color-success-light: oklch(80% 0.12 145);
+$color-success-dark: oklch(45% 0.15 145);
+$color-success-subtle: oklch(95% 0.03 145);
+$color-success-hover: oklch(52% 0.16 145);
+
+// Warning shades (CSS uses color-mix)
+$color-warning-light: oklch(88% 0.12 70);
+$color-warning-dark: oklch(58% 0.15 70);
+$color-warning-subtle: oklch(96% 0.03 70);
+$color-warning-hover: oklch(66% 0.16 70);
+
+// Danger shades (CSS uses color-mix)
+$color-danger-light: oklch(80% 0.14 25);
+$color-danger-dark: oklch(45% 0.18 25);
+$color-danger-subtle: oklch(95% 0.03 25);
+$color-danger-hover: oklch(52% 0.20 25);
+
 // Neutral scale — HSL approximation of color-mix(in oklch, ...) results.
 // CSS tokens use oklch color-mix(); these HSL values are static SCSS
 // fallbacks for when custom properties are unavailable.
@@ -45,10 +66,6 @@ $color-neutral-700: hsl(220 10% 25%);
 $color-neutral-800: hsl(220 10% 15%);
 $color-neutral-900: hsl(220 10% 10%);
 
-// Primary shades (CSS uses color-mix)
-$color-primary-light: oklch(75% 0.15 250);
-$color-primary-dark: oklch(40% 0.18 250);
-
 // ==========================================================================
 // 3. Spacing — derived from $unit
 // ==========================================================================
@@ -95,43 +112,44 @@ $font-size-3xl: 2rem; // 32px
 $font-size-4xl: 2.5rem; // 40px
 
 // Tight line heights (compact UI elements)
-$leading-tight-xs: $row;
-$leading-tight-sm: $row;
-$leading-tight-md: $unit * 3;
-$leading-tight-lg: $unit * 3;
+$line-height-tight-xs: $row;
+$line-height-tight-sm: $row;
+$line-height-tight-md: $unit * 3;
+$line-height-tight-lg: $unit * 3;
 
 // Normal line heights (body text)
-$leading-xs: $row;
-$leading-sm: $unit * 3;
-$leading-md: $unit * 3;
-$leading-lg: $row-2;
-$leading-xl: $row-2;
-$leading-2xl: $row-2;
-$leading-3xl: $unit * 5;
-$leading-4xl: $unit * 6;
+$line-height-xs: $row;
+$line-height-sm: $unit * 3;
+$line-height-md: $unit * 3;
+$line-height-lg: $row-2;
+$line-height-xl: $row-2;
+$line-height-2xl: $row-2;
+$line-height-3xl: $unit * 5;
+$line-height-4xl: $unit * 6;
 
 // Font weights
-$weight-normal: 400;
-$weight-medium: 500;
-$weight-semibold: 600;
-$weight-bold: 700;
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
 
 // Letter spacing
-$tracking-display: -0.02em;
-$tracking-body: 0;
-$tracking-wide: 0.05em;
-$tracking-caps: 0.08em;
+$letter-spacing-display: -0.02em;
+$letter-spacing-body: 0;
+$letter-spacing-wide: 0.05em;
+$letter-spacing-caps: 0.08em;
 
 // Relative font sizes (for sub-elements sized relative to parent)
 $font-size-relative-xs: 0.6em;
 $font-size-relative-sm: 0.75em;
 
 // ==========================================================================
-// 5. Radius — derived from $unit
+// 5. Radius — derived from $radius-base (which defaults to $unit)
 // ==========================================================================
-$radius-sm: $unit * 0.5; // 4px
-$radius-md: $unit; // 8px
-$radius-lg: $unit * 2; // 16px
+$radius-base: $unit; // 8px — theme knob
+$radius-sm: $radius-base * 0.5; // 4px
+$radius-md: $radius-base; // 8px
+$radius-lg: $radius-base * 2; // 16px
 $radius-full: 9999px;
 
 // ==========================================================================
@@ -143,7 +161,7 @@ $border-width-lg: $unit * 0.5; // 4px
 $focus-ring-offset: -$border-width-md;
 
 // ==========================================================================
-// 7. Shadows — static hue fallback
+// 7. Shadows — neutral-tinted
 // ==========================================================================
 $shadow-sm: 0 1px 2px hsl(220 10% 20% / 0.05);
 $shadow-md: 0 4px 6px hsl(220 10% 20% / 0.1);
@@ -152,16 +170,16 @@ $shadow-lg: 0 10px 15px hsl(220 10% 20% / 0.15);
 // ==========================================================================
 // 8. Z-index scale
 // ==========================================================================
-$z-base: 0;
-$z-sticky: 100;
-$z-dropdown: 200;
-$z-overlay: 300;
-$z-modal: 400;
-$z-popover: 500;
-$z-tooltip: 600;
-$z-toast: 700;
-$z-drawer: 800;
-$z-debug: 9999;
+$z-index-base: 0;
+$z-index-sticky: 100;
+$z-index-dropdown: 200;
+$z-index-overlay: 300;
+$z-index-modal: 400;
+$z-index-popover: 500;
+$z-index-tooltip: 600;
+$z-index-toast: 700;
+$z-index-drawer: 800;
+$z-index-debug: 9999;
 
 // ==========================================================================
 // 9. Motion
@@ -205,17 +223,6 @@ $overlay-bg-blur: rgb(0 0 0 / 0.3);
 $overlay-bg-subtle: rgb(0 0 0 / 0.1);
 $stripe-highlight: rgb(255 255 255 / 0.15);
 
-// ==========================================================================
-// 11. Semantic spacing
-// ==========================================================================
-$spacing-xs: $space-1;
-$spacing-sm: $space-2;
-$spacing-md: $space-4;
-$spacing-lg: $space-6;
-$spacing-xl: $space-8;
-$spacing-gutter: $space-4;
-$spacing-section: $space-8;
-
 // ==========================================================================
 // 12. Component defaults
 // ==========================================================================

package/src/config/tokens/colors/index.scss

@@ -13,6 +13,24 @@
     --ui-color-primary-subtle: color-mix(in oklch, var(--ui-color-primary) 12%, white);
     --ui-color-primary-hover: color-mix(in oklch, var(--ui-color-primary) 85%, black);
 
+    // Success shades - auto-generated via color-mix
+    --ui-color-success-light: color-mix(in oklch, var(--ui-color-success) 50%, white);
+    --ui-color-success-dark: color-mix(in oklch, var(--ui-color-success) 75%, black);
+    --ui-color-success-subtle: color-mix(in oklch, var(--ui-color-success) 12%, white);
+    --ui-color-success-hover: color-mix(in oklch, var(--ui-color-success) 85%, black);
+
+    // Warning shades - auto-generated via color-mix
+    --ui-color-warning-light: color-mix(in oklch, var(--ui-color-warning) 50%, white);
+    --ui-color-warning-dark: color-mix(in oklch, var(--ui-color-warning) 75%, black);
+    --ui-color-warning-subtle: color-mix(in oklch, var(--ui-color-warning) 12%, white);
+    --ui-color-warning-hover: color-mix(in oklch, var(--ui-color-warning) 85%, black);
+
+    // Danger shades - auto-generated via color-mix
+    --ui-color-danger-light: color-mix(in oklch, var(--ui-color-danger) 50%, white);
+    --ui-color-danger-dark: color-mix(in oklch, var(--ui-color-danger) 75%, black);
+    --ui-color-danger-subtle: color-mix(in oklch, var(--ui-color-danger) 12%, white);
+    --ui-color-danger-hover: color-mix(in oklch, var(--ui-color-danger) 85%, black);
+
     // Neutral scale - auto-generated via color-mix
     --ui-color-neutral-50: color-mix(in oklch, var(--ui-color-neutral) 3%, white);
     --ui-color-neutral-100: color-mix(in oklch, var(--ui-color-neutral) 6%, white);

package/src/config/tokens/docs.html

@@ -73,16 +73,16 @@ skipValidation: true
 <!-- @z_index -->
 <!-- Layering scale with gaps to allow insertion without renumbering. -->
 :root {
-  --ui-z-base: 0;
-  --ui-z-sticky: 100;
-  --ui-z-dropdown: 200;
-  --ui-z-overlay: 300;
-  --ui-z-modal: 400;
-  --ui-z-popover: 500;
-  --ui-z-tooltip: 600;
-  --ui-z-toast: 700;
-  --ui-z-drawer: 800;
-  --ui-z-debug: 9999;
+  --ui-z-index-base: 0;
+  --ui-z-index-sticky: 100;
+  --ui-z-index-dropdown: 200;
+  --ui-z-index-overlay: 300;
+  --ui-z-index-modal: 400;
+  --ui-z-index-popover: 500;
+  --ui-z-index-tooltip: 600;
+  --ui-z-index-toast: 700;
+  --ui-z-index-drawer: 800;
+  --ui-z-index-debug: 9999;
 }
 
 <!-- @semantic_colors -->
@@ -102,14 +102,3 @@ skipValidation: true
   --ui-color-focus: var(--ui-color-primary-light);
 }
 
-<!-- @semantic_spacing -->
-<!-- Named spacing aliases that map to the numeric spacing scale for consistent layout patterns. -->
-:root {
-  --ui-spacing-xs: var(--ui-space-1);     /* 8px */
-  --ui-spacing-sm: var(--ui-space-2);     /* 16px */
-  --ui-spacing-md: var(--ui-space-4);     /* 32px */
-  --ui-spacing-lg: var(--ui-space-6);     /* 48px */
-  --ui-spacing-xl: var(--ui-space-8);     /* 64px */
-  --ui-spacing-gutter: var(--ui-space-4); /* 32px */
-  --ui-spacing-section: var(--ui-space-8);/* 64px */
-}

package/src/config/tokens/index.scss

@@ -9,7 +9,6 @@
 @use './zindex' as *;
 @use './motion' as *;
 @use './semantic-colors' as *;
-@use './semantic-spacing' as *;
 
 // Component tokens
 @use './input' as *;

package/src/config/tokens/radius.scss

@@ -1,9 +1,10 @@
 @layer tokens {
   :root {
-    // Radius - derived from --unit (8px)
-    --ui-radius-sm: calc(var(--ui-unit) * 0.5); // 4px
-    --ui-radius-md: var(--ui-unit); // 8px
-    --ui-radius-lg: calc(var(--ui-unit) * 2); // 16px
+    // Override --ui-radius-base to control all border radii at once
+    --ui-radius-base: var(--ui-unit); // 8px — the single theme knob
+    --ui-radius-sm: calc(var(--ui-radius-base) * 0.5); // 4px
+    --ui-radius-md: var(--ui-radius-base); // 8px
+    --ui-radius-lg: calc(var(--ui-radius-base) * 2); // 16px
     --ui-radius-full: 9999px;
   }
 }

package/src/config/tokens/shadows.scss

@@ -1,7 +1,8 @@
 @layer tokens {
   :root {
-    --ui-shadow-sm: 0 1px 2px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.05);
-    --ui-shadow-md: 0 4px 6px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.1);
-    --ui-shadow-lg: 0 10px 15px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.15);
+    // Shadows tinted by neutral color — changing --ui-color-neutral shifts shadow tone
+    --ui-shadow-sm: 0 1px 2px color-mix(in oklch, var(--ui-color-neutral) 20%, transparent);
+    --ui-shadow-md: 0 4px 6px color-mix(in oklch, var(--ui-color-neutral) 15%, transparent);
+    --ui-shadow-lg: 0 10px 15px color-mix(in oklch, var(--ui-color-neutral) 12%, transparent);
   }
 }