@motion-proto/live-tokens 0.83.0 → 0.84.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## 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-6JKUYCPL.js → chunk-FD4FVDOC.js}

@@ -1195,6 +1195,35 @@ 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-13-cornerbadge-prefix.ts
 var RENAMES8 = {
   cornerbadge: {
@@ -1390,7 +1419,8 @@ 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
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;

package/dist-plugin/{chunk-LBZISJPG.js → chunk-M6BWSS6C.js}

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

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

@@ -552,6 +552,26 @@ 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/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -568,7 +588,8 @@ 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
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);

package/dist-plugin/index.cjs

@@ -1979,6 +1979,35 @@ 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-13-cornerbadge-prefix.ts
 var RENAMES8 = {
   cornerbadge: {
@@ -2174,7 +2203,8 @@ 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
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;
@@ -3883,6 +3913,26 @@ 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/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -3899,7 +3949,8 @@ 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
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);

package/dist-plugin/index.js

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

package/dist-plugin/migrateData/index.cjs

@@ -1375,6 +1375,35 @@ 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-13-cornerbadge-prefix.ts
 var RENAMES8 = {
   cornerbadge: {
@@ -1570,7 +1599,8 @@ 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
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;

package/dist-plugin/migrateData/index.js

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

package/dist-plugin/setColors/index.cjs

@@ -2389,6 +2389,35 @@ 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-13-cornerbadge-prefix.ts
 var RENAMES8 = {
   cornerbadge: {
@@ -2584,7 +2613,8 @@ 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
 ];
 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-FD4FVDOC.js";
 import {
   cssColorToOklch,
   gamutClamp,

package/dist-plugin/setGeometry/index.cjs

@@ -74,6 +74,9 @@ 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"] },
@@ -95,8 +98,7 @@ var KIND_RULES = [
       "-indicator",
       "-thumb",
       "-color",
-      "-tint",
-      "-opacity"
+      "-tint"
     ],
     prefix: ["--surface-", "--tint", "--color-"]
   }
@@ -1538,6 +1540,35 @@ 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-13-cornerbadge-prefix.ts
 var RENAMES8 = {
   cornerbadge: {
@@ -1733,7 +1764,8 @@ 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
 ];
 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' | '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' | 'opacity' | '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' | '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' | 'opacity' | '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-6JKUYCPL.js";
+} from "../chunk-FD4FVDOC.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs
@@ -42,6 +42,9 @@ 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"] },
@@ -63,8 +66,7 @@ var KIND_RULES = [
       "-indicator",
       "-thumb",
       "-color",
-      "-tint",
-      "-opacity"
+      "-tint"
     ],
     prefix: ["--surface-", "--tint", "--color-"]
   }

package/dist-plugin/tokensCssMigrations/index.cjs

@@ -639,6 +639,26 @@ 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/files/dataPaths.ts
 var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
@@ -691,7 +711,8 @@ 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
 ];
 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-V2OVSC5Z.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.84.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,7 +16,8 @@
   // 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-surface' },
+      { label: 'scrim color', groupKey: 'surface', variable: '--dialog-scrim-color' },
+      { label: 'scrim opacity', variable: '--dialog-scrim-opacity' },
     ],
     dialog: [
       { label: 'surface color', variable: '--dialog-surface' },

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

@@ -15,7 +15,8 @@
       { label: 'tile shadow',                       variable: '--imagelightbox-tile-shadow' },
     ],
     overlay: [
-      { label: 'scrim color', groupKey: 'surface', variable: '--imagelightbox-scrim-surface' },
+      { label: 'scrim color', groupKey: 'surface', variable: '--imagelightbox-scrim-color' },
+      { label: 'scrim opacity', variable: '--imagelightbox-scrim-opacity' },
     ],
     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, SHADOW, TRACK_HEIGHT, HAIRLINE_INSET } from '../../ui/variantScales';
+  import { BLUR, BORDER_WIDTH, DOT_SIZE, DURATION, RADIUS, SCALE, SCRIM_OPACITY, SHADOW, TRACK_HEIGHT, HAIRLINE_INSET } from '../../ui/variantScales';
   import {
     editorState,
     getComponentPropertySiblings,
@@ -80,6 +80,7 @@
     'easing',
     'blur',
     'scale',
+    'opacity',
     'shadow',
     'text-color',
     'surface',
@@ -160,6 +161,7 @@
     '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 },
@@ -190,6 +192,7 @@
       'easing',
       'blur',
       'scale',
+      'opacity',
       'shadow',
       'surface',
       'border-width',

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

@@ -11,6 +11,7 @@ export type TokenKind =
   | 'length'
   | 'blur'
   | 'scale'
+  | 'opacity'
   | 'shadow'
   | 'font-family'
   | 'font-weight'
@@ -59,6 +60,9 @@ 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'] },
@@ -73,7 +77,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/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: 'var(--imagelightbox-scrim-surface)',
+    sel: '.image-lightbox-overlay', fill: 'color-mix(in srgb, var(--imagelightbox-scrim-color) calc(var(--imagelightbox-scrim-opacity) * 100%), transparent)',
     stroke: 'transparent', positioned: true, unmasked: true,
   },
   // Close and the two nav chevrons all carry this class; each is fixed and