@vaneui/md 0.3.1-alpha.20251215182232.fb1f651 → 0.3.1-alpha.20251227133834.f24acb3

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 (2) hide show
  1. package/dist/styles/index.css +437 -483
  2. package/package.json +3 -3
package/dist/styles/index.css CHANGED
@@ -4,8 +4,8 @@
4
4
  /* Import @vaneui/ui base styles */
5
5
  @theme {
6
6
  /* Text Colors */
7
- --color-text-default: var(--color-gray-900);
8
- --color-text-primary: var(--color-blue-600);
7
+ --color-text-primary: var(--color-gray-900);
8
+ --color-text-brand: var(--color-blue-600);
9
9
  --color-text-secondary: var(--color-gray-600);
10
10
  --color-text-tertiary: var(--color-gray-500);
11
11
  --color-text-link: var(--color-blue-600);
@@ -16,8 +16,8 @@
16
16
  --color-text-info: var(--color-cyan-600);
17
17
 
18
18
  /* Filled Text Colors */
19
- --color-text-filled-default: var(--color-white);
20
- --color-text-filled-primary: var(--color-blue-100);
19
+ --color-text-filled-primary: var(--color-white);
20
+ --color-text-filled-brand: var(--color-blue-100);
21
21
  --color-text-filled-secondary: var(--color-gray-200);
22
22
  --color-text-filled-tertiary: var(--color-gray-300);
23
23
  --color-text-filled-link: var(--color-blue-100);
@@ -29,8 +29,8 @@
29
29
  --color-text-filled-transparent: transparent;
30
30
 
31
31
  /* UI Background Colors */
32
- --color-bg-default: var(--color-white);
33
- --color-bg-primary: var(--color-blue-50);
32
+ --color-bg-primary: var(--color-white);
33
+ --color-bg-brand: var(--color-blue-50);
34
34
  --color-bg-secondary: var(--color-gray-50);
35
35
  --color-bg-tertiary: var(--color-gray-100);
36
36
  --color-bg-accent: var(--color-rose-50);
@@ -38,11 +38,10 @@
38
38
  --color-bg-danger: var(--color-red-50);
39
39
  --color-bg-warning: var(--color-amber-50);
40
40
  --color-bg-info: var(--color-cyan-50);
41
- --color-bg-link: var(--color-blue-50);
42
41
 
43
42
  /* UI Background Hover Colors */
44
- --color-bg-hover-default: var(--color-gray-50);
45
- --color-bg-hover-primary: var(--color-blue-100);
43
+ --color-bg-hover-primary: var(--color-gray-50);
44
+ --color-bg-hover-brand: var(--color-blue-100);
46
45
  --color-bg-hover-secondary: var(--color-gray-100);
47
46
  --color-bg-hover-tertiary: var(--color-gray-200);
48
47
  --color-bg-hover-accent: var(--color-rose-100);
@@ -50,11 +49,10 @@
50
49
  --color-bg-hover-danger: var(--color-red-100);
51
50
  --color-bg-hover-warning: var(--color-amber-100);
52
51
  --color-bg-hover-info: var(--color-cyan-100);
53
- --color-bg-hover-link: var(--color-blue-100);
54
52
 
55
53
  /* UI Background Active Colors */
56
- --color-bg-active-default: var(--color-gray-100);
57
- --color-bg-active-primary: var(--color-blue-200);
54
+ --color-bg-active-primary: var(--color-gray-100);
55
+ --color-bg-active-brand: var(--color-blue-200);
58
56
  --color-bg-active-secondary: var(--color-gray-200);
59
57
  --color-bg-active-tertiary: var(--color-gray-300);
60
58
  --color-bg-active-accent: var(--color-rose-200);
@@ -62,11 +60,10 @@
62
60
  --color-bg-active-danger: var(--color-red-200);
63
61
  --color-bg-active-warning: var(--color-amber-200);
64
62
  --color-bg-active-info: var(--color-cyan-200);
65
- --color-bg-active-link: var(--color-blue-200);
66
63
 
67
64
  /* Filled UI Background Colors */
68
- --color-bg-filled-default: var(--color-gray-800);
69
- --color-bg-filled-primary: var(--color-blue-600);
65
+ --color-bg-filled-primary: var(--color-gray-800);
66
+ --color-bg-filled-brand: var(--color-blue-600);
70
67
  --color-bg-filled-secondary: var(--color-gray-600);
71
68
  --color-bg-filled-tertiary: var(--color-gray-500);
72
69
  --color-bg-filled-accent: var(--color-rose-600);
@@ -74,11 +71,10 @@
74
71
  --color-bg-filled-danger: var(--color-red-600);
75
72
  --color-bg-filled-warning: var(--color-amber-600);
76
73
  --color-bg-filled-info: var(--color-cyan-600);
77
- --color-bg-filled-link: var(--color-blue-600);
78
74
 
79
75
  /* Filled UI Hover Background Colors */
80
- --color-bg-filled-hover-default: var(--color-gray-900);
81
- --color-bg-filled-hover-primary: var(--color-blue-700);
76
+ --color-bg-filled-hover-primary: var(--color-gray-900);
77
+ --color-bg-filled-hover-brand: var(--color-blue-700);
82
78
  --color-bg-filled-hover-secondary: var(--color-gray-700);
83
79
  --color-bg-filled-hover-tertiary: var(--color-gray-600);
84
80
  --color-bg-filled-hover-accent: var(--color-rose-700);
@@ -86,11 +82,10 @@
86
82
  --color-bg-filled-hover-danger: var(--color-red-700);
87
83
  --color-bg-filled-hover-warning: var(--color-amber-700);
88
84
  --color-bg-filled-hover-info: var(--color-cyan-700);
89
- --color-bg-filled-hover-link: var(--color-blue-700);
90
85
 
91
86
  /* Filled UI Active Background Colors */
92
- --color-bg-filled-active-default: var(--color-gray-950);
93
- --color-bg-filled-active-primary: var(--color-blue-800);
87
+ --color-bg-filled-active-primary: var(--color-gray-950);
88
+ --color-bg-filled-active-brand: var(--color-blue-800);
94
89
  --color-bg-filled-active-secondary: var(--color-gray-800);
95
90
  --color-bg-filled-active-tertiary: var(--color-gray-700);
96
91
  --color-bg-filled-active-accent: var(--color-rose-800);
@@ -98,11 +93,10 @@
98
93
  --color-bg-filled-active-danger: var(--color-red-800);
99
94
  --color-bg-filled-active-warning: var(--color-amber-800);
100
95
  --color-bg-filled-active-info: var(--color-cyan-800);
101
- --color-bg-filled-active-link: var(--color-blue-800);
102
96
 
103
97
  /* Layout Background Colors */
104
- --color-bg-layout-default: var(--color-white);
105
98
  --color-bg-layout-primary: var(--color-white);
99
+ --color-bg-layout-brand: var(--color-blue-50);
106
100
  --color-bg-layout-secondary: var(--color-gray-50);
107
101
  --color-bg-layout-tertiary: var(--color-gray-100);
108
102
  --color-bg-layout-accent: var(--color-indigo-50);
@@ -111,11 +105,10 @@
111
105
  --color-bg-layout-warning: var(--color-yellow-50);
112
106
  --color-bg-layout-info: var(--color-blue-50);
113
107
  --color-bg-layout-transparent: transparent;
114
- --color-bg-layout-link: var(--color-blue-50);
115
108
 
116
109
  /* Layout Filled Background Colors */
117
- --color-bg-filled-layout-default: var(--color-gray-700);
118
- --color-bg-filled-layout-primary: var(--color-blue-800);
110
+ --color-bg-filled-layout-primary: var(--color-gray-700);
111
+ --color-bg-filled-layout-brand: var(--color-blue-800);
119
112
  --color-bg-filled-layout-secondary: var(--color-gray-800);
120
113
  --color-bg-filled-layout-tertiary: var(--color-gray-900);
121
114
  --color-bg-filled-layout-accent: var(--color-indigo-700);
@@ -124,31 +117,28 @@
124
117
  --color-bg-filled-layout-warning: var(--color-yellow-800);
125
118
  --color-bg-filled-layout-info: var(--color-blue-700);
126
119
  --color-bg-filled-layout-transparent: transparent;
127
- --color-bg-filled-layout-link: var(--color-blue-700);
128
120
 
129
121
  /* Border Colors */
130
- --color-border-default: var(--color-gray-200);
131
- --color-border-primary: var(--color-blue-200);
132
- --color-border-secondary: var(--color-gray-200);
133
- --color-border-tertiary: var(--color-gray-300);
134
- --color-border-link: var(--color-blue-200);
135
- --color-border-accent: var(--color-rose-200);
136
- --color-border-success: var(--color-green-200);
137
- --color-border-danger: var(--color-red-200);
138
- --color-border-warning: var(--color-yellow-200);
139
- --color-border-info: var(--color-blue-200);
122
+ --color-border-primary: var(--color-gray-200);
123
+ --color-border-brand: var(--color-blue-300);
124
+ --color-border-secondary: var(--color-gray-300);
125
+ --color-border-tertiary: var(--color-gray-400);
126
+ --color-border-accent: var(--color-rose-300);
127
+ --color-border-success: var(--color-emerald-300);
128
+ --color-border-danger: var(--color-red-300);
129
+ --color-border-warning: var(--color-amber-300);
130
+ --color-border-info: var(--color-cyan-300);
140
131
 
141
132
  /* Filled Button Border Colors */
142
- --color-border-filled-default: var(--color-gray-600);
143
- --color-border-filled-primary: var(--color-blue-600);
133
+ --color-border-filled-primary: var(--color-gray-600);
134
+ --color-border-filled-brand: var(--color-blue-600);
144
135
  --color-border-filled-secondary: var(--color-gray-700);
145
- --color-border-filled-tertiary: var(--color-gray-800);
136
+ --color-border-filled-tertiary: var(--color-gray-600);
146
137
  --color-border-filled-accent: var(--color-rose-600);
147
- --color-border-filled-success: var(--color-green-600);
138
+ --color-border-filled-success: var(--color-emerald-600);
148
139
  --color-border-filled-danger: var(--color-red-600);
149
- --color-border-filled-warning: var(--color-yellow-600);
150
- --color-border-filled-info: var(--color-blue-600);
151
- --color-border-filled-link: var(--color-blue-600);
140
+ --color-border-filled-warning: var(--color-amber-600);
141
+ --color-border-filled-info: var(--color-cyan-600);
152
142
 
153
143
  --layout-spacing: var(--spacing);
154
144
  --ui-spacing: var(--spacing);
@@ -206,22 +196,21 @@
206
196
  --color-amber-50: oklch(98.7% 0.022 95.277);
207
197
  --color-amber-100: oklch(96.2% 0.059 95.617);
208
198
  --color-amber-200: oklch(92.4% 0.12 95.746);
199
+ --color-amber-300: oklch(87.9% 0.169 91.605);
209
200
  --color-amber-600: oklch(66.6% 0.179 58.318);
210
201
  --color-amber-700: oklch(55.5% 0.163 48.998);
211
202
  --color-amber-800: oklch(47.3% 0.137 46.201);
212
203
  --color-yellow-50: oklch(98.7% 0.026 102.212);
213
204
  --color-yellow-100: oklch(97.3% 0.071 103.193);
214
- --color-yellow-200: oklch(94.5% 0.129 101.54);
215
- --color-yellow-600: oklch(68.1% 0.162 75.834);
216
205
  --color-yellow-800: oklch(47.6% 0.114 61.907);
217
206
  --color-green-50: oklch(98.2% 0.018 155.826);
218
- --color-green-200: oklch(92.5% 0.084 155.995);
219
207
  --color-green-500: oklch(72.3% 0.219 149.579);
220
208
  --color-green-600: oklch(62.7% 0.194 149.214);
221
209
  --color-green-700: oklch(52.7% 0.154 150.069);
222
210
  --color-emerald-50: oklch(97.9% 0.021 166.113);
223
211
  --color-emerald-100: oklch(95% 0.052 163.051);
224
212
  --color-emerald-200: oklch(90.5% 0.093 164.15);
213
+ --color-emerald-300: oklch(84.5% 0.143 164.978);
225
214
  --color-emerald-500: oklch(69.6% 0.17 162.48);
226
215
  --color-emerald-600: oklch(59.6% 0.145 163.225);
227
216
  --color-emerald-700: oklch(50.8% 0.118 165.612);
@@ -229,12 +218,14 @@
229
218
  --color-cyan-50: oklch(98.4% 0.019 200.873);
230
219
  --color-cyan-100: oklch(95.6% 0.045 203.388);
231
220
  --color-cyan-200: oklch(91.7% 0.08 205.041);
221
+ --color-cyan-300: oklch(86.5% 0.127 207.078);
232
222
  --color-cyan-600: oklch(60.9% 0.126 221.723);
233
223
  --color-cyan-700: oklch(52% 0.105 223.128);
234
224
  --color-cyan-800: oklch(45% 0.085 224.283);
235
225
  --color-blue-50: oklch(97% 0.014 254.604);
236
226
  --color-blue-100: oklch(93.2% 0.032 255.585);
237
227
  --color-blue-200: oklch(88.2% 0.059 254.128);
228
+ --color-blue-300: oklch(80.9% 0.105 251.813);
238
229
  --color-blue-500: oklch(62.3% 0.214 259.815);
239
230
  --color-blue-600: oklch(54.6% 0.245 262.881);
240
231
  --color-blue-700: oklch(48.8% 0.243 264.376);
@@ -247,12 +238,14 @@
247
238
  --color-indigo-700: oklch(45.7% 0.24 277.023);
248
239
  --color-violet-400: oklch(70.2% 0.183 293.541);
249
240
  --color-violet-600: oklch(54.1% 0.281 293.009);
241
+ --color-purple-100: oklch(94.6% 0.033 307.174);
250
242
  --color-purple-600: oklch(55.8% 0.288 302.321);
251
243
  --color-purple-700: oklch(49.6% 0.265 301.924);
252
244
  --color-pink-600: oklch(59.2% 0.249 0.584);
253
245
  --color-rose-50: oklch(96.9% 0.015 12.422);
254
246
  --color-rose-100: oklch(94.1% 0.03 12.58);
255
247
  --color-rose-200: oklch(89.2% 0.058 10.001);
248
+ --color-rose-300: oklch(81% 0.117 11.638);
256
249
  --color-rose-600: oklch(58.6% 0.253 17.585);
257
250
  --color-rose-700: oklch(51.4% 0.222 16.935);
258
251
  --color-rose-800: oklch(45.5% 0.188 13.697);
@@ -260,6 +253,7 @@
260
253
  --color-gray-100: oklch(96.7% 0.003 264.542);
261
254
  --color-gray-200: oklch(92.8% 0.006 264.531);
262
255
  --color-gray-300: oklch(87.2% 0.01 258.338);
256
+ --color-gray-400: oklch(70.7% 0.022 261.325);
263
257
  --color-gray-500: oklch(55.1% 0.027 264.364);
264
258
  --color-gray-600: oklch(44.6% 0.03 256.802);
265
259
  --color-gray-700: oklch(37.3% 0.034 259.733);
@@ -316,8 +310,8 @@
316
310
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
317
311
  --default-font-family: var(--font-sans);
318
312
  --default-mono-font-family: var(--font-mono);
319
- --color-text-default: var(--color-gray-900);
320
- --color-text-primary: var(--color-blue-600);
313
+ --color-text-primary: var(--color-gray-900);
314
+ --color-text-brand: var(--color-blue-600);
321
315
  --color-text-secondary: var(--color-gray-600);
322
316
  --color-text-tertiary: var(--color-gray-500);
323
317
  --color-text-link: var(--color-blue-600);
@@ -326,8 +320,8 @@
326
320
  --color-text-danger: var(--color-red-600);
327
321
  --color-text-warning: var(--color-amber-600);
328
322
  --color-text-info: var(--color-cyan-600);
329
- --color-text-filled-default: var(--color-white);
330
- --color-text-filled-primary: var(--color-blue-100);
323
+ --color-text-filled-primary: var(--color-white);
324
+ --color-text-filled-brand: var(--color-blue-100);
331
325
  --color-text-filled-secondary: var(--color-gray-200);
332
326
  --color-text-filled-tertiary: var(--color-gray-300);
333
327
  --color-text-filled-link: var(--color-blue-100);
@@ -336,8 +330,8 @@
336
330
  --color-text-filled-danger: var(--color-red-100);
337
331
  --color-text-filled-warning: var(--color-amber-100);
338
332
  --color-text-filled-info: var(--color-cyan-100);
339
- --color-bg-default: var(--color-white);
340
- --color-bg-primary: var(--color-blue-50);
333
+ --color-bg-primary: var(--color-white);
334
+ --color-bg-brand: var(--color-blue-50);
341
335
  --color-bg-secondary: var(--color-gray-50);
342
336
  --color-bg-tertiary: var(--color-gray-100);
343
337
  --color-bg-accent: var(--color-rose-50);
@@ -345,9 +339,8 @@
345
339
  --color-bg-danger: var(--color-red-50);
346
340
  --color-bg-warning: var(--color-amber-50);
347
341
  --color-bg-info: var(--color-cyan-50);
348
- --color-bg-link: var(--color-blue-50);
349
- --color-bg-hover-default: var(--color-gray-50);
350
- --color-bg-hover-primary: var(--color-blue-100);
342
+ --color-bg-hover-primary: var(--color-gray-50);
343
+ --color-bg-hover-brand: var(--color-blue-100);
351
344
  --color-bg-hover-secondary: var(--color-gray-100);
352
345
  --color-bg-hover-tertiary: var(--color-gray-200);
353
346
  --color-bg-hover-accent: var(--color-rose-100);
@@ -355,9 +348,8 @@
355
348
  --color-bg-hover-danger: var(--color-red-100);
356
349
  --color-bg-hover-warning: var(--color-amber-100);
357
350
  --color-bg-hover-info: var(--color-cyan-100);
358
- --color-bg-hover-link: var(--color-blue-100);
359
- --color-bg-active-default: var(--color-gray-100);
360
- --color-bg-active-primary: var(--color-blue-200);
351
+ --color-bg-active-primary: var(--color-gray-100);
352
+ --color-bg-active-brand: var(--color-blue-200);
361
353
  --color-bg-active-secondary: var(--color-gray-200);
362
354
  --color-bg-active-tertiary: var(--color-gray-300);
363
355
  --color-bg-active-accent: var(--color-rose-200);
@@ -365,9 +357,8 @@
365
357
  --color-bg-active-danger: var(--color-red-200);
366
358
  --color-bg-active-warning: var(--color-amber-200);
367
359
  --color-bg-active-info: var(--color-cyan-200);
368
- --color-bg-active-link: var(--color-blue-200);
369
- --color-bg-filled-default: var(--color-gray-800);
370
- --color-bg-filled-primary: var(--color-blue-600);
360
+ --color-bg-filled-primary: var(--color-gray-800);
361
+ --color-bg-filled-brand: var(--color-blue-600);
371
362
  --color-bg-filled-secondary: var(--color-gray-600);
372
363
  --color-bg-filled-tertiary: var(--color-gray-500);
373
364
  --color-bg-filled-accent: var(--color-rose-600);
@@ -375,9 +366,8 @@
375
366
  --color-bg-filled-danger: var(--color-red-600);
376
367
  --color-bg-filled-warning: var(--color-amber-600);
377
368
  --color-bg-filled-info: var(--color-cyan-600);
378
- --color-bg-filled-link: var(--color-blue-600);
379
- --color-bg-filled-hover-default: var(--color-gray-900);
380
- --color-bg-filled-hover-primary: var(--color-blue-700);
369
+ --color-bg-filled-hover-primary: var(--color-gray-900);
370
+ --color-bg-filled-hover-brand: var(--color-blue-700);
381
371
  --color-bg-filled-hover-secondary: var(--color-gray-700);
382
372
  --color-bg-filled-hover-tertiary: var(--color-gray-600);
383
373
  --color-bg-filled-hover-accent: var(--color-rose-700);
@@ -385,9 +375,8 @@
385
375
  --color-bg-filled-hover-danger: var(--color-red-700);
386
376
  --color-bg-filled-hover-warning: var(--color-amber-700);
387
377
  --color-bg-filled-hover-info: var(--color-cyan-700);
388
- --color-bg-filled-hover-link: var(--color-blue-700);
389
- --color-bg-filled-active-default: var(--color-gray-950);
390
- --color-bg-filled-active-primary: var(--color-blue-800);
378
+ --color-bg-filled-active-primary: var(--color-gray-950);
379
+ --color-bg-filled-active-brand: var(--color-blue-800);
391
380
  --color-bg-filled-active-secondary: var(--color-gray-800);
392
381
  --color-bg-filled-active-tertiary: var(--color-gray-700);
393
382
  --color-bg-filled-active-accent: var(--color-rose-800);
@@ -395,9 +384,8 @@
395
384
  --color-bg-filled-active-danger: var(--color-red-800);
396
385
  --color-bg-filled-active-warning: var(--color-amber-800);
397
386
  --color-bg-filled-active-info: var(--color-cyan-800);
398
- --color-bg-filled-active-link: var(--color-blue-800);
399
- --color-bg-layout-default: var(--color-white);
400
387
  --color-bg-layout-primary: var(--color-white);
388
+ --color-bg-layout-brand: var(--color-blue-50);
401
389
  --color-bg-layout-secondary: var(--color-gray-50);
402
390
  --color-bg-layout-tertiary: var(--color-gray-100);
403
391
  --color-bg-layout-accent: var(--color-indigo-50);
@@ -405,9 +393,8 @@
405
393
  --color-bg-layout-danger: var(--color-red-50);
406
394
  --color-bg-layout-warning: var(--color-yellow-50);
407
395
  --color-bg-layout-info: var(--color-blue-50);
408
- --color-bg-layout-link: var(--color-blue-50);
409
- --color-bg-filled-layout-default: var(--color-gray-700);
410
- --color-bg-filled-layout-primary: var(--color-blue-800);
396
+ --color-bg-filled-layout-primary: var(--color-gray-700);
397
+ --color-bg-filled-layout-brand: var(--color-blue-800);
411
398
  --color-bg-filled-layout-secondary: var(--color-gray-800);
412
399
  --color-bg-filled-layout-tertiary: var(--color-gray-900);
413
400
  --color-bg-filled-layout-accent: var(--color-indigo-700);
@@ -415,27 +402,24 @@
415
402
  --color-bg-filled-layout-danger: var(--color-red-700);
416
403
  --color-bg-filled-layout-warning: var(--color-yellow-800);
417
404
  --color-bg-filled-layout-info: var(--color-blue-700);
418
- --color-bg-filled-layout-link: var(--color-blue-700);
419
- --color-border-default: var(--color-gray-200);
420
- --color-border-primary: var(--color-blue-200);
421
- --color-border-secondary: var(--color-gray-200);
422
- --color-border-tertiary: var(--color-gray-300);
423
- --color-border-link: var(--color-blue-200);
424
- --color-border-accent: var(--color-rose-200);
425
- --color-border-success: var(--color-green-200);
426
- --color-border-danger: var(--color-red-200);
427
- --color-border-warning: var(--color-yellow-200);
428
- --color-border-info: var(--color-blue-200);
429
- --color-border-filled-default: var(--color-gray-600);
430
- --color-border-filled-primary: var(--color-blue-600);
405
+ --color-border-primary: var(--color-gray-200);
406
+ --color-border-brand: var(--color-blue-300);
407
+ --color-border-secondary: var(--color-gray-300);
408
+ --color-border-tertiary: var(--color-gray-400);
409
+ --color-border-accent: var(--color-rose-300);
410
+ --color-border-success: var(--color-emerald-300);
411
+ --color-border-danger: var(--color-red-300);
412
+ --color-border-warning: var(--color-amber-300);
413
+ --color-border-info: var(--color-cyan-300);
414
+ --color-border-filled-primary: var(--color-gray-600);
415
+ --color-border-filled-brand: var(--color-blue-600);
431
416
  --color-border-filled-secondary: var(--color-gray-700);
432
- --color-border-filled-tertiary: var(--color-gray-800);
417
+ --color-border-filled-tertiary: var(--color-gray-600);
433
418
  --color-border-filled-accent: var(--color-rose-600);
434
- --color-border-filled-success: var(--color-green-600);
419
+ --color-border-filled-success: var(--color-emerald-600);
435
420
  --color-border-filled-danger: var(--color-red-600);
436
- --color-border-filled-warning: var(--color-yellow-600);
437
- --color-border-filled-info: var(--color-blue-600);
438
- --color-border-filled-link: var(--color-blue-600);
421
+ --color-border-filled-warning: var(--color-amber-600);
422
+ --color-border-filled-info: var(--color-cyan-600);
439
423
  --layout-spacing: var(--spacing);
440
424
  --ui-spacing: var(--spacing);
441
425
  --br-base: var(--spacing);
@@ -669,6 +653,12 @@
669
653
  .mb-2 {
670
654
  margin-bottom: calc(var(--spacing) * 2);
671
655
  }
656
+ .mb-3 {
657
+ margin-bottom: calc(var(--spacing) * 3);
658
+ }
659
+ .mb-6 {
660
+ margin-bottom: calc(var(--spacing) * 6);
661
+ }
672
662
  .block {
673
663
  display: block;
674
664
  }
@@ -709,6 +699,9 @@
709
699
  width: var(--ui-size);
710
700
  height: var(--ui-size);
711
701
  }
