@motion-proto/live-tokens 0.1.0 → 0.3.1

package/src/showcase/demos/StandardButtonsDemo.svelte

@@ -1,457 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import Button from '../../components/Button.svelte';
-  import TokenMap from '../TokenMap.svelte';
-  import { removeCssVar } from '../../lib/cssVarSync';
-
-  const variantTokens: Record<string, { label: string; variable: string }[]> = {
-    primary: [
-      { label: 'BG', variable: '--surface-primary-high' },
-      { label: 'Border', variable: '--border-primary' },
-      { label: 'Text', variable: '--text-primary' },
-      { label: 'Hover BG', variable: '--surface-primary-higher' },
-      { label: 'Hover Border', variable: '--border-primary-strong' },
-    ],
-    secondary: [
-      { label: 'BG', variable: '--surface-neutral-high' },
-      { label: 'Border', variable: '--border-neutral-default' },
-      { label: 'Hover BG', variable: '--surface-neutral-higher' },
-      { label: 'Hover Border', variable: '--border-neutral-strong' },
-    ],
-    outline: [
-      { label: 'Border', variable: '--border-neutral-default' },
-      { label: 'Hover BG', variable: '--hover-low' },
-      { label: 'Hover Border', variable: '--border-neutral-strong' },
-    ],
-    small_secondary: [
-      { label: 'BG', variable: '--hover' },
-      { label: 'Border', variable: '--border-neutral-default' },
-      { label: 'Hover BG', variable: '--hover-high' },
-      { label: 'Hover Border', variable: '--border-neutral-strong' },
-    ],
-    success: [
-      { label: 'BG', variable: '--surface-success-low' },
-      { label: 'Border', variable: '--border-success' },
-      { label: 'Text', variable: '--text-success' },
-    ],
-    danger: [
-      { label: 'BG', variable: '--surface-danger-low' },
-      { label: 'Border', variable: '--border-danger' },
-      { label: 'Text', variable: '--text-danger' },
-    ],
-    warning: [
-      { label: 'BG', variable: '--surface-warning-low' },
-      { label: 'Border', variable: '--border-warning' },
-      { label: 'Text', variable: '--text-warning' },
-    ],
-  };
-
-  let resetKeys: Record<string, number> = {};
-
-  function resetVariant(key: string) {
-    for (const t of variantTokens[key]) {
-      removeCssVar(t.variable);
-    }
-    resetKeys[key] = (resetKeys[key] || 0) + 1;
-    resetKeys = resetKeys;
-  }
-
-  let copiedPrompts: Record<string, string> = {};
-
-  function copyVariantPrompt(key: string) {
-    const tokens = variantTokens[key];
-    const changes: string[] = [];
-    for (const t of tokens) {
-      const override = document.documentElement.style.getPropertyValue(t.variable).trim();
-      if (override) {
-        changes.push(`- Change ${t.label.toLowerCase()} from \`var(${t.variable})\` to \`${override}\``);
-      }
-    }
-    if (changes.length === 0) {
-      copiedPrompts[key] = '';
-      copiedPrompts = copiedPrompts;
-      return;
-    }
-    const prompt = `In \`src/components/Button.svelte\`, update the **${key}** variant:\n${changes.join('\n')}`;
-    navigator.clipboard.writeText(prompt);
-    copiedPrompts[key] = prompt;
-    copiedPrompts = copiedPrompts;
-  }
-
-  function variantHasOverrides(key: string): boolean {
-    for (const t of variantTokens[key]) {
-      if (document.documentElement.style.getPropertyValue(t.variable).trim()) return true;
-    }
-    return false;
-  }
-
-  let dirtyVariants: Record<string, boolean> = {};
-
-  function updateDirtyState() {
-    const next: Record<string, boolean> = {};
-    for (const key of Object.keys(variantTokens)) {
-      next[key] = variantHasOverrides(key);
-    }
-    dirtyVariants = next;
-  }
-
-  onMount(updateDirtyState);
-
-  $: if (resetKeys) updateDirtyState();
-</script>
-
-<div class="demo-block">
-  <h2 class="component-title">Standard Button Component</h2>
-  <p class="demo-description">
-    Reusable button component with multiple variants and sizes. Import from <code>components/Button.svelte</code>
-  </p>
-
-  <div class="demo-section variant-group">
-    <div class="variant-header">
-      <h3 class="demo-subtitle">Primary</h3>
-      <div class="variant-actions">
-        <button class="variant-action-btn" on:click={() => resetVariant('primary')} title="Reset to defaults">
-          <i class="fas fa-undo"></i> Reset
-        </button>
-        <button class="variant-action-btn" on:click={() => copyVariantPrompt('primary')} title="Copy prompt" disabled={!dirtyVariants['primary']}>
-          <i class="fas fa-copy"></i> Copy
-        </button>
-      </div>
-    </div>
-    <div class="button-showcase-grid">
-      <div class="button-showcase-item">
-        <Button variant="primary">Primary</Button>
-        <span class="variant-label">primary</span>
-      </div>
-      <div class="button-showcase-item">
-        <Button variant="primary" icon="fas fa-star" iconPosition="left">With Icon</Button>
-      </div>
-      <div class="button-showcase-item">
-        <Button variant="primary" size="default">Default Size</Button>
-        <span class="variant-label">size="default"</span>
-      </div>
-      <div class="button-showcase-item">
-        <Button variant="primary" size="small">Small Size</Button>
-        <span class="variant-label">size="small"</span>
-      </div>
-      <div class="button-showcase-item">
-        <Button variant="primary" disabled>Disabled</Button>
-        <span class="variant-label">disabled</span>
-      </div>
-      <div class="button-showcase-item">
-        <Button variant="primary" fullWidth>Full Width</Button>
-        <span class="variant-label">fullWidth</span>
-      </div>
-    </div>
-    {#key resetKeys['primary']}
-      <TokenMap title="primary" tokens={variantTokens['primary']} on:change={updateDirtyState} />
-    {/key}
-    {#if copiedPrompts['primary']}
-      <div class="prompt-preview-wrapper">
-        <button class="prompt-close" on:click={() => { copiedPrompts['primary'] = ''; copiedPrompts = copiedPrompts; }}><i class="fas fa-times"></i></button>
-        <pre class="prompt-preview">{copiedPrompts['primary']}</pre>
-      </div>
-    {/if}
-  </div>
-
-  <div class="demo-section variant-group">
-    <div class="variant-header">
-      <h3 class="demo-subtitle">Secondary</h3>
-      <div class="variant-actions">
-        <button class="variant-action-btn" on:click={() => resetVariant('secondary')} title="Reset to defaults">
-          <i class="fas fa-undo"></i> Reset
-        </button>
-        <button class="variant-action-btn" on:click={() => copyVariantPrompt('secondary')} title="Copy prompt" disabled={!dirtyVariants['secondary']}>
-          <i class="fas fa-copy"></i> Copy
-        </button>
-      </div>
-    </div>
-    <div class="button-showcase-grid">
-      <div class="button-showcase-item">
-        <Button variant="secondary">Secondary</Button>
-        <span class="variant-label">secondary</span>
-      </div>
-      <div class="button-showcase-item">
-        <Button variant="secondary" icon="fas fa-check" iconPosition="right">Icon Right</Button>
-      </div>
-    </div>
-    {#key resetKeys['secondary']}
-      <TokenMap title="secondary" tokens={variantTokens['secondary']} on:change={updateDirtyState} />
-    {/key}
-    {#if copiedPrompts['secondary']}
-      <div class="prompt-preview-wrapper">
-        <button class="prompt-close" on:click={() => { copiedPrompts['secondary'] = ''; copiedPrompts = copiedPrompts; }}><i class="fas fa-times"></i></button>
-        <pre class="prompt-preview">{copiedPrompts['secondary']}</pre>
-      </div>
-    {/if}
-  </div>
-
-  <div class="demo-section variant-group">
-    <div class="variant-header">
-      <h3 class="demo-subtitle">Outline</h3>
-      <div class="variant-actions">
-        <button class="variant-action-btn" on:click={() => resetVariant('outline')} title="Reset to defaults">
-          <i class="fas fa-undo"></i> Reset
-        </button>
-        <button class="variant-action-btn" on:click={() => copyVariantPrompt('outline')} title="Copy prompt" disabled={!dirtyVariants['outline']}>
-          <i class="fas fa-copy"></i> Copy
-        </button>
-      </div>
-    </div>
-    <div class="button-showcase-grid">
-      <div class="button-showcase-item">
-        <Button variant="outline">Outline</Button>
-        <span class="variant-label">outline</span>
-      </div>
-    </div>
-    {#key resetKeys['outline']}
-      <TokenMap title="outline" tokens={variantTokens['outline']} on:change={updateDirtyState} />
-    {/key}
-    {#if copiedPrompts['outline']}
-      <div class="prompt-preview-wrapper">
-        <button class="prompt-close" on:click={() => { copiedPrompts['outline'] = ''; copiedPrompts = copiedPrompts; }}><i class="fas fa-times"></i></button>
-        <pre class="prompt-preview">{copiedPrompts['outline']}</pre>
-      </div>
-    {/if}
-  </div>
-
-  <div class="demo-section variant-group">
-    <div class="variant-header">
-      <h3 class="demo-subtitle">Small Secondary</h3>
-      <div class="variant-actions">
-        <button class="variant-action-btn" on:click={() => resetVariant('small_secondary')} title="Reset to defaults">
-          <i class="fas fa-undo"></i> Reset
-        </button>
-        <button class="variant-action-btn" on:click={() => copyVariantPrompt('small_secondary')} title="Copy prompt" disabled={!dirtyVariants['small_secondary']}>
-          <i class="fas fa-copy"></i> Copy
-        </button>
-      </div>
-    </div>
-    <div class="button-showcase-grid">
-      <div class="button-showcase-item">
-        <Button variant="small_secondary">Small Secondary</Button>
-        <span class="variant-label">small_secondary</span>
-      </div>
-    </div>
-    {#key resetKeys['small_secondary']}
-      <TokenMap title="small_secondary" tokens={variantTokens['small_secondary']} on:change={updateDirtyState} />
-    {/key}
-    {#if copiedPrompts['small_secondary']}
-      <div class="prompt-preview-wrapper">
-        <button class="prompt-close" on:click={() => { copiedPrompts['small_secondary'] = ''; copiedPrompts = copiedPrompts; }}><i class="fas fa-times"></i></button>
-        <pre class="prompt-preview">{copiedPrompts['small_secondary']}</pre>
-      </div>
-    {/if}
-  </div>
-
-  <div class="demo-section variant-group">
-    <div class="variant-header">
-      <h3 class="demo-subtitle">Success</h3>
-      <div class="variant-actions">
-        <button class="variant-action-btn" on:click={() => resetVariant('success')} title="Reset to defaults">
-          <i class="fas fa-undo"></i> Reset
-        </button>
-        <button class="variant-action-btn" on:click={() => copyVariantPrompt('success')} title="Copy prompt" disabled={!dirtyVariants['success']}>
-          <i class="fas fa-copy"></i> Copy
-        </button>
-      </div>
-    </div>
-    <div class="button-showcase-grid">
-      <div class="button-showcase-item">
-        <Button variant="success">Success</Button>
-        <span class="variant-label">success</span>
-      </div>
-      <div class="button-showcase-item">
-        <Button variant="success" icon="fas fa-plus">Add Item</Button>
-      </div>
-    </div>
-    {#key resetKeys['success']}
-      <TokenMap title="success" tokens={variantTokens['success']} on:change={updateDirtyState} />
-    {/key}
-    {#if copiedPrompts['success']}
-      <div class="prompt-preview-wrapper">
-        <button class="prompt-close" on:click={() => { copiedPrompts['success'] = ''; copiedPrompts = copiedPrompts; }}><i class="fas fa-times"></i></button>
-        <pre class="prompt-preview">{copiedPrompts['success']}</pre>
-      </div>
-    {/if}
-  </div>
-
-  <div class="demo-section variant-group">
-    <div class="variant-header">
-      <h3 class="demo-subtitle">Danger</h3>
-      <div class="variant-actions">
-        <button class="variant-action-btn" on:click={() => resetVariant('danger')} title="Reset to defaults">
-          <i class="fas fa-undo"></i> Reset
-        </button>
-        <button class="variant-action-btn" on:click={() => copyVariantPrompt('danger')} title="Copy prompt" disabled={!dirtyVariants['danger']}>
-          <i class="fas fa-copy"></i> Copy
-        </button>
-      </div>
-    </div>
-    <div class="button-showcase-grid">
-      <div class="button-showcase-item">
-        <Button variant="danger">Danger</Button>
-        <span class="variant-label">danger</span>
-      </div>
-      <div class="button-showcase-item">
-        <Button variant="danger" icon="fas fa-trash">Delete</Button>
-      </div>
-    </div>
-    {#key resetKeys['danger']}
-      <TokenMap title="danger" tokens={variantTokens['danger']} on:change={updateDirtyState} />
-    {/key}
-    {#if copiedPrompts['danger']}
-      <div class="prompt-preview-wrapper">
-        <button class="prompt-close" on:click={() => { copiedPrompts['danger'] = ''; copiedPrompts = copiedPrompts; }}><i class="fas fa-times"></i></button>
-        <pre class="prompt-preview">{copiedPrompts['danger']}</pre>
-      </div>
-    {/if}
-  </div>
-
-  <div class="demo-section variant-group">
-    <div class="variant-header">
-      <h3 class="demo-subtitle">Warning</h3>
-      <div class="variant-actions">
-        <button class="variant-action-btn" on:click={() => resetVariant('warning')} title="Reset to defaults">
-          <i class="fas fa-undo"></i> Reset
-        </button>
-        <button class="variant-action-btn" on:click={() => copyVariantPrompt('warning')} title="Copy prompt" disabled={!dirtyVariants['warning']}>
-          <i class="fas fa-copy"></i> Copy
-        </button>
-      </div>
-    </div>
-    <div class="button-showcase-grid">
-      <div class="button-showcase-item">
-        <Button variant="warning">Warning</Button>
-        <span class="variant-label">warning</span>
-      </div>
-    </div>
-    {#key resetKeys['warning']}
-      <TokenMap title="warning" tokens={variantTokens['warning']} on:change={updateDirtyState} />
-    {/key}
-    {#if copiedPrompts['warning']}
-      <div class="prompt-preview-wrapper">
-        <button class="prompt-close" on:click={() => { copiedPrompts['warning'] = ''; copiedPrompts = copiedPrompts; }}><i class="fas fa-times"></i></button>
-        <pre class="prompt-preview">{copiedPrompts['warning']}</pre>
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style>
-  @import '../../styles/variables.css';
-
-  .variant-group {
-    padding: var(--space-16);
-    background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-faint);
-    border-radius: var(--radius-md);
-    gap: var(--space-12);
-  }
-
-  .variant-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .variant-header .demo-subtitle {
-    margin: 0;
-  }
-
-  .variant-actions {
-    display: flex;
-    gap: var(--space-4);
-  }
-
-  .variant-action-btn {
-    display: flex;
-    align-items: center;
-    gap: var(--space-4);
-    padding: var(--space-4) var(--space-8);
-    background: none;
-    border: 1px solid var(--ui-border-subtle);
-    border-radius: var(--radius-sm);
-    color: var(--ui-text-muted);
-    font-size: var(--font-xs);
-    cursor: pointer;
-    transition: all var(--transition-fast);
-  }
-
-  .variant-action-btn:hover:not(:disabled) {
-    background: var(--ui-hover);
-    color: var(--ui-text-primary);
-    border-color: var(--ui-border-default);
-  }
-
-  .variant-action-btn:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
-
-  .prompt-preview-wrapper {
-    position: relative;
-  }
-
-  .prompt-close {
-    position: absolute;
-    top: var(--space-4);
-    right: var(--space-4);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.25rem;
-    height: 1.25rem;
-    padding: 0;
-    background: none;
-    border: none;
-    border-radius: var(--radius-sm);
-    color: var(--ui-text-muted);
-    font-size: 0.625rem;
-    cursor: pointer;
-    transition: all var(--transition-fast);
-  }
-
-  .prompt-close:hover {
-    background: var(--ui-hover);
-    color: var(--ui-text-primary);
-  }
-
-  .prompt-preview {
-    margin: 0;
-    padding: var(--space-8) var(--space-10);
-    padding-right: var(--space-24);
-    background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
-    border-radius: var(--radius-sm);
-    color: var(--ui-text-secondary);
-    font-size: 0.625rem;
-    font-family: var(--ui-font-mono);
-    white-space: pre-wrap;
-    word-break: break-word;
-    line-height: 1.5;
-  }
-
-  .button-showcase-grid {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-16);
-    align-items: start;
-  }
-
-  .button-showcase-item {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-8);
-    align-items: flex-start;
-  }
-
-  .variant-label {
-    font-size: var(--font-xs);
-    color: var(--ui-text-tertiary);
-    font-family: var(--ui-font-mono);
-    background: var(--ui-surface-lowest);
-    padding: var(--space-2) var(--space-6);
-    border-radius: var(--radius-sm);
-  }
-</style>

package/src/showcase/demos/TabBarDemo.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-  import TabBar from '../../components/TabBar.svelte';
-  import TokenMap from '../TokenMap.svelte';
-
-  let selectedDemoTab = 'overview';
-  const demoTabs = [
-    { id: 'overview', label: 'Overview', icon: 'fas fa-home' },
-    { id: 'details', label: 'Details', icon: 'fas fa-info-circle' },
-    { id: 'settings', label: 'Settings', icon: 'fas fa-cog' },
-    { id: 'disabled', label: 'Disabled', icon: 'fas fa-ban', disabled: true }
-  ];
-</script>
-
-<div class="demo-block">
-  <h2 class="component-title">Tab Bar Component</h2>
-  <p class="demo-description">
-    Tab navigation with icon support and disabled state. Import from <code>components/TabBar.svelte</code>
-  </p>
-
-  <div class="demo-section">
-    <TabBar
-      tabs={demoTabs}
-      selectedTab={selectedDemoTab}
-      on:tabChange={(e) => selectedDemoTab = e.detail}
-    />
-    <div class="tab-content-demo">
-      {#if selectedDemoTab === 'overview'}
-        <p style="margin: 0;">Overview tab content</p>
-      {:else if selectedDemoTab === 'details'}
-        <p style="margin: 0;">Details tab content</p>
-      {:else if selectedDemoTab === 'settings'}
-        <p style="margin: 0;">Settings tab content</p>
-      {/if}
-    </div>
-  </div>
-
-  <div class="demo-section">
-    <h3 class="demo-subtitle">Tokens</h3>
-    <TokenMap tokens={[
-      { label: 'Default Text', variable: '--text-tertiary' },
-      { label: 'Hover Text', variable: '--text-secondary' },
-      { label: 'Active Text', variable: '--text-primary' },
-      { label: 'Active Border', variable: '--color-primary-500' },
-      { label: 'Divider', variable: '--border-neutral-subtle' },
-    ]} />
-  </div>
-</div>
-
-<style>
-  @import '../../styles/variables.css';
-
-  .tab-content-demo {
-    padding: var(--space-16);
-    color: var(--ui-text-secondary);
-    background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-faint);
-    border-top: none;
-    border-radius: 0 0 var(--radius-md) var(--radius-md);
-  }
-</style>

package/src/showcase/demos/TooltipDemo.svelte

@@ -1,54 +0,0 @@
-<script lang="ts">
-  import Button from '../../components/Button.svelte';
-  import Tooltip from '../../components/Tooltip.svelte';
-  import TokenMap from '../TokenMap.svelte';
-</script>
-
-<div class="demo-block">
-  <h2 class="component-title">Tooltip Component</h2>
-  <p class="demo-description">
-    Hover tooltip with configurable position. Import from <code>components/Tooltip.svelte</code>
-  </p>
-
-  <div class="demo-section">
-    <div class="tooltip-demo-row">
-      <Tooltip text="This is a top tooltip">
-        <Button variant="outline">Hover me (top)</Button>
-      </Tooltip>
-
-      <Tooltip text="Bottom tooltip" position="bottom">
-        <Button variant="outline">Hover me (bottom)</Button>
-      </Tooltip>
-
-      <Tooltip text="Tooltips work on any element">
-        <span class="tooltip-demo-text">Hover this text</span>
-      </Tooltip>
-    </div>
-  </div>
-
-  <div class="demo-section">
-    <h3 class="demo-subtitle">Tokens</h3>
-    <TokenMap tokens={[
-      { label: 'Background', variable: '--surface-neutral-highest' },
-      { label: 'Text', variable: '--text-primary' },
-    ]} />
-  </div>
-</div>
-
-<style>
-  @import '../../styles/variables.css';
-
-  .tooltip-demo-row {
-    display: flex;
-    gap: var(--space-24);
-    align-items: center;
-    padding-top: var(--space-32);
-  }
-
-  .tooltip-demo-text {
-    color: var(--ui-text-secondary);
-    text-decoration: underline;
-    text-decoration-style: dotted;
-    cursor: help;
-  }
-</style>

package/src/showcase/editor.css

@@ -1,93 +0,0 @@
-/*
- * Design System Editor — UI Chrome
- *
- * Opaque grayscale palette for the editor itself.
- * Protected from the design-token system — these never change.
- *
- * Every showcase/editor component references these via var(--ui-*).
- * The --ui-gray-* ramp is the source of truth; semantic aliases
- * (--ui-surface-*, --ui-text-*, --ui-border-*) point into it.
- */
-
-.admin-page {
-
-  /* ── Fonts ────────────────────────────────────────────── */
-
-  /* System sans for all editor chrome — no app custom fonts */
-  --ui-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-
-  /* System monospace for variable names, hex values, code */
-  --ui-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-
-  font-family: var(--ui-font-sans);
-}
-
-/* Override the global :where(*) { font-family: var(--font-sans) }
-   from variables.css which applies directly to every element */
-.admin-page *:not([class*="fa-"]) {
-  font-family: inherit;
-}
-
-.admin-page {
-
-  /* ═══════════════════════════════════════════════════════
-     GRAYSCALE PALETTE — opaque, protected from token system
-     Lower number = darker.  Derived from the old alpha-on-black
-     values so every existing reference resolves identically.
-     ═══════════════════════════════════════════════════════ */
-
-  --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;
-
-
-  /* ── Text ────────────────────────────────────────────── */
-
-  --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);
-
-
-  /* ── Borders ─────────────────────────────────────────── */
-
-  --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);
-
-
-  /* ── Surfaces ────────────────────────────────────────── */
-
-  --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-750);
-
-
-  /* ── Hover ───────────────────────────────────────────── */
-
-  --ui-hover:           var(--ui-gray-150);
-  --ui-hover-high:      var(--ui-gray-250);
-}

package/src/showcase/index.ts

@@ -1,17 +0,0 @@
-export { default as VisualsTab } from './VisualsTab.svelte';
-export { default as VariablesTab } from './VariablesTab.svelte';
-export { default as ComponentsTab, defaultSections } from './ComponentsTab.svelte';
-export type { ComponentSection } from './ComponentsTab.svelte';
-
-export { default as PaletteEditor } from './PaletteEditor.svelte';
-export { default as PaletteSelector } from './PaletteSelector.svelte';
-export { default as ColorEditPanel } from './ColorEditPanel.svelte';
-export { default as BezierCurveEditor } from './BezierCurveEditor.svelte';
-
-export { default as TokenFileManager } from './TokenFileManager.svelte';
-export { default as BackupBrowser } from './BackupBrowser.svelte';
-export { default as EditorDialog } from './EditorDialog.svelte';
-export { default as TokenMap } from './TokenMap.svelte';
-
-export { default as TextTab } from './TextTab.svelte';
-export { default as SurfacesTab } from './SurfacesTab.svelte';