css-is-awesome 1.4.0 → 1.5.0

package/AGENTS.md

@@ -25,7 +25,7 @@ When asked to add a UI element, follow this order:
 3. **Never invent `cia-*` class names.** That prefix is library-owned. Consumer code uses its own naming.
 4. **All values come from tokens.** Never hardcode `#3A5FCD`, `1rem`, `8px`. Use `cia.color(primary)`, `cia.space(4)`, `cia.radius(md)`.
 5. **No BEM.** No `__element` / `--modifier` chains. `cia-` is a single-class namespace prefix, not BEM.
-6. **No JavaScript.** Cia ships zero JS in the npm package. The 6 interactive components (accordion, modal, tooltip, dropdown, tabs, copy-button) use native HTML primitives — `<details name>`, `<dialog>`, `[popover]`, radio + `:has()`. **This rule binds cia, not you.** If you're *consuming* cia (building an app/component library on top of it), write JavaScript/framework components freely — React, SVG charts, interactivity, all of it — and use cia purely for styling (mixins + tokens). Compose the mixins to build any visual you want; you are not limited to cia's pre-made component mixins.
+6. **No JavaScript.** Cia ships zero JS in the npm package. The 6 interactive components (accordion, modal, tooltip, dropdown, tabs, copy-button) use native HTML primitives — `<details name>`, `<dialog>`, `[popover]`, radio + `:has()`. Mobile navigation follows the same doctrine: the `hamburger` / `drawer` / `sheet` / `dock` mixin family rides `[popover]` + CSS Grid — see the `mobile-nav` recipe (hamburger + drawer) and the `bottom-nav` recipe (dock + sheets). **This rule binds cia, not you.** If you're *consuming* cia (building an app/component library on top of it), write JavaScript/framework components freely — React, SVG charts, interactivity, all of it — and use cia purely for styling (mixins + tokens). Compose the mixins to build any visual you want; you are not limited to cia's pre-made component mixins.
 7. **Pages stack by named grid areas — the layout mixins own the shell.** Every page's structure is declared once as `grid-template-areas` (`"navbar" "hero" … "footer"`), and each section claims its slot with `grid-area`. Never hand-write that: use `cia.page-layout(default | sidebar-left | sidebar-right | holy-grail)` for a full viewport shell (100dvh, sticky footer, auto mobile collapse), `cia.layout((sidebar content toc), $tracks: …)` for custom rows of regions, and `cia.page-header` / `cia.page-main` / `cia.page-footer` / `cia.area(name)` for the children. Named areas are the single source of truth for stacking — mobile is just a different `grid-template-areas`, not a pile of margin overrides. Baseline since 2020.
 8. **Style semantic state off ARIA, not a parallel `data-*`.** When a state has an ARIA source of truth, hook your styles to *that* attribute: `[aria-selected="true"]`, `[aria-expanded="true"]`, `[aria-invalid="true"]`, `:disabled, [aria-disabled="true"]`, `[aria-pressed="true"]`, `[aria-checked="true"]`, `[aria-current]`, `[role="tab"]`. Then the state can't be styled without setting the ARIA a screen reader needs — **accessible-by-construction**, one source of truth for looks + a11y. Reserve `data-*` for **cosmetic-only** variants (`data-size`, `data-variant`, `data-color`) that carry no ARIA meaning. cia's own components already do this where native HTML doesn't cover it (`[aria-current="page"]`, `[aria-selected="true"]`, `[role="option"]`).
 

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [1.5.0](https://github.com/Jerry2d3d/css-is-awesome/compare/v1.4.0...v1.5.0) (2026-09-04)
+
+
+### Bug Fixes
+
+* **themes:** spacing aliases in all 24 themes; picker highlight contained ([6d02e9f](https://github.com/Jerry2d3d/css-is-awesome/commit/6d02e9f8d9176ebc1401639e22b23706a3d652fa))
+
+
+### Features
+
+* **mobile:** the mobile toolkit - dock + sheet mixins, bottom-nav recipe, /docs/mobile ([a983bee](https://github.com/Jerry2d3d/css-is-awesome/commit/a983bee5b9e2b16e38b2fb26e316e7811359245f)), closes [#6](https://github.com/Jerry2d3d/css-is-awesome/issues/6)
+
 # [1.4.0](https://github.com/Jerry2d3d/css-is-awesome/compare/v1.3.1...v1.4.0) (2026-09-04)
 
 

package/README.md

@@ -8,7 +8,7 @@
 
 **Docs:** [jerry2d3d.github.io/css-is-awesome](https://jerry2d3d.github.io/css-is-awesome/) · **Install:** `npm install css-is-awesome`
 
-> **Shipped in 1.0.0:** a **recipes book** for building any component in any framework using cia mixins — `dialog`, `combobox` and `print-to-pdf` today, with `datepicker`, `data-table` and `command-palette` queued. AI agents read recipes via MCP and generate components in your stack; humans read them at [`/docs/recipes`](https://jerry2d3d.github.io/css-is-awesome/docs/recipes/).
+> **Shipped in 1.0.0:** a **recipes book** for building any component in any framework using cia mixins — five recipes today (`dialog`, `combobox`, `print-to-pdf`, `mobile-nav`, `bottom-nav`), with `datepicker`, `data-table` and `command-palette` queued. AI agents read recipes via MCP and generate components in your stack; humans read them at [`/docs/recipes`](https://jerry2d3d.github.io/css-is-awesome/docs/recipes/).
 
 ## For AI agents — start here
 
@@ -59,7 +59,7 @@ npm install -D sass
 <link rel="stylesheet" href="/cia/themes/boilerplate/theme.css">
 ```
 
-Author your own class names; the mixin handles the styling. Mixins for buttons, forms, layout, typography, color, motion, plus the six zero-JS components: `accordion`, `modal`, `tooltip`, `dropdown`, `tabs`, `copy-button` — plus print-to-PDF via a pure-CSS `@media print` layer. Full reference at [`/docs/mixins`](https://jerry2d3d.github.io/css-is-awesome/docs/mixins/).
+Author your own class names; the mixin handles the styling. Mixins for buttons, forms, layout, typography, color, motion, plus the six zero-JS components: `accordion`, `modal`, `tooltip`, `dropdown`, `tabs`, `copy-button` — plus the mobile navigation family (`hamburger`, `drawer`, `sheet`, `dock`) and print-to-PDF via a pure-CSS `@media print` layer. Full reference at [`/docs/mixins`](https://jerry2d3d.github.io/css-is-awesome/docs/mixins/).
 
 **Two imports, two jobs.** Emit the tokens once from your root/global stylesheet (`@use 'css-is-awesome';` or `<link>` a theme file), then import the **zero-emit authoring barrel** in each component stylesheet:
 
@@ -202,7 +202,9 @@ Missing font files don't error, so a silent tofu box is the failure mode. If you
 
 cia ships **no component library** — deliberately. Interactive patterns arrive as *recipes*: portable markdown files at [`scss/recipes/`](./scss/recipes/) that give you the correct HTML, the `cia.X` mixin calls to style it, and an a11y checklist graded against WCAG 2.2 AA. Copy the pattern into your own framework; you own the component, cia owns the styling and the accessibility homework.
 
-**Shipped:** `dialog`, `combobox`, `print-to-pdf`. Queued next: `datepicker`, `data-table`, `command-palette`.
+**Shipped:** `dialog`, `combobox`, `print-to-pdf`, `mobile-nav`, `bottom-nav`. Queued next: `datepicker`, `data-table`, `command-palette`.
+
+**Mobile navigation is system API, not an exercise for the reader.** Four mixins — `cia.hamburger`, `cia.drawer`, `cia.sheet`, `cia.dock` — cover both phone layouts: the **flex layout** (one fluid nav/main/footer shell that reshapes with the screen, hamburger opening a slide-in drawer — recipe [`mobile-nav`](./scss/recipes/mobile-nav.md)) and the **app layout** (a fixed bottom dock whose slots open slide-up sheets — recipe [`bottom-nav`](./scss/recipes/bottom-nav.md)). Zero JavaScript: everything rides CSS Grid and the native Popover API — the browser owns open state, `aria-expanded`, Esc and light dismiss. The docs site dogfoods the app layout on phones.
 
 Humans read them at [`/docs/recipes`](https://jerry2d3d.github.io/css-is-awesome/docs/recipes/); AI agents pull them over MCP with `list_recipes` / `get_recipe`.
 

package/css-is-awesome.instructions.md

@@ -467,8 +467,8 @@ Components call `cia.space(4)` → `var(--space-4)`. The t-shirt names previousl
 ## Recipes — build a component without a component library
 
 cia ships **no component library on purpose**. When you need an interactive
-pattern (dialog, combobox, print-to-PDF), read the matching *recipe* instead of
-inventing markup or reaching for a dependency.
+pattern (dialog, combobox, print-to-PDF, mobile navigation), read the matching
+*recipe* instead of inventing markup or reaching for a dependency.
 
 A recipe is a markdown file at `scss/recipes/<name>.md` carrying:
 
@@ -477,8 +477,13 @@ A recipe is a markdown file at `scss/recipes/<name>.md` carrying:
 - an a11y checklist graded against WCAG 2.2 AA
 - framework-neutral notes so it ports to React / Vue / Svelte / vanilla
 
-**Shipped today:** `dialog`, `combobox`, `print-to-pdf`. Queued next:
-`datepicker`, `data-table`, `command-palette`.
+**Shipped today:** `dialog`, `combobox`, `print-to-pdf`, `mobile-nav`,
+`bottom-nav`. Queued next: `datepicker`, `data-table`, `command-palette`.
+
+The two mobile recipes ride the `hamburger` / `drawer` / `sheet` / `dock`
+mixin family — zero JS on the native Popover API. `mobile-nav` is the flex
+layout (fluid shell + hamburger drawer); `bottom-nav` is the app layout
+(bottom dock + slide-up sheets).
 
 How to reach them:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-is-awesome",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "A token-driven SCSS design system with light/dark theming, semantic color tokens, and a 800+ LOC mixin API.",
   "homepage": "https://github.com/Jerry2d3d/css-is-awesome#readme",
   "bugs": {

package/public/theme.css

@@ -163,6 +163,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);
   --radius-lg: var(--r-lg);
@@ -659,6 +669,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);
   --radius-lg: var(--r-lg);
@@ -834,6 +854,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   /* Radius alias */
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);
@@ -1021,6 +1051,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   /* Radius alias — mirrors --r-* with standard names so
      `m.radius(size)` in the library finds --radius-<size>. */
   --radius-sm: var(--r-sm);
@@ -1211,6 +1251,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);
   --radius-lg: var(--r-lg);
@@ -1388,6 +1438,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   /* Radius alias */
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);
@@ -1578,6 +1638,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   /* Radius alias — mirrors --r-* with standard names so
      `m.radius(size)` in the library finds --radius-<size>. */
   --radius-sm: var(--r-sm);
@@ -1735,6 +1805,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);
   --radius-lg: var(--r-lg);
@@ -1912,6 +1992,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   /* Radius alias — mirrors --r-* with standard names so
      `m.radius(size)` in the library finds --radius-<size>. */
   --radius-sm: var(--r-sm);
@@ -2084,6 +2174,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   /* Radius alias */
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);
@@ -2265,6 +2365,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);
   --radius-lg: var(--r-lg);
@@ -2442,6 +2552,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   /* Radius alias — Press is editorial, xl stays tight (6px) */
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);
@@ -2633,6 +2753,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   /* Radius alias — mirrors --r-* with standard names so
      `m.radius(size)` in the library finds --radius-<size>.
      Press is editorial and angular: xl stays tight (4px). */
@@ -2803,6 +2933,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);
   --radius-lg: var(--r-lg);
@@ -2972,6 +3112,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   /* Radius alias */
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);
@@ -3144,6 +3294,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   /* Radius alias */
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);
@@ -3304,6 +3464,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);
   --radius-lg: var(--r-lg);
@@ -3472,6 +3642,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   /* Radius alias */
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);
@@ -3813,6 +3993,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   --radius-sm: 0;
   --radius-md: 0;
   --radius-lg: 0;
@@ -3996,6 +4186,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   /* Radius alias — CRT has hard pixel corners, so every slot is 0 */
   --radius-sm: 0;
   --radius-md: 0;
@@ -4161,6 +4361,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   --radius-sm: 0;
   --radius-md: 0;
   --radius-lg: 0;

package/public/themes/boilerplate/theme.css

@@ -136,6 +136,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);
   --radius-lg: var(--r-lg);

package/public/themes/cupertino/theme.css

@@ -140,6 +140,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);
   --radius-lg: var(--r-lg);

package/public/themes/cupertino-dark/theme.css

@@ -170,6 +170,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   /* Radius alias */
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);

package/public/themes/cupertino-light/theme.css

@@ -188,6 +188,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   /* Radius alias — mirrors --r-* with standard names so
      `m.radius(size)` in the library finds --radius-<size>. */
   --radius-sm: var(--r-sm);

package/public/themes/glass/theme.css

@@ -172,6 +172,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);
   --radius-lg: var(--r-lg);

package/public/themes/glass-dark/theme.css

@@ -180,6 +180,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   /* Radius alias */
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);

package/public/themes/glass-light/theme.css

@@ -207,6 +207,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   /* Radius alias — mirrors --r-* with standard names so
      `m.radius(size)` in the library finds --radius-<size>. */
   --radius-sm: var(--r-sm);

package/public/themes/graphite/theme.css

@@ -137,6 +137,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);
   --radius-lg: var(--r-lg);

package/public/themes/graphite-dark/theme.css

@@ -201,6 +201,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   /* Radius alias — mirrors --r-* with standard names so
      `m.radius(size)` in the library finds --radius-<size>. */
   --radius-sm: var(--r-sm);

package/public/themes/graphite-light/theme.css

@@ -170,6 +170,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   /* Radius alias */
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);

package/public/themes/press/theme.css

@@ -162,6 +162,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);
   --radius-lg: var(--r-lg);

package/public/themes/press-dark/theme.css

@@ -169,6 +169,16 @@
   --space-7: 3rem; /* major gap        */
   --space-8: 4rem; /* page section     */
   --space-9: 6rem; /* hero rhythm      */
+  /* T-shirt aliases - var() references into this theme's numbered scale,
+     so re-tuning a numbered step re-tunes its alias automatically. */
+  --space-xs: var(--space-1);
+  --space-sm: var(--space-2);
+  --space-md: var(--space-4);
+  --space-lg: var(--space-5);
+  --space-xl: var(--space-6);
+  --space-2xl: var(--space-7);
+  --space-3xl: var(--space-8);
+  --space-4xl: var(--space-9);
   /* Radius alias — Press is editorial, xl stays tight (6px) */
   --radius-sm: var(--r-sm);
   --radius-md: var(--r-md);