@motion-proto/live-tokens 0.6.2 → 0.8.0

package/src/{ui → editor/ui}/UIPaletteSelector.svelte

@@ -3,10 +3,10 @@
 
   import { slide } from 'svelte/transition';
   import { cubicOut, cubicIn } from 'svelte/easing';
-  import { resolveAliasChain } from '../lib/tokenRegistry';
-  import { editorState } from '../lib/editorStore';
-  import { formatGradientStops } from '../lib/slices/gradients';
-  import type { GradientToken } from '../lib/editorTypes';
+  import { resolveAliasChain } from '../core/palettes/tokenRegistry';
+  import { editorState } from '../core/store/editorStore';
+  import { formatGradientStops } from '../core/themes/slices/gradients';
+  import type { GradientToken } from '../core/store/editorTypes';
   import UITokenSelector from './UITokenSelector.svelte';
 
   /** Honor prefers-reduced-motion: `t()` zeroes durations when the OS asks for
@@ -36,6 +36,11 @@
     canBeLinked?: boolean;
     disabled?: boolean;
     selectionsLocked?: boolean;
+    /** When set, restrict picker family choices to this family (one of the
+     *  entries in the `families` list). Other families render but are
+     *  rendered disabled and not clickable. Out-of-family already-set
+     *  choices still surface in the trigger meta. */
+    familyFilter?: string | null;
     onchange?: () => void;
   }
 
@@ -45,6 +50,7 @@
     canBeLinked = false,
     disabled = false,
     selectionsLocked = false,
+    familyFilter = null,
     onchange,
   }: Props = $props();
 
@@ -97,7 +103,7 @@
   const borderStepKeys = borderSteps.map(s => s.key);
   const textStepKeys = textSteps.map(s => s.key);
 
-  const familiesWithText = ['neutral', 'canvas', 'brand', 'accent', 'special', 'success', 'warning', 'info', 'danger'];
+  const familiesWithText = ['neutral', 'alternate', 'canvas', 'brand', 'accent', 'special', 'success', 'warning', 'info', 'danger'];
 
   const allCategories: { id: Category; label: string }[] = [
     { id: 'palette', label: 'Palette' },
@@ -405,6 +411,7 @@
   }
 
   function selectFamily(name: string) {
+    if (familyFilter && name !== familyFilter) return;
     selectedFamily = name;
     if (name === chosenFamily && chosenCategory) {
       selectedTab = chosenCategory;
@@ -543,14 +550,23 @@
             <span class="family-label">None</span>
           </button>
           {#each families as fam}
-            <button class="family-item" class:active={!chosenNone && chosenFamily === fam.name} onclick={() => selectFamily(fam.name)}>
+            {@const outOfFamily = familyFilter !== null && fam.name !== familyFilter}
+            <button
+              class="family-item"
+              class:active={!chosenNone && chosenFamily === fam.name}
+              class:out-of-family={outOfFamily}
+              disabled={outOfFamily}
+              onclick={() => selectFamily(fam.name)}
+            >
               <div class="family-swatches">
                 <div class="mini-swatch" style="background: var(--color-{fam.name}-300);"></div>
                 <div class="mini-swatch" style="background: var(--color-{fam.name}-500);"></div>
                 <div class="mini-swatch" style="background: var(--color-{fam.name}-700);"></div>
               </div>
               <span class="family-label">{fam.label}</span>
-              <i class="fas fa-chevron-right family-arrow"></i>
+              {#if !outOfFamily}
+                <i class="fas fa-chevron-right family-arrow"></i>
+              {/if}
             </button>
           {/each}
           {#if gradientsAllowed && gradientTokens.length > 0}
@@ -698,11 +714,11 @@
     align-self: stretch;
     flex: 1;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-faint);
-    background-image: linear-gradient(45deg, var(--ui-border-subtle) 25%, transparent 25%),
-      linear-gradient(-45deg, var(--ui-border-subtle) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, var(--ui-border-subtle) 75%),
-      linear-gradient(-45deg, transparent 75%, var(--ui-border-subtle) 75%);
+    border: 1px solid var(--ui-border-low);
+    background-image: linear-gradient(45deg, var(--ui-border-low) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--ui-border-low) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--ui-border-low) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--ui-border-low) 75%);
     background-size: 8px 8px;
     background-position: 0 0, 0 4px, 4px -4px, -4px 0;
     overflow: hidden;
@@ -718,7 +734,7 @@
     align-items: center;
     gap: var(--ui-space-6);
     padding: var(--ui-space-6) var(--ui-space-8);
-    border-bottom: 1px solid var(--ui-border-faint);
+    border-bottom: 1px solid var(--ui-border-low);
   }
 
   .opacity-control.hidden {
@@ -736,7 +752,7 @@
     height: 4px;
     -webkit-appearance: none;
     appearance: none;
-    background: var(--ui-border-default);
+    background: var(--ui-border);
     border-radius: 2px;
     outline: none;
     cursor: pointer;
@@ -755,7 +771,7 @@
     width: 3rem;
     padding: var(--ui-space-2) var(--ui-space-4);
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     color: var(--ui-text-primary);
     font-size: var(--ui-font-size-xs);
@@ -784,7 +800,7 @@
     padding: var(--ui-space-8) var(--ui-space-10);
     background: none;
     border: none;
-    border-bottom: 1px solid var(--ui-border-faint);
+    border-bottom: 1px solid var(--ui-border-low);
     color: var(--ui-text-secondary);
     font-size: var(--ui-font-size-sm);
     font-weight: var(--ui-font-weight-medium);
@@ -802,7 +818,7 @@
 
   .tab-bar {
     display: flex;
-    border-bottom: 1px solid var(--ui-border-faint);
+    border-bottom: 1px solid var(--ui-border-low);
   }
 
   .tab-btn {
@@ -825,7 +841,7 @@
   }
 
   .tab-btn.assigned {
-    border-color: var(--ui-border-default);
+    border-color: var(--ui-border);
   }
 
   .tab-btn.selected {
@@ -862,6 +878,18 @@
     box-shadow: inset 3px 0 0 var(--ui-text-accent);
   }
 
+  /* Family is filtered out by `familyFilter`. Greyed and unselectable so
+     the picker scopes new picks to the variant's family while keeping the
+     full palette visible (it isn't gone, it just isn't this gradient's
+     business). Pointer cursor is suppressed to match :disabled. */
+  .family-item.out-of-family {
+    opacity: 0.32;
+    cursor: not-allowed;
+  }
+  .family-item.out-of-family:hover {
+    background: none;
+  }
+
   .family-item.active .family-label {
     color: var(--ui-text-accent);
   }
@@ -881,7 +909,7 @@
     width: 2.5rem;
     height: 0.75rem;
     border-radius: 2px;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     position: relative;
     overflow: hidden;
   }
