@motion-proto/live-tokens 0.95.0 → 0.97.0

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # Changelog
 
+## 0.97.0 — Custom colors
+
+### Added
+
+- **Every color picker offers custom colors.** A **Custom** row after Danger
+  lists the open theme's own colors, `--color-custom-1`, `--color-custom-2`
+  and so on, each holding one OKLCH value for light and dark. The row's
+  plus swatch starts a new color from the slot's current color and opens
+  the OKLCH editor; confirm assigns it to the slot in one undo step, and
+  cancel removes it. A slot picks an existing custom color as it picks a
+  palette step, opacity included. The pencil on a custom swatch edits it in
+  place, and the edit moves every slot that names it. The Tokens view gains a
+  **Custom Colours** section that lists, edits and removes them. Removing a
+  color that a component property, gradient stop or wash names first asks
+  for a replacement, preselects the nearest token, and rewrites each
+  reference with its opacity intact, all in one undo step.
+- **Themes carry an optional `customColors` field.**
+  `ColorsAndType.customColors` sits beside `gradients` and holds
+  `{ variable, color }` entries. The field is additive: a theme without it
+  loads with no custom colors, `THEME_SCHEMA_VERSION` stays 5, and no
+  migration runs. Save, export and import keep the list, and Adopt writes
+  each custom color into `tokens.generated.css` with the theme's other
+  variables. `set-colors` and `save-theme` carry the field through
+  unchanged. `tokens.css` and the shipped themes declare no custom color, so
+  `check-page` reports `unknown-token` for page CSS that names
+  `var(--color-custom-1)`; reach a custom color through a component property.
+
+## 0.96.1 — Vitest 5 peer range
+
+### Fixed
+
+- **Installs alongside Vitest 5.** The optional `vitest` peer range now reads
+  `^4.0 || ^5.0`. With `^4.0` alone, npm stopped any install that re-resolved
+  the tree with `ERESOLVE` once Vitest 5 sat anywhere in it, including as an
+  uninstalled optional peer of Vite's devtools. The `testing` contract helpers
+  pass the full suite on Vitest 5.
+
+## 0.96.0 — Lightbox zoom readout in natural pixels
+
+### Changed
+
+- **The `ImageLightbox` zoom readout measures the image against its natural
+  resolution.** 100% shows one source pixel per CSS pixel, the unit `maxZoom`
+  already takes. A 2880px image fitted into a 960px box opens at 33%, and
+  `maxZoom={1}` tops out at 100%. The readout used to call the fitted view
+  100% whatever the image's size. Until the natural size is known, from
+  `width`/`height` or the loaded image, the readout measures against the
+  fitted view as before. The zoom steps and caps stay the same.
+
+### Fixed
+
+- **The Testing loops page keeps its diagram text crisp in sketch mode.** The
+  text lies in its own svg above the boxes and arrows, so the sketch filter
+  roughens the shapes and leaves the labels legible.
+
 ## 0.95.0 — Responsive columns and production CSS
 
 ### Changed (breaking)

package/bin/set-colors.mjs

