@motion-proto/live-tokens 0.6.2 → 0.8.0

package/src/editor/ui/UISquareButton.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    variant?: 'primary' | 'default' | 'secondary' | 'success';
+    size?: 'default' | 'compact';
+    icon?: string;
+    href?: string;
+    target?: string;
+    disabled?: boolean;
+    active?: boolean;
+    title?: string;
+    type?: 'button' | 'submit' | 'reset';
+    onclick?: (e: MouseEvent) => void;
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'default',
+    size = 'default',
+    icon,
+    href,
+    target,
+    disabled = false,
+    active = false,
+    title,
+    type = 'button',
+    onclick,
+    children,
+  }: Props = $props();
+</script>
+
+{#if href}
+  <a
+    class="ui-sq ui-sq-{variant} ui-sq-{size}"
+    class:active
+    {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}{@render children()}{/if}
+  </a>
+{:else}
+  <button
+    class="ui-sq ui-sq-{variant} ui-sq-{size}"
+    class:active
+    {type}
+    {disabled}
+    {title}
+    {onclick}
+  >
+    {#if icon}<i class="fas {icon}" aria-hidden="true"></i>{/if}
+    {#if children}{@render children()}{/if}
+  </button>
+{/if}
+
+<style>
+  .ui-sq {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    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);
+    font-family: inherit;
+    font-size: var(--ui-font-size-md);
+    font-weight: var(--ui-font-weight-medium);
+    line-height: 1;
+    padding: var(--ui-space-6) var(--ui-space-16);
+    border-radius: var(--ui-radius-md);
+    cursor: pointer;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background var(--ui-transition-fast), border-color var(--ui-transition-fast);
+  }
+
+  .ui-sq: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-sq.active {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.42) 100%);
+    border-color: rgba(255, 255, 255, 0.7);
+  }
+
+  .ui-sq:disabled,
+  .ui-sq[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);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  .ui-sq:disabled i,
+  .ui-sq[aria-disabled='true'] i {
+    color: rgba(255, 255, 255, 0.28);
+  }
+
+  .ui-sq i {
+    font-size: var(--ui-font-size-xs);
+    color: rgba(255, 255, 255, 0.65);
+  }
+
+  .ui-sq i.fa-spinner {
+    animation: ui-sq-spin 1s linear infinite;
+  }
+
+  @keyframes ui-sq-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  /* Variant: primary — heavier gradient + brighter border for CTAs */
+  .ui-sq-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-sq-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);
+  }
+  .ui-sq-primary:disabled,
+  .ui-sq-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);
+  }
+
+  /* Variant: secondary — lighter, for low-emphasis actions */
+  .ui-sq-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-sq-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);
+  }
+  .ui-sq-secondary:disabled,
+  .ui-sq-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);
+  }
+
+  /* Variant: success — green gradient for adopt/apply CTAs. Same gradient
+     shape as primary, swapping white for the success hue. */
+  .ui-sq-success {
+    background: linear-gradient(180deg, rgba(90, 168, 94, 0.35) 0%, rgba(90, 168, 94, 0.18) 100%);
+    border-color: rgba(90, 168, 94, 0.60);
+  }
+  .ui-sq-success:hover:not(:disabled):not([aria-disabled='true']) {
+    background: linear-gradient(180deg, rgba(90, 168, 94, 0.48) 0%, rgba(90, 168, 94, 0.26) 100%);
+    border-color: rgba(90, 168, 94, 0.78);
+  }
+  .ui-sq-success:disabled,
+  .ui-sq-success[aria-disabled='true'] {
+    background: linear-gradient(180deg, rgba(90, 168, 94, 0.10) 0%, rgba(90, 168, 94, 0.04) 100%);
+    border-color: rgba(90, 168, 94, 0.25);
+  }
+
+  .ui-sq-compact {
+    font-size: var(--ui-font-size-sm);
+    padding: var(--ui-space-2) var(--ui-space-12);
+  }
+
+  @media (max-width: 640px) {
+    .ui-sq :global(span:not(.chevron)) { display: none; }
+    .ui-sq { padding: var(--ui-space-6) var(--ui-space-10); }
+  }
+</style>

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

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import type { Snippet } from 'svelte';
-  import { setCssVar, removeCssVar, CSS_VAR_CHANGE_EVENT } from '../lib/cssVarSync';
-  import type { CssVarRef } from '../lib/editorTypes';
+  import { setCssVar, removeCssVar, CSS_VAR_CHANGE_EVENT } from '../core/cssVarSync';
+  import type { CssVarRef } from '../core/store/editorTypes';
   import {
     editorState,
     setComponentAlias,
@@ -13,7 +13,7 @@
     unlinkComponentProperty,
     relinkComponentProperty,
     getComponentPropertySiblings,
-  } from '../lib/editorStore';
+  } from '../core/store/editorStore';
   import UILinkToggle from './UILinkToggle.svelte';
   import UIRelinkConfirmPopover from './UIRelinkConfirmPopover.svelte';
   import { keepInViewport } from './keepInViewport';
