@motion-proto/live-tokens 0.1.0

package/src/showcase/SurfacesTab.svelte

@@ -0,0 +1,409 @@
+<script lang="ts">
+  interface Swatch {
+    name: string;
+    variable: string;
+    description: string;
+  }
+
+  interface SwatchGroup {
+    title: string;
+    swatches: Swatch[];
+  }
+
+  interface BorderGroup {
+    title: string;
+    borders: Array<{ name: string; variable: string }>;
+  }
+
+  const swatchGroups: SwatchGroup[] = [
+    {
+      title: 'Base Surfaces',
+      swatches: [
+        { name: 'Lowest', variable: '--surface-neutral-lowest', description: '10% - Deepest surface layer' },
+        { name: 'Lower', variable: '--surface-neutral-lower', description: '~11% - Very subtle lift' },
+        { name: 'Low', variable: '--surface-neutral-low', description: '~12% - Subtle panels' },
+        { name: 'Surface', variable: '--surface-neutral', description: '~13% - Standard surface (MIDPOINT)' },
+        { name: 'High', variable: '--surface-neutral-high', description: '~14% - Elevated panels' },
+        { name: 'Higher', variable: '--surface-neutral-higher', description: '~14.5% - Prominent elements' },
+        { name: 'Highest', variable: '--surface-neutral-highest', description: '15% - Most elevated (modals, tooltips)' }
+      ]
+    },
+    {
+      title: 'Overlays',
+      swatches: [
+        { name: 'Lowest', variable: '--overlay-lowest', description: 'Barely visible tint' },
+        { name: 'Lower', variable: '--overlay-lower', description: 'Very subtle overlay' },
+        { name: 'Low', variable: '--overlay-low', description: 'Light overlay' },
+        { name: 'Overlay', variable: '--overlay', description: 'Standard overlay' },
+        { name: 'High', variable: '--overlay-high', description: 'Heavy overlay' },
+        { name: 'Higher', variable: '--overlay-higher', description: 'Modal backdrop' },
+        { name: 'Highest', variable: '--overlay-highest', description: 'Nearly opaque' }
+      ]
+    },
+    {
+      title: 'Primary (Crimson)',
+      swatches: [
+        { name: 'Lowest', variable: '--surface-primary-lowest', description: 'Deepest' },
+        { name: 'Lower', variable: '--surface-primary-lower', description: 'Barely perceptible' },
+        { name: 'Low', variable: '--surface-primary-low', description: 'Subtle' },
+        { name: 'Primary', variable: '--surface-primary', description: 'Default' },
+        { name: 'High', variable: '--surface-primary-high', description: 'More prominent' },
+        { name: 'Higher', variable: '--surface-primary-higher', description: 'Very prominent' },
+        { name: 'Highest', variable: '--surface-primary-highest', description: 'Most prominent' }
+      ]
+    },
+    {
+      title: 'Accent (Amber)',
+      swatches: [
+        { name: 'Lowest', variable: '--surface-accent-lowest', description: 'Deepest' },
+        { name: 'Lower', variable: '--surface-accent-lower', description: 'Barely perceptible' },
+        { name: 'Low', variable: '--surface-accent-low', description: 'Subtle' },
+        { name: 'Accent', variable: '--surface-accent', description: 'Default' },
+        { name: 'High', variable: '--surface-accent-high', description: 'More prominent' },
+        { name: 'Higher', variable: '--surface-accent-higher', description: 'Very prominent' },
+        { name: 'Highest', variable: '--surface-accent-highest', description: 'Most prominent' }
+      ]
+    },
+    {
+      title: 'Success (Green)',
+      swatches: [
+        { name: 'Lowest', variable: '--surface-success-lowest', description: 'Deepest' },
+        { name: 'Lower', variable: '--surface-success-lower', description: 'Barely perceptible' },
+        { name: 'Low', variable: '--surface-success-low', description: 'Subtle' },
+        { name: 'Success', variable: '--surface-success', description: 'Default' },
+        { name: 'High', variable: '--surface-success-high', description: 'More prominent' },
+        { name: 'Higher', variable: '--surface-success-higher', description: 'Very prominent' },
+        { name: 'Highest', variable: '--surface-success-highest', description: 'Most prominent' }
+      ]
+    },
+    {
+      title: 'Warning (Orange)',
+      swatches: [
+        { name: 'Lowest', variable: '--surface-warning-lowest', description: 'Deepest' },
+        { name: 'Lower', variable: '--surface-warning-lower', description: 'Barely perceptible' },
+        { name: 'Low', variable: '--surface-warning-low', description: 'Subtle' },
+        { name: 'Warning', variable: '--surface-warning', description: 'Default' },
+        { name: 'High', variable: '--surface-warning-high', description: 'More prominent' },
+        { name: 'Higher', variable: '--surface-warning-higher', description: 'Very prominent' },
+        { name: 'Highest', variable: '--surface-warning-highest', description: 'Most prominent' }
+      ]
+    },
+    {
+      title: 'Info (Blue)',
+      swatches: [
+        { name: 'Lowest', variable: '--surface-info-lowest', description: 'Deepest' },
+        { name: 'Lower', variable: '--surface-info-lower', description: 'Barely perceptible' },
+        { name: 'Low', variable: '--surface-info-low', description: 'Subtle' },
+        { name: 'Info', variable: '--surface-info', description: 'Default' },
+        { name: 'High', variable: '--surface-info-high', description: 'More prominent' },
+        { name: 'Higher', variable: '--surface-info-higher', description: 'Very prominent' },
+        { name: 'Highest', variable: '--surface-info-highest', description: 'Most prominent' }
+      ]
+    },
+    {
+      title: 'Danger (Bright Red)',
+      swatches: [
+        { name: 'Lowest', variable: '--surface-danger-lowest', description: 'Deepest' },
+        { name: 'Lower', variable: '--surface-danger-lower', description: 'Barely perceptible' },
+        { name: 'Low', variable: '--surface-danger-low', description: 'Subtle' },
+        { name: 'Danger', variable: '--surface-danger', description: 'Default' },
+        { name: 'High', variable: '--surface-danger-high', description: 'More prominent' },
+        { name: 'Higher', variable: '--surface-danger-higher', description: 'Very prominent' },
+        { name: 'Highest', variable: '--surface-danger-highest', description: 'Most prominent' }
+      ]
+    },
+    {
+      title: 'Hover States',
+      swatches: [
+        { name: '', variable: '', description: 'Empty slot' },
+        { name: '', variable: '', description: 'Empty slot' },
+        { name: 'Low', variable: '--hover-low', description: 'Subtle hover' },
+        { name: 'Hover', variable: '--hover', description: 'Standard hover' },
+        { name: 'High', variable: '--hover-high', description: 'Prominent hover' },
+        { name: '', variable: '', description: 'Empty slot' },
+        { name: '', variable: '', description: 'Empty slot' }
+      ]
+    }
+  ];
+
+  let copiedVar: string | null = null;
+  function copyVariable(v: string) {
+    navigator.clipboard.writeText(v);
+    copiedVar = v;
+    setTimeout(() => { copiedVar = null; }, 1000);
+  }
+
+  const borderGroups: BorderGroup[] = [
+    {
+      title: 'Base Borders',
+      borders: [
+        { name: 'Faint', variable: '--border-neutral-faint' },
+        { name: 'Subtle', variable: '--border-neutral-subtle' },
+        { name: 'Default', variable: '--border-neutral-default' },
+        { name: 'Medium', variable: '--border-neutral-medium' },
+        { name: 'Strong', variable: '--border-neutral-strong' }
+      ]
+    },
+    {
+      title: 'Primary (Crimson)',
+      borders: [
+        { name: 'Faint', variable: '--border-primary-faint' },
+        { name: 'Subtle', variable: '--border-primary-subtle' },
+        { name: 'Primary', variable: '--border-primary' },
+        { name: 'Medium', variable: '--border-primary-medium' },
+        { name: 'Strong', variable: '--border-primary-strong' }
+      ]
+    },
+    {
+      title: 'Accent (Amber)',
+      borders: [
+        { name: 'Faint', variable: '--border-accent-faint' },
+        { name: 'Subtle', variable: '--border-accent-subtle' },
+        { name: 'Accent', variable: '--border-accent' },
+        { name: 'Medium', variable: '--border-accent-medium' },
+        { name: 'Strong', variable: '--border-accent-strong' }
+      ]
+    },
+    {
+      title: 'Success (Green)',
+      borders: [
+        { name: 'Faint', variable: '--border-success-faint' },
+        { name: 'Subtle', variable: '--border-success-subtle' },
+        { name: 'Success', variable: '--border-success' },
+        { name: 'Medium', variable: '--border-success-medium' },
+        { name: 'Strong', variable: '--border-success-strong' }
+      ]
+    },
+    {
+      title: 'Warning (Orange)',
+      borders: [
+        { name: 'Faint', variable: '--border-warning-faint' },
+        { name: 'Subtle', variable: '--border-warning-subtle' },
+        { name: 'Warning', variable: '--border-warning' },
+        { name: 'Medium', variable: '--border-warning-medium' },
+        { name: 'Strong', variable: '--border-warning-strong' }
+      ]
+    },
+    {
+      title: 'Info (Blue)',
+      borders: [
+        { name: 'Faint', variable: '--border-info-faint' },
+        { name: 'Subtle', variable: '--border-info-subtle' },
+        { name: 'Info', variable: '--border-info' },
+        { name: 'Medium', variable: '--border-info-medium' },
+        { name: 'Strong', variable: '--border-info-strong' }
+      ]
+    },
+    {
+      title: 'Danger (Bright Red)',
+      borders: [
+        { name: 'Faint', variable: '--border-danger-faint' },
+        { name: 'Subtle', variable: '--border-danger-subtle' },
+        { name: 'Danger', variable: '--border-danger' },
+        { name: 'Medium', variable: '--border-danger-medium' },
+        { name: 'Strong', variable: '--border-danger-strong' }
+      ]
+    }
+  ];
+</script>
+
+<div class="surfaces-container">
+  <section class="section">
+    <h2 class="section-title">Surfaces</h2>
+    <div class="swatch-groups-grid">
+      {#each swatchGroups as group}
+        <div class="swatch-group">
+          <h3 class="group-title">{group.title}</h3>
+          <div class="swatches-row">
+            {#each group.swatches as swatch}
+              <div class="swatch-card">
+                {#if swatch.variable !== ''}
+                  <div
+                    class="swatch-box"
+                    style="background: var({swatch.variable});"
+                  ></div>
+                  <button class="swatch-name copyable" class:copied={copiedVar === swatch.variable} on:click={() => copyVariable(swatch.variable)}>{copiedVar === swatch.variable ? 'copied!' : swatch.name}</button>
+                {:else}
+                  <div class="swatch-box empty"></div>
+                  <div class="swatch-name">&nbsp;</div>
+                {/if}
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/each}
+    </div>
+  </section>
+
+  <section class="section">
+    <h2 class="section-title">Borders</h2>
+    <div class="border-groups-grid">
+      {#each borderGroups as group}
+        <div class="border-group">
+          <h3 class="group-title">{group.title}</h3>
+          <div class="borders-row">
+            {#each group.borders as border}
+              <div class="border-card">
+                <div
+                  class="border-box"
+                  style="border: 2px solid var({border.variable});"
+                ></div>
+                <button class="border-name copyable" class:copied={copiedVar === border.variable} on:click={() => copyVariable(border.variable)}>{copiedVar === border.variable ? 'copied!' : border.name}</button>
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/each}
+    </div>
+  </section>
+</div>
+
+<style>
+  @import '../styles/variables.css';
+
+  .surfaces-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-32);
+  }
+
+  .section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-16);
+  }
+
+  .section-title {
+    font-size: var(--font-lg);
+    font-weight: var(--font-weight-semibold);
+    color: var(--ui-text-primary);
+    margin: 0;
+    padding-bottom: var(--space-8);
+    border-bottom: 1px solid var(--ui-border-subtle);
+  }
+
+  .swatch-groups-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(28rem, 100%), 1fr));
+    gap: var(--space-24);
+  }
+
+  .swatch-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-8);
+    min-width: 0;
+  }
+
+  .group-title {
+    font-size: var(--font-sm);
+    font-weight: var(--font-weight-semibold);
+    color: var(--ui-text-secondary);
+    margin: 0;
+  }
+
+  .swatches-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
+    gap: var(--space-8);
+    max-width: calc(7 * 3.5rem + 6 * var(--space-8));
+  }
+
+  .swatch-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    align-items: center;
+  }
+
+  .swatch-box {
+    width: 3.5rem;
+    height: 3.5rem;
+    border-radius: var(--radius-md);
+    flex-shrink: 0;
+  }
+
+  .swatch-box.empty {
+    opacity: 0;
+  }
+
+  .swatch-name {
+    font-size: var(--font-xs);
+    color: var(--ui-text-tertiary);
+    text-align: center;
+  }
+
+  .swatch-name.copyable {
+    all: unset;
+    font-size: var(--font-xs);
+    color: var(--ui-text-tertiary);
+    text-align: center;
+    cursor: pointer;
+    transition: color var(--transition-fast);
+  }
+
+  .swatch-name.copyable:hover {
+    color: var(--ui-text-accent);
+  }
+
+  .swatch-name.copyable.copied {
+    color: var(--ui-text-success);
+  }
+
+  .border-groups-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
+    gap: var(--space-24);
+  }
+
+  .border-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-8);
+    min-width: 0;
+  }
+
+  .borders-row {
+    display: flex;
+    gap: var(--space-8);
+    flex-wrap: wrap;
+  }
+
+  .border-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    align-items: center;
+  }
+
+  .border-box {
+    width: 3.5rem;
+    height: 3.5rem;
+    background: var(--ui-surface-low);
+    border-radius: var(--radius-md);
+    flex-shrink: 0;
+  }
+
+  .border-name {
+    font-size: var(--font-xs);
+    color: var(--ui-text-tertiary);
+    text-align: center;
+  }
+
+  .border-name.copyable {
+    all: unset;
+    font-size: var(--font-xs);
+    color: var(--ui-text-tertiary);
+    text-align: center;
+    cursor: pointer;
+    transition: color var(--transition-fast);
+  }
+
+  .border-name.copyable:hover {
+    color: var(--ui-text-accent);
+  }
+
+  .border-name.copyable.copied {
+    color: var(--ui-text-success);
+  }
+</style>

