@motion-proto/live-tokens 0.84.0 → 0.86.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",
@@ -3980,7 +3980,93 @@
         "--slider-value-font-weight": "--font-weight-normal",
         "--slider-value-line-height": "--line-height-normal"
       }
+    },
+    "videolightbox": {
+      "name": "spring-meadow",
+      "component": "videolightbox",
+      "createdAt": "2026-09-21T17:00:00.000Z",
+      "updatedAt": "2026-09-21T17:00:00.000Z",
+      "aliases": {
+        "--videolightbox-tile-surface": "--color-transparent",
+        "--videolightbox-tile-border": "--color-transparent",
+        "--videolightbox-tile-border-width": "--border-width-0",
+        "--videolightbox-tile-radius": "--radius-3xl",
+        "--videolightbox-tile-shadow": "--shadow-md",
+        "--videolightbox-scrim-surface": "--scrim-high",
+        "--videolightbox-overlay-padding": "--space-64",
+        "--videolightbox-overlay-duration": "--duration-500",
+        "--videolightbox-overlay-easing": "--ease-out-quad",
+        "--videolightbox-chrome-surface": "--surface-neutral-low",
+        "--videolightbox-chrome-border": "--border-brand",
+        "--videolightbox-chrome-border-width": "--border-width-1",
+        "--videolightbox-chrome-radius": "--radius-full",
+        "--videolightbox-chrome-icon": "--text-primary",
+        "--videolightbox-chrome-hover-surface": "--surface-brand-high"
+      }
+    },
+    "videoframe": {
+      "name": "spring-meadow",
+      "component": "videoframe",
+      "createdAt": "2026-09-21T18:00:00.000Z",
+      "updatedAt": "2026-09-21T18:00:00.000Z",
+      "aliases": {
+        "--videoframe-frame-surface": "--surface-neutral-lowest",
+        "--videoframe-clip-surface": "--color-transparent",
+        "--videoframe-frame-border": "--border-neutral",
+        "--videoframe-frame-border-width": "--border-width-1",
+        "--videoframe-frame-radius": "--radius-3xl",
+        "--videoframe-badge-default-surface": "--surface-brand-lower",
+        "--videoframe-badge-default-border": "--border-brand-medium",
+        "--videoframe-badge-default-border-width": "--border-width-2",
+        "--videoframe-badge-default-icon": "--text-primary",
+        "--videoframe-badge-default-size": "--space-64",
+        "--videoframe-badge-default-icon-size": "--icon-size-4xl",
+        "--videoframe-badge-duration": "--duration-200",
+        "--videoframe-badge-easing": "--ease-out-quad",
+        "--videoframe-badge-hover-surface": "--surface-brand",
+        "--videoframe-badge-hover-border": "--border-brand-strong",
+        "--videoframe-badge-hover-icon": "--text-primary"
+      }
+    },
+    "slidepager": {
+      "name": "spring-meadow",
+      "component": "slidepager",
+      "createdAt": "2026-09-21T18:00:00.000Z",
+      "updatedAt": "2026-09-21T18:00:00.000Z",
+      "aliases": {
+        "--slidepager-frame-surface": "--surface-neutral-lower",
+        "--slidepager-frame-border": "--border-neutral-subtle",
+        "--slidepager-frame-border-width": "--border-width-1",
+        "--slidepager-frame-radius": "--radius-3xl",
+        "--slidepager-frame-shadow": "--shadow-md",
+        "--slidepager-bar-gap": "--space-16",
+        "--slidepager-bar-padding": "--space-12",
+        "--slidepager-control-surface": "--surface-neutral-low",
+        "--slidepager-control-border": "--border-neutral",
+        "--slidepager-control-border-width": "--border-width-1",
+        "--slidepager-control-radius": "--radius-full",
+        "--slidepager-control-size": "--space-40",
+        "--slidepager-control-icon": "--text-primary",
+        "--slidepager-control-icon-size": "--icon-size-md",
+        "--slidepager-control-hover-surface": "--surface-brand-high",
+        "--slidepager-control-hover-border": "--border-brand",
+        "--slidepager-control-hover-icon": "--text-inverted",
+        "--slidepager-control-disabled-surface": "--surface-neutral-lower",
+        "--slidepager-control-disabled-border": "--border-neutral-subtle",
+        "--slidepager-control-disabled-icon": "--text-disabled",
+        "--slidepager-counter-text": "--text-secondary",
+        "--slidepager-counter-font-family": "--font-sans",
+        "--slidepager-counter-font-size": "--font-size-lg",
+        "--slidepager-counter-font-weight": "--font-weight-medium",
+        "--slidepager-counter-line-height": "--line-height-normal",
+        "--slidepager-counter-letter-spacing": "--letter-spacing-normal",
+        "--slidepager-scrim-surface": "--scrim-high",
+        "--slidepager-overlay-padding": "--space-64",
+        "--slidepager-close-margin": "--space-24",
+        "--slidepager-overlay-duration": "--duration-300",
+        "--slidepager-overlay-easing": "--ease-out-quad"
+      }
     }
   },
