@motion-proto/live-tokens 0.83.0 → 0.84.0

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/index.ts

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

package/src/editor/ui/UIVariantSelector.svelte

@@ -55,7 +55,7 @@
   let validKeys = $derived(new Set(options.map((o) => o.key)));
   let refMatcher = $derived.by(() => {
     const escaped = varPrefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    return new RegExp(`var\\((${escaped}[^)\\s]+)\\)`);
+    return new RegExp(`var\\((${escaped}[^)\\s]*)\\)`);
   });
 
   function parseRef(value: string): string | null {

package/src/editor/ui/variantScales.ts

@@ -45,6 +45,17 @@ export const SCALE: VariantScaleEntry = {
   ],
 };
 
+/** The scrim's three strengths. The middle stop has no suffix, as `--scrim`
+ *  and `--tint` have none, so its key is empty. */
+export const SCRIM_OPACITY: VariantScaleEntry = {
+  varPrefix: '--scrim-opacity',
+  options: [
+    { key: '-low', label: 'Low', value: '0.38' },
+    { key: '', label: 'Medium', value: '0.51' },
+    { key: '-high', label: 'High', value: '0.64' },
+  ],
+};
+
 export const BORDER_WIDTH: VariantScaleEntry = {
   varPrefix: '--border-width-',
   options: [

package/src/live-tokens/data/themes/autumn.json

@@ -2996,7 +2996,8 @@
       "createdAt": "2026-05-10T20:05:24.719Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--dialog-scrim-surface": "--scrim-high",
+        "--dialog-scrim-color": "--scrim-color",
+        "--dialog-scrim-opacity": "--scrim-opacity-high",
         "--dialog-surface": "--surface-neutral-lowest",
         "--dialog-border": "--border-neutral-strong",
         "--dialog-border-width": "--border-width-2",
@@ -3140,7 +3141,8 @@
         "--imagelightbox-tile-border": "--color-transparent",
         "--imagelightbox-tile-border-width": "--border-width-0",
         "--imagelightbox-tile-shadow": "--shadow-md",
-        "--imagelightbox-scrim-surface": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
+        "--imagelightbox-scrim-color": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
+        "--imagelightbox-scrim-opacity": "1",
         "--imagelightbox-chrome-surface": "--surface-neutral-low",
         "--imagelightbox-chrome-border": "--border-brand",
         "--imagelightbox-chrome-border-width": "--border-width-1",
@@ -3994,5 +3996,5 @@
       }
     }
   },
-  "componentSchemaVersion": 36
+  "componentSchemaVersion": 37
 }

package/src/live-tokens/data/themes/halloween.json

@@ -3035,7 +3035,8 @@
       "createdAt": "2026-05-10T20:05:24.719Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--dialog-scrim-surface": "--scrim-high",
+        "--dialog-scrim-color": "--scrim-color",
+        "--dialog-scrim-opacity": "--scrim-opacity-high",
         "--dialog-surface": "--surface-neutral-lowest",
         "--dialog-border": "--border-neutral-strong",
         "--dialog-border-width": "--border-width-4",
@@ -3179,7 +3180,8 @@
         "--imagelightbox-tile-border": "--color-transparent",
         "--imagelightbox-tile-border-width": "--border-width-2",
         "--imagelightbox-tile-shadow": "--shadow-md",
-        "--imagelightbox-scrim-surface": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
+        "--imagelightbox-scrim-color": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
+        "--imagelightbox-scrim-opacity": "1",
         "--imagelightbox-chrome-surface": "--surface-neutral-low",
         "--imagelightbox-chrome-border": "--border-brand",
         "--imagelightbox-chrome-border-width": "--border-width-3",
@@ -4033,5 +4035,5 @@
       }
     }
   },
-  "componentSchemaVersion": 36
+  "componentSchemaVersion": 37
 }

package/src/live-tokens/data/themes/midnight-study.json

@@ -3053,7 +3053,8 @@
       "createdAt": "2026-05-10T20:05:24.719Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--dialog-scrim-surface": "--scrim-high",
+        "--dialog-scrim-color": "--scrim-color",
+        "--dialog-scrim-opacity": "--scrim-opacity-high",
         "--dialog-surface": "--surface-neutral-lowest",
         "--dialog-border": "--border-neutral-strong",
         "--dialog-border-width": "--border-width-2",
@@ -3197,7 +3198,8 @@
         "--imagelightbox-tile-border": "--color-transparent",
         "--imagelightbox-tile-border-width": "--border-width-0",
         "--imagelightbox-tile-shadow": "--shadow-md",
-        "--imagelightbox-scrim-surface": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
+        "--imagelightbox-scrim-color": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
+        "--imagelightbox-scrim-opacity": "1",
         "--imagelightbox-chrome-surface": "--surface-neutral-low",
         "--imagelightbox-chrome-border": "--border-brand",
         "--imagelightbox-chrome-border-width": "--border-width-1",
