@motion-proto/live-tokens 0.83.0 → 0.85.0

package/.claude/skills/live-tokens-create-component/references/token-naming.md

@@ -19,7 +19,6 @@ to that list, so the two cannot drift apart.
 | `-fill`     | Inner fill (distinct from outer surface)                      |
 | `-color`    | A hairline rule's colour, or a color no role word above names |
 | `-shadow`   | Box-shadow                                                    |
-| `-opacity`  | Opacity (0–1)                                                 |
 | `-blur`     | Backdrop or filter blur radius                                |
 | `-tint`     | A wash over the surface, aliasing a `--tint-*` stop            |
 | `-indicator` | The colour of the bar or stripe that marks an item             |

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # Changelog
 
+## 0.85.0 — A theme's scrims and tints are a colour and three strengths
+
+### Changed
+
+- **The theme stores each wash family as a colour and three opacity stops.**
+  It writes `--scrim-color` with `--scrim-opacity-low`, `--scrim-opacity`, and
+  `--scrim-opacity-high`, and the same four for tints. It no longer writes the
+  composed `--scrim-*` and `--tint-*` fills. From 0.84.0 Dialog and
+  ImageLightbox read `--scrim-color` and `--scrim-opacity-*`, and themes never
+  set them, so a theme's scrim reached neither screen. The Washes section edits
+  one colour per family and a slider per stop. Migration
+  `2026-09-21-wash-color-and-opacity` splits the composed fills in a saved
+  theme. A fill that is not a `color-mix()` of one token stays as written.
+
+- **Scrims default to 70%, 80%, and 90%.** They were 38%, 51%, and 64%. The
+  shipped themes use the new stops, and their ImageLightbox scrims read
+  `--scrim-high` instead of a hand-written fill. Tints stay at 5%, 10%, and 15%.
+
+### Changed (breaking)
+
+- **Dialog and ImageLightbox each take one scrim fill again,
+  `-scrim-surface`, defaulting to `--scrim-high`.** The theme composes each
+  `--scrim-*` stop from its colour and strength, so a screen picks a stop the
+  way a hover picks a `--tint-*` stop. `-scrim-color` and `-scrim-opacity`
+  are gone. ImageLightbox's `scrim` prop takes any CSS fill, such as
+  `var(--scrim-low)`, and `scrimOpacity` is gone. Migration
+  `2026-09-21-scrim-surface` folds a saved pair into one value: the scale's
+  colour at one of its strengths becomes that stop, and any other pair becomes
+  the `color-mix()` the screen painted. The editor's `opacity` property kind
+  and its stop picker go with them, since no other property used them.
+
+### Added
+
+- **`--tint-color` and `--tint-opacity-low`, `--tint-opacity`,
+  `--tint-opacity-high`.** tokens.css composes the three `--tint-*` stops from
+  them. The additive tokens-css migration `2026-09-21-tint-color-and-opacity`
+  inserts the four names into an existing `tokens.css`. The stops already in
+  that file keep their values; to have them follow `--tint-color`, write each
+  as `color-mix(in srgb, var(--tint-color) calc(var(--tint-opacity) * 100%), transparent)`
+  with its own opacity stop.
+
+## 0.84.0 — A scrim's colour and strength are separate tokens
+
+### Added
+
+- **`--scrim-color` and `--scrim-opacity-low`, `--scrim-opacity`,
+  `--scrim-opacity-high`.** A theme holds one and moves the other: a light
+  `--scrim-color` gives a scrim that pales the page. The three `--scrim-*` stops
+  remain, composed from the two. The additive tokens-css migration
+  `2026-09-20-scrim-color-and-opacity` inserts the four names into an existing
+  `tokens.css`, and the dev plugin applies it on its own. The stops already in
+  that file keep their values; to have them follow `--scrim-color`, write each
+  as `color-mix(in srgb, var(--scrim-color) calc(var(--scrim-opacity) * 100%), transparent)`
+  with its own opacity stop.
+
+- **The editor picks an opacity from its stops.** A property whose name ends in
+  `-opacity` takes a picker of the three scrim strengths, low, medium, and high.
+  The suffix used to fall under the fill rule, which offered a palette and wrote
+  a colour into a number.
+
+### Changed (breaking)
+
+- **`--dialog-scrim-surface` and `--imagelightbox-scrim-surface` each split into
+  `-scrim-color` and `-scrim-opacity`.** Each screen mixes the pair where it
+  paints. ImageLightbox's `scrim` prop writes the colour and `scrimOpacity`
+  writes the strength, and the opacity now stands on its own. Migration
+  `2026-09-20-scrim-color-and-opacity` splits the old key in a saved component
+  config: a `--scrim-*` stop becomes that stop's opacity with `--scrim-color`,
+  and a hand-written fill becomes the colour at full strength. A project whose
+  `tokens.css` gave the scrim stops their own colour sets `--scrim-color` to it,
+  since Dialog and ImageLightbox now read that token.
+
 ## 0.83.0 — The catalogue entry names what rules a component out
 
 ### Added

package/dist-plugin/{chunk-RFVYPNRO.js → chunk-GWMEYBZ2.js}

@@ -552,6 +552,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/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -568,7 +608,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/{chunk-6JKUYCPL.js → chunk-ONYAIXCZ.js}