package/src/showcase/TextTab.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+  interface TextColorGroup {
+    title: string;
+    colors: Array<{ name: string; variable: string; description: string }>;
+  }
+
+  const textColorGroups: TextColorGroup[] = [
+    {
+      title: 'Base Text Colors',
+      colors: [
+        { name: 'Primary', variable: '--text-primary', description: 'Main text color' },
+        { name: 'Secondary', variable: '--text-secondary', description: 'Less prominent text' },
+        { name: 'Tertiary', variable: '--text-tertiary', description: 'Subtle text' },
+        { name: 'Muted', variable: '--text-muted', description: 'De-emphasized text' },
+        { name: 'Disabled', variable: '--text-disabled', description: 'Disabled state text' },
+        { name: 'Inverted', variable: '--text-inverted', description: 'Dark text for light backgrounds' }
+      ]
+    },
+    {
+      title: 'Primary Text Colors (Crimson)',
+      colors: [
+        { name: 'Primary', variable: '--text-primary-color', description: 'Primary - Main text color' },
+        { name: 'Primary Secondary', variable: '--text-primary-secondary', description: 'Secondary - Less prominent' },
+        { name: 'Primary Tertiary', variable: '--text-primary-tertiary', description: 'Tertiary - Subtle text' },
+        { name: 'Primary Muted', variable: '--text-primary-muted', description: 'Muted - De-emphasized' },
+        { name: 'Primary Disabled', variable: '--text-primary-disabled', description: 'Disabled - Disabled state' }
+      ]
+    },
+    {
+      title: 'Accent Text Colors (Amber)',
+      colors: [
+        { name: 'Accent', variable: '--text-accent', description: 'Primary - Main text color' },
+        { name: 'Accent Secondary', variable: '--text-accent-secondary', description: 'Secondary - Less prominent' },
+        { name: 'Accent Tertiary', variable: '--text-accent-tertiary', description: 'Tertiary - Subtle text' },
+        { name: 'Accent Muted', variable: '--text-accent-muted', description: 'Muted - De-emphasized' },
+        { name: 'Accent Disabled', variable: '--text-accent-disabled', description: 'Disabled - Disabled state' }
+      ]
+    },
+    {
+      title: 'Success Text Colors',
+      colors: [
+        { name: 'Success', variable: '--text-success', description: 'Primary - Main text color' },
+        { name: 'Success Secondary', variable: '--text-success-secondary', description: 'Secondary - Less prominent' },
+        { name: 'Success Tertiary', variable: '--text-success-tertiary', description: 'Tertiary - Subtle text' },
+        { name: 'Success Muted', variable: '--text-success-muted', description: 'Muted - De-emphasized' },
+        { name: 'Success Disabled', variable: '--text-success-disabled', description: 'Disabled - Disabled state' }
+      ]
+    },
+    {
+      title: 'Warning Text Colors',
+      colors: [
+        { name: 'Warning', variable: '--text-warning', description: 'Primary - Main text color' },
+        { name: 'Warning Secondary', variable: '--text-warning-secondary', description: 'Secondary - Less prominent' },
+        { name: 'Warning Tertiary', variable: '--text-warning-tertiary', description: 'Tertiary - Subtle text' },
+        { name: 'Warning Muted', variable: '--text-warning-muted', description: 'Muted - De-emphasized' },
+        { name: 'Warning Disabled', variable: '--text-warning-disabled', description: 'Disabled - Disabled state' }
+      ]
+    },
+    {
+      title: 'Info Text Colors',
+      colors: [
+        { name: 'Info', variable: '--text-info', description: 'Primary - Main text color' },
+        { name: 'Info Secondary', variable: '--text-info-secondary', description: 'Secondary - Less prominent' },
+        { name: 'Info Tertiary', variable: '--text-info-tertiary', description: 'Tertiary - Subtle text' },
+        { name: 'Info Muted', variable: '--text-info-muted', description: 'Muted - De-emphasized' },
+        { name: 'Info Disabled', variable: '--text-info-disabled', description: 'Disabled - Disabled state' }
+      ]
+    },
+    {
+      title: 'Danger Text Colors',
+      colors: [
+        { name: 'Danger', variable: '--text-danger', description: 'Primary - Main text color' },
+        { name: 'Danger Secondary', variable: '--text-danger-secondary', description: 'Secondary - Less prominent' },
+        { name: 'Danger Tertiary', variable: '--text-danger-tertiary', description: 'Tertiary - Subtle text' },
+        { name: 'Danger Muted', variable: '--text-danger-muted', description: 'Muted - De-emphasized' },
+        { name: 'Danger Disabled', variable: '--text-danger-disabled', description: 'Disabled - Disabled state' }
+      ]
+    }
+  ];
+
+  let copiedVar: string | null = null;
+  function copyVariable(v: string) {
+    navigator.clipboard.writeText(v);
+    copiedVar = v;
+    setTimeout(() => { copiedVar = null; }, 1000);
+  }
+</script>
+
+<div class="text-container">
+  {#each textColorGroups as group}
+    <section class="color-group">
+      <h3 class="group-title">{group.title}</h3>
+      <div class="text-colors-grid">
+        {#each group.colors as color}
+          <div class="text-color-card">
+            <div
+              class="text-color-preview"
+              style="color: var({color.variable});"
+            >
+              Ag
+            </div>
+            <div class="text-color-info">
+              <button class="text-color-name copyable" class:copied={copiedVar === color.variable} on:click={() => copyVariable(color.variable)}>{copiedVar === color.variable ? 'copied!' : color.name}</button>
+              <div class="text-color-variable">{color.variable}</div>
+              <div class="text-color-description">{color.description}</div>
+            </div>
+          </div>
+        {/each}
+      </div>
+    </section>
+  {/each}
+</div>
+
+<style>
+  @import '../styles/variables.css';
+
+  .text-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-24);
+  }
+
+  .color-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-12);
+  }
+
+  .group-title {
+    font-size: var(--font-sm);
+    font-weight: var(--font-weight-semibold);
+    color: var(--ui-text-secondary);
+    margin: 0;
+    padding-bottom: var(--space-4);
+    border-bottom: 1px solid var(--ui-border-faint);
+  }
+
+  .text-colors-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    gap: var(--space-12);
+  }
+
+  .text-color-card {
+    background: var(--ui-surface-low);
+    border: 1px solid var(--ui-border-subtle);
+    border-radius: var(--radius-md);
+    padding: var(--space-12);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-8);
+    align-items: center;
+  }
+
+  .text-color-preview {
+    font-size: var(--font-4xl);
+    font-weight: var(--font-weight-bold);
+    line-height: 1;
+  }
+
+  .text-color-info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    align-items: center;
+    text-align: center;
+  }
+
+  .text-color-name {
+    font-size: var(--font-sm);
+    font-weight: var(--font-weight-semibold);
+    color: var(--ui-text-primary);
+  }
+
+  .text-color-name.copyable {
+    all: unset;
+    font-size: var(--font-sm);
+    font-weight: var(--font-weight-semibold);
+    color: var(--ui-text-primary);
+    cursor: pointer;
+    transition: color var(--transition-fast);
+  }
+
+  .text-color-name.copyable:hover {
+    color: var(--ui-text-accent);
+  }
+
+  .text-color-name.copyable.copied {
+    color: var(--ui-text-success);
+  }
+
+  .text-color-variable {
+    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-4);
+    border-radius: var(--radius-sm);
+  }
+
+  .text-color-description {
+    font-size: var(--font-xs);
+    color: var(--ui-text-muted);
+  }
+</style>