@motion-proto/live-tokens 0.50.0 → 0.53.0

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 (91) hide show
  1. package/.claude/skills/live-tokens-adjust-shape-space/SKILL.md +7 -1
  2. package/CHANGELOG.md +108 -0
  3. package/bin/adjust.mjs +16 -39
  4. package/bin/generate-theme.mjs +20 -6
  5. package/dist-plugin/adjust/index.cjs +781 -21
  6. package/dist-plugin/adjust/index.d.cts +2 -1
  7. package/dist-plugin/adjust/index.d.ts +2 -1
  8. package/dist-plugin/adjust/index.js +43 -21
  9. package/dist-plugin/{chunk-6OZFXIQI.js → chunk-232GZGQU.js} +207 -12
  10. package/dist-plugin/chunk-NE6N66EE.js +753 -0
  11. package/dist-plugin/{chunk-76TFDTJO.js → chunk-PB2JTK2H.js} +179 -128
  12. package/dist-plugin/{chunk-44RSTAII.js → chunk-TKZBVIW5.js} +33 -5
  13. package/dist-plugin/chunk-YR6GPXW2.js +129 -0
  14. package/dist-plugin/generateColorsAndType/index.cjs +135 -63
  15. package/dist-plugin/generateColorsAndType/index.d.cts +2 -1
  16. package/dist-plugin/generateColorsAndType/index.d.ts +2 -1
  17. package/dist-plugin/generateColorsAndType/index.js +28 -784
  18. package/dist-plugin/{themeTypes-DSwKq-bj.d.ts → index-DpTIRZ2H.d.cts} +67 -26
  19. package/dist-plugin/{themeTypes-DSwKq-bj.d.cts → index-DpTIRZ2H.d.ts} +67 -26
  20. package/dist-plugin/index.cjs +1254 -140
  21. package/dist-plugin/index.js +106 -82
  22. package/dist-plugin/migrateData/index.cjs +956 -14
  23. package/dist-plugin/migrateData/index.js +10 -3
  24. package/dist-plugin/tokensCssMigrations/index.cjs +71 -5
  25. package/dist-plugin/tokensCssMigrations/index.d.cts +20 -9
  26. package/dist-plugin/tokensCssMigrations/index.d.ts +20 -9
  27. package/dist-plugin/tokensCssMigrations/index.js +4 -1
  28. package/package.json +8 -4
  29. package/src/editor/component-editor/NotificationEditor.svelte +6 -0
  30. package/src/editor/component-editor/scaffolding/ComponentFileManager.svelte +9 -23
  31. package/src/editor/component-editor/scaffolding/LinkedBlock.svelte +8 -8
  32. package/src/editor/core/components/adjustAliases.ts +49 -22
  33. package/src/editor/core/components/aliasKinds.ts +7 -2
  34. package/src/editor/core/components/componentConfigService.ts +1 -1
  35. package/src/editor/core/palettes/oklch.ts +3 -137
  36. package/src/editor/core/palettes/paletteDerivation.ts +79 -37
  37. package/src/editor/core/store/editorStore.ts +7 -197
  38. package/src/editor/core/store/editorTypes.ts +9 -30
  39. package/src/editor/core/themes/generateColorsAndType.ts +18 -8
  40. package/src/editor/core/themes/lookSummary.ts +3 -25
  41. package/src/editor/core/themes/migrateComponentConfig.ts +205 -0
  42. package/src/editor/core/themes/migrations/2026-05-19-sectiondivider-rich-gradient.ts +1 -1
  43. package/src/editor/core/themes/migrations/2026-05-20-sectiondivider-slim-variants.ts +1 -1
  44. package/src/editor/core/themes/migrations/2026-05-22-sectiondivider-intrinsics-to-css.ts +1 -1
  45. package/src/editor/core/themes/parsers/gradient.ts +211 -0
  46. package/src/editor/core/themes/slices/gradients.ts +5 -58
  47. package/src/editor/core/themes/themeService.ts +22 -9
  48. package/src/editor/core/themes/themeTypes.ts +89 -27
  49. package/src/editor/docs/content/editing-tokens.md +6 -2
  50. package/src/editor/docs/content/themes-workflow.md +9 -11
  51. package/src/editor/docs/content/where-themes-live.md +2 -2
  52. package/src/editor/docs/content.generated.ts +3 -3
  53. package/src/editor/index.ts +1 -0
  54. package/src/editor/styles/ui-editor.css +5 -2
  55. package/src/editor/ui/BezierCurveEditor.svelte +90 -67
  56. package/src/editor/ui/PaletteEditor.svelte +180 -59
  57. package/src/editor/ui/ThemePanel.svelte +24 -15
  58. package/src/editor/ui/Toggle.svelte +36 -24
  59. package/src/editor/ui/UIPillButton.svelte +1 -1
  60. package/src/editor/ui/UIReveal.svelte +47 -0
  61. package/src/editor/ui/UISquareButton.svelte +1 -1
  62. package/src/editor/ui/colors/ColorStory.svelte +12 -8
  63. package/src/editor/ui/colors/ColorsTab.svelte +4 -5
  64. package/src/editor/ui/curveEngine.ts +101 -21
  65. package/src/editor/ui/palette/OverridesPanel.svelte +23 -8
  66. package/src/editor/ui/palette/PaletteBase.svelte +17 -78
  67. package/src/editor/ui/palette/PaletteJumpButton.svelte +3 -3
  68. package/src/editor/ui/palette/ScaleCurveEditor.svelte +110 -20
  69. package/src/editor/ui/palette/curveSummary.ts +20 -0
  70. package/src/editor/ui/palette/dockMagnify.ts +5 -13
  71. package/src/editor/ui/palette/paletteMath.ts +7 -4
  72. package/src/live-tokens/data/colors-and-type/autumn.json +528 -528
  73. package/src/live-tokens/data/colors-and-type/default.json +247 -247
  74. package/src/live-tokens/data/colors-and-type/halloween.json +532 -532
  75. package/src/live-tokens/data/colors-and-type/midnight-study.json +538 -538
  76. package/src/live-tokens/data/colors-and-type/ocean.json +521 -521
  77. package/src/live-tokens/data/colors-and-type/royal-velvet.json +532 -532
  78. package/src/live-tokens/data/colors-and-type/spring-meadow.json +504 -504
  79. package/src/live-tokens/data/colors-and-type/sunset.json +531 -531
  80. package/src/live-tokens/data/themes/autumn.json +604 -568
  81. package/src/live-tokens/data/themes/halloween.json +584 -583
  82. package/src/live-tokens/data/themes/midnight-study.json +673 -605
  83. package/src/live-tokens/data/themes/ocean.json +597 -561
  84. package/src/live-tokens/data/themes/royal-velvet.json +574 -573
  85. package/src/live-tokens/data/themes/spring-meadow.json +590 -556
  86. package/src/live-tokens/data/themes/sunset.json +632 -571
  87. package/src/live-tokens/data/tokens.generated.css +282 -282
  88. package/src/system/components/FloatingTokenTags.css +0 -1
  89. package/src/system/internal/backgroundContrast.ts +7 -0
  90. package/src/system/internal/oklch.ts +189 -0
  91. package/src/system/styles/tokens.css +283 -283
