@motion-proto/live-tokens 0.7.1 → 0.9.0

package/src/editor/ui/sections/ColumnsSection.svelte

@@ -164,7 +164,7 @@
   .section {
     display: flex;
     flex-direction: column;
-    gap: var(--ui-space-16);
+    gap: var(--ui-space-24);
   }
 
   .section-title {
@@ -244,7 +244,6 @@
     font-size: 9px;
     font-family: var(--ui-font-mono);
     color: var(--ui-text-muted);
-    letter-spacing: 0.04em;
     pointer-events: none;
     line-height: 1;
   }

package/src/editor/ui/sections/GradientsSection.svelte

@@ -56,7 +56,7 @@
   .section {
     display: flex;
     flex-direction: column;
-    gap: var(--ui-space-16);
+    gap: var(--ui-space-24);
   }
 
   .section-title {

package/src/editor/ui/sections/OverlaysSection.svelte

@@ -337,7 +337,7 @@
   .section {
     display: flex;
     flex-direction: column;
-    gap: var(--ui-space-16);
+    gap: var(--ui-space-24);
   }
 
   .section-title {

package/src/editor/ui/sections/ShadowsSection.svelte

@@ -799,7 +799,7 @@
   .section {
     display: flex;
     flex-direction: column;
-    gap: var(--ui-space-16);
+    gap: var(--ui-space-24);
   }
 
   .section-title {

package/src/system/components/Button.svelte

@@ -140,6 +140,7 @@
       --button-outline-hover-border-width: var(--border-width-1);
       --button-outline-hover-radius: var(--radius-md);
       --button-outline-hover-padding: var(--space-8);
+      --button-outline-active-surface: var(--hover);
       --button-outline-disabled-surface: var(--color-transparent);
       --button-outline-disabled-text: var(--text-tertiary);
       --button-outline-disabled-border: var(--border-neutral-faint);
@@ -226,7 +227,6 @@
 
    .button {
       cursor: pointer;
-      letter-spacing: 0.0125rem;
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -385,7 +385,7 @@
          }
 
          &:active:not(:disabled) {
-            background: rgba(255, 255, 255, 0.08);
+            background: var(--button-outline-active-surface);
          }
 
          &:disabled {

package/src/system/components/Card.svelte

@@ -81,7 +81,6 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    letter-spacing: normal;
   }
 
   .card:not(.no-hover):hover,
@@ -133,6 +132,35 @@
     @include themed-padding(--card-default-body-padding);
   }
 
+  /* Slot content inherits the card's body typography so consumer-side global
+     element rules (e.g. site.css `p { font-family: serif }`) don't override
+     the card-body-font-family alias. */
+  .card-body :global(p),
+  .card-body :global(ul),
+  .card-body :global(ol),
+  .card-body :global(li) {
+    font: inherit;
+    color: inherit;
+  }
+
+  .card-body :global(p) {
+    margin: 0 0 var(--space-12);
+  }
+
+  .card-body :global(p:last-child) {
+    margin-bottom: 0;
+  }
+
+  .card-body :global(ul),
+  .card-body :global(ol) {
+    margin: var(--space-12) 0;
+    padding-left: var(--space-24);
+  }
+
+  .card-body :global(li) {
+    margin-bottom: var(--space-4);
+  }
+
   .card.compact .card-body {
     font-size: var(--font-size-sm);
   }

package/src/system/components/CollapsibleSection.svelte

@@ -147,7 +147,6 @@
       --collapsiblesection-divider-expanded-padding: var(--space-4);
 
       /* Container — frame (always-on outer chrome) */
-      --collapsiblesection-container-frame-surface: var(--surface-canvas);
       --collapsiblesection-container-frame-border: var(--color-transparent);
       --collapsiblesection-container-frame-border-width: var(--border-width-3);
       --collapsiblesection-container-frame-radius: var(--radius-none);
@@ -270,7 +269,6 @@
    }
 
    .es-root.variant-container {
-      background: var(--collapsiblesection-container-frame-surface);
       border: var(--collapsiblesection-container-frame-border-width) solid var(--collapsiblesection-container-frame-border);
       border-radius: var(--collapsiblesection-container-frame-radius);
       overflow: hidden;
@@ -286,4 +284,29 @@
          @include themed-padding(--collapsiblesection-container-expanded-padding, $h: 2);
       }
    }
