@motion-proto/live-tokens 0.52.1 → 0.53.0

package/src/editor/ui/UIReveal.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { slide } from 'svelte/transition';
+  import { cubicOut } from 'svelte/easing';
+
+  /**
+   * Disclosure wrapper for in-flow expandable sections: the pane opens like a
+   * window while its content comes forward through it. Both moves share one
+   * clock and one easing so they read as a single gesture; the content is
+   * clipped by the opening pane for the first frames, which is the point.
+   *
+   * For sections only. Popovers, menus and dialogs are floating layers with
+   * their own motion, and subgrid detail rows (UIPaddingSelector,
+   * UIPaletteSelector) cannot take a wrapper element without losing their
+   * placement in the parent grid.
+   */
+  interface Props {
+    open: boolean;
+    /** Placement for the outer element when the section is itself a grid item. */
+    style?: string;
+    duration?: number;
+    children: Snippet;
+  }
+
+  let { open, style = undefined, duration = 260, children }: Props = $props();
+
+  const reduceMotion = typeof window !== 'undefined'
+    && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;
+
+  let ms = $derived(reduceMotion ? 0 : duration);
+
+  function approach(_node: Element, { duration }: { duration: number }) {
+    return {
+      duration,
+      easing: cubicOut,
+      css: (u: number) => `opacity: ${u}; transform: scale(${0.95 + u * 0.05})`
+    };
+  }
+</script>
+
+{#if open}
+  <div {style} transition:slide|local={{ duration: ms, easing: cubicOut }}>
+    <div transition:approach|local={{ duration: ms }}>
+      {@render children()}
+    </div>
+  </div>
+{/if}

package/src/editor/ui/UISquareButton.svelte

@@ -92,7 +92,7 @@
   .ui-sq[aria-disabled='true'] {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.10) 100%);
     border-color: rgba(255, 255, 255, 0.22);
-    color: var(--ui-text-muted);
+    color: var(--ui-text-disabled);
     cursor: not-allowed;
     pointer-events: none;
   }

package/src/editor/ui/colors/ColorsTab.svelte

@@ -153,8 +153,9 @@
 <div class="colors-tab">
   <div class="pane">
     <section id="colors-wheel" class="block">
-      <header class="block-head">
+      <header class="block-head head-inline">
         <h2 class="title">Color Wheel</h2>
+        <PaletteJumpButton family={selected} displayLabel={selectedSpec.displayLabel} target="tokens" />
       </header>
 
       <div class="wheel-hero">
@@ -309,9 +310,8 @@
     </section>
 
     <section id="colors-selected" class="block">
-      <header class="block-head head-row">
+      <header class="block-head">
         <h2 class="title">Palette <span class="mode-name">&middot; {selectedSpec.displayLabel ?? selected}</span></h2>
-        <PaletteJumpButton family={selected} displayLabel={selectedSpec.displayLabel} target="tokens" />
       </header>
 
       <div class="group">
@@ -385,10 +385,9 @@
     gap: var(--ui-space-2);
   }
 
