shelving 1.237.0 → 1.238.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.237.0",
+	"version": "1.238.0",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",

package/ui/README.md

@@ -10,25 +10,48 @@ The `ui` module exists so an app never hand-rolls the same form field, card, or
 
 A few conventions run through every component:
 
-- **Styling props, not CSS.** Visual options are props on the component — enumerated props for the scales (`color="red"`, `size="large"`, `space="none"`) and boolean props for on/off variants (`<Button strong>`, `<Section narrow>`, `<Flex wrap>`). Each maps to a class in a CSS Module. You never pass `style` or raw `className`.
+- **Styling props are for one-off overrides.** Visual options are props on the component — enumerated props for the scales (`color="red"`, `size="large"`, `space="none"`) and boolean props for on/off variants (`<Button strong>`, `<Section narrow>`, `<Flex wrap>`). Each maps to a class in a CSS Module. Reach for them when a component needs to look different in *one place* — the way the docs site tints its accents purple — not as the way to dress a whole app. You never pass `style` or raw `className`.
 - **Composition.** Higher-level components — a `*Page`, a `*Card` — take their identity from library components like [`Card`](/ui/Card), [`Section`](/ui/Section), [`Button`](/ui/Button), and [`Tag`](/ui/Tag) rather than shipping their own styling.
 - **Sentence case.** Titles, headings, and button labels capitalise only the first word.
