@motion-proto/live-tokens 0.84.0 → 0.85.0

package/dist-plugin/setGeometry/index.cjs

@@ -74,9 +74,6 @@ var KIND_RULES = [
   { kind: "dot-size", suffix: ["-dot-size"] },
   { kind: "blur", suffix: ["-blur"], prefix: ["--blur-"] },
   { kind: "scale", suffix: ["-scale"], prefix: ["--scale-"] },
-  // A strength from 0 to 1 that the component mixes into a colour where it
-  // paints. A palette picker here writes a colour into a number.
-  { kind: "opacity", suffix: ["-opacity"], prefix: ["--scrim-opacity"] },
   { kind: "shadow", suffix: ["-shadow"], prefix: ["--shadow-"] },
   { kind: "padding", suffix: ["-padding", "-margin"] },
   { kind: "gap", suffix: ["-gap"] },
@@ -1569,6 +1566,77 @@ var componentMigration_2026_09_20_scrimColorAndOpacity = {
   }
 };
 
+// src/editor/core/themes/migrations/2026-09-21-wash-color-and-opacity.ts
+var FAMILIES = ["scrim", "tint"];
+var COLOR_MIX_RE = /^color-mix\(in srgb,\s*var\((--[a-z0-9-]+)\)\s+(\d+(?:\.\d+)?)%,\s*transparent\)$/i;
+var PLAIN_VAR_RE = /^var\((--[a-z0-9-]+)\)$/i;
+function parseFill(raw) {
+  const s = raw.trim();
+  const mix = s.match(COLOR_MIX_RE);
+  if (mix) return { color: mix[1], opacity: Math.min(100, Number(mix[2])) / 100 };
+  const plain = s.match(PLAIN_VAR_RE);
+  return plain ? { color: plain[1], opacity: 1 } : null;
+}
+var colorsAndTypeMigration_2026_09_21_washColorAndOpacity = {
+  id: "2026-09-21-wash-color-and-opacity",
+  fromVersion: 8,
+  toVersion: 9,
+  appliesTo: "colors-and-type",
+  apply(rawVars) {
+    const out = { ...rawVars };
+    for (const family of FAMILIES) {
+      let color = null;
+      for (const suffix of ["", "-low", "-high"]) {
+        const key = `--${family}${suffix}`;
+        const parsed = out[key] === void 0 ? null : parseFill(out[key]);
+        if (!parsed) continue;
+        color ??= parsed.color;
+        out[`--${family}-opacity${suffix}`] = String(parsed.opacity);
+        delete out[key];
+      }
+      if (color) out[`--${family}-color`] = `var(${color})`;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-21-scrim-surface.ts
+var STOPS2 = {
+  "--scrim-opacity-low": "--scrim-low",
+  "--scrim-opacity": "--scrim",
+  "--scrim-opacity-high": "--scrim-high"
+};
+var PAIR = /^--(imagelightbox|dialog)-scrim-(color|opacity)$/;
+var ref = (value) => value.startsWith("--") ? `var(${value})` : value;
+function fill(color, opacity) {
+  if (color === "--scrim-color" && STOPS2[opacity]) return STOPS2[opacity];
+  if (opacity === "1") return color;
+  const pct = Number.isFinite(Number(opacity)) ? `${Number(opacity) * 100}%` : `calc(${ref(opacity)} * 100%)`;
+  return `color-mix(in srgb, ${ref(color)} ${pct}, transparent)`;
+}
+var componentMigration_2026_09_21_scrimSurface = {
+  id: "2026-09-21-scrim-surface",
+  fromVersion: 37,
+  toVersion: 38,
+  appliesTo: "component-config",
+  apply(rawVars) {
+    const out = {};
+    const pairs = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      const match = PAIR.exec(key);
+      if (!match) {
+        out[key] = value;
+        continue;
+      }
+      (pairs[match[1]] ??= {})[match[2]] = value;
+    }
+    for (const [id, { color = "--scrim-color", opacity = "--scrim-opacity-high" }] of Object.entries(pairs)) {
+      out[`--${id}-scrim-surface`] = fill(color, opacity);
+    }
+    return out;
+  }
+};
+
 // src/editor/core/themes/migrations/2026-09-13-cornerbadge-prefix.ts
 var RENAMES8 = {
   cornerbadge: {
@@ -1765,7 +1833,9 @@ var MIGRATIONS = [
   componentMigration_2026_09_13_collapsiblesectionOpen,
   componentMigration_2026_09_13_badgeBrand,
   componentMigration_2026_09_20_imagelightboxScrim,
-  componentMigration_2026_09_20_scrimColorAndOpacity
+  componentMigration_2026_09_20_scrimColorAndOpacity,
+  colorsAndTypeMigration_2026_09_21_washColorAndOpacity,
+  componentMigration_2026_09_21_scrimSurface
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;

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

@@ -37,7 +37,7 @@ interface AdjustResult {
 }
 declare function adjustAliases(configs: Record<string, ComponentConfig>, ops: readonly AdjustOp[], now: string): AdjustResult;
 
-type TokenKind = 'surface' | 'border' | 'border-width' | 'hairline-width' | 'indicator-width' | 'radius' | 'track-height' | 'hairline-inset' | 'dot-size' | 'length' | 'blur' | 'scale' | 'opacity' | 'shadow' | 'font-family' | 'font-weight' | 'font-size' | 'line-height' | 'letter-spacing' | 'padding' | 'gap' | 'duration' | 'easing' | 'text-color';
+type TokenKind = 'surface' | 'border' | 'border-width' | 'hairline-width' | 'indicator-width' | 'radius' | 'track-height' | 'hairline-inset' | 'dot-size' | 'length' | 'blur' | 'scale' | 'shadow' | 'font-family' | 'font-weight' | 'font-size' | 'line-height' | 'letter-spacing' | 'padding' | 'gap' | 'duration' | 'easing' | 'text-color';
 /** Side-aware kind test. Per-side paddings (`--card-default-body-padding-top`)
     are written by UIPaddingSelector and never declared as editor tokens, so
     `rawKind` never meets one; the CLI does, and they belong with their parent. */

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

@@ -37,7 +37,7 @@ interface AdjustResult {
 }
 declare function adjustAliases(configs: Record<string, ComponentConfig>, ops: readonly AdjustOp[], now: string): AdjustResult;
 
-type TokenKind = 'surface' | 'border' | 'border-width' | 'hairline-width' | 'indicator-width' | 'radius' | 'track-height' | 'hairline-inset' | 'dot-size' | 'length' | 'blur' | 'scale' | 'opacity' | 'shadow' | 'font-family' | 'font-weight' | 'font-size' | 'line-height' | 'letter-spacing' | 'padding' | 'gap' | 'duration' | 'easing' | 'text-color';
+type TokenKind = 'surface' | 'border' | 'border-width' | 'hairline-width' | 'indicator-width' | 'radius' | 'track-height' | 'hairline-inset' | 'dot-size' | 'length' | 'blur' | 'scale' | 'shadow' | 'font-family' | 'font-weight' | 'font-size' | 'line-height' | 'letter-spacing' | 'padding' | 'gap' | 'duration' | 'easing' | 'text-color';
 /** Side-aware kind test. Per-side paddings (`--card-default-body-padding-top`)
     are written by UIPaddingSelector and never declared as editor tokens, so
     `rawKind` never meets one; the CLI does, and they belong with their parent. */

package/dist-plugin/setGeometry/index.js

@@ -1,6 +1,6 @@
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "../chunk-FD4FVDOC.js";
+} from "../chunk-ONYAIXCZ.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs
@@ -42,9 +42,6 @@ var KIND_RULES = [
   { kind: "dot-size", suffix: ["-dot-size"] },
   { kind: "blur", suffix: ["-blur"], prefix: ["--blur-"] },
   { kind: "scale", suffix: ["-scale"], prefix: ["--scale-"] },
-  // A strength from 0 to 1 that the component mixes into a colour where it
-  // paints. A palette picker here writes a colour into a number.
-  { kind: "opacity", suffix: ["-opacity"], prefix: ["--scrim-opacity"] },
   { kind: "shadow", suffix: ["-shadow"], prefix: ["--shadow-"] },
   { kind: "padding", suffix: ["-padding", "-margin"] },
   { kind: "gap", suffix: ["-gap"] },

package/dist-plugin/tokensCssMigrations/index.cjs

@@ -659,6 +659,26 @@ var tokensCssMigration_2026_09_20_scrimColorAndOpacity = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-09-21-tint-color-and-opacity.ts
+var ENTRIES3 = [
+  { name: "--tint-color", value: "rgb(255, 255, 255)" },
+  { name: "--tint-opacity-low", value: "0.05" },
+  { name: "--tint-opacity", value: "0.1" },
+  { name: "--tint-opacity-high", value: "0.15" }
+];
+var tokensCssMigration_2026_09_21_tintColorAndOpacity = {
+  id: "2026-09-21-tint-color-and-opacity",
+  kind: "additive",
+  description: "Add --tint-color and --tint-opacity-*; a tint's colour and strength are separate tokens",
+  apply(css) {
+    return ensureScale(css, {
+      entries: ENTRIES3,
+      sectionComment: "Tint colour and strength, which the --tint-* stops compose",
+      anchorPrefixes: ["--tint"]
+    });
+  }
+};
+
 // vite-plugin/files/dataPaths.ts
 var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
@@ -712,7 +732,8 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_08_27_editorialLargeSteps,
   tokensCssMigration_2026_09_01_scrimRename,
   tokensCssMigration_2026_09_01_tintScale,
-  tokensCssMigration_2026_09_20_scrimColorAndOpacity
+  tokensCssMigration_2026_09_20_scrimColorAndOpacity,
+  tokensCssMigration_2026_09_21_tintColorAndOpacity
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);

package/dist-plugin/tokensCssMigrations/index.js

@@ -13,7 +13,7 @@ import {
   runTokensCssMigrations,
   semverBumpType,
   validateTokensCss
-} from "../chunk-V2OVSC5Z.js";
+} from "../chunk-GWMEYBZ2.js";
 import "../chunk-7TQQTHI6.js";
 import {
   readLiveTokensConfig

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.84.0",
+  "version": "0.85.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [

package/src/editor/component-editor/DialogEditor.svelte

@@ -16,8 +16,7 @@
   // Button styling lives in Button.svelte — the dialog only owns its own chrome.
   const frameStates: Record<string, Token[]> = {
     scrim: [
-      { label: 'scrim color', groupKey: 'surface', variable: '--dialog-scrim-color' },
-      { label: 'scrim opacity', variable: '--dialog-scrim-opacity' },
+      { label: 'scrim color', groupKey: 'surface', variable: '--dialog-scrim-surface' },
     ],
     dialog: [
       { label: 'surface color', variable: '--dialog-surface' },

package/src/editor/component-editor/ImageLightboxEditor.svelte

@@ -15,8 +15,7 @@
       { label: 'tile shadow',                       variable: '--imagelightbox-tile-shadow' },
     ],
     overlay: [
-      { label: 'scrim color', groupKey: 'surface', variable: '--imagelightbox-scrim-color' },
-      { label: 'scrim opacity', variable: '--imagelightbox-scrim-opacity' },
+      { label: 'scrim color', groupKey: 'surface', variable: '--imagelightbox-scrim-surface' },
     ],
     chrome: [
       { label: 'surface color',       groupKey: 'surface', variable: '--imagelightbox-chrome-surface' },

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

@@ -9,7 +9,7 @@
   import UIPaddingSelector from '../../ui/UIPaddingSelector.svelte';
   import UILetterSpacingSelector from '../../ui/UILetterSpacingSelector.svelte';
   import UIEasingSelector from '../../ui/UIEasingSelector.svelte';
-  import { BLUR, BORDER_WIDTH, DOT_SIZE, DURATION, RADIUS, SCALE, SCRIM_OPACITY, SHADOW, TRACK_HEIGHT, HAIRLINE_INSET } from '../../ui/variantScales';
+  import { BLUR, BORDER_WIDTH, DOT_SIZE, DURATION, RADIUS, SCALE, SHADOW, TRACK_HEIGHT, HAIRLINE_INSET } from '../../ui/variantScales';
   import {
     editorState,
     getComponentPropertySiblings,
@@ -80,7 +80,6 @@
     'easing',
     'blur',
     'scale',
-    'opacity',
     'shadow',
     'text-color',
     'surface',
@@ -161,7 +160,6 @@
     'easing': { component: UIEasingSelector },
     'blur': { component: UIVariantSelector, extra: () => ({ ...BLUR }) },
     'scale': { component: UIVariantSelector, extra: () => ({ ...SCALE }) },
-    'opacity': { component: UIVariantSelector, extra: () => ({ ...SCRIM_OPACITY }) },
     'shadow': { component: UIVariantSelector, extra: () => ({ ...SHADOW }) },
     'surface': { component: UIPaletteSelector, extra: paletteExtra },
     'border': { component: UIPaletteSelector, extra: paletteExtra },
@@ -192,7 +190,6 @@
       'easing',
       'blur',
       'scale',
-      'opacity',
       'shadow',
       'surface',
       'border-width',

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

@@ -11,7 +11,6 @@ export type TokenKind =
   | 'length'
   | 'blur'
   | 'scale'
-  | 'opacity'
   | 'shadow'
   | 'font-family'
   | 'font-weight'
@@ -60,9 +59,6 @@ export const KIND_RULES: ReadonlyArray<{
   { kind: 'dot-size',       suffix: ['-dot-size'] },
   { kind: 'blur',           suffix: ['-blur'], prefix: ['--blur-'] },
   { kind: 'scale',          suffix: ['-scale'], prefix: ['--scale-'] },
-  // A strength from 0 to 1 that the component mixes into a colour where it
-  // paints. A palette picker here writes a colour into a number.
-  { kind: 'opacity',        suffix: ['-opacity'], prefix: ['--scrim-opacity'] },
   { kind: 'shadow',         suffix: ['-shadow'], prefix: ['--shadow-'] },
   { kind: 'padding',        suffix: ['-padding', '-margin'] },
   { kind: 'gap',            suffix: ['-gap'] },

package/src/editor/core/sketch/sketchLayer.ts

@@ -186,7 +186,7 @@ const PART_SPECS: readonly PartSpec[] = [
   { sel: '.image-lightbox-thumb', stem: 'imagelightbox-tile', positioned: true, clips: true },
   // A fixed full-viewport scrim behind the open modal; no border of its own.
   {
-    sel: '.image-lightbox-overlay', fill: 'color-mix(in srgb, var(--imagelightbox-scrim-color) calc(var(--imagelightbox-scrim-opacity) * 100%), transparent)',
+    sel: '.image-lightbox-overlay', fill: 'var(--imagelightbox-scrim-surface)',
     stroke: 'transparent', positioned: true, unmasked: true,
   },
   // Close and the two nav chevrons all carry this class; each is fixed and

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

@@ -14,13 +14,13 @@
  */
 
 import { get } from 'svelte/store';
-import type { EditorState } from './editorTypes';
+import type { EditorState, WashScale } from './editorTypes';
 import { storageKey } from './editorConfig';
 import { store } from './editorCore';
 import { quietGet, quietSet } from '../storage/storage';
 import { isGradientSlot, makeDefaultGradients } from '../themes/slices/gradients';
 import { seedShadowsFromDom } from '../themes/slices/shadows';
-import { makeDefaultScrimTokens, makeDefaultTintTokens } from '../themes/slices/washes';
+import { makeDefaultWashScale, type WashFamily } from '../themes/slices/washes';
 import { sanitizeHarmonyAxes } from '../palettes/colorHarmony';
 import {
   renameBackgroundPaletteKey,
@@ -78,34 +78,57 @@ function migrateGradients(state: EditorState): EditorState {
 // calls `Object.entries(slice.config)` unconditionally, so backfill the
 // required fields and drop any non-object slice before the state reaches the
 // renderer. Spread preserves optional fields like `unlinked`.
-// The washes slice was `overlays: { tokens, hoverTokens }` before the scrim and
-// tint renames, and `hydrate` shallow-merges, so a persisted state from an
-// older build replaces `washes` wholesale and arrives without `tints`.
-// `washesToVars` iterates both lists unconditionally, so reshape here: carry the
-// stops across under their new names, and rewrite the variable each one carries.
-const WASH_VAR_RENAMES: Record<string, string> = {
-  '--overlay-low': '--scrim-low',
-  '--overlay': '--scrim',
-  '--overlay-high': '--scrim-high',
-  '--hover-low': '--tint-low',
-  '--hover': '--tint',
-  '--hover-high': '--tint-high',
+// A persisted washes slice can predate two reshapes. Before the scrim and tint
+// renames it was `overlays: { tokens, hoverTokens }`; until 0.85.0 each family
+// was a list of `{variable, alias, opacity}` stops, each carrying its own
+// colour. `hydrate` shallow-merges, so an older build's `washes` arrives whole
+// in that shape, and `washesToVars` reads `color` and `stops` unconditionally.
+// Reshape here: the family takes the base stop's colour, and each stop its
+// opacity under the new variable.
+const LEGACY_STOP_OPACITY_VARS: Record<string, string> = {
+  '--overlay-low': '--scrim-opacity-low',
+  '--overlay': '--scrim-opacity',
+  '--overlay-high': '--scrim-opacity-high',
+  '--scrim-low': '--scrim-opacity-low',
+  '--scrim': '--scrim-opacity',
+  '--scrim-high': '--scrim-opacity-high',
+  '--hover-low': '--tint-opacity-low',
+  '--hover': '--tint-opacity',
+  '--hover-high': '--tint-opacity-high',
+  '--tint-low': '--tint-opacity-low',
+  '--tint': '--tint-opacity',
+  '--tint-high': '--tint-opacity-high',
 };
 
 type LegacyWashes = {
+  scrim?: unknown;
+  tint?: unknown;
   scrims?: unknown;
   tints?: unknown;
   hoverTokens?: unknown;
   tokens?: unknown;
 };
 
-/** Carry a persisted stop list forward, or fall back to the shipped defaults. */
-function washList(raw: unknown, fallback: () => EditorState['washes']['scrims']) {
-  if (!Array.isArray(raw) || raw.length === 0) return fallback();
-  const carried = raw
-    .filter((t): t is EditorState['washes']['scrims'][number] => !!t && typeof t === 'object' && 'variable' in t)
-    .map((t) => ({ ...t, variable: WASH_VAR_RENAMES[t.variable] ?? t.variable }));
-  return carried.length > 0 ? carried : fallback();
+type LegacyStop = { variable: string; alias?: unknown; opacity?: unknown };
+
+function isScale(raw: unknown): raw is WashScale {
+  return !!raw && typeof raw === 'object'
+    && typeof (raw as WashScale).color === 'string'
+    && Array.isArray((raw as WashScale).stops);
+}
+
+function washScale(current: unknown, legacyList: unknown, family: WashFamily): WashScale {
+  if (isScale(current)) return current;
+  const scale = makeDefaultWashScale(family);
+  if (!Array.isArray(legacyList)) return scale;
+  const stops = legacyList.filter((t): t is LegacyStop => !!t && typeof t === 'object' && 'variable' in t);
+  const base = stops.find((t) => LEGACY_STOP_OPACITY_VARS[t.variable] === `--${family}-opacity`) ?? stops[0];
+  if (typeof base?.alias === 'string') scale.color = base.alias;
+  for (const t of stops) {
+    const stop = scale.stops.find((s) => s.variable === LEGACY_STOP_OPACITY_VARS[t.variable]);
+    if (stop && typeof t.opacity === 'number') stop.opacity = t.opacity;
+  }
+  return scale;
 }
 
 export function normalizeWashes(state: EditorState): EditorState {
@@ -113,8 +136,8 @@ export function normalizeWashes(state: EditorState): EditorState {
   const legacy = ((state as unknown as { overlays?: LegacyWashes }).overlays ?? {}) as LegacyWashes;
   const next = { ...state } as EditorState & { overlays?: unknown };
   next.washes = {
-    scrims: washList(washes.scrims ?? legacy.tokens, makeDefaultScrimTokens),
-    tints: washList(washes.tints ?? washes.hoverTokens ?? legacy.hoverTokens, makeDefaultTintTokens),
+    scrim: washScale(washes.scrim, washes.scrims ?? legacy.tokens, 'scrim'),
+    tint: washScale(washes.tint, washes.tints ?? washes.hoverTokens ?? legacy.hoverTokens, 'tint'),
   };
   delete next.overlays;
   return next;

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

@@ -152,12 +152,8 @@ export {
 export {
   washesToVars,
   WASH_VAR_NAMES,
-  applyWashVarsToState,
   makeDefaultWashesState,
-  makeDefaultScrimTokens,
-  makeDefaultTintTokens,
-  washTokenToCss,
-  parseWashCss,
+  makeDefaultWashScale,
 } from '../themes/slices/washes';
 
 export {

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

@@ -23,16 +23,20 @@ export interface ShadowOverrideFlags {
   distance: boolean; blur: boolean; size: boolean;
 }
 
-/** A wash: an aliased color token + an opacity. Emits as
- *  `color-mix(in srgb, var(<alias>) <opacity%>, transparent)`. Scrims dim what
- *  is behind them; tints shade the surface they sit on. */
-export interface WashToken {
+/** One opacity stop of a wash family, emitted as a bare number. */
+export interface WashStop {
   variable: string;
   label: string;
-  alias: string;
   opacity: number;
 }
 
+/** A wash family: one aliased colour and its opacity stops. Scrims dim what is
+ *  behind them; tints shade the surface they sit on. */
+export interface WashScale {
+  color: string;
+  stops: WashStop[];
+}
+
 export interface ColumnsState {
   count: number;
   maxWidth: number;
@@ -113,8 +117,8 @@ export interface EditorState {
     overrides: Record<string, ShadowOverrideFlags>;
   };
   washes: {
-    scrims: WashToken[];
-    tints: WashToken[];
+    scrim: WashScale;
+    tint: WashScale;
   };
   columns: ColumnsState;
   components: Record<string, ComponentSlice>;

package/src/editor/core/themes/migrations/2026-09-21-scrim-surface.ts

@@ -0,0 +1,56 @@
+import type { Migration } from './index';
+
+/**
+ * A screen's scrim is one fill again (2026-09-21).
+ *
+ * From 0.84.0 Dialog and ImageLightbox read `-scrim-color` and
+ * `-scrim-opacity` and mixed them where they painted. The theme now composes
+ * `--scrim-low`, `--scrim`, and `--scrim-high` from its own colour and
+ * strengths, so a screen picks one of those stops as `-scrim-surface`, the way
+ * a hover picks a `--tint-*` stop.
+ *
+ * The scale's colour at one of its strengths becomes that stop. Any other pair
+ * becomes the `color-mix()` the screen used to paint, so the page looks the
+ * same.
+ */
+const STOPS: Record<string, string> = {
+  '--scrim-opacity-low': '--scrim-low',
+  '--scrim-opacity': '--scrim',
+  '--scrim-opacity-high': '--scrim-high',
+};
+
+const PAIR = /^--(imagelightbox|dialog)-scrim-(color|opacity)$/;
+
+const ref = (value: string) => (value.startsWith('--') ? `var(${value})` : value);
+
+function fill(color: string, opacity: string): string {
+  if (color === '--scrim-color' && STOPS[opacity]) return STOPS[opacity];
+  if (opacity === '1') return color;
+  const pct = Number.isFinite(Number(opacity))
+    ? `${Number(opacity) * 100}%`
+    : `calc(${ref(opacity)} * 100%)`;
+  return `color-mix(in srgb, ${ref(color)} ${pct}, transparent)`;
+}
+
+export const componentMigration_2026_09_21_scrimSurface: Migration = {
+  id: '2026-09-21-scrim-surface',
+  fromVersion: 37,
+  toVersion: 38,
+  appliesTo: 'component-config',
+  apply(rawVars) {
+    const out: Record<string, string> = {};
+    const pairs: Record<string, { color?: string; opacity?: string }> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      const match = PAIR.exec(key);
+      if (!match) {
+        out[key] = value;
+        continue;
+      }
+      (pairs[match[1]] ??= {})[match[2] as 'color' | 'opacity'] = value;
+    }
+    for (const [id, { color = '--scrim-color', opacity = '--scrim-opacity-high' }] of Object.entries(pairs)) {
+      out[`--${id}-scrim-surface`] = fill(color, opacity);
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-09-21-wash-color-and-opacity.ts

@@ -0,0 +1,51 @@
+import type { Migration } from './index';
+
+/**
+ * A wash family's colour and its strengths, apart (2026-09-21).
+ *
+ * A theme stored each `--scrim-*` and `--tint-*` stop as a composed fill,
+ * `color-mix(in srgb, var(<colour>) N%, transparent)`, so the colour was
+ * restated three times and the fill overrode the one tokens.css composes from
+ * `--scrim-color` and `--scrim-opacity-*`. That left Dialog and ImageLightbox,
+ * which read the pair, deaf to every theme's scrim.
+ *
+ * Each family now stores `--<family>-color` and `--<family>-opacity-*`. The
+ * base stop gives the colour, falling back to the first stop that parses. A
+ * stop that does not parse is a hand-written fill: it stays, so the page keeps
+ * painting what the theme's author chose.
+ */
+const FAMILIES = ['scrim', 'tint'] as const;
+
+const COLOR_MIX_RE = /^color-mix\(in srgb,\s*var\((--[a-z0-9-]+)\)\s+(\d+(?:\.\d+)?)%,\s*transparent\)$/i;
+const PLAIN_VAR_RE = /^var\((--[a-z0-9-]+)\)$/i;
+
+function parseFill(raw: string): { color: string; opacity: number } | null {
+  const s = raw.trim();
+  const mix = s.match(COLOR_MIX_RE);
+  if (mix) return { color: mix[1], opacity: Math.min(100, Number(mix[2])) / 100 };
+  const plain = s.match(PLAIN_VAR_RE);
+  return plain ? { color: plain[1], opacity: 1 } : null;
+}
+
+export const colorsAndTypeMigration_2026_09_21_washColorAndOpacity: Migration = {
+  id: '2026-09-21-wash-color-and-opacity',
+  fromVersion: 8,
+  toVersion: 9,
+  appliesTo: 'colors-and-type',
+  apply(rawVars) {
+    const out = { ...rawVars };
+    for (const family of FAMILIES) {
+      let color: string | null = null;
+      for (const suffix of ['', '-low', '-high']) {
+        const key = `--${family}${suffix}`;
+        const parsed = out[key] === undefined ? null : parseFill(out[key]);
+        if (!parsed) continue;
+        color ??= parsed.color;
+        out[`--${family}-opacity${suffix}`] = String(parsed.opacity);
+        delete out[key];
+      }
+      if (color) out[`--${family}-color`] = `var(${color})`;
+    }
+    return out;
+  },
+};

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

@@ -81,6 +81,8 @@ import { componentMigration_2026_09_13_indicator } from './2026-09-13-indicator'
 import { componentMigration_2026_09_13_sectiondividerSurface } from './2026-09-13-sectiondivider-surface';
 import { componentMigration_2026_09_20_imagelightboxScrim } from './2026-09-20-imagelightbox-scrim';
 import { componentMigration_2026_09_20_scrimColorAndOpacity } from './2026-09-20-scrim-color-and-opacity';
+import { colorsAndTypeMigration_2026_09_21_washColorAndOpacity } from './2026-09-21-wash-color-and-opacity';
+import { componentMigration_2026_09_21_scrimSurface } from './2026-09-21-scrim-surface';
 import { componentMigration_2026_09_13_cornerbadgePrefix } from './2026-09-13-cornerbadge-prefix';
 import { componentMigration_2026_09_13_toggleLabel } from './2026-09-13-toggle-label';
 import { componentMigration_2026_09_13_collapsiblesectionOpen } from './2026-09-13-collapsiblesection-open';
@@ -136,6 +138,8 @@ export const MIGRATIONS: Migration[] = [
   componentMigration_2026_09_13_badgeBrand,
   componentMigration_2026_09_20_imagelightboxScrim,
   componentMigration_2026_09_20_scrimColorAndOpacity,
+  colorsAndTypeMigration_2026_09_21_washColorAndOpacity,
+  componentMigration_2026_09_21_scrimSurface,
 ];
 
 function countFor(kind: 'colors-and-type' | 'component-config'): number {