css-is-awesome 1.4.0 → 1.6.0

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

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

@@ -197,6 +197,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). */

package/public/themes/prism/theme.css

@@ -134,6 +134,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/prism-dark/theme.css

@@ -157,6 +157,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/prism-light/theme.css

@@ -160,6 +160,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/sketchbook/theme.css

@@ -134,6 +134,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/sketchbook-dark/theme.css

@@ -173,6 +173,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/terminal/theme.css

@@ -135,6 +135,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/terminal-dark/theme.css

@@ -196,6 +196,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;

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

@@ -134,6 +134,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/scss/components/_navigation.scss

@@ -320,3 +320,86 @@
     transition: none;
   }
 }
+
+// ----------------------------------------------------------------------------
+// SHEET — bottom drawer with rounded shoulders; the mobile-app panel.
+// ----------------------------------------------------------------------------
+// A preset of drawer($side: bottom): slides up from the bottom edge,
+// caps its height so the page stays visible behind it (dvh survives
+// mobile URL-bar resizing), rounds the top corners, and pads for the
+// home-indicator safe area. Same zero-JS popover mechanics as drawer.
+//
+// Usage:
+//   .docs-sheet { @include sheet; }
+//   <section id="docs-sheet" class="docs-sheet" popover aria-label="Docs">…</section>
+
+@mixin sheet(
+  $size: auto,
+  $max: 72dvh,
+  $bg: surface-default,
+  $backdrop: rgba(0, 0, 0, 0.4),
+  $p: 5,
+  $r: xl
+) {
+  @include drawer($side: bottom, $size: $size, $bg: $bg, $backdrop: $backdrop, $p: $p);
+  max-block-size: $max;
+  border-start-start-radius: m.radius($r);
+  border-start-end-radius: m.radius($r);
+  padding-block-end: calc(#{m.space($p)} + env(safe-area-inset-bottom));
+}
+
+// ----------------------------------------------------------------------------
+// DOCK — fixed bottom bar; the mobile-app layout's navigation.
+// ----------------------------------------------------------------------------
+// The pattern the cia docs site runs on phones: a thumb-reach bar whose
+// slots open popover sheets (pair dock-item buttons with sheet() panels
+// via popovertarget — the browser manages aria-expanded, Esc, and light
+// dismiss; zero JavaScript). CSS Grid gives every slot an equal track.
+//
+// Usage:
+//   .dock       { @include dock(3); }
+//   .dock button { @include dock-item; }
+//   <nav class="dock" aria-label="Quick menu">
+//     <button popovertarget="docs-sheet">Docs</button>
+//     …
+//   </nav>
+
+@mixin dock($slots: 3, $bg: surface-default) {
+  @include m.print-hidden;
+  position: fixed;
+  inset-inline: 0;
+  inset-block-end: 0;
+  z-index: m.z(fixed);
+  display: grid;
+  grid-template-columns: repeat($slots, minmax(0, 1fr));
+  background: m.color($bg);
+  border-block-start: 1px solid m.color(border-default);
+  padding-block-end: env(safe-area-inset-bottom);
+}
+
+@mixin dock-item($accent: action-primary-default) {
+  @include m.button-reset;
+  @include m.focus-ring;
+  cursor: pointer;
+  display: grid;
+  justify-items: center;
+  align-content: center;
+  gap: m.space(1);
+  min-height: 3.5rem;                    /* 56px — comfortable thumb target */
+  padding: m.space(1) m.space(2);
+  color: m.color(text-secondary);
+  @include m.font(medium, 1);
+  @include m.transition(color, background-color);
+
+  > svg {
+    width: 1.35em;
+    height: 1.35em;
+  }
+
+  // Semantic state lives in ARIA: the browser sets aria-expanded on
+  // popovertarget invokers; aria-current marks a routed slot.
+  &[aria-expanded="true"],
+  &[aria-current] {
+    color: m.color($accent);
+  }
+}

package/scss/recipes/bottom-nav.md

@@ -0,0 +1,184 @@
+---
+name: bottom-nav
+description: Mobile-app layout — a fixed bottom dock whose slots open slide-up sheets, zero JavaScript on the Popover API.
+category: navigation
+complexity: medium
+cia-version: ">=1.5.0"
+---
+
+## Use this when
+
+Your page is a **tool** on mobile — docs with a section tree, a dashboard, an
+editor — and navigation belongs in thumb reach, app-style, instead of behind a
+top hamburger. This is the layout the cia docs site itself runs on phones.
+For simple site navigation (a menu of links), use the `mobile-nav` recipe's
+drawer instead.
+
+## Structure (raw HTML)
+
+A fixed bottom dock of buttons, each pointing at its own sheet via
+`popovertarget`. The browser manages open state, Esc, and light dismiss.
+
+```html
+<div data-cia-recipe="bottom-nav">
+  <!-- slide-up sheets — one per dock slot -->
+  <section id="nav-sheet" class="app-sheet" popover aria-label="Navigation">
+    <nav data-slot="nav">…section links…</nav>
+  </section>
+  <section id="tools-sheet" class="app-sheet" popover aria-label="Tools">
+    <div data-slot="tools">…controls…</div>
+  </section>
+
+  <!-- the dock -->
+  <nav class="app-dock" aria-label="Quick menu">
+    <button popovertarget="nav-sheet">Menu</button>
+    <button popovertarget="tools-sheet">Tools</button>
+    <a href="/search" aria-current="false">Search</a>
+  </nav>
+</div>
+```
+
+## Styling (cia mixins)
+
+```scss
+// AppDock.module.scss — component stylesheet, so import the zero-emit barrel.
+@use 'css-is-awesome/api' as cia;
+
+.app-dock {
+  // Hide above the mobile breakpoint — desktop has the full chrome.
+  display: none;
+
+  @include cia.media-down(lg) {
+    @include cia.dock(3);        // CSS Grid: one equal track per slot
+  }
+}
+.app-dock button,
+.app-dock a {
+  @include cia.dock-item;        // 56px thumb targets, ARIA-driven accent
+}
+
+.app-sheet {
+  @include cia.media-down(lg) {
+    @include cia.sheet;          // bottom drawer, 72dvh cap, rounded shoulders
+  }
+}
+```
+
+Give the page's scrollable content bottom padding so the fixed dock never
+covers the last lines: `padding-block-end: calc(6rem + env(safe-area-inset-bottom))`
+on the content region of your page layout.
+
+## Interactivity
+
+**Zero JavaScript.** Each dock button is a `popovertarget` invoker for its
+sheet; the browser keeps `aria-expanded` in sync (which is what lights the
+active slot via `cia.dock-item`), closes on Esc or outside tap, and stacks
+the sheet in the top layer above the dock. Opening one sheet auto-closes
+another (`popover="auto"` is exclusive). The slide-up animation rides
+`@starting-style` and degrades to an instant open on older engines.
+Popover is Baseline 2024 (Chrome 114, Firefox 125, Safari 17).
+
+## A11y checklist
+
+- [ ] The dock is a `<nav>` with an `aria-label`, discoverable as a landmark
+      ([WAI-ARIA APG: Landmark regions](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/))
+- [ ] Every slot is a real `<button>` (sheet openers) or `<a>` (route links)
+      with a visible text label — icons alone don't name a control
+      ([WCAG 4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html))
+- [ ] `aria-expanded` reflects each sheet's state — browser-managed for
+      `popovertarget` invokers; verify with an inspector
+      ([WAI-ARIA APG: Disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/))
+- [ ] Sheets carry `aria-label`s describing their content
+      ([WCAG 2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html))
+- [ ] Esc closes the open sheet and focus returns to its dock button (native
+      popover behavior — verify if you've added scripts)
+      ([WAI-ARIA APG: Dialog (Modal) keyboard](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/))
+- [ ] Slots are ≥ 44px targets; `cia.dock-item` defaults to 56px
+      ([WCAG 2.5.8 Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html))
+- [ ] Reduced motion honored — the sheet's slide disables under
+      `prefers-reduced-motion` (baked into `cia.drawer`)
+      ([WCAG 2.3.3 Animation from Interactions](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html))
+
+## Framework examples
+
+### React
+
+```jsx
+export function AppDock() {
+  return (
+    <>
+      <section id="nav-sheet" className={styles.appSheet} popover="auto" aria-label="Navigation">
+        <nav>…</nav>
+      </section>
+      <nav className={styles.appDock} aria-label="Quick menu">
+        <button popoverTarget="nav-sheet">Menu</button>
+      </nav>
+    </>
+  );
+}
+// React 19 forwards popover / popoverTarget as attributes — still no JS of yours.
+```
+
+### Vue
+
+```vue
+<template>
+  <section id="nav-sheet" class="app-sheet" popover aria-label="Navigation">
+    <nav>…</nav>
+  </section>
+  <nav class="app-dock" aria-label="Quick menu">
+    <button popovertarget="nav-sheet">Menu</button>
+  </nav>
+</template>
+```
+
+### Svelte
+
+```svelte
+<section id="nav-sheet" class="app-sheet" popover aria-label="Navigation">
+  <nav>…</nav>
+</section>
+<nav class="app-dock" aria-label="Quick menu">
+  <button popovertarget="nav-sheet">Menu</button>
+</nav>
+```
+
+### Vanilla (Web Component)
+
+```html
+<!-- The pattern IS vanilla HTML — the popover attributes are the whole
+     mechanism. Drop the Structure markup in as-is. -->
+<script type="module">
+  // Intentionally empty. Optional nicety: close the open sheet when a
+  // same-page link inside it is tapped —
+  // sheet.querySelectorAll('a[href^="#"]').forEach(a =>
+  //   a.addEventListener('click', () => sheet.hidePopover()));
+</script>
+```
+
+## Variants
+
+- **Mixed dock**: route links (`<a aria-current="page">`) and sheet openers
+  (`<button popovertarget>`) share the dock; `cia.dock-item` lights either
+  via its ARIA state.
+- **Two-slot / five-slot**: pass the count — `cia.dock(5)` — and the grid
+  redistributes; keep it ≤5 so labels stay readable.
+
+## Pitfalls
+
+- **`popover` hides sheets everywhere**, including desktop. If a sheet's
+  content should exist in desktop chrome instead (a sidebar, say), render it
+  twice — desktop region + mobile sheet — or move the node with CSS only.
+- **Padding under the dock**: forgetting the content's bottom padding hides
+  the page's last lines behind the bar (see Styling).
+- **Don't z-index against the sheets** — popovers live in the top layer; the
+  dock's `z-index` only matters against page content.
+- The dock is `position: fixed` — inside a transformed ancestor it will pin
+  to that ancestor, not the viewport. Keep it at the page level.
+
+## Related recipes
+
+- `mobile-nav` — hamburger + drawer for plain site navigation (the "flex
+  layout": one fluid shell that reshapes with the screen; this recipe is
+  the "app layout").
+- `dialog` — modal overlays on native `<dialog>`.

package/scss/recipes/combobox.md

@@ -501,6 +501,15 @@ Committed values render as removable chips before the input; the input clears af
 - **`<datalist>` styling is a dead end.** No browser lets you style the native popup. Don't burn time on it — if the design needs styled options, that's the signal to move to the custom variant.
 - **Filtering resets the active index.** After re-filtering, old indices point at different options. Reset `active` to `-1` on every `input` event (all examples above do).
 - **Scroll the active option into view** when the list overflows: `option.scrollIntoView({ block: "nearest" })` after moving the active index — omitted from the examples for brevity, needed in production with long lists.
+- **Phones: cap the listbox, thumb-size the options.** The `max-block-size: 16rem; overflow-y: auto` in the Styling section is what keeps a long list from running past the bottom of a small viewport — don't delete it when trimming. And `cia.dropdown-item` is padded for pointers (≥24px, the WCAG minimum); at touch widths, bump options to a comfortable 44px thumb target:
+
+  ```scss
+  [role="option"] {
+    @include cia.media-down(md) {
+      min-block-size: 44px;
+    }
+  }
+  ```
 
 ## Related recipes
 

package/scss/recipes/dialog.md

@@ -251,6 +251,26 @@ Override `.my-dialog` with `inset-inline-end: 0; margin-inline: auto 0; block-si
 
 cia's built-in keyframes are small entrance nudges, so a full-width drawer needs its own `@keyframes`. If an 8px slide is enough, skip the custom keyframe and use `@include cia.animate(slide-left);` — it reads the same duration/easing tokens and handles `prefers-reduced-motion` for you.
 
+### Bottom sheet on phones
+
+At phone widths a centered modal can feel cramped; the mobile-app convention is a bottom sheet. `cia.sheet` gives `<dialog>` the sheet's **box styling** — full-width at the bottom edge, 72dvh height cap, rounded shoulders, home-indicator safe-area padding — but its slide-up motion is built for `[popover]` elements: both the entry transition and the closed-state off-screen offset key on `:popover-open`, which a `<dialog>` never matches. So on `<dialog>` you must reset that offset for the `[open]` state, and the sheet opens in place instead of sliding:
+
+```scss
+.my-dialog {
+  @include cia.modal;
+
+  @include cia.media-down(md) {
+    @include cia.sheet;          // box styles only on <dialog> — see note above
+
+    &[open] {
+      translate: 0 0;            // undo the sheet's :popover-open-keyed offset
+    }
+  }
+}
+```
+
+If the slide-up entrance matters to you, use a `[popover]` element with the `bottom-nav` recipe's sheet pattern instead of `<dialog>` — you trade `.showModal()`'s focus trap for light dismiss and the full animation.
+
 ## Pitfalls
 
 - **Form inside dialog with another method:** Setting `<form method="get">` etc. inside a `<dialog>` breaks the native close-on-submit. Either nest a separate `<form method="dialog">` around the close buttons OR handle submission explicitly with `event.preventDefault()` + `dialogEl.close()`.
@@ -261,5 +281,6 @@ cia's built-in keyframes are small entrance nudges, so a full-width drawer needs
 ## Related recipes
 
 - [`bare-tags`](./_bare-tags.scss) — base bare `<dialog>` styling that applies if you skip a custom class name
+- `bottom-nav` — slide-up sheets on `[popover]` with the full animation; the alternative named in the bottom-sheet variant above
 - (planned v1.1) `command-palette.md` — Cmd+K palette built on `<dialog>` + combobox pattern
 - (planned v1.1) `toast.md` — non-modal transient notifications (`[popover]` based)

package/scss/recipes/mobile-nav.md

@@ -226,6 +226,9 @@ standalone mixin, so state can come from `:checked` instead of
 
 ## Related recipes
 
+- `bottom-nav` — bottom dock + slide-up sheets for pages that are tools on
+  mobile (the "app layout"; this recipe is the "flex layout": one fluid
+  shell that reshapes with the screen).
 - `dialog` — modal overlays for content (native `<dialog>`, same zero-JS
   philosophy).
 - `combobox` — another browser-native disclosure pattern.

package/scss/themes/boilerplate.scss

@@ -172,6 +172,17 @@
   --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);
   --radius-xl: 12px; --radius-full: 9999px;
   --font-primary: var(--font-sans);

package/scss/themes/cupertino-dark.scss

@@ -201,6 +201,17 @@
   --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);
+
 
 
 

package/scss/themes/cupertino-light.scss

@@ -219,6 +219,17 @@
   --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);
+
 
 
 

package/scss/themes/cupertino.scss

@@ -177,6 +177,17 @@
   --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);
   --radius-xl: 0.75rem; --radius-full: 9999px;
   --font-primary: var(--font-sans);

package/scss/themes/glass-dark.scss

@@ -211,6 +211,17 @@
   --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);
+
 
 
 

package/scss/themes/glass-light.scss

@@ -238,6 +238,17 @@
   --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);
+
 
 
 

package/scss/themes/glass.scss

@@ -211,6 +211,17 @@
   --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);
   --radius-xl: 0.75rem; --radius-full: 9999px;
   --font-primary: var(--font-sans);

package/scss/themes/graphite-dark.scss

@@ -232,6 +232,17 @@
   --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);
+