@photonix/basic 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/index.css +871 -0
  2. package/dist/index.js +8094 -6
  3. package/dist/index.mjs +8102 -5
  4. package/package.json +20 -9
  5. package/.turbo/turbo-build.log +0 -22
  6. package/dist/index.js.map +0 -1
  7. package/dist/index.mjs.map +0 -1
  8. package/src/index.ts +0 -6
  9. package/tsconfig.json +0 -14
  10. package/tsup.config.ts +0 -10
package/dist/index.css ADDED
@@ -0,0 +1,871 @@
1
+ /* ../ui/src/styles/tokens.css */
2
+ :root {
3
+ --lg-dialog-max-height: 700px;
4
+ --md-dialog-max-height: 810px;
5
+ --sm-dialog-max-height: 598px;
6
+ --xl-dialog-max-height: 880px;
7
+ --color-gray-0: #fff;
8
+ --color-gray-50: #f7f7f7;
9
+ --color-gray-100: #f2f2f2;
10
+ --color-gray-200: #ebebeb;
11
+ --color-gray-300: #ddd;
12
+ --color-gray-400: #b0b0b0;
13
+ --color-gray-500: #929292;
14
+ --color-gray-600: #8c8c8c;
15
+ --color-gray-700: #6a6a6a;
16
+ --color-gray-800: #3f3f3f;
17
+ --color-gray-850: #222;
18
+ --color-gray-900: #1a1a1a;
19
+ --color-gray-950: #111;
20
+ --color-gray-1000: #000;
21
+ --color-primary-95: #e1f1fc;
22
+ --color-primary-100: #b6dcf9;
23
+ --color-primary-200: #87c7f6;
24
+ --color-primary-300: #53b1f3;
25
+ --color-primary-400: #1da0f2;
26
+ --color-primary-500: #0091f0;
27
+ --color-primary-600: #0083e2;
28
+ --color-primary-700: #0071d0;
29
+ --color-primary-800: #0060be;
30
+ --color-primary-900: #00439f;
31
+ --color-red-on-dark-500-on-dark: #ff453a;
32
+ --color-red-on-dark-900-on-dark: #50271f;
33
+ --color-orange-100-on-light: #ffe2cf;
34
+ --color-orange-500-on-light: #ff9500;
35
+ --color-orange-600-on-light: #b07119;
36
+ --color-orange-500-on-dark: #ff9f0a;
37
+ --color-orange-900-on-dark: #503823;
38
+ --color-yellow-100-on-light: #fef0ce;
39
+ --color-yellow-500-on-light: #fc0;
40
+ --color-yellow-700-on-light: #bb7c00;
41
+ --color-yellow-400-on-dark: #ffd60a;
42
+ --color-yellow-900-on-dark: #514725;
43
+ --color-green-100-on-light: #dbf6d3;
44
+ --color-green-500-on-light: #34c759;
45
+ --color-green-600-on-light: #339549;
46
+ --color-green-450-on-dark: #32d74b;
47
+ --color-green-500-on-dark: #30d158;
48
+ --color-green-900-on-dark: #2c4729;
49
+ --color-mint-100-on-light: #def9f8;
50
+ --color-mint-500-on-light: #00c7be;
51
+ --color-mint-600-on-light: #3a8b88;
52
+ --color-mint-300-on-dark: #63e6e2;
53
+ --color-mint-900-on-dark: #314946;
54
+ --color-teal-100-on-light: #ddf1f6;
55
+ --color-teal-400-on-light: #30b0c7;
56
+ --color-teal-500-on-light: #467d8c;
57
+ --color-teal-350-on-dark: #6ac4dc;
58
+ --color-teal-400-on-dark: #40cbe0;
59
+ --color-teal-900-on-dark: #314043;
60
+ --color-cyan-100-on-light: #d4feff;
61
+ --color-cyan-400-on-light: #32ade6;
62
+ --color-cyan-500-on-light: #3b839f;
63
+ --color-cyan-300-on-dark: #64d2ff;
64
+ --color-cyan-350-on-dark: #5ac8f4;
65
+ --color-cyan-900-on-dark: #2d4f4d;
66
+ --color-blue-100-on-light: #d2ebfe;
67
+ --color-blue-700-on-light: #007aff;
68
+ --color-blue-750-on-light: #216dc3;
69
+ --color-blue-550-on-dark: #1488f9;
70
+ --color-blue-600-on-dark: #0a84ff;
71
+ --color-blue-900-on-dark: #23314d;
72
+ --color-purple-100-on-light: #efd8f6;
73
+ --color-purple-400-on-light: #af52de;
74
+ --color-purple-600-on-light: #8943ac;
75
+ --color-purple-500-on-dark: #bf5af2;
76
+ --color-purple-900-on-dark: #442e46;
77
+ --color-indigo-100-on-light: #dad9fa;
78
+ --color-indigo-600-on-light: #5856d6;
79
+ --color-indigo-650-on-light: #5453b3;
80
+ --color-indigo-450-on-dark: #706cec;
81
+ --color-indigo-500-on-dark: #5e5ce6;
82
+ --color-indigo-900-on-dark: #2b2947;
83
+ --color-pink-100-on-light: #ffccda;
84
+ --color-pink-500-on-light: #ff2d55;
85
+ --color-pink-600-on-light: #c43955;
86
+ --color-pink-500-on-dark: #ff375f;
87
+ --color-pink-900-on-dark: #50282c;
88
+ --color-brown-50-on-light: #ebe5dd;
89
+ --color-brown-500-on-light: #a2845e;
90
+ --color-brown-600-on-light: #78654f;
91
+ --color-brown-400-on-dark: #ac8e68;
92
+ --color-brown-900-on-dark: #3c352c;
93
+ --color-on-light-100-on-light: #ffd4d5;
94
+ --color-on-light-500-on-light: #ff3b30;
95
+ --color-special-neon-400: #02fbfe;
96
+ --color-special-neon-450: #01d3d5;
97
+ --color-special-blue-500: #06b2ff;
98
+ --color-special-blue-550: #0090d1;
99
+ --color-special-cyan-400: #0fd2ff;
100
+ --color-special-cyan-450: #00b2db;
101
+ --color-special-blue-600: #128dfe;
102
+ --color-special-blue-650: #0172da;
103
+ --color-special-indigo-700: #6689ff;
104
+ --color-special-indigo-650: #6689ff;
105
+ --color-special-violet-500: #6033f1;
106
+ --color-special-violet-450: #7d58f4;
107
+ --color-special-cyan-50: #f7fdfe;
108
+ --color-special-cyan-300: #37ccfc;
109
+ --color-white-95: #fffffff2;
110
+ --color-white-0a: #fff0;
111
+ --color-white-4a: #ffffff0a;
112
+ --color-white-5a: #ffffff0d;
113
+ --color-white-7a: #ffffff12;
114
+ --color-white-10a: #ffffff1a;
115
+ --color-white-20a: #fff3;
116
+ --color-white-30a: #ffffff4d;
117
+ --color-white-40a: #fff6;
118
+ --color-white-50a: #ffffff80;
119
+ --color-white-60a: #fff9;
120
+ --color-white-70a: #ffffffb2;
121
+ --color-white-80a: #fffc;
122
+ --color-white-90a: #ffffffe5;
123
+ --color-black-0a: #0000;
124
+ --color-black-3a: #00000008;
125
+ --color-black-5a: #0000000d;
126
+ --color-black-8a: #00000014;
127
+ --color-black-10a: #0000001a;
128
+ --color-black-20a: #0003;
129
+ --color-black-30a: #0000004d;
130
+ --color-black-40a: #0006;
131
+ --color-black-50a: #00000080;
132
+ --color-black-60a: #0009;
133
+ --color-black-70a: #000000b2;
134
+ --color-black-80a: #000c;
135
+ --color-black-90a: #000000e5;
136
+ --color-black-95a: #000000f2;
137
+ --color-shadow-2a: #00000005;
138
+ --color-shadow-4a: #0000000a;
139
+ --color-shadow-6a: #0000000f;
140
+ --color-shadow-8a: #00000014;
141
+ --color-shadow-10a: #0000001a;
142
+ --color-shadow-12a: #0000001f;
143
+ --color-shadow-16a: #00000029;
144
+ --color-shadow-20a: #0003;
145
+ --color-shadow-24a: #0000003d;
146
+ --color-shadow-28a: #00000047;
147
+ --color-shadow-32a: #00000052;
148
+ --color-shadow-36a: #0000005c;
149
+ --color-shadow-40a: #0006;
150
+ --color-shadow-44a: #00000070;
151
+ --color-shadow-48a: #0000007a;
152
+ --color-shadow-56a: #0000008f;
153
+ --color-shadow-64a: #000000a3;
154
+ --color-shadow-80a: #000c;
155
+ --dimensions-0: 0;
156
+ --dimensions-1: 1px;
157
+ --dimensions-2: 2px;
158
+ --dimensions-4: 4px;
159
+ --dimensions-6: 6px;
160
+ --dimensions-8: 8px;
161
+ --dimensions-12: 12px;
162
+ --dimensions-16: 16px;
163
+ --dimensions-20: 20px;
164
+ --dimensions-24: 24px;
165
+ --dimensions-28: 28px;
166
+ --dimensions-32: 32px;
167
+ --dimensions-36: 36px;
168
+ --dimensions-40: 40px;
169
+ --dimensions-44: 44px;
170
+ --dimensions-48: 48px;
171
+ --dimensions-52: 52px;
172
+ --dimensions-56: 56px;
173
+ --dimensions-60: 60px;
174
+ --dimensions-64: 64px;
175
+ --dimensions-68: 68px;
176
+ --dimensions-80: 80px;
177
+ --dimensions-120: 120px;
178
+ --dimensions-160: 160px;
179
+ --dimensions-200: 200px;
180
+ --dimensions-320: 320px;
181
+ --dimensions-400: 400px;
182
+ --dimensions-600: 600px;
183
+ --dimensions-999: 999px;
184
+ --dimensions-half: 0.5px;
185
+ --font-family-brand: "Google Sans";
186
+ --font-family-code: "Google Sans Code";
187
+ --font-weight-regular: 400;
188
+ --font-weight-medium: 500;
189
+ --font-weight-bold: 700;
190
+ --resolutions-mobile-small-width: 360px;
191
+ --resolutions-mobile-small-height: 800px;
192
+ --resolutions-mobile-medium-width: 375px;
193
+ --resolutions-mobile-medium-height: 812px;
194
+ --resolutions-mobile-large-width: 414px;
195
+ --resolutions-mobile-large-height: 896px;
196
+ --resolutions-tablet-small-width: 768px;
197
+ --resolutions-tablet-small-height: 1024px;
198
+ --resolutions-tablet-medium-width: 834px;
199
+ --resolutions-tablet-medium-height: 1194px;
200
+ --resolutions-tablet-large-width: 1024px;
201
+ --resolutions-tablet-large-height: 1366px;
202
+ --resolutions-desktop-small-width: 1366px;
203
+ --resolutions-desktop-small-height: 768px;
204
+ --resolutions-desktop-medium-width: 1440px;
205
+ --resolutions-desktop-medium-height: 900px;
206
+ --resolutions-desktop-large-width: 1920px;
207
+ --resolutions-desktop-large-height: 1080px;
208
+ --shadow-xs-y-spread: -2px;
209
+ --shadow-sm-y-spread: -2px;
210
+ --shadow-md-y-spread: -2px;
211
+ --shadow-lg-y-spread: -4px;
212
+ --shadow-xl-y-spread: -8px;
213
+ --shadow-2xl-y-spread: -8px;
214
+ --display-lg-size: 75px;
215
+ --display-lg-line-height: 90px;
216
+ --display-lg-letter-spacing: -1.2px;
217
+ --display-lg-paragraph-spacing: 0;
218
+ --display-lg-paragraph-indent: 0;
219
+ --display-md-size: 56px;
220
+ --display-md-line-height: 64px;
221
+ --display-md-letter-spacing: -0.8px;
222
+ --display-md-paragraph-spacing: 0;
223
+ --display-md-paragraph-indent: 0;
224
+ --display-sm-size: 48px;
225
+ --display-sm-line-height: 56px;
226
+ --display-sm-letter-spacing: -0.5px;
227
+ --display-sm-paragraph-spacing: 0;
228
+ --display-sm-paragraph-indent: 0;
229
+ --headline-lg-size: 32px;
230
+ --headline-lg-line-height: 40px;
231
+ --headline-lg-letter-spacing: -0.4px;
232
+ --headline-lg-paragraph-spacing: 0;
233
+ --headline-lg-paragraph-indent: 0;
234
+ --headline-md-size: 28px;
235
+ --headline-md-line-height: 36px;
236
+ --headline-md-letter-spacing: -0.4px;
237
+ --headline-md-paragraph-spacing: 0;
238
+ --headline-md-paragraph-indent: 0;
239
+ --headline-sm-size: 24px;
240
+ --headline-sm-line-height: 32px;
241
+ --headline-sm-letter-spacing: -0.2px;
242
+ --headline-sm-paragraph-spacing: 0;
243
+ --headline-sm-paragraph-indent: 0;
244
+ --title-lg-size: 22px;
245
+ --title-lg-line-height: 28px;
246
+ --title-lg-letter-spacing: 0;
247
+ --title-lg-paragraph-spacing: 0;
248
+ --title-lg-paragraph-indent: 0;
249
+ --title-md-size: 16px;
250
+ --title-md-line-height: 24px;
251
+ --title-md-letter-spacing: 0;
252
+ --title-md-paragraph-spacing: 0;
253
+ --title-md-paragraph-indent: 0;
254
+ --title-sm-size: 14px;
255
+ --title-sm-line-height: 20px;
256
+ --title-sm-letter-spacing: 0;
257
+ --title-sm-paragraph-spacing: 0;
258
+ --title-sm-paragraph-indent: 0;
259
+ --body-xl-size: 18px;
260
+ --body-xl-line-height: 28px;
261
+ --body-xl-letter-spacing: -0.12px;
262
+ --body-xl-paragraph-spacing: 0;
263
+ --body-xl-paragraph-indent: 0;
264
+ --body-lg-size: 16px;
265
+ --body-lg-line-height: 24px;
266
+ --body-lg-letter-spacing: -0.12px;
267
+ --body-lg-paragraph-spacing: 0;
268
+ --body-lg-paragraph-indent: 0;
269
+ --body-md-size: 14px;
270
+ --body-md-line-height: 20px;
271
+ --body-md-letter-spacing: -0.1px;
272
+ --body-md-paragraph-spacing: 0;
273
+ --body-md-paragraph-indent: 0;
274
+ --body-sm-size: 12px;
275
+ --body-sm-line-height: 16px;
276
+ --body-sm-letter-spacing: -0.08px;
277
+ --body-sm-paragraph-spacing: 0;
278
+ --body-sm-paragraph-indent: 0;
279
+ --label-lg-size: 14px;
280
+ --label-lg-line-height: 20px;
281
+ --label-lg-letter-spacing: 0;
282
+ --label-lg-paragraph-spacing: 0;
283
+ --label-lg-paragraph-indent: 0;
284
+ --label-md-size: 12px;
285
+ --label-md-line-height: 16px;
286
+ --label-md-letter-spacing: -0.2px;
287
+ --label-md-paragraph-spacing: 0;
288
+ --label-md-paragraph-indent: 0;
289
+ --label-sm-size: 11px;
290
+ --label-sm-line-height: 16px;
291
+ --label-sm-letter-spacing: -0.2px;
292
+ --label-sm-paragraph-spacing: 0;
293
+ --label-sm-paragraph-indent: 0;
294
+ --code-xl-size: 18px;
295
+ --code-xl-line-height: 28px;
296
+ --code-xl-letter-spacing: -0.12px;
297
+ --code-xl-paragraph-spacing: 0;
298
+ --code-xl-paragraph-indent: 0;
299
+ --code-lg-size: 16px;
300
+ --code-lg-line-height: 24px;
301
+ --code-lg-letter-spacing: -0.12px;
302
+ --code-lg-paragraph-spacing: 0;
303
+ --code-lg-paragraph-indent: 0;
304
+ --code-md-size: 14px;
305
+ --code-md-line-height: 20px;
306
+ --code-md-letter-spacing: -0.1px;
307
+ --code-md-paragraph-spacing: 0;
308
+ --code-md-paragraph-indent: 0;
309
+ --code-sm-size: 12px;
310
+ --code-sm-line-height: 16px;
311
+ --code-sm-letter-spacing: -0.08px;
312
+ --code-sm-paragraph-spacing: 0;
313
+ --code-sm-paragraph-indent: 0;
314
+ --border-width-none: var(--dimensions-0);
315
+ --border-width-xs: var(--dimensions-half);
316
+ --border-width-sm: var(--dimensions-1);
317
+ --border-width-md: var(--dimensions-2);
318
+ --border-width-lg: var(--dimensions-4);
319
+ --border-radius-none: var(--dimensions-0);
320
+ --border-radius-4xs: var(--dimensions-4);
321
+ --border-radius-3xs: var(--dimensions-6);
322
+ --border-radius-2xs: var(--dimensions-8);
323
+ --border-radius-xs: var(--dimensions-12);
324
+ --border-radius-sm: var(--dimensions-16);
325
+ --border-radius-md: var(--dimensions-20);
326
+ --border-radius-lg: var(--dimensions-24);
327
+ --border-radius-xl: var(--dimensions-28);
328
+ --border-radius-2xl: var(--dimensions-32);
329
+ --border-radius-3xl: var(--dimensions-36);
330
+ --border-radius-4xl: var(--dimensions-40);
331
+ --border-radius-full: var(--dimensions-999);
332
+ --shadow-xs-z-color: var(--effect-shadow-xs-z);
333
+ --shadow-xs-z-x: var(--dimensions-0);
334
+ --shadow-xs-z-y: var(--dimensions-0);
335
+ --shadow-xs-z-blur: var(--dimensions-2);
336
+ --shadow-xs-z-spread: var(--dimensions-0);
337
+ --shadow-xs-y-color: var(--effect-shadow-xs-y);
338
+ --shadow-xs-y-x: var(--dimensions-0);
339
+ --shadow-xs-y-y: var(--dimensions-2);
340
+ --shadow-xs-y-blur: var(--dimensions-8);
341
+ --shadow-sm-z-color: var(--effect-shadow-sm-z);
342
+ --shadow-sm-z-x: var(--dimensions-0);
343
+ --shadow-sm-z-y: var(--dimensions-0);
344
+ --shadow-sm-z-blur: var(--dimensions-4);
345
+ --shadow-sm-z-spread: var(--dimensions-0);
346
+ --shadow-sm-y-color: var(--effect-shadow-sm-y);
347
+ --shadow-sm-y-x: var(--dimensions-0);
348
+ --shadow-sm-y-y: var(--dimensions-4);
349
+ --shadow-sm-y-blur: var(--dimensions-12);
350
+ --shadow-md-z-color: var(--effect-shadow-md-z);
351
+ --shadow-md-z-x: var(--dimensions-0);
352
+ --shadow-md-z-y: var(--dimensions-0);
353
+ --shadow-md-z-blur: var(--dimensions-8);
354
+ --shadow-md-z-spread: var(--dimensions-0);
355
+ --shadow-md-y-color: var(--effect-shadow-md-y);
356
+ --shadow-md-y-x: var(--dimensions-0);
357
+ --shadow-md-y-y: var(--dimensions-8);
358
+ --shadow-md-y-blur: var(--dimensions-16);
359
+ --shadow-lg-z-color: var(--effect-shadow-lg-z);
360
+ --shadow-lg-z-x: var(--dimensions-0);
361
+ --shadow-lg-z-y: var(--dimensions-0);
362
+ --shadow-lg-z-blur: var(--dimensions-12);
363
+ --shadow-lg-z-spread: var(--dimensions-0);
364
+ --shadow-lg-y-color: var(--effect-shadow-lg-y);
365
+ --shadow-lg-y-x: var(--dimensions-0);
366
+ --shadow-lg-y-y: var(--dimensions-16);
367
+ --shadow-lg-y-blur: var(--dimensions-24);
368
+ --shadow-xl-z-color: var(--effect-shadow-xl-z);
369
+ --shadow-xl-z-x: var(--dimensions-0);
370
+ --shadow-xl-z-y: var(--dimensions-0);
371
+ --shadow-xl-z-blur: var(--dimensions-16);
372
+ --shadow-xl-z-spread: var(--dimensions-0);
373
+ --shadow-xl-y-color: var(--effect-shadow-xl-y);
374
+ --shadow-xl-y-x: var(--dimensions-0);
375
+ --shadow-xl-y-y: var(--dimensions-24);
376
+ --shadow-xl-y-blur: var(--dimensions-48);
377
+ --shadow-2xl-z-color: var(--effect-shadow-2xl-z);
378
+ --shadow-2xl-z-x: var(--dimensions-0);
379
+ --shadow-2xl-z-y: var(--dimensions-0);
380
+ --shadow-2xl-z-blur: var(--dimensions-24);
381
+ --shadow-2xl-z-spread: var(--dimensions-0);
382
+ --shadow-2xl-y-color: var(--effect-shadow-2xl-y);
383
+ --shadow-2xl-y-x: var(--dimensions-0);
384
+ --shadow-2xl-y-y: var(--dimensions-32);
385
+ --shadow-2xl-y-blur: var(--dimensions-64);
386
+ --display-lg-family: var(--font-family-brand);
387
+ --display-lg-weight: var(--font-weight-bold);
388
+ --display-md-family: var(--font-family-brand);
389
+ --display-md-weight: var(--font-weight-bold);
390
+ --display-sm-family: var(--font-family-brand);
391
+ --display-sm-weight: var(--font-weight-bold);
392
+ --headline-lg-family: var(--font-family-brand);
393
+ --headline-lg-weight: var(--font-weight-medium);
394
+ --headline-md-family: var(--font-family-brand);
395
+ --headline-md-weight: var(--font-weight-medium);
396
+ --headline-sm-family: var(--font-family-brand);
397
+ --headline-sm-weight: var(--font-weight-medium);
398
+ --title-lg-family: var(--font-family-brand);
399
+ --title-lg-weight: var(--font-weight-medium);
400
+ --title-md-family: var(--font-family-brand);
401
+ --title-md-weight: var(--font-weight-medium);
402
+ --title-sm-family: var(--font-family-brand);
403
+ --title-sm-weight: var(--font-weight-medium);
404
+ --body-xl-family: var(--font-family-brand);
405
+ --body-xl-weight: var(--font-weight-regular);
406
+ --body-lg-family: var(--font-family-brand);
407
+ --body-lg-weight: var(--font-weight-regular);
408
+ --body-md-family: var(--font-family-brand);
409
+ --body-md-weight: var(--font-weight-regular);
410
+ --body-sm-family: var(--font-family-brand);
411
+ --body-sm-weight: var(--font-weight-regular);
412
+ --label-lg-family: var(--font-family-brand);
413
+ --label-lg-weight: var(--font-weight-medium);
414
+ --label-md-family: var(--font-family-brand);
415
+ --label-md-weight: var(--font-weight-medium);
416
+ --label-sm-family: var(--font-family-brand);
417
+ --label-sm-weight: var(--font-weight-medium);
418
+ --code-xl-family: var(--font-family-code);
419
+ --code-xl-weight: var(--font-weight-regular);
420
+ --code-lg-family: var(--font-family-code);
421
+ --code-lg-weight: var(--font-weight-regular);
422
+ --code-md-family: var(--font-family-code);
423
+ --code-md-weight: var(--font-weight-regular);
424
+ --code-sm-family: var(--font-family-code);
425
+ --code-sm-weight: var(--font-weight-regular);
426
+ --spacing-none: var(--dimensions-0);
427
+ --spacing-5xs: var(--dimensions-2);
428
+ --spacing-4xs: var(--dimensions-4);
429
+ --spacing-3xs: var(--dimensions-6);
430
+ --spacing-2xs: var(--dimensions-8);
431
+ --spacing-xs: var(--dimensions-12);
432
+ --spacing-sm: var(--dimensions-16);
433
+ --spacing-md: var(--dimensions-24);
434
+ --spacing-lg: var(--dimensions-28);
435
+ --spacing-xl: var(--dimensions-32);
436
+ --spacing-2xl: var(--dimensions-40);
437
+ --spacing-3xl: var(--dimensions-44);
438
+ --spacing-4xl: var(--dimensions-48);
439
+ --spacing-5xl: var(--dimensions-64);
440
+ --spacing-6xl: var(--dimensions-80);
441
+ --spacing-7xl: var(--dimensions-120);
442
+ --spacing-8xl: var(--dimensions-320);
443
+ --lg-grid-margin: var(--dimensions-32);
444
+ --lg-grid-gutter: var(--dimensions-16);
445
+ --lg-grid-column: var(--dimensions-12);
446
+ --lg-grid-width: var(--resolutions-desktop-medium-width);
447
+ --lg-grid-height: var(--resolutions-desktop-medium-height);
448
+ --md-grid-margin: var(--dimensions-16);
449
+ --md-grid-gutter: var(--dimensions-16);
450
+ --md-grid-column: var(--dimensions-8);
451
+ --md-grid-width: var(--resolutions-tablet-small-width);
452
+ --md-grid-height: var(--resolutions-tablet-small-height);
453
+ --sm-grid-margin: var(--dimensions-16);
454
+ --sm-grid-gutter: var(--dimensions-16);
455
+ --sm-grid-column: var(--dimensions-4);
456
+ --sm-grid-width: var(--resolutions-mobile-medium-width);
457
+ --sm-grid-height: var(--resolutions-mobile-medium-height);
458
+ --xl-grid-margin: var(--dimensions-80);
459
+ --xl-grid-gutter: var(--dimensions-16);
460
+ --xl-grid-column: var(--dimensions-12);
461
+ --xl-grid-width: var(--resolutions-desktop-large-width);
462
+ --xl-grid-height: var(--resolutions-desktop-large-height);
463
+ }
464
+ [data-theme=Light] {
465
+ --bg-red: var(--color-on-light-500-on-light);
466
+ --bg-subtle: var(--color-on-light-100-on-light);
467
+ --bg-orange: var(--color-orange-500-on-light);
468
+ --bg-orange-subtle: var(--color-orange-100-on-light);
469
+ --bg-yellow: var(--color-yellow-500-on-light);
470
+ --bg-yellow-subtle: var(--color-yellow-100-on-light);
471
+ --bg-green: var(--color-green-500-on-light);
472
+ --bg-green-subtle: var(--color-green-100-on-light);
473
+ --bg-mint: var(--color-mint-500-on-light);
474
+ --bg-mint-subtle: var(--color-mint-100-on-light);
475
+ --bg-teal: var(--color-teal-400-on-light);
476
+ --bg-teal-subtle: var(--color-teal-100-on-light);
477
+ --bg-cyan: var(--color-cyan-400-on-light);
478
+ --bg-cyan-subtle: var(--color-cyan-100-on-light);
479
+ --bg-blue: var(--color-blue-700-on-light);
480
+ --bg-blue-subtle: var(--color-blue-100-on-light);
481
+ --bg-indigo: var(--color-indigo-600-on-light);
482
+ --bg-indigo-subtle: var(--color-indigo-100-on-light);
483
+ --bg-purple: var(--color-purple-400-on-light);
484
+ --bg-purple-subtle: var(--color-purple-100-on-light);
485
+ --bg-pink: var(--color-pink-500-on-light);
486
+ --bg-pink-subtle: var(--color-pink-100-on-light);
487
+ --bg-brown: var(--color-brown-500-on-light);
488
+ --bg-brown-subtle: var(--color-brown-50-on-light);
489
+ --bg-neutral-primary: var(--color-gray-0);
490
+ --bg-neutral-primary-inverse: var(--color-gray-950);
491
+ --bg-neutral-secondary: var(--color-gray-50);
492
+ --bg-neutral-secondary-inverse: var(--color-gray-900);
493
+ --bg-neutral-tertiary: var(--color-gray-100);
494
+ --bg-neutral-tertiary-inverse: var(--color-gray-850);
495
+ --bg-neutral-on-surface: var(--color-black-3a);
496
+ --bg-neutral-inverse-on-surface: var(--color-white-4a);
497
+ --bg-neutral-elevator: var(--color-gray-0);
498
+ --bg-brand-primary: var(--color-primary-600);
499
+ --bg-brand-primary-hover: var(--color-primary-400);
500
+ --bg-brand-primary-press: var(--color-primary-600);
501
+ --bg-brand-primary-focus: var(--color-primary-400);
502
+ --bg-brand-primary-error: var(--color-on-light-100-on-light);
503
+ --bg-state-hover: var(--color-black-3a);
504
+ --bg-state-press: var(--color-black-5a);
505
+ --bg-state-focus: var(--color-black-3a);
506
+ --bg-state-inverse-hover: var(--color-white-4a);
507
+ --bg-state-inverse-press: var(--color-black-5a);
508
+ --bg-state-inverse-focus: var(--color-white-4a);
509
+ --bg-state-disabled: var(--color-black-3a);
510
+ --bg-state-error: var(--color-on-light-100-on-light);
511
+ --fg-brand: var(--color-primary-600);
512
+ --fg-red: var(--color-on-light-500-on-light);
513
+ --fg-red-subtle: var(--color-on-light-100-on-light);
514
+ --fg-orange: var(--color-orange-600-on-light);
515
+ --fg-orange-subtle: var(--color-orange-100-on-light);
516
+ --fg-yellow: var(--color-yellow-700-on-light);
517
+ --fg-yellow-subtle: var(--color-yellow-100-on-light);
518
+ --fg-green: var(--color-green-600-on-light);
519
+ --fg-green-subtle: var(--color-green-100-on-light);
520
+ --fg-mint: var(--color-mint-600-on-light);
521
+ --fg-mint-subtle: var(--color-mint-100-on-light);
522
+ --fg-teal: var(--color-teal-500-on-light);
523
+ --fg-teal-subtle: var(--color-teal-100-on-light);
524
+ --fg-cyan: var(--color-cyan-500-on-light);
525
+ --fg-cyan-subtle: var(--color-cyan-100-on-light);
526
+ --fg-blue: var(--color-blue-750-on-light);
527
+ --fg-blue-subtle: var(--color-blue-100-on-light);
528
+ --fg-purple: var(--color-purple-600-on-light);
529
+ --fg-purple-subtle: var(--color-purple-100-on-light);
530
+ --fg-indigo: var(--color-indigo-650-on-light);
531
+ --fg-indigo-subtle: var(--color-indigo-100-on-light);
532
+ --fg-pink: var(--color-pink-600-on-light);
533
+ --fg-pink-subtle: var(--color-pink-100-on-light);
534
+ --fg-brown: var(--color-brown-600-on-light);
535
+ --fg-brown-subtle: var(--color-brown-50-on-light);
536
+ --fg-neutral-primary: var(--color-gray-850);
537
+ --fg-neutral-primary-inverse: var(--color-gray-0);
538
+ --fg-neutral-secondary: var(--color-gray-700);
539
+ --fg-neutral-secondary-inverse: var(--color-gray-400);
540
+ --fg-neutral-inverse-elevator: var(--color-gray-0);
541
+ --fg-neutral-on-light-fixed: var(--color-gray-850);
542
+ --fg-neutral-on-dark-fixed: var(--color-gray-50);
543
+ --fg-state-hover: var(--color-gray-1000);
544
+ --fg-state-press: var(--color-gray-1000);
545
+ --fg-state-focus: var(--color-gray-1000);
546
+ --fg-state-inverse-hover: var(--color-gray-50);
547
+ --fg-state-inverse-press: var(--color-gray-100);
548
+ --fg-state-inverse-focus: var(--color-gray-50);
549
+ --fg-state-inverse-disabled: var(--color-white-10a);
550
+ --fg-state-disabled: var(--color-black-10a);
551
+ --text-brand: var(--color-primary-600);
552
+ --text-red: var(--color-on-light-500-on-light);
553
+ --text-red-subtle: var(--color-on-light-100-on-light);
554
+ --text-orange: var(--color-orange-600-on-light);
555
+ --text-orange-subtle: var(--color-orange-100-on-light);
556
+ --text-yellow: var(--color-yellow-700-on-light);
557
+ --text-yellow-subtle: var(--color-yellow-100-on-light);
558
+ --text-green: var(--color-green-600-on-light);
559
+ --text-green-subtle: var(--color-green-100-on-light);
560
+ --text-mint: var(--color-mint-600-on-light);
561
+ --text-mint-subtle: var(--color-mint-100-on-light);
562
+ --text-teal: var(--color-teal-500-on-light);
563
+ --text-teal-subtle: var(--color-teal-100-on-light);
564
+ --text-cyan: var(--color-cyan-500-on-light);
565
+ --text-cyan-subtle: var(--color-cyan-100-on-light);
566
+ --text-blue: var(--color-blue-750-on-light);
567
+ --text-blue-subtle: var(--color-blue-100-on-light);
568
+ --text-indigo: var(--color-indigo-650-on-light);
569
+ --text-indigo-subtle: var(--color-indigo-100-on-light);
570
+ --text-purple: var(--color-purple-600-on-light);
571
+ --text-purple-subtle: var(--color-purple-100-on-light);
572
+ --text-pink: var(--color-pink-600-on-light);
573
+ --text-pink-subtle: var(--color-pink-100-on-light);
574
+ --text-brown: var(--color-brown-600-on-light);
575
+ --text-brown-subtle: var(--color-brown-50-on-light);
576
+ --text-neutral-primary: var(--color-gray-850);
577
+ --text-neutral-primary-inverse: var(--color-gray-0);
578
+ --text-neutral-secondary: var(--color-gray-700);
579
+ --text-neutral-secondary-inverse: var(--color-gray-400);
580
+ --text-neutral-inverse-elevator: var(--color-gray-0);
581
+ --text-neutral-on-light-fixed: var(--color-gray-850);
582
+ --text-neutral-on-dark-fixed: var(--color-gray-50);
583
+ --text-state-hover: var(--color-gray-1000);
584
+ --text-state-press: var(--color-gray-1000);
585
+ --text-state-focus: var(--color-gray-1000);
586
+ --text-state-inverse-hover: var(--color-gray-50);
587
+ --text-state-inverse-press: var(--color-gray-100);
588
+ --text-state-inverse-focus: var(--color-gray-50);
589
+ --text-state-inverse-disabled: var(--color-gray-400);
590
+ --text-state-disabled: var(--color-black-10a);
591
+ --text-state-error: var(--color-on-light-500-on-light);
592
+ --border-red: var(--color-on-light-500-on-light);
593
+ --border-red-subtle: var(--color-on-light-100-on-light);
594
+ --border-orange: var(--color-orange-600-on-light);
595
+ --border-orange-subtle: var(--color-orange-100-on-light);
596
+ --border-yellow: var(--color-yellow-700-on-light);
597
+ --border-yellow-subtle: var(--color-yellow-100-on-light);
598
+ --border-green: var(--color-green-600-on-light);
599
+ --border-green-subtle: var(--color-green-100-on-light);
600
+ --border-mint: var(--color-mint-600-on-light);
601
+ --border-mint-subtle: var(--color-mint-100-on-light);
602
+ --border-teal: var(--color-teal-500-on-light);
603
+ --border-teal-subtle: var(--color-teal-100-on-light);
604
+ --border-cyan: var(--color-cyan-500-on-light);
605
+ --border-cyan-subtle: var(--color-cyan-100-on-light);
606
+ --border-blue: var(--color-blue-750-on-light);
607
+ --border-blue-subtle: var(--color-blue-100-on-light);
608
+ --border-purple: var(--color-purple-600-on-light);
609
+ --border-purple-subtle: var(--color-purple-100-on-light);
610
+ --border-indigo: var(--color-indigo-650-on-light);
611
+ --border-indigo-subtle: var(--color-indigo-100-on-light);
612
+ --border-pink: var(--color-pink-600-on-light);
613
+ --border-pink-subtle: var(--color-pink-100-on-light);
614
+ --border-brown: var(--color-brown-600-on-light);
615
+ --border-brown-subtle: var(--color-brown-50-on-light);
616
+ --border-neutral-primary: var(--color-gray-850);
617
+ --border-neutral-primary-inverse: var(--color-gray-50);
618
+ --border-neutral-secondary: var(--color-gray-400);
619
+ --border-neutral-tertiary: var(--color-gray-300);
620
+ --border-neutral-on-light-fixed: var(--color-gray-850);
621
+ --border-neutral-on-dark-fixed: var(--color-gray-50);
622
+ --border-state-hover: var(--color-gray-1000);
623
+ --border-state-press: var(--color-gray-1000);
624
+ --border-state-focus: var(--color-gray-1000);
625
+ --border-state-disabled: var(--color-gray-200);
626
+ --border-state-error: var(--color-on-light-500-on-light);
627
+ --gradient-primary-start: var(--color-gray-0);
628
+ --gradient-primary-end: var(--color-white-0a);
629
+ --gradient-secondary-start: var(--color-black-3a);
630
+ --gradient-secondary-end: var(--color-black-0a);
631
+ --gradient-tertiary-start: var(--color-black-8a);
632
+ --gradient-tertiary-end: var(--color-black-0a);
633
+ --gradient-special-1-start: var(--color-special-neon-450);
634
+ --gradient-special-1-end: var(--color-special-blue-550);
635
+ --gradient-special-2-start: var(--color-special-cyan-450);
636
+ --gradient-special-2-end: var(--color-special-indigo-700);
637
+ --gradient-special-3-start: var(--color-special-indigo-650);
638
+ --gradient-special-3-end: var(--color-special-violet-450);
639
+ --gradient-special-glow-1: var(--color-special-neon-400);
640
+ --gradient-special-glow-2: var(--color-white-0a);
641
+ --overlay: var(--color-black-30a);
642
+ --blur-overlay: var(--color-black-30a);
643
+ --effect-shadow-xs-z: var(--color-shadow-4a);
644
+ --effect-shadow-xs-y: var(--color-shadow-6a);
645
+ --effect-shadow-sm-z: var(--color-shadow-4a);
646
+ --effect-shadow-sm-y: var(--color-shadow-6a);
647
+ --effect-shadow-md-z: var(--color-shadow-4a);
648
+ --effect-shadow-md-y: var(--color-shadow-6a);
649
+ --effect-shadow-lg-z: var(--color-shadow-4a);
650
+ --effect-shadow-lg-y: var(--color-shadow-6a);
651
+ --effect-shadow-xl-z: var(--color-shadow-4a);
652
+ --effect-shadow-xl-y: var(--color-shadow-8a);
653
+ --effect-shadow-2xl-z: var(--color-shadow-4a);
654
+ --effect-shadow-2xl-y: var(--color-shadow-8a);
655
+ --drop-shadow-xs-z-color: var(--effect-shadow-xs-z);
656
+ --drop-shadow-xs-y-color: var(--effect-shadow-xs-y);
657
+ --drop-shadow-sm-z-color: var(--effect-shadow-sm-z);
658
+ --drop-shadow-sm-y-color: var(--effect-shadow-sm-y);
659
+ --drop-shadow-md-z-color: var(--effect-shadow-md-z);
660
+ --drop-shadow-md-y-color: var(--effect-shadow-md-y);
661
+ --drop-shadow-lg-z-color: var(--effect-shadow-lg-z);
662
+ --drop-shadow-lg-y-color: var(--effect-shadow-lg-y);
663
+ --drop-shadow-xl-z-color: var(--effect-shadow-xl-z);
664
+ --drop-shadow-xl-y-color: var(--effect-shadow-xl-y);
665
+ --drop-shadow-2xl-z-color: var(--effect-shadow-2xl-z);
666
+ --drop-shadow-2xl-y-color: var(--effect-shadow-2xl-y);
667
+ }
668
+ [data-theme=Dark] {
669
+ --bg-red: var(--color-red-on-dark-500-on-dark);
670
+ --bg-red-subtle: var(--color-red-on-dark-900-on-dark);
671
+ --bg-orange: var(--color-orange-500-on-dark);
672
+ --bg-orange-subtle: var(--color-orange-900-on-dark);
673
+ --bg-yellow: var(--color-yellow-400-on-dark);
674
+ --bg-yellow-subtle: var(--color-yellow-900-on-dark);
675
+ --bg-green: var(--color-green-500-on-dark);
676
+ --bg-green-subtle: var(--color-green-900-on-dark);
677
+ --bg-mint: var(--color-mint-300-on-dark);
678
+ --bg-mint-subtle: var(--color-mint-900-on-dark);
679
+ --bg-teal: var(--color-teal-400-on-dark);
680
+ --bg-teal-subtle: var(--color-teal-900-on-dark);
681
+ --bg-cyan: var(--color-cyan-300-on-dark);
682
+ --bg-cyan-subtle: var(--color-cyan-900-on-dark);
683
+ --bg-blue: var(--color-blue-600-on-dark);
684
+ --bg-blue-subtle: var(--color-blue-900-on-dark);
685
+ --bg-indigo: var(--color-indigo-500-on-dark);
686
+ --bg-indigo-subtle: var(--color-indigo-900-on-dark);
687
+ --bg-purple: var(--color-purple-500-on-dark);
688
+ --bg-purple-subtle: var(--color-purple-900-on-dark);
689
+ --bg-pink: var(--color-pink-500-on-dark);
690
+ --bg-pink-subtle: var(--color-pink-900-on-dark);
691
+ --bg-brown: var(--color-brown-400-on-dark);
692
+ --bg-brown-subtle: var(--color-brown-900-on-dark);
693
+ --bg-neutral-primary: var(--color-gray-950);
694
+ --bg-neutral-primary-inverse: var(--color-gray-0);
695
+ --bg-neutral-secondary: var(--color-gray-900);
696
+ --bg-neutral-secondary-inverse: var(--color-gray-50);
697
+ --bg-neutral-tertiary: var(--color-gray-850);
698
+ --bg-neutral-tertiary-inverse: var(--color-gray-100);
699
+ --bg-neutral-on-surface: var(--color-white-4a);
700
+ --bg-neutral-inverse-on-surface: var(--color-black-3a);
701
+ --bg-neutral-elevator: var(--color-gray-900);
702
+ --bg-brand-primary: var(--color-primary-400);
703
+ --bg-brand-primary-hover: var(--color-primary-200);
704
+ --bg-brand-primary-press: var(--color-primary-400);
705
+ --bg-brand-primary-focus: var(--color-primary-200);
706
+ --bg-brand-primary-error: var(--color-red-on-dark-900-on-dark);
707
+ --bg-state-hover: var(--color-white-4a);
708
+ --bg-state-press: var(--color-black-5a);
709
+ --bg-state-focus: var(--color-white-4a);
710
+ --bg-state-inverse-hover: var(--color-black-3a);
711
+ --bg-state-inverse-press: var(--color-black-5a);
712
+ --bg-state-inverse-focus: var(--color-black-3a);
713
+ --bg-state-disabled: var(--color-white-4a);
714
+ --bg-state-error: var(--color-red-on-dark-900-on-dark);
715
+ --fg-brand: var(--color-primary-400);
716
+ --fg-red: var(--color-red-on-dark-500-on-dark);
717
+ --fg-red-subtle: var(--color-red-on-dark-900-on-dark);
718
+ --fg-orange: var(--color-orange-500-on-dark);
719
+ --fg-orange-subtle: var(--color-orange-900-on-dark);
720
+ --fg-yellow: var(--color-yellow-400-on-dark);
721
+ --fg-yellow-subtle: var(--color-yellow-900-on-dark);
722
+ --fg-green: var(--color-green-450-on-dark);
723
+ --fg-green-subtle: var(--color-green-900-on-dark);
724
+ --fg-mint: var(--color-mint-300-on-dark);
725
+ --fg-mint-subtle: var(--color-mint-900-on-dark);
726
+ --fg-teal: var(--color-teal-350-on-dark);
727
+ --fg-teal-subtle: var(--color-teal-900-on-dark);
728
+ --fg-cyan: var(--color-cyan-350-on-dark);
729
+ --fg-cyan-subtle: var(--color-cyan-900-on-dark);
730
+ --fg-blue: var(--color-blue-550-on-dark);
731
+ --fg-blue-subtle: var(--color-blue-900-on-dark);
732
+ --fg-purple: var(--color-purple-500-on-dark);
733
+ --fg-purple-subtle: var(--color-purple-900-on-dark);
734
+ --fg-indigo: var(--color-indigo-450-on-dark);
735
+ --fg-indigo-subtle: var(--color-indigo-900-on-dark);
736
+ --fg-pink: var(--color-pink-500-on-dark);
737
+ --fg-pink-subtle: var(--color-pink-900-on-dark);
738
+ --fg-brown: var(--color-brown-400-on-dark);
739
+ --fg-brown-subtle: var(--color-brown-900-on-dark);
740
+ --fg-neutral-primary: var(--color-gray-50);
741
+ --fg-neutral-primary-inverse: var(--color-gray-850);
742
+ --fg-neutral-secondary: var(--color-gray-400);
743
+ --fg-neutral-secondary-inverse: var(--color-gray-700);
744
+ --fg-neutral-inverse-elevator: var(--color-gray-800);
745
+ --fg-neutral-on-light-fixed: var(--color-gray-850);
746
+ --fg-neutral-on-dark-fixed: var(--color-gray-50);
747
+ --fg-state-hover: var(--color-gray-100);
748
+ --fg-state-press: var(--color-gray-100);
749
+ --fg-state-focus: var(--color-gray-100);
750
+ --fg-state-inverse-hover: var(--color-gray-1000);
751
+ --fg-state-inverse-press: var(--color-gray-1000);
752
+ --fg-state-inverse-focus: var(--color-gray-1000);
753
+ --fg-state-inverse-disabled: var(--color-black-10a);
754
+ --fg-state-disabled: var(--color-white-10a);
755
+ --text-brand: var(--color-primary-400);
756
+ --text-red: var(--color-red-on-dark-500-on-dark);
757
+ --text-red-subtle: var(--color-red-on-dark-900-on-dark);
758
+ --text-orange: var(--color-orange-500-on-dark);
759
+ --text-orange-subtle: var(--color-orange-900-on-dark);
760
+ --text-yellow: var(--color-yellow-400-on-dark);
761
+ --text-yellow-subtle: var(--color-yellow-900-on-dark);
762
+ --text-green: var(--color-green-450-on-dark);
763
+ --text-green-subtle: var(--color-green-900-on-dark);
764
+ --text-mint: var(--color-mint-300-on-dark);
765
+ --text-mint-subtle: var(--color-mint-900-on-dark);
766
+ --text-teal: var(--color-teal-350-on-dark);
767
+ --text-teal-subtle: var(--color-teal-900-on-dark);
768
+ --text-cyan: var(--color-cyan-350-on-dark);
769
+ --text-cyan-subtle: var(--color-cyan-900-on-dark);
770
+ --text-blue: var(--color-blue-550-on-dark);
771
+ --text-blue-subtle: var(--color-blue-900-on-dark);
772
+ --text-indigo: var(--color-indigo-450-on-dark);
773
+ --text-indigo-subtle: var(--color-indigo-900-on-dark);
774
+ --text-purple: var(--color-purple-500-on-dark);
775
+ --text-purple-subtle: var(--color-purple-900-on-dark);
776
+ --text-pink: var(--color-pink-500-on-dark);
777
+ --text-pink-subtle: var(--color-pink-900-on-dark);
778
+ --text-brown: var(--color-brown-400-on-dark);
779
+ --text-brown-subtle: var(--color-brown-900-on-dark);
780
+ --text-neutral-primary: var(--color-gray-50);
781
+ --text-neutral-primary-inverse: var(--color-gray-850);
782
+ --text-neutral-secondary: var(--color-gray-400);
783
+ --text-neutral-secondary-inverse: var(--color-gray-700);
784
+ --text-neutral-inverse-elevator: var(--color-gray-800);
785
+ --text-neutral-on-light-fixed: var(--color-gray-850);
786
+ --text-neutral-on-dark-fixed: var(--color-gray-50);
787
+ --text-state-hover: var(--color-gray-100);
788
+ --text-state-press: var(--color-gray-100);
789
+ --text-state-focus: var(--color-gray-100);
790
+ --text-state-inverse-hover: var(--color-gray-1000);
791
+ --text-state-inverse-press: var(--color-gray-1000);
792
+ --text-state-inverse-focus: var(--color-gray-1000);
793
+ --text-state-inverse-disabled: var(--color-gray-600);
794
+ --text-state-disabled: var(--color-white-10a);
795
+ --text-state-error: var(--color-red-on-dark-500-on-dark);
796
+ --border-red: var(--color-red-on-dark-500-on-dark);
797
+ --border-red-subtle: var(--color-red-on-dark-900-on-dark);
798
+ --border-orange: var(--color-orange-500-on-dark);
799
+ --border-orange-subtle: var(--color-orange-900-on-dark);
800
+ --border-yellow: var(--color-yellow-400-on-dark);
801
+ --border-yellow-subtle: var(--color-yellow-900-on-dark);
802
+ --border-green: var(--color-green-450-on-dark);
803
+ --border-green-subtle: var(--color-green-900-on-dark);
804
+ --border-mint: var(--color-mint-300-on-dark);
805
+ --border-mint-subtle: var(--color-mint-900-on-dark);
806
+ --border-teal: var(--color-teal-350-on-dark);
807
+ --border-teal-subtle: var(--color-teal-900-on-dark);
808
+ --border-cyan: var(--color-cyan-350-on-dark);
809
+ --border-cyan-subtle: var(--color-cyan-900-on-dark);
810
+ --border-blue: var(--color-blue-550-on-dark);
811
+ --border-blue-subtle: var(--color-blue-900-on-dark);
812
+ --border-purple: var(--color-purple-500-on-dark);
813
+ --border-purple-subtle: var(--color-purple-900-on-dark);
814
+ --border-indigo: var(--color-indigo-450-on-dark);
815
+ --border-indigo-subtle: var(--color-indigo-900-on-dark);
816
+ --border-pink: var(--color-pink-500-on-dark);
817
+ --border-pink-subtle: var(--color-pink-900-on-dark);
818
+ --border-brown: var(--color-brown-400-on-dark);
819
+ --border-brown-subtle: var(--color-brown-900-on-dark);
820
+ --border-neutral-primary: var(--color-gray-50);
821
+ --border-neutral-primary-inverse: var(--color-gray-850);
822
+ --border-neutral-secondary: var(--color-gray-700);
823
+ --border-neutral-tertiary: var(--color-gray-800);
824
+ --border-neutral-on-light-fixed: var(--color-gray-850);
825
+ --border-neutral-on-dark-fixed: var(--color-gray-50);
826
+ --border-state-hover: var(--color-gray-100);
827
+ --border-state-press: var(--color-gray-100);
828
+ --border-state-focus: var(--color-gray-100);
829
+ --border-state-disabled: var(--color-gray-800);
830
+ --border-state-error: var(--color-red-on-dark-500-on-dark);
831
+ --gradient-primary-start: var(--color-gray-950);
832
+ --gradient-primary-end: var(--color-black-0a);
833
+ --gradient-secondary-start: var(--color-white-4a);
834
+ --gradient-secondary-end: var(--color-white-0a);
835
+ --gradient-tertiary-start: var(--color-black-40a);
836
+ --gradient-tertiary-end: var(--color-black-0a);
837
+ --gradient-special-1-start: var(--color-special-neon-400);
838
+ --gradient-special-1-end: var(--color-special-blue-500);
839
+ --gradient-special-2-start: var(--color-special-cyan-400);
840
+ --gradient-special-2-end: var(--color-special-blue-600);
841
+ --gradient-special-3-start: var(--color-special-indigo-700);
842
+ --gradient-special-3-end: var(--color-special-violet-500);
843
+ --gradient-special-glow-1: var(--color-special-cyan-50);
844
+ --gradient-special-glow-2: var(--color-special-cyan-300);
845
+ --overlay: var(--color-black-50a);
846
+ --blur-overlay: var(--color-black-30a);
847
+ --effect-shadow-xs-z: var(--color-shadow-8a);
848
+ --effect-shadow-xs-y: var(--color-shadow-20a);
849
+ --effect-shadow-sm-z: var(--color-shadow-8a);
850
+ --effect-shadow-sm-y: var(--color-shadow-20a);
851
+ --effect-shadow-md-z: var(--color-shadow-8a);
852
+ --effect-shadow-md-y: var(--color-shadow-20a);
853
+ --effect-shadow-lg-z: var(--color-shadow-8a);
854
+ --effect-shadow-lg-y: var(--color-shadow-24a);
855
+ --effect-shadow-xl-z: var(--color-shadow-8a);
856
+ --effect-shadow-xl-y: var(--color-shadow-32a);
857
+ --effect-shadow-2xl-z: var(--color-shadow-8a);
858
+ --effect-shadow-2xl-y: var(--color-shadow-40a);
859
+ --drop-shadow-xs-z-color: var(--effect-shadow-xs-z);
860
+ --drop-shadow-xs-y-color: var(--effect-shadow-xs-y);
861
+ --drop-shadow-sm-z-color: var(--effect-shadow-sm-z);
862
+ --drop-shadow-sm-y-color: var(--effect-shadow-sm-y);
863
+ --drop-shadow-md-z-color: var(--effect-shadow-md-z);
864
+ --drop-shadow-md-y-color: var(--effect-shadow-md-y);
865
+ --drop-shadow-lg-z-color: var(--effect-shadow-lg-z);
866
+ --drop-shadow-lg-y-color: var(--effect-shadow-lg-y);
867
+ --drop-shadow-xl-z-color: var(--effect-shadow-xl-z);
868
+ --drop-shadow-xl-y-color: var(--effect-shadow-xl-y);
869
+ --drop-shadow-2xl-z-color: var(--effect-shadow-2xl-z);
870
+ --drop-shadow-2xl-y-color: var(--effect-shadow-2xl-y);
871
+ }