@@ -325,7 +325,10 @@
   </div>
 
   {#if triggerMeta}
-    <span class="ui-ts-meta-text">{@render triggerMeta()}</span>
+    <span
+      class="ui-ts-meta-text"
+      onmouseenter={(e) => { e.currentTarget.title = e.currentTarget.textContent ?? ''; }}
+    >{@render triggerMeta()}</span>
   {/if}
 </div>
 
@@ -354,7 +357,7 @@
   }
 
   .ui-token-selector.disabled .ui-ts-trigger:hover {
-    border-color: var(--ui-border-default);
+    border-color: var(--ui-border);
     background: var(--ui-surface-low);
   }
 
@@ -364,7 +367,7 @@
     gap: var(--ui-space-6);
     padding: var(--ui-space-2) var(--ui-space-8);
     background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-default);
+    border: 1px solid var(--ui-border);
     border-radius: var(--ui-radius-md);
     cursor: pointer;
     transition: all var(--ui-transition-fast);
@@ -409,7 +412,7 @@
   }
 
   .ui-ts-trigger:hover {
-    border-color: var(--ui-border-strong);
+    border-color: var(--ui-border-higher);
     background: var(--ui-surface-high);
   }
 
@@ -499,7 +502,7 @@
     top: calc(100% + var(--ui-space-4));
     left: 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: 10;
@@ -511,7 +514,7 @@
     justify-content: flex-end;
     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);
   }
 
   .ui-ts-reset {
@@ -521,7 +524,7 @@
     height: 1.5rem;
     padding: var(--ui-space-2) var(--ui-space-8);
     background: none;
-    border: 1px solid var(--ui-border-default);
+    border: 1px solid var(--ui-border);
     border-radius: var(--ui-radius-sm);
     color: var(--ui-text-secondary);
     font-family: inherit;
@@ -537,7 +540,7 @@
 
   .ui-ts-reset:hover:not(:disabled) {
     background: var(--ui-hover);
-    border-color: var(--ui-border-strong);
+    border-color: var(--ui-border-higher);
     color: var(--ui-text-primary);
   }
 

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

@@ -1,6 +1,6 @@
 <script lang="ts" generics="T extends { key: string; label?: string; value?: string }">
   import type { Snippet } from 'svelte';
-  import { resolveAliasChain } from '../lib/tokenRegistry';
+  import { resolveAliasChain } from '../core/palettes/tokenRegistry';
   import UITokenSelector from './UITokenSelector.svelte';
   import UIOptionList from './UIOptionList.svelte';
   import UIOptionItem from './UIOptionItem.svelte';

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

@@ -40,6 +40,7 @@
     copiedVar = v;
     setTimeout(() => { copiedVar = null; }, COPIED_FLASH_MS);
   }
+
 </script>
 
 <div class="variables-container">
@@ -64,10 +65,16 @@
   <!-- Spacing & Borders -->
   <section class="section" id="spacing">
     <h2 class="section-title">Spacing &amp; Borders</h2>
-    <h3 class="subsection-title">Spacing</h3>
-    <TokenScaleTable kind="spacing" vars={SPACING_VARS} {liveVersion} {copiedVar} oncopy={copyVariable} />
-    <h3 class="subsection-title">Borders</h3>
-    <TokenScaleTable kind="border" vars={BORDER_WIDTH_VARS} {liveVersion} {copiedVar} oncopy={copyVariable} />
+    <div class="spacing-borders-columns">
+      <div class="spacing-borders-group">
+        <h3 class="subsection-title">Spacing</h3>
+        <TokenScaleTable kind="spacing" vars={SPACING_VARS} {liveVersion} {copiedVar} oncopy={copyVariable} />
+      </div>
+      <div class="spacing-borders-group">
+        <h3 class="subsection-title">Borders</h3>
+        <TokenScaleTable kind="border" vars={BORDER_WIDTH_VARS} {liveVersion} {copiedVar} oncopy={copyVariable} />
+      </div>
+    </div>
   </section>
 
   <!-- Columns -->
@@ -150,46 +157,65 @@
   .variables-container {
     display: flex;
     flex-direction: column;
-    gap: var(--ui-space-32);
+    gap: var(--ui-space-48);
   }
 
   .section {
     display: flex;
     flex-direction: column;
-    gap: var(--ui-space-16);
+    gap: var(--ui-space-24);
   }
 
   .section-title {
-    font-size: var(--ui-font-size-lg);
+    font-size: var(--ui-font-size-2xl);
     font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-primary);
     margin: 0;
     padding-bottom: var(--ui-space-8);
