@motion-proto/live-tokens 0.78.0 → 0.80.0

package/src/editor/skill-atlas/trees/set-geometry.ts

@@ -2,7 +2,7 @@ import type { SkillTree } from '../types';
 
 export const setGeometry: SkillTree = {
   "id": "live-tokens-set-geometry",
-  "digest": "sha256:fbe78a12bbd4791a",
+  "digest": "sha256:adba9f61a4113c03",
   "title": "set-geometry",
   "tagline": "Set Spacing, Corner Radius, Line Weight",
   "nodes": [

package/src/editor/ui/UIPaletteSelector.svelte

@@ -18,11 +18,7 @@
 
   /** Tokens that match the surface/fill suffix but live in <color>-only CSS contexts
       (color-mix, box-shadow color slot) where a gradient would invalidate the declaration. */
-  const GRADIENT_DENYLIST = new Set<string>([
-    '--radiobutton-default-surface',
-    '--radiobutton-hover-surface',
-    '--radiobutton-active-surface',
-  ]);
+  const GRADIENT_DENYLIST = new Set<string>([]);
 
   /** Slot kinds where a gradient is a renderable assignment. */
   function acceptsGradient(name: string): boolean {
@@ -135,7 +131,7 @@
 
   let selector: UITokenSelector | undefined = $state();
   let selectedFamily: string | null = $state(null);
-  let selectedTab: Category = $state('palette');
+  let selectedCategory: Category = $state('palette');
 
   /** Compass-rose layout for the orientation grid. Angles follow the CSS
    *  linear-gradient convention (0° points up, 90° points right). */
@@ -459,7 +455,7 @@
     if (familyFilter && name !== familyFilter) return;
     selectedFamily = name;
     if (name === chosenFamily && chosenCategory) {
-      selectedTab = chosenCategory;
+      selectedCategory = chosenCategory;
     }
   }
 
@@ -575,8 +571,8 @@
     const family = selectedFamily;
     const tabs = availableTabs;
     untrack(() => {
-      if (family && !tabs.find(t => t.id === selectedTab)) {
-        selectedTab = 'palette';
+      if (family && !tabs.find(t => t.id === selectedCategory)) {
+        selectedCategory = 'palette';
       }
     });
   });
@@ -674,14 +670,14 @@
           {#each availableTabs as tab}
             <button
               class="tab-btn"
-              class:selected={selectedTab === tab.id}
+              class:selected={selectedCategory === tab.id}
               class:assigned={chosenCategory === tab.id && chosenFamily === selectedFamily}
-              onclick={() => selectedTab = tab.id}
+              onclick={() => selectedCategory = tab.id}
             >{tab.label}</button>
           {/each}
         </div>
 
-        {#if selectedTab === 'palette'}
+        {#if selectedCategory === 'palette'}
           <div class="step-grid">
             {#each paletteSteps as step}
               <button
@@ -694,7 +690,7 @@
               </button>
             {/each}
           </div>
-        {:else if selectedTab === 'surface'}
+        {:else if selectedCategory === 'surface'}
           <div class="step-grid">
             {#each surfaceSteps as step}
               <button
@@ -707,7 +703,7 @@
               </button>
             {/each}
           </div>
-        {:else if selectedTab === 'border'}
+        {:else if selectedCategory === 'border'}
           <div class="step-grid">
             {#each borderSteps as step}
               <button
@@ -720,7 +716,7 @@
               </button>
             {/each}
           </div>
-        {:else if selectedTab === 'text'}
+        {:else if selectedCategory === 'text'}
           <div class="step-grid">
             {#each (selectedFamily === 'neutral' ? neutralTextSteps : textSteps) as step}
               <button

package/src/editor/ui/variantScales.ts

@@ -102,10 +102,10 @@ export const SHADOW: VariantScaleEntry = {
   ],
 };
 
-/** Used by `*-divider-height` / `*-track-height` variables; values come from the `--space-*` scale,
- *  not a dedicated `--divider-height-*` scale. The label-set differs from BORDER_WIDTH so a divider
- *  can pick from larger heights (up to 100%). */
-export const DIVIDER_HEIGHT: VariantScaleEntry = {
+/** Used by `*-track-height` variables; values come from the `--space-*` scale,
+ *  not a dedicated height scale. The label-set differs from BORDER_WIDTH so a
+ *  track can pick from larger heights (up to 100%). */
+export const TRACK_HEIGHT: VariantScaleEntry = {
   varPrefix: '--space-',
   options: [
     { key: '0', label: 'None', value: '0px' },
@@ -135,12 +135,12 @@ export const DURATION: VariantScaleEntry = {
   ],
 };
 
-/** Used by `*-divider-inset` variables (margin-block trimmed off a stretched
- *  divider). Labels describe the resulting divider, not the inset value: 0
- *  inset = bar-height divider ("Full"); larger insets = shorter divider.
+/** Used by `*-hairline-inset` variables (margin-block trimmed off a stretched
+ *  hairline). Labels describe the resulting line, not the inset value: 0
+ *  inset = bar-height line ("Full"); larger insets = shorter line.
  *  Replaces the percentage-height approach that collapsed to 0 in
  *  auto-height flex parents. */
-export const DIVIDER_INSET: VariantScaleEntry = {
+export const HAIRLINE_INSET: VariantScaleEntry = {
   varPrefix: '--space-',
   options: [
     { key: '0', label: 'Full', value: '0px' },