@pandacss/studio 0.3.2 → 0.4.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.
- package/package.json +8 -8
- package/styled-system/chunks/..__core____tests____atomic-rule.test.css +363 -0
- package/styled-system/css/css.mjs +8 -0
- package/styled-system/global.css +1 -1
- package/styled-system/jsx/is-valid-prop.mjs +18 -2
- package/styled-system/patterns/aspect-ratio.mjs +18 -8
- package/styled-system/patterns/divider.mjs +1 -1
- package/styled-system/styles.css +261 -0
- package/styled-system/tokens/index.css +3 -0
- package/styled-system/tokens/index.mjs +12 -0
- package/styled-system/tokens/tokens.d.ts +6 -3
- package/styled-system/types/prop-type.d.ts +25 -25
- package/styled-system/types/selectors.d.ts +3 -1
- package/styled-system/types/style-props.d.ts +8 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pandacss/studio",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "The automated token documentation for Panda CSS",
|
|
5
5
|
"main": "dist/studio.js",
|
|
6
6
|
"module": "dist/studio.mjs",
|
|
@@ -32,19 +32,19 @@
|
|
|
32
32
|
"react": "18.2.0",
|
|
33
33
|
"react-dom": "18.2.0",
|
|
34
34
|
"vite": "4.3.9",
|
|
35
|
-
"@pandacss/types": "0.
|
|
36
|
-
"@pandacss/config": "0.
|
|
37
|
-
"@pandacss/shared": "0.
|
|
38
|
-
"@pandacss/token-dictionary": "0.
|
|
39
|
-
"@pandacss/logger": "0.
|
|
40
|
-
"@pandacss/node": "0.
|
|
35
|
+
"@pandacss/types": "0.4.0",
|
|
36
|
+
"@pandacss/config": "0.4.0",
|
|
37
|
+
"@pandacss/shared": "0.4.0",
|
|
38
|
+
"@pandacss/token-dictionary": "0.4.0",
|
|
39
|
+
"@pandacss/logger": "0.4.0",
|
|
40
|
+
"@pandacss/node": "0.4.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@types/react": "18.2.12",
|
|
44
44
|
"@types/react-dom": "18.2.5",
|
|
45
45
|
"@vitejs/plugin-react": "4.0.0",
|
|
46
46
|
"execa": "7.1.1",
|
|
47
|
-
"@pandacss/dev": "0.
|
|
47
|
+
"@pandacss/dev": "0.4.0"
|
|
48
48
|
},
|
|
49
49
|
"scripts": {
|
|
50
50
|
"codegen": "panda",
|
|
@@ -0,0 +1,363 @@
|
|
|
1
|
+
@layer utilities {
|
|
2
|
+
.styles\:text_red\! {
|
|
3
|
+
color: red !important;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.styles\:fs_30px\! {
|
|
7
|
+
font-size: 30px !important;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.styles\:bg_red\.300 {
|
|
11
|
+
background: var(--colors-red-300);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.styles\:w_20px {
|
|
15
|
+
width: 20px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.styles\:w_70px {
|
|
19
|
+
width: 70px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.styles\:w_50px {
|
|
23
|
+
width: 50px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.styles\:ltr\:sm\:ml_4 {
|
|
27
|
+
[dir='ltr'] & {
|
|
28
|
+
@media screen and (min-width: 640px) {
|
|
29
|
+
margin-left: var(--spacing-4);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.styles\:rtl\:ml_-4 {
|
|
35
|
+
[dir='rtl'] & {
|
|
36
|
+
margin-left: calc(var(--spacing-4) * -1);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.styles\:light\:text_red {
|
|
41
|
+
&.light,
|
|
42
|
+
.light & {
|
|
43
|
+
color: red;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.styles\:dark\:text_green {
|
|
48
|
+
&.dark,
|
|
49
|
+
.dark & {
|
|
50
|
+
color: green;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.styles\:dark\:opacity_slate400 {
|
|
55
|
+
&.dark,
|
|
56
|
+
.dark & {
|
|
57
|
+
opacity: slate400;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.styles\:sm\:rtl\:top_20px {
|
|
62
|
+
[dir='rtl'] & {
|
|
63
|
+
@media screen and (min-width: 640px) {
|
|
64
|
+
top: 20px;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.styles\:left_20px {
|
|
70
|
+
left: 20px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.styles\:\[\&_\>_p\]\:left_20px {
|
|
74
|
+
& > p {
|
|
75
|
+
left: 20px;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.styles\:\[\&_\>_p\]\:md\:left_40px {
|
|
80
|
+
& > p {
|
|
81
|
+
@media screen and (min-width: 768px) {
|
|
82
|
+
left: 40px;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.styles\:\[\&_\>_p\]\:light\:bg_red400 {
|
|
88
|
+
& > p {
|
|
89
|
+
&.light,
|
|
90
|
+
.light & {
|
|
91
|
+
background: red400;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.styles\:\[\&_\>_p\]\:dark\:bg_green500 {
|
|
97
|
+
& > p {
|
|
98
|
+
&.dark,
|
|
99
|
+
.dark & {
|
|
100
|
+
background: green500;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.styles\:\[\&_\>_p\]\:rtl\:font_sans {
|
|
106
|
+
& > p {
|
|
107
|
+
[dir='rtl'] & {
|
|
108
|
+
font: sans;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.styles\:\[\&\:\:placeholder\]\:left_40px {
|
|
114
|
+
&::placeholder {
|
|
115
|
+
left: 40px;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.styles\:\[\&\:\:placeholder\]\:bg_red400 {
|
|
120
|
+
&::placeholder {
|
|
121
|
+
background: red400;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.styles\:\[\&\:\:placeholder\]\:sm\:text_left {
|
|
126
|
+
&::placeholder {
|
|
127
|
+
@media screen and (min-width: 640px) {
|
|
128
|
+
text-align: left;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.styles\:all_unset {
|
|
134
|
+
all: unset;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.styles\:bg_red {
|
|
138
|
+
background-color: red;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.styles\:border_none {
|
|
142
|
+
border: var(--borders-none);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.styles\:p_\$3_\$3 {
|
|
146
|
+
padding: $3 $3;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.styles\:rounded_\$button {
|
|
150
|
+
border-radius: $button;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.styles\:fs_\$xsmall {
|
|
154
|
+
font-size: $xsmall;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.styles\:cursor_pointer {
|
|
158
|
+
cursor: pointer;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.styles\:\[\&_\+_span\]\:ml_\$2 {
|
|
162
|
+
& + span {
|
|
163
|
+
margin-left: $2;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.styles\:\[\.test_\&\]\:bg_blue {
|
|
168
|
+
.test & {
|
|
169
|
+
background-color: blue;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.styles\:\[\&_\.my-class\]\:text_red {
|
|
174
|
+
& .my-class {
|
|
175
|
+
color: red;
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.styles\:\[\&_span\]\:text_red {
|
|
180
|
+
& span {
|
|
181
|
+
color: red;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.styles\:\[\&_kbd\]\:text_red {
|
|
186
|
+
& kbd {
|
|
187
|
+
color: red;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.styles\:\[\&\:focus\,_\&\:hover\]\:shadow_none {
|
|
192
|
+
&:focus,
|
|
193
|
+
&:hover {
|
|
194
|
+
box-shadow: none;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.styles\:\[\:focus_\>_\&\]\:text_white {
|
|
199
|
+
:focus > & {
|
|
200
|
+
color: var(--colors-white);
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.styles\:sm\:hover\:top_50px {
|
|
205
|
+
&:where(:hover, [data-hover]) {
|
|
206
|
+
@media screen and (min-width: 640px) {
|
|
207
|
+
top: 50px;
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif {
|
|
213
|
+
& > p {
|
|
214
|
+
&:where(:hover, [data-hover]) {
|
|
215
|
+
[dir='ltr'] & {
|
|
216
|
+
&.dark,
|
|
217
|
+
.dark & {
|
|
218
|
+
@media screen and (min-width: 640px) {
|
|
219
|
+
font: serif;
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.styles\:\[input\:hover_\&\]\:bg_red400 {
|
|
228
|
+
input:hover & {
|
|
229
|
+
background: red400;
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.styles\:\[input\:hover_\&\]\:sm\:fs_14px {
|
|
234
|
+
input:hover & {
|
|
235
|
+
@media screen and (min-width: 640px) {
|
|
236
|
+
font-size: 14px;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.styles\:\[input\:hover_\&\]\:lg\:fs_18px {
|
|
242
|
+
input:hover & {
|
|
243
|
+
@media screen and (min-width: 1024px) {
|
|
244
|
+
font-size: 18px;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.styles\:hover\:bg_pink\.400 {
|
|
250
|
+
&:where(:hover, [data-hover]) {
|
|
251
|
+
background: var(--colors-pink-400);
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.styles\:hover\:sm\:dark\:bg_red\.300 {
|
|
256
|
+
&:where(:hover, [data-hover]) {
|
|
257
|
+
&.dark,
|
|
258
|
+
.dark & {
|
|
259
|
+
@media screen and (min-width: 640px) {
|
|
260
|
+
background: var(--colors-red-300);
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.styles\:hover\:text_pink\.400 {
|
|
267
|
+
&:where(:hover, [data-hover]) {
|
|
268
|
+
color: var(--colors-pink-400);
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.styles\:hover\:disabled\:sm\:bg_red\.300 {
|
|
273
|
+
&:where(:hover, [data-hover]) {
|
|
274
|
+
&:where(:disabled, [disabled], [data-disabled]) {
|
|
275
|
+
@media screen and (min-width: 640px) {
|
|
276
|
+
background: var(--colors-red-300);
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.styles\:\[\@media_base\]\:\[\&\:hover\]\:left_40px {
|
|
283
|
+
&:hover {
|
|
284
|
+
@media base {
|
|
285
|
+
left: 40px;
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.styles\:\[\@media_base\]\:\[\&\:hover\]\:sm\:text_left {
|
|
291
|
+
&:hover {
|
|
292
|
+
@media base {
|
|
293
|
+
@media screen and (min-width: 640px) {
|
|
294
|
+
text-align: left;
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.styles\:\[\@media_\(min-width\:_768px\)\]\:\[\&\:hover\]\:bg_yellow {
|
|
301
|
+
&:hover {
|
|
302
|
+
@media (min-width: 768px) {
|
|
303
|
+
background-color: yellow;
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.styles\:sm\:w_60px {
|
|
309
|
+
@media screen and (min-width: 640px) {
|
|
310
|
+
width: 60px;
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.styles\:sm\:w_60px {
|
|
315
|
+
@media screen and (min-width: 640px) {
|
|
316
|
+
width: 60px;
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.styles\:lg\:top_120px {
|
|
321
|
+
@media screen and (min-width: 1024px) {
|
|
322
|
+
top: 120px;
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.styles\:md\:left_40px {
|
|
327
|
+
@media screen and (min-width: 768px) {
|
|
328
|
+
left: 40px;
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.styles\:\[\@media_base\]\:left_40px {
|
|
333
|
+
@media base {
|
|
334
|
+
left: 40px;
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.styles\:\[\@media_base\]\:sm\:text_left {
|
|
339
|
+
@media base {
|
|
340
|
+
@media screen and (min-width: 640px) {
|
|
341
|
+
text-align: left;
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.styles\:\[\@media_\(min-width\:_768px\)\]\:bg_green {
|
|
347
|
+
@media (min-width: 768px) {
|
|
348
|
+
background-color: green;
|
|
349
|
+
}
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.styles\:\[\@media_\(min-width\:_768px\)\]\:bg_green {
|
|
353
|
+
@media (min-width: 768px) {
|
|
354
|
+
background-color: green;
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.styles\:\[\@media_\(min-width\:_768px\)\]\:fs_\$small {
|
|
359
|
+
@media (min-width: 768px) {
|
|
360
|
+
font-size: $small;
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
}
|
|
@@ -265,6 +265,14 @@ const classNameMap = {
|
|
|
265
265
|
stroke: 'stroke',
|
|
266
266
|
srOnly: 'sr',
|
|
267
267
|
debug: 'debug',
|
|
268
|
+
appearance: 'appearance',
|
|
269
|
+
backfaceVisibility: 'backface',
|
|
270
|
+
clipPath: 'clip-path',
|
|
271
|
+
hyphens: 'hyphens',
|
|
272
|
+
mask: 'mask',
|
|
273
|
+
maskImage: 'mask-image',
|
|
274
|
+
maskSize: 'mask-size',
|
|
275
|
+
textSizeAdjust: 'text-size-adjust',
|
|
268
276
|
textStyle: 'textStyle',
|
|
269
277
|
}
|
|
270
278
|
|
package/styled-system/global.css
CHANGED
|
@@ -348,6 +348,14 @@ var userGenerated = [
|
|
|
348
348
|
'stroke',
|
|
349
349
|
'srOnly',
|
|
350
350
|
'debug',
|
|
351
|
+
'appearance',
|
|
352
|
+
'backfaceVisibility',
|
|
353
|
+
'clipPath',
|
|
354
|
+
'hyphens',
|
|
355
|
+
'mask',
|
|
356
|
+
'maskImage',
|
|
357
|
+
'maskSize',
|
|
358
|
+
'textSizeAdjust',
|
|
351
359
|
'colorPalette',
|
|
352
360
|
'textStyle',
|
|
353
361
|
'_hover',
|
|
@@ -682,7 +690,6 @@ var allCssProperties = [
|
|
|
682
690
|
'clip',
|
|
683
691
|
'clipPath',
|
|
684
692
|
'color',
|
|
685
|
-
'printColorAdjust',
|
|
686
693
|
'colorScheme',
|
|
687
694
|
'columnCount',
|
|
688
695
|
'columnFill',
|
|
@@ -700,6 +707,9 @@ var allCssProperties = [
|
|
|
700
707
|
'containIntrinsicHeight',
|
|
701
708
|
'containIntrinsicInlineSize',
|
|
702
709
|
'containIntrinsicWidth',
|
|
710
|
+
'container',
|
|
711
|
+
'containerName',
|
|
712
|
+
'containerType',
|
|
703
713
|
'content',
|
|
704
714
|
'contentVisibility',
|
|
705
715
|
'counterIncrement',
|
|
@@ -724,6 +734,7 @@ var allCssProperties = [
|
|
|
724
734
|
'fontKerning',
|
|
725
735
|
'fontLanguageOverride',
|
|
726
736
|
'fontOpticalSizing',
|
|
737
|
+
'fontPalette',
|
|
727
738
|
'fontVariationSettings',
|
|
728
739
|
'fontSize',
|
|
729
740
|
'fontSizeAdjust',
|
|
@@ -735,6 +746,7 @@ var allCssProperties = [
|
|
|
735
746
|
'fontVariantAlternates',
|
|
736
747
|
'fontVariantCaps',
|
|
737
748
|
'fontVariantEastAsian',
|
|
749
|
+
'fontVariantEmoji',
|
|
738
750
|
'fontVariantLigatures',
|
|
739
751
|
'fontVariantNumeric',
|
|
740
752
|
'fontVariantPosition',
|
|
@@ -878,6 +890,7 @@ var allCssProperties = [
|
|
|
878
890
|
'paddingLeft',
|
|
879
891
|
'paddingRight',
|
|
880
892
|
'paddingTop',
|
|
893
|
+
'page',
|
|
881
894
|
'pageBreakAfter',
|
|
882
895
|
'pageBreakBefore',
|
|
883
896
|
'pageBreakInside',
|
|
@@ -889,6 +902,7 @@ var allCssProperties = [
|
|
|
889
902
|
'placeSelf',
|
|
890
903
|
'pointerEvents',
|
|
891
904
|
'position',
|
|
905
|
+
'printColorAdjust',
|
|
892
906
|
'quotes',
|
|
893
907
|
'resize',
|
|
894
908
|
'right',
|
|
@@ -980,6 +994,7 @@ var allCssProperties = [
|
|
|
980
994
|
'unicodeBidi',
|
|
981
995
|
'userSelect',
|
|
982
996
|
'verticalAlign',
|
|
997
|
+
'viewTransitionName',
|
|
983
998
|
'visibility',
|
|
984
999
|
'whiteSpace',
|
|
985
1000
|
'widows',
|
|
@@ -1001,7 +1016,8 @@ function memo(fn) {
|
|
|
1001
1016
|
return cache[arg]
|
|
1002
1017
|
}
|
|
1003
1018
|
}
|
|
1019
|
+
var selectorRegex = /&|@/
|
|
1004
1020
|
var isCssProperty = memo((prop) => {
|
|
1005
|
-
return properties.has(prop) || prop.startsWith('--')
|
|
1021
|
+
return properties.has(prop) || prop.startsWith('--') || selectorRegex.test(prop)
|
|
1006
1022
|
})
|
|
1007
1023
|
export { allCssProperties, isCssProperty }
|
|
@@ -2,17 +2,27 @@ import { mapObject } from '../helpers.mjs'
|
|
|
2
2
|
import { css } from '../css/index.mjs'
|
|
3
3
|
|
|
4
4
|
const aspectRatioConfig = {
|
|
5
|
-
transform(props) {
|
|
6
|
-
const { ratio, ...rest } = props
|
|
5
|
+
transform(props, { map }) {
|
|
6
|
+
const { ratio = 4 / 3, ...rest } = props
|
|
7
7
|
return {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
8
|
+
position: 'relative',
|
|
9
|
+
_before: {
|
|
10
|
+
content: `""`,
|
|
11
|
+
display: 'block',
|
|
12
|
+
height: '0',
|
|
13
|
+
paddingBottom: map(ratio, (r) => `${(1 / r) * 100}%`),
|
|
14
|
+
},
|
|
15
|
+
'&>*': {
|
|
16
|
+
display: 'flex',
|
|
17
|
+
justifyContent: 'center',
|
|
18
|
+
alignItems: 'center',
|
|
19
|
+
overflow: 'hidden',
|
|
20
|
+
position: 'absolute',
|
|
21
|
+
inset: '0',
|
|
14
22
|
width: '100%',
|
|
15
23
|
height: '100%',
|
|
24
|
+
},
|
|
25
|
+
'&>img, &>video': {
|
|
16
26
|
objectFit: 'cover',
|
|
17
27
|
},
|
|
18
28
|
...rest,
|
|
@@ -8,7 +8,7 @@ const dividerConfig = {
|
|
|
8
8
|
'--thickness': thickness,
|
|
9
9
|
width: map(orientation, (v) => (v === 'vertical' ? void 0 : '100%')),
|
|
10
10
|
height: map(orientation, (v) => (v === 'horizontal' ? void 0 : '100%')),
|
|
11
|
-
|
|
11
|
+
borderBlockEndWidth: map(orientation, (v) => (v === 'horizontal' ? 'var(--thickness)' : void 0)),
|
|
12
12
|
borderInlineEndWidth: map(orientation, (v) => (v === 'vertical' ? 'var(--thickness)' : void 0)),
|
|
13
13
|
borderColor: color,
|
|
14
14
|
...rest,
|
package/styled-system/styles.css
CHANGED
|
@@ -11,6 +11,118 @@
|
|
|
11
11
|
@import './tokens/keyframes.css';
|
|
12
12
|
|
|
13
13
|
@layer utilities {
|
|
14
|
+
.styles\:text_red\! {
|
|
15
|
+
color: red !important;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.styles\:fs_30px\! {
|
|
19
|
+
font-size: 30px !important;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.styles\:bg_red\.300 {
|
|
23
|
+
background: var(--colors-red-300);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.styles\:w_20px {
|
|
27
|
+
width: 20px;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.styles\:w_70px {
|
|
31
|
+
width: 70px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.styles\:w_50px {
|
|
35
|
+
width: 50px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
[dir='rtl'] .styles\:rtl\:ml_-4 {
|
|
39
|
+
margin-left: calc(var(--spacing-4) * -1);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.styles\:light\:text_red.light,
|
|
43
|
+
.light .styles\:light\:text_red {
|
|
44
|
+
color: red;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.styles\:dark\:text_green.dark,
|
|
48
|
+
.dark .styles\:dark\:text_green {
|
|
49
|
+
color: green;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.styles\:dark\:opacity_slate400.dark,
|
|
53
|
+
.dark .styles\:dark\:opacity_slate400 {
|
|
54
|
+
opacity: slate400;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.styles\:left_20px,
|
|
58
|
+
.styles\:\[\&_\>_p\]\:left_20px > p {
|
|
59
|
+
left: 20px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.styles\:\[\&_\>_p\]\:light\:bg_red400 > p.light,
|
|
63
|
+
.light .styles\:\[\&_\>_p\]\:light\:bg_red400 > p {
|
|
64
|
+
background: red400;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.styles\:\[\&_\>_p\]\:dark\:bg_green500 > p.dark,
|
|
68
|
+
.dark .styles\:\[\&_\>_p\]\:dark\:bg_green500 > p {
|
|
69
|
+
background: green500;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
[dir='rtl'] .styles\:\[\&_\>_p\]\:rtl\:font_sans > p {
|
|
73
|
+
font: sans;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.styles\:\[\&\:\:placeholder\]\:left_40px::placeholder {
|
|
77
|
+
left: 40px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.styles\:\[\&\:\:placeholder\]\:bg_red400::placeholder {
|
|
81
|
+
background: red400;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.styles\:all_unset {
|
|
85
|
+
all: unset;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.styles\:bg_red {
|
|
89
|
+
background-color: red;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.styles\:border_none {
|
|
93
|
+
border: var(--borders-none);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.styles\:p_\$3_\$3 {
|
|
97
|
+
padding: $3 $3;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.styles\:rounded_\$button {
|
|
101
|
+
border-radius: $button;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.styles\:fs_\$xsmall {
|
|
105
|
+
font-size: $xsmall;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.styles\:cursor_pointer {
|
|
109
|
+
cursor: pointer;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.styles\:\[\&_\+_span\]\:ml_\$2 + span {
|
|
113
|
+
margin-left: $2;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.test .styles\:\[\.test_\&\]\:bg_blue {
|
|
117
|
+
background-color: blue;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.styles\:\[\&_\.my-class\]\:text_red .my-class,
|
|
121
|
+
.styles\:\[\&_span\]\:text_red span,
|
|
122
|
+
.styles\:\[\&_kbd\]\:text_red kbd {
|
|
123
|
+
color: red;
|
|
124
|
+
}
|
|
125
|
+
|
|
14
126
|
.w_26px {
|
|
15
127
|
width: 26px;
|
|
16
128
|
}
|
|
@@ -960,6 +1072,15 @@
|
|
|
960
1072
|
outline-color: var(--colors-neutral-400);
|
|
961
1073
|
}
|
|
962
1074
|
|
|
1075
|
+
.styles\:\[\&\:focus\,_\&\:hover\]\:shadow_none:focus,
|
|
1076
|
+
.styles\:\[\&\:focus\,_\&\:hover\]\:shadow_none:hover {
|
|
1077
|
+
box-shadow: none;
|
|
1078
|
+
}
|
|
1079
|
+
|
|
1080
|
+
:focus > .styles\:\[\:focus_\>_\&\]\:text_white {
|
|
1081
|
+
color: var(--colors-white);
|
|
1082
|
+
}
|
|
1083
|
+
|
|
963
1084
|
.hover\:bg_gray\.100:where(:hover, [data-hover]) {
|
|
964
1085
|
background-color: var(--colors-gray-100);
|
|
965
1086
|
}
|
|
@@ -996,6 +1117,18 @@
|
|
|
996
1117
|
border-bottom-color: var(--colors-black);
|
|
997
1118
|
}
|
|
998
1119
|
|
|
1120
|
+
input:hover .styles\:\[input\:hover_\&\]\:bg_red400 {
|
|
1121
|
+
background: red400;
|
|
1122
|
+
}
|
|
1123
|
+
|
|
1124
|
+
.styles\:hover\:bg_pink\.400:where(:hover, [data-hover]) {
|
|
1125
|
+
background: var(--colors-pink-400);
|
|
1126
|
+
}
|
|
1127
|
+
|
|
1128
|
+
.styles\:hover\:text_pink\.400:where(:hover, [data-hover]) {
|
|
1129
|
+
color: var(--colors-pink-400);
|
|
1130
|
+
}
|
|
1131
|
+
|
|
999
1132
|
.\[\&\:hover\]\:bg_\#4049f0:hover {
|
|
1000
1133
|
background: #4049f0;
|
|
1001
1134
|
}
|
|
@@ -1008,15 +1141,143 @@
|
|
|
1008
1141
|
opacity: 0.8;
|
|
1009
1142
|
}
|
|
1010
1143
|
|
|
1144
|
+
@media screen and (min-width: 640px) {
|
|
1145
|
+
[dir='ltr'] .styles\:ltr\:sm\:ml_4 {
|
|
1146
|
+
margin-left: var(--spacing-4);
|
|
1147
|
+
}
|
|
1148
|
+
}
|
|
1149
|
+
|
|
1150
|
+
@media screen and (min-width: 640px) {
|
|
1151
|
+
[dir='rtl'] .styles\:sm\:rtl\:top_20px {
|
|
1152
|
+
top: 20px;
|
|
1153
|
+
}
|
|
1154
|
+
}
|
|
1155
|
+
|
|
1156
|
+
@media screen and (min-width: 640px) {
|
|
1157
|
+
.styles\:\[\&\:\:placeholder\]\:sm\:text_left::placeholder {
|
|
1158
|
+
text-align: left;
|
|
1159
|
+
}
|
|
1160
|
+
}
|
|
1161
|
+
|
|
1162
|
+
@media screen and (min-width: 640px) {
|
|
1163
|
+
.styles\:sm\:hover\:top_50px:where(:hover, [data-hover]) {
|
|
1164
|
+
top: 50px;
|
|
1165
|
+
}
|
|
1166
|
+
}
|
|
1167
|
+
|
|
1168
|
+
@media screen and (min-width: 640px) {
|
|
1169
|
+
[dir='ltr'] .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif > p:where(:hover, [data-hover]).dark,
|
|
1170
|
+
.dark [dir='ltr'] .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif > p:where(:hover, [data-hover]) {
|
|
1171
|
+
font: serif;
|
|
1172
|
+
}
|
|
1173
|
+
}
|
|
1174
|
+
|
|
1175
|
+
@media screen and (min-width: 640px) {
|
|
1176
|
+
input:hover .styles\:\[input\:hover_\&\]\:sm\:fs_14px {
|
|
1177
|
+
font-size: 14px;
|
|
1178
|
+
}
|
|
1179
|
+
}
|
|
1180
|
+
|
|
1181
|
+
@media screen and (min-width: 640px) {
|
|
1182
|
+
.styles\:hover\:sm\:dark\:bg_red\.300:where(:hover, [data-hover]).dark,
|
|
1183
|
+
.dark .styles\:hover\:sm\:dark\:bg_red\.300:where(:hover, [data-hover]) {
|
|
1184
|
+
background: var(--colors-red-300);
|
|
1185
|
+
}
|
|
1186
|
+
}
|
|
1187
|
+
|
|
1188
|
+
@media screen and (min-width: 640px) {
|
|
1189
|
+
.styles\:hover\:disabled\:sm\:bg_red\.300:where(:hover, [data-hover]):where(
|
|
1190
|
+
:disabled,
|
|
1191
|
+
[disabled],
|
|
1192
|
+
[data-disabled]
|
|
1193
|
+
) {
|
|
1194
|
+
background: var(--colors-red-300);
|
|
1195
|
+
}
|
|
1196
|
+
}
|
|
1197
|
+
|
|
1198
|
+
@media screen and (min-width: 640px) {
|
|
1199
|
+
.styles\:sm\:w_60px {
|
|
1200
|
+
width: 60px;
|
|
1201
|
+
}
|
|
1202
|
+
}
|
|
1203
|
+
|
|
1204
|
+
@media (min-width: 768px) {
|
|
1205
|
+
.styles\:\[\@media_\(min-width\:_768px\)\]\:\[\&\:hover\]\:bg_yellow:hover {
|
|
1206
|
+
background-color: yellow;
|
|
1207
|
+
}
|
|
1208
|
+
}
|
|
1209
|
+
|
|
1210
|
+
@media (min-width: 768px) {
|
|
1211
|
+
.styles\:\[\@media_\(min-width\:_768px\)\]\:bg_green {
|
|
1212
|
+
background-color: green;
|
|
1213
|
+
}
|
|
1214
|
+
|
|
1215
|
+
.styles\:\[\@media_\(min-width\:_768px\)\]\:fs_\$small {
|
|
1216
|
+
font-size: $small;
|
|
1217
|
+
}
|
|
1218
|
+
}
|
|
1219
|
+
|
|
1220
|
+
@media screen and (min-width: 768px) {
|
|
1221
|
+
.styles\:\[\&_\>_p\]\:md\:left_40px > p {
|
|
1222
|
+
left: 40px;
|
|
1223
|
+
}
|
|
1224
|
+
}
|
|
1225
|
+
|
|
1226
|
+
@media screen and (min-width: 768px) {
|
|
1227
|
+
.styles\:md\:left_40px {
|
|
1228
|
+
left: 40px;
|
|
1229
|
+
}
|
|
1230
|
+
}
|
|
1231
|
+
|
|
1011
1232
|
@media screen and (min-width: 768px) {
|
|
1012
1233
|
.md\:px_6 {
|
|
1013
1234
|
padding-inline: var(--spacing-6);
|
|
1014
1235
|
}
|
|
1015
1236
|
}
|
|
1016
1237
|
|
|
1238
|
+
@media screen and (min-width: 1024px) {
|
|
1239
|
+
input:hover .styles\:\[input\:hover_\&\]\:lg\:fs_18px {
|
|
1240
|
+
font-size: 18px;
|
|
1241
|
+
}
|
|
1242
|
+
}
|
|
1243
|
+
|
|
1244
|
+
@media screen and (min-width: 1024px) {
|
|
1245
|
+
.styles\:lg\:top_120px {
|
|
1246
|
+
top: 120px;
|
|
1247
|
+
}
|
|
1248
|
+
}
|
|
1249
|
+
|
|
1017
1250
|
@media screen and (min-width: 1024px) {
|
|
1018
1251
|
.lg\:px_8 {
|
|
1019
1252
|
padding-inline: var(--spacing-8);
|
|
1020
1253
|
}
|
|
1021
1254
|
}
|
|
1255
|
+
|
|
1256
|
+
@media base {
|
|
1257
|
+
.styles\:\[\@media_base\]\:\[\&\:hover\]\:left_40px:hover {
|
|
1258
|
+
left: 40px;
|
|
1259
|
+
}
|
|
1260
|
+
}
|
|
1261
|
+
|
|
1262
|
+
@media base {
|
|
1263
|
+
@media screen and (min-width: 640px) {
|
|
1264
|
+
.styles\:\[\@media_base\]\:\[\&\:hover\]\:sm\:text_left:hover {
|
|
1265
|
+
text-align: left;
|
|
1266
|
+
}
|
|
1267
|
+
}
|
|
1268
|
+
}
|
|
1269
|
+
|
|
1270
|
+
@media base {
|
|
1271
|
+
.styles\:\[\@media_base\]\:left_40px {
|
|
1272
|
+
left: 40px;
|
|
1273
|
+
}
|
|
1274
|
+
}
|
|
1275
|
+
|
|
1276
|
+
@media base {
|
|
1277
|
+
@media screen and (min-width: 640px) {
|
|
1278
|
+
.styles\:\[\@media_base\]\:sm\:text_left {
|
|
1279
|
+
text-align: left;
|
|
1280
|
+
}
|
|
1281
|
+
}
|
|
1282
|
+
}
|
|
1022
1283
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@layer tokens {
|
|
2
2
|
:where(:root, :host) {
|
|
3
|
+
--borders-none: none;
|
|
3
4
|
--easings-default: cubic-bezier(0.4, 0, 0.2, 1);
|
|
4
5
|
--easings-linear: linear;
|
|
5
6
|
--easings-in: cubic-bezier(0.4, 0, 1, 1);
|
|
@@ -73,6 +74,7 @@
|
|
|
73
74
|
--blurs-xl: 24px;
|
|
74
75
|
--blurs-2xl: 40px;
|
|
75
76
|
--blurs-3xl: 64px;
|
|
77
|
+
--spacing-0: 0rem;
|
|
76
78
|
--spacing-1: 0.25rem;
|
|
77
79
|
--spacing-2: 0.5rem;
|
|
78
80
|
--spacing-3: 0.75rem;
|
|
@@ -106,6 +108,7 @@
|
|
|
106
108
|
--spacing-1\.5: 0.375rem;
|
|
107
109
|
--spacing-2\.5: 0.625rem;
|
|
108
110
|
--spacing-3\.5: 0.875rem;
|
|
111
|
+
--sizes-0: 0rem;
|
|
109
112
|
--sizes-1: 0.25rem;
|
|
110
113
|
--sizes-2: 0.5rem;
|
|
111
114
|
--sizes-3: 0.75rem;
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
const tokens = {
|
|
2
|
+
'borders.none': {
|
|
3
|
+
value: 'none',
|
|
4
|
+
variable: 'var(--borders-none)',
|
|
5
|
+
},
|
|
2
6
|
'easings.default': {
|
|
3
7
|
value: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
4
8
|
variable: 'var(--easings-default)',
|
|
@@ -288,6 +292,10 @@ const tokens = {
|
|
|
288
292
|
value: '64px',
|
|
289
293
|
variable: 'var(--blurs-3xl)',
|
|
290
294
|
},
|
|
295
|
+
'spacing.0': {
|
|
296
|
+
value: '0rem',
|
|
297
|
+
variable: 'var(--spacing-0)',
|
|
298
|
+
},
|
|
291
299
|
'spacing.1': {
|
|
292
300
|
value: '0.25rem',
|
|
293
301
|
variable: 'var(--spacing-1)',
|
|
@@ -420,6 +428,10 @@ const tokens = {
|
|
|
420
428
|
value: '0.875rem',
|
|
421
429
|
variable: 'var(--spacing-3\\.5)',
|
|
422
430
|
},
|
|
431
|
+
'sizes.0': {
|
|
432
|
+
value: '0rem',
|
|
433
|
+
variable: 'var(--sizes-0)',
|
|
434
|
+
},
|
|
423
435
|
'sizes.1': {
|
|
424
436
|
value: '0.25rem',
|
|
425
437
|
variable: 'var(--sizes-1)',
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
/* eslint-disable */
|
|
2
|
-
export type Token = "easings.default" | "easings.linear" | "easings.in" | "easings.out" | "easings.in-out" | "durations.fastest" | "durations.faster" | "durations.fast" | "durations.normal" | "durations.slow" | "durations.slower" | "durations.slowest" | "radii.xs" | "radii.sm" | "radii.md" | "radii.lg" | "radii.xl" | "radii.2xl" | "radii.3xl" | "radii.full" | "fontWeights.thin" | "fontWeights.extralight" | "fontWeights.light" | "fontWeights.normal" | "fontWeights.medium" | "fontWeights.semibold" | "fontWeights.bold" | "fontWeights.extrabold" | "fontWeights.black" | "lineHeights.none" | "lineHeights.tight" | "lineHeights.snug" | "lineHeights.normal" | "lineHeights.relaxed" | "lineHeights.loose" | "fonts.sans" | "fonts.serif" | "fonts.mono" | "letterSpacings.tighter" | "letterSpacings.tight" | "letterSpacings.normal" | "letterSpacings.wide" | "letterSpacings.wider" | "letterSpacings.widest" | "fontSizes.2xs" | "fontSizes.xs" | "fontSizes.sm" | "fontSizes.md" | "fontSizes.lg" | "fontSizes.xl" | "fontSizes.2xl" | "fontSizes.3xl" | "fontSizes.4xl" | "fontSizes.5xl" | "fontSizes.6xl" | "fontSizes.7xl" | "fontSizes.8xl" | "fontSizes.9xl" | "shadows.xs" | "shadows.sm" | "shadows.md" | "shadows.lg" | "shadows.xl" | "shadows.2xl" | "shadows.inner" | "blurs.sm" | "blurs.base" | "blurs.md" | "blurs.lg" | "blurs.xl" | "blurs.2xl" | "blurs.3xl" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.9" | "spacing.10" | "spacing.11" | "spacing.12" | "spacing.14" | "spacing.16" | "spacing.20" | "spacing.24" | "spacing.28" | "spacing.32" | "spacing.36" | "spacing.40" | "spacing.44" | "spacing.48" | "spacing.52" | "spacing.56" | "spacing.60" | "spacing.64" | "spacing.72" | "spacing.80" | "spacing.96" | "spacing.0.5" | "spacing.1.5" | "spacing.2.5" | "spacing.3.5" | "sizes.1" | "sizes.2" | "sizes.3" | "sizes.4" | "sizes.5" | "sizes.6" | "sizes.7" | "sizes.8" | "sizes.9" | "sizes.10" | "sizes.11" | "sizes.12" | "sizes.14" | "sizes.16" | "sizes.20" | "sizes.24" | "sizes.28" | "sizes.32" | "sizes.36" | "sizes.40" | "sizes.44" | "sizes.48" | "sizes.52" | "sizes.56" | "sizes.60" | "sizes.64" | "sizes.72" | "sizes.80" | "sizes.96" | "sizes.0.5" | "sizes.1.5" | "sizes.2.5" | "sizes.3.5" | "sizes.xs" | "sizes.sm" | "sizes.md" | "sizes.lg" | "sizes.xl" | "sizes.2xl" | "sizes.3xl" | "sizes.4xl" | "sizes.5xl" | "sizes.6xl" | "sizes.7xl" | "sizes.8xl" | "sizes.prose" | "sizes.full" | "sizes.min" | "sizes.max" | "sizes.fit" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "sizes.breakpoint-2xl" | "animations.spin" | "animations.ping" | "animations.pulse" | "animations.bounce" | "colors.current" | "colors.black" | "colors.white" | "colors.transparent" | "colors.rose.50" | "colors.rose.100" | "colors.rose.200" | "colors.rose.300" | "colors.rose.400" | "colors.rose.500" | "colors.rose.600" | "colors.rose.700" | "colors.rose.800" | "colors.rose.900" | "colors.pink.50" | "colors.pink.100" | "colors.pink.200" | "colors.pink.300" | "colors.pink.400" | "colors.pink.500" | "colors.pink.600" | "colors.pink.700" | "colors.pink.800" | "colors.pink.900" | "colors.fuchsia.50" | "colors.fuchsia.100" | "colors.fuchsia.200" | "colors.fuchsia.300" | "colors.fuchsia.400" | "colors.fuchsia.500" | "colors.fuchsia.600" | "colors.fuchsia.700" | "colors.fuchsia.800" | "colors.fuchsia.900" | "colors.purple.50" | "colors.purple.100" | "colors.purple.200" | "colors.purple.300" | "colors.purple.400" | "colors.purple.500" | "colors.purple.600" | "colors.purple.700" | "colors.purple.800" | "colors.purple.900" | "colors.indigo.50" | "colors.indigo.100" | "colors.indigo.200" | "colors.indigo.300" | "colors.indigo.400" | "colors.indigo.500" | "colors.indigo.600" | "colors.indigo.700" | "colors.indigo.800" | "colors.indigo.900" | "colors.blue.50" | "colors.blue.100" | "colors.blue.200" | "colors.blue.300" | "colors.blue.400" | "colors.blue.500" | "colors.blue.600" | "colors.blue.700" | "colors.blue.800" | "colors.blue.900" | "colors.sky.50" | "colors.sky.100" | "colors.sky.200" | "colors.sky.300" | "colors.sky.400" | "colors.sky.500" | "colors.sky.600" | "colors.sky.700" | "colors.sky.800" | "colors.sky.900" | "colors.cyan.50" | "colors.cyan.100" | "colors.cyan.200" | "colors.cyan.300" | "colors.cyan.400" | "colors.cyan.500" | "colors.cyan.600" | "colors.cyan.700" | "colors.cyan.800" | "colors.cyan.900" | "colors.teal.50" | "colors.teal.100" | "colors.teal.200" | "colors.teal.300" | "colors.teal.400" | "colors.teal.500" | "colors.teal.600" | "colors.teal.700" | "colors.teal.800" | "colors.teal.900" | "colors.green.50" | "colors.green.100" | "colors.green.200" | "colors.green.300" | "colors.green.400" | "colors.green.500" | "colors.green.600" | "colors.green.700" | "colors.green.800" | "colors.green.900" | "colors.lime.50" | "colors.lime.100" | "colors.lime.200" | "colors.lime.300" | "colors.lime.400" | "colors.lime.500" | "colors.lime.600" | "colors.lime.700" | "colors.lime.800" | "colors.lime.900" | "colors.yellow.50" | "colors.yellow.100" | "colors.yellow.200" | "colors.yellow.300" | "colors.yellow.400" | "colors.yellow.500" | "colors.yellow.600" | "colors.yellow.700" | "colors.yellow.800" | "colors.yellow.900" | "colors.orange.50" | "colors.orange.100" | "colors.orange.200" | "colors.orange.300" | "colors.orange.400" | "colors.orange.500" | "colors.orange.600" | "colors.orange.700" | "colors.orange.800" | "colors.orange.900" | "colors.red.50" | "colors.red.100" | "colors.red.200" | "colors.red.300" | "colors.red.400" | "colors.red.500" | "colors.red.600" | "colors.red.700" | "colors.red.800" | "colors.red.900" | "colors.gray.50" | "colors.gray.100" | "colors.gray.200" | "colors.gray.300" | "colors.gray.400" | "colors.gray.500" | "colors.gray.600" | "colors.gray.700" | "colors.gray.800" | "colors.gray.900" | "colors.slate.50" | "colors.slate.100" | "colors.slate.200" | "colors.slate.300" | "colors.slate.400" | "colors.slate.500" | "colors.slate.600" | "colors.slate.700" | "colors.slate.800" | "colors.slate.900" | "colors.neutral.50" | "colors.neutral.100" | "colors.neutral.200" | "colors.neutral.300" | "colors.neutral.400" | "colors.neutral.500" | "colors.neutral.600" | "colors.neutral.700" | "colors.neutral.800" | "colors.neutral.900" | "colors.neutral.950" | "assets.check" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "breakpoints.2xl" | "shadows.inset" | "colors.text" | "colors.bg" | "colors.card" | "colors.border" | "spacing.-1" | "spacing.-2" | "spacing.-3" | "spacing.-4" | "spacing.-5" | "spacing.-6" | "spacing.-7" | "spacing.-8" | "spacing.-9" | "spacing.-10" | "spacing.-11" | "spacing.-12" | "spacing.-14" | "spacing.-16" | "spacing.-20" | "spacing.-24" | "spacing.-28" | "spacing.-32" | "spacing.-36" | "spacing.-40" | "spacing.-44" | "spacing.-48" | "spacing.-52" | "spacing.-56" | "spacing.-60" | "spacing.-64" | "spacing.-72" | "spacing.-80" | "spacing.-96" | "spacing.-0.5" | "spacing.-1.5" | "spacing.-2.5" | "spacing.-3.5" | "colors.colorPalette.50" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.500" | "colors.colorPalette.600" | "colors.colorPalette.700" | "colors.colorPalette.800" | "colors.colorPalette.900" | "colors.colorPalette.950"
|
|
2
|
+
export type Token = "borders.none" | "easings.default" | "easings.linear" | "easings.in" | "easings.out" | "easings.in-out" | "durations.fastest" | "durations.faster" | "durations.fast" | "durations.normal" | "durations.slow" | "durations.slower" | "durations.slowest" | "radii.xs" | "radii.sm" | "radii.md" | "radii.lg" | "radii.xl" | "radii.2xl" | "radii.3xl" | "radii.full" | "fontWeights.thin" | "fontWeights.extralight" | "fontWeights.light" | "fontWeights.normal" | "fontWeights.medium" | "fontWeights.semibold" | "fontWeights.bold" | "fontWeights.extrabold" | "fontWeights.black" | "lineHeights.none" | "lineHeights.tight" | "lineHeights.snug" | "lineHeights.normal" | "lineHeights.relaxed" | "lineHeights.loose" | "fonts.sans" | "fonts.serif" | "fonts.mono" | "letterSpacings.tighter" | "letterSpacings.tight" | "letterSpacings.normal" | "letterSpacings.wide" | "letterSpacings.wider" | "letterSpacings.widest" | "fontSizes.2xs" | "fontSizes.xs" | "fontSizes.sm" | "fontSizes.md" | "fontSizes.lg" | "fontSizes.xl" | "fontSizes.2xl" | "fontSizes.3xl" | "fontSizes.4xl" | "fontSizes.5xl" | "fontSizes.6xl" | "fontSizes.7xl" | "fontSizes.8xl" | "fontSizes.9xl" | "shadows.xs" | "shadows.sm" | "shadows.md" | "shadows.lg" | "shadows.xl" | "shadows.2xl" | "shadows.inner" | "blurs.sm" | "blurs.base" | "blurs.md" | "blurs.lg" | "blurs.xl" | "blurs.2xl" | "blurs.3xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.9" | "spacing.10" | "spacing.11" | "spacing.12" | "spacing.14" | "spacing.16" | "spacing.20" | "spacing.24" | "spacing.28" | "spacing.32" | "spacing.36" | "spacing.40" | "spacing.44" | "spacing.48" | "spacing.52" | "spacing.56" | "spacing.60" | "spacing.64" | "spacing.72" | "spacing.80" | "spacing.96" | "spacing.0.5" | "spacing.1.5" | "spacing.2.5" | "spacing.3.5" | "sizes.0" | "sizes.1" | "sizes.2" | "sizes.3" | "sizes.4" | "sizes.5" | "sizes.6" | "sizes.7" | "sizes.8" | "sizes.9" | "sizes.10" | "sizes.11" | "sizes.12" | "sizes.14" | "sizes.16" | "sizes.20" | "sizes.24" | "sizes.28" | "sizes.32" | "sizes.36" | "sizes.40" | "sizes.44" | "sizes.48" | "sizes.52" | "sizes.56" | "sizes.60" | "sizes.64" | "sizes.72" | "sizes.80" | "sizes.96" | "sizes.0.5" | "sizes.1.5" | "sizes.2.5" | "sizes.3.5" | "sizes.xs" | "sizes.sm" | "sizes.md" | "sizes.lg" | "sizes.xl" | "sizes.2xl" | "sizes.3xl" | "sizes.4xl" | "sizes.5xl" | "sizes.6xl" | "sizes.7xl" | "sizes.8xl" | "sizes.prose" | "sizes.full" | "sizes.min" | "sizes.max" | "sizes.fit" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "sizes.breakpoint-2xl" | "animations.spin" | "animations.ping" | "animations.pulse" | "animations.bounce" | "colors.current" | "colors.black" | "colors.white" | "colors.transparent" | "colors.rose.50" | "colors.rose.100" | "colors.rose.200" | "colors.rose.300" | "colors.rose.400" | "colors.rose.500" | "colors.rose.600" | "colors.rose.700" | "colors.rose.800" | "colors.rose.900" | "colors.pink.50" | "colors.pink.100" | "colors.pink.200" | "colors.pink.300" | "colors.pink.400" | "colors.pink.500" | "colors.pink.600" | "colors.pink.700" | "colors.pink.800" | "colors.pink.900" | "colors.fuchsia.50" | "colors.fuchsia.100" | "colors.fuchsia.200" | "colors.fuchsia.300" | "colors.fuchsia.400" | "colors.fuchsia.500" | "colors.fuchsia.600" | "colors.fuchsia.700" | "colors.fuchsia.800" | "colors.fuchsia.900" | "colors.purple.50" | "colors.purple.100" | "colors.purple.200" | "colors.purple.300" | "colors.purple.400" | "colors.purple.500" | "colors.purple.600" | "colors.purple.700" | "colors.purple.800" | "colors.purple.900" | "colors.indigo.50" | "colors.indigo.100" | "colors.indigo.200" | "colors.indigo.300" | "colors.indigo.400" | "colors.indigo.500" | "colors.indigo.600" | "colors.indigo.700" | "colors.indigo.800" | "colors.indigo.900" | "colors.blue.50" | "colors.blue.100" | "colors.blue.200" | "colors.blue.300" | "colors.blue.400" | "colors.blue.500" | "colors.blue.600" | "colors.blue.700" | "colors.blue.800" | "colors.blue.900" | "colors.sky.50" | "colors.sky.100" | "colors.sky.200" | "colors.sky.300" | "colors.sky.400" | "colors.sky.500" | "colors.sky.600" | "colors.sky.700" | "colors.sky.800" | "colors.sky.900" | "colors.cyan.50" | "colors.cyan.100" | "colors.cyan.200" | "colors.cyan.300" | "colors.cyan.400" | "colors.cyan.500" | "colors.cyan.600" | "colors.cyan.700" | "colors.cyan.800" | "colors.cyan.900" | "colors.teal.50" | "colors.teal.100" | "colors.teal.200" | "colors.teal.300" | "colors.teal.400" | "colors.teal.500" | "colors.teal.600" | "colors.teal.700" | "colors.teal.800" | "colors.teal.900" | "colors.green.50" | "colors.green.100" | "colors.green.200" | "colors.green.300" | "colors.green.400" | "colors.green.500" | "colors.green.600" | "colors.green.700" | "colors.green.800" | "colors.green.900" | "colors.lime.50" | "colors.lime.100" | "colors.lime.200" | "colors.lime.300" | "colors.lime.400" | "colors.lime.500" | "colors.lime.600" | "colors.lime.700" | "colors.lime.800" | "colors.lime.900" | "colors.yellow.50" | "colors.yellow.100" | "colors.yellow.200" | "colors.yellow.300" | "colors.yellow.400" | "colors.yellow.500" | "colors.yellow.600" | "colors.yellow.700" | "colors.yellow.800" | "colors.yellow.900" | "colors.orange.50" | "colors.orange.100" | "colors.orange.200" | "colors.orange.300" | "colors.orange.400" | "colors.orange.500" | "colors.orange.600" | "colors.orange.700" | "colors.orange.800" | "colors.orange.900" | "colors.red.50" | "colors.red.100" | "colors.red.200" | "colors.red.300" | "colors.red.400" | "colors.red.500" | "colors.red.600" | "colors.red.700" | "colors.red.800" | "colors.red.900" | "colors.gray.50" | "colors.gray.100" | "colors.gray.200" | "colors.gray.300" | "colors.gray.400" | "colors.gray.500" | "colors.gray.600" | "colors.gray.700" | "colors.gray.800" | "colors.gray.900" | "colors.slate.50" | "colors.slate.100" | "colors.slate.200" | "colors.slate.300" | "colors.slate.400" | "colors.slate.500" | "colors.slate.600" | "colors.slate.700" | "colors.slate.800" | "colors.slate.900" | "colors.neutral.50" | "colors.neutral.100" | "colors.neutral.200" | "colors.neutral.300" | "colors.neutral.400" | "colors.neutral.500" | "colors.neutral.600" | "colors.neutral.700" | "colors.neutral.800" | "colors.neutral.900" | "colors.neutral.950" | "assets.check" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "breakpoints.2xl" | "shadows.inset" | "colors.text" | "colors.bg" | "colors.card" | "colors.border" | "spacing.-1" | "spacing.-2" | "spacing.-3" | "spacing.-4" | "spacing.-5" | "spacing.-6" | "spacing.-7" | "spacing.-8" | "spacing.-9" | "spacing.-10" | "spacing.-11" | "spacing.-12" | "spacing.-14" | "spacing.-16" | "spacing.-20" | "spacing.-24" | "spacing.-28" | "spacing.-32" | "spacing.-36" | "spacing.-40" | "spacing.-44" | "spacing.-48" | "spacing.-52" | "spacing.-56" | "spacing.-60" | "spacing.-64" | "spacing.-72" | "spacing.-80" | "spacing.-96" | "spacing.-0.5" | "spacing.-1.5" | "spacing.-2.5" | "spacing.-3.5" | "colors.colorPalette.50" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.500" | "colors.colorPalette.600" | "colors.colorPalette.700" | "colors.colorPalette.800" | "colors.colorPalette.900" | "colors.colorPalette.950"
|
|
3
3
|
|
|
4
4
|
export type ColorPalette = "rose" | "pink" | "fuchsia" | "purple" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "green" | "lime" | "yellow" | "orange" | "red" | "gray" | "slate" | "neutral"
|
|
5
5
|
|
|
6
|
+
export type BorderToken = "none"
|
|
7
|
+
|
|
6
8
|
export type EasingToken = "default" | "linear" | "in" | "out" | "in-out"
|
|
7
9
|
|
|
8
10
|
export type DurationToken = "fastest" | "faster" | "fast" | "normal" | "slow" | "slower" | "slowest"
|
|
@@ -23,9 +25,9 @@ export type ShadowToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inner" | "
|
|
|
23
25
|
|
|
24
26
|
export type BlurToken = "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl"
|
|
25
27
|
|
|
26
|
-
export type SpacingToken = "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5"
|
|
28
|
+
export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5"
|
|
27
29
|
|
|
28
|
-
export type SizeToken = "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | "full" | "min" | "max" | "fit" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl"
|
|
30
|
+
export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | "full" | "min" | "max" | "fit" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl"
|
|
29
31
|
|
|
30
32
|
export type AnimationToken = "spin" | "ping" | "pulse" | "bounce"
|
|
31
33
|
|
|
@@ -36,6 +38,7 @@ export type AssetToken = "check"
|
|
|
36
38
|
export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl"
|
|
37
39
|
|
|
38
40
|
export type Tokens = {
|
|
41
|
+
borders: BorderToken
|
|
39
42
|
easings: EasingToken
|
|
40
43
|
durations: DurationToken
|
|
41
44
|
radii: RadiusToken
|
|
@@ -4,12 +4,12 @@ import type { CssProperties } from './system-types'
|
|
|
4
4
|
import type { Tokens } from '../tokens'
|
|
5
5
|
|
|
6
6
|
type PropertyValueTypes = {
|
|
7
|
-
aspectRatio: "square" | "landscape" | "portrait" | "wide" | "ultrawide" | "golden";
|
|
7
|
+
aspectRatio: "auto" | "square" | "landscape" | "portrait" | "wide" | "ultrawide" | "golden";
|
|
8
8
|
top: Tokens["spacing"];
|
|
9
9
|
left: Tokens["spacing"];
|
|
10
10
|
insetInline: Tokens["spacing"];
|
|
11
11
|
insetBlock: Tokens["spacing"];
|
|
12
|
-
inset: Tokens["spacing"];
|
|
12
|
+
inset: "auto" | Tokens["spacing"];
|
|
13
13
|
insetBlockEnd: Tokens["spacing"];
|
|
14
14
|
insetBlockStart: Tokens["spacing"];
|
|
15
15
|
insetInlineEnd: Tokens["spacing"];
|
|
@@ -46,17 +46,17 @@ type PropertyValueTypes = {
|
|
|
46
46
|
paddingInline: Tokens["spacing"];
|
|
47
47
|
paddingInlineEnd: Tokens["spacing"];
|
|
48
48
|
paddingInlineStart: Tokens["spacing"];
|
|
49
|
-
marginLeft: Tokens["spacing"];
|
|
50
|
-
marginRight: Tokens["spacing"];
|
|
51
|
-
marginTop: Tokens["spacing"];
|
|
52
|
-
marginBottom: Tokens["spacing"];
|
|
53
|
-
margin: Tokens["spacing"];
|
|
54
|
-
marginBlock: Tokens["spacing"];
|
|
55
|
-
marginBlockEnd: Tokens["spacing"];
|
|
56
|
-
marginBlockStart: Tokens["spacing"];
|
|
57
|
-
marginInline: Tokens["spacing"];
|
|
58
|
-
marginInlineEnd: Tokens["spacing"];
|
|
59
|
-
marginInlineStart: Tokens["spacing"];
|
|
49
|
+
marginLeft: "auto" | Tokens["spacing"];
|
|
50
|
+
marginRight: "auto" | Tokens["spacing"];
|
|
51
|
+
marginTop: "auto" | Tokens["spacing"];
|
|
52
|
+
marginBottom: "auto" | Tokens["spacing"];
|
|
53
|
+
margin: "auto" | Tokens["spacing"];
|
|
54
|
+
marginBlock: "auto" | Tokens["spacing"];
|
|
55
|
+
marginBlockEnd: "auto" | Tokens["spacing"];
|
|
56
|
+
marginBlockStart: "auto" | Tokens["spacing"];
|
|
57
|
+
marginInline: "auto" | Tokens["spacing"];
|
|
58
|
+
marginInlineEnd: "auto" | Tokens["spacing"];
|
|
59
|
+
marginInlineStart: "auto" | Tokens["spacing"];
|
|
60
60
|
outlineColor: Tokens["colors"];
|
|
61
61
|
outline: Tokens["borders"];
|
|
62
62
|
outlineOffset: Tokens["spacing"];
|
|
@@ -64,18 +64,18 @@ type PropertyValueTypes = {
|
|
|
64
64
|
divideY: string;
|
|
65
65
|
divideColor: Tokens["colors"];
|
|
66
66
|
divideStyle: CssProperties["borderStyle"];
|
|
67
|
-
width: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
|
|
68
|
-
inlineSize: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
|
|
69
|
-
minWidth: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
|
|
70
|
-
minInlineSize: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
|
|
71
|
-
maxWidth: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
|
|
72
|
-
maxInlineSize: Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
|
|
73
|
-
height: Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
|
|
74
|
-
blockSize: Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
|
|
75
|
-
minHeight: Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
|
|
76
|
-
minBlockSize: Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
|
|
77
|
-
maxHeight: Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
|
|
78
|
-
maxBlockSize: Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
|
|
67
|
+
width: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
|
|
68
|
+
inlineSize: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
|
|
69
|
+
minWidth: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
|
|
70
|
+
minInlineSize: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
|
|
71
|
+
maxWidth: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
|
|
72
|
+
maxInlineSize: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
|
|
73
|
+
height: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
|
|
74
|
+
blockSize: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
|
|
75
|
+
minHeight: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
|
|
76
|
+
minBlockSize: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
|
|
77
|
+
maxHeight: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
|
|
78
|
+
maxBlockSize: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
|
|
79
79
|
color: Tokens["colors"];
|
|
80
80
|
fontFamily: Tokens["fonts"];
|
|
81
81
|
fontSize: Tokens["fontSizes"];
|
|
@@ -53,5 +53,7 @@ type DataAttributes =
|
|
|
53
53
|
type AttributeSelector = `&${Pseudos | DataAttributes | AriaAttributes}`
|
|
54
54
|
type ParentSelector = `${DataAttributes | AriaAttributes} &`
|
|
55
55
|
|
|
56
|
-
|
|
56
|
+
type AtRuleType = 'media' | 'layer' | 'container' | 'supports' | 'page'
|
|
57
|
+
|
|
58
|
+
export type AnySelector = `${string}&` | `&${string}` | `@${AtRuleType}${string}`
|
|
57
59
|
export type Selectors = AttributeSelector | ParentSelector
|
|
@@ -227,7 +227,6 @@ export type SystemProperties = {
|
|
|
227
227
|
clip?: PropertyValue<'clip'>
|
|
228
228
|
clipPath?: PropertyValue<'clipPath'>
|
|
229
229
|
color?: PropertyValue<'color'>
|
|
230
|
-
printColorAdjust?: PropertyValue<'printColorAdjust'>
|
|
231
230
|
colorScheme?: PropertyValue<'colorScheme'>
|
|
232
231
|
columnCount?: PropertyValue<'columnCount'>
|
|
233
232
|
columnFill?: PropertyValue<'columnFill'>
|
|
@@ -245,6 +244,9 @@ export type SystemProperties = {
|
|
|
245
244
|
containIntrinsicHeight?: PropertyValue<'containIntrinsicHeight'>
|
|
246
245
|
containIntrinsicInlineSize?: PropertyValue<'containIntrinsicInlineSize'>
|
|
247
246
|
containIntrinsicWidth?: PropertyValue<'containIntrinsicWidth'>
|
|
247
|
+
container?: PropertyValue<'container'>
|
|
248
|
+
containerName?: PropertyValue<'containerName'>
|
|
249
|
+
containerType?: PropertyValue<'containerType'>
|
|
248
250
|
content?: PropertyValue<'content'>
|
|
249
251
|
contentVisibility?: PropertyValue<'contentVisibility'>
|
|
250
252
|
counterIncrement?: PropertyValue<'counterIncrement'>
|
|
@@ -269,6 +271,7 @@ export type SystemProperties = {
|
|
|
269
271
|
fontKerning?: PropertyValue<'fontKerning'>
|
|
270
272
|
fontLanguageOverride?: PropertyValue<'fontLanguageOverride'>
|
|
271
273
|
fontOpticalSizing?: PropertyValue<'fontOpticalSizing'>
|
|
274
|
+
fontPalette?: PropertyValue<'fontPalette'>
|
|
272
275
|
fontVariationSettings?: PropertyValue<'fontVariationSettings'>
|
|
273
276
|
fontSize?: PropertyValue<'fontSize'>
|
|
274
277
|
fontSizeAdjust?: PropertyValue<'fontSizeAdjust'>
|
|
@@ -280,6 +283,7 @@ export type SystemProperties = {
|
|
|
280
283
|
fontVariantAlternates?: PropertyValue<'fontVariantAlternates'>
|
|
281
284
|
fontVariantCaps?: PropertyValue<'fontVariantCaps'>
|
|
282
285
|
fontVariantEastAsian?: PropertyValue<'fontVariantEastAsian'>
|
|
286
|
+
fontVariantEmoji?: PropertyValue<'fontVariantEmoji'>
|
|
283
287
|
fontVariantLigatures?: PropertyValue<'fontVariantLigatures'>
|
|
284
288
|
fontVariantNumeric?: PropertyValue<'fontVariantNumeric'>
|
|
285
289
|
fontVariantPosition?: PropertyValue<'fontVariantPosition'>
|
|
@@ -423,6 +427,7 @@ export type SystemProperties = {
|
|
|
423
427
|
paddingLeft?: PropertyValue<'paddingLeft'>
|
|
424
428
|
paddingRight?: PropertyValue<'paddingRight'>
|
|
425
429
|
paddingTop?: PropertyValue<'paddingTop'>
|
|
430
|
+
page?: PropertyValue<'page'>
|
|
426
431
|
pageBreakAfter?: PropertyValue<'pageBreakAfter'>
|
|
427
432
|
pageBreakBefore?: PropertyValue<'pageBreakBefore'>
|
|
428
433
|
pageBreakInside?: PropertyValue<'pageBreakInside'>
|
|
@@ -434,6 +439,7 @@ export type SystemProperties = {
|
|
|
434
439
|
placeSelf?: PropertyValue<'placeSelf'>
|
|
435
440
|
pointerEvents?: PropertyValue<'pointerEvents'>
|
|
436
441
|
position?: PropertyValue<'position'>
|
|
442
|
+
printColorAdjust?: PropertyValue<'printColorAdjust'>
|
|
437
443
|
quotes?: PropertyValue<'quotes'>
|
|
438
444
|
resize?: PropertyValue<'resize'>
|
|
439
445
|
right?: PropertyValue<'right'>
|
|
@@ -525,6 +531,7 @@ export type SystemProperties = {
|
|
|
525
531
|
unicodeBidi?: PropertyValue<'unicodeBidi'>
|
|
526
532
|
userSelect?: PropertyValue<'userSelect'>
|
|
527
533
|
verticalAlign?: PropertyValue<'verticalAlign'>
|
|
534
|
+
viewTransitionName?: PropertyValue<'viewTransitionName'>
|
|
528
535
|
visibility?: PropertyValue<'visibility'>
|
|
529
536
|
whiteSpace?: PropertyValue<'whiteSpace'>
|
|
530
537
|
widows?: PropertyValue<'widows'>
|