@motion-proto/live-tokens 0.9.0 → 0.11.0

package/src/editor/ui/variantScales.ts

@@ -106,3 +106,37 @@ export const DIVIDER_HEIGHT: VariantScaleEntry = {
     { key: 'full', label: 'Full', value: '100%' },
   ],
 };
+
+/** Used by `*-duration` variables (CSS transition timing). Pulls keys directly
+ *  from the shared `--duration-*` scale in tokens.css — labels mirror the token
+ *  slugs so the picker reflects the utility token namespace, no synthetic names. */
+export const DURATION: VariantScaleEntry = {
+  varPrefix: '--duration-',
+  options: [
+    { key: '75',   label: '75',   value: '75ms' },
+    { key: '150',  label: '150',  value: '150ms' },
+    { key: '200',  label: '200',  value: '200ms' },
+    { key: '300',  label: '300',  value: '300ms' },
+    { key: '500',  label: '500',  value: '500ms' },
+    { key: '750',  label: '750',  value: '750ms' },
+    { key: '1000', label: '1000', value: '1000ms' },
+  ],
+};
+
+/** Used by `*-divider-inset` variables (margin-block trimmed off a stretched
+ *  divider). Labels describe the resulting divider, not the inset value: 0
+ *  inset = bar-height divider ("Full"); larger insets = shorter divider.
+ *  Replaces the percentage-height approach that collapsed to 0 in
+ *  auto-height flex parents. */
+export const DIVIDER_INSET: VariantScaleEntry = {
+  varPrefix: '--space-',
+  options: [
+    { key: '0', label: 'Full', value: '0px' },
+    { key: '2', label: 'Tall', value: '0.125rem' },
+    { key: '4', label: 'Large', value: '0.25rem' },
+    { key: '6', label: 'Medium', value: '0.375rem' },
+    { key: '8', label: 'Short', value: '0.5rem' },
+    { key: '12', label: 'XS', value: '0.75rem' },
+    { key: '16', label: 'Tiny', value: '1rem' },
+  ],
+};

package/src/system/components/Button.svelte

@@ -87,15 +87,9 @@
       --button-primary-hover-surface: var(--surface-brand-higher);
       --button-primary-hover-text: var(--text-primary);
       --button-primary-hover-border: var(--border-brand-strong);
-      --button-primary-hover-border-width: var(--border-width-1);
-      --button-primary-hover-radius: var(--radius-md);
-      --button-primary-hover-padding: var(--space-8);
       --button-primary-disabled-surface: var(--color-neutral-700);
       --button-primary-disabled-text: var(--text-tertiary);
       --button-primary-disabled-border: var(--border-neutral-faint);
-      --button-primary-disabled-border-width: var(--border-width-1);
-      --button-primary-disabled-radius: var(--radius-md);
-      --button-primary-disabled-padding: var(--space-8);
       --button-primary-icon-size: var(--icon-size-sm);
 
       /* Secondary */
@@ -112,15 +106,9 @@
       --button-secondary-hover-surface: var(--surface-neutral-higher);
       --button-secondary-hover-text: var(--text-primary);
       --button-secondary-hover-border: var(--border-neutral-strong);
-      --button-secondary-hover-border-width: var(--border-width-1);
-      --button-secondary-hover-radius: var(--radius-md);
-      --button-secondary-hover-padding: var(--space-8);
       --button-secondary-disabled-surface: var(--color-neutral-700);
       --button-secondary-disabled-text: var(--text-tertiary);
       --button-secondary-disabled-border: var(--border-neutral-faint);
-      --button-secondary-disabled-border-width: var(--border-width-1);
-      --button-secondary-disabled-radius: var(--radius-md);
-      --button-secondary-disabled-padding: var(--space-8);
       --button-secondary-icon-size: var(--icon-size-sm);
 
       /* Outline */
@@ -137,16 +125,10 @@
       --button-outline-hover-surface: var(--surface-neutral-lower);
       --button-outline-hover-text: var(--text-primary);
       --button-outline-hover-border: var(--border-neutral-strong);
