@motion-proto/live-tokens 0.96.0 → 0.98.2

package/src/editor/core/a11y/a11yReport.ts

@@ -0,0 +1,101 @@
+import { derived, writable, type Readable } from 'svelte/store';
+import { API_BASE } from '../storage/apiBase';
+import type { A11yContrastFailure, A11yFinding, A11yFinishedReport, A11yReport } from './a11yReportTypes';
+
+/** One component's share of the last finished run, sorted by its fix (decision 6). */
+export interface ComponentA11yIssues {
+  /** Fix with a property: the editor's own contrast failures. */
+  contrast: A11yContrastFailure[];
+  /** Fix with a property: the run's findings whose engine rule measures a property's value. */
+  property: A11yFinding[];
+  /** Fix in the component's code: every other `a11y-*` finding but `a11y-review`. */
+  code: A11yFinding[];
+  /** Check by eye. */
+  review: A11yFinding[];
+}
+
+/** Engine rules whose failure a property's value fixes. */
+export const PROPERTY_FIX_RULES: ReadonlySet<string> = new Set(['focus-indicator-contrast', 'control-boundary-contrast']);
+
+const latest = writable<A11yReport | null>(null);
+const lastFinished = writable<A11yFinishedReport | null>(null);
+let heard = false;
+
+/** The dev server's latest word: a run going, finished or failed. */
+export const a11yReport: Readable<A11yReport | null> = { subscribe: latest.subscribe };
+
+/** The last run that finished, which the markers follow while a new run goes (decision 7). */
+export const a11yFinishedReport: Readable<A11yFinishedReport | null> = { subscribe: lastFinished.subscribe };
+
+export const a11yIssues: Readable<Record<string, ComponentA11yIssues>> = derived(lastFinished, ($report) => {
+  const out: Record<string, ComponentA11yIssues> = {};
+  if (!$report) return out;
+  const entry = (id: string) => (out[id] ??= { contrast: [], property: [], code: [], review: [] });
+  for (const failure of $report.contrast) entry(failure.component).contrast.push(failure);
+  for (const finding of $report.findings) {
+    if (!finding.component || !finding.rule.startsWith('a11y-')) continue;
+    const issues = entry(finding.component);
+    const group = finding.rule === 'a11y-review'
+      ? issues.review
+      : PROPERTY_FIX_RULES.has(finding.details?.engineRule ?? '') ? issues.property : issues.code;
+    group.push(finding);
+  }
+  return out;
+});
+
+/** The run's findings under each component property they trace to (decision 7). The editor's contrast failures stay out. */
+export const a11yPropertyFindings: Readable<Map<string, A11yFinding[]>> = derived(lastFinished, ($report) => {
+  const out = new Map<string, A11yFinding[]>();
+  for (const finding of $report?.findings ?? []) {
+    if (!finding.component || !finding.rule.startsWith('a11y-')) continue;
+    for (const variable of finding.details?.variables ?? []) {
+      const list = out.get(variable);
+      if (list) list.push(finding);
+      else out.set(variable, [finding]);
+    }
+  }
+  return out;
+});
+
+export function receiveA11yReport(report: A11yReport): void {
+  heard = true;
+  latest.set(report);
+  if (report.state === 'finished') lastFinished.set(report);
+}
+
+export async function init(): Promise<void> {
+  const res = await fetch(`${API_BASE}/a11y/report`);
+  if (!res.ok) return;
+  const { report } = (await res.json()) as { report: A11yReport | null };
+  // An event that landed while the read was in flight is the newer word.
+  if (report && !heard) receiveA11yReport(report);
+}
+
+/**
+ * Starts a run with the contrast failures the editor measured. Answers 409
+ * `A11Y_RUN_IN_PROGRESS` while a run goes, and 409 `LEGACY_LAYOUT` on a tree
+ * `live-tokens migrate` has not healed; both arrive as the thrown error's `code`.
+ */
+export async function startA11yRun(contrast: A11yContrastFailure[]): Promise<A11yReport> {
+  const res = await fetch(`${API_BASE}/a11y/run`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ contrast }),
+  });
+  if (!res.ok) {
+    const body = (await res.json().catch(() => ({}))) as { error?: string; code?: string };
+    const err = new Error(body.error || 'The accessibility run did not start') as Error & { status?: number; code?: string };
+    err.status = res.status;
+    if (body.code) err.code = body.code;
+    throw err;
+  }
+  const report = (await res.json()) as A11yReport;
+  receiveA11yReport(report);
+  return report;
+}
+
+export function __resetForTests(): void {
+  heard = false;
+  latest.set(null);
+  lastFinished.set(null);
+}

