@motion-proto/live-tokens 0.61.0 → 0.62.0

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

@@ -3516,7 +3516,7 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "--surface-canvas-lowest",
+        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
@@ -3545,7 +3545,7 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "--surface-accent-lowest",
+        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
@@ -3574,7 +3574,7 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent)",
+        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },

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

@@ -3568,7 +3568,7 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "--surface-canvas-lowest",
+        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
@@ -3597,7 +3597,7 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "--surface-accent-lowest",
+        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
@@ -3626,7 +3626,7 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent)",
+        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },

package/src/system/components/Card.svelte

@@ -3,6 +3,9 @@
     icon?: string;
     iconColor?: string;
     title?: string;
+    /** `bare` drops the header. The frame and body keep every token the default
+        variant uses, so padding, stroke and fill stay editable. */
+    variant?: 'default' | 'bare';
     size?: 'default' | 'compact';
     /** false → the card stops pinning body typography so the consumer fully owns slotted content's styling. */
     prose?: boolean;
@@ -20,6 +23,7 @@
     icon = '',
     iconColor = 'var(--text-secondary)',
     title = '',
+    variant = 'default',
     size = 'default',
     prose = true,
     flush = false,
@@ -35,16 +39,25 @@
   let hoverShadow = $derived(
     hover === undefined ? undefined : hover ? 'var(--card-hover-shadow)' : 'var(--card-default-shadow)',
   );
+
+  let showHeader = $derived(variant !== 'bare' && Boolean(icon || title));
+
+  $effect(() => {
+    if (import.meta.env.DEV && variant === 'default' && !icon && !title) {
+      console.warn('[live-tokens] <Card> has no icon or title. Use variant="bare" to declare a headerless card.');
+    }
+  });
 </script>
 
 <div
   class="card {className}"
+  class:bare={variant === 'bare'}
   class:compact={size === 'compact'}
   style:--card-color={iconColor}
   style:--card-hover-border-active={hoverBorder}
   style:--card-hover-shadow-active={hoverShadow}
 >