-      --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);
-      --button-outline-disabled-border-width: var(--border-width-1);
-      --button-outline-disabled-radius: var(--radius-md);
-      --button-outline-disabled-padding: var(--space-8);
       --button-outline-icon-size: var(--icon-size-sm);
 
       /* Success */
@@ -163,15 +145,9 @@
       --button-success-hover-surface: var(--surface-success-higher);
       --button-success-hover-text: var(--text-primary);
       --button-success-hover-border: var(--border-success-strong);
-      --button-success-hover-border-width: var(--border-width-2);
-      --button-success-hover-radius: var(--radius-md);
-      --button-success-hover-padding: var(--space-8);
       --button-success-disabled-surface: var(--color-neutral-700);
       --button-success-disabled-text: var(--text-tertiary);
       --button-success-disabled-border: var(--border-neutral-faint);
-      --button-success-disabled-border-width: var(--border-width-2);
-      --button-success-disabled-radius: var(--radius-md);
-      --button-success-disabled-padding: var(--space-8);
       --button-success-icon-size: var(--icon-size-sm);
 
       /* Danger */
@@ -188,15 +164,9 @@
       --button-danger-hover-surface: var(--surface-danger-high);
       --button-danger-hover-text: var(--text-primary);
       --button-danger-hover-border: var(--border-danger-medium);
-      --button-danger-hover-border-width: var(--border-width-2);
-      --button-danger-hover-radius: var(--radius-md);
-      --button-danger-hover-padding: var(--space-8);
       --button-danger-disabled-surface: var(--color-neutral-700);
       --button-danger-disabled-text: var(--text-tertiary);
       --button-danger-disabled-border: var(--border-neutral-faint);
-      --button-danger-disabled-border-width: var(--border-width-2);
-      --button-danger-disabled-radius: var(--radius-md);
-      --button-danger-disabled-padding: var(--space-8);
       --button-danger-icon-size: var(--icon-size-sm);
 
       /* Warning */
@@ -213,16 +183,20 @@
       --button-warning-hover-surface: var(--surface-warning-high);
       --button-warning-hover-text: var(--text-primary);
       --button-warning-hover-border: var(--border-warning-medium);
-      --button-warning-hover-border-width: var(--border-width-2);
-      --button-warning-hover-radius: var(--radius-md);
-      --button-warning-hover-padding: var(--space-8);
       --button-warning-disabled-surface: var(--color-neutral-700);
       --button-warning-disabled-text: var(--text-tertiary);
       --button-warning-disabled-border: var(--border-neutral-faint);
-      --button-warning-disabled-border-width: var(--border-width-2);
-      --button-warning-disabled-radius: var(--radius-md);
-      --button-warning-disabled-padding: var(--space-8);
       --button-warning-icon-size: var(--icon-size-sm);
+
+      /* Small size — shared across all variants. The `.small` rule below reads
+         these tokens directly (no per-variant rebind needed, since small
+         currently looks the same regardless of variant). Per-side padding
+         overrides power split-padding edits at small. */
+      --button-small-padding: var(--space-6);
+      --button-small-text-font-size: var(--font-size-xs);
+      --button-small-text-font-weight: var(--font-weight-normal);
+      --button-small-text-line-height: var(--line-height-sm);
+      --button-small-icon-size: var(--font-size-xs);
    }
 
    .button {
@@ -298,9 +272,7 @@
          &:hover:not(:disabled),
          &.force-hover:not(:disabled) {
             background: var(--button-primary-hover-surface);
-            border: var(--button-primary-hover-border-width) solid var(--button-primary-hover-border);
-            border-radius: var(--button-primary-hover-radius);
-            @include themed-padding(--button-primary-hover-padding, $h: 2);
+            border-color: var(--button-primary-hover-border);
             color: var(--button-primary-hover-text);
          }
 
@@ -310,9 +282,7 @@
 
          &:disabled {
             background: var(--button-primary-disabled-surface);
-            border: var(--button-primary-disabled-border-width) solid var(--button-primary-disabled-border);
-            border-radius: var(--button-primary-disabled-radius);
-            @include themed-padding(--button-primary-disabled-padding, $h: 2);
+            border-color: var(--button-primary-disabled-border);
             color: var(--button-primary-disabled-text);
          }
       }
