@motion-proto/live-tokens 0.68.1 → 0.69.0

package/src/editor/core/themes/migrations/2026-09-01-scrim-rename.ts

@@ -0,0 +1,52 @@
+import type { Migration } from './index';
+
+/**
+ * Scrim rename (2026-09-01): `--overlay-*` became `--scrim-*`.
+ *
+ * An overlay is a scrim, a translucent layer that dims what is behind it. The
+ * name had spread to cover surface tints too, which are the opposite operation,
+ * and it collided with `backdrop`, an exported concept about what paints behind
+ * an element. Each name now means one thing.
+ *
+ * Values are unchanged, so this is a pure key rename in colors-and-type files.
+ * Component configs need both halves: Dialog's `--dialog-overlay-surface` is a
+ * key, and any alias *value* pointing at a scrim stop is a bare token name that
+ * has to be rebound.
+ */
+const RENAMED: Record<string, string> = {
+  '--overlay-low': '--scrim-low',
+  '--overlay': '--scrim',
+  '--overlay-high': '--scrim-high',
+};
+
+const RENAMED_COMPONENT_KEYS: Record<string, string> = {
+  '--dialog-overlay-surface': '--dialog-scrim-surface',
+};
+
+export const colorsAndTypeMigration_2026_09_01_scrimRename: Migration = {
+  id: '2026-09-01-scrim-rename-theme',
+  fromVersion: 5,
+  toVersion: 6,
+  appliesTo: 'colors-and-type',
+  apply(rawVars) {
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[RENAMED[key] ?? key] = value;
+    }
+    return out;
+  },
+};
+
+export const componentMigration_2026_09_01_scrimRename: Migration = {
+  id: '2026-09-01-scrim-rename-component',
+  fromVersion: 21,
+  toVersion: 22,
+  appliesTo: 'component-config',
+  apply(rawVars) {
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[RENAMED_COMPONENT_KEYS[key] ?? key] = RENAMED[value] ?? value;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-09-01-tabbar-active-tint.ts

@@ -0,0 +1,27 @@
+import type { Migration } from './index';
+
+/**
+ * TabBar active surface, scrim to tint (2026-09-01, tabbar only).
+ *
+ * The active tab is a wash *on* the bar, not a layer dimming what is behind it,
+ * so it belongs to the tint family. It only ever read a scrim because no tint
+ * family existed. Rebinding is a visible change: the 38% near-black scrim
+ * becomes a 10% white tint, so the active tab reads lighter rather than darker.
+ *
+ * Scoped to the shipped default value. A theme that pointed this alias
+ * somewhere else keeps its choice.
+ */
+export const componentMigration_2026_09_01_tabbarActiveTint: Migration = {
+  id: '2026-09-01-tabbar-active-tint',
+  fromVersion: 23,
+  toVersion: 24,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    if (meta.component !== 'tabbar') return { ...rawVars };
+    const out = { ...rawVars };
+    if (out['--tabbar-active-surface'] === '--scrim-low') {
+      out['--tabbar-active-surface'] = '--tint-low';
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-09-01-tint-rename.ts

@@ -0,0 +1,42 @@
+import type { Migration } from './index';
+
+/**
+ * Tint rename (2026-09-01): `--hover-*` became `--tint-*`.
+ *
+ * A state is a segment of a property name (`--button-outline-hover-surface`),
+ * not a token of its own, so the three stops are named for what they are: a
+ * tint shades the surface it sits on. Values are unchanged.
+ *
+ * Nothing shipped read the old names, so this only touches saved files that
+ * captured them from the editor's own stops.
+ */
+const RENAMED: Record<string, string> = {
+  '--hover-low': '--tint-low',
+  '--hover': '--tint',
+  '--hover-high': '--tint-high',
+};
+
+export const colorsAndTypeMigration_2026_09_01_tintRename: Migration = {
+  id: '2026-09-01-tint-rename-theme',
+  fromVersion: 6,
+  toVersion: 7,
+  appliesTo: 'colors-and-type',
+  apply(rawVars) {
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) out[RENAMED[key] ?? key] = value;
+    return out;
+  },
+};
+
+export const componentMigration_2026_09_01_tintRename: Migration = {
+  id: '2026-09-01-tint-rename-component',
+  fromVersion: 22,
+  toVersion: 23,
+  appliesTo: 'component-config',
+  apply(rawVars) {
+    const out: Record<string, string> = {};
+    // Alias values are bare token names; rebind any that pointed at a hover stop.
+    for (const [key, value] of Object.entries(rawVars)) out[key] = RENAMED[value] ?? value;
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/index.ts

@@ -62,6 +62,16 @@ import {
   colorsAndTypeMigration_2026_08_15_lineHeightScaleRename,
   componentMigration_2026_08_15_lineHeightScaleRename,
 } from './2026-08-15-line-height-scale-rename';
+import {
+  colorsAndTypeMigration_2026_09_01_scrimRename,
+  componentMigration_2026_09_01_scrimRename,
+} from './2026-09-01-scrim-rename';
+import {
+  colorsAndTypeMigration_2026_09_01_tintRename,
+  componentMigration_2026_09_01_tintRename,
+} from './2026-09-01-tint-rename';
+import { componentMigration_2026_09_01_tabbarActiveTint } from './2026-09-01-tabbar-active-tint';
+import { componentMigration_2026_09_01_gateSuffixEnabled } from './2026-09-01-gate-suffix-enabled';
 
 /**
  * Registered migrations. Order in this array does not matter — the runner
@@ -94,6 +104,12 @@ export const MIGRATIONS: Migration[] = [
   colorsAndTypeMigration_2026_08_13_dropLegacyShapeSpaceKeys,
   colorsAndTypeMigration_2026_08_15_lineHeightScaleRename,
   componentMigration_2026_08_15_lineHeightScaleRename,
+  colorsAndTypeMigration_2026_09_01_scrimRename,
+  componentMigration_2026_09_01_scrimRename,
+  colorsAndTypeMigration_2026_09_01_tintRename,
+  componentMigration_2026_09_01_tintRename,
+  componentMigration_2026_09_01_tabbarActiveTint,
+  componentMigration_2026_09_01_gateSuffixEnabled,
 ];
 
 function countFor(kind: 'colors-and-type' | 'component-config'): number {

package/src/editor/core/themes/slices/domainVars.ts

@@ -5,11 +5,11 @@
  * so the store stays the single source of truth.
  */
 import { COLUMN_VAR_NAMES } from './columns';
-import { OVERLAY_VAR_NAMES } from './overlays';
+import { WASH_VAR_NAMES } from './washes';
 import { SHADOW_VAR_NAMES } from './shadows';
 
 export const DOMAIN_VAR_NAMES: readonly string[] = [
   ...COLUMN_VAR_NAMES,
-  ...OVERLAY_VAR_NAMES,
+  ...WASH_VAR_NAMES,
   ...SHADOW_VAR_NAMES,
 ];

package/src/editor/core/themes/slices/washes.ts

@@ -0,0 +1,107 @@
+/**
+ * Washes slice — a wash is a translucent layer of color, stored as
+ * `{alias, opacity}` and emitted as
+ * `color-mix(in srgb, var(<alias>) <pct>%, transparent)`, so it follows its
+ * aliased source token (a brand-color shift propagates without re-editing
+ * every stop).
+ *
+ * Two families, opposite jobs. A **scrim** dims what sits behind it, which is
+ * what a modal needs. A **tint** shades the surface it sits on, which is what
+ * a hover needs. They are not interchangeable: scrims alias a near-black
+ * surface, tints alias the text color, so a tint lightens a dark theme and
+ * darkens a light one without picking a direction.
+ *
+ * Defaults diverge from tokens.css by design: the editor starts from a
+ * neutral alias and tokens.css continues to win until first edit.
+ */
+import type { EditorState, WashToken } from '../../store/editorTypes';
+
+export function makeDefaultScrimTokens(): WashToken[] {
+  return [
+    { variable: '--scrim-low',  label: 'Low',  alias: '--surface-neutral-lowest', opacity: 0.38 },
+    { variable: '--scrim',      label: 'Base', alias: '--surface-neutral-lowest', opacity: 0.51 },
+    { variable: '--scrim-high', label: 'High', alias: '--surface-neutral-lowest', opacity: 0.64 },
+  ];
+}
+
+export function makeDefaultTintTokens(): WashToken[] {
+  return [
+    { variable: '--tint-low',  label: 'Low',  alias: '--text-primary', opacity: 0.05 },
+    { variable: '--tint',      label: 'Base', alias: '--text-primary', opacity: 0.1  },
+    { variable: '--tint-high', label: 'High', alias: '--text-primary', opacity: 0.15 },
+  ];
+}
+
+export function makeDefaultWashesState(): EditorState['washes'] {
+  return {
+    scrims: makeDefaultScrimTokens(),
+    tints: makeDefaultTintTokens(),
+  };
+}
+
+export const WASH_VAR_NAMES = [
+  '--scrim-low', '--scrim', '--scrim-high',
+  '--tint-low', '--tint', '--tint-high',
+] as const;
+
+export function washTokenToCss(t: WashToken): string {
+  const pct = Math.round(t.opacity * 100);
+  if (pct >= 100) return `var(${t.alias})`;
+  return `color-mix(in srgb, var(${t.alias}) ${pct}%, transparent)`;
+}
+
+const COLOR_MIX_RE = /^color-mix\(in srgb,\s*var\((--[a-z0-9-]+)\)\s+(\d+)%,\s*transparent\)$/i;
+const PLAIN_VAR_RE = /^var\((--[a-z0-9-]+)\)$/i;
+
+export function parseWashCss(raw: string): { alias: string; opacity: number } | null {
+  const s = raw.trim();
+  const mix = s.match(COLOR_MIX_RE);
+  if (mix) {
+    const pct = parseInt(mix[2], 10);
+    if (!Number.isFinite(pct)) return null;
+    return { alias: mix[1], opacity: Math.max(0, Math.min(100, pct)) / 100 };
+  }
+  const plain = s.match(PLAIN_VAR_RE);
+  if (plain) return { alias: plain[1], opacity: 1 };
+  return null;
+}
+
+export function washesToVars(w: EditorState['washes']): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const t of w.scrims) out[t.variable] = washTokenToCss(t);
+  for (const t of w.tints) out[t.variable] = washTokenToCss(t);
+  return out;
+}
+
+export function applyWashVarsToState(washes: EditorState['washes'], vars: Record<string, string>): void {
+  const applyTo = (list: WashToken[]) => {
+    for (const t of list) {
+      const raw = vars[t.variable];
+      if (!raw) continue;
+      const parsed = parseWashCss(raw);
+      if (!parsed) continue;
+      t.alias = parsed.alias;
+      t.opacity = parsed.opacity;
+    }
+  };
+  applyTo(washes.scrims);
+  applyTo(washes.tints);
+}
+
+/**
+ * Loader: route wash entries from a freshly-loaded theme's vars bag into
+ * `next.washes` and remove them from the bag — but only when the value parses
+ * as the new format (color-mix / plain var). Legacy rgba values pass through to
+ * the cssVars bag so the DOM still paints them; the user's next edit in the
+ * picker promotes them to the typed slice.
+ */
+export function loadWashesFromVars(
+  next: EditorState,
+  rawVars: Record<string, string>,
+): void {
+  applyWashVarsToState(next.washes, rawVars);
+  for (const name of WASH_VAR_NAMES) {
+    const raw = rawVars[name];
+    if (raw && parseWashCss(raw) !== null) delete rawVars[name];
+  }
+}

package/src/editor/docs/content/editing-tokens.md

@@ -57,10 +57,12 @@ Numeric scales with a slider per step.
 
 Change a step and every element using it repaints.
 
-## Overlays and gradients
+## Washes and gradients
 
-- **Overlays** are translucent tints layered over surfaces, like the subtle
-  tint a card gets on hover. Set a colour and opacity per state.
+- **Scrims** are translucent layers that dim what sits behind them, like the
+  one a dialog draws over the page. Set a colour and opacity per stop.
+- **Tints** are the opposite operation: they shade the surface they sit on
+  rather than dimming what is behind it, which is what a hover needs.
 - **Gradients** are reusable gradient tokens with a stop list and direction, for
   hero panels and accent backgrounds.
 

package/src/editor/docs/content.generated.ts

@@ -4,7 +4,7 @@
 export const docContent: Record<string, string> = {
   "01-overview": "# Overview\n\nLiveTokens is a design system for building Svelte microsites quickly. You\nstyle your site by editing tokens and components in a live editor. When it looks right, you save the theme and ship it.\n\n## How it works\n\n- The editor runs in your dev server, on top of your real pages. You style in\n  context, not in a separate sandbox.\n- Every change updates a CSS variable, so the page repaints instantly. No\n  reload, no build step.\n- Saving writes a small JSON file into your project. Shipping bakes your chosen\n  theme into a plain CSS file that the build bundles.\n- The editor is dev-only. Production ships plain CSS variables and the\n  components you used, nothing else.\n\n## What you can edit\n\n- **Tokens**: the design-system primitives, colour palettes, type, spacing,\n  radius, shadow, and gradients, that apply across your whole site.\n- **Components**: the package ships about 25 editable components (Button,\n  IconButton, Card, Dialog, Table, and more). You style components by changing\n  the tokens assigned to each property.\n\n## Where to go next\n\n- **[Getting started](getting-started.md)**: scaffold a project and make your\n  first edit.\n- **[Editing tokens](editing-tokens.md)**: a tour of the editor.\n- **[Sketch mode](sketch-mode.md)**: redraw the page by hand.\n- **[Themes](themes-workflow.md)**: save, switch, and ship.\n- **[Creating components](creating-components.md)**: make your own components\n  editable.\n",
   "creating-components": "# Creating components\n\nThe package ships about 25 editable components. When you need one it doesn't\nhave, you can make your own Svelte component editable, so anyone using the\neditor can re-point its colours, type, and spacing without touching code.\n\nThe simplest way is to ask Claude. The package bundles a Claude Code skill that\nknows the conventions, writes the files, and checks the result for you.\n\n## Install the skills\n\n```bash\nnpx @motion-proto/live-tokens setup-claude\n```\n\nThis copies the bundled skills into your project's `.claude/skills/`. Once\nthey're there, Claude Code picks them up automatically.\n\n## Ask for a component\n\nDescribe what you want in plain English. Phrases like these trigger the skill:\n\n- \"Add a Toggle component to live-tokens\"\n- \"Make this Svelte component editable in the live-tokens editor\"\n- \"Create a Stat component with a value and a label\"\n\nClaude asks any clarifying questions it needs (which variants, which states,\nwhich parts), then writes the component, registers it with the editor, and runs\nits verification checklist. When it finishes, open `/live-tokens/components` to see your new\ncomponent in the editor and confirm everything works.\n\n## What you get\n\n- A runtime component whose editable properties default to your theme tokens.\n- An editor entry that appears under **Custom** in the `/live-tokens/components` view.\n- The naming and wiring handled for you, so the component fits the system.\n\nAdvanced authors who want to write a component by hand can read the naming and\nstate-model conventions shipped in the package\n(`src/system/styles/CONVENTIONS.md` and the skill's own `SKILL.md`).\n",
-  "editing-tokens": "# Editing tokens\n\nA tour of the editor. The page behind it repaints on every change; saving\nwrites a theme file you can reload later.\n\nThe editor has four views:\n\n- **Tokens**: the design-system primitives (colour, type, spacing, and so on).\n  They apply everywhere your site uses them.\n- **Color Wheel**: the harmony wheel, the palette curves, and the story your colours\n  tell across a page.\n- **Components**: per-component editors. Re-Assign what tokens a component uses\n  without changing the underlying system.\n- **Sketchstyle**: an effect layer that redraws the page by hand. See\n  [Sketch mode](sketch-mode.md).\n\nThis page covers **Tokens**. For components, see\n[Creating components](creating-components.md).\n\n## Palettes\n\nMost colour work happens here. Each palette (Brand, Accent, Neutral, Canvas,\nSuccess, Warning, Info, Danger, and a few more) has:\n\n- **Base colour.** Pick a hex; the palette derives an 11-step ramp (100 to 950)\n  from it.\n- **Curves.** Three curves shape the ramp, in stack order: Hue, Saturation,\n  Lightness. Drag the handles to bias it warmer or cooler, more or less\n  saturated, darker or lighter. Hue drifts the ramp's temperature without\n  moving contrast, because OKLCH hue rotation is close to lightness-preserving.\n  It holds ±45 degrees; a bigger shift belongs on the base colour or the\n  harmony axis.\n- **Overrides.** Lock a single step to a hand-picked hex when the curve doesn't\n  land where you want.\n\nEditing a palette base ripples through every colour that depends on it, in real\ntime. Colours use OKLCH, so the ramp stays perceptually even across hues\nwithout muddy mid-tones.\n\n## Type\n\n- **Fonts.** Add sources from Google Fonts, Adobe (Typekit), a CSS URL, or an\n  inline `@font-face`. The font loads in the page as soon as you add it.\n- **Stacks.** Named font cascades you reference by token, such as a display\n  stack and a body stack.\n- **Sizes and weights.** A t-shirt scale (xs, sm, md, lg, xl, 2xl…) for size and\n  a numeric scale (100 to 900) for weight.\n\n## Spacing, radius, shadow\n\nNumeric scales with a slider per step.\n\n- **Spacing**: the padding, gap, and margin scale.\n- **Radius**: none through full.\n- **Shadow**: colour, offset, blur, spread, and opacity per step, with stacked\n  shadows supported.\n\nChange a step and every element using it repaints.\n\n## Overlays and gradients\n\n- **Overlays** are translucent tints layered over surfaces, like the subtle\n  tint a card gets on hover. Set a colour and opacity per state.\n- **Gradients** are reusable gradient tokens with a stop list and direction, for\n  hero panels and accent backgrounds.\n\n## Columns\n\nThe page-grid overlay. Set column count, gutter, and outer margin, and toggle\nthe visual guide with `Cmd/Ctrl+G`. Pages built on the column system reflow\nlive.\n\n## Saving\n\nThe editor saves to your browser continuously, so work survives a reload\nmid-edit. Writing a file is a separate step: the **Theme** panel at the foot of\nthe sidebar has **Save**, **Save As**, and **Load**, and each theme is one JSON\nfile under `src/live-tokens/data/themes/`.\n\nThe header gives you undo/redo (`Cmd/Ctrl+Z`, `Cmd/Ctrl+Shift+Z`). You can keep\nmany themes side by side; one is open at a time, and only **Adopt** publishes\none. See [Themes](themes-workflow.md) for the full lifecycle.\n",
+  "editing-tokens": "# Editing tokens\n\nA tour of the editor. The page behind it repaints on every change; saving\nwrites a theme file you can reload later.\n\nThe editor has four views:\n\n- **Tokens**: the design-system primitives (colour, type, spacing, and so on).\n  They apply everywhere your site uses them.\n- **Color Wheel**: the harmony wheel, the palette curves, and the story your colours\n  tell across a page.\n- **Components**: per-component editors. Re-Assign what tokens a component uses\n  without changing the underlying system.\n- **Sketchstyle**: an effect layer that redraws the page by hand. See\n  [Sketch mode](sketch-mode.md).\n\nThis page covers **Tokens**. For components, see\n[Creating components](creating-components.md).\n\n## Palettes\n\nMost colour work happens here. Each palette (Brand, Accent, Neutral, Canvas,\nSuccess, Warning, Info, Danger, and a few more) has:\n\n- **Base colour.** Pick a hex; the palette derives an 11-step ramp (100 to 950)\n  from it.\n- **Curves.** Three curves shape the ramp, in stack order: Hue, Saturation,\n  Lightness. Drag the handles to bias it warmer or cooler, more or less\n  saturated, darker or lighter. Hue drifts the ramp's temperature without\n  moving contrast, because OKLCH hue rotation is close to lightness-preserving.\n  It holds ±45 degrees; a bigger shift belongs on the base colour or the\n  harmony axis.\n- **Overrides.** Lock a single step to a hand-picked hex when the curve doesn't\n  land where you want.\n\nEditing a palette base ripples through every colour that depends on it, in real\ntime. Colours use OKLCH, so the ramp stays perceptually even across hues\nwithout muddy mid-tones.\n\n## Type\n\n- **Fonts.** Add sources from Google Fonts, Adobe (Typekit), a CSS URL, or an\n  inline `@font-face`. The font loads in the page as soon as you add it.\n- **Stacks.** Named font cascades you reference by token, such as a display\n  stack and a body stack.\n- **Sizes and weights.** A t-shirt scale (xs, sm, md, lg, xl, 2xl…) for size and\n  a numeric scale (100 to 900) for weight.\n\n## Spacing, radius, shadow\n\nNumeric scales with a slider per step.\n\n- **Spacing**: the padding, gap, and margin scale.\n- **Radius**: none through full.\n- **Shadow**: colour, offset, blur, spread, and opacity per step, with stacked\n  shadows supported.\n\nChange a step and every element using it repaints.\n\n## Washes and gradients\n\n- **Scrims** are translucent layers that dim what sits behind them, like the\n  one a dialog draws over the page. Set a colour and opacity per stop.\n- **Tints** are the opposite operation: they shade the surface they sit on\n  rather than dimming what is behind it, which is what a hover needs.\n- **Gradients** are reusable gradient tokens with a stop list and direction, for\n  hero panels and accent backgrounds.\n\n## Columns\n\nThe page-grid overlay. Set column count, gutter, and outer margin, and toggle\nthe visual guide with `Cmd/Ctrl+G`. Pages built on the column system reflow\nlive.\n\n## Saving\n\nThe editor saves to your browser continuously, so work survives a reload\nmid-edit. Writing a file is a separate step: the **Theme** panel at the foot of\nthe sidebar has **Save**, **Save As**, and **Load**, and each theme is one JSON\nfile under `src/live-tokens/data/themes/`.\n\nThe header gives you undo/redo (`Cmd/Ctrl+Z`, `Cmd/Ctrl+Shift+Z`). You can keep\nmany themes side by side; one is open at a time, and only **Adopt** publishes\none. See [Themes](themes-workflow.md) for the full lifecycle.\n",
   "getting-started": "# Getting started\n\nScaffold a live token site in a moments. You need Node 20 or later, a\npackage manager (npm, pnpm, or yarn), and a browser. Open claude code in your repo and start building.\n\n## Scaffold a new app\n\n```bash\nnpm create @motion-proto/live-tokens@latest my-app\ncd my-app\nnpm install\nnpm run dev\n```\n\nOpen the URL Vite prints (usually `http://localhost:5173`). You get a\none-page Svelte + Vite app that depends on the published package, with the\neditor wired up and the full component set ready to import.\n\n`npx @motion-proto/live-tokens create my-app` runs the same scaffold without\nthe initialiser package.\n\n### What the scaffold gives you\n\nEvery editable file lives under `src/` and is committed, so `npm install` and\nversion upgrades never touch your styles. The package code stays in\n`node_modules`.\n\n| Path | What it is |\n|------|------------|\n| `src/pages/Home.svelte` | The starter page. Replace it with your own content. |\n| `src/App.svelte` | Your routes. `<LiveTokensRouter>` adds dev-only routes under a reserved `/live-tokens/*` namespace: `/live-tokens/editor`, `/live-tokens/components`, and `/live-tokens/docs`. |\n| `src/system/styles/tokens.css` | Your base token vocabulary, hand-authored. |\n| `src/styles/site.css` | Themed page typography, yours to edit. |\n\n## Your first edit\n\n1. Run `npm run dev` and open the home page.\n2. Click **Open Token Editor**, or visit `/live-tokens/editor`. The editor opens beside\n   the page.\n3. Open **Palettes**, pick **Brand**, and change the base hex. The page\n   repaints as you type.\n4. In the **Theme** panel at the foot of the sidebar, choose **Save As**. Your\n   theme appears as JSON under `src/live-tokens/data/themes/`.\n5. Reload. The editor reopens on your theme, so the page returns as you left\n   it.\n\n## What you just changed\n\nEvery edit sets a CSS custom property on `:root`. Your components read those\nproperties through `var(--...)`. There is no token build step and no\npreprocessor rewriting your code: the page renders against plain CSS variables\nthe editor swaps live.\n\nTo ship, click **Adopt** in the Theme panel. That saves the open theme and bakes\nit into `src/live-tokens/data/tokens.generated.css`, which your build bundles\nalongside `tokens.css`. Adopt is the only action that changes what your site\nships, so try any theme you like first. The editor itself never reaches\nproduction.\n\nAlready have a Svelte 5 + Vite app? The\n[README](https://github.com/motionproto/live-tokens#readme) covers installing\ninto an existing project.\n\n## Where to go next\n\n- **[Editing tokens](editing-tokens.md)**: a tour of the editor.\n- **[Themes](themes-workflow.md)**: save, switch, and ship.\n- **[Creating components](creating-components.md)**: make your own component\n  editable.\n",
   "light-and-dark": "# Light and dark\n\nSome things on a page cannot be written as a token. A wordmark drawn in white\ndisappears on a pale theme. Ink that multiplies onto paper vanishes on a dark\none. A photograph behind a headline is dark no matter what the palette says.\n\nEach of those needs the same fact first: which way does the surface behind this\nthing lean? One attribute carries it.\n\n## The attribute\n\n`data-backdrop` is either `light` or `dark`, and it does two things at once: it\nselects, so a rule can key on it, and it sets `color-scheme`, so every\n`light-dark()` under it resolves the half that reads.\n\n```css\n.title {\n  color: light-dark(var(--color-black), var(--color-white));\n}\n```\n\nThat line is right on both sides of the theme, and it is right inside a dark\nband on a pale page, because the nearest `color-scheme` wins.\n\n## Stating it\n\nPut it in the markup when the surface knows its own tone — a hero over a\nphotograph, a plate that stays pale in every theme:\n\n```svelte\n<div class=\"hero-panel\" data-backdrop=\"dark\">\n```\n\nA stated tone beats any measurement, and it inherits, so everything inside the\npanel resolves against it.\n\n## Measuring it\n\nWhere the tone is a property of the theme rather than of the markup, let it be\nmeasured:\n\n```svelte\n<script>\n  import { backdrop } from '@motion-proto/live-tokens/backdrop';\n</script>\n\n<section use:backdrop>\n```\n\nThe action reads whatever actually paints behind the element — the nearest\nancestor with an opaque fill, averaged across its gradient stops, falling back\nto the theme's `--page-bg` — and stamps the answer. It re-reads when the theme\nchanges, which the editor does by rewriting custom properties with no reload,\nso the stamp follows a live edit.\n\nThe page itself is stamped for you: the build bakes the production theme's\npolarity into `tokens.generated.css`, so the first paint is already right, and\n`syncDocumentBackdrop()` keeps `<html>` current as themes switch.\n\n```ts\nimport { syncDocumentBackdrop } from '@motion-proto/live-tokens/backdrop';\n\nsyncDocumentBackdrop();\n```\n\n## Reading it from JavaScript\n\nAnything that paints outside CSS — a canvas, a WebGL uniform, an `<img>` that\ncomes in two versions — asks the same question through the same module:\n\n```ts\nimport { isLightBackdrop, watchBackdrop, cssColorToHex } from '@motion-proto/live-tokens/backdrop';\n\nconst stop = watchBackdrop(logoEl, {\n  stamp: false,\n  onChange: (polarity) => (src = polarity === 'light' ? darkMark : lightMark),\n});\n```\n\n`isLightBackdrop(el)` answers once. `watchBackdrop` keeps answering and returns\na stop function. `cssColorToHex` resolves any CSS colour — including the\n`oklch()` a token holds — to a hex a non-CSS consumer can take.\n\n## What it does not do\n\nPolarity is a property of a surface, not of a component, so nothing is stamped\nfor you below `<html>`: a section that needs an answer either states one or asks\nfor one. And a measurement reads the paint at the moment it runs — an element\nthat scrolls from a pale band onto a dark one keeps the answer it was given.\nState the tone on each band instead.\n",
   "sketch-mode": "# Sketch mode\n\nSketch mode redraws your whole page as if it had been drawn by hand. Every\ncomponent keeps its own colours, spacing and corners; what changes is the line\nthey are drawn with.\n\nIt is an effect layer, not a set of token values. It never touches a token\nitself, so turning it off returns every component to exactly what its tokens\nalready say.\n\nOpen the **Sketchstyle** view in the editor and switch **Sketch mode** on. The effect\napplies to the page behind the editor as well as to the preview, so what you see\nin context is what it does.\n\n## What it draws\n\nEach component's fill and outline are repainted from the tokens that component\nalready owns. The real background and border are hidden behind them, then both\nare pushed around one shared field of noise. Because every component samples the\nsame field, the whole page reads as one drawing rather than as a set of\nseparately wobbled boxes.\n\n## The sketchstyles\n\nSeven sketchstyles ship with the package, and each is a complete set of dials rather\nthan just a name:\n\n- **Pencil.** Two graphite passes on their own seeds, so the outline disagrees\n  with itself the way a hand coming back round does.\n- **Marker.** A broad translucent nib gone round twice on the same line, so the\n  overlap darkens and the ink pools where it slows.\n- **Whiteboard.** The fattest nib on glass, with a mask that streaks the fill\n  like a half-wiped board.\n- **Hatched.** An etching. The fill is angled shading and the outline a single\n  hard-edged scratch.\n- **Dashed.** A drafting outline: one slow drift along the ruler, broken into\n  strokes. The clean pole.\n- **Napkin.** Ballpoint in a hurry. Everything loose at once.\n- **Dry marker.** Ink that ran out. One scratchy pass over a mostly eaten fill.\n\nAll seven ship as files, one per sketchstyle, under\n`src/live-tokens/data/sketch-styles/` in the package. There is no sketchstyle that\nexists only as code, so every one of them can be read, copied and edited.\n\nPick one, then move whatever you like. **Save As** keeps your dials under a name\nof your own, alongside the shipped seven, as a file under\n`src/live-tokens/data/sketch-styles/` in your project. **Save** writes them back\nover the sketchstyle you have selected, and lights as soon as the dials leave\nit. On one of your own it writes that file. On a shipped one it writes your\nproject's own copy under the same name, which takes its place in the list;\ndelete that copy and the shipped file behind it comes back. Both are a\ndifferent gesture from saving a theme; see \"Where the settings live\" below.\n\nA theme carries its sketch settings by value, so it can hold a set that belongs\nto no file. The list shows that set as **Unsaved**. It owns no file, so there is\nnothing for Save to write over; **Save As** turns it into a sketchstyle like any\nother, which you can then save over and delete.\n\nYour sketchstyles and the shipped ones are one list. A sketchstyle named after\na shipped one replaces it, keeping its place in the list, so a project that\nwants its own Pencil saves one and every picker shows that one instead.\n\n## The dials\n\n- **Border.** How far the outline travels and how long its wave is, then its\n  width, ink, pressure and pooling. A second pass either copies the first line a\n  few pixels off or runs it through the pen again on its own seed.\n- **Fill.** Solid or hatched, how far the fill's edge travels, and how far each\n  instance is offset, rotated and scaled from its neighbours. **Ink coverage**\n  thins the fill with a field of blotches: set their size across and down and\n  how many levels of detail, then work the field as a levels control. The two\n  sizes move together under a chain; break it and the blotches stretch, which\n  reads as ink dragged along the axis you widened, and a **Rotation** dial joins\n  them to point that stretch anywhere you like. The field always runs black\n  to white whatever the noise underneath. Steps flattens it into tones, and\n  Output squeezes the whole of it into the range the ink covers, from how pale\n  it gets at its thinnest to how dense at its fullest. Menus and tooltips are\n  drawn solid whatever the coverage dials say: they float over the page, and a\n  fill worn through in patches lets the page show through them.\n- **Shape.** **Corner spread** rounds each corner by its own share of the dial,\n  so no two match. **Corner travel** leans the drawn box into a quadrilateral\n  with no two sides parallel. This is the dial that stops a component reading as\n  a rectangle.\n- **Icons and SVG.** Glyph travel and wavelength on their own scale. A glyph is\n  all curves already, so it needs more travel than a card's long straight edge\n  before the wobble reads at all.\n- **Noise.** The shared field itself: its wavelength, how many layers of detail\n  sit on it, and the shape of its wave. A square wave sends nearly every edge to\n  full travel, which is what makes the effect stronger rather than bigger.\n\n## Where the settings live\n\nThe sketch layer is part of the theme, the same way colors and type are.\n**Save** in the Theme panel folds your dials into the open theme; **Load**\napplies whatever a theme carries, and turns the effect off for a theme that\ncarries none.\n\nUntil you save, the dials sit in your browser only. The Theme panel calls\nthat state off the theme, the same word it uses for an unsaved component\nchange. The built-in **Motion Proto** theme is read-only, so Save\nis disabled there; use **Save As** to fold the dials into a theme of your\nown.\n\n**Save** and **Save As** in the **Sketchstyle** view are a different gesture.\nThey write a named sketchstyle to `src/live-tokens/data/sketch-styles/`, a sketchstyle\nyou can pick from any theme. Neither touches the open theme, and neither marks\nthe theme as changed.\n\n## Shipping the layer\n\nThe dev server reads the open theme and paints whatever it carries. A built site\nhas no server to ask, so it hands the field over itself:\n\n```ts\nimport { seedSketchFromTheme } from '@motion-proto/live-tokens/sketch';\nimport theme from './live-tokens/data/themes/sketchy.json';\n\nseedSketchFromTheme(theme.sketchSettings);\nawait bootLiveTokens(App, '#app');\n```\n\nCall it before mounting, so the sketch layer is up on the first frame. Pass the field\nraw. A theme written against older dial names is carried forward on the way in,\nthe same reconciliation the dev server runs on every theme it reads.\n\nNothing is baked. `tokens.generated.css` still holds token values only, and the\nlayer stays JavaScript the page runs, because it builds an SVG filter bank\nrather than a set of custom properties.\n\nA visitor who has picked a sketchstyle of their own keeps it, None included. The theme\nseeds a browser that has decided nothing and never overwrites one that has, so\ncalling this on every boot is safe.\n\n### Your own sketchstyles\n\nThe dev server lists the files in `sketch-styles/`. A built site has no server\nto ask, so it hands them over at boot, the way it hands over components:\n\n```ts\nconst files = import.meta.glob<{ name?: string; settings: unknown }>(\n  './live-tokens/data/sketch-styles/*.json',\n  { eager: true, import: 'default' },\n);\n\nawait bootLiveTokens(App, '#app', {\n  sketchStyles: Object.entries(files).map(([path, file]) => {\n    const id = path.split('/').pop()!.replace('.json', '');\n    return { id, label: file.name || id, settings: file.settings };\n  }),\n});\n```\n\nProjects made with `create` ship this already. The file's slug is the sketchstyle's\nid, so a sketchstyle picked in the editor keeps working once the site is built.\n\n### Building a picker\n\n`sketchStyles` is every sketchstyle on offer, shipped and your own, as a store. Give\neach row `setSketch(style.id)`, and add your own **None** row: off is a state of\nthe effect rather than one of the sketchstyles.\n\n`unsavedSketchStyle` is the settings the theme carries as one more row. It is null when the\ntheme carries none, and null when what it carries matches a sketchstyle already in\n`sketchStyles`, since that row names it. Its id goes to `setSketch` like any\nother, so a visitor who wanders off the theme's own settings can come back to it.\n\n## Drawing your own elements\n\nThe layer draws a fixed set of parts: the shipped components, and four classes\nit reserves for you. Nothing else is touched, so a page element or a\nconsumer-authored component is left crisp until it carries one of them.\n\n| Class               | For                                                       |\n|---------------------|-----------------------------------------------------------|\n| `sketch-surface`    | A box. The default treatment.                              |\n| `sketch-container`  | A large box. Tilts less, so the type inside stays readable. |\n| `sketch-chip`       | A small box. Finer fill mask, more rotation, less travel.   |\n| `sketch-rule`       | A line rather than a box. No rotation, no rounded ends.     |\n\nPick by size, not by kind: a card and a modal both take `sketch-container`, a\nbadge and a pill both take `sketch-chip`.\n\nThe class opts the element in; it names no colours, so the element states its\nown. `--sketch-fill`, `--sketch-stroke`, `--sketch-hatch-color`,\n`--sketch-radius` and `--sketch-shadow` name the fill, the outline, the hatching\nink, the corners and the shadow for one element and everything inside it. The\nlayer blanks the real background and border, so an element whose fill matters\nunder Sketch mode has to name it here as well as paint it.\n\nThe layer also paints on the element's `::before` and `::after`, forces its\n`overflow` visible, and gives it a stacking context of its own. Keep the class\noff anything that owns a pseudo-element, clips its content, or is positioned\nabsolutely, and put it on a wrapper instead.\n\n```css\n.my-callout {\n  background: var(--surface-brand-lowest);\n  border: var(--border-width-1) solid var(--border-brand);\n  border-radius: var(--radius-xl);\n\n  --sketch-fill: var(--surface-brand-lowest);\n  --sketch-stroke: var(--border-brand);\n  --sketch-radius: var(--radius-xl);\n}\n```\n\nA gradient is a valid fill: the shorthand's last layer takes a colour or an\nimage, so `--sketch-fill` accepts either. States work the same way, since\nnothing is competing with you for the value:\n\n```css\n.my-callout:hover { --sketch-stroke: var(--border-brand-strong); }\n```\n\n## Images inside a drawn part\n\nA drawn part's `overflow` is forced visible, because the fill and outline are\npainted on pseudo-elements that travel past the box and would otherwise be cut\noff at its edge. A background that bleeds is the effect working. An image that\nbleeds is not: it keeps its square corners while the card around it turns.\n\nMedia that runs to a part's edge therefore has to carry that part's corners\nitself. `--sketch-radius` is the radius the layer drew, and it inherits, so a\nchild can read it and fall back to its own value when Sketch mode is off:\n\n```css\n.cover {\n  overflow: hidden;\n  border-top-left-radius: var(--sketch-radius, var(--card-default-radius));\n  border-top-right-radius: var(--sketch-radius, var(--card-default-radius));\n}\n```\n\nCorner spread is per-corner and per-instance, so at high spread the crop is the\nmean rather than an exact trace of the drawn edge.\n\nA rule made from a `border` is not a box and cannot be displaced. Make it an\nelement, give it `sketch-rule`, and name its ink:\n\n```html\n<div class=\"rule sketch-rule\"></div>\n```\n```css\n.rule {\n  height: var(--border-width-2);\n  background: var(--border-brand);\n  --sketch-fill: var(--border-brand);\n}\n```\n\nIcons and inline SVG take the wobble directly, since a glyph has no box to\nredraw. Body type is left alone: an icon is a shape and survives a wobble, a\nparagraph is not.\n\n`--sketch-icon-off` names what a subtree's glyphs are drawn with instead. It\ninherits, so one declaration covers everything under it, and it takes the ink\nmask off as well as the wobble:\n\n```css\n/* Crisp. Chrome, a logo, anything that has to stay exact. */\n.app-bar { --sketch-icon-off: none; }\n\n/* Drawn back rather than off, at a third of the travel. Small artwork, and\n   type set as an SVG, which the layer reads as one large glyph. */\n.wordmark { --sketch-icon-off: var(--sketch-icon-soft); }\n```\n\nThe **Blotch size** dial under Icons and SVG is a share of the glyph rather than\na px size, because no px size is right for both a 16px icon and a page-wide\ndrawing. At 100% every glyph gets one period of the field across it whatever its\nsize. Below that the field repeats inside the glyph and the blotches get finer.\nAbove it a glyph reads part of one blotch, so the mask thins the whole glyph\nunevenly instead of breaking it up. The fill's blotches stay in px, since a\ncomponent does have a size to state one against.\n",

package/src/editor/pages/EditorShell.svelte

@@ -22,7 +22,7 @@
     { id: 'typography', label: 'Typography', icon: 'fas fa-font' },
     { id: 'icon-sizes', label: 'Icon Sizes', icon: 'fas fa-expand' },
     { id: 'shadows', label: 'Shadows', icon: 'fas fa-cloud' },
-    { id: 'overlays', label: 'Overlays', icon: 'fas fa-layer-group' },
+    { id: 'washes', label: 'Washes', icon: 'fas fa-layer-group' },
     { id: 'gradients', label: 'Gradients', icon: 'fas fa-droplet' },
     { id: 'utility-tokens', label: 'Utility Tokens', icon: 'fas fa-sliders' }
   ];

package/src/editor/ui/SurfacesTab.svelte

@@ -31,9 +31,9 @@
     {
       title: 'Overlays',
       swatches: [
-        { name: 'Low', variable: '--overlay-low', description: 'Light backdrop / pressed wash' },
-        { name: 'Overlay', variable: '--overlay', description: 'Standard backdrop' },
-        { name: 'High', variable: '--overlay-high', description: 'Strong backdrop' }
+        { name: 'Low', variable: '--scrim-low', description: 'Light scrim' },
+        { name: 'Scrim', variable: '--scrim', description: 'Standard scrim' },
+        { name: 'High', variable: '--scrim-high', description: 'Strong scrim' }
       ]
     },
     {

package/src/editor/ui/UITokenSelector.svelte

@@ -286,6 +286,7 @@
 <div
   class="ui-token-selector"
   class:disabled
+  class:locked={selectionsLocked}
   data-token-variable={variable}
   bind:this={container}
 >

package/src/editor/ui/VariablesTab.svelte

@@ -7,7 +7,7 @@
   import TextStylesSection from './TextStylesSection.svelte';
   import ColumnsSection from './sections/ColumnsSection.svelte';
   import TokenScaleTable from './sections/TokenScaleTable.svelte';
-  import OverlaysSection from './sections/OverlaysSection.svelte';
+  import WashesSection from './sections/WashesSection.svelte';
   import GradientsSection from './sections/GradientsSection.svelte';
   import ShadowsSection from './sections/ShadowsSection.svelte';
   import {
@@ -138,7 +138,7 @@
 
 
   <!-- Overlays -->
-  <OverlaysSection {copiedVar} oncopy={copyVariable} />
+  <WashesSection {copiedVar} oncopy={copyVariable} />
 
   <!-- Gradients -->
   <GradientsSection {copiedVar} oncopy={copyVariable} />

package/src/editor/ui/sections/{OverlaysSection.svelte → WashesSection.svelte}

@@ -1,18 +1,19 @@
 <script lang="ts">
   /**
-   * Overlay + hover stops. Each stop binds an existing color token through
-   * `UIPaletteSelector`; the picker handles family/step selection and
-   * opacity, and writes route through `onwrite` into the overlays slice
-   * (see editorStore.makeDefaultOverlaysState). The slice fans the
-   * resulting color-mix expressions out to :root.
+   * Scrim + tint stops. A scrim dims what sits behind it; a tint shades the
+   * surface it sits on. Each stop binds an existing color token through
+   * `UIPaletteSelector`; the picker handles family/step selection and opacity,
+   * and writes route through `onwrite` into the washes slice
+   * (see editorStore.makeDefaultWashesState). The slice fans the resulting
+   * color-mix expressions out to :root.
    */
   import { editorState, mutate } from '../../core/store/editorStore';
-  import type { OverlayToken } from '../../core/store/editorTypes';
+  import type { WashToken } from '../../core/store/editorTypes';
   import {
-    makeDefaultOverlayTokens,
-    makeDefaultHoverTokens,
-    parseOverlayCss,
-  } from '../../core/themes/slices/overlays';
+    makeDefaultScrimTokens,
+    makeDefaultTintTokens,
+    parseWashCss,
+  } from '../../core/themes/slices/washes';
   import UIPaletteSelector from '../UIPaletteSelector.svelte';
 
   interface Props {
@@ -22,7 +23,7 @@
 
   let { copiedVar = null, oncopy }: Props = $props();
 
-  type Channel = 'overlay' | 'hover';
+  type Channel = 'scrim' | 'tint';
 
   function copy(v: string) { oncopy?.(v); }
 
@@ -31,41 +32,41 @@
    *  - bare `--name` → 100% opacity on that alias.
    *  - `color-mix(in srgb, var(--name) N%, transparent)` → alias + N%.
    *  - other (incl. `transparent`) → ignored; the picker's "None" option
-   *    doesn't apply to overlays. */
+   *    doesn't apply to a wash. */
   function handleWrite(channel: Channel, idx: number, value: string | null) {
     mutate(`${channel} ${idx} edit`, (s) => {
-      const arr = channel === 'overlay' ? s.overlays.tokens : s.overlays.hoverTokens;
+      const arr = channel === 'scrim' ? s.washes.scrims : s.washes.tints;
       const t = arr[idx];
       if (!t) return;
       if (value === null) {
-        const defaults = channel === 'overlay' ? makeDefaultOverlayTokens() : makeDefaultHoverTokens();
+        const defaults = channel === 'scrim' ? makeDefaultScrimTokens() : makeDefaultTintTokens();
         const d = defaults[idx];
         if (d) { t.alias = d.alias; t.opacity = d.opacity; }
         return;
       }
       if (value.startsWith('--')) { t.alias = value; t.opacity = 1; return; }
-      const parsed = parseOverlayCss(value);
+      const parsed = parseWashCss(value);
       if (parsed) { t.alias = parsed.alias; t.opacity = parsed.opacity; }
     });
   }
 
-  function copyCss(t: OverlayToken): string {
+  function copyCss(t: WashToken): string {
     const pct = Math.round(t.opacity * 100);
     return pct >= 100 ? `var(${t.alias})` : `color-mix(in srgb, var(${t.alias}) ${pct}%, transparent)`;
   }
 </script>
 
-<section class="section" id="overlays">
-  <h2 class="section-title">Overlays</h2>
+<section class="section" id="washes">
+  <h2 class="section-title">Washes</h2>
 
-  <h3 class="group-title">Dark Overlays</h3>
-  <div class="overlays-grid">
-    {#each $editorState.overlays.tokens as token, i (token.variable)}
-      <div class="overlay-row">
-        <div class="overlay-swatch-wrap">
-          <div class="overlay-swatch" style="background: var({token.variable});"></div>
+  <h3 class="group-title">Scrims</h3>
+  <div class="washes-grid">
+    {#each $editorState.washes.scrims as token, i (token.variable)}
+      <div class="wash-row">
+        <div class="wash-swatch-wrap">
+          <div class="wash-swatch" style="background: var({token.variable});"></div>
         </div>
-        <div class="overlay-meta">
+        <div class="wash-meta">
           <button
             class="token-variable copyable"
             class:copied={copiedVar === token.variable}
@@ -73,11 +74,11 @@
           >{copiedVar === token.variable ? 'copied!' : token.variable}</button>
           <span class="token-value">{token.label} — {Math.round(token.opacity * 100)}%</span>
         </div>
-        <div class="overlay-picker">
+        <div class="wash-picker">
           <UIPaletteSelector
             variable={token.variable}
             showNone={false}
-            onwrite={(v) => handleWrite('overlay', i, v)}
+            onwrite={(v) => handleWrite('scrim', i, v)}
           />
         </div>
         <button
@@ -91,14 +92,14 @@
     {/each}
   </div>
 
-  <h3 class="group-title">Hover Overlays</h3>
-  <div class="overlays-grid">
-    {#each $editorState.overlays.hoverTokens as token, i (token.variable)}
-      <div class="overlay-row">
-        <div class="overlay-swatch-wrap overlay-swatch-wrap--dark">
-          <div class="overlay-swatch" style="background: var({token.variable});"></div>
+  <h3 class="group-title">Tints</h3>
+  <div class="washes-grid">
+    {#each $editorState.washes.tints as token, i (token.variable)}
+      <div class="wash-row">
+        <div class="wash-swatch-wrap wash-swatch-wrap--dark">
+          <div class="wash-swatch" style="background: var({token.variable});"></div>
         </div>
-        <div class="overlay-meta">
+        <div class="wash-meta">
           <button
             class="token-variable copyable"
             class:copied={copiedVar === token.variable}
@@ -106,11 +107,11 @@
           >{copiedVar === token.variable ? 'copied!' : token.variable}</button>
           <span class="token-value">{token.label} — {Math.round(token.opacity * 100)}%</span>
         </div>
-        <div class="overlay-picker">
+        <div class="wash-picker">
           <UIPaletteSelector
             variable={token.variable}
             showNone={false}
-            onwrite={(v) => handleWrite('hover', i, v)}
+            onwrite={(v) => handleWrite('tint', i, v)}
           />
         </div>
         <button
@@ -148,13 +149,13 @@
     margin: 0;
   }
 
-  .overlays-grid {
+  .washes-grid {
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-8);
   }
 
-  .overlay-row {
+  .wash-row {
     display: grid;
     grid-template-columns: 3.5rem minmax(10rem, 1fr) minmax(14rem, 1.5fr) auto;
     gap: var(--ui-space-12);
@@ -165,7 +166,7 @@
     border-radius: var(--ui-radius-md);
   }
 
-  .overlay-swatch-wrap {
+  .wash-swatch-wrap {
     width: 3.5rem;
     height: 3.5rem;
     border-radius: var(--ui-radius-sm);
@@ -182,7 +183,7 @@
     background-color: #fff;
   }
 
-  .overlay-swatch-wrap--dark {
+  .wash-swatch-wrap--dark {
     background-color: #222;
     background-image:
       linear-gradient(45deg, #333 25%, transparent 25%),
@@ -191,12 +192,12 @@
       linear-gradient(-45deg, transparent 75%, #333 75%);
   }
 
-  .overlay-swatch {
+  .wash-swatch {
     position: absolute;
     inset: 0;
   }
 
-  .overlay-meta {
+  .wash-meta {
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-2);
@@ -220,7 +221,7 @@
     color: var(--ui-text-muted);
   }
 
-  .overlay-picker { min-width: 0; }
+  .wash-picker { min-width: 0; }
 
   .copy-css-btn {
     all: unset;

package/src/live-tokens/data/colors-and-type/autumn.json

@@ -2259,12 +2259,12 @@
     "--columns-max-width": "1440px",
     "--columns-gutter": "32px",
     "--columns-margin": "0px",
-    "--overlay-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
-    "--overlay": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
-    "--overlay-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
-    "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
-    "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
-    "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
+    "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
+    "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
+    "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
+    "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
+    "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
+    "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
     "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.25)",
     "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.25)",
     "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.25)",