ui-foundations 0.1.2 → 0.3.1

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