@react-spectrum/style-macro-s1 3.0.0-alpha.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/LICENSE +201 -0
- package/README.md +3 -0
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -0
- package/package.json +22 -0
- package/src/index.ts +14 -0
- package/src/runtime.ts +98 -0
- package/src/spectrum-theme.ts +874 -0
- package/src/style-macro.ts +481 -0
- package/src/types.ts +172 -0
|
@@ -0,0 +1,874 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Copyright 2024 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
12
|
+
import {createArbitraryProperty, createColorProperty, createMappedProperty, createTheme} from './style-macro';
|
|
13
|
+
import type * as CSS from 'csstype';
|
|
14
|
+
|
|
15
|
+
const color = {
|
|
16
|
+
transparent: 'transparent',
|
|
17
|
+
black: 'black',
|
|
18
|
+
white: 'white',
|
|
19
|
+
|
|
20
|
+
'gray-50': 'var(--spectrum-gray-50)',
|
|
21
|
+
'gray-75': 'var(--spectrum-gray-75)',
|
|
22
|
+
'gray-100': 'var(--spectrum-gray-100)',
|
|
23
|
+
'gray-200': 'var(--spectrum-gray-200)',
|
|
24
|
+
'gray-300': 'var(--spectrum-gray-300)',
|
|
25
|
+
'gray-400': 'var(--spectrum-gray-400)',
|
|
26
|
+
'gray-500': 'var(--spectrum-gray-500)',
|
|
27
|
+
'gray-600': 'var(--spectrum-gray-600)',
|
|
28
|
+
'gray-700': 'var(--spectrum-gray-700)',
|
|
29
|
+
'gray-800': 'var(--spectrum-gray-800)',
|
|
30
|
+
'gray-900': 'var(--spectrum-gray-900)',
|
|
31
|
+
|
|
32
|
+
'blue-100': 'var(--spectrum-blue-100)',
|
|
33
|
+
'blue-200': 'var(--spectrum-blue-200)',
|
|
34
|
+
'blue-300': 'var(--spectrum-blue-300)',
|
|
35
|
+
'blue-400': 'var(--spectrum-blue-400)',
|
|
36
|
+
'blue-500': 'var(--spectrum-blue-500)',
|
|
37
|
+
'blue-600': 'var(--spectrum-blue-600)',
|
|
38
|
+
'blue-700': 'var(--spectrum-blue-700)',
|
|
39
|
+
'blue-800': 'var(--spectrum-blue-800)',
|
|
40
|
+
'blue-900': 'var(--spectrum-blue-900)',
|
|
41
|
+
'blue-1000': 'var(--spectrum-blue-1000)',
|
|
42
|
+
'blue-1100': 'var(--spectrum-blue-1100)',
|
|
43
|
+
'blue-1200': 'var(--spectrum-blue-1200)',
|
|
44
|
+
'blue-1300': 'var(--spectrum-blue-1300)',
|
|
45
|
+
'blue-1400': 'var(--spectrum-blue-1400)',
|
|
46
|
+
|
|
47
|
+
'green-100': 'var(--spectrum-green-100)',
|
|
48
|
+
'green-200': 'var(--spectrum-green-200)',
|
|
49
|
+
'green-300': 'var(--spectrum-green-300)',
|
|
50
|
+
'green-400': 'var(--spectrum-green-400)',
|
|
51
|
+
'green-500': 'var(--spectrum-green-500)',
|
|
52
|
+
'green-600': 'var(--spectrum-green-600)',
|
|
53
|
+
'green-700': 'var(--spectrum-green-700)',
|
|
54
|
+
'green-800': 'var(--spectrum-green-800)',
|
|
55
|
+
'green-900': 'var(--spectrum-green-900)',
|
|
56
|
+
'green-1000': 'var(--spectrum-green-1000)',
|
|
57
|
+
'green-1100': 'var(--spectrum-green-1100)',
|
|
58
|
+
'green-1200': 'var(--spectrum-green-1200)',
|
|
59
|
+
'green-1300': 'var(--spectrum-green-1300)',
|
|
60
|
+
'green-1400': 'var(--spectrum-green-1400)',
|
|
61
|
+
|
|
62
|
+
'orange-100': 'var(--spectrum-orange-100)',
|
|
63
|
+
'orange-200': 'var(--spectrum-orange-200)',
|
|
64
|
+
'orange-300': 'var(--spectrum-orange-300)',
|
|
65
|
+
'orange-400': 'var(--spectrum-orange-400)',
|
|
66
|
+
'orange-500': 'var(--spectrum-orange-500)',
|
|
67
|
+
'orange-600': 'var(--spectrum-orange-600)',
|
|
68
|
+
'orange-700': 'var(--spectrum-orange-700)',
|
|
69
|
+
'orange-800': 'var(--spectrum-orange-800)',
|
|
70
|
+
'orange-900': 'var(--spectrum-orange-900)',
|
|
71
|
+
'orange-1000': 'var(--spectrum-orange-1000)',
|
|
72
|
+
'orange-1100': 'var(--spectrum-orange-1100)',
|
|
73
|
+
'orange-1200': 'var(--spectrum-orange-1200)',
|
|
74
|
+
'orange-1300': 'var(--spectrum-orange-1300)',
|
|
75
|
+
'orange-1400': 'var(--spectrum-orange-1400)',
|
|
76
|
+
|
|
77
|
+
'red-100': 'var(--spectrum-red-100)',
|
|
78
|
+
'red-200': 'var(--spectrum-red-200)',
|
|
79
|
+
'red-300': 'var(--spectrum-red-300)',
|
|
80
|
+
'red-400': 'var(--spectrum-red-400)',
|
|
81
|
+
'red-500': 'var(--spectrum-red-500)',
|
|
82
|
+
'red-600': 'var(--spectrum-red-600)',
|
|
83
|
+
'red-700': 'var(--spectrum-red-700)',
|
|
84
|
+
'red-800': 'var(--spectrum-red-800)',
|
|
85
|
+
'red-900': 'var(--spectrum-red-900)',
|
|
86
|
+
'red-1000': 'var(--spectrum-red-1000)',
|
|
87
|
+
'red-1100': 'var(--spectrum-red-1100)',
|
|
88
|
+
'red-1200': 'var(--spectrum-red-1200)',
|
|
89
|
+
'red-1300': 'var(--spectrum-red-1300)',
|
|
90
|
+
'red-1400': 'var(--spectrum-red-1400)',
|
|
91
|
+
|
|
92
|
+
'celery-100': 'var(--spectrum-celery-100)',
|
|
93
|
+
'celery-200': 'var(--spectrum-celery-200)',
|
|
94
|
+
'celery-300': 'var(--spectrum-celery-300)',
|
|
95
|
+
'celery-400': 'var(--spectrum-celery-400)',
|
|
96
|
+
'celery-500': 'var(--spectrum-celery-500)',
|
|
97
|
+
'celery-600': 'var(--spectrum-celery-600)',
|
|
98
|
+
'celery-700': 'var(--spectrum-celery-700)',
|
|
99
|
+
'celery-800': 'var(--spectrum-celery-800)',
|
|
100
|
+
'celery-900': 'var(--spectrum-celery-900)',
|
|
101
|
+
'celery-1000': 'var(--spectrum-celery-1000)',
|
|
102
|
+
'celery-1100': 'var(--spectrum-celery-1100)',
|
|
103
|
+
'celery-1200': 'var(--spectrum-celery-1200)',
|
|
104
|
+
'celery-1300': 'var(--spectrum-celery-1300)',
|
|
105
|
+
'celery-1400': 'var(--spectrum-celery-1400)',
|
|
106
|
+
|
|
107
|
+
'chartreuse-100': 'var(--spectrum-chartreuse-100)',
|
|
108
|
+
'chartreuse-200': 'var(--spectrum-chartreuse-200)',
|
|
109
|
+
'chartreuse-300': 'var(--spectrum-chartreuse-300)',
|
|
110
|
+
'chartreuse-400': 'var(--spectrum-chartreuse-400)',
|
|
111
|
+
'chartreuse-500': 'var(--spectrum-chartreuse-500)',
|
|
112
|
+
'chartreuse-600': 'var(--spectrum-chartreuse-600)',
|
|
113
|
+
'chartreuse-700': 'var(--spectrum-chartreuse-700)',
|
|
114
|
+
'chartreuse-800': 'var(--spectrum-chartreuse-800)',
|
|
115
|
+
'chartreuse-900': 'var(--spectrum-chartreuse-900)',
|
|
116
|
+
'chartreuse-1000': 'var(--spectrum-chartreuse-1000)',
|
|
117
|
+
'chartreuse-1100': 'var(--spectrum-chartreuse-1100)',
|
|
118
|
+
'chartreuse-1200': 'var(--spectrum-chartreuse-1200)',
|
|
119
|
+
'chartreuse-1300': 'var(--spectrum-chartreuse-1300)',
|
|
120
|
+
'chartreuse-1400': 'var(--spectrum-chartreuse-1400)',
|
|
121
|
+
|
|
122
|
+
'cyan-100': 'var(--spectrum-cyan-100)',
|
|
123
|
+
'cyan-200': 'var(--spectrum-cyan-200)',
|
|
124
|
+
'cyan-300': 'var(--spectrum-cyan-300)',
|
|
125
|
+
'cyan-400': 'var(--spectrum-cyan-400)',
|
|
126
|
+
'cyan-500': 'var(--spectrum-cyan-500)',
|
|
127
|
+
'cyan-600': 'var(--spectrum-cyan-600)',
|
|
128
|
+
'cyan-700': 'var(--spectrum-cyan-700)',
|
|
129
|
+
'cyan-800': 'var(--spectrum-cyan-800)',
|
|
130
|
+
'cyan-900': 'var(--spectrum-cyan-900)',
|
|
131
|
+
'cyan-1000': 'var(--spectrum-cyan-1000)',
|
|
132
|
+
'cyan-1100': 'var(--spectrum-cyan-1100)',
|
|
133
|
+
'cyan-1200': 'var(--spectrum-cyan-1200)',
|
|
134
|
+
'cyan-1300': 'var(--spectrum-cyan-1300)',
|
|
135
|
+
'cyan-1400': 'var(--spectrum-cyan-1400)',
|
|
136
|
+
|
|
137
|
+
'fuchsia-100': 'var(--spectrum-fuchsia-100)',
|
|
138
|
+
'fuchsia-200': 'var(--spectrum-fuchsia-200)',
|
|
139
|
+
'fuchsia-300': 'var(--spectrum-fuchsia-300)',
|
|
140
|
+
'fuchsia-400': 'var(--spectrum-fuchsia-400)',
|
|
141
|
+
'fuchsia-500': 'var(--spectrum-fuchsia-500)',
|
|
142
|
+
'fuchsia-600': 'var(--spectrum-fuchsia-600)',
|
|
143
|
+
'fuchsia-700': 'var(--spectrum-fuchsia-700)',
|
|
144
|
+
'fuchsia-800': 'var(--spectrum-fuchsia-800)',
|
|
145
|
+
'fuchsia-900': 'var(--spectrum-fuchsia-900)',
|
|
146
|
+
'fuchsia-1000': 'var(--spectrum-fuchsia-1000)',
|
|
147
|
+
'fuchsia-1100': 'var(--spectrum-fuchsia-1100)',
|
|
148
|
+
'fuchsia-1200': 'var(--spectrum-fuchsia-1200)',
|
|
149
|
+
'fuchsia-1300': 'var(--spectrum-fuchsia-1300)',
|
|
150
|
+
'fuchsia-1400': 'var(--spectrum-fuchsia-1400)',
|
|
151
|
+
|
|
152
|
+
'indigo-100': 'var(--spectrum-indigo-100)',
|
|
153
|
+
'indigo-200': 'var(--spectrum-indigo-200)',
|
|
154
|
+
'indigo-300': 'var(--spectrum-indigo-300)',
|
|
155
|
+
'indigo-400': 'var(--spectrum-indigo-400)',
|
|
156
|
+
'indigo-500': 'var(--spectrum-indigo-500)',
|
|
157
|
+
'indigo-600': 'var(--spectrum-indigo-600)',
|
|
158
|
+
'indigo-700': 'var(--spectrum-indigo-700)',
|
|
159
|
+
'indigo-800': 'var(--spectrum-indigo-800)',
|
|
160
|
+
'indigo-900': 'var(--spectrum-indigo-900)',
|
|
161
|
+
'indigo-1000': 'var(--spectrum-indigo-1000)',
|
|
162
|
+
'indigo-1100': 'var(--spectrum-indigo-1100)',
|
|
163
|
+
'indigo-1200': 'var(--spectrum-indigo-1200)',
|
|
164
|
+
'indigo-1300': 'var(--spectrum-indigo-1300)',
|
|
165
|
+
'indigo-1400': 'var(--spectrum-indigo-1400)',
|
|
166
|
+
|
|
167
|
+
'magenta-100': 'var(--spectrum-magenta-100)',
|
|
168
|
+
'magenta-200': 'var(--spectrum-magenta-200)',
|
|
169
|
+
'magenta-300': 'var(--spectrum-magenta-300)',
|
|
170
|
+
'magenta-400': 'var(--spectrum-magenta-400)',
|
|
171
|
+
'magenta-500': 'var(--spectrum-magenta-500)',
|
|
172
|
+
'magenta-600': 'var(--spectrum-magenta-600)',
|
|
173
|
+
'magenta-700': 'var(--spectrum-magenta-700)',
|
|
174
|
+
'magenta-800': 'var(--spectrum-magenta-800)',
|
|
175
|
+
'magenta-900': 'var(--spectrum-magenta-900)',
|
|
176
|
+
'magenta-1000': 'var(--spectrum-magenta-1000)',
|
|
177
|
+
'magenta-1100': 'var(--spectrum-magenta-1100)',
|
|
178
|
+
'magenta-1200': 'var(--spectrum-magenta-1200)',
|
|
179
|
+
'magenta-1300': 'var(--spectrum-magenta-1300)',
|
|
180
|
+
'magenta-1400': 'var(--spectrum-magenta-1400)',
|
|
181
|
+
|
|
182
|
+
'purple-100': 'var(--spectrum-purple-100)',
|
|
183
|
+
'purple-200': 'var(--spectrum-purple-200)',
|
|
184
|
+
'purple-300': 'var(--spectrum-purple-300)',
|
|
185
|
+
'purple-400': 'var(--spectrum-purple-400)',
|
|
186
|
+
'purple-500': 'var(--spectrum-purple-500)',
|
|
187
|
+
'purple-600': 'var(--spectrum-purple-600)',
|
|
188
|
+
'purple-700': 'var(--spectrum-purple-700)',
|
|
189
|
+
'purple-800': 'var(--spectrum-purple-800)',
|
|
190
|
+
'purple-900': 'var(--spectrum-purple-900)',
|
|
191
|
+
'purple-1000': 'var(--spectrum-purple-1000)',
|
|
192
|
+
'purple-1100': 'var(--spectrum-purple-1100)',
|
|
193
|
+
'purple-1200': 'var(--spectrum-purple-1200)',
|
|
194
|
+
'purple-1300': 'var(--spectrum-purple-1300)',
|
|
195
|
+
'purple-1400': 'var(--spectrum-purple-1400)',
|
|
196
|
+
|
|
197
|
+
'seafoam-100': 'var(--spectrum-seafoam-100)',
|
|
198
|
+
'seafoam-200': 'var(--spectrum-seafoam-200)',
|
|
199
|
+
'seafoam-300': 'var(--spectrum-seafoam-300)',
|
|
200
|
+
'seafoam-400': 'var(--spectrum-seafoam-400)',
|
|
201
|
+
'seafoam-500': 'var(--spectrum-seafoam-500)',
|
|
202
|
+
'seafoam-600': 'var(--spectrum-seafoam-600)',
|
|
203
|
+
'seafoam-700': 'var(--spectrum-seafoam-700)',
|
|
204
|
+
'seafoam-800': 'var(--spectrum-seafoam-800)',
|
|
205
|
+
'seafoam-900': 'var(--spectrum-seafoam-900)',
|
|
206
|
+
'seafoam-1000': 'var(--spectrum-seafoam-1000)',
|
|
207
|
+
'seafoam-1100': 'var(--spectrum-seafoam-1100)',
|
|
208
|
+
'seafoam-1200': 'var(--spectrum-seafoam-1200)',
|
|
209
|
+
'seafoam-1300': 'var(--spectrum-seafoam-1300)',
|
|
210
|
+
'seafoam-1400': 'var(--spectrum-seafoam-1400)',
|
|
211
|
+
|
|
212
|
+
'yellow-100': 'var(--spectrum-yellow-100)',
|
|
213
|
+
'yellow-200': 'var(--spectrum-yellow-200)',
|
|
214
|
+
'yellow-300': 'var(--spectrum-yellow-300)',
|
|
215
|
+
'yellow-400': 'var(--spectrum-yellow-400)',
|
|
216
|
+
'yellow-500': 'var(--spectrum-yellow-500)',
|
|
217
|
+
'yellow-600': 'var(--spectrum-yellow-600)',
|
|
218
|
+
'yellow-700': 'var(--spectrum-yellow-700)',
|
|
219
|
+
'yellow-800': 'var(--spectrum-yellow-800)',
|
|
220
|
+
'yellow-900': 'var(--spectrum-yellow-900)',
|
|
221
|
+
'yellow-1000': 'var(--spectrum-yellow-1000)',
|
|
222
|
+
'yellow-1100': 'var(--spectrum-yellow-1100)',
|
|
223
|
+
'yellow-1200': 'var(--spectrum-yellow-1200)',
|
|
224
|
+
'yellow-1300': 'var(--spectrum-yellow-1300)',
|
|
225
|
+
'yellow-1400': 'var(--spectrum-yellow-1400)',
|
|
226
|
+
|
|
227
|
+
'accent-100': 'var(--spectrum-accent-color-100)',
|
|
228
|
+
'accent-200': 'var(--spectrum-accent-color-200)',
|
|
229
|
+
'accent-300': 'var(--spectrum-accent-color-300)',
|
|
230
|
+
'accent-400': 'var(--spectrum-accent-color-400)',
|
|
231
|
+
'accent-500': 'var(--spectrum-accent-color-500)',
|
|
232
|
+
'accent-600': 'var(--spectrum-accent-color-600)',
|
|
233
|
+
'accent-700': 'var(--spectrum-accent-color-700)',
|
|
234
|
+
'accent-800': 'var(--spectrum-accent-color-800)',
|
|
235
|
+
'accent-900': 'var(--spectrum-accent-color-900)',
|
|
236
|
+
'accent-1000': 'var(--spectrum-accent-color-1000)',
|
|
237
|
+
'accent-1100': 'var(--spectrum-accent-color-1100)',
|
|
238
|
+
'accent-1200': 'var(--spectrum-accent-color-1200)',
|
|
239
|
+
'accent-1300': 'var(--spectrum-accent-color-1300)',
|
|
240
|
+
'accent-1400': 'var(--spectrum-accent-color-1400)',
|
|
241
|
+
|
|
242
|
+
// High contrast mode.
|
|
243
|
+
Background: 'Background',
|
|
244
|
+
ButtonBorder: 'ButtonBorder',
|
|
245
|
+
ButtonFace: 'ButtonFace',
|
|
246
|
+
ButtonText: 'ButtonText',
|
|
247
|
+
Field: 'Field',
|
|
248
|
+
Highlight: 'Highlight',
|
|
249
|
+
HighlightText: 'HighlightText',
|
|
250
|
+
GrayText: 'GrayText',
|
|
251
|
+
Mark: 'Mark',
|
|
252
|
+
LinkText: 'LinkText'
|
|
253
|
+
};
|
|
254
|
+
|
|
255
|
+
export function baseColor(base: keyof typeof color) {
|
|
256
|
+
let keys = Object.keys(color) as (keyof typeof color)[];
|
|
257
|
+
let index = keys.indexOf(base);
|
|
258
|
+
if (index === -1) {
|
|
259
|
+
throw new Error('Invalid base color ' + base);
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
return {
|
|
263
|
+
default: base,
|
|
264
|
+
isHovered: keys[index + 1],
|
|
265
|
+
isFocusVisible: keys[index + 1],
|
|
266
|
+
isPressed: keys[index + 1]
|
|
267
|
+
};
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
export function lightDark(light: keyof typeof color, dark: keyof typeof color): `[${string}]` {
|
|
271
|
+
return `[light-dark(${color[light]}, ${color[dark]})]`;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
const baseSpacing = {
|
|
275
|
+
px: '1px',
|
|
276
|
+
0: '0px',
|
|
277
|
+
0.5: '0.125rem', // 2px - spacing-50
|
|
278
|
+
1: '0.25rem', // 4px - spacing-75
|
|
279
|
+
1.5: '0.375rem', // 6px
|
|
280
|
+
2: '0.5rem', // 8px - spacing-100
|
|
281
|
+
2.5: '0.625rem', // 10px
|
|
282
|
+
3: '0.75rem', // 12px - spacing-200
|
|
283
|
+
3.5: '0.875rem', // 14px
|
|
284
|
+
4: '1rem', // 16px - spacing-300
|
|
285
|
+
4.5: '1.125rem', // 18px
|
|
286
|
+
5: '1.25rem', // 20px
|
|
287
|
+
5.5: '1.375rem', // 22px
|
|
288
|
+
6: '1.5rem', // 24px - spacing-400
|
|
289
|
+
6.5: '1.625rem', // 26px
|
|
290
|
+
7: '1.75rem', // 28px
|
|
291
|
+
8: '2rem', // 32px - spacing-500
|
|
292
|
+
9: '2.25rem', // 36px
|
|
293
|
+
10: '2.5rem', // 40px - spacing-600
|
|
294
|
+
11: '2.75rem', // 44px
|
|
295
|
+
12: '3rem', // 48px - spacing-700
|
|
296
|
+
14: '3.5rem', // 56px
|
|
297
|
+
16: '4rem', // 64px - spacing-800
|
|
298
|
+
20: '5rem', // 80px - spacing-900
|
|
299
|
+
24: '6rem', // 96px - spacing-1000
|
|
300
|
+
28: '7rem',
|
|
301
|
+
32: '8rem',
|
|
302
|
+
36: '9rem',
|
|
303
|
+
40: '10rem',
|
|
304
|
+
44: '11rem',
|
|
305
|
+
48: '12rem',
|
|
306
|
+
52: '13rem',
|
|
307
|
+
56: '14rem',
|
|
308
|
+
60: '15rem',
|
|
309
|
+
64: '16rem',
|
|
310
|
+
72: '18rem',
|
|
311
|
+
80: '20rem',
|
|
312
|
+
96: '24rem'
|
|
313
|
+
};
|
|
314
|
+
|
|
315
|
+
const spacing = {
|
|
316
|
+
...baseSpacing,
|
|
317
|
+
|
|
318
|
+
// font-size relative values
|
|
319
|
+
'text-to-control': (10 / 14) + 'em',
|
|
320
|
+
'text-to-visual': (8 / 14) + 'em', // -> 6px, 7px, 8px, 9px, 10px
|
|
321
|
+
'edge-to-text': 'calc(self(height, self(minHeight)) * 3 / 8)',
|
|
322
|
+
'pill': 'calc(self(height, self(minHeight)) / 2)'
|
|
323
|
+
};
|
|
324
|
+
|
|
325
|
+
const scaledSpacing: {[key in keyof typeof baseSpacing]: string} =
|
|
326
|
+
Object.fromEntries(Object.entries(baseSpacing).map(([k, v]) =>
|
|
327
|
+
[k, `calc(${v} * var(--spectrum-global-dimension-scale-factor))`])
|
|
328
|
+
) as any;
|
|
329
|
+
|
|
330
|
+
const sizing = {
|
|
331
|
+
...scaledSpacing,
|
|
332
|
+
auto: 'auto',
|
|
333
|
+
'1/2': '50%',
|
|
334
|
+
'1/3': '33.333333%',
|
|
335
|
+
'2/3': '66.666667%',
|
|
336
|
+
'1/4': '25%',
|
|
337
|
+
'2/4': '50%',
|
|
338
|
+
'3/4': '75%',
|
|
339
|
+
'1/5': '20%',
|
|
340
|
+
'2/5': '40%',
|
|
341
|
+
'3/5': '60%',
|
|
342
|
+
'4/5': '80%',
|
|
343
|
+
'1/6': '16.666667%',
|
|
344
|
+
'2/6': '33.333333%',
|
|
345
|
+
'3/6': '50%',
|
|
346
|
+
'4/6': '66.666667%',
|
|
347
|
+
'5/6': '83.333333%',
|
|
348
|
+
full: '100%',
|
|
349
|
+
screen: '100vh',
|
|
350
|
+
min: 'min-content',
|
|
351
|
+
max: 'max-content',
|
|
352
|
+
fit: 'fit-content'
|
|
353
|
+
};
|
|
354
|
+
|
|
355
|
+
// TODO: make the keys into numbers in typescript somehow?
|
|
356
|
+
const negativeSpacing: {[Key in keyof typeof scaledSpacing as `-${Key}`]: (typeof scaledSpacing)[Key]} =
|
|
357
|
+
Object.fromEntries(Object.entries(scaledSpacing).map(([k, v]) =>
|
|
358
|
+
[`-${k}`, `calc(${v} * -1)`]
|
|
359
|
+
)) as any;
|
|
360
|
+
|
|
361
|
+
const margin = {
|
|
362
|
+
...spacing,
|
|
363
|
+
...negativeSpacing,
|
|
364
|
+
auto: 'auto'
|
|
365
|
+
};
|
|
366
|
+
|
|
367
|
+
const inset = {
|
|
368
|
+
...baseSpacing,
|
|
369
|
+
auto: 'auto',
|
|
370
|
+
'1/2': '50%',
|
|
371
|
+
'1/3': '33.333333%',
|
|
372
|
+
'2/3': '66.666667%',
|
|
373
|
+
'1/4': '25%',
|
|
374
|
+
'2/4': '50%',
|
|
375
|
+
'3/4': '75%',
|
|
376
|
+
full: '100%'
|
|
377
|
+
};
|
|
378
|
+
|
|
379
|
+
const borderWidth = {
|
|
380
|
+
0: '0px',
|
|
381
|
+
1: 'var(--spectrum-alias-border-size-thin)',
|
|
382
|
+
2: 'var(--spectrum-alias-border-size-thick)',
|
|
383
|
+
4: 'var(--spectrum-alias-border-size-thicker)'
|
|
384
|
+
};
|
|
385
|
+
|
|
386
|
+
const radius = {
|
|
387
|
+
none: '0px',
|
|
388
|
+
sm: 'var(--spectrum-alias-border-radius-small)',
|
|
389
|
+
default: 'var(--spectrum-alias-border-radius-regular)',
|
|
390
|
+
lg: 'var(--spectrum-alias-border-radius-medium)',
|
|
391
|
+
xl: 'var(--spectrum-alias-border-radius-large)',
|
|
392
|
+
full: '9999px',
|
|
393
|
+
pill: 'calc(self(height, self(minHeight, 9999px)) / 2)'
|
|
394
|
+
};
|
|
395
|
+
|
|
396
|
+
type GridTrack = 'none' | 'subgrid' | (string & {}) | readonly GridTrackSize[];
|
|
397
|
+
type GridTrackSize = 'auto' | 'min-content' | 'max-content' | `${number}fr` | `minmax(${string}, ${string})` | keyof typeof baseSpacing | (string & {});
|
|
398
|
+
|
|
399
|
+
let gridTrack = (value: GridTrack) => {
|
|
400
|
+
if (typeof value === 'string') {
|
|
401
|
+
return value;
|
|
402
|
+
}
|
|
403
|
+
return value.map(v => gridTrackSize(v)).join(' ');
|
|
404
|
+
};
|
|
405
|
+
|
|
406
|
+
let gridTrackSize = (value: GridTrackSize) => {
|
|
407
|
+
// @ts-ignore
|
|
408
|
+
return value in baseSpacing ? baseSpacing[value] : value;
|
|
409
|
+
};
|
|
410
|
+
|
|
411
|
+
// TODO
|
|
412
|
+
const transitionProperty = {
|
|
413
|
+
default: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, scale, filter, backdrop-filter',
|
|
414
|
+
colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
|
|
415
|
+
opacity: 'opacity',
|
|
416
|
+
shadow: 'box-shadow',
|
|
417
|
+
transform: 'transform',
|
|
418
|
+
all: 'all',
|
|
419
|
+
none: 'none'
|
|
420
|
+
};
|
|
421
|
+
|
|
422
|
+
// TODO
|
|
423
|
+
const timingFunction = {
|
|
424
|
+
default: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
425
|
+
linear: 'linear',
|
|
426
|
+
in: 'cubic-bezier(0.4, 0, 1, 1)',
|
|
427
|
+
out: 'cubic-bezier(0, 0, 0.2, 1)',
|
|
428
|
+
'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)'
|
|
429
|
+
};
|
|
430
|
+
|
|
431
|
+
// TODO: do these need tokens or are arbitrary values ok?
|
|
432
|
+
let durationProperty = createArbitraryProperty((value: number | string, property) => ({[property]: typeof value === 'number' ? value + 'ms' : value}));
|
|
433
|
+
|
|
434
|
+
const colorWithAlpha = createColorProperty(color);
|
|
435
|
+
|
|
436
|
+
export const style = createTheme({
|
|
437
|
+
properties: {
|
|
438
|
+
// colors
|
|
439
|
+
color: createColorProperty({
|
|
440
|
+
...color,
|
|
441
|
+
disabled: 'var(--spectrum-alias-text-color-disabled)',
|
|
442
|
+
heading: 'var(--spectrum-alias-title-text-color)',
|
|
443
|
+
body: 'var(--spectrum-alias-text-color)'
|
|
444
|
+
}),
|
|
445
|
+
backgroundColor: createColorProperty({
|
|
446
|
+
...color,
|
|
447
|
+
accent: {
|
|
448
|
+
default: 'var(--spectrum-accent-background-color-default)',
|
|
449
|
+
isHovered: 'var(--spectrum-accent-background-color-hover)',
|
|
450
|
+
isFocusVisible: 'var(--spectrum-accent-background-color-key-focus)',
|
|
451
|
+
isPressed: 'var(--spectrum-accent-background-color-down)'
|
|
452
|
+
},
|
|
453
|
+
neutral: {
|
|
454
|
+
default: 'var(--spectrum-neutral-background-color-default)',
|
|
455
|
+
isHovered: 'var(--spectrum-neutral-background-color-hover)',
|
|
456
|
+
isFocusVisible: 'var(--spectrum-neutral-background-color-key-focus)',
|
|
457
|
+
isPressed: 'var(--spectrum-neutral-background-color-down)'
|
|
458
|
+
},
|
|
459
|
+
'neutral-subdued': {
|
|
460
|
+
default: 'var(--spectrum-neutral-subdued-background-color-default)',
|
|
461
|
+
isHovered: 'var(--spectrum-neutral-subdued-background-color-hover)',
|
|
462
|
+
isFocusVisible: 'var(--spectrum-neutral-subdued-background-color-key-focus)',
|
|
463
|
+
isPressed: 'var(--spectrum-neutral-subdued-background-color-down)'
|
|
464
|
+
},
|
|
465
|
+
negative: {
|
|
466
|
+
default: 'var(--spectrum-negative-background-color-default)',
|
|
467
|
+
isHovered: 'var(--spectrum-negative-background-color-hover)',
|
|
468
|
+
isFocusVisible: 'var(--spectrum-negative-background-color-key-focus)',
|
|
469
|
+
isPressed: 'var(--spectrum-negative-background-color-down)'
|
|
470
|
+
},
|
|
471
|
+
informative: {
|
|
472
|
+
default: 'var(--spectrum-informative-background-color-default)',
|
|
473
|
+
isHovered: 'var(--spectrum-informative-background-color-hover)',
|
|
474
|
+
isFocusVisible: 'var(--spectrum-informative-background-color-key-focus)',
|
|
475
|
+
isPressed: 'var(--spectrum-informative-background-color-down)'
|
|
476
|
+
},
|
|
477
|
+
positive: {
|
|
478
|
+
default: 'var(--spectrum-positive-background-color-default)',
|
|
479
|
+
isHovered: 'var(--spectrum-positive-background-color-hover)',
|
|
480
|
+
isFocusVisible: 'var(--spectrum-positive-background-color-key-focus)',
|
|
481
|
+
isPressed: 'var(--spectrum-positive-background-color-down)'
|
|
482
|
+
},
|
|
483
|
+
gray: 'var(--spectrum-gray-background-color-default)',
|
|
484
|
+
red: 'var(--spectrum-red-background-color-default)',
|
|
485
|
+
orange: 'var(--spectrum-orange-background-color-default)',
|
|
486
|
+
yellow: 'var(--spectrum-yellow-background-color-default)',
|
|
487
|
+
chartreuse: 'var(--spectrum-chartreuse-background-color-default)',
|
|
488
|
+
celery: 'var(--spectrum-celery-background-color-default)',
|
|
489
|
+
green: 'var(--spectrum-green-background-color-default)',
|
|
490
|
+
seafoam: 'var(--spectrum-seafoam-background-color-default)',
|
|
491
|
+
cyan: 'var(--spectrum-cyan-background-color-default)',
|
|
492
|
+
blue: 'var(--spectrum-blue-background-color-default)',
|
|
493
|
+
indigo: 'var(--spectrum-indigo-background-color-default)',
|
|
494
|
+
purple: 'var(--spectrum-purple-background-color-default)',
|
|
495
|
+
fuchsia: 'var(--spectrum-fuchsia-background-color-default)',
|
|
496
|
+
magenta: 'var(--spectrum-magenta-background-color-default)',
|
|
497
|
+
disabled: 'var(--spectrum-alias-background-color-disabled)'
|
|
498
|
+
}),
|
|
499
|
+
borderColor: createColorProperty({
|
|
500
|
+
...color,
|
|
501
|
+
negative: 'var(--spectrum-semantic-negative-color-border)',
|
|
502
|
+
disabled: 'var(--spectrum-alias-border-color-disabled)'
|
|
503
|
+
// forcedColors: 'GrayText'
|
|
504
|
+
|
|
505
|
+
}),
|
|
506
|
+
outlineColor: createColorProperty({
|
|
507
|
+
...color,
|
|
508
|
+
'focus-ring': {
|
|
509
|
+
default: 'var(--spectrum-alias-focus-color)',
|
|
510
|
+
forcedColors: 'Highlight'
|
|
511
|
+
}
|
|
512
|
+
}),
|
|
513
|
+
textDecorationColor: colorWithAlpha,
|
|
514
|
+
accentColor: colorWithAlpha,
|
|
515
|
+
caretColor: colorWithAlpha,
|
|
516
|
+
fill: createColorProperty({
|
|
517
|
+
none: 'none',
|
|
518
|
+
currentColor: 'currentColor',
|
|
519
|
+
negative: 'var(--spectrum-negative-visual-color)',
|
|
520
|
+
informative: 'var(--spectrum-informative-visual-color)',
|
|
521
|
+
positive: 'var(--spectrum-positive-visual-color)',
|
|
522
|
+
notice: 'var(--spectrum-notice-visual-color)',
|
|
523
|
+
gray: 'var(--spectrum-gray-visual-color)',
|
|
524
|
+
red: 'var(--spectrum-red-visual-color)',
|
|
525
|
+
orange: 'var(--spectrum-orange-visual-color)',
|
|
526
|
+
yellow: 'var(--spectrum-yellow-visual-color)',
|
|
527
|
+
chartreuse: 'var(--spectrum-chartreuse-visual-color)',
|
|
528
|
+
celery: 'var(--spectrum-celery-visual-color)',
|
|
529
|
+
green: 'var(--spectrum-green-visual-color)',
|
|
530
|
+
seafoam: 'var(--spectrum-seafoam-visual-color)',
|
|
531
|
+
cyan: 'var(--spectrum-cyan-visual-color)',
|
|
532
|
+
blue: 'var(--spectrum-blue-visual-color)',
|
|
533
|
+
indigo: 'var(--spectrum-indigo-visual-color)',
|
|
534
|
+
purple: 'var(--spectrum-purple-visual-color)',
|
|
535
|
+
fuchsia: 'var(--spectrum-fuchsia-visual-color)',
|
|
536
|
+
magenta: 'var(--spectrum-magenta-visual-color)',
|
|
537
|
+
...color
|
|
538
|
+
}),
|
|
539
|
+
stroke: createColorProperty({
|
|
540
|
+
none: 'none',
|
|
541
|
+
currentColor: 'currentColor',
|
|
542
|
+
...color
|
|
543
|
+
}),
|
|
544
|
+
|
|
545
|
+
// dimensions
|
|
546
|
+
borderSpacing: baseSpacing, // TODO: separate x and y
|
|
547
|
+
flexBasis: {
|
|
548
|
+
auto: 'auto',
|
|
549
|
+
full: '100%',
|
|
550
|
+
...baseSpacing
|
|
551
|
+
},
|
|
552
|
+
rowGap: spacing,
|
|
553
|
+
columnGap: spacing,
|
|
554
|
+
height: sizing,
|
|
555
|
+
width: sizing,
|
|
556
|
+
minHeight: sizing,
|
|
557
|
+
maxHeight: {
|
|
558
|
+
...sizing,
|
|
559
|
+
none: 'none'
|
|
560
|
+
},
|
|
561
|
+
minWidth: sizing,
|
|
562
|
+
maxWidth: {
|
|
563
|
+
...sizing,
|
|
564
|
+
none: 'none'
|
|
565
|
+
},
|
|
566
|
+
borderWidth,
|
|
567
|
+
borderStartWidth: createMappedProperty(value => ({borderInlineStartWidth: value}), borderWidth),
|
|
568
|
+
borderEndWidth: createMappedProperty(value => ({borderInlineEndWidth: value}), borderWidth),
|
|
569
|
+
borderTopWidth: borderWidth,
|
|
570
|
+
borderBottomWidth: borderWidth,
|
|
571
|
+
borderXWidth: createMappedProperty(value => ({borderInlineWidth: value}), borderWidth),
|
|
572
|
+
borderYWidth: createMappedProperty(value => ({borderBlockWidth: value}), borderWidth),
|
|
573
|
+
borderStyle: ['solid', 'dashed', 'dotted', 'double', 'hidden', 'none'] as const,
|
|
574
|
+
strokeWidth: {
|
|
575
|
+
0: '0',
|
|
576
|
+
1: '1',
|
|
577
|
+
2: '2'
|
|
578
|
+
},
|
|
579
|
+
marginStart: createMappedProperty(value => ({marginInlineStart: value}), margin),
|
|
580
|
+
marginEnd: createMappedProperty(value => ({marginInlineEnd: value}), margin),
|
|
581
|
+
marginTop: margin,
|
|
582
|
+
marginBottom: margin,
|
|
583
|
+
paddingStart: createMappedProperty(value => ({paddingInlineStart: value}), spacing),
|
|
584
|
+
paddingEnd: createMappedProperty(value => ({paddingInlineEnd: value}), spacing),
|
|
585
|
+
paddingTop: spacing,
|
|
586
|
+
paddingBottom: spacing,
|
|
587
|
+
scrollMarginStart: createMappedProperty(value => ({scrollMarginInlineStart: value}), baseSpacing),
|
|
588
|
+
scrollMarginEnd: createMappedProperty(value => ({scrollMarginInlineEnd: value}), baseSpacing),
|
|
589
|
+
scrollMarginTop: baseSpacing,
|
|
590
|
+
scrollMarginBottom: baseSpacing,
|
|
591
|
+
scrollPaddingStart: createMappedProperty(value => ({scrollPaddingInlineStart: value}), baseSpacing),
|
|
592
|
+
scrollPaddingEnd: createMappedProperty(value => ({scrollPaddingInlineEnd: value}), baseSpacing),
|
|
593
|
+
scrollPaddingTop: baseSpacing,
|
|
594
|
+
scrollPaddingBottom: baseSpacing,
|
|
595
|
+
textIndent: baseSpacing,
|
|
596
|
+
translate: {
|
|
597
|
+
...baseSpacing,
|
|
598
|
+
...negativeSpacing,
|
|
599
|
+
'1/2': '50%',
|
|
600
|
+
'1/3': '33.333333%',
|
|
601
|
+
'2/3': '66.666667%',
|
|
602
|
+
'1/4': '25%',
|
|
603
|
+
'2/4': '50%',
|
|
604
|
+
'3/4': '75%',
|
|
605
|
+
full: '100%'
|
|
606
|
+
},
|
|
607
|
+
rotate: createArbitraryProperty((value: number | `${number}deg` | `${number}rad` | `${number}grad` | `${number}turn`) => ({rotate: typeof value === 'number' ? `${value}deg` : value})),
|
|
608
|
+
scale: createArbitraryProperty((value: number) => ({scale: value})),
|
|
609
|
+
transform: createArbitraryProperty((value: string) => ({transform: value})),
|
|
610
|
+
position: ['absolute', 'fixed', 'relative', 'sticky', 'static'] as const,
|
|
611
|
+
insetStart: createMappedProperty(value => ({insetInlineStart: value}), inset),
|
|
612
|
+
insetEnd: createMappedProperty(value => ({insetInlineEnd: value}), inset),
|
|
613
|
+
top: inset,
|
|
614
|
+
left: inset,
|
|
615
|
+
bottom: inset,
|
|
616
|
+
right: inset,
|
|
617
|
+
aspectRatio: {
|
|
618
|
+
auto: 'auto',
|
|
619
|
+
square: '1 / 1',
|
|
620
|
+
video: '16 / 9'
|
|
621
|
+
},
|
|
622
|
+
|
|
623
|
+
// text
|
|
624
|
+
fontFamily: {
|
|
625
|
+
sans: {
|
|
626
|
+
default: 'adobe-clean, ui-sans-serif, system-ui, sans-serif',
|
|
627
|
+
':lang(ar)': 'myriad-arabic, ui-sans-serif, system-ui, sans-serif',
|
|
628
|
+
':lang(he)': 'myriad-hebrew, ui-sans-serif, system-ui, sans-serif',
|
|
629
|
+
':lang(ja)': "adobe-clean-han-japanese, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Osaka, YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif",
|
|
630
|
+
':lang(ko)': "adobe-clean-han-korean, source-han-korean, 'Malgun Gothic', 'Apple Gothic', sans-serif",
|
|
631
|
+
':lang(zh)': "adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Heiti TC Light', sans-serif",
|
|
632
|
+
// TODO: are these fallbacks supposed to be different than above?
|
|
633
|
+
':lang(zh-hant)': "adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Heiti TC Light', sans-serif",
|
|
634
|
+
':lang(zh-Hans, zh-CN, zh-SG)': "adobe-clean-han-simplified-c, source-han-simplified-c, 'SimSun', 'Heiti SC Light', sans-serif"
|
|
635
|
+
},
|
|
636
|
+
serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
|
|
637
|
+
mono: 'ui-monospace, Menlo, Monaco, Consalas, "Courier New", monospace'
|
|
638
|
+
},
|
|
639
|
+
fontSize: {
|
|
640
|
+
xs: 'var(--spectrum-global-dimension-font-size-50)',
|
|
641
|
+
sm: 'var(--spectrum-global-dimension-font-size-75)',
|
|
642
|
+
base: 'var(--spectrum-global-dimension-font-size-100)',
|
|
643
|
+
lg: 'var(--spectrum-global-dimension-font-size-200)',
|
|
644
|
+
xl: 'var(--spectrum-global-dimension-font-size-300)',
|
|
645
|
+
'2xl': 'var(--spectrum-global-dimension-font-size-400)',
|
|
646
|
+
'3xl': 'var(--spectrum-global-dimension-font-size-500)'
|
|
647
|
+
},
|
|
648
|
+
fontWeight: {
|
|
649
|
+
thin: '100',
|
|
650
|
+
extralight: '200',
|
|
651
|
+
light: '300',
|
|
652
|
+
normal: '400',
|
|
653
|
+
medium: '500',
|
|
654
|
+
semibold: '600',
|
|
655
|
+
bold: '700',
|
|
656
|
+
extrabold: '800',
|
|
657
|
+
black: '900'
|
|
658
|
+
},
|
|
659
|
+
fontStyle: ['normal', 'italic'] as const,
|
|
660
|
+
lineHeight: {
|
|
661
|
+
// TODO: naming
|
|
662
|
+
100: 'var(--spectrum-global-font-line-height-small)',
|
|
663
|
+
200: 'var(--spectrum-global-font-line-height-medium)'
|
|
664
|
+
},
|
|
665
|
+
listStyleType: ['none', 'dist', 'decimal'] as const,
|
|
666
|
+
listStylePosition: ['inside', 'outside'] as const,
|
|
667
|
+
textTransform: ['uppercase', 'lowercase', 'capitalize', 'none'] as const,
|
|
668
|
+
textAlign: ['start', 'center', 'end', 'justify'] as const,
|
|
669
|
+
verticalAlign: ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super'] as const,
|
|
670
|
+
textDecoration: createMappedProperty((value) => ({
|
|
671
|
+
textDecoration: value === 'none' ? 'none' : `${value} 1px`,
|
|
672
|
+
textUnderlineOffset: value === 'underline' ? '1px' : undefined
|
|
673
|
+
}), ['underline', 'overline', 'line-through', 'none'] as const),
|
|
674
|
+
textOverflow: ['ellipsis', 'clip'] as const,
|
|
675
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
676
|
+
truncate: createArbitraryProperty((_value: true) => ({
|
|
677
|
+
overflow: 'hidden',
|
|
678
|
+
textOverflow: 'ellipsis',
|
|
679
|
+
whiteSpace: 'nowrap'
|
|
680
|
+
})),
|
|
681
|
+
lineClamp: createArbitraryProperty((value: number) => ({
|
|
682
|
+
overflow: 'hidden',
|
|
683
|
+
display: '-webkit-box',
|
|
684
|
+
'-webkit-box-orient': 'vertical',
|
|
685
|
+
'-webkit-line-clamp': value
|
|
686
|
+
})),
|
|
687
|
+
hyphens: ['none', 'manual', 'auto'] as const,
|
|
688
|
+
whiteSpace: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'] as const,
|
|
689
|
+
textWrap: ['wrap', 'nowrap', 'balance', 'pretty'] as const,
|
|
690
|
+
wordBreak: ['normal', 'break-all', 'keep-all'] as const, // also overflowWrap??
|
|
691
|
+
boxDecorationBreak: ['slice', 'clone'] as const,
|
|
692
|
+
|
|
693
|
+
// effects
|
|
694
|
+
boxShadow: {
|
|
695
|
+
// TODO: these are not real.
|
|
696
|
+
sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
|
697
|
+
default: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
|
|
698
|
+
md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
|
|
699
|
+
lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
|
|
700
|
+
xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
|
|
701
|
+
'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
|
|
702
|
+
inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
|
|
703
|
+
none: 'none'
|
|
704
|
+
},
|
|
705
|
+
borderTopStartRadius: createMappedProperty(value => ({borderStartStartRadius: value}), radius),
|
|
706
|
+
borderTopEndRadius: createMappedProperty(value => ({borderStartEndRadius: value}), radius),
|
|
707
|
+
borderBottomStartRadius: createMappedProperty(value => ({borderEndStartRadius: value}), radius),
|
|
708
|
+
borderBottomEndRadius: createMappedProperty(value => ({borderEndEndRadius: value}), radius),
|
|
709
|
+
forcedColorAdjust: ['auto', 'none'] as const,
|
|
710
|
+
colorScheme: ['light', 'dark', 'light dark'] as const,
|
|
711
|
+
backgroundPosition: ['bottom', 'center', 'left', 'left bottom', 'left top', 'right', 'right bottom', 'right top', 'top'] as const,
|
|
712
|
+
backgroundSize: ['auto', 'cover', 'contain'] as const,
|
|
713
|
+
backgroundAttachment: ['fixed', 'local', 'scroll'] as const,
|
|
714
|
+
backgroundClip: ['border-box', 'padding-box', 'content-box', 'text'] as const,
|
|
715
|
+
backgroundRepeat: ['repeat', 'no-repeat', 'repeat-x', 'repeat-y', 'round', 'space'] as const,
|
|
716
|
+
backgroundOrigin: ['border-box', 'padding-box', 'content-box'] as const,
|
|
717
|
+
backgroundBlendMode: ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'] as const,
|
|
718
|
+
mixBlendMode: ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'plus-darker', 'plus-lighter'] as const,
|
|
719
|
+
opacity: createArbitraryProperty((value: number) => ({opacity: value})),
|
|
720
|
+
|
|
721
|
+
outlineStyle: ['none', 'solid', 'dashed', 'dotted', 'double'] as const,
|
|
722
|
+
outlineOffset: borderWidth,
|
|
723
|
+
outlineWidth: borderWidth,
|
|
724
|
+
|
|
725
|
+
transition: createMappedProperty(value => ({
|
|
726
|
+
transitionProperty: value,
|
|
727
|
+
transitionDuration: '150ms',
|
|
728
|
+
transitionTimingFunction: timingFunction.default
|
|
729
|
+
}), transitionProperty),
|
|
730
|
+
transitionDelay: durationProperty,
|
|
731
|
+
transitionDuration: durationProperty,
|
|
732
|
+
transitionTimingFunction: timingFunction,
|
|
733
|
+
animation: createArbitraryProperty((value: string) => ({
|
|
734
|
+
animationName: value,
|
|
735
|
+
animationDuration: '150ms',
|
|
736
|
+
animationTimingFunction: timingFunction.default
|
|
737
|
+
})),
|
|
738
|
+
animationDuration: durationProperty,
|
|
739
|
+
animationDelay: durationProperty,
|
|
740
|
+
animationDirection: ['normal', 'reverse', 'alternate', 'alternate-reverse'] as const,
|
|
741
|
+
animationFillMode: ['none', 'forwards', 'backwards', 'both'] as const,
|
|
742
|
+
animationIterationCount: createArbitraryProperty((value: string) => ({animationIterationCount: value})),
|
|
743
|
+
animationTimingFunction: timingFunction,
|
|
744
|
+
|
|
745
|
+
// layout
|
|
746
|
+
display: ['block', 'inline-block', 'inline', 'flex', 'inline-flex', 'grid', 'inline-grid', 'contents', 'list-item', 'none'] as const, // tables?
|
|
747
|
+
alignContent: ['normal', 'center', 'start', 'end', 'space-between', 'space-around', 'space-evenly', 'baseline', 'stretch'] as const,
|
|
748
|
+
alignItems: ['start', 'end', 'center', 'baseline', 'stretch'] as const,
|
|
749
|
+
justifyContent: ['normal', 'start', 'end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch'] as const,
|
|
750
|
+
justifyItems: ['start', 'end', 'center', 'stretch'] as const,
|
|
751
|
+
alignSelf: ['auto', 'start', 'end', 'center', 'stretch', 'baseline'] as const,
|
|
752
|
+
justifySelf: ['auto', 'start', 'end', 'center', 'stretch'] as const,
|
|
753
|
+
flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'] as const,
|
|
754
|
+
flexWrap: ['wrap', 'wrap-reverse', 'nowrap'] as const,
|
|
755
|
+
flex: createArbitraryProperty((value: CSS.Property.Flex, property) => ({[property]: value})),
|
|
756
|
+
flexShrink: createArbitraryProperty((value: CSS.Property.FlexShrink, property) => ({[property]: value})),
|
|
757
|
+
flexGrow: createArbitraryProperty((value: CSS.Property.FlexGrow, property) => ({[property]: value})),
|
|
758
|
+
gridColumn: createArbitraryProperty((value: CSS.Property.GridColumn, property) => ({[property]: value})),
|
|
759
|
+
gridColumnStart: createArbitraryProperty((value: CSS.Property.GridColumnStart, property) => ({[property]: value})),
|
|
760
|
+
gridColumnEnd: createArbitraryProperty((value: CSS.Property.GridColumnEnd, property) => ({[property]: value})),
|
|
761
|
+
gridRow: createArbitraryProperty((value: CSS.Property.GridRow, property) => ({[property]: value})),
|
|
762
|
+
gridRowStart: createArbitraryProperty((value: CSS.Property.GridRowStart, property) => ({[property]: value})),
|
|
763
|
+
gridRowEnd: createArbitraryProperty((value: CSS.Property.GridRowEnd, property) => ({[property]: value})),
|
|
764
|
+
gridAutoFlow: ['row', 'column', 'dense', 'row dense', 'column dense'] as const,
|
|
765
|
+
gridAutoRows: createArbitraryProperty((value: GridTrackSize, property) => ({[property]: gridTrackSize(value)})),
|
|
766
|
+
gridAutoColumns: createArbitraryProperty((value: GridTrackSize, property) => ({[property]: gridTrackSize(value)})),
|
|
767
|
+
gridTemplateColumns: createArbitraryProperty((value: GridTrack, property) => ({[property]: gridTrack(value)})),
|
|
768
|
+
gridTemplateRows: createArbitraryProperty((value: GridTrack, property) => ({[property]: gridTrack(value)})),
|
|
769
|
+
gridTemplateAreas: createArbitraryProperty((value: readonly string[], property) => ({[property]: value.map(v => `"${v}"`).join('')})),
|
|
770
|
+
gridArea: createArbitraryProperty((value: string, property) => ({[property]: value})),
|
|
771
|
+
float: ['inline-start', 'inline-end', 'right', 'left', 'none'] as const,
|
|
772
|
+
clear: ['inline-start', 'inline-end', 'left', 'right', 'both', 'none'] as const,
|
|
773
|
+
contain: ['none', 'strict', 'content', 'size', 'inline-size', 'layout', 'style', 'paint'] as const,
|
|
774
|
+
boxSizing: ['border-box', 'content-box'] as const,
|
|
775
|
+
tableLayout: ['auto', 'fixed'] as const,
|
|
776
|
+
captionSide: ['top', 'bottom'] as const,
|
|
777
|
+
borderCollapse: ['collapse', 'separate'] as const,
|
|
778
|
+
columns: {
|
|
779
|
+
auto: 'auto',
|
|
780
|
+
1: '1',
|
|
781
|
+
2: '2',
|
|
782
|
+
3: '3',
|
|
783
|
+
4: '4',
|
|
784
|
+
5: '5',
|
|
785
|
+
6: '6',
|
|
786
|
+
7: '7',
|
|
787
|
+
8: '8',
|
|
788
|
+
9: '9',
|
|
789
|
+
10: '10',
|
|
790
|
+
11: '11',
|
|
791
|
+
12: '12',
|
|
792
|
+
'3xs': '16rem',
|
|
793
|
+
'2xs': '18rem',
|
|
794
|
+
xs: '20rem',
|
|
795
|
+
sm: '24rem',
|
|
796
|
+
md: '28rem',
|
|
797
|
+
lg: '32rem',
|
|
798
|
+
xl: '36rem',
|
|
799
|
+
'2xl': '42rem',
|
|
800
|
+
'3xl': '48rem',
|
|
801
|
+
'4xl': '56rem',
|
|
802
|
+
'5xl': '64rem',
|
|
803
|
+
'6xl': '72rem',
|
|
804
|
+
'7xl': '80rem'
|
|
805
|
+
},
|
|
806
|
+
breakBefore: ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'] as const,
|
|
807
|
+
breakInside: ['auto', 'avoid', 'avoid-page', 'avoid-column'] as const,
|
|
808
|
+
breakAfter: ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'] as const,
|
|
809
|
+
overflowX: ['auto', 'hidden', 'clip', 'visible', 'scroll'] as const,
|
|
810
|
+
overflowY: ['auto', 'hidden', 'clip', 'visible', 'scroll'] as const,
|
|
811
|
+
overscrollBehaviorX: ['auto', 'contain', 'none'] as const,
|
|
812
|
+
overscrollBehaviorY: ['auto', 'contain', 'none'] as const,
|
|
813
|
+
scrollBehavior: ['auto', 'smooth'] as const,
|
|
814
|
+
order: createArbitraryProperty((value: number) => ({order: value})),
|
|
815
|
+
|
|
816
|
+
pointerEvents: ['none', 'auto'] as const,
|
|
817
|
+
touchAction: ['auto', 'none', 'pan-x', 'pan-y', 'manipulation', 'pinch-zoom'] as const,
|
|
818
|
+
userSelect: ['none', 'text', 'all', 'auto'] as const,
|
|
819
|
+
visibility: ['visible', 'hidden', 'collapse'] as const,
|
|
820
|
+
isolation: ['isolate', 'auto'] as const,
|
|
821
|
+
transformOrigin: ['center', 'top', 'top right', 'right', 'bottom right', 'bottom', 'bottom left', 'left', 'top right'] as const,
|
|
822
|
+
cursor: ['auto', 'default', 'pointer', 'wait', 'text', 'move', 'help', 'not-allowed', 'none', 'context-menu', 'progress', 'cell', 'crosshair', 'vertical-text', 'alias', 'copy', 'no-drop', 'grab', 'grabbing', 'all-scroll', 'col-resize', 'row-resize', 'n-resize', 'e-resize', 's-resize', 'w-resize', 'ne-resize', 'nw-resize', 'se-resize', 'ew-resize', 'ns-resize', 'nesw-resize', 'nwse-resize', 'zoom-in', 'zoom-out'] as const,
|
|
823
|
+
resize: ['none', 'vertical', 'horizontal', 'both'] as const,
|
|
824
|
+
scrollSnapType: ['x', 'y', 'both', 'x mandatory', 'y mandatory', 'both mandatory'] as const,
|
|
825
|
+
scrollSnapAlign: ['start', 'end', 'center', 'none'] as const,
|
|
826
|
+
scrollSnapStop: ['normal', 'always'] as const,
|
|
827
|
+
appearance: ['none', 'auto'] as const,
|
|
828
|
+
objectFit: ['contain', 'cover', 'fill', 'none', 'scale-down'] as const,
|
|
829
|
+
objectPosition: ['bottom', 'center', 'left', 'left bottom', 'left top', 'right', 'right bottom', 'right top', 'top'] as const,
|
|
830
|
+
willChange: ['auto', 'scroll-position', 'contents', 'transform'] as const,
|
|
831
|
+
zIndex: createArbitraryProperty((value: number) => ({zIndex: value}))
|
|
832
|
+
},
|
|
833
|
+
shorthands: {
|
|
834
|
+
padding: ['paddingTop', 'paddingBottom', 'paddingStart', 'paddingEnd'] as const,
|
|
835
|
+
paddingX: ['paddingStart', 'paddingEnd'] as const,
|
|
836
|
+
paddingY: ['paddingTop', 'paddingBottom'] as const,
|
|
837
|
+
margin: ['marginTop', 'marginBottom', 'marginStart', 'marginEnd'] as const,
|
|
838
|
+
marginX: ['marginStart', 'marginEnd'] as const,
|
|
839
|
+
marginY: ['marginTop', 'marginBottom'] as const,
|
|
840
|
+
scrollPadding: ['scrollPaddingTop', 'scrollPaddingBottom', 'scrollPaddingStart', 'scrollPaddingEnd'] as const,
|
|
841
|
+
scrollPaddingX: ['scrollPaddingStart', 'scrollPaddingEnd'] as const,
|
|
842
|
+
scrollPaddingY: ['scrollPaddingTop', 'scrollPaddingBottom'] as const,
|
|
843
|
+
scrollMargin: ['scrollMarginTop', 'scrollMarginBottom', 'scrollMarginStart', 'scrollMarginEnd'] as const,
|
|
844
|
+
scrollMarginX: ['scrollMarginStart', 'scrollMarginEnd'] as const,
|
|
845
|
+
scrollMarginY: ['scrollMarginTop', 'scrollMarginBottom'] as const,
|
|
846
|
+
borderWidth: ['borderTopWidth', 'borderBottomWidth', 'borderStartWidth', 'borderEndWidth'] as const,
|
|
847
|
+
borderXWidth: ['borderStartWidth', 'borderEndWidth'] as const,
|
|
848
|
+
borderYWidth: ['borderTopWidth', 'borderBottomWidth'] as const,
|
|
849
|
+
borderRadius: ['borderTopStartRadius', 'borderTopEndRadius', 'borderBottomStartRadius', 'borderBottomEndRadius'] as const,
|
|
850
|
+
borderTopRadius: ['borderTopStartRadius', 'borderTopEndRadius'] as const,
|
|
851
|
+
borderBottomRadius: ['borderBottomStartRadius', 'borderBottomEndRadius'] as const,
|
|
852
|
+
borderStartRadius: ['borderTopStartRadius', 'borderBottomStartRadius'] as const,
|
|
853
|
+
borderEndRadius: ['borderTopEndRadius', 'borderBottomEndRadius'] as const,
|
|
854
|
+
inset: ['top', 'bottom', 'left', 'right'] as const,
|
|
855
|
+
insetX: ['insetStart', 'insetEnd'] as const,
|
|
856
|
+
insetY: ['top', 'bottom'] as const,
|
|
857
|
+
placeItems: ['alignItems', 'justifyItems'] as const,
|
|
858
|
+
placeContent: ['alignContent', 'justifyContent'] as const,
|
|
859
|
+
placeSelf: ['alignSelf', 'justifySelf'] as const,
|
|
860
|
+
gap: ['rowGap', 'columnGap'] as const,
|
|
861
|
+
size: ['width', 'height'] as const,
|
|
862
|
+
overflow: ['overflowX', 'overflowY'] as const,
|
|
863
|
+
overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'] as const
|
|
864
|
+
},
|
|
865
|
+
conditions: {
|
|
866
|
+
forcedColors: '@media (forced-colors: active)',
|
|
867
|
+
// TODO
|
|
868
|
+
sm: '@media (min-width: 640px)',
|
|
869
|
+
md: '@media (min-width: 768px)',
|
|
870
|
+
lg: '@media (min-width: 1024px)',
|
|
871
|
+
xl: '@media (min-width: 1280px)',
|
|
872
|
+
'2xl': '@media (min-width: 1536px)'
|
|
873
|
+
}
|
|
874
|
+
});
|