@@ -4052,5 +4054,5 @@
       }
     }
   },
-  "componentSchemaVersion": 36
+  "componentSchemaVersion": 37
 }

package/src/live-tokens/data/themes/ocean.json

@@ -2995,7 +2995,8 @@
       "createdAt": "2026-05-10T20:05:24.719Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--dialog-scrim-surface": "--scrim-high",
+        "--dialog-scrim-color": "--scrim-color",
+        "--dialog-scrim-opacity": "--scrim-opacity-high",
         "--dialog-surface": "--surface-neutral-lowest",
         "--dialog-border": "--border-neutral-strong",
         "--dialog-border-width": "--border-width-2",
@@ -3139,7 +3140,8 @@
         "--imagelightbox-tile-border": "--color-transparent",
         "--imagelightbox-tile-border-width": "--border-width-0",
         "--imagelightbox-tile-shadow": "--shadow-md",
-        "--imagelightbox-scrim-surface": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
+        "--imagelightbox-scrim-color": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
+        "--imagelightbox-scrim-opacity": "1",
         "--imagelightbox-chrome-surface": "--surface-neutral-low",
         "--imagelightbox-chrome-border": "--border-brand",
         "--imagelightbox-chrome-border-width": "--border-width-1",
@@ -3993,5 +3995,5 @@
       }
     }
   },
-  "componentSchemaVersion": 36
+  "componentSchemaVersion": 37
 }

package/src/live-tokens/data/themes/royal-velvet.json

@@ -3026,7 +3026,8 @@
       "createdAt": "2026-05-10T20:05:24.719Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--dialog-scrim-surface": "--scrim-high",
+        "--dialog-scrim-color": "--scrim-color",
+        "--dialog-scrim-opacity": "--scrim-opacity-high",
         "--dialog-surface": "--surface-neutral-lowest",
         "--dialog-border": "--border-neutral-strong",
         "--dialog-border-width": "--border-width-3",
@@ -3170,7 +3171,8 @@
         "--imagelightbox-tile-border": "--color-transparent",
         "--imagelightbox-tile-border-width": "--border-width-1",
         "--imagelightbox-tile-shadow": "--shadow-md",
-        "--imagelightbox-scrim-surface": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
+        "--imagelightbox-scrim-color": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
+        "--imagelightbox-scrim-opacity": "1",
         "--imagelightbox-chrome-surface": "--surface-neutral-low",
         "--imagelightbox-chrome-border": "--border-brand",
         "--imagelightbox-chrome-border-width": "--border-width-2",
@@ -4024,5 +4026,5 @@
       }
     }
   },
-  "componentSchemaVersion": 36
+  "componentSchemaVersion": 37
 }

package/src/live-tokens/data/themes/sketchy.json

@@ -3009,7 +3009,8 @@
       "createdAt": "2026-05-10T20:05:24.719Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
       "aliases": {
-        "--dialog-scrim-surface": "--scrim-high",
+        "--dialog-scrim-color": "--scrim-color",
+        "--dialog-scrim-opacity": "--scrim-opacity-high",
         "--dialog-surface": "--surface-neutral-lowest",
         "--dialog-border": "--border-neutral-strong",
         "--dialog-border-width": "--border-width-2",
@@ -3153,7 +3154,8 @@
         "--imagelightbox-tile-border": "--color-transparent",
         "--imagelightbox-tile-border-width": "--border-width-1",
         "--imagelightbox-tile-shadow": "--shadow-md",
-        "--imagelightbox-scrim-surface": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
+        "--imagelightbox-scrim-color": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
+        "--imagelightbox-scrim-opacity": "1",
         "--imagelightbox-chrome-surface": "--surface-neutral-low",
         "--imagelightbox-chrome-border": "--border-brand",
         "--imagelightbox-chrome-border-width": "--border-width-1",
@@ -4007,5 +4009,5 @@
       }
     }
   },
-  "componentSchemaVersion": 36
+  "componentSchemaVersion": 37
 }

package/src/live-tokens/data/themes/spring-meadow.json

@@ -2982,7 +2982,8 @@
       "createdAt": "2026-05-10T20:05:24.719Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--dialog-scrim-surface": "--scrim-high",
+        "--dialog-scrim-color": "--scrim-color",
+        "--dialog-scrim-opacity": "--scrim-opacity-high",
         "--dialog-surface": "--surface-neutral-lowest",
         "--dialog-border": "--border-neutral-strong",
         "--dialog-border-width": "--border-width-2",