@@ -340,17 +310,13 @@
          &:hover:not(:disabled),
          &.force-hover:not(:disabled) {
             background: var(--button-secondary-hover-surface);
-            border: var(--button-secondary-hover-border-width) solid var(--button-secondary-hover-border);
-            border-radius: var(--button-secondary-hover-radius);
-            @include themed-padding(--button-secondary-hover-padding, $h: 2);
+            border-color: var(--button-secondary-hover-border);
             color: var(--button-secondary-hover-text);
          }
 
          &:disabled {
             background: var(--button-secondary-disabled-surface);
-            border: var(--button-secondary-disabled-border-width) solid var(--button-secondary-disabled-border);
-            border-radius: var(--button-secondary-disabled-radius);
-            @include themed-padding(--button-secondary-disabled-padding, $h: 2);
+            border-color: var(--button-secondary-disabled-border);
             color: var(--button-secondary-disabled-text);
          }
       }
@@ -378,9 +344,7 @@
          &:hover:not(:disabled),
          &.force-hover:not(:disabled) {
             background: var(--button-outline-hover-surface);
-            border: var(--button-outline-hover-border-width) solid var(--button-outline-hover-border);
-            border-radius: var(--button-outline-hover-radius);
-            @include themed-padding(--button-outline-hover-padding, $h: 2);
+            border-color: var(--button-outline-hover-border);
             color: var(--button-outline-hover-text);
          }
 
@@ -390,9 +354,7 @@
 
          &:disabled {
             background: var(--button-outline-disabled-surface);
-            border: var(--button-outline-disabled-border-width) solid var(--button-outline-disabled-border);
-            border-radius: var(--button-outline-disabled-radius);
-            @include themed-padding(--button-outline-disabled-padding, $h: 2);
+            border-color: var(--button-outline-disabled-border);
             color: var(--button-outline-disabled-text);
          }
       }
@@ -420,17 +382,13 @@
          &:hover:not(:disabled),
          &.force-hover:not(:disabled) {
             background: var(--button-success-hover-surface);
-            border: var(--button-success-hover-border-width) solid var(--button-success-hover-border);
-            border-radius: var(--button-success-hover-radius);
-            @include themed-padding(--button-success-hover-padding, $h: 2);
+            border-color: var(--button-success-hover-border);
             color: var(--button-success-hover-text);
          }
 
          &:disabled {
             background: var(--button-success-disabled-surface);
-            border: var(--button-success-disabled-border-width) solid var(--button-success-disabled-border);
-            border-radius: var(--button-success-disabled-radius);
-            @include themed-padding(--button-success-disabled-padding, $h: 2);
+            border-color: var(--button-success-disabled-border);
             color: var(--button-success-disabled-text);
          }
       }
@@ -458,17 +416,13 @@
          &:hover:not(:disabled),
          &.force-hover:not(:disabled) {
             background: var(--button-danger-hover-surface);
-            border: var(--button-danger-hover-border-width) solid var(--button-danger-hover-border);
-            border-radius: var(--button-danger-hover-radius);
-            @include themed-padding(--button-danger-hover-padding, $h: 2);
+            border-color: var(--button-danger-hover-border);
             color: var(--button-danger-hover-text);
          }
 
          &:disabled {
             background: var(--button-danger-disabled-surface);
-            border: var(--button-danger-disabled-border-width) solid var(--button-danger-disabled-border);
-            border-radius: var(--button-danger-disabled-radius);
-            @include themed-padding(--button-danger-disabled-padding, $h: 2);
+            border-color: var(--button-danger-disabled-border);
             color: var(--button-danger-disabled-text);
          }
       }
