@motion-proto/live-tokens 0.3.9 → 0.5.0

package/src/ui/sections/TokenScaleTable.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   /**
    * Parameterised token-display table.
    *
@@ -10,7 +12,6 @@
    * 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 {
@@ -29,20 +30,35 @@
     | '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
+  
+  
+  
+  
+  interface Props {
+    kind: ScaleKind;
+    /** Var names to resolve via getComputedStyle. Mutually exclusive with `tokens`. */
+    vars?: readonly string[] | 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
+    tokens?: TokenItem[] | 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;
+    liveVersion?: number;
+    /** When provided, the parent owns the copy-flash UI (pass copiedVar through). */
+    copiedVar?: string | null;
+    oncopy?: (variable: string) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ copy: string }>();
-  function copy(v: string) { dispatch('copy', v); }
+  let {
+    kind,
+    vars = undefined,
+    tokens = undefined,
+    liveVersion = 0,
+    copiedVar = null,
+    oncopy
+  }: Props = $props();
+
+  function copy(v: string) { oncopy?.(v); }
 
   function readVar(name: string): string {
     if (typeof document === 'undefined') return '';
@@ -63,8 +79,8 @@
   // 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[] = [];
-  $: {
+  let resolved: TokenItem[] = $state([]);
+  run(() => {
     liveVersion;
     $editorState;
     if (tokens) {
@@ -74,7 +90,7 @@
     } else {
       resolved = [];
     }
-  }
+  });
 </script>
 
 {#if kind === 'spacing'}
@@ -83,7 +99,7 @@
       <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>
+          <button class="token-variable copyable" class:copied={copiedVar === token.variable} onclick={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
           <span class="token-value">{token.value}</span>
         </div>
       </div>
@@ -95,7 +111,7 @@
       <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>
+          <button class="token-variable copyable" class:copied={copiedVar === token.variable} onclick={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
           <span class="token-value">{token.value}</span>
         </div>
       </div>
@@ -107,7 +123,7 @@
       <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>
+          <button class="token-variable copyable" class:copied={copiedVar === token.variable} onclick={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
           <span class="token-value">{token.value}</span>
         </div>
       </div>
@@ -119,7 +135,7 @@
       <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>
+          <button class="token-variable copyable" class:copied={copiedVar === token.variable} onclick={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
           <span class="token-value">{token.value}</span>
         </div>
       </div>
@@ -131,7 +147,7 @@
       <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>
+          <button class="token-variable copyable" class:copied={copiedVar === token.variable} onclick={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
           <span class="token-value">{token.value}</span>
         </div>
       </div>
@@ -141,7 +157,7 @@
   <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>
+        <button class="token-variable copyable" class:copied={copiedVar === token.variable} onclick={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
         <span class="token-value">{token.value}</span>
       </div>
     {/each}
@@ -154,7 +170,7 @@
           <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>
+          <button class="token-variable copyable" class:copied={copiedVar === token.variable} onclick={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
           <span class="token-value">{token.value}</span>
         </div>
       </div>

package/src/ui/sections/tokenScales.ts

@@ -42,8 +42,8 @@ export const FONT_WEIGHT_VARS = [
 ] as const;
 
 export const LINE_HEIGHT_VARS = [
-  '--line-height-tight', '--line-height-snug', '--line-height-normal',
-  '--line-height-relaxed', '--line-height-loose',
+  '--line-height-xs', '--line-height-sm', '--line-height-md',
+  '--line-height-lg', '--line-height-xl',
 ] as const;
 
 export interface TokenItem {