@@ -3126,7 +3127,8 @@
         "--imagelightbox-tile-border": "--color-transparent",
         "--imagelightbox-tile-border-width": "--border-width-0",
         "--imagelightbox-tile-shadow": "--shadow-md",
-        "--imagelightbox-scrim-surface": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
+        "--imagelightbox-scrim-color": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
+        "--imagelightbox-scrim-opacity": "1",
         "--imagelightbox-chrome-surface": "--surface-neutral-low",
         "--imagelightbox-chrome-border": "--border-brand",
         "--imagelightbox-chrome-border-width": "--border-width-1",
@@ -3980,5 +3982,5 @@
       }
     }
   },
-  "componentSchemaVersion": 36
+  "componentSchemaVersion": 37
 }

package/src/live-tokens/data/themes/sunset.json

@@ -3034,7 +3034,8 @@
       "createdAt": "2026-05-10T20:05:24.719Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--dialog-scrim-surface": "--scrim-high",
+        "--dialog-scrim-color": "--scrim-color",
+        "--dialog-scrim-opacity": "--scrim-opacity-high",
         "--dialog-surface": "--surface-neutral-lowest",
         "--dialog-border": "--border-neutral-strong",
         "--dialog-border-width": "--border-width-2",
@@ -3178,7 +3179,8 @@
         "--imagelightbox-tile-border": "--color-transparent",
         "--imagelightbox-tile-border-width": "--border-width-0",
         "--imagelightbox-tile-shadow": "--shadow-md",
-        "--imagelightbox-scrim-surface": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
+        "--imagelightbox-scrim-color": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
+        "--imagelightbox-scrim-opacity": "1",
         "--imagelightbox-chrome-surface": "--surface-neutral-low",
         "--imagelightbox-chrome-border": "--border-brand",
         "--imagelightbox-chrome-border-width": "--border-width-1",
@@ -4032,5 +4034,5 @@
       }
     }
   },
-  "componentSchemaVersion": 36
+  "componentSchemaVersion": 37
 }

package/src/system/components/Dialog.svelte

@@ -180,7 +180,8 @@
 <style>
   :global(:root) {
     /* Scrim */
-    --dialog-scrim-surface: var(--scrim-high);
+    --dialog-scrim-color: var(--scrim-color);
+    --dialog-scrim-opacity: var(--scrim-opacity-high);
 
     /* Dialog frame */
     --dialog-surface: var(--surface-neutral-lowest);
@@ -227,7 +228,11 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: var(--dialog-scrim-surface);
+    background: color-mix(
+      in srgb,
+      var(--dialog-scrim-color) calc(var(--dialog-scrim-opacity) * 100%),
+      transparent
+    );
     display: flex;
     justify-content: center;
     align-items: center;

package/src/system/components/ImageLightbox.svelte

@@ -57,13 +57,14 @@
     /** The width of that line, as any CSS length. Overrides
         `--imagelightbox-tile-border-width`. */
     borderWidth?: string | undefined;
-    /** The scrim behind the open image, for this instance, as any CSS fill.
-        Overrides `--imagelightbox-scrim-surface`. The modal portals to
-        <body>, out of reach of a wrapper around the tile, so a page that wants
-        its own scrim has to say so here. */
+    /** The scrim's colour behind the open image, for this instance. Overrides
+        `--imagelightbox-scrim-color`. The modal portals to <body>, out of reach
+        of a wrapper around the tile, so a page that wants its own scrim has to
+        say so here. */
     scrim?: string | undefined;
-    /** How much of `scrim` covers the page, 0 to 1. Needs `scrim`: it is
-        mixed with it, and on its own there is no colour to mix. */
+    /** How much of that colour covers the page, 0 to 1. Overrides
+        `--imagelightbox-scrim-opacity`, and stands on its own: the colour it
+        mixes with is whatever the theme holds. */
     scrimOpacity?: number | undefined;
     /** When true, shows a bottom toolbar (zoom in/out + percent) and a top-right close button, and enables wheel/drag zoom inside the open modal. When false, click anywhere closes. */
     extended?: boolean;
@@ -107,16 +108,6 @@
     capNatural = false,
   }: Props = $props();
 
