@motion-proto/live-tokens 0.11.0 → 0.12.0

package/src/editor/ui/sections/TokenScaleTable.svelte

@@ -22,13 +22,14 @@
   /** 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)
+    | '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
+    | 'letter-spacing'  // "AV" text spaced by letter-spacing: var(--xx)
+    | 'icon-size';      // star icon sized by font-size: var(--xx)
 
   
   
@@ -162,6 +163,18 @@
       </div>
     {/each}
   </div>
+{:else if kind === 'letter-spacing'}
+  <div class="font-weight-demos">
+    {#each resolved as token}
+      <div class="font-weight-item">
+        <span class="letter-spacing-preview" style="letter-spacing: var({token.variable});">AV</span>
+        <div class="token-info">
+          <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>
+    {/each}
+  </div>
 {:else if kind === 'icon-size'}
   <div class="font-size-demos">
     {#each resolved as token}
@@ -321,6 +334,14 @@
     min-width: 2rem;
   }
 
+  .letter-spacing-preview {
+    font-size: var(--ui-font-size-xl);
+    font-family: var(--ui-font-sans);
+    color: var(--ui-text-primary);
+    line-height: 1;
+    min-width: 2.5rem;
+  }
+
   .font-weight-item .token-info {
     flex-direction: row;
     gap: var(--ui-space-8);

package/src/editor/ui/sections/tokenScales.ts

@@ -46,6 +46,11 @@ export const LINE_HEIGHT_VARS = [
   '--line-height-lg', '--line-height-xl',
 ] as const;
 
+export const LETTER_SPACING_VARS = [
+  '--letter-spacing-tighter', '--letter-spacing-tight', '--letter-spacing-normal',
+  '--letter-spacing-wide', '--letter-spacing-wider',
+] as const;
+
 export interface TokenItem {
   variable: string;
   value: string;

package/src/system/components/CodeSnippet.svelte

@@ -0,0 +1,118 @@
+<!--
+  CodeSnippet.svelte — single-line code display with a copy button. Click the
+  button to copy `code` to the clipboard; a Tooltip-rendered confirmation
+  ("Copied") flashes briefly above the button.
+-->
+<script lang="ts">
+  import Tooltip from './Tooltip.svelte';
+
+  interface Props {
+    code: string;
+    /** ARIA label for the copy button. */
+    copyLabel?: string;
+    /** Editor preview hook: adds `.force-hover` so hover tokens paint without a pointer. */
+    class?: string;
+  }
+
+  let {
+    code,
+    copyLabel = 'Copy to clipboard',
+    class: className = '',
+  }: Props = $props();
+
+  let copied = $state(false);
+  let timer: ReturnType<typeof setTimeout> | undefined;
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(code);
+    } catch {
+      // Clipboard unavailable (insecure context, denied permission). Still flash
+      // the confirmation so the editor preview shows the popover behavior.
+    }
+    copied = true;
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => { copied = false; }, 1500);
+  }
+</script>
+
+<div class="codesnippet {className}">
+  <code class="code">{code}</code>
+  <Tooltip text={copied ? 'Copied' : ''} open={copied} position="top">
+    <button
+      type="button"
+      class="copy"
+      onclick={copy}
+      aria-label={copyLabel}
+    >
+      <i class="fas fa-copy" aria-hidden="true"></i>
+    </button>
+  </Tooltip>
+</div>
+
+<style>
+  :global(:root) {
+    /* Container. */
+    --codesnippet-surface: var(--surface-neutral-lower);
+    --codesnippet-border: var(--border-neutral-subtle);
+    --codesnippet-border-width: var(--border-width-1);
+    --codesnippet-radius: var(--radius-md);
+    --codesnippet-padding: var(--space-16);
+    --codesnippet-gap: var(--space-16);
+
+    /* Code text. */
+    --codesnippet-code-text: var(--text-primary);
+    --codesnippet-code-font-family: var(--font-mono);
+    --codesnippet-code-font-size: var(--font-size-sm);
+    --codesnippet-code-font-weight: var(--font-weight-normal);
+    --codesnippet-code-line-height: var(--line-height-md);
+
+    /* Copy icon (default + hover). */
+    --codesnippet-icon: var(--text-secondary);
+    --codesnippet-icon-size: var(--font-size-md);
+    --codesnippet-hover-icon: var(--text-primary);
+  }
+
+  .codesnippet {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--codesnippet-gap);
+    max-width: 100%;
+    padding: var(--codesnippet-padding);
+    background: var(--codesnippet-surface);
+    border: var(--codesnippet-border-width) solid var(--codesnippet-border);
+    border-radius: var(--codesnippet-radius);
+  }
+
+  .code {
+    flex: 1 1 auto;
+    min-width: 0;
+    color: var(--codesnippet-code-text);
+    font-family: var(--codesnippet-code-font-family);
+    font-size: var(--codesnippet-code-font-size);
+    font-weight: var(--codesnippet-code-font-weight);
+    line-height: var(--codesnippet-code-line-height);
+    white-space: pre;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .copy {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    padding: 0;
+    background: transparent;
+    border: none;
+    color: var(--codesnippet-icon);
+    font-size: var(--codesnippet-icon-size);
+    cursor: pointer;
+    transition: color var(--duration-150);
+  }
+
+  .copy:hover,
+  .codesnippet.force-hover .copy {
+    color: var(--codesnippet-hover-icon);
+  }
+</style>

package/src/system/components/Toggle.svelte

@@ -0,0 +1,176 @@
+<!--
+  Toggle.svelte — Cloudscape-style on/off switch. The default state is "off",
+  whose tokens carry the baseline appearance plus all geometry and label
+  typography. "On" is a state that recolors track + thumb when the toggle is
+  checked; hover and disabled layer over the active component state.
+-->
+<script lang="ts">
+  interface Props {
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    ariaLabel?: string | undefined;
+    /** Editor preview hook — adds `.force-hover` so hover tokens paint without a real pointer. */
+    class?: string;
+    onchange?: (checked: boolean) => void;
+  }
+
+  let {
+    checked = false,
+    disabled = false,
+    label = '',
+    ariaLabel = undefined,
+    class: className = '',
+    onchange,
+  }: Props = $props();
+
+  function toggle() {
+    if (disabled) return;
+    onchange?.(!checked);
+  }
+</script>
+
+<button
+  type="button"
+  role="switch"
+  aria-checked={checked}
+  aria-label={ariaLabel ?? label}
+  class="toggle {className}"
+  class:on={checked}
+  {disabled}
+  onclick={toggle}
+>
+  <span class="track">
+    <span class="thumb"></span>
+  </span>
+  {#if label}
+    <span class="label">{label}</span>
+  {/if}
+</button>
+
+<style>
+  :global(:root) {
+    /* Default (off resting) — also carries all geometry + label typography. */
+    --toggle-track-surface: var(--surface-neutral);
+    --toggle-track-border: var(--border-neutral);
+    --toggle-track-border-width: var(--border-width-1);
+    --toggle-track-radius: var(--radius-full);
+    --toggle-track-width: var(--space-32);
+    --toggle-track-thickness: var(--space-16);
+    --toggle-thumb-surface: var(--surface-neutral-highest);
+    --toggle-thumb-border: var(--border-neutral-strong);
+    --toggle-thumb-size: var(--space-12);
+    --toggle-label-text: var(--text-primary);
+    --toggle-label-font-family: var(--font-sans);
+    --toggle-label-font-size: var(--font-size-sm);
+    --toggle-label-font-weight: var(--font-weight-normal);
+    --toggle-gap: var(--space-8);
+
+    /* Hover (default + hover interaction). */
+    --toggle-hover-track-surface: var(--surface-neutral-high);
+    --toggle-hover-thumb-surface: var(--text-primary);
+
+    /* On (selected — toggle is checked). */
+    --toggle-on-track-surface: var(--surface-brand-high);
+    --toggle-on-track-border: var(--border-brand);
+    --toggle-on-thumb-surface: var(--text-primary);
+    --toggle-on-thumb-border: var(--border-brand-strong);
+
+    /* On + hover. */
+    --toggle-on-hover-track-surface: var(--surface-brand-higher);
+    --toggle-on-hover-thumb-surface: var(--text-primary);
+
+    /* Disabled (terminal — applies regardless of on/off). */
+    --toggle-disabled-track-surface: var(--surface-neutral-lower);
+    --toggle-disabled-thumb-surface: var(--surface-neutral);
+    --toggle-disabled-label-text: var(--text-disabled);
+  }
+
+  .toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--toggle-gap);
+    background: transparent;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+  }
+  .toggle:disabled { cursor: not-allowed; }
+
+  .track {
+    position: relative;
+    flex: none;
+    display: inline-block;
+    width: var(--toggle-track-width);
+    height: var(--toggle-track-thickness);
+    background: var(--toggle-track-surface);
+    border: var(--toggle-track-border-width) solid var(--toggle-track-border);
+    border-radius: var(--toggle-track-radius);
+    transition: background var(--duration-150, 150ms), border-color var(--duration-150, 150ms);
+  }
+
+  .thumb {
+    position: absolute;
+    top: 50%;
+    left: var(--space-2);
+    width: var(--toggle-thumb-size);
+    height: var(--toggle-thumb-size);
+    transform: translateY(-50%);
+    background: var(--toggle-thumb-surface);
+    border: var(--toggle-track-border-width) solid var(--toggle-thumb-border);
+    border-radius: var(--radius-full);
+    transition: left var(--duration-200, 200ms) ease, background var(--duration-150, 150ms), border-color var(--duration-150, 150ms);
+  }
+
+  .label {
+    color: var(--toggle-label-text);
+    font-family: var(--toggle-label-font-family);
+    font-size: var(--toggle-label-font-size);
+    font-weight: var(--toggle-label-font-weight);
+  }
+
+  /* Hover (default state). */
+  .toggle:hover:not(:disabled) .track,
+  .toggle.force-hover:not(:disabled) .track {
+    background: var(--toggle-hover-track-surface);
+  }
+  .toggle:hover:not(:disabled) .thumb,
+  .toggle.force-hover:not(:disabled) .thumb {
+    background: var(--toggle-hover-thumb-surface);
+  }
+
+  /* On state — slide thumb, recolor track + thumb. */
+  .toggle.on .track {
+    background: var(--toggle-on-track-surface);
+    border-color: var(--toggle-on-track-border);
+  }
+  .toggle.on .thumb {
+    /* Calc keeps thumb flush with the right edge as track width and thumb size change. */
+    left: calc(var(--toggle-track-width) - var(--toggle-thumb-size) - var(--space-2) - (var(--toggle-track-border-width) * 2));
+    background: var(--toggle-on-thumb-surface);
+    border-color: var(--toggle-on-thumb-border);
+  }
+
+  /* On + hover. */
+  .toggle.on:hover:not(:disabled) .track,
+  .toggle.on.force-hover:not(:disabled) .track {
+    background: var(--toggle-on-hover-track-surface);
+  }
+  .toggle.on:hover:not(:disabled) .thumb,
+  .toggle.on.force-hover:not(:disabled) .thumb {
+    background: var(--toggle-on-hover-thumb-surface);
+  }
+
+  /* Disabled — terminal, beats both default and on. */
+  .toggle:disabled .track {
+    background: var(--toggle-disabled-track-surface);
+    border-color: var(--toggle-disabled-track-surface);
+  }
+  .toggle:disabled .thumb {
+    background: var(--toggle-disabled-thumb-surface);
+    border-color: var(--toggle-disabled-thumb-surface);
+  }
+  .toggle:disabled .label {
+    color: var(--toggle-disabled-label-text);
+  }
+</style>