package/src/editor/core/a11y/a11yReportTypes.ts

@@ -0,0 +1,69 @@
+import type { ContrastRole } from '../palettes/contrast';
+
+/** The SSE event the dev server sends on a run's start and on its end. */
+export const A11Y_EVENT = 'a11y';
+
+/** One failing pair the editor's contrast checker measured when the run started (decision 4). */
+export interface A11yContrastFailure {
+  component: string;
+  /** The foreground property, the row a fix changes. */
+  variable: string;
+  /** Component layers behind the foreground, top first, as the pair declares them. */
+  backdrop: string[];
+  role: ContrastRole;
+  ratio: number;
+  floor: number;
+  context?: string;
+}
+
+/** A finding as `check-component --tests --a11y --json` prints it. */
+export interface A11yFinding {
+  rule: string;
+  file: string;
+  line: number;
+  message: string;
+  /** Absent on a run-level finding such as `tests-not-installed`. */
+  component?: string;
+  details?: {
+    engineRule: string;
+    impact?: string | null;
+    target: string;
+    view?: string;
+    html: string;
+    help: string;
+    helpUrl: string;
+    /** The component properties the result traced to, sorted. Absent when the trace found none. */
+    variables?: string[];
+  };
+  context?: Record<string, unknown>;
+  severity: 'error' | 'warn';
+  guidance?: string;
+  repair: string;
+}
+
+interface A11yReportBase {
+  startedAt: string;
+  contrast: A11yContrastFailure[];
+}
+
+export interface A11yRunningReport extends A11yReportBase {
+  state: 'running';
+}
+
+/** Holds every CLI finding except axe's `color-contrast`, which `contrast` covers. */
+export interface A11yFinishedReport extends A11yReportBase {
+  state: 'finished';
+  finishedAt: string;
+  /** Absent when the run stopped before it copied the data tree, as a missing tool stops it. */
+  theme?: string;
+  findings: A11yFinding[];
+}
+
+/** The CLI crashed or printed no report. */
+export interface A11yFailedReport extends A11yReportBase {
+  state: 'failed';
+  finishedAt: string;
+  error: string;
+}
+
+export type A11yReport = A11yRunningReport | A11yFinishedReport | A11yFailedReport;

package/src/editor/core/a11y/contrastFailures.ts

@@ -0,0 +1,22 @@
+import { measurePair, type ContrastPair, type Resolver } from '../palettes/contrastPairs';
+import type { A11yContrastFailure } from './a11yReportTypes';
+
+/** Each pair below its floor. `measurePair` passes an inactive pair, so a disabled state never fails. */
+export function contrastFailures(
+  pairs: { component: string; pair: ContrastPair }[],
+  resolver: Resolver,
+): A11yContrastFailure[] {
+  return pairs.flatMap(({ component, pair }) => {
+    const measure = measurePair(pair, resolver);
+    if (measure.passes) return [];
+    return [{
+      component,
+      variable: pair.foreground,
+      backdrop: pair.backdrop,
+      role: pair.role,
+      ratio: measure.ratio,
+      floor: measure.floor,
+      ...(pair.context ? { context: pair.context } : {}),
+    }];
+  });
+}

package/src/editor/core/components/contrastPairRegistry.ts

