@tasker-systems/temper-design 0.0.0-stage → 0.6.2

package/README.md

@@ -1,3 +1,186 @@
-# Temporary Holding Version
+# @tasker-systems/temper-design
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+temper's theme contract and its themes — the one source every temper surface paints from.
+The web UI (`packages/temper-ui`) and the desktop (`tasker-systems/temper-contrib`) both
+consume it, so the same role, the same term and the same state read alike on each.
+
+A theme is **data**: a `theme.json` that gives a value to every role in the contract.
+Components consume roles, never values, so any theme that satisfies the contract restyles
+everything a surface paints — its chrome, shadcn-svelte primitives, and anything rendered
+from a json-render spec — with no per-theme code.
+
+A closed JSON Schema is the source of truth, the files are validated by a self-check, and a
+hand-broken fixture must be refused for the check to count.
+
+```
+packages/temper-design/
+├── themes.json              # the theme index — name, title, appearance, counterpart (generated)
+├── contract/
+│   ├── theme.schema.json    # the contract — every role, closed (draft 2020-12)
+│   ├── tailwind.css         # roles → Tailwind v4 utilities (generated from the schema)
+│   ├── shadcn-bridge.css    # shadcn-svelte's variable names answered from roles
+│   └── base.css             # base styles + t-*/ed-* recipes, roles only
+├── quiet-instrument/        # dark — temper's house theme
+│   ├── theme.json           # source of truth
+│   └── theme.css            # generated — never edit
+├── quiet-instrument-paper/  # light counterpart
+├── brand/                   # the threaded-t mark and wordmark, in currentColor
+├── preview/index.html       # every role and the foundational components, both themes
+├── scripts/themes.sh        # build · check · contrast · --self-check
+└── tests/fixtures/broken/   # themes the check must refuse
+```
+
+## Installing
+
+Published to npm in lockstep with temper's releases. Inside this repository, consume it as a
+`file:` dependency, as `packages/temper-ui` does with `clients/temper-telemetry-ts`; outside
+it, depend on the published version:
+
+```json
+{ "dependencies": { "@tasker-systems/temper-design": "<temper version>" } }
+```
+
+bun **copies** a `file:` dependency into the consumer's install; it does not link it. An edit
+here reaches a consumer only after that consumer runs `bun install` again — until then it paints
+from the copy it took, and stale styling will look like a bug in your change. Reinstall after
+every edit you want to see in a consuming surface.
+
+What a consumer imports:
+
+| Path | What it is |
+|---|---|
+| `@tasker-systems/temper-design/contract/tailwind.css` | the roles as `tp-` Tailwind v4 utilities; resets the default palette |
+| `@tasker-systems/temper-design/contract/shadcn-bridge.css` | optional: shadcn-svelte's variable names answered from roles |
+| `@tasker-systems/temper-design/contract/base.css` | base styles and the `t-*`/`ed-*` recipes |
+| `@tasker-systems/temper-design/<theme>/theme.css` | one theme's values, under `[data-theme="<theme>"]` |
+| `@tasker-systems/temper-design/<theme>/theme.json` | one theme as data, for applying it without a build |
+| `@tasker-systems/temper-design/themes.json` | every theme's name, title, appearance and counterpart — list and pair themes from this, never by globbing the package's directories |
+| `@tasker-systems/temper-design/contract/theme.schema.json` | the contract itself |
+| `@tasker-systems/temper-design/brand/*.svg` | the mark and wordmark, in `currentColor` |
+
+The checker (`scripts/`, `tests/`, `pyproject.toml`) is not published: it runs in this
+repository's CI, and the package carries only what it proves.
+
+## The contract
+
+`contract/theme.schema.json` names every role a component may read. A theme must supply
+all of them and may not invent more (`additionalProperties: false`): a component that
+needs a colour the contract lacks is a change to the contract, reviewed as one, not a
+theme quietly growing a private name.
+
+| Group | Roles | Used for |
+|---|---|---|
+| Ground | `ground` `surface` `surface-raised` `overlay` | window, panels, popovers, modal scrim |
+| Text | `text` `text-muted` `text-subtle` `text-faint` | reading, secondary, labels, disabled-only |
+| Rule | `rule` `rule-strong` | hairlines, input outlines |
+| Accent | `accent` `accent-muted` `accent-line` `accent-line-soft` `accent-wash` `accent-hover` `on-accent` `focus` | the single accent and its tints; the rail; keyboard focus |
+| Conditions | `notice` `success` `danger` `pending` (+ `-wash` each) | attention, confirmation, destructive, awaiting-you |
+| Region states | `region-arriving` `region-empty` `region-gave-up` `region-failed` (+ `-wash` each) | the four states a read can present as |
+| Authorship | `author-human` `author-agent` | gutter and attribution marks |
+| Categorical | `cat-1` … `cat-8` `cat-neutral` | bound vocabularies — core's doc types and plugins' (see below) |
+| Code | `code-key` `code-string` `code-number` `code-comment` | syntax highlighting |
+| Font | `reading` `doing` `ui` | serif prose, mono technical, dense UI |
+| Radius, motion, tracking | `chip` `panel` · `quick` `settle` `easing` · `label` `strip` `eyebrow` `ui` `mark` | shape and rhythm |
+
+Every role becomes a CSS custom property `--tp-<role>` (`--tp-text-muted`,
+`--tp-font-reading`, `--tp-motion-quick`) and a Tailwind utility with a `tp-` prefix
+(`bg-tp-ground`, `text-tp-text-muted`, `border-tp-rule`, `font-tp-doing`). The prefix keeps
+temper's roles apart from shadcn's names, where `accent` and `muted` mean other things.
+
+### What the check enforces
+
+`scripts/themes.sh --self-check` runs in CI. For every theme it checks:
+
+- **The contract.** Every role present, none invented, every value `#rrggbb` or `rgba()`.
+- **Legibility floors.** Contrast is measured on the colours as they paint — alpha
+  composited over `ground`, washes composited before the text on them is measured.
+  `text` 7:1; secondary and label text, the accent, the categorical slots, conditions,
+  region states and code 4.5:1; slots 3:1 on surface; focus rings, authorship marks
+  3:1; `text-faint` 2.5:1, which is why it is reserved for disabled and decorative
+  marks and never carries information. `themes.sh contrast <theme.json>` prints every pair.
+- **Distinctness.** The four region states, the nine categorical marks (eight slots and
+  the neutral), the two authorship marks and the conditions must stay apart; and no
+  slot may read as a chrome or state role (`accent`, `author-*`, `notice`, `region-*`)
+  — a vocabulary bound to a slot that paints like the accent would dress its terms in
+  meaning they do not carry (CIE76 ΔE on the painted colour).
+  `themes.sh slots <theme.json>` prints the slot canvas. Colour is only one of the
+  channels that separates a failed read from a refused one, but a theme that collapses
+  two of them has removed a channel, and that is checkable.
+- **Generated files agree.** `theme.css` matches its `theme.json`; `contract/tailwind.css`
+  covers every role in the schema.
+- **Counterparts pair.** A theme's `counterpart` exists, points back, and has the
+  opposite `appearance`.
+
+And across the tree: the contract CSS carries no literal colour and references no role the
+contract lacks; the brand marks paint in `currentColor`; every fixture in
+`tests/fixtures/broken/` is refused.
+
+## Using a theme
+
+```css
+@import "tailwindcss";
+@import "<themes>/contract/tailwind.css";      /* roles as utilities; default palette reset */
+@import "<themes>/contract/shadcn-bridge.css"; /* optional: shadcn-svelte components in-theme */
+@import "<themes>/quiet-instrument/theme.css";
+@import "<themes>/quiet-instrument-paper/theme.css";
+@import "<themes>/contract/base.css";
+```
+
+Then choose the theme with one attribute: `<html data-theme="quiet-instrument">`.
+
+`contract/tailwind.css` resets Tailwind's default palette. A component cannot reach for
+`zinc-800` or `white`; if it needs a colour, it names a role.
+
+A theme can also be applied without a build: a surface can read a `theme.json` and set
+each `--tp-*` property on the root element. That is how a theme installed after the app
+was built — or one shipped by a plugin — takes effect.
+
+## Bound vocabularies and categorical slots
+
+Colour is bound, never named. The contract owns eight categorical slots and a neutral;
+**vocabularies own the bindings to them** — core's doc types through core's declared
+default binding, a plugin's doc types through its own definition. A doc type bound
+nowhere renders in the neutral role. Many doc types may share a slot; a binding to
+anything but a slot is refused.
+
+```json
+{ "doctype": "story", "tint": "cat-1" }
+```
+
+The binding is part of the vocabulary that declares the doc type — core's default for
+core's kinds, the package's entry for a plugin's — so the same term keeps the same slot
+in every theme and on every surface that honours it. Nothing in any app names a
+`doctype-*` role, because no such role exists: a view tints by **one vocabulary per
+colour channel**, so one slot never means two words in the same view. Where a hue marks
+a doc type, the doc type's word is shown beside it — hue never carries identity alone.
+
+## Adding a theme
+
+1. Copy a theme directory and rename it; set `name` to the directory name.
+2. Change values in `theme.json` — only values; the roles are fixed.
+3. `scripts/themes.sh build` to regenerate `theme.css`.
+4. `scripts/themes.sh check <name>/theme.json`, and `contrast` to see where you stand.
+5. If it has a light/dark partner, set `counterpart` on both.
+
+## The house theme
+
+**Quiet Instrument** carries temper's visual voice to every surface: obsidian ground,
+parchment text, one steel-blue accent; Source Serif 4 for reading, JetBrains Mono for
+doing, Inter only for dense UI. Semantic colour is a whisper — the conditions and the
+categorical slots exist for meaning, not decoration. Hover shifts colour and nothing
+else; there is no bounce, no shadow, no gradient. The rail — a 2px accent-soft left
+border — is the markdown blockquote marker made structural.
+
+**Quiet Instrument — Paper** keeps the same restraint on a warm paper ground with ink
+text and a deepened accent; every colour was re-chosen to clear the floors, not inverted.
+
+Fonts are bundled by each surface (`@fontsource-variable/*`), never fetched by the contract:
+a surface must be able to render offline. `preview/index.html` loads them from Google Fonts for convenience only.
+
+## Setup
+
+```bash
+cd packages/temper-design
+uv sync
+scripts/themes.sh --self-check
+```