package/src/system/styles/tokens.generated.css

@@ -1,7 +1,7 @@
 /* Generated by themeFileApi from the production theme and component configs. Do not edit. */
 /* tokens.css holds developer-authored defaults; this file holds editor overrides. */
 
-/* Production theme: default */
+/* Production theme: my-theme */
 :root:root {
   --gradient-1: linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%);
   --gradient-2: linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-special-500) 100%);
@@ -54,12 +54,16 @@
   --dialog-secondary-hover-border-width: var(--border-width-1);
   --dialog-secondary-hover-radius: var(--radius-md);
   --dialog-secondary-hover-padding: var(--space-8);
-  --overlay-low: rgba(20, 3, 0, 0.38);
-  --overlay: rgba(20, 3, 0, 0.51);
-  --overlay-high: rgba(20, 3, 0, 0.64);
-  --hover-low: rgba(255, 255, 255, 0.05);
-  --hover: rgba(255, 255, 255, 0.1);
-  --hover-high: rgba(255, 255, 255, 0.15);
+  --columns-count: 12;
+  --columns-max-width: 1440px;
+  --columns-gutter: 32px;
+  --columns-margin: 0px;
+  --overlay-low: color-mix(in srgb, var(--surface-neutral-lowest) 38%, transparent);
+  --overlay: color-mix(in srgb, var(--surface-neutral-lowest) 51%, transparent);
+  --overlay-high: color-mix(in srgb, var(--surface-neutral-lowest) 64%, transparent);
+  --hover-low: color-mix(in srgb, var(--text-primary) 5%, transparent);
+  --hover: color-mix(in srgb, var(--text-primary) 10%, transparent);
+  --hover-high: color-mix(in srgb, var(--text-primary) 15%, transparent);
   --shadow-sm: 1px 1px 2px 0px hsla(237, 18%, 3%, 0.9);
   --shadow-md: 3px 3px 6px 0px hsla(237, 18%, 3%, 0.9);
   --shadow-lg: 5px 5px 9px 0px hsla(237, 18%, 3%, 0.9);