702
+ .h-10 {
703
+ height: calc(var(--spacing) * 10);
704
+ }
712
705
  .h-\[calc\(var\(--lh\)\*var\(--fs\)\)\] {
713
706
  height: calc(var(--lh) * var(--fs));
714
707
  }
@@ -793,6 +786,9 @@
793
786
  .grid-cols-1 {
794
787
  grid-template-columns: repeat(1, minmax(0, 1fr));
795
788
  }
789
+ .grid-cols-6 {
790
+ grid-template-columns: repeat(6, minmax(0, 1fr));
791
+ }
796
792
  .flex-col {
797
793
  flex-direction: column;
798
794
  }
@@ -862,6 +858,9 @@
862
858
  .gap-0 {
863
859
  gap: calc(var(--spacing) * 0);
864
860
  }
861
+ .gap-1 {
862
+ gap: calc(var(--spacing) * 1);
863
+ }
865
864
  .gap-unit {
866
865
  gap: var(--gap-unit);
867
866
  }
@@ -879,6 +878,11 @@
879
878
  margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
880
879
  }
881
880
  }
881
+ .truncate {
882
+ overflow: hidden;
883
+ text-overflow: ellipsis;
884
+ white-space: nowrap;
885
+ }
882
886
  .overflow-auto {
883
887
  overflow: auto;
884
888
  }