@@ -890,7 +918,7 @@
     width: 2.5rem;
     height: 0.75rem;
     border-radius: 2px;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
   }
 
   .family-divider {
@@ -900,8 +928,7 @@
     font-family: var(--ui-font-mono);
     color: var(--ui-text-tertiary);
     text-transform: uppercase;
-    letter-spacing: 0.04em;
-    border-top: 1px solid var(--ui-border-faint);
+    border-top: 1px solid var(--ui-border-low);
   }
 
   .none-swatch::after {
@@ -915,8 +942,8 @@
       -45deg,
       transparent,
       transparent 3px,
-      var(--ui-border-subtle) 3px,
-      var(--ui-border-subtle) 4px
+      var(--ui-border-low) 3px,
+      var(--ui-border-low) 4px
     );
   }
 
@@ -954,7 +981,7 @@
 
   .step-item:hover {
     background: var(--ui-hover);
-    border-color: var(--ui-border-default);
+    border-color: var(--ui-border);
   }
 
   .step-item.active {
@@ -973,7 +1000,7 @@
     width: 2rem;
     height: 1.5rem;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
   }
 
   .step-label {
@@ -1020,7 +1047,7 @@
 
   .orientation-reset.active {
     color: var(--ui-link-broken, var(--ui-text-secondary));
-    border-color: var(--ui-border-subtle);
+    border-color: var(--ui-border-low);
   }
 
   .orientation-reset:hover:not(:disabled) {
@@ -1055,7 +1082,7 @@
     justify-content: center;
     padding: 0;
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     color: var(--ui-text-secondary);
     font-size: 0.875rem;
@@ -1066,7 +1093,7 @@
 
   .dir-btn:hover {
     background: var(--ui-hover);
-    border-color: var(--ui-border-default);
+    border-color: var(--ui-border);
     color: var(--ui-text-primary);
   }
 
@@ -1086,7 +1113,7 @@
     width: 3rem;
     padding: var(--ui-space-2) var(--ui-space-4);
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     color: var(--ui-text-primary);
     font-size: var(--ui-font-size-xs);

package/src/editor/ui/UIPillButton.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    variant?: 'primary' | 'default' | 'secondary' | 'outline';
+    size?: 'default' | 'compact';
+    icon?: string;
+    href?: string;
+    target?: string;
+    disabled?: boolean;
+    title?: string;
+    type?: 'button' | 'submit' | 'reset';
+    onclick?: (e: MouseEvent) => void;
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'default',
+    size = 'default',
+    icon,
+    href,
+    target,
+    disabled = false,
+    title,
+    type = 'button',
+    onclick,
+    children,
+  }: Props = $props();
+</script>
+
+{#if href}
+  <a
+    class="ui-pill ui-pill-{variant} ui-pill-{size}"
+    {href}
+    {target}
+    {title}
+    {onclick}
+    rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+    aria-disabled={disabled ? 'true' : undefined}
+  >
+    {#if icon}<i class="fas {icon}" aria-hidden="true"></i>{/if}
+    {#if children}<span class="ui-pill-label">{@render children()}</span>{/if}
+  </a>
+{:else}
+  <button
+    class="ui-pill ui-pill-{variant} ui-pill-{size}"
+    {type}
+    {disabled}
+    {title}
+    {onclick}
+  >
+    {#if icon}<i class="fas {icon}" aria-hidden="true"></i>{/if}
+    {#if children}<span class="ui-pill-label">{@render children()}</span>{/if}
+  </button>
+{/if}
+
+<style>
+  .ui-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-6, 6px);
+    max-width: 100%;
+    min-width: 0;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.25) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    color: var(--ui-text-primary, #fff);
+    font-family: inherit;
+    font-size: var(--ui-font-size-md, 16px);
+    font-weight: var(--ui-font-weight-medium, 500);
+    line-height: 1;
+    padding: var(--ui-space-6, 6px) var(--ui-space-16, 16px);
+    border-radius: var(--ui-radius-full, 9999px);
+    cursor: pointer;
+    text-decoration: none;
+    transition:
+      background var(--ui-transition-fast, 120ms ease),
+      border-color var(--ui-transition-fast, 120ms ease);
+  }
+
+  .ui-pill-label {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .ui-pill:hover:not(:disabled):not([aria-disabled='true']) {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.45) 100%);
+    border-color: rgba(255, 255, 255, 0.75);
+  }
+
+  .ui-pill:focus-visible {
+    outline: none;
+    border-color: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
+  }
+
+  .ui-pill:disabled,
+  .ui-pill[aria-disabled='true'] {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.10) 100%);
+    border-color: rgba(255, 255, 255, 0.22);
+    color: var(--ui-text-muted, #4d4d4d);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  .ui-pill:disabled i,
+  .ui-pill[aria-disabled='true'] i {
+    color: rgba(255, 255, 255, 0.28);
+  }
+
+  .ui-pill-primary:disabled,
+  .ui-pill-primary[aria-disabled='true'] {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
+    border-color: rgba(255, 255, 255, 0.24);
+  }
+
+  .ui-pill-secondary:disabled,
+  .ui-pill-secondary[aria-disabled='true'] {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
+    border-color: rgba(255, 255, 255, 0.14);
+  }
+
+  .ui-pill i {
+    font-size: var(--ui-font-size-xs, 12px);
+    color: rgba(255, 255, 255, 0.65);
+  }
+
+  /* Variant: primary — heavier gradient + brighter border for CTAs */
+  .ui-pill-primary {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
+    border-color: rgba(255, 255, 255, 0.55);
+  }
+  .ui-pill-primary:hover:not(:disabled):not([aria-disabled='true']) {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.12) 100%);
+    border-color: rgba(255, 255, 255, 0.7);
+  }
+
+  /* Variant: secondary — lighter, for low-emphasis actions */
+  .ui-pill-secondary {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
+    border-color: rgba(255, 255, 255, 0.30);
+  }
+  .ui-pill-secondary:hover:not(:disabled):not([aria-disabled='true']) {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
+    border-color: rgba(255, 255, 255, 0.5);
+  }
+
+  /* Variant: outline — transparent fill, just a border; subtle fill on hover */
+  .ui-pill-outline {
+    background: none;
+    border-color: rgba(255, 255, 255, 0.4);
+  }
+  .ui-pill-outline:hover:not(:disabled):not([aria-disabled='true']) {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.08) 100%);
+    border-color: rgba(255, 255, 255, 0.65);
+  }
+  .ui-pill-outline:disabled,
+  .ui-pill-outline[aria-disabled='true'] {
+    background: none;
+    border-color: rgba(255, 255, 255, 0.18);
+  }
+
+  /* Size: compact — for header bars / chrome rails */
+  .ui-pill-compact {
+    font-size: var(--ui-font-size-sm, 14px);
+    padding: var(--ui-space-2, 2px) var(--ui-space-12, 12px);
+  }
+</style>