-  .block-head.head-row {
+  .block-head.head-inline {
     flex-direction: row;
     align-items: center;
-    justify-content: space-between;
     gap: var(--ui-space-12);
   }
 

package/src/editor/ui/palette/OverridesPanel.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import ScaleCurveEditor from './ScaleCurveEditor.svelte';
   import UIPillButton from '../UIPillButton.svelte';
+  import UIReveal from '../UIReveal.svelte';
   import { type CurveAnchor, lightnessCurveConfig, saturationCurveConfig, textLightnessCurveConfig, hueCurveConfig } from '../curveEngine';
   import { scaleToCssVar } from '../../core/palettes/paletteDerivation';
   import { DEFAULT_PALETTE_HUE } from './paletteMath';
@@ -255,8 +256,8 @@
         >{copiedKey === k ? 'copied!' : hex}</button>
       </div>
     {/each}
-    {#if editorOpen}
-      <div class="curve-grid-span" style="grid-column: 1 / -1">
+    <UIReveal open={editorOpen} style="grid-column: 1 / -1">
+      <div class="curve-grid-span">
         {#each curveDescriptors as curve (curve.key)}
           <ScaleCurveEditor
             curveKey={curve.key}
@@ -274,7 +275,7 @@
           />
         {/each}
       </div>
-    {/if}
+    </UIReveal>
   </div>
 </div>
 

package/src/editor/ui/palette/PaletteJumpButton.svelte

@@ -12,12 +12,12 @@
   let { family, displayLabel = null, target }: Props = $props();
 
   let name = $derived(displayLabel ?? family);
-  let icon = $derived(target === 'wheel' ? 'fa-palette' : 'fa-sliders');
-  let label = $derived(target === 'wheel' ? 'Wheel' : 'Edit');
+  let icon = $derived(target === 'wheel' ? 'fa-palette' : 'fa-chart-line');
+  let label = $derived(target === 'wheel' ? 'Wheel' : 'Graph View');
   let title = $derived(
     target === 'wheel'
       ? `Open ${name} on the color wheel`
-      : `Edit the ${name} palette in Tokens`
+      : `Open the ${name} palette in the graph view`
   );
 
   function jump() {

package/src/editor/ui/palette/ScaleCurveEditor.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import BezierCurveEditor from '../BezierCurveEditor.svelte';
+  import UIReveal from '../UIReveal.svelte';
   import { isAutoSmoothCurve, type CurveAnchor, type CurveConfig } from '../curveEngine';
   import { curveSummary } from './curveSummary';
 
@@ -72,7 +73,7 @@
       {summary}
     </span>
   </button>
-  {#if open}
+  <UIReveal {open}>
     <BezierCurveEditor
       {anchors}
       {cfg}
@@ -86,7 +87,7 @@
       onOffsetChange={(v) => onOffsetChange(curveKey, v)}
       onAutoSmoothChange={(v) => onAutoSmoothChange(curveKey, v)}
     />
-  {/if}
+  </UIReveal>
 </div>
 
 <style>

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

@@ -1,8 +1,8 @@
 {
   "name": "Autumn",
   "createdAt": "2026-08-13T10:21:46.867Z",
-  "updatedAt": "2026-08-14T23:53:22.549Z",
-  "schemaVersion": 3,
+  "updatedAt": "2026-08-19T22:39:32.785Z",
+  "schemaVersion": 4,
   "colorsAndType": {
     "name": "Autumn",
     "createdAt": "2026-08-12T20:21:21.128Z",
@@ -2498,7 +2498,7 @@
       "name": "autumn",
       "component": "badge",
       "createdAt": "2026-05-01T08:28:00.345Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--badge-primary-surface": "--surface-brand",
         "--badge-primary-text": "--text-brand",
@@ -2636,7 +2636,7 @@
       "name": "autumn",
       "component": "button",
       "createdAt": "2026-05-10T19:28:06.893Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--button-primary-surface": "--surface-brand-high",
         "--button-primary-text": "--text-primary",
@@ -2752,7 +2752,7 @@
       "name": "autumn",
       "component": "callout",
       "createdAt": "2026-05-12T00:00:00.000Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--callout-info-surface": "--surface-info-lowest",
         "--callout-info-border": "--border-info-medium",
@@ -2824,7 +2824,7 @@
       "name": "autumn",
       "component": "card",
       "createdAt": "2026-05-10T19:26:31.704Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--card-default-surface": "color-mix(in srgb, var(--surface-neutral-lower) 70%, transparent)",
         "--card-default-border": "--border-neutral",
@@ -2865,7 +2865,7 @@
       "name": "autumn",
       "component": "codesnippet",
       "createdAt": "2026-05-27T13:22:54.228Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--codesnippet-surface": "color-mix(in srgb, var(--surface-neutral-lowest) 76%, transparent)",
         "--codesnippet-border": "--border-neutral",
@@ -2889,7 +2889,7 @@
       "name": "autumn",
       "component": "collapsiblesection",
       "createdAt": "2026-05-10T20:40:17.048Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--collapsiblesection-chromeless-default-surface": "--color-transparent",
         "--collapsiblesection-chromeless-default-padding": "--space-8",
@@ -2962,7 +2962,7 @@
       "name": "autumn",
       "component": "cornerbadge",
       "createdAt": "2026-05-12T15:31:06.313Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--corner-badge-margin": "--space-4",
         "--corner-badge-outer-radius": "--radius-md",
@@ -3010,7 +3010,7 @@
       "name": "autumn",
       "component": "dialog",
       "createdAt": "2026-05-10T20:05:24.719Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--dialog-overlay-surface": "--overlay-high",
         "--dialog-surface": "--surface-neutral-lowest",
@@ -3045,7 +3045,7 @@
       "name": "autumn",
       "component": "iconbutton",
       "createdAt": "2026-06-14T00:00:00.000Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--iconbutton-primary-surface": "--surface-brand-high",
         "--iconbutton-primary-icon": "--text-primary",
@@ -3134,7 +3134,7 @@
       "name": "autumn",
       "component": "image",
       "createdAt": "2026-04-26T00:00:00.000Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--image-default-radius": "--radius-4xl",
         "--image-default-border": "--border-neutral",
@@ -3147,7 +3147,7 @@
       "name": "autumn",
       "component": "imagelightbox",
       "createdAt": "2026-05-26T02:03:38.863Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--imagelightbox-tile-radius": "--radius-4xl",
         "--imagelightbox-tile-border": "--color-transparent",
@@ -3166,7 +3166,7 @@
       "name": "autumn",
       "component": "inlineeditactions",
       "createdAt": "2026-05-01T08:34:39.325Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--inlineeditactions-save-default-surface": "--surface-success-low",
         "--inlineeditactions-save-default-text": "--text-success",
@@ -3202,7 +3202,7 @@
       "name": "autumn",
       "component": "input",
       "createdAt": "2026-05-24T14:28:03.860Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--input-radius": "--radius-xl",
         "--input-padding": "--space-12",
@@ -3260,7 +3260,7 @@
       "name": "autumn",
       "component": "menuselect",
       "createdAt": "2026-05-16T00:00:00.000Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--menuselect-menu-surface": "color-mix(in srgb, var(--surface-neutral-lower) 85%, transparent)",
         "--menuselect-menu-border": "--border-neutral-medium",
@@ -3310,7 +3310,7 @@
       "name": "autumn",
       "component": "notification",
       "createdAt": "2026-04-18T02:43:11.330Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--notification-info-surface": "--surface-info",
         "--notification-info-action-surface": "--surface-neutral-lowest",
@@ -3390,14 +3390,11 @@
       "name": "autumn",
       "component": "panel",
       "createdAt": "2026-06-01T09:34:52.417Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--panel-frame-border": "--border-neutral",
         "--panel-frame-border-width": "--border-width-1",
         "--panel-frame-radius": "--radius-4xl",
-        "--panel-stage-padding": "--space-24",
-        "--panel-stage-inline-padding": "--space-24",
-        "--panel-stage-gap": "--space-20",
         "--panel-stage-surface": {
           "kind": "gradient",
           "value": {
@@ -3416,14 +3413,17 @@
               }
             ]
           }
-        }
+        },
+        "--panel-stage-padding": "--space-24",
+        "--panel-stage-inline-padding": "--space-24",
+        "--panel-stage-gap": "--space-20"
       }
     },
     "progressbar": {
       "name": "autumn",
       "component": "progressbar",
       "createdAt": "2026-05-10T20:42:26.726Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--progressbar-track-surface": "--surface-neutral-lowest",
         "--progressbar-track-border": "--border-neutral-subtle",
@@ -3444,11 +3444,46 @@
         "--progressbar-value-line-height": "--line-height-normal"
       }
     },
+    "radiobutton": {
+      "name": "autumn",
+      "component": "radiobutton",
+      "createdAt": "2026-05-10T20:44:44.372Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
+      "aliases": {
+        "--radiobutton-default-dot-border-color": "--border-neutral",
+        "--radiobutton-default-dot-border-width": "--border-width-2",
+        "--radiobutton-default-dot-fill": "--text-secondary",
+        "--radiobutton-default-dot-size": "--dot-size-0",
+        "--radiobutton-default-label": "--text-primary",
+        "--radiobutton-default-label-font-family": "--font-sans",
+        "--radiobutton-default-label-font-size": "--font-size-md",
+        "--radiobutton-default-label-font-weight": "--font-weight-semibold",
+        "--radiobutton-default-label-line-height": "--line-height-none",
+        "--radiobutton-hover-dot-border-color": "--border-neutral",
+        "--radiobutton-hover-dot-border-width": "--border-width-2",
+        "--radiobutton-hover-dot-fill": "--text-secondary",
+        "--radiobutton-hover-dot-size": "--dot-size-50",
+        "--radiobutton-hover-label": "--text-primary",
+        "--radiobutton-hover-label-font-family": "--font-sans",
+        "--radiobutton-hover-label-font-size": "--font-size-md",
+        "--radiobutton-hover-label-font-weight": "--font-weight-semibold",
+        "--radiobutton-hover-label-line-height": "--line-height-none",
+        "--radiobutton-active-dot-border-color": "--border-neutral",
+        "--radiobutton-active-dot-border-width": "--border-width-2",
+        "--radiobutton-active-dot-fill": "--text-secondary",
+        "--radiobutton-active-dot-size": "--dot-size-50",
+        "--radiobutton-active-label": "--text-primary",
+        "--radiobutton-active-label-font-family": "--font-sans",
+        "--radiobutton-active-label-font-size": "--font-size-md",
+        "--radiobutton-active-label-font-weight": "--font-weight-semibold",
+        "--radiobutton-active-label-line-height": "--line-height-none"
+      }
+    },
     "sectiondivider": {
       "name": "autumn",
       "component": "sectiondivider",
       "createdAt": "2026-05-10T22:09:00.336Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--sectiondivider-lg-title-font-family": "--font-display",
         "--sectiondivider-lg-title-font-weight": "--font-weight-bold",
@@ -3464,10 +3499,10 @@
         "--sectiondivider-lg-eyebrow-font-weight": "--font-weight-medium",
         "--sectiondivider-lg-eyebrow-font-size": "--font-size-md",
         "--sectiondivider-lg-eyebrow-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-lg-padding": "--space-4",
+        "--sectiondivider-lg-padding": "--space-6",
         "--sectiondivider-lg-title-padding": "--space-6",
-        "--sectiondivider-lg-description-padding": "--space-4",
-        "--sectiondivider-lg-eyebrow-padding": "--space-4",
+        "--sectiondivider-lg-description-padding": "--space-6",
+        "--sectiondivider-lg-eyebrow-padding": "--space-6",
         "--sectiondivider-lg-radius": "--radius-2xl",
         "--sectiondivider-lg-border-width": "--border-width-1",
         "--sectiondivider-lg-shadow": "--shadow-none",
@@ -3493,10 +3528,10 @@
         "--sectiondivider-md-eyebrow-font-weight": "--font-weight-medium",
         "--sectiondivider-md-eyebrow-font-size": "--font-size-sm",
         "--sectiondivider-md-eyebrow-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-md-padding": "--space-4",
+        "--sectiondivider-md-padding": "--space-6",
         "--sectiondivider-md-title-padding": "--space-6",
-        "--sectiondivider-md-description-padding": "--space-4",
-        "--sectiondivider-md-eyebrow-padding": "--space-4",
+        "--sectiondivider-md-description-padding": "--space-6",
+        "--sectiondivider-md-eyebrow-padding": "--space-6",
         "--sectiondivider-md-radius": "--radius-2xl",
         "--sectiondivider-md-border-width": "--border-width-1",
         "--sectiondivider-md-shadow": "--shadow-none",
@@ -3522,10 +3557,10 @@
         "--sectiondivider-sm-eyebrow-font-weight": "--font-weight-medium",
         "--sectiondivider-sm-eyebrow-font-size": "--font-size-xs",
         "--sectiondivider-sm-eyebrow-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-sm-padding": "--space-4",
+        "--sectiondivider-sm-padding": "--space-6",
         "--sectiondivider-sm-title-padding": "--space-6",
-        "--sectiondivider-sm-description-padding": "--space-4",
-        "--sectiondivider-sm-eyebrow-padding": "--space-4",
+        "--sectiondivider-sm-description-padding": "--space-6",
+        "--sectiondivider-sm-eyebrow-padding": "--space-6",
         "--sectiondivider-sm-radius": "--radius-2xl",
         "--sectiondivider-sm-border-width": "--border-width-1",
         "--sectiondivider-sm-shadow": "--shadow-none",
@@ -3543,7 +3578,7 @@
       "name": "autumn",
       "component": "segmentedcontrol",
       "createdAt": "2026-04-28T21:13:17.669Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--segmentedcontrol-bar-surface": "color-mix(in srgb, var(--surface-neutral-lowest) 75%, transparent)",
         "--segmentedcontrol-bar-border": "--border-neutral",
@@ -3603,7 +3638,7 @@
       "name": "autumn",
       "component": "sidenavigation",
       "createdAt": "2026-05-25T19:34:09.771Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--sidenavigation-panel-surface": "--surface-canvas-lower",
         "--sidenavigation-panel-border": "--border-canvas-faint",
@@ -3763,12 +3798,12 @@
       "name": "autumn",
       "component": "tabbar",
       "createdAt": "2026-05-12T01:57:26.390Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--tabbar-bar-divider": "--border-neutral-subtle",
         "--tabbar-bar-divider-thickness": "--border-width-1",
         "--tabbar-bar-top-margin": "--space-4",
-        "--tabbar-bar-bottom-padding": "--space-4",
+        "--tabbar-bar-bottom-padding": "--space-6",
         "--tabbar-bar-bottom-margin": "--space-4",
         "--tabbar-tab-gap": "--space-4",
         "--tabbar-default-text": "--text-tertiary",
@@ -3833,7 +3868,7 @@
       "name": "autumn",
       "component": "table",
       "createdAt": "2026-05-12T00:00:00.000Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--table-default-radius": "--radius-xl",
         "--table-default-surface": "color-mix(in srgb, var(--surface-neutral-lower) 57%, transparent)",
@@ -3867,7 +3902,7 @@
       "name": "autumn",
       "component": "toggle",
       "createdAt": "2026-04-18T02:43:11.333Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--toggle-track-surface": "--surface-neutral",
         "--toggle-track-border": "--border-neutral",
@@ -3899,7 +3934,7 @@
       "name": "autumn",
       "component": "tooltip",
       "createdAt": "2026-04-18T02:43:11.333Z",
-      "updatedAt": "2026-08-14T23:53:22.549Z",
+      "updatedAt": "2026-08-19T22:39:32.785Z",
       "aliases": {
         "--tooltip-surface": "color-mix(in srgb, var(--surface-canvas-lowest) 75%, transparent)",
         "--tooltip-text": "--text-primary",
@@ -3914,5 +3949,6 @@
         "--tooltip-shadow": "--shadow-md"
       }
     }
-  }
+  },
+  "componentSchemaVersion": 21
 }