@mekari/pixel3-theme 0.5.0-dev.0 → 0.5.0-dev.2

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 (20) hide show
  1. package/dist/conditions.d.mts +1 -0
  2. package/dist/conditions.d.ts +1 -0
  3. package/dist/index.js +160 -72
  4. package/dist/index.mjs +160 -72
  5. package/dist/semanticTokens/colors.d.mts +59 -24
  6. package/dist/semanticTokens/colors.d.ts +59 -24
  7. package/dist/semanticTokens/index.d.mts +59 -24
  8. package/dist/semanticTokens/index.d.ts +59 -24
  9. package/dist/tokens/index.d.mts +4 -0
  10. package/dist/tokens/index.d.ts +4 -0
  11. package/dist/tokens/spacing.d.mts +4 -0
  12. package/dist/tokens/spacing.d.ts +4 -0
  13. package/package.json +1 -1
  14. package/src/conditions.ts +1 -0
  15. package/src/recipes/avatar.ts +6 -2
  16. package/src/recipes/button.ts +29 -12
  17. package/src/recipes/modal.ts +16 -1
  18. package/src/recipes/progress.ts +1 -1
  19. package/src/semanticTokens/colors.ts +97 -56
  20. package/src/tokens/spacing.ts +1 -0
package/src/semanticTokens/colors.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { defineSemanticTokens } from '@pandacss/dev'
2
2
 