@@ -82,6 +82,7 @@ export async function runSetColors({
   const { colors, report } = buildColors(input, {
     cssVariables: live.cssVariables,
     gradients: live.gradients,
+    customColors: live.customColors,
   });
 
   const next = {

package/bin/setup-claude.mjs

@@ -19,7 +19,7 @@ import { join } from 'node:path';
 
 // The package owns this prefix in a project's skills directory. A skill without
 // it is the project's own and is never touched, whatever the flags say.
-const SKILL_PREFIX = 'live-tokens-';
+export const SKILL_PREFIX = 'live-tokens-';
 
 const SAMPLE_PROMPTS = {
   'live-tokens-create-page': 'build a pricing page using live-tokens components',
@@ -44,7 +44,7 @@ export function runSetupClaude({ pkgRoot, cwd, force = false }) {
     throw new Error(`No bundled skills found at ${srcSkills}. Is the package installed correctly?`);
   }
 
-  const shipped = directoriesIn(srcSkills);
+  const shipped = directoriesIn(srcSkills).filter((name) => name.startsWith(SKILL_PREFIX));
   if (shipped.length === 0) {
     throw new Error('No bundled skills to install.');
   }

package/dist-plugin/setColors/index.cjs

@@ -1098,7 +1098,13 @@ function buildColors(input, carry = {}) {
   for (const t of gradients) cssVariables[t.variable] = formatGradientValue(t);
   Object.assign(cssVariables, shadowVars(carry.cssVariables ?? {}, baseColors.Canvas));
   return {
-    colors: { editorConfigs: configs, harmonyAxes, gradients, cssVariables },
+    colors: {
+      editorConfigs: configs,
+      harmonyAxes,
+      gradients,
+      ...carry.customColors ? { customColors: carry.customColors } : {},
+      cssVariables
+    },
     report: {
       ...report,
       gradients: gradients === carry.gradients ? "carried" : "recipes",

package/dist-plugin/setColors/index.d.cts

@@ -1,4 +1,4 @@
-import { P as PaletteConfig, H as HarmonyAxis, G as GradientDiskToken, O as Oklch, d as HarmonyMode } from '../themeTypes-B8_Idrp4.cjs';
+import { P as PaletteConfig, H as HarmonyAxis, G as GradientDiskToken, b as CustomColorDiskToken, O as Oklch, e as HarmonyMode } from '../themeTypes-BaTQUyac.cjs';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BpIK_Obx.cjs';
 export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.cjs';
 
@@ -44,12 +44,14 @@ interface ColorsInput {
     canvasGradient?: boolean;
 }
 /** The live colors and type this pass reads before it replaces the color
- *  state: the override bag, so every name no palette owns rides through, and
- *  the swatch gradients, so user-tuned ones survive. Shadow opacity is
- *  derived, not carried — see `shadowVars`. */
+ *  state: the override bag, so every name no palette owns rides through, the
+ *  swatch gradients, so user-tuned ones survive, and the custom colours, which
+ *  ride through untouched. Shadow opacity is derived, not carried — see
+ *  `shadowVars`. */
 interface CarryForward {
     cssVariables?: Record<string, string>;
     gradients?: GradientDiskToken[];
+    customColors?: CustomColorDiskToken[];
 }
 interface ContrastCheck {
     textVar: string;
@@ -80,6 +82,9 @@ interface ColorsState {
     editorConfigs: Record<string, PaletteConfig>;
     harmonyAxes: HarmonyAxis[];
     gradients: GradientDiskToken[];
+    /** Present only when the carried colours and type held the field, so a
+     *  recolor adds no key to a theme that never had one. */
+    customColors?: CustomColorDiskToken[];
     cssVariables: Record<string, string>;
 }
 interface BuildColorsResult {

package/dist-plugin/setColors/index.d.ts

@@ -1,4 +1,4 @@
-import { P as PaletteConfig, H as HarmonyAxis, G as GradientDiskToken, O as Oklch, d as HarmonyMode } from '../themeTypes-B8_Idrp4.js';
+import { P as PaletteConfig, H as HarmonyAxis, G as GradientDiskToken, b as CustomColorDiskToken, O as Oklch, e as HarmonyMode } from '../themeTypes-BaTQUyac.js';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BpIK_Obx.js';
 export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.js';
 
@@ -44,12 +44,14 @@ interface ColorsInput {
     canvasGradient?: boolean;
 }
 /** The live colors and type this pass reads before it replaces the color
- *  state: the override bag, so every name no palette owns rides through, and
- *  the swatch gradients, so user-tuned ones survive. Shadow opacity is
- *  derived, not carried — see `shadowVars`. */
+ *  state: the override bag, so every name no palette owns rides through, the
+ *  swatch gradients, so user-tuned ones survive, and the custom colours, which
+ *  ride through untouched. Shadow opacity is derived, not carried — see
+ *  `shadowVars`. */
 interface CarryForward {
     cssVariables?: Record<string, string>;
     gradients?: GradientDiskToken[];
+    customColors?: CustomColorDiskToken[];
 }
 interface ContrastCheck {
     textVar: string;
@@ -80,6 +82,9 @@ interface ColorsState {
     editorConfigs: Record<string, PaletteConfig>;
     harmonyAxes: HarmonyAxis[];
     gradients: GradientDiskToken[];
+    /** Present only when the carried colours and type held the field, so a
+     *  recolor adds no key to a theme that never had one. */
+    customColors?: CustomColorDiskToken[];
     cssVariables: Record<string, string>;
 }
 interface BuildColorsResult {

package/dist-plugin/setColors/index.js

@@ -483,7 +483,13 @@ function buildColors(input, carry = {}) {
   for (const t of gradients) cssVariables[t.variable] = formatGradientValue(t);
   Object.assign(cssVariables, shadowVars(carry.cssVariables ?? {}, baseColors.Canvas));
   return {
-    colors: { editorConfigs: configs, harmonyAxes, gradients, cssVariables },
+    colors: {
+      editorConfigs: configs,
+      harmonyAxes,
+      gradients,
+      ...carry.customColors ? { customColors: carry.customColors } : {},
+      cssVariables
+    },
     report: {
       ...report,
       gradients: gradients === carry.gradients ? "carried" : "recipes",

package/dist-plugin/setGeometry/index.d.cts

@@ -1,4 +1,4 @@
-import { A as AliasDiskValue, a as ComponentConfig } from '../themeTypes-B8_Idrp4.cjs';
+import { A as AliasDiskValue, a as ComponentConfig } from '../themeTypes-BaTQUyac.cjs';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BpIK_Obx.cjs';
 export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.cjs';
 

package/dist-plugin/setGeometry/index.d.ts

@@ -1,4 +1,4 @@
-import { A as AliasDiskValue, a as ComponentConfig } from '../themeTypes-B8_Idrp4.js';
+import { A as AliasDiskValue, a as ComponentConfig } from '../themeTypes-BaTQUyac.js';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BpIK_Obx.js';
 export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.js';
 

package/dist-plugin/setType/index.d.cts

@@ -1,4 +1,4 @@
-import { c as FontStackVariable, C as ColorsAndType, b as FontStack, F as FontSource } from '../themeTypes-B8_Idrp4.cjs';
+import { d as FontStackVariable, C as ColorsAndType, c as FontStack, F as FontSource } from '../themeTypes-BaTQUyac.cjs';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BpIK_Obx.cjs';
 
 type PairingSlot = 'display' | 'body' | 'serif' | 'mono' | 'editorial';

package/dist-plugin/setType/index.d.ts

@@ -1,4 +1,4 @@
-import { c as FontStackVariable, C as ColorsAndType, b as FontStack, F as FontSource } from '../themeTypes-B8_Idrp4.js';
+import { d as FontStackVariable, C as ColorsAndType, c as FontStack, F as FontSource } from '../themeTypes-BaTQUyac.js';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BpIK_Obx.js';
 
 type PairingSlot = 'display' | 'body' | 'serif' | 'mono' | 'editorial';

package/dist-plugin/{themeTypes-B8_Idrp4.d.cts → themeTypes-BaTQUyac.d.cts}

@@ -181,6 +181,12 @@ interface GradientDiskToken {
         opacity?: number;
     }[];
 }
+/** On-disk shape of one `--color-custom-N` token: a theme-owned colour that
+ *  holds its own OKLCH value, one value for light and dark alike. */
+interface CustomColorDiskToken {
+    variable: string;
+    color: Oklch;
+}
 /**
  * Where a live component config resolved from: the unsaved `_working`
  * buffer, or the open theme's embedded copy. Every theme carries every
@@ -208,6 +214,9 @@ interface ColorsAndType {
     /** Absent on files saved before gradients round-tripped; the loader keeps
      *  the stock defaults then, which match what those files rendered. */
     gradients?: GradientDiskToken[];
+    /** Absent when the theme holds no custom colour; the loader reads that as
+     *  an empty list. */
+    customColors?: CustomColorDiskToken[];
     /** Four fixed harmony axes, each owning a hue with an optional bound family. */
     harmonyAxes?: HarmonyAxis[];
     /**
@@ -257,4 +266,4 @@ interface ComponentConfig {
     schemaVersion?: number;
 }
 
-export type { AliasDiskValue as A, ColorsAndType as C, FontSource as F, GradientDiskToken as G, HarmonyAxis as H, Oklch as O, PaletteConfig as P, ComponentConfig as a, FontStack as b, FontStackVariable as c, HarmonyMode as d };
+export type { AliasDiskValue as A, ColorsAndType as C, FontSource as F, GradientDiskToken as G, HarmonyAxis as H, Oklch as O, PaletteConfig as P, ComponentConfig as a, CustomColorDiskToken as b, FontStack as c, FontStackVariable as d, HarmonyMode as e };

package/dist-plugin/{themeTypes-B8_Idrp4.d.ts → themeTypes-BaTQUyac.d.ts}

@@ -181,6 +181,12 @@ interface GradientDiskToken {
         opacity?: number;
     }[];
 }
+/** On-disk shape of one `--color-custom-N` token: a theme-owned colour that
+ *  holds its own OKLCH value, one value for light and dark alike. */
+interface CustomColorDiskToken {
+    variable: string;
+    color: Oklch;
+}
 /**
  * Where a live component config resolved from: the unsaved `_working`
  * buffer, or the open theme's embedded copy. Every theme carries every
@@ -208,6 +214,9 @@ interface ColorsAndType {
     /** Absent on files saved before gradients round-tripped; the loader keeps
      *  the stock defaults then, which match what those files rendered. */
     gradients?: GradientDiskToken[];
+    /** Absent when the theme holds no custom colour; the loader reads that as
+     *  an empty list. */
+    customColors?: CustomColorDiskToken[];
     /** Four fixed harmony axes, each owning a hue with an optional bound family. */
     harmonyAxes?: HarmonyAxis[];
     /**
@@ -257,4 +266,4 @@ interface ComponentConfig {
     schemaVersion?: number;
 }
 
-export type { AliasDiskValue as A, ColorsAndType as C, FontSource as F, GradientDiskToken as G, HarmonyAxis as H, Oklch as O, PaletteConfig as P, ComponentConfig as a, FontStack as b, FontStackVariable as c, HarmonyMode as d };
+export type { AliasDiskValue as A, ColorsAndType as C, FontSource as F, GradientDiskToken as G, HarmonyAxis as H, Oklch as O, PaletteConfig as P, ComponentConfig as a, CustomColorDiskToken as b, FontStack as c, FontStackVariable as d, HarmonyMode as e };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.95.0",
+  "version": "0.97.0",
   "type": "module",
   "sideEffects": [
     "**/*.css"
@@ -56,6 +56,7 @@
     "dist-plugin",
     "src/testing-js",
     ".claude/skills",
+    "!.claude/skills/evaluate",
     "!.claude/skills/**/skill-alt.md",
     "bin",
     "template",
@@ -204,6 +205,7 @@
     "check:smoke-install": "bash scripts/smoke-install.sh",
     "check:smoke-create": "bash scripts/smoke-create.sh",
     "eval": "bash scripts/eval.sh",
+    "eval:billing": "bash scripts/eval-billing.sh",
     "build:eval-project": "bash scripts/build-eval-project.sh",
     "check:smoke-component-tests": "bash scripts/smoke-component-tests.sh",
     "check:smoke-page-tests": "bash scripts/smoke-page-tests.sh",
@@ -216,7 +218,7 @@
     "sass": "^1.0",
     "svelte": "^5",
     "vite": "^8",
-    "vitest": "^4.0"
+    "vitest": "^4.0 || ^5.0"
   },
   "peerDependenciesMeta": {
     "@playwright/test": {

package/src/demo/TestingLoops.svelte

@@ -121,12 +121,11 @@
         <div class="figure-stage">
             <!-- svelte-ignore a11y_no_noninteractive_tabindex (Keyboard users need to scroll the diagram.) -->
             <div class="figure-scroll" role="region" aria-label="Figure 1" tabindex="0">
+          <div class="dg-stack">
           <svg class="dg" viewBox="20 12 1160 866" role="img" aria-label="The skill builds a page or component and runs the checks. The CLI checker checks the code, makes the routine repairs, tests the result, and reports the findings. The skill repairs each finding and runs the checks again until every check passes.">
             <rect class="lane-checker" x="20" y="12" width="1160" height="866" rx="8" />
             <path class="lane-skill" d="M28,12 H600 V878 H28 A8,8 0 0 1 20,870 V20 A8,8 0 0 1 28,12 Z" />
             <path class="lane-shade" d="M600,12 H1172 A8,8 0 0 1 1180,20 V870 A8,8 0 0 1 1172,878 H600 Z" />
-            <text class="lane-title" x="80" y="52">Claude Skill</text>
-            <text class="lane-title" x="660" y="52">CLI checker</text>
             <path class="flow" d="M540,148 L876,148 Q890,148 890,162 L890,225" />
             <path class="flow" d="M890,320 L890,353" />
             <path class="flow" d="M890,448 L890,481" />
@@ -135,33 +134,38 @@
             <path class="flow" d="M890,728 L890,781" />
             <path class="back" d="M310,640 L310,290 Q310,276 324,276 L653,276" />
             <rect class="box-lead" x="80" y="104" width="460" height="88" rx="4" />
+            <rect class="box" x="660" y="232" width="460" height="88" rx="4" />
+            <rect class="box" x="660" y="360" width="460" height="88" rx="4" />
+            <rect class="box" x="660" y="488" width="460" height="112" rx="4" />
+            <rect class="box" x="660" y="640" width="460" height="88" rx="4" />
+            <rect class="box" x="80" y="640" width="460" height="88" rx="4" />
+            <rect class="box-lead" x="660" y="788" width="460" height="72" rx="4" />
+          </svg>
+          <svg class="dg dg-text" viewBox="20 12 1160 866" aria-hidden="true">
+            <text class="lane-title" x="80" y="52">Claude Skill</text>
+            <text class="lane-title" x="660" y="52">CLI checker</text>
             <text class="t" x="101.3" y="138">Build a page or component</text>
             <text class="s" x="101.3" y="166">from the catalogue and design tokens</text>
-            <rect class="box" x="660" y="232" width="460" height="88" rx="4" />
             <text class="t" x="681.3" y="266">Check the code</text>
             <text class="tag" x="1098.7" y="266" text-anchor="end">Static check</text>
             <text class="s" x="681.3" y="294">design tokens, components, and props</text>
-            <rect class="box" x="660" y="360" width="460" height="88" rx="4" />
             <text class="t" x="681.3" y="394">Make the routine repairs</text>
             <text class="s" x="681.3" y="422">fixes with one right answer</text>
-            <rect class="box" x="660" y="488" width="460" height="112" rx="4" />
             <text class="t" x="681.3" y="522">Test the result</text>
             <text class="tag" x="1098.7" y="522" text-anchor="end">Vitest · Playwright</text>
             <text class="s" x="681.3" y="550">Test component interactions, rendering, and themes.</text>
             <text class="s" x="681.3" y="574">Check page layout, contrast, and typography.</text>
-            <rect class="box" x="660" y="640" width="460" height="88" rx="4" />
             <text class="t" x="681.3" y="674">Report the findings</text>
             <text class="s" x="681.3" y="702">each with guidance for its repair</text>
-            <rect class="box" x="80" y="640" width="460" height="88" rx="4" />
             <text class="t" x="101.3" y="674">Repair each finding</text>
             <text class="s" x="101.3" y="702">make the choice or write the code</text>
-            <rect class="box-lead" x="660" y="788" width="460" height="72" rx="4" />
             <text class="t" x="890" y="830" text-anchor="middle">Every check passes</text>
             <text class="lbl" x="715" y="136" text-anchor="middle">run the checks</text>
             <text class="lbl" x="600" y="672" text-anchor="middle">findings</text>
             <text class="lbl" x="906" y="759">none remain</text>
             <text class="rule" x="479" y="262" text-anchor="middle">check again</text>
           </svg>
+          </div>
             </div>
         </div>
       </figure>
@@ -179,12 +183,11 @@
         <div class="figure-stage">
             <!-- svelte-ignore a11y_no_noninteractive_tabindex (Keyboard users need to scroll the diagram.) -->
             <div class="figure-scroll" role="region" aria-label="Figure 2" tabindex="0">
+          <div class="dg-stack">
           <svg class="dg" viewBox="20 12 1160 916" role="img" aria-label="Read the project, plan the sections, and choose components. When no component fits, create one and check it until every check passes, and it joins the catalogue. Assemble the page and check it. Repair each finding until every check passes, then review the page.">
             <rect class="lane-checker" x="20" y="12" width="1160" height="916" rx="8" />
             <path class="lane-skill" d="M28,12 H600 V928 H28 A8,8 0 0 1 20,920 V20 A8,8 0 0 1 28,12 Z" />
             <path class="lane-shade" d="M600,12 H1172 A8,8 0 0 1 1180,20 V920 A8,8 0 0 1 1172,928 H600 Z" />
-            <text class="lane-title" x="80" y="52">Page</text>
-            <text class="lane-title" x="660" y="52">New component</text>
             <path class="flow" d="M310,192 L310,225" />
             <path class="flow" d="M310,320 L310,353" />
             <path class="flow" d="M310,448 L310,545" />
@@ -194,25 +197,29 @@
             <path class="back" d="M540,724 L556,724 Q570,724 570,710 L570,629 Q570,620 561,620 L547,620" />
             <path class="flow" d="M310,768 L310,813" />
             <rect class="box-lead" x="80" y="104" width="460" height="88" rx="4" />
+            <rect class="box" x="80" y="232" width="460" height="88" rx="4" />
+            <rect class="box" x="80" y="360" width="460" height="88" rx="4" />
+            <rect class="box" x="660" y="360" width="460" height="112" rx="4" />
+            <rect class="box" x="80" y="552" width="460" height="88" rx="4" />
+            <rect class="box" x="80" y="680" width="460" height="88" rx="4" />
+            <rect class="box-lead" x="80" y="820" width="460" height="88" rx="4" />
+          </svg>
+          <svg class="dg dg-text" viewBox="20 12 1160 916" aria-hidden="true">
+            <text class="lane-title" x="80" y="52">Page</text>
+            <text class="lane-title" x="660" y="52">New component</text>
             <text class="t" x="101.3" y="138">Read the project</text>
             <text class="s" x="101.3" y="166">routes, grid, and the component catalogue</text>
-            <rect class="box" x="80" y="232" width="460" height="88" rx="4" />
             <text class="t" x="101.3" y="266">Plan the sections</text>
             <text class="s" x="101.3" y="294">one section per purpose</text>
-            <rect class="box" x="80" y="360" width="460" height="88" rx="4" />
             <text class="t" x="101.3" y="394">Choose components</text>
             <text class="s" x="101.3" y="422">from the catalogue first</text>
-            <rect class="box" x="660" y="360" width="460" height="112" rx="4" />
             <text class="t" x="681.3" y="394">Create the component</text>
             <text class="s" x="681.3" y="422">check it and repair it</text>
             <text class="s" x="681.3" y="446">until every check passes</text>
-            <rect class="box" x="80" y="552" width="460" height="88" rx="4" />
             <text class="t" x="101.3" y="586">Assemble the page</text>
             <text class="s" x="101.3" y="614">components, tokens, and text styles</text>
-            <rect class="box" x="80" y="680" width="460" height="88" rx="4" />
             <text class="t" x="101.3" y="714">Check the page</text>
             <text class="s" x="101.3" y="742">review the code and test it in the browser</text>
-            <rect class="box-lead" x="80" y="820" width="460" height="88" rx="4" />
             <text class="t" x="101.3" y="854">Review the page</text>
             <text class="s" x="101.3" y="882">read it the way a visitor would</text>
             <text class="lbl" x="326" y="499">a shipped component fits</text>
@@ -221,6 +228,7 @@
             <text class="rule" x="584" y="677">repair</text>
             <text class="lbl" x="326" y="793">every check passes</text>
           </svg>
+          </div>
             </div>
         </div>
       </figure>
@@ -832,6 +840,21 @@
     color: var(--text-primary);
   }
 
+  /* Sketch mode filters every inline svg as artwork, which smears type. The
+     text gets its own svg over the shapes, so the boxes stay drawn and the
+     labels crisp. */
+  .dg-stack {
+    display: grid;
+  }
+
+  .dg-stack > .dg {
+    grid-area: 1 / 1;
+  }
+
+  .dg-text {
+    --sketch-icon-off: none;
+  }
+
   .dg :global(.lane-checker) {
     fill: none;
     stroke: var(--border-neutral-subtle);

package/src/editor/component-editor/scaffolding/VariantGroup.svelte

@@ -818,13 +818,6 @@
     color: var(--ui-text-tertiary);
   }
 
-  /* Anchor dropdown to the trigger's right edge; the toolbar sits flush against
-     the editor's right gutter, so a left-anchored dropdown would clip. */
-  .canvas-toolbar :global(.ui-ts-dropdown) {
-    left: auto;
-    right: 0;
-  }
-
   .variant-tabs {
     display: inline-flex;
     flex-wrap: wrap;

package/src/editor/core/store/editorPersistence.ts

@@ -19,6 +19,7 @@ import { storageKey } from './editorConfig';
 import { store } from './editorCore';
 import { quietGet, quietSet } from '../storage/storage';
 import { isGradientSlot, makeDefaultGradients } from '../themes/slices/gradients';
+import { isCustomColorList } from '../themes/slices/customColors';
 import { seedShadowsFromDom } from '../themes/slices/shadows';
 import { makeDefaultWashScale, type WashFamily } from '../themes/slices/washes';
 import { normalizeColumnsState } from '../themes/slices/columns';
@@ -73,6 +74,13 @@ function migrateGradients(state: EditorState): EditorState {
   return { ...state, gradients: { tokens: makeDefaultGradients() } };
 }
 
+// Persisted state from before custom colours gets the empty default from the
+// shallow merge; anything else that is not a well-formed list loads as empty.
+function migrateCustomColors(state: EditorState): EditorState {
+  if (isCustomColorList(state.customColors?.tokens)) return state;
+  return { ...state, customColors: { tokens: [] } };
+}
+
 // `hydrate` shallow-merges the persisted `components` bag over the default, so
 // a slice serialized by an older build can lack fields added since (e.g.
 // `config`, added with the two-field alias/config split). `componentsToVars`
@@ -205,7 +213,7 @@ export function hydrate(): void {
     store.set(
       normalizeHarmonyAxes(
         normalizeBaseAnchors(
-          normalizePaletteBasis(normalizePaletteLabels(normalizeComponents(normalizeColumns(normalizeWashes(migrateGradients(merged)))))),
+          normalizePaletteBasis(normalizePaletteLabels(normalizeComponents(normalizeColumns(normalizeWashes(migrateCustomColors(migrateGradients(merged))))))),
         ),
       ),
     );

package/src/editor/core/store/editorRenderer.ts

@@ -21,6 +21,7 @@ import {
   washesToVars,
   shadowsToVars,
   gradientsToVars,
+  customColorsToVars,
   componentsToVars,
 } from './editorStore';
 
@@ -34,6 +35,7 @@ export function deriveCssVars(state: EditorState): Record<string, string> {
   if (state.gradients.tokens.length > 0) {
     Object.assign(out, gradientsToVars(state.gradients));
   }
+  Object.assign(out, customColorsToVars(state.customColors));
   Object.assign(out, palettesToVars(state.palettes));
   Object.assign(out, componentsToVars(state.components));
   Object.assign(out, resolveFontStackValues(state.fonts.stacks, state.fonts.sources));

package/src/editor/core/store/editorStore.ts

@@ -74,6 +74,10 @@ import {
   loadGradientsFromFile,
   makeDefaultGradients,
 } from '../themes/slices/gradients';
+import {
+  customColorsToVars,
+  loadCustomColorsFromFile,
+} from '../themes/slices/customColors';
 import {
   componentBaseline,
   getComponentOwnedVarNames,
@@ -102,6 +106,7 @@ function emptyState(): EditorState {
     columns: defaultColumns(),
     components: {},
     gradients: { tokens: makeDefaultGradients() },
+    customColors: { tokens: [] },
     harmonyAxes: defaultHarmonyAxes(),
     cssVars: {},
   };
@@ -179,6 +184,20 @@ export {
   removeGradientToken,
 } from '../themes/slices/gradients';
 
+export {
+  customColorsToVars,
+  nextCustomColorSlot,
+  isCustomColorSlot,
+  addCustomColor,
+  setCustomColor,
+  removeCustomColor,
+  customColorUsages,
+  describeCustomColorUsages,
+  nearestColorToken,
+  replaceAndRemoveCustomColor,
+} from '../themes/slices/customColors';
+export type { CustomColorUsage } from '../themes/slices/customColors';
+
 export {
   componentsToVars,
   getComponentOwnedVarNames,
@@ -404,6 +423,7 @@ export function colorsAndTypeToState(colorsAndType: ColorsAndType): EditorState
   // begin with).
   for (const load of Object.values(domainLoaders)) load(next, rawVars);
   loadGradientsFromFile(next, colorsAndType.gradients, rawVars);
+  loadCustomColorsFromFile(next, colorsAndType.customColors, rawVars);
   next.harmonyAxes = sanitizeHarmonyAxes(renameBackgroundHarmonyFamily(colorsAndType.harmonyAxes), next.palettes);
   next.cssVars = rawVars;
   return next;
@@ -438,12 +458,17 @@ function colorsAndTypeContent(state: EditorState): Omit<ColorsAndType, 'name' |
   if (state.gradients.tokens.length > 0) {
     Object.assign(cssVariables, gradientsToVars(state.gradients));
   }
+  // An empty list writes no field, so a theme that never held a custom colour
+  // still compares equal to the buffer its load produced.
+  const hasCustomColors = state.customColors.tokens.length > 0;
+  if (hasCustomColors) Object.assign(cssVariables, customColorsToVars(state.customColors));
   return {
     editorConfigs: state.palettes,
     cssVariables,
     fontSources: state.fonts.sources,
     fontStacks: state.fonts.stacks,
     gradients: state.gradients.tokens,
+    ...(hasCustomColors ? { customColors: state.customColors.tokens } : {}),
     harmonyAxes: state.harmonyAxes,
     schemaVersion: CURRENT_COLORS_AND_TYPE_SCHEMA_VERSION,
   };

package/src/editor/core/store/editorTypes.ts

@@ -1,6 +1,7 @@
 import type { PaletteConfig, FontSource, FontStack } from '../themes/themeTypes';
 import type { GradientStop, GradientValue, LinearDirection } from '../themes/parsers/gradient';
 import type { HarmonyAxis } from '../palettes/colorHarmony';
+import type { Oklch } from '../palettes/oklch';
 import type { ColumnViewport, ColumnViewportValues } from '../themes/slices/columns';
 
 export interface ShadowGlobals {
@@ -80,6 +81,13 @@ export interface GradientToken {
   stops: GradientTokenStop[];
 }
 
+/** A theme-owned `--color-custom-N` colour. Slots name it the way they name a
+ *  palette step, so one edit moves every slot that names it. */
+export interface CustomColorToken {
+  variable: string;
+  color: Oklch;
+}
+
 /** Structured gradient payload carried inline on a component alias.
  *  `GradientToken` minus `variable` (the alias key itself is the binding).
  *  Used when a component owns a per-instance gradient that doesn't share the
@@ -123,6 +131,7 @@ export interface EditorState {
   columns: ColumnsState;
   components: Record<string, ComponentSlice>;
   gradients: { tokens: GradientToken[] };
+  customColors: { tokens: CustomColorToken[] };
   /** Four fixed numbered axes (index 0 is the anchor); each owns a hue;
    *  family is the live-bound color or null. */
   harmonyAxes: HarmonyAxis[];