-  "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",
@@ -4032,7 +4032,93 @@
         "--slider-value-font-weight": "--font-weight-normal",
         "--slider-value-line-height": "--line-height-normal"
       }
+    },
+    "videolightbox": {
+      "name": "sunset",
+      "component": "videolightbox",
+      "createdAt": "2026-09-21T17:00:00.000Z",
+      "updatedAt": "2026-09-21T17:00:00.000Z",
+      "aliases": {
+        "--videolightbox-tile-surface": "--color-transparent",
+        "--videolightbox-tile-border": "--color-transparent",
+        "--videolightbox-tile-border-width": "--border-width-0",
+        "--videolightbox-tile-radius": "--radius-3xl",
+        "--videolightbox-tile-shadow": "--shadow-md",
+        "--videolightbox-scrim-surface": "--scrim-high",
+        "--videolightbox-overlay-padding": "--space-64",
+        "--videolightbox-overlay-duration": "--duration-500",
+        "--videolightbox-overlay-easing": "--ease-out-quad",
+        "--videolightbox-chrome-surface": "--surface-neutral-low",
+        "--videolightbox-chrome-border": "--border-brand",
+        "--videolightbox-chrome-border-width": "--border-width-1",
+        "--videolightbox-chrome-radius": "--radius-full",
+        "--videolightbox-chrome-icon": "--text-primary",
+        "--videolightbox-chrome-hover-surface": "--surface-brand-high"
+      }
+    },
+    "videoframe": {
+      "name": "sunset",
+      "component": "videoframe",
+      "createdAt": "2026-09-21T18:00:00.000Z",
+      "updatedAt": "2026-09-21T18:00:00.000Z",
+      "aliases": {
+        "--videoframe-frame-surface": "--surface-neutral-lowest",
+        "--videoframe-clip-surface": "--color-transparent",
+        "--videoframe-frame-border": "--border-neutral",
+        "--videoframe-frame-border-width": "--border-width-1",
+        "--videoframe-frame-radius": "--radius-3xl",
+        "--videoframe-badge-default-surface": "--surface-brand-lower",
+        "--videoframe-badge-default-border": "--border-brand-medium",
+        "--videoframe-badge-default-border-width": "--border-width-2",
+        "--videoframe-badge-default-icon": "--text-primary",
+        "--videoframe-badge-default-size": "--space-64",
+        "--videoframe-badge-default-icon-size": "--icon-size-4xl",
+        "--videoframe-badge-duration": "--duration-200",
+        "--videoframe-badge-easing": "--ease-out-quad",
+        "--videoframe-badge-hover-surface": "--surface-brand",
+        "--videoframe-badge-hover-border": "--border-brand-strong",
+        "--videoframe-badge-hover-icon": "--text-primary"
+      }
+    },
+    "slidepager": {
+      "name": "sunset",
+      "component": "slidepager",
+      "createdAt": "2026-09-21T18:00:00.000Z",
+      "updatedAt": "2026-09-21T18:00:00.000Z",
+      "aliases": {
+        "--slidepager-frame-surface": "--surface-neutral-lower",
+        "--slidepager-frame-border": "--border-neutral-subtle",
+        "--slidepager-frame-border-width": "--border-width-1",
+        "--slidepager-frame-radius": "--radius-3xl",
+        "--slidepager-frame-shadow": "--shadow-md",
+        "--slidepager-bar-gap": "--space-16",
+        "--slidepager-bar-padding": "--space-12",
+        "--slidepager-control-surface": "--surface-neutral-low",
+        "--slidepager-control-border": "--border-neutral",
+        "--slidepager-control-border-width": "--border-width-1",
+        "--slidepager-control-radius": "--radius-full",
+        "--slidepager-control-size": "--space-40",
+        "--slidepager-control-icon": "--text-primary",
+        "--slidepager-control-icon-size": "--icon-size-md",
+        "--slidepager-control-hover-surface": "--surface-brand-high",
+        "--slidepager-control-hover-border": "--border-brand",
+        "--slidepager-control-hover-icon": "--text-inverted",
+        "--slidepager-control-disabled-surface": "--surface-neutral-lower",
+        "--slidepager-control-disabled-border": "--border-neutral-subtle",
+        "--slidepager-control-disabled-icon": "--text-disabled",
+        "--slidepager-counter-text": "--text-secondary",
+        "--slidepager-counter-font-family": "--font-sans",
+        "--slidepager-counter-font-size": "--font-size-lg",
+        "--slidepager-counter-font-weight": "--font-weight-medium",
+        "--slidepager-counter-line-height": "--line-height-normal",
+        "--slidepager-counter-letter-spacing": "--letter-spacing-normal",
+        "--slidepager-scrim-surface": "--scrim-high",
+        "--slidepager-overlay-padding": "--space-64",
+        "--slidepager-close-margin": "--space-24",
+        "--slidepager-overlay-duration": "--duration-300",
+        "--slidepager-overlay-easing": "--ease-out-quad"
+      }
     }
   },
