ui-foundations 0.1.2 → 0.3.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 (43) hide show
  1. package/README.md +64 -30
  2. package/dist/core/index.css +7 -7
  3. package/dist/main.css +462 -289
  4. package/dist/react/index.js +1 -0
  5. package/dist/react/switch.js +45 -0
  6. package/dist/tokens/css/{color.dark.tokens.css → appearance-(modes).tokens.mode-dark.css} +2 -2
  7. package/dist/tokens/css/{color.light.tokens.css → appearance-(modes).tokens.mode-light.css} +3 -3
  8. package/dist/tokens/css/{component.tokens.css → components-(ui).tokens.css} +70 -54
  9. package/dist/tokens/css/{primitives.tokens.css → core-(primitives).tokens.css} +21 -21
  10. package/dist/tokens/css/{semantic.tokens.css → semantics-(roles).tokens.css} +7 -6
  11. package/dist/tokens/css/{brand-a.tokens.css → themes-(brands).tokens.brand-a.css} +11 -11
  12. package/dist/tokens/css/{brand-b.tokens.css → themes-(brands).tokens.brand-b.css} +10 -10
  13. package/dist/tokens/json/appearance-(modes).tokens.mode-dark.json +182 -0
  14. package/dist/tokens/json/appearance-(modes).tokens.mode-light.json +182 -0
  15. package/dist/tokens/json/components-(ui).tokens.json +739 -0
  16. package/dist/tokens/json/{primitives.tokens.json → core-(primitives).tokens.json} +766 -772
  17. package/dist/tokens/json/semantics-(roles).tokens.json +203 -0
  18. package/dist/tokens/json/themes-(brands).tokens.brand-a.json +115 -0
  19. package/dist/tokens/json/themes-(brands).tokens.brand-b.json +115 -0
  20. package/dist/tokens/tokens.yaml +1068 -847
  21. package/dist/tokens/ts/{color.dark.tokens.ts → appearance-(modes).tokens.mode-dark.ts} +3 -3
  22. package/dist/tokens/ts/{color.light.tokens.ts → appearance-(modes).tokens.mode-light.ts} +4 -4
  23. package/dist/tokens/ts/{component.tokens.ts → components-(ui).tokens.ts} +71 -55
  24. package/dist/tokens/ts/{primitives.tokens.ts → core-(primitives).tokens.ts} +22 -22
  25. package/dist/tokens/ts/{semantic.tokens.ts → semantics-(roles).tokens.ts} +7 -6
  26. package/dist/tokens/ts/{brand-a.tokens.ts → themes-(brands).tokens.brand-a.ts} +13 -13
  27. package/dist/tokens/ts/{brand-b.tokens.ts → themes-(brands).tokens.brand-b.ts} +12 -12
  28. package/dist/ui/index.css +1 -0
  29. package/dist/ui/patterns/button.css +1 -0
  30. package/dist/ui/patterns/switch.css +155 -0
  31. package/docs/agentic/skills/README.md +51 -0
  32. package/docs/agentic/skills/design-ops-specialist/SKILL.md +28 -14
  33. package/docs/agentic/skills/design-system-architect/SKILL.md +106 -0
  34. package/docs/agentic/team-ai-playbook.md +10 -0
  35. package/docs/foundations/foundation-011-branching-and-release-governance.md +42 -0
  36. package/docs/foundations/foundation-012-minimal-markup-and-composition.md +42 -0
  37. package/package.json +20 -11
  38. package/dist/tokens/json/brand-a.tokens.json +0 -192
  39. package/dist/tokens/json/brand-b.tokens.json +0 -192
  40. package/dist/tokens/json/color.dark.tokens.json +0 -364
  41. package/dist/tokens/json/color.light.tokens.json +0 -364
  42. package/dist/tokens/json/component.tokens.json +0 -1101
  43. package/dist/tokens/json/semantic.tokens.json +0 -206
