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