@motion-proto/live-tokens 0.83.0 → 0.85.0

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

@@ -2271,12 +2271,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)",
@@ -2528,7 +2530,7 @@
         "family": null
       }
     ],
-    "schemaVersion": 8
+    "schemaVersion": 9
   },
   "componentConfigs": {
     "badge": {
@@ -3197,7 +3199,7 @@
         "--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-surface": "--scrim-high",
         "--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": 38
 }

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

@@ -2228,12 +2228,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)",
@@ -2409,7 +2411,7 @@
         "family": null
       }
     ],
-    "schemaVersion": 8,
+    "schemaVersion": 9,
     "gradients": [
       {
         "variable": "--gradient-1",
@@ -3139,7 +3141,7 @@
         "--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-surface": "--scrim-high",
         "--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": 38
 }

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

@@ -2260,12 +2260,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)",
@@ -2440,7 +2442,7 @@
         "family": null
       }
     ],
-    "schemaVersion": 8,
+    "schemaVersion": 9,
     "gradients": [
       {
         "variable": "--gradient-1",
@@ -3170,7 +3172,7 @@
         "--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-surface": "--scrim-high",
         "--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": 38
 }

package/src/live-tokens/data/themes/sketchy.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)",
@@ -2485,7 +2487,7 @@
         "family": null
       }
     ],
-    "schemaVersion": 8
+    "schemaVersion": 9
   },
   "componentConfigs": {
     "badge": {
@@ -3153,7 +3155,7 @@
         "--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-surface": "--scrim-high",
         "--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": 38
 }

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",
@@ -3126,7 +3128,7 @@
         "--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-surface": "--scrim-high",
         "--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": 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",
@@ -3178,7 +3180,7 @@
         "--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-surface": "--scrim-high",
         "--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": 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/ImageLightbox.svelte

@@ -57,14 +57,11 @@
     /** 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 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 `scrim` covers the page, 0 to 1. Needs `scrim`: it is
-        mixed with it, and on its own there is no colour to mix. */
-    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%
@@ -101,22 +98,11 @@
     border = undefined,
     borderWidth = undefined,
     scrim = undefined,
-    scrimOpacity = undefined,
     extended = false,
     maxZoom = undefined,
     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 +653,7 @@
     <div
       bind:this={overlayEl}
       class="image-lightbox-overlay"
-      style:--imagelightbox-scrim-surface={scrimFill}
+      style:--imagelightbox-scrim-surface={scrim}
       class:active={open}
       aria-hidden="true"
       onclick={closeLightbox}

package/src/system/styles/tokens.css

@@ -267,17 +267,30 @@
   --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.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. */