@motion-proto/live-tokens 0.38.0 → 0.40.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 (24) hide show
  1. package/.claude/skills/live-tokens-pick-component/SKILL.md +9 -1
  2. package/CHANGELOG.md +71 -0
  3. package/dist-plugin/index.cjs +20 -72
  4. package/dist-plugin/index.js +20 -72
  5. package/package.json +1 -1
  6. package/src/editor/component-editor/IconButtonEditor.svelte +175 -0
  7. package/src/editor/component-editor/SectionDividerEditor.svelte +1 -1
  8. package/src/editor/component-editor/registry.ts +11 -0
  9. package/src/editor/core/palettes/paletteDerivation.ts +28 -83
  10. package/src/editor/core/store/editorStore.ts +2 -1
  11. package/src/editor/core/store/gradientSource.ts +49 -9
  12. package/src/editor/core/themes/migrations/2026-06-05-palette-unification.ts +90 -0
  13. package/src/editor/core/themes/themeTypes.ts +3 -8
  14. package/src/editor/docs/content/01-overview.md +3 -2
  15. package/src/editor/docs/content.generated.ts +1 -1
  16. package/src/editor/ui/ColorEditPanel.svelte +93 -172
  17. package/src/editor/ui/PaletteEditor.svelte +46 -207
  18. package/src/editor/ui/VariablesTab.svelte +2 -2
  19. package/src/editor/ui/palette/PaletteBase.svelte +29 -37
  20. package/src/editor/ui/palette/paletteEditorState.ts +12 -25
  21. package/src/editor/ui/palette/paletteMath.ts +22 -49
  22. package/src/live-tokens/data/themes/default.json +11 -391
  23. package/src/live-tokens/data/tokens.generated.css +14 -14
  24. package/src/system/components/IconButton.svelte +322 -0
package/src/editor/ui/palette/paletteMath.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import { hexToOklch, oklchToHex, gamutClamp } from '../../core/palettes/oklch';
2
2
  import { type CurveAnchor, makeAnchor, sampleCurve } from '../curveEngine';
3
+ import type { PaletteConfig } from '../../core/themes/themeTypes';
3
4
 
4
5
  export const GRAY_FALLBACK = '#808080';
5
- export const DEFAULT_TINT_CHROMA = 0.04;
6
6
 