@@ -0,0 +1,18 @@
+import type { ContrastPair } from '../palettes/contrastPairs';
+
+// The palette selector reads pairs from here. Importing `registry.ts` instead
+// would close a cycle, because every editor imports the palette selector.
+const pairsByComponent = new Map<string, ContrastPair[]>();
+
+/** Replaces the component's pairs, so a custom entry that overrides a built-in drops the built-in's pairs. */
+export function registerContrastPairs(id: string, pairs: ContrastPair[]): void {
+  pairsByComponent.set(id, pairs);
+}
+
+export function getContrastPairs(id: string, variable: string): ContrastPair[] {
+  return (pairsByComponent.get(id) ?? []).filter((pair) => pair.foreground === variable);
+}
+
+export function allContrastPairs(): { component: string; pair: ContrastPair }[] {
+  return [...pairsByComponent].flatMap(([component, pairs]) => pairs.map((pair) => ({ component, pair })));
+}

package/src/editor/core/palettes/contrast.ts

@@ -10,6 +10,50 @@ import { hexToOklch, oklchToHex, gamutClamp } from './oklch';
 export const AA_BODY = 4.5;
 export const AA_LARGE = 3.0;
 
+/** WCAG's large-text sizes: the AA floor drops to 3:1 at either. */
+export const LARGE_TEXT_PX = 24;
+export const LARGE_BOLD_PX = 18.66;
+export const BOLD = 700;
+
+export function isLargeText(px: number, weight: number): boolean {
+  return px >= LARGE_TEXT_PX || (px >= LARGE_BOLD_PX && weight >= BOLD);
+}
+
+export type ContrastRole = 'text' | 'non-text';
+
+export interface ContrastRule {
+  criterion: string;
+  name: string;
+  level: 'AA';
+  floor: number;
+  /** Text only: the floor once `isLargeText` holds. */
+  largeFloor?: number;
+  url: string;
+}
+
+export const CONTRAST_RULES: Record<ContrastRole, ContrastRule> = {
+  text: {
+    criterion: '1.4.3',
+    name: 'Contrast (Minimum)',
+    level: 'AA',
+    floor: AA_BODY,
+    largeFloor: AA_LARGE,
+    url: 'https://www.w3.org/TR/WCAG22/#contrast-minimum',
+  },
+  'non-text': {
+    criterion: '1.4.11',
+    name: 'Non-text Contrast',
+    level: 'AA',
+    floor: 3,
+    url: 'https://www.w3.org/TR/WCAG22/#non-text-contrast',
+  },
+};
+
+export function floorFor(role: ContrastRole, large: boolean): number {
+  const rule = CONTRAST_RULES[role];
+  return large && rule.largeFloor !== undefined ? rule.largeFloor : rule.floor;
+}
+
 function linearizeChannel(v8: number): number {
   const s = v8 / 255;
   return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);

package/src/editor/core/palettes/contrastPairs.ts

@@ -0,0 +1,79 @@
+import { contrastRatio, floorFor, isLargeText, type ContrastRole } from './contrast';
+
+export const PAGE_BG = '--page-bg';
+
+export interface ContrastPair {
+  foreground: string;
+  /** Component layers behind the foreground, top first. `--page-bg` always sits under the last one. */
+  backdrop: string[];
+  role: ContrastRole;
+  /** Text only. Sets the large-text floor. */
+  fontSize?: string;
+  /** Text only. Normal weight when absent. */
+  fontWeight?: string;
+  /** Disabled state: WCAG exempts it, so the pair always passes. */
+  inactive?: boolean;
+  /** Names the context when one foreground has several pairs ("inline", "zoomed"). */
+  context?: string;
+}
+
+/** sRGB channels from 0 to 255 and alpha from 0 to 1, as a canvas pixel reads. */
+export type Rgba = [r: number, g: number, b: number, a: number];
+
+export function over(front: Rgba, back: Rgba): Rgba {
+  const alpha = front[3] + back[3] * (1 - front[3]);
+  if (alpha === 0) return [0, 0, 0, 0];
+  const mix = (f: number, b: number) => (f * front[3] + b * back[3] * (1 - front[3])) / alpha;
+  return [mix(front[0], back[0]), mix(front[1], back[1]), mix(front[2], back[2]), alpha];
+}
+
+export interface Resolver {
+  /** One color for a solid value, one per stop for a gradient. */
+  color(name: string): Rgba[];
+  fontPx(name: string): number;
+  fontWeight(name: string): number;
+}
+
+export interface PairMeasure {
+  pair: ContrastPair;
+  ratio: number;
+  floor: number;
+  large: boolean;
+  passes: boolean;
+}
+
+const NORMAL_WEIGHT = 400;
+
+function hex([r, g, b]: Rgba): string {
+  return `#${[r, g, b].map((c) => Math.round(c).toString(16).padStart(2, '0')).join('')}`;
+}
+
+export function measurePair(pair: ContrastPair, resolver: Resolver): PairMeasure {
+  let behind = resolver.color(PAGE_BG);
+  for (const layer of [...pair.backdrop].reverse()) {
+    const below = behind;
+    behind = resolver.color(layer).flatMap((stop) => below.map((back) => over(stop, back)));
+  }
+  const fronts = resolver.color(pair.foreground);
+  let ratio = Infinity;
+  for (const back of behind) {
+    for (const front of fronts) {
+      ratio = Math.min(ratio, contrastRatio(hex(over(front, back)), hex(back)));
+    }
+  }
+  const large = pair.role === 'text'
+    && pair.fontSize !== undefined
+    && isLargeText(
+      resolver.fontPx(pair.fontSize),
+      pair.fontWeight ? resolver.fontWeight(pair.fontWeight) : NORMAL_WEIGHT,
+    );
+  const floor = floorFor(pair.role, large);
+  return { pair, ratio, floor, large, passes: pair.inactive === true || ratio >= floor };
+}
+
+/** An inactive pair applies no floor, so it ranks only when every pair is inactive. */
+export function closestToFailing(measures: PairMeasure[]): PairMeasure {
+  const active = measures.filter((m) => !m.pair.inactive);
+  const pool = active.length > 0 ? active : measures;
+  return pool.reduce((worst, m) => (m.ratio / m.floor < worst.ratio / worst.floor ? m : worst));
+}

