@vaneui/md 0.3.1-alpha.20251228133323.630b220 → 0.3.1-alpha.20260104192853.8b57fd2

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 (6) hide show
  1. package/dist/index.esm.js +488 -1059
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +488 -1059
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles/index.css +1544 -1233
  6. package/package.json +2 -2
package/dist/styles/index.css CHANGED
@@ -121,8 +121,8 @@
121
121
  /* Border Colors */
122
122
  --color-border-primary: var(--color-gray-200);
123
123
  --color-border-brand: var(--color-blue-300);
124
- --color-border-secondary: var(--color-gray-300);
125
- --color-border-tertiary: var(--color-gray-400);
124
+ --color-border-secondary: var(--color-gray-200);
125
+ --color-border-tertiary: var(--color-gray-200);
126
126
  --color-border-accent: var(--color-rose-300);
127
127
  --color-border-success: var(--color-emerald-300);
128
128
  --color-border-danger: var(--color-red-300);
@@ -132,7 +132,7 @@
132
132
  /* Filled Button Border Colors */
133
133
  --color-border-filled-primary: var(--color-gray-600);
134
134
  --color-border-filled-brand: var(--color-blue-600);
135
- --color-border-filled-secondary: var(--color-gray-700);
135
+ --color-border-filled-secondary: var(--color-gray-600);
136
136
  --color-border-filled-tertiary: var(--color-gray-600);
137
137
  --color-border-filled-accent: var(--color-rose-600);
138
138
  --color-border-filled-success: var(--color-emerald-600);
@@ -140,15 +140,11 @@
140
140
  --color-border-filled-warning: var(--color-amber-600);
141
141
  --color-border-filled-info: var(--color-cyan-600);
142
142
 
143
- --layout-spacing: var(--spacing);
144
- --ui-spacing: var(--spacing);
145
143
  --br-base: var(--spacing);
146
- --ui-br-base: calc(var(--spacing) * 0.5);
147
144
  --fs-base: calc(var(--spacing) * 0.5);
148
145
 
149
- --breakpoint-mobile: 40rem;
150
- --breakpoint-tablet: 48rem;
151
- --breakpoint-laptop: 64rem;
146
+ --breakpoint-mobile: 48rem;
147
+ --breakpoint-tablet: 64rem;
152
148
  --breakpoint-desktop: 80rem;
153
149
 
154
150
  --lh: 1;
@@ -162,21 +158,478 @@
162
158
  --rw: 1px; /* Ring width */
163
159
  }
164
160
  @layer base {
165
- :where(*) {
166
- --gap: calc(var(--gap-unit) * var(--layout-spacing));
167
- --ui-gap: calc(var(--gap-unit) * var(--ui-spacing));
161
+ [data-size] {
162
+ --gap: calc(var(--gap-unit) * var(--spacing));
163
+ --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--spacing));
164
+ --py: calc(var(--py-unit) * var(--spacing));
165
+ --size: calc(var(--size-unit) * var(--spacing));
166
+ --br: calc(var(--br-unit) * var(--br-base));
167
+ --fs: calc(var(--fs-unit) * var(--fs-base));
168
+ --pl: calc(var(--py-unit) * var(--spacing));
169
+ }
170
+ }
171
+ @layer components {
172
+ /* NON-RESPONSIVE COMPONENTS */
168
173
 
169
- --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--layout-spacing));
170
- --ui-px: calc(var(--aspect-ratio) * var(--py-unit) * var(--ui-spacing));
171
- --py: calc(var(--py-unit) * var(--layout-spacing));
172
- --ui-py: calc(var(--py-unit) * var(--ui-spacing));
173
- --ui-size: calc(var(--size-unit) * var(--ui-spacing));
174
+ /* Button */
175
+ .vane-button { --lh: 1.3; --br-unit: 2; --py-unit: 2; --aspect-ratio: 2; --gap-unit: 2; }
176
+ .vane-button[data-size="xs"] { --fs-unit: 6; --py-unit: 1; --br-unit: 1; --gap-unit: 1; }
177
+ .vane-button[data-size="sm"] { --fs-unit: 7; --py-unit: 1.5; --br-unit: 1.5; --gap-unit: 1.5; }
178
+ .vane-button[data-size="md"] { --fs-unit: 8; --py-unit: 2; --br-unit: 2; --gap-unit: 2; }
179
+ .vane-button[data-size="lg"] { --fs-unit: 9; --py-unit: 2.5; --br-unit: 2.5; --gap-unit: 2.5; }
180
+ .vane-button[data-size="xl"] { --fs-unit: 10; --py-unit: 3; --br-unit: 3; --gap-unit: 3; }
174
181
 
175
- --br: calc(var(--br-unit) * var(--br-base));
176
- --ui-br: calc(var(--br-unit) * var(--ui-br-base));
182
+ /* Badge */
183
+ .vane-badge { --lh: 1.6; --br-unit: 2; --py-unit: 2; --aspect-ratio: 2; --gap-unit: 2; }
184
+ .vane-badge[data-size="xs"] { --fs-unit: 6; --py-unit: 1; --br-unit: 1; --gap-unit: 1; }
185
+ .vane-badge[data-size="sm"] { --fs-unit: 7; --py-unit: 1.5; --br-unit: 1.5; --gap-unit: 1.5; }
186
+ .vane-badge[data-size="md"] { --fs-unit: 8; --py-unit: 2; --br-unit: 2; --gap-unit: 2; }
187
+ .vane-badge[data-size="lg"] { --fs-unit: 9; --py-unit: 2.5; --br-unit: 2.5; --gap-unit: 2.5; }
188
+ .vane-badge[data-size="xl"] { --fs-unit: 10; --py-unit: 3; --br-unit: 3; --gap-unit: 3; }
177
189
 