+
+   .section-content {
+      color: var(--text-secondary);
+      font-size: var(--font-size-md);
+      line-height: var(--line-height-md);
+   }
+
+   /* Slot content inherits the section's body typography so consumer-side
+      global element rules (e.g. site.css `p { font-family: serif }`) don't
+      override the collapsible's intended type styling. */
+   .section-content :global(p),
+   .section-content :global(ul),
+   .section-content :global(ol),
+   .section-content :global(li) {
+      font: inherit;
+      color: inherit;
+   }
+
+   .section-content :global(p) {
+      margin: 0 0 var(--space-12);
+   }
+
+   .section-content :global(p:last-child) {
+      margin-bottom: 0;
+   }
 </style>

package/src/system/components/Dialog.svelte

@@ -2,7 +2,6 @@
   import { createEventDispatcher, tick } from 'svelte';
   import type { Snippet } from 'svelte';
   import Button from './Button.svelte';
-  import { editorState } from '../../editor/core/store/editorStore';
   import type { ButtonVariant, DialogButtonSpec } from './types';
 
   const BUTTON_VARIANTS: readonly ButtonVariant[] = ['primary', 'secondary', 'outline', 'success', 'danger', 'warning'];
@@ -10,6 +9,18 @@
     return v && (BUTTON_VARIANTS as readonly string[]).includes(v) ? (v as ButtonVariant) : fallback;
   }
 
+  // Read the configured Button variants from :root. The editor mutates these
+  // inline on documentElement via cssVarSync; a MutationObserver picks the
+  // changes up without coupling this component to the editor module graph.
+  // In production the var lives in the generated stylesheet and never
+  // changes, so the observer registers but never fires.
+  function readCssVar(name: string): string {
+    if (typeof document === 'undefined') return '';
+    return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  }
+  let confirmVarValue = $state(readCssVar('--dialog-confirm-variant'));
+  let cancelVarValue = $state(readCssVar('--dialog-cancel-variant'));
+
   interface Props {
     show?: boolean;
     title?: string;
@@ -39,9 +50,8 @@
     children,
   }: Props = $props();
 
-  let configuredConfig = $derived($editorState.components.dialog?.config ?? {});
-  let effectiveConfirmVariant = $derived(confirm?.variant ?? asVariant(configuredConfig['--dialog-confirm-variant'] as string | undefined, 'primary'));
-  let effectiveCancelVariant = $derived(cancel?.variant ?? asVariant(configuredConfig['--dialog-cancel-variant'] as string | undefined, 'outline'));
+  let effectiveConfirmVariant = $derived(confirm?.variant ?? asVariant(confirmVarValue, 'primary'));
+  let effectiveCancelVariant = $derived(cancel?.variant ?? asVariant(cancelVarValue, 'outline'));
 
   // Dual-fire bridge — see Button.svelte for the deprecation timeline.
   const dispatch = createEventDispatcher<{
@@ -52,6 +62,16 @@
   let cancelButtonRef: HTMLButtonElement = $state()!;
   let closeButtonRef: HTMLButtonElement = $state()!;
 
+  $effect(() => {
+    if (typeof document === 'undefined') return;
+    const obs = new MutationObserver(() => {
+      confirmVarValue = readCssVar('--dialog-confirm-variant');
+      cancelVarValue = readCssVar('--dialog-cancel-variant');
+    });
+    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
+    return () => obs.disconnect();
+  });
+
   // Focus the primary button when dialog opens (skip in inline mode so the editor doesn't steal focus).
   $effect(() => {
     if (show && !inline) {

package/src/system/components/FloatingTokenTags.css

@@ -23,7 +23,7 @@
   box-sizing: border-box;
   padding: 0.75rem 1.5rem;
   display: inline-flex;
-  width: max-content;
+  width: 12rem;
   align-items: center;
   justify-content: center;
   /* Defaults; overridden inline from the active token bindings. */
@@ -46,7 +46,6 @@
   font-size: 1.25rem;
   font-weight: 700;
   color: rgba(255, 255, 255, 0.95);
-  letter-spacing: 0.01em;
   white-space: nowrap;
   user-select: none;
   pointer-events: none;
@@ -74,11 +73,11 @@
 }
 
 .ftt-string {
-  stroke: #9b938e;
+  stroke: #d4ccc6;
   stroke-width: 2;
   stroke-linecap: round;
   vector-effect: non-scaling-stroke;
-  opacity: 0.7;
+  opacity: 0.5;
   transition: opacity 150ms ease, stroke 150ms ease;
 }
 
@@ -94,8 +93,8 @@
   height: 0.625rem;
   translate: -50% -50%;
   border-radius: 9999px;
-  background: #615954;
-  border: 1px solid #c4bcb6;
+  background: #c4bcb6;
+  border: 1px solid #f0eae4;
   pointer-events: none;
   z-index: 3;
 }
@@ -130,13 +129,7 @@
   flex-direction: column;
   align-items: center;
   gap: 0.25rem;
-
-  /* Black, not page-tinted: the tinted variant produces visible banding in
-     the soft outer halo. Composed into hover/flash filters below. */
-  --ftt-tag-shadow:
-    drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55))
-    drop-shadow(0 6px 60px  rgba(0, 0, 0, 0.4))
-    drop-shadow(0 0  120px  rgba(0, 0, 0, 0.3));
+  width: 14rem;
 }
 
 /* Lift open tag so its dropdown paints over sibling tags. */