@@ -496,37 +450,32 @@
          &:hover:not(:disabled),
          &.force-hover:not(:disabled) {
             background: var(--button-warning-hover-surface);
-            border: var(--button-warning-hover-border-width) solid var(--button-warning-hover-border);
-            border-radius: var(--button-warning-hover-radius);
-            @include themed-padding(--button-warning-hover-padding, $h: 2);
+            border-color: var(--button-warning-hover-border);
             color: var(--button-warning-hover-text);
          }
 
          &:disabled {
             background: var(--button-warning-disabled-surface);
-            border: var(--button-warning-disabled-border-width) solid var(--button-warning-disabled-border);
-            border-radius: var(--button-warning-disabled-radius);
-            @include themed-padding(--button-warning-disabled-padding, $h: 2);
+            border-color: var(--button-warning-disabled-border);
             color: var(--button-warning-disabled-text);
          }
       }
 
-      // Small size modifier (applies to any variant).
-      // Declared after variants so equal-specificity rules win on source order;
-      // :hover/.force-hover/:disabled are listed so variant state-padding
-      // doesn't clobber .small in those states.
-      &.small,
-      &.small:hover:not(:disabled),
-      &.small.force-hover:not(:disabled),
-      &.small:disabled {
-         padding: var(--space-6) var(--space-12);
-         font-size: var(--font-size-xs);
-         font-weight: var(--font-weight-normal);
-         line-height: var(--line-height-sm);
+      // Small size modifier (applies to any variant). Variants only set padding
+      // once in their base rule and never override per-state, so a single
+      // selector here is enough — `.small` declared after the variant block
+      // wins on source order. themed-padding with $h: 2 mirrors the variant
+      // base rule; per-side `--button-small-padding-*` tokens (registered by
+      // the editor) feed split edits through the mixin.
+      &.small {
+         @include themed-padding(--button-small-padding, $h: 2);
+         font-size: var(--button-small-text-font-size);
+         font-weight: var(--button-small-text-font-weight);
+         line-height: var(--button-small-text-line-height);
       }
 
       &.small :global(i) {
-         font-size: var(--font-size-xs);
+         font-size: var(--button-small-icon-size);
          font-weight: var(--font-weight-semibold);
       }
 

package/src/system/components/Card.svelte

@@ -48,6 +48,7 @@
     --card-default-border-width: var(--border-width-1);
     --card-default-radius: var(--radius-lg);
     --card-default-header-padding: var(--space-16);
+    --card-default-header-gap: var(--space-8);
     --card-default-body-padding: var(--space-16);
     --card-default-shadow: var(--shadow-sm);
     --card-default-blur: var(--blur-none);
@@ -92,7 +93,7 @@
   .card-header {
     display: flex;
     align-items: center;
-    gap: var(--space-8);
+    gap: var(--card-default-header-gap);
     @include themed-padding(--card-default-header-padding);
     background: var(--card-default-header-surface);
   }

package/src/system/components/CollapsibleSection.svelte

@@ -5,7 +5,6 @@
       label: string;
       expanded?: boolean;
       href?: string | undefined;
-      active?: boolean;
       variant?: 'chromeless' | 'divider' | 'container';
       class?: string;
       /** Toggle callback. Preferred over `on:toggle` from 0.5.0 onward. */
@@ -18,7 +17,6 @@
       label,
       expanded = false,
       href = undefined,
-      active = false,
       variant = 'container',
       class: className = '',
       ontoggle,
@@ -35,18 +33,11 @@
       ontoggle?.();
       dispatch('toggle');
    }