178
- --fs: calc(var(--fs-unit) * var(--fs-base));
190
+ /* Chip */
191
+ .vane-chip { --lh: 1.2; --br-unit: 2; --py-unit: 1.5; --aspect-ratio: 2; --gap-unit: 2; }
192
+ .vane-chip[data-size="xs"] { --fs-unit: 6; --py-unit: 0.5; --br-unit: 1; --gap-unit: 1; }
193
+ .vane-chip[data-size="sm"] { --fs-unit: 7; --py-unit: 1; --br-unit: 1.5; --gap-unit: 1.5; }
194
+ .vane-chip[data-size="md"] { --fs-unit: 8; --py-unit: 1.5; --br-unit: 2; --gap-unit: 2; }
195
+ .vane-chip[data-size="lg"] { --fs-unit: 9; --py-unit: 2; --br-unit: 2.5; --gap-unit: 2.5; }
196
+ .vane-chip[data-size="xl"] { --fs-unit: 10; --py-unit: 2.5; --br-unit: 3; --gap-unit: 3; }
197
+
198
+ /* Code */
199
+ .vane-code { --lh: 1; --br-unit: 1.5; --py-unit: 0.8; --aspect-ratio: 1.8; }
200
+ .vane-code[data-size="xs"] { --fs-unit: 5; --py-unit: 0.4; --br-unit: 0.5; }
201
+ .vane-code[data-size="sm"] { --fs-unit: 6; --py-unit: 0.6; --br-unit: 1; }
202
+ .vane-code[data-size="md"] { --fs-unit: 7; --py-unit: 0.8; --br-unit: 1.5; }
203
+ .vane-code[data-size="lg"] { --fs-unit: 8; --py-unit: 1; --br-unit: 2; }
204
+ .vane-code[data-size="xl"] { --fs-unit: 9; --py-unit: 1.2; --br-unit: 2.5; }
205
+
206
+ /* Input */
207
+ .vane-input { --lh: 1.6; --br-unit: 2; --py-unit: 2; --aspect-ratio: 2; }
208
+ .vane-input[data-size="xs"] { --fs-unit: 6; --py-unit: 1; --br-unit: 1; }
209
+ .vane-input[data-size="sm"] { --fs-unit: 7; --py-unit: 1.5; --br-unit: 1.5; }
210
+ .vane-input[data-size="md"] { --fs-unit: 8; --py-unit: 2; --br-unit: 2; }
211
+ .vane-input[data-size="lg"] { --fs-unit: 9; --py-unit: 2.5; --br-unit: 2.5; }
212
+ .vane-input[data-size="xl"] { --fs-unit: 10; --py-unit: 3; --br-unit: 3; }
213
+
214
+ /* Checkbox */
215
+ .vane-checkbox { --br-unit: 1; }
216
+ .vane-checkbox[data-size="xs"] { --size-unit: 3; --br-unit: 0.5; }
217
+ .vane-checkbox[data-size="sm"] { --size-unit: 3.5; --br-unit: 0.5; }
218
+ .vane-checkbox[data-size="md"] { --size-unit: 4; --br-unit: 1; }
219
+ .vane-checkbox[data-size="lg"] { --size-unit: 4.5; --br-unit: 1; }
220
+ .vane-checkbox[data-size="xl"] { --size-unit: 5; --br-unit: 1.5; }
221
+
222
+ /* Label */
223
+ .vane-label { --lh: 1.6; --gap-unit: 2; }
224
+ .vane-label[data-size="xs"] { --fs-unit: 6; --gap-unit: 1; }
225
+ .vane-label[data-size="sm"] { --fs-unit: 7; --gap-unit: 1.5; }
226
+ .vane-label[data-size="md"] { --fs-unit: 8; --gap-unit: 2; }
227
+ .vane-label[data-size="lg"] { --fs-unit: 9; --gap-unit: 2.5; }
228
+ .vane-label[data-size="xl"] { --fs-unit: 10; --gap-unit: 3; }
229
+
230
+ /* Card */
231
+ .vane-card { --br-unit: 5; --py-unit: 6; --aspect-ratio: 1; --gap-unit: 4; }
232
+ .vane-card[data-size="xs"] { --py-unit: 2; --gap-unit: 2; --br-unit: 3; }
233
+ .vane-card[data-size="sm"] { --py-unit: 4; --gap-unit: 3; --br-unit: 4; }
234
+ .vane-card[data-size="md"] { --py-unit: 6; --gap-unit: 4; --br-unit: 5; }
235
+ .vane-card[data-size="lg"] { --py-unit: 8; --gap-unit: 5; --br-unit: 6; }
236
+ .vane-card[data-size="xl"] { --py-unit: 10; --gap-unit: 6; --br-unit: 7; }
237
+
238
+ /* Stack */
239
+ .vane-stack { --gap-unit: 4; --py-unit: 4; --aspect-ratio: 1; --br-unit: 5; }
240
+ .vane-stack[data-size="xs"] { --gap-unit: 2; --py-unit: 2; --br-unit: 3; }
241
+ .vane-stack[data-size="sm"] { --gap-unit: 3; --py-unit: 3; --br-unit: 4; }
242
+ .vane-stack[data-size="md"] { --gap-unit: 4; --py-unit: 4; --br-unit: 5; }
243
+ .vane-stack[data-size="lg"] { --gap-unit: 5; --py-unit: 5; --br-unit: 6; }
244
+ .vane-stack[data-size="xl"] { --gap-unit: 6; --py-unit: 6; --br-unit: 7; }
245
+
246
+ /* Row */
247
+ .vane-row { --gap-unit: 4; --br-unit: 5; }
248
+ .vane-row[data-size="xs"] { --gap-unit: 2; --br-unit: 3; }
249
+ .vane-row[data-size="sm"] { --gap-unit: 3; --br-unit: 4; }
250
+ .vane-row[data-size="md"] { --gap-unit: 4; --br-unit: 5; }
251
+ .vane-row[data-size="lg"] { --gap-unit: 5; --br-unit: 6; }
252
+ .vane-row[data-size="xl"] { --gap-unit: 6; --br-unit: 7; }
253
+
254
+ /* Col */
255
+ .vane-col { --gap-unit: 4; --br-unit: 5; }
256
+ .vane-col[data-size="xs"] { --gap-unit: 2; --br-unit: 3; }
257
+ .vane-col[data-size="sm"] { --gap-unit: 3; --br-unit: 4; }
258
+ .vane-col[data-size="md"] { --gap-unit: 4; --br-unit: 5; }
259
+ .vane-col[data-size="lg"] { --gap-unit: 5; --br-unit: 6; }
260
+ .vane-col[data-size="xl"] { --gap-unit: 6; --br-unit: 7; }
261
+
262
+ /* Container */
263
+ .vane-container { --py-unit: 8; --aspect-ratio: 2; --br-unit: 5; --gap-unit: 4; }
264
+ .vane-container[data-size="xs"] { --py-unit: 4; --br-unit: 3; --gap-unit: 2; }
265
+ .vane-container[data-size="sm"] { --py-unit: 6; --br-unit: 4; --gap-unit: 3; }
266
+ .vane-container[data-size="md"] { --py-unit: 8; --br-unit: 5; --gap-unit: 4; }
267
+ .vane-container[data-size="lg"] { --py-unit: 10; --br-unit: 6; --gap-unit: 5; }
268
+ .vane-container[data-size="xl"] { --py-unit: 12; --br-unit: 7; --gap-unit: 6; }
269
+
270
+ /* Grid */
271
+ .vane-grid { --gap-unit: 4; --br-unit: 5; }
272
+ .vane-grid[data-size="xs"] { --gap-unit: 2; --br-unit: 3; }
273
+ .vane-grid[data-size="sm"] { --gap-unit: 3; --br-unit: 4; }
274
+ .vane-grid[data-size="md"] { --gap-unit: 4; --br-unit: 5; }
275
+ .vane-grid[data-size="lg"] { --gap-unit: 5; --br-unit: 6; }
276
+ .vane-grid[data-size="xl"] { --gap-unit: 6; --br-unit: 7; }
277
+
278
+ /* Divider */
279
+ .vane-divider { --py-unit: 4; }
280
+ .vane-divider[data-size="xs"] { --py-unit: 2; }
281
+ .vane-divider[data-size="sm"] { --py-unit: 3; }
282
+ .vane-divider[data-size="md"] { --py-unit: 4; }
283
+ .vane-divider[data-size="lg"] { --py-unit: 5; }
284
+ .vane-divider[data-size="xl"] { --py-unit: 6; }
285
+
286
+ /* Img */
287
+ .vane-img { --br-unit: 5; }
288
+ .vane-img[data-size="xs"] { --br-unit: 3; }
289
+ .vane-img[data-size="sm"] { --br-unit: 4; }
290
+ .vane-img[data-size="md"] { --br-unit: 5; }
291
+ .vane-img[data-size="lg"] { --br-unit: 6; }
292
+ .vane-img[data-size="xl"] { --br-unit: 7; }
293
+
294
+ /* List */
295
+ .vane-list { --lh: 1.6; --py-unit: 3; }
296
+ .vane-list[data-size="xs"] { --fs-unit: 6; --py-unit: 1; }
297
+ .vane-list[data-size="sm"] { --fs-unit: 7; --py-unit: 2; }
298
+ .vane-list[data-size="md"] { --fs-unit: 8; --py-unit: 3; }
299
+ .vane-list[data-size="lg"] { --fs-unit: 9; --py-unit: 4; }
300
+ .vane-list[data-size="xl"] { --fs-unit: 10; --py-unit: 5; }
301
+
302
+ /* Text */
303
+ .vane-text { --lh: 1.6; }
304
+ .vane-text[data-size="xs"] { --fs-unit: 6; }
305
+ .vane-text[data-size="sm"] { --fs-unit: 7; }
306
+ .vane-text[data-size="md"] { --fs-unit: 8; }
307
+ .vane-text[data-size="lg"] { --fs-unit: 9; }
308
+ .vane-text[data-size="xl"] { --fs-unit: 10; }
309
+
310
+ /* Link */
311
+ .vane-link { --lh: 1.6; }
312
+ .vane-link[data-size="xs"] { --fs-unit: 6; }
313
+ .vane-link[data-size="sm"] { --fs-unit: 7; }
314
+ .vane-link[data-size="md"] { --fs-unit: 8; }
315
+ .vane-link[data-size="lg"] { --fs-unit: 9; }
316
+ .vane-link[data-size="xl"] { --fs-unit: 10; }
317
+
318
+ /* ListItem */
319
+ .vane-list-item { --lh: 1.6; }
320
+ .vane-list-item[data-size="xs"] { --fs-unit: 6; }
321
+ .vane-list-item[data-size="sm"] { --fs-unit: 7; }
322
+ .vane-list-item[data-size="md"] { --fs-unit: 8; }
323
+ .vane-list-item[data-size="lg"] { --fs-unit: 9; }
324
+ .vane-list-item[data-size="xl"] { --fs-unit: 10; }
325
+
326
+ /* RESPONSIVE COMPONENTS */
327
+
328
+ /* Section */
329
+ .vane-section {
330
+ --lh: 1.6;
331
+ --py-unit-desktop: 8;
332
+ --py-unit-tablet: 6;
333
+ --py-unit-mobile: 4;
334
+ --gap-unit-desktop: 8;
335
+ --gap-unit-tablet: 6;
336
+ --gap-unit-mobile: 4;
337
+ }
338
+ .vane-section[data-size="xs"] {
339
+ --py-unit-desktop: 4; --py-unit-tablet: 3; --py-unit-mobile: 2;
340
+ --gap-unit-desktop: 4; --gap-unit-tablet: 3; --gap-unit-mobile: 2;
341
+ }
342
+ .vane-section[data-size="sm"] {
343
+ --py-unit-desktop: 8; --py-unit-tablet: 4; --py-unit-mobile: 2;
344
+ --gap-unit-desktop: 6; --gap-unit-tablet: 5; --gap-unit-mobile: 4;
345
+ }
346
+ .vane-section[data-size="md"] {
347
+ --py-unit-desktop: 12; --py-unit-tablet: 6; --py-unit-mobile: 2;
348
+ --gap-unit-desktop: 8; --gap-unit-tablet: 6; --gap-unit-mobile: 4;
349
+ }
350
+ .vane-section[data-size="lg"] {
351
+ --py-unit-desktop: 16; --py-unit-tablet: 8; --py-unit-mobile: 2;
352
+ --gap-unit-desktop: 10; --gap-unit-tablet: 8; --gap-unit-mobile: 6;
353
+ }
354
+ .vane-section[data-size="xl"] {
355
+ --py-unit-desktop: 20; --py-unit-tablet: 10; --py-unit-mobile: 4;
356
+ --gap-unit-desktop: 12; --gap-unit-tablet: 10; --gap-unit-mobile: 8;
357
+ }
358
+
359
+ /* Title */
360
+ .vane-title {
361
+ --lh: 1.3;
362
+ --fs-unit-desktop: 12; --fs-unit-tablet: 11; --fs-unit-mobile: 10;
363
+ }
364
+ .vane-title[data-size="xs"] { --fs-unit-desktop: 9; --fs-unit-tablet: 8; --fs-unit-mobile: 7; --lh: 1.556; }
365
+ .vane-title[data-size="sm"] { --fs-unit-desktop: 10; --fs-unit-tablet: 9; --fs-unit-mobile: 8; --lh: 1.4; }
366
+ .vane-title[data-size="md"] { --fs-unit-desktop: 12; --fs-unit-tablet: 11; --fs-unit-mobile: 10; --lh: 1.333; }
367
+ .vane-title[data-size="lg"] { --fs-unit-desktop: 15; --fs-unit-tablet: 14; --fs-unit-mobile: 13; --lh: 1.2; }
368
+ .vane-title[data-size="xl"] { --fs-unit-desktop: 18; --fs-unit-tablet: 17; --fs-unit-mobile: 16; --lh: 1.111; }
369
+
370
+ /* SectionTitle */
371
+ .vane-section-title {
372
+ --lh: 1.2;
373
+ --fs-unit-desktop: 18; --fs-unit-tablet: 16; --fs-unit-mobile: 14;
374
+ }
375
+ .vane-section-title[data-size="xs"] { --fs-unit-desktop: 12; --fs-unit-tablet: 10; --fs-unit-mobile: 8; --lh: 1.333; }
376
+ .vane-section-title[data-size="sm"] { --fs-unit-desktop: 15; --fs-unit-tablet: 13; --fs-unit-mobile: 11; --lh: 1.2; }
377
+ .vane-section-title[data-size="md"] { --fs-unit-desktop: 18; --fs-unit-tablet: 16; --fs-unit-mobile: 14; --lh: 1.111; }
378
+ .vane-section-title[data-size="lg"] { --fs-unit-desktop: 24; --fs-unit-tablet: 22; --fs-unit-mobile: 20; --lh: 1; }
379
+ .vane-section-title[data-size="xl"] { --fs-unit-desktop: 30; --fs-unit-tablet: 28; --fs-unit-mobile: 26; --lh: 1; }
380
+
381
+ /* PageTitle */
382
+ .vane-page-title {
383
+ --lh: 1.1;
384
+ --fs-unit-desktop: 24; --fs-unit-tablet: 21; --fs-unit-mobile: 18;
385
+ }
386
+ .vane-page-title[data-size="xs"] { --fs-unit-desktop: 15; --fs-unit-tablet: 12; --fs-unit-mobile: 9; --lh: 1.2; }
387
+ .vane-page-title[data-size="sm"] { --fs-unit-desktop: 18; --fs-unit-tablet: 15; --fs-unit-mobile: 12; --lh: 1.111; }
388
+ .vane-page-title[data-size="md"] { --fs-unit-desktop: 24; --fs-unit-tablet: 21; --fs-unit-mobile: 18; --lh: 1; }
389
+ .vane-page-title[data-size="lg"] { --fs-unit-desktop: 30; --fs-unit-tablet: 27; --fs-unit-mobile: 24; --lh: 1; }
390
+ .vane-page-title[data-size="xl"] { --fs-unit-desktop: 36; --fs-unit-tablet: 33; --fs-unit-mobile: 30; --lh: 1; }
391
+
392
+ /* ========================================
393
+ APPEARANCE & VARIANT RULES
394
+ Sets component-level color variables based on
395
+ data-appearance and data-variant attributes.
396
+
397
+ These rules apply to ANY element with the
398
+ data-variant and data-appearance attributes.
399
+ Components only consume the variables they need.
400
+ ======================================== */
401
+
402
+ /* -----------------------------------------
403
+ OUTLINE VARIANT
404
+ ----------------------------------------- */
405
+ [data-variant="outline"][data-appearance="primary"] {
406
+ --text-color: var(--color-text-primary);
407
+ --bg-color: var(--color-bg-primary);
408
+ --bg-hover-color: var(--color-bg-hover-primary);
409
+ --bg-active-color: var(--color-bg-active-primary);
410
+ --border-color: var(--color-border-primary);
411
+ --ring-color: var(--color-border-primary);
412
+ --accent-color: var(--color-bg-primary);
413
+ --checked-bg-color: var(--color-bg-primary);
414
+ }
415
+ [data-variant="outline"][data-appearance="brand"] {
416
+ --text-color: var(--color-text-brand);
417
+ --bg-color: var(--color-bg-brand);
418
+ --bg-hover-color: var(--color-bg-hover-brand);
419
+ --bg-active-color: var(--color-bg-active-brand);
420
+ --border-color: var(--color-border-brand);
421
+ --ring-color: var(--color-border-brand);
422
+ --accent-color: var(--color-bg-brand);
423
+ --checked-bg-color: var(--color-bg-brand);
424
+ }
425
+ [data-variant="outline"][data-appearance="secondary"] {
426
+ --text-color: var(--color-text-secondary);
427
+ --bg-color: var(--color-bg-secondary);
428
+ --bg-hover-color: var(--color-bg-hover-secondary);
429
+ --bg-active-color: var(--color-bg-active-secondary);
430
+ --border-color: var(--color-border-secondary);
431
+ --ring-color: var(--color-border-secondary);
432
+ --accent-color: var(--color-bg-secondary);
433
+ --checked-bg-color: var(--color-bg-secondary);
434
+ }
435
+ [data-variant="outline"][data-appearance="tertiary"] {
436
+ --text-color: var(--color-text-tertiary);
437
+ --bg-color: var(--color-bg-tertiary);
438
+ --bg-hover-color: var(--color-bg-hover-tertiary);
439
+ --bg-active-color: var(--color-bg-active-tertiary);
440
+ --border-color: var(--color-border-tertiary);
441
+ --ring-color: var(--color-border-tertiary);
442
+ --accent-color: var(--color-bg-tertiary);
443
+ --checked-bg-color: var(--color-bg-tertiary);
444
+ }
445
+ [data-variant="outline"][data-appearance="accent"] {
446
+ --text-color: var(--color-text-accent);
447
+ --bg-color: var(--color-bg-accent);
448
+ --bg-hover-color: var(--color-bg-hover-accent);
449
+ --bg-active-color: var(--color-bg-active-accent);
450
+ --border-color: var(--color-border-accent);
451
+ --ring-color: var(--color-border-accent);
452
+ --accent-color: var(--color-bg-accent);
453
+ --checked-bg-color: var(--color-bg-accent);
454
+ }
455
+ [data-variant="outline"][data-appearance="success"] {
456
+ --text-color: var(--color-text-success);
457
+ --bg-color: var(--color-bg-success);
458
+ --bg-hover-color: var(--color-bg-hover-success);
459
+ --bg-active-color: var(--color-bg-active-success);
460
+ --border-color: var(--color-border-success);
461
+ --ring-color: var(--color-border-success);
462
+ --accent-color: var(--color-bg-success);
463
+ --checked-bg-color: var(--color-bg-success);
464
+ }
465
+ [data-variant="outline"][data-appearance="danger"] {
466
+ --text-color: var(--color-text-danger);
467
+ --bg-color: var(--color-bg-danger);
468
+ --bg-hover-color: var(--color-bg-hover-danger);
469
+ --bg-active-color: var(--color-bg-active-danger);
470
+ --border-color: var(--color-border-danger);
471
+ --ring-color: var(--color-border-danger);
472
+ --accent-color: var(--color-bg-danger);
473
+ --checked-bg-color: var(--color-bg-danger);
474
+ }
475
+ [data-variant="outline"][data-appearance="warning"] {
476
+ --text-color: var(--color-text-warning);
477
+ --bg-color: var(--color-bg-warning);
478
+ --bg-hover-color: var(--color-bg-hover-warning);
479
+ --bg-active-color: var(--color-bg-active-warning);
480
+ --border-color: var(--color-border-warning);
481
+ --ring-color: var(--color-border-warning);
482
+ --accent-color: var(--color-bg-warning);
483
+ --checked-bg-color: var(--color-bg-warning);
484
+ }
485
+ [data-variant="outline"][data-appearance="info"] {
486
+ --text-color: var(--color-text-info);
487
+ --bg-color: var(--color-bg-info);
488
+ --bg-hover-color: var(--color-bg-hover-info);
489
+ --bg-active-color: var(--color-bg-active-info);
490
+ --border-color: var(--color-border-info);
491
+ --ring-color: var(--color-border-info);
492
+ --accent-color: var(--color-bg-info);
493
+ --checked-bg-color: var(--color-bg-info);
494
+ }
495
+ [data-variant="outline"][data-appearance="link"] {
496
+ --text-color: var(--color-text-link);
497
+ --bg-color: var(--color-bg-primary);
498
+ --bg-hover-color: var(--color-bg-hover-primary);
499
+ --bg-active-color: var(--color-bg-active-primary);
500
+ --border-color: var(--color-border-brand);
501
+ --ring-color: var(--color-border-brand);
502
+ --accent-color: var(--color-bg-primary);
503
+ --checked-bg-color: var(--color-bg-primary);
504
+ }
505
+
506
+ /* -----------------------------------------
507
+ FILLED VARIANT
508
+ ----------------------------------------- */
509
+ [data-variant="filled"][data-appearance="primary"] {
510
+ --text-color: var(--color-text-filled-primary);
511
+ --bg-color: var(--color-bg-filled-primary);
512
+ --bg-hover-color: var(--color-bg-filled-hover-primary);
513
+ --bg-active-color: var(--color-bg-filled-active-primary);
514
+ --border-color: var(--color-border-filled-primary);
515
+ --ring-color: var(--color-border-filled-primary);
516
+ --accent-color: var(--color-bg-filled-primary);
517
+ --checked-bg-color: var(--color-bg-filled-primary);
518
+ }
519
+ [data-variant="filled"][data-appearance="brand"] {
520
+ --text-color: var(--color-text-filled-brand);
521
+ --bg-color: var(--color-bg-filled-brand);
522
+ --bg-hover-color: var(--color-bg-filled-hover-brand);
523
+ --bg-active-color: var(--color-bg-filled-active-brand);
524
+ --border-color: var(--color-border-filled-brand);
525
+ --ring-color: var(--color-border-filled-brand);
526
+ --accent-color: var(--color-bg-filled-brand);
527
+ --checked-bg-color: var(--color-bg-filled-brand);
528
+ }
529
+ [data-variant="filled"][data-appearance="secondary"] {
530
+ --text-color: var(--color-text-filled-secondary);
531
+ --bg-color: var(--color-bg-filled-secondary);
532
+ --bg-hover-color: var(--color-bg-filled-hover-secondary);
533
+ --bg-active-color: var(--color-bg-filled-active-secondary);
534
+ --border-color: var(--color-border-filled-secondary);
535
+ --ring-color: var(--color-border-filled-secondary);
536
+ --accent-color: var(--color-bg-filled-secondary);
537
+ --checked-bg-color: var(--color-bg-filled-secondary);
538
+ }
539
+ [data-variant="filled"][data-appearance="tertiary"] {
540
+ --text-color: var(--color-text-filled-tertiary);
541
+ --bg-color: var(--color-bg-filled-tertiary);
542
+ --bg-hover-color: var(--color-bg-filled-hover-tertiary);
543
+ --bg-active-color: var(--color-bg-filled-active-tertiary);
544
+ --border-color: var(--color-border-filled-tertiary);
545
+ --ring-color: var(--color-border-filled-tertiary);
546
+ --accent-color: var(--color-bg-filled-tertiary);
547
+ --checked-bg-color: var(--color-bg-filled-tertiary);
548
+ }
549
+ [data-variant="filled"][data-appearance="accent"] {
550
+ --text-color: var(--color-text-filled-accent);
551
+ --bg-color: var(--color-bg-filled-accent);
552
+ --bg-hover-color: var(--color-bg-filled-hover-accent);
553
+ --bg-active-color: var(--color-bg-filled-active-accent);
554
+ --border-color: var(--color-border-filled-accent);
555
+ --ring-color: var(--color-border-filled-accent);
556
+ --accent-color: var(--color-bg-filled-accent);
557
+ --checked-bg-color: var(--color-bg-filled-accent);
558
+ }
559
+ [data-variant="filled"][data-appearance="success"] {
560
+ --text-color: var(--color-text-filled-success);
561
+ --bg-color: var(--color-bg-filled-success);
562
+ --bg-hover-color: var(--color-bg-filled-hover-success);
563
+ --bg-active-color: var(--color-bg-filled-active-success);
564
+ --border-color: var(--color-border-filled-success);
565
+ --ring-color: var(--color-border-filled-success);
566
+ --accent-color: var(--color-bg-filled-success);
567
+ --checked-bg-color: var(--color-bg-filled-success);
568
+ }
569
+ [data-variant="filled"][data-appearance="danger"] {
570
+ --text-color: var(--color-text-filled-danger);
571
+ --bg-color: var(--color-bg-filled-danger);
572
+ --bg-hover-color: var(--color-bg-filled-hover-danger);
573
+ --bg-active-color: var(--color-bg-filled-active-danger);
574
+ --border-color: var(--color-border-filled-danger);
575
+ --ring-color: var(--color-border-filled-danger);
576
+ --accent-color: var(--color-bg-filled-danger);
577
+ --checked-bg-color: var(--color-bg-filled-danger);
578
+ }
579
+ [data-variant="filled"][data-appearance="warning"] {
580
+ --text-color: var(--color-text-filled-warning);
581
+ --bg-color: var(--color-bg-filled-warning);
582
+ --bg-hover-color: var(--color-bg-filled-hover-warning);
583
+ --bg-active-color: var(--color-bg-filled-active-warning);
584
+ --border-color: var(--color-border-filled-warning);
585
+ --ring-color: var(--color-border-filled-warning);
586
+ --accent-color: var(--color-bg-filled-warning);
587
+ --checked-bg-color: var(--color-bg-filled-warning);
588
+ }
589
+ [data-variant="filled"][data-appearance="info"] {
590
+ --text-color: var(--color-text-filled-info);
591
+ --bg-color: var(--color-bg-filled-info);
592
+ --bg-hover-color: var(--color-bg-filled-hover-info);
593
+ --bg-active-color: var(--color-bg-filled-active-info);
594
+ --border-color: var(--color-border-filled-info);
595
+ --ring-color: var(--color-border-filled-info);
596
+ --accent-color: var(--color-bg-filled-info);
597
+ --checked-bg-color: var(--color-bg-filled-info);
598
+ }
599
+ [data-variant="filled"][data-appearance="link"] {
600
+ --text-color: var(--color-text-filled-link);
601
+ --bg-color: var(--color-bg-filled-brand);
602
+ --bg-hover-color: var(--color-bg-filled-hover-brand);
603
+ --bg-active-color: var(--color-bg-filled-active-brand);
604
+ --border-color: var(--color-border-filled-brand);
605
+ --ring-color: var(--color-border-filled-brand);
606
+ --accent-color: var(--color-bg-filled-brand);
607
+ --checked-bg-color: var(--color-bg-filled-brand);
608
+ }
609
+
610
+ /* -----------------------------------------
611
+ TRANSPARENT STATE
612
+ Overrides colors when data-transparent is set
613
+ ----------------------------------------- */
614
+ [data-transparent="true"] {
615
+ --bg-color: transparent;
616
+ --bg-hover-color: transparent;
617
+ --bg-active-color: transparent;
618
+ --accent-color: transparent;
619
+ --checked-bg-color: transparent;
620
+ }
621
+
622
+ /* Typography components: transparent affects text color */
623
+ .vane-text[data-transparent="true"],
624
+ .vane-link[data-transparent="true"],
625
+ .vane-title[data-transparent="true"],
626
+ .vane-section-title[data-transparent="true"],
627
+ .vane-page-title[data-transparent="true"],
628
+ .vane-label[data-transparent="true"],
629
+ .vane-list-item[data-transparent="true"] {
630
+ --text-color: transparent;
179
631
  }
632
+
180
633
  }
