@mekari/pixel3-theme 0.5.0-dev.0 → 0.5.0-dev.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 (19) hide show
  1. package/dist/conditions.d.mts +1 -0
  2. package/dist/conditions.d.ts +1 -0
  3. package/dist/index.js +156 -71
  4. package/dist/index.mjs +156 -71
  5. package/dist/semanticTokens/colors.d.mts +56 -24
  6. package/dist/semanticTokens/colors.d.ts +56 -24
  7. package/dist/semanticTokens/index.d.mts +56 -24
  8. package/dist/semanticTokens/index.d.ts +56 -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/semanticTokens/colors.ts +94 -56
  19. 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,6 +622,7 @@ 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: {
596
628
  value: {
@@ -619,6 +651,7 @@ export const colors = defineSemanticTokens.colors({
619
651
  }
620
652
  }
621
653
  },
654
+ // TEXT SEMANTIC TOKENS
622
655
  text: {
623
656
  default: {
624
657
  DEFAULT: {
@@ -634,7 +667,7 @@ export const colors = defineSemanticTokens.colors({
634
667
  base: '{colors.neutral.1000}',
635
668
  _light: '{colors.neutral.1000}',
636
669
  _dark: '{colors.neutral.1000}',
637
- _enterprise: '{colors.slate.1000}'
670
+ _enterprise: '{colors.dark.100}'
638
671
  }
639
672
  }
640
673
  },
@@ -652,7 +685,7 @@ export const colors = defineSemanticTokens.colors({
652
685
  base: '{colors.neutral.800}',
653
686
  _light: '{colors.neutral.800}',
654
687
  _dark: '{colors.dark.800}',
655
- _enterprise: '{colors.neutral.800}'
688
+ _enterprise: '{colors.slate.800}'
656
689
  }
657
690
  }
658
691
  },
@@ -661,7 +694,7 @@ export const colors = defineSemanticTokens.colors({
661
694
  base: '{colors.neutral.600}',
662
695
  _light: '{colors.neutral.600}',
663
696
  _dark: '{colors.dark.600}',
664
- _enterprise: '{colors.slate.600}'
697
+ _enterprise: '{colors.slate.500}'
665
698
  }
666
699
  },
667
700
  disabled: {
@@ -695,7 +728,7 @@ export const colors = defineSemanticTokens.colors({
695
728
  base: '{colors.indigo.700}',
696
729
  _light: '{colors.indigo.700}',
697
730
  _dark: '{colors.indigo.400}',
698
- _enterprise: '{colors.emerald.700}'
731
+ _enterprise: '{colors.emerald.800}'
699
732
  }
700
733
  },
701
734
  danger: {
@@ -740,7 +773,7 @@ export const colors = defineSemanticTokens.colors({
740
773
  base: '{colors.green.800}',
741
774
  _light: '{colors.green.800}',
742
775
  _dark: '{colors.green.300}',
743
- _enterprise: '{colors.green.800}'
776
+ _enterprise: '{colors.emerald.800}'
744
777
  }
745
778
  },
746
779
  highlight: {
@@ -756,7 +789,7 @@ export const colors = defineSemanticTokens.colors({
756
789
  base: '{colors.indigo.800}',
757
790
  _light: '{colors.indigo.800}',
758
791
  _dark: '{colors.indigo.300}',
759
- _enterprise: '{colors.emerald.800}'
792
+ _enterprise: '{colors.indigo.700}'
760
793
  }
761
794
  },
762
795
  link: {
@@ -765,7 +798,7 @@ export const colors = defineSemanticTokens.colors({
765
798
  base: '{colors.indigo.700}',
766
799
  _light: '{colors.indigo.700}',
767
800
  _dark: '{colors.indigo.400}',
768
- _enterprise: '{colors.emerald.700}'
801
+ _enterprise: '#165082' // Doesn't have raw token
769
802
  }
770
803
  },
771
804
  pressed: {
@@ -773,11 +806,12 @@ export const colors = defineSemanticTokens.colors({
773
806
  base: '{colors.indigo.800}',
774
807
  _light: '{colors.indigo.800}',
775
808
  _dark: '{colors.indigo.300}',
776
- _enterprise: '{colors.emerald.800}'
809
+ _enterprise: '#0D4372' // Doesn't have raw token
777
810
  }
778
811
  }
779
812
  }
780
813
  },
814
+ // ICON SEMANTIC TOKENS
781
815
  icon: {
782
816
  default: {
783
817
  value: {
@@ -801,7 +835,7 @@ export const colors = defineSemanticTokens.colors({
801
835
  base: '{colors.white}',
802
836
  _light: '{colors.white}',
803
837
  _dark: '{colors.dark.100}',
804
- _enterprise: '{colors.white}'
838
+ _enterprise: '{colors.emerald.100}'
805
839
  }
806
840
  },
807
841
  static: {
@@ -860,7 +894,7 @@ export const colors = defineSemanticTokens.colors({
860
894
  base: '{colors.green.700}',
861
895
  _light: '{colors.green.700}',
862
896
  _dark: '{colors.green.400}',
863
- _enterprise: '{colors.green.700}'
897
+ _enterprise: '{colors.emerald.600}'
864
898
  }
865
899
  },
866
900
  highlight: {
@@ -868,7 +902,7 @@ export const colors = defineSemanticTokens.colors({
868
902
  base: '{colors.violet.700}',
869
903
  _light: '{colors.violet.700}',
870
904
  _dark: '{colors.violet.400}',
871
- _enterprise: '{colors.violet.700}'
905
+ _enterprise: '{colors.orange.700}'
872
906
  }
873
907
  },
874
908
  information: {
@@ -876,7 +910,7 @@ export const colors = defineSemanticTokens.colors({
876
910
  base: '{colors.indigo.700}',
877
911
  _light: '{colors.indigo.700}',
878
912
  _dark: '{colors.indigo.400}',
879
- _enterprise: '{colors.emerald.700}'
913
+ _enterprise: '{colors.indigo.600}'
880
914
  }
881
915
  },
882
916
  subtle: {
@@ -889,28 +923,31 @@ export const colors = defineSemanticTokens.colors({
889
923
  },
890
924
  logo: {
891
925
  value: {
892
- base: '{colors.neutral.1000}',
893
- _light: '{colors.neutral.1000}',
894
- _dark: '{colors.neutral.100}',
895
- _enterprise: '{colors.slate.1000}'
926
+ base: '#000000', // Doesn't have raw token
927
+ _light: '#000000', // Doesn't have raw token
928
+ _dark: '{colors.white}',
929
+ _enterprise: '#000000' // Doesn't have raw token
896
930
  }
897
931
  }
898
932
  },
933
+ // BORDER SEMANTIC TOKENS
899
934
  border: {
900
935
  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}'
936
+ DEFAULT: {
937
+ value: {
938
+ base: '{colors.neutral.300}',
939
+ _light: '{colors.neutral.300}',
940
+ _dark: '{colors.dark.300}',
941
+ _enterprise: '{colors.slate.300}'
942
+ }
943
+ },
944
+ subtle: {
945
+ value: {
946
+ base: '{colors.neutral.200}',
947
+ _light: '{colors.neutral.200}',
948
+ _dark: '{colors.dark.200}',
949
+ _enterprise: '{colors.slate.200}'
950
+ }
914
951
  }
915
952
  },
916
953
  bold: {
@@ -918,7 +955,7 @@ export const colors = defineSemanticTokens.colors({
918
955
  base: '{colors.neutral.600}',
919
956
  _light: '{colors.neutral.600}',
920
957
  _dark: '{colors.dark.600}',
921
- _enterprise: '{colors.slate.600}'
958
+ _enterprise: '{colors.slate.400}'
922
959
  }
923
960
  },
924
961
  disabled: {
@@ -984,7 +1021,7 @@ export const colors = defineSemanticTokens.colors({
984
1021
  base: '{colors.indigo.700}',
985
1022
  _light: '{colors.indigo.700}',
986
1023
  _dark: '{colors.indigo.400}',
987
- _enterprise: '{colors.emerald.700}'
1024
+ _enterprise: '{colors.emerald.800}'
988
1025
  }
989
1026
  },
990
1027
  danger: {
@@ -992,7 +1029,7 @@ export const colors = defineSemanticTokens.colors({
992
1029
  base: '{colors.red.700}',
993
1030
  _light: '{colors.red.700}',
994
1031
  _dark: '{colors.red.400}',
995
- _enterprise: '{colors.red.700}'
1032
+ _enterprise: '{colors.red.600}'
996
1033
  }
997
1034
  },
998
1035
  warning: {
@@ -1008,7 +1045,7 @@ export const colors = defineSemanticTokens.colors({
1008
1045
  base: '{colors.green.700}',
1009
1046
  _light: '{colors.green.700}',
1010
1047
  _dark: '{colors.green.400}',
1011
- _enterprise: '{colors.green.700}'
1048
+ _enterprise: '{colors.emerald.700}'
1012
1049
  }
1013
1050
  },
1014
1051
  highlight: {
@@ -1016,7 +1053,7 @@ export const colors = defineSemanticTokens.colors({
1016
1053
  base: '{colors.violet.700}',
1017
1054
  _light: '{colors.violet.700}',
1018
1055
  _dark: '{colors.violet.400}',
1019
- _enterprise: '{colors.violet.700}'
1056
+ _enterprise: '{colors.orange.700}'
1020
1057
  }
1021
1058
  },
1022
1059
  information: {
@@ -1024,10 +1061,11 @@ export const colors = defineSemanticTokens.colors({
1024
1061
  base: '{colors.indigo.700}',
1025
1062
  _light: '{colors.indigo.700}',
1026
1063
  _dark: '{colors.indigo.400}',
1027
- _enterprise: '{colors.emerald.700}'
1064
+ _enterprise: '{colors.indigo.600}'
1028
1065
  }
1029
1066
  }
1030
1067
  },
1068
+ // CHART SEMANTIC TOKENS
1031
1069
  chart: {
1032
1070
  cat01: {
1033
1071
  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' },