@motion-proto/live-tokens 0.3.2 → 0.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/src/component-editor/scaffolding/GradientCard.svelte +6 -6
package/README.md CHANGED
@@ -185,4 +185,4 @@ The package publishes to npm as `@motion-proto/live-tokens`.
185
185
 
186
186
  ## License
187
187
 
188
- MIT. Originally extracted from RuneGoblin.
188
+ MIT. Originally extracted from [RuneGoblin](https://www.runegoblin.com/).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@motion-proto/live-tokens",
3
- "version": "0.3.2",
3
+ "version": "0.3.6",
4
4
  "type": "module",
5
5
  "description": "Design token editor with live CSS variable editing. Svelte 4 + Vite.",
6
6
  "keywords": [
package/src/component-editor/scaffolding/GradientCard.svelte CHANGED
@@ -11,7 +11,7 @@
11
11
  * UIPaletteSelector. Reads resolve through `tokenRegistry$` so values
12
12
  * authored as `var(--gradient-angle-diagonal)` show their resolved degrees.
13
13
  */
14
- import { editorState, setComponentAlias } from '../../lib/editorStore';
14
+ import { setComponentAlias } from '../../lib/editorStore';
15
15
  import { tokenRegistry$ } from '../../lib/tokenRegistry';
16
16
  import UIPaletteSelector from '../../ui/UIPaletteSelector.svelte';
17
17
  import AngleDial from './AngleDial.svelte';
@@ -59,11 +59,11 @@
59
59
  parseNumberFromCss(resolveLiteralWith($tokenRegistry$, stopPositionVar(3)), '%') ?? 100,
60
60
  ] as [number, number, number];
61
61
 
62
- $: stopColors = ([1, 2, 3] as StopIndex[]).map((i) => {
63
- const ref = $editorState.components[component]?.aliases[stopColorVar(i)];
64
- if (!ref) return '#888';
65
- return ref.kind === 'token' ? `var(${ref.name})` : ref.value;
66
- }) as [string, string, string];
62
+ // Reference the per-stop CSS var directly so the cascade fills in the
63
+ // component's CSS defaults when the user hasn't overridden a stop. Reading
64
+ // `aliases[...]` alone would miss defaults (no override → `#888`) even
65
+ // though the component is rendering the color via its own `:root` block.
66
+ $: stopColors = ([1, 2, 3] as StopIndex[]).map((i) => `var(${stopColorVar(i)})`) as [string, string, string];
67
67
 
68
68
  // Build the live gradient string from current positions + colors so the
69
69
  // ribbon reflects edits even mid-drag (before the component re-renders via