@mekari/pixel3-theme 0.2.1-dev.0 → 0.2.2-dev.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 (84) hide show
  1. package/dist/conditions.d.mts +4 -1
  2. package/dist/conditions.d.ts +4 -1
  3. package/dist/index.js +2889 -409
  4. package/dist/index.mjs +2888 -408
  5. package/dist/semanticTokens/colors.d.mts +892 -0
  6. package/dist/semanticTokens/colors.d.ts +892 -0
  7. package/dist/semanticTokens/index.d.mts +951 -0
  8. package/dist/semanticTokens/index.d.ts +951 -0
  9. package/dist/semanticTokens/spacing.d.mts +59 -0
  10. package/dist/semanticTokens/spacing.d.ts +59 -0
  11. package/dist/tokens/borders.d.mts +2 -2
  12. package/dist/tokens/borders.d.ts +2 -2
  13. package/dist/tokens/colors.d.mts +37 -34
  14. package/dist/tokens/colors.d.ts +37 -34
  15. package/dist/tokens/index.d.mts +59 -35
  16. package/dist/tokens/index.d.ts +59 -35
  17. package/dist/tokens/radii.d.mts +5 -0
  18. package/dist/tokens/radii.d.ts +5 -0
  19. package/dist/tokens/spacing.d.mts +16 -0
  20. package/dist/tokens/spacing.d.ts +16 -0
  21. package/dist/tokens-next/borders.d.mts +22 -0
  22. package/dist/tokens-next/borders.d.ts +22 -0
  23. package/dist/tokens-next/colors.d.mts +441 -0
  24. package/dist/tokens-next/colors.d.ts +441 -0
  25. package/dist/tokens-next/index.d.mts +772 -0
  26. package/dist/tokens-next/index.d.ts +772 -0
  27. package/dist/tokens-next/radii.d.mts +26 -0
  28. package/dist/tokens-next/radii.d.ts +26 -0
  29. package/dist/tokens-next/shadows.d.mts +28 -0
  30. package/dist/tokens-next/shadows.d.ts +28 -0
  31. package/dist/tokens-next/spacing.d.mts +51 -0
  32. package/dist/tokens-next/spacing.d.ts +51 -0
  33. package/package.json +1 -1
  34. package/src/conditions.ts +6 -4
  35. package/src/global-css.ts +4 -0
  36. package/src/index.ts +15 -2
  37. package/src/recipes/accordion.ts +12 -2
  38. package/src/recipes/autocomplete.ts +6 -1
  39. package/src/recipes/avatar.ts +68 -11
  40. package/src/recipes/badge.ts +174 -50
  41. package/src/recipes/banner.ts +36 -11
  42. package/src/recipes/broadcast.ts +78 -12
  43. package/src/recipes/button.ts +132 -9
  44. package/src/recipes/carousel.ts +5 -0
  45. package/src/recipes/chart.ts +10 -5
  46. package/src/recipes/checkbox.ts +68 -13
  47. package/src/recipes/color-picker.ts +74 -23
  48. package/src/recipes/date-picker.ts +165 -31
  49. package/src/recipes/divider.ts +5 -1
  50. package/src/recipes/dropzone.ts +80 -8
  51. package/src/recipes/form-control.ts +12 -3
  52. package/src/recipes/input-tag.ts +48 -8
  53. package/src/recipes/input.ts +75 -8
  54. package/src/recipes/modal.ts +30 -9
  55. package/src/recipes/popover.ts +28 -9
  56. package/src/recipes/progress.ts +9 -2
  57. package/src/recipes/radio.ts +52 -21
  58. package/src/recipes/rich-text-editor.ts +32 -6
  59. package/src/recipes/segmented-control.ts +47 -7
  60. package/src/recipes/select.ts +42 -0
  61. package/src/recipes/slider.ts +46 -6
  62. package/src/recipes/table.ts +26 -11
  63. package/src/recipes/tabs.ts +35 -3
  64. package/src/recipes/tag.ts +43 -13
  65. package/src/recipes/textarea.ts +0 -46
  66. package/src/recipes/timeline.ts +36 -8
  67. package/src/recipes/toast.ts +21 -4
  68. package/src/recipes/toggle.ts +59 -11
  69. package/src/recipes/tooltip.ts +5 -1
  70. package/src/recipes/upload.ts +51 -16
  71. package/src/semanticTokens/colors.ts +893 -0
  72. package/src/semanticTokens/index.ts +8 -0
  73. package/src/semanticTokens/spacing.ts +59 -0
  74. package/src/tokens/borders.ts +1 -1
  75. package/src/tokens/colors.ts +18 -23
  76. package/src/tokens/index.ts +2 -2
  77. package/src/tokens/radii.ts +5 -5
  78. package/src/tokens/spacing.ts +17 -17
  79. package/src/tokens-next/borders.ts +10 -0
  80. package/src/tokens-next/colors.ts +171 -0
  81. package/src/tokens-next/index.ts +32 -0
  82. package/src/tokens-next/radii.ts +10 -0
  83. package/src/tokens-next/shadows.ts +28 -0
  84. package/src/tokens-next/spacing.ts +16 -0
