@motion-proto/live-tokens 0.84.0 → 0.86.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,90 @@
 # Changelog
 
+## 0.86.0 — Video and slides ship as components
+
+### Added
+
+- **VideoLightbox.** A still that fades the page away and plays its clip in
+  the middle of the screen. A click anywhere, the close button, or Escape
+  closes it. Tile, scrim, and close-button chrome are editable, with a hover
+  state for the close button. Every shipped theme carries it, derived from
+  that theme's ImageLightbox so the two match.
+
+- **VideoFrame.** It plays a clip in place from a poster frame, with a play
+  badge or no chrome at all, and falls back to the poster when the clip is
+  not served.
+
+- **SlidePager.** It flips a deck of slides in place. Its full-screen view
+  pages through every slide with the same bar and the arrow keys, and has a
+  close button and Tab stops on its controls. Its chevrons are inline SVG, so
+  it needs no icon font.
+
+  Every shipped theme carries VideoFrame and SlidePager, with frame corners
+  and borders taken from that theme's ImageLightbox and Card. The catalogue
+  entries of the four media components point to each other.
+
+### Changed
+
+- **Every ImageLightbox shows a close button.** A plain lightbox closed only
+  on a click, and nothing on screen said so. The close button now renders for
+  every lightbox and holds focus when the modal opens. An extended lightbox
+  also closes on a click to its unzoomed image; zoomed, a click still pans.
+
+- **The editor overlay picks the active page from a dropdown.** The theme
+  panel's Components and Sketchstyle rows lose their Open buttons, since the
+  view switcher at the top of the panel already opens both. The font pairing
+  moves into the Colors & Type info box.
+
+### Fixed
+
+- **`check-component --tests` collects only the installed package's
+  contracts.** `createVitestConfig` globbed the whole project, so a nested
+  project with its own copy of the package in `node_modules` added that
+  copy's contracts to the run, and they failed against this project's
+  registry. The default now scans the contract files' own directory, the way
+  `createPlaywrightConfig` already did.
+
+## 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

package/README.md

@@ -11,7 +11,7 @@ The editor is dev-only. Production builds get plain CSS variables and the compon
 ## Features
 
 - **Live token editing.** Colors, typography, spacing, radii, shadows, motion, palettes, and gradients. Every input writes a CSS variable, so the page repaints with no reload and no build step.
-- **Live component editing.** 26 shipped Svelte components (Button, IconButton, Input, Card, Dialog, Badge, Callout, Table, Tooltip, Toggle, TabBar, SegmentedControl, RadioButton, MenuSelect, ProgressBar, CornerBadge, SectionDivider, CollapsibleSection, Notification, Image, ImageLightbox, CodeSnippet, SideNavigation, Panel, InlineEditActions, Slider) declare their design-token aliases in a `:global(:root)` block. Rewire an alias from the component's editor and it updates everywhere that component is used, on your real pages.
+- **Live component editing.** 29 shipped Svelte components (Button, IconButton, Input, Card, Dialog, Badge, Callout, Table, Tooltip, Toggle, TabBar, SegmentedControl, RadioButton, MenuSelect, ProgressBar, CornerBadge, SectionDivider, CollapsibleSection, Notification, Image, ImageLightbox, VideoLightbox, VideoFrame, SlidePager, CodeSnippet, SideNavigation, Panel, InlineEditActions, Slider) declare their design-token aliases in a `:global(:root)` block. Rewire an alias from the component's editor and it updates everywhere that component is used, on your real pages.
 - **Four dev-only routes.** `/live-tokens/editor` for tokens, `/live-tokens/colors` for palettes, `/live-tokens/components` for per-component aliases, `/live-tokens/docs` for the user guide.
 - **Editor overlay.** Pins to the top right of every dev page and opens the editor in a side panel or floating window, so you edit on the page you are styling. Its "Page Source" button opens the current page's `.svelte` file in VS Code.
 - **Themes.** A theme is a whole look in one file: colors and type plus a config for every component, stored by value. Loading one changes a single pointer file, and nothing your site ships changes until you Adopt. Export a theme and import it into another project to restore the look in one step.

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

@@ -572,6 +572,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/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -589,7 +609,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/{chunk-FD4FVDOC.js → chunk-ONYAIXCZ.js}

@@ -1224,6 +1224,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: {
@@ -1420,7 +1491,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/{chunk-M6BWSS6C.js → chunk-W5VQV32K.js}

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

package/dist-plugin/index.cjs

@@ -2008,6 +2008,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: {
@@ -2204,7 +2275,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;
@@ -2551,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 = [
@@ -2569,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;
@@ -3933,6 +4006,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/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -3950,7 +4043,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);
@@ -3981,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-M6BWSS6C.js";
+} from "./chunk-W5VQV32K.js";
 import {
   formatGradientValue,
   palettesToVars,
@@ -16,14 +16,14 @@ import {
 } from "./chunk-O6GQ6GBH.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "./chunk-FD4FVDOC.js";
+} from "./chunk-ONYAIXCZ.js";
 import {
   TOKENS_CSS_MIGRATIONS,
   extractGlobalRootBody,
   runAdditiveTokensCssMigrations,
   runTokensCssMigrations,
   validateTokensCss
-} from "./chunk-V2OVSC5Z.js";
+} from "./chunk-GWMEYBZ2.js";
 import {
   hexToOklch,
   oklchToRgb255,

package/dist-plugin/migrateData/index.cjs

@@ -1404,6 +1404,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: {
@@ -1600,7 +1671,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;
@@ -1639,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 = [
@@ -1657,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;
@@ -2590,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-M6BWSS6C.js";
+} from "../chunk-W5VQV32K.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "../chunk-FD4FVDOC.js";
+} from "../chunk-ONYAIXCZ.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs

package/dist-plugin/setColors/index.cjs

@@ -2418,6 +2418,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: {
@@ -2614,7 +2685,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/setColors/index.js

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