@motion-proto/live-tokens 0.83.0 → 0.85.0

package/dist-plugin/setColors/index.cjs

@@ -2389,6 +2389,106 @@ var componentMigration_2026_09_20_imagelightboxScrim = {
   }
 };
 
+// src/editor/core/themes/migrations/2026-09-20-scrim-color-and-opacity.ts
+var STOPS = {
+  "--scrim-low": "--scrim-opacity-low",
+  "--scrim": "--scrim-opacity",
+  "--scrim-high": "--scrim-opacity-high"
+};
+var SURFACE = /^--(imagelightbox|dialog)-scrim-surface$/;
+var componentMigration_2026_09_20_scrimColorAndOpacity = {
+  id: "2026-09-20-scrim-color-and-opacity",
+  fromVersion: 36,
+  toVersion: 37,
+  appliesTo: "component-config",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      const match = SURFACE.exec(key);
+      if (!match) {
+        out[key] = value;
+        continue;
+      }
+      const stem = `--${match[1]}-scrim`;
+      const stop = STOPS[value];
+      out[`${stem}-color`] = stop ? "--scrim-color" : value;
+      out[`${stem}-opacity`] = stop ?? "1";
+    }
+    return out;
+  }
+};
+
+// 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: {
@@ -2584,7 +2684,10 @@ var MIGRATIONS = [
   componentMigration_2026_09_13_toggleLabel,
   componentMigration_2026_09_13_collapsiblesectionOpen,
   componentMigration_2026_09_13_badgeBrand,
-  componentMigration_2026_09_20_imagelightboxScrim
+  componentMigration_2026_09_20_imagelightboxScrim,
+  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/setColors/index.js

@@ -18,7 +18,7 @@ import {
 } from "../chunk-O6GQ6GBH.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "../chunk-6JKUYCPL.js";
+} from "../chunk-ONYAIXCZ.js";
 import {
   cssColorToOklch,
   gamutClamp,

package/dist-plugin/setGeometry/index.cjs

@@ -95,8 +95,7 @@ var KIND_RULES = [
       "-indicator",
       "-thumb",
       "-color",
-      "-tint",
-      "-opacity"
+      "-tint"
     ],
     prefix: ["--surface-", "--tint", "--color-"]
   }
@@ -1538,6 +1537,106 @@ var componentMigration_2026_09_20_imagelightboxScrim = {
   }
 };
 
+// src/editor/core/themes/migrations/2026-09-20-scrim-color-and-opacity.ts
+var STOPS = {
+  "--scrim-low": "--scrim-opacity-low",
+  "--scrim": "--scrim-opacity",
+  "--scrim-high": "--scrim-opacity-high"
+};
+var SURFACE = /^--(imagelightbox|dialog)-scrim-surface$/;
+var componentMigration_2026_09_20_scrimColorAndOpacity = {
+  id: "2026-09-20-scrim-color-and-opacity",
+  fromVersion: 36,
+  toVersion: 37,
+  appliesTo: "component-config",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      const match = SURFACE.exec(key);
+      if (!match) {
+        out[key] = value;
+        continue;
+      }
+      const stem = `--${match[1]}-scrim`;
+      const stop = STOPS[value];
+      out[`${stem}-color`] = stop ? "--scrim-color" : value;
+      out[`${stem}-opacity`] = stop ?? "1";
+    }
+    return out;
+  }
+};
+
+// 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: {
@@ -1733,7 +1832,10 @@ var MIGRATIONS = [
   componentMigration_2026_09_13_toggleLabel,
   componentMigration_2026_09_13_collapsiblesectionOpen,
   componentMigration_2026_09_13_badgeBrand,
-  componentMigration_2026_09_20_imagelightboxScrim
+  componentMigration_2026_09_20_imagelightboxScrim,
+  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.js

@@ -1,6 +1,6 @@
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "../chunk-6JKUYCPL.js";
+} from "../chunk-ONYAIXCZ.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs
@@ -63,8 +63,7 @@ var KIND_RULES = [
       "-indicator",
       "-thumb",
       "-color",
-      "-tint",
-      "-opacity"
+      "-tint"
     ],
     prefix: ["--surface-", "--tint", "--color-"]
   }

