@motion-proto/live-tokens 0.58.0 → 0.60.0

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

@@ -2317,11 +2317,11 @@
       "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
       "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
       "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+      "--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)",
+      "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
+      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
     },
     "fontSources": [
       {
@@ -3317,7 +3317,7 @@
       "createdAt": "2026-05-16T00:00:00.000Z",
       "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
-        "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 85%, transparent)",
+        "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 95%, transparent)",
         "--menuselect-menu-border": "--border-neutral-medium",
         "--menuselect-menu-border-width": "--border-width-1",
         "--menuselect-menu-radius": "--radius-lg",

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

@@ -53,11 +53,11 @@
   --hover-low: color-mix(in srgb, var(--text-primary) 5%, transparent);
   --hover: color-mix(in srgb, var(--text-primary) 10%, transparent);
   --hover-high: color-mix(in srgb, var(--text-primary) 15%, transparent);
-  --shadow-sm: 1px 1px 2px 0px hsla(237, 18%, 3%, 0.9);
-  --shadow-md: 3px 3px 6px 0px hsla(237, 18%, 3%, 0.9);
-  --shadow-lg: 5px 5px 9px 0px hsla(237, 18%, 3%, 0.9);
-  --shadow-xl: 6px 7px 13px 0px hsla(237, 18%, 3%, 0.9);
-  --shadow-2xl: 8px 9px 16px 0px hsla(237, 18%, 3%, 0.9);
+  --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);
+  --shadow-xl: 6px 7px 13px hsla(237, 18%, 3%, 0.9);
+  --shadow-2xl: 8px 9px 16px hsla(237, 18%, 3%, 0.9);
   --color-brand-100: oklch(0.95 0.0279 355.35);
   --color-brand-200: oklch(0.8508 0.0915 355.35);
   --color-brand-300: oklch(0.7516 0.1697 355.35);

package/src/system/components/ImageLightbox.svelte

@@ -24,6 +24,13 @@
         `cover` only crops when the thumbnail has its own box (an aspect from
         `width`/`height`, or a CSS-constrained container). */
     fit?: 'contain' | 'cover';
+    /** Where the tile's shadow lands. Both modes read
+        `--imagelightbox-tile-shadow`: `box` casts it from the tile's rectangle,
+        `content` casts it from the image's own alpha, so art with transparency
+        doesn't sit on a phantom rectangle. `none` drops it. A theme that dials
+        a non-zero spread has no shadow under `content` — `drop-shadow()` has no
+        spread slot. */
+    shadow?: 'box' | 'content' | 'none';
     /** 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%
@@ -55,6 +62,7 @@
     images = undefined,
     maxWidth = undefined,
     fit = 'contain',
+    shadow = 'box',
     extended = false,
     maxZoom = undefined,
     capNatural = false,
@@ -582,6 +590,8 @@
   <button
     bind:this={thumbEl}
     class="image-lightbox-thumb"
+    class:shadow-box={shadow === 'box'}
+    class:shadow-content={shadow === 'content'}
     style:--imagelightbox-tile-object-fit={fit}
     type="button"
     aria-label={cover?.alt ? `Expand image: ${cover.alt}` : 'Expand image'}
@@ -618,6 +628,8 @@
     <div
       bind:this={stageEl}
       class="image-lightbox-stage"
+      class:shadow-box={shadow === 'box'}
+      class:shadow-content={shadow === 'content'}
       role="presentation"
       tabindex="-1"
       onclick={onStageClick}
@@ -747,12 +759,25 @@
     cursor: zoom-in;
     border: var(--imagelightbox-tile-border-width) solid var(--imagelightbox-tile-border);
     border-radius: var(--imagelightbox-tile-radius);
-    box-shadow: var(--imagelightbox-tile-shadow);
     background: transparent;
     overflow: hidden;
     transition: transform 250ms ease;
   }
 
+  .image-lightbox-thumb.shadow-box,
+  .image-lightbox-stage.shadow-box {
+    box-shadow: var(--imagelightbox-tile-shadow);
+  }
+
+  /* Content mode traces the image's alpha. The filter goes on the tile, not the
+     <img>: applied to the element it runs after that element's own overflow
+     clip, so the shadow lands outside the box instead of being cropped by it.
+     The open modal stays bare — it casts against a near-opaque scrim where no
+     shadow reads, and a filter over the pan/zoom surface repaints every frame. */
+  .image-lightbox-thumb.shadow-content {
+    filter: drop-shadow(var(--imagelightbox-tile-shadow));
+  }
+
   .image-lightbox-thumb:hover {
     transform: scale(1.02);
   }
@@ -793,7 +818,6 @@
     cursor: zoom-out;
     border: var(--imagelightbox-tile-border-width) solid var(--imagelightbox-tile-border);
     border-radius: var(--imagelightbox-tile-radius);
-    box-shadow: var(--imagelightbox-tile-shadow);
     background: transparent;
   }
 

package/src/system/components/MenuSelect.svelte

@@ -72,7 +72,7 @@
 
   :global(:root) {
     /* Menu panel */
-    --menuselect-menu-surface: color-mix(in srgb, var(--surface-neutral-lower) 85%, transparent);
+    --menuselect-menu-surface: color-mix(in srgb, var(--surface-neutral-lower) 95%, transparent);
     --menuselect-menu-border: var(--border-neutral-medium);
     --menuselect-menu-border-width: var(--border-width-1);
     --menuselect-menu-radius: var(--radius-md);

package/src/system/styles/tokens.css

@@ -530,11 +530,11 @@
 
   /* Shadows (elevation scale) */
   --shadow-none: none;
-  --shadow-sm: 1px 1px 2px 0px hsla(237, 18%, 3%, 0.9);
-  --shadow-md: 3px 3px 6px 0px hsla(237, 18%, 3%, 0.9);
-  --shadow-lg: 5px 5px 9px 0px hsla(237, 18%, 3%, 0.9);
-  --shadow-xl: 6px 7px 13px 0px hsla(237, 18%, 3%, 0.9);
-  --shadow-2xl: 8px 9px 16px 0px hsla(237, 18%, 3%, 0.9);
+  --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);
+  --shadow-xl: 6px 7px 13px hsla(237, 18%, 3%, 0.9);
+  --shadow-2xl: 8px 9px 16px hsla(237, 18%, 3%, 0.9);
 
   /* Focus rings (box-shadow outline) */
   --ring-focus-sm: 0 0 0 2px hsla(0, 78%, 60%, 0.1);