@motion-proto/live-tokens 0.84.0 → 0.85.0

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

@@ -2214,12 +2214,14 @@
       "--columns-max-width": "1440px",
       "--columns-gutter": "32px",
       "--columns-margin": "0px",
-      "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
-      "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
-      "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
-      "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
-      "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
-      "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
+      "--scrim-color": "var(--surface-neutral-lowest)",
+      "--scrim-opacity-low": "0.7",
+      "--scrim-opacity": "0.8",
+      "--scrim-opacity-high": "0.9",
+      "--tint-color": "var(--text-primary)",
+      "--tint-opacity-low": "0.05",
+      "--tint-opacity": "0.1",
+      "--tint-opacity-high": "0.15",
       "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.2)",
       "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.2)",
       "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.2)",
@@ -2396,7 +2398,7 @@
         "family": null
       }
     ],
-    "schemaVersion": 8,
+    "schemaVersion": 9,
     "gradients": [
       {
         "variable": "--gradient-1",
@@ -2982,8 +2984,7 @@
       "createdAt": "2026-05-10T20:05:24.719Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--dialog-scrim-color": "--scrim-color",
-        "--dialog-scrim-opacity": "--scrim-opacity-high",
+        "--dialog-scrim-surface": "--scrim-high",
         "--dialog-surface": "--surface-neutral-lowest",
         "--dialog-border": "--border-neutral-strong",
         "--dialog-border-width": "--border-width-2",
@@ -3127,8 +3128,7 @@
         "--imagelightbox-tile-border": "--color-transparent",
         "--imagelightbox-tile-border-width": "--border-width-0",
         "--imagelightbox-tile-shadow": "--shadow-md",
-        "--imagelightbox-scrim-color": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
-        "--imagelightbox-scrim-opacity": "1",
+        "--imagelightbox-scrim-surface": "--scrim-high",
         "--imagelightbox-chrome-surface": "--surface-neutral-low",
         "--imagelightbox-chrome-border": "--border-brand",
         "--imagelightbox-chrome-border-width": "--border-width-1",
@@ -3982,5 +3982,5 @@
       }
     }
   },
-  "componentSchemaVersion": 37
+  "componentSchemaVersion": 38
 }

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

@@ -2275,12 +2275,14 @@
       "--columns-max-width": "1440px",
       "--columns-gutter": "32px",
       "--columns-margin": "0px",
-      "--scrim-low": "color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent)",
-      "--scrim": "color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent)",
-      "--scrim-high": "color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent)",
-      "--tint-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
-      "--tint": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
-      "--tint-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
+      "--scrim-color": "var(--surface-neutral-lowest)",
+      "--scrim-opacity-low": "0.7",
+      "--scrim-opacity": "0.8",
+      "--scrim-opacity-high": "0.9",
+      "--tint-color": "var(--text-primary)",
+      "--tint-opacity-low": "0.05",
+      "--tint-opacity": "0.1",
+      "--tint-opacity-high": "0.15",
       "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
       "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
       "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
@@ -2448,7 +2450,7 @@
         "family": null
       }
     ],
-    "schemaVersion": 8,
+    "schemaVersion": 9,
     "gradients": [
       {
         "variable": "--gradient-1",
@@ -3034,8 +3036,7 @@
       "createdAt": "2026-05-10T20:05:24.719Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--dialog-scrim-color": "--scrim-color",
-        "--dialog-scrim-opacity": "--scrim-opacity-high",
+        "--dialog-scrim-surface": "--scrim-high",
         "--dialog-surface": "--surface-neutral-lowest",
         "--dialog-border": "--border-neutral-strong",
         "--dialog-border-width": "--border-width-2",
@@ -3179,8 +3180,7 @@
         "--imagelightbox-tile-border": "--color-transparent",
         "--imagelightbox-tile-border-width": "--border-width-0",
         "--imagelightbox-tile-shadow": "--shadow-md",
-        "--imagelightbox-scrim-color": "color-mix(in srgb, var(--color-neutral-950) 76%, transparent)",
-        "--imagelightbox-scrim-opacity": "1",
+        "--imagelightbox-scrim-surface": "--scrim-high",
         "--imagelightbox-chrome-surface": "--surface-neutral-low",
         "--imagelightbox-chrome-border": "--border-brand",
         "--imagelightbox-chrome-border-width": "--border-width-1",
@@ -4034,5 +4034,5 @@
       }
     }
   },
-  "componentSchemaVersion": 37
+  "componentSchemaVersion": 38
 }

package/src/live-tokens/data/tokens.generated.css

@@ -11,12 +11,14 @@
   --columns-max-width: 1440px;
   --columns-gutter: 32px;
   --columns-margin: 0px;