-  {#if icon || title}
+  {#if showHeader}
     <div class="card-header">
       {#if icon}
         <i class="{icon} card-icon"></i>
@@ -68,17 +81,22 @@
     --card-default-border: var(--border-neutral);
     --card-default-border-width: var(--border-width-1);
     --card-default-radius: var(--radius-lg);
+    /* Every side tracks its base. A declared side always beats the fallback
+       themed-padding emits, so naming a literal step here left the base token
+       inert: merging split padding back to one value cleared the side aliases
+       and the card kept the old geometry. The asymmetry is a themed choice now,
+       carried by per-side aliases that override these outright. */
     --card-default-header-padding: var(--space-16);
-    --card-default-header-padding-top: var(--space-12);
-    --card-default-header-padding-right: var(--space-20);
-    --card-default-header-padding-bottom: var(--space-12);
-    --card-default-header-padding-left: var(--space-20);
+    --card-default-header-padding-top: var(--card-default-header-padding);
+    --card-default-header-padding-right: var(--card-default-header-padding);
+    --card-default-header-padding-bottom: var(--card-default-header-padding);
+    --card-default-header-padding-left: var(--card-default-header-padding);
     --card-default-header-gap: var(--space-8);
     --card-default-body-padding: var(--space-16);
-    --card-default-body-padding-top: var(--space-16);
-    --card-default-body-padding-right: var(--space-20);
-    --card-default-body-padding-bottom: var(--space-16);
-    --card-default-body-padding-left: var(--space-20);
+    --card-default-body-padding-top: var(--card-default-body-padding);
+    --card-default-body-padding-right: var(--card-default-body-padding);
+    --card-default-body-padding-bottom: var(--card-default-body-padding);
+    --card-default-body-padding-left: var(--card-default-body-padding);
     --card-default-shadow: var(--shadow-sm);
     --card-default-blur: var(--blur-none);
     --card-default-header-surface: color-mix(in srgb, var(--surface-neutral-lowest) 80%, transparent);

package/src/system/components/ImageLightbox.svelte

@@ -728,7 +728,8 @@
 
 <style>
   :global(:root) {
-    /* thumbnail (closed inline) + animated modal stage */
+    /* thumbnail (closed inline) + animated modal stage; the fill is the
+       thumbnail's alone — the open stage rides the overlay */
     --imagelightbox-tile-surface:          var(--color-transparent);
     --imagelightbox-tile-radius:           var(--radius-2xl);
     --imagelightbox-tile-border:           var(--color-transparent);
@@ -813,13 +814,15 @@
     border: 0;
   }
 
+  /* No tile fill here: the open stage sits on the near-opaque overlay, which
+     already backs transparent art. Painting the fill too would band the scrim
+     wherever the image's aspect leaves the stage box unfilled. */
   .image-lightbox-stage {
     position: fixed;
     z-index: var(--z-modal);
     cursor: zoom-out;
     border: var(--imagelightbox-tile-border-width) solid var(--imagelightbox-tile-border);
     border-radius: var(--imagelightbox-tile-radius);
-    background: var(--imagelightbox-tile-surface);
   }
 
   .image-lightbox-clip {

package/src/system/components/SectionDivider.svelte

@@ -243,7 +243,7 @@
     --sectiondivider-lg-description: var(--text-alternate);
     --sectiondivider-lg-eyebrow: var(--text-brand);
     --sectiondivider-lg-border: var(--color-transparent);
-    --sectiondivider-lg-title-outline-color: var(--surface-canvas-lowest);
+    --sectiondivider-lg-title-outline-color: var(--color-transparent);
     --sectiondivider-lg-hairline-color: var(--border-brand-medium);
 
     /* Medium */
@@ -274,7 +274,7 @@
     --sectiondivider-md-description: var(--text-secondary);
     --sectiondivider-md-eyebrow: var(--text-tertiary);
     --sectiondivider-md-border: var(--color-transparent);
-    --sectiondivider-md-title-outline-color: var(--surface-accent-lowest);
+    --sectiondivider-md-title-outline-color: var(--color-transparent);
     --sectiondivider-md-hairline-color: var(--border-brand-medium);
 
     /* Small */
@@ -305,7 +305,7 @@
     --sectiondivider-sm-description: var(--text-secondary);
     --sectiondivider-sm-eyebrow: var(--text-tertiary);
     --sectiondivider-sm-border: var(--color-transparent);
-    --sectiondivider-sm-title-outline-color: color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent);
+    --sectiondivider-sm-title-outline-color: var(--color-transparent);
     --sectiondivider-sm-hairline-color: color-mix(in srgb, var(--border-brand-medium) 50%, transparent);
 
     /* Intrinsic defaults. These keys cascade to `:root` via the editor's

package/src/system/components/SegmentedControl.svelte

@@ -152,25 +152,27 @@
      icon size) all read through these default names, so rebinding them
      here is enough — no per-state small token explosion. Per-side padding
      overrides are rebound too so split-padding edits at small don't leak
-     through to default size. Font-weight and color are intentionally NOT
+     through to default size; each carries the same fallback themed-padding
+     emits, so merging the small padding back to one value leaves the base
+     token in charge instead of binding to a name nothing sets. Font-weight and color are intentionally NOT
      rebound: weight differences are state-driven (selected = semibold),
      colors are state-driven too. */
   .segmented-control.small {
     --segmentedcontrol-bar-padding: var(--segmentedcontrol-bar-small-padding);
-    --segmentedcontrol-bar-padding-top: var(--segmentedcontrol-bar-small-padding-top);
-    --segmentedcontrol-bar-padding-right: var(--segmentedcontrol-bar-small-padding-right);
-    --segmentedcontrol-bar-padding-bottom: var(--segmentedcontrol-bar-small-padding-bottom);
-    --segmentedcontrol-bar-padding-left: var(--segmentedcontrol-bar-small-padding-left);
+    --segmentedcontrol-bar-padding-top: var(--segmentedcontrol-bar-small-padding-top, var(--segmentedcontrol-bar-small-padding));
+    --segmentedcontrol-bar-padding-right: var(--segmentedcontrol-bar-small-padding-right, var(--segmentedcontrol-bar-small-padding));
+    --segmentedcontrol-bar-padding-bottom: var(--segmentedcontrol-bar-small-padding-bottom, var(--segmentedcontrol-bar-small-padding));
+    --segmentedcontrol-bar-padding-left: var(--segmentedcontrol-bar-small-padding-left, var(--segmentedcontrol-bar-small-padding));
     --segmentedcontrol-bar-radius: var(--segmentedcontrol-bar-small-radius);
 
     --segmentedcontrol-divider-inset: var(--segmentedcontrol-small-divider-inset);
     --segmentedcontrol-divider-thickness: var(--segmentedcontrol-small-divider-thickness);
 
     --segmentedcontrol-option-padding: var(--segmentedcontrol-option-small-padding);
-    --segmentedcontrol-option-padding-top: var(--segmentedcontrol-option-small-padding-top);
-    --segmentedcontrol-option-padding-right: var(--segmentedcontrol-option-small-padding-right);
-    --segmentedcontrol-option-padding-bottom: var(--segmentedcontrol-option-small-padding-bottom);
-    --segmentedcontrol-option-padding-left: var(--segmentedcontrol-option-small-padding-left);
+    --segmentedcontrol-option-padding-top: var(--segmentedcontrol-option-small-padding-top, var(--segmentedcontrol-option-small-padding));
+    --segmentedcontrol-option-padding-right: var(--segmentedcontrol-option-small-padding-right, var(--segmentedcontrol-option-small-padding));
+    --segmentedcontrol-option-padding-bottom: var(--segmentedcontrol-option-small-padding-bottom, var(--segmentedcontrol-option-small-padding));
+    --segmentedcontrol-option-padding-left: var(--segmentedcontrol-option-small-padding-left, var(--segmentedcontrol-option-small-padding));
     --segmentedcontrol-option-gap: var(--segmentedcontrol-option-small-gap);
 
     /* Icon size has a single source-of-truth token now; text size/line-height

package/src/system/styles/tokens.css

@@ -681,11 +681,19 @@
   --code-line-height: var(--line-height-normal);
   --code-letter-spacing: var(--letter-spacing-normal);
 
-  --editorial-font-family: var(--font-editorial);
-  --editorial-font-size: var(--font-size-md);
-  --editorial-font-weight: var(--font-weight-normal);
-  --editorial-line-height: var(--line-height-normal);
-  --editorial-letter-spacing: var(--letter-spacing-normal);
+  /* Editorial — the long-reading role. Each step mirrors its body counterpart
+     until the stack is repointed. */
+  --editorial-md-font-family: var(--font-editorial);
+  --editorial-md-font-size: var(--font-size-md);
+  --editorial-md-font-weight: var(--font-weight-normal);
+  --editorial-md-line-height: var(--line-height-normal);
+  --editorial-md-letter-spacing: var(--letter-spacing-normal);
+
+  --editorial-sm-font-family: var(--font-editorial);
+  --editorial-sm-font-size: var(--font-size-sm);
+  --editorial-sm-font-weight: var(--font-weight-normal);
+  --editorial-sm-line-height: var(--line-height-tight);
+  --editorial-sm-letter-spacing: var(--letter-spacing-normal);
 
   /* Eyebrow — values track the existing .eyebrow class in src/app/Home.svelte. */
   --eyebrow-font-family: var(--font-sans);

package/template/src/pages/Home.svelte

@@ -12,8 +12,7 @@
 
 <div class="home">
   <section class="stub">
-    <Card>
-      <span class="eyebrow">Your app lives here</span>
+    <Card variant="bare">
       <h1>Home</h1>
       <p>
         Replace this with your own content. Edit <code>src/pages/Home.svelte</code>
@@ -46,15 +45,6 @@
     grid-column: 4 / span 6;
   }
 
-  .eyebrow {
-    display: block;
-    font-size: var(--font-size-sm);
-    font-weight: var(--font-weight-normal);
-    text-transform: uppercase;
-    color: var(--text-tertiary);
-    margin-bottom: var(--space-8);
-  }
-
   h1 {
     font-family: var(--font-display);
     font-size: var(--font-size-4xl);