package/brand/mark.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="temper">
+  <path d="M 12 7 L 12 25" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" fill="none"/>
+  <path d="M 6 13 L 18 13 Q 23 13 25 16.5 Q 27 20 25 24" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" fill="none"/>
+</svg>

package/brand/wordmark.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 40" role="img" aria-label="temper">
+  <path d="M 12 6 L 12 34" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" fill="none"/>
+  <path d="M 4 16 L 20 16 Q 27 16 30 21 Q 33 26 31 32" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" fill="none"/>
+  <text x="46" y="27" font-family="'JetBrains Mono', 'Fira Code', monospace" font-size="18" fill="currentColor" letter-spacing="0.12em">temper</text>
+</svg>

package/contract/base.css

@@ -0,0 +1,221 @@
+/* Theme-independent base and recipes. Consumes contract roles only — no literal
+   colour appears in this file, so every recipe restyles with the active theme.
+
+   The `t-*` type recipes and `ed-*` editorial classes are carried over from temper's
+   web UI by name, so a component ported from there keeps its class list. They are plain
+   CSS rather than Tailwind utilities: they are recipes a component composes, and they
+   must read the same whether or not the consumer uses Tailwind.
+
+   Import after tailwindcss (when used), contract/tailwind.css, and a theme.css. */
+
+/* ─── Base ──────────────────────────────────────────────────────────────── */
+
+html {
+  background: var(--tp-ground);
+  color: var(--tp-text);
+  font-family: var(--tp-font-ui);
+  -webkit-font-smoothing: antialiased;
+}
+
+::selection {
+  background: var(--tp-accent-hover);
+}
+
+:focus-visible {
+  outline: 2px solid var(--tp-focus);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ─── Type recipes ──────────────────────────────────────────────────────── */
+
+.t-hero-title {
+  font-family: var(--tp-font-reading);
+  font-size: clamp(2.4rem, 5vw, 3.8rem);
+  font-weight: 300;
+  line-height: 1.15;
+  letter-spacing: 0.01em;
+  color: var(--tp-text);
+}
+.t-hero-title em { color: var(--tp-accent); font-style: italic; }
+
+.t-ed-hero-name {
+  font-family: var(--tp-font-reading);
+  font-size: clamp(2.5rem, 6vw, 4.5rem);
+  font-weight: 400;
+  letter-spacing: -0.025em;
+  line-height: 0.95;
+  color: var(--tp-text);
+}
+
+.t-h2 {
+  font-family: var(--tp-font-reading);
+  font-size: 1.6rem;
+  font-weight: 300;
+  line-height: 1.3;
+  color: var(--tp-text);
+}
+.t-h2 em { color: var(--tp-accent); font-style: italic; }
+
+.t-label {
+  font-family: var(--tp-font-doing);
+  font-size: 0.65rem;
+  letter-spacing: var(--tp-tracking-label);
+  text-transform: uppercase;
+  color: var(--tp-accent);
+}
+
+.t-body {
+  font-family: var(--tp-font-reading);
+  font-size: 1rem;
+  line-height: 1.8;
+  color: var(--tp-text-muted);
+}
+.t-body strong { color: var(--tp-text); font-weight: 400; }
+
+.t-tagline {
+  font-family: var(--tp-font-reading);
+  font-size: 1.1rem;
+  font-style: italic;
+  line-height: 1.7;
+  color: var(--tp-text-subtle);
+}
+
+.t-ed-deck {
+  font-family: var(--tp-font-reading);
+  font-size: 1.05rem;
+  font-style: italic;
+  line-height: 1.55;
+  color: var(--tp-text-muted);
+}
+
+.t-code {
+  font-family: var(--tp-font-doing);
+  font-size: 0.8rem;
+  color: var(--tp-text-muted);
+}
+.t-code .cmd { color: var(--tp-accent); }
+.t-code .flag { color: var(--tp-text-subtle); }
+
+.t-wordmark {
+  font-family: var(--tp-font-doing);
+  font-weight: 500;
+  letter-spacing: var(--tp-tracking-mark);
+  color: var(--tp-accent);
+}
+
+.t-strip {
+  font-family: var(--tp-font-doing);
+  font-size: 0.62rem;
+  letter-spacing: var(--tp-tracking-strip);
+  text-transform: uppercase;
+  color: var(--tp-text-subtle);
+}
+
+.t-action {
+  font-family: var(--tp-font-doing);
+  font-size: 0.62rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--tp-accent);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color var(--tp-motion-quick) var(--tp-motion-easing);
+}
+.t-action:hover { color: var(--tp-text); }
+
+/* ─── Editorial structure ───────────────────────────────────────────────── */
+
+/* The rail: the markdown blockquote marker made structural. */
+.ed-rail {
+  padding-left: 1.8rem;
+  border-left: 2px solid var(--tp-accent-line-soft);
+}
+
+.ed-strip {
+  display: flex;
+  align-items: baseline;
+  gap: 0.6rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--tp-rule);
+  font-family: var(--tp-font-doing);
+  font-size: 0.62rem;
+  letter-spacing: var(--tp-tracking-strip);
+  text-transform: uppercase;
+  color: var(--tp-text-subtle);
+}
+.ed-strip-em { color: var(--tp-text-muted); }
+.ed-strip-accent { color: var(--tp-accent); }
+.ed-strip-sep { opacity: 0.5; }
+.ed-strip-spacer { flex: 1; }
+
+.ed-notice {
+  border-left: 2px solid var(--tp-notice);
+  padding: 0.7rem 1.2rem;
+  background: var(--tp-notice-wash);
+  color: var(--tp-notice);
+  font-family: var(--tp-font-reading);
+  font-style: italic;
+  font-size: 0.9rem;
+  line-height: 1.55;
+}
+.ed-notice--success {
+  border-left-color: var(--tp-success);
+  background: var(--tp-success-wash);
+  color: var(--tp-success);
+}
+
+.ed-action {
+  font-family: var(--tp-font-doing);
+  font-size: 0.62rem;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.4rem 0;
+  transition: color var(--tp-motion-quick) var(--tp-motion-easing);
+}
+.ed-action--primary { color: var(--tp-accent); }
+.ed-action--primary:hover { color: var(--tp-text); }
+.ed-action--ghost { color: var(--tp-text-subtle); }
+.ed-action--ghost:hover { color: var(--tp-text-muted); }
+.ed-action--danger { color: var(--tp-danger); }
+.ed-action:disabled { color: var(--tp-text-faint); cursor: not-allowed; }
+.ed-action-sep { display: inline-block; margin: 0 0.6rem; color: var(--tp-text-faint); }
+
+/* ─── Code ──────────────────────────────────────────────────────────────── */
+
+.hljs .hljs-comment,
+.hljs .hljs-quote { color: var(--tp-code-comment); font-style: italic; }
+.hljs .hljs-attr,
+.hljs .hljs-attribute,
+.hljs .hljs-property,
+.hljs .hljs-selector-tag,
+.hljs .hljs-name,
+.hljs .hljs-meta,
+.hljs .hljs-symbol,
+.hljs .hljs-bullet,
+.hljs .hljs-addition { color: var(--tp-code-key); }
+.hljs .hljs-string,
+.hljs .hljs-regexp { color: var(--tp-code-string); }
+.hljs .hljs-number,
+.hljs .hljs-literal,
+.hljs .hljs-keyword,
+.hljs .hljs-built_in,
+.hljs .hljs-type { color: var(--tp-code-number); }
+.hljs .hljs-title,
+.hljs .hljs-title.function_ { color: var(--tp-text); }
+.hljs .hljs-deletion { color: var(--tp-danger); }
+.hljs .hljs-emphasis { font-style: italic; }
+.hljs .hljs-strong { font-weight: 600; }

