@uncinq/design-tokens 0.3.0 → 1.0.0

package/README.md

@@ -49,14 +49,17 @@ Scoped to a specific component. Generic component tokens are provided by [@uncin
 
 ```css
 --alert-border-radius: var(--radius-none);
---btn-padding: var(--spacing-control);
+--btn-padding-inline: var(--spacing-control);
+--btn-padding-block: var(--spacing-control);
 ```
 
 ---
 
 ## Naming convention
 
-All tokens follow the pattern: `--{category}-{subcategory?}-{variant}-{state?}`
+### Semantic tokens
+
+Global semantic tokens follow: `--{category}-{subcategory?}-{variant}-{state?}`
 
 ```
 --{category}                     --color
@@ -65,14 +68,36 @@ All tokens follow the pattern: `--{category}-{subcategory?}-{variant}-{state?}`
       -{state}                   --color-text-disabled
 ```
 
+### Component tokens
+
+Component tokens follow: `--{component}-{property}-{sub-property?}-{state?}`
+
+The property mirrors the CSS property name — `background-color`, `border-color`, `text-decoration-color` — so the token reads the same way as the CSS declaration it controls.
+
+```
+--{component}                    --btn
+  -{property}                    --btn-background-color
+    -{sub-property}              --btn-text-decoration-color  (text-decoration + color)
+      -{state}                   --btn-background-color-hover
+```
+
 ### Rules
 
 - **Lowercase kebab-case** — always
 - **No component names** in primitive or semantic tokens (`--button-*` belongs in component tokens, not here)
 - **Semantic tokens are named by intent** — they may reference a primitive via `var()` or carry a raw value when the value itself has design intent (e.g. `--z-index-modal: 400`, `--radius-pill: 9999px`)
+- **`color-[role]` for all color tokens** — `color` is the category prefix, the UI role follows: `color-background`, `color-border`, `color-text`, `color-accent`, `color-placeholder`. This groups all color tokens alphabetically under `color-*` and mirrors the structure of global semantic tokens (`--color-background` → `--btn-color-background`). `background` is never abbreviated: `color-background` not `color-bg`.
 - **States at the end** — `-hover`, `-focus`, `-active`, `-disabled`, `-checked`
-- **`color-*` prefix for all color values** — even when the CSS property is `background-color`, `border-color`, etc.
-- **Alphabetical order** — tokens within a file are sorted alphabetically; group related tokens with a comment when the file has many entries:
+- **Alphabetical order** — tokens within a file are sorted alphabetically within each group; group related tokens with a comment when the file has many entries:
+
+| Token | Role | CSS property |
+| --- | --- | --- |
+| `--btn-color-background` | background | `background-color` |
+| `--btn-color-border` | border | `border-color` |
+| `--btn-color-text` | text | `color` |
+| `--btn-color-text-decoration` | text-decoration | `text-decoration-color` |
+| `--form-color-accent` | accent | `color` |
+| `--input-color-placeholder` | placeholder | `color` |
 
 ```css
 /* Brand */
@@ -98,28 +123,27 @@ All tokens follow the pattern: `--{category}-{subcategory?}-{variant}-{state?}`
 
 | Category | Covers | Example tokens |
 | --- | --- | --- |
-| `color` | All color values | `--color-brand`, `--color-bg-muted`, `--color-text-on-dark` |
+| `color` | All color values | `--color-brand`, `--color-background-muted`, `--color-text-on-dark` |
 | `font-family` | Typefaces | `--font-family-sans`, `--font-family-heading` |
 | `font-size` | Text sizes | `--font-size-sm`, `--font-size-heading-01` |
 | `font-weight` | Weight values | `--font-weight-bold`, `--font-weight-heading` |
 | `line-height` | Line heights | `--line-height-tight`, `--line-height-heading` |
-| `letter-spacing` | Tracking | `--letter-spacing-large` |
-| `text-decoration` | Decoration props | `--text-decoration-underline`, `--text-decoration-offset` |
+| `letter-spacing` | Tracking | `--letter-spacing-none`, `--letter-spacing-md` |
+| `text-decoration` | Decoration props | `--text-decoration-offset` |
 | `spacing` | Margin / padding | `--spacing-md`, `--spacing-section` |
 | `size` | Width / height | `--size-16`, `--size-tablet` |
 | `radius` | Border radius | `--radius-md`, `--radius-pill` |
-| `border` | Border style/width | `--border-width-normal`, `--border-style-solid` |
+| `border` | Border style/width | `--border-width-normal`, `--border-style-normal` |
 | `shadow` | Box shadows | `--shadow-md`, `--shadow-center-sm` |
 | `duration` | Animation timing | `--duration-fast` |
 | `easing` | Timing functions | `--easing-bounce` |
 | `transition` | Shorthand transitions | `--transition-normal`, `--transition-color` |
 | `ratio` | Aspect ratios | `--ratio-16-9` |
-| `flex` | Flex-basis fractions | `--flex-half`, `--flex-third` |
 | `fluid-text` | Responsive fluid type scale (Utopia) | `--fluid-text-sm`, `--fluid-text-xl` |
 | `fluid-spacing` | Responsive fluid spacing scale (Utopia) | `--fluid-spacing-sm`, `--fluid-spacing-lg` |
 | `focus` | Focus ring tokens | `--focus-color`, `--focus-outline-width` |
 | `opacity` | Opacity values | `--opacity-disabled`, `--opacity-overlay` |
-| `span` | Grid column spans | `--span-6`, `--span-4` |
+| `span` | Grid column spans | `--span-full`, `--span-half` |
 | `z-index` | Stacking order | `--z-index-modal`, `--z-index-dropdown` |
 | `max-width` | Readability caps | `--max-width-paragraph` |
 
@@ -170,7 +194,7 @@ The primitive palette provides **11 steps per hue** (50 → 950), named numerica
 | `violet` | ≈ 293° | Modern violet |
 | `yellow` | ≈ 86° | Pure yellow |
 
-Plus `--color-black` and `--color-white` (with `*-rgb` variants for `rgb()` opacity usage).
+Plus `--color-black` and `--color-white`.
 
 **Step guide:**
 
@@ -188,7 +212,7 @@ Plus `--color-black` and `--color-white` (with `*-rgb` variants for `rgb()` opac
 | 900 | ≈ 0.33 | ≈ 0.41 | Near-dark, very high contrast |
 | 950 | ≈ 0.22 | ≈ 0.28 | Darkest tint, almost black |
 
-> **Note OKLCH** — L est perceptuellement uniforme, mais les hues intrinsèquement brillantes (amber, yellow, lime) ont des valeurs L naturellement plus élevées aux steps 400–700. C'est un comportement attendu, pas une erreur de calibration. Gray va dans l'autre sens (chroma ≈ 0, pas de boost de brillance, L légèrement plus bas). La colonne "L avg" est représentative des hues chromatiques froides (blue, red, green, violet…).
+> **Note on OKLCH** — L is perceptually uniform, but intrinsically bright hues (amber, yellow, lime) have naturally higher L values at steps 400–700. This is expected behavior, not a calibration error. Gray goes the other way (chroma ≈ 0, no brightness boost, L slightly lower). The "L avg" column is representative of cool chromatic hues (blue, red, green, violet…).
 
 ### Semantic color tokens
 
@@ -222,11 +246,11 @@ The default brand is **sienna** — a warm brick-red. Override it in your projec
 
 | Token | Default | Usage |
 |-------|---------|-------|
-| `--color-bg` | white | Page background |
-| `--color-bg-muted` | gray-100 | Subtle section backgrounds |
-| `--color-bg-surface` | = `--color-bg` | Card / panel backgrounds |
-| `--color-bg-media` | gray-200 | Image placeholders, skeleton loaders |
-| `--color-bg-accent` | = `--color-accent` | Highlighted sections |
+| `--color-background` | white | Page background |
+| `--color-background-muted` | gray-100 | Subtle section backgrounds |
+| `--color-background-surface` | = `--color-background` | Card / panel backgrounds |
+| `--color-background-media` | gray-200 | Image placeholders, skeleton loaders |
+| `--color-background-accent` | = `--color-accent` | Highlighted sections |
 
 #### Text
 
@@ -307,30 +331,61 @@ Then reference it in `tokens/semantic/color.css` or your project's `@layer confi
 
 ---
 
-## CSS cascade layers
+## Customization
 
-All tokens are declared inside `@layer config`, the lowest-priority layer in the stack:
+Two approaches are available depending on how deep the override needs to go.
 
-```css
-@layer config, base, layouts, vendors, components;
-```
+### 1 — CSS override (recommended)
 
-This means any project can **override any token** in its own `@layer config` block, simply by importing after this package:
+All tokens live in `@layer config`, the lowest-priority layer in the stack. Any `@layer config` block imported **after** this package wins by source order — no specificity tricks needed.
 
 ```css
-@import '@uncinq/design-tokens/tokens/index.css'; /* package defaults */
+@import '@uncinq/design-tokens';
 
-/* your project overrides — same layer, wins by order */
 @layer config {
   :root {
-    --color-brand: #0070f3;
-    --font-family-sans: 'Inter', system-ui, sans-serif;
+    --color-brand:        var(--color-violet-600);
+    --color-brand-muted:  var(--color-violet-100);
+    --color-brand-hover:  var(--color-violet-700);
+    --color-brand-strong: var(--color-violet-900);
+    --font-family-sans:   'Inter', system-ui, sans-serif;
   }
 }
 ```
 
+This covers most use cases: brand color, typography, spacing tweaks, component-level tokens.
+
 → MDN: [Using CSS cascade layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers)
 
+### 2 — JSON + build in the consuming project
+
+The package exports its raw JSON source files (`./tokens/*`). A project can source them directly in its own [Style Dictionary](https://styledictionary.com/) config alongside project-specific token files:
+
+```js
+// style-dictionary.config.js (in the consuming project)
+export default {
+  source: [
+    'node_modules/@uncinq/design-tokens/tokens/**/*.json',
+    'tokens/**/*.json', // project tokens — extend or override the package
+  ],
+  // ...
+};
+```
+
+Project token files that define the same path as a package token will override it during the build. New paths are additive.
+
+Use this approach to:
+
+- Redefine the primitive palette entirely (new brand hue, different scale)
+- Add semantic tokens that don't exist in the package
+- Generate additional output formats (JS, SCSS…)
+
+| Need | Approach |
+| --- | --- |
+| Change brand, typography, a few tokens | CSS `@layer config` |
+| Redefine the entire primitive palette | JSON + build |
+| Add project-specific tokens | JSON + build (or CSS if few) |
+
 ---
 
 ## Installation
@@ -348,48 +403,62 @@ yarn add @uncinq/design-tokens
 @import '@uncinq/design-tokens';
 
 /* or by layer */
-@import '@uncinq/design-tokens/tokens/primitive.css';
-@import '@uncinq/design-tokens/tokens/semantic.css';
+@import '@uncinq/design-tokens/css/primitive.css';
+@import '@uncinq/design-tokens/css/semantic.css';
 
 /* or file by file */
-@import '@uncinq/design-tokens/tokens/primitive/color.css';
-@import '@uncinq/design-tokens/tokens/semantic/color.css';
+@import '@uncinq/design-tokens/css/primitive/color.css';
+@import '@uncinq/design-tokens/css/semantic/color.css';
 ```
 
 ### Usage — CDN (no build step)
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@uncinq/design-tokens/tokens/index.css">
+<link rel="stylesheet" href="https://unpkg.com/@uncinq/design-tokens">
 ```
 
 ---
 
 ## File structure
 
+JSON source files (DTCG format — do not edit `dist/`):
+
 ```
 tokens/
-  index.css               ← imports all layers in order
   primitive/
-    color.css             ← color palette (Tailwind v3 — amber, blue, gray, green…)
-    font.css              ← font families, weights, line-heights, text-decoration
-    opacity.css           ← opacity scale (0 → 1)
-    shadow.css            ← box-shadow scale
-    size.css              ← rem scale (--size-1 → --size-1920)
+    blur.json             ← blur scale (xs → xl)
+    color.json            ← full color palette (OKLCH, 11 steps per hue)
+    font.json             ← font families, weights, sizes, line-heights
+    shadow.json           ← box-shadow scale
+    size.json             ← rem scale (--size-1 → --size-1920)
   semantic/
-    border.css            ← border styles and widths
-    color.css             ← purposeful color aliases (--color-brand, --color-bg…)
-    fluid.css             ← responsive clamp() scales (--fluid-text-*, --fluid-spacing-*)
-    focus.css             ← focus ring tokens (color, style, width, offset)
-    form.css              ← form control tokens (input, label, checkbox, switch…)
-    grid.css              ← columns, gap, flex fractions, integer spans (--span-1 → --span-24)
-    motion.css            ← duration, easing (standard + expressive + spring), transitions
-    opacity.css           ← purposeful opacity aliases (disabled, overlay)
-    radius.css            ← border-radius scale + purposeful aliases
-    ratio.css             ← aspect-ratio values (16/9, 4/3…)
-    size.css              ← T-shirt scale + breakpoint aliases
-    spacing.css           ← spacing scale + purposeful aliases
-    typography.css        ← font-size scale (fixed + fluid), heading sizes, max-widths
-    z-index.css           ← stacking order (below → tooltip)
+    blur.json             ← purposeful blur aliases
+    border.json           ← border styles and widths
+    color.json            ← purposeful color aliases (--color-brand, --color-background…)
+    focus.json            ← focus ring tokens (color, style, width, offset)
+    form.json             ← form control tokens (input, label, checkbox, switch…)
+    grid.json             ← columns, gap, flex fractions
+    icon.json             ← SVG icon tokens (data URI)
+    motion.json           ← duration, easing, transitions
+    opacity.json          ← purposeful opacity aliases (disabled, overlay)
+    radius.json           ← border-radius scale + purposeful aliases
+    ratio.json            ← aspect-ratio values (16/9, 4/3…)
+    shadow.json           ← purposeful shadow aliases
+    size.json             ← T-shirt scale + breakpoint aliases
+    spacing.json          ← spacing scale + fluid clamp() aliases
+    typography.json       ← font-size scale (fixed + fluid), heading sizes
+    z-index.json          ← stacking order
+```
+
+Generated CSS (`dist/css/` — built by `npm run build`, do not edit):
+
+```
+dist/css/
+  index.css               ← imports everything
+  primitive.css           ← imports all primitive files
+  semantic.css            ← imports all semantic files
+  primitive/              ← one file per tokens/primitive/*.json
+  semantic/               ← one file per tokens/semantic/*.json
 ```
 
 ---
@@ -398,5 +467,5 @@ tokens/
 
 - [DTCG — format and concepts](docs/dtcg.md)
 - [DTCG specification](https://tr.designtokens.org/format/) — W3C Community Group draft
-- [Style Dictionary](https://amzn.github.io/style-dictionary/) — token build pipeline (JSON → CSS/SCSS/JS)
+- [Style Dictionary v5](https://styledictionary.com/) — token build pipeline, see [docs/STYLE-DICTIONARY.md](docs/STYLE-DICTIONARY.md)
 - [MDN: CSS cascade layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers)

package/dist/css/primitive/blur.css

@@ -0,0 +1,14 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* primitive/blur.css */
+@layer config {
+  :root {
+    --blur-xs: 2px;
+    --blur-sm: 4px;
+    --blur-md: 8px;
+    --blur-lg: 16px;
+    --blur-xl: 32px;
+  }
+}

package/{tokens → dist/css}/primitive/color.css

@@ -1,20 +1,13 @@
-/* primitive/color.css */
-/*
- * Primitive color palette in OKLCH.
- * 11 steps per hue: 50 → 950.
- * Values align with Tailwind v4 hue angles.
- *
- * DO NOT reference these directly in components — use semantic tokens instead.
+/**
+ * Do not edit directly, this file was auto-generated.
  */
+
+/* primitive/color.css */
 @layer config {
   :root {
     --color-black: oklch(0 0 0);
-    --color-black-rgb: 0 0 0;
     --color-white: oklch(1 0 0);
-    --color-white-rgb: 255 255 255;
-
-    /* ── Amber — H ≈ 70° ───────────────────────────────────────────────── */
-    --color-amber-50:  oklch(0.987 0.022 95.277);
+    --color-amber-50: oklch(0.987 0.022 95.277);
     --color-amber-100: oklch(0.962 0.059 95.617);
     --color-amber-200: oklch(0.924 0.120 95.746);
     --color-amber-300: oklch(0.879 0.169 91.605);
@@ -25,9 +18,7 @@
     --color-amber-800: oklch(0.473 0.137 46.201);
     --color-amber-900: oklch(0.414 0.112 45.904);
     --color-amber-950: oklch(0.279 0.077 45.635);
-
-    /* ── Blue — H ≈ 260° ───────────────────────────────────────────────── */
-    --color-blue-50:  oklch(0.970 0.014 254.604);
+    --color-blue-50: oklch(0.970 0.014 254.604);
     --color-blue-100: oklch(0.932 0.032 255.585);
     --color-blue-200: oklch(0.882 0.059 254.128);
     --color-blue-300: oklch(0.809 0.105 251.813);
@@ -38,9 +29,7 @@
     --color-blue-800: oklch(0.424 0.199 265.638);
     --color-blue-900: oklch(0.379 0.146 265.522);
     --color-blue-950: oklch(0.282 0.091 267.935);
-
-    /* ── Cyan — H ≈ 215° ───────────────────────────────────────────────── */
-    --color-cyan-50:  oklch(0.984 0.019 200.873);
+    --color-cyan-50: oklch(0.984 0.019 200.873);
     --color-cyan-100: oklch(0.956 0.045 203.388);
     --color-cyan-200: oklch(0.917 0.080 205.041);
     --color-cyan-300: oklch(0.865 0.127 207.078);
@@ -51,9 +40,29 @@
     --color-cyan-800: oklch(0.450 0.085 224.283);
     --color-cyan-900: oklch(0.398 0.070 227.392);
     --color-cyan-950: oklch(0.302 0.056 229.695);
-
-    /* ── Gray — neutral ─────────────────────────────────────────────────── */
-    --color-gray-50:  oklch(0.985 0.002 247.839);
+    --color-emerald-50: oklch(0.979 0.021 166.113);
+    --color-emerald-100: oklch(0.950 0.052 163.051);
+    --color-emerald-200: oklch(0.905 0.093 164.150);
+    --color-emerald-300: oklch(0.845 0.143 164.978);
+    --color-emerald-400: oklch(0.765 0.177 163.223);
+    --color-emerald-500: oklch(0.696 0.170 162.480);
+    --color-emerald-600: oklch(0.596 0.145 163.225);
+    --color-emerald-700: oklch(0.508 0.118 165.612);
+    --color-emerald-800: oklch(0.432 0.095 166.913);
+    --color-emerald-900: oklch(0.378 0.077 168.940);
+    --color-emerald-950: oklch(0.262 0.051 172.552);
+    --color-fuchsia-50: oklch(0.977 0.017 320.058);
+    --color-fuchsia-100: oklch(0.952 0.037 318.852);
+    --color-fuchsia-200: oklch(0.903 0.076 319.062);
+    --color-fuchsia-300: oklch(0.833 0.145 321.434);
+    --color-fuchsia-400: oklch(0.740 0.238 322.160);
+    --color-fuchsia-500: oklch(0.667 0.295 322.150);
+    --color-fuchsia-600: oklch(0.591 0.293 322.896);
+    --color-fuchsia-700: oklch(0.518 0.253 323.949);
+    --color-fuchsia-800: oklch(0.452 0.211 324.591);
+    --color-fuchsia-900: oklch(0.401 0.170 325.612);
+    --color-fuchsia-950: oklch(0.293 0.136 325.661);
+    --color-gray-50: oklch(0.985 0.002 247.839);
     --color-gray-100: oklch(0.967 0.003 264.542);
     --color-gray-200: oklch(0.928 0.006 264.531);
     --color-gray-300: oklch(0.872 0.010 258.338);
@@ -64,9 +73,7 @@
     --color-gray-800: oklch(0.279 0.010 264.542);
     --color-gray-900: oklch(0.208 0.006 264.542);
     --color-gray-950: oklch(0.145 0.005 264.542);
-
-    /* ── Green — H ≈ 150° ─────────────────────────────────────────────── */
-    --color-green-50:  oklch(0.982 0.018 155.826);
+    --color-green-50: oklch(0.982 0.018 155.826);
     --color-green-100: oklch(0.962 0.044 156.743);
     --color-green-200: oklch(0.925 0.084 155.995);
     --color-green-300: oklch(0.871 0.150 154.449);
@@ -77,9 +84,7 @@
     --color-green-800: oklch(0.448 0.119 151.328);
     --color-green-900: oklch(0.393 0.095 152.535);
     --color-green-950: oklch(0.266 0.065 152.934);
-
-    /* ── Indigo — H ≈ 277° ────────────────────────────────────────────── */
-    --color-indigo-50:  oklch(0.962 0.018 272.314);
+    --color-indigo-50: oklch(0.962 0.018 272.314);
     --color-indigo-100: oklch(0.930 0.034 272.788);
     --color-indigo-200: oklch(0.870 0.065 274.039);
     --color-indigo-300: oklch(0.785 0.115 274.713);
@@ -90,9 +95,7 @@
     --color-indigo-800: oklch(0.398 0.195 277.366);
     --color-indigo-900: oklch(0.359 0.144 278.697);
     --color-indigo-950: oklch(0.257 0.090 281.288);
-
-    /* ── Lime — H ≈ 131° ──────────────────────────────────────────────── */
-    --color-lime-50:  oklch(0.986 0.031 120.757);
+    --color-lime-50: oklch(0.986 0.031 120.757);
     --color-lime-100: oklch(0.967 0.067 122.328);
     --color-lime-200: oklch(0.938 0.127 124.321);
     --color-lime-300: oklch(0.897 0.196 126.665);
@@ -103,9 +106,7 @@
     --color-lime-800: oklch(0.453 0.124 130.933);
     --color-lime-900: oklch(0.405 0.101 131.063);
     --color-lime-950: oklch(0.274 0.072 132.109);
-
-    /* ── Orange — H ≈ 48° ─────────────────────────────────────────────── */
-    --color-orange-50:  oklch(0.980 0.016 73.684);
+    --color-orange-50: oklch(0.980 0.016 73.684);
     --color-orange-100: oklch(0.954 0.038 75.164);
     --color-orange-200: oklch(0.901 0.076 70.697);
     --color-orange-300: oklch(0.837 0.128 66.290);
@@ -116,9 +117,7 @@
     --color-orange-800: oklch(0.470 0.157 37.304);
     --color-orange-900: oklch(0.408 0.123 38.172);
     --color-orange-950: oklch(0.266 0.079 36.259);
-
-    /* ── Pink — H ≈ 354° ──────────────────────────────────────────────── */
-    --color-pink-50:  oklch(0.971 0.014 343.198);
+    --color-pink-50: oklch(0.971 0.014 343.198);
     --color-pink-100: oklch(0.948 0.028 342.258);
     --color-pink-200: oklch(0.899 0.061 343.231);
     --color-pink-300: oklch(0.823 0.120 346.018);
@@ -129,9 +128,7 @@
     --color-pink-800: oklch(0.459 0.187 3.815);
     --color-pink-900: oklch(0.408 0.153 2.432);
     --color-pink-950: oklch(0.284 0.109 3.907);
-
-    /* ── Purple — H ≈ 304° ────────────────────────────────────────────── */
-    --color-purple-50:  oklch(0.977 0.014 308.299);
+    --color-purple-50: oklch(0.977 0.014 308.299);
     --color-purple-100: oklch(0.946 0.033 307.174);
     --color-purple-200: oklch(0.902 0.063 306.703);
     --color-purple-300: oklch(0.827 0.119 306.383);
@@ -142,9 +139,7 @@
     --color-purple-800: oklch(0.438 0.218 303.724);
     --color-purple-900: oklch(0.381 0.176 304.987);
     --color-purple-950: oklch(0.291 0.149 302.717);
-
-    /* ── Red — H ≈ 25° ────────────────────────────────────────────────── */
-    --color-red-50:  oklch(0.971 0.013 17.380);
+    --color-red-50: oklch(0.971 0.013 17.380);
     --color-red-100: oklch(0.936 0.032 17.717);
     --color-red-200: oklch(0.885 0.062 18.334);
     --color-red-300: oklch(0.808 0.114 19.571);
@@ -155,9 +150,7 @@
     --color-red-800: oklch(0.444 0.177 26.899);
     --color-red-900: oklch(0.396 0.141 25.723);
     --color-red-950: oklch(0.258 0.092 26.042);
-
-    /* ── Rose — H ≈ 16° ───────────────────────────────────────────────── */
-    --color-rose-50:  oklch(0.969 0.015 12.422);
+    --color-rose-50: oklch(0.969 0.015 12.422);
     --color-rose-100: oklch(0.941 0.030 12.580);
     --color-rose-200: oklch(0.892 0.058 10.001);
     --color-rose-300: oklch(0.810 0.101 2.432);
@@ -168,22 +161,7 @@
     --color-rose-800: oklch(0.455 0.188 13.697);
     --color-rose-900: oklch(0.410 0.159 10.272);
     --color-rose-950: oklch(0.271 0.105 12.094);
-
-    /* ── Sky — H ≈ 237° ───────────────────────────────────────────────── */
-    --color-sky-50:  oklch(0.977 0.013 236.620);
-    --color-sky-100: oklch(0.951 0.026 236.824);
-    --color-sky-200: oklch(0.901 0.058 230.902);
-    --color-sky-300: oklch(0.828 0.111 230.318);
-    --color-sky-400: oklch(0.746 0.160 232.661);
-    --color-sky-500: oklch(0.685 0.169 237.323);
-    --color-sky-600: oklch(0.588 0.158 241.966);
-    --color-sky-700: oklch(0.500 0.134 242.749);
-    --color-sky-800: oklch(0.443 0.110 240.790);
-    --color-sky-900: oklch(0.391 0.090 240.876);
-    --color-sky-950: oklch(0.293 0.066 243.157);
-
-    /* ── Sienna — H ≈ 23° (crimson #a90940 × terracotta) ─────────────── */
-    --color-sienna-50:  oklch(0.973 0.012 22.0);
+    --color-sienna-50: oklch(0.973 0.012 22.0);
     --color-sienna-100: oklch(0.945 0.028 22.5);
     --color-sienna-200: oklch(0.900 0.060 23.5);
     --color-sienna-300: oklch(0.832 0.108 25.0);
@@ -194,9 +172,18 @@
     --color-sienna-800: oklch(0.380 0.136 18.0);
     --color-sienna-900: oklch(0.322 0.106 16.0);
     --color-sienna-950: oklch(0.218 0.072 15.0);
-
-    /* ── Teal — H ≈ 183° ──────────────────────────────────────────────── */
-    --color-teal-50:  oklch(0.984 0.014 180.720);
+    --color-sky-50: oklch(0.977 0.013 236.620);
+    --color-sky-100: oklch(0.951 0.026 236.824);
+    --color-sky-200: oklch(0.901 0.058 230.902);
+    --color-sky-300: oklch(0.828 0.111 230.318);
+    --color-sky-400: oklch(0.746 0.160 232.661);
+    --color-sky-500: oklch(0.685 0.169 237.323);
+    --color-sky-600: oklch(0.588 0.158 241.966);
+    --color-sky-700: oklch(0.500 0.134 242.749);
+    --color-sky-800: oklch(0.443 0.110 240.790);
+    --color-sky-900: oklch(0.391 0.090 240.876);
+    --color-sky-950: oklch(0.293 0.066 243.157);
+    --color-teal-50: oklch(0.984 0.014 180.720);
     --color-teal-100: oklch(0.953 0.051 180.801);
     --color-teal-200: oklch(0.910 0.096 180.426);
     --color-teal-300: oklch(0.855 0.138 181.071);
@@ -207,9 +194,7 @@
     --color-teal-800: oklch(0.437 0.078 188.216);
     --color-teal-900: oklch(0.386 0.063 188.416);
     --color-teal-950: oklch(0.277 0.046 192.524);
-
-    /* ── Violet — H ≈ 293° ────────────────────────────────────────────── */
-    --color-violet-50:  oklch(0.969 0.016 293.756);
+    --color-violet-50: oklch(0.969 0.016 293.756);
     --color-violet-100: oklch(0.943 0.029 294.588);
     --color-violet-200: oklch(0.894 0.057 293.283);
     --color-violet-300: oklch(0.811 0.111 293.571);
@@ -220,9 +205,7 @@
     --color-violet-800: oklch(0.432 0.232 292.222);
     --color-violet-900: oklch(0.380 0.189 293.745);
     --color-violet-950: oklch(0.283 0.141 291.089);
-
-    /* ── Yellow — H ≈ 86° ─────────────────────────────────────────────── */
-    --color-yellow-50:  oklch(0.987 0.026 102.212);
+    --color-yellow-50: oklch(0.987 0.026 102.212);
     --color-yellow-100: oklch(0.973 0.071 103.193);
     --color-yellow-200: oklch(0.945 0.129 101.540);
     --color-yellow-300: oklch(0.905 0.182 98.111);

package/dist/css/primitive/font.css

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* primitive/font.css */
+@layer config {
+  :root {
+    --font-family-mono: ui-monospace, monospace;
+    --font-family-sans: system-ui, sans-serif;
+    --font-family-serif: Georgia, serif;
+    --font-weight-thin: 100;
+    --font-weight-extra-light: 200;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extra-bold: 800;
+    --font-weight-black: 900;
+    --line-height-none: 1;
+    --line-height-tight: 1.1;
+    --line-height-snug: 1.25;
+    --line-height-normal: 1.5;
+    --line-height-relaxed: 1.75;
+    --line-height-loose: 2;
+    --text-decoration-offset: 0.25rem;
+    --text-decoration-thickness: 1px;
+  }
+}

package/dist/css/primitive/shadow.css

@@ -0,0 +1,16 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* primitive/shadow.css */
+@layer config {
+  :root {
+    --shadow-none: 0 0 0 0 transparent;
+    --shadow-sm: 0 1px 2px 0 var(--color-shadow-normal), 0 1px 1px -1px var(--color-shadow-normal);
+    --shadow-md: 0 4px 6px -1px var(--color-shadow-normal), 0 2px 4px -2px var(--color-shadow-normal);
+    --shadow-lg: 0 10px 15px -3px var(--color-shadow-normal), 0 4px 6px -4px var(--color-shadow-normal);
+    --shadow-center-sm: 0 0 2px 2px var(--color-shadow-normal);
+    --shadow-center-md: 0 0 4px 4px var(--color-shadow-normal);
+    --shadow-center-lg: 0 0 8px 8px var(--color-shadow-normal);
+  }
+}

package/{tokens → dist/css}/primitive/size.css

@@ -1,20 +1,19 @@
-/* primitive/size.css */
-/*
- * Pixel-named rem scale.
- * Name = equivalent px value at 16px base, value = rem equivalent.
- * e.g. --size-16 = 1rem = 16px
+/**
+ * Do not edit directly, this file was auto-generated.
  */
+
+/* primitive/size.css */
 @layer config {
   :root {
-    --size-1:  0.0625rem;
-    --size-2:  0.125rem;
-    --size-3:  0.1875rem;
-    --size-4:  0.25rem;
-    --size-5:  0.3125rem;
-    --size-6:  0.375rem;
-    --size-7:  0.4375rem;
-    --size-8:  0.5rem;
-    --size-9:  0.5625rem;
+    --size-1: 0.0625rem;
+    --size-2: 0.125rem;
+    --size-3: 0.1875rem;
+    --size-4: 0.25rem;
+    --size-5: 0.3125rem;
+    --size-6: 0.375rem;
+    --size-7: 0.4375rem;
+    --size-8: 0.5rem;
+    --size-9: 0.5625rem;
     --size-10: 0.625rem;
     --size-11: 0.6875rem;
     --size-12: 0.75rem;
@@ -47,9 +46,7 @@
     --size-96: 6rem;
     --size-100: 6.25rem;
     --size-150: 9.375rem;
-
-    /* Screen widths */
-    --size-768:  48rem;
+    --size-768: 48rem;
     --size-1024: 64rem;
     --size-1200: 75rem;
     --size-1280: 80rem;

package/{tokens → dist/css}/primitive.css

@@ -4,6 +4,5 @@
 @import 'primitive/blur.css';
 @import 'primitive/color.css';
 @import 'primitive/font.css';
-@import 'primitive/opacity.css';
 @import 'primitive/shadow.css';
 @import 'primitive/size.css';

package/{tokens → dist/css}/semantic/blur.css

@@ -1,3 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
 /* semantic/blur.css */
 @layer config {
   :root {