-  // An opacity is mixed into the colour, so the two arrive as one fill. Without
-  // a colour there is nothing to mix, and the theme's scrim stands.
-  const scrimFill = $derived(
-    scrim == null
-      ? undefined
-      : scrimOpacity == null
-        ? scrim
-        : `color-mix(in srgb, ${scrim} ${scrimOpacity * 100}%, transparent)`,
-  );
-
   const items = $derived(
     images && images.length
       ? images
@@ -667,7 +658,8 @@
     <div
       bind:this={overlayEl}
       class="image-lightbox-overlay"
-      style:--imagelightbox-scrim-surface={scrimFill}
+      style:--imagelightbox-scrim-color={scrim}
+      style:--imagelightbox-scrim-opacity={scrimOpacity}
       class:active={open}
       aria-hidden="true"
       onclick={closeLightbox}
@@ -791,7 +783,8 @@
     --imagelightbox-tile-object-fit:       contain;
 
     /* overlay */
-    --imagelightbox-scrim-surface:         var(--scrim-high);
+    --imagelightbox-scrim-color:           var(--scrim-color);
+    --imagelightbox-scrim-opacity:         var(--scrim-opacity-high);
 
     /* chrome (toolbar + close button) */
     --imagelightbox-chrome-surface:        var(--surface-neutral-low);
@@ -917,7 +910,11 @@
   .image-lightbox-overlay {
     position: fixed;
     inset: 0;
-    background: var(--imagelightbox-scrim-surface);
+    background: color-mix(
+      in srgb,
+      var(--imagelightbox-scrim-color) calc(var(--imagelightbox-scrim-opacity) * 100%),
+      transparent
+    );
     backdrop-filter: blur(var(--blur-md));
     z-index: var(--z-overlay);
     opacity: 0;

package/src/system/styles/tokens.css

@@ -267,10 +267,18 @@
   --surface-danger-highest: oklch(0.6696 0.1423 24.72);
 
   /* Scrims — translucent layers that dim what sits behind them. A scrim is not
-     a tint: it darkens the content underneath, it does not shade a surface. */
-  --scrim-low: rgba(20, 3, 0, 0.38);
-  --scrim: rgba(20, 3, 0, 0.51);
-  --scrim-high: rgba(20, 3, 0, 0.64);
+     a tint: it darkens the content underneath, it does not shade a surface.
+     Colour and strength are separate, so a theme can hold one and move the
+     other: set --scrim-color to a light value for a scrim that pales the page
+     instead of darkening it. The three stops stay, composed from the two, for
+     anywhere that wants one value. */
+  --scrim-color: rgb(20, 3, 0);
+  --scrim-opacity-low: 0.38;
+  --scrim-opacity: 0.51;
+  --scrim-opacity-high: 0.64;
+  --scrim-low: color-mix(in srgb, var(--scrim-color) calc(var(--scrim-opacity-low) * 100%), transparent);
+  --scrim: color-mix(in srgb, var(--scrim-color) calc(var(--scrim-opacity) * 100%), transparent);
+  --scrim-high: color-mix(in srgb, var(--scrim-color) calc(var(--scrim-opacity-high) * 100%), transparent);
 
   /* Tints — translucent washes that shade the surface they sit on, for a hover
      or an active row. The theme aliases these to the text color, so a tint

package/src/testing-js/{chunk-RDHCBQ6I.js → chunk-WQJ6QB6Y.js}

@@ -783,7 +783,6 @@ var dialogContract = {
   properties: [
     {
       paints: {
-        backdrop: { backgroundColor: "--dialog-scrim-surface" },
         root: {
           backgroundColor: "--dialog-surface",
           borderTopColor: "--dialog-border",
@@ -832,7 +831,9 @@ var dialogContract = {
     { state: "footer" }
   ],
   uncovered: {
-    "--dialog-blur": "consumed via backdrop-filter: blur(), which no probe covers"
+    "--dialog-blur": "consumed via backdrop-filter: blur(), which no probe covers",
+    "--dialog-scrim-color": "composed into the fill through color-mix(), so no computed style reports the token verbatim",
+    "--dialog-scrim-opacity": "composed into the fill through color-mix(), so no computed style reports the token verbatim"
   },
   persistence: {
     cases: [
@@ -1117,7 +1118,6 @@ var imageLightboxContract = {
           borderRadius: "--imagelightbox-tile-radius",
           boxShadow: "--imagelightbox-tile-shadow"
         },
-        overlay: { backgroundColor: "--imagelightbox-scrim-surface" },
         closeButton: {
           backgroundColor: "--imagelightbox-chrome-surface",
           borderTopColor: "--imagelightbox-chrome-border",
@@ -1137,6 +1137,10 @@ var imageLightboxContract = {
     }
   ],
   states: [{ state: "tile" }, { state: "overlay" }, { state: "chrome" }],
+  uncovered: {
+    "--imagelightbox-scrim-color": "composed into the fill through color-mix(), so no computed style reports the token verbatim",
+    "--imagelightbox-scrim-opacity": "composed into the fill through color-mix(), so no computed style reports the token verbatim"
+  },
   persistence: {
     cases: [
       {
@@ -3368,4 +3372,4 @@ export {
   allContracts,
   selectedContracts
 };
-//# sourceMappingURL=chunk-RDHCBQ6I.js.map
+//# sourceMappingURL=chunk-WQJ6QB6Y.js.map