package/src/{ui → editor/ui}/UIRadio.svelte

@@ -1,6 +1,6 @@
 <!--
   Custom-styled radio that matches the editor's selection language: a quiet ring
-  in the unselected state (--ui-border-strong stroke, soft black inner fill) and
+  in the unselected state (--ui-border-higher stroke, soft black inner fill) and
   the highlight amber when selected (ring + dot, transparent inside).
 
   Usage:
@@ -50,7 +50,7 @@
     flex-shrink: 0;
     width: 14px;
     height: 14px;
-    border: 1.5px solid var(--ui-border-strong);
+    border: 1.5px solid var(--ui-border-higher);
     border-radius: 50%;
     background: rgba(0, 0, 0, 0.3);
     cursor: pointer;

package/src/{ui → editor/ui}/UIRelinkConfirmPopover.svelte

@@ -120,7 +120,7 @@
     top: calc(100% + var(--ui-space-4));
     right: 0;
     background: var(--ui-surface-higher);
-    border: 1px solid var(--ui-border-medium);
+    border: 1px solid var(--ui-border-high);
     border-radius: var(--ui-radius-md);
     box-shadow: var(--ui-shadow-lg);
     z-index: 20;
@@ -138,7 +138,7 @@
   }
 
   .ui-relink-header {
-    border-bottom: 1px solid var(--ui-border-faint);
+    border-bottom: 1px solid var(--ui-border-low);
     padding-bottom: var(--ui-space-6);
   }
 