@@ -7,6 +7,31 @@ interface CurveAnchor {
7
7
  outDy: number;
8
8
  }
9
9
 
10
+ interface GradientStop$1 {
11
+ /** 0–100 percentage along the gradient axis. */
12
+ position: number;
13
+ /** A design-token name (`--surface-neutral-low`) or a raw CSS colour. */
14
+ color: string;
15
+ /** 0–100 alpha. Absent means 100. */
16
+ opacity?: number;
17
+ /** `false` marks the stop an explicit off-palette override: the stop picker
18
+ * opens to any colour rather than the current family, and a family-swap
19
+ * rewrite skips the stop so its colour survives. Absent means `true`.
20
+ * It has no CSS form, so `parseGradientValue` never produces it and
21
+ * `formatGradientValue` ignores it. It lives on the shared stop because
22
+ * the persisted stop carries it. */
23
+ monochrome?: boolean;
24
+ }
25
+ interface GradientValue {
26
+ type: 'linear' | 'radial' | 'solid' | 'none';
27
+ angle: number;
28
+ radius?: number;
29
+ centerX?: number;
30
+ aspectX?: number;
31
+ aspectY?: number;
32
+ stops: GradientStop$1[];
33
+ }
34
+
10
35
  interface Oklch {
11
36
  l: number;
12
37
  c: number;
@@ -33,11 +58,21 @@ interface PaletteConfig {
33
58
  baseColor: Oklch;
34
59
  lightnessCurve: CurveAnchor[];
35
60
  saturationCurve: CurveAnchor[];
61
+ /** Signed hue offset in degrees per step, applied on top of the base hue.
62
+ * Absent means flat zero: the palette holds one hue, which is what every
63
+ * theme saved before this field did. */
64
+ hueCurve?: CurveAnchor[];
36
65
  scaleCurves: Record<string, {
37
66
  lightness: CurveAnchor[];
38
67
  saturation: CurveAnchor[];
68
+ hue?: CurveAnchor[];
39
69
  }>;
40
70
  curveOffset: Record<string, number>;
71
+ /** Per curve key: are the tangents derived from the points, or held by hand?
72
+ * Only an explicit switch-off is recorded. A missing key means the curve's own
73
+ * shape answers (`isAutoSmoothCurve`), which is what every theme saved before
74
+ * the flag existed relies on. */
75
+ curveAutoSmooth?: Record<string, boolean>;
41
76
  overrides: Record<string, Oklch>;
42
77
  snappedScales: string[];
43
78
  emptyMode?: 'solid' | 'gradient';
@@ -50,11 +85,12 @@ interface PaletteConfig {
50
85
  /**
51
86
  * Where the base color sits in the ramp while `anchorToBase` is on: the
52
87
  * PALETTE_STEPS index whose curve anchors are pinned to the base color
53
- * (lightness = base L, saturation = multiplier 100). `displacedL` /
54
- * `displacedS` remember the y of a pre-existing anchor (endpoint or
55
- * user-authored) the placement overwrote at that x, so moving the
56
- * placement or toggling off restores it instead of deleting it.
57
- * `priorLightnessEndpoints` / `priorSaturationEndpoints` remember the two
88
+ * (lightness = base L, saturation = multiplier 100, hue delta = 0 when a
89
+ * hue curve exists). `displacedL` / `displacedS` / `displacedH` remember
90
+ * the y of a pre-existing anchor (endpoint or user-authored) the placement
91
+ * overwrote at that x, so moving the placement or toggling off restores it
92
+ * instead of deleting it. `priorLightnessEndpoints` /
93
+ * `priorSaturationEndpoints` / `priorHueEndpoints` remember the two
58
94
  * endpoints exactly as they stood before the curve's first-ever placement
59
95
  * (a smoothed reshape, not algebraically invertible the way a later
60
96
  * scaled-handle re-placement is), so a clear can still restore the true
@@ -64,8 +100,10 @@ interface PaletteConfig {
64
100
  step: number;
65
101
  displacedL?: number;
66
102
  displacedS?: number;
103
+ displacedH?: number;
67
104
  priorLightnessEndpoints?: [CurveAnchor, CurveAnchor];
68
105
  priorSaturationEndpoints?: [CurveAnchor, CurveAnchor];
106
+ priorHueEndpoints?: [CurveAnchor, CurveAnchor];
69
107
  };
70
108
  /**
71
109
  * Set to true by importers when they overlay `cssVariables[--color-{ns}-*]`
@@ -133,11 +171,21 @@ interface GradientDiskToken {
133
171
  }[];
134
172
  }
135
173
  /**
136
- * Where a live read resolved from: the unsaved `_working` buffer, the open
137
- * theme's embedded copy, or the shipped default. A `working` source is an
138
- * unsaved delta from the active theme.
174
+ * Where a live component config resolved from: the unsaved `_working`
175
+ * buffer, or the open theme's embedded copy. Every theme carries every
176
+ * component complete, so `working` is the only genuine divergence —
177
+ * anything else is what the open document itself resolves to.
178
+ */
179
+ type LiveSource = 'working' | 'theme';
180
+ /**
181
+ * Where a live colors-and-type read resolved from. Unlike `LiveSource`, this
182
+ * keeps a third value: colors-and-type resolution is unchanged by the theme
183
+ * completeness work (docs/plans/theme-completeness.md Wave 4), so `default`
184
+ * still answers the one case completeness can't reach — the open theme's
185
+ * file itself is unreadable (a stale pointer, or deleted mid-session), so
186
+ * there is no document to resolve `working` or `theme` against.
139
187
  */
140
- type LiveSource = 'working' | 'theme' | 'default';
188
+ type ColorsAndTypeSource = 'working' | 'theme' | 'default';
141
189
  interface ColorsAndType {
142
190
  name: string;
143
191
  createdAt: string;
@@ -157,8 +205,8 @@ interface ColorsAndType {
157
205
  * handlers; read by `themeInit` to seed `openThemeSlug`. Not persisted.
158
206
  */
159
207
  _fileName?: string;
160
- /** Server-attached marker: which of the three live layers answered. */
161
- _source?: LiveSource;
208
+ /** Server-attached marker: which live layer answered. See `ColorsAndTypeSource`. */
209
+ _source?: ColorsAndTypeSource;
162
210
  /**
163
211
  * Migration stamp. Absent on legacy files, treated as 0; the loader runs
164
212
  * any registered theme migrations whose `fromVersion >= file.schemaVersion`.
@@ -173,19 +221,7 @@ interface ColorsAndType {
173
221
  * gradients that can't compress to a single string. */
174
222
  type AliasDiskValue = string | {
175
223
  kind: 'gradient';
176
- value: {
177
- type: 'linear' | 'radial' | 'solid' | 'none';
178
- angle: number;
179
- radius?: number;
180
- centerX?: number;
181
- aspectX?: number;
182
- aspectY?: number;
183
- stops: {
184
- position: number;
185
- color: string;
186
- opacity?: number;
187
- }[];
188
- };
224
+ value: GradientValue;
189
225
  };
190
226
  interface ComponentConfig {
191
227
  name: string;
@@ -199,7 +235,10 @@ interface ComponentConfig {
199
235
  * theme, not a config file. Set by the component-configs GET handlers.
200
236
  */
201
237
  _fileName?: string;
202
- /** Server-attached marker: which of the three live layers answered. */
238
+ /** Server-attached marker: which live layer answered — `working` the
239
+ * buffer, `theme` the open document's embedded copy. No third value:
240
+ * every theme carries every component, so there is no shipped-default
241
+ * layer left to report (unlike `ColorsAndTypeSource`). */
203
242
  _source?: LiveSource;
204
243
  /**
205
244
  * Migration stamp. Absent on legacy files, treated as 0. See `ColorsAndType.schemaVersion`.
@@ -207,4 +246,6 @@ interface ComponentConfig {
207
246
  schemaVersion?: number;
208
247
  }
209
248
 
210
- export type { AliasDiskValue as A, ColorsAndType as C, FontSource as F, GradientDiskToken as G, HarmonyMode as H, Oklch as O, ComponentConfig as a, FontStack as b };
249
+ declare const CURRENT_COMPONENT_SCHEMA_VERSION: number;
250
+
251
+ export { type AliasDiskValue as A, CURRENT_COMPONENT_SCHEMA_VERSION as C, type FontSource as F, type GradientDiskToken as G, type HarmonyMode as H, type Oklch as O, type ColorsAndType as a, type ComponentConfig as b, type FontStack as c };
@@ -7,6 +7,31 @@ interface CurveAnchor {
7
7
  outDy: number;
8
8
  }
9
9
 
10
+ interface GradientStop$1 {
11
+ /** 0–100 percentage along the gradient axis. */
12
+ position: number;
13
+ /** A design-token name (`--surface-neutral-low`) or a raw CSS colour. */
14
+ color: string;
15
+ /** 0–100 alpha. Absent means 100. */
16
+ opacity?: number;
17
+ /** `false` marks the stop an explicit off-palette override: the stop picker
18
+ * opens to any colour rather than the current family, and a family-swap
19
+ * rewrite skips the stop so its colour survives. Absent means `true`.
20
+ * It has no CSS form, so `parseGradientValue` never produces it and
21
+ * `formatGradientValue` ignores it. It lives on the shared stop because
22
+ * the persisted stop carries it. */
23
+ monochrome?: boolean;
24
+ }
25
+ interface GradientValue {
26
+ type: 'linear' | 'radial' | 'solid' | 'none';
27
+ angle: number;
28
+ radius?: number;
29
+ centerX?: number;
30
+ aspectX?: number;
31
+ aspectY?: number;
32
+ stops: GradientStop$1[];
33
+ }
34
+
10
35
  interface Oklch {
11
36
  l: number;
12
37
  c: number;
@@ -33,11 +58,21 @@ interface PaletteConfig {
33
58
  baseColor: Oklch;
34
59
  lightnessCurve: CurveAnchor[];
35
60
  saturationCurve: CurveAnchor[];
61
+ /** Signed hue offset in degrees per step, applied on top of the base hue.
62
+ * Absent means flat zero: the palette holds one hue, which is what every
63
+ * theme saved before this field did. */
64
+ hueCurve?: CurveAnchor[];
36
65
  scaleCurves: Record<string, {
37
66
  lightness: CurveAnchor[];
38
67
  saturation: CurveAnchor[];
68
+ hue?: CurveAnchor[];
39
69
  }>;
40
70
  curveOffset: Record<string, number>;
71
+ /** Per curve key: are the tangents derived from the points, or held by hand?
72
+ * Only an explicit switch-off is recorded. A missing key means the curve's own
73
+ * shape answers (`isAutoSmoothCurve`), which is what every theme saved before
74
+ * the flag existed relies on. */
75
+ curveAutoSmooth?: Record<string, boolean>;
41
76
  overrides: Record<string, Oklch>;
42
77
  snappedScales: string[];
43
78
  emptyMode?: 'solid' | 'gradient';
@@ -50,11 +85,12 @@ interface PaletteConfig {
50
85
  /**
51
86
  * Where the base color sits in the ramp while `anchorToBase` is on: the
52
87
  * PALETTE_STEPS index whose curve anchors are pinned to the base color
53
- * (lightness = base L, saturation = multiplier 100). `displacedL` /
54
- * `displacedS` remember the y of a pre-existing anchor (endpoint or
55
- * user-authored) the placement overwrote at that x, so moving the
56
- * placement or toggling off restores it instead of deleting it.
57
- * `priorLightnessEndpoints` / `priorSaturationEndpoints` remember the two
88
+ * (lightness = base L, saturation = multiplier 100, hue delta = 0 when a
89
+ * hue curve exists). `displacedL` / `displacedS` / `displacedH` remember
90
+ * the y of a pre-existing anchor (endpoint or user-authored) the placement
91
+ * overwrote at that x, so moving the placement or toggling off restores it
92
+ * instead of deleting it. `priorLightnessEndpoints` /
93
+ * `priorSaturationEndpoints` / `priorHueEndpoints` remember the two
58
94
  * endpoints exactly as they stood before the curve's first-ever placement
59
95
  * (a smoothed reshape, not algebraically invertible the way a later
60
96
  * scaled-handle re-placement is), so a clear can still restore the true
@@ -64,8 +100,10 @@ interface PaletteConfig {
64
100
  step: number;
65
101
  displacedL?: number;
66
102
  displacedS?: number;
103
+ displacedH?: number;
67
104
  priorLightnessEndpoints?: [CurveAnchor, CurveAnchor];
68
105
  priorSaturationEndpoints?: [CurveAnchor, CurveAnchor];
106
+ priorHueEndpoints?: [CurveAnchor, CurveAnchor];
69
107
  };
70
108
  /**
71
109
  * Set to true by importers when they overlay `cssVariables[--color-{ns}-*]`
@@ -133,11 +171,21 @@ interface GradientDiskToken {
133
171
  }[];
134
172
  }
135
173
  /**
136
- * Where a live read resolved from: the unsaved `_working` buffer, the open
137
- * theme's embedded copy, or the shipped default. A `working` source is an
138
- * unsaved delta from the active theme.
174
+ * Where a live component config resolved from: the unsaved `_working`
175
+ * buffer, or the open theme's embedded copy. Every theme carries every
176
+ * component complete, so `working` is the only genuine divergence —
177
+ * anything else is what the open document itself resolves to.
178
+ */
179
+ type LiveSource = 'working' | 'theme';
180
+ /**
181
+ * Where a live colors-and-type read resolved from. Unlike `LiveSource`, this
182
+ * keeps a third value: colors-and-type resolution is unchanged by the theme
183
+ * completeness work (docs/plans/theme-completeness.md Wave 4), so `default`
184
+ * still answers the one case completeness can't reach — the open theme's
185
+ * file itself is unreadable (a stale pointer, or deleted mid-session), so
186
+ * there is no document to resolve `working` or `theme` against.
139
187
  */
140
- type LiveSource = 'working' | 'theme' | 'default';
188
+ type ColorsAndTypeSource = 'working' | 'theme' | 'default';
141
189
  interface ColorsAndType {
142
190
  name: string;
143
191
  createdAt: string;
@@ -157,8 +205,8 @@ interface ColorsAndType {
157
205
  * handlers; read by `themeInit` to seed `openThemeSlug`. Not persisted.
158
206
  */
159
207
  _fileName?: string;
160
- /** Server-attached marker: which of the three live layers answered. */
161
- _source?: LiveSource;
208
+ /** Server-attached marker: which live layer answered. See `ColorsAndTypeSource`. */
209
+ _source?: ColorsAndTypeSource;
162
210
  /**
163
211
  * Migration stamp. Absent on legacy files, treated as 0; the loader runs
164
212
  * any registered theme migrations whose `fromVersion >= file.schemaVersion`.
@@ -173,19 +221,7 @@ interface ColorsAndType {
173
221
  * gradients that can't compress to a single string. */
174
222
  type AliasDiskValue = string | {
175
223
  kind: 'gradient';
176
- value: {
177
- type: 'linear' | 'radial' | 'solid' | 'none';
178
- angle: number;
179
- radius?: number;
180
- centerX?: number;
181
- aspectX?: number;
182
- aspectY?: number;
183
- stops: {
184
- position: number;
185
- color: string;
186
- opacity?: number;
187
- }[];
188
- };
224
+ value: GradientValue;
189
225
  };
190
226
  interface ComponentConfig {
191
227
  name: string;
@@ -199,7 +235,10 @@ interface ComponentConfig {
199
235
  * theme, not a config file. Set by the component-configs GET handlers.
200
236
  */
201
237
  _fileName?: string;
202
- /** Server-attached marker: which of the three live layers answered. */
238
+ /** Server-attached marker: which live layer answered — `working` the
239
+ * buffer, `theme` the open document's embedded copy. No third value:
240
+ * every theme carries every component, so there is no shipped-default
241
+ * layer left to report (unlike `ColorsAndTypeSource`). */
203
242
  _source?: LiveSource;
204
243
  /**
205
244
  * Migration stamp. Absent on legacy files, treated as 0. See `ColorsAndType.schemaVersion`.
@@ -207,4 +246,6 @@ interface ComponentConfig {
207
246
  schemaVersion?: number;
208
247
  }
209
248
 
210
- export type { AliasDiskValue as A, ColorsAndType as C, FontSource as F, GradientDiskToken as G, HarmonyMode as H, Oklch as O, ComponentConfig as a, FontStack as b };
249
+ declare const CURRENT_COMPONENT_SCHEMA_VERSION: number;
250
+
251
+ export { type AliasDiskValue as A, CURRENT_COMPONENT_SCHEMA_VERSION as C, type FontSource as F, type GradientDiskToken as G, type HarmonyMode as H, type Oklch as O, type ColorsAndType as a, type ComponentConfig as b, type FontStack as c };