-
-   function handleHeaderClick(e: MouseEvent) {
-      if (href && active) {
-         e.preventDefault();
-         fireToggle();
-      }
-   }
 </script>
 
 <section class="es-root variant-{variant} {className}">
    {#if href}
-      <a {href} class="section-header" class:expanded class:active onclick={handleHeaderClick}>
+      <a {href} class="section-header" class:expanded>
          <div class="section-toggle">
             <i class="fas fa-chevron-right toggle-icon"></i>
             <span class="section-label">{label}</span>
@@ -94,16 +85,6 @@
       --collapsiblesection-chromeless-hover-label-line-height: var(--line-height-md);
       --collapsiblesection-chromeless-hover-icon: var(--text-primary);
       --collapsiblesection-chromeless-hover-icon-size: var(--icon-size-xs);
-      /* Chromeless — active */
-      --collapsiblesection-chromeless-active-surface: var(--color-transparent);
-      --collapsiblesection-chromeless-active-padding: var(--space-4);
-      --collapsiblesection-chromeless-active-label: var(--text-primary);
-      --collapsiblesection-chromeless-active-label-font-family: var(--font-sans);
-      --collapsiblesection-chromeless-active-label-font-size: var(--font-size-md);
-      --collapsiblesection-chromeless-active-label-font-weight: var(--font-weight-normal);
-      --collapsiblesection-chromeless-active-label-line-height: var(--line-height-md);
-      --collapsiblesection-chromeless-active-icon: var(--text-muted);
-      --collapsiblesection-chromeless-active-icon-size: var(--icon-size-xs);
       /* Chromeless — expanded */
       --collapsiblesection-chromeless-expanded-padding: var(--space-4);
 
@@ -131,18 +112,6 @@
       --collapsiblesection-divider-hover-label-line-height: var(--line-height-md);
       --collapsiblesection-divider-hover-icon: var(--text-primary);
       --collapsiblesection-divider-hover-icon-size: var(--icon-size-xs);
-      /* Divider — active */
-      --collapsiblesection-divider-active-surface: var(--color-transparent);
-      --collapsiblesection-divider-active-border: var(--color-brand-400);
-      --collapsiblesection-divider-active-border-width: var(--border-width-1);
-      --collapsiblesection-divider-active-padding: var(--space-4);
-      --collapsiblesection-divider-active-label: var(--text-primary);
-      --collapsiblesection-divider-active-label-font-family: var(--font-sans);
-      --collapsiblesection-divider-active-label-font-size: var(--font-size-md);
-      --collapsiblesection-divider-active-label-font-weight: var(--font-weight-normal);
-      --collapsiblesection-divider-active-label-line-height: var(--line-height-md);
-      --collapsiblesection-divider-active-icon: var(--text-muted);
-      --collapsiblesection-divider-active-icon-size: var(--icon-size-xs);
       /* Divider — expanded */
       --collapsiblesection-divider-expanded-padding: var(--space-4);
 
@@ -170,16 +139,6 @@
       --collapsiblesection-container-hover-label-line-height: var(--line-height-md);
       --collapsiblesection-container-hover-icon: var(--text-muted);
       --collapsiblesection-container-hover-icon-size: var(--icon-size-xs);
-      /* Container — active header strip */
-      --collapsiblesection-container-active-surface: var(--surface-canvas-low);
-      --collapsiblesection-container-active-padding: var(--space-4);
-      --collapsiblesection-container-active-label: var(--text-primary);
-      --collapsiblesection-container-active-label-font-family: var(--font-sans);
-      --collapsiblesection-container-active-label-font-size: var(--font-size-md);
-      --collapsiblesection-container-active-label-font-weight: var(--font-weight-normal);
-      --collapsiblesection-container-active-label-line-height: var(--line-height-md);
-      --collapsiblesection-container-active-icon: var(--text-muted);
-      --collapsiblesection-container-active-icon-size: var(--icon-size-xs);
       /* Container — expanded content area */
       --collapsiblesection-container-expanded-surface: var(--surface-canvas-low);
       --collapsiblesection-container-expanded-padding: var(--space-4);
@@ -238,7 +197,6 @@
       > .section-header {
          @include header-paint(chromeless, default);
          &:hover { @include header-paint(chromeless, hover); }
-         &.active { @include header-paint(chromeless, active); }
       }
       &.force-hover > .section-header { @include header-paint(chromeless, hover); }
       > .section-content {
@@ -254,10 +212,6 @@
             @include header-paint(divider, hover);
             @include divider-bottom(hover);
          }
-         &.active {
-            @include header-paint(divider, active);
-            @include divider-bottom(active);
-         }
       }
       &.force-hover > .section-header {
          @include header-paint(divider, hover);
@@ -276,7 +230,6 @@
       > .section-header {
          @include header-paint(container, default);
          &:hover { @include header-paint(container, hover); }
-         &.active { @include header-paint(container, active); }
       }
       &.force-hover > .section-header { @include header-paint(container, hover); }
       > .section-content {