@@ -205,7 +205,7 @@
     justify-content: flex-end;
     gap: var(--ui-space-6);
     padding-top: var(--ui-space-4);
-    border-top: 1px solid var(--ui-border-faint);
+    border-top: 1px solid var(--ui-border-low);
   }
 
   .ui-relink-btn {
@@ -219,7 +219,7 @@
 
   .ui-relink-btn-cancel {
     background: transparent;
-    border: 1px solid var(--ui-border-default);
+    border: 1px solid var(--ui-border);
     color: var(--ui-text-secondary);
   }
 

package/src/editor/ui/UISegmentedControl.svelte

@@ -0,0 +1,114 @@
+<script lang="ts" generics="V extends string">
+  interface Option {
+    value: V;
+    label: string;
+    icon?: string;
+    title?: string;
+  }
+
+  interface Props {
+    value: V;
+    options: ReadonlyArray<Option>;
+    /** Native radio group name. Auto-generated per instance if omitted. */
+    name?: string;
+    ariaLabel?: string;
+    onchange?: (value: V) => void;
+  }
+
+  let { value = $bindable(), options, name, ariaLabel, onchange }: Props = $props();
+
+  // Stable per-instance fallback so internal radios group correctly when no
+  // `name` is passed. Not reactive: the group identity shouldn't change.
+  const fallbackName = `ui-seg-${Math.random().toString(36).slice(2, 9)}`;
+  let groupName = $derived(name ?? fallbackName);
+
+  function select(v: V) {
+    if (v === value) return;
+    value = v;
+    onchange?.(v);
+  }
+</script>
+
+<div class="ui-seg" role="radiogroup" aria-label={ariaLabel}>
+  {#each options as opt (opt.value)}
+    <label
+      class="ui-seg-item"
+      class:active={value === opt.value}
+      title={opt.title}
+    >
+      <input
+        type="radio"
+        name={groupName}
+        value={opt.value}
+        checked={value === opt.value}
+        onchange={() => select(opt.value)}
+      />
+      {#if opt.icon}<i class="fas {opt.icon}" aria-hidden="true"></i>{/if}
+      <span>{opt.label}</span>
+    </label>
+  {/each}
+</div>
+
+<style>
+  .ui-seg {
+    display: inline-flex;
+    align-self: flex-start;
+    align-items: stretch;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    border-radius: var(--ui-radius-xl, 8px);
+    overflow: hidden;
+  }
+
+  .ui-seg-item {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-6, 6px);
+    padding: var(--ui-space-4, 4px) var(--ui-space-12, 12px);
+    color: var(--ui-text-secondary, rgba(255, 255, 255, 0.65));
+    font-family: inherit;
+    font-size: var(--ui-font-size-sm, 14px);
+    font-weight: var(--ui-font-weight-medium, 500);
+    line-height: 1.5;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background var(--ui-transition-fast, 120ms ease),
+      color var(--ui-transition-fast, 120ms ease);
+  }
+
+  .ui-seg-item + .ui-seg-item {
+    border-left: 1px solid rgba(255, 255, 255, 0.18);
+  }
+
+  .ui-seg-item input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+  }
+
+  .ui-seg-item:hover:not(.active) {
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--ui-text-primary, #fff);
+  }
+
+  .ui-seg-item.active {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.25) 100%);
+    color: var(--ui-text-primary, #fff);
+  }
+
+  .ui-seg-item:has(input:focus-visible) {
+    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
+  }
+
+  .ui-seg-item i {
+    font-size: var(--ui-font-size-xs, 12px);
+    color: rgba(255, 255, 255, 0.65);
+  }
+  .ui-seg-item.active i {
+    color: rgba(255, 255, 255, 0.85);
+  }
+</style>