@@ -978,6 +982,9 @@
978
982
  .border-\(--color-border-accent\) {
979
983
  border-color: var(--color-border-accent);
980
984
  }
985
+ .border-\(--color-border-brand\) {
986
+ border-color: var(--color-border-brand);
987
+ }
981
988
  .border-\(--color-border-danger\) {
982
989
  border-color: var(--color-border-danger);
983
990
  }
@@ -987,18 +994,15 @@
987
994
  .border-\(--color-border-filled-accent\) {
988
995
  border-color: var(--color-border-filled-accent);
989
996
  }
997
+ .border-\(--color-border-filled-brand\) {
998
+ border-color: var(--color-border-filled-brand);
999
+ }
990
1000
  .border-\(--color-border-filled-danger\) {
991
1001
  border-color: var(--color-border-filled-danger);
992
1002
  }
993
- .border-\(--color-border-filled-default\) {
994
- border-color: var(--color-border-filled-default);
995
- }
996
1003
  .border-\(--color-border-filled-info\) {
997
1004
  border-color: var(--color-border-filled-info);
998
1005
  }
999
- .border-\(--color-border-filled-link\) {
1000
- border-color: var(--color-border-filled-link);
1001
- }
1002
1006
  .border-\(--color-border-filled-primary\) {
1003
1007
  border-color: var(--color-border-filled-primary);
1004
1008
  }
@@ -1017,9 +1021,6 @@
1017
1021
  .border-\(--color-border-info\) {
1018
1022
  border-color: var(--color-border-info);
1019
1023
  }
1020
- .border-\(--color-border-link\) {
1021
- border-color: var(--color-border-link);
1022
- }
1023
1024
  .border-\(--color-border-primary\) {
1024
1025
  border-color: var(--color-border-primary);
1025
1026
  }
@@ -1053,156 +1054,9 @@
1053
1054
  .border-violet-400 {
1054
1055
  border-color: var(--color-violet-400);
1055
1056
  }