package/contract/shadcn-bridge.css

@@ -0,0 +1,86 @@
+/* shadcn-svelte's variable names, answered from contract roles.
+
+   shadcn-svelte components (and json-render's shadcn-svelte catalog, which is built on
+   them) read `--background`, `--primary`, `--muted-foreground` and the rest. Pointing
+   those names at `--tp-*` roles means any active theme restyles them with no per-theme
+   work: a theme supplies roles once, and this file is the only place the two
+   vocabularies meet.
+
+   The bridge makes shadcn components legible in any theme. It does not make them speak
+   in temper's voice — a shadcn default Button is still a filled button, where temper's
+   primary action is a mono text action. Voice lives in temper's own components.
+
+   Import after tailwindcss and contract/tailwind.css. */
+
+:root {
+  --background: var(--tp-ground);
+  --foreground: var(--tp-text);
+  --card: var(--tp-surface);
+  --card-foreground: var(--tp-text);
+  --popover: var(--tp-surface-raised);
+  --popover-foreground: var(--tp-text);
+  --primary: var(--tp-accent);
+  --primary-foreground: var(--tp-on-accent);
+  --secondary: var(--tp-surface-raised);
+  --secondary-foreground: var(--tp-text);
+  --muted: var(--tp-surface);
+  --muted-foreground: var(--tp-text-subtle);
+  /* shadcn's `accent` is a hover fill, not an accent colour. */
+  --accent: var(--tp-accent-hover);
+  --accent-foreground: var(--tp-text);
+  --destructive: var(--tp-danger);
+  --border: var(--tp-rule-strong);
+  --input: var(--tp-rule-strong);
+  --ring: var(--tp-focus);
+  --radius: var(--tp-radius-chip);
+  --chart-1: var(--tp-cat-1);
+  --chart-2: var(--tp-cat-2);
+  --chart-3: var(--tp-cat-3);
+  --chart-4: var(--tp-cat-4);
+  --chart-5: var(--tp-cat-5);
+  --sidebar: var(--tp-surface);
+  --sidebar-foreground: var(--tp-text-muted);
+  --sidebar-primary: var(--tp-accent);
+  --sidebar-primary-foreground: var(--tp-on-accent);
+  --sidebar-accent: var(--tp-accent-hover);
+  --sidebar-accent-foreground: var(--tp-text);
+  --sidebar-border: var(--tp-rule);
+  --sidebar-ring: var(--tp-focus);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 1px);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) + 1px);
+}

