@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/ui/palette/OverridesPanel.svelte

@@ -0,0 +1,526 @@
+<script lang="ts">
+  import ScaleCurveEditor from './ScaleCurveEditor.svelte';
+  import { type CurveAnchor, lightnessCurveConfig, saturationCurveConfig, textLightnessCurveConfig } from '../curveEngine';
+  import { scaleToCssVar } from '../../lib/paletteDerivation';
+
+  /**
+   * Per-scale derived swatch section used for Text, Surfaces, and Borders
+   * (in both chromatic and gray modes). Renders the scale header (snap/clear/edit
+   * buttons), the swatch grid (derived swatch + override slot per step), and
+   * the inline 2-curve editor when `editorOpen` is true.
+   *
+   * Linked/unlinked semantics live in the parent — this component receives the
+   * pre-computed `overrides`, `derivedHexFor`, and `effectiveHexFor` and renders
+   * them unchanged. No state mutation here; all interactions dispatch up.
+   */
+
+  interface Step {
+    name: string;
+    position: number;
+    lightness?: number;
+    saturation?: number;
+  }
+
+  interface Scale {
+    title: string;
+    isText: boolean;
+    steps: Step[];
+  }
+
+  type Channel = 'lightness' | 'saturation';
+
+  interface ScaleCurveDef {
+    lightness: () => CurveAnchor[];
+    saturation: () => CurveAnchor[];
+  }
+
+  interface PaletteStep { label: string; hex: string }
+
+  export let scale: Scale;
+  export let editorOpen: boolean;
+  export let snapped: boolean;
+  export let supportsSnap: boolean;
+  export let cssNamespace: string | null;
+  export let scaleCurves: Record<string, { lightness: CurveAnchor[]; saturation: CurveAnchor[] }>;
+  export let curveOffset: Record<string, number>;
+  export let defaultScaleCurves: Record<string, ScaleCurveDef>;
+  export let overrides: Record<string, string>;
+  export let editingKey: string | null;
+  export let snapPickerKey: string | null;
+  export let copiedKey: string | null;
+  export let copiedLabelKey: string | null;
+  export let paletteComputed: PaletteStep[];
+
+  export let derivedHexFor: (step: Step, scaleTitle: string) => string;
+  export let effectiveHexFor: (key: string, step: Step, scaleTitle: string) => string;
+  export let stepKeyFor: (scaleTitle: string, stepName: string) => string;
+  export let scaleCurveKeyFor: (scaleTitle: string, channel: Channel) => string;
+
+  export let onToggleSnap: (scale: Scale) => void;
+  export let onClearScaleOverrides: (scale: Scale) => void;
+  export let onToggleEditor: (scaleTitle: string) => void;
+  export let onResetOverride: (key: string) => void;
+  export let onOverrideClick: (key: string, step: Step, scaleTitle: string) => void;
+  export let onSnappedClick: (key: string) => void;
+  export let onSelectSnapValue: (key: string, paletteHex: string, scaleTitle: string) => void;
+  export let onCopyHex: (key: string, hex: string, event?: MouseEvent) => void;
+  export let onCopyVarName: (key: string, varName: string, event?: MouseEvent) => void;
+  export let onSetScaleCurve: (scaleTitle: string, channel: Channel, anchors: CurveAnchor[]) => void;
+  export let onOffsetChange: (key: string, value: number) => void;
+
+  interface CurveDescriptor {
+    key: string;
+    anchors: CurveAnchor[];
+    cfg: typeof lightnessCurveConfig;
+    defaults: CurveAnchor[];
+    channel: Channel;
+  }
+
+  $: curveDescriptors = ((): CurveDescriptor[] => {
+    const lightnessCfg = scale.isText ? textLightnessCurveConfig : lightnessCurveConfig;
+    const sc = scaleCurves[scale.title];
+    const defs = defaultScaleCurves[scale.title];
+    if (!sc || !defs) return [];
+    return [
+      { key: scaleCurveKeyFor(scale.title, 'lightness'), anchors: sc.lightness, cfg: lightnessCfg, defaults: defs.lightness(), channel: 'lightness' },
+      { key: scaleCurveKeyFor(scale.title, 'saturation'), anchors: sc.saturation, cfg: saturationCurveConfig, defaults: defs.saturation(), channel: 'saturation' },
+    ];
+  })();
+</script>
+
+<div class="scale-section">
+  <div class="scale-header">
+    <h4 class="scale-title">{scale.title}</h4>
+    {#if supportsSnap}
+      <button
+        class="edit-toggle"
+        class:active={snapped}
+        type="button"
+        on:click={() => onToggleSnap(scale)}
+      >{snapped ? 'Unsnap' : 'Snap All'}</button>
+    {/if}
+    <button class="edit-toggle" type="button" on:click={() => onClearScaleOverrides(scale)}>Clear Overrides</button>
+    <button
+      class="edit-toggle"
+      type="button"
+      on:click={() => onToggleEditor(scale.title)}
+    >{editorOpen ? 'Close' : 'Edit'}</button>
+  </div>
+  <div class="swatch-grid" style="--swatch-cols: {scale.steps.length}; --swatch-gap: var(--ui-space-8)">
+    {#each scale.steps as step}
+      {@const k = stepKeyFor(scale.title, step.name)}
+      {@const hex = effectiveHexFor(k, step, scale.title)}
+      {@const dHex = derivedHexFor(step, scale.title)}
+      <div class="step-column">
+        <button class="step-label copyable-label" class:copied={copiedLabelKey === k} type="button" on:click={(e) => { const v = scaleToCssVar(scale.title, step.name, cssNamespace); if (v) onCopyVarName(k, v, e); }}>
+          {copiedLabelKey === k ? 'copied!' : step.name}
+        </button>
+        {#if scale.isText}
+          <div
+            class="swatch derived text-swatch"
+            class:dimmed={k in overrides}
+            class:clickable={k in overrides}
+            on:click={() => onResetOverride(k)}
+            role={k in overrides ? 'button' : undefined}
+            tabindex={k in overrides ? 0 : undefined}
+            on:keydown={(e) => k in overrides && e.key === 'Enter' && onResetOverride(k)}
+          >
+            <span style="color: {dHex}">Ag</span>
+          </div>
+          <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+          <div
+            class="swatch override-slot text-swatch"
+            class:active={editingKey === k}
+            class:populated={k in overrides}
+            class:matching={k in overrides && overrides[k] === dHex}
+            on:click={() => onOverrideClick(k, step, scale.title)}
+            role="button"
+            tabindex="0"
+            on:keydown={(e) => e.key === 'Enter' && onOverrideClick(k, step, scale.title)}
+          >
+            {#if k in overrides}
+              <span style="color: {overrides[k]}">Ag</span>
+            {/if}
+          </div>
+        {:else}
+          <div
+            class="swatch derived"
+            class:border-preview={scale.title === 'Borders'}
+            class:dimmed={k in overrides}
+            class:clickable={k in overrides}
+            style={scale.title === 'Borders'
+              ? `border: 3px solid ${dHex}`
+              : `background: ${dHex}`}
+            on:click={() => onResetOverride(k)}
+            role={k in overrides ? 'button' : undefined}
+            tabindex={k in overrides ? 0 : undefined}
+            on:keydown={(e) => k in overrides && e.key === 'Enter' && onResetOverride(k)}
+          ></div>
+          <div class="override-slot-wrapper">
+            <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+            <div
+              class="swatch override-slot"
+              class:border-preview={scale.title === 'Borders'}
+              class:active={editingKey === k || snapPickerKey === k}
+              class:populated={k in overrides}
+              class:matching={k in overrides && overrides[k] === dHex}
+              on:click={() => snapped ? onSnappedClick(k) : onOverrideClick(k, step, scale.title)}
+              role="button"
+              tabindex="0"
+              on:keydown={(e) => e.key === 'Enter' && (snapped ? onSnappedClick(k) : onOverrideClick(k, step, scale.title))}
+            >
+              {#if k in overrides}
+                {#if scale.title === 'Borders'}
+                  <div class="override-fill border-fill" style="border: 3px solid {overrides[k]}"></div>
+                {:else}
+                  <div class="override-fill" style="background: {overrides[k]}"></div>
+                {/if}
+                {#if snapped}
+                  {@const plabel = paletteComputed.find(ps => ps.hex === overrides[k])?.label ?? null}
+                  {#if plabel}
+                    <span class="palette-step-label">{plabel}</span>
+                  {/if}
+                {/if}
+              {/if}
+            </div>
+            {#if snapPickerKey === k}
+              <div class="snap-picker">
+                {#each paletteComputed as ps}
+                  <button
+                    class="snap-picker-item"
+                    class:selected={overrides[k] === ps.hex}
+                    type="button"
+                    on:click={() => onSelectSnapValue(k, ps.hex, scale.title)}
+                  >
+                    <span class="snap-picker-swatch" style="background: {ps.hex}"></span>
+                    <span class="snap-picker-label">{ps.label}</span>
+                  </button>
+                {/each}
+              </div>
+            {/if}
+          </div>
+        {/if}
+        <button
+          class="step-hex"
+          class:copied={copiedKey === k}
+          type="button"
+          on:click={(e) => onCopyHex(k, hex, e)}
+        >{copiedKey === k ? 'copied!' : hex}</button>
+      </div>
+    {/each}
+    {#if editorOpen}
+      <div class="curve-grid-span" style="grid-column: 1 / -1">
+        {#each curveDescriptors as curve (curve.key)}
+          <ScaleCurveEditor
+            curveKey={curve.key}
+            anchors={curve.anchors}
+            cfg={curve.cfg}
+            stepCount={scale.steps.length}
+            defaults={curve.defaults}
+            offset={curveOffset[curve.key] ?? 0}
+            onAnchorsChange={(a) => onSetScaleCurve(scale.title, curve.channel, a)}
+            onOffsetChange={onOffsetChange}
+          />
+        {/each}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .scale-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-6);
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .scale-header {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+  }
+
+  .scale-title {
+    font-size: var(--ui-font-size-md);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-tertiary);
+    margin: 0;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .edit-toggle {
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-text-tertiary);
+    background: none;
+    border: 1px solid var(--ui-border-subtle);
+    border-radius: var(--ui-radius-sm);
+    padding: var(--ui-space-2) var(--ui-space-6);
+    cursor: pointer;
+  }
+
+  .edit-toggle:hover {
+    color: var(--ui-text-primary);
+    border-color: var(--ui-border-medium);
+  }
+
+  .edit-toggle.active {
+    color: var(--ui-text-primary);
+    border-color: var(--ui-border-medium);
+    background: var(--ui-surface-high);
+  }
+
+  .swatch-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--swatch-cols), minmax(0, 1fr));
+    gap: var(--ui-space-4) var(--swatch-gap, var(--ui-space-4));
+    align-items: start;
+    justify-content: start;
+    min-width: 0;
+    max-width: calc(var(--swatch-cols) * 4rem + (var(--swatch-cols) - 1) * var(--swatch-gap, var(--ui-space-4)));
+  }
+
+  .curve-grid-span {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-8);
+  }
+
+  .step-column {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-self: stretch;
+    gap: var(--ui-space-2);
+    width: auto;
+    min-width: 0;
+    overflow: visible;
+  }
+
+  .step-label {
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+    text-align: center;
+    line-height: 1;
+    height: var(--ui-font-size-xs);
+    display: flex;
+    align-items: flex-end;
+  }
+
+  .step-label.copyable-label {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    font: inherit;
+    font-size: var(--ui-font-size-sm);
+    justify-content: center;
+    transition: color var(--ui-transition-fast);
+  }
+
+  .step-label.copyable-label:hover {
+    color: var(--ui-text-primary);
+  }
+
+  .step-label.copyable-label.copied {
+    color: var(--ui-text-accent, var(--ui-text-primary));
+  }
+
+  .swatch {
+    width: 100%;
+    height: 2rem;
+    border-radius: var(--ui-radius-sm);
+    border: 1px solid var(--ui-border-faint);
+  }
+
+  .swatch.text-swatch {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    font-size: var(--ui-font-size-md);
+    font-weight: var(--ui-font-weight-bold);
+  }
+
+  .swatch.border-preview {
+    background: none;
+    border-radius: var(--ui-radius-md);
+  }
+
+  .override-fill.border-fill {
+    background: none;
+    border-radius: var(--ui-radius-sm);
+  }
+
+  .swatch.derived.clickable {
+    cursor: pointer;
+  }
+
+  .swatch.derived.clickable:hover {
+    outline: 2px solid var(--ui-border-medium);
+    outline-offset: 1px;
+  }
+
+  .swatch.derived.dimmed {
+    position: relative;
+  }
+
+  .swatch.derived.dimmed::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      to bottom left,
+      transparent calc(50% - 0.5px),
+      white calc(50% - 0.5px),
+      white calc(50% + 0.5px),
+      transparent calc(50% + 0.5px)
+    );
+    border-radius: inherit;
+  }
+
+  .override-slot {
+    border-style: dashed;
+    border-color: var(--ui-border-subtle);
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .override-slot:hover {
+    border-color: var(--ui-border-medium);
+  }
+
+  .override-slot.active {
+    border-color: var(--ui-border-strong);
+    outline: 1px solid var(--ui-border-medium);
+    outline-offset: 1px;
+  }
+
+  .override-slot.populated {
+    border-color: var(--ui-border-medium);
+  }
+
+  .override-slot.matching::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      to bottom left,
+      transparent calc(50% - 0.5px),
+      white calc(50% - 0.5px),
+      white calc(50% + 0.5px),
+      transparent calc(50% + 0.5px)
+    );
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  .override-fill {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+  }
+
+  .palette-step-label {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--ui-font-size-md);
+    font-weight: var(--ui-font-weight-semibold);
+    color: white;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .override-slot-wrapper {
+    position: relative;
+  }
+
+  .snap-picker {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 10;
+    margin-top: var(--ui-space-4);
+    background: var(--ui-surface-lowest);
+    border: 1px solid var(--ui-border-medium);
+    border-radius: var(--ui-radius-md);
+    padding: var(--ui-space-4);
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    min-width: 5.5rem;
+  }
+
+  .snap-picker-item {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    padding: var(--ui-space-2) var(--ui-space-6);
+    border: none;
+    background: none;
+    border-radius: var(--ui-radius-sm);
+    cursor: pointer;
+    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-md);
+    font-family: var(--ui-font-mono);
+    white-space: nowrap;
+  }
+
+  .snap-picker-item:hover {
+    background: var(--ui-surface-high);
+    color: var(--ui-text-primary);
+  }
+
+  .snap-picker-item.selected {
+    background: var(--ui-surface-highest);
+    color: var(--ui-text-primary);
+    font-weight: var(--ui-font-weight-semibold);
+  }
+
+  .snap-picker-swatch {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    border-radius: var(--ui-radius-sm);
+    border: 1px solid var(--ui-border-faint);
+    flex-shrink: 0;
+  }
+
+  .snap-picker-label {
+    line-height: 1;
+  }
+
+  .step-hex {
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-secondary);
+    font-family: var(--ui-font-mono);
+    cursor: pointer;
+    padding: 1px var(--ui-space-2);
+    border-radius: var(--ui-radius-sm);
+    white-space: nowrap;
+    background: none;
+    border: none;
+    text-align: center;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .step-hex:hover {
+    background: var(--ui-surface-highest);
+    color: var(--ui-text-primary);
+  }
+
+  .step-hex.copied {
+    color: var(--ui-text-accent);
+  }
+</style>

package/src/ui/palette/PaletteBase.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+  import ColorEditPanel from '../ColorEditPanel.svelte';
+  import Toggle from '../Toggle.svelte';
+  import { beginSliderGesture } from '../../lib/editorStore';
+
+  /**
+   * The header swatch + label + base-hex + (when active) the ColorEditPanel
+   * for editing the palette's base colour. In chromatic mode the user picks
+   * an arbitrary hex; in gray mode the user picks tint hue + chroma and the
+   * hex is derived.
+   *
+   * State (`editing`, scope handle) is owned by the parent — this component
+   * fires callbacks (`onStartEdit`, `onConfirm`, `onCancel`, etc.). The
+   * parent decides whether to apply the chromatic-vs-gray snapshot dance.
+   */
+
+  export let label: string;
+  export let displayLabel: string | null = null;
+  export let mode: 'chromatic' | 'gray';
+  export let baseColor: string;
+  export let gray500Hex: string;
+  export let tintHue: number;
+  export let tintChroma: number;
+  export let anchorToBase: boolean;
+  export let isEditingBase: boolean;
+  export let panelOpen: boolean;
+  export let editingColor: string | null;
+  export let editPanelTitle: string | null;
+  export let copiedKey: string | null;
+
+  export let onStartEdit: () => void;
+  export let onConfirm: () => void;
+  export let onCancel: () => void;
+  export let onColorChange: (hex: string) => void;
+  export let onTintChange: (hue: number, chroma: number) => void;
+  export let onAnchorToBaseChange: (next: boolean) => void;
+  export let onCopyBaseHex: (key: string, hex: string, event?: MouseEvent) => void;
+
+  $: displayHex = mode === 'gray' ? gray500Hex : baseColor;
+  $: copyKey = mode === 'gray' ? 'gray-500' : '__base__';
+</script>
+
+<div class="editor-top">
+  <div class="editor-primary">
+    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+    <div
+      class="header-swatch"
+      class:active={isEditingBase}
+      style="background: {displayHex}"
+      on:click={onStartEdit}
+      role="button"
+      tabindex="0"
+      on:keydown={(e) => e.key === 'Enter' && onStartEdit()}
+    ></div>
+    <div class="primary-info">
+      <span class="editor-label">{displayLabel ?? label}</span>
+      <button
+        class="base-hex clickable-hex"
+        type="button"
+        on:click={(e) => onCopyBaseHex(copyKey, displayHex, e)}
+      >{copiedKey === copyKey ? 'copied!' : displayHex}</button>
+    </div>
+  </div>
+</div>
+
+{#if isEditingBase && panelOpen && editingColor}
+  <ColorEditPanel
+    color={editingColor}
+    title={editPanelTitle}
+    showRemoveOverride={false}
+    mode={mode === 'gray' ? 'hue-chroma' : 'hsl'}
+    hue={tintHue}
+    chroma={tintChroma}
+    onHueChromaChange={onTintChange}
+    onColorChange={onColorChange}
+    onConfirm={onConfirm}
+    onCancel={onCancel}
+    onRemoveOverride={() => {}}
+    onSliderStart={() => beginSliderGesture(`edit ${label} base`)}
+  >
+    <span slot="actions" class:hidden={mode !== 'chromatic'}>
+      <Toggle checked={anchorToBase} on:change={(e) => onAnchorToBaseChange(e.detail ?? !anchorToBase)} label="Lock base color to position 500" />
+    </span>
+  </ColorEditPanel>
+{/if}
+
+<style>
+  .editor-top {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ui-space-16);
+    flex-wrap: wrap;
+  }
+
+  .editor-primary {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+    flex-shrink: 0;
+  }
+
+  .primary-info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-2);
+  }
+
+  .header-swatch {
+    width: 4rem;
+    height: 4rem;
+    border-radius: var(--ui-radius-md);
+    border: 2px solid var(--ui-border-default);
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+
+  .header-swatch:hover {
+    border-color: var(--ui-border-strong);
+  }
+
+  .header-swatch.active {
+    border-color: var(--ui-border-strong);
+    outline: 2px solid var(--ui-border-medium);
+    outline-offset: 1px;
+  }
+
+  .editor-label {
+    font-size: var(--ui-font-size-lg);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-primary);
+  }
+
+  .base-hex {
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-secondary);
+    font-family: var(--ui-font-mono);
+  }
+
+  .clickable-hex {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: var(--ui-space-2) var(--ui-space-4);
+    border-radius: var(--ui-radius-sm);
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-secondary);
+    font-family: var(--ui-font-mono);
+  }
+
+  .clickable-hex:hover {
+    background: var(--ui-surface-highest);
+    color: var(--ui-text-primary);
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  @media (max-width: 1280px) {
+    .header-swatch {
+      width: 3rem;
+      height: 3rem;
+    }
+  }
+</style>