-  "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

@@ -6,6 +6,8 @@
     whenToUse: 'a screenshot, artwork, or chart whose detail is the point, and for a gallery of them.',
     whenNotToUse: [
       { when: 'the reader takes the picture in at a glance, with no detail to open.', use: 'image' },
+      { when: 'a video clip the reader opens from its still.', use: 'videolightbox' },
+      { when: 'slides or pages the reader reads in order.', use: 'slidepager' },
     ],
   } satisfies CatalogueEntry;
 </script>
@@ -57,16 +59,12 @@
     /** 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. */
+    /** When true, shows a bottom toolbar (zoom in/out + percent) and enables wheel/drag zoom inside the open modal. Either way, a click on the unzoomed image closes. */
     extended?: boolean;
     /** Maximum zoom, as a multiple of the image's natural resolution: `1` = 100%
         of the source's real pixels (1 source px = 1 screen px), `2` = 200%. The
@@ -102,7 +100,6 @@
     border = undefined,
     borderWidth = undefined,
     scrim = undefined,
-    scrimOpacity = undefined,
     extended = false,
     maxZoom = undefined,
     capNatural = false,
@@ -319,8 +316,7 @@
       });
     }
 
-    // Move focus into the modal so keyboard users land inside the dialog; the
-    // stage (tabindex -1) is the fallback when there is no chrome to focus.
+    // Move focus into the modal so keyboard users land inside the dialog.
     (closeBtnEl ?? stageEl)?.focus();
   }
 
@@ -328,7 +324,7 @@
   // the zoom toolbar keeps its bespoke slide so it's handled separately.
   function chromeFadeEls(): HTMLElement[] {
     const els: (HTMLElement | undefined)[] = [];
-    if (extended || isGallery) els.push(closeBtnEl);
+    els.push(closeBtnEl);
     if (isGallery) els.push(prevBtnEl, nextBtnEl, counterEl);
     return els.filter((el): el is HTMLElement => !!el);
   }
@@ -554,11 +550,11 @@
       didDrag = false;
       return;
     }
-    if (!extended && !isGallery) closeLightbox();
+    if (!isGallery && scale <= MIN_SCALE) closeLightbox();
   }
 
   // Keep Tab inside the open dialog. The stage (tabindex -1) is excluded, so an
-  // image-only lightbox with no chrome simply holds focus on the stage.
+  // image-only lightbox holds focus on its close button.
   function trapTab(e: KeyboardEvent) {
     if (!modalEl) return;
     const f = [
@@ -658,8 +654,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}
@@ -694,21 +689,19 @@
       </div>
     </div>
 
-    {#if extended || isGallery}
-      <button
-        bind:this={closeBtnEl}
-        class="image-lightbox-chrome image-lightbox-close"
-        class:active={open}
-        type="button"
-        aria-label="Close"
-        onclick={closeLightbox}
-      >
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <path d="M18 6L6 18" />
-          <path d="M6 6l12 12" />
-        </svg>
-      </button>
-    {/if}
+    <button
+      bind:this={closeBtnEl}
+      class="image-lightbox-chrome image-lightbox-close"
+      class:active={open}
+      type="button"
+      aria-label="Close"
+      onclick={closeLightbox}
+    >
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M18 6L6 18" />
+        <path d="M6 6l12 12" />
+      </svg>
+    </button>
 
     {#if isGallery}
       <button
@@ -783,8 +776,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 +902,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;