@@ -0,0 +1,951 @@
1
+ declare const semanticTokens: {
2
+ colors: {
3
+ background: {
4
+ surface: {
5
+ value: {
6
+ base: string;
7
+ _light: string;
8
+ _dark: string;
9
+ };
10
+ };
11
+ stage: {
12
+ value: {
13
+ base: string;
14
+ _light: string;
15
+ _dark: string;
16
+ };
17
+ };
18
+ overlay: {
19
+ value: {
20
+ base: string;
21
+ _light: string;
22
+ _dark: string;
23
+ };
24
+ };
25
+ disabled: {
26
+ value: {
27
+ base: string;
28
+ _light: string;
29
+ _dark: string;
30
+ };
31
+ };
32
+ inverse: {
33
+ value: {
34
+ base: string;
35
+ _light: string;
36
+ _dark: string;
37
+ };
38
+ };
39
+ shadow: {
40
+ value: {
41
+ base: string;
42
+ _light: string;
43
+ _dark: string;
44
+ };
45
+ };
46
+ neutral: {
47
+ DEFAULT: {
48
+ value: {
49
+ base: string;
50
+ _light: string;
51
+ _dark: string;
52
+ };
53
+ };
54
+ hovered: {
55
+ value: {
56
+ base: string;
57
+ _light: string;
58
+ _dark: string;
59
+ };
60
+ };
61
+ pressed: {
62
+ value: {
63
+ base: string;
64
+ _light: string;
65
+ _dark: string;
66
+ };
67
+ };
68
+ subtle: {
69
+ DEFAULT: {
70
+ value: {
71
+ base: string;
72
+ _light: string;
73
+ _dark: string;
74
+ };
75
+ };
76
+ hovered: {
77
+ value: {
78
+ base: string;
79
+ _light: string;
80
+ _dark: string;
81
+ };
82
+ };
83
+ pressed: {
84
+ value: {
85
+ base: string;
86
+ _light: string;
87
+ _dark: string;
88
+ };
89
+ };
90
+ };
91
+ bold: {
92
+ DEFAULT: {
93
+ value: {
94
+ base: string;
95
+ _light: string;
96
+ _dark: string;
97
+ };
98
+ };
99
+ hovered: {
100
+ value: {
101
+ base: string;
102
+ _light: string;
103
+ _dark: string;
104
+ };
105
+ };
106
+ pressed: {
107
+ value: {
108
+ base: string;
109
+ _light: string;
110
+ _dark: string;
111
+ };
112
+ };
113
+ };
114
+ };
115
+ brand: {
116
+ DEFAULT: {
117
+ value: {
118
+ base: string;
119
+ _light: string;
120
+ _dark: string;
121
+ };
122
+ };
123
+ hovered: {
124
+ value: {
125
+ base: string;
126
+ _light: string;
127
+ _dark: string;
128
+ };
129
+ };
130
+ pressed: {
131
+ value: {
132
+ base: string;
133
+ _light: string;
134
+ _dark: string;
135
+ };
136
+ };
137
+ selected: {
138
+ value: {
139
+ base: string;
140
+ _light: string;
141
+ _dark: string;
142
+ };
143
+ };
144
+ bold: {
145
+ DEFAULT: {
146
+ value: {
147
+ base: string;
148
+ _light: string;
149
+ _dark: string;
150
+ };
151
+ };
152
+ hovered: {
153
+ value: {
154
+ base: string;
155
+ _light: string;
156
+ _dark: string;
157
+ };
158
+ };
159
+ pressed: {
160
+ value: {
161
+ base: string;
162
+ _liht: string;
163
+ _dark: string;
164
+ };
165
+ };
166
+ selected: {
167
+ value: {
168
+ base: string;
169
+ _liht: string;
170
+ _dark: string;
171
+ };
172
+ };
173
+ };
174
+ };
175
+ tertiary: {
176
+ DEFAULT: {
177
+ value: {
178
+ base: string;
179
+ _light: string;
180
+ _dark: string;
181
+ };
182
+ };
183
+ hovered: {
184
+ value: {
185
+ base: string;
186
+ _light: string;
187
+ _dark: string;
188
+ };
189
+ };
190
+ pressed: {
191
+ value: {
192
+ base: string;
193
+ _light: string;
194
+ _dark: string;
195
+ };
196
+ };
197
+ };
198
+ danger: {
199
+ DEFAULT: {
200
+ value: {
201
+ base: string;
202
+ _light: string;
203
+ _dark: string;
204
+ };
205
+ };
206
+ hovered: {
207
+ value: {
208
+ base: string;
209
+ _light: string;
210
+ _dark: string;
211
+ };
212
+ };
213
+ pressed: {
214
+ value: {
215
+ base: string;
216
+ _light: string;
217
+ _dark: string;
218
+ };
219
+ };
220
+ bold: {
221
+ DEFAULT: {
222
+ value: {
223
+ base: string;
224
+ _light: string;
225
+ _dark: string;
226
+ };
227
+ };
228
+ hovered: {
229
+ value: {
230
+ base: string;
231
+ _light: string;
232
+ _dark: string;
233
+ };
234
+ };
235
+ pressed: {
236
+ value: {
237
+ base: string;
238
+ _liht: string;
239
+ _dark: string;
240
+ };
241
+ };
242
+ };
243
+ };
244
+ warning: {
245
+ DEFAULT: {
246
+ value: {
247
+ base: string;
248
+ _light: string;
249
+ _dark: string;
250
+ };
251
+ };
252
+ hovered: {
253
+ value: {
254
+ base: string;
255
+ _light: string;
256
+ _dark: string;
257
+ };
258
+ };
259
+ pressed: {
260
+ value: {
261
+ base: string;
262
+ _light: string;
263
+ _dark: string;
264
+ };
265
+ };
266
+ bold: {
267
+ DEFAULT: {
268
+ value: {
269
+ base: string;
270
+ _light: string;
271
+ _dark: string;
272
+ };
273
+ };
274
+ hovered: {
275
+ value: {
276
+ base: string;
277
+ _light: string;
278
+ _dark: string;
279
+ };
280
+ };
281
+ pressed: {
282
+ value: {
283
+ base: string;
284
+ _liht: string;
285
+ _dark: string;
286
+ };
287
+ };
288
+ };
289
+ };
290
+ success: {
291
+ DEFAULT: {
292
+ value: {
293
+ base: string;
294
+ _light: string;
295
+ _dark: string;
296
+ };
297
+ };
298
+ hovered: {
299
+ value: {
300
+ base: string;
301
+ _light: string;
302
+ _dark: string;
303
+ };
304
+ };
305
+ pressed: {
306
+ value: {
307
+ base: string;
308
+ _light: string;
309
+ _dark: string;
310
+ };
311
+ };
312
+ bold: {
313
+ DEFAULT: {
314
+ value: {
315
+ base: string;
316
+ _light: string;
317
+ _dark: string;
318
+ };
319
+ };
320
+ hovered: {
321
+ value: {
322
+ base: string;
323
+ _light: string;
324
+ _dark: string;
325
+ };
326
+ };
327
+ pressed: {
328
+ value: {
329
+ base: string;
330
+ _liht: string;
331
+ _dark: string;
332
+ };
333
+ };
334
+ };
335
+ };
336
+ highlight: {
337
+ DEFAULT: {
338
+ value: {
339
+ base: string;
340
+ _light: string;
341
+ _dark: string;
342
+ };
343
+ };
344
+ hovered: {
345
+ value: {
346
+ base: string;
347
+ _light: string;
348
+ _dark: string;
349
+ };
350
+ };
351
+ pressed: {
352
+ value: {
353
+ base: string;
354
+ _light: string;
355
+ _dark: string;
356
+ };
357
+ };
358
+ bold: {
359
+ DEFAULT: {
360
+ value: {
361
+ base: string;
362
+ _light: string;
363
+ _dark: string;
364
+ };
365
+ };
366
+ hovered: {
367
+ value: {
368
+ base: string;
369
+ _light: string;
370
+ _dark: string;
371
+ };
372
+ };
373
+ pressed: {
374
+ value: {
375
+ base: string;
376
+ _liht: string;
377
+ _dark: string;
378
+ };
379
+ };
380
+ };
381
+ };
382
+ };
383
+ nav: {
384
+ parent: {
385
+ value: {
386
+ base: string;
387
+ _light: string;
388
+ _dark: string;
389
+ };
390
+ };
391
+ stack: {
392
+ DEFAULT: {
393
+ value: {
394
+ base: string;
395
+ _light: string;
396
+ _dark: string;
397
+ };
398
+ };
399
+ hovered: {
400
+ value: {
401
+ base: string;
402
+ _light: string;
403
+ _dark: string;
404
+ };
405
+ };
406
+ };
407
+ };
408
+ text: {
409
+ default: {
410
+ DEFAULT: {
411
+ value: {
412
+ base: string;
413
+ _light: string;
414
+ _dark: string;
415
+ };
416
+ };
417
+ static: {
418
+ value: {
419
+ base: string;
420
+ _light: string;
421
+ _dark: string;
422
+ };
423
+ };
424
+ };
425
+ secondary: {
426
+ DEFAULT: {
427
+ value: {
428
+ base: string;
429
+ _light: string;
430
+ _dark: string;
431
+ };
432
+ };
433
+ pressed: {
434
+ value: {
435
+ base: string;
436
+ _light: string;
437
+ _dark: string;
438
+ };
439
+ };
440
+ };
441
+ placeholder: {
442
+ value: {
443
+ base: string;
444
+ _light: string;
445
+ _dark: string;
446
+ };
447
+ };
448
+ disabled: {
449
+ value: {
450
+ base: string;
451
+ _light: string;
452
+ _dark: string;
453
+ };
454
+ };
455
+ inverse: {
456
+ DEFAULT: {
457
+ value: {
458
+ base: string;
459
+ _light: string;
460
+ _dark: string;
461
+ };
462
+ };
463
+ static: {
464
+ value: {
465
+ base: string;
466
+ _light: string;
467
+ _dark: string;
468
+ };
469
+ };
470
+ };
471
+ selected: {
472
+ value: {
473
+ base: string;
474
+ _light: string;
475
+ _dark: string;
476
+ };
477
+ };
478
+ danger: {
479
+ DEFAULT: {
480
+ value: {
481
+ base: string;
482
+ _light: string;
483
+ _dark: string;
484
+ };
485
+ };
486
+ pressed: {
487
+ value: {
488
+ base: string;
489
+ _light: string;
490
+ _dark: string;
491
+ };
492
+ };
493
+ };
494
+ warning: {
495
+ DEFAULT: {
496
+ value: {
497
+ base: string;
498
+ _light: string;
499
+ _dark: string;
500
+ };
501
+ };
502
+ inverse: {
503
+ value: {
504
+ base: string;
505
+ _light: string;
506
+ _dark: string;
507
+ };
508
+ };
509
+ };
510
+ success: {
511
+ value: {
512
+ base: string;
513
+ _light: string;
514
+ _dark: string;
515
+ };
516
+ };
517
+ highlight: {
518
+ value: {
519
+ base: string;
520
+ _light: string;
521
+ _dark: string;
522
+ };
523
+ };
524
+ information: {
525
+ value: {
526
+ base: string;
527
+ _light: string;
528
+ _dark: string;
529
+ };
530
+ };
531
+ link: {
532
+ DEFAULT: {
533
+ value: {
534
+ base: string;
535
+ _light: string;
536
+ _dark: string;
537
+ };
538
+ };
539
+ pressed: {
540
+ value: {
541
+ base: string;
542
+ _light: string;
543
+ _dark: string;
544
+ };
545
+ };
546
+ };
547
+ };
548
+ icon: {
549
+ default: {
550
+ value: {
551
+ base: string;
552
+ _light: string;
553
+ _dark: string;
554
+ };
555
+ };
556
+ disabled: {
557
+ value: {
558
+ base: string;
559
+ _light: string;
560
+ _dark: string;
561
+ };
562
+ };
563
+ inverse: {
564
+ DEFAULT: {
565
+ value: {
566
+ base: string;
567
+ _light: string;
568
+ _dark: string;
569
+ };
570
+ };
571
+ static: {
572
+ value: {
573
+ base: string;
574
+ _light: string;
575
+ _dark: string;
576
+ };
577
+ };
578
+ };
579
+ selected: {
580
+ value: {
581
+ base: string;
582
+ _light: string;
583
+ _dark: string;
584
+ };
585
+ };
586
+ brand: {
587
+ value: {
588
+ base: string;
589
+ _light: string;
590
+ _dark: string;
591
+ };
592
+ };
593
+ danger: {
594
+ value: {
595
+ base: string;
596
+ _light: string;
597
+ _dark: string;
598
+ };
599
+ };
600
+ warning: {
601
+ DEFAULT: {
602
+ value: {
603
+ base: string;
604
+ _light: string;
605
+ _dark: string;
606
+ };
607
+ };
608
+ inverse: {
609
+ value: {
610
+ base: string;
611
+ _light: string;
612
+ _dark: string;
613
+ };
614
+ };
615
+ };
616
+ success: {
617
+ value: {
618
+ base: string;
619
+ _light: string;
620
+ _dark: string;
621
+ };
622
+ };
623
+ highlight: {
624
+ value: {
625
+ base: string;
626
+ _light: string;
627
+ _dark: string;
628
+ };
629
+ };
630
+ information: {
631
+ value: {
632
+ base: string;
633
+ _light: string;
634
+ _dark: string;
635
+ };
636
+ };
637
+ subtle: {
638
+ value: {
639
+ base: string;
640
+ _light: string;
641
+ _dark: string;
642
+ };
643
+ };
644
+ logo: {
645
+ value: {
646
+ base: string;
647
+ _light: string;
648
+ _dark: string;
649
+ };
650
+ };
651
+ };
652
+ border: {
653
+ default: {
654
+ value: {
655
+ base: string;
656
+ _light: string;
657
+ _dark: string;
658
+ };
659
+ };
660
+ bold: {
661
+ value: {
662
+ base: string;
663
+ _light: string;
664
+ _dark: string;
665
+ };
666
+ };
667
+ disabled: {
668
+ value: {
669
+ base: string;
670
+ _light: string;
671
+ _dark: string;
672
+ };
673
+ };
674
+ form: {
675
+ value: {
676
+ base: string;
677
+ _light: string;
678
+ _dark: string;
679
+ };
680
+ };
681
+ focused: {
682
+ value: {
683
+ base: string;
684
+ _light: string;
685
+ _dark: string;
686
+ };
687
+ };
688
+ inverse: {
689
+ value: {
690
+ base: string;
691
+ _light: string;
692
+ _dark: string;
693
+ };
694
+ };
695
+ selected: {
696
+ DEFAULT: {
697
+ value: {
698
+ base: string;
699
+ _light: string;
700
+ _dark: string;
701
+ };
702
+ };
703
+ hovered: {
704
+ value: {
705
+ base: string;
706
+ _light: string;
707
+ _dark: string;
708
+ };
709
+ };
710
+ disabled: {
711
+ value: {
712
+ base: string;
713
+ _light: string;
714
+ _dark: string;
715
+ };
716
+ };
717
+ };
718
+ brand: {
719
+ value: {
720
+ base: string;
721
+ _light: string;
722
+ _dark: string;
723
+ };
724
+ };
725
+ danger: {
726
+ value: {
727
+ base: string;
728
+ _light: string;
729
+ _dark: string;
730
+ };
731
+ };
732
+ warning: {
733
+ value: {
734
+ base: string;
735
+ _light: string;
736
+ _dark: string;
737
+ };
738
+ };
739
+ success: {
740
+ value: {
741
+ base: string;
742
+ _light: string;
743
+ _dark: string;
744
+ };
745
+ };
746
+ highlight: {
747
+ value: {
748
+ base: string;
749
+ _light: string;
750
+ _dark: string;
751
+ };
752
+ };
753
+ information: {
754
+ value: {
755
+ base: string;
756
+ _light: string;
757
+ _dark: string;
758
+ };
759
+ };
760
+ };
761
+ chart: {
762
+ cat01: {
763
+ DEFAULT: {
764
+ value: {
765
+ base: string;
766
+ _light: string;
767
+ _dark: string;
768
+ };
769
+ };
770
+ bold: {
771
+ value: {
772
+ base: string;
773
+ _light: string;
774
+ _dark: string;
775
+ };
776
+ };
777
+ };
778
+ cat02: {
779
+ DEFAULT: {
780
+ value: {
781
+ base: string;
782
+ _light: string;
783
+ _dark: string;
784
+ };
785
+ };
786
+ bold: {
787
+ value: {
788
+ base: string;
789
+ _light: string;
790
+ _dark: string;
791
+ };
792
+ };
793
+ };
794
+ cat03: {
795
+ DEFAULT: {
796
+ value: {
797
+ base: string;
798
+ _light: string;
799
+ _dark: string;
800
+ };
801
+ };
802
+ bold: {
803
+ value: {
804
+ base: string;
805
+ _light: string;
806
+ _dark: string;
807
+ };
808
+ };
809
+ };
810
+ cat04: {
811
+ DEFAULT: {
812
+ value: {
813
+ base: string;
814
+ _light: string;
815
+ _dark: string;
816
+ };
817
+ };
818
+ bold: {
819
+ value: {
820
+ base: string;
821
+ _light: string;
822
+ _dark: string;
823
+ };
824
+ };
825
+ };
826
+ cat05: {
827
+ DEFAULT: {
828
+ value: {
829
+ base: string;
830
+ _light: string;
831
+ _dark: string;
832
+ };
833
+ };
834
+ bold: {
835
+ value: {
836
+ base: string;
837
+ _light: string;
838
+ _dark: string;
839
+ };
840
+ };
841
+ };
842
+ cat06: {
843
+ DEFAULT: {
844
+ value: {
845
+ base: string;
846
+ _light: string;
847
+ _dark: string;
848
+ };
849
+ };
850
+ bold: {
851
+ value: {
852
+ base: string;
853
+ _light: string;
854
+ _dark: string;
855
+ };
856
+ };
857
+ };
858
+ cat07: {
859
+ DEFAULT: {
860
+ value: {
861
+ base: string;
862
+ _light: string;
863
+ _dark: string;
864
+ };
865
+ };
866
+ bold: {
867
+ value: {
868
+ base: string;
869
+ _light: string;
870
+ _dark: string;
871
+ };
872
+ };
873
+ };
874
+ cat08: {
875
+ DEFAULT: {
876
+ value: {
877
+ base: string;
878
+ _light: string;
879
+ _dark: string;
880
+ };
881
+ };
882
+ bold: {
883
+ value: {
884
+ base: string;
885
+ _light: string;
886
+ _dark: string;
887
+ };
888
+ };
889
+ };
890
+ };
891
+ };
892
+ spacing: {
893
+ '4xs': {
894
+ value: {
895
+ base: string;
896
+ };
897
+ };
898
+ '3xs': {
899
+ value: {
900
+ base: string;
901
+ };
902
+ };
903
+ '2xs': {
904
+ value: {
905
+ base: string;
906
+ };
907
+ };
908
+ xs: {
909
+ value: {
910
+ base: string;
911
+ };
912
+ };
913
+ sm: {
914
+ value: {
915
+ base: string;
916
+ };
917
+ };
918
+ md: {
919
+ value: {
920
+ base: string;
921
+ };
922
+ };
923
+ lg: {
924
+ value: {
925
+ base: string;
926
+ };
927
+ };
928
+ xl: {
929
+ value: {
930
+ base: string;
931
+ };
932
+ };
933
+ '2xl': {
934
+ value: {
935
+ base: string;
936
+ };
937
+ };
938
+ '3xl': {
939
+ value: {
940
+ base: string;
941
+ };
942
+ };
943
+ '4xl': {
944
+ value: {
945
+ base: string;
946
+ };
947
+ };
948
+ };
949
+ };
950
+
951
+ export { semanticTokens };