@mekari/pixel3-theme 0.4.4 → 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 (29) hide show
  1. package/dist/conditions.d.mts +2 -0
  2. package/dist/conditions.d.ts +2 -0
  3. package/dist/index.js +576 -179
  4. package/dist/index.mjs +576 -179
  5. package/dist/semanticTokens/colors.d.mts +321 -12
  6. package/dist/semanticTokens/colors.d.ts +321 -12
  7. package/dist/semanticTokens/index.d.mts +321 -12
  8. package/dist/semanticTokens/index.d.ts +321 -12
  9. package/dist/tokens/colors.d.mts +3 -0
  10. package/dist/tokens/colors.d.ts +3 -0
  11. package/dist/tokens/index.d.mts +7 -0
  12. package/dist/tokens/index.d.ts +7 -0
  13. package/dist/tokens/spacing.d.mts +4 -0
  14. package/dist/tokens/spacing.d.ts +4 -0
  15. package/dist/tokens-next/colors.d.mts +118 -0
  16. package/dist/tokens-next/colors.d.ts +118 -0
  17. package/dist/tokens-next/index.d.mts +118 -0
  18. package/dist/tokens-next/index.d.ts +118 -0
  19. package/package.json +1 -1
  20. package/src/conditions.ts +3 -1
  21. package/src/recipes/avatar.ts +6 -2
  22. package/src/recipes/badge.ts +3 -3
  23. package/src/recipes/banner.ts +1 -1
  24. package/src/recipes/button.ts +29 -12
  25. package/src/recipes/modal.ts +16 -1
  26. package/src/semanticTokens/colors.ts +457 -142
  27. package/src/tokens/colors.ts +1 -0
  28. package/src/tokens/spacing.ts +1 -0
  29. package/src/tokens-next/colors.ts +45 -3