package/dist-plugin/tokensCssMigrations/index.cjs

@@ -639,6 +639,46 @@ var tokensCssMigration_2026_09_01_tintScale = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-09-20-scrim-color-and-opacity.ts
+var ENTRIES2 = [
+  { name: "--scrim-color", value: "rgb(20, 3, 0)" },
+  { name: "--scrim-opacity-low", value: "0.38" },
+  { name: "--scrim-opacity", value: "0.51" },
+  { name: "--scrim-opacity-high", value: "0.64" }
+];
+var tokensCssMigration_2026_09_20_scrimColorAndOpacity = {
+  id: "2026-09-20-scrim-color-and-opacity",
+  kind: "additive",
+  description: "Add --scrim-color and --scrim-opacity-*; a scrim's colour and strength are separate tokens",
+  apply(css) {
+    return ensureScale(css, {
+      entries: ENTRIES2,
+      sectionComment: "Scrim colour and strength, which each screen mixes where it paints",
+      anchorPrefixes: ["--scrim"]
+    });
+  }
+};
+
+// 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);
@@ -691,7 +731,9 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_08_27_editorialSizeSteps,
   tokensCssMigration_2026_08_27_editorialLargeSteps,
   tokensCssMigration_2026_09_01_scrimRename,
-  tokensCssMigration_2026_09_01_tintScale
+  tokensCssMigration_2026_09_01_tintScale,
+  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-RFVYPNRO.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.83.0",
+  "version": "0.85.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [

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

@@ -73,7 +73,7 @@ export const KIND_RULES: ReadonlyArray<{
   // Fills. A tint is a wash over a surface, so it takes the surface picker: the
   // full palette with an alpha, not just the tint stops it defaults to.
   { kind: 'surface',        suffix: ['-surface', '-fill', '-indicator',
-                                     '-thumb', '-color', '-tint', '-opacity'],
+                                     '-thumb', '-color', '-tint'],
                             prefix: ['--surface-', '--tint', '--color-'] },
 ];
 

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-20-scrim-color-and-opacity.ts

@@ -0,0 +1,45 @@
+import type { Migration } from './index';
+
+/**
+ * A scrim's colour and its strength, apart (2026-09-20).
+ *
+ * `-scrim-surface` held one composed fill, so a theme that wanted a paler
+ * screen had to restate the colour to change the strength, and a light scrim
+ * meant hand-writing a `color-mix()`. The pair splits them: `-scrim-color`
+ * takes any colour, `-scrim-opacity` how much of it covers the page.
+ *
+ * The three `--scrim-*` stops still exist, composed from the two, so a value
+ * that named one maps to that stop's opacity and the scale's colour. Anything
+ * else was a hand-written fill: it becomes the colour, at full strength, which
+ * preserves what a reader saw when the old value was already opaque and
+ * otherwise leaves a value a person chose rather than guessing at its alpha.
+ */
+const STOPS: Record<string, string> = {
+  '--scrim-low': '--scrim-opacity-low',
+  '--scrim': '--scrim-opacity',
+  '--scrim-high': '--scrim-opacity-high',
+};
+
+const SURFACE = /^--(imagelightbox|dialog)-scrim-surface$/;
+
+export const componentMigration_2026_09_20_scrimColorAndOpacity: Migration = {
+  id: '2026-09-20-scrim-color-and-opacity',
+  fromVersion: 36,
+  toVersion: 37,
+  appliesTo: 'component-config',
+  apply(rawVars) {
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      const match = SURFACE.exec(key);
+      if (!match) {
+        out[key] = value;
+        continue;
+      }
+      const stem = `--${match[1]}-scrim`;
+      const stop = STOPS[value];
+      out[`${stem}-color`] = stop ? '--scrim-color' : value;
+      out[`${stem}-opacity`] = stop ?? '1';
+    }
+    return out;
+  },
+};

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;
+  },
+};