@@ -1,657 +1,215 @@
1
1
  {
2
2
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
3
- "Breakpoint": {
4
- "100": {
5
- "$type": "dimension",
6
- "$value": {
7
- "value": 580,
8
- "unit": "px"
9
- }
10
- },
11
- "200": {
12
- "$type": "dimension",
13
- "$value": {
14
- "value": 760,
15
- "unit": "px"
16
- }
17
- },
18
- "300": {
19
- "$type": "dimension",
20
- "$value": {
21
- "value": 960,
22
- "unit": "px"
23
- }
24
- },
25
- "400": {
26
- "$type": "dimension",
27
- "$value": {
28
- "value": 1200,
29
- "unit": "px"
30
- }
31
- },
32
- "500": {
33
- "$type": "dimension",
34
- "$value": {
35
- "value": 1440,
36
- "unit": "px"
37
- }
38
- },
39
- "600": {
40
- "$type": "dimension",
41
- "$value": {
42
- "value": 1920,
43
- "unit": "px"
44
- }
45
- }
46
- },
47
- "Color": {
48
- "Transparent": {
49
- "$type": "color",
50
- "$value": {
51
- "colorSpace": "srgb",
52
- "components": [
53
- 0,
54
- 0,
55
- 0
56
- ],
57
- "alpha": 0,
58
- "hex": "#000000"
3
+ "Size": {
4
+ "Border": {
5
+ "100": {
6
+ "$type": "dimension",
7
+ "$value": {
8
+ "value": 1,
9
+ "unit": "px"
10
+ }
11
+ },
12
+ "200": {
13
+ "$type": "dimension",
14
+ "$value": {
15
+ "value": 2,
16
+ "unit": "px"
17
+ }
18
+ },
19
+ "300": {
20
+ "$type": "dimension",
21
+ "$value": {
22
+ "value": 3,
23
+ "unit": "px"
24
+ }
25
+ },
26
+ "000": {
27
+ "$type": "dimension",
28
+ "$value": {
29
+ "value": 0,
30
+ "unit": "px"
31
+ }
59
32
  }
60
33
  },
61
- "Neutral": {
34
+ "Spacing": {
62
35
  "100": {
63
- "$type": "color",
36
+ "$type": "dimension",
64
37
  "$value": {
65
- "colorSpace": "srgb",
66
- "components": [
67
- 0.9019607901573181,
68
- 0.9019607901573181,
69
- 0.9019607901573181
70
- ],
71
- "alpha": 1,
72
- "hex": "#E6E6E6"
38
+ "value": 4,
39
+ "unit": "px"
73
40
  }
74
41
  },
75
42
  "200": {
76
- "$type": "color",
43
+ "$type": "dimension",
77
44
  "$value": {
78
- "colorSpace": "srgb",
79
- "components": [
80
- 0.800000011920929,
81
- 0.800000011920929,
82
- 0.800000011920929
83
- ],
84
- "alpha": 1,
85
- "hex": "#CCCCCC"
45
+ "value": 8,
46
+ "unit": "px"
86
47
  }
87
48
  },
88
49
  "300": {
89
- "$type": "color",
50
+ "$type": "dimension",
90
51
  "$value": {
91
- "colorSpace": "srgb",
92
- "components": [
93
- 0.7019608020782471,
94
- 0.7019608020782471,
95
- 0.7019608020782471
96
- ],
97
- "alpha": 1,
98
- "hex": "#B3B3B3"
52
+ "value": 12,
53
+ "unit": "px"
99
54
  }
100
55
  },
101
56
  "400": {
102
- "$type": "color",
57
+ "$type": "dimension",
103
58
  "$value": {
104
- "colorSpace": "srgb",
105
- "components": [
106
- 0.501960813999176,
107
- 0.501960813999176,
108
- 0.501960813999176
109
- ],
110
- "alpha": 1,
111
- "hex": "#808080"
59
+ "value": 16,
60
+ "unit": "px"
112
61
  }
113
62
  },
114
63
  "500": {
115
- "$type": "color",
64
+ "$type": "dimension",
116
65
  "$value": {
117
- "colorSpace": "srgb",
118
- "components": [
119
- 0.501960813999176,
120
- 0.501960813999176,
121
- 0.501960813999176
122
- ],
123
- "alpha": 1,
124
- "hex": "#808080"
66
+ "value": 20,
67
+ "unit": "px"
125
68
  }
126
69
  },
127
70
  "600": {
128
- "$type": "color",
71
+ "$type": "dimension",
129
72
  "$value": {
130
- "colorSpace": "srgb",
131
- "components": [
132
- 0.4000000059604645,
133
- 0.4000000059604645,
134
- 0.4000000059604645
135
- ],
136
- "alpha": 1,
137
- "hex": "#666666"
73
+ "value": 24,
74
+ "unit": "px"
138
75
  }
139
76
  },
140
77
  "700": {
141
- "$type": "color",
78
+ "$type": "dimension",
142
79
  "$value": {
143
- "colorSpace": "srgb",
144
- "components": [
145
- 0.3019607961177826,
146
- 0.3019607961177826,
147
- 0.3019607961177826
148
- ],
149
- "alpha": 1,
150
- "hex": "#4D4D4D"
80
+ "value": 32,
81
+ "unit": "px"
151
82
  }
152
83
  },
153
84
  "800": {
154
- "$type": "color",
85
+ "$type": "dimension",
155
86
  "$value": {
156
- "colorSpace": "srgb",
157
- "components": [
158
- 0.20000000298023224,
159
- 0.20000000298023224,
160
- 0.20000000298023224
161
- ],
162
- "alpha": 1,
163
- "hex": "#333333"
87
+ "value": 40,
88
+ "unit": "px"
164
89
  }
165
90
  },
166
91
  "900": {
167
- "$type": "color",
92
+ "$type": "dimension",
168
93
  "$value": {
169
- "colorSpace": "srgb",
170
- "components": [
171
- 0.10196078568696976,
172
- 0.10196078568696976,
173
- 0.10196078568696976
174
- ],
175
- "alpha": 1,
176
- "hex": "#1A1A1A"
94
+ "value": 48,
95
+ "unit": "px"
177
96
  }
178
97
  },
179
98
  "1000": {
180
- "$type": "color",
99
+ "$type": "dimension",
181
100
  "$value": {
182
- "colorSpace": "srgb",
183
- "components": [
184
- 0,
185
- 0,
186
- 0
187
- ],
188
- "alpha": 1,
189
- "hex": "#000000"
101
+ "value": 64,
102
+ "unit": "px"
190
103
  }
191
104
  },
192
105
  "000": {
193
- "$type": "color",
106
+ "$type": "dimension",
194
107
  "$value": {
195
- "colorSpace": "srgb",
196
- "components": [
197
- 1,
198
- 1,
199
- 1
200
- ],
201
- "alpha": 1,
202
- "hex": "#FFFFFF"
108
+ "value": 0,
109
+ "unit": "px"
110
+ }
111
+ }
112
+ },
113
+ "Radius": {
114
+ "100": {
115
+ "$type": "dimension",
116
+ "$value": {
117
+ "value": 2,
118
+ "unit": "px"
203
119
  }
204
120
  },
205
- "Alpha": {
206
- "100": {
207
- "$type": "color",
208
- "$value": {
209
- "colorSpace": "srgb",
210
- "components": [
211
- 0,
212
- 0,
213
- 0
214
- ],
215
- "alpha": 0.10000000149011612,
216
- "hex": "#000000"
217
- }
218
- },
219
- "200": {
220
- "$type": "color",
221
- "$value": {
222
- "colorSpace": "srgb",
223
- "components": [
224
- 0,
225
- 0,
226
- 0
227
- ],
228
- "alpha": 0.20000000298023224,
229
- "hex": "#000000"
230
- }
231
- },
232
- "300": {
233
- "$type": "color",
234
- "$value": {
235
- "colorSpace": "srgb",
236
- "components": [
237
- 0,
238
- 0,
239
- 0
240
- ],
241
- "alpha": 0.30000001192092896,
242
- "hex": "#000000"
243
- }
244
- },
245
- "400": {
246
- "$type": "color",
247
- "$value": {
248
- "colorSpace": "srgb",
249
- "components": [
250
- 0,
251
- 0,
252
- 0
253
- ],
254
- "alpha": 0.4000000059604645,
255
- "hex": "#000000"
256
- }
257
- },
258
- "500": {
259
- "$type": "color",
260
- "$value": {
261
- "colorSpace": "srgb",
262
- "components": [
263
- 0,
264
- 0,
265
- 0
266
- ],
267
- "alpha": 0.5,
268
- "hex": "#000000"
269
- }
270
- },
271
- "600": {
272
- "$type": "color",
273
- "$value": {
274
- "colorSpace": "srgb",
275
- "components": [
276
- 0,
277
- 0,
278
- 0
279
- ],
280
- "alpha": 0.6000000238418579,
281
- "hex": "#000000"
282
- }
283
- },
284
- "700": {
285
- "$type": "color",
286
- "$value": {
287
- "colorSpace": "srgb",
288
- "components": [
289
- 0,
290
- 0,
291
- 0
292
- ],
293
- "alpha": 0.699999988079071,
294
- "hex": "#000000"
295
- }
296
- },
297
- "800": {
298
- "$type": "color",
299
- "$value": {
300
- "colorSpace": "srgb",
301
- "components": [
302
- 0,
303
- 0,
304
- 0
305
- ],
306
- "alpha": 0.800000011920929,
307
- "hex": "#000000"
308
- }
309
- },
310
- "900": {
311
- "$type": "color",
312
- "$value": {
313
- "colorSpace": "srgb",
314
- "components": [
315
- 0,
316
- 0,
317
- 0
318
- ],
319
- "alpha": 0.8999999761581421,
320
- "hex": "#000000"
321
- }
322
- },
323
- "000": {
324
- "$type": "color",
325
- "$value": {
326
- "colorSpace": "srgb",
327
- "components": [
328
- 0,
329
- 0,
330
- 0
331
- ],
332
- "alpha": 0,
333
- "hex": "#000000"
334
- }
335
- }
336
- }
337
- },
338
- "Brand A": {
339
- "Red": {
340
- "$type": "color",
121
+ "200": {
122
+ "$type": "dimension",
341
123
  "$value": {
342
- "colorSpace": "srgb",
343
- "components": [
344
- 1,
345
- 0,
346
- 0
347
- ],
348
- "alpha": 1,
349
- "hex": "#FF0000"
124
+ "value": 4,
125
+ "unit": "px"
350
126
  }
351
127
  },
352
- "Green": {
353
- "$type": "color",
128
+ "300": {
129
+ "$type": "dimension",
354
130
  "$value": {
355
- "colorSpace": "srgb",
356
- "components": [
357
- 0.07450980693101883,
358
- 0.6823529601097107,
359
- 0.3607843220233917
360
- ],
361
- "alpha": 1,
362
- "hex": "#13AE5C"
131
+ "value": 6,
132
+ "unit": "px"
363
133
  }
364
134
  },
365
- "Purple": {
366
- "200": {
367
- "$type": "color",
368
- "$value": {
369
- "colorSpace": "srgb",
370
- "components": [
371
- 0.8705882430076599,
372
- 0.7529411911964417,
373
- 1
374
- ],
375
- "alpha": 1,
376
- "hex": "#DEC0FF"
377
- }
378
- },
379
- "600": {
380
- "$type": "color",
381
- "$value": {
382
- "colorSpace": "srgb",
383
- "components": [
384
- 0.5921568870544434,
385
- 0.27843138575553894,
386
- 1
387
- ],
388
- "alpha": 1,
389
- "hex": "#9747FF"
390
- }
391
- },
392
- "800": {
393
- "$type": "color",
394
- "$value": {
395
- "colorSpace": "srgb",
396
- "components": [
397
- 0.3333333432674408,
398
- 0.10196078568696976,
399
- 0.545098066329956
400
- ],
401
- "alpha": 1,
402
- "hex": "#551A8B"
403
- }
135
+ "400": {
136
+ "$type": "dimension",
137
+ "$value": {
138
+ "value": 8,
139
+ "unit": "px"
404
140
  }
405
141
  },
406
- "Blue": {
407
- "200": {
408
- "$type": "color",
409
- "$value": {
410
- "colorSpace": "srgb",
411
- "components": [
412
- 0.886274516582489,
413
- 0.95686274766922,
414
- 0.9921568632125854
415
- ],
416
- "alpha": 1,
417
- "hex": "#E2F4FD"
418
- }
419
- },
420
- "500": {
421
- "$type": "color",
422
- "$value": {
423
- "colorSpace": "srgb",
424
- "components": [
425
- 0.43921568989753723,
426
- 0.7960784435272217,
427
- 0.95686274766922
428
- ],
429
- "alpha": 1,
430
- "hex": "#70CBF4"
431
- }
432
- },
433
- "700": {
434
- "$type": "color",
435
- "$value": {
436
- "colorSpace": "srgb",
437
- "components": [
438
- 0.0470588244497776,
439
- 0.29411765933036804,
440
- 0.9529411792755127
441
- ],
442
- "alpha": 1,
443
- "hex": "#0C4BF3"
444
- }
445
- },
446
- "800": {
447
- "$type": "color",
448
- "$value": {
449
- "colorSpace": "srgb",
450
- "components": [
451
- 0.10588235408067703,
452
- 0.06666667014360428,
453
- 0.3607843220233917
454
- ],
455
- "alpha": 1,
456
- "hex": "#1B115C"
457
- }
458
- }
459
- }
460
- },
461
- "Brand B": {
462
- "Red": {
463
- "$type": "color",
142
+ "500": {
143
+ "$type": "dimension",
464
144
  "$value": {
465
- "colorSpace": "srgb",
466
- "components": [
467
- 0.800000011920929,
468
- 0,
469
- 0
470
- ],
471
- "alpha": 1,
472
- "hex": "#CC0000"
145
+ "value": 12,
146
+ "unit": "px"
473
147
  }
474
148
  },
475
- "Green": {
476
- "$type": "color",
149
+ "600": {
150
+ "$type": "dimension",
477
151
  "$value": {
478
- "colorSpace": "srgb",
479
- "components": [
480
- 0.055129535496234894,
481
- 0.5048704743385315,
482
- 0.2669430077075958
483
- ],
484
- "alpha": 1,
485
- "hex": "#0E8144"
152
+ "value": 16,
153
+ "unit": "px"
486
154
  }
487
155
  },
488
- "Purple": {
489
- "200": {
490
- "$type": "color",
491
- "$value": {
492
- "colorSpace": "srgb",
493
- "components": [
494
- 0.7695237994194031,
495
- 0.5600000023841858,
496
- 1
497
- ],
498
- "alpha": 1,
499
- "hex": "#C48FFF"
500
- }
501
- },
502
- "600": {
503
- "$type": "color",
504
- "$value": {
505
- "colorSpace": "srgb",
506
- "components": [
507
- 0.48000001907348633,
508
- 0.07999999821186066,
509
- 1
510
- ],
511
- "alpha": 1,
512
- "hex": "#7A14FF"
513
- }
514
- },
515
- "800": {
516
- "$type": "color",
517
- "$value": {
518
- "colorSpace": "srgb",
519
- "components": [
520
- 0.226666659116745,
521
- 0.06933332979679108,
522
- 0.3706666827201843
523
- ],
524
- "alpha": 1,
525
- "hex": "#3A125F"
526
- }
156
+ "700": {
157
+ "$type": "dimension",
158
+ "$value": {
159
+ "value": 20,
160
+ "unit": "px"
527
161
  }
528
162
  },
529
- "Blue": {
530
- "200": {
531
- "$type": "color",
532
- "$value": {
533
- "colorSpace": "srgb",
534
- "components": [
535
- 0.7006451487541199,
536
- 0.8864516019821167,
537
- 0.9793548583984375
538
- ],
539
- "alpha": 1,
540
- "hex": "#B3E2FA"
541
- }
542
- },
543
- "500": {
544
- "$type": "color",
545
- "$value": {
546
- "colorSpace": "srgb",
547
- "components": [
548
- 0.2571428418159485,
549
- 0.7298701405525208,
550
- 0.9428571462631226
551
- ],
552
- "alpha": 1,
553
- "hex": "#42BAF0"
554
- }
555
- },
556
- "700": {
557
- "$type": "color",
558
- "$value": {
559
- "colorSpace": "srgb",
560
- "components": [
561
- 0.0376470573246479,
562
- 0.23529411852359772,
563
- 0.7623529434204102
564
- ],
565
- "alpha": 1,
566
- "hex": "#0A3CC2"
567
- }
568
- },
569
- "800": {
570
- "$type": "color",
571
- "$value": {
572
- "colorSpace": "srgb",
573
- "components": [
574
- 0.05449541285634041,
575
- 0.0343119278550148,
576
- 0.1856880784034729
577
- ],
578
- "alpha": 1,
579
- "hex": "#0E092F"
580
- }
163
+ "800": {
164
+ "$type": "dimension",
165
+ "$value": {
166
+ "value": 24,
167
+ "unit": "px"
581
168
  }
582
- }
583
- }
584
- },
585
- "Container": {
586
- "100": {
587
- "$type": "dimension",
588
- "$value": {
589
- "value": 192,
590
- "unit": "px"
591
169
  },
592
- "$description": "12rem"
593
- },
594
- "200": {
595
- "$type": "dimension",
596
- "$value": {
597
- "value": 384,
598
- "unit": "px"
599
- },
600
- "$description": "24rem"
601
- },
602
- "300": {
603
- "$type": "dimension",
604
- "$value": {
605
- "value": 576,
606
- "unit": "px"
607
- },
608
- "$description": "36rem"
609
- },
610
- "400": {
611
- "$type": "dimension",
612
- "$value": {
613
- "value": 768,
614
- "unit": "px"
615
- },
616
- "$description": "48rem"
617
- },
618
- "500": {
619
- "$type": "dimension",
620
- "$value": {
621
- "value": 960,
622
- "unit": "px"
170
+ "900": {
171
+ "$type": "dimension",
172
+ "$value": {
173
+ "value": 32,
174
+ "unit": "px"
175
+ }
623
176
  },
624
- "$description": "60rem"
625
- },
626
- "600": {
627
- "$type": "dimension",
628
- "$value": {
629
- "value": 1152,
630
- "unit": "px"
177
+ "000": {
178
+ "$type": "dimension",
179
+ "$value": {
180
+ "value": 0,
181
+ "unit": "px"
182
+ }
631
183
  },
632
- "$description": "72rem"
184
+ "full": {
185
+ "$type": "dimension",
186
+ "$value": {
187
+ "value": 10000,
188
+ "unit": "px"
189
+ }
190
+ }
633
191
  }
634
192
  },
635
193
  "Font": {
636
194
  "Size": {
637
- "xs": {
195
+ "md": {
638
196
  "$type": "dimension",
639
197
  "$value": {
640
- "value": 12,
198
+ "value": 16,
641
199
  "unit": "px"
642
200
  }
643
201
  },
644
- "sm": {
202
+ "xs": {
645
203
  "$type": "dimension",
646
204
  "$value": {
647
- "value": 14,
205
+ "value": 12,
648
206
  "unit": "px"
649
207
  }
650
208
  },
651
- "md": {
209
+ "sm": {
652
210
  "$type": "dimension",
653
211
  "$value": {
654
- "value": 16,
212
+ "value": 14,
655
213
  "unit": "px"
656
214
  }
657
215
  },
@@ -737,341 +295,777 @@
737
295
  }
738
296
  }
739
297
  },
740
- "Layout": {
741
- "Base Grid": {
298
+ "Line Height": {
299
+ "xs": {
300
+ "$type": "dimension",
301
+ "$value": {
302
+ "value": 16,
303
+ "unit": "px"
304
+ }
305
+ },
306
+ "sm": {
307
+ "$type": "dimension",
308
+ "$value": {
309
+ "value": 20,
310
+ "unit": "px"
311
+ }
312
+ },
313
+ "md": {
314
+ "$type": "dimension",
315
+ "$value": {
316
+ "value": 24,
317
+ "unit": "px"
318
+ }
319
+ },
320
+ "lg": {
321
+ "$type": "dimension",
322
+ "$value": {
323
+ "value": 28,
324
+ "unit": "px"
325
+ }
326
+ },
327
+ "xl": {
328
+ "$type": "dimension",
329
+ "$value": {
330
+ "value": 32,
331
+ "unit": "px"
332
+ }
333
+ },
334
+ "xxl": {
335
+ "$type": "dimension",
336
+ "$value": {
337
+ "value": 44,
338
+ "unit": "px"
339
+ }
340
+ },
341
+ "xxxl": {
342
+ "$type": "dimension",
343
+ "$value": {
344
+ "value": 56,
345
+ "unit": "px"
346
+ }
347
+ }
348
+ },
349
+ "Container": {
350
+ "100": {
351
+ "$type": "dimension",
352
+ "$value": {
353
+ "value": 192,
354
+ "unit": "px"
355
+ }
356
+ },
357
+ "200": {
742
358
  "$type": "dimension",
743
359
  "$value": {
744
- "value": 4,
360
+ "value": 384,
745
361
  "unit": "px"
746
362
  }
747
363
  },
748
- "Columns": {
749
- "$type": "number",
750
- "$value": 12
751
- },
752
- "Gutter": {
364
+ "300": {
753
365
  "$type": "dimension",
754
366
  "$value": {
755
- "value": 16,
367
+ "value": 576,
756
368
  "unit": "px"
757
369
  }
758
370
  },
759
- "Max Width": {
371
+ "400": {
760
372
  "$type": "dimension",
761
373
  "$value": {
762
- "value": 1236,
374
+ "value": 768,
763
375
  "unit": "px"
764
376
  }
765
377
  },
766
- "Column Max Width": {
378
+ "500": {
767
379
  "$type": "dimension",
768
380
  "$value": {
769
- "value": 412,
381
+ "value": 960,
770
382
  "unit": "px"
771
383
  }
772
384
  },
773
- "Float Breakpoint": {
385
+ "600": {
774
386
  "$type": "dimension",
775
387
  "$value": {
776
- "value": 1220,
388
+ "value": 1152,
777
389
  "unit": "px"
778
390
  }
779
391
  }
780
392
  },
781
- "Line Height": {
782
- "xs": {
393
+ "Breakpoint": {
394
+ "100": {
783
395
  "$type": "dimension",
784
396
  "$value": {
785
- "value": 16,
397
+ "value": 580,
786
398
  "unit": "px"
787
399
  }
788
400
  },
789
- "sm": {
401
+ "200": {
790
402
  "$type": "dimension",
791
403
  "$value": {
792
- "value": 20,
404
+ "value": 760,
793
405
  "unit": "px"
794
406
  }
795
407
  },
796
- "md": {
408
+ "300": {
797
409
  "$type": "dimension",
798
410
  "$value": {
799
- "value": 24,
411
+ "value": 960,
800
412
  "unit": "px"
801
413
  }
802
414
  },
803
- "lg": {
415
+ "400": {
804
416
  "$type": "dimension",
805
417
  "$value": {
806
- "value": 28,
418
+ "value": 1200,
807
419
  "unit": "px"
808
420
  }
809
421
  },
810
- "xl": {
422
+ "500": {
811
423
  "$type": "dimension",
812
424
  "$value": {
813
- "value": 32,
425
+ "value": 1440,
814
426
  "unit": "px"
815
427
  }
816
428
  },
817
- "xxl": {
429
+ "600": {
818
430
  "$type": "dimension",
819
431
  "$value": {
820
- "value": 44,
432
+ "value": 1920,
821
433
  "unit": "px"
822
434
  }
435
+ }
436
+ },
437
+ "Layout": {
438
+ "Columns": {
439
+ "$type": "number",
440
+ "$value": 12
823
441
  },
824
- "xxxl": {
442
+ "Gutter": {
825
443
  "$type": "dimension",
826
444
  "$value": {
827
- "value": 56,
445
+ "value": 16,
828
446
  "unit": "px"
829
447
  }
830
- }
831
- },
832
- "Shadow": {
833
- "Focus": {
448
+ },
449
+ "Max Width": {
834
450
  "$type": "dimension",
835
451
  "$value": {
836
- "value": 8,
452
+ "value": 1236,
453
+ "unit": "px"
454
+ }
455
+ },
456
+ "Column Max Width": {
457
+ "$type": "dimension",
458
+ "$value": {
459
+ "value": 412,
460
+ "unit": "px"
461
+ }
462
+ },
463
+ "Float Breakpoint": {
464
+ "$type": "dimension",
465
+ "$value": {
466
+ "value": 1220,
467
+ "unit": "px"
468
+ }
469
+ },
470
+ "Base Grid": {
471
+ "$type": "dimension",
472
+ "$value": {
473
+ "value": 4,
837
474
  "unit": "px"
838
475
  }
839
476
  }
840
477
  },
841
- "Size": {
842
- "Border": {
843
- "100": {
844
- "$type": "dimension",
845
- "$value": {
846
- "value": 1,
847
- "unit": "px"
848
- }
849
- },
850
- "200": {
851
- "$type": "dimension",
852
- "$value": {
853
- "value": 2,
854
- "unit": "px"
855
- }
856
- },
857
- "300": {
858
- "$type": "dimension",
859
- "$value": {
860
- "value": 3,
861
- "unit": "px"
862
- }
863
- },
864
- "000": {
865
- "$type": "dimension",
866
- "$value": {
867
- "value": 0,
868
- "unit": "px"
869
- }
870
- }
478
+ "ZIndex": {
479
+ "Fixed": {
480
+ "$type": "number",
481
+ "$value": 1030
871
482
  },
872
- "Spacing": {
483
+ "Sticky": {
484
+ "$type": "number",
485
+ "$value": 1020
486
+ },
487
+ "Dropdown": {
488
+ "$type": "number",
489
+ "$value": 1000
490
+ },
491
+ "Dropdown Base": {
492
+ "$type": "number",
493
+ "$value": 900
494
+ },
495
+ "Modal": {
496
+ "$type": "number",
497
+ "$value": 1050
498
+ },
499
+ "Base": {
500
+ "$type": "number",
501
+ "$value": 0
502
+ },
503
+ "Tooltip": {
504
+ "$type": "number",
505
+ "$value": 1070
506
+ },
507
+ "Raised": {
508
+ "$type": "number",
509
+ "$value": 1
510
+ },
511
+ "Popover": {
512
+ "$type": "number",
513
+ "$value": 1060
514
+ },
515
+ "Modal Overlay": {
516
+ "$type": "number",
517
+ "$value": 1040
518
+ },
519
+ "Hidden": {
520
+ "$type": "number",
521
+ "$value": -1
522
+ }
523
+ },
524
+ "Color": {
525
+ "Neutral": {
873
526
  "100": {
874
- "$type": "dimension",
527
+ "$type": "color",
875
528
  "$value": {
876
- "value": 4,
877
- "unit": "px"
529
+ "colorSpace": "srgb",
530
+ "components": [
531
+ 0.9019607901573181,
532
+ 0.9019607901573181,
533
+ 0.9019607901573181
534
+ ],
535
+ "alpha": 1,
536
+ "hex": "#E6E6E6"
878
537
  }
879
538
  },
880
539
  "200": {
881
- "$type": "dimension",
540
+ "$type": "color",
882
541
  "$value": {
883
- "value": 8,
884
- "unit": "px"
542
+ "colorSpace": "srgb",
543
+ "components": [
544
+ 0.800000011920929,
545
+ 0.800000011920929,
546
+ 0.800000011920929
547
+ ],
548
+ "alpha": 1,
549
+ "hex": "#CCCCCC"
885
550
  }
886
551
  },
887
552
  "300": {
888
- "$type": "dimension",
553
+ "$type": "color",
889
554
  "$value": {
890
- "value": 12,
891
- "unit": "px"
555
+ "colorSpace": "srgb",
556
+ "components": [
557
+ 0.7019608020782471,
558
+ 0.7019608020782471,
559
+ 0.7019608020782471
560
+ ],
561
+ "alpha": 1,
562
+ "hex": "#B3B3B3"
892
563
  }
893
564
  },
894
565
  "400": {
895
- "$type": "dimension",
566
+ "$type": "color",
896
567
  "$value": {
897
- "value": 16,
898
- "unit": "px"
568
+ "colorSpace": "srgb",
569
+ "components": [
570
+ 0.501960813999176,
571
+ 0.501960813999176,
572
+ 0.501960813999176
573
+ ],
574
+ "alpha": 1,
575
+ "hex": "#808080"
899
576
  }
900
577
  },
901
578
  "500": {
902
- "$type": "dimension",
579
+ "$type": "color",
903
580
  "$value": {
904
- "value": 20,
905
- "unit": "px"
581
+ "colorSpace": "srgb",
582
+ "components": [
583
+ 0.501960813999176,
584
+ 0.501960813999176,
585
+ 0.501960813999176
586
+ ],
587
+ "alpha": 1,
588
+ "hex": "#808080"
906
589
  }
907
590
  },
908
591
  "600": {
909
- "$type": "dimension",
592
+ "$type": "color",
910
593
  "$value": {
911
- "value": 24,
912
- "unit": "px"
594
+ "colorSpace": "srgb",
595
+ "components": [
596
+ 0.4000000059604645,
597
+ 0.4000000059604645,
598
+ 0.4000000059604645
599
+ ],
600
+ "alpha": 1,
601
+ "hex": "#666666"
913
602
  }
914
603
  },
915
604
  "700": {
916
- "$type": "dimension",
605
+ "$type": "color",
917
606
  "$value": {
918
- "value": 32,
919
- "unit": "px"
607
+ "colorSpace": "srgb",
608
+ "components": [
609
+ 0.3019607961177826,
610
+ 0.3019607961177826,
611
+ 0.3019607961177826
612
+ ],
613
+ "alpha": 1,
614
+ "hex": "#4D4D4D"
920
615
  }
921
616
  },
922
617
  "800": {
923
- "$type": "dimension",
618
+ "$type": "color",
924
619
  "$value": {
925
- "value": 40,
926
- "unit": "px"
620
+ "colorSpace": "srgb",
621
+ "components": [
622
+ 0.20000000298023224,
623
+ 0.20000000298023224,
624
+ 0.20000000298023224
625
+ ],
626
+ "alpha": 1,
627
+ "hex": "#333333"
927
628
  }
928
629
  },
929
630
  "900": {
930
- "$type": "dimension",
631
+ "$type": "color",
931
632
  "$value": {
932
- "value": 48,
933
- "unit": "px"
633
+ "colorSpace": "srgb",
634
+ "components": [
635
+ 0.10196078568696976,
636
+ 0.10196078568696976,
637
+ 0.10196078568696976
638
+ ],
639
+ "alpha": 1,
640
+ "hex": "#1A1A1A"
934
641
  }
935
642
  },
936
643
  "1000": {
937
- "$type": "dimension",
644
+ "$type": "color",
938
645
  "$value": {
939
- "value": 64,
940
- "unit": "px"
646
+ "colorSpace": "srgb",
647
+ "components": [
648
+ 0,
649
+ 0,
650
+ 0
651
+ ],
652
+ "alpha": 1,
653
+ "hex": "#000000"
654
+ }
655
+ },
656
+ "Alpha": {
657
+ "100": {
658
+ "$type": "color",
659
+ "$value": {
660
+ "colorSpace": "srgb",
661
+ "components": [
662
+ 0,
663
+ 0,
664
+ 0
665
+ ],
666
+ "alpha": 0.10000000149011612,
667
+ "hex": "#0000001A"
668
+ }
669
+ },
670
+ "200": {
671
+ "$type": "color",
672
+ "$value": {
673
+ "colorSpace": "srgb",
674
+ "components": [
675
+ 0,
676
+ 0,
677
+ 0
678
+ ],
679
+ "alpha": 0.20000000298023224,
680
+ "hex": "#00000033"
681
+ }
682
+ },
683
+ "300": {
684
+ "$type": "color",
685
+ "$value": {
686
+ "colorSpace": "srgb",
687
+ "components": [
688
+ 0,
689
+ 0,
690
+ 0
691
+ ],
692
+ "alpha": 0.30000001192092896,
693
+ "hex": "#0000004D"
694
+ }
695
+ },
696
+ "400": {
697
+ "$type": "color",
698
+ "$value": {
699
+ "colorSpace": "srgb",
700
+ "components": [
701
+ 0,
702
+ 0,
703
+ 0
704
+ ],
705
+ "alpha": 0.4000000059604645,
706
+ "hex": "#00000066"
707
+ }
708
+ },
709
+ "500": {
710
+ "$type": "color",
711
+ "$value": {
712
+ "colorSpace": "srgb",
713
+ "components": [
714
+ 0,
715
+ 0,
716
+ 0
717
+ ],
718
+ "alpha": 0.5,
719
+ "hex": "#00000080"
720
+ }
721
+ },
722
+ "600": {
723
+ "$type": "color",
724
+ "$value": {
725
+ "colorSpace": "srgb",
726
+ "components": [
727
+ 0,
728
+ 0,
729
+ 0
730
+ ],
731
+ "alpha": 0.6000000238418579,
732
+ "hex": "#00000099"
733
+ }
734
+ },
735
+ "700": {
736
+ "$type": "color",
737
+ "$value": {
738
+ "colorSpace": "srgb",
739
+ "components": [
740
+ 0,
741
+ 0,
742
+ 0
743
+ ],
744
+ "alpha": 0.699999988079071,
745
+ "hex": "#000000B2"
746
+ }
747
+ },
748
+ "800": {
749
+ "$type": "color",
750
+ "$value": {
751
+ "colorSpace": "srgb",
752
+ "components": [
753
+ 0,
754
+ 0,
755
+ 0
756
+ ],
757
+ "alpha": 0.800000011920929,
758
+ "hex": "#000000CC"
759
+ }
760
+ },
761
+ "900": {
762
+ "$type": "color",
763
+ "$value": {
764
+ "colorSpace": "srgb",
765
+ "components": [
766
+ 0,
767
+ 0,
768
+ 0
769
+ ],
770
+ "alpha": 0.8999999761581421,
771
+ "hex": "#000000E5"
772
+ }
773
+ },
774
+ "000": {
775
+ "$type": "color",
776
+ "$value": {
777
+ "colorSpace": "srgb",
778
+ "components": [
779
+ 0,
780
+ 0,
781
+ 0
782
+ ],
783
+ "alpha": 0,
784
+ "hex": "#00000000"
785
+ }
941
786
  }
942
787
  },
943
788
  "000": {
944
- "$type": "dimension",
789
+ "$type": "color",
945
790
  "$value": {
946
- "value": 0,
947
- "unit": "px"
791
+ "colorSpace": "srgb",
792
+ "components": [
793
+ 1,
794
+ 1,
795
+ 1
796
+ ],
797
+ "alpha": 1,
798
+ "hex": "#FFFFFF"
948
799
  }
949
800
  }
950
801
  },
951
- "Radius": {
952
- "100": {
953
- "$type": "dimension",
954
- "$value": {
955
- "value": 2,
956
- "unit": "px"
957
- }
958
- },
959
- "200": {
960
- "$type": "dimension",
961
- "$value": {
962
- "value": 4,
963
- "unit": "px"
964
- }
965
- },
966
- "300": {
967
- "$type": "dimension",
968
- "$value": {
969
- "value": 6,
970
- "unit": "px"
971
- }
972
- },
973
- "400": {
974
- "$type": "dimension",
975
- "$value": {
976
- "value": 8,
977
- "unit": "px"
802
+ "Brand A": {
803
+ "Purple": {
804
+ "200": {
805
+ "$type": "color",
806
+ "$value": {
807
+ "colorSpace": "srgb",
808
+ "components": [
809
+ 0.8705882430076599,
810
+ 0.7529411911964417,
811
+ 1
812
+ ],
813
+ "alpha": 1,
814
+ "hex": "#DEC0FF"
815
+ }
816
+ },
817
+ "600": {
818
+ "$type": "color",
819
+ "$value": {
820
+ "colorSpace": "srgb",
821
+ "components": [
822
+ 0.5921568870544434,
823
+ 0.27843138575553894,
824
+ 1
825
+ ],
826
+ "alpha": 1,
827
+ "hex": "#9747FF"
828
+ }
829
+ },
830
+ "800": {
831
+ "$type": "color",
832
+ "$value": {
833
+ "colorSpace": "srgb",
834
+ "components": [
835
+ 0.3333333432674408,
836
+ 0.10196078568696976,
837
+ 0.545098066329956
838
+ ],
839
+ "alpha": 1,
840
+ "hex": "#551A8B"
841
+ }
978
842
  }
979
843
  },
980
- "500": {
981
- "$type": "dimension",
982
- "$value": {
983
- "value": 12,
984
- "unit": "px"
844
+ "Blue": {
845
+ "200": {
846
+ "$type": "color",
847
+ "$value": {
848
+ "colorSpace": "srgb",
849
+ "components": [
850
+ 0.886274516582489,
851
+ 0.95686274766922,
852
+ 0.9921568632125854
853
+ ],
854
+ "alpha": 1,
855
+ "hex": "#E2F4FD"
856
+ }
857
+ },
858
+ "500": {
859
+ "$type": "color",
860
+ "$value": {
861
+ "colorSpace": "srgb",
862
+ "components": [
863
+ 0.43921568989753723,
864
+ 0.7960784435272217,
865
+ 0.95686274766922
866
+ ],
867
+ "alpha": 1,
868
+ "hex": "#70CBF4"
869
+ }
870
+ },
871
+ "700": {
872
+ "$type": "color",
873
+ "$value": {
874
+ "colorSpace": "srgb",
875
+ "components": [
876
+ 0.0470588244497776,
877
+ 0.29411765933036804,
878
+ 0.9529411792755127
879
+ ],
880
+ "alpha": 1,
881
+ "hex": "#0C4BF3"
882
+ }
883
+ },
884
+ "800": {
885
+ "$type": "color",
886
+ "$value": {
887
+ "colorSpace": "srgb",
888
+ "components": [
889
+ 0.10588235408067703,
890
+ 0.06666667014360428,
891
+ 0.3607843220233917
892
+ ],
893
+ "alpha": 1,
894
+ "hex": "#1B115C"
895
+ }
985
896
  }
986
897
  },
987
- "600": {
988
- "$type": "dimension",
898
+ "Green": {
899
+ "$type": "color",
989
900
  "$value": {
990
- "value": 16,
991
- "unit": "px"
901
+ "colorSpace": "srgb",
902
+ "components": [
903
+ 0.07450980693101883,
904
+ 0.6823529601097107,
905
+ 0.3607843220233917
906
+ ],
907
+ "alpha": 1,
908
+ "hex": "#13AE5C"
992
909
  }
993
910
  },
994
- "700": {
995
- "$type": "dimension",
911
+ "Red": {
912
+ "$type": "color",
996
913
  "$value": {
997
- "value": 20,
998
- "unit": "px"
914
+ "colorSpace": "srgb",
915
+ "components": [
916
+ 1,
917
+ 0,
918
+ 0
919
+ ],
920
+ "alpha": 1,
921
+ "hex": "#FF0000"
999
922
  }
1000
- },
1001
- "800": {
1002
- "$type": "dimension",
1003
- "$value": {
1004
- "value": 24,
1005
- "unit": "px"
923
+ }
924
+ },
925
+ "Brand B": {
926
+ "Purple": {
927
+ "200": {
928
+ "$type": "color",
929
+ "$value": {
930
+ "colorSpace": "srgb",
931
+ "components": [
932
+ 0.7695237994194031,
933
+ 0.5600000023841858,
934
+ 1
935
+ ],
936
+ "alpha": 1,
937
+ "hex": "#C48FFF"
938
+ }
939
+ },
940
+ "600": {
941
+ "$type": "color",
942
+ "$value": {
943
+ "colorSpace": "srgb",
944
+ "components": [
945
+ 0.48000001907348633,
946
+ 0.07999999821186066,
947
+ 1
948
+ ],
949
+ "alpha": 1,
950
+ "hex": "#7A14FF"
951
+ }
952
+ },
953
+ "800": {
954
+ "$type": "color",
955
+ "$value": {
956
+ "colorSpace": "srgb",
957
+ "components": [
958
+ 0.226666659116745,
959
+ 0.06933332979679108,
960
+ 0.3706666827201843
961
+ ],
962
+ "alpha": 1,
963
+ "hex": "#3A125F"
964
+ }
1006
965
  }
1007
966
  },
1008
- "900": {
1009
- "$type": "dimension",
1010
- "$value": {
1011
- "value": 32,
1012
- "unit": "px"
967
+ "Blue": {
968
+ "200": {
969
+ "$type": "color",
970
+ "$value": {
971
+ "colorSpace": "srgb",
972
+ "components": [
973
+ 0.7006451487541199,
974
+ 0.8864516019821167,
975
+ 0.9793548583984375
976
+ ],
977
+ "alpha": 1,
978
+ "hex": "#B3E2FA"
979
+ }
980
+ },
981
+ "500": {
982
+ "$type": "color",
983
+ "$value": {
984
+ "colorSpace": "srgb",
985
+ "components": [
986
+ 0.2571428418159485,
987
+ 0.7298701405525208,
988
+ 0.9428571462631226
989
+ ],
990
+ "alpha": 1,
991
+ "hex": "#42BAF0"
992
+ }
993
+ },
994
+ "700": {
995
+ "$type": "color",
996
+ "$value": {
997
+ "colorSpace": "srgb",
998
+ "components": [
999
+ 0.0376470573246479,
1000
+ 0.23529411852359772,
1001
+ 0.7623529434204102
1002
+ ],
1003
+ "alpha": 1,
1004
+ "hex": "#0A3CC2"
1005
+ }
1006
+ },
1007
+ "800": {
1008
+ "$type": "color",
1009
+ "$value": {
1010
+ "colorSpace": "srgb",
1011
+ "components": [
1012
+ 0.05449541285634041,
1013
+ 0.0343119278550148,
1014
+ 0.1856880784034729
1015
+ ],
1016
+ "alpha": 1,
1017
+ "hex": "#0E092F"
1018
+ }
1013
1019
  }
1014
1020
  },
1015
- "000": {
1016
- "$type": "dimension",
1021
+ "Red": {
1022
+ "$type": "color",
1017
1023
  "$value": {
1018
- "value": 0,
1019
- "unit": "px"
1024
+ "colorSpace": "srgb",
1025
+ "components": [
1026
+ 0.800000011920929,
1027
+ 0,
1028
+ 0
1029
+ ],
1030
+ "alpha": 1,
1031
+ "hex": "#CC0000"
1020
1032
  }
1021
1033
  },
1022
- "full": {
1023
- "$type": "dimension",
1034
+ "Green": {
1035
+ "$type": "color",
1024
1036
  "$value": {
1025
- "value": 10000,
1026
- "unit": "px"
1037
+ "colorSpace": "srgb",
1038
+ "components": [
1039
+ 0.055129535496234894,
1040
+ 0.5048704743385315,
1041
+ 0.2669430077075958
1042
+ ],
1043
+ "alpha": 1,
1044
+ "hex": "#0E8144"
1027
1045
  }
1028
1046
  }
1047
+ },
1048
+ "Transparent": {
1049
+ "$type": "color",
1050
+ "$value": {
1051
+ "colorSpace": "srgb",
1052
+ "components": [
1053
+ 0,
1054
+ 0,
1055
+ 0
1056
+ ],
1057
+ "alpha": 0,
1058
+ "hex": "#00000000"
1059
+ }
1029
1060
  }
1030
1061
  },
1031
- "ZIndex": {
1032
- "Hidden": {
1033
- "$type": "number",
1034
- "$value": -1
1035
- },
1036
- "Base": {
1037
- "$type": "number",
1038
- "$value": 0
1039
- },
1040
- "Raised": {
1041
- "$type": "number",
1042
- "$value": 1
1043
- },
1044
- "Dropdown Base": {
1045
- "$type": "number",
1046
- "$value": 900
1047
- },
1048
- "Dropdown": {
1049
- "$type": "number",
1050
- "$value": 1000
1051
- },
1052
- "Sticky": {
1053
- "$type": "number",
1054
- "$value": 1020
1055
- },
1056
- "Fixed": {
1057
- "$type": "number",
1058
- "$value": 1030
1059
- },
1060
- "Modal Overlay": {
1061
- "$type": "number",
1062
- "$value": 1040
1063
- },
1064
- "Modal": {
1065
- "$type": "number",
1066
- "$value": 1050
1067
- },
1068
- "Popover": {
1069
- "$type": "number",
1070
- "$value": 1060
1071
- },
1072
- "Tooltip": {
1073
- "$type": "number",
1074
- "$value": 1070
1062
+ "Shadow": {
1063
+ "Focus": {
1064
+ "$type": "dimension",
1065
+ "$value": {
1066
+ "value": 8,
1067
+ "unit": "px"
1068
+ }
1075
1069
  }
1076
1070
  }
1077
1071
  }