181
634
  /*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
182
635
  @layer theme {
@@ -205,6 +658,7 @@
205
658
  --color-yellow-50: oklch(98.7% 0.026 102.212);
206
659
  --color-yellow-100: oklch(97.3% 0.071 103.193);
207
660
  --color-yellow-800: oklch(47.6% 0.114 61.907);
661
+ --color-lime-400: oklch(84.1% 0.238 128.85);
208
662
  --color-green-50: oklch(98.2% 0.018 155.826);
209
663
  --color-green-500: oklch(72.3% 0.219 149.579);
210
664
  --color-green-600: oklch(62.7% 0.194 149.214);
@@ -213,10 +667,14 @@
213
667
  --color-emerald-100: oklch(95% 0.052 163.051);
214
668
  --color-emerald-200: oklch(90.5% 0.093 164.15);
215
669
  --color-emerald-300: oklch(84.5% 0.143 164.978);
670
+ --color-emerald-400: oklch(76.5% 0.177 163.223);
216
671
  --color-emerald-500: oklch(69.6% 0.17 162.48);
217
672
  --color-emerald-600: oklch(59.6% 0.145 163.225);
218
673
  --color-emerald-700: oklch(50.8% 0.118 165.612);
219
674
  --color-emerald-800: oklch(43.2% 0.095 166.913);
675
+ --color-teal-500: oklch(70.4% 0.14 182.503);
676
+ --color-teal-600: oklch(60% 0.118 184.704);
677
+ --color-teal-700: oklch(51.1% 0.096 186.391);
220
678
  --color-cyan-50: oklch(98.4% 0.019 200.873);
221
679
  --color-cyan-100: oklch(95.6% 0.045 203.388);
222
680
  --color-cyan-200: oklch(91.7% 0.08 205.041);
@@ -224,6 +682,7 @@
224
682
  --color-cyan-600: oklch(60.9% 0.126 221.723);
225
683
  --color-cyan-700: oklch(52% 0.105 223.128);
226
684
  --color-cyan-800: oklch(45% 0.085 224.283);
685
+ --color-sky-400: oklch(74.6% 0.16 232.661);
227
686
  --color-blue-50: oklch(97% 0.014 254.604);
228
687
  --color-blue-100: oklch(93.2% 0.032 255.585);
229
688
  --color-blue-200: oklch(88.2% 0.059 254.128);
@@ -235,33 +694,43 @@
235
694
  --color-blue-900: oklch(37.9% 0.146 265.522);
236
695
  --color-indigo-50: oklch(96.2% 0.018 272.314);
237
696
  --color-indigo-100: oklch(93% 0.034 272.788);
697
+ --color-indigo-300: oklch(78.5% 0.115 274.713);
238
698
  --color-indigo-400: oklch(67.3% 0.182 276.935);
239
699
  --color-indigo-500: oklch(58.5% 0.233 277.117);
700
+ --color-indigo-600: oklch(51.1% 0.262 276.966);
240
701
  --color-indigo-700: oklch(45.7% 0.24 277.023);
241
702
  --color-violet-400: oklch(70.2% 0.183 293.541);
703
+ --color-violet-500: oklch(60.6% 0.25 292.717);
242
704
  --color-violet-600: oklch(54.1% 0.281 293.009);
705
+ --color-violet-700: oklch(49.1% 0.27 292.581);
243
706
  --color-purple-100: oklch(94.6% 0.033 307.174);
707
+ --color-purple-500: oklch(62.7% 0.265 303.9);
244
708
  --color-purple-600: oklch(55.8% 0.288 302.321);
245
709
  --color-purple-700: oklch(49.6% 0.265 301.924);
710
+ --color-fuchsia-500: oklch(66.7% 0.295 322.15);
711
+ --color-pink-500: oklch(65.6% 0.241 354.308);
246
712
  --color-pink-600: oklch(59.2% 0.249 0.584);
713
+ --color-pink-700: oklch(52.5% 0.223 3.958);
247
714
  --color-rose-50: oklch(96.9% 0.015 12.422);
248
715
  --color-rose-100: oklch(94.1% 0.03 12.58);
249
716
  --color-rose-200: oklch(89.2% 0.058 10.001);
250
717
  --color-rose-300: oklch(81% 0.117 11.638);
718
+ --color-rose-500: oklch(64.5% 0.246 16.439);
251
719
  --color-rose-600: oklch(58.6% 0.253 17.585);
252
720
  --color-rose-700: oklch(51.4% 0.222 16.935);
253
721
  --color-rose-800: oklch(45.5% 0.188 13.697);
722
+ --color-slate-800: oklch(27.9% 0.041 260.031);
254
723
  --color-gray-50: oklch(98.5% 0.002 247.839);
255
724
  --color-gray-100: oklch(96.7% 0.003 264.542);
256
725
  --color-gray-200: oklch(92.8% 0.006 264.531);
257
726
  --color-gray-300: oklch(87.2% 0.01 258.338);
258
- --color-gray-400: oklch(70.7% 0.022 261.325);
259
727
  --color-gray-500: oklch(55.1% 0.027 264.364);
260
728
  --color-gray-600: oklch(44.6% 0.03 256.802);
261
729
  --color-gray-700: oklch(37.3% 0.034 259.733);
262
730
  --color-gray-800: oklch(27.8% 0.033 256.848);
263
731
  --color-gray-900: oklch(21% 0.034 264.665);
264
732
  --color-gray-950: oklch(13% 0.028 261.692);
733
+ --color-stone-100: oklch(97% 0.001 106.424);
265
734
  --color-white: #fff;
266
735
  --spacing: 0.25rem;
267
736
  --container-sm: 24rem;
@@ -278,22 +747,10 @@
278
747
  --text-sm--line-height: calc(1.25 / 0.875);
279
748
  --text-base: 1rem;
280
749
  --text-base--line-height: calc(1.5 / 1);
281
- --text-lg: 1.125rem;
282
- --text-lg--line-height: calc(1.75 / 1.125);
283
750
  --text-xl: 1.25rem;
284
751
  --text-xl--line-height: calc(1.75 / 1.25);
285
752
  --text-2xl: 1.5rem;
286
753
  --text-2xl--line-height: calc(2 / 1.5);
287
- --text-3xl: 1.875rem;
288
- --text-3xl--line-height: calc(2.25 / 1.875);
289
- --text-4xl: 2.25rem;
290
- --text-4xl--line-height: calc(2.5 / 2.25);
291
- --text-5xl: 3rem;
292
- --text-5xl--line-height: 1;
293
- --text-6xl: 3.75rem;
294
- --text-6xl--line-height: 1;
295
- --text-7xl: 4.5rem;
296
- --text-7xl--line-height: 1;
297
754
  --font-weight-thin: 100;
298
755
  --font-weight-extralight: 200;
299
756
  --font-weight-light: 300;
@@ -306,6 +763,9 @@
306
763
  --tracking-tight: -0.025em;
307
764
  --tracking-wide: 0.025em;
308
765
  --leading-relaxed: 1.625;
766
+ --leading-loose: 2;
767
+ --radius-lg: 0.5rem;
768
+ --radius-2xl: 1rem;
309
769
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
310
770
  --animate-bounce: bounce 1s infinite;
311
771
  --default-transition-duration: 150ms;
@@ -386,28 +846,10 @@
386
846
  --color-bg-filled-active-danger: var(--color-red-800);
387
847
  --color-bg-filled-active-warning: var(--color-amber-800);
388
848
  --color-bg-filled-active-info: var(--color-cyan-800);
389
- --color-bg-layout-primary: var(--color-white);
390
- --color-bg-layout-brand: var(--color-blue-50);
391
- --color-bg-layout-secondary: var(--color-gray-50);
392
- --color-bg-layout-tertiary: var(--color-gray-100);
393
- --color-bg-layout-accent: var(--color-indigo-50);
394
- --color-bg-layout-success: var(--color-green-50);
395
- --color-bg-layout-danger: var(--color-red-50);
396
- --color-bg-layout-warning: var(--color-yellow-50);
397
- --color-bg-layout-info: var(--color-blue-50);
398
- --color-bg-filled-layout-primary: var(--color-gray-700);
399
- --color-bg-filled-layout-brand: var(--color-blue-800);
400
- --color-bg-filled-layout-secondary: var(--color-gray-800);
401
- --color-bg-filled-layout-tertiary: var(--color-gray-900);
402
- --color-bg-filled-layout-accent: var(--color-indigo-700);
403
- --color-bg-filled-layout-success: var(--color-green-700);
404
- --color-bg-filled-layout-danger: var(--color-red-700);
405
- --color-bg-filled-layout-warning: var(--color-yellow-800);
406
- --color-bg-filled-layout-info: var(--color-blue-700);
407
849
  --color-border-primary: var(--color-gray-200);
408
850
  --color-border-brand: var(--color-blue-300);
409
- --color-border-secondary: var(--color-gray-300);
410
- --color-border-tertiary: var(--color-gray-400);
851
+ --color-border-secondary: var(--color-gray-200);
852
+ --color-border-tertiary: var(--color-gray-200);
411
853
  --color-border-accent: var(--color-rose-300);
412
854
  --color-border-success: var(--color-emerald-300);
413
855
  --color-border-danger: var(--color-red-300);
@@ -415,21 +857,17 @@
415
857
  --color-border-info: var(--color-cyan-300);
416
858
  --color-border-filled-primary: var(--color-gray-600);
417
859
  --color-border-filled-brand: var(--color-blue-600);
418
- --color-border-filled-secondary: var(--color-gray-700);
860
+ --color-border-filled-secondary: var(--color-gray-600);
419
861
  --color-border-filled-tertiary: var(--color-gray-600);
420
862
  --color-border-filled-accent: var(--color-rose-600);
421
863
  --color-border-filled-success: var(--color-emerald-600);
422
864
  --color-border-filled-danger: var(--color-red-600);
423
865
  --color-border-filled-warning: var(--color-amber-600);
424
866
  --color-border-filled-info: var(--color-cyan-600);
425
- --layout-spacing: var(--spacing);
426
- --ui-spacing: var(--spacing);
427
867
  --br-base: var(--spacing);
428
- --ui-br-base: calc(var(--spacing) * 0.5);
429
868
  --fs-base: calc(var(--spacing) * 0.5);
430
- --breakpoint-mobile: 40rem;
431
- --breakpoint-tablet: 48rem;
432
- --breakpoint-laptop: 64rem;
869
+ --breakpoint-mobile: 48rem;
870
+ --breakpoint-tablet: 64rem;
433
871
  --breakpoint-desktop: 80rem;
434
872
  --lh: 1;
435
873
  --fs-unit: 8;
@@ -623,9 +1061,6 @@
623
1061
  @media (width >= 40rem) {
624
1062
  max-width: 40rem;
625
1063
  }
626
- @media (width >= 40rem) {
627
- max-width: 40rem;
628
- }
629
1064
  @media (width >= 48rem) {
630
1065
  max-width: 48rem;
631
1066
  }
@@ -699,9 +1134,16 @@
699
1134
  .aspect-ratio {
700
1135
  aspect-ratio: var(--aspect-ratio);
701
1136
  }
702
- .size-\(--ui-size\) {
703
- width: var(--ui-size);
704
- height: var(--ui-size);
1137
+ .size-\(--size\) {
1138
+ width: var(--size);
1139
+ height: var(--size);
1140
+ }
1141
+ .size-unit {
1142
+ width: var(--size-unit);
1143
+ height: var(--size-unit);
1144
+ }
1145
+ .h-\(--bw\) {
1146
+ height: var(--bw);
705
1147
  }
706
1148
  .h-10 {
707
1149
  height: calc(var(--spacing) * 10);
@@ -715,9 +1157,6 @@
715
1157
  .h-fit {
716
1158
  height: fit-content;
717
1159
  }
718
- .h-px {
719
- height: 1px;
720
- }
721
1160
  .h-screen {
722
1161
  height: 100vh;
723
1162
  }
@@ -856,15 +1295,18 @@
856
1295
  .gap-\(--gap\) {
857
1296
  gap: var(--gap);
858
1297
  }
859
- .gap-\(--ui-gap\) {
860
- gap: var(--ui-gap);
861
- }
862
1298
  .gap-0 {
863
1299
  gap: calc(var(--spacing) * 0);
864
1300
  }
865
1301
  .gap-1 {
866
1302
  gap: calc(var(--spacing) * 1);
867
1303
  }
1304
+ .gap-8 {
1305
+ gap: calc(var(--spacing) * 8);
1306
+ }
1307
+ .gap-12 {
1308
+ gap: calc(var(--spacing) * 12);
1309
+ }
868
1310
  .gap-unit {
869
1311
  gap: var(--gap-unit);
870
1312
  }
@@ -938,12 +1380,15 @@
938
1380
  .rounded-\(--br\) {
939
1381
  border-radius: var(--br);
940
1382
  }
941
- .rounded-\(--ui-br\) {
942
- border-radius: var(--ui-br);
1383
+ .rounded-2xl {
1384
+ border-radius: var(--radius-2xl);
943
1385
  }
944
1386
  .rounded-full {
945
1387
  border-radius: calc(infinity * 1px);
946
1388
  }
1389
+ .rounded-lg {
1390
+ border-radius: var(--radius-lg);
1391
+ }
947
1392
  .rounded-none {
948
1393
  border-radius: 0;
949
1394
  }
@@ -1011,63 +1456,12 @@
1011
1456
  --tw-border-style: dashed;
1012
1457
  border-style: dashed;
1013
1458
  }
1014
- .border-\(--color-border-accent\) {
1015
- border-color: var(--color-border-accent);
1016
- }
1017
- .border-\(--color-border-brand\) {
1018
- border-color: var(--color-border-brand);
1019
- }
1020
- .border-\(--color-border-danger\) {
1021
- border-color: var(--color-border-danger);
1459
+ .border-\(--border-color\) {
1460
+ border-color: var(--border-color);
1022
1461
  }
1023
1462
  .border-\(--color-border-default\) {
1024
1463
  border-color: var(--color-border-default);
1025
1464
  }
1026
- .border-\(--color-border-filled-accent\) {
1027
- border-color: var(--color-border-filled-accent);
1028
- }
1029
- .border-\(--color-border-filled-brand\) {
1030
- border-color: var(--color-border-filled-brand);
1031
- }
1032
- .border-\(--color-border-filled-danger\) {
1033
- border-color: var(--color-border-filled-danger);
1034
- }
1035
- .border-\(--color-border-filled-info\) {
1036
- border-color: var(--color-border-filled-info);
1037
- }
1038
- .border-\(--color-border-filled-primary\) {
1039
- border-color: var(--color-border-filled-primary);
1040
- }
1041
- .border-\(--color-border-filled-secondary\) {
1042
- border-color: var(--color-border-filled-secondary);
1043
- }
1044
- .border-\(--color-border-filled-success\) {
1045
- border-color: var(--color-border-filled-success);
1046
- }
1047
- .border-\(--color-border-filled-tertiary\) {
1048
- border-color: var(--color-border-filled-tertiary);
1049
- }
1050
- .border-\(--color-border-filled-warning\) {
1051
- border-color: var(--color-border-filled-warning);
1052
- }
1053
- .border-\(--color-border-info\) {
1054
- border-color: var(--color-border-info);
1055
- }
1056
- .border-\(--color-border-primary\) {
1057
- border-color: var(--color-border-primary);
1058
- }
1059
- .border-\(--color-border-secondary\) {
1060
- border-color: var(--color-border-secondary);
1061
- }
1062
- .border-\(--color-border-success\) {
1063
- border-color: var(--color-border-success);
1064
- }
1065
- .border-\(--color-border-tertiary\) {
1066
- border-color: var(--color-border-tertiary);
1067
- }
1068
- .border-\(--color-border-warning\) {
1069
- border-color: var(--color-border-warning);
1070
- }
1071
1465
  .border-gray-600 {
1072
1466
  border-color: var(--color-gray-600);
1073
1467
  }
@@ -1077,9 +1471,21 @@
1077
1471
  .border-indigo-400 {
1078
1472
  border-color: var(--color-indigo-400);
1079
1473
  }
1474
+ .border-indigo-500 {
1475
+ border-color: var(--color-indigo-500);
1476
+ }
1477
+ .border-lime-400 {
1478
+ border-color: var(--color-lime-400);
1479
+ }
1480
+ .border-purple-500 {
1481
+ border-color: var(--color-purple-500);
1482
+ }
1080
1483
  .border-red-600 {
1081
1484
  border-color: var(--color-red-600);
1082
1485
  }
1486
+ .border-sky-400 {
1487
+ border-color: var(--color-sky-400);
1488
+ }
1083
1489
  .border-transparent {
1084
1490
  border-color: transparent;
1085
1491
  }
@@ -1101,18 +1507,42 @@
1101
1507
  .bg-gray-800 {
1102
1508
  background-color: var(--color-gray-800);
1103
1509
  }
1510
+ .bg-green-500 {
1511
+ background-color: var(--color-green-500);
1512
+ }
1104
1513
  .bg-green-600 {
1105
1514
  background-color: var(--color-green-600);
1106
1515
  }
1516
+ .bg-indigo-600 {
1517
+ background-color: var(--color-indigo-600);
1518
+ }
1519
+ .bg-orange-500 {
1520
+ background-color: var(--color-orange-500);
1521
+ }
1107
1522
  .bg-purple-600 {
1108
1523
  background-color: var(--color-purple-600);
1109
1524
  }
1110
1525
  .bg-red-100 {
1111
1526
  background-color: var(--color-red-100);
1112
1527
  }
1528
+ .bg-red-500 {
1529
+ background-color: var(--color-red-500);
1530
+ }
1531
+ .bg-stone-100 {
1532
+ background-color: var(--color-stone-100);
1533
+ }
1534
+ .bg-teal-500 {
1535
+ background-color: var(--color-teal-500);
1536
+ }
1113
1537
  .bg-violet-600 {
1114
1538
  background-color: var(--color-violet-600);
1115
1539
  }
1540
+ .bg-white {
1541
+ background-color: var(--color-white);
1542
+ }
1543
+ .bg-yellow-100 {
1544
+ background-color: var(--color-yellow-100);
1545
+ }
1116
1546
  .bg-gradient-to-r {
1117
1547
  --tw-gradient-position: to right in oklab;
1118
1548
  background-image: linear-gradient(var(--tw-gradient-stops));
@@ -1121,10 +1551,18 @@
1121
1551
  --tw-gradient-from: var(--color-indigo-500);
1122
1552
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1123
1553
  }
1554
+ .from-pink-500 {
1555
+ --tw-gradient-from: var(--color-pink-500);
1556
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1557
+ }
1124
1558
  .to-purple-600 {
1125
1559
  --tw-gradient-to: var(--color-purple-600);
1126
1560
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1127
1561
  }
1562
+ .to-violet-500 {
1563
+ --tw-gradient-to: var(--color-violet-500);
1564
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1565
+ }
1128
1566
  .object-cover {
1129
1567
  object-fit: cover;
1130
1568
  }
@@ -1137,21 +1575,21 @@
1137
1575
  .px-\(--px\) {
1138
1576
  padding-inline: var(--px);
1139
1577
  }
1140
- .px-\(--ui-px\) {
1141
- padding-inline: var(--ui-px);
1142
- }
1143
1578
  .px-1 {
1144
1579
  padding-inline: calc(var(--spacing) * 1);
1145
1580
  }
1146
1581
  .px-4 {
1147
1582
  padding-inline: calc(var(--spacing) * 4);
1148
1583
  }
1584
+ .px-8 {
1585
+ padding-inline: calc(var(--spacing) * 8);
1586
+ }
1587
+ .px-10 {
1588
+ padding-inline: calc(var(--spacing) * 10);
1589
+ }
1149
1590
  .py-\(--py\) {
1150
1591
  padding-block: var(--py);
1151
1592
  }
1152
- .py-\(--ui-py\) {
1153
- padding-block: var(--ui-py);
1154
- }
1155
1593
  .py-2 {
1156
1594
  padding-block: calc(var(--spacing) * 2);
1157
1595
  }
@@ -1167,11 +1605,8 @@
1167
1605
  .py-10 {
1168
1606
  padding-block: calc(var(--spacing) * 10);
1169
1607
  }
1170
- .pl-2 {
1171
- padding-left: calc(var(--spacing) * 2);
1172
- }
1173
- .pl-4 {
1174
- padding-left: calc(var(--spacing) * 4);
1608
+ .pl-\(--pl\) {
1609
+ padding-left: var(--pl);
1175
1610
  }
1176
1611
  .pl-6 {
1177
1612
  padding-left: calc(var(--spacing) * 6);
@@ -1179,9 +1614,6 @@
1179
1614
  .pl-8 {
1180
1615
  padding-left: calc(var(--spacing) * 8);
1181
1616
  }
1182
- .pl-10 {
1183
- padding-left: calc(var(--spacing) * 10);
1184
- }
1185
1617
  .text-center {
1186
1618
  text-align: center;
1187
1619
  }
@@ -1207,34 +1639,10 @@
1207
1639
  font-size: var(--text-2xl);
1208
1640
  line-height: var(--tw-leading, var(--text-2xl--line-height));
1209
1641
  }
1210
- .text-3xl {
1211
- font-size: var(--text-3xl);
1212
- line-height: var(--tw-leading, var(--text-3xl--line-height));
1213
- }
1214
- .text-4xl {
1215
- font-size: var(--text-4xl);
1216
- line-height: var(--tw-leading, var(--text-4xl--line-height));
1217
- }
1218
- .text-5xl {
1219
- font-size: var(--text-5xl);
1220
- line-height: var(--tw-leading, var(--text-5xl--line-height));
1221
- }
1222
- .text-6xl {
1223
- font-size: var(--text-6xl);
1224
- line-height: var(--tw-leading, var(--text-6xl--line-height));
1225
- }
1226
- .text-7xl {
1227
- font-size: var(--text-7xl);
1228
- line-height: var(--tw-leading, var(--text-7xl--line-height));
1229
- }
1230
1642
  .text-base {
1231
1643
  font-size: var(--text-base);
1232
1644
  line-height: var(--tw-leading, var(--text-base--line-height));
1233
1645
  }
1234
- .text-lg {
1235
- font-size: var(--text-lg);
1236
- line-height: var(--tw-leading, var(--text-lg--line-height));
1237
- }
1238
1646
  .text-sm {
1239
1647
  font-size: var(--text-sm);
1240
1648
  line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -1257,6 +1665,10 @@
1257
1665
  --tw-leading: var(--lh);
1258
1666
  line-height: var(--lh);
1259
1667
  }
1668
+ .leading-loose {
1669
+ --tw-leading: var(--leading-loose);
1670
+ line-height: var(--leading-loose);
1671
+ }
1260
1672
  .leading-relaxed {
1261
1673
  --tw-leading: var(--leading-relaxed);
1262
1674
  line-height: var(--leading-relaxed);
@@ -1311,65 +1723,17 @@
1311
1723
  .whitespace-nowrap {
1312
1724
  white-space: nowrap;
1313
1725
  }
1314
- .text-\(--color-text-accent\) {
1315
- color: var(--color-text-accent);
1316
- }
1317
- .text-\(--color-text-brand\) {
1318
- color: var(--color-text-brand);
1319
- }
1320
- .text-\(--color-text-danger\) {
1321
- color: var(--color-text-danger);
1322
- }
1323
- .text-\(--color-text-filled-accent\) {
1324
- color: var(--color-text-filled-accent);
1325
- }
1326
- .text-\(--color-text-filled-brand\) {
1327
- color: var(--color-text-filled-brand);
1328
- }
1329
- .text-\(--color-text-filled-danger\) {
1330
- color: var(--color-text-filled-danger);
1331
- }
1332
- .text-\(--color-text-filled-info\) {
1333
- color: var(--color-text-filled-info);
1334
- }
1335
- .text-\(--color-text-filled-link\) {
1336
- color: var(--color-text-filled-link);
1337
- }
1338
1726
  .text-\(--color-text-filled-primary\) {
1339
1727
  color: var(--color-text-filled-primary);
1340
1728
  }
1341
- .text-\(--color-text-filled-secondary\) {
1342
- color: var(--color-text-filled-secondary);
1343
- }
1344
- .text-\(--color-text-filled-success\) {
1345
- color: var(--color-text-filled-success);
1346
- }
1347
- .text-\(--color-text-filled-tertiary\) {
1348
- color: var(--color-text-filled-tertiary);
1349
- }
1350
- .text-\(--color-text-filled-warning\) {
1351
- color: var(--color-text-filled-warning);
1352
- }
1353
- .text-\(--color-text-info\) {
1354
- color: var(--color-text-info);
1355
- }
1356
- .text-\(--color-text-link\) {
1357
- color: var(--color-text-link);
1358
- }
1359
1729
  .text-\(--color-text-primary\) {
1360
1730
  color: var(--color-text-primary);
1361
1731
  }
1362
- .text-\(--color-text-secondary\) {
1363
- color: var(--color-text-secondary);
1364
- }
1365
- .text-\(--color-text-success\) {
1366
- color: var(--color-text-success);
1367
- }
1368
- .text-\(--color-text-tertiary\) {
1369
- color: var(--color-text-tertiary);
1732
+ .text-\(--text-color\) {
1733
+ color: var(--text-color);
1370
1734
  }
1371
- .text-\(--color-text-warning\) {
1372
- color: var(--color-text-warning);
1735
+ .text-amber-600 {
1736
+ color: var(--color-amber-600);
1373
1737
  }
1374
1738
  .text-blue-200 {
1375
1739
  color: var(--color-blue-200);
@@ -1377,6 +1741,9 @@
1377
1741
  .text-blue-500 {
1378
1742
  color: var(--color-blue-500);
1379
1743
  }
1744
+ .text-cyan-700 {
1745
+ color: var(--color-cyan-700);
1746
+ }
1380
1747
  .text-gray-500 {
1381
1748
  color: var(--color-gray-500);
1382
1749
  }
@@ -1404,6 +1771,12 @@
1404
1771
  .text-red-500 {
1405
1772
  color: var(--color-red-500);
1406
1773
  }
1774
+ .text-rose-500 {
1775
+ color: var(--color-rose-500);
1776
+ }
1777
+ .text-slate-800 {
1778
+ color: var(--color-slate-800);
1779
+ }
1407
1780
  .text-transparent {
1408
1781
  color: transparent;
1409
1782
  }
@@ -1446,62 +1819,8 @@
1446
1819
  .underline {
1447
1820
  text-decoration-line: underline;
1448
1821
  }
1449
- .accent-\(--color-bg-accent\) {
1450
- accent-color: var(--color-bg-accent);
1451
- }
1452
- .accent-\(--color-bg-brand\) {
1453
- accent-color: var(--color-bg-brand);
1454
- }
1455
- .accent-\(--color-bg-danger\) {
1456
- accent-color: var(--color-bg-danger);
1457
- }
1458
- .accent-\(--color-bg-filled-accent\) {
1459
- accent-color: var(--color-bg-filled-accent);
1460
- }
1461
- .accent-\(--color-bg-filled-brand\) {
1462
- accent-color: var(--color-bg-filled-brand);
1463
- }
1464
- .accent-\(--color-bg-filled-danger\) {
1465
- accent-color: var(--color-bg-filled-danger);
1466
- }
1467
- .accent-\(--color-bg-filled-info\) {
1468
- accent-color: var(--color-bg-filled-info);
1469
- }
1470
- .accent-\(--color-bg-filled-primary\) {
1471
- accent-color: var(--color-bg-filled-primary);
1472
- }
1473
- .accent-\(--color-bg-filled-secondary\) {
1474
- accent-color: var(--color-bg-filled-secondary);
1475
- }
1476
- .accent-\(--color-bg-filled-success\) {
1477
- accent-color: var(--color-bg-filled-success);
1478
- }
1479
- .accent-\(--color-bg-filled-tertiary\) {
1480
- accent-color: var(--color-bg-filled-tertiary);
1481
- }
1482
- .accent-\(--color-bg-filled-warning\) {
1483
- accent-color: var(--color-bg-filled-warning);
1484
- }
1485
- .accent-\(--color-bg-info\) {
1486
- accent-color: var(--color-bg-info);
1487
- }
1488
- .accent-\(--color-bg-primary\) {
1489
- accent-color: var(--color-bg-primary);
1490
- }
1491
- .accent-\(--color-bg-secondary\) {
1492
- accent-color: var(--color-bg-secondary);
1493
- }
1494
- .accent-\(--color-bg-success\) {
1495
- accent-color: var(--color-bg-success);
1496
- }
1497
- .accent-\(--color-bg-tertiary\) {
1498
- accent-color: var(--color-bg-tertiary);
1499
- }
1500
- .accent-\(--color-bg-warning\) {
1501
- accent-color: var(--color-bg-warning);
1502
- }
1503
- .accent-transparent {
1504
- accent-color: transparent;
1822
+ .accent-\(--accent-color\) {
1823
+ accent-color: var(--accent-color);
1505
1824
  }
1506
1825
  .opacity-50 {
1507
1826
  opacity: 50%;
@@ -1561,59 +1880,23 @@
1561
1880
  --tw-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-shadow-alpha), transparent);
1562
1881
  }
1563
1882
  }
1564
- .ring-\(--color-border-accent\) {
1565
- --tw-ring-color: var(--color-border-accent);
1566
- }
1567
- .ring-\(--color-border-brand\) {
1568
- --tw-ring-color: var(--color-border-brand);
1569
- }
1570
- .ring-\(--color-border-danger\) {
1571
- --tw-ring-color: var(--color-border-danger);
1572
- }
1573
- .ring-\(--color-border-filled-accent\) {
1574
- --tw-ring-color: var(--color-border-filled-accent);
1575
- }
1576
- .ring-\(--color-border-filled-brand\) {
1577
- --tw-ring-color: var(--color-border-filled-brand);
1578
- }
1579
- .ring-\(--color-border-filled-danger\) {
1580
- --tw-ring-color: var(--color-border-filled-danger);
1581
- }
1582
- .ring-\(--color-border-filled-info\) {
1583
- --tw-ring-color: var(--color-border-filled-info);
1584
- }
1585
1883
  .ring-\(--color-border-filled-primary\) {
1586
1884
  --tw-ring-color: var(--color-border-filled-primary);
1587
1885
  }
1588
- .ring-\(--color-border-filled-secondary\) {
1589
- --tw-ring-color: var(--color-border-filled-secondary);
1590
- }
1591
- .ring-\(--color-border-filled-success\) {
1592
- --tw-ring-color: var(--color-border-filled-success);
1593
- }
1594
- .ring-\(--color-border-filled-tertiary\) {
1595
- --tw-ring-color: var(--color-border-filled-tertiary);
1596
- }
1597
- .ring-\(--color-border-filled-warning\) {
1598
- --tw-ring-color: var(--color-border-filled-warning);
1599
- }
1600
- .ring-\(--color-border-info\) {
1601
- --tw-ring-color: var(--color-border-info);
1602
- }
1603
1886
  .ring-\(--color-border-primary\) {
1604
1887
  --tw-ring-color: var(--color-border-primary);
1605
1888
  }
1606
- .ring-\(--color-border-secondary\) {
1607
- --tw-ring-color: var(--color-border-secondary);
1889
+ .ring-\(--ring-color\) {
1890
+ --tw-ring-color: var(--ring-color);
1608
1891
  }
1609
- .ring-\(--color-border-success\) {
1610
- --tw-ring-color: var(--color-border-success);
1892
+ .ring-emerald-400 {
1893
+ --tw-ring-color: var(--color-emerald-400);
1611
1894
  }
1612
- .ring-\(--color-border-tertiary\) {
1613
- --tw-ring-color: var(--color-border-tertiary);
1895
+ .ring-fuchsia-500 {
1896
+ --tw-ring-color: var(--color-fuchsia-500);
1614
1897
  }
1615
- .ring-\(--color-border-warning\) {
1616
- --tw-ring-color: var(--color-border-warning);
1898
+ .ring-indigo-300 {
1899
+ --tw-ring-color: var(--color-indigo-300);
1617
1900
  }
1618
1901
  .ring-orange-500 {
1619
1902
  --tw-ring-color: var(--color-orange-500);
@@ -1647,63 +1930,12 @@
1647
1930
  --tw-duration: 200ms;
1648
1931
  transition-duration: 200ms;
1649
1932
  }
1650
- .\[--aspect-ratio\:1\.5\] {
1651
- --aspect-ratio: 1.5;
1652
- }
1653
- .\[--aspect-ratio\:1\.6\] {
1654
- --aspect-ratio: 1.6;
1655
- }
1656
- .\[--aspect-ratio\:1\.8\] {
1657
- --aspect-ratio: 1.8;
1658
- }
1659
- .\[--aspect-ratio\:1\.75\] {
1660
- --aspect-ratio: 1.75;
1661
- }
1662
- .\[--aspect-ratio\:1\] {
1663
- --aspect-ratio: 1;
1664
- }
1665
- .\[--aspect-ratio\:2\.5\] {
1666
- --aspect-ratio: 2.5;
1667
- }
1668
1933
  .\[--aspect-ratio\:2\] {
1669
1934
  --aspect-ratio: 2;
1670
1935
  }
1671
- .\[--aspect-ratio\:3\] {
1672
- --aspect-ratio: 3;
1673
- }
1674
- .\[--aspect-ratio\:4\] {
1675
- --aspect-ratio: 4;
1676
- }
1677
- .\[--br-unit\:1\.5\] {
1678
- --br-unit: 1.5;
1679
- }
1680
- .\[--br-unit\:1\] {
1681
- --br-unit: 1;
1682
- }
1683
- .\[--br-unit\:2\.5\] {
1684
- --br-unit: 2.5;
1685
- }
1686
- .\[--br-unit\:2\] {
1687
- --br-unit: 2;
1688
- }
1689
- .\[--br-unit\:3\] {
1690
- --br-unit: 3;
1691
- }
1692
1936
  .\[--br-unit\:4\] {
1693
1937
  --br-unit: 4;
1694
1938
  }
1695
- .\[--br-unit\:5\] {
1696
- --br-unit: 5;
1697
- }
1698
- .\[--br-unit\:6\] {
1699
- --br-unit: 6;
1700
- }
1701
- .\[--br-unit\:7\] {
1702
- --br-unit: 7;
1703
- }
1704
- .\[--fs-unit\:5\] {
1705
- --fs-unit: 5;
1706
- }
1707
1939
  .\[--fs-unit\:6\] {
1708
1940
  --fs-unit: 6;
1709
1941
  }
@@ -1719,96 +1951,24 @@
1719
1951
  .\[--fs-unit\:10\] {
1720
1952
  --fs-unit: 10;
1721
1953
  }
1722
- .\[--fs-unit\:12\] {
1723
- --fs-unit: 12;
1724
- }
1725
1954
  .\[--fs-unit\:15\] {
1726
1955
  --fs-unit: 15;
1727
1956
  }
1728
- .\[--fs-unit\:18\] {
1729
- --fs-unit: 18;
1730
- }
1731
- .\[--fs-unit\:24\] {
1732
- --fs-unit: 24;
1733
- }
1734
- .\[--fs-unit\:30\] {
1735
- --fs-unit: 30;
1736
- }
1737
- .\[--fs-unit\:36\] {
1738
- --fs-unit: 36;
1739
- }
1740
- .\[--gap-unit\:1\.5\] {
1741
- --gap-unit: 1.5;
1742
- }
1743
- .\[--gap-unit\:1\] {
1744
- --gap-unit: 1;
1745
- }
1746
- .\[--gap-unit\:2\.5\] {
1747
- --gap-unit: 2.5;
1957
+ .\[--fs-unit\:var\(--fs-unit-desktop\)\] {
1958
+ --fs-unit: var(--fs-unit-desktop);
1748
1959
  }
1749
1960
  .\[--gap-unit\:2\] {
1750
1961
  --gap-unit: 2;
1751
1962
  }
1752
- .\[--gap-unit\:3\] {
1753
- --gap-unit: 3;
1754
- }
1755
- .\[--gap-unit\:4\] {
1756
- --gap-unit: 4;
1757
- }
1758
- .\[--gap-unit\:5\] {
1759
- --gap-unit: 5;
1760
- }
1761
- .\[--gap-unit\:6\] {
1762
- --gap-unit: 6;
1763
- }
1764
- .\[--gap-unit\:8\] {
1765
- --gap-unit: 8;
1766
- }
1767
- .\[--gap-unit\:10\] {
1768
- --gap-unit: 10;
1769
- }
1770
- .\[--gap-unit\:12\] {
1771
- --gap-unit: 12;
1772
- }
1773
- .\[--lh\:1\.2\] {
1774
- --lh: 1.2;
1963
+ .\[--gap-unit\:var\(--gap-unit-desktop\)\] {
1964
+ --gap-unit: var(--gap-unit-desktop);
1775
1965
  }
1776
1966
  .\[--lh\:1\.3\] {
1777
1967
  --lh: 1.3;
1778
1968
  }
1779
- .\[--lh\:1\.4\] {
1780
- --lh: 1.4;
1781
- }
1782
1969
  .\[--lh\:1\.6\] {
1783
1970
  --lh: 1.6;
1784
1971
  }
1785
- .\[--lh\:1\.111\] {
1786
- --lh: 1.111;
1787
- }
1788
- .\[--lh\:1\.333\] {
1789
- --lh: 1.333;
1790
- }
1791
- .\[--lh\:1\.556\] {
1792
- --lh: 1.556;
1793
- }
1794
- .\[--lh\:1\] {
1795
- --lh: 1;
1796
- }
1797
- .\[--py-unit\:0\.4\] {
1798
- --py-unit: 0.4;
1799
- }
1800
- .\[--py-unit\:0\.5\] {
1801
- --py-unit: 0.5;
1802
- }
1803
- .\[--py-unit\:0\.6\] {
1804
- --py-unit: 0.6;
1805
- }
1806
- .\[--py-unit\:0\.8\] {
1807
- --py-unit: 0.8;
1808
- }
1809
- .\[--py-unit\:1\.2\] {
1810
- --py-unit: 1.2;
1811
- }
1812
1972
  .\[--py-unit\:1\.5\] {
1813
1973
  --py-unit: 1.5;
1814
1974
  }
@@ -1824,314 +1984,89 @@
1824
1984
  .\[--py-unit\:3\] {
1825
1985
  --py-unit: 3;
1826
1986
  }
1827
- .\[--py-unit\:4\] {
1828
- --py-unit: 4;
1829
- }
1830
- .\[--py-unit\:5\] {
1831
- --py-unit: 5;
1832
- }
1833
- .\[--py-unit\:6\] {
1834
- --py-unit: 6;
1835
- }
1836
- .\[--py-unit\:8\] {
1837
- --py-unit: 8;
1838
- }
1839
- .\[--py-unit\:10\] {
1840
- --py-unit: 10;
1841
- }
1842
- .\[--py-unit\:12\] {
1843
- --py-unit: 12;
1844
- }
1845
- .\[--py-unit\:16\] {
1846
- --py-unit: 16;
1847
- }
1848
- .\[--py-unit\:20\] {
1849
- --py-unit: 20;
1850
- }
1851
- .\[--size-unit\:3\.5\] {
1852
- --size-unit: 3.5;
1853
- }
1854
- .\[--size-unit\:3\] {
1855
- --size-unit: 3;
1856
- }
1857
- .\[--size-unit\:4\.5\] {
1858
- --size-unit: 4.5;
1987
+ .\[--py-unit\:var\(--py-unit-desktop\)\] {
1988
+ --py-unit: var(--py-unit-desktop);
1859
1989
  }
1860
1990
  .\[--size-unit\:4\] {
1861
1991
  --size-unit: 4;
1862
1992
  }
1863
- .\[--size-unit\:5\] {
1864
- --size-unit: 5;
1993
+ .\[background\:var\(--bg-color\)\] {
1994
+ background: var(--bg-color);
1865
1995
  }
1866
- .\[background\:transparent\] {
1867
- background: transparent;
1996
+ .\[background\:var\(--border-color\)\] {
1997
+ background: var(--border-color);
1868
1998
  }
1869
- .\[background\:var\(--color-bg-accent\)\] {
1870
- background: var(--color-bg-accent);
1871
- }
1872
- .\[background\:var\(--color-bg-brand\)\] {
1873
- background: var(--color-bg-brand);
1999
+ .ring-inset {
2000
+ --tw-ring-inset: inset;
1874
2001
  }
1875
- .\[background\:var\(--color-bg-danger\)\] {
1876
- background: var(--color-bg-danger);
2002
+ .peer-checked\:visible {
2003
+ &:is(:where(.peer):checked ~ *) {
2004
+ visibility: visible;
2005
+ }
1877
2006
  }
1878
- .\[background\:var\(--color-bg-filled-accent\)\] {
1879
- background: var(--color-bg-filled-accent);
2007
+ .checked\:\[background\:var\(--checked-bg-color\)\] {
2008
+ &:checked {
2009
+ background: var(--checked-bg-color);
2010
+ }
1880
2011
  }
1881
- .\[background\:var\(--color-bg-filled-brand\)\] {
1882
- background: var(--color-bg-filled-brand);
2012
+ .hover\:scale-105 {
2013
+ &:hover {
2014
+ @media (hover: hover) {
2015
+ --tw-scale-x: 105%;
2016
+ --tw-scale-y: 105%;
2017
+ --tw-scale-z: 105%;
2018
+ scale: var(--tw-scale-x) var(--tw-scale-y);
2019
+ }
2020
+ }
1883
2021
  }
1884
- .\[background\:var\(--color-bg-filled-danger\)\] {
1885
- background: var(--color-bg-filled-danger);
2022
+ .hover\:border-green-600 {
2023
+ &:hover {
2024
+ @media (hover: hover) {
2025
+ border-color: var(--color-green-600);
2026
+ }
2027
+ }
1886
2028
  }
1887
- .\[background\:var\(--color-bg-filled-info\)\] {
1888
- background: var(--color-bg-filled-info);
2029
+ .hover\:bg-indigo-700 {
2030
+ &:hover {
2031
+ @media (hover: hover) {
2032
+ background-color: var(--color-indigo-700);
2033
+ }
2034
+ }
1889
2035
  }
1890
- .\[background\:var\(--color-bg-filled-layout-accent\)\] {
1891
- background: var(--color-bg-filled-layout-accent);
2036
+ .hover\:bg-purple-700 {
2037
+ &:hover {
2038
+ @media (hover: hover) {
2039
+ background-color: var(--color-purple-700);
2040
+ }
2041
+ }
1892
2042
  }
1893
- .\[background\:var\(--color-bg-filled-layout-brand\)\] {
1894
- background: var(--color-bg-filled-layout-brand);
2043
+ .hover\:bg-red-200 {
2044
+ &:hover {
2045
+ @media (hover: hover) {
2046
+ background-color: var(--color-red-200);
2047
+ }
2048
+ }
1895
2049
  }
1896
- .\[background\:var\(--color-bg-filled-layout-danger\)\] {
1897
- background: var(--color-bg-filled-layout-danger);
1898
- }
1899
- .\[background\:var\(--color-bg-filled-layout-info\)\] {
1900
- background: var(--color-bg-filled-layout-info);
1901
- }
1902
- .\[background\:var\(--color-bg-filled-layout-primary\)\] {
1903
- background: var(--color-bg-filled-layout-primary);
1904
- }
1905
- .\[background\:var\(--color-bg-filled-layout-secondary\)\] {
1906
- background: var(--color-bg-filled-layout-secondary);
1907
- }
1908
- .\[background\:var\(--color-bg-filled-layout-success\)\] {
1909
- background: var(--color-bg-filled-layout-success);
1910
- }
1911
- .\[background\:var\(--color-bg-filled-layout-tertiary\)\] {
1912
- background: var(--color-bg-filled-layout-tertiary);
1913
- }
1914
- .\[background\:var\(--color-bg-filled-layout-warning\)\] {
1915
- background: var(--color-bg-filled-layout-warning);
1916
- }
1917
- .\[background\:var\(--color-bg-filled-primary\)\] {
1918
- background: var(--color-bg-filled-primary);
1919
- }
1920
- .\[background\:var\(--color-bg-filled-secondary\)\] {
1921
- background: var(--color-bg-filled-secondary);
1922
- }
1923
- .\[background\:var\(--color-bg-filled-success\)\] {
1924
- background: var(--color-bg-filled-success);
1925
- }
1926
- .\[background\:var\(--color-bg-filled-tertiary\)\] {
1927
- background: var(--color-bg-filled-tertiary);
1928
- }
1929
- .\[background\:var\(--color-bg-filled-warning\)\] {
1930
- background: var(--color-bg-filled-warning);
1931
- }
1932
- .\[background\:var\(--color-bg-info\)\] {
1933
- background: var(--color-bg-info);
1934
- }
1935
- .\[background\:var\(--color-bg-layout-accent\)\] {
1936
- background: var(--color-bg-layout-accent);
1937
- }
1938
- .\[background\:var\(--color-bg-layout-brand\)\] {
1939
- background: var(--color-bg-layout-brand);
1940
- }
1941
- .\[background\:var\(--color-bg-layout-danger\)\] {
1942
- background: var(--color-bg-layout-danger);
1943
- }
1944
- .\[background\:var\(--color-bg-layout-info\)\] {
1945
- background: var(--color-bg-layout-info);
1946
- }
1947
- .\[background\:var\(--color-bg-layout-primary\)\] {
1948
- background: var(--color-bg-layout-primary);
1949
- }
1950
- .\[background\:var\(--color-bg-layout-secondary\)\] {
1951
- background: var(--color-bg-layout-secondary);
1952
- }
1953
- .\[background\:var\(--color-bg-layout-success\)\] {
1954
- background: var(--color-bg-layout-success);
1955
- }
1956
- .\[background\:var\(--color-bg-layout-tertiary\)\] {
1957
- background: var(--color-bg-layout-tertiary);
1958
- }
1959
- .\[background\:var\(--color-bg-layout-warning\)\] {
1960
- background: var(--color-bg-layout-warning);
1961
- }
1962
- .\[background\:var\(--color-bg-primary\)\] {
1963
- background: var(--color-bg-primary);
1964
- }
1965
- .\[background\:var\(--color-bg-secondary\)\] {
1966
- background: var(--color-bg-secondary);
1967
- }
1968
- .\[background\:var\(--color-bg-success\)\] {
1969
- background: var(--color-bg-success);
1970
- }
1971
- .\[background\:var\(--color-bg-tertiary\)\] {
1972
- background: var(--color-bg-tertiary);
1973
- }
1974
- .\[background\:var\(--color-bg-warning\)\] {
1975
- background: var(--color-bg-warning);
1976
- }
1977
- .\[background\:var\(--color-border-accent\)\] {
1978
- background: var(--color-border-accent);
1979
- }
1980
- .\[background\:var\(--color-border-brand\)\] {
1981
- background: var(--color-border-brand);
1982
- }
1983
- .\[background\:var\(--color-border-danger\)\] {
1984
- background: var(--color-border-danger);
1985
- }
1986
- .\[background\:var\(--color-border-info\)\] {
1987
- background: var(--color-border-info);
1988
- }
1989
- .\[background\:var\(--color-border-primary\)\] {
1990
- background: var(--color-border-primary);
1991
- }
1992
- .\[background\:var\(--color-border-secondary\)\] {
1993
- background: var(--color-border-secondary);
1994
- }
1995
- .\[background\:var\(--color-border-success\)\] {
1996
- background: var(--color-border-success);
1997
- }
1998
- .\[background\:var\(--color-border-tertiary\)\] {
1999
- background: var(--color-border-tertiary);
2000
- }
2001
- .\[background\:var\(--color-border-warning\)\] {
2002
- background: var(--color-border-warning);
2003
- }
2004
- .ring-inset {
2005
- --tw-ring-inset: inset;
2006
- }
2007
- .peer-checked\:visible {
2008
- &:is(:where(.peer):checked ~ *) {
2009
- visibility: visible;
2010
- }
2011
- }
2012
- .checked\:\[background\:transparent\] {
2013
- &:checked {
2014
- background: transparent;
2015
- }
2016
- }
2017
- .checked\:\[background\:var\(--color-bg-accent\)\] {
2018
- &:checked {
2019
- background: var(--color-bg-accent);
2020
- }
2021
- }
2022
- .checked\:\[background\:var\(--color-bg-brand\)\] {
2023
- &:checked {
2024
- background: var(--color-bg-brand);
2025
- }
2026
- }
2027
- .checked\:\[background\:var\(--color-bg-danger\)\] {
2028
- &:checked {
2029
- background: var(--color-bg-danger);
2030
- }
2031
- }
2032
- .checked\:\[background\:var\(--color-bg-filled-accent\)\] {
2033
- &:checked {
2034
- background: var(--color-bg-filled-accent);
2035
- }
2036
- }
2037
- .checked\:\[background\:var\(--color-bg-filled-brand\)\] {
2038
- &:checked {
2039
- background: var(--color-bg-filled-brand);
2040
- }
2041
- }
2042
- .checked\:\[background\:var\(--color-bg-filled-danger\)\] {
2043
- &:checked {
2044
- background: var(--color-bg-filled-danger);
2045
- }
2046
- }
2047
- .checked\:\[background\:var\(--color-bg-filled-info\)\] {
2048
- &:checked {
2049
- background: var(--color-bg-filled-info);
2050
- }
2051
- }
2052
- .checked\:\[background\:var\(--color-bg-filled-primary\)\] {
2053
- &:checked {
2054
- background: var(--color-bg-filled-primary);
2055
- }
2056
- }
2057
- .checked\:\[background\:var\(--color-bg-filled-secondary\)\] {
2058
- &:checked {
2059
- background: var(--color-bg-filled-secondary);
2060
- }
2061
- }
2062
- .checked\:\[background\:var\(--color-bg-filled-success\)\] {
2063
- &:checked {
2064
- background: var(--color-bg-filled-success);
2065
- }
2066
- }
2067
- .checked\:\[background\:var\(--color-bg-filled-tertiary\)\] {
2068
- &:checked {
2069
- background: var(--color-bg-filled-tertiary);
2070
- }
2071
- }
2072
- .checked\:\[background\:var\(--color-bg-filled-warning\)\] {
2073
- &:checked {
2074
- background: var(--color-bg-filled-warning);
2075
- }
2076
- }
2077
- .checked\:\[background\:var\(--color-bg-info\)\] {
2078
- &:checked {
2079
- background: var(--color-bg-info);
2080
- }
2081
- }
2082
- .checked\:\[background\:var\(--color-bg-primary\)\] {
2083
- &:checked {
2084
- background: var(--color-bg-primary);
2085
- }
2086
- }
2087
- .checked\:\[background\:var\(--color-bg-secondary\)\] {
2088
- &:checked {
2089
- background: var(--color-bg-secondary);
2090
- }
2091
- }
2092
- .checked\:\[background\:var\(--color-bg-success\)\] {
2093
- &:checked {
2094
- background: var(--color-bg-success);
2095
- }
2096
- }
2097
- .checked\:\[background\:var\(--color-bg-tertiary\)\] {
2098
- &:checked {
2099
- background: var(--color-bg-tertiary);
2100
- }
2101
- }
2102
- .checked\:\[background\:var\(--color-bg-warning\)\] {
2103
- &:checked {
2104
- background: var(--color-bg-warning);
2105
- }
2106
- }
2107
- .hover\:scale-105 {
2108
- &:hover {
2109
- @media (hover: hover) {
2110
- --tw-scale-x: 105%;
2111
- --tw-scale-y: 105%;
2112
- --tw-scale-z: 105%;
2113
- scale: var(--tw-scale-x) var(--tw-scale-y);
2114
- }
2115
- }
2116
- }
2117
- .hover\:border-green-600 {
2050
+ .hover\:bg-teal-600 {
2118
2051
  &:hover {
2119
2052
  @media (hover: hover) {
2120
- border-color: var(--color-green-600);
2053
+ background-color: var(--color-teal-600);
2121
2054
  }
2122
2055
  }
2123
2056
  }
2124
- .hover\:bg-purple-700 {
2057
+ .hover\:from-pink-600 {
2125
2058
  &:hover {
2126
2059
  @media (hover: hover) {
2127
- background-color: var(--color-purple-700);
2060
+ --tw-gradient-from: var(--color-pink-600);
2061
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2128
2062
  }
2129
2063
  }
2130
2064
  }
2131
- .hover\:bg-red-200 {
2065
+ .hover\:to-violet-600 {
2132
2066
  &:hover {
2133
2067
  @media (hover: hover) {
2134
- background-color: var(--color-red-200);
2068
+ --tw-gradient-to: var(--color-violet-600);
2069
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2135
2070
  }
2136
2071
  }
2137
2072
  }
@@ -2211,692 +2146,1068 @@
2211
2146
  }
2212
2147
  }
2213
2148
  }
2214
- .hover\:\[background\:transparent\] {
2149
+ .hover\:\[background\:var\(--bg-hover-color\)\] {
2215
2150
  &:hover {
2216
2151
  @media (hover: hover) {
2217
- background: transparent;
2152
+ background: var(--bg-hover-color);
2218
2153
  }
2219
2154
  }
2220
2155
  }
2221
- .hover\:\[background\:var\(--color-bg-filled-hover-accent\)\] {
2156
+ .hover\:ring-inset {
2222
2157
  &:hover {
2223
2158
  @media (hover: hover) {
2224
- background: var(--color-bg-filled-hover-accent);
2159
+ --tw-ring-inset: inset;
2225
2160
  }
2226
2161
  }
2227
2162
  }
2228
- .hover\:\[background\:var\(--color-bg-filled-hover-brand\)\] {
2229
- &:hover {
2230
- @media (hover: hover) {
2231
- background: var(--color-bg-filled-hover-brand);
2232
- }
2163
+ .focus-visible\:outline-2 {
2164
+ &:focus-visible {
2165
+ outline-style: var(--tw-outline-style);
2166
+ outline-width: 2px;
2233
2167
  }
2234
2168
  }
2235
- .hover\:\[background\:var\(--color-bg-filled-hover-danger\)\] {
2236
- &:hover {
2237
- @media (hover: hover) {
2238
- background: var(--color-bg-filled-hover-danger);
2239
- }
2169
+ .focus-visible\:outline-offset-2 {
2170
+ &:focus-visible {
2171
+ outline-offset: 2px;
2240
2172
  }
2241
2173
  }
2242
- .hover\:\[background\:var\(--color-bg-filled-hover-info\)\] {
2243
- &:hover {
2244
- @media (hover: hover) {
2245
- background: var(--color-bg-filled-hover-info);
2246
- }
2174
+ .focus-visible\:outline-\(--ring-color\) {
2175
+ &:focus-visible {
2176
+ outline-color: var(--ring-color);
2247
2177
  }
2248
2178
  }
2249
- .hover\:\[background\:var\(--color-bg-filled-hover-primary\)\] {
2250
- &:hover {
2251
- @media (hover: hover) {
2252
- background: var(--color-bg-filled-hover-primary);
2253
- }
2179
+ .active\:border-green-700 {
2180
+ &:active {
2181
+ border-color: var(--color-green-700);
2254
2182
  }
2255
2183
  }
2256
- .hover\:\[background\:var\(--color-bg-filled-hover-secondary\)\] {
2257
- &:hover {
2258
- @media (hover: hover) {
2259
- background: var(--color-bg-filled-hover-secondary);
2260
- }
2184
+ .active\:bg-red-300 {
2185
+ &:active {
2186
+ background-color: var(--color-red-300);
2261
2187
  }
2262
2188
  }
2263
- .hover\:\[background\:var\(--color-bg-filled-hover-success\)\] {
2264
- &:hover {
2265
- @media (hover: hover) {
2266
- background: var(--color-bg-filled-hover-success);
2267
- }
2189
+ .active\:bg-teal-700 {
2190
+ &:active {
2191
+ background-color: var(--color-teal-700);
2268
2192
  }
2269
2193
  }
2270
- .hover\:\[background\:var\(--color-bg-filled-hover-tertiary\)\] {
2271
- &:hover {
2272
- @media (hover: hover) {
2273
- background: var(--color-bg-filled-hover-tertiary);
2274
- }
2194
+ .active\:from-pink-700 {
2195
+ &:active {
2196
+ --tw-gradient-from: var(--color-pink-700);
2197
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2275
2198
  }
2276
2199
  }
2277
- .hover\:\[background\:var\(--color-bg-filled-hover-warning\)\] {
2278
- &:hover {
2279
- @media (hover: hover) {
2280
- background: var(--color-bg-filled-hover-warning);
2281
- }
2200
+ .active\:to-violet-700 {
2201
+ &:active {
2202
+ --tw-gradient-to: var(--color-violet-700);
2203
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2282
2204
  }
2283
2205
  }
2284
- .hover\:\[background\:var\(--color-bg-hover-accent\)\] {
2285
- &:hover {
2286
- @media (hover: hover) {
2287
- background: var(--color-bg-hover-accent);
2288
- }
2206
+ .active\:text-blue-900 {
2207
+ &:active {
2208
+ color: var(--color-blue-900);
2289
2209
  }
2290
2210
  }
2291
- .hover\:\[background\:var\(--color-bg-hover-brand\)\] {
2292
- &:hover {
2293
- @media (hover: hover) {
2294
- background: var(--color-bg-hover-brand);
2295
- }
2211
+ .active\:ring {
2212
+ &:active {
2213
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2214
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2296
2215
  }
2297
2216
  }
2298
- .hover\:\[background\:var\(--color-bg-hover-danger\)\] {
2299
- &:hover {
2300
- @media (hover: hover) {
2301
- background: var(--color-bg-hover-danger);
2302
- }
2217
+ .active\:\[background\:var\(--bg-active-color\)\] {
2218
+ &:active {
2219
+ background: var(--bg-active-color);
2303
2220
  }
2304
2221
  }
2305
- .hover\:\[background\:var\(--color-bg-hover-info\)\] {
2306
- &:hover {
2307
- @media (hover: hover) {
2308
- background: var(--color-bg-hover-info);
2309
- }
2222
+ .active\:ring-inset {
2223
+ &:active {
2224
+ --tw-ring-inset: inset;
2310
2225
  }
2311
2226
  }
2312
- .hover\:\[background\:var\(--color-bg-hover-primary\)\] {
2313
- &:hover {
2314
- @media (hover: hover) {
2315
- background: var(--color-bg-hover-primary);
2316
- }
2227
+ .has-\[input\]\:cursor-pointer {
2228
+ &:has(*:is(input)) {
2229
+ cursor: pointer;
2317
2230
  }
2318
2231
  }
2319
- .hover\:\[background\:var\(--color-bg-hover-secondary\)\] {
2320
- &:hover {
2321
- @media (hover: hover) {
2322
- background: var(--color-bg-hover-secondary);
2323
- }
2232
+ .max-desktop\:hidden {
2233
+ @media (width < 80rem) {
2234
+ display: none;
2324
2235
  }
2325
2236
  }
2326
- .hover\:\[background\:var\(--color-bg-hover-success\)\] {
2327
- &:hover {
2328
- @media (hover: hover) {
2329
- background: var(--color-bg-hover-success);
2330
- }
2237
+ .max-desktop\:flex-col {
2238
+ @media (width < 80rem) {
2239
+ flex-direction: column;
2331
2240
  }
2332
2241
  }
2333
- .hover\:\[background\:var\(--color-bg-hover-tertiary\)\] {
2334
- &:hover {
2335
- @media (hover: hover) {
2336
- background: var(--color-bg-hover-tertiary);
2337
- }
2242
+ .max-tablet\:hidden {
2243
+ @media (width < 64rem) {
2244
+ display: none;
2338
2245
  }
2339
2246
  }
2340
- .hover\:\[background\:var\(--color-bg-hover-warning\)\] {
2341
- &:hover {
2342
- @media (hover: hover) {
2343
- background: var(--color-bg-hover-warning);
2344
- }
2247
+ .max-tablet\:flex-col {
2248
+ @media (width < 64rem) {
2249
+ flex-direction: column;
2345
2250
  }
2346
2251
  }
2347
- .hover\:ring-inset {
2348
- &:hover {
2349
- @media (hover: hover) {
2350
- --tw-ring-inset: inset;
2351
- }
2252
+ .max-tablet\:\[--fs-unit\:9\] {
2253
+ @media (width < 64rem) {
2254
+ --fs-unit: 9;
2352
2255
  }
2353
2256
  }
2354
- .focus-visible\:outline-2 {
2355
- &:focus-visible {
2356
- outline-style: var(--tw-outline-style);
2357
- outline-width: 2px;
2257
+ .max-tablet\:\[--fs-unit\:var\(--fs-unit-tablet\)\] {
2258
+ @media (width < 64rem) {
2259
+ --fs-unit: var(--fs-unit-tablet);
2358
2260
  }
2359
2261
  }
2360
- .focus-visible\:outline-offset-2 {
2361
- &:focus-visible {
2362
- outline-offset: 2px;
2262
+ .max-tablet\:\[--gap-unit\:var\(--gap-unit-tablet\)\] {
2263
+ @media (width < 64rem) {
2264
+ --gap-unit: var(--gap-unit-tablet);
2363
2265
  }
2364
2266
  }
2365
- .focus-visible\:outline-\(--color-border-accent\) {
2366
- &:focus-visible {
2367
- outline-color: var(--color-border-accent);
2267
+ .max-tablet\:\[--py-unit\:var\(--py-unit-tablet\)\] {
2268
+ @media (width < 64rem) {
2269
+ --py-unit: var(--py-unit-tablet);
2368
2270
  }
2369
2271
  }
2370
- .focus-visible\:outline-\(--color-border-brand\) {
2371
- &:focus-visible {
2372
- outline-color: var(--color-border-brand);
2272
+ .max-mobile\:hidden {
2273
+ @media (width < 48rem) {
2274
+ display: none;
2373
2275
  }
2374
2276
  }
2375
- .focus-visible\:outline-\(--color-border-danger\) {
2376
- &:focus-visible {
2377
- outline-color: var(--color-border-danger);
2277
+ .max-mobile\:flex-col {
2278
+ @media (width < 48rem) {
2279
+ flex-direction: column;
2378
2280
  }
2379
2281
  }
2380
- .focus-visible\:outline-\(--color-border-filled-accent\) {
2381
- &:focus-visible {
2382
- outline-color: var(--color-border-filled-accent);
2282
+ .max-mobile\:\[--fs-unit\:var\(--fs-unit-mobile\)\] {
2283
+ @media (width < 48rem) {
2284
+ --fs-unit: var(--fs-unit-mobile);
2383
2285
  }
2384
2286
  }
2385
- .focus-visible\:outline-\(--color-border-filled-brand\) {
2386
- &:focus-visible {
2387
- outline-color: var(--color-border-filled-brand);
2287
+ .max-mobile\:\[--gap-unit\:var\(--gap-unit-mobile\)\] {
2288
+ @media (width < 48rem) {
2289
+ --gap-unit: var(--gap-unit-mobile);
2388
2290
  }
2389
2291
  }
2390
- .focus-visible\:outline-\(--color-border-filled-danger\) {
2391
- &:focus-visible {
2392
- outline-color: var(--color-border-filled-danger);
2292
+ .max-mobile\:\[--py-unit\:var\(--py-unit-mobile\)\] {
2293
+ @media (width < 48rem) {
2294
+ --py-unit: var(--py-unit-mobile);
2393
2295
  }
2394
2296
  }
2395
- .focus-visible\:outline-\(--color-border-filled-info\) {
2396
- &:focus-visible {
2397
- outline-color: var(--color-border-filled-info);
2297
+ .sm\:grid-cols-2 {
2298
+ @media (width >= 40rem) {
2299
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2398
2300
  }
2399
2301
  }
2400
- .focus-visible\:outline-\(--color-border-filled-primary\) {
2401
- &:focus-visible {
2402
- outline-color: var(--color-border-filled-primary);
2302
+ .md\:grid-cols-2 {
2303
+ @media (width >= 48rem) {
2304
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2403
2305
  }
2404
2306
  }
2405
- .focus-visible\:outline-\(--color-border-filled-secondary\) {
2406
- &:focus-visible {
2407
- outline-color: var(--color-border-filled-secondary);
2408
- }
2409
- }
2410
- .focus-visible\:outline-\(--color-border-filled-success\) {
2411
- &:focus-visible {
2412
- outline-color: var(--color-border-filled-success);
2307
+ .md\:grid-cols-3 {
2308
+ @media (width >= 48rem) {
2309
+ grid-template-columns: repeat(3, minmax(0, 1fr));
2413
2310
  }
2414
2311
  }
2415
- .focus-visible\:outline-\(--color-border-filled-tertiary\) {
2416
- &:focus-visible {
2417
- outline-color: var(--color-border-filled-tertiary);
2312
+ .md\:grid-cols-4 {
2313
+ @media (width >= 48rem) {
2314
+ grid-template-columns: repeat(4, minmax(0, 1fr));
2418
2315
  }
2419
2316
  }
2420
- .focus-visible\:outline-\(--color-border-filled-warning\) {
2421
- &:focus-visible {
2422
- outline-color: var(--color-border-filled-warning);
2317
+ .lg\:grid-cols-4 {
2318
+ @media (width >= 64rem) {
2319
+ grid-template-columns: repeat(4, minmax(0, 1fr));
2423
2320
  }
2424
2321
  }
2425
- .focus-visible\:outline-\(--color-border-info\) {
2426
- &:focus-visible {
2427
- outline-color: var(--color-border-info);
2322
+ .lg\:grid-cols-5 {
2323
+ @media (width >= 64rem) {
2324
+ grid-template-columns: repeat(5, minmax(0, 1fr));
2428
2325
  }
2429
2326
  }
2430
- .focus-visible\:outline-\(--color-border-primary\) {
2431
- &:focus-visible {
2432
- outline-color: var(--color-border-primary);
2327
+ .lg\:grid-cols-6 {
2328
+ @media (width >= 64rem) {
2329
+ grid-template-columns: repeat(6, minmax(0, 1fr));
2433
2330
  }
2434
2331
  }
2435
- .focus-visible\:outline-\(--color-border-secondary\) {
2436
- &:focus-visible {
2437
- outline-color: var(--color-border-secondary);
2332
+ }
2333
+ @layer theme {
2334
+ @layer base {
2335
+ [data-size] {
2336
+ --gap: calc(var(--gap-unit) * var(--spacing));
2337
+ --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--spacing));
2338
+ --py: calc(var(--py-unit) * var(--spacing));
2339
+ --size: calc(var(--size-unit) * var(--spacing));
2340
+ --br: calc(var(--br-unit) * var(--br-base));
2341
+ --fs: calc(var(--fs-unit) * var(--fs-base));
2342
+ --pl: calc(var(--py-unit) * var(--spacing));
2438
2343
  }
2439
2344
  }
2440
- .focus-visible\:outline-\(--color-border-success\) {
2441
- &:focus-visible {
2442
- outline-color: var(--color-border-success);
2345
+ @layer components {
2346
+ .vane-button {
2347
+ --lh: 1.3;
2348
+ --br-unit: 2;
2349
+ --py-unit: 2;
2350
+ --aspect-ratio: 2;
2351
+ --gap-unit: 2;
2443
2352
  }
2444
- }
2445
- .focus-visible\:outline-\(--color-border-tertiary\) {
2446
- &:focus-visible {
2447
- outline-color: var(--color-border-tertiary);
2353
+ .vane-button[data-size="xs"] {
2354
+ --fs-unit: 6;
2355
+ --py-unit: 1;
2356
+ --br-unit: 1;
2357
+ --gap-unit: 1;
2448
2358
  }
2449
- }
2450
- .focus-visible\:outline-\(--color-border-warning\) {
2451
- &:focus-visible {
2452
- outline-color: var(--color-border-warning);
2359
+ .vane-button[data-size="sm"] {
2360
+ --fs-unit: 7;
2361
+ --py-unit: 1.5;
2362
+ --br-unit: 1.5;
2363
+ --gap-unit: 1.5;
2453
2364
  }
2454
- }
2455
- .focus-visible\:outline-transparent {
2456
- &:focus-visible {
2457
- outline-color: transparent;
2365
+ .vane-button[data-size="md"] {
2366
+ --fs-unit: 8;
2367
+ --py-unit: 2;
2368
+ --br-unit: 2;
2369
+ --gap-unit: 2;
2458
2370
  }
2459
- }
2460
- .active\:border-green-700 {
2461
- &:active {
2462
- border-color: var(--color-green-700);
2371
+ .vane-button[data-size="lg"] {
2372
+ --fs-unit: 9;
2373
+ --py-unit: 2.5;
2374
+ --br-unit: 2.5;
2375
+ --gap-unit: 2.5;
2463
2376
  }
2464
- }
2465
- .active\:bg-red-300 {
2466
- &:active {
2467
- background-color: var(--color-red-300);
2377
+ .vane-button[data-size="xl"] {
2378
+ --fs-unit: 10;
2379
+ --py-unit: 3;
2380
+ --br-unit: 3;
2381
+ --gap-unit: 3;
2468
2382
  }
2469
- }
2470
- .active\:text-blue-900 {
2471
- &:active {
2472
- color: var(--color-blue-900);
2383
+ .vane-badge {
2384
+ --lh: 1.6;
2385
+ --br-unit: 2;
2386
+ --py-unit: 2;
2387
+ --aspect-ratio: 2;
2388
+ --gap-unit: 2;
2473
2389
  }
2474
- }
2475
- .active\:ring {
2476
- &:active {
2477
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2478
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2390
+ .vane-badge[data-size="xs"] {
2391
+ --fs-unit: 6;
2392
+ --py-unit: 1;
2393
+ --br-unit: 1;
2394
+ --gap-unit: 1;
2479
2395
  }
2480
- }
2481
- .active\:\[background\:transparent\] {
2482
- &:active {
2483
- background: transparent;
2396
+ .vane-badge[data-size="sm"] {
2397
+ --fs-unit: 7;
2398
+ --py-unit: 1.5;
2399
+ --br-unit: 1.5;
2400
+ --gap-unit: 1.5;
2484
2401
  }
2485
- }
2486
- .active\:\[background\:var\(--color-bg-active-accent\)\] {
2487
- &:active {
2488
- background: var(--color-bg-active-accent);
2402
+ .vane-badge[data-size="md"] {
2403
+ --fs-unit: 8;
2404
+ --py-unit: 2;
2405
+ --br-unit: 2;
2406
+ --gap-unit: 2;
2489
2407
  }
2490
- }
2491
- .active\:\[background\:var\(--color-bg-active-brand\)\] {
2492
- &:active {
2493
- background: var(--color-bg-active-brand);
2408
+ .vane-badge[data-size="lg"] {
2409
+ --fs-unit: 9;
2410
+ --py-unit: 2.5;
2411
+ --br-unit: 2.5;
2412
+ --gap-unit: 2.5;
2494
2413
  }
2495
- }
2496
- .active\:\[background\:var\(--color-bg-active-danger\)\] {
2497
- &:active {
2498
- background: var(--color-bg-active-danger);
2414
+ .vane-badge[data-size="xl"] {
2415
+ --fs-unit: 10;
2416
+ --py-unit: 3;
2417
+ --br-unit: 3;
2418
+ --gap-unit: 3;
2499
2419
  }
2500
- }
2501
- .active\:\[background\:var\(--color-bg-active-info\)\] {
2502
- &:active {
2503
- background: var(--color-bg-active-info);
2420
+ .vane-chip {
2421
+ --lh: 1.2;
2422
+ --br-unit: 2;
2423
+ --py-unit: 1.5;
2424
+ --aspect-ratio: 2;
2425
+ --gap-unit: 2;
2504
2426
  }
2505
- }
2506
- .active\:\[background\:var\(--color-bg-active-primary\)\] {
2507
- &:active {
2508
- background: var(--color-bg-active-primary);
2427
+ .vane-chip[data-size="xs"] {
2428
+ --fs-unit: 6;
2429
+ --py-unit: 0.5;
2430
+ --br-unit: 1;
2431
+ --gap-unit: 1;
2509
2432
  }
2510
- }
2511
- .active\:\[background\:var\(--color-bg-active-secondary\)\] {
2512
- &:active {
2513
- background: var(--color-bg-active-secondary);
2433
+ .vane-chip[data-size="sm"] {
2434
+ --fs-unit: 7;
2435
+ --py-unit: 1;
2436
+ --br-unit: 1.5;
2437
+ --gap-unit: 1.5;
2514
2438
  }
2515
- }
2516
- .active\:\[background\:var\(--color-bg-active-success\)\] {
2517
- &:active {
2518
- background: var(--color-bg-active-success);
2439
+ .vane-chip[data-size="md"] {
2440
+ --fs-unit: 8;
2441
+ --py-unit: 1.5;
2442
+ --br-unit: 2;
2443
+ --gap-unit: 2;
2519
2444
  }
2520
- }
2521
- .active\:\[background\:var\(--color-bg-active-tertiary\)\] {
2522
- &:active {
2523
- background: var(--color-bg-active-tertiary);
2445
+ .vane-chip[data-size="lg"] {
2446
+ --fs-unit: 9;
2447
+ --py-unit: 2;
2448
+ --br-unit: 2.5;
2449
+ --gap-unit: 2.5;
2524
2450
  }
2525
- }
2526
- .active\:\[background\:var\(--color-bg-active-warning\)\] {
2527
- &:active {
2528
- background: var(--color-bg-active-warning);
2451
+ .vane-chip[data-size="xl"] {
2452
+ --fs-unit: 10;
2453
+ --py-unit: 2.5;
2454
+ --br-unit: 3;
2455
+ --gap-unit: 3;
2529
2456
  }
2530
- }
2531
- .active\:\[background\:var\(--color-bg-filled-active-accent\)\] {
2532
- &:active {
2533
- background: var(--color-bg-filled-active-accent);
2457
+ .vane-code {
2458
+ --lh: 1;
2459
+ --br-unit: 1.5;
2460
+ --py-unit: 0.8;
2461
+ --aspect-ratio: 1.8;
2534
2462
  }
2535
- }
2536
- .active\:\[background\:var\(--color-bg-filled-active-brand\)\] {
2537
- &:active {
2538
- background: var(--color-bg-filled-active-brand);
2463
+ .vane-code[data-size="xs"] {
2464
+ --fs-unit: 5;
2465
+ --py-unit: 0.4;
2466
+ --br-unit: 0.5;
2539
2467
  }
2540
- }
2541
- .active\:\[background\:var\(--color-bg-filled-active-danger\)\] {
2542
- &:active {
2543
- background: var(--color-bg-filled-active-danger);
2468
+ .vane-code[data-size="sm"] {
2469
+ --fs-unit: 6;
2470
+ --py-unit: 0.6;
2471
+ --br-unit: 1;
2544
2472
  }
2545
- }
2546
- .active\:\[background\:var\(--color-bg-filled-active-info\)\] {
2547
- &:active {
2548
- background: var(--color-bg-filled-active-info);
2473
+ .vane-code[data-size="md"] {
2474
+ --fs-unit: 7;
2475
+ --py-unit: 0.8;
2476
+ --br-unit: 1.5;
2549
2477
  }
2550
- }
2551
- .active\:\[background\:var\(--color-bg-filled-active-primary\)\] {
2552
- &:active {
2553
- background: var(--color-bg-filled-active-primary);
2478
+ .vane-code[data-size="lg"] {
2479
+ --fs-unit: 8;
2480
+ --py-unit: 1;
2481
+ --br-unit: 2;
2554
2482
  }
2555
- }
2556
- .active\:\[background\:var\(--color-bg-filled-active-secondary\)\] {
2557
- &:active {
2558
- background: var(--color-bg-filled-active-secondary);
2483
+ .vane-code[data-size="xl"] {
2484
+ --fs-unit: 9;
2485
+ --py-unit: 1.2;
2486
+ --br-unit: 2.5;
2559
2487
  }
2560
- }
2561
- .active\:\[background\:var\(--color-bg-filled-active-success\)\] {
2562
- &:active {
2563
- background: var(--color-bg-filled-active-success);
2488
+ .vane-input {
2489
+ --lh: 1.6;
2490
+ --br-unit: 2;
2491
+ --py-unit: 2;
2492
+ --aspect-ratio: 2;
2564
2493
  }
2565
- }
2566
- .active\:\[background\:var\(--color-bg-filled-active-tertiary\)\] {
2567
- &:active {
2568
- background: var(--color-bg-filled-active-tertiary);
2494
+ .vane-input[data-size="xs"] {
2495
+ --fs-unit: 6;
2496
+ --py-unit: 1;
2497
+ --br-unit: 1;
2569
2498
  }
2570
- }
2571
- .active\:\[background\:var\(--color-bg-filled-active-warning\)\] {
2572
- &:active {
2573
- background: var(--color-bg-filled-active-warning);
2499
+ .vane-input[data-size="sm"] {
2500
+ --fs-unit: 7;
2501
+ --py-unit: 1.5;
2502
+ --br-unit: 1.5;
2574
2503
  }
2575
- }
2576
- .active\:ring-inset {
2577
- &:active {
2578
- --tw-ring-inset: inset;
2504
+ .vane-input[data-size="md"] {
2505
+ --fs-unit: 8;
2506
+ --py-unit: 2;
2507
+ --br-unit: 2;
2579
2508
  }
2580
- }
2581
- .has-\[input\]\:cursor-pointer {
2582
- &:has(*:is(input)) {
2583
- cursor: pointer;
2509
+ .vane-input[data-size="lg"] {
2510
+ --fs-unit: 9;
2511
+ --py-unit: 2.5;
2512
+ --br-unit: 2.5;
2584
2513
  }
2585
- }
2586
- .max-desktop\:hidden {
2587
- @media (width < 80rem) {
2588
- display: none;
2514
+ .vane-input[data-size="xl"] {
2515
+ --fs-unit: 10;
2516
+ --py-unit: 3;
2517
+ --br-unit: 3;
2589
2518
  }
2590
- }
2591
- .max-desktop\:flex-col {
2592
- @media (width < 80rem) {
2593
- flex-direction: column;
2519
+ .vane-checkbox {
2520
+ --br-unit: 1;
2594
2521
  }
2595
- }
2596
- .max-laptop\:hidden {
2597
- @media (width < 64rem) {
2598
- display: none;
2522
+ .vane-checkbox[data-size="xs"] {
2523
+ --size-unit: 3;
2524
+ --br-unit: 0.5;
2599
2525
  }
2600
- }
2601
- .max-laptop\:flex-col {
2602
- @media (width < 64rem) {
2603
- flex-direction: column;
2526
+ .vane-checkbox[data-size="sm"] {
2527
+ --size-unit: 3.5;
2528
+ --br-unit: 0.5;
2604
2529
  }
2605
- }
2606
- .max-laptop\:\[--fs-unit\:8\] {
2607
- @media (width < 64rem) {
2530
+ .vane-checkbox[data-size="md"] {
2531
+ --size-unit: 4;
2532
+ --br-unit: 1;
2533
+ }
2534
+ .vane-checkbox[data-size="lg"] {
2535
+ --size-unit: 4.5;
2536
+ --br-unit: 1;
2537
+ }
2538
+ .vane-checkbox[data-size="xl"] {
2539
+ --size-unit: 5;
2540
+ --br-unit: 1.5;
2541
+ }
2542
+ .vane-label {
2543
+ --lh: 1.6;
2544
+ --gap-unit: 2;
2545
+ }
2546
+ .vane-label[data-size="xs"] {
2547
+ --fs-unit: 6;
2548
+ --gap-unit: 1;
2549
+ }
2550
+ .vane-label[data-size="sm"] {
2551
+ --fs-unit: 7;
2552
+ --gap-unit: 1.5;
2553
+ }
2554
+ .vane-label[data-size="md"] {
2608
2555
  --fs-unit: 8;
2556
+ --gap-unit: 2;
2609
2557
  }
2610
- }
2611
- .max-laptop\:\[--fs-unit\:9\] {
2612
- @media (width < 64rem) {
2558
+ .vane-label[data-size="lg"] {
2613
2559
  --fs-unit: 9;
2560
+ --gap-unit: 2.5;
2614
2561
  }
2615
- }
2616
- .max-laptop\:\[--fs-unit\:10\] {
2617
- @media (width < 64rem) {
2562
+ .vane-label[data-size="xl"] {
2618
2563
  --fs-unit: 10;
2564
+ --gap-unit: 3;
2619
2565
  }
2620
- }
2621
- .max-laptop\:\[--fs-unit\:11\] {
2622
- @media (width < 64rem) {
2623
- --fs-unit: 11;
2566
+ .vane-card {
2567
+ --br-unit: 5;
2568
+ --py-unit: 6;
2569
+ --aspect-ratio: 1;
2570
+ --gap-unit: 4;
2624
2571
  }
2625
- }
2626
- .max-laptop\:\[--fs-unit\:12\] {
2627
- @media (width < 64rem) {
2628
- --fs-unit: 12;
2572
+ .vane-card[data-size="xs"] {
2573
+ --py-unit: 2;
2574
+ --gap-unit: 2;
2575
+ --br-unit: 3;
2629
2576
  }
2630
- }
2631
- .max-laptop\:\[--fs-unit\:13\] {
2632
- @media (width < 64rem) {
2633
- --fs-unit: 13;
2577
+ .vane-card[data-size="sm"] {
2578
+ --py-unit: 4;
2579
+ --gap-unit: 3;
2580
+ --br-unit: 4;
2634
2581
  }
2635
- }
2636
- .max-laptop\:\[--fs-unit\:14\] {
2637
- @media (width < 64rem) {
2638
- --fs-unit: 14;
2582
+ .vane-card[data-size="md"] {
2583
+ --py-unit: 6;
2584
+ --gap-unit: 4;
2585
+ --br-unit: 5;
2639
2586
  }
2640
- }
2641
- .max-laptop\:\[--fs-unit\:15\] {
2642
- @media (width < 64rem) {
2643
- --fs-unit: 15;
2587
+ .vane-card[data-size="lg"] {
2588
+ --py-unit: 8;
2589
+ --gap-unit: 5;
2590
+ --br-unit: 6;
2644
2591
  }
2645
- }
2646
- .max-laptop\:\[--fs-unit\:16\] {
2647
- @media (width < 64rem) {
2648
- --fs-unit: 16;
2592
+ .vane-card[data-size="xl"] {
2593
+ --py-unit: 10;
2594
+ --gap-unit: 6;
2595
+ --br-unit: 7;
2649
2596
  }
2650
- }
2651
- .max-laptop\:\[--fs-unit\:17\] {
2652
- @media (width < 64rem) {
2653
- --fs-unit: 17;
2597
+ .vane-stack {
2598
+ --gap-unit: 4;
2599
+ --py-unit: 4;
2600
+ --aspect-ratio: 1;
2601
+ --br-unit: 5;
2654
2602
  }
2655
- }
2656
- .max-laptop\:\[--fs-unit\:21\] {
2657
- @media (width < 64rem) {
2658
- --fs-unit: 21;
2603
+ .vane-stack[data-size="xs"] {
2604
+ --gap-unit: 2;
2605
+ --py-unit: 2;
2606
+ --br-unit: 3;
2659
2607
  }
2660
- }
2661
- .max-laptop\:\[--fs-unit\:22\] {
2662
- @media (width < 64rem) {
2663
- --fs-unit: 22;
2608
+ .vane-stack[data-size="sm"] {
2609
+ --gap-unit: 3;
2610
+ --py-unit: 3;
2611
+ --br-unit: 4;
2664
2612
  }
2665
- }
2666
- .max-laptop\:\[--fs-unit\:27\] {
2667
- @media (width < 64rem) {
2668
- --fs-unit: 27;
2613
+ .vane-stack[data-size="md"] {
2614
+ --gap-unit: 4;
2615
+ --py-unit: 4;
2616
+ --br-unit: 5;
2669
2617
  }
2670
- }
2671
- .max-laptop\:\[--fs-unit\:28\] {
2672
- @media (width < 64rem) {
2673
- --fs-unit: 28;
2618
+ .vane-stack[data-size="lg"] {
2619
+ --gap-unit: 5;
2620
+ --py-unit: 5;
2621
+ --br-unit: 6;
2674
2622
  }
2675
- }
2676
- .max-laptop\:\[--fs-unit\:33\] {
2677
- @media (width < 64rem) {
2678
- --fs-unit: 33;
2623
+ .vane-stack[data-size="xl"] {
2624
+ --gap-unit: 6;
2625
+ --py-unit: 6;
2626
+ --br-unit: 7;
2679
2627
  }
2680
- }
2681
- .max-laptop\:\[--gap-unit\:3\] {
2682
- @media (width < 64rem) {
2628
+ .vane-row {
2629
+ --gap-unit: 4;
2630
+ --br-unit: 5;
2631
+ }
2632
+ .vane-row[data-size="xs"] {
2633
+ --gap-unit: 2;
2634
+ --br-unit: 3;
2635
+ }
2636
+ .vane-row[data-size="sm"] {
2683
2637
  --gap-unit: 3;
2638
+ --br-unit: 4;
2684
2639
  }
2685
- }
2686
- .max-laptop\:\[--gap-unit\:5\] {
2687
- @media (width < 64rem) {
2640
+ .vane-row[data-size="md"] {
2641
+ --gap-unit: 4;
2642
+ --br-unit: 5;
2643
+ }
2644
+ .vane-row[data-size="lg"] {
2688
2645
  --gap-unit: 5;
2646
+ --br-unit: 6;
2689
2647
  }
2690
- }
2691
- .max-laptop\:\[--gap-unit\:6\] {
2692
- @media (width < 64rem) {
2648
+ .vane-row[data-size="xl"] {
2693
2649
  --gap-unit: 6;
2650
+ --br-unit: 7;
2694
2651
  }
2695
- }
2696
- .max-laptop\:\[--gap-unit\:8\] {
2697
- @media (width < 64rem) {
2698
- --gap-unit: 8;
2652
+ .vane-col {
2653
+ --gap-unit: 4;
2654
+ --br-unit: 5;
2699
2655
  }
2700
- }
2701
- .max-laptop\:\[--gap-unit\:10\] {
2702
- @media (width < 64rem) {
2703
- --gap-unit: 10;
2656
+ .vane-col[data-size="xs"] {
2657
+ --gap-unit: 2;
2658
+ --br-unit: 3;
2704
2659
  }
2705
- }
2706
- .max-laptop\:\[--py-unit\:3\] {
2707
- @media (width < 64rem) {
2708
- --py-unit: 3;
2660
+ .vane-col[data-size="sm"] {
2661
+ --gap-unit: 3;
2662
+ --br-unit: 4;
2709
2663
  }
2710
- }
2711
- .max-laptop\:\[--py-unit\:4\] {
2712
- @media (width < 64rem) {
2664
+ .vane-col[data-size="md"] {
2665
+ --gap-unit: 4;
2666
+ --br-unit: 5;
2667
+ }
2668
+ .vane-col[data-size="lg"] {
2669
+ --gap-unit: 5;
2670
+ --br-unit: 6;
2671
+ }
2672
+ .vane-col[data-size="xl"] {
2673
+ --gap-unit: 6;
2674
+ --br-unit: 7;
2675
+ }
2676
+ .vane-container {
2677
+ --py-unit: 8;
2678
+ --aspect-ratio: 2;
2679
+ --br-unit: 5;
2680
+ --gap-unit: 4;
2681
+ }
2682
+ .vane-container[data-size="xs"] {
2713
2683
  --py-unit: 4;
2684
+ --br-unit: 3;
2685
+ --gap-unit: 2;
2714
2686
  }
2715
- }
2716
- .max-laptop\:\[--py-unit\:6\] {
2717
- @media (width < 64rem) {
2687
+ .vane-container[data-size="sm"] {
2718
2688
  --py-unit: 6;
2689
+ --br-unit: 4;
2690
+ --gap-unit: 3;
2719
2691
  }
2720
- }
2721
- .max-laptop\:\[--py-unit\:8\] {
2722
- @media (width < 64rem) {
2692
+ .vane-container[data-size="md"] {
2723
2693
  --py-unit: 8;
2694
+ --br-unit: 5;
2695
+ --gap-unit: 4;
2724
2696
  }
2725
- }
2726
- .max-laptop\:\[--py-unit\:10\] {
2727
- @media (width < 64rem) {
2697
+ .vane-container[data-size="lg"] {
2728
2698
  --py-unit: 10;
2699
+ --br-unit: 6;
2700
+ --gap-unit: 5;
2729
2701
  }
2730
- }
2731
- .max-tablet\:hidden {
2732
- @media (width < 48rem) {
2733
- display: none;
2702
+ .vane-container[data-size="xl"] {
2703
+ --py-unit: 12;
2704
+ --br-unit: 7;
2705
+ --gap-unit: 6;
2734
2706
  }
2735
- }
2736
- .max-tablet\:flex-col {
2737
- @media (width < 48rem) {
2738
- flex-direction: column;
2707
+ .vane-grid {
2708
+ --gap-unit: 4;
2709
+ --br-unit: 5;
2739
2710
  }
2740
- }
2741
- .max-tablet\:\[--fs-unit\:7\] {
2742
- @media (width < 48rem) {
2743
- --fs-unit: 7;
2711
+ .vane-grid[data-size="xs"] {
2712
+ --gap-unit: 2;
2713
+ --br-unit: 3;
2744
2714
  }
2745
- }
2746
- .max-tablet\:\[--fs-unit\:8\] {
2747
- @media (width < 48rem) {
2748
- --fs-unit: 8;
2715
+ .vane-grid[data-size="sm"] {
2716
+ --gap-unit: 3;
2717
+ --br-unit: 4;
2749
2718
  }
2750
- }
2751
- .max-tablet\:\[--fs-unit\:9\] {
2752
- @media (width < 48rem) {
2753
- --fs-unit: 9;
2719
+ .vane-grid[data-size="md"] {
2720
+ --gap-unit: 4;
2721
+ --br-unit: 5;
2754
2722
  }
2755
- }
2756
- .max-tablet\:\[--fs-unit\:10\] {
2757
- @media (width < 48rem) {
2758
- --fs-unit: 10;
2723
+ .vane-grid[data-size="lg"] {
2724
+ --gap-unit: 5;
2725
+ --br-unit: 6;
2759
2726
  }
2760
- }
2761
- .max-tablet\:\[--fs-unit\:11\] {
2762
- @media (width < 48rem) {
2763
- --fs-unit: 11;
2727
+ .vane-grid[data-size="xl"] {
2728
+ --gap-unit: 6;
2729
+ --br-unit: 7;
2764
2730
  }
2765
- }
2766
- .max-tablet\:\[--fs-unit\:12\] {
2767
- @media (width < 48rem) {
2768
- --fs-unit: 12;
2731
+ .vane-divider {
2732
+ --py-unit: 4;
2769
2733
  }
2770
- }
2771
- .max-tablet\:\[--fs-unit\:13\] {
2772
- @media (width < 48rem) {
2773
- --fs-unit: 13;
2734
+ .vane-divider[data-size="xs"] {
2735
+ --py-unit: 2;
2774
2736
  }
2775
- }
2776
- .max-tablet\:\[--fs-unit\:14\] {
2777
- @media (width < 48rem) {
2778
- --fs-unit: 14;
2737
+ .vane-divider[data-size="sm"] {
2738
+ --py-unit: 3;
2779
2739
  }
2780
- }
2781
- .max-tablet\:\[--fs-unit\:16\] {
2782
- @media (width < 48rem) {
2783
- --fs-unit: 16;
2740
+ .vane-divider[data-size="md"] {
2741
+ --py-unit: 4;
2784
2742
  }
2785
- }
2786
- .max-tablet\:\[--fs-unit\:18\] {
2787
- @media (width < 48rem) {
2788
- --fs-unit: 18;
2743
+ .vane-divider[data-size="lg"] {
2744
+ --py-unit: 5;
2789
2745
  }
2790
- }
2791
- .max-tablet\:\[--fs-unit\:20\] {
2792
- @media (width < 48rem) {
2793
- --fs-unit: 20;
2746
+ .vane-divider[data-size="xl"] {
2747
+ --py-unit: 6;
2794
2748
  }
2795
- }
2796
- .max-tablet\:\[--fs-unit\:24\] {
2797
- @media (width < 48rem) {
2798
- --fs-unit: 24;
2749
+ .vane-img {
2750
+ --br-unit: 5;
2799
2751
  }
2800
- }
2801
- .max-tablet\:\[--fs-unit\:26\] {
2802
- @media (width < 48rem) {
2803
- --fs-unit: 26;
2752
+ .vane-img[data-size="xs"] {
2753
+ --br-unit: 3;
2804
2754
  }
2805
- }
2806
- .max-tablet\:\[--fs-unit\:30\] {
2807
- @media (width < 48rem) {
2808
- --fs-unit: 30;
2755
+ .vane-img[data-size="sm"] {
2756
+ --br-unit: 4;
2809
2757
  }
2810
- }
2811
- .max-tablet\:\[--gap-unit\:2\] {
2812
- @media (width < 48rem) {
2813
- --gap-unit: 2;
2758
+ .vane-img[data-size="md"] {
2759
+ --br-unit: 5;
2814
2760
  }
2815
- }
2816
- .max-tablet\:\[--gap-unit\:4\] {
2817
- @media (width < 48rem) {
2818
- --gap-unit: 4;
2761
+ .vane-img[data-size="lg"] {
2762
+ --br-unit: 6;
2819
2763
  }
2820
- }
2821
- .max-tablet\:\[--gap-unit\:6\] {
2822
- @media (width < 48rem) {
2823
- --gap-unit: 6;
2764
+ .vane-img[data-size="xl"] {
2765
+ --br-unit: 7;
2824
2766
  }
2825
- }
2826
- .max-tablet\:\[--gap-unit\:8\] {
2827
- @media (width < 48rem) {
2828
- --gap-unit: 8;
2767
+ .vane-list {
2768
+ --lh: 1.6;
2769
+ --py-unit: 3;
2829
2770
  }
2830
- }
2831
- .max-tablet\:\[--py-unit\:2\] {
2832
- @media (width < 48rem) {
2771
+ .vane-list[data-size="xs"] {
2772
+ --fs-unit: 6;
2773
+ --py-unit: 1;
2774
+ }
2775
+ .vane-list[data-size="sm"] {
2776
+ --fs-unit: 7;
2833
2777
  --py-unit: 2;
2834
2778
  }
2835
- }
2836
- .max-tablet\:\[--py-unit\:4\] {
2837
- @media (width < 48rem) {
2779
+ .vane-list[data-size="md"] {
2780
+ --fs-unit: 8;
2781
+ --py-unit: 3;
2782
+ }
2783
+ .vane-list[data-size="lg"] {
2784
+ --fs-unit: 9;
2838
2785
  --py-unit: 4;
2839
2786
  }
2840
- }
2841
- .max-mobile\:hidden {
2842
- @media (width < 40rem) {
2843
- display: none;
2787
+ .vane-list[data-size="xl"] {
2788
+ --fs-unit: 10;
2789
+ --py-unit: 5;
2844
2790
  }
2845
- }
2846
- .max-mobile\:flex-col {
2847
- @media (width < 40rem) {
2848
- flex-direction: column;
2791
+ .vane-text {
2792
+ --lh: 1.6;
2849
2793
  }
2850
- }
2851
- .sm\:grid-cols-2 {
2852
- @media (width >= 40rem) {
2853
- grid-template-columns: repeat(2, minmax(0, 1fr));
2794
+ .vane-text[data-size="xs"] {
2795
+ --fs-unit: 6;
2854
2796
  }
2855
- }
2856
- .md\:grid-cols-2 {
2857
- @media (width >= 48rem) {
2858
- grid-template-columns: repeat(2, minmax(0, 1fr));
2797
+ .vane-text[data-size="sm"] {
2798
+ --fs-unit: 7;
2859
2799
  }
2860
- }
2861
- .md\:grid-cols-3 {
2862
- @media (width >= 48rem) {
2863
- grid-template-columns: repeat(3, minmax(0, 1fr));
2800
+ .vane-text[data-size="md"] {
2801
+ --fs-unit: 8;
2864
2802
  }
2865
- }
2866
- .md\:grid-cols-4 {
2867
- @media (width >= 48rem) {
2868
- grid-template-columns: repeat(4, minmax(0, 1fr));
2803
+ .vane-text[data-size="lg"] {
2804
+ --fs-unit: 9;
2869
2805
  }
2870
- }
2871
- .lg\:grid-cols-4 {
2872
- @media (width >= 64rem) {
2873
- grid-template-columns: repeat(4, minmax(0, 1fr));
2806
+ .vane-text[data-size="xl"] {
2807
+ --fs-unit: 10;
2874
2808
  }
2875
- }
2876
- .lg\:grid-cols-5 {
2877
- @media (width >= 64rem) {
2878
- grid-template-columns: repeat(5, minmax(0, 1fr));
2809
+ .vane-link {
2810
+ --lh: 1.6;
2879
2811
  }
2880
- }
2881
- .lg\:grid-cols-6 {
2882
- @media (width >= 64rem) {
2883
- grid-template-columns: repeat(6, minmax(0, 1fr));
2812
+ .vane-link[data-size="xs"] {
2813
+ --fs-unit: 6;
2884
2814
  }
2885
- }
2886
- }
2887
- @layer theme {
2888
- @layer base {
2889
- :where(*) {
2890
- --gap: calc(var(--gap-unit) * var(--layout-spacing));
2891
- --ui-gap: calc(var(--gap-unit) * var(--ui-spacing));
2892
- --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--layout-spacing));
2893
- --ui-px: calc(var(--aspect-ratio) * var(--py-unit) * var(--ui-spacing));
2894
- --py: calc(var(--py-unit) * var(--layout-spacing));
2895
- --ui-py: calc(var(--py-unit) * var(--ui-spacing));
2896
- --ui-size: calc(var(--size-unit) * var(--ui-spacing));
2897
- --br: calc(var(--br-unit) * var(--br-base));
2898
- --ui-br: calc(var(--br-unit) * var(--ui-br-base));
2899
- --fs: calc(var(--fs-unit) * var(--fs-base));
2815
+ .vane-link[data-size="sm"] {
2816
+ --fs-unit: 7;
2817
+ }
2818
+ .vane-link[data-size="md"] {
2819
+ --fs-unit: 8;
2820
+ }
2821
+ .vane-link[data-size="lg"] {
2822
+ --fs-unit: 9;
2823
+ }
2824
+ .vane-link[data-size="xl"] {
2825
+ --fs-unit: 10;
2826
+ }
2827
+ .vane-list-item {
2828
+ --lh: 1.6;
2829
+ }
2830
+ .vane-list-item[data-size="xs"] {
2831
+ --fs-unit: 6;
2832
+ }
2833
+ .vane-list-item[data-size="sm"] {
2834
+ --fs-unit: 7;
2835
+ }
2836
+ .vane-list-item[data-size="md"] {
2837
+ --fs-unit: 8;
2838
+ }
2839
+ .vane-list-item[data-size="lg"] {
2840
+ --fs-unit: 9;
2841
+ }
2842
+ .vane-list-item[data-size="xl"] {
2843
+ --fs-unit: 10;
2844
+ }
2845
+ .vane-section {
2846
+ --lh: 1.6;
2847
+ --py-unit-desktop: 8;
2848
+ --py-unit-tablet: 6;
2849
+ --py-unit-mobile: 4;
2850
+ --gap-unit-desktop: 8;
2851
+ --gap-unit-tablet: 6;
2852
+ --gap-unit-mobile: 4;
2853
+ }
2854
+ .vane-section[data-size="xs"] {
2855
+ --py-unit-desktop: 4;
2856
+ --py-unit-tablet: 3;
2857
+ --py-unit-mobile: 2;
2858
+ --gap-unit-desktop: 4;
2859
+ --gap-unit-tablet: 3;
2860
+ --gap-unit-mobile: 2;
2861
+ }
2862
+ .vane-section[data-size="sm"] {
2863
+ --py-unit-desktop: 8;
2864
+ --py-unit-tablet: 4;
2865
+ --py-unit-mobile: 2;
2866
+ --gap-unit-desktop: 6;
2867
+ --gap-unit-tablet: 5;
2868
+ --gap-unit-mobile: 4;
2869
+ }
2870
+ .vane-section[data-size="md"] {
2871
+ --py-unit-desktop: 12;
2872
+ --py-unit-tablet: 6;
2873
+ --py-unit-mobile: 2;
2874
+ --gap-unit-desktop: 8;
2875
+ --gap-unit-tablet: 6;
2876
+ --gap-unit-mobile: 4;
2877
+ }
2878
+ .vane-section[data-size="lg"] {
2879
+ --py-unit-desktop: 16;
2880
+ --py-unit-tablet: 8;
2881
+ --py-unit-mobile: 2;
2882
+ --gap-unit-desktop: 10;
2883
+ --gap-unit-tablet: 8;
2884
+ --gap-unit-mobile: 6;
2885
+ }
2886
+ .vane-section[data-size="xl"] {
2887
+ --py-unit-desktop: 20;
2888
+ --py-unit-tablet: 10;
2889
+ --py-unit-mobile: 4;
2890
+ --gap-unit-desktop: 12;
2891
+ --gap-unit-tablet: 10;
2892
+ --gap-unit-mobile: 8;
2893
+ }
2894
+ .vane-title {
2895
+ --lh: 1.3;
2896
+ --fs-unit-desktop: 12;
2897
+ --fs-unit-tablet: 11;
2898
+ --fs-unit-mobile: 10;
2899
+ }
2900
+ .vane-title[data-size="xs"] {
2901
+ --fs-unit-desktop: 9;
2902
+ --fs-unit-tablet: 8;
2903
+ --fs-unit-mobile: 7;
2904
+ --lh: 1.556;
2905
+ }
2906
+ .vane-title[data-size="sm"] {
2907
+ --fs-unit-desktop: 10;
2908
+ --fs-unit-tablet: 9;
2909
+ --fs-unit-mobile: 8;
2910
+ --lh: 1.4;
2911
+ }
2912
+ .vane-title[data-size="md"] {
2913
+ --fs-unit-desktop: 12;
2914
+ --fs-unit-tablet: 11;
2915
+ --fs-unit-mobile: 10;
2916
+ --lh: 1.333;
2917
+ }
2918
+ .vane-title[data-size="lg"] {
2919
+ --fs-unit-desktop: 15;
2920
+ --fs-unit-tablet: 14;
2921
+ --fs-unit-mobile: 13;
2922
+ --lh: 1.2;
2923
+ }
2924
+ .vane-title[data-size="xl"] {
2925
+ --fs-unit-desktop: 18;
2926
+ --fs-unit-tablet: 17;
2927
+ --fs-unit-mobile: 16;
2928
+ --lh: 1.111;
2929
+ }
2930
+ .vane-section-title {
2931
+ --lh: 1.2;
2932
+ --fs-unit-desktop: 18;
2933
+ --fs-unit-tablet: 16;
2934
+ --fs-unit-mobile: 14;
2935
+ }
2936
+ .vane-section-title[data-size="xs"] {
2937
+ --fs-unit-desktop: 12;
2938
+ --fs-unit-tablet: 10;
2939
+ --fs-unit-mobile: 8;
2940
+ --lh: 1.333;
2941
+ }
2942
+ .vane-section-title[data-size="sm"] {
2943
+ --fs-unit-desktop: 15;
2944
+ --fs-unit-tablet: 13;
2945
+ --fs-unit-mobile: 11;
2946
+ --lh: 1.2;
2947
+ }
2948
+ .vane-section-title[data-size="md"] {
2949
+ --fs-unit-desktop: 18;
2950
+ --fs-unit-tablet: 16;
2951
+ --fs-unit-mobile: 14;
2952
+ --lh: 1.111;
2953
+ }
2954
+ .vane-section-title[data-size="lg"] {
2955
+ --fs-unit-desktop: 24;
2956
+ --fs-unit-tablet: 22;
2957
+ --fs-unit-mobile: 20;
2958
+ --lh: 1;
2959
+ }
2960
+ .vane-section-title[data-size="xl"] {
2961
+ --fs-unit-desktop: 30;
2962
+ --fs-unit-tablet: 28;
2963
+ --fs-unit-mobile: 26;
2964
+ --lh: 1;
2965
+ }
2966
+ .vane-page-title {
2967
+ --lh: 1.1;
2968
+ --fs-unit-desktop: 24;
2969
+ --fs-unit-tablet: 21;
2970
+ --fs-unit-mobile: 18;
2971
+ }
2972
+ .vane-page-title[data-size="xs"] {
2973
+ --fs-unit-desktop: 15;
2974
+ --fs-unit-tablet: 12;
2975
+ --fs-unit-mobile: 9;
2976
+ --lh: 1.2;
2977
+ }
2978
+ .vane-page-title[data-size="sm"] {
2979
+ --fs-unit-desktop: 18;
2980
+ --fs-unit-tablet: 15;
2981
+ --fs-unit-mobile: 12;
2982
+ --lh: 1.111;
2983
+ }
2984
+ .vane-page-title[data-size="md"] {
2985
+ --fs-unit-desktop: 24;
2986
+ --fs-unit-tablet: 21;
2987
+ --fs-unit-mobile: 18;
2988
+ --lh: 1;
2989
+ }
2990
+ .vane-page-title[data-size="lg"] {
2991
+ --fs-unit-desktop: 30;
2992
+ --fs-unit-tablet: 27;
2993
+ --fs-unit-mobile: 24;
2994
+ --lh: 1;
2995
+ }
2996
+ .vane-page-title[data-size="xl"] {
2997
+ --fs-unit-desktop: 36;
2998
+ --fs-unit-tablet: 33;
2999
+ --fs-unit-mobile: 30;
3000
+ --lh: 1;
3001
+ }
3002
+ [data-variant="outline"][data-appearance="primary"] {
3003
+ --text-color: var(--color-text-primary);
3004
+ --bg-color: var(--color-bg-primary);
3005
+ --bg-hover-color: var(--color-bg-hover-primary);
3006
+ --bg-active-color: var(--color-bg-active-primary);
3007
+ --border-color: var(--color-border-primary);
3008
+ --ring-color: var(--color-border-primary);
3009
+ --accent-color: var(--color-bg-primary);
3010
+ --checked-bg-color: var(--color-bg-primary);
3011
+ }
3012
+ [data-variant="outline"][data-appearance="brand"] {
3013
+ --text-color: var(--color-text-brand);
3014
+ --bg-color: var(--color-bg-brand);
3015
+ --bg-hover-color: var(--color-bg-hover-brand);
3016
+ --bg-active-color: var(--color-bg-active-brand);
3017
+ --border-color: var(--color-border-brand);
3018
+ --ring-color: var(--color-border-brand);
3019
+ --accent-color: var(--color-bg-brand);
3020
+ --checked-bg-color: var(--color-bg-brand);
3021
+ }
3022
+ [data-variant="outline"][data-appearance="secondary"] {
3023
+ --text-color: var(--color-text-secondary);
3024
+ --bg-color: var(--color-bg-secondary);
3025
+ --bg-hover-color: var(--color-bg-hover-secondary);
3026
+ --bg-active-color: var(--color-bg-active-secondary);
3027
+ --border-color: var(--color-border-secondary);
3028
+ --ring-color: var(--color-border-secondary);
3029
+ --accent-color: var(--color-bg-secondary);
3030
+ --checked-bg-color: var(--color-bg-secondary);
3031
+ }
3032
+ [data-variant="outline"][data-appearance="tertiary"] {
3033
+ --text-color: var(--color-text-tertiary);
3034
+ --bg-color: var(--color-bg-tertiary);
3035
+ --bg-hover-color: var(--color-bg-hover-tertiary);
3036
+ --bg-active-color: var(--color-bg-active-tertiary);
3037
+ --border-color: var(--color-border-tertiary);
3038
+ --ring-color: var(--color-border-tertiary);
3039
+ --accent-color: var(--color-bg-tertiary);
3040
+ --checked-bg-color: var(--color-bg-tertiary);
3041
+ }
3042
+ [data-variant="outline"][data-appearance="accent"] {
3043
+ --text-color: var(--color-text-accent);
3044
+ --bg-color: var(--color-bg-accent);
3045
+ --bg-hover-color: var(--color-bg-hover-accent);
3046
+ --bg-active-color: var(--color-bg-active-accent);
3047
+ --border-color: var(--color-border-accent);
3048
+ --ring-color: var(--color-border-accent);
3049
+ --accent-color: var(--color-bg-accent);
3050
+ --checked-bg-color: var(--color-bg-accent);
3051
+ }
3052
+ [data-variant="outline"][data-appearance="success"] {
3053
+ --text-color: var(--color-text-success);
3054
+ --bg-color: var(--color-bg-success);
3055
+ --bg-hover-color: var(--color-bg-hover-success);
3056
+ --bg-active-color: var(--color-bg-active-success);
3057
+ --border-color: var(--color-border-success);
3058
+ --ring-color: var(--color-border-success);
3059
+ --accent-color: var(--color-bg-success);
3060
+ --checked-bg-color: var(--color-bg-success);
3061
+ }
3062
+ [data-variant="outline"][data-appearance="danger"] {
3063
+ --text-color: var(--color-text-danger);
3064
+ --bg-color: var(--color-bg-danger);
3065
+ --bg-hover-color: var(--color-bg-hover-danger);
3066
+ --bg-active-color: var(--color-bg-active-danger);
3067
+ --border-color: var(--color-border-danger);
3068
+ --ring-color: var(--color-border-danger);
3069
+ --accent-color: var(--color-bg-danger);
3070
+ --checked-bg-color: var(--color-bg-danger);
3071
+ }
3072
+ [data-variant="outline"][data-appearance="warning"] {
3073
+ --text-color: var(--color-text-warning);
3074
+ --bg-color: var(--color-bg-warning);
3075
+ --bg-hover-color: var(--color-bg-hover-warning);
3076
+ --bg-active-color: var(--color-bg-active-warning);
3077
+ --border-color: var(--color-border-warning);
3078
+ --ring-color: var(--color-border-warning);
3079
+ --accent-color: var(--color-bg-warning);
3080
+ --checked-bg-color: var(--color-bg-warning);
3081
+ }
3082
+ [data-variant="outline"][data-appearance="info"] {
3083
+ --text-color: var(--color-text-info);
3084
+ --bg-color: var(--color-bg-info);
3085
+ --bg-hover-color: var(--color-bg-hover-info);
3086
+ --bg-active-color: var(--color-bg-active-info);
3087
+ --border-color: var(--color-border-info);
3088
+ --ring-color: var(--color-border-info);
3089
+ --accent-color: var(--color-bg-info);
3090
+ --checked-bg-color: var(--color-bg-info);
3091
+ }
3092
+ [data-variant="outline"][data-appearance="link"] {
3093
+ --text-color: var(--color-text-link);
3094
+ --bg-color: var(--color-bg-primary);
3095
+ --bg-hover-color: var(--color-bg-hover-primary);
3096
+ --bg-active-color: var(--color-bg-active-primary);
3097
+ --border-color: var(--color-border-brand);
3098
+ --ring-color: var(--color-border-brand);
3099
+ --accent-color: var(--color-bg-primary);
3100
+ --checked-bg-color: var(--color-bg-primary);
3101
+ }
3102
+ [data-variant="filled"][data-appearance="primary"] {
3103
+ --text-color: var(--color-text-filled-primary);
3104
+ --bg-color: var(--color-bg-filled-primary);
3105
+ --bg-hover-color: var(--color-bg-filled-hover-primary);
3106
+ --bg-active-color: var(--color-bg-filled-active-primary);
3107
+ --border-color: var(--color-border-filled-primary);
3108
+ --ring-color: var(--color-border-filled-primary);
3109
+ --accent-color: var(--color-bg-filled-primary);
3110
+ --checked-bg-color: var(--color-bg-filled-primary);
3111
+ }
3112
+ [data-variant="filled"][data-appearance="brand"] {
3113
+ --text-color: var(--color-text-filled-brand);
3114
+ --bg-color: var(--color-bg-filled-brand);
3115
+ --bg-hover-color: var(--color-bg-filled-hover-brand);
3116
+ --bg-active-color: var(--color-bg-filled-active-brand);
3117
+ --border-color: var(--color-border-filled-brand);
3118
+ --ring-color: var(--color-border-filled-brand);
3119
+ --accent-color: var(--color-bg-filled-brand);
3120
+ --checked-bg-color: var(--color-bg-filled-brand);
3121
+ }
3122
+ [data-variant="filled"][data-appearance="secondary"] {
3123
+ --text-color: var(--color-text-filled-secondary);
3124
+ --bg-color: var(--color-bg-filled-secondary);
3125
+ --bg-hover-color: var(--color-bg-filled-hover-secondary);
3126
+ --bg-active-color: var(--color-bg-filled-active-secondary);
3127
+ --border-color: var(--color-border-filled-secondary);
3128
+ --ring-color: var(--color-border-filled-secondary);
3129
+ --accent-color: var(--color-bg-filled-secondary);
3130
+ --checked-bg-color: var(--color-bg-filled-secondary);
3131
+ }
3132
+ [data-variant="filled"][data-appearance="tertiary"] {
3133
+ --text-color: var(--color-text-filled-tertiary);
3134
+ --bg-color: var(--color-bg-filled-tertiary);
3135
+ --bg-hover-color: var(--color-bg-filled-hover-tertiary);
3136
+ --bg-active-color: var(--color-bg-filled-active-tertiary);
3137
+ --border-color: var(--color-border-filled-tertiary);
3138
+ --ring-color: var(--color-border-filled-tertiary);
3139
+ --accent-color: var(--color-bg-filled-tertiary);
3140
+ --checked-bg-color: var(--color-bg-filled-tertiary);
3141
+ }
3142
+ [data-variant="filled"][data-appearance="accent"] {
3143
+ --text-color: var(--color-text-filled-accent);
3144
+ --bg-color: var(--color-bg-filled-accent);
3145
+ --bg-hover-color: var(--color-bg-filled-hover-accent);
3146
+ --bg-active-color: var(--color-bg-filled-active-accent);
3147
+ --border-color: var(--color-border-filled-accent);
3148
+ --ring-color: var(--color-border-filled-accent);
3149
+ --accent-color: var(--color-bg-filled-accent);
3150
+ --checked-bg-color: var(--color-bg-filled-accent);
3151
+ }
3152
+ [data-variant="filled"][data-appearance="success"] {
3153
+ --text-color: var(--color-text-filled-success);
3154
+ --bg-color: var(--color-bg-filled-success);
3155
+ --bg-hover-color: var(--color-bg-filled-hover-success);
3156
+ --bg-active-color: var(--color-bg-filled-active-success);
3157
+ --border-color: var(--color-border-filled-success);
3158
+ --ring-color: var(--color-border-filled-success);
3159
+ --accent-color: var(--color-bg-filled-success);
3160
+ --checked-bg-color: var(--color-bg-filled-success);
3161
+ }
3162
+ [data-variant="filled"][data-appearance="danger"] {
3163
+ --text-color: var(--color-text-filled-danger);
3164
+ --bg-color: var(--color-bg-filled-danger);
3165
+ --bg-hover-color: var(--color-bg-filled-hover-danger);
3166
+ --bg-active-color: var(--color-bg-filled-active-danger);
3167
+ --border-color: var(--color-border-filled-danger);
3168
+ --ring-color: var(--color-border-filled-danger);
3169
+ --accent-color: var(--color-bg-filled-danger);
3170
+ --checked-bg-color: var(--color-bg-filled-danger);
3171
+ }
3172
+ [data-variant="filled"][data-appearance="warning"] {
3173
+ --text-color: var(--color-text-filled-warning);
3174
+ --bg-color: var(--color-bg-filled-warning);
3175
+ --bg-hover-color: var(--color-bg-filled-hover-warning);
3176
+ --bg-active-color: var(--color-bg-filled-active-warning);
3177
+ --border-color: var(--color-border-filled-warning);
3178
+ --ring-color: var(--color-border-filled-warning);
3179
+ --accent-color: var(--color-bg-filled-warning);
3180
+ --checked-bg-color: var(--color-bg-filled-warning);
3181
+ }
3182
+ [data-variant="filled"][data-appearance="info"] {
3183
+ --text-color: var(--color-text-filled-info);
3184
+ --bg-color: var(--color-bg-filled-info);
3185
+ --bg-hover-color: var(--color-bg-filled-hover-info);
3186
+ --bg-active-color: var(--color-bg-filled-active-info);
3187
+ --border-color: var(--color-border-filled-info);
3188
+ --ring-color: var(--color-border-filled-info);
3189
+ --accent-color: var(--color-bg-filled-info);
3190
+ --checked-bg-color: var(--color-bg-filled-info);
3191
+ }
3192
+ [data-variant="filled"][data-appearance="link"] {
3193
+ --text-color: var(--color-text-filled-link);
3194
+ --bg-color: var(--color-bg-filled-brand);
3195
+ --bg-hover-color: var(--color-bg-filled-hover-brand);
3196
+ --bg-active-color: var(--color-bg-filled-active-brand);
3197
+ --border-color: var(--color-border-filled-brand);
3198
+ --ring-color: var(--color-border-filled-brand);
3199
+ --accent-color: var(--color-bg-filled-brand);
3200
+ --checked-bg-color: var(--color-bg-filled-brand);
3201
+ }
3202
+ [data-transparent="true"] {
3203
+ --bg-color: transparent;
3204
+ --bg-hover-color: transparent;
3205
+ --bg-active-color: transparent;
3206
+ --accent-color: transparent;
3207
+ --checked-bg-color: transparent;
3208
+ }
3209
+ .vane-text[data-transparent="true"], .vane-link[data-transparent="true"], .vane-title[data-transparent="true"], .vane-section-title[data-transparent="true"], .vane-page-title[data-transparent="true"], .vane-label[data-transparent="true"], .vane-list-item[data-transparent="true"] {
3210
+ --text-color: transparent;
2900
3211
  }
2901
3212
  }
2902
3213
  }