1056
- .bg-\(--color-bg-accent\) {
1057
- background-color: var(--color-bg-accent);
1058
- }
1059
- .bg-\(--color-bg-danger\) {
1060
- background-color: var(--color-bg-danger);
1061
- }
1062
- .bg-\(--color-bg-default\) {
1063
- background-color: var(--color-bg-default);
1064
- }
1065
- .bg-\(--color-bg-filled-accent\) {
1066
- background-color: var(--color-bg-filled-accent);
1067
- }
1068
- .bg-\(--color-bg-filled-danger\) {
1069
- background-color: var(--color-bg-filled-danger);
1070
- }
1071
- .bg-\(--color-bg-filled-default\) {
1072
- background-color: var(--color-bg-filled-default);
1073
- }
1074
- .bg-\(--color-bg-filled-info\) {
1075
- background-color: var(--color-bg-filled-info);
1076
- }
1077
- .bg-\(--color-bg-filled-layout-accent\) {
1078
- background-color: var(--color-bg-filled-layout-accent);
1079
- }
1080
- .bg-\(--color-bg-filled-layout-danger\) {
1081
- background-color: var(--color-bg-filled-layout-danger);
1082
- }
1083
- .bg-\(--color-bg-filled-layout-default\) {
1084
- background-color: var(--color-bg-filled-layout-default);
1085
- }
1086
- .bg-\(--color-bg-filled-layout-info\) {
1087
- background-color: var(--color-bg-filled-layout-info);
1088
- }
1089
- .bg-\(--color-bg-filled-layout-link\) {
1090
- background-color: var(--color-bg-filled-layout-link);
1091
- }
1092
- .bg-\(--color-bg-filled-layout-primary\) {
1093
- background-color: var(--color-bg-filled-layout-primary);
1094
- }
1095
- .bg-\(--color-bg-filled-layout-secondary\) {
1096
- background-color: var(--color-bg-filled-layout-secondary);
1097
- }
1098
- .bg-\(--color-bg-filled-layout-success\) {
1099
- background-color: var(--color-bg-filled-layout-success);
1100
- }
1101
- .bg-\(--color-bg-filled-layout-tertiary\) {
1102
- background-color: var(--color-bg-filled-layout-tertiary);
1103
- }
1104
- .bg-\(--color-bg-filled-layout-warning\) {
1105
- background-color: var(--color-bg-filled-layout-warning);
1106
- }
1107
- .bg-\(--color-bg-filled-link\) {
1108
- background-color: var(--color-bg-filled-link);
1109
- }
1110
1057
  .bg-\(--color-bg-filled-primary\) {
1111
1058
  background-color: var(--color-bg-filled-primary);
1112
1059
  }
1113
- .bg-\(--color-bg-filled-secondary\) {
1114
- background-color: var(--color-bg-filled-secondary);
1115
- }
1116
- .bg-\(--color-bg-filled-success\) {
1117
- background-color: var(--color-bg-filled-success);
1118
- }
1119
- .bg-\(--color-bg-filled-tertiary\) {
1120
- background-color: var(--color-bg-filled-tertiary);
1121
- }
1122
- .bg-\(--color-bg-filled-warning\) {
1123
- background-color: var(--color-bg-filled-warning);
1124
- }
1125
- .bg-\(--color-bg-info\) {
1126
- background-color: var(--color-bg-info);
1127
- }
1128
- .bg-\(--color-bg-layout-accent\) {
1129
- background-color: var(--color-bg-layout-accent);
1130
- }
1131
- .bg-\(--color-bg-layout-danger\) {
1132
- background-color: var(--color-bg-layout-danger);
1133
- }
1134
- .bg-\(--color-bg-layout-default\) {
1135
- background-color: var(--color-bg-layout-default);
1136
- }
1137
- .bg-\(--color-bg-layout-info\) {
1138
- background-color: var(--color-bg-layout-info);
1139
- }
1140
- .bg-\(--color-bg-layout-link\) {
1141
- background-color: var(--color-bg-layout-link);
1142
- }
1143
- .bg-\(--color-bg-layout-primary\) {
1144
- background-color: var(--color-bg-layout-primary);
1145
- }
1146
- .bg-\(--color-bg-layout-secondary\) {
1147
- background-color: var(--color-bg-layout-secondary);
1148
- }
1149
- .bg-\(--color-bg-layout-success\) {
1150
- background-color: var(--color-bg-layout-success);
1151
- }
1152
- .bg-\(--color-bg-layout-tertiary\) {
1153
- background-color: var(--color-bg-layout-tertiary);
1154
- }
1155
- .bg-\(--color-bg-layout-warning\) {
1156
- background-color: var(--color-bg-layout-warning);
1157
- }
1158
- .bg-\(--color-bg-link\) {
1159
- background-color: var(--color-bg-link);
1160
- }
1161
- .bg-\(--color-bg-primary\) {
1162
- background-color: var(--color-bg-primary);
1163
- }
1164
- .bg-\(--color-bg-secondary\) {
1165
- background-color: var(--color-bg-secondary);
1166
- }
1167
- .bg-\(--color-bg-success\) {
1168
- background-color: var(--color-bg-success);
1169
- }
1170
- .bg-\(--color-bg-tertiary\) {
1171
- background-color: var(--color-bg-tertiary);
1172
- }
1173
- .bg-\(--color-bg-warning\) {
1174
- background-color: var(--color-bg-warning);
1175
- }
1176
- .bg-\(--color-border-accent\) {
1177
- background-color: var(--color-border-accent);
1178
- }
1179
- .bg-\(--color-border-danger\) {
1180
- background-color: var(--color-border-danger);
1181
- }
1182
- .bg-\(--color-border-default\) {
1183
- background-color: var(--color-border-default);
1184
- }
1185
- .bg-\(--color-border-info\) {
1186
- background-color: var(--color-border-info);
1187
- }
1188
- .bg-\(--color-border-link\) {
1189
- background-color: var(--color-border-link);
1190
- }
1191
- .bg-\(--color-border-primary\) {
1192
- background-color: var(--color-border-primary);
1193
- }
1194
- .bg-\(--color-border-secondary\) {
1195
- background-color: var(--color-border-secondary);
1196
- }
1197
- .bg-\(--color-border-success\) {
1198
- background-color: var(--color-border-success);
1199
- }
1200
- .bg-\(--color-border-tertiary\) {
1201
- background-color: var(--color-border-tertiary);
1202
- }
1203
- .bg-\(--color-border-warning\) {
1204
- background-color: var(--color-border-warning);
1205
- }
1206
1060
  .bg-blue-500 {
1207
1061
  background-color: var(--color-blue-500);
1208
1062
  }
@@ -1224,9 +1078,6 @@
1224
1078
  .bg-red-100 {
1225
1079
  background-color: var(--color-red-100);
1226
1080
  }
1227
- .bg-transparent {
1228
- background-color: transparent;
1229
- }
1230
1081
  .bg-violet-600 {
1231
1082
  background-color: var(--color-violet-600);
1232
1083
  }
@@ -1257,6 +1108,9 @@
1257
1108
  .px-\(--ui-px\) {
1258
1109
  padding-inline: var(--ui-px);
1259
1110
  }
1111
+ .px-1 {
1112
+ padding-inline: calc(var(--spacing) * 1);
1113
+ }
1260
1114
  .px-4 {
1261
1115
  padding-inline: calc(var(--spacing) * 4);
1262
1116
  }
@@ -1364,6 +1218,9 @@
1364
1218
  .text-\(length\:--fs\) {
1365
1219
  font-size: var(--fs);
1366
1220
  }