@@ -152,15 +156,15 @@
   --page-bg: #15142b;
   --page-bg-attachment: scroll;
   --color-brand-100: #ffbad3;
-  --color-brand-200: #ff7bb3;
-  --color-brand-300: #ec4495;
-  --color-brand-400: #cf0b7a;
-  --color-brand-500: #a80062;
-  --color-brand-600: #84004b;
-  --color-brand-700: #640038;
-  --color-brand-800: #490027;
-  --color-brand-850: #320019;
-  --color-brand-900: #1f000d;
+  --color-brand-200: #ff7fb5;
+  --color-brand-300: #ff49a1;
+  --color-brand-400: #fb3199;
+  --color-brand-500: #fb2898;
+  --color-brand-600: #df0083;
+  --color-brand-700: #930055;
+  --color-brand-800: #5c0033;
+  --color-brand-850: #38001d;
+  --color-brand-900: #20000e;
   --color-brand-950: #100005;
   --surface-brand-lowest: #1d000c;
   --surface-brand-lower: #3e0020;
@@ -235,34 +239,34 @@
   --text-special-tertiary: #5c4e8b;
   --text-special-muted: #3e3a4f;
   --text-special-disabled: #303032;
-  --color-info-100: #b4d4ff;
-  --color-info-200: #76b0ff;
-  --color-info-300: #398efa;
-  --color-info-400: #0571e0;
-  --color-info-500: #0059b6;
-  --color-info-600: #00458f;
-  --color-info-700: #00336d;
-  --color-info-800: #002350;
-  --color-info-850: #001637;
-  --color-info-900: #000b23;
-  --color-info-950: #000413;
-  --surface-info-lowest: #000a21;
-  --surface-info-lower: #001d44;
-  --surface-info-low: #00316b;
-  --surface-info: #004894;
-  --surface-info-high: #36639f;
-  --surface-info-higher: #5d7da8;
-  --surface-info-highest: #8497b1;
-  --border-info-faint: #00204a;
-  --border-info-subtle: #003d81;
-  --border-info: #005dbd;
-  --border-info-medium: #007efc;
-  --border-info-strong: #69a9ff;
-  --text-info: #8fbeff;
-  --text-info-secondary: #2f81e8;
-  --text-info-tertiary: #365d90;
-  --text-info-muted: #344051;
-  --text-info-disabled: #303133;
+  --color-info-100: #9adbff;
+  --color-info-200: #4ebbf1;
+  --color-info-300: #109bd4;
+  --color-info-400: #007fae;
+  --color-info-500: #00658c;
+  --color-info-600: #004e6d;
+  --color-info-700: #003a53;
+  --color-info-800: #00293c;
+  --color-info-850: #001a28;
+  --color-info-900: #000e18;
+  --color-info-950: #00050b;
+  --surface-info-lowest: #000d17;
+  --surface-info-lower: #002232;
+  --surface-info-low: #003951;
+  --surface-info: #005171;
+  --surface-info-high: #2c6a89;
+  --surface-info-higher: #598198;
+  --surface-info-highest: #8299a7;
+  --border-info-faint: #002537;
+  --border-info-subtle: #004662;
+  --border-info: #006991;
+  --border-info-medium: #008ec3;
+  --border-info-strong: #00b6f8;
+  --text-info: #64caff;
+  --text-info-secondary: #0083b4;
+  --text-info-tertiary: #1c506a;
+  --text-info-muted: #1d2c34;
+  --text-info-disabled: #181a1b;
   --color-success-100: #92e9a3;
   --color-success-200: #69c67e;
   --color-success-300: #42a75d;
@@ -372,6 +376,15 @@
   --card-default-body-padding-bottom: var(--space-16);
   --card-default-body-padding-left: var(--space-20);
 
+  /* codesnippet (my-code-snippet) */
+  --codesnippet-surface: color-mix(in srgb, var(--surface-neutral-lowest) 76%, transparent);
+  --codesnippet-border: var(--border-neutral);
+  --codesnippet-code-text: var(--text-brand-secondary);
+  --codesnippet-code-font-size: var(--font-size-md);
+
+  /* image (my-image) */
+  --image-default-radius: var(--radius-2xl);
+
   /* imagelightbox (my-image-lightbox) */
   --imagelightbox-tile-border: transparent;
   --imagelightbox-overlay-surface: color-mix(in srgb, var(--color-neutral-950) 76%, transparent);
@@ -389,4 +402,8 @@
   --table-default-row-divider: var(--border-neutral-subtle);
   --table-default-column-divider: var(--border-neutral-faint);
   --table-default-column-divider-width: var(--border-width-1);
+
+  /* tooltip (my-tooltip) */
+  --tooltip-surface: color-mix(in srgb, var(--surface-canvas-lowest) 75%, transparent);
+  --tooltip-border-width: var(--border-width-1);
 }