@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/styles/ui-editor.css

@@ -0,0 +1,126 @@
+/* Editor UI chrome — `--ui-*` tokens. Theme-immune; see CONVENTIONS.md. */
+
+.editor-page {
+  --ui-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --ui-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+  font-family: var(--ui-font-sans);
+}
+
+/* Override tokens.css's global :where(*) font-family. */
+.editor-page *:not([class*="fa-"]) {
+  font-family: inherit;
+}
+
+.editor-page {
+  /* Grayscale ramp — source of truth; lower number = darker. */
+  --ui-gray-50:  #050505;
+  --ui-gray-100: #0a0a0a;
+  --ui-gray-150: #0f0f0f;
+  --ui-gray-200: #141414;
+  --ui-gray-250: #1a1a1a;
+  --ui-gray-300: #212121;
+  --ui-gray-350: #292929;
+  --ui-gray-400: #333333;
+  --ui-gray-500: #4d4d4d;
+  --ui-gray-600: #666666;
+  --ui-gray-700: #808080;
+  --ui-gray-750: #999999;
+  --ui-gray-800: #bfbfbf;
+  --ui-gray-850: #c7c7c7;
+  --ui-gray-950: #f2f2f2;
+
+  --ui-text-primary:    #ffffff;
+  --ui-text-secondary:  var(--ui-gray-800);
+  --ui-text-tertiary:   var(--ui-gray-700);
+  --ui-text-muted:      var(--ui-gray-500);
+  --ui-text-disabled:   var(--ui-gray-400);
+  --ui-text-accent:     var(--ui-gray-950);
+  --ui-text-success:    var(--ui-gray-850);
+
+  /* Bright amber used for selection dots, focus halos, and "unsaved" / "dirty"
+     state indicators. Single token shared by all "this is the live thing"
+     surfaces so the editor speaks one selection language. */
+  --ui-highlight:       #ffac28;
+
+  /* Link-state signals — bar attached to a control's left edge when its value
+     is shared with siblings (active), popped off into the column gap when the
+     control has broken away from its sibling group (broken). */
+  --ui-link-active:       #6cd0c2;
+  --ui-link-broken:       #f0c34a;
+  --ui-link-broken-glow:  rgba(240, 195, 74, 0.28);
+
+  --ui-border-faint:    var(--ui-gray-400);
+  --ui-border-subtle:   var(--ui-gray-500);
+  --ui-border-default:  var(--ui-gray-600);
+  --ui-border-medium:   var(--ui-gray-700);
+  --ui-border-strong:   var(--ui-gray-800);
+
+  --ui-surface-lowest:  var(--ui-gray-50);
+  --ui-surface-lower:   var(--ui-gray-100);
+  --ui-surface-low:     var(--ui-gray-150);
+  --ui-surface:         var(--ui-gray-200);
+  --ui-surface-high:    var(--ui-gray-250);
+  --ui-surface-higher:  var(--ui-gray-300);
+  --ui-surface-highest: var(--ui-gray-350);
+
+  --ui-toggle:          var(--ui-gray-700);
+
+  --ui-hover-lowest:    #000000;
+  --ui-hover-low:       var(--ui-gray-100);
+  --ui-hover:           var(--ui-gray-150);
+  --ui-hover-high:      var(--ui-gray-250);
+
+  --ui-radius-none: 0;
+  --ui-radius-sm:   0.125rem;
+  --ui-radius-md:   0.25rem;
+  --ui-radius-lg:   0.375rem;
+  --ui-radius-xl:   0.5rem;
+  --ui-radius-2xl:  0.625rem;
+  --ui-radius-full: 9999px;
+
+  --ui-space-2:  0.125rem;
+  --ui-space-4:  0.25rem;
+  --ui-space-6:  0.375rem;
+  --ui-space-8:  0.5rem;
+  --ui-space-10: 0.625rem;
+  --ui-space-12: 0.75rem;
+  --ui-space-16: 1rem;
+  --ui-space-20: 1.25rem;
+  --ui-space-24: 1.5rem;
+  --ui-space-32: 2rem;
+  --ui-space-48: 3rem;
+
+  --ui-font-size-xs:  0.8125rem;  /* 13px */
+  --ui-font-size-sm:  0.875rem;   /* 14px */
+  --ui-font-size-md:  0.9375rem;  /* 15px */
+  --ui-font-size-lg:  1.0625rem;  /* 17px */
+  --ui-font-size-xl:  1.1875rem;  /* 19px */
+  --ui-font-size-2xl: 1.3125rem;  /* 21px */
+  --ui-font-size-3xl: 1.625rem;   /* 26px */
+  --ui-font-size-4xl: 2rem;       /* 32px */
+
+  --ui-font-weight-normal:    400;
+  --ui-font-weight-medium:    500;
+  --ui-font-weight-semibold:  600;
+  --ui-font-weight-bold:      700;
+
+  --ui-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.5);
+  --ui-shadow-md:      0 2px 6px rgba(0, 0, 0, 0.5);
+  --ui-shadow-lg:      0 4px 12px rgba(0, 0, 0, 0.6);
+  --ui-shadow-overlay: 0 10px 40px rgba(0, 0, 0, 0.7);
+
+  --ui-transition-fast: 120ms ease;
+  --ui-transition-base: 180ms ease;
+
+  --ui-line-height-normal:  1.25;
+  --ui-line-height-relaxed: 1.5;
+  --ui-opacity-disabled: 0.5;
+}
+
+/* Dev overlay tokens — scoped to .lt-app to reach chrome outside .editor-page. */
+.lt-app {
+  --ui-overlay-fill:   rgba(128, 128, 128, 0.06);
+  --ui-overlay-border: rgba(128, 128, 128, 0.32);
+  --ui-overlay-num:    rgba(128, 128, 128, 0.75);
+}

package/src/{showcase → ui}/BezierCurveEditor.svelte

@@ -413,7 +413,7 @@
   .curve-panel {
     display: flex;
     flex-direction: column;
-    gap: var(--space-4);
+    gap: var(--ui-space-4);
   }
 
   .curve-panel-header {
@@ -423,8 +423,8 @@
   }
 
   .curve-panel-label {
-    font-size: var(--font-md);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--ui-font-size-md);
+    font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-tertiary);
   }
 
@@ -439,7 +439,7 @@
     height: 100%;
     background: transparent;
     border: 1px solid var(--ui-border-subtle);
-    border-radius: var(--radius-sm);
+    border-radius: var(--ui-radius-sm);
     cursor: crosshair;
     display: block;
   }
@@ -549,28 +549,28 @@
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
-    gap: var(--space-2);
-    padding-top: var(--space-2);
+    gap: var(--ui-space-2);
+    padding-top: var(--ui-space-2);
   }
 
   .curve-toolbar-left {
     display: flex;
     align-items: center;
-    gap: var(--space-4);
+    gap: var(--ui-space-4);
     flex-wrap: wrap;
   }
 
   .curve-tool-btn {
     display: flex;
     align-items: center;
-    gap: var(--space-4);
-    padding: var(--space-2) var(--space-6);
+    gap: var(--ui-space-4);
+    padding: var(--ui-space-2) var(--ui-space-6);
     border: 1px solid var(--ui-border-subtle);
-    border-radius: var(--radius-sm);
+    border-radius: var(--ui-radius-sm);
     background: var(--ui-surface-lowest);
     cursor: pointer;
     color: var(--ui-text-muted);
-    font-size: var(--font-md);
+    font-size: var(--ui-font-size-md);
   }
 
   .curve-tool-btn:hover {
@@ -601,14 +601,14 @@
   }
 
   .curve-hint {
-    font-size: var(--font-md);
+    font-size: var(--ui-font-size-md);
     color: var(--ui-text-muted);
     opacity: 0.6;
   }
 
   .curve-templates {
     display: flex;
-    gap: var(--space-2);
+    gap: var(--ui-space-2);
   }
 
   .curve-template-btn {
@@ -619,7 +619,7 @@
     height: 1rem;
     padding: 0;
     border: 1px solid var(--ui-border-subtle);
-    border-radius: var(--radius-sm);
+    border-radius: var(--ui-radius-sm);
     background: var(--ui-surface-lowest);
     cursor: pointer;
   }

package/src/{showcase → ui}/ColorEditPanel.svelte

@@ -10,6 +10,12 @@
   export let onConfirm: () => void = () => {};
   export let onCancel: () => void = () => {};
   export let onRemoveOverride: () => void = () => {};
+  /**
+   * Optional pointerdown hook for slider drags — lets parents open a store
+   * transaction so the whole drag collapses to one undo step. If the parent
+   * doesn't route slider writes through the editor store, leave this unset.
+   */
+  export let onSliderStart: () => void = () => {};
 
   // Hue-chroma mode props (for neutral/gray base editing)
   export let mode: 'hsl' | 'hue-chroma' = 'hsl';
@@ -179,7 +185,7 @@
       <button class="hsl-hex" on:click={startHexEdit} title="Click to edit hex">{previewHex}</button>
     {/if}
     {#if mode === 'hue-chroma'}
-      <code class="hsl-values">oklch({PREVIEW_LIGHTNESS}, {chroma.toFixed(3)}, {hue})</code>
+      <code class="hsl-values">oklch({PREVIEW_LIGHTNESS}, {chroma.toFixed(3)}, {Math.round(hue)})</code>
     {:else}
       <code class="hsl-values">hsl({hsl[0]}, {hsl[1]}%, {hsl[2]}%)</code>
     {/if}
@@ -205,7 +211,7 @@
     {#if mode === 'hue-chroma'}
       <div class="hsl-slider-row">
         <span class="hsl-slider-label">H</span>
-        <div class="slider-track" style="background: {hueGradient}">
+        <div class="slider-track" style="background: {hueGradient}" on:pointerdown={onSliderStart}>
           <input type="range" min="0" max="360" value={hue}
             on:input={(e) => onHueChromaChange(+e.currentTarget.value, chroma)} />
         </div>
@@ -220,7 +226,7 @@
       </div>
       <div class="hsl-slider-row">
         <span class="hsl-slider-label">C</span>
-        <div class="slider-track" style="background: {chromaGradient}">
+        <div class="slider-track" style="background: {chromaGradient}" on:pointerdown={onSliderStart}>
           <input type="range" min="0" max={CHROMA_MAX} step="0.001" value={chroma}
             on:input={(e) => onHueChromaChange(hue, +e.currentTarget.value)} />
         </div>
@@ -237,7 +243,7 @@
     {:else}
       <div class="hsl-slider-row">
         <span class="hsl-slider-label">H</span>
-        <div class="slider-track" style="background: {hueGrad(hsl[1], hsl[2])}">
+        <div class="slider-track" style="background: {hueGrad(hsl[1], hsl[2])}" on:pointerdown={onSliderStart}>
           <input type="range" min="0" max="360" value={hsl[0]}
             on:input={(e) => updateHsl(0, +e.currentTarget.value)} />
         </div>
@@ -252,7 +258,7 @@
       </div>
       <div class="hsl-slider-row">
         <span class="hsl-slider-label">S</span>
-        <div class="slider-track" style="background: {satGrad(hsl[0], hsl[2])}">
+        <div class="slider-track" style="background: {satGrad(hsl[0], hsl[2])}" on:pointerdown={onSliderStart}>
           <input type="range" min="0" max="100" value={hsl[1]}
             on:input={(e) => updateHsl(1, +e.currentTarget.value)} />
         </div>
@@ -267,7 +273,7 @@
       </div>
       <div class="hsl-slider-row">
         <span class="hsl-slider-label">L</span>
-        <div class="slider-track" style="background: {lightGrad(hsl[0], hsl[1])}">
+        <div class="slider-track" style="background: {lightGrad(hsl[0], hsl[1])}" on:pointerdown={onSliderStart}>
           <input type="range" min="0" max="100" value={hsl[2]}
             on:input={(e) => updateHsl(2, +e.currentTarget.value)} />
         </div>
@@ -288,24 +294,24 @@
   .hsl-panel {
     display: flex;
     flex-direction: column;
-    gap: var(--space-12);
-    padding: var(--space-12);
+    gap: var(--ui-space-12);
+    padding: var(--ui-space-12);
     background: var(--ui-surface-lowest);
     border: 1px solid var(--ui-border-subtle);
-    border-radius: var(--radius-md);
+    border-radius: var(--ui-radius-md);
   }
 
   .hsl-panel-header {
     display: flex;
     align-items: center;
-    gap: var(--space-8);
+    gap: var(--ui-space-8);
     flex-wrap: wrap;
   }
 
   .hsl-preview {
     width: 1.5rem;
     height: 1.5rem;
-    border-radius: var(--radius-sm);
+    border-radius: var(--ui-radius-sm);
     border: 1px solid var(--ui-border-faint);
     flex-shrink: 0;
   }
@@ -318,11 +324,11 @@
     height: 1.5rem;
     padding: 0;
     border: 1px solid var(--ui-border-default);
-    border-radius: var(--radius-sm);
+    border-radius: var(--ui-radius-sm);
     background: var(--ui-hover);
     color: var(--ui-text-secondary);
     cursor: pointer;
-    font-size: var(--font-md);
+    font-size: var(--ui-font-size-md);
     flex-shrink: 0;
 
     &:hover {
@@ -333,21 +339,21 @@
   }
 
   .hsl-panel-title {
-    font-size: var(--font-md);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--ui-font-size-md);
+    font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-secondary);
   }
 
   .hsl-hex {
-    font-size: var(--font-md);
+    font-size: var(--ui-font-size-md);
     color: var(--ui-text-accent);
     font-family: var(--ui-font-mono);
     background: none;
     border: 1px solid transparent;
-    border-radius: var(--radius-sm);
-    padding: var(--space-2) var(--space-4);
+    border-radius: var(--ui-radius-sm);
+    padding: var(--ui-space-2) var(--ui-space-4);
     cursor: pointer;
-    transition: all var(--transition-fast);
+    transition: all var(--ui-transition-fast);
   }
 
   .hsl-hex:hover {
@@ -356,19 +362,19 @@
   }
 
   .hsl-hex-input {
-    font-size: var(--font-md);
+    font-size: var(--ui-font-size-md);
     color: var(--ui-text-accent);
     font-family: var(--ui-font-mono);
     background: var(--ui-surface-low);
     border: 1px solid var(--ui-border-strong);
-    border-radius: var(--radius-sm);
-    padding: var(--space-2) var(--space-4);
+    border-radius: var(--ui-radius-sm);
+    padding: var(--ui-space-2) var(--ui-space-4);
     width: 5.5rem;
     outline: none;
   }
 
   .hsl-values {
-    font-size: var(--font-md);
+    font-size: var(--ui-font-size-md);
     color: var(--ui-text-tertiary);
     font-family: var(--ui-font-mono);
   }
@@ -376,7 +382,7 @@
   .hsl-panel-actions {
     display: flex;
     align-items: center;
-    gap: var(--space-6);
+    gap: var(--ui-space-6);
     margin-left: auto;
     flex-wrap: wrap;
   }
@@ -384,18 +390,18 @@
   .hsl-sliders {
     display: flex;
     flex-direction: column;
-    gap: var(--space-6);
+    gap: var(--ui-space-6);
   }
 
   .hsl-slider-row {
     display: flex;
     align-items: center;
-    gap: var(--space-8);
+    gap: var(--ui-space-8);
   }
 
   .hsl-slider-label {
-    font-size: var(--font-md);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--ui-font-size-md);
+    font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-tertiary);
     width: 2.5rem;
     text-align: right;
@@ -405,7 +411,7 @@
   .slider-track {
     position: relative;
     height: 1.25rem;
-    border-radius: var(--radius-md);
+    border-radius: var(--ui-radius-md);
     border: 1px solid var(--ui-border-faint);
     flex: 1;
     min-width: 6rem;
@@ -421,14 +427,14 @@
     margin: 0;
     background: transparent;
     cursor: pointer;
-    border-radius: var(--radius-md);
+    border-radius: var(--ui-radius-md);
   }
 
   .slider-track input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     width: 0.5rem;
     height: 1.25rem;
-    border-radius: var(--radius-sm);
+    border-radius: var(--ui-radius-sm);
     background: white;
     border: 2px solid rgba(0, 0, 0, 0.3);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
@@ -438,7 +444,7 @@
   .slider-track input[type="range"]::-moz-range-thumb {
     width: 0.5rem;
     height: 1.25rem;
-    border-radius: var(--radius-sm);
+    border-radius: var(--ui-radius-sm);
     background: white;
     border: 2px solid rgba(0, 0, 0, 0.3);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
@@ -460,7 +466,7 @@
   }
 
   .hsl-slider-input {
-    font-size: var(--font-md);
+    font-size: var(--ui-font-size-md);
     color: var(--ui-text-primary);
     font-family: var(--ui-font-mono);
     width: 2.5rem;
@@ -468,8 +474,8 @@
     flex-shrink: 0;
     background: var(--ui-surface-lowest);
     border: 1px solid var(--ui-border-subtle);
-    border-radius: var(--radius-sm);
-    padding: var(--space-2) var(--space-4);
+    border-radius: var(--ui-radius-sm);
+    padding: var(--ui-space-2) var(--ui-space-4);
     -moz-appearance: textfield;
   }
 
@@ -489,7 +495,7 @@
   }
 
   .hsl-slider-unit {
-    font-size: var(--font-md);
+    font-size: var(--ui-font-size-md);
     color: var(--ui-text-muted);
     font-family: var(--ui-font-mono);
     width: 0.75rem;

package/src/ui/EditorViewSwitcher.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+  import { editorView } from '../lib/editorViewStore';
+  import { parentRoute } from '../lib/parentRouteStore';
+
+  export let condensed = false;
+
+  // On /components the host page is already the components editor — the
+  // overlay's components view would just stack on top of it, so disable the
+  // switch. The switcher renders inside the editor iframe, so we read the
+  // *parent* route, not this iframe's own route.
+  $: componentsDisabled = $parentRoute === '/components';
+
+  function set(v: 'tokens' | 'components') {
+    editorView.set(v);
+  }
+
+  function toggle() {
+    if (componentsDisabled) return;
+    editorView.update((v) => (v === 'tokens' ? 'components' : 'tokens'));
+  }
+</script>
+
+{#if condensed}
+  <button
+    type="button"
+    class="compact"
+    aria-label={$editorView === 'tokens' ? 'Switch to components' : 'Switch to tokens'}
+    title={$editorView === 'tokens' ? 'Tokens (click for components)' : 'Components (click for tokens)'}
+    on:click={toggle}
+  >
+    <i class="fas {$editorView === 'tokens' ? 'fa-palette' : 'fa-cubes'}"></i>
+  </button>
+{:else}
+  <div class="seg-group">
+    <span class="seg-label">Editor</span>
+    <div class="seg" role="tablist" aria-label="Editor view">
+      <button
+        type="button"
+        role="tab"
+        class="seg-btn"
+        class:active={$editorView === 'tokens'}
+        aria-selected={$editorView === 'tokens'}
+        on:click={() => set('tokens')}
+      >
+        <span class="radio" aria-hidden="true"></span>
+        <span>Tokens</span>
+      </button>
+      <button
+        type="button"
+        role="tab"
+        class="seg-btn"
+        class:active={$editorView === 'components'}
+        aria-selected={$editorView === 'components'}
+        disabled={componentsDisabled}
+        title={componentsDisabled ? 'Already viewing the Components page' : undefined}
+        on:click={() => set('components')}
+      >
+        <span class="radio" aria-hidden="true"></span>
+        <span>Components</span>
+      </button>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .seg-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+    margin: var(--ui-space-12) var(--ui-space-12) var(--ui-space-8);
+  }
+
+  .seg-label {
+    font-size: 10px;
+    font-weight: var(--ui-font-weight-semibold);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: #fff;
+    padding-left: var(--ui-space-2);
+  }
+
+  .seg {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 3px;
+    background: var(--ui-surface-low);
+    border: 1px solid var(--ui-border-faint);
+    border-radius: var(--ui-radius-lg);
+    /* Fill the sidebar's content area so the box width is fixed by the rail,
+       not by which label happens to be active. Buttons inherit this width via
+       the default `align-items: stretch` on the column flex. */
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .seg-btn {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--ui-space-8);
+    width: 100%;
+    height: 28px;
+    padding: 0 var(--ui-space-10);
+    background: none;
+    border: none;
+    border-radius: var(--ui-radius-md);
+    color: var(--ui-text-tertiary);
+    font-family: inherit;
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-weight-medium);
+    text-align: left;
+    box-sizing: border-box;
+    cursor: pointer;
+    transition: background var(--ui-transition-fast), color var(--ui-transition-fast);
+  }
+
+  .radio {
+    flex-shrink: 0;
+    width: 12px;
+    height: 12px;
+    border-radius: var(--ui-radius-full);
+    border: 1.5px solid var(--ui-text-tertiary);
+    background: transparent;
+    transition: border-color var(--ui-transition-fast), background var(--ui-transition-fast),
+      box-shadow var(--ui-transition-fast);
+  }
+
+  .seg-btn.active .radio {
+    border-color: var(--ui-text-primary);
+    /* Inner dot via inset shadow keeps the box-model identical to the inactive
+       ring — no border-thickness shift between states. */
+    box-shadow: inset 0 0 0 2.5px var(--ui-surface-high), inset 0 0 0 6px var(--ui-text-primary);
+  }
+
+  .seg-btn:hover:not(.active) .radio {
+    border-color: var(--ui-text-secondary);
+  }
+
+  .seg-btn:hover {
+    color: var(--ui-text-secondary);
+  }
+
+  .seg-btn.active {
+    background: var(--ui-surface-high);
+    color: var(--ui-text-primary);
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
+  }
+
+  .seg-btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  .seg-btn:disabled:hover {
+    color: var(--ui-text-tertiary);
+  }
+
+  .seg-btn:disabled:hover .radio {
+    border-color: var(--ui-text-tertiary);
+  }
+
+  .compact {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 36px;
+    margin: var(--ui-space-8) 0 var(--ui-space-4);
+    background: none;
+    border: none;
+    color: var(--ui-text-primary);
+    cursor: pointer;
+    transition: background var(--ui-transition-fast);
+  }
+
+  .compact:hover {
+    background: var(--ui-hover);
+  }
+</style>