1221
+ .text-\[10px\] {
1222
+ font-size: 10px;
1223
+ }
1367
1224
  .leading-\(--lh\) {
1368
1225
  --tw-leading: var(--lh);
1369
1226
  line-height: var(--lh);
@@ -1425,21 +1282,21 @@
1425
1282
  .text-\(--color-text-accent\) {
1426
1283
  color: var(--color-text-accent);
1427
1284
  }
1285
+ .text-\(--color-text-brand\) {
1286
+ color: var(--color-text-brand);
1287
+ }
1428
1288
  .text-\(--color-text-danger\) {
1429
1289
  color: var(--color-text-danger);
1430
1290
  }
1431
- .text-\(--color-text-default\) {
1432
- color: var(--color-text-default);
1433
- }
1434
1291
  .text-\(--color-text-filled-accent\) {
1435
1292
  color: var(--color-text-filled-accent);
1436
1293
  }
1294
+ .text-\(--color-text-filled-brand\) {
1295
+ color: var(--color-text-filled-brand);
1296
+ }
1437
1297
  .text-\(--color-text-filled-danger\) {
1438
1298
  color: var(--color-text-filled-danger);
1439
1299
  }
1440
- .text-\(--color-text-filled-default\) {
1441
- color: var(--color-text-filled-default);
1442
- }
1443
1300
  .text-\(--color-text-filled-info\) {
1444
1301
  color: var(--color-text-filled-info);
1445
1302
  }
@@ -1488,6 +1345,15 @@
1488
1345
  .text-blue-500 {
1489
1346
  color: var(--color-blue-500);
1490
1347
  }
1348
+ .text-gray-500 {
1349
+ color: var(--color-gray-500);
1350
+ }
1351
+ .text-gray-600 {
1352
+ color: var(--color-gray-600);
1353
+ }
1354
+ .text-gray-700 {
1355
+ color: var(--color-gray-700);
1356
+ }
1491
1357
  .text-green-500 {
1492
1358
  color: var(--color-green-500);
1493
1359
  }
@@ -1497,6 +1363,12 @@
1497
1363
  .text-pink-600 {
1498
1364
  color: var(--color-pink-600);
1499
1365
  }
1366
+ .text-purple-100 {
1367
+ color: var(--color-purple-100);
1368
+ }
1369
+ .text-purple-600 {
1370
+ color: var(--color-purple-600);
1371
+ }
1500
1372
  .text-red-500 {
1501
1373
  color: var(--color-red-500);
1502
1374
  }
@@ -1545,27 +1417,24 @@
1545
1417
  .accent-\(--color-bg-accent\) {
1546
1418
  accent-color: var(--color-bg-accent);
1547
1419
  }
1420
+ .accent-\(--color-bg-brand\) {
1421
+ accent-color: var(--color-bg-brand);
1422
+ }
1548
1423
  .accent-\(--color-bg-danger\) {
1549
1424
  accent-color: var(--color-bg-danger);
1550
1425
  }
1551
- .accent-\(--color-bg-default\) {
1552
- accent-color: var(--color-bg-default);
1553
- }
1554
1426
  .accent-\(--color-bg-filled-accent\) {
1555
1427
  accent-color: var(--color-bg-filled-accent);
1556
1428
  }
1429
+ .accent-\(--color-bg-filled-brand\) {
1430
+ accent-color: var(--color-bg-filled-brand);
1431
+ }
1557
1432
  .accent-\(--color-bg-filled-danger\) {
1558
1433
  accent-color: var(--color-bg-filled-danger);
1559
1434
  }
1560
- .accent-\(--color-bg-filled-default\) {
1561
- accent-color: var(--color-bg-filled-default);
1562
- }
1563
1435
  .accent-\(--color-bg-filled-info\) {
1564
1436
  accent-color: var(--color-bg-filled-info);
1565
1437
  }
1566
- .accent-\(--color-bg-filled-link\) {
1567
- accent-color: var(--color-bg-filled-link);
1568
- }
1569
1438
  .accent-\(--color-bg-filled-primary\) {
1570
1439
  accent-color: var(--color-bg-filled-primary);
1571
1440
  }
@@ -1584,9 +1453,6 @@
1584
1453
  .accent-\(--color-bg-info\) {
1585
1454
  accent-color: var(--color-bg-info);
1586
1455
  }
1587
- .accent-\(--color-bg-link\) {
1588
- accent-color: var(--color-bg-link);
1589
- }
1590
1456
  .accent-\(--color-bg-primary\) {
1591
1457
  accent-color: var(--color-bg-primary);
1592
1458
  }
@@ -1662,27 +1528,24 @@
1662
1528
  .ring-\(--color-border-accent\) {
1663
1529
  --tw-ring-color: var(--color-border-accent);
1664
1530
  }
1531
+ .ring-\(--color-border-brand\) {
1532
+ --tw-ring-color: var(--color-border-brand);
1533
+ }
1665
1534
  .ring-\(--color-border-danger\) {
1666
1535
  --tw-ring-color: var(--color-border-danger);
1667
1536
  }
1668
- .ring-\(--color-border-default\) {
1669
- --tw-ring-color: var(--color-border-default);
1670
- }
1671
1537
  .ring-\(--color-border-filled-accent\) {
1672
1538
  --tw-ring-color: var(--color-border-filled-accent);
1673
1539
  }
1540
+ .ring-\(--color-border-filled-brand\) {
1541
+ --tw-ring-color: var(--color-border-filled-brand);
1542
+ }
1674
1543
  .ring-\(--color-border-filled-danger\) {
1675
1544
  --tw-ring-color: var(--color-border-filled-danger);
1676
1545
  }
1677
- .ring-\(--color-border-filled-default\) {
1678
- --tw-ring-color: var(--color-border-filled-default);
1679
- }
1680
1546
  .ring-\(--color-border-filled-info\) {
1681
1547
  --tw-ring-color: var(--color-border-filled-info);
1682
1548
  }
1683
- .ring-\(--color-border-filled-link\) {
1684
- --tw-ring-color: var(--color-border-filled-link);
1685
- }
1686
1549
  .ring-\(--color-border-filled-primary\) {
1687
1550
  --tw-ring-color: var(--color-border-filled-primary);
1688
1551
  }
@@ -1701,9 +1564,6 @@
1701
1564
  .ring-\(--color-border-info\) {
1702
1565
  --tw-ring-color: var(--color-border-info);
1703
1566
  }
1704
- .ring-\(--color-border-link\) {
1705
- --tw-ring-color: var(--color-border-link);
1706
- }
1707
1567
  .ring-\(--color-border-primary\) {
1708
1568
  --tw-ring-color: var(--color-border-primary);
1709
1569
  }
@@ -1967,6 +1827,144 @@
1967
1827
  .\[--size-unit\:5\] {
1968
1828
  --size-unit: 5;
1969
1829
  }
1830
+ .\[background\:transparent\] {
1831
+ background: transparent;
1832
+ }
1833
+ .\[background\:var\(--color-bg-accent\)\] {
1834
+ background: var(--color-bg-accent);
1835
+ }
1836
+ .\[background\:var\(--color-bg-brand\)\] {
1837
+ background: var(--color-bg-brand);
1838
+ }
1839
+ .\[background\:var\(--color-bg-danger\)\] {
1840
+ background: var(--color-bg-danger);
1841
+ }
1842
+ .\[background\:var\(--color-bg-filled-accent\)\] {
1843
+ background: var(--color-bg-filled-accent);
1844
+ }
1845
+ .\[background\:var\(--color-bg-filled-brand\)\] {
1846
+ background: var(--color-bg-filled-brand);
1847
+ }
1848
+ .\[background\:var\(--color-bg-filled-danger\)\] {
1849
+ background: var(--color-bg-filled-danger);
1850
+ }
1851
+ .\[background\:var\(--color-bg-filled-info\)\] {
1852
+ background: var(--color-bg-filled-info);
1853
+ }
1854
+ .\[background\:var\(--color-bg-filled-layout-accent\)\] {
1855
+ background: var(--color-bg-filled-layout-accent);
1856
+ }
1857
+ .\[background\:var\(--color-bg-filled-layout-brand\)\] {
1858
+ background: var(--color-bg-filled-layout-brand);
1859
+ }
1860
+ .\[background\:var\(--color-bg-filled-layout-danger\)\] {
1861
+ background: var(--color-bg-filled-layout-danger);
1862
+ }
1863
+ .\[background\:var\(--color-bg-filled-layout-info\)\] {
1864
+ background: var(--color-bg-filled-layout-info);
1865
+ }
1866
+ .\[background\:var\(--color-bg-filled-layout-primary\)\] {
1867
+ background: var(--color-bg-filled-layout-primary);
1868
+ }
1869
+ .\[background\:var\(--color-bg-filled-layout-secondary\)\] {
1870
+ background: var(--color-bg-filled-layout-secondary);
1871
+ }
1872
+ .\[background\:var\(--color-bg-filled-layout-success\)\] {
1873
+ background: var(--color-bg-filled-layout-success);
1874
+ }
1875
+ .\[background\:var\(--color-bg-filled-layout-tertiary\)\] {
1876
+ background: var(--color-bg-filled-layout-tertiary);
1877
+ }
1878
+ .\[background\:var\(--color-bg-filled-layout-warning\)\] {
1879
+ background: var(--color-bg-filled-layout-warning);
1880
+ }
1881
+ .\[background\:var\(--color-bg-filled-primary\)\] {
1882
+ background: var(--color-bg-filled-primary);
1883
+ }
1884
+ .\[background\:var\(--color-bg-filled-secondary\)\] {
1885
+ background: var(--color-bg-filled-secondary);
1886
+ }
1887
+ .\[background\:var\(--color-bg-filled-success\)\] {
1888
+ background: var(--color-bg-filled-success);
1889
+ }
1890
+ .\[background\:var\(--color-bg-filled-tertiary\)\] {
1891
+ background: var(--color-bg-filled-tertiary);
1892
+ }
1893
+ .\[background\:var\(--color-bg-filled-warning\)\] {
1894
+ background: var(--color-bg-filled-warning);
1895
+ }
1896
+ .\[background\:var\(--color-bg-info\)\] {
1897
+ background: var(--color-bg-info);
1898
+ }
1899
+ .\[background\:var\(--color-bg-layout-accent\)\] {
1900
+ background: var(--color-bg-layout-accent);
1901
+ }
1902
+ .\[background\:var\(--color-bg-layout-brand\)\] {
1903
+ background: var(--color-bg-layout-brand);
1904
+ }
1905
+ .\[background\:var\(--color-bg-layout-danger\)\] {
1906
+ background: var(--color-bg-layout-danger);
1907
+ }
1908
+ .\[background\:var\(--color-bg-layout-info\)\] {
1909
+ background: var(--color-bg-layout-info);
1910
+ }
1911
+ .\[background\:var\(--color-bg-layout-primary\)\] {
1912
+ background: var(--color-bg-layout-primary);
1913
+ }
1914
+ .\[background\:var\(--color-bg-layout-secondary\)\] {
1915
+ background: var(--color-bg-layout-secondary);
1916
+ }
1917
+ .\[background\:var\(--color-bg-layout-success\)\] {
1918
+ background: var(--color-bg-layout-success);
1919
+ }
1920
+ .\[background\:var\(--color-bg-layout-tertiary\)\] {
1921
+ background: var(--color-bg-layout-tertiary);
1922
+ }
1923
+ .\[background\:var\(--color-bg-layout-warning\)\] {
1924
+ background: var(--color-bg-layout-warning);
1925
+ }
1926
+ .\[background\:var\(--color-bg-primary\)\] {
1927
+ background: var(--color-bg-primary);
1928
+ }
1929
+ .\[background\:var\(--color-bg-secondary\)\] {
1930
+ background: var(--color-bg-secondary);
1931
+ }
1932
+ .\[background\:var\(--color-bg-success\)\] {
1933
+ background: var(--color-bg-success);
1934
+ }
1935
+ .\[background\:var\(--color-bg-tertiary\)\] {
1936
+ background: var(--color-bg-tertiary);
1937
+ }
1938
+ .\[background\:var\(--color-bg-warning\)\] {
1939
+ background: var(--color-bg-warning);
1940
+ }
1941
+ .\[background\:var\(--color-border-accent\)\] {
1942
+ background: var(--color-border-accent);
1943
+ }
1944
+ .\[background\:var\(--color-border-brand\)\] {
1945
+ background: var(--color-border-brand);
1946
+ }
1947
+ .\[background\:var\(--color-border-danger\)\] {
1948
+ background: var(--color-border-danger);
1949
+ }
1950
+ .\[background\:var\(--color-border-info\)\] {
1951
+ background: var(--color-border-info);
1952
+ }
1953
+ .\[background\:var\(--color-border-primary\)\] {
1954
+ background: var(--color-border-primary);
1955
+ }
1956
+ .\[background\:var\(--color-border-secondary\)\] {
1957
+ background: var(--color-border-secondary);
1958
+ }
1959
+ .\[background\:var\(--color-border-success\)\] {
1960
+ background: var(--color-border-success);
1961
+ }
1962
+ .\[background\:var\(--color-border-tertiary\)\] {
1963
+ background: var(--color-border-tertiary);
1964
+ }
1965
+ .\[background\:var\(--color-border-warning\)\] {
1966
+ background: var(--color-border-warning);
1967
+ }
1970
1968
  .ring-inset {
1971
1969
  --tw-ring-inset: inset;
1972
1970
  }
@@ -1975,109 +1973,99 @@
1975
1973
  visibility: visible;
1976
1974
  }