-    border-bottom: 1px solid var(--ui-border-subtle);
+    border-bottom: 2px solid var(--ui-border-high);
   }
 
+  /* Tier-2 group header: xl bold white. No divider — vertical rhythm carries the
+     separation, matching the palette section's title style at a smaller size. */
   .group-title {
-    font-size: var(--ui-font-size-md);
-    font-weight: var(--ui-font-weight-semibold);
-    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-xl);
+    font-weight: var(--ui-font-weight-bold);
+    color: var(--ui-text-primary);
     margin: 0;
   }
 
   /* Subsection title (used by Spacing & Borders) */
   .subsection-title {
     margin: var(--ui-space-16) 0 var(--ui-space-8);
-    font-size: var(--ui-font-size-sm);
+    font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-weight-semibold);
-    color: var(--ui-text-secondary);
+    color: var(--ui-text-tertiary);
     text-transform: uppercase;
-    letter-spacing: 0.04em;
   }
 
-  .subsection-title:first-child,
-  .section-title + .subsection-title {
+  .subsection-title:first-child {
     margin-top: 0;
   }
 
+  /* Spacing & Borders columns */
+  .spacing-borders-columns {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
+    gap: var(--ui-space-24);
+    align-items: start;
+  }
+
+  .spacing-borders-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-8);
+    min-width: 0;
+  }
+
+  .spacing-borders-group .subsection-title {
+    margin: 0;
+  }
+
   /* Typography */
   .typography-columns {
     display: grid;
@@ -201,12 +227,15 @@
   .typography-group {
     display: flex;
     flex-direction: column;
-    gap: var(--ui-space-8);
+    gap: var(--ui-space-12);
     min-width: 0;
   }
 
   .font-families-group {
     grid-column: 1 / -1;
+    /* Two logical groups stacked here (Project Fonts + Font Families); space them
+       further apart than peers inside a single group. */
+    gap: var(--ui-space-32);
   }
 
   /* Utility Tokens */

package/src/{ui → editor/ui}/palette/GradientStopEditor.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { stopPropagation } from 'svelte/legacy';
 
-  import type { GradientStyle, GradientStop } from '../../lib/themeTypes';
-  import { beginSliderGesture } from '../../lib/editorStore';
+  import type { GradientStyle, GradientStop } from '../../core/themes/themeTypes';
+  import { beginSliderGesture } from '../../core/store/editorStore';
 
   /**
    * Gradient style + stop editor (the bar, draggable handles, and selected-
@@ -296,7 +296,7 @@
     margin-top: var(--ui-space-8);
     padding: var(--ui-space-12);
     background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-lg);
     display: flex;
     flex-direction: column;
@@ -324,7 +324,7 @@
   .style-btn {
     width: 28px;
     height: 28px;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     background: var(--ui-surface-lowest);
     color: var(--ui-text-secondary);
@@ -343,7 +343,7 @@
   }
 
   .style-btn:hover {
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   .size-btn {
@@ -357,7 +357,7 @@
     padding: 2px 6px;
     font-size: var(--ui-font-size-md);
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     color: var(--ui-text-primary);
     text-align: center;
@@ -394,7 +394,7 @@
     padding: 2px 6px;
     font-size: var(--ui-font-size-md);
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     color: var(--ui-text-primary);
   }
@@ -403,7 +403,7 @@
     width: 20px;
     height: 20px;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     flex-shrink: 0;
   }
 
@@ -423,7 +423,7 @@
     position: relative;
     height: 24px;
     border-radius: var(--ui-radius-md);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     cursor: crosshair;
   }
 
@@ -446,7 +446,7 @@
     width: 16px;
     height: 16px;
     border-radius: var(--ui-radius-sm);
-    border: 2px solid var(--ui-border-medium);
+    border: 2px solid var(--ui-border-high);
     flex-shrink: 0;
   }
 
@@ -463,7 +463,7 @@
     height: 0;
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
-    border-top: 6px solid var(--ui-border-medium);
+    border-top: 6px solid var(--ui-border-high);
   }
 
   .gradient-stop-handle.selected .stop-arrow {
@@ -481,7 +481,7 @@
   .stop-remove-btn {
     width: 20px;
     height: 20px;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     background: var(--ui-surface-lowest);
     color: var(--ui-text-tertiary);
@@ -495,7 +495,7 @@
   }
 
   .stop-remove-btn:hover {
-    border-color: var(--ui-border-strong);
+    border-color: var(--ui-border-higher);
     color: var(--ui-text-primary);
   }
 </style>

package/src/{ui → editor/ui}/palette/OverridesPanel.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import ScaleCurveEditor from './ScaleCurveEditor.svelte';
+  import UIPillButton from '../UIPillButton.svelte';
   import { type CurveAnchor, lightnessCurveConfig, saturationCurveConfig, textLightnessCurveConfig } from '../curveEngine';
-  import { scaleToCssVar } from '../../lib/paletteDerivation';
+  import { scaleToCssVar } from '../../core/palettes/paletteDerivation';
 
   /**
    * Per-scale derived swatch section used for Text, Surfaces, and Borders
@@ -126,19 +127,16 @@
   <div class="scale-header">
     <h4 class="scale-title">{scale.title}</h4>
     {#if supportsSnap}
-      <button
-        class="edit-toggle"
-        class:active={snapped}
-        type="button"
+      <UIPillButton
+        size="compact"
+        variant={snapped ? 'primary' : 'outline'}
         onclick={() => onToggleSnap(scale)}
-      >{snapped ? 'Unsnap' : 'Snap All'}</button>
+      >{snapped ? 'Unsnap' : 'Snap All'}</UIPillButton>
     {/if}
-    <button class="edit-toggle" type="button" onclick={() => onClearScaleOverrides(scale)}>Clear Overrides</button>
-    <button
-      class="edit-toggle"
-      type="button"
-      onclick={() => onToggleEditor(scale.title)}
-    >{editorOpen ? 'Close' : 'Edit'}</button>
+    <UIPillButton size="compact" variant="outline" onclick={() => onClearScaleOverrides(scale)}>Clear Overrides</UIPillButton>
+    <UIPillButton size="compact" variant="outline" onclick={() => onToggleEditor(scale.title)}>
+      {editorOpen ? 'Close' : 'Edit'}
+    </UIPillButton>
   </div>
   <div class="swatch-grid" style="--swatch-cols: {scale.steps.length}; --swatch-gap: var(--ui-space-8)">
     {#each scale.steps as step}
@@ -276,36 +274,15 @@
     display: flex;
     align-items: center;
     gap: var(--ui-space-8);
+    padding-bottom: 0.5rem;
   }
 
   .scale-title {
-    font-size: var(--ui-font-size-md);
-    font-weight: var(--ui-font-weight-semibold);
-    color: var(--ui-text-tertiary);
-    margin: 0;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  .edit-toggle {
-    font-size: var(--ui-font-size-md);
-    color: var(--ui-text-tertiary);
-    background: none;
-    border: 1px solid var(--ui-border-subtle);
-    border-radius: var(--ui-radius-sm);
-    padding: var(--ui-space-2) var(--ui-space-6);
-    cursor: pointer;
-  }
-
-  .edit-toggle:hover {
-    color: var(--ui-text-primary);
-    border-color: var(--ui-border-medium);
-  }
-
-  .edit-toggle.active {
+    font-size: var(--ui-font-size-lg);
+    font-weight: var(--ui-font-weight-bold);
     color: var(--ui-text-primary);
-    border-color: var(--ui-border-medium);
-    background: var(--ui-surface-high);
+    margin: 0;
+    padding-right: 1rem;
   }
 
   .swatch-grid {
@@ -368,7 +345,7 @@
     width: 100%;
     height: 2rem;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
   }
 
   .swatch.text-swatch {
@@ -395,7 +372,7 @@
   }
 
   .swatch.derived.clickable:hover {
-    outline: 2px solid var(--ui-border-medium);
+    outline: 2px solid var(--ui-border-high);
     outline-offset: 1px;
   }
 
@@ -419,24 +396,24 @@
 
   .override-slot {
     border-style: dashed;
-    border-color: var(--ui-border-subtle);
+    border-color: var(--ui-border-low);
     cursor: pointer;
     position: relative;
     overflow: hidden;
   }
 
   .override-slot:hover {
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   .override-slot.active {
-    border-color: var(--ui-border-strong);
-    outline: 1px solid var(--ui-border-medium);
+    border-color: var(--ui-border-higher);
+    outline: 1px solid var(--ui-border-high);
     outline-offset: 1px;
   }
 
   .override-slot.populated {
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   .override-slot.matching::after {
@@ -486,7 +463,7 @@
     z-index: 10;
     margin-top: var(--ui-space-4);
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-medium);
+    border: 1px solid var(--ui-border-high);
     border-radius: var(--ui-radius-md);
     padding: var(--ui-space-4);
     display: flex;
@@ -527,7 +504,7 @@
     width: 1rem;
     height: 1rem;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
     flex-shrink: 0;
   }