-  --scrim-low: color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent);
-  --scrim: color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent);
-  --scrim-high: color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent);
-  --tint-low: color-mix(in srgb, var(--text-primary) 5%, transparent);
-  --tint: color-mix(in srgb, var(--text-primary) 10%, transparent);
-  --tint-high: color-mix(in srgb, var(--text-primary) 15%, transparent);
+  --scrim-color: var(--surface-neutral-lowest);
+  --scrim-opacity-low: 0.7;
+  --scrim-opacity: 0.8;
+  --scrim-opacity-high: 0.9;
+  --tint-color: var(--text-primary);
+  --tint-opacity-low: 0.05;
+  --tint-opacity: 0.1;
+  --tint-opacity-high: 0.15;
   --shadow-sm: 1px 1px 2px hsla(237, 18%, 3%, 0.9);
   --shadow-md: 3px 3px 6px hsla(237, 18%, 3%, 0.9);
   --shadow-lg: 5px 5px 9px hsla(237, 18%, 3%, 0.9);

package/src/system/components/Dialog.svelte

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

package/src/system/components/ImageLightbox.svelte

@@ -57,15 +57,11 @@
     /** The width of that line, as any CSS length. Overrides
         `--imagelightbox-tile-border-width`. */
     borderWidth?: string | undefined;
-    /** 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. */
+    /** The scrim behind the open image, for this instance, as any CSS fill,
+        such as `var(--scrim-low)`. 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. */
     scrim?: string | undefined;
-    /** 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;
     /** Maximum zoom, as a multiple of the image's natural resolution: `1` = 100%
@@ -102,7 +98,6 @@
     border = undefined,
     borderWidth = undefined,
     scrim = undefined,
-    scrimOpacity = undefined,
     extended = false,
     maxZoom = undefined,
     capNatural = false,
@@ -658,8 +653,7 @@
     <div
       bind:this={overlayEl}
       class="image-lightbox-overlay"
-      style:--imagelightbox-scrim-color={scrim}
-      style:--imagelightbox-scrim-opacity={scrimOpacity}
+      style:--imagelightbox-scrim-surface={scrim}
       class:active={open}
       aria-hidden="true"
       onclick={closeLightbox}
@@ -783,8 +777,7 @@
     --imagelightbox-tile-object-fit:       contain;
 
     /* overlay */
-    --imagelightbox-scrim-color:           var(--scrim-color);
-    --imagelightbox-scrim-opacity:         var(--scrim-opacity-high);
+    --imagelightbox-scrim-surface:         var(--scrim-high);
 
     /* chrome (toolbar + close button) */
     --imagelightbox-chrome-surface:        var(--surface-neutral-low);
@@ -910,11 +903,7 @@
   .image-lightbox-overlay {
     position: fixed;
     inset: 0;
-    background: color-mix(
-      in srgb,
-      var(--imagelightbox-scrim-color) calc(var(--imagelightbox-scrim-opacity) * 100%),
-      transparent
-    );
+    background: var(--imagelightbox-scrim-surface);
     backdrop-filter: blur(var(--blur-md));
     z-index: var(--z-overlay);
     opacity: 0;

package/src/system/styles/tokens.css

@@ -273,19 +273,24 @@
      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-opacity-low: 0.7;
+  --scrim-opacity: 0.8;
+  --scrim-opacity-high: 0.9;
   --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
-     lightens a dark theme and darkens a light one without picking a direction. */
-  --tint-low: rgba(255, 255, 255, 0.05);
-  --tint: rgba(255, 255, 255, 0.1);
-  --tint-high: rgba(255, 255, 255, 0.15);
+     or an active row. The theme aliases --tint-color to the text color, so a
+     tint lightens a dark theme and darkens a light one without picking a
+     direction. Colour and strength are separate, as for scrims. */
+  --tint-color: rgb(255, 255, 255);
+  --tint-opacity-low: 0.05;
+  --tint-opacity: 0.1;
+  --tint-opacity-high: 0.15;
+  --tint-low: color-mix(in srgb, var(--tint-color) calc(var(--tint-opacity-low) * 100%), transparent);
+  --tint: color-mix(in srgb, var(--tint-color) calc(var(--tint-opacity) * 100%), transparent);
+  --tint-high: color-mix(in srgb, var(--tint-color) calc(var(--tint-opacity-high) * 100%), transparent);
 
   /* BORDERS — 5-point scales, faint → strong. */
 

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

@@ -783,6 +783,7 @@ var dialogContract = {
   properties: [
     {
       paints: {
+        backdrop: { backgroundColor: "--dialog-scrim-surface" },
         root: {
           backgroundColor: "--dialog-surface",
           borderTopColor: "--dialog-border",
@@ -831,9 +832,7 @@ var dialogContract = {
     { state: "footer" }
   ],
   uncovered: {
-    "--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"
+    "--dialog-blur": "consumed via backdrop-filter: blur(), which no probe covers"
   },
   persistence: {
     cases: [
@@ -1118,6 +1117,7 @@ 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,10 +1137,6 @@ 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: [
       {
@@ -3372,4 +3368,4 @@ export {
   allContracts,
   selectedContracts
 };
-//# sourceMappingURL=chunk-WQJ6QB6Y.js.map
+//# sourceMappingURL=chunk-RDHCBQ6I.js.map