@@ -1195,6 +1195,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: {
@@ -1390,7 +1490,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/{chunk-LBZISJPG.js → chunk-W5VQV32K.js}

@@ -1,7 +1,7 @@
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION,
   runMigrations
-} from "./chunk-6JKUYCPL.js";
+} from "./chunk-ONYAIXCZ.js";
 
 // vite-plugin/files/versionedFileResourceServer.ts
 import fs from "fs";

package/dist-plugin/index.cjs

@@ -1979,6 +1979,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: {
@@ -2174,7 +2274,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;
@@ -2521,7 +2624,7 @@ function migrateComponentConfig(component, aliasesIn, rawConfig, fileVersion) {
     config: configOut
   };
 }
-var FAMILIES = ["canvas", "neutral", "alternate", "primary", "accent", "special"];
+var FAMILIES2 = ["canvas", "neutral", "alternate", "primary", "accent", "special"];
 var SIZE_VARIANTS = ["lg", "md", "sm"];
 function renameSectionDividerObjectSlots(objectPart) {
   const canvasSourceKeys = [
@@ -2539,7 +2642,7 @@ function renameSectionDividerObjectSlots(objectPart) {
   const out = {};
   for (const [key, value] of Object.entries(objectPart)) {
     let isFamilyGradient = false;
-    for (const f of FAMILIES) {
+    for (const f of FAMILIES2) {
       if (key === `--sectiondivider-${f}-background` || key === `--sectiondivider-${f}-gradient` || key === `--sectiondivider-color-${f}-background`) {
         isFamilyGradient = true;
         break;
@@ -3883,6 +3986,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/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -3899,7 +4042,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);
@@ -3930,9 +4075,9 @@ function validateTokensCss(input) {
     const body = extractGlobalRootBody(source);
     if (!body) continue;
     for (const t of collectDefinedTokens(body)) defined.add(t);
-    for (const ref of collectReferencedTokens(body)) {
-      let set = referencedBy.get(ref);
-      if (!set) referencedBy.set(ref, set = /* @__PURE__ */ new Set());
+    for (const ref2 of collectReferencedTokens(body)) {
+      let set = referencedBy.get(ref2);
+      if (!set) referencedBy.set(ref2, set = /* @__PURE__ */ new Set());
       set.add(name);
     }
   }

package/dist-plugin/index.js

@@ -5,7 +5,7 @@ import {
   nextAvailableName,
   normalizeTheme,
   versionedFileResourceServer
-} from "./chunk-LBZISJPG.js";
+} from "./chunk-W5VQV32K.js";
 import {
   formatGradientValue,
   palettesToVars,
@@ -16,14 +16,14 @@ import {
 } from "./chunk-O6GQ6GBH.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "./chunk-6JKUYCPL.js";
+} from "./chunk-ONYAIXCZ.js";
 import {
   TOKENS_CSS_MIGRATIONS,
   extractGlobalRootBody,
   runAdditiveTokensCssMigrations,
   runTokensCssMigrations,
   validateTokensCss
-} from "./chunk-RFVYPNRO.js";
+} from "./chunk-GWMEYBZ2.js";
 import {
   hexToOklch,
   oklchToRgb255,

package/dist-plugin/migrateData/index.cjs

@@ -1375,6 +1375,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: {
@@ -1570,7 +1670,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;
@@ -1609,7 +1712,7 @@ function migrateComponentConfig(component, aliasesIn, rawConfig, fileVersion) {
     config: configOut
   };
 }
-var FAMILIES = ["canvas", "neutral", "alternate", "primary", "accent", "special"];
+var FAMILIES2 = ["canvas", "neutral", "alternate", "primary", "accent", "special"];
 var SIZE_VARIANTS = ["lg", "md", "sm"];
 function renameSectionDividerObjectSlots(objectPart) {
   const canvasSourceKeys = [
@@ -1627,7 +1730,7 @@ function renameSectionDividerObjectSlots(objectPart) {
   const out = {};
   for (const [key, value] of Object.entries(objectPart)) {
     let isFamilyGradient = false;
-    for (const f of FAMILIES) {
+    for (const f of FAMILIES2) {
       if (key === `--sectiondivider-${f}-background` || key === `--sectiondivider-${f}-gradient` || key === `--sectiondivider-color-${f}-background`) {
         isFamilyGradient = true;
         break;
@@ -2560,9 +2663,9 @@ function migrateData(opts) {
     }
     const { theme, migrated, dropped } = normalizeTheme(raw, resolvers);
     themes.push({ slug, theme });
-    for (const ref of dropped) {
+    for (const ref2 of dropped) {
       droppedRefs.push(
-        `theme "${slug}": the reference ${ref} resolved to nothing, so it carries the shipped default instead`
+        `theme "${slug}": the reference ${ref2} resolved to nothing, so it carries the shipped default instead`
       );
     }
     if (migrated && import_fs3.default.existsSync(themesRes.filePath(slug))) {

package/dist-plugin/migrateData/index.js

@@ -7,10 +7,10 @@ import {
   normalizeTheme,
   planLegacyRenames,
   versionedFileResourceServer
-} from "../chunk-LBZISJPG.js";
+} from "../chunk-W5VQV32K.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "../chunk-6JKUYCPL.js";
+} from "../chunk-ONYAIXCZ.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs