@motion-proto/live-tokens 0.6.2 → 0.8.0

package/src/{styles → editor/styles}/ui-editor.css

@@ -1,4 +1,4 @@
-/* Editor UI chrome — `--ui-*` tokens. Theme-immune; see CONVENTIONS.md. */
+/* `--ui-*` tokens, theme-immune. See CONVENTIONS.md. */
 
 .editor-page {
   --ui-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -13,7 +13,7 @@
 }
 
 .editor-page {
-  /* Grayscale ramp — source of truth; lower number = darker. */
+  /* Grayscale ramp; lower number = darker. */
   --ui-gray-50:  #050505;
   --ui-gray-100: #0a0a0a;
   --ui-gray-150: #0f0f0f;
@@ -38,23 +38,19 @@
   --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. */
+  /* Shared "this is live" amber: selection, focus, dirty state. */
   --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). */
+  /* Link-state bar: active = attached to control edge, broken = popped into column gap. */
   --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-border-low:    var(--ui-gray-400);
+  --ui-border-low:      var(--ui-gray-500);
+  --ui-border:          var(--ui-gray-600);
+  --ui-border-high:     var(--ui-gray-700);
+  --ui-border-higher:   var(--ui-gray-800);
 
   --ui-surface-lowest:  var(--ui-gray-50);
   --ui-surface-lower:   var(--ui-gray-100);
@@ -91,15 +87,16 @@
   --ui-space-32: 2rem;
   --ui-space-48: 3rem;
 
-  --ui-font-size-xs:  0.8125rem;  /* 13px */
+  --ui-font-size-xs:  0.75rem;    /* 12px */
   --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-size-md:  1rem;       /* 16px — base */
+  --ui-font-size-lg:  1.125rem;   /* 18px */
+  --ui-font-size-xl:  1.25rem;    /* 20px */
+  --ui-font-size-2xl: 1.5rem;     /* 24px */
+  --ui-font-size-3xl: 1.75rem;    /* 28px */
+  --ui-font-size-4xl: 2.25rem;    /* 36px */
+
+  --ui-font-weight-light:     200;
   --ui-font-weight-normal:    400;
   --ui-font-weight-medium:    500;
   --ui-font-weight-semibold:  600;
@@ -118,9 +115,33 @@
   --ui-opacity-disabled: 0.5;
 }
 
-/* Dev overlay tokens — scoped to .lt-app to reach chrome outside .editor-page. */
+/* Dev overlay tokens, scoped to .lt-app for 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);
 }
+
+/* Section primitives: shared chrome for "named section in a bordered card". Body layout stays per-call-site. */
+.editor-section-card {
+  display: flex;
+  flex-direction: column;
+  padding: var(--ui-space-20);
+  background: var(--ui-surface-low);
+  border: 1px solid var(--ui-border-low);
+  border-radius: var(--ui-radius-md);
+}
+
+.editor-section-title {
+  margin: 0;
+  font-size: var(--ui-font-size-xl);
+  font-weight: var(--ui-font-weight-semibold);
+  color: var(--ui-text-primary);
+}
+
+.editor-subsection-title {
+  margin: 0;
+  font-size: var(--ui-font-size-lg);
+  font-weight: var(--ui-font-weight-semibold);
+  color: var(--ui-text-primary);
+}

package/src/{styles → editor/styles}/ui-form-controls.css

@@ -59,11 +59,12 @@
 .ui-form-select {
   /* No vertical padding - let min-height and line-height center text naturally */
   padding: 0 var(--ui-space-16);
+  padding-right: var(--ui-space-32);
   min-height: 2.375rem;  /* ~38px to match button height */
-  background: var(--ui-surface-lowest) !important;
-  border: 1px solid var(--ui-border-default) !important;
+  background-color: var(--ui-surface-lowest);
+  border: 1px solid var(--ui-border);
   border-radius: var(--ui-radius-md);
-  color: var(--ui-text-primary) !important;
+  color: var(--ui-text-primary);
   font-family: var(--ui-font-sans);
   font-size: var(--ui-font-size-md);
   font-weight: var(--ui-font-weight-normal);
@@ -71,28 +72,26 @@
   vertical-align: middle;
   cursor: pointer;
   transition: all var(--ui-transition-fast);
-  /* Prevent clipping */
-  overflow: visible !important;
-  box-sizing: border-box !important;
+  overflow: visible;
+  box-sizing: border-box;
   /* Reset browser defaults */
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   /* Custom dropdown arrow */
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
-  background-repeat: no-repeat !important;
-  background-position: right var(--ui-space-12) center !important;
-  padding-right: var(--ui-space-32) !important;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--ui-space-12) center;
 }
 
 .ui-form-select:hover:not(:disabled) {
-  background-color: var(--ui-surface-low) !important;
-  border-color: var(--ui-border-medium) !important;
+  background-color: var(--ui-surface-low);
+  border-color: var(--ui-border-high);
 }
 
 .ui-form-select:focus {
   outline: none;
-  border-color: var(--ui-border-strong) !important;
+  border-color: var(--ui-border-higher);
   box-shadow: 0 0 0 2px hsla(0, 58%, 50%, 0.2);
 }
 
@@ -102,13 +101,13 @@
 }
 
 .ui-form-select:active:not(:disabled) {
-  background-color: var(--ui-surface) !important;
+  background-color: var(--ui-surface);
 }
 
 .ui-form-select:disabled {
-  background-color: var(--ui-surface-lowest) !important;
-  border-color: var(--ui-border-faint) !important;
-  color: var(--ui-text-disabled) !important;
+  background-color: var(--ui-surface-lowest);
+  border-color: var(--ui-border-low);
+  color: var(--ui-text-disabled);
   cursor: not-allowed;
 }
 
@@ -116,8 +115,8 @@
 /* Note: Most option styling is controlled by browser/OS and cannot be fully overridden */
 /* These styles apply where browsers allow (limited support in Chrome/Firefox) */
 .ui-form-select option {
-  background-color: var(--ui-surface-lowest) !important;
-  color: var(--ui-text-primary) !important;
+  background-color: var(--ui-surface-lowest);
+  color: var(--ui-text-primary);
   padding: var(--ui-space-8) var(--ui-space-12);
   min-height: 2rem;
   font-size: var(--ui-font-size-md);
@@ -127,14 +126,14 @@
 
 /* Disabled options */
 .ui-form-select option:disabled {
-  color: var(--ui-text-disabled) !important;
+  color: var(--ui-text-disabled);
 }
 
 /* Input Field Styling */
 .ui-form-input {
   padding: var(--ui-space-8);
   background: var(--ui-surface-lowest);
-  border: 1px solid var(--ui-border-default);
+  border: 1px solid var(--ui-border);
   border-radius: var(--ui-radius-md);
   color: var(--ui-text-primary);
   font-family: var(--ui-font-sans);
@@ -143,19 +142,19 @@
 }
 
 .ui-form-input:hover:not(:disabled) {
-  border-color: var(--ui-border-strong);
+  border-color: var(--ui-border-higher);
   background: var(--ui-surface-low);
 }
 
 .ui-form-input:focus {
   outline: none;
-  border-color: var(--ui-border-strong);
+  border-color: var(--ui-border-higher);
   box-shadow: 0 0 0 3px hsla(240, 5%, 38%, 0.2);
 }
 
 .ui-form-input:disabled {
   background: var(--ui-surface-lowest);
-  border-color: var(--ui-border-faint);
+  border-color: var(--ui-border-low);
   color: var(--ui-text-disabled);
   cursor: not-allowed;
 }

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

@@ -8,6 +8,7 @@
     evalBezier, buildCurvePath, curveTemplates,
     serializeCurve, deserializeCurve,
   } from './curveEngine';
+  import UIPillButton from './UIPillButton.svelte';
 
   interface Props {
     anchors: CurveAnchor[];
@@ -257,8 +258,31 @@
 <div class="curve-panel">
   <div class="curve-panel-header">
     <span class="curve-panel-label">{cfg.label}</span>
+    <div class="curve-help">
+      <button class="curve-help-badge" type="button" aria-label="Curve editor help">
+        <i class="fas fa-circle-info" aria-hidden="true"></i>
+      </button>
+      <div class="curve-help-popover" role="tooltip">
+        <div><strong>Click</strong> path to add a point</div>
+        <div><strong>&#x2325; Click</strong> a point to remove</div>
+        <div><strong>Double-click</strong> a point to toggle smooth/corner</div>
+      </div>
+    </div>
   </div>
-  <div class="curve-container" style="padding-inline: calc(50% / {stepCount})">
+  <div class="curve-container">
+    <div class="curve-chart-overlay">
+      <UIPillButton
+        size="compact"
+        variant={shiftActive ? 'default' : 'outline'}
+        title="Vertical offset"
+        onclick={() => shiftActive = !shiftActive}
+      >
+        <svg viewBox="0 0 12 20" class="curve-tool-icon">
+          <path d="M6,2 L10,7 L7,7 L7,13 L10,13 L6,18 L2,13 L5,13 L5,7 L2,7 Z" />
+        </svg>
+        <span>Offset{offset !== 0 ? ` ${offset > 0 ? '+' : ''}${offset}` : ''}</span>
+      </UIPillButton>
+    </div>
     <svg
       bind:this={svgEl}
       class="curve-svg"
@@ -383,22 +407,9 @@
     </svg>
   </div>
   <div class="curve-toolbar">
-    <div class="curve-toolbar-left">
-      <button
-        class="curve-tool-btn"
-        class:active={shiftActive}
-        type="button"
-        title="Vertical offset"
-        onclick={() => shiftActive = !shiftActive}
-      >
-        <svg viewBox="0 0 12 20" class="curve-tool-icon">
-          <path d="M6,2 L10,7 L7,7 L7,13 L10,13 L6,18 L2,13 L5,13 L5,7 L2,7 Z" />
-        </svg>
-        <span>Offset{offset !== 0 ? ` ${offset > 0 ? '+' : ''}${offset}` : ''}</span>
-      </button>
-      <span class="curve-hint">&x2325;-click to remove point</span>
-      <button class="curve-tool-btn" type="button" title="Copy curve" onclick={copyToClipboard}>Copy</button>
-      <button class="curve-tool-btn" type="button" title="Paste curve" onclick={pasteFromClipboard}>Paste</button>
+    <div class="curve-toolbar-group">
+      <UIPillButton size="compact" variant="outline" title="Copy curve" onclick={copyToClipboard}>Copy</UIPillButton>
+      <UIPillButton size="compact" variant="outline" title="Paste curve" onclick={pasteFromClipboard}>Paste</UIPillButton>
     </div>
     <div class="curve-templates">
       {#each curveTemplates as tpl}
@@ -413,13 +424,12 @@
           </svg>
         </button>
       {/each}
+    </div>
+    <div class="curve-toolbar-group">
       {#if defaultAnchors}
-        <button
-          class="curve-tool-btn"
-          type="button"
-          title="Reset to default"
-          onclick={resetToDefault}
-        >Reset</button>
+        <UIPillButton size="compact" variant="outline" title="Reset to default" onclick={resetToDefault}>
+          Reset
+        </UIPillButton>
       {/if}
     </div>
   </div>
@@ -435,7 +445,7 @@
   .curve-panel-header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    gap: var(--ui-space-6);
   }
 
   .curve-panel-label {
@@ -445,16 +455,94 @@
   }
 
   .curve-container {
+    position: relative;
     width: 100%;
     height: 250px;
     box-sizing: border-box;
   }
 
+  .curve-chart-overlay {
+    position: absolute;
+    inset: var(--ui-space-8);
+    display: flex;
+    align-items: flex-end;
+    pointer-events: none;
+  }
+
+  .curve-chart-overlay > :global(*) {
+    pointer-events: auto;
+  }
+
+  .curve-help {
+    position: relative;
+    margin-left: auto;
+  }
+
+  .curve-help-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--ui-text-muted);
+    cursor: help;
+    border-radius: var(--ui-radius-full);
+    transition: color var(--ui-transition-fast, 120ms ease);
+  }
+
+  .curve-help-badge:hover,
+  .curve-help-badge:focus-visible {
+    color: var(--ui-text-primary);
+    outline: none;
+  }
+
+  .curve-help-badge i {
+    font-size: var(--ui-font-size-md);
+  }
+
+  .curve-help-popover {
+    position: absolute;
+    top: calc(100% + var(--ui-space-4));
+    right: 0;
+    display: grid;
+    gap: var(--ui-space-4);
+    min-width: 14rem;
+    padding: var(--ui-space-8) var(--ui-space-12);
+    background: var(--ui-surface-highest);
+    border: 1px solid var(--ui-border-low);
+    border-radius: var(--ui-radius-sm);
+    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-sm);
+    line-height: 1.4;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    opacity: 0;
+    transform: translateY(-2px);
+    pointer-events: none;
+    transition:
+      opacity var(--ui-transition-fast, 120ms ease),
+      transform var(--ui-transition-fast, 120ms ease);
+    z-index: 2;
+  }
+
+  .curve-help-popover strong {
+    color: var(--ui-text-primary);
+    font-weight: var(--ui-font-weight-medium);
+  }
+
+  .curve-help:hover .curve-help-popover,
+  .curve-help:focus-within .curve-help-popover {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
   .curve-svg {
     width: 100%;
     height: 100%;
     background: transparent;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     cursor: crosshair;
     display: block;
@@ -467,7 +555,7 @@
   }
 
   .curve-grid {
-    stroke: var(--ui-border-faint);
+    stroke: var(--ui-border-low);
     stroke-width: 0.5;
     vector-effect: non-scaling-stroke;
   }
@@ -477,7 +565,7 @@
   }
 
   .curve-step-line {
-    stroke: var(--ui-border-faint);
+    stroke: var(--ui-border-low);
     stroke-width: 0.5;
     vector-effect: non-scaling-stroke;
 
@@ -565,48 +653,17 @@
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
-    gap: var(--ui-space-2);
+    gap: var(--ui-space-8);
     padding-top: var(--ui-space-2);
   }
 
-  .curve-toolbar-left {
+  .curve-toolbar-group {
     display: flex;
     align-items: center;
     gap: var(--ui-space-4);
     flex-wrap: wrap;
   }
 
-  .curve-tool-btn {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-space-4);
-    padding: var(--ui-space-2) var(--ui-space-6);
-    border: 1px solid var(--ui-border-subtle);
-    border-radius: var(--ui-radius-sm);
-    background: var(--ui-surface-lowest);
-    cursor: pointer;
-    color: var(--ui-text-muted);
-    font-size: var(--ui-font-size-md);
-  }
-
-  .curve-tool-btn:hover {
-    border-color: var(--ui-border-medium);
-    color: var(--ui-text-secondary);
-    background: var(--ui-surface-high);
-  }
-
-  .curve-tool-btn.active {
-    border-color: var(--ui-border-medium);
-    background: var(--ui-surface-highest);
-    color: var(--ui-text-primary);
-  }
-
-  .curve-tool-btn:disabled {
-    opacity: 0.35;
-    cursor: default;
-    pointer-events: none;
-  }
-
   .curve-tool-icon {
     width: 0.625rem;
     height: 1rem;
@@ -616,12 +673,6 @@
     fill: currentColor;
   }
 
-  .curve-hint {
-    font-size: var(--ui-font-size-md);
-    color: var(--ui-text-muted);
-    opacity: 0.6;
-  }
-
   .curve-templates {
     display: flex;
     gap: var(--ui-space-2);
@@ -634,14 +685,14 @@
     width: 1.5rem;
     height: 1rem;
     padding: 0;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     background: var(--ui-surface-lowest);
     cursor: pointer;
   }
 
   .curve-template-btn:hover {
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
     background: var(--ui-surface-high);
   }
 

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { hexToOklch, oklchToHex, gamutClamp } from '../lib/oklch';
-  import InlineEditActions from '../components/InlineEditActions.svelte';
-  import Button from '../components/Button.svelte';
+  import { hexToOklch, oklchToHex, gamutClamp } from '../core/palettes/oklch';
+  import InlineEditActions from '../../system/components/InlineEditActions.svelte';
+  import Button from '../../system/components/Button.svelte';
 
   
 