-- **Theming via CSS variables.** Colour and spacing come from CSS custom properties with fallback chains, so a theme is a small set of variable overrides.
+- **Theme with CSS.** An app-wide custom look is a CSS file, not a wall of props. Write a `theme.css` that overrides the base design-token variables (and, where needed, per-component hooks) at `:root`, and import it after the library styles. The recommended workflow is to spend time tuning those variables to match your design — see [Theming](#theming) below.
 
 ## The styling system
 
 The styling system lives in `style/` and has four moving parts: design tokens, the tint scale, cascade layers, and the styling props. Components compose them in a predictable shape; consumers theme by overriding CSS custom properties at `:root`.
 
-**Design tokens.** `style/base.css` defines every design-token constant at `:root` — colours (`--color-*`), font sizes (`--size-*`), spacing (`--space-*`), radii (`--radius-*`), strokes (`--stroke-*`), shadows (`--shadow-*`), durations (`--duration-*`), font weights (`--weight-*`), and font faces (`--font-*`) — plus semantic aliases themes usually target instead (`--color-primary`, `--color-link`, `--color-success`, `--space-paragraph`, …). Components read these via `var(--token)`; `base.css` is `@import`ed at the top of every `*.module.css`, so the tokens and the cascade-layer order reach every component regardless of bundle order.
+**Design tokens.** Every design-token constant is defined at `:root`, split across the themed token modules in `style/` — each module owns one domain, documents the variables it defines, and is the page a theme author overrides. `style/layers.css` is the cascade-layer anchor; every `*.module.css` `@import`s it plus the specific token modules it references, so the tokens and the layer order reach every component regardless of bundle order. The domains are: colours ([`getColorClass`](/ui/getColorClass)), font sizes ([`getSizeClass`](/ui/getSizeClass)), font weights ([`getWeightClass`](/ui/getWeightClass)), font faces ([`getFontClass`](/ui/getFontClass)), spacing ([`getSpaceClass`](/ui/getSpaceClass)), widths ([`getWidthClass`](/ui/getWidthClass)), radii ([`getRadiusClass`](/ui/getRadiusClass)), strokes ([`getStrokeClass`](/ui/getStrokeClass)), shadows ([`getShadowClass`](/ui/getShadowClass)), and durations ([`getDurationClass`](/ui/getDurationClass)). Each also defines the semantic aliases a theme usually targets (`--color-primary`, `--color-link`, `--space-paragraph`, …). Components read tokens via `var(--token)`.
 
 **The tint scale.** All colour flows from one anchor variable, `--tint-50`, from which a 21-step ladder is computed and *recomputed* under [`TINT_CLASS`](/ui/TINT_CLASS) — the heart of how `color=` and `status=` retint a whole subtree. The ladder, the recompute trick, the painting conventions, and the theming guide all live on the [`TINT_CLASS`](/ui/TINT_CLASS) page.
 
 **Cascade layers.** Styles are ordered by `@layer`, lowest to highest priority: `defaults` (`:root` tokens, the tint ladder, body baseline) → `components` (the bulk of the CSS: `.card`, `.button`, …) → `variants` (cross-cutting opt-in modifiers, which always beat components) → `overrides` (top-priority structural fixes like `:first-child` / `:last-child` margin collapses). Unlayered rules beat all layered rules, so a theme should set tokens at `:root` or wrap its rules in `@layer`.
 
-**Styling props.** The cross-cutting visual options are props, each backed by a helper in `style/` that maps the prop to a class. Colour and status move the tint anchor — [`getColorClass`](/ui/getColorClass) and [`getStatusClass`](/ui/getStatusClass); size, alignment, and font family come from [`getTypographyClass`](/ui/getTypographyClass); spacing, padding, and gap from [`getSpaceClass`](/ui/getSpaceClass), [`getPaddingClass`](/ui/getPaddingClass), and [`getGapClass`](/ui/getGapClass); width constraints from [`getWidthClass`](/ui/getWidthClass); flex layout from [`getFlexClass`](/ui/getFlexClass); and opt-in scrolling from [`getScrollClass`](/ui/getScrollClass). Each helper's page lists its exact prop values and what they set. A component opts into the props it wants by extending the matching `*Props` interfaces and composing the `getXxxClass(props)` calls.
+**Styling props.** The cross-cutting visual options are props, each backed by a helper in `style/` that maps the prop to a class. Colour and status move the tint anchor — [`getColorClass`](/ui/getColorClass) and [`getStatusClass`](/ui/getStatusClass); font size, weight, and family come from [`getSizeClass`](/ui/getSizeClass), [`getWeightClass`](/ui/getWeightClass), and [`getFontClass`](/ui/getFontClass), which [`getTypographyClass`](/ui/getTypographyClass) combines with text alignment and tint; spacing, padding, and gap from [`getSpaceClass`](/ui/getSpaceClass), [`getPaddingClass`](/ui/getPaddingClass), and [`getGapClass`](/ui/getGapClass); width constraints from [`getWidthClass`](/ui/getWidthClass); flex layout from [`getFlexClass`](/ui/getFlexClass); and opt-in scrolling from [`getScrollClass`](/ui/getScrollClass). Each helper's page lists its exact prop values and what they set. A component opts into the props it wants by extending the matching `*Props` interfaces and composing the `getXxxClass(props)` calls.
 
 Each painting component also exposes its own theme hooks — a single tint hook (`--card-tint`) to recolour the whole component, plus per-property hooks (`--card-background`, `--card-radius`, …) for surgical overrides. Those are documented in each component's own **Styling** section (see [`Card`](/ui/Card) for the precedent).
 
+## Theming
+
+The recommended way to give an app its own look is a **theme stylesheet**, not styling props. Create a `theme.css`, override the base design-token variables at `:root`, and import it after the library styles:
+
+```css
+/* theme.css — imported after shelving/ui styles */
+:root {
+	--color-primary: oklch(58% 0.25 300); /* purple brand */
+	--font-body: "Inter", system-ui;
+	--radius: 0.5rem; /* tighter corners everywhere */
+	--space: 1.125rem; /* roomier spacing scale */
+}
+```
+
+Each base token lives in a themed module that documents the variables it defines and which ones a theme usually overrides. Work from broadest (a palette colour or scale root) to narrowest (a single semantic alias):
+
+- [weight](/ui/getWeightClass) · [size](/ui/getSizeClass) · [font](/ui/getFontClass) — typography (`--weight-*`, `--size-*`, `--font-*`, `--case-label`).
+- [color](/ui/getColorClass) — palette, semantic, and brand colours (`--color-*`).
+- [space](/ui/getSpaceClass) · [width](/ui/getWidthClass) — layout spacing and widths (`--space-*`, `--width-*`).
+- [radius](/ui/getRadiusClass) · [stroke](/ui/getStrokeClass) · [shadow](/ui/getShadowClass) · [duration](/ui/getDurationClass) — surface tokens (`--radius-*`, `--stroke-*`, `--shadow-*`, `--duration-*`).
+
+The **tint ladder** is the one exception that doesn't follow the override-a-variable pattern: its 21 steps are *recomputed* from a single anchor inside every tinted scope, so you move the anchor rather than overriding individual steps. See [`TINT_CLASS`](/ui/TINT_CLASS) for the full theming guide, and each component's **Styling** section for its per-component hooks.
+
 ## Finding your way around
 
 The components below are listed in the index following this page; this is the short version of where to start reading.

package/ui/app/App.d.ts

@@ -1,5 +1,16 @@
 import type { ReactElement } from "react";
-import "../style/base.css";
+import "../style/layers.css";
+import "../style/Color.module.css";
+import "../style/Duration.module.css";
+import "../style/Font.module.css";
+import "../style/Radius.module.css";
+import "../style/Shadow.module.css";
+import "../style/Size.module.css";
+import "../style/Space.module.css";
+import "../style/Stroke.module.css";
+import "../style/Tint.module.css";
+import "../style/Weight.module.css";
+import "../style/Width.module.css";
 import type { PossibleMeta } from "../util/index.js";
 import type { ChildProps } from "../util/props.js";
 /**
@@ -12,7 +23,7 @@ export interface AppProps extends PossibleMeta, ChildProps {
 /**
  * Root component for an application, providing the top-level `Meta` context and global styles.
  * - Descendants can read or update metadata via the provided `<Meta>` context.
- * - Design tokens and body baseline typography are set globally via `style/base.css`.
+ * - Design tokens and body baseline typography are set globally via the `style/` token modules (`Color`, `Size`, `Font`, …).
  *
  * @param children The application content.
  * @param meta The root meta (app name, root URL, language, etc.).

package/ui/app/App.js

@@ -1,10 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { MetaContext, requireMeta } from "../misc/MetaContext.js";
-import "../style/base.css";
+// Load the global design tokens, cascade-layer order, and body baseline. Each module owns its own
+// `:root` tokens (and body rules where relevant); see `modules/ui/README.md` for the styling system.
+import "../style/layers.css";
+import "../style/Color.module.css";
+import "../style/Duration.module.css";
+import "../style/Font.module.css";
+import "../style/Radius.module.css";
+import "../style/Shadow.module.css";
+import "../style/Size.module.css";
+import "../style/Space.module.css";
+import "../style/Stroke.module.css";
+import "../style/Tint.module.css";
+import "../style/Weight.module.css";
+import "../style/Width.module.css";
 /**
  * Root component for an application, providing the top-level `Meta` context and global styles.
  * - Descendants can read or update metadata via the provided `<Meta>` context.
- * - Design tokens and body baseline typography are set globally via `style/base.css`.
+ * - Design tokens and body baseline typography are set globally via the `style/` token modules (`Color`, `Size`, `Font`, …).
  *
  * @param children The application content.
  * @param meta The root meta (app name, root URL, language, etc.).

package/ui/app/App.tsx

@@ -1,6 +1,19 @@
 import type { ReactElement } from "react";
 import { MetaContext, requireMeta } from "../misc/MetaContext.js";
-import "../style/base.css";
+// Load the global design tokens, cascade-layer order, and body baseline. Each module owns its own
+// `:root` tokens (and body rules where relevant); see `modules/ui/README.md` for the styling system.
+import "../style/layers.css";
+import "../style/Color.module.css";
+import "../style/Duration.module.css";
+import "../style/Font.module.css";
+import "../style/Radius.module.css";
+import "../style/Shadow.module.css";
+import "../style/Size.module.css";
+import "../style/Space.module.css";
+import "../style/Stroke.module.css";
+import "../style/Tint.module.css";
+import "../style/Weight.module.css";
+import "../style/Width.module.css";
 import type { PossibleMeta } from "../util/index.js";
 import type { ChildProps } from "../util/props.js";
 
@@ -14,7 +27,7 @@ export interface AppProps extends PossibleMeta, ChildProps {}
 /**
  * Root component for an application, providing the top-level `Meta` context and global styles.
  * - Descendants can read or update metadata via the provided `<Meta>` context.
- * - Design tokens and body baseline typography are set globally via `style/base.css`.
+ * - Design tokens and body baseline typography are set globally via the `style/` token modules (`Color`, `Size`, `Font`, …).
  *
  * @param children The application content.
  * @param meta The root meta (app name, root URL, language, etc.).

package/ui/block/Address.module.css

@@ -1,4 +1,5 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Space.module.css";
 
 @layer components {
 	.address,

package/ui/block/Block.module.css

@@ -1,4 +1,4 @@
-@import "../style/base.css";
+@import "../style/layers.css";
 
 @layer components {
 	.block {

package/ui/block/Blockquote.module.css

@@ -1,4 +1,8 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Space.module.css";
+@import "../style/Stroke.module.css";
+@import "../style/Tint.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.blockquote,

package/ui/block/Caption.module.css

@@ -1,4 +1,7 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Size.module.css";
+@import "../style/Space.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.caption,

package/ui/block/Card.md

@@ -62,7 +62,7 @@ import { Card, Subheading } from "shelving/ui";
 | `--card-transition` | Transition | `all var(--duration-fast)` (150ms) |
 | `--card-focus-border` | Focus outline | `var(--stroke-focus) solid var(--color-focus)` |
 
-**Global tokens it reads** — move these to retheme broadly rather than overriding ladder steps directly: the tint ladder `--tint-00` / `--tint-80` / `--tint-90` / `--tint-95`, plus `--space-normal`, `--space-paragraph`, `--radius-normal`, `--stroke-normal`, `--stroke-focus`, `--color-focus`, and `--duration-fast`.
+**Global tokens it reads** — move these to retheme broadly rather than overriding ladder steps directly: the tint ladder [`--tint-00`](/ui/TINT_CLASS) / [`--tint-80`](/ui/TINT_CLASS) / [`--tint-90`](/ui/TINT_CLASS) / [`--tint-95`](/ui/TINT_CLASS), plus [`--space-normal`](/ui/getSpaceClass), [`--space-paragraph`](/ui/getSpaceClass), [`--radius-normal`](/ui/getRadiusClass), [`--stroke-normal`](/ui/getStrokeClass), [`--stroke-focus`](/ui/getStrokeClass), [`--color-focus`](/ui/getColorClass), and [`--duration-fast`](/ui/getDurationClass).
 
 ```css
 /* Theme: borderless cards with a soft shadow and tighter corners. */

package/ui/block/Card.module.css

@@ -1,4 +1,10 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Color.module.css";
+@import "../style/Duration.module.css";
+@import "../style/Radius.module.css";
+@import "../style/Space.module.css";
+@import "../style/Stroke.module.css";
+@import "../style/Tint.module.css";
 
 @layer defaults {
 	.card {

package/ui/block/Definitions.module.css

@@ -1,4 +1,9 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Font.module.css";
+@import "../style/Size.module.css";
+@import "../style/Space.module.css";
+@import "../style/Tint.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.definitions,

package/ui/block/Divider.module.css

@@ -1,4 +1,7 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Space.module.css";
+@import "../style/Stroke.module.css";
+@import "../style/Tint.module.css";
 
 @layer components {
 	.divider,

package/ui/block/Heading.md

@@ -53,7 +53,7 @@ import { Heading } from "shelving/ui";
 | `--heading-size` | Font size | `var(--size-xxlarge)` |
 | `--heading-leading` | Line height | `var(--leading)` |
 
-**Global tokens it reads:** `--space-section`, `--space-paragraph`, `--font-title`, `--weight-strong`, `--size-xxlarge`, and `--leading`. (`Title` and `Subheading` share this component and expose the parallel `--title-*` / `--subheading-*` hooks.)
+**Global tokens it reads:** [`--space-section`](/ui/getSpaceClass), [`--space-paragraph`](/ui/getSpaceClass), [`--font-title`](/ui/getFontClass), [`--weight-strong`](/ui/getWeightClass), [`--size-xxlarge`](/ui/getSizeClass), and [`--leading`](/ui/getSizeClass). (`Title` and `Subheading` share this component and expose the parallel `--title-*` / `--subheading-*` hooks.)
 
 ```css
 /* Theme: serif headings, a touch larger. */

package/ui/block/Heading.module.css

@@ -1,4 +1,8 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Font.module.css";
+@import "../style/Size.module.css";
+@import "../style/Space.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.heading,

package/ui/block/Image.module.css

@@ -1,4 +1,5 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Space.module.css";
 
 @layer components {
 	.image,

package/ui/block/Label.module.css

@@ -1,4 +1,9 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Font.module.css";
+@import "../style/Size.module.css";
+@import "../style/Space.module.css";
+@import "../style/Tint.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.label {

package/ui/block/List.md

@@ -41,7 +41,7 @@ import { List } from "shelving/ui";
 | `--list-indent` | Inline start padding (marker gutter) | `1.125em` unordered / `1.8em` ordered |
 | `--list-marker-color` | Bullet / number colour | `var(--tint-80)` |
 
-**Global tokens it reads:** `--space-paragraph`, `--space-xsmall`, and the tint-ladder step `--tint-80`. The `gap` variant comes from the shared [`ui`](/ui) styling system.
+**Global tokens it reads:** [`--space-paragraph`](/ui/getSpaceClass), [`--space-xsmall`](/ui/getSpaceClass), and the tint-ladder step [`--tint-80`](/ui/TINT_CLASS). The `gap` variant comes from the shared [`ui`](/ui) styling system.
 
 ## See also
 

package/ui/block/List.module.css

@@ -1,4 +1,5 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Space.module.css";
 @import "../style/Tint.module.css";
 
 @layer components {

package/ui/block/Panel.md

@@ -40,7 +40,7 @@ import { Panel, Block, Title, Paragraph } from "shelving/ui";
 | `--panel-border` | Top/bottom border shorthand | `var(--panel-stroke) solid var(--tint-80)` |
 | `--panel-stroke` | Border thickness | `var(--stroke-normal)` (2px) |
 
-**Global tokens it reads:** the tint-ladder steps `--tint-00` / `--tint-80` / `--tint-90`, plus `--stroke-normal`. Vertical padding comes from the shared `padding` variant.
+**Global tokens it reads:** the tint-ladder steps [`--tint-00`](/ui/TINT_CLASS) / [`--tint-80`](/ui/TINT_CLASS) / [`--tint-90`](/ui/TINT_CLASS), plus [`--stroke-normal`](/ui/getStrokeClass). Vertical padding comes from the shared `padding` variant.
 
 ## See also
 

package/ui/block/Panel.module.css

@@ -1,4 +1,6 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Stroke.module.css";
+@import "../style/Tint.module.css";
 
 /*
  * Full-width vertical region that paints the current surface. Panels always have zero block-space

package/ui/block/Paragraph.md

@@ -38,7 +38,7 @@ import { Paragraph, Strong, Link } from "shelving/ui";
 | `--paragraph-tint` | Tint anchor for the paragraph scope | `inherit` (flows from `color=` / parent) |
 | `--paragraph-space` | Outer block margin (top + bottom) | `var(--space-paragraph)` (16px) |
 
-**Global tokens it reads:** `--space-paragraph`.
+**Global tokens it reads:** [`--space-paragraph`](/ui/getSpaceClass).
 
 ## See also
 

package/ui/block/Paragraph.module.css

@@ -1,4 +1,5 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Space.module.css";
 
 @layer components {
 	.paragraph,

package/ui/block/Preformatted.module.css

@@ -1,4 +1,13 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Color.module.css";
+@import "../style/Duration.module.css";
+@import "../style/Font.module.css";
+@import "../style/Radius.module.css";
+@import "../style/Size.module.css";
+@import "../style/Space.module.css";
+@import "../style/Stroke.module.css";
+@import "../style/Tint.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.preformatted,

package/ui/block/Prose.md

@@ -39,7 +39,7 @@ import { Prose, Paragraph } from "shelving/ui";
 |---|---|---|
 | `--prose-space` | Outer block margin (top + bottom) | `var(--space-paragraph)` (16px) |
 
-**Global tokens it reads:** `--space-paragraph`.
+**Global tokens it reads:** [`--space-paragraph`](/ui/getSpaceClass).
 
 ## See also
 

package/ui/block/Prose.module.css

@@ -1,4 +1,5 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Space.module.css";
 
 @layer components {
 	.prose {

package/ui/block/Section.md

@@ -46,7 +46,7 @@ import { Header, Nav, Footer } from "shelving/ui";
 | `--section-indent` | Inline gutter kept on each side so text doesn't touch the edges | `var(--space-normal)` (16px) |
 | `--section-space` | Outer block margin (top + bottom) | `var(--space-section)` (2rem) |
 
-**Global tokens it reads:** `--space-normal` and `--space-section`. The `narrow` / `wide` / `full` width variants come from the shared [`ui`](/ui) styling system.
+**Global tokens it reads:** [`--space-normal`](/ui/getSpaceClass) and [`--space-section`](/ui/getSpaceClass). The `narrow` / `wide` / `full` width variants come from the shared [`ui`](/ui) styling system.
 
 ## See also
 

package/ui/block/Section.module.css

@@ -1,4 +1,5 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Space.module.css";
 
 @layer components {
 	.prose :where(section, article, aside, nav, header, footer, figure),

package/ui/block/Subheading.md

@@ -48,7 +48,7 @@ import { Title, Heading, Subheading } from "shelving/ui";
 | `--subheading-size` | Font size | `var(--size-large)` |
 | `--subheading-leading` | Line height | `var(--leading)` |
 
-**Global tokens it reads:** `--space-section`, `--space-paragraph`, `--font-title`, `--weight-strong`, `--size-large`, and `--leading`.
+**Global tokens it reads:** [`--space-section`](/ui/getSpaceClass), [`--space-paragraph`](/ui/getSpaceClass), [`--font-title`](/ui/getFontClass), [`--weight-strong`](/ui/getWeightClass), [`--size-large`](/ui/getSizeClass), and [`--leading`](/ui/getSizeClass).
 
 ## See also
 

package/ui/block/Subheading.module.css

@@ -1,4 +1,8 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Font.module.css";
+@import "../style/Size.module.css";
+@import "../style/Space.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.subheading,

package/ui/block/Table.md

@@ -45,7 +45,7 @@ import { Table } from "shelving/ui";
 | `--table-label-case` | Label letter case | `var(--case-label)` |
 | `--table-label-color` | Label colour | `var(--tint-70)` |
 
-**Global tokens it reads:** `--space-paragraph`, `--space-xsmall`, `--stroke-normal`, the tint-ladder steps `--tint-70` / `--tint-80`, and the label tokens `--font-label` / `--weight-label` / `--size-label` / `--case-label` / `--weight-strong`.
+**Global tokens it reads:** [`--space-paragraph`](/ui/getSpaceClass), [`--space-xsmall`](/ui/getSpaceClass), [`--stroke-normal`](/ui/getStrokeClass), the tint-ladder steps [`--tint-70`](/ui/TINT_CLASS) / [`--tint-80`](/ui/TINT_CLASS), and the label tokens [`--font-label`](/ui/getFontClass) / [`--weight-label`](/ui/getWeightClass) / [`--size-label`](/ui/getSizeClass) / [`--case-label`](/ui/getFontClass) / [`--weight-strong`](/ui/getWeightClass).
 
 ## See also
 

package/ui/block/Table.module.css

@@ -1,4 +1,10 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Font.module.css";
+@import "../style/Size.module.css";
+@import "../style/Space.module.css";
+@import "../style/Stroke.module.css";
+@import "../style/Tint.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.table,

package/ui/block/Title.md

@@ -47,7 +47,7 @@ import { Panel, Block, Title } from "shelving/ui";
 | `--title-size` | Font size | `var(--size-xxxlarge)` |
 | `--title-leading` | Line height | `var(--leading)` |
 
-**Global tokens it reads:** `--space-section`, `--space-paragraph`, `--font-title`, `--weight-strong`, `--size-xxxlarge`, and `--leading`.
+**Global tokens it reads:** [`--space-section`](/ui/getSpaceClass), [`--space-paragraph`](/ui/getSpaceClass), [`--font-title`](/ui/getFontClass), [`--weight-strong`](/ui/getWeightClass), [`--size-xxxlarge`](/ui/getSizeClass), and [`--leading`](/ui/getSizeClass).
 
 ## See also
 

package/ui/block/Title.module.css

@@ -1,4 +1,8 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Font.module.css";
+@import "../style/Size.module.css";
+@import "../style/Space.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.title,

package/ui/block/Video.module.css

@@ -1,4 +1,10 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Color.module.css";
+@import "../style/Duration.module.css";
+@import "../style/Radius.module.css";
+@import "../style/Shadow.module.css";
+@import "../style/Space.module.css";
+@import "../style/Stroke.module.css";
 
 @layer components {
 	.video {

package/ui/dialog/Dialog.md

@@ -61,7 +61,7 @@ function DeleteButton({ id }: { id: string }) {
 | `--dialog-transition` | Open / close transition | `all var(--duration-fast)` (150ms) |
 | `--dialog-close-offset` | Inset of the close button from the top-right corner | `var(--space-small)` (8px) |
 
-**Global tokens it reads** — move these to retheme broadly: `--space-normal`, `--space-small`, `--color-shadow`, and `--duration-fast`.
+**Global tokens it reads** — move these to retheme broadly: [`--space-normal`](/ui/getSpaceClass), [`--space-small`](/ui/getSpaceClass), [`--color-shadow`](/ui/getColorClass), and [`--duration-fast`](/ui/getDurationClass).
 
 ## See also
 

package/ui/dialog/Dialog.module.css

@@ -1,4 +1,7 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Color.module.css";
+@import "../style/Duration.module.css";
+@import "../style/Space.module.css";
 
 @layer components {
 	.dialog {

package/ui/dialog/Modal.md

@@ -24,7 +24,7 @@ import { Modal } from "shelving/ui";
 | Variable | Styles | Default |
 |---|---|---|
 | `--modal-width` | Box width | `var(--width-narrow)` |
-| `--modal-border` | Border shorthand | `var(--stroke-normal)` solid, 50% of `--tint-50` |
+| `--modal-border` | Border shorthand | `var(--stroke-normal)` solid, 50% of [`--tint-50`](/ui/TINT_CLASS) |
 | `--modal-radius` | Corner radius | `var(--radius-normal)` (16px) |
 | `--modal-color-bg` | Surface fill | `var(--tint-100)` |
 | `--modal-padding` | Inner padding | `var(--space-normal)` (16px) |
@@ -32,7 +32,7 @@ import { Modal } from "shelving/ui";
 | `--modal-transition` | Transition | `all var(--duration-fast)` (150ms) |
 | `--modal-shadow` | Drop shadow | `var(--shadow-normal)` |
 
-**Global tokens it reads** — move these to retheme broadly: the tint ladder `--tint-00` / `--tint-50` / `--tint-100`, plus `--width-narrow`, `--space-normal`, `--radius-normal`, `--stroke-normal`, `--shadow-normal`, and `--duration-fast`.
+**Global tokens it reads** — move these to retheme broadly: the tint ladder [`--tint-00`](/ui/TINT_CLASS) / [`--tint-50`](/ui/TINT_CLASS) / [`--tint-100`](/ui/TINT_CLASS), plus [`--width-narrow`](/ui/getWidthClass), [`--space-normal`](/ui/getSpaceClass), [`--radius-normal`](/ui/getRadiusClass), [`--stroke-normal`](/ui/getStrokeClass), [`--shadow-normal`](/ui/getShadowClass), and [`--duration-fast`](/ui/getDurationClass).
 
 ## See also
 

package/ui/dialog/Modal.module.css

@@ -1,4 +1,11 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Duration.module.css";
+@import "../style/Radius.module.css";
+@import "../style/Shadow.module.css";
+@import "../style/Space.module.css";
+@import "../style/Stroke.module.css";
+@import "../style/Tint.module.css";
+@import "../style/Width.module.css";
 
 @layer components {
 	.modal {

package/ui/form/Button.md

@@ -72,7 +72,7 @@ import { getButtonClass } from "shelving/ui";
 | `--button-strong-border` | Border when `strong` | `var(--button-stroke) solid transparent` |
 | `--button-strong-hover-background` | Hover fill when `strong` | `var(--tint-55)` |
 
-**Global tokens it reads:** the tint ladder `--tint-50` / `--tint-80` / `--tint-90` / `--tint-95` / `--tint-100` / `--tint-55`, plus `--space-small`, `--space-xxsmall`, `--radius-xsmall`, `--stroke-normal`, `--stroke-focus`, `--color-focus`, `--font-body`, `--weight-strong`, `--size-normal`, `--leading`, and `--duration-fast`.
+**Global tokens it reads:** the tint ladder [`--tint-50`](/ui/TINT_CLASS) / [`--tint-80`](/ui/TINT_CLASS) / [`--tint-90`](/ui/TINT_CLASS) / [`--tint-95`](/ui/TINT_CLASS) / [`--tint-100`](/ui/TINT_CLASS) / [`--tint-55`](/ui/TINT_CLASS), plus [`--space-small`](/ui/getSpaceClass), [`--space-xxsmall`](/ui/getSpaceClass), [`--radius-xsmall`](/ui/getRadiusClass), [`--stroke-normal`](/ui/getStrokeClass), [`--stroke-focus`](/ui/getStrokeClass), [`--color-focus`](/ui/getColorClass), [`--font-body`](/ui/getFontClass), [`--weight-strong`](/ui/getWeightClass), [`--size-normal`](/ui/getSizeClass), [`--leading`](/ui/getSizeClass), and [`--duration-fast`](/ui/getDurationClass).
 
 ```css
 /* Theme: pill-shaped buttons. */

package/ui/form/Button.module.css

@@ -1,4 +1,13 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Color.module.css";
+@import "../style/Duration.module.css";
+@import "../style/Font.module.css";
+@import "../style/Radius.module.css";
+@import "../style/Size.module.css";
+@import "../style/Space.module.css";
+@import "../style/Stroke.module.css";
+@import "../style/Tint.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.button {

package/ui/form/Field.md

@@ -50,7 +50,7 @@ import { Field, TextInput } from "shelving/ui";
 | `--field-message-weight` | Message font weight | `var(--weight-strong)` |
 | `--field-color-message` | Message colour | `var(--color-red)` |
 
-**Global tokens it reads:** the tint ladder `--tint-00`, plus `--space-paragraph`, `--space-xsmall`, `--size-normal`, `--weight-strong`, `--weight-normal`, `--shade-dark`, and `--color-red`.
+**Global tokens it reads:** the tint ladder [`--tint-00`](/ui/TINT_CLASS), plus [`--space-paragraph`](/ui/getSpaceClass), [`--space-xsmall`](/ui/getSpaceClass), [`--size-normal`](/ui/getSizeClass), [`--weight-strong`](/ui/getWeightClass), [`--weight-normal`](/ui/getWeightClass), `--shade-dark`, and [`--color-red`](/ui/getColorClass).
 
 ## See also
 

package/ui/form/Field.module.css

@@ -1,4 +1,9 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Color.module.css";
+@import "../style/Size.module.css";
+@import "../style/Space.module.css";
+@import "../style/Tint.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.field {

package/ui/form/Form.md

@@ -105,7 +105,7 @@ When an `onSubmit` callback returns a non-empty `ReactNode`, `Form` dispatches i
 |---|---|---|
 | `--form-space` | Outer block margin (top + bottom) | `var(--space-paragraph)` (16px) |
 
-**Global tokens it reads:** `--space-paragraph`.
+**Global tokens it reads:** [`--space-paragraph`](/ui/getSpaceClass).
 
 ## See also
 

package/ui/form/Form.module.css

@@ -1,4 +1,5 @@
-@import "../style/base.css";
+@import "../style/layers.css";
+@import "../style/Space.module.css";
 
 @layer components {
 	.form {

package/ui/form/Input.module.css

@@ -1,5 +1,13 @@
-@import "../style/base.css";
-@import "../style/Shades.module.css";
+@import "../style/layers.css";
+@import "../style/Color.module.css";
+@import "../style/Duration.module.css";
+@import "../style/Font.module.css";
+@import "../style/Radius.module.css";
+@import "../style/Size.module.css";
+@import "../style/Space.module.css";
+@import "../style/Stroke.module.css";
+@import "../style/Tint.module.css";
+@import "../style/Weight.module.css";
 
 @layer components {
 	.input {