package/dist/tokens/colors.d.mts CHANGED
@@ -5,6 +5,9 @@ declare const colors: {
5
5
  currentcolor: {
6
6
  value: string;
7
7
  };
8
+ transparent: {
9
+ value: string;
10
+ };
8
11
  dark: {
9
12
  value: string;
10
13
  };
package/dist/tokens/colors.d.ts CHANGED
@@ -5,6 +5,9 @@ declare const colors: {
5
5
  currentcolor: {
6
6
  value: string;
7
7
  };
8
+ transparent: {
9
+ value: string;
10
+ };
8
11
  dark: {
9
12
  value: string;
10
13
  };
package/dist/tokens/index.d.mts CHANGED
@@ -20,6 +20,9 @@ declare const tokens: {
20
20
  currentcolor: {
21
21
  value: string;
22
22
  };
23
+ transparent: {
24
+ value: string;
25
+ };
23
26
  dark: {
24
27
  value: string;
25
28
  };
@@ -590,6 +593,10 @@ declare const tokens: {
590
593
  value: string;
591
594
  description: string;
592
595
  };
596
+ 2.5: {
597
+ value: string;
598
+ description: string;
599
+ };
593
600
  3: {
594
601
  value: string;
595
602
  description: string;
package/dist/tokens/index.d.ts CHANGED
@@ -20,6 +20,9 @@ declare const tokens: {
20
20
  currentcolor: {
21
21
  value: string;
22
22
  };
23
+ transparent: {
24
+ value: string;
25
+ };
23
26
  dark: {
24
27
  value: string;
25
28
  };
@@ -590,6 +593,10 @@ declare const tokens: {
590
593
  value: string;
591
594
  description: string;
592
595
  };
596
+ 2.5: {
597
+ value: string;
598
+ description: string;
599
+ };
593
600
  3: {
594
601
  value: string;
595
602
  description: string;
package/dist/tokens/spacing.d.mts CHANGED
@@ -18,6 +18,10 @@ declare const spacing: {
18
18
  value: string;
19
19
  description: string;
20
20
  };
21
+ 2.5: {
22
+ value: string;
23
+ description: string;
24
+ };
21
25
  3: {
22
26
  value: string;
23
27
  description: string;
package/dist/tokens/spacing.d.ts CHANGED
@@ -18,6 +18,10 @@ declare const spacing: {
18
18
  value: string;
19
19
  description: string;
20
20
  };
21
+ 2.5: {
22
+ value: string;
23
+ description: string;
24
+ };
21
25
  3: {
22
26
  value: string;
23
27
  description: string;
package/dist/tokens-next/colors.d.mts CHANGED
@@ -5,6 +5,9 @@ declare const colors: {
5
5
  currentcolor: {
6
6
  value: string;
7
7
  };
8
+ transparent: {
9
+ value: string;
10
+ };
8
11
  white: {
9
12
  value: string;
10
13
  };
@@ -57,6 +60,27 @@ declare const colors: {
57
60
  1000: {
58
61
  value: string;
59
62
  };
63
+ '100a': {
64
+ value: string;
65
+ };
66
+ '200a': {
67
+ value: string;
68
+ };
69
+ '250a': {
70
+ value: string;
71
+ };
72
+ '300a': {
73
+ value: string;
74
+ };
75
+ '350a': {
76
+ value: string;
77
+ };
78
+ '400a': {
79
+ value: string;
80
+ };
81
+ '500a': {
82
+ value: string;
83
+ };
60
84
  };
61
85
  neutral: {
62
86
  100: {
@@ -89,6 +113,68 @@ declare const colors: {
89
113
  1000: {
90
114
  value: string;
91
115
  };
116
+ '100a': {
117
+ value: string;
118
+ };
119
+ '200a': {
120
+ value: string;
121
+ };
122
+ '300a': {
123
+ value: string;
124
+ };
125
+ '400a': {
126
+ value: string;
127
+ };
128
+ '500a': {
129
+ value: string;
130
+ };
131
+ };
132
+ slate: {
133
+ 100: {
134
+ value: string;
135
+ };
136
+ 200: {
137
+ value: string;
138
+ };
139
+ 300: {
140
+ value: string;
141
+ };
142
+ 400: {
143
+ value: string;
144
+ };
145
+ 500: {
146
+ value: string;
147
+ };
148
+ 600: {
149
+ value: string;
150
+ };
151
+ 700: {
152
+ value: string;
153
+ };
154
+ 800: {
155
+ value: string;
156
+ };
157
+ 900: {
158
+ value: string;
159
+ };
160
+ 1000: {
161
+ value: string;
162
+ };
163
+ '100a': {
164
+ value: string;
165
+ };
166
+ '200a': {
167
+ value: string;
168
+ };
169
+ '300a': {
170
+ value: string;
171
+ };
172
+ '400a': {
173
+ value: string;
174
+ };
175
+ '500a': {
176
+ value: string;
177
+ };
92
178
  };
93
179
  blue: {
94
180
  100: {
@@ -410,6 +496,38 @@ declare const colors: {
410
496
  value: string;
411
497
  };
412
498
  };
499
+ emerald: {
500
+ 100: {
501
+ value: string;
502
+ };
503
+ 200: {
504
+ value: string;
505
+ };
506
+ 300: {
507
+ value: string;
508
+ };
509
+ 400: {
510
+ value: string;
511
+ };
512
+ 500: {
513
+ value: string;
514
+ };
515
+ 600: {
516
+ value: string;
517
+ };
518
+ 700: {
519
+ value: string;
520
+ };
521
+ 800: {
522
+ value: string;
523
+ };
524
+ 900: {
525
+ value: string;
526
+ };
527
+ 1000: {
528
+ value: string;
529
+ };
530
+ };
413
531
  brand: {
414
532
  capital: {
415
533
  value: string;
package/dist/tokens-next/colors.d.ts CHANGED
@@ -5,6 +5,9 @@ declare const colors: {
5
5
  currentcolor: {
6
6
  value: string;
7
7
  };
8
+ transparent: {
9
+ value: string;
10
+ };
8
11
  white: {
9
12
  value: string;
10
13
  };
@@ -57,6 +60,27 @@ declare const colors: {
57
60
  1000: {
58
61
  value: string;
59
62
  };
63
+ '100a': {
64
+ value: string;
65
+ };
66
+ '200a': {
67
+ value: string;
68
+ };
69
+ '250a': {
70
+ value: string;
71
+ };
72
+ '300a': {
73
+ value: string;
74
+ };
75
+ '350a': {
76
+ value: string;
77
+ };
78
+ '400a': {
79
+ value: string;
80
+ };
81
+ '500a': {
82
+ value: string;
83
+ };
60
84
  };
61
85
  neutral: {
62
86
  100: {
@@ -89,6 +113,68 @@ declare const colors: {
89
113
  1000: {
90
114
  value: string;
91
115
  };
116
+ '100a': {
117
+ value: string;
118
+ };
119
+ '200a': {
120
+ value: string;
121
+ };
122
+ '300a': {
123
+ value: string;
124
+ };
125
+ '400a': {
126
+ value: string;
127
+ };
128
+ '500a': {
129
+ value: string;
130
+ };
131
+ };
132
+ slate: {
133
+ 100: {
134
+ value: string;
135
+ };
136
+ 200: {
137
+ value: string;
138
+ };
139
+ 300: {
140
+ value: string;
141
+ };
142
+ 400: {
143
+ value: string;
144
+ };
145
+ 500: {
146
+ value: string;
147
+ };
148
+ 600: {
149
+ value: string;
150
+ };
151
+ 700: {
152
+ value: string;
153
+ };
154
+ 800: {
155
+ value: string;
156
+ };
157
+ 900: {
158
+ value: string;
159
+ };
160
+ 1000: {
161
+ value: string;
162
+ };
163
+ '100a': {
164
+ value: string;
165
+ };
166
+ '200a': {
167
+ value: string;
168
+ };
169
+ '300a': {
170
+ value: string;
171
+ };
172
+ '400a': {
173
+ value: string;
174
+ };
175
+ '500a': {
176
+ value: string;
177
+ };
92
178
  };
93
179
  blue: {
94
180
  100: {
@@ -410,6 +496,38 @@ declare const colors: {
410
496
  value: string;
411
497
  };
412
498
  };
499
+ emerald: {
500
+ 100: {
501
+ value: string;
502
+ };
503
+ 200: {
504
+ value: string;
505
+ };
506
+ 300: {
507
+ value: string;
508
+ };
509
+ 400: {
510
+ value: string;
511
+ };
512
+ 500: {
513
+ value: string;
514
+ };
515
+ 600: {
516
+ value: string;
517
+ };
518
+ 700: {
519
+ value: string;
520
+ };
521
+ 800: {
522
+ value: string;
523
+ };
524
+ 900: {
525
+ value: string;
526
+ };
527
+ 1000: {
528
+ value: string;
529
+ };
530
+ };
413
531
  brand: {
414
532
  capital: {
415
533
  value: string;
package/dist/tokens-next/index.d.mts CHANGED
@@ -26,6 +26,9 @@ declare const tokensNext: {
26
26
  currentcolor: {
27
27
  value: string;
28
28
  };
29
+ transparent: {
30
+ value: string;
31
+ };
29
32
  white: {
30
33
  value: string;
31
34
  };
@@ -78,6 +81,27 @@ declare const tokensNext: {
78
81
  1000: {
79
82
  value: string;
80
83
  };
84
+ '100a': {
85
+ value: string;
86
+ };
87
+ '200a': {
88
+ value: string;
89
+ };
90
+ '250a': {
91
+ value: string;
92
+ };
93
+ '300a': {
94
+ value: string;
95
+ };
96
+ '350a': {
97
+ value: string;
98
+ };
99
+ '400a': {
100
+ value: string;
101
+ };
102
+ '500a': {
103
+ value: string;
104
+ };
81
105
  };
82
106
  neutral: {
83
107
  100: {
@@ -110,6 +134,68 @@ declare const tokensNext: {
110
134
  1000: {
111
135
  value: string;
112
136
  };
137
+ '100a': {
138
+ value: string;
139
+ };
140
+ '200a': {
141
+ value: string;
142
+ };
143
+ '300a': {
144
+ value: string;
145
+ };
146
+ '400a': {
147
+ value: string;
148
+ };
149
+ '500a': {
150
+ value: string;
151
+ };
152
+ };
153
+ slate: {
154
+ 100: {
155
+ value: string;
156
+ };
157
+ 200: {
158
+ value: string;
159
+ };
160
+ 300: {
161
+ value: string;
162
+ };
163
+ 400: {
164
+ value: string;
165
+ };
166
+ 500: {
167
+ value: string;
168
+ };
169
+ 600: {
170
+ value: string;
171
+ };
172
+ 700: {
173
+ value: string;
174
+ };
175
+ 800: {
176
+ value: string;
177
+ };
178
+ 900: {
179
+ value: string;
180
+ };
181
+ 1000: {
182
+ value: string;
183
+ };
184
+ '100a': {
185
+ value: string;
186
+ };
187
+ '200a': {
188
+ value: string;
189
+ };
190
+ '300a': {
191
+ value: string;
192
+ };
193
+ '400a': {
194
+ value: string;
195
+ };
196
+ '500a': {
197
+ value: string;
198
+ };
113
199
  };
114
200
  blue: {
115
201
  100: {
@@ -431,6 +517,38 @@ declare const tokensNext: {
431
517
  value: string;
432
518
  };
433
519
  };
520
+ emerald: {
521
+ 100: {
522
+ value: string;
523
+ };
524
+ 200: {
525
+ value: string;
526
+ };
527
+ 300: {
528
+ value: string;
529
+ };
530
+ 400: {
531
+ value: string;
532
+ };
533
+ 500: {
534
+ value: string;
535
+ };
536
+ 600: {
537
+ value: string;
538
+ };
539
+ 700: {
540
+ value: string;
541
+ };
542
+ 800: {
543
+ value: string;
544
+ };
545
+ 900: {
546
+ value: string;
547
+ };
548
+ 1000: {
549
+ value: string;
550
+ };
551
+ };
434
552
  brand: {
435
553
  capital: {
436
554
  value: string;
package/dist/tokens-next/index.d.ts CHANGED
@@ -26,6 +26,9 @@ declare const tokensNext: {
26
26
  currentcolor: {
27
27
  value: string;
28
28
  };
29
+ transparent: {
30
+ value: string;
31
+ };
29
32
  white: {
30
33
  value: string;
31
34
  };
@@ -78,6 +81,27 @@ declare const tokensNext: {
78
81
  1000: {
79
82
  value: string;
80
83
  };
84
+ '100a': {
85
+ value: string;
86
+ };
87
+ '200a': {
88
+ value: string;
89
+ };
90
+ '250a': {
91
+ value: string;
92
+ };
93
+ '300a': {
94
+ value: string;
95
+ };
96
+ '350a': {
97
+ value: string;
98
+ };
99
+ '400a': {
100
+ value: string;
101
+ };
102
+ '500a': {
103
+ value: string;
104
+ };
81
105
  };
82
106
  neutral: {
83
107
  100: {
@@ -110,6 +134,68 @@ declare const tokensNext: {
110
134
  1000: {
111
135
  value: string;
112
136
  };
137
+ '100a': {
138
+ value: string;
139
+ };
140
+ '200a': {
141
+ value: string;
142
+ };
143
+ '300a': {
144
+ value: string;
145
+ };
146
+ '400a': {
147
+ value: string;
148
+ };
149
+ '500a': {
150
+ value: string;
151
+ };
152
+ };
153
+ slate: {
154
+ 100: {
155
+ value: string;
156
+ };
157
+ 200: {
158
+ value: string;
159
+ };
160
+ 300: {
161
+ value: string;
162
+ };
163
+ 400: {
164
+ value: string;
165
+ };
166
+ 500: {
167
+ value: string;
168
+ };
169
+ 600: {
170
+ value: string;
171
+ };
172
+ 700: {
173
+ value: string;
174
+ };
175
+ 800: {
176
+ value: string;
177
+ };
178
+ 900: {
179
+ value: string;
180
+ };
181
+ 1000: {
182
+ value: string;
183
+ };
184
+ '100a': {
185
+ value: string;
186
+ };
187
+ '200a': {
188
+ value: string;
189
+ };
190
+ '300a': {
191
+ value: string;
192
+ };
193
+ '400a': {
194
+ value: string;
195
+ };
196
+ '500a': {
197
+ value: string;
198
+ };
113
199
  };
114
200
  blue: {
115
201
  100: {
@@ -431,6 +517,38 @@ declare const tokensNext: {
431
517
  value: string;
432
518
  };
433
519
  };
520
+ emerald: {
521
+ 100: {
522
+ value: string;
523
+ };
524
+ 200: {
525
+ value: string;
526
+ };
527
+ 300: {
528
+ value: string;
529
+ };
530
+ 400: {
531
+ value: string;
532
+ };
533
+ 500: {
534
+ value: string;
535
+ };
536
+ 600: {
537
+ value: string;
538
+ };
539
+ 700: {
540
+ value: string;
541
+ };
542
+ 800: {
543
+ value: string;
544
+ };
545
+ 900: {
546
+ value: string;
547
+ };
548
+ 1000: {
549
+ value: string;
550
+ };
551
+ };
434
552
  brand: {
435
553
  capital: {
436
554
  value: string;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mekari/pixel3-theme",
3
3
  "description": "Theme for mekari pixel 3",
4
- "version": "0.4.4",
4
+ "version": "0.5.0-dev.1",
5
5
  "main": "dist/index.js",
6
6
  "license": "MIT",
7
7
  "files": [
package/src/conditions.ts CHANGED
@@ -17,10 +17,12 @@ export const conditions = {
17
17
  hasBorder: '&[data-has-border=true]',
18
18
  hasBackground: '&[data-has-background=true]',
19
19
  isFullWidth: '&[data-is-full-width=true]',
20
+ isRounded: '&[data-is-rounded=true]',
20
21
  placementLeft: '&[data-placement=left]',
21
22
  placementRight: '&[data-placement=right]',
22
23
  nextTheme: '[data-panda-theme=next] &',
23
24
  light: '.light &',
24
- dark: '.dark &'
25
+ dark: '.dark &',
26
+ enterprise: '[data-product-theme=enterprise] &'
25
27
  }
26
28
  }
package/src/recipes/avatar.ts CHANGED
@@ -186,7 +186,9 @@ const avatarSlotRecipe = defineSlotRecipe({
186
186
  defaultVariants: {
187
187
  size: 'md',
188
188
  variant: 'circle'
189
- }
189
+ },
190
+ // TODO: Check why this recipe need to generate statically
191
+ staticCss: ['*']
190
192
  })
191
193
 
192
194
  const avatarGroupSlotRecipe = defineSlotRecipe({
@@ -261,7 +263,9 @@ const avatarGroupSlotRecipe = defineSlotRecipe({
261
263
  }
262
264
  },
263
265
  compoundVariants: [],
264
- defaultVariants: {}
266
+ defaultVariants: {},
267
+ // TODO: Check why this recipe need to generate statically
268
+ staticCss: ['*']
265
269
  })
266
270
 
267
271
  export { avatarSlotRecipe, avatarGroupSlotRecipe }