3
3
  export const colors = defineSemanticTokens.colors({
4
+ // BACKGROUND SEMANTIC TOKENS
4
5
  background: {
5
6
  surface: {
6
7
  DEFAULT: {
@@ -108,7 +109,7 @@ export const colors = defineSemanticTokens.colors({
108
109
  base: '{colors.neutral.100}',
109
110
  _light: '{colors.neutral.100}',
110
111
  _dark: '{colors.dark.250}',
111
- _enterprise: '{colors.neutral.100}'
112
+ _enterprise: '{colors.slate.100}'
112
113
  }
113
114
  },
114
115
  subtle: {
@@ -117,7 +118,7 @@ export const colors = defineSemanticTokens.colors({
117
118
  base: '{colors.neutral.200}',
118
119
  _light: '{colors.neutral.200}',
119
120
  _dark: '{colors.dark.300}',
120
- _enterprise: '{colors.slate.200}'
121
+ _enterprise: '{colors.slate.100}'
121
122
  }
122
123
  },
123
124
  hovered: {
@@ -125,7 +126,7 @@ export const colors = defineSemanticTokens.colors({
125
126
  base: '{colors.neutral.300}',
126
127
  _light: '{colors.neutral.300}',
127
128
  _dark: '{colors.dark.350}',
128
- _enterprise: '{colors.slate.300}'
129
+ _enterprise: '{colors.slate.200}'
129
130
  }
130
131
  },
131
132
  pressed: {
@@ -133,7 +134,7 @@ export const colors = defineSemanticTokens.colors({
133
134
  base: '{colors.neutral.400}',
134
135
  _light: '{colors.neutral.400}',
135
136
  _dark: '{colors.dark.400}',
136
- _enterprise: '{colors.slate.400}'
137
+ _enterprise: '{colors.slate.300}'
137
138
  }
138
139
  },
139
140
  selected: {
@@ -141,7 +142,7 @@ export const colors = defineSemanticTokens.colors({
141
142
  base: '{colors.neutral.300}',
142
143
  _light: '{colors.neutral.300}',
143
144
  _dark: '{colors.dark.350}',
144
- _enterprise: '{colors.slate.300}'
145
+ _enterprise: '{colors.slate.200}'
145
146
  }
146
147
  }
147
148
  },
@@ -175,7 +176,7 @@ export const colors = defineSemanticTokens.colors({
175
176
  base: '{colors.neutral.900}',
176
177
  _light: '{colors.neutral.900}',
177
178
  _dark: '{colors.dark.900}',
178
- _enterprise: '{colors.neutral.900}'
179
+ _enterprise: '{colors.slate.900}'
179
180
  }
180
181
  }
181
182
  }
@@ -239,19 +240,21 @@ export const colors = defineSemanticTokens.colors({
239
240
  }
240
241
  },
241
242
  selected: {
242
- value: {
243
- base: '{colors.indigo.800}',
244
- _light: '{colors.indigo.800}',
245
- _dark: '{colors.indigo.300}',
246
- _enterprise: '{colors.emerald.800}'
247
- }
248
- },
249
- selectedDisabled: {
250
- value: {
251
- base: '{colors.indigo.200}',
252
- _light: '{colors.indigo.200}',
253
- _dark: '{colors.indigo.900}',
254
- _enterprise: '{colors.emerald.200}'
243
+ DEFAULT: {
244
+ value: {
245
+ base: '{colors.indigo.800}',
246
+ _light: '{colors.indigo.800}',
247
+ _dark: '{colors.indigo.300}',
248
+ _enterprise: '{colors.emerald.800}'
249
+ }
250
+ },
251
+ disabled: {
252
+ value: {
253
+ base: '{colors.indigo.200}',
254
+ _light: '{colors.indigo.200}',
255
+ _dark: '{colors.indigo.900}',
256
+ _enterprise: '{colors.emerald.200}'
257
+ }
255
258
  }
256
259
  }
257
260
  }
@@ -262,7 +265,7 @@ export const colors = defineSemanticTokens.colors({
262
265
  base: '{colors.dark.200}',
263
266
  _light: '{colors.dark.200}',
264
267
  _dark: '{colors.dark.200}',
265
- _enterprise: '{colors.dark.200}'
268
+ _enterprise: '{colors.dark.250}'
266
269
  }
267
270
  },
268
271
  hovered: {
@@ -554,13 +557,41 @@ export const colors = defineSemanticTokens.colors({
554
557
  }
555
558
  }
556
559
  },
560
+ nav: {
561
+ parent: {
562
+ value: {
563
+ base: '#E7EDF5', // Doesn't have raw token
564
+ _light: '#E7EDF5', // Doesn't have raw token
565
+ _dark: '{colors.dark.100}',
566
+ _enterprise: '{colors.emerald.1000}'
567
+ }
568
+ },
569
+ stack: {
570
+ DEFAULT: {
571
+ value: {
572
+ base: '{colors.neutral.100}',
573
+ _light: '{colors.neutral.100}',
574
+ _dark: '{colors.dark}',
575
+ _enterprise: '{colors.neutral.100}'
576
+ }
577
+ },
578
+ hovered: {
579
+ value: {
580
+ base: '#E7EDF5', // Doesn't have raw token
581
+ _light: '#E7EDF5', // Doesn't have raw token
582
+ _dark: '{colors.dark.100}',
583
+ _enterprise: '{colors.emerald.200}'
584
+ }
585
+ }
586
+ }
587
+ },
557
588
  header: {
558
589
  DEFAULT: {
559
590
  value: {
560
591
  base: '{colors.white}',
561
592
  _light: '{colors.white}',
562
593
  _dark: '{colors.dark.100}',
563
- _enterprise: '{colors.white}'
594
+ _enterprise: '{colors.emerald.1000}'
564
595
  }
565
596
  },
566
597
  menu: {
@@ -591,8 +622,10 @@ export const colors = defineSemanticTokens.colors({
591
622
  }
592
623
  }
593
624
  },
625
+ // NAVIGATION SEMANTIC TOKENS (REMOVE AFTER NAV IN BACKGROUND IS UPDATED)
594
626
  nav: {
595
627
  parent: {
628
+ deprecated: 'use `background.nav.parent` instead',
596
629
  value: {
597
630
  base: '#E7EDF5', // Doesn't have raw token
598
631
  _light: '#E7EDF5', // Doesn't have raw token
@@ -602,6 +635,7 @@ export const colors = defineSemanticTokens.colors({
602
635
  },
603
636
  stack: {
604
637
  DEFAULT: {
638
+ deprecated: 'use `background.nav.stack` instead',
605
639
  value: {
606
640
  base: '{colors.neutral.100}',
607
641
  _light: '{colors.neutral.100}',
@@ -610,6 +644,7 @@ export const colors = defineSemanticTokens.colors({
610
644
  }
611
645
  },
612
646
  hovered: {
647
+ deprecated: 'use `background.nav.stack.hovered` instead',
613
648
  value: {
614
649
  base: '#E7EDF5', // Doesn't have raw token
615
650
  _light: '#E7EDF5', // Doesn't have raw token
@@ -619,6 +654,7 @@ export const colors = defineSemanticTokens.colors({
619
654
  }
620
655
  }
621
656
  },
657
+ // TEXT SEMANTIC TOKENS
622
658
  text: {
623
659
  default: {
624
660
  DEFAULT: {
@@ -634,7 +670,7 @@ export const colors = defineSemanticTokens.colors({
634
670
  base: '{colors.neutral.1000}',
635
671
  _light: '{colors.neutral.1000}',
636
672
  _dark: '{colors.neutral.1000}',
637
- _enterprise: '{colors.slate.1000}'
673
+ _enterprise: '{colors.dark.100}'
638
674
  }
639
675
  }
640
676
  },
@@ -652,7 +688,7 @@ export const colors = defineSemanticTokens.colors({
652
688
  base: '{colors.neutral.800}',
653
689
  _light: '{colors.neutral.800}',
654
690
  _dark: '{colors.dark.800}',
655
- _enterprise: '{colors.neutral.800}'
691
+ _enterprise: '{colors.slate.800}'
656
692
  }
657
693
  }
658
694
  },
@@ -661,7 +697,7 @@ export const colors = defineSemanticTokens.colors({
661
697
  base: '{colors.neutral.600}',
662
698
  _light: '{colors.neutral.600}',
663
699
  _dark: '{colors.dark.600}',
664
- _enterprise: '{colors.slate.600}'
700
+ _enterprise: '{colors.slate.500}'
665
701
  }
666
702
  },
667
703
  disabled: {
@@ -695,7 +731,7 @@ export const colors = defineSemanticTokens.colors({
695
731
  base: '{colors.indigo.700}',
696
732
  _light: '{colors.indigo.700}',
697
733
  _dark: '{colors.indigo.400}',
698
- _enterprise: '{colors.emerald.700}'
734
+ _enterprise: '{colors.emerald.800}'
699
735
  }
700
736
  },
701
737
  danger: {
@@ -740,7 +776,7 @@ export const colors = defineSemanticTokens.colors({
740
776
  base: '{colors.green.800}',
741
777
  _light: '{colors.green.800}',
742
778
  _dark: '{colors.green.300}',
743
- _enterprise: '{colors.green.800}'
779
+ _enterprise: '{colors.emerald.800}'
744
780
  }
745
781
  },
746
782
  highlight: {
@@ -756,7 +792,7 @@ export const colors = defineSemanticTokens.colors({
756
792
  base: '{colors.indigo.800}',
757
793
  _light: '{colors.indigo.800}',
758
794
  _dark: '{colors.indigo.300}',
759
- _enterprise: '{colors.emerald.800}'
795
+ _enterprise: '{colors.indigo.700}'
760
796
  }
761
797
  },
762
798
  link: {
@@ -765,7 +801,7 @@ export const colors = defineSemanticTokens.colors({
765
801
  base: '{colors.indigo.700}',
766
802
  _light: '{colors.indigo.700}',
767
803
  _dark: '{colors.indigo.400}',
768
- _enterprise: '{colors.emerald.700}'
804
+ _enterprise: '#165082' // Doesn't have raw token
769
805
  }
770
806
  },
771
807
  pressed: {
@@ -773,11 +809,12 @@ export const colors = defineSemanticTokens.colors({
773
809
  base: '{colors.indigo.800}',
774
810
  _light: '{colors.indigo.800}',
775
811
  _dark: '{colors.indigo.300}',
776
- _enterprise: '{colors.emerald.800}'
812
+ _enterprise: '#0D4372' // Doesn't have raw token
777
813
  }
778
814
  }
779
815
  }
780
816
  },
817
+ // ICON SEMANTIC TOKENS
781
818
  icon: {
782
819
  default: {
783
820
  value: {
@@ -801,7 +838,7 @@ export const colors = defineSemanticTokens.colors({
801
838
  base: '{colors.white}',
802
839
  _light: '{colors.white}',
803
840
  _dark: '{colors.dark.100}',
804
- _enterprise: '{colors.white}'
841
+ _enterprise: '{colors.emerald.100}'
805
842
  }
806
843
  },
807
844
  static: {
@@ -860,7 +897,7 @@ export const colors = defineSemanticTokens.colors({
860
897
  base: '{colors.green.700}',
861
898
  _light: '{colors.green.700}',
862
899
  _dark: '{colors.green.400}',
863
- _enterprise: '{colors.green.700}'
900
+ _enterprise: '{colors.emerald.600}'
864
901
  }
865
902
  },
866
903
  highlight: {
@@ -868,7 +905,7 @@ export const colors = defineSemanticTokens.colors({
868
905
  base: '{colors.violet.700}',
869
906
  _light: '{colors.violet.700}',
870
907
  _dark: '{colors.violet.400}',
871
- _enterprise: '{colors.violet.700}'
908
+ _enterprise: '{colors.orange.700}'
872
909
  }
873
910
  },
874
911
  information: {
@@ -876,7 +913,7 @@ export const colors = defineSemanticTokens.colors({
876
913
  base: '{colors.indigo.700}',
877
914
  _light: '{colors.indigo.700}',
878
915
  _dark: '{colors.indigo.400}',
879
- _enterprise: '{colors.emerald.700}'
916
+ _enterprise: '{colors.indigo.600}'
880
917
  }
881
918
  },
882
919
  subtle: {
@@ -889,28 +926,31 @@ export const colors = defineSemanticTokens.colors({
889
926
  },
890
927
  logo: {
891
928
  value: {
892
- base: '{colors.neutral.1000}',
893
- _light: '{colors.neutral.1000}',
894
- _dark: '{colors.neutral.100}',
895
- _enterprise: '{colors.slate.1000}'
929
+ base: '#000000', // Doesn't have raw token
930
+ _light: '#000000', // Doesn't have raw token
931
+ _dark: '{colors.white}',
932
+ _enterprise: '#000000' // Doesn't have raw token
896
933
  }
897
934
  }
898
935
  },
936
+ // BORDER SEMANTIC TOKENS
899
937
  border: {
900
938
  default: {
901
- value: {
902
- base: '{colors.neutral.300}',
903
- _light: '{colors.neutral.300}',
904
- _dark: '{colors.dark.300}',
905
- _enterprise: '{colors.slate.300}'
906
- }
907
- },
908
- subtle: {
909
- value: {
910
- base: '{colors.neutral.200}',
911
- _light: '{colors.neutral.200}',
912
- _dark: '{colors.dark.200}',
913
- _enterprise: '{colors.slate.200}'
939
+ DEFAULT: {
940
+ value: {
941
+ base: '{colors.neutral.300}',
942
+ _light: '{colors.neutral.300}',
943
+ _dark: '{colors.dark.300}',
944
+ _enterprise: '{colors.slate.300}'
945
+ }
946
+ },
947
+ subtle: {
948
+ value: {
949
+ base: '{colors.neutral.200}',
950
+ _light: '{colors.neutral.200}',
951
+ _dark: '{colors.dark.200}',
952
+ _enterprise: '{colors.slate.200}'
953
+ }
914
954
  }
915
955
  },
916
956
  bold: {
@@ -918,7 +958,7 @@ export const colors = defineSemanticTokens.colors({
918
958
  base: '{colors.neutral.600}',
919
959
  _light: '{colors.neutral.600}',
920
960
  _dark: '{colors.dark.600}',
921
- _enterprise: '{colors.slate.600}'
961
+ _enterprise: '{colors.slate.400}'
922
962
  }
923
963
  },
924
964
  disabled: {
@@ -984,7 +1024,7 @@ export const colors = defineSemanticTokens.colors({
984
1024
  base: '{colors.indigo.700}',
985
1025
  _light: '{colors.indigo.700}',
986
1026
  _dark: '{colors.indigo.400}',
987
- _enterprise: '{colors.emerald.700}'
1027
+ _enterprise: '{colors.emerald.800}'
988
1028
  }
989
1029
  },
990
1030
  danger: {
@@ -992,7 +1032,7 @@ export const colors = defineSemanticTokens.colors({
992
1032
  base: '{colors.red.700}',
993
1033
  _light: '{colors.red.700}',
994
1034
  _dark: '{colors.red.400}',
995
- _enterprise: '{colors.red.700}'
1035
+ _enterprise: '{colors.red.600}'
996
1036
  }
997
1037
  },
998
1038
  warning: {
@@ -1008,7 +1048,7 @@ export const colors = defineSemanticTokens.colors({
1008
1048
  base: '{colors.green.700}',
1009
1049
  _light: '{colors.green.700}',
1010
1050
  _dark: '{colors.green.400}',
1011
- _enterprise: '{colors.green.700}'
1051
+ _enterprise: '{colors.emerald.700}'
1012
1052
  }
1013
1053
  },
1014
1054
  highlight: {
@@ -1016,7 +1056,7 @@ export const colors = defineSemanticTokens.colors({
1016
1056
  base: '{colors.violet.700}',
1017
1057
  _light: '{colors.violet.700}',
1018
1058
  _dark: '{colors.violet.400}',
1019
- _enterprise: '{colors.violet.700}'
1059
+ _enterprise: '{colors.orange.700}'
1020
1060
  }
1021
1061
  },
1022
1062
  information: {
@@ -1024,10 +1064,11 @@ export const colors = defineSemanticTokens.colors({
1024
1064
  base: '{colors.indigo.700}',
1025
1065
  _light: '{colors.indigo.700}',
1026
1066
  _dark: '{colors.indigo.400}',
1027
- _enterprise: '{colors.emerald.700}'
1067
+ _enterprise: '{colors.indigo.600}'
1028
1068
  }
1029
1069
  }
1030
1070
  },
1071
+ // CHART SEMANTIC TOKENS
1031
1072
  chart: {
1032
1073
  cat01: {
1033
1074
  DEFAULT: {
package/src/tokens/spacing.ts CHANGED
@@ -6,6 +6,7 @@ export const spacing = defineTokens.spacing({
6
6
  1: { value: '0.25rem', description: '4px' },
7
7
  1.5: { value: '0.375rem', description: '6px' },
8
8
  2: { value: '0.5rem', description: '8px' },
9
+ 2.5: { value: '0.625rem', description: '10px' },
9
10
  3: { value: '0.75rem', description: '12px' },
10
11
  4: { value: '1rem', description: '16px' },
11
12
  5: { value: '1.3rem', description: '20px' },