@@ -144,18 +137,35 @@
   z-index: 20;
 }
 
+/* Bottom-placement chips mirror the top arc: chip first, eyebrow on the
+   outer (lower) side. Dropdown opens upward toward the box so the menu
+   doesn't fall off the stage. */
+.ftt-float[data-placement="bottom"] {
+  flex-direction: column-reverse;
+}
+
+/* Pivot the tilt around the chip's right semicircular cap. The chip is
+   ~1.84rem tall so the cap center sits ~0.9rem from the chip's right edge
+   and ~0.9rem above its bottom — which (since the chip is the widest, last
+   in-flow element of the wrapper) coincides with `calc(100% - 0.9rem)` on
+   both axes of the wrapper. */
+.ftt-float[data-pivot="right-cap"] {
+  transform-origin: calc(100% - 0.9rem) calc(100% - 0.9rem);
+}
+
 @keyframes ftt-bob {
   0%, 100% { translate: -50% -50%; }
   50%      { translate: -50% calc(-50% + var(--ftt-bob-distance, -8px)); }
 }
 
-/* --- Property label above each tag ---------------------------------------- */
+/* --- Property label paired with each tag ---------------------------------- */
+/* Sits on the outer side of the chip: above for top-placement chips, below
+   for bottom-placement chips (see `.ftt-float[data-placement="bottom"]`). */
 .ftt-float-property {
   font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   font-size: 0.875rem;
   font-weight: 700;
-  text-transform: uppercase;
-  color: #ffffffb6;
+  color: #ff8eeb;
   white-space: nowrap;
 }
 
@@ -178,7 +188,7 @@
   border-radius: 9999px;
   font-family: Manrope, system-ui, -apple-system, sans-serif;
   font-size: 0.875rem;
-  font-weight: 500;
+  font-weight: 600;
   line-height: 1.1;
   white-space: nowrap;
 }
@@ -202,11 +212,10 @@
   margin: 0;
   cursor: grab;
   touch-action: none;
-  filter: var(--ftt-tag-shadow);
   transition: filter 150ms ease, scale 150ms ease;
 }
 .ftt-tag-trigger:hover {
-  filter: var(--ftt-tag-shadow) brightness(1.2);
+  filter: brightness(1.2);
   scale: 1.04;
 }
 .ftt-float.ftt-dragging .ftt-tag-trigger {
@@ -227,14 +236,24 @@
 }
 
 @keyframes ftt-tag-flash {
-  0%   { scale: 1;    filter: var(--ftt-tag-shadow) brightness(1)   drop-shadow(0 0 0  transparent); }
-  25%  { scale: 1.14; filter: var(--ftt-tag-shadow) brightness(1.8) drop-shadow(0 0 14px #fff5f0); }
-  100% { scale: 1;    filter: var(--ftt-tag-shadow) brightness(1)   drop-shadow(0 0 0  transparent); }
+  0%   { scale: 1;    filter: brightness(1)   drop-shadow(0 0 0  transparent); }
+  25%  { scale: 1.14; filter: brightness(1.8) drop-shadow(0 0 14px #fff5f0); }
+  100% { scale: 1;    filter: brightness(1)   drop-shadow(0 0 0  transparent); }
+}
+
+/* --- Chip host ------------------------------------------------------------ */
+/* Wraps the chip-trigger and (when open) the dropdown so the dropdown can
+   anchor directly to the chip's edges, not the float wrapper's. Without
+   this, `top: 100%` lands at the wrapper bottom — which is the eyebrow for
+   `data-placement="bottom"` — and the menu drifts off the chip. */
+.ftt-chip-host {
+  position: relative;
+  display: inline-flex;
 }
 
 /* --- Dropdown menu -------------------------------------------------------- */
-/* Wrapper handles position/stacking only; surface lives on <MenuSelect> so
-   menuselect-* token edits reshape the in-flight UI (this is intentional). */
+/* The wrap handles position/stacking only; the surface lives on
+   <MenuSelect> so menuselect-* token edits reshape the in-flight UI. */
 .ftt-dropdown-wrap {
   position: absolute;
   top: calc(100% + 0.25rem);