@@ -323,7 +323,7 @@
     gap: var(--ui-space-12);
     padding: var(--ui-space-12);
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
   }
 
@@ -338,7 +338,7 @@
     width: 1.5rem;
     height: 1.5rem;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
     flex-shrink: 0;
   }
 
@@ -349,7 +349,7 @@
     width: 1.5rem;
     height: 1.5rem;
     padding: 0;
-    border: 1px solid var(--ui-border-default);
+    border: 1px solid var(--ui-border);
     border-radius: var(--ui-radius-sm);
     background: var(--ui-hover);
     color: var(--ui-text-secondary);
@@ -360,7 +360,7 @@
     &:hover {
       background: var(--ui-hover-high);
       color: var(--ui-text-primary);
-      border-color: var(--ui-border-strong);
+      border-color: var(--ui-border-higher);
     }
   }
 
@@ -383,7 +383,7 @@
   }
 
   .hsl-hex:hover {
-    border-color: var(--ui-border-default);
+    border-color: var(--ui-border);
     background: var(--ui-surface-low);
   }
 
@@ -392,7 +392,7 @@
     color: var(--ui-text-accent);
     font-family: var(--ui-font-mono);
     background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-strong);
+    border: 1px solid var(--ui-border-higher);
     border-radius: var(--ui-radius-sm);
     padding: var(--ui-space-2) var(--ui-space-4);
     width: 5.5rem;
@@ -438,7 +438,7 @@
     position: relative;
     height: 1.25rem;
     border-radius: var(--ui-radius-md);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
     flex: 1;
     min-width: 6rem;
   }
@@ -487,7 +487,7 @@
   }
 
   .slider-track input[type="range"]:focus-visible {
-    outline: 2px solid var(--ui-border-medium);
+    outline: 2px solid var(--ui-border-high);
     outline-offset: 2px;
   }
 
@@ -499,7 +499,7 @@
     text-align: right;
     flex-shrink: 0;
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     padding: var(--ui-space-2) var(--ui-space-4);
     -moz-appearance: textfield;
@@ -518,7 +518,7 @@
 
   .hsl-slider-input:focus {
     outline: none;
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   .hsl-slider-unit {

package/src/{ui → editor/ui}/EditorViewSwitcher.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { editorView } from '../lib/editorViewStore';
-  import { parentRoute } from '../lib/parentRouteStore';
+  import { editorView } from '../core/store/editorViewStore';
+  import { parentRoute } from '../core/routing/parentRouteStore';
 
   interface Props {
     condensed?: boolean;
@@ -36,7 +36,7 @@
   </button>
 {:else}
   <div class="seg-group">
-    <span class="seg-label">Editor</span>
+    <span class="seg-label">Editor Mode</span>
     <div class="seg" role="tablist" aria-label="Editor view">
       <button
         type="button"
@@ -77,19 +77,20 @@
   .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);
+    margin-bottom: 2px;
   }
 
   .seg {
     display: flex;
     flex-direction: column;
     gap: 2px;
-    padding: 3px;
+    padding: 4px;
+    margin-bottom: 4px;
     background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-text-primary);
     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