package/src/editor/core/palettes/resolveColor.ts

@@ -0,0 +1,77 @@
+import { splitTopLevel } from '../themes/parsers/gradient';
+import type { Resolver, Rgba } from './contrastPairs';
+
+const GRADIENT = /^(?:repeating-)?(?:linear|radial|conic)-gradient\((.*)\)$/is;
+const DIRECTION = /^(?:to|at|from|in|circle|ellipse|closest-side|closest-corner|farthest-side|farthest-corner)$/i;
+const POSITION = /^(?:[+-]?(?:\d+\.?\d*|\.\d+)(?:[a-z]+|%)?|(?:calc|min|max|clamp)\(.*\))$/is;
+
+const isSpace = (c: string) => /\s/.test(c);
+
+/** The stop colors of a gradient function, or null for any other value. */
+export function gradientStops(value: string): string[] | null {
+  const match = value.trim().match(GRADIENT);
+  if (!match) return null;
+  const stops: string[] = [];
+  splitTopLevel(match[1]).forEach((arg, i) => {
+    const tokens = splitTopLevel(arg, isSpace).filter(Boolean);
+    if (i === 0 && (DIRECTION.test(tokens[0]) || POSITION.test(tokens[0]))) return;
+    const color = tokens.filter((token) => !POSITION.test(token)).join(' ');
+    if (color) stops.push(color);
+  });
+  return stops;
+}
+
+export function createDomResolver(doc: Document = document): Resolver {
+  const view = doc.defaultView!;
+  // The canvas answers with the pixel the screen shows, gamut-clamped, for any
+  // color syntax the probe computes.
+  const canvas = doc.createElement('canvas');
+  canvas.width = 1;
+  canvas.height = 1;
+  const ctx = canvas.getContext('2d', { willReadFrequently: true })!;
+  ctx.globalCompositeOperation = 'copy';
+
+  const paint = (css: string): Rgba => {
+    ctx.fillStyle = 'rgba(0, 0, 0, 0)';
+    ctx.fillStyle = css;
+    ctx.fillRect(0, 0, 1, 1);
+    const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+    return [r, g, b, a / 255];
+  };
+
+  const withProbe = <T>(read: (probe: HTMLElement, style: CSSStyleDeclaration) => T): T => {
+    // A value `color` rejects makes the probe inherit, so the host's
+    // transparent reads as a layer that paints nothing.
+    const host = doc.createElement('div');
+    host.style.display = 'none';
+    host.style.color = 'transparent';
+    const probe = doc.createElement('div');
+    host.appendChild(probe);
+    doc.body.appendChild(host);
+    try {
+      return read(probe, view.getComputedStyle(probe));
+    } finally {
+      host.remove();
+    }
+  };
+
+  return {
+    color: (name) => withProbe((probe, style) => {
+      const stops = gradientStops(style.getPropertyValue(name)) ?? [`var(${name})`];
+      return stops.map((stop) => {
+        // An invalid assignment keeps the previous stop's color.
+        probe.style.color = '';
+        probe.style.color = stop;
+        return paint(style.color);
+      });
+    }),
+    fontPx: (name) => withProbe((probe, style) => {
+      probe.style.fontSize = `var(${name})`;
+      return parseFloat(style.fontSize);
+    }),
+    fontWeight: (name) => withProbe((probe, style) => {
+      probe.style.fontWeight = `var(${name})`;
+      return parseFloat(style.fontWeight);
+    }),
+  };
+}

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,
@@ -197,6 +216,10 @@ export {
   markComponentSaved,
 } from '../themes/slices/components';
 