7
7
  export interface Step {
8
8
  name: string;
@@ -17,13 +17,6 @@ export interface Scale {
17
17
  steps: Step[];
18
18
  }
19
19
 
20
- export interface GrayStep {
21
- label: string;
22
- hue: number;
23
- saturation: number;
24
- lightness: number;
25
- }
26
-
27
20
  export interface PaletteStepDef {
28
21
  label: string;
29
22
  lightness: number;
@@ -34,8 +27,27 @@ export type ScaleCurves = Record<string, { lightness: CurveAnchor[]; saturation:
34
27
 
35
28
  export const DEFAULT_PALETTE_LIGHTNESS = (): CurveAnchor[] => [makeAnchor(0, 95, 5), makeAnchor(100, 8, 5)];
36
29
  export const DEFAULT_PALETTE_SATURATION = (): CurveAnchor[] => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)];
37
- export const DEFAULT_GRAY_LIGHTNESS = (): CurveAnchor[] => [makeAnchor(0, 92, 5), makeAnchor(100, 3, 5)];
38
- export const DEFAULT_GRAY_SATURATION = (): CurveAnchor[] => [makeAnchor(0, 20, 30), makeAnchor(100, 20, 30)];
30
+ // Neutrals seed a calmer, wider lightness ramp than accents; the saturation
31
+ // curve is the same flat 100 (chroma comes from a low-chroma base, not a cap).
32
+ export const DEFAULT_NEUTRAL_LIGHTNESS = (): CurveAnchor[] => [makeAnchor(0, 92, 5), makeAnchor(100, 3, 5)];
33
+
34
+ /**
35
+ * Seed config for a palette. The derivation path is unified; the only
36
+ * per-role difference is the seed: neutrals get the wider neutral lightness
37
+ * ramp, accents the standard one. Everything is editable afterward.
38
+ */
39
+ export function defaultPaletteConfig(opts: { baseColor: string; neutral?: boolean }): PaletteConfig {
40
+ return {
41
+ baseColor: opts.baseColor,
42
+ lightnessCurve: opts.neutral ? DEFAULT_NEUTRAL_LIGHTNESS() : DEFAULT_PALETTE_LIGHTNESS(),
43
+ saturationCurve: DEFAULT_PALETTE_SATURATION(),
44
+ scaleCurves: defaultScaleCurvesObject(),
45
+ curveOffset: { lightness: 0, saturation: 0 },
46
+ overrides: {},
47
+ snappedScales: [],
48
+ anchorToBase: true,
49
+ };
50
+ }
39
51
 
40
52
  export const defaultScaleCurves: Record<string, { lightness: () => CurveAnchor[]; saturation: () => CurveAnchor[] }> = {
41
53
  Surfaces: {
@@ -74,20 +86,6 @@ export const paletteStepLightness: PaletteStepDef[] = [
74
86
  { label: '950', lightness: 8 },
75
87
  ];
76
88
 
77
- export const graySteps: GrayStep[] = [
78
- { label: '100', hue: 240, saturation: 5, lightness: 92 },
79
- { label: '200', hue: 220, saturation: 13, lightness: 84 },
80
- { label: '300', hue: 216, saturation: 12, lightness: 72 },
81
- { label: '400', hue: 240, saturation: 5, lightness: 61 },
82
- { label: '500', hue: 240, saturation: 5, lightness: 50 },
83
- { label: '600', hue: 240, saturation: 5, lightness: 42 },
84
- { label: '700', hue: 240, saturation: 5, lightness: 34 },
85
- { label: '800', hue: 240, saturation: 10, lightness: 25 },
86
- { label: '850', hue: 229, saturation: 20, lightness: 18 },
87
- { label: '900', hue: 240, saturation: 30, lightness: 10 },
88
- { label: '950', hue: 229, saturation: 34, lightness: 3 },
89
- ];
90
-
91
89
  export const scales: Scale[] = [
92
90
  {
93
91
  title: 'Surfaces',
@@ -127,7 +125,6 @@ export const scales: Scale[] = [
127
125
  ];
128
126
 
129
127
  export const paletteStepKey = (label: string) => `Palette-${label}`;
130
- export const grayStepKey = (label: string) => `gray-${label}`;
131
128
  export const stepKey = (scaleTitle: string, stepName: string) => `${scaleTitle}-${stepName}`;
132
129
  export const scaleCurveKey = (scaleTitle: string, channel: 'lightness' | 'saturation') => `${scaleTitle}-${channel}`;
133
130
 
@@ -135,10 +132,6 @@ export function stepIndexToX(index: number): number {
135
132
  return (index / (paletteStepLightness.length - 1)) * 100;
136
133
  }
137
134
 
138
- export function grayStepToX(index: number): number {
139
- return graySteps.length > 1 ? (index / (graySteps.length - 1)) * 100 : 50;
140
- }
141
-
142
135
  export function scaleStepToX(step: Step, scale: Scale): number {
143
136
  const idx = scale.steps.indexOf(step);
144
137
  return scale.steps.length > 1 ? (idx / (scale.steps.length - 1)) * 100 : 50;
@@ -160,26 +153,6 @@ export function removeLockedAnchor(curve: CurveAnchor[], idx: number | null): Cu
160
153
  return curve.filter((_, i) => i !== idx);
161
154
  }
162
155
 
163
- export function computeGrayColor(
164
- index: number,
165
- hue: number,
166
- chroma: number,
167
- lightnessCurve: CurveAnchor[],
168
- saturationCurve: CurveAnchor[],
169
- curveOffset: CurveOffset
170
- ): string {
171
- const xPos = grayStepToX(index);
172
- const lOff = curveOffset['gray-lightness'] ?? 0;
173
- const sOff = curveOffset['gray-saturation'] ?? 0;
174
-
175
- const targetL = Math.max(0, Math.min(100, sampleCurve(lightnessCurve, xPos) + lOff)) / 100;
176
- const satMul = Math.max(0, Math.min(2, (sampleCurve(saturationCurve, xPos) + sOff) / 100));
177
- const targetC = chroma * satMul;
178
-
179
- const clamped = gamutClamp(targetL, targetC, hue);
180
- return oklchToHex(clamped.l, clamped.c, clamped.h);
181
- }
182
-
183
156
  export function computePaletteColor(
184
157
  index: number,
185
158
  base: string,
package/src/live-tokens/data/themes/default.json CHANGED
@@ -4,46 +4,8 @@
4
4
  "updatedAt": "2026-06-01T23:57:08.090Z",
5
5
  "editorConfigs": {
6
6
  "Neutral": {
7
- "baseColor": "#808080",
8
- "tintHue": 236,
9
- "tintChroma": 0.067,
7
+ "baseColor": "#70787e",
10
8
  "lightnessCurve": [
11
- {
12
- "x": 0,
13
- "y": 86,
14
- "inDx": -16.188139217854378,
15
- "inDy": 19,
16
- "outDx": 16.188139217854378,
17
- "outDy": -19
18
- },
19
- {
20
- "x": 100,
21
- "y": 11,
22
- "inDx": -45.49158094126201,
23
- "inDy": 19,
24
- "outDx": 45.49158094126201,
25
- "outDy": -19
26
- }
27
- ],
28
- "saturationCurve": [
29
- {
30
- "x": 0,
31
- "y": 76,
32
- "inDx": 0,
33
- "inDy": 0,
34
- "outDx": 0,
35
- "outDy": 0
36
- },
37
- {
38
- "x": 100,
39
- "y": 123,
40
- "inDx": 0,
41
- "inDy": 0,
42
- "outDx": 0,
43
- "outDy": 0
44
- }
45
- ],
46
- "grayLightnessCurve": [
47
9
  {
48
10
  "x": 0,
49
11
  "y": 92,
@@ -61,10 +23,10 @@
61
23
  "outDy": 0
62
24
  }
63
25
  ],
64
- "graySaturationCurve": [
26
+ "saturationCurve": [
65
27
  {
66
28
  "x": 0,
67
- "y": 20,
29
+ "y": 100,
68
30
  "inDx": -30,
69
31
  "inDy": 0,
70
32
  "outDx": 30,
@@ -72,7 +34,7 @@
72
34
  },
73
35
  {
74
36
  "x": 100,
75
- "y": 20,
37
+ "y": 100,
76
38
  "inDx": -30,
77
39
  "inDy": 0,
78
40
  "outDx": 30,
@@ -204,46 +166,8 @@
204
166
  "anchorToBase": true
205
167
  },
206
168
  "Alternate": {
207
- "baseColor": "#808080",
208
- "tintHue": 53,
209
- "tintChroma": 0.041,
169
+ "baseColor": "#817b78",
210
170
  "lightnessCurve": [
211
- {
212
- "x": 0,
213
- "y": 86,
214
- "inDx": -16.188139217854378,
215
- "inDy": 19,
216
- "outDx": 16.188139217854378,
217
- "outDy": -19
218
- },
219
- {
220
- "x": 100,
221
- "y": 11,
222
- "inDx": -45.49158094126201,
223
- "inDy": 19,
224
- "outDx": 45.49158094126201,
225
- "outDy": -19
226
- }
227
- ],
228
- "saturationCurve": [
229
- {
230
- "x": 0,
231
- "y": 76,
232
- "inDx": 0,
233
- "inDy": 0,
234
- "outDx": 0,
235
- "outDy": 0
236
- },
237
- {
238
- "x": 100,
239
- "y": 123,
240
- "inDx": 0,
241
- "inDy": 0,
242
- "outDx": 0,
243
- "outDy": 0
244
- }
245
- ],
246
- "grayLightnessCurve": [
247
171
  {
248
172
  "x": 0,
249
173
  "y": 92,
@@ -261,10 +185,10 @@
261
185
  "outDy": 0
262
186
  }
263
187
  ],
264
- "graySaturationCurve": [
188
+ "saturationCurve": [
265
189
  {
266
190
  "x": 0,
267
- "y": 20,
191
+ "y": 100,
268
192
  "inDx": -30,
269
193
  "inDy": 0,
270
194
  "outDx": 30,
@@ -272,7 +196,7 @@
272
196
  },
273
197
  {
274
198
  "x": 100,
275
- "y": 20,
199
+ "y": 100,
276
200
  "inDx": -30,
277
201
  "inDy": 0,
278
202
  "outDx": 30,
@@ -396,9 +320,9 @@
396
320
  }
397
321
  },
398
322
  "curveOffset": {
323
+ "Text-lightness": 0,
399
324
  "lightness": 0,
400
- "saturation": 0,
401
- "Text-lightness": 0
325
+ "saturation": 0
402
326
  },
403
327
  "overrides": {},
404
328
  "snappedScales": [],
@@ -406,8 +330,6 @@
406
330
  },
407
331
  "Background": {
408
332
  "baseColor": "#3c3c53",
409
- "tintHue": 240,
410
- "tintChroma": 0.04,
411
333
  "lightnessCurve": [
412
334
  {
413
335
  "x": 0,
@@ -444,42 +366,6 @@
444
366
  "outDy": 0
445
367
  }
446
368
  ],
447
- "grayLightnessCurve": [
448
- {
449
- "x": 0,
450
- "y": 92,
451
- "inDx": -5,
452
- "inDy": 0,
453
- "outDx": 5,
454
- "outDy": 0
455
- },
456
- {
457
- "x": 100,
458
- "y": 3,
459
- "inDx": -5,
460
- "inDy": 0,
461
- "outDx": 5,
462
- "outDy": 0
463
- }
464
- ],
465
- "graySaturationCurve": [
466
- {
467
- "x": 0,
468
- "y": 20,
469
- "inDx": -30,
470
- "inDy": 0,
471
- "outDx": 30,
472
- "outDy": 0
473
- },
474
- {
475
- "x": 100,
476
- "y": 20,
477
- "inDx": -30,
478
- "inDy": 0,
479
- "outDx": 30,
480
- "outDy": 0
481
- }
482
- ],
483
369
  "scaleCurves": {
484
370
  "Surfaces": {
485
371
  "lightness": [
@@ -622,8 +508,6 @@
622
508
  },
623
509
  "Brand": {
624
510
  "baseColor": "#fb2898",
625
- "tintHue": 240,
626
- "tintChroma": 0.04,
627
511
  "lightnessCurve": [
628
512
  {
629
513
  "x": 0,
@@ -676,42 +560,6 @@
676
560
  "outDy": 0
677
561
  }
678
562
  ],
679
- "grayLightnessCurve": [
680
- {
681
- "x": 0,
682
- "y": 92,
683
- "inDx": -5,
684
- "inDy": 0,
685
- "outDx": 5,
686
- "outDy": 0
687
- },
688
- {
689
- "x": 100,
690
- "y": 3,
691
- "inDx": -5,
692
- "inDy": 0,
693
- "outDx": 5,
694
- "outDy": 0
695
- }
696
- ],
697
- "graySaturationCurve": [
698
- {
699
- "x": 0,
700
- "y": 20,
701
- "inDx": -30,
702
- "inDy": 0,
703
- "outDx": 30,
704
- "outDy": 0
705
- },
706
- {
707
- "x": 100,
708
- "y": 20,
709
- "inDx": -30,
710
- "inDy": 0,
711
- "outDx": 30,
712
- "outDy": 0
713
- }
714
- ],
715
563
  "scaleCurves": {
716
564
  "Surfaces": {
717
565
  "lightness": [
@@ -840,8 +688,6 @@
840
688
  },
841
689
  "Accent": {
842
690
  "baseColor": "#008582",
843
- "tintHue": 240,
844
- "tintChroma": 0.04,
845
691
  "lightnessCurve": [
846
692
  {
847
693
  "x": 0,
@@ -878,42 +724,6 @@
878
724
  "outDy": 0
879
725
  }
880
726
  ],
881
- "grayLightnessCurve": [
882
- {
883
- "x": 0,
884
- "y": 92,
885
- "inDx": -5,
886
- "inDy": 0,
887
- "outDx": 5,
888
- "outDy": 0
889
- },
890
- {
891
- "x": 100,
892
- "y": 3,
893
- "inDx": -5,
894
- "inDy": 0,
895
- "outDx": 5,
896
- "outDy": 0
897
- }
898
- ],
899
- "graySaturationCurve": [
900
- {
901
- "x": 0,
902
- "y": 20,
903
- "inDx": -30,
904
- "inDy": 0,
905
- "outDx": 30,
906
- "outDy": 0
907
- },
908
- {
909
- "x": 100,
910
- "y": 20,
911
- "inDx": -30,
912
- "inDy": 0,
913
- "outDx": 30,
914
- "outDy": 0
915
- }
916
- ],
917
727
  "scaleCurves": {
918
728
  "Surfaces": {
919
729
  "lightness": [
@@ -1040,8 +850,6 @@
1040
850
  },
1041
851
  "Special": {
1042
852
  "baseColor": "#8b5cf6",
1043
- "tintHue": 240,
1044
- "tintChroma": 0.04,
1045
853
  "lightnessCurve": [
1046
854
  {
1047
855
  "x": 0,
@@ -1078,42 +886,6 @@
1078
886
  "outDy": 0
1079
887
  }
1080
888
  ],
1081
- "grayLightnessCurve": [
1082
- {
1083
- "x": 0,
1084
- "y": 92,
1085
- "inDx": -5,
1086
- "inDy": 0,
1087
- "outDx": 5,
1088
- "outDy": 0
1089
- },
1090
- {
1091
- "x": 100,
1092
- "y": 3,
1093
- "inDx": -5,
1094
- "inDy": 0,
1095
- "outDx": 5,
1096
- "outDy": 0
1097
- }
1098
- ],
1099
- "graySaturationCurve": [
1100
- {
1101
- "x": 0,
1102
- "y": 20,
1103
- "inDx": -30,
1104
- "inDy": 0,
1105
- "outDx": 30,
1106
- "outDy": 0
1107
- },
1108
- {
1109
- "x": 100,
1110
- "y": 20,
1111
- "inDx": -30,
1112
- "inDy": 0,
1113
- "outDx": 30,
1114
- "outDy": 0
1115
- }
1116
- ],
1117
889
  "scaleCurves": {
1118
890
  "Surfaces": {
1119
891
  "lightness": [
@@ -1248,8 +1020,6 @@
1248
1020
  },
1249
1021
  "Success": {
1250
1022
  "baseColor": "#009c45",
1251
- "tintHue": 240,
1252
- "tintChroma": 0.04,
1253
1023
  "lightnessCurve": [
1254
1024
  {
1255
1025
  "x": 0,
@@ -1286,42 +1056,6 @@
1286
1056
  "outDy": 0
1287
1057
  }
1288
1058
  ],
1289
- "grayLightnessCurve": [
1290
- {
1291
- "x": 0,
1292
- "y": 92,
1293
- "inDx": -5,
1294
- "inDy": 0,
1295
- "outDx": 5,
1296
- "outDy": 0
1297
- },
1298
- {
1299
- "x": 100,
1300
- "y": 3,
1301
- "inDx": -5,
1302
- "inDy": 0,
1303
- "outDx": 5,
1304
- "outDy": 0
1305
- }
1306
- ],
1307
- "graySaturationCurve": [
1308
- {
1309
- "x": 0,
1310
- "y": 20,
1311
- "inDx": -30,
1312
- "inDy": 0,
1313
- "outDx": 30,
1314
- "outDy": 0
1315
- },
1316
- {
1317
- "x": 100,
1318
- "y": 20,
1319
- "inDx": -30,
1320
- "inDy": 0,
1321
- "outDx": 30,
1322
- "outDy": 0
1323
- }
1324
- ],
1325
1059
  "scaleCurves": {
1326
1060
  "Surfaces": {
1327
1061
  "lightness": [
@@ -1465,8 +1199,6 @@
1465
1199
  },
1466
1200
  "Warning": {
1467
1201
  "baseColor": "#ffb01f",
1468
- "tintHue": 240,
1469
- "tintChroma": 0.04,
1470
1202
  "lightnessCurve": [
1471
1203
  {
1472
1204
  "x": 0,
@@ -1503,42 +1235,6 @@
1503
1235
  "outDy": 0
1504
1236
  }
1505
1237
  ],
1506
- "grayLightnessCurve": [
1507
- {
1508
- "x": 0,
1509
- "y": 92,
1510
- "inDx": -5,
1511
- "inDy": 0,
1512
- "outDx": 5,
1513
- "outDy": 0
1514
- },
1515
- {
1516
- "x": 100,
1517
- "y": 3,
1518
- "inDx": -5,
1519
- "inDy": 0,
1520
- "outDx": 5,
1521
- "outDy": 0
1522
- }
1523
- ],
1524
- "graySaturationCurve": [
1525
- {
1526
- "x": 0,
1527
- "y": 20,
1528
- "inDx": -30,
1529
- "inDy": 0,
1530
- "outDx": 30,
1531
- "outDy": 0
1532
- },
1533
- {
1534
- "x": 100,
1535
- "y": 20,
1536
- "inDx": -30,
1537
- "inDy": 0,
1538
- "outDx": 30,
1539
- "outDy": 0
1540
- }
1541
- ],
1542
1238
  "scaleCurves": {
1543
1239
  "Surfaces": {
1544
1240
  "lightness": [
@@ -1665,8 +1361,6 @@
1665
1361
  },
1666
1362
  "Info": {
1667
1363
  "baseColor": "#00bbff",
1668
- "tintHue": 240,
1669
- "tintChroma": 0.04,
1670
1364
  "lightnessCurve": [
1671
1365
  {
1672
1366
  "x": 0,
@@ -1703,42 +1397,6 @@
1703
1397
  "outDy": 0
1704
1398
  }
1705
1399
  ],
1706
- "grayLightnessCurve": [
1707
- {
1708
- "x": 0,
1709
- "y": 92,
1710
- "inDx": -5,
1711
- "inDy": 0,
1712
- "outDx": 5,
1713
- "outDy": 0
1714
- },
1715
- {
1716
- "x": 100,
1717
- "y": 3,
1718
- "inDx": -5,
1719
- "inDy": 0,
1720
- "outDx": 5,
1721
- "outDy": 0
1722
- }
1723
- ],
1724
- "graySaturationCurve": [
1725
- {
1726
- "x": 0,
1727
- "y": 20,
1728
- "inDx": -30,
1729
- "inDy": 0,
1730
- "outDx": 30,
1731
- "outDy": 0
1732
- },
1733
- {
1734
- "x": 100,
1735
- "y": 20,
1736
- "inDx": -30,
1737
- "inDy": 0,
1738
- "outDx": 30,
1739
- "outDy": 0
1740
- }
1741
- ],
1742
1400
  "scaleCurves": {
1743
1401
  "Surfaces": {
1744
1402
  "lightness": [
@@ -1876,8 +1534,6 @@
1876
1534
  },
1877
1535
  "Danger": {
1878
1536
  "baseColor": "#d10023",
1879
- "tintHue": 240,
1880
- "tintChroma": 0.04,
1881
1537
  "lightnessCurve": [
1882
1538
  {
1883
1539
  "x": 0,
@@ -1914,42 +1570,6 @@
1914
1570
  "outDy": 0
1915
1571
  }
1916
1572
  ],
1917
- "grayLightnessCurve": [
1918
- {
1919
- "x": 0,
1920
- "y": 92,
1921
- "inDx": -5,
1922
- "inDy": 0,
1923
- "outDx": 5,
1924
- "outDy": 0
1925
- },
1926
- {
1927
- "x": 100,
1928
- "y": 3,
1929
- "inDx": -5,
1930
- "inDy": 0,
1931
- "outDx": 5,
1932
- "outDy": 0
1933
- }
1934
- ],
1935
- "graySaturationCurve": [
1936
- {
1937
- "x": 0,
1938
- "y": 20,
1939
- "inDx": -30,
1940
- "inDy": 0,
1941
- "outDx": 30,
1942
- "outDy": 0
1943
- },
1944
- {
1945
- "x": 100,
1946
- "y": 20,
1947
- "inDx": -30,
1948
- "inDy": 0,
1949
- "outDx": 30,
1950
- "outDy": 0
1951
- }
1952
- ],
1953
1573
  "scaleCurves": {
1954
1574
  "Surfaces": {
1955
1575
  "lightness": [
@@ -2292,4 +1912,4 @@
2292
1912
  }
2293
1913
  ],
2294
1914
  "schemaVersion": 3
2295
- }
1915
+ }