@motion-proto/live-tokens 0.57.0 → 0.59.0

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

@@ -2302,11 +2302,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": [
       {

package/src/live-tokens/data/themes/{sketches.json → sketchy.json}

@@ -1,10 +1,10 @@
 {
-  "name": "Sketches",
+  "name": "Sketchy",
   "createdAt": "2026-08-25T01:11:16.870Z",
   "updatedAt": "2026-08-26T10:04:53.000Z",
   "schemaVersion": 4,
   "colorsAndType": {
-    "name": "Sketches",
+    "name": "Sketchy",
     "createdAt": "2026-08-25T01:21:09.181Z",
     "updatedAt": "2026-08-25T01:21:09.181Z",
     "editorConfigs": {
@@ -2256,11 +2256,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.2)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.2)"
+      "--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)",
+      "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.2)"
     },
     "fontSources": [
       {
@@ -2525,7 +2525,7 @@
   },
   "componentConfigs": {
     "badge": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "badge",
       "createdAt": "2026-05-01T08:28:00.345Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -2663,7 +2663,7 @@
       }
     },
     "button": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "button",
       "createdAt": "2026-05-10T19:28:06.893Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -2779,7 +2779,7 @@
       }
     },
     "callout": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "callout",
       "createdAt": "2026-05-12T00:00:00.000Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -2851,7 +2851,7 @@
       }
     },
     "card": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "card",
       "createdAt": "2026-05-10T19:26:31.704Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -2892,7 +2892,7 @@
       }
     },
     "codesnippet": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "codesnippet",
       "createdAt": "2026-05-27T13:22:54.228Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -2916,7 +2916,7 @@
       }
     },
     "collapsiblesection": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "collapsiblesection",
       "createdAt": "2026-05-10T20:40:17.048Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -2989,7 +2989,7 @@
       }
     },
     "cornerbadge": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "cornerbadge",
       "createdAt": "2026-05-12T15:31:06.313Z",
       "updatedAt": "2026-08-25T01:12:06.370Z",
@@ -3037,7 +3037,7 @@
       }
     },
     "dialog": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "dialog",
       "createdAt": "2026-05-10T20:05:24.719Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -3072,7 +3072,7 @@
       }
     },
     "iconbutton": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "iconbutton",
       "createdAt": "2026-06-14T00:00:00.000Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -3161,7 +3161,7 @@
       }
     },
     "image": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "image",
       "createdAt": "2026-04-26T00:00:00.000Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -3174,7 +3174,7 @@
       }
     },
     "imagelightbox": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "imagelightbox",
       "createdAt": "2026-05-26T02:03:38.863Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -3193,7 +3193,7 @@
       }
     },
     "inlineeditactions": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "inlineeditactions",
       "createdAt": "2026-05-01T08:34:39.325Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -3229,7 +3229,7 @@
       }
     },
     "input": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "input",
       "createdAt": "2026-05-24T14:28:03.860Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -3287,7 +3287,7 @@
       }
     },
     "menuselect": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "menuselect",
       "createdAt": "2026-05-16T00:00:00.000Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -3337,7 +3337,7 @@
       }
     },
     "notification": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "notification",
       "createdAt": "2026-04-18T02:43:11.330Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -3417,7 +3417,7 @@
       }
     },
     "panel": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "panel",
       "createdAt": "2026-06-01T09:34:52.417Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -3450,7 +3450,7 @@
       }
     },
     "progressbar": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "progressbar",
       "createdAt": "2026-05-10T20:42:26.726Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -3475,7 +3475,7 @@
       }
     },
     "radiobutton": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "radiobutton",
       "createdAt": "2026-05-10T20:44:44.372Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -3510,7 +3510,7 @@
       }
     },
     "sectiondivider": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "sectiondivider",
       "createdAt": "2026-05-10T22:09:00.336Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -3605,7 +3605,7 @@
       }
     },
     "segmentedcontrol": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "segmentedcontrol",
       "createdAt": "2026-04-28T21:13:17.669Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -3665,7 +3665,7 @@
       }
     },
     "sidenavigation": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "sidenavigation",
       "createdAt": "2026-05-25T19:34:09.771Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -3825,7 +3825,7 @@
       }
     },
     "tabbar": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "tabbar",
       "createdAt": "2026-05-12T01:57:26.390Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -3895,7 +3895,7 @@
       }
     },
     "table": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "table",
       "createdAt": "2026-05-12T00:00:00.000Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -3929,7 +3929,7 @@
       }
     },
     "toggle": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "toggle",
       "createdAt": "2026-04-18T02:43:11.333Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",
@@ -3961,7 +3961,7 @@
       }
     },
     "tooltip": {
-      "name": "sketches",
+      "name": "sketchy",
       "component": "tooltip",
       "createdAt": "2026-04-18T02:43:11.333Z",
       "updatedAt": "2026-08-25T01:13:11.520Z",

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

@@ -2256,11 +2256,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.2)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.2)"
+      "--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)",
+      "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.2)"
     },
     "fontSources": [
       {

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": [
       {

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/Card.svelte

@@ -6,6 +6,9 @@
     size?: 'default' | 'compact';
     /** false → the card stops pinning body typography so the consumer fully owns slotted content's styling. */
     prose?: boolean;
+    /** true → the body drops its inset so slotted media runs to the card's edge.
+        Pair with `prose={false}`: a flush body is a frame, not a column of text. */
+    flush?: boolean;
     /** Apply hover styling on pointer-over. `undefined` inherits the editor's global "Use hover"
         default; `true`/`false` force this instance on/off. */
     hover?: boolean | undefined;
@@ -19,6 +22,7 @@
     title = '',
     size = 'default',
     prose = true,
+    flush = false,
     hover = undefined,
     class: className = '',
     children
@@ -50,7 +54,7 @@
       {/if}
     </div>
   {/if}
-  <div class="card-body" class:prose>
+  <div class="card-body" class:prose class:flush>
     {@render children?.()}
   </div>
 </div>
@@ -178,4 +182,11 @@
   .card.compact .card-body {
     font-size: var(--font-size-sm);
   }
+
+  /* Last, and at the same weight as the compact override, so a flush card is
+     flush at either size. Full-bleed media has to reach the border the card
+     already clips it against. */
+  .card-body.flush {
+    padding: var(--space-0);
+  }
 </style>

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/SectionDivider.svelte

@@ -543,6 +543,10 @@
     display: block;
     overflow: visible;
     color: var(--_divider-title);
+    /* The title is type that happens to be drawn as an SVG, so Sketch mode
+       reads it as one glyph and pushes it as far as it pushes a 16px icon.
+       At heading size that is enough travel to pull the letters apart. */
+    --sketch-icon-off: var(--sketch-icon-soft);
   }
   svg.divider-label text {
     font-family: var(--_divider-title-font-family);

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);