1977
1975
  }
1978
- .checked\:bg-\(--color-bg-accent\) {
1979
- &:checked {
1980
- background-color: var(--color-bg-accent);
1981
- }
1982
- }
1983
- .checked\:bg-\(--color-bg-danger\) {
1976
+ .checked\:\[background\:transparent\] {
1984
1977
  &:checked {
1985
- background-color: var(--color-bg-danger);
1978
+ background: transparent;
1986
1979
  }
1987
1980
  }
1988
- .checked\:bg-\(--color-bg-default\) {
1981
+ .checked\:\[background\:var\(--color-bg-accent\)\] {
1989
1982
  &:checked {
1990
- background-color: var(--color-bg-default);
1983
+ background: var(--color-bg-accent);
1991
1984
  }
1992
1985
  }
1993
- .checked\:bg-\(--color-bg-filled-accent\) {
1986
+ .checked\:\[background\:var\(--color-bg-brand\)\] {
1994
1987
  &:checked {
1995
- background-color: var(--color-bg-filled-accent);
1988
+ background: var(--color-bg-brand);
1996
1989
  }
1997
1990
  }
1998
- .checked\:bg-\(--color-bg-filled-danger\) {
1991
+ .checked\:\[background\:var\(--color-bg-danger\)\] {
1999
1992
  &:checked {
2000
- background-color: var(--color-bg-filled-danger);
1993
+ background: var(--color-bg-danger);
2001
1994
  }
2002
1995
  }
2003
- .checked\:bg-\(--color-bg-filled-default\) {
1996
+ .checked\:\[background\:var\(--color-bg-filled-accent\)\] {
2004
1997
  &:checked {
2005
- background-color: var(--color-bg-filled-default);
1998
+ background: var(--color-bg-filled-accent);
2006
1999
  }
2007
2000
  }
2008
- .checked\:bg-\(--color-bg-filled-info\) {
2001
+ .checked\:\[background\:var\(--color-bg-filled-brand\)\] {
2009
2002
  &:checked {
2010
- background-color: var(--color-bg-filled-info);
2003
+ background: var(--color-bg-filled-brand);
2011
2004
  }
2012
2005
  }
2013
- .checked\:bg-\(--color-bg-filled-link\) {
2006
+ .checked\:\[background\:var\(--color-bg-filled-danger\)\] {
2014
2007
  &:checked {
2015
- background-color: var(--color-bg-filled-link);
2008
+ background: var(--color-bg-filled-danger);
2016
2009
  }
2017
2010
  }
2018
- .checked\:bg-\(--color-bg-filled-primary\) {
2011
+ .checked\:\[background\:var\(--color-bg-filled-info\)\] {
2019
2012
  &:checked {
2020
- background-color: var(--color-bg-filled-primary);
2013
+ background: var(--color-bg-filled-info);
2021
2014
  }
2022
2015
  }
2023
- .checked\:bg-\(--color-bg-filled-secondary\) {
2016
+ .checked\:\[background\:var\(--color-bg-filled-primary\)\] {
2024
2017
  &:checked {
2025
- background-color: var(--color-bg-filled-secondary);
2018
+ background: var(--color-bg-filled-primary);
2026
2019
  }
2027
2020
  }
2028
- .checked\:bg-\(--color-bg-filled-success\) {
2021
+ .checked\:\[background\:var\(--color-bg-filled-secondary\)\] {
2029
2022
  &:checked {
2030
- background-color: var(--color-bg-filled-success);
2023
+ background: var(--color-bg-filled-secondary);
2031
2024
  }
2032
2025
  }
2033
- .checked\:bg-\(--color-bg-filled-tertiary\) {
2026
+ .checked\:\[background\:var\(--color-bg-filled-success\)\] {
2034
2027
  &:checked {
2035
- background-color: var(--color-bg-filled-tertiary);
2028
+ background: var(--color-bg-filled-success);
2036
2029
  }
2037
2030
  }
2038
- .checked\:bg-\(--color-bg-filled-warning\) {
2031
+ .checked\:\[background\:var\(--color-bg-filled-tertiary\)\] {
2039
2032
  &:checked {
2040
- background-color: var(--color-bg-filled-warning);
2033
+ background: var(--color-bg-filled-tertiary);
2041
2034
  }
2042
2035
  }
2043
- .checked\:bg-\(--color-bg-info\) {
2036
+ .checked\:\[background\:var\(--color-bg-filled-warning\)\] {
2044
2037
  &:checked {
2045
- background-color: var(--color-bg-info);
2038
+ background: var(--color-bg-filled-warning);
2046
2039
  }
2047
2040
  }
2048
- .checked\:bg-\(--color-bg-link\) {
2041
+ .checked\:\[background\:var\(--color-bg-info\)\] {
2049
2042
  &:checked {
2050
- background-color: var(--color-bg-link);
2043
+ background: var(--color-bg-info);
2051
2044
  }
2052
2045
  }
2053
- .checked\:bg-\(--color-bg-primary\) {
2046
+ .checked\:\[background\:var\(--color-bg-primary\)\] {
2054
2047
  &:checked {
2055
- background-color: var(--color-bg-primary);
2048
+ background: var(--color-bg-primary);
2056
2049
  }
2057
2050
  }
2058
- .checked\:bg-\(--color-bg-secondary\) {
2051
+ .checked\:\[background\:var\(--color-bg-secondary\)\] {
2059
2052
  &:checked {
2060
- background-color: var(--color-bg-secondary);
2053
+ background: var(--color-bg-secondary);
2061
2054
  }
2062
2055
  }
2063
- .checked\:bg-\(--color-bg-success\) {
2056
+ .checked\:\[background\:var\(--color-bg-success\)\] {
2064
2057
  &:checked {
2065
- background-color: var(--color-bg-success);
2058
+ background: var(--color-bg-success);
2066
2059
  }
2067
2060
  }
2068
- .checked\:bg-\(--color-bg-tertiary\) {
2061
+ .checked\:\[background\:var\(--color-bg-tertiary\)\] {
2069
2062
  &:checked {
2070
- background-color: var(--color-bg-tertiary);
2063
+ background: var(--color-bg-tertiary);
2071
2064
  }
2072
2065
  }
2073
- .checked\:bg-\(--color-bg-warning\) {
2066
+ .checked\:\[background\:var\(--color-bg-warning\)\] {
2074
2067
  &:checked {
2075
- background-color: var(--color-bg-warning);
2076
- }
2077
- }
2078
- .checked\:bg-transparent {
2079
- &:checked {
2080
- background-color: transparent;
2068
+ background: var(--color-bg-warning);
2081
2069
  }
2082
2070
  }
2083
2071
  .hover\:scale-105 {
@@ -2097,240 +2085,226 @@
2097
2085
  }
2098
2086
  }
2099
2087
  }
2100
- .hover\:bg-\(--color-bg-filled-hover-accent\) {
2088
+ .hover\:bg-purple-700 {
2101
2089
  &:hover {
2102
2090
  @media (hover: hover) {
2103
- background-color: var(--color-bg-filled-hover-accent);
2091
+ background-color: var(--color-purple-700);
2104
2092
  }
2105
2093
  }
2106
2094
  }
2107
- .hover\:bg-\(--color-bg-filled-hover-danger\) {
2095
+ .hover\:bg-red-200 {
2108
2096
  &:hover {
2109
2097
  @media (hover: hover) {
2110
- background-color: var(--color-bg-filled-hover-danger);
2098
+ background-color: var(--color-red-200);
2111
2099
  }
2112
2100
  }
2113
2101
  }
2114
- .hover\:bg-\(--color-bg-filled-hover-default\) {
2102
+ .hover\:text-blue-700 {
2115
2103
  &:hover {
2116
2104
  @media (hover: hover) {
2117
- background-color: var(--color-bg-filled-hover-default);
2105
+ color: var(--color-blue-700);
2118
2106
  }
2119
2107
  }
2120
2108
  }
2121
- .hover\:bg-\(--color-bg-filled-hover-info\) {
2109
+ .hover\:text-indigo-50 {
2122
2110
  &:hover {
2123
2111
  @media (hover: hover) {
2124
- background-color: var(--color-bg-filled-hover-info);
2112
+ color: var(--color-indigo-50);
2125
2113
  }
2126
2114
  }
2127
2115
  }
2128
- .hover\:bg-\(--color-bg-filled-hover-link\) {
2116
+ .hover\:underline {
2129
2117
  &:hover {
2130
2118
  @media (hover: hover) {
2131
- background-color: var(--color-bg-filled-hover-link);
2119
+ text-decoration-line: underline;
2132
2120
  }
2133
2121
  }
2134
2122
  }
2135
- .hover\:bg-\(--color-bg-filled-hover-primary\) {
2123
+ .hover\:opacity-80 {
2136
2124
  &:hover {
2137
2125
  @media (hover: hover) {
2138
- background-color: var(--color-bg-filled-hover-primary);
2126
+ opacity: 80%;
2139
2127
  }
2140
2128
  }
2141
2129
  }
2142
- .hover\:bg-\(--color-bg-filled-hover-secondary\) {
2130
+ .hover\:shadow-lg {
2143
2131
  &:hover {
2144
2132
  @media (hover: hover) {
2145
- background-color: var(--color-bg-filled-hover-secondary);
2133
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2134
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2146
2135
  }
2147
2136
  }
2148
2137
  }
2149
- .hover\:bg-\(--color-bg-filled-hover-success\) {
2138
+ .hover\:shadow-md {
2150
2139
  &:hover {
2151
2140
  @media (hover: hover) {
2152
- background-color: var(--color-bg-filled-hover-success);
2141
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2142
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2153
2143
  }
2154
2144
  }
2155
2145
  }
2156
- .hover\:bg-\(--color-bg-filled-hover-tertiary\) {
2146
+ .hover\:shadow-sm {
2157
2147
  &:hover {
2158
2148
  @media (hover: hover) {
2159
- background-color: var(--color-bg-filled-hover-tertiary);
2149
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2150
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2160
2151
  }
2161
2152
  }
2162
2153
  }
2163
- .hover\:bg-\(--color-bg-filled-hover-warning\) {
2154
+ .hover\:shadow-xl {
2164
2155
  &:hover {
2165
2156
  @media (hover: hover) {
2166
- background-color: var(--color-bg-filled-hover-warning);
2157
+ --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2158
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2167
2159
  }
2168
2160
  }
2169
2161
  }
2170
- .hover\:bg-\(--color-bg-hover-accent\) {
2162
+ .hover\:shadow-xs {
2171
2163
  &:hover {
2172
2164
  @media (hover: hover) {
2173
- background-color: var(--color-bg-hover-accent);
2165
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
2166
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2174
2167
  }
2175
2168
  }
2176
2169
  }
2177
- .hover\:bg-\(--color-bg-hover-danger\) {
2170
+ .hover\:ring {
2178
2171
  &:hover {
2179
2172
  @media (hover: hover) {
2180
- background-color: var(--color-bg-hover-danger);
2173
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2174
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2181
2175
  }
2182
2176
  }
2183
2177
  }
2184
- .hover\:bg-\(--color-bg-hover-default\) {
2178
+ .hover\:\[background\:transparent\] {
2185
2179
  &:hover {
2186
2180
  @media (hover: hover) {
2187
- background-color: var(--color-bg-hover-default);
2181
+ background: transparent;
2188
2182
  }
2189
2183
  }
2190
2184
  }
2191
- .hover\:bg-\(--color-bg-hover-info\) {
2185
+ .hover\:\[background\:var\(--color-bg-filled-hover-accent\)\] {
2192
2186
  &:hover {
2193
2187
  @media (hover: hover) {
2194
- background-color: var(--color-bg-hover-info);
2188
+ background: var(--color-bg-filled-hover-accent);
2195
2189
  }
2196
2190
  }
2197
2191
  }
2198
- .hover\:bg-\(--color-bg-hover-link\) {
2192
+ .hover\:\[background\:var\(--color-bg-filled-hover-brand\)\] {
2199
2193
  &:hover {
2200
2194
  @media (hover: hover) {
2201
- background-color: var(--color-bg-hover-link);
2195
+ background: var(--color-bg-filled-hover-brand);
2202
2196
  }
2203
2197
  }
2204
2198
  }
2205
- .hover\:bg-\(--color-bg-hover-primary\) {
2199
+ .hover\:\[background\:var\(--color-bg-filled-hover-danger\)\] {
2206
2200
  &:hover {
2207
2201
  @media (hover: hover) {
2208
- background-color: var(--color-bg-hover-primary);
2202
+ background: var(--color-bg-filled-hover-danger);
2209
2203
  }
2210
2204
  }
2211
2205
  }
2212
- .hover\:bg-\(--color-bg-hover-secondary\) {
2206
+ .hover\:\[background\:var\(--color-bg-filled-hover-info\)\] {
2213
2207
  &:hover {
2214
2208
  @media (hover: hover) {
2215
- background-color: var(--color-bg-hover-secondary);
2209
+ background: var(--color-bg-filled-hover-info);
2216
2210
  }
2217
2211
  }
2218
2212
  }
2219
- .hover\:bg-\(--color-bg-hover-success\) {
2213
+ .hover\:\[background\:var\(--color-bg-filled-hover-primary\)\] {
2220
2214
  &:hover {
2221
2215
  @media (hover: hover) {
2222
- background-color: var(--color-bg-hover-success);
2216
+ background: var(--color-bg-filled-hover-primary);
2223
2217
  }
2224
2218
  }
2225
2219
  }
2226
- .hover\:bg-\(--color-bg-hover-tertiary\) {
2220
+ .hover\:\[background\:var\(--color-bg-filled-hover-secondary\)\] {
2227
2221
  &:hover {
2228
2222
  @media (hover: hover) {
2229
- background-color: var(--color-bg-hover-tertiary);
2223
+ background: var(--color-bg-filled-hover-secondary);
2230
2224
  }
2231
2225
  }
2232
2226
  }
2233
- .hover\:bg-\(--color-bg-hover-warning\) {
2227
+ .hover\:\[background\:var\(--color-bg-filled-hover-success\)\] {
2234
2228
  &:hover {
2235
2229
  @media (hover: hover) {
2236
- background-color: var(--color-bg-hover-warning);
2230
+ background: var(--color-bg-filled-hover-success);
2237
2231
  }
2238
2232
  }
2239
2233
  }
2240
- .hover\:bg-purple-700 {
2234
+ .hover\:\[background\:var\(--color-bg-filled-hover-tertiary\)\] {
2241
2235
  &:hover {
2242
2236
  @media (hover: hover) {
2243
- background-color: var(--color-purple-700);
2237
+ background: var(--color-bg-filled-hover-tertiary);
2244
2238
  }
2245
2239
  }
2246
2240
  }
2247
- .hover\:bg-red-200 {
2241
+ .hover\:\[background\:var\(--color-bg-filled-hover-warning\)\] {
2248
2242
  &:hover {
2249
2243
  @media (hover: hover) {
2250
- background-color: var(--color-red-200);
2244
+ background: var(--color-bg-filled-hover-warning);
2251
2245
  }
2252
2246
  }
2253
2247
  }
2254
- .hover\:bg-transparent {
2248
+ .hover\:\[background\:var\(--color-bg-hover-accent\)\] {
2255
2249
  &:hover {
2256
2250
  @media (hover: hover) {
2257
- background-color: transparent;
2251
+ background: var(--color-bg-hover-accent);
2258
2252
  }
2259
2253
  }
2260
2254
  }
2261
- .hover\:text-blue-700 {
2255
+ .hover\:\[background\:var\(--color-bg-hover-brand\)\] {
2262
2256
  &:hover {
2263
2257
  @media (hover: hover) {
2264
- color: var(--color-blue-700);
2258
+ background: var(--color-bg-hover-brand);
2265
2259
  }
2266
2260
  }
2267
2261
  }
2268
- .hover\:text-indigo-50 {
2262
+ .hover\:\[background\:var\(--color-bg-hover-danger\)\] {
2269
2263
  &:hover {
2270
2264
  @media (hover: hover) {
2271
- color: var(--color-indigo-50);
2265
+ background: var(--color-bg-hover-danger);
2272
2266
  }
2273
2267
  }
2274
2268
  }
2275
- .hover\:underline {
2269
+ .hover\:\[background\:var\(--color-bg-hover-info\)\] {
2276
2270
  &:hover {
2277
2271
  @media (hover: hover) {
2278
- text-decoration-line: underline;
2272
+ background: var(--color-bg-hover-info);
2279
2273
  }
2280
2274
  }
2281
2275
  }
2282
- .hover\:opacity-80 {
2276
+ .hover\:\[background\:var\(--color-bg-hover-primary\)\] {
2283
2277
  &:hover {
2284
2278
  @media (hover: hover) {
2285
- opacity: 80%;
2279
+ background: var(--color-bg-hover-primary);
2286
2280
  }
2287
2281
  }
2288
2282
  }
2289
- .hover\:shadow-lg {
2283
+ .hover\:\[background\:var\(--color-bg-hover-secondary\)\] {
2290
2284
  &:hover {
2291
2285
  @media (hover: hover) {
2292
- --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2293
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2294
- }
2295
- }
2296
- }
2297
- .hover\:shadow-md {
2298
- &:hover {
2299
- @media (hover: hover) {
2300
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2301
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2302
- }
2303
- }
2304
- }
2305
- .hover\:shadow-sm {
2306
- &:hover {
2307
- @media (hover: hover) {
2308
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2309
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2286
+ background: var(--color-bg-hover-secondary);
2310
2287
  }
2311
2288
  }
2312
2289
  }
2313
- .hover\:shadow-xl {
2290
+ .hover\:\[background\:var\(--color-bg-hover-success\)\] {
2314
2291
  &:hover {
2315
2292
  @media (hover: hover) {
2316
- --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2317
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2293
+ background: var(--color-bg-hover-success);
2318
2294
  }
2319
2295
  }
2320
2296
  }
2321
- .hover\:shadow-xs {
2297
+ .hover\:\[background\:var\(--color-bg-hover-tertiary\)\] {
2322
2298
  &:hover {
2323
2299
  @media (hover: hover) {
2324
- --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
2325
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2300
+ background: var(--color-bg-hover-tertiary);
2326
2301
  }
2327
2302
  }
2328
2303
  }
2329
- .hover\:ring {
2304
+ .hover\:\[background\:var\(--color-bg-hover-warning\)\] {
2330
2305
  &:hover {
2331
2306
  @media (hover: hover) {
2332
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2333
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2307
+ background: var(--color-bg-hover-warning);
2334
2308
  }
2335
2309
  }
2336
2310
  }
@@ -2357,14 +2331,14 @@
2357
2331
  outline-color: var(--color-border-accent);
2358
2332
  }
2359
2333
  }
2360
- .focus-visible\:outline-\(--color-border-danger\) {
2334
+ .focus-visible\:outline-\(--color-border-brand\) {
2361
2335
  &:focus-visible {
2362
- outline-color: var(--color-border-danger);
2336
+ outline-color: var(--color-border-brand);
2363
2337
  }
2364
2338
  }
2365
- .focus-visible\:outline-\(--color-border-default\) {
2339
+ .focus-visible\:outline-\(--color-border-danger\) {
2366
2340
  &:focus-visible {
2367
- outline-color: var(--color-border-default);
2341
+ outline-color: var(--color-border-danger);
2368
2342
  }
2369
2343
  }
2370
2344
  .focus-visible\:outline-\(--color-border-filled-accent\) {
@@ -2372,14 +2346,14 @@
2372
2346
  outline-color: var(--color-border-filled-accent);
2373
2347
  }
2374
2348
  }
2375
- .focus-visible\:outline-\(--color-border-filled-danger\) {
2349
+ .focus-visible\:outline-\(--color-border-filled-brand\) {
2376
2350
  &:focus-visible {
2377
- outline-color: var(--color-border-filled-danger);
2351
+ outline-color: var(--color-border-filled-brand);
2378
2352
  }
2379
2353
  }
2380
- .focus-visible\:outline-\(--color-border-filled-default\) {
2354
+ .focus-visible\:outline-\(--color-border-filled-danger\) {
2381
2355
  &:focus-visible {
2382
- outline-color: var(--color-border-filled-default);
2356
+ outline-color: var(--color-border-filled-danger);
2383
2357
  }
2384
2358
  }
2385
2359
  .focus-visible\:outline-\(--color-border-filled-info\) {
@@ -2387,11 +2361,6 @@
2387
2361
  outline-color: var(--color-border-filled-info);
2388
2362
  }
2389
2363
  }
2390
- .focus-visible\:outline-\(--color-border-filled-link\) {
2391
- &:focus-visible {
2392
- outline-color: var(--color-border-filled-link);
2393
- }
2394
- }
2395
2364
  .focus-visible\:outline-\(--color-border-filled-primary\) {
2396
2365
  &:focus-visible {
2397
2366
  outline-color: var(--color-border-filled-primary);
@@ -2422,11 +2391,6 @@
2422
2391
  outline-color: var(--color-border-info);
2423
2392
  }
2424
2393
  }
2425
- .focus-visible\:outline-\(--color-border-link\) {
2426
- &:focus-visible {
2427
- outline-color: var(--color-border-link);
2428
- }
2429
- }
2430
2394
  .focus-visible\:outline-\(--color-border-primary\) {
2431
2395
  &:focus-visible {
2432
2396
  outline-color: var(--color-border-primary);
@@ -2462,125 +2426,115 @@
2462
2426
  border-color: var(--color-green-700);
2463
2427
  }
2464
2428
  }
2465
- .active\:bg-\(--color-bg-active-accent\) {
2466
- &:active {
2467
- background-color: var(--color-bg-active-accent);
2468
- }
2469
- }
2470
- .active\:bg-\(--color-bg-active-danger\) {
2471
- &:active {
2472
- background-color: var(--color-bg-active-danger);
2473
- }
2474
- }
2475
- .active\:bg-\(--color-bg-active-default\) {
2429
+ .active\:bg-red-300 {
2476
2430
  &:active {
2477
- background-color: var(--color-bg-active-default);
2431
+ background-color: var(--color-red-300);
2478
2432
  }
2479
2433
  }
2480
- .active\:bg-\(--color-bg-active-info\) {
2434
+ .active\:text-blue-900 {
2481
2435
  &:active {
2482
- background-color: var(--color-bg-active-info);
2436
+ color: var(--color-blue-900);
2483
2437
  }
2484
2438
  }
2485
- .active\:bg-\(--color-bg-active-link\) {
2439
+ .active\:ring {
2486
2440
  &:active {
2487
- background-color: var(--color-bg-active-link);
2441
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2442
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2488
2443
  }
2489
2444
  }
2490
- .active\:bg-\(--color-bg-active-primary\) {
2445
+ .active\:\[background\:transparent\] {
2491
2446
  &:active {
2492
- background-color: var(--color-bg-active-primary);
2447
+ background: transparent;
2493
2448
  }
2494
2449
  }
2495
- .active\:bg-\(--color-bg-active-secondary\) {
2450
+ .active\:\[background\:var\(--color-bg-active-accent\)\] {
2496
2451
  &:active {
2497
- background-color: var(--color-bg-active-secondary);
2452
+ background: var(--color-bg-active-accent);
2498
2453
  }
2499
2454
  }
2500
- .active\:bg-\(--color-bg-active-success\) {
2455
+ .active\:\[background\:var\(--color-bg-active-brand\)\] {
2501
2456
  &:active {
2502
- background-color: var(--color-bg-active-success);
2457
+ background: var(--color-bg-active-brand);
2503
2458
  }
2504
2459
  }
2505
- .active\:bg-\(--color-bg-active-tertiary\) {
2460
+ .active\:\[background\:var\(--color-bg-active-danger\)\] {
2506
2461
  &:active {
2507
- background-color: var(--color-bg-active-tertiary);
2462
+ background: var(--color-bg-active-danger);
2508
2463
  }
2509
2464
  }
2510
- .active\:bg-\(--color-bg-active-warning\) {
2465
+ .active\:\[background\:var\(--color-bg-active-info\)\] {
2511
2466
  &:active {
2512
- background-color: var(--color-bg-active-warning);
2467
+ background: var(--color-bg-active-info);
2513
2468
  }
2514
2469
  }
2515
- .active\:bg-\(--color-bg-filled-active-accent\) {
2470
+ .active\:\[background\:var\(--color-bg-active-primary\)\] {
2516
2471
  &:active {
2517
- background-color: var(--color-bg-filled-active-accent);
2472
+ background: var(--color-bg-active-primary);
2518
2473
  }
2519
2474
  }
2520
- .active\:bg-\(--color-bg-filled-active-danger\) {
2475
+ .active\:\[background\:var\(--color-bg-active-secondary\)\] {
2521
2476
  &:active {
2522
- background-color: var(--color-bg-filled-active-danger);
2477
+ background: var(--color-bg-active-secondary);
2523
2478
  }
2524
2479
  }
2525
- .active\:bg-\(--color-bg-filled-active-default\) {
2480
+ .active\:\[background\:var\(--color-bg-active-success\)\] {
2526
2481
  &:active {
2527
- background-color: var(--color-bg-filled-active-default);
2482
+ background: var(--color-bg-active-success);
2528
2483
  }
2529
2484
  }
2530
- .active\:bg-\(--color-bg-filled-active-info\) {
2485
+ .active\:\[background\:var\(--color-bg-active-tertiary\)\] {
2531
2486
  &:active {
2532
- background-color: var(--color-bg-filled-active-info);
2487
+ background: var(--color-bg-active-tertiary);
2533
2488
  }
2534
2489
  }
2535
- .active\:bg-\(--color-bg-filled-active-link\) {
2490
+ .active\:\[background\:var\(--color-bg-active-warning\)\] {
2536
2491
  &:active {
2537
- background-color: var(--color-bg-filled-active-link);
2492
+ background: var(--color-bg-active-warning);
2538
2493
  }
2539
2494
  }
2540
- .active\:bg-\(--color-bg-filled-active-primary\) {
2495
+ .active\:\[background\:var\(--color-bg-filled-active-accent\)\] {
2541
2496
  &:active {
2542
- background-color: var(--color-bg-filled-active-primary);
2497
+ background: var(--color-bg-filled-active-accent);
2543
2498
  }
2544
2499
  }
2545
- .active\:bg-\(--color-bg-filled-active-secondary\) {
2500
+ .active\:\[background\:var\(--color-bg-filled-active-brand\)\] {
2546
2501
  &:active {
2547
- background-color: var(--color-bg-filled-active-secondary);
2502
+ background: var(--color-bg-filled-active-brand);
2548
2503
  }
2549
2504
  }
2550
- .active\:bg-\(--color-bg-filled-active-success\) {
2505
+ .active\:\[background\:var\(--color-bg-filled-active-danger\)\] {
2551
2506
  &:active {
2552
- background-color: var(--color-bg-filled-active-success);
2507
+ background: var(--color-bg-filled-active-danger);
2553
2508
  }
2554
2509
  }
2555
- .active\:bg-\(--color-bg-filled-active-tertiary\) {
2510
+ .active\:\[background\:var\(--color-bg-filled-active-info\)\] {
2556
2511
  &:active {
2557
- background-color: var(--color-bg-filled-active-tertiary);
2512
+ background: var(--color-bg-filled-active-info);
2558
2513
  }
2559
2514
  }
2560
- .active\:bg-\(--color-bg-filled-active-warning\) {
2515
+ .active\:\[background\:var\(--color-bg-filled-active-primary\)\] {
2561
2516
  &:active {
2562
- background-color: var(--color-bg-filled-active-warning);
2517
+ background: var(--color-bg-filled-active-primary);
2563
2518
  }
2564
2519
  }
2565
- .active\:bg-red-300 {
2520
+ .active\:\[background\:var\(--color-bg-filled-active-secondary\)\] {
2566
2521
  &:active {
2567
- background-color: var(--color-red-300);
2522
+ background: var(--color-bg-filled-active-secondary);
2568
2523
  }
2569
2524
  }
2570
- .active\:bg-transparent {
2525
+ .active\:\[background\:var\(--color-bg-filled-active-success\)\] {
2571
2526
  &:active {
2572
- background-color: transparent;
2527
+ background: var(--color-bg-filled-active-success);
2573
2528
  }
2574
2529
  }
2575
- .active\:text-blue-900 {
2530
+ .active\:\[background\:var\(--color-bg-filled-active-tertiary\)\] {
2576
2531
  &:active {
2577
- color: var(--color-blue-900);
2532
+ background: var(--color-bg-filled-active-tertiary);
2578
2533
  }
2579
2534
  }
2580
- .active\:ring {
2535
+ .active\:\[background\:var\(--color-bg-filled-active-warning\)\] {
2581
2536
  &:active {
2582
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2583
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2537
+ background: var(--color-bg-filled-active-warning);
2584
2538
  }
2585
2539
  }
2586
2540
  .active\:ring-inset {