package/contract/tailwind.css

@@ -0,0 +1,70 @@
+/* Generated from contract/theme.schema.json by themes/scripts/themes.sh build. Do not edit.
+   Import after tailwindcss and before any theme.css. */
+
+@theme {
+  --color-*: initial;
+}
+
+@theme inline {
+  --color-tp-ground: var(--tp-ground);
+  --color-tp-surface: var(--tp-surface);
+  --color-tp-surface-raised: var(--tp-surface-raised);
+  --color-tp-overlay: var(--tp-overlay);
+  --color-tp-text: var(--tp-text);
+  --color-tp-text-muted: var(--tp-text-muted);
+  --color-tp-text-subtle: var(--tp-text-subtle);
+  --color-tp-text-faint: var(--tp-text-faint);
+  --color-tp-rule: var(--tp-rule);
+  --color-tp-rule-strong: var(--tp-rule-strong);
+  --color-tp-accent: var(--tp-accent);
+  --color-tp-accent-muted: var(--tp-accent-muted);
+  --color-tp-accent-line: var(--tp-accent-line);
+  --color-tp-accent-line-soft: var(--tp-accent-line-soft);
+  --color-tp-accent-wash: var(--tp-accent-wash);
+  --color-tp-accent-hover: var(--tp-accent-hover);
+  --color-tp-on-accent: var(--tp-on-accent);
+  --color-tp-focus: var(--tp-focus);
+  --color-tp-notice: var(--tp-notice);
+  --color-tp-notice-wash: var(--tp-notice-wash);
+  --color-tp-success: var(--tp-success);
+  --color-tp-success-wash: var(--tp-success-wash);
+  --color-tp-danger: var(--tp-danger);
+  --color-tp-danger-wash: var(--tp-danger-wash);
+  --color-tp-pending: var(--tp-pending);
+  --color-tp-pending-wash: var(--tp-pending-wash);
+  --color-tp-region-arriving: var(--tp-region-arriving);
+  --color-tp-region-arriving-wash: var(--tp-region-arriving-wash);
+  --color-tp-region-empty: var(--tp-region-empty);
+  --color-tp-region-empty-wash: var(--tp-region-empty-wash);
+  --color-tp-region-gave-up: var(--tp-region-gave-up);
+  --color-tp-region-gave-up-wash: var(--tp-region-gave-up-wash);
+  --color-tp-region-failed: var(--tp-region-failed);
+  --color-tp-region-failed-wash: var(--tp-region-failed-wash);
+  --color-tp-author-human: var(--tp-author-human);
+  --color-tp-author-agent: var(--tp-author-agent);
+  --color-tp-cat-1: var(--tp-cat-1);
+  --color-tp-cat-2: var(--tp-cat-2);
+  --color-tp-cat-3: var(--tp-cat-3);
+  --color-tp-cat-4: var(--tp-cat-4);
+  --color-tp-cat-5: var(--tp-cat-5);
+  --color-tp-cat-6: var(--tp-cat-6);
+  --color-tp-cat-7: var(--tp-cat-7);
+  --color-tp-cat-8: var(--tp-cat-8);
+  --color-tp-cat-neutral: var(--tp-cat-neutral);
+  --color-tp-code-key: var(--tp-code-key);
+  --color-tp-code-string: var(--tp-code-string);
+  --color-tp-code-number: var(--tp-code-number);
+  --color-tp-code-comment: var(--tp-code-comment);
+  --font-tp-reading: var(--tp-font-reading);
+  --font-tp-doing: var(--tp-font-doing);
+  --font-tp-ui: var(--tp-font-ui);
+  --radius-tp-chip: var(--tp-radius-chip);
+  --radius-tp-panel: var(--tp-radius-panel);
+  --tracking-tp-label: var(--tp-tracking-label);
+  --tracking-tp-strip: var(--tp-tracking-strip);
+  --tracking-tp-eyebrow: var(--tp-tracking-eyebrow);
+  --tracking-tp-ui: var(--tp-tracking-ui);
+  --tracking-tp-mark: var(--tp-tracking-mark);
+  --default-transition-duration: var(--tp-motion-quick);
+  --default-transition-timing-function: var(--tp-motion-easing);
+}