@motion-proto/live-tokens 0.1.1 → 0.3.1

package/src/ui/sections/TokenScaleTable.svelte

@@ -0,0 +1,332 @@
+<script lang="ts">
+  /**
+   * Parameterised token-display table.
+   *
+   * Replaces the seven hand-listed scales (spacing, border-width, radius,
+   * font-size, font-weight, line-height, icon-size) in VariablesTab with one
+   * component. Each variant renders the same `(token-variable, token-value)`
+   * pair plus a kind-specific preview swatch.
+   *
+   * Values are read live via getComputedStyle (passed in by the parent through
+   * `tokens`), so tokens.css remains the single source of truth.
+   */
+  import { createEventDispatcher } from 'svelte';
+  import { editorState } from '../../lib/editorStore';
+
+  interface TokenItem {
+    variable: string;
+    value: string;
+  }
+
+  /** Visual layout variant. Each variant matches one of the seven scales the
+   *  parent renders; the markup differs only in the preview swatch. */
+  type ScaleKind =
+    | 'spacing'      // horizontal bar sized by width: var(--xx)
+    | 'border'       // horizontal bar sized by height: var(--xx)
+    | 'radius'       // square box with border-radius: var(--xx)
+    | 'font-size'    // "Ag" text sized by font-size: var(--xx)
+    | 'font-weight'  // "Ag" text weighted by font-weight: var(--xx)
+    | 'line-height'  // no preview, table-only rows
+    | 'icon-size';   // star icon sized by font-size: var(--xx)
+
+  export let kind: ScaleKind;
+  /** Var names to resolve via getComputedStyle. Mutually exclusive with `tokens`. */
+  export let vars: readonly string[] | undefined = undefined;
+  /** Pre-built token list. Use when values are static (e.g. duration/z-index/opacity
+   *  literals) and don't need live CSS resolution. Mutually exclusive with `vars`. */
+  export let tokens: TokenItem[] | undefined = undefined;
+  /** Bumped by the parent when the live CSS values may have changed (breakpoint
+   *  flip). Triggers re-resolution when reading via `vars`. */
+  export let liveVersion: number = 0;
+  /** When provided, the parent owns the copy-flash UI (pass copiedVar through). */
+  export let copiedVar: string | null = null;
+
+  const dispatch = createEventDispatcher<{ copy: string }>();
+  function copy(v: string) { dispatch('copy', v); }
+
+  function readVar(name: string): string {
+    if (typeof document === 'undefined') return '';
+    return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  }
+
+  function formatValueHint(raw: string): string {
+    if (!raw) return '';
+    if (raw === '9999px') return '9999px (pill)';
+    const rem = raw.match(/^(-?[\d.]+)rem$/);
+    if (rem) {
+      const px = Math.round(parseFloat(rem[1]) * 16 * 100) / 100;
+      return `${raw} (${px}px)`;
+    }
+    return raw;
+  }
+
+  // Re-read whenever liveVersion bumps OR the editor mutates any CSS var
+  // (editor edits fan out via cssVarSync to :root). Depending on $editorState
+  // keeps the display in sync with user edits for free.
+  let resolved: TokenItem[] = [];
+  $: {
+    liveVersion;
+    $editorState;
+    if (tokens) {
+      resolved = tokens;
+    } else if (vars) {
+      resolved = vars.map((variable) => ({ variable, value: formatValueHint(readVar(variable)) }));
+    } else {
+      resolved = [];
+    }
+  }
+</script>
+
+{#if kind === 'spacing'}
+  <div class="spacing-grid">
+    {#each resolved as token}
+      <div class="spacing-item">
+        <div class="spacing-bar" style="width: var({token.variable}); min-width: 2px;"></div>
+        <div class="token-info">
+          <button class="token-variable copyable" class:copied={copiedVar === token.variable} on:click={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
+          <span class="token-value">{token.value}</span>
+        </div>
+      </div>
+    {/each}
+  </div>
+{:else if kind === 'border'}
+  <div class="spacing-grid">
+    {#each resolved as token}
+      <div class="spacing-item">
+        <div class="border-width-bar" style="height: var({token.variable});"></div>
+        <div class="token-info">
+          <button class="token-variable copyable" class:copied={copiedVar === token.variable} on:click={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
+          <span class="token-value">{token.value}</span>
+        </div>
+      </div>
+    {/each}
+  </div>
+{:else if kind === 'radius'}
+  <div class="radius-grid">
+    {#each resolved as token}
+      <div class="radius-item">
+        <div class="radius-box" style="border-radius: var({token.variable});"></div>
+        <div class="token-info">
+          <button class="token-variable copyable" class:copied={copiedVar === token.variable} on:click={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
+          <span class="token-value">{token.value}</span>
+        </div>
+      </div>
+    {/each}
+  </div>
+{:else if kind === 'font-size'}
+  <div class="font-size-demos">
+    {#each resolved as token}
+      <div class="font-size-item">
+        <span class="font-size-preview" style="font-size: var({token.variable});">Ag</span>
+        <div class="token-info">
+          <button class="token-variable copyable" class:copied={copiedVar === token.variable} on:click={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
+          <span class="token-value">{token.value}</span>
+        </div>
+      </div>
+    {/each}
+  </div>
+{:else if kind === 'font-weight'}
+  <div class="font-weight-demos">
+    {#each resolved as token}
+      <div class="font-weight-item">
+        <span class="font-weight-preview" style="font-weight: var({token.variable});">Ag</span>
+        <div class="token-info">
+          <button class="token-variable copyable" class:copied={copiedVar === token.variable} on:click={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
+          <span class="token-value">{token.value}</span>
+        </div>
+      </div>
+    {/each}
+  </div>
+{:else if kind === 'line-height'}
+  <div class="token-table">
+    {#each resolved as token}
+      <div class="token-row">
+        <button class="token-variable copyable" class:copied={copiedVar === token.variable} on:click={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
+        <span class="token-value">{token.value}</span>
+      </div>
+    {/each}
+  </div>
+{:else if kind === 'icon-size'}
+  <div class="font-size-demos">
+    {#each resolved as token}
+      <div class="font-size-item">
+        <span class="icon-size-preview" style="font-size: var({token.variable});">
+          <i class="fas fa-star"></i>
+        </span>
+        <div class="token-info">
+          <button class="token-variable copyable" class:copied={copiedVar === token.variable} on:click={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
+          <span class="token-value">{token.value}</span>
+        </div>
+      </div>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .token-info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-2);
+  }
+
+  .token-variable {
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-text-tertiary);
+    font-family: var(--ui-font-mono);
+  }
+
+  .token-variable.copyable {
+    all: unset;
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-text-tertiary);
+    font-family: var(--ui-font-mono);
+    cursor: pointer;
+    transition: color var(--ui-transition-fast);
+  }
+
+  .token-variable.copyable:hover {
+    color: var(--ui-text-accent);
+  }
+
+  .token-variable.copyable.copied {
+    color: var(--ui-text-success);
+  }
+
+  .token-value {
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-text-muted);
+  }
+
+  /* Spacing & Borders */
+  .spacing-grid {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-6);
+  }
+
+  .spacing-item {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-12);
+  }
+
+  .spacing-bar {
+    height: 1.25rem;
+    background: var(--ui-text-accent);
+    border-radius: var(--ui-radius-sm);
+    flex-shrink: 0;
+  }
+
+  .border-width-bar {
+    width: 4rem;
+    background: var(--ui-text-accent);
+    flex-shrink: 0;
+  }
+
+  .spacing-item .token-info {
+    flex-direction: row;
+    gap: var(--ui-space-8);
+    align-items: baseline;
+  }
+
+  /* Border Radius */
+  .radius-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+    gap: var(--ui-space-16);
+  }
+
+  .radius-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--ui-space-8);
+  }
+
+  .radius-box {
+    width: 3.5rem;
+    height: 3.5rem;
+    background: none;
+    border: 2px solid var(--ui-border-medium);
+  }
+
+  /* Font sizes / icon sizes */
+  .font-size-demos {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+  }
+
+  .font-size-item {
+    display: flex;
+    align-items: baseline;
+    gap: var(--ui-space-12);
+  }
+
+  .font-size-preview {
+    color: var(--ui-text-primary);
+    font-family: var(--ui-font-sans);
+    line-height: 1;
+    min-width: 3rem;
+  }
+
+  .icon-size-preview {
+    color: var(--ui-text-primary);
+    line-height: 1;
+    min-width: 3rem;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .font-size-item .token-info {
+    flex-direction: row;
+    gap: var(--ui-space-8);
+    align-items: baseline;
+  }
+
+  /* Font weights */
+  .font-weight-demos {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+  }
+
+  .font-weight-item {
+    display: flex;
+    align-items: baseline;
+    gap: var(--ui-space-12);
+  }
+
+  .font-weight-preview {
+    font-size: var(--ui-font-size-xl);
+    font-family: var(--ui-font-sans);
+    color: var(--ui-text-primary);
+    line-height: 1;
+    min-width: 2rem;
+  }
+
+  .font-weight-item .token-info {
+    flex-direction: row;
+    gap: var(--ui-space-8);
+    align-items: baseline;
+  }
+
+  /* Token Table (line heights, durations, z-indexes, opacity) */
+  .token-table {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+  }
+
+  .token-row {
+    display: flex;
+    align-items: baseline;
+    gap: var(--ui-space-12);
+    padding: var(--ui-space-4) 0;
+    border-bottom: 1px solid var(--ui-border-faint);
+  }
+
+  .token-row:last-child {
+    border-bottom: none;
+  }
+</style>

package/src/ui/sections/tokenScales.ts

@@ -0,0 +1,81 @@
+/**
+ * Variable-name lists and static utility-token data for the scales rendered
+ * in VariablesTab. Pulled out so the parent stays focused on layout +
+ * orchestration. Values are resolved live via getComputedStyle inside
+ * TokenScaleTable, so tokens.css remains the single source of truth.
+ */
+
+export const SPACING_VARS = [
+  '--space-2', '--space-4', '--space-6', '--space-8', '--space-10',
+  '--space-12', '--space-16', '--space-20', '--space-24', '--space-32',
+  '--space-48',
+] as const;
+
+export const BORDER_WIDTH_VARS = [
+  '--border-width-0', '--border-width-1', '--border-width-2', '--border-width-3',
+  '--border-width-4', '--border-width-5', '--border-width-6', '--border-width-8',
+  '--border-width-10', '--border-width-12', '--border-width-16', '--border-width-20',
+  '--border-width-24',
+] as const;
+
+export const RADIUS_VARS = [
+  '--radius-none', '--radius-sm', '--radius-md', '--radius-lg', '--radius-xl',
+  '--radius-2xl', '--radius-3xl', '--radius-4xl', '--radius-full',
+] as const;
+
+export const FONT_SIZE_VARS = [
+  '--font-size-xs', '--font-size-sm', '--font-size-md', '--font-size-lg',
+  '--font-size-xl', '--font-size-2xl', '--font-size-3xl', '--font-size-4xl',
+  '--font-size-5xl', '--font-size-6xl',
+] as const;
+
+export const ICON_SIZE_VARS = [
+  '--icon-size-xs', '--icon-size-sm', '--icon-size-md', '--icon-size-lg',
+  '--icon-size-xl', '--icon-size-2xl', '--icon-size-3xl', '--icon-size-4xl',
+  '--icon-size-5xl', '--icon-size-6xl',
+] as const;
+
+export const FONT_WEIGHT_VARS = [
+  '--font-weight-thin', '--font-weight-extralight', '--font-weight-light',
+  '--font-weight-normal', '--font-weight-medium', '--font-weight-semibold',
+  '--font-weight-bold', '--font-weight-extrabold', '--font-weight-black',
+] as const;
+
+export const LINE_HEIGHT_VARS = [
+  '--line-height-tight', '--line-height-snug', '--line-height-normal',
+  '--line-height-relaxed', '--line-height-loose',
+] as const;
+
+export interface TokenItem {
+  variable: string;
+  value: string;
+}
+
+/** Static utility tokens — values are baked at the JS layer (not resolved
+ *  from CSS) because they're meaningful labels, not the result of computed
+ *  CSS lookups. */
+export const DURATION_TOKENS: TokenItem[] = [
+  { variable: '--duration-75', value: '75ms' },
+  { variable: '--duration-150', value: '150ms' },
+  { variable: '--duration-200', value: '200ms' },
+  { variable: '--duration-300', value: '300ms' },
+  { variable: '--duration-500', value: '500ms' },
+  { variable: '--duration-750', value: '750ms' },
+  { variable: '--duration-1000', value: '1000ms' },
+];
+
+export const Z_INDEX_TOKENS: TokenItem[] = [
+  { variable: '--z-base', value: '0' },
+  { variable: '--z-dropdown', value: '100' },
+  { variable: '--z-sticky', value: '200' },
+  { variable: '--z-overlay', value: '1000' },
+  { variable: '--z-modal', value: '1100' },
+  { variable: '--z-popover', value: '1200' },
+  { variable: '--z-tooltip', value: '1300' },
+];
+
+export const OPACITY_TOKENS: TokenItem[] = [
+  { variable: '--opacity-disabled', value: '0.6' },
+  { variable: '--opacity-hover', value: '0.8' },
+  { variable: '--opacity-muted', value: '0.5' },
+];

package/src/ui/variantScales.ts

@@ -0,0 +1,108 @@
+/**
+ * Shared scale definitions consumed by `UIVariantSelector`. Each entry pairs
+ * a CSS-var prefix with the option list that drives its dropdown. Spread the
+ * entry into the selector at the call site:
+ *
+ *   <UIVariantSelector {variable} {component} {canBeLinked} {...BLUR} on:change />
+ *
+ * Replaces the per-scale wrappers (UIBlurSelector / UIRadiusSelector / etc.)
+ * that were 35–50 lines of identical glue around the same data.
+ */
+
+export interface VariantScaleOption {
+  key: string;
+  label: string;
+  /** Resolved value shown in the option's `meta` column. Omit for label-only scales. */
+  value?: string;
+}
+
+export interface VariantScaleEntry {
+  varPrefix: string;
+  options: ReadonlyArray<VariantScaleOption>;
+}
+
+export const BLUR: VariantScaleEntry = {
+  varPrefix: '--blur-',
+  options: [
+    { key: 'none', label: 'None', value: '0' },
+    { key: 'sm', label: 'Small', value: '4px' },
+    { key: 'md', label: 'Medium', value: '8px' },
+    { key: 'lg', label: 'Large', value: '16px' },
+    { key: 'xl', label: 'X-Large', value: '24px' },
+    { key: '2xl', label: '2X-Large', value: '32px' },
+  ],
+};
+
+export const BORDER_WIDTH: VariantScaleEntry = {
+  varPrefix: '--border-width-',
+  options: [
+    { key: '0', label: '0', value: '0' },
+    { key: '1', label: '1', value: '1px' },
+    { key: '2', label: '2', value: '2px' },
+    { key: '3', label: '3', value: '3px' },
+    { key: '4', label: '4', value: '4px' },
+    { key: '5', label: '5', value: '5px' },
+    { key: '6', label: '6', value: '6px' },
+    { key: '8', label: '8', value: '8px' },
+    { key: '10', label: '10', value: '10px' },
+    { key: '12', label: '12', value: '12px' },
+    { key: '16', label: '16', value: '16px' },
+    { key: '20', label: '20', value: '20px' },
+    { key: '24', label: '24', value: '24px' },
+  ],
+};
+
+export const DOT_SIZE: VariantScaleEntry = {
+  varPrefix: '--dot-size-',
+  options: [
+    { key: '0', label: 'None', value: '0%' },
+    { key: '25', label: '25%', value: '25%' },
+    { key: '50', label: '50%', value: '50%' },
+    { key: '75', label: '75%', value: '75%' },
+    { key: '100', label: '100%', value: '100%' },
+  ],
+};
+
+export const RADIUS: VariantScaleEntry = {
+  varPrefix: '--radius-',
+  options: [
+    { key: 'none', label: 'None', value: '0' },
+    { key: 'sm', label: 'Small', value: '0.125rem' },
+    { key: 'md', label: 'Medium', value: '0.25rem' },
+    { key: 'lg', label: 'Large', value: '0.375rem' },
+    { key: 'xl', label: 'X-Large', value: '0.5rem' },
+    { key: '2xl', label: '2X-Large', value: '0.625rem' },
+    { key: '3xl', label: '3X-Large', value: '0.75rem' },
+    { key: '4xl', label: '4X-Large', value: '1.25rem' },
+    { key: 'full', label: 'Full', value: '9999px' },
+  ],
+};
+
+export const SHADOW: VariantScaleEntry = {
+  varPrefix: '--shadow-',
+  options: [
+    { key: 'none', label: 'None' },
+    { key: 'sm', label: 'Small' },
+    { key: 'md', label: 'Medium' },
+    { key: 'lg', label: 'Large' },
+    { key: 'xl', label: 'X-Large' },
+    { key: '2xl', label: '2X-Large' },
+  ],
+};
+
+/** Used by `*-divider-height` / `*-track-height` variables; values come from the `--space-*` scale,
+ *  not a dedicated `--divider-height-*` scale. The label-set differs from BORDER_WIDTH so a divider
+ *  can pick from larger heights (up to 100%). */
+export const DIVIDER_HEIGHT: VariantScaleEntry = {
+  varPrefix: '--space-',
+  options: [
+    { key: '0', label: 'None', value: '0px' },
+    { key: '8', label: 'XS', value: '0.5rem' },
+    { key: '10', label: 'Small', value: '0.625rem' },
+    { key: '12', label: 'Medium', value: '0.75rem' },
+    { key: '16', label: 'Large', value: '1rem' },
+    { key: '20', label: 'XL', value: '1.25rem' },
+    { key: '24', label: '2XL', value: '1.5rem' },
+    { key: 'full', label: 'Full', value: '100%' },
+  ],
+};

package/src/components/DetailNav.svelte

@@ -1,78 +0,0 @@
-<script lang="ts">
-  export let backHref: string = '/';
-  export let backLabel: string = 'All Modules';
-</script>
-
-<nav class="detail-nav">
-  <div class="nav-left">
-    <a href={backHref} class="back-link">
-      <i class="fa-solid fa-arrow-left"></i>
-      <span>{backLabel}</span>
-    </a>
-  </div>
-
-  {#if $$slots.default}
-    <div class="nav-right">
-      <slot />
-    </div>
-  {/if}
-</nav>
-
-<style lang="scss">
-  .detail-nav {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    margin-bottom: 24px;
-    flex-wrap: wrap;
-    position: sticky;
-    top: 96px;
-    z-index: 50;
-    background: var(--empty);
-    padding: 12px 0;
-  }
-
-  .nav-left {
-    flex-shrink: 0;
-  }
-
-  .back-link {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    font-family: var(--font-sans);
-    font-size: var(--font-lg);
-    font-weight: var(--font-weight-semibold);
-    color: var(--text-primary);
-    text-decoration: none;
-    transition: color var(--transition-fast);
-    letter-spacing: 0.02em;
-
-    &:hover {
-      color: var(--text-primary-color);
-    }
-
-    :global(i) {
-      font-size: 11px;
-      transition: transform var(--transition-fast);
-    }
-
-    &:hover :global(i) {
-      transform: translateX(-3px);
-    }
-  }
-
-  .nav-right {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    flex-shrink: 0;
-  }
-
-  @media (max-width: 600px) {
-    .detail-nav {
-      top: 48px;
-    }
-  }
-</style>

package/src/components/Toggle.svelte

@@ -1,86 +0,0 @@
-<script lang="ts">
-  export let checked: boolean = false;
-  export let disabled: boolean = false;
-  export let label: string = '';
-</script>
-
-<label class="toggle" class:disabled>
-  <button
-    type="button"
-    role="switch"
-    aria-checked={checked}
-    {disabled}
-    class="toggle-track"
-    class:on={checked}
-    on:click={() => { if (!disabled) checked = !checked; }}
-  >
-    <span class="toggle-thumb" />
-  </button>
-  {#if label}
-    <span class="toggle-label">{label}</span>
-  {/if}
-</label>
-
-<style lang="scss">
-  .toggle {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-8);
-    cursor: pointer;
-    user-select: none;
-
-    &.disabled {
-      opacity: var(--opacity-disabled);
-      cursor: not-allowed;
-    }
-  }
-
-  .toggle-track {
-    position: relative;
-    width: 2.25rem;
-    height: 1.25rem;
-    border-radius: 0.625rem;
-    border: 1px solid var(--ui-border-default);
-    background: var(--ui-surface-low);
-    padding: 0;
-    cursor: inherit;
-    transition: background var(--transition-fast), border-color var(--transition-fast);
-    flex-shrink: 0;
-
-    &.on {
-      background: var(--ui-toggle);
-      border-color: var(--ui-border-medium);
-    }
-
-    &:hover:not(:disabled) {
-      border-color: var(--ui-border-medium);
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--border-primary);
-      outline-offset: 2px;
-    }
-  }
-
-  .toggle-thumb {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 0.875rem;
-    height: 0.875rem;
-    border-radius: 50%;
-    background: var(--ui-text-secondary);
-    transition: transform var(--transition-fast), background var(--transition-fast);
-
-    .on & {
-      transform: translateX(1rem);
-      background: var(--text-primary);
-    }
-  }
-
-  .toggle-label {
-    font-size: var(--font-md);
-    color: var(--ui-text-secondary);
-    line-height: 1;
-  }
-</style>