+export { a11yReport, a11yFinishedReport, a11yIssues, startA11yRun } from '../a11y/a11yReport';
+export type { ComponentA11yIssues } from '../a11y/a11yReport';
+export type { A11yContrastFailure, A11yFinding, A11yReport } from '../a11y/a11yReportTypes';
+
 export {
   setFontSources,
   setFontStacks,
@@ -404,6 +427,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 +462,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[];

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

@@ -1,13 +1,13 @@
 import { writable } from 'svelte/store';
 
-export type EditorView = 'tokens' | 'components' | 'colors' | 'sketch';
+export type EditorView = 'tokens' | 'components' | 'colors' | 'sketch' | 'accessibility';
 export type SidebarCondensed = boolean | 'auto';
 
 const VIEW_KEY = 'lt.editorView';
 const CONDENSED_KEY = 'lt.sidebarCondensed';
 
 function isEditorView(v: unknown): v is EditorView {
-  return v === 'tokens' || v === 'components' || v === 'colors' || v === 'sketch';
+  return v === 'tokens' || v === 'components' || v === 'colors' || v === 'sketch' || v === 'accessibility';
 }
 
 // Session-scoped, not persistent: opening the editor fresh always starts on

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

@@ -0,0 +1,10 @@
+import { derived, type Readable } from 'svelte/store';
+import { colorsAndTypeDirty, componentDirty } from './editorStore';
+import { sketchOffTheme } from '../sketch/sketchStore';
+
+/** The open theme differs from its saved file: colors and type, any component, or the sketch layer. */
+export const unsavedEdits: Readable<boolean> = derived(
+  [colorsAndTypeDirty, componentDirty, sketchOffTheme],
+  ([$colorsAndType, $components, $sketch]) =>
+    $colorsAndType || Object.values($components).some(Boolean) || $sketch,
+);

package/src/editor/core/themes/buildColors.ts

@@ -26,7 +26,7 @@ import { SHADOW_VAR_NAMES, parseShadowCss, shadowTokenCss } from './parsers/shad
 import { AA_BODY, AA_LARGE, contrastRatio, findLForContrast } from '../palettes/contrast';
 import { type HarmonyAxis, type HarmonyMode } from '../palettes/colorHarmony';
 import { defaultPaletteConfig } from '../../ui/palette/paletteMath';
-import type { GradientDiskToken, PaletteConfig } from './themeTypes';
+import type { CustomColorDiskToken, GradientDiskToken, PaletteConfig } from './themeTypes';
 
 export interface ColorsInput {
   scheme: SchemeDirection;
@@ -41,12 +41,14 @@ export interface ColorsInput {
 }
 
 /** 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`. */
 export interface CarryForward {
   cssVariables?: Record<string, string>;
   gradients?: GradientDiskToken[];
+  customColors?: CustomColorDiskToken[];
 }
 
 export interface ContrastCheck {
@@ -80,6 +82,9 @@ export 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>;
 }
 
@@ -467,7 +472,13 @@ export function buildColors(input: ColorsInput, carry: CarryForward = {}): Build
   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',