@motion-proto/live-tokens 0.9.0 → 0.10.0

package/src/editor/core/themes/migrations/index.ts

@@ -45,6 +45,11 @@ import { componentMigration_2026_05_19_sectiondividerRichGradient } from './2026
 import { componentMigration_2026_05_20_sectiondividerSlimVariants } from './2026-05-20-sectiondivider-slim-variants';
 import { componentMigration_2026_05_21_sectiondividerSpacingToPadding } from './2026-05-21-sectiondivider-spacing-to-padding';
 import { componentMigration_2026_05_22_sectiondividerIntrinsicsToCss } from './2026-05-22-sectiondivider-intrinsics-to-css';
+import { componentMigration_2026_05_24_segmentedcontrolDividerInset } from './2026-05-24-segmentedcontrol-divider-inset';
+import { componentMigration_2026_05_24_promoteStateSharedTokens } from './2026-05-24-promote-state-shared-tokens';
+import { componentMigration_2026_05_24_progressbarCollapseVariants } from './2026-05-24-progressbar-collapse-variants';
+import { componentMigration_2026_05_24_collapsiblesectionDropActiveState } from './2026-05-24-collapsiblesection-drop-active-state';
+import { componentMigration_2026_05_25_cornerbadgeFlattenVariants } from './2026-05-25-cornerbadge-flatten-variants';
 
 /**
  * Registered migrations. Order in this array does not matter — the runner
@@ -64,6 +69,11 @@ export const MIGRATIONS: Migration[] = [
   componentMigration_2026_05_20_sectiondividerSlimVariants,
   componentMigration_2026_05_21_sectiondividerSpacingToPadding,
   componentMigration_2026_05_22_sectiondividerIntrinsicsToCss,
+  componentMigration_2026_05_24_segmentedcontrolDividerInset,
+  componentMigration_2026_05_24_promoteStateSharedTokens,
+  componentMigration_2026_05_24_progressbarCollapseVariants,
+  componentMigration_2026_05_24_collapsiblesectionDropActiveState,
+  componentMigration_2026_05_25_cornerbadgeFlattenVariants,
 ];
 
 function countFor(kind: 'theme' | 'component-config'): number {

package/src/editor/core/themes/themeInit.ts

@@ -5,6 +5,7 @@ import { applyFontSources, applyFontStacks } from '../fonts/fontLoader';
 import { loadFromFile, seedComponentsFromApi } from '../store/editorStore';
 import { getActiveComponentConfig } from '../components/componentConfigService';
 import { safeFetch } from '../storage/storage';
+import { API_BASE } from '../storage/apiBase';
 
 interface ComponentSummaryDto {
   name: string;
@@ -34,7 +35,7 @@ interface ListComponentsDto {
  * `safeFetch` (instead of empty try/catch) to make the silence intentional.
  */
 export async function initializeTheme(): Promise<void> {
-  const theme = await safeFetch<Theme>('/api/themes/active');
+  const theme = await safeFetch<Theme>(`${API_BASE}/themes/active`);
   if (theme) {
     migrateThemeFonts(theme);
     loadFromFile(theme);
@@ -48,7 +49,7 @@ export async function initializeTheme(): Promise<void> {
     activeFileName.set(fileName);
   }
 
-  const list = await safeFetch<ListComponentsDto>('/api/component-configs');
+  const list = await safeFetch<ListComponentsDto>(`${API_BASE}/component-configs`);
   if (list && Array.isArray(list.components)) {
     const configs: Record<
       string,

package/src/editor/core/themes/themeService.ts

@@ -5,6 +5,7 @@ import {
   versionedFileResource,
   sanitizeFileName as sanitizeFileNameImpl,
 } from '../storage/files/versionedFileResourceClient';
+import { API_BASE } from '../storage/apiBase';
 import { loadFromFile as loadEditorState, toTheme, markSaved } from '../store/editorStore';
 import { activeFileName } from '../store/editorConfigStore';
 import { applyFontSources, applyFontStacks } from '../fonts/fontLoader';
@@ -12,7 +13,7 @@ import { migrateThemeFonts } from '../fonts/fontMigration';
 
 // ── API helpers ──────────────────────────────────────────────
 //
-// All theme CRUD goes through `versionedFileResource('/api/themes')` —
+// All theme CRUD goes through `versionedFileResource(`${API_BASE}/themes`)` —
 // shared with `componentConfigService`'s per-component clients. Theme-specific
 // response shapes (ThemeMeta list payload, ProductionInfo) are layered on top
 // via the generic type parameters.
@@ -25,7 +26,7 @@ export interface ProductionInfo {
 }
 
 const themeResource = versionedFileResource<Theme, ThemeMeta, ProductionInfo>({
-  baseUrl: '/api/themes',
+  baseUrl: `${API_BASE}/themes`,
 });
 
 export async function listThemes(): Promise<ThemeMeta[]> {

package/src/editor/ui/UIEasingSelector.svelte

@@ -0,0 +1,240 @@
+<script lang="ts">
+  import { resolveAliasChain } from '../core/palettes/tokenRegistry';
+  import UITokenSelector from './UITokenSelector.svelte';
+  import UIOptionList from './UIOptionList.svelte';
+  import UIOptionItem from './UIOptionItem.svelte';
+
+  interface Props {
+    variable: string;
+    component?: string | undefined;
+    canBeLinked?: boolean;
+    disabled?: boolean;
+    selectionsLocked?: boolean;
+    onchange?: () => void;
+  }
+
+  let {
+    variable,
+    component = undefined,
+    canBeLinked = false,
+    disabled = false,
+    selectionsLocked = false,
+    onchange,
+  }: Props = $props();
+
+  /** Family list mirrors easings.net's catalog. `linear` is the special-case
+      curve with no variant; all others take in/out/in-out. Keys are the suffix
+      portion of the corresponding `--ease-*` token name. */
+  const FAMILIES = [
+    { key: 'linear', label: 'Linear' },
+    { key: 'sine',    label: 'Sine' },
+    { key: 'quad',    label: 'Quad' },
+    { key: 'cubic',   label: 'Cubic' },
+    { key: 'quart',   label: 'Quart' },
+    { key: 'quint',   label: 'Quint' },
+    { key: 'expo',    label: 'Expo' },
+    { key: 'circ',    label: 'Circ' },
+    { key: 'back',    label: 'Back' },
+    { key: 'elastic', label: 'Elastic' },
+    { key: 'bounce',  label: 'Bounce' },
+  ] as const;
+  type FamilyKey = typeof FAMILIES[number]['key'];
+
+  const VARIANTS = [
+    { key: 'in',     label: 'In' },
+    { key: 'out',    label: 'Out' },
+    { key: 'in-out', label: 'In-Out' },
+  ] as const;
+  type VariantKey = typeof VARIANTS[number]['key'];
+
+  const FAMILY_KEYS = new Set<string>(FAMILIES.map((f) => f.key));
+  const VARIANT_KEYS = new Set<string>(VARIANTS.map((v) => v.key));
+
+  let selector: UITokenSelector;
+  let chosenFamily: FamilyKey | null = $state(null);
+  let chosenVariant: VariantKey | null = $state(null);
+  let currentValue: string = $state('');
+
+  /** Parse `--ease-linear` or `--ease-<variant>-<family>` into its parts.
+      Returns nulls when the name doesn't match the ease-token convention. */
+  function parseEaseToken(varName: string): { family: FamilyKey | null; variant: VariantKey | null } {
+    if (varName === '--ease-linear') return { family: 'linear', variant: null };
+    const m = varName.match(/^--ease-(in-out|in|out)-([a-z]+)$/);
+    if (!m) return { family: null, variant: null };
+    const variant = m[1] as VariantKey;
+    const family = m[2] as FamilyKey;
+    if (!FAMILY_KEYS.has(family) || family === 'linear') return { family: null, variant: null };
+    if (!VARIANT_KEYS.has(variant)) return { family: null, variant: null };
+    return { family, variant };
+  }
+
+  function buildEaseToken(family: FamilyKey, variant: VariantKey | null): string | null {
+    if (family === 'linear') return '--ease-linear';
+    if (!variant) return null;
+    return `--ease-${variant}-${family}`;
+  }
+
+  /** Pull the var() reference out of `var(--ease-...)`, returns the inner name. */
+  function parseRef(raw: string): string | null {
+    const m = raw.match(/var\((--ease-[a-z-]+)\)/);
+    return m ? m[1] : null;
+  }
+
+  function readResolved() {
+    currentValue = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+  }
+
+  function initFromCurrent() {
+    readResolved();
+    const raw = document.documentElement.style.getPropertyValue(variable).trim();
+    if (raw) {
+      const inner = parseRef(raw);
+      if (inner) {
+        const parts = parseEaseToken(inner);
+        chosenFamily = parts.family;
+        chosenVariant = parts.variant;
+        return;
+      }
+    }
+    for (const alias of resolveAliasChain(variable)) {
+      const parts = parseEaseToken(alias);
+      if (parts.family) {
+        chosenFamily = parts.family;
+        chosenVariant = parts.variant;
+        return;
+      }
+    }
+    chosenFamily = null;
+    chosenVariant = null;
+  }
+
+  function handleReset() {
+    chosenFamily = null;
+    chosenVariant = null;
+    readResolved();
+    onchange?.();
+  }
+
+  /** Commit (family, variant) — writes the override if both halves are valid;
+      for non-linear families without a variant yet, defaults to `out`. Closes
+      the dropdown only when a full token name was produced. */
+  function commit(family: FamilyKey, variant: VariantKey | null, close: () => void): void {
+    let v = variant;
+    if (family !== 'linear' && !v) v = 'out';
+    const target = buildEaseToken(family, v);
+    if (!target) return;
+    if (target === variable) {
+      selector.writeOverride(null);
+    } else {
+      selector.writeOverride(target);
+    }
+    chosenFamily = family;
+    chosenVariant = family === 'linear' ? null : v;
+    readResolved();
+    close();
+    onchange?.();
+  }
+
+  function selectFamily(key: FamilyKey, close: () => void) {
+    commit(key, chosenVariant, close);
+  }
+  function selectVariant(key: VariantKey, close: () => void) {
+    if (!chosenFamily || chosenFamily === 'linear') return;
+    commit(chosenFamily, key, close);
+  }
+
+  let lastSeenVariable: string | null = null;
+  $effect(() => {
+    if (variable !== lastSeenVariable) {
+      lastSeenVariable = variable;
+      initFromCurrent();
+    }
+  });
+
+  let familyLabel = $derived(FAMILIES.find((f) => f.key === chosenFamily)?.label ?? '');
+  let variantLabel = $derived(VARIANTS.find((v) => v.key === chosenVariant)?.label ?? '');
+  let triggerTitleText = $derived(
+    chosenFamily === 'linear'
+      ? 'Linear'
+      : chosenFamily && chosenVariant
+      ? `${variantLabel} ${familyLabel}`
+      : chosenFamily
+      ? `${familyLabel} —`
+      : '',
+  );
+</script>
+
+<UITokenSelector
+  bind:this={selector}
+  {variable}
+  {component}
+  {canBeLinked}
+  {disabled}
+  {selectionsLocked}
+  dropdownMinWidth="18rem"
+  onreset={handleReset}
+  onvarChange={initFromCurrent}
+>
+  {#snippet triggerTitle()}{triggerTitleText}{/snippet}
+  {#snippet triggerMeta()}{currentValue || '—'}{/snippet}
+
+  {#snippet children({ close })}
+    <div class="ease-grid" class:no-variants={chosenFamily === 'linear'}>
+      <div class="ease-col">
+        <span class="ease-col-label">Curve</span>
+        <UIOptionList>
+          {#each FAMILIES as fam (fam.key)}
+            <UIOptionItem
+              active={chosenFamily === fam.key}
+              onclick={() => selectFamily(fam.key, close)}
+            >
+              {#snippet label()}{fam.label}{/snippet}
+            </UIOptionItem>
+          {/each}
+        </UIOptionList>
+      </div>
+      {#if chosenFamily && chosenFamily !== 'linear'}
+        <div class="ease-col">
+          <span class="ease-col-label">Variant</span>
+          <UIOptionList>
+            {#each VARIANTS as v (v.key)}
+              <UIOptionItem
+                active={chosenVariant === v.key}
+                onclick={() => selectVariant(v.key, close)}
+              >
+                {#snippet label()}{v.label}{/snippet}
+              </UIOptionItem>
+            {/each}
+          </UIOptionList>
+        </div>
+      {/if}
+    </div>
+  {/snippet}
+</UITokenSelector>
+
+<style>
+  .ease-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--ui-space-8);
+    min-width: 18rem;
+  }
+  .ease-grid.no-variants {
+    grid-template-columns: 1fr;
+  }
+  .ease-col {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+    min-width: 0;
+  }
+  .ease-col-label {
+    padding: var(--ui-space-4) var(--ui-space-8) 0;
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-tertiary);
+    font-family: var(--ui-font-mono);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+</style>

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