@teseor/css 1.16.0 → 2.0.1

package/src/components/overlays/tooltip/api.json

@@ -49,7 +49,7 @@
     },
     {
       "name": "--ui-tooltip-z",
-      "default": "var(--ui-z-tooltip)",
+      "default": "var(--ui-z-index-tooltip)",
       "description": "Z-index stacking order"
     },
     {

package/src/components/overlays/tooltip/index.scss

@@ -22,7 +22,7 @@
     // @desc Font size
     --_font-size: var(--ui-tooltip-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
     // @desc Z-index stacking order
-    --_z: var(--ui-tooltip-z, var(--ui-z-tooltip, #{t.$z-tooltip}));
+    --_z: var(--ui-tooltip-z, var(--ui-z-index-tooltip, #{t.$z-index-tooltip}));
     // @desc Arrow size
     --_arrow-size: var(--ui-tooltip-arrow-size, calc(#{t.$unit} / 2));
   }

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

@@ -38,7 +38,7 @@
     },
     {
       "name": "--ui-blockquote-line-height",
-      "default": "var(--ui-leading-lg)",
+      "default": "var(--ui-line-height-lg)",
       "description": "Line height"
     }
   ]

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

@@ -6,7 +6,7 @@
   .blockquote {
     --_space-1: var(--ui-space-1, #{t.$space-1});
     --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
-    --_leading-sm: var(--ui-leading-sm, #{t.$leading-sm});
+    --_leading-sm: var(--ui-line-height-sm, #{t.$line-height-sm});
     --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
     // @desc Border color
     --_border-color: var(--ui-blockquote-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
@@ -19,7 +19,7 @@
     // @desc Font size
     --_font-size: var(--ui-blockquote-font-size, var(--ui-font-size-lg, #{t.$font-size-lg}));
     // @desc Line height
-    --_line-height: var(--ui-blockquote-line-height, var(--ui-leading-lg, #{t.$leading-lg}));
+    --_line-height: var(--ui-blockquote-line-height, var(--ui-line-height-lg, #{t.$line-height-lg}));
   }
 
   // @modifier variant

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

@@ -8,7 +8,7 @@
   // Inline code
   .code {
     --_font-mono: var(--ui-font-mono, #{t.$font-mono});
-    --_leading-tight-sm: var(--ui-leading-tight-sm, #{t.$leading-tight-sm});
+    --_leading-tight-sm: var(--ui-line-height-tight-sm, #{t.$line-height-tight-sm});
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
     // @desc Font size
     --_font-size: var(--ui-code-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));

package/src/components/typography/code-block/api.json

@@ -48,7 +48,7 @@
     },
     {
       "name": "--ui-code-block-line-height",
-      "default": "var(--ui-leading-tight-sm)",
+      "default": "var(--ui-line-height-tight-sm)",
       "description": "Line height"
     },
     {

package/src/components/typography/code-block/index.scss

@@ -21,7 +21,7 @@
     // @desc Font size
     --_font-size: var(--ui-code-block-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
     // @desc Line height
-    --_line-height: var(--ui-code-block-line-height, var(--ui-leading-tight-sm, #{t.$leading-tight-sm}));
+    --_line-height: var(--ui-code-block-line-height, var(--ui-line-height-tight-sm, #{t.$line-height-tight-sm}));
     // @desc Corner radius
     --_radius: var(--ui-code-block-radius, var(--ui-radius-md, #{t.$radius-md}));
   }

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

@@ -15,12 +15,12 @@
     },
     {
       "name": "--ui-heading-line-height",
-      "default": "var(--ui-leading-xl)",
+      "default": "var(--ui-line-height-xl)",
       "description": "Line height"
     },
     {
       "name": "--ui-heading-weight",
-      "default": "var(--ui-weight-bold)",
+      "default": "var(--ui-font-weight-bold)",
       "description": "Weight"
     },
     {
@@ -35,7 +35,7 @@
     },
     {
       "name": "--ui-heading-line-height-4xl",
-      "default": "var(--ui-leading-4xl)",
+      "default": "var(--ui-line-height-4xl)",
       "description": "Line height 4xl"
     },
     {
@@ -45,7 +45,7 @@
     },
     {
       "name": "--ui-heading-line-height-3xl",
-      "default": "var(--ui-leading-3xl)",
+      "default": "var(--ui-line-height-3xl)",
       "description": "Line height 3xl"
     },
     {
@@ -55,7 +55,7 @@
     },
     {
       "name": "--ui-heading-line-height-2xl",
-      "default": "var(--ui-leading-2xl)",
+      "default": "var(--ui-line-height-2xl)",
       "description": "Line height 2xl"
     },
     {
@@ -65,7 +65,7 @@
     },
     {
       "name": "--ui-heading-line-height-xl",
-      "default": "var(--ui-leading-xl)",
+      "default": "var(--ui-line-height-xl)",
       "description": "Line height at extra-large size"
     },
     {
@@ -75,7 +75,7 @@
     },
     {
       "name": "--ui-heading-line-height-lg",
-      "default": "var(--ui-leading-lg)",
+      "default": "var(--ui-line-height-lg)",
       "description": "Line height at large size"
     },
     {
@@ -85,7 +85,7 @@
     },
     {
       "name": "--ui-heading-line-height-md",
-      "default": "var(--ui-leading-tight-md)",
+      "default": "var(--ui-line-height-tight-md)",
       "description": "Line height at medium size"
     },
     {
@@ -95,7 +95,7 @@
     },
     {
       "name": "--ui-heading-line-height-sm",
-      "default": "var(--ui-leading-tight-sm)",
+      "default": "var(--ui-line-height-tight-sm)",
       "description": "Line height at small size"
     }
   ]

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

@@ -7,13 +7,13 @@
 @layer components.tokens {
   .list {
     // @desc Spacing
-    --_spacing: var(--ui-list-spacing, #{t.$unit});
+    --_spacing: var(--ui-list-spacing, var(--ui-unit, #{t.$unit}));
     // @desc Marker color
     --_marker-color: var(--ui-list-marker-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
     // @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/theming.docs.html

@@ -28,6 +28,27 @@ weight: 2
   <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="demo-theme">
@@ -46,8 +67,29 @@ weight: 2
   </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 -->
+<!-- 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>
@@ -58,12 +100,3 @@ weight: 2
     <p>{{ t('card_with_custom_padding', 'Card with custom padding') }}</p>
   </div>
 </div>
-
-<!-- @full_theme_example -->
-<!-- Complete theme customization -->
-<div class="demo-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

@@ -112,32 +112,32 @@ $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;
@@ -170,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

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 -->