@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/showcase/PaletteSelector.svelte

@@ -1,627 +0,0 @@
-<script lang="ts">
-  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
-  import { setCssVar, removeCssVar } from '../lib/cssVarSync';
-
-  const dispatch = createEventDispatcher();
-
-  export let variable: string;
-  export let label: string;
-
-  type Category = 'palette' | 'surface' | 'border' | 'text';
-
-  const families = [
-    { name: 'neutral', label: 'Neutral' },
-    { name: 'alternate', label: 'Alternate' },
-    { name: 'bg', label: 'Background' },
-    { name: 'primary', label: 'Primary' },
-    { name: 'accent', label: 'Accent' },
-    { name: 'special', label: 'Special' },
-    { name: 'success', label: 'Success' },
-    { name: 'warning', label: 'Warning' },
-    { name: 'info', label: 'Info' },
-    { name: 'danger', label: 'Danger' },
-  ];
-
-  const familyNames = families.map(f => f.name);
-
-  const paletteSteps = ['100', '200', '300', '400', '500', '600', '700', '800', '850', '900', '950'];
-
-  const surfaceSteps = [
-    { key: 'lowest', label: 'Lowest' },
-    { key: 'lower', label: 'Lower' },
-    { key: 'low', label: 'Low' },
-    { key: '', label: 'Default' },
-    { key: 'high', label: 'High' },
-    { key: 'higher', label: 'Higher' },
-    { key: 'highest', label: 'Highest' },
-  ];
-
-  const borderSteps = [
-    { key: 'faint', label: 'Faint' },
-    { key: 'subtle', label: 'Subtle' },
-    { key: '', label: 'Default' },
-    { key: 'medium', label: 'Medium' },
-    { key: 'strong', label: 'Strong' },
-  ];
-
-  const textSteps = [
-    { key: 'primary', label: 'Primary' },
-    { key: 'secondary', label: 'Secondary' },
-    { key: 'tertiary', label: 'Tertiary' },
-    { key: 'muted', label: 'Muted' },
-    { key: 'disabled', label: 'Disabled' },
-  ];
-
-  const surfaceStepKeys = surfaceSteps.map(s => s.key);
-  const borderStepKeys = borderSteps.map(s => s.key);
-  const textStepKeys = textSteps.map(s => s.key);
-
-  const familiesWithText = ['neutral', 'bg', 'primary', 'accent', 'special', 'success', 'warning', 'info', 'danger'];
-
-  const allCategories: { id: Category; label: string }[] = [
-    { id: 'palette', label: 'Palette' },
-    { id: 'surface', label: 'Surface' },
-    { id: 'border', label: 'Border' },
-    { id: 'text', label: 'Text' },
-  ];
-
-  let open = false;
-  let selectedFamily: string | null = null;
-  let selectedTab: Category = 'palette';
-  let container: HTMLElement;
-
-  let chosenCategory: Category | null = null;
-  let chosenFamily: string | null = null;
-  let chosenStep: string | null = null;
-  let chosenHex: string | null = null;
-
-  /** Get the CSS variable name for a category/family/step combination */
-  function getVarName(category: Category, family: string, stepKey: string): string {
-    switch (category) {
-      case 'palette':
-        return `--color-${family}-${stepKey}`;
-      case 'surface':
-        return stepKey ? `--surface-${family}-${stepKey}` : `--surface-${family}`;
-      case 'border':
-        if (!stepKey) {
-          return family === 'neutral' ? `--border-${family}-default` : `--border-${family}`;
-        }
-        return `--border-${family}-${stepKey}`;
-      case 'text':
-        if (family === 'neutral') return `--text-${stepKey}`;
-        if (family === 'primary' && stepKey === 'primary') return '--text-primary-color';
-        if (stepKey === 'primary') return `--text-${family}`;
-        return `--text-${family}-${stepKey}`;
-    }
-  }
-
-  function parseTextVarName(varName: string): { family: string; step: string } | null {
-    if (varName === '--text-primary') return { family: 'neutral', step: 'primary' };
-    if (varName === '--text-secondary') return { family: 'neutral', step: 'secondary' };
-    if (varName === '--text-tertiary') return { family: 'neutral', step: 'tertiary' };
-    if (varName === '--text-muted') return { family: 'neutral', step: 'muted' };
-    if (varName === '--text-disabled') return { family: 'neutral', step: 'disabled' };
-    if (varName === '--text-primary-color') return { family: 'primary', step: 'primary' };
-    const m = varName.match(/^--text-([a-z]+)(?:-([a-z]+))?$/);
-    if (m) {
-      const fam = m[1];
-      const hier = m[2] || 'primary';
-      if (familiesWithText.includes(fam) && fam !== 'neutral' && textStepKeys.includes(hier)) {
-        return { family: fam, step: hier };
-      }
-    }
-    return null;
-  }
-
-  /** Parse a var(...) reference into category/family/step */
-  function parseRef(value: string): { category: Category; family: string; step: string } | null {
-    const varMatch = value.match(/var\((--[a-z0-9-]+)\)/);
-    if (!varMatch) return null;
-    const varName = varMatch[1];
-
-    const paletteM = varName.match(/^--color-([a-z]+)-(\d{3})$/);
-    if (paletteM && familyNames.includes(paletteM[1]) && paletteSteps.includes(paletteM[2])) {
-      return { category: 'palette', family: paletteM[1], step: paletteM[2] };
-    }
-
-    const surfaceM = varName.match(/^--surface-([a-z]+)(?:-([a-z]+))?$/);
-    if (surfaceM && familyNames.includes(surfaceM[1])) {
-      const step = surfaceM[2] || '';
-      if (surfaceStepKeys.includes(step)) {
-        return { category: 'surface', family: surfaceM[1], step };
-      }
-    }
-
-    const borderM = varName.match(/^--border-([a-z]+)(?:-([a-z]+))?$/);
-    if (borderM && familyNames.includes(borderM[1])) {
-      let step = borderM[2] || '';
-      if (step === 'default') step = '';
-      if (borderStepKeys.includes(step)) {
-        return { category: 'border', family: borderM[1], step };
-      }
-    }
-
-    const textResult = parseTextVarName(varName);
-    if (textResult) {
-      return { category: 'text', ...textResult };
-    }
-
-    return null;
-  }
-
-  function initFromCurrent() {
-    const raw = document.documentElement.style.getPropertyValue(variable).trim();
-    if (!raw) return;
-    const parsed = parseRef(raw);
-    if (parsed) {
-      chosenCategory = parsed.category;
-      chosenFamily = parsed.family;
-      chosenStep = parsed.step;
-      chosenHex = null;
-    } else if (/^#[0-9a-f]{3,8}$/i.test(raw)) {
-      chosenHex = raw;
-      chosenCategory = null;
-      chosenFamily = null;
-      chosenStep = null;
-    }
-  }
-
-  function resetVariable() {
-    removeCssVar(variable);
-    chosenCategory = null;
-    chosenFamily = null;
-    chosenStep = null;
-    chosenHex = null;
-    open = false;
-    selectedFamily = null;
-    dispatch('change');
-  }
-
-  function toggle() {
-    open = !open;
-    if (!open) selectedFamily = null;
-  }
-
-  function selectFamily(name: string) {
-    selectedFamily = name;
-    if (name === chosenFamily && chosenCategory) {
-      selectedTab = chosenCategory;
-    }
-  }
-
-  function backToFamilies() {
-    selectedFamily = null;
-  }
-
-  function selectSwatch(category: Category, step: string) {
-    const varName = getVarName(category, selectedFamily!, step);
-    if (varName === variable) {
-      removeCssVar(variable);
-    } else {
-      setCssVar(variable, `var(${varName})`);
-    }
-    chosenCategory = category;
-    chosenFamily = selectedFamily;
-    chosenStep = step;
-    chosenHex = null;
-    open = false;
-    selectedFamily = null;
-    dispatch('change');
-  }
-
-  function handleClickOutside(e: MouseEvent) {
-    if (container && !container.contains(e.target as Node)) {
-      open = false;
-      selectedFamily = null;
-    }
-  }
-
-  onMount(() => {
-    initFromCurrent();
-    document.addEventListener('click', handleClickOutside, true);
-  });
-
-  onDestroy(() => {
-    document.removeEventListener('click', handleClickOutside, true);
-  });
-
-  $: displayValue = chosenHex
-    ? chosenHex
-    : (chosenCategory === 'palette' && chosenFamily && chosenStep)
-      ? `${chosenFamily}-${chosenStep}`
-      : (chosenCategory && chosenFamily)
-        ? getVarName(chosenCategory, chosenFamily, chosenStep || '').replace(/^--/, '')
-        : '';
-
-  $: availableTabs = selectedFamily
-    ? allCategories.filter(c => c.id !== 'text' || familiesWithText.includes(selectedFamily!))
-    : allCategories;
-
-  $: if (selectedFamily && !availableTabs.find(t => t.id === selectedTab)) {
-    selectedTab = 'palette';
-  }
-</script>
-
-<div class="palette-selector" bind:this={container}>
-  <button class="selector-trigger" on:click={toggle}>
-    <div class="trigger-swatch" style="background: var({variable});"></div>
-    <div class="trigger-text">
-      <span class="trigger-label">{label}</span>
-      {#if displayValue}
-        <span class="trigger-value">{displayValue}</span>
-      {/if}
-    </div>
-    <i class="fas fa-chevron-down trigger-chevron" class:open></i>
-  </button>
-
-  {#if open}
-    <div class="selector-dropdown">
-      {#if selectedFamily === null}
-        <div class="dropdown-header">
-          <code class="variable-name">{variable}</code>
-          <button class="reset-btn" on:click={resetVariable} title="Reset to default">
-            <i class="fas fa-undo"></i>
-          </button>
-        </div>
-        <div class="family-list">
-          {#each families as fam}
-            <button class="family-item" class:active={chosenFamily === fam.name} on:click={() => selectFamily(fam.name)}>
-              <div class="family-swatches">
-                <div class="mini-swatch" style="background: var(--color-{fam.name}-300);"></div>
-                <div class="mini-swatch" style="background: var(--color-{fam.name}-500);"></div>
-                <div class="mini-swatch" style="background: var(--color-{fam.name}-700);"></div>
-              </div>
-              <span class="family-label">{fam.label}</span>
-              <i class="fas fa-chevron-right family-arrow"></i>
-            </button>
-          {/each}
-        </div>
-      {:else}
-        <button class="dropdown-back" on:click={backToFamilies}>
-          <i class="fas fa-chevron-left"></i>
-          <span>{families.find(f => f.name === selectedFamily)?.label}</span>
-        </button>
-
-        <div class="tab-bar">
-          {#each availableTabs as tab}
-            <button
-              class="tab-btn"
-              class:selected={selectedTab === tab.id}
-              class:assigned={chosenCategory === tab.id && chosenFamily === selectedFamily}
-              on:click={() => selectedTab = tab.id}
-            >{tab.label}</button>
-          {/each}
-        </div>
-
-        {#if selectedTab === 'palette'}
-          <div class="step-grid">
-            {#each paletteSteps as step}
-              <button
-                class="step-item"
-                class:active={chosenCategory === 'palette' && chosenFamily === selectedFamily && chosenStep === step}
-                on:click={() => selectSwatch('palette', step)}
-              >
-                <div class="step-swatch" style="background: var(--color-{selectedFamily}-{step});"></div>
-                <span class="step-label">{step}</span>
-              </button>
-            {/each}
-          </div>
-        {:else if selectedTab === 'surface'}
-          <div class="step-grid">
-            {#each surfaceSteps as step}
-              <button
-                class="step-item"
-                class:active={chosenCategory === 'surface' && chosenFamily === selectedFamily && chosenStep === step.key}
-                on:click={() => selectSwatch('surface', step.key)}
-              >
-                <div class="step-swatch" style="background: var({getVarName('surface', selectedFamily, step.key)});"></div>
-                <span class="step-label">{step.label}</span>
-              </button>
-            {/each}
-          </div>
-        {:else if selectedTab === 'border'}
-          <div class="step-grid">
-            {#each borderSteps as step}
-              <button
-                class="step-item"
-                class:active={chosenCategory === 'border' && chosenFamily === selectedFamily && chosenStep === step.key}
-                on:click={() => selectSwatch('border', step.key)}
-              >
-                <div class="step-swatch" style="background: var({getVarName('border', selectedFamily, step.key)});"></div>
-                <span class="step-label">{step.label}</span>
-              </button>
-            {/each}
-          </div>
-        {:else if selectedTab === 'text'}
-          <div class="step-grid">
-            {#each textSteps as step}
-              <button
-                class="step-item"
-                class:active={chosenCategory === 'text' && chosenFamily === selectedFamily && chosenStep === step.key}
-                on:click={() => selectSwatch('text', step.key)}
-              >
-                <div class="step-swatch" style="background: var({getVarName('text', selectedFamily, step.key)});"></div>
-                <span class="step-label">{step.label}</span>
-              </button>
-            {/each}
-          </div>
-        {/if}
-      {/if}
-    </div>
-  {/if}
-</div>
-
-<style>
-  .palette-selector {
-    position: relative;
-  }
-
-  .selector-trigger {
-    display: flex;
-    align-items: center;
-    gap: var(--space-8);
-    padding: var(--space-6) var(--space-10);
-    background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-default);
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    transition: all var(--transition-fast);
-    min-width: 10rem;
-  }
-
-  .selector-trigger:hover {
-    border-color: var(--ui-border-strong);
-    background: var(--ui-surface-high);
-  }
-
-  .trigger-swatch {
-    width: 1.5rem;
-    height: 1.5rem;
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--ui-border-faint);
-    flex-shrink: 0;
-  }
-
-  .trigger-text {
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-    flex: 1;
-    text-align: left;
-  }
-
-  .trigger-label {
-    font-size: var(--font-xs);
-    color: var(--ui-text-secondary);
-    font-weight: var(--font-weight-medium);
-  }
-
-  .trigger-value {
-    font-size: 0.625rem;
-    color: var(--ui-text-muted);
-    font-family: var(--ui-font-mono);
-  }
-
-  .trigger-chevron {
-    font-size: 0.5rem;
-    color: var(--ui-text-muted);
-    transition: transform var(--transition-fast);
-  }
-
-  .trigger-chevron.open {
-    transform: rotate(180deg);
-  }
-
-  .selector-dropdown {
-    position: absolute;
-    top: calc(100% + var(--space-4));
-    left: 0;
-    min-width: 14rem;
-    max-width: calc(100vw - 2rem);
-    background: var(--ui-surface-higher);
-    border: 1px solid var(--ui-border-medium);
-    border-radius: var(--radius-md);
-    box-shadow: var(--shadow-lg);
-    z-index: 10;
-    overflow: hidden;
-  }
-
-  .dropdown-header {
-    display: flex;
-    align-items: center;
-    gap: var(--space-6);
-    padding: var(--space-6) var(--space-8);
-    border-bottom: 1px solid var(--ui-border-faint);
-  }
-
-  .variable-name {
-    flex: 1;
-    font-size: 0.625rem;
-    color: var(--ui-text-muted);
-    font-family: var(--ui-font-mono);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .reset-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.5rem;
-    height: 1.5rem;
-    padding: 0;
-    background: none;
-    border: 1px solid var(--ui-border-default);
-    border-radius: var(--radius-sm);
-    color: var(--ui-text-secondary);
-    font-size: 0.625rem;
-    cursor: pointer;
-    flex-shrink: 0;
-    transition: all var(--transition-fast);
-  }
-
-  .reset-btn:hover {
-    background: var(--ui-hover);
-    border-color: var(--ui-border-strong);
-    color: var(--ui-text-primary);
-  }
-
-  .dropdown-back {
-    display: flex;
-    align-items: center;
-    gap: var(--space-6);
-    width: 100%;
-    padding: var(--space-8) var(--space-10);
-    background: none;
-    border: none;
-    border-bottom: 1px solid var(--ui-border-faint);
-    color: var(--ui-text-secondary);
-    font-size: var(--font-sm);
-    font-weight: var(--font-weight-medium);
-    cursor: pointer;
-    transition: background var(--transition-fast);
-  }
-
-  .dropdown-back:hover {
-    background: var(--ui-hover);
-  }
-
-  .dropdown-back i {
-    font-size: 0.5rem;
-  }
-
-  .tab-bar {
-    display: flex;
-    border-bottom: 1px solid var(--ui-border-faint);
-  }
-
-  .tab-btn {
-    flex: 1;
-    padding: var(--space-4) var(--space-4);
-    background: none;
-    border: 1px solid transparent;
-    border-radius: 0;
-    color: var(--ui-text-muted);
-    font-size: 0.625rem;
-    font-weight: var(--font-weight-medium);
-    cursor: pointer;
-    transition: all var(--transition-fast);
-    text-align: center;
-  }
-
-  .tab-btn:hover {
-    color: var(--ui-text-secondary);
-    background: var(--ui-hover);
-  }
-
-  .tab-btn.assigned {
-    border-color: var(--ui-border-default);
-  }
-
-  .tab-btn.selected {
-    color: var(--ui-text-primary);
-    box-shadow: inset 0 -2px 0 var(--ui-text-accent);
-    background: var(--ui-hover);
-  }
-
-  .family-list {
-    display: flex;
-    flex-direction: column;
-    max-height: 20rem;
-    overflow-y: auto;
-  }
-
-  .family-item {
-    display: flex;
-    align-items: center;
-    gap: var(--space-8);
-    width: 100%;
-    padding: var(--space-6) var(--space-10);
-    background: none;
-    border: none;
-    cursor: pointer;
-    transition: background var(--transition-fast);
-  }
-
-  .family-item:hover {
-    background: var(--ui-hover);
-  }
-
-  .family-item.active {
-    background: var(--ui-hover-high);
-    box-shadow: inset 3px 0 0 var(--ui-text-accent);
-  }
-
-  .family-item.active .family-label {
-    color: var(--ui-text-accent);
-  }
-
-  .family-swatches {
-    display: flex;
-    gap: 2px;
-  }
-
-  .mini-swatch {
-    width: 0.75rem;
-    height: 0.75rem;
-    border-radius: 2px;
-  }
-
-  .family-label {
-    flex: 1;
-    font-size: var(--font-sm);
-    color: var(--ui-text-primary);
-    text-align: left;
-  }
-
-  .family-arrow {
-    font-size: 0.5rem;
-    color: var(--ui-text-muted);
-  }
-
-  .step-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: var(--space-4);
-    padding: var(--space-8);
-  }
-
-  .step-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--space-2);
-    padding: var(--space-4);
-    background: none;
-    border: 1px solid transparent;
-    border-radius: var(--radius-sm);
-    cursor: pointer;
-    transition: all var(--transition-fast);
-  }
-
-  .step-item:hover {
-    background: var(--ui-hover);
-    border-color: var(--ui-border-default);
-  }
-
-  .step-item.active {
-    border-color: var(--ui-text-accent);
-    border-width: 2px;
-    background: var(--ui-hover-high);
-    padding: 3px;
-  }
-
-  .step-swatch {
-    width: 2rem;
-    height: 1.5rem;
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--ui-border-faint);
-  }
-
-  .step-label {
-    font-size: 0.5625rem;
-    color: var(--ui-text-tertiary);
-    font-family: var(--ui-font-mono);
-  }
-</style>

package/src/showcase/TokenMap.svelte

@@ -1,54 +0,0 @@
-<script lang="ts">
-  import PaletteSelector from './PaletteSelector.svelte';
-
-  export let title: string = '';
-  export let tokens: { label: string; variable: string }[];
-</script>
-
-<div class="token-group">
-  {#if title}
-    <span class="token-group-title">{title}</span>
-  {/if}
-  <div class="token-grid">
-    {#each tokens as token}
-      <div class="token-entry">
-        <PaletteSelector variable={token.variable} label={token.label} on:change />
-        <code class="token-var">{token.variable}</code>
-      </div>
-    {/each}
-  </div>
-</div>
-
-<style>
-  .token-group {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-6);
-  }
-
-  .token-group-title {
-    font-size: var(--font-xs);
-    font-weight: var(--font-weight-semibold);
-    color: var(--ui-text-tertiary);
-    font-family: var(--ui-font-mono);
-  }
-
-  .token-grid {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-8);
-  }
-
-  .token-entry {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-  }
-
-  .token-var {
-    font-size: 0.5625rem;
-    color: var(--ui-text-muted);
-    font-family: var(--ui-font-mono);
-    padding-left: var(--space-2);
-  }
-</style>