@vaneui/md 0.3.1-alpha.20251228133323.630b220 → 0.3.1-alpha.20260104125946.4a6b7b2

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 +465 -1058
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +465 -1058
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles/index.css +1499 -1230
  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,458 @@
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
+
496
+ /* -----------------------------------------
497
+ FILLED VARIANT
498
+ ----------------------------------------- */
499
+ [data-variant="filled"][data-appearance="primary"] {
500
+ --text-color: var(--color-text-filled-primary);
501
+ --bg-color: var(--color-bg-filled-primary);
502
+ --bg-hover-color: var(--color-bg-filled-hover-primary);
503
+ --bg-active-color: var(--color-bg-filled-active-primary);
504
+ --border-color: var(--color-border-filled-primary);
505
+ --ring-color: var(--color-border-filled-primary);
506
+ --accent-color: var(--color-bg-filled-primary);
507
+ --checked-bg-color: var(--color-bg-filled-primary);
508
+ }
509
+ [data-variant="filled"][data-appearance="brand"] {
510
+ --text-color: var(--color-text-filled-brand);
511
+ --bg-color: var(--color-bg-filled-brand);
512
+ --bg-hover-color: var(--color-bg-filled-hover-brand);
513
+ --bg-active-color: var(--color-bg-filled-active-brand);
514
+ --border-color: var(--color-border-filled-brand);
515
+ --ring-color: var(--color-border-filled-brand);
516
+ --accent-color: var(--color-bg-filled-brand);
517
+ --checked-bg-color: var(--color-bg-filled-brand);
518
+ }
519
+ [data-variant="filled"][data-appearance="secondary"] {
520
+ --text-color: var(--color-text-filled-secondary);
521
+ --bg-color: var(--color-bg-filled-secondary);
522
+ --bg-hover-color: var(--color-bg-filled-hover-secondary);
523
+ --bg-active-color: var(--color-bg-filled-active-secondary);
524
+ --border-color: var(--color-border-filled-secondary);
525
+ --ring-color: var(--color-border-filled-secondary);
526
+ --accent-color: var(--color-bg-filled-secondary);
527
+ --checked-bg-color: var(--color-bg-filled-secondary);
528
+ }
529
+ [data-variant="filled"][data-appearance="tertiary"] {
530
+ --text-color: var(--color-text-filled-tertiary);
531
+ --bg-color: var(--color-bg-filled-tertiary);
532
+ --bg-hover-color: var(--color-bg-filled-hover-tertiary);
533
+ --bg-active-color: var(--color-bg-filled-active-tertiary);
534
+ --border-color: var(--color-border-filled-tertiary);
535
+ --ring-color: var(--color-border-filled-tertiary);
536
+ --accent-color: var(--color-bg-filled-tertiary);
537
+ --checked-bg-color: var(--color-bg-filled-tertiary);
538
+ }
539
+ [data-variant="filled"][data-appearance="accent"] {
540
+ --text-color: var(--color-text-filled-accent);
541
+ --bg-color: var(--color-bg-filled-accent);
542
+ --bg-hover-color: var(--color-bg-filled-hover-accent);
543
+ --bg-active-color: var(--color-bg-filled-active-accent);
544
+ --border-color: var(--color-border-filled-accent);
545
+ --ring-color: var(--color-border-filled-accent);
546
+ --accent-color: var(--color-bg-filled-accent);
547
+ --checked-bg-color: var(--color-bg-filled-accent);
548
+ }
549
+ [data-variant="filled"][data-appearance="success"] {
550
+ --text-color: var(--color-text-filled-success);
551
+ --bg-color: var(--color-bg-filled-success);
552
+ --bg-hover-color: var(--color-bg-filled-hover-success);
553
+ --bg-active-color: var(--color-bg-filled-active-success);
554
+ --border-color: var(--color-border-filled-success);
555
+ --ring-color: var(--color-border-filled-success);
556
+ --accent-color: var(--color-bg-filled-success);
557
+ --checked-bg-color: var(--color-bg-filled-success);
558
+ }
559
+ [data-variant="filled"][data-appearance="danger"] {
560
+ --text-color: var(--color-text-filled-danger);
561
+ --bg-color: var(--color-bg-filled-danger);
562
+ --bg-hover-color: var(--color-bg-filled-hover-danger);
563
+ --bg-active-color: var(--color-bg-filled-active-danger);
564
+ --border-color: var(--color-border-filled-danger);
565
+ --ring-color: var(--color-border-filled-danger);
566
+ --accent-color: var(--color-bg-filled-danger);
567
+ --checked-bg-color: var(--color-bg-filled-danger);
568
+ }
569
+ [data-variant="filled"][data-appearance="warning"] {
570
+ --text-color: var(--color-text-filled-warning);
571
+ --bg-color: var(--color-bg-filled-warning);
572
+ --bg-hover-color: var(--color-bg-filled-hover-warning);
573
+ --bg-active-color: var(--color-bg-filled-active-warning);
574
+ --border-color: var(--color-border-filled-warning);
575
+ --ring-color: var(--color-border-filled-warning);
576
+ --accent-color: var(--color-bg-filled-warning);
577
+ --checked-bg-color: var(--color-bg-filled-warning);
578
+ }
579
+ [data-variant="filled"][data-appearance="info"] {
580
+ --text-color: var(--color-text-filled-info);
581
+ --bg-color: var(--color-bg-filled-info);
582
+ --bg-hover-color: var(--color-bg-filled-hover-info);
583
+ --bg-active-color: var(--color-bg-filled-active-info);
584
+ --border-color: var(--color-border-filled-info);
585
+ --ring-color: var(--color-border-filled-info);
586
+ --accent-color: var(--color-bg-filled-info);
587
+ --checked-bg-color: var(--color-bg-filled-info);
588
+ }
589
+
590
+ /* -----------------------------------------
591
+ TRANSPARENT STATE
592
+ Overrides colors when data-transparent is set
593
+ ----------------------------------------- */
594
+ [data-transparent="true"] {
595
+ --bg-color: transparent;
596
+ --bg-hover-color: transparent;
597
+ --bg-active-color: transparent;
598
+ --accent-color: transparent;
599
+ --checked-bg-color: transparent;
600
+ }
601
+
602
+ /* Typography components: transparent affects text color */
603
+ .vane-text[data-transparent="true"],
604
+ .vane-link[data-transparent="true"],
605
+ .vane-title[data-transparent="true"],
606
+ .vane-section-title[data-transparent="true"],
607
+ .vane-page-title[data-transparent="true"],
608
+ .vane-label[data-transparent="true"],
609
+ .vane-list-item[data-transparent="true"] {
610
+ --text-color: transparent;
179
611
  }
612
+
180
613
  }
181
614
  /*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
182
615
  @layer theme {
@@ -205,6 +638,7 @@
205
638
  --color-yellow-50: oklch(98.7% 0.026 102.212);
206
639
  --color-yellow-100: oklch(97.3% 0.071 103.193);
207
640
  --color-yellow-800: oklch(47.6% 0.114 61.907);
641
+ --color-lime-400: oklch(84.1% 0.238 128.85);
208
642
  --color-green-50: oklch(98.2% 0.018 155.826);
209
643
  --color-green-500: oklch(72.3% 0.219 149.579);
210
644
  --color-green-600: oklch(62.7% 0.194 149.214);
@@ -213,10 +647,14 @@
213
647
  --color-emerald-100: oklch(95% 0.052 163.051);
214
648
  --color-emerald-200: oklch(90.5% 0.093 164.15);
215
649
  --color-emerald-300: oklch(84.5% 0.143 164.978);
650
+ --color-emerald-400: oklch(76.5% 0.177 163.223);
216
651
  --color-emerald-500: oklch(69.6% 0.17 162.48);
217
652
  --color-emerald-600: oklch(59.6% 0.145 163.225);
218
653
  --color-emerald-700: oklch(50.8% 0.118 165.612);
219
654
  --color-emerald-800: oklch(43.2% 0.095 166.913);
655
+ --color-teal-500: oklch(70.4% 0.14 182.503);
656
+ --color-teal-600: oklch(60% 0.118 184.704);
657
+ --color-teal-700: oklch(51.1% 0.096 186.391);
220
658
  --color-cyan-50: oklch(98.4% 0.019 200.873);
221
659
  --color-cyan-100: oklch(95.6% 0.045 203.388);
222
660
  --color-cyan-200: oklch(91.7% 0.08 205.041);
@@ -224,6 +662,7 @@
224
662
  --color-cyan-600: oklch(60.9% 0.126 221.723);
225
663
  --color-cyan-700: oklch(52% 0.105 223.128);
226
664
  --color-cyan-800: oklch(45% 0.085 224.283);
665
+ --color-sky-400: oklch(74.6% 0.16 232.661);
227
666
  --color-blue-50: oklch(97% 0.014 254.604);
228
667
  --color-blue-100: oklch(93.2% 0.032 255.585);
229
668
  --color-blue-200: oklch(88.2% 0.059 254.128);
@@ -235,33 +674,43 @@
235
674
  --color-blue-900: oklch(37.9% 0.146 265.522);
236
675
  --color-indigo-50: oklch(96.2% 0.018 272.314);
237
676
  --color-indigo-100: oklch(93% 0.034 272.788);
677
+ --color-indigo-300: oklch(78.5% 0.115 274.713);
238
678
  --color-indigo-400: oklch(67.3% 0.182 276.935);
239
679
  --color-indigo-500: oklch(58.5% 0.233 277.117);
680
+ --color-indigo-600: oklch(51.1% 0.262 276.966);
240
681
  --color-indigo-700: oklch(45.7% 0.24 277.023);
241
682
  --color-violet-400: oklch(70.2% 0.183 293.541);
683
+ --color-violet-500: oklch(60.6% 0.25 292.717);
242
684
  --color-violet-600: oklch(54.1% 0.281 293.009);
685
+ --color-violet-700: oklch(49.1% 0.27 292.581);
243
686
  --color-purple-100: oklch(94.6% 0.033 307.174);
687
+ --color-purple-500: oklch(62.7% 0.265 303.9);
244
688
  --color-purple-600: oklch(55.8% 0.288 302.321);
245
689
  --color-purple-700: oklch(49.6% 0.265 301.924);
690
+ --color-fuchsia-500: oklch(66.7% 0.295 322.15);
691
+ --color-pink-500: oklch(65.6% 0.241 354.308);
246
692
  --color-pink-600: oklch(59.2% 0.249 0.584);
693
+ --color-pink-700: oklch(52.5% 0.223 3.958);
247
694
  --color-rose-50: oklch(96.9% 0.015 12.422);
248
695
  --color-rose-100: oklch(94.1% 0.03 12.58);
249
696
  --color-rose-200: oklch(89.2% 0.058 10.001);
250
697
  --color-rose-300: oklch(81% 0.117 11.638);
698
+ --color-rose-500: oklch(64.5% 0.246 16.439);
251
699
  --color-rose-600: oklch(58.6% 0.253 17.585);
252
700
  --color-rose-700: oklch(51.4% 0.222 16.935);
253
701
  --color-rose-800: oklch(45.5% 0.188 13.697);
702
+ --color-slate-800: oklch(27.9% 0.041 260.031);
254
703
  --color-gray-50: oklch(98.5% 0.002 247.839);
255
704
  --color-gray-100: oklch(96.7% 0.003 264.542);
256
705
  --color-gray-200: oklch(92.8% 0.006 264.531);
257
706
  --color-gray-300: oklch(87.2% 0.01 258.338);
258
- --color-gray-400: oklch(70.7% 0.022 261.325);
259
707
  --color-gray-500: oklch(55.1% 0.027 264.364);
260
708
  --color-gray-600: oklch(44.6% 0.03 256.802);
261
709
  --color-gray-700: oklch(37.3% 0.034 259.733);
262
710
  --color-gray-800: oklch(27.8% 0.033 256.848);
263
711
  --color-gray-900: oklch(21% 0.034 264.665);
264
712
  --color-gray-950: oklch(13% 0.028 261.692);
713
+ --color-stone-100: oklch(97% 0.001 106.424);
265
714
  --color-white: #fff;
266
715
  --spacing: 0.25rem;
267
716
  --container-sm: 24rem;
@@ -278,22 +727,10 @@
278
727
  --text-sm--line-height: calc(1.25 / 0.875);
279
728
  --text-base: 1rem;
280
729
  --text-base--line-height: calc(1.5 / 1);
281
- --text-lg: 1.125rem;
282
- --text-lg--line-height: calc(1.75 / 1.125);
283
730
  --text-xl: 1.25rem;
284
731
  --text-xl--line-height: calc(1.75 / 1.25);
285
732
  --text-2xl: 1.5rem;
286
733
  --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
734
  --font-weight-thin: 100;
298
735
  --font-weight-extralight: 200;
299
736
  --font-weight-light: 300;
@@ -306,6 +743,9 @@
306
743
  --tracking-tight: -0.025em;
307
744
  --tracking-wide: 0.025em;
308
745
  --leading-relaxed: 1.625;
746
+ --leading-loose: 2;
747
+ --radius-lg: 0.5rem;
748
+ --radius-2xl: 1rem;
309
749
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
310
750
  --animate-bounce: bounce 1s infinite;
311
751
  --default-transition-duration: 150ms;
@@ -316,7 +756,6 @@
316
756
  --color-text-brand: var(--color-blue-600);
317
757
  --color-text-secondary: var(--color-gray-600);
318
758
  --color-text-tertiary: var(--color-gray-500);
319
- --color-text-link: var(--color-blue-600);
320
759
  --color-text-accent: var(--color-rose-700);
321
760
  --color-text-success: var(--color-emerald-600);
322
761
  --color-text-danger: var(--color-red-600);
@@ -326,7 +765,6 @@
326
765
  --color-text-filled-brand: var(--color-blue-100);
327
766
  --color-text-filled-secondary: var(--color-gray-200);
328
767
  --color-text-filled-tertiary: var(--color-gray-300);
329
- --color-text-filled-link: var(--color-blue-100);
330
768
  --color-text-filled-accent: var(--color-rose-100);
331
769
  --color-text-filled-success: var(--color-emerald-100);
332
770
  --color-text-filled-danger: var(--color-red-100);
@@ -386,28 +824,10 @@
386
824
  --color-bg-filled-active-danger: var(--color-red-800);
387
825
  --color-bg-filled-active-warning: var(--color-amber-800);
388
826
  --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
827
  --color-border-primary: var(--color-gray-200);
408
828
  --color-border-brand: var(--color-blue-300);
409
- --color-border-secondary: var(--color-gray-300);
410
- --color-border-tertiary: var(--color-gray-400);
829
+ --color-border-secondary: var(--color-gray-200);
830
+ --color-border-tertiary: var(--color-gray-200);
411
831
  --color-border-accent: var(--color-rose-300);
412
832
  --color-border-success: var(--color-emerald-300);
413
833
  --color-border-danger: var(--color-red-300);
@@ -415,21 +835,17 @@
415
835
  --color-border-info: var(--color-cyan-300);
416
836
  --color-border-filled-primary: var(--color-gray-600);
417
837
  --color-border-filled-brand: var(--color-blue-600);
418
- --color-border-filled-secondary: var(--color-gray-700);
838
+ --color-border-filled-secondary: var(--color-gray-600);
419
839
  --color-border-filled-tertiary: var(--color-gray-600);
420
840
  --color-border-filled-accent: var(--color-rose-600);
421
841
  --color-border-filled-success: var(--color-emerald-600);
422
842
  --color-border-filled-danger: var(--color-red-600);
423
843
  --color-border-filled-warning: var(--color-amber-600);
424
844
  --color-border-filled-info: var(--color-cyan-600);
425
- --layout-spacing: var(--spacing);
426
- --ui-spacing: var(--spacing);
427
845
  --br-base: var(--spacing);
428
- --ui-br-base: calc(var(--spacing) * 0.5);
429
846
  --fs-base: calc(var(--spacing) * 0.5);
430
- --breakpoint-mobile: 40rem;
431
- --breakpoint-tablet: 48rem;
432
- --breakpoint-laptop: 64rem;
847
+ --breakpoint-mobile: 48rem;
848
+ --breakpoint-tablet: 64rem;
433
849
  --breakpoint-desktop: 80rem;
434
850
  --lh: 1;
435
851
  --fs-unit: 8;
@@ -623,9 +1039,6 @@
623
1039
  @media (width >= 40rem) {
624
1040
  max-width: 40rem;
625
1041
  }
626
- @media (width >= 40rem) {
627
- max-width: 40rem;
628
- }
629
1042
  @media (width >= 48rem) {
630
1043
  max-width: 48rem;
631
1044
  }
@@ -699,9 +1112,16 @@
699
1112
  .aspect-ratio {
700
1113
  aspect-ratio: var(--aspect-ratio);
701
1114
  }
702
- .size-\(--ui-size\) {
703
- width: var(--ui-size);
704
- height: var(--ui-size);
1115
+ .size-\(--size\) {
1116
+ width: var(--size);
1117
+ height: var(--size);
1118
+ }
1119
+ .size-unit {
1120
+ width: var(--size-unit);
1121
+ height: var(--size-unit);
1122
+ }
1123
+ .h-\(--bw\) {
1124
+ height: var(--bw);
705
1125
  }
706
1126
  .h-10 {
707
1127
  height: calc(var(--spacing) * 10);
@@ -715,9 +1135,6 @@
715
1135
  .h-fit {
716
1136
  height: fit-content;
717
1137
  }
718
- .h-px {
719
- height: 1px;
720
- }
721
1138
  .h-screen {
722
1139
  height: 100vh;
723
1140
  }
@@ -856,15 +1273,18 @@
856
1273
  .gap-\(--gap\) {
857
1274
  gap: var(--gap);
858
1275
  }
859
- .gap-\(--ui-gap\) {
860
- gap: var(--ui-gap);
861
- }
862
1276
  .gap-0 {
863
1277
  gap: calc(var(--spacing) * 0);
864
1278
  }
865
1279
  .gap-1 {
866
1280
  gap: calc(var(--spacing) * 1);
867
1281
  }
1282
+ .gap-8 {
1283
+ gap: calc(var(--spacing) * 8);
1284
+ }
1285
+ .gap-12 {
1286
+ gap: calc(var(--spacing) * 12);
1287
+ }
868
1288
  .gap-unit {
869
1289
  gap: var(--gap-unit);
870
1290
  }
@@ -938,12 +1358,15 @@
938
1358
  .rounded-\(--br\) {
939
1359
  border-radius: var(--br);
940
1360
  }
941
- .rounded-\(--ui-br\) {
942
- border-radius: var(--ui-br);
1361
+ .rounded-2xl {
1362
+ border-radius: var(--radius-2xl);
943
1363
  }
944
1364
  .rounded-full {
945
1365
  border-radius: calc(infinity * 1px);
946
1366
  }
1367
+ .rounded-lg {
1368
+ border-radius: var(--radius-lg);
1369
+ }
947
1370
  .rounded-none {
948
1371
  border-radius: 0;
949
1372
  }
@@ -1011,63 +1434,12 @@
1011
1434
  --tw-border-style: dashed;
1012
1435
  border-style: dashed;
1013
1436
  }
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);
1437
+ .border-\(--border-color\) {
1438
+ border-color: var(--border-color);
1022
1439
  }
1023
1440
  .border-\(--color-border-default\) {
1024
1441
  border-color: var(--color-border-default);
1025
1442
  }
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
1443
  .border-gray-600 {
1072
1444
  border-color: var(--color-gray-600);
1073
1445
  }
@@ -1077,9 +1449,21 @@
1077
1449
  .border-indigo-400 {
1078
1450
  border-color: var(--color-indigo-400);
1079
1451
  }
1452
+ .border-indigo-500 {
1453
+ border-color: var(--color-indigo-500);
1454
+ }
1455
+ .border-lime-400 {
1456
+ border-color: var(--color-lime-400);
1457
+ }
1458
+ .border-purple-500 {
1459
+ border-color: var(--color-purple-500);
1460
+ }
1080
1461
  .border-red-600 {
1081
1462
  border-color: var(--color-red-600);
1082
1463
  }
1464
+ .border-sky-400 {
1465
+ border-color: var(--color-sky-400);
1466
+ }
1083
1467
  .border-transparent {
1084
1468
  border-color: transparent;
1085
1469
  }
@@ -1101,18 +1485,42 @@
1101
1485
  .bg-gray-800 {
1102
1486
  background-color: var(--color-gray-800);
1103
1487
  }
1488
+ .bg-green-500 {
1489
+ background-color: var(--color-green-500);
1490
+ }
1104
1491
  .bg-green-600 {
1105
1492
  background-color: var(--color-green-600);
1106
1493
  }
1494
+ .bg-indigo-600 {
1495
+ background-color: var(--color-indigo-600);
1496
+ }
1497
+ .bg-orange-500 {
1498
+ background-color: var(--color-orange-500);
1499
+ }
1107
1500
  .bg-purple-600 {
1108
1501
  background-color: var(--color-purple-600);
1109
1502
  }
1110
1503
  .bg-red-100 {
1111
1504
  background-color: var(--color-red-100);
1112
1505
  }
1506
+ .bg-red-500 {
1507
+ background-color: var(--color-red-500);
1508
+ }
1509
+ .bg-stone-100 {
1510
+ background-color: var(--color-stone-100);
1511
+ }
1512
+ .bg-teal-500 {
1513
+ background-color: var(--color-teal-500);
1514
+ }
1113
1515
  .bg-violet-600 {
1114
1516
  background-color: var(--color-violet-600);
1115
1517
  }
1518
+ .bg-white {
1519
+ background-color: var(--color-white);
1520
+ }
1521
+ .bg-yellow-100 {
1522
+ background-color: var(--color-yellow-100);
1523
+ }
1116
1524
  .bg-gradient-to-r {
1117
1525
  --tw-gradient-position: to right in oklab;
1118
1526
  background-image: linear-gradient(var(--tw-gradient-stops));
@@ -1121,10 +1529,18 @@
1121
1529
  --tw-gradient-from: var(--color-indigo-500);
1122
1530
  --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
1531
  }
1532
+ .from-pink-500 {
1533
+ --tw-gradient-from: var(--color-pink-500);
1534
+ --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));
1535
+ }
1124
1536
  .to-purple-600 {
1125
1537
  --tw-gradient-to: var(--color-purple-600);
1126
1538
  --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
1539
  }
1540
+ .to-violet-500 {
1541
+ --tw-gradient-to: var(--color-violet-500);
1542
+ --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));
1543
+ }
1128
1544
  .object-cover {
1129
1545
  object-fit: cover;
1130
1546
  }
@@ -1137,21 +1553,21 @@
1137
1553
  .px-\(--px\) {
1138
1554
  padding-inline: var(--px);
1139
1555
  }
1140
- .px-\(--ui-px\) {
1141
- padding-inline: var(--ui-px);
1142
- }
1143
1556
  .px-1 {
1144
1557
  padding-inline: calc(var(--spacing) * 1);
1145
1558
  }
1146
1559
  .px-4 {
1147
1560
  padding-inline: calc(var(--spacing) * 4);
1148
1561
  }
1562
+ .px-8 {
1563
+ padding-inline: calc(var(--spacing) * 8);
1564
+ }
1565
+ .px-10 {
1566
+ padding-inline: calc(var(--spacing) * 10);
1567
+ }
1149
1568
  .py-\(--py\) {
1150
1569
  padding-block: var(--py);
1151
1570
  }
1152
- .py-\(--ui-py\) {
1153
- padding-block: var(--ui-py);
1154
- }
1155
1571
  .py-2 {
1156
1572
  padding-block: calc(var(--spacing) * 2);
1157
1573
  }
@@ -1167,11 +1583,8 @@
1167
1583
  .py-10 {
1168
1584
  padding-block: calc(var(--spacing) * 10);
1169
1585
  }
1170
- .pl-2 {
1171
- padding-left: calc(var(--spacing) * 2);
1172
- }
1173
- .pl-4 {
1174
- padding-left: calc(var(--spacing) * 4);
1586
+ .pl-\(--pl\) {
1587
+ padding-left: var(--pl);
1175
1588
  }
1176
1589
  .pl-6 {
1177
1590
  padding-left: calc(var(--spacing) * 6);
@@ -1179,9 +1592,6 @@
1179
1592
  .pl-8 {
1180
1593
  padding-left: calc(var(--spacing) * 8);
1181
1594
  }
1182
- .pl-10 {
1183
- padding-left: calc(var(--spacing) * 10);
1184
- }
1185
1595
  .text-center {
1186
1596
  text-align: center;
1187
1597
  }
@@ -1207,34 +1617,10 @@
1207
1617
  font-size: var(--text-2xl);
1208
1618
  line-height: var(--tw-leading, var(--text-2xl--line-height));
1209
1619
  }
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
1620
  .text-base {
1231
1621
  font-size: var(--text-base);
1232
1622
  line-height: var(--tw-leading, var(--text-base--line-height));
1233
1623
  }
1234
- .text-lg {
1235
- font-size: var(--text-lg);
1236
- line-height: var(--tw-leading, var(--text-lg--line-height));
1237
- }
1238
1624
  .text-sm {
1239
1625
  font-size: var(--text-sm);
1240
1626
  line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -1257,6 +1643,10 @@
1257
1643
  --tw-leading: var(--lh);
1258
1644
  line-height: var(--lh);
1259
1645
  }
1646
+ .leading-loose {
1647
+ --tw-leading: var(--leading-loose);
1648
+ line-height: var(--leading-loose);
1649
+ }
1260
1650
  .leading-relaxed {
1261
1651
  --tw-leading: var(--leading-relaxed);
1262
1652
  line-height: var(--leading-relaxed);
@@ -1311,65 +1701,17 @@
1311
1701
  .whitespace-nowrap {
1312
1702
  white-space: nowrap;
1313
1703
  }
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
1704
  .text-\(--color-text-filled-primary\) {
1339
1705
  color: var(--color-text-filled-primary);
1340
1706
  }
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
1707
  .text-\(--color-text-primary\) {
1360
1708
  color: var(--color-text-primary);
1361
1709
  }
1362
- .text-\(--color-text-secondary\) {
1363
- color: var(--color-text-secondary);
1710
+ .text-\(--text-color\) {
1711
+ color: var(--text-color);
1364
1712
  }
1365
- .text-\(--color-text-success\) {
1366
- color: var(--color-text-success);
1367
- }
1368
- .text-\(--color-text-tertiary\) {
1369
- color: var(--color-text-tertiary);
1370
- }
1371
- .text-\(--color-text-warning\) {
1372
- color: var(--color-text-warning);
1713
+ .text-amber-600 {
1714
+ color: var(--color-amber-600);
1373
1715
  }
1374
1716
  .text-blue-200 {
1375
1717
  color: var(--color-blue-200);
@@ -1377,6 +1719,9 @@
1377
1719
  .text-blue-500 {
1378
1720
  color: var(--color-blue-500);
1379
1721
  }
1722
+ .text-cyan-700 {
1723
+ color: var(--color-cyan-700);
1724
+ }
1380
1725
  .text-gray-500 {
1381
1726
  color: var(--color-gray-500);
1382
1727
  }
@@ -1404,6 +1749,12 @@
1404
1749
  .text-red-500 {
1405
1750
  color: var(--color-red-500);
1406
1751
  }
1752
+ .text-rose-500 {
1753
+ color: var(--color-rose-500);
1754
+ }
1755
+ .text-slate-800 {
1756
+ color: var(--color-slate-800);
1757
+ }
1407
1758
  .text-transparent {
1408
1759
  color: transparent;
1409
1760
  }
@@ -1446,62 +1797,8 @@
1446
1797
  .underline {
1447
1798
  text-decoration-line: underline;
1448
1799
  }
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;
1800
+ .accent-\(--accent-color\) {
1801
+ accent-color: var(--accent-color);
1505
1802
  }
1506
1803
  .opacity-50 {
1507
1804
  opacity: 50%;
@@ -1561,59 +1858,23 @@
1561
1858
  --tw-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-shadow-alpha), transparent);
1562
1859
  }
1563
1860
  }
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
1861
  .ring-\(--color-border-filled-primary\) {
1586
1862
  --tw-ring-color: var(--color-border-filled-primary);
1587
1863
  }
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
1864
  .ring-\(--color-border-primary\) {
1604
1865
  --tw-ring-color: var(--color-border-primary);
1605
1866
  }
1606
- .ring-\(--color-border-secondary\) {
1607
- --tw-ring-color: var(--color-border-secondary);
1867
+ .ring-\(--ring-color\) {
1868
+ --tw-ring-color: var(--ring-color);
1608
1869
  }
1609
- .ring-\(--color-border-success\) {
1610
- --tw-ring-color: var(--color-border-success);
1870
+ .ring-emerald-400 {
1871
+ --tw-ring-color: var(--color-emerald-400);
1611
1872
  }
1612
- .ring-\(--color-border-tertiary\) {
1613
- --tw-ring-color: var(--color-border-tertiary);
1873
+ .ring-fuchsia-500 {
1874
+ --tw-ring-color: var(--color-fuchsia-500);
1614
1875
  }
1615
- .ring-\(--color-border-warning\) {
1616
- --tw-ring-color: var(--color-border-warning);
1876
+ .ring-indigo-300 {
1877
+ --tw-ring-color: var(--color-indigo-300);
1617
1878
  }
1618
1879
  .ring-orange-500 {
1619
1880
  --tw-ring-color: var(--color-orange-500);
@@ -1647,63 +1908,12 @@
1647
1908
  --tw-duration: 200ms;
1648
1909
  transition-duration: 200ms;
1649
1910
  }
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
1911
  .\[--aspect-ratio\:2\] {
1669
1912
  --aspect-ratio: 2;
1670
1913
  }
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
1914
  .\[--br-unit\:4\] {
1693
1915
  --br-unit: 4;
1694
1916
  }
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
1917
  .\[--fs-unit\:6\] {
1708
1918
  --fs-unit: 6;
1709
1919
  }
@@ -1719,96 +1929,24 @@
1719
1929
  .\[--fs-unit\:10\] {
1720
1930
  --fs-unit: 10;
1721
1931
  }
1722
- .\[--fs-unit\:12\] {
1723
- --fs-unit: 12;
1724
- }
1725
1932
  .\[--fs-unit\:15\] {
1726
1933
  --fs-unit: 15;
1727
1934
  }
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;
1935
+ .\[--fs-unit\:var\(--fs-unit-desktop\)\] {
1936
+ --fs-unit: var(--fs-unit-desktop);
1748
1937
  }
1749
1938
  .\[--gap-unit\:2\] {
1750
1939
  --gap-unit: 2;
1751
1940
  }
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;
1941
+ .\[--gap-unit\:var\(--gap-unit-desktop\)\] {
1942
+ --gap-unit: var(--gap-unit-desktop);
1775
1943
  }
1776
1944
  .\[--lh\:1\.3\] {
1777
1945
  --lh: 1.3;
1778
1946
  }
1779
- .\[--lh\:1\.4\] {
1780
- --lh: 1.4;
1781
- }
1782
1947
  .\[--lh\:1\.6\] {
1783
1948
  --lh: 1.6;
1784
1949
  }
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
1950
  .\[--py-unit\:1\.5\] {
1813
1951
  --py-unit: 1.5;
1814
1952
  }
@@ -1824,314 +1962,89 @@
1824
1962
  .\[--py-unit\:3\] {
1825
1963
  --py-unit: 3;
1826
1964
  }
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;
1965
+ .\[--py-unit\:var\(--py-unit-desktop\)\] {
1966
+ --py-unit: var(--py-unit-desktop);
1859
1967
  }
1860
1968
  .\[--size-unit\:4\] {
1861
1969
  --size-unit: 4;
1862
1970
  }
1863
- .\[--size-unit\:5\] {
1864
- --size-unit: 5;
1865
- }
1866
- .\[background\:transparent\] {
1867
- background: transparent;
1868
- }
1869
- .\[background\:var\(--color-bg-accent\)\] {
1870
- background: var(--color-bg-accent);
1971
+ .\[background\:var\(--bg-color\)\] {
1972
+ background: var(--bg-color);
1871
1973
  }
1872
- .\[background\:var\(--color-bg-brand\)\] {
1873
- background: var(--color-bg-brand);
1974
+ .\[background\:var\(--border-color\)\] {
1975
+ background: var(--border-color);
1874
1976
  }
1875
- .\[background\:var\(--color-bg-danger\)\] {
1876
- background: var(--color-bg-danger);
1877
- }
1878
- .\[background\:var\(--color-bg-filled-accent\)\] {
1879
- background: var(--color-bg-filled-accent);
1880
- }
1881
- .\[background\:var\(--color-bg-filled-brand\)\] {
1882
- background: var(--color-bg-filled-brand);
1883
- }
1884
- .\[background\:var\(--color-bg-filled-danger\)\] {
1885
- background: var(--color-bg-filled-danger);
1977
+ .ring-inset {
1978
+ --tw-ring-inset: inset;
1886
1979
  }
1887
- .\[background\:var\(--color-bg-filled-info\)\] {
1888
- background: var(--color-bg-filled-info);
1980
+ .peer-checked\:visible {
1981
+ &:is(:where(.peer):checked ~ *) {
1982
+ visibility: visible;
1983
+ }
1889
1984
  }
1890
- .\[background\:var\(--color-bg-filled-layout-accent\)\] {
1891
- background: var(--color-bg-filled-layout-accent);
1985
+ .checked\:\[background\:var\(--checked-bg-color\)\] {
1986
+ &:checked {
1987
+ background: var(--checked-bg-color);
1988
+ }
1892
1989
  }
1893
- .\[background\:var\(--color-bg-filled-layout-brand\)\] {
1894
- background: var(--color-bg-filled-layout-brand);
1990
+ .hover\:scale-105 {
1991
+ &:hover {
1992
+ @media (hover: hover) {
1993
+ --tw-scale-x: 105%;
1994
+ --tw-scale-y: 105%;
1995
+ --tw-scale-z: 105%;
1996
+ scale: var(--tw-scale-x) var(--tw-scale-y);
1997
+ }
1998
+ }
1895
1999
  }
1896
- .\[background\:var\(--color-bg-filled-layout-danger\)\] {
1897
- background: var(--color-bg-filled-layout-danger);
2000
+ .hover\:border-green-600 {
2001
+ &:hover {
2002
+ @media (hover: hover) {
2003
+ border-color: var(--color-green-600);
2004
+ }
2005
+ }
1898
2006
  }
1899
- .\[background\:var\(--color-bg-filled-layout-info\)\] {
1900
- background: var(--color-bg-filled-layout-info);
2007
+ .hover\:bg-indigo-700 {
2008
+ &:hover {
2009
+ @media (hover: hover) {
2010
+ background-color: var(--color-indigo-700);
2011
+ }
2012
+ }
1901
2013
  }
1902
- .\[background\:var\(--color-bg-filled-layout-primary\)\] {
1903
- background: var(--color-bg-filled-layout-primary);
2014
+ .hover\:bg-purple-700 {
2015
+ &:hover {
2016
+ @media (hover: hover) {
2017
+ background-color: var(--color-purple-700);
2018
+ }
2019
+ }
1904
2020
  }
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 {
2021
+ .hover\:bg-red-200 {
2108
2022
  &:hover {
2109
2023
  @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);
2024
+ background-color: var(--color-red-200);
2114
2025
  }
2115
2026
  }
2116
2027
  }
2117
- .hover\:border-green-600 {
2028
+ .hover\:bg-teal-600 {
2118
2029
  &:hover {
2119
2030
  @media (hover: hover) {
2120
- border-color: var(--color-green-600);
2031
+ background-color: var(--color-teal-600);
2121
2032
  }
2122
2033
  }
2123
2034
  }
2124
- .hover\:bg-purple-700 {
2035
+ .hover\:from-pink-600 {
2125
2036
  &:hover {
2126
2037
  @media (hover: hover) {
2127
- background-color: var(--color-purple-700);
2038
+ --tw-gradient-from: var(--color-pink-600);
2039
+ --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
2040
  }
2129
2041
  }
2130
2042
  }
2131
- .hover\:bg-red-200 {
2043
+ .hover\:to-violet-600 {
2132
2044
  &:hover {
2133
2045
  @media (hover: hover) {
2134
- background-color: var(--color-red-200);
2046
+ --tw-gradient-to: var(--color-violet-600);
2047
+ --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
2048
  }
2136
2049
  }
2137
2050
  }
@@ -2211,692 +2124,1048 @@
2211
2124
  }
2212
2125
  }
2213
2126
  }
2214
- .hover\:\[background\:transparent\] {
2127
+ .hover\:\[background\:var\(--bg-hover-color\)\] {
2215
2128
  &:hover {
2216
2129
  @media (hover: hover) {
2217
- background: transparent;
2130
+ background: var(--bg-hover-color);
2218
2131
  }
2219
2132
  }
2220
2133
  }
2221
- .hover\:\[background\:var\(--color-bg-filled-hover-accent\)\] {
2134
+ .hover\:ring-inset {
2222
2135
  &:hover {
2223
2136
  @media (hover: hover) {
2224
- background: var(--color-bg-filled-hover-accent);
2137
+ --tw-ring-inset: inset;
2225
2138
  }
2226
2139
  }
2227
2140
  }
2228
- .hover\:\[background\:var\(--color-bg-filled-hover-brand\)\] {
2229
- &:hover {
2230
- @media (hover: hover) {
2231
- background: var(--color-bg-filled-hover-brand);
2232
- }
2141
+ .focus-visible\:outline-2 {
2142
+ &:focus-visible {
2143
+ outline-style: var(--tw-outline-style);
2144
+ outline-width: 2px;
2233
2145
  }
2234
2146
  }
2235
- .hover\:\[background\:var\(--color-bg-filled-hover-danger\)\] {
2236
- &:hover {
2237
- @media (hover: hover) {
2238
- background: var(--color-bg-filled-hover-danger);
2239
- }
2147
+ .focus-visible\:outline-offset-2 {
2148
+ &:focus-visible {
2149
+ outline-offset: 2px;
2240
2150
  }
2241
2151
  }
2242
- .hover\:\[background\:var\(--color-bg-filled-hover-info\)\] {
2243
- &:hover {
2244
- @media (hover: hover) {
2245
- background: var(--color-bg-filled-hover-info);
2246
- }
2152
+ .focus-visible\:outline-\(--ring-color\) {
2153
+ &:focus-visible {
2154
+ outline-color: var(--ring-color);
2247
2155
  }
2248
2156
  }
2249
- .hover\:\[background\:var\(--color-bg-filled-hover-primary\)\] {
2250
- &:hover {
2251
- @media (hover: hover) {
2252
- background: var(--color-bg-filled-hover-primary);
2253
- }
2157
+ .active\:border-green-700 {
2158
+ &:active {
2159
+ border-color: var(--color-green-700);
2254
2160
  }
2255
2161
  }
2256
- .hover\:\[background\:var\(--color-bg-filled-hover-secondary\)\] {
2257
- &:hover {
2258
- @media (hover: hover) {
2259
- background: var(--color-bg-filled-hover-secondary);
2260
- }
2162
+ .active\:bg-red-300 {
2163
+ &:active {
2164
+ background-color: var(--color-red-300);
2261
2165
  }
2262
2166
  }
2263
- .hover\:\[background\:var\(--color-bg-filled-hover-success\)\] {
2264
- &:hover {
2265
- @media (hover: hover) {
2266
- background: var(--color-bg-filled-hover-success);
2267
- }
2167
+ .active\:bg-teal-700 {
2168
+ &:active {
2169
+ background-color: var(--color-teal-700);
2268
2170
  }
2269
2171
  }
2270
- .hover\:\[background\:var\(--color-bg-filled-hover-tertiary\)\] {
2271
- &:hover {
2272
- @media (hover: hover) {
2273
- background: var(--color-bg-filled-hover-tertiary);
2274
- }
2172
+ .active\:from-pink-700 {
2173
+ &:active {
2174
+ --tw-gradient-from: var(--color-pink-700);
2175
+ --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
2176
  }
2276
2177
  }
2277
- .hover\:\[background\:var\(--color-bg-filled-hover-warning\)\] {
2278
- &:hover {
2279
- @media (hover: hover) {
2280
- background: var(--color-bg-filled-hover-warning);
2281
- }
2178
+ .active\:to-violet-700 {
2179
+ &:active {
2180
+ --tw-gradient-to: var(--color-violet-700);
2181
+ --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
2182
  }
2283
2183
  }
2284
- .hover\:\[background\:var\(--color-bg-hover-accent\)\] {
2285
- &:hover {
2286
- @media (hover: hover) {
2287
- background: var(--color-bg-hover-accent);
2288
- }
2184
+ .active\:text-blue-900 {
2185
+ &:active {
2186
+ color: var(--color-blue-900);
2289
2187
  }
2290
2188
  }
2291
- .hover\:\[background\:var\(--color-bg-hover-brand\)\] {
2292
- &:hover {
2293
- @media (hover: hover) {
2294
- background: var(--color-bg-hover-brand);
2295
- }
2189
+ .active\:ring {
2190
+ &:active {
2191
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2192
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2296
2193
  }
2297
2194
  }
2298
- .hover\:\[background\:var\(--color-bg-hover-danger\)\] {
2299
- &:hover {
2300
- @media (hover: hover) {
2301
- background: var(--color-bg-hover-danger);
2302
- }
2195
+ .active\:\[background\:var\(--bg-active-color\)\] {
2196
+ &:active {
2197
+ background: var(--bg-active-color);
2303
2198
  }
2304
2199
  }
2305
- .hover\:\[background\:var\(--color-bg-hover-info\)\] {
2306
- &:hover {
2307
- @media (hover: hover) {
2308
- background: var(--color-bg-hover-info);
2309
- }
2200
+ .active\:ring-inset {
2201
+ &:active {
2202
+ --tw-ring-inset: inset;
2310
2203
  }
2311
2204
  }
2312
- .hover\:\[background\:var\(--color-bg-hover-primary\)\] {
2313
- &:hover {
2314
- @media (hover: hover) {
2315
- background: var(--color-bg-hover-primary);
2316
- }
2205
+ .has-\[input\]\:cursor-pointer {
2206
+ &:has(*:is(input)) {
2207
+ cursor: pointer;
2317
2208
  }
2318
2209
  }
2319
- .hover\:\[background\:var\(--color-bg-hover-secondary\)\] {
2320
- &:hover {
2321
- @media (hover: hover) {
2322
- background: var(--color-bg-hover-secondary);
2323
- }
2210
+ .max-desktop\:hidden {
2211
+ @media (width < 80rem) {
2212
+ display: none;
2324
2213
  }
2325
2214
  }
2326
- .hover\:\[background\:var\(--color-bg-hover-success\)\] {
2327
- &:hover {
2328
- @media (hover: hover) {
2329
- background: var(--color-bg-hover-success);
2330
- }
2215
+ .max-desktop\:flex-col {
2216
+ @media (width < 80rem) {
2217
+ flex-direction: column;
2331
2218
  }
2332
2219
  }
2333
- .hover\:\[background\:var\(--color-bg-hover-tertiary\)\] {
2334
- &:hover {
2335
- @media (hover: hover) {
2336
- background: var(--color-bg-hover-tertiary);
2337
- }
2220
+ .max-tablet\:hidden {
2221
+ @media (width < 64rem) {
2222
+ display: none;
2338
2223
  }
2339
2224
  }
2340
- .hover\:\[background\:var\(--color-bg-hover-warning\)\] {
2341
- &:hover {
2342
- @media (hover: hover) {
2343
- background: var(--color-bg-hover-warning);
2344
- }
2225
+ .max-tablet\:flex-col {
2226
+ @media (width < 64rem) {
2227
+ flex-direction: column;
2345
2228
  }
2346
2229
  }
2347
- .hover\:ring-inset {
2348
- &:hover {
2349
- @media (hover: hover) {
2350
- --tw-ring-inset: inset;
2351
- }
2230
+ .max-tablet\:\[--fs-unit\:9\] {
2231
+ @media (width < 64rem) {
2232
+ --fs-unit: 9;
2352
2233
  }
2353
2234
  }
2354
- .focus-visible\:outline-2 {
2355
- &:focus-visible {
2356
- outline-style: var(--tw-outline-style);
2357
- outline-width: 2px;
2235
+ .max-tablet\:\[--fs-unit\:var\(--fs-unit-tablet\)\] {
2236
+ @media (width < 64rem) {
2237
+ --fs-unit: var(--fs-unit-tablet);
2358
2238
  }
2359
2239
  }
2360
- .focus-visible\:outline-offset-2 {
2361
- &:focus-visible {
2362
- outline-offset: 2px;
2240
+ .max-tablet\:\[--gap-unit\:var\(--gap-unit-tablet\)\] {
2241
+ @media (width < 64rem) {
2242
+ --gap-unit: var(--gap-unit-tablet);
2363
2243
  }
2364
2244
  }
2365
- .focus-visible\:outline-\(--color-border-accent\) {
2366
- &:focus-visible {
2367
- outline-color: var(--color-border-accent);
2245
+ .max-tablet\:\[--py-unit\:var\(--py-unit-tablet\)\] {
2246
+ @media (width < 64rem) {
2247
+ --py-unit: var(--py-unit-tablet);
2368
2248
  }
2369
2249
  }
2370
- .focus-visible\:outline-\(--color-border-brand\) {
2371
- &:focus-visible {
2372
- outline-color: var(--color-border-brand);
2250
+ .max-mobile\:hidden {
2251
+ @media (width < 48rem) {
2252
+ display: none;
2373
2253
  }
2374
2254
  }
2375
- .focus-visible\:outline-\(--color-border-danger\) {
2376
- &:focus-visible {
2377
- outline-color: var(--color-border-danger);
2255
+ .max-mobile\:flex-col {
2256
+ @media (width < 48rem) {
2257
+ flex-direction: column;
2378
2258
  }
2379
2259
  }
2380
- .focus-visible\:outline-\(--color-border-filled-accent\) {
2381
- &:focus-visible {
2382
- outline-color: var(--color-border-filled-accent);
2260
+ .max-mobile\:\[--fs-unit\:var\(--fs-unit-mobile\)\] {
2261
+ @media (width < 48rem) {
2262
+ --fs-unit: var(--fs-unit-mobile);
2383
2263
  }
2384
2264
  }
2385
- .focus-visible\:outline-\(--color-border-filled-brand\) {
2386
- &:focus-visible {
2387
- outline-color: var(--color-border-filled-brand);
2265
+ .max-mobile\:\[--gap-unit\:var\(--gap-unit-mobile\)\] {
2266
+ @media (width < 48rem) {
2267
+ --gap-unit: var(--gap-unit-mobile);
2388
2268
  }
2389
2269
  }
2390
- .focus-visible\:outline-\(--color-border-filled-danger\) {
2391
- &:focus-visible {
2392
- outline-color: var(--color-border-filled-danger);
2270
+ .max-mobile\:\[--py-unit\:var\(--py-unit-mobile\)\] {
2271
+ @media (width < 48rem) {
2272
+ --py-unit: var(--py-unit-mobile);
2393
2273
  }
2394
2274
  }
2395
- .focus-visible\:outline-\(--color-border-filled-info\) {
2396
- &:focus-visible {
2397
- outline-color: var(--color-border-filled-info);
2275
+ .sm\:grid-cols-2 {
2276
+ @media (width >= 40rem) {
2277
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2398
2278
  }
2399
2279
  }
2400
- .focus-visible\:outline-\(--color-border-filled-primary\) {
2401
- &:focus-visible {
2402
- outline-color: var(--color-border-filled-primary);
2280
+ .md\:grid-cols-2 {
2281
+ @media (width >= 48rem) {
2282
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2403
2283
  }
2404
2284
  }
2405
- .focus-visible\:outline-\(--color-border-filled-secondary\) {
2406
- &:focus-visible {
2407
- outline-color: var(--color-border-filled-secondary);
2285
+ .md\:grid-cols-3 {
2286
+ @media (width >= 48rem) {
2287
+ grid-template-columns: repeat(3, minmax(0, 1fr));
2408
2288
  }
2409
2289
  }
2410
- .focus-visible\:outline-\(--color-border-filled-success\) {
2411
- &:focus-visible {
2412
- outline-color: var(--color-border-filled-success);
2290
+ .md\:grid-cols-4 {
2291
+ @media (width >= 48rem) {
2292
+ grid-template-columns: repeat(4, minmax(0, 1fr));
2413
2293
  }
2414
2294
  }
2415
- .focus-visible\:outline-\(--color-border-filled-tertiary\) {
2416
- &:focus-visible {
2417
- outline-color: var(--color-border-filled-tertiary);
2295
+ .lg\:grid-cols-4 {
2296
+ @media (width >= 64rem) {
2297
+ grid-template-columns: repeat(4, minmax(0, 1fr));
2418
2298
  }
2419
2299
  }
2420
- .focus-visible\:outline-\(--color-border-filled-warning\) {
2421
- &:focus-visible {
2422
- outline-color: var(--color-border-filled-warning);
2300
+ .lg\:grid-cols-5 {
2301
+ @media (width >= 64rem) {
2302
+ grid-template-columns: repeat(5, minmax(0, 1fr));
2423
2303
  }
2424
2304
  }
2425
- .focus-visible\:outline-\(--color-border-info\) {
2426
- &:focus-visible {
2427
- outline-color: var(--color-border-info);
2305
+ .lg\:grid-cols-6 {
2306
+ @media (width >= 64rem) {
2307
+ grid-template-columns: repeat(6, minmax(0, 1fr));
2428
2308
  }
2429
2309
  }
2430
- .focus-visible\:outline-\(--color-border-primary\) {
2431
- &:focus-visible {
2432
- outline-color: var(--color-border-primary);
2310
+ }
2311
+ @layer theme {
2312
+ @layer base {
2313
+ [data-size] {
2314
+ --gap: calc(var(--gap-unit) * var(--spacing));
2315
+ --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--spacing));
2316
+ --py: calc(var(--py-unit) * var(--spacing));
2317
+ --size: calc(var(--size-unit) * var(--spacing));
2318
+ --br: calc(var(--br-unit) * var(--br-base));
2319
+ --fs: calc(var(--fs-unit) * var(--fs-base));
2320
+ --pl: calc(var(--py-unit) * var(--spacing));
2433
2321
  }
2434
2322
  }
2435
- .focus-visible\:outline-\(--color-border-secondary\) {
2436
- &:focus-visible {
2437
- outline-color: var(--color-border-secondary);
2323
+ @layer components {
2324
+ .vane-button {
2325
+ --lh: 1.3;
2326
+ --br-unit: 2;
2327
+ --py-unit: 2;
2328
+ --aspect-ratio: 2;
2329
+ --gap-unit: 2;
2438
2330
  }
2439
- }
2440
- .focus-visible\:outline-\(--color-border-success\) {
2441
- &:focus-visible {
2442
- outline-color: var(--color-border-success);
2331
+ .vane-button[data-size="xs"] {
2332
+ --fs-unit: 6;
2333
+ --py-unit: 1;
2334
+ --br-unit: 1;
2335
+ --gap-unit: 1;
2443
2336
  }
2444
- }
2445
- .focus-visible\:outline-\(--color-border-tertiary\) {
2446
- &:focus-visible {
2447
- outline-color: var(--color-border-tertiary);
2337
+ .vane-button[data-size="sm"] {
2338
+ --fs-unit: 7;
2339
+ --py-unit: 1.5;
2340
+ --br-unit: 1.5;
2341
+ --gap-unit: 1.5;
2448
2342
  }
2449
- }
2450
- .focus-visible\:outline-\(--color-border-warning\) {
2451
- &:focus-visible {
2452
- outline-color: var(--color-border-warning);
2343
+ .vane-button[data-size="md"] {
2344
+ --fs-unit: 8;
2345
+ --py-unit: 2;
2346
+ --br-unit: 2;
2347
+ --gap-unit: 2;
2453
2348
  }
2454
- }
2455
- .focus-visible\:outline-transparent {
2456
- &:focus-visible {
2457
- outline-color: transparent;
2349
+ .vane-button[data-size="lg"] {
2350
+ --fs-unit: 9;
2351
+ --py-unit: 2.5;
2352
+ --br-unit: 2.5;
2353
+ --gap-unit: 2.5;
2458
2354
  }
2459
- }
2460
- .active\:border-green-700 {
2461
- &:active {
2462
- border-color: var(--color-green-700);
2355
+ .vane-button[data-size="xl"] {
2356
+ --fs-unit: 10;
2357
+ --py-unit: 3;
2358
+ --br-unit: 3;
2359
+ --gap-unit: 3;
2463
2360
  }
2464
- }
2465
- .active\:bg-red-300 {
2466
- &:active {
2467
- background-color: var(--color-red-300);
2361
+ .vane-badge {
2362
+ --lh: 1.6;
2363
+ --br-unit: 2;
2364
+ --py-unit: 2;
2365
+ --aspect-ratio: 2;
2366
+ --gap-unit: 2;
2468
2367
  }
2469
- }
2470
- .active\:text-blue-900 {
2471
- &:active {
2472
- color: var(--color-blue-900);
2368
+ .vane-badge[data-size="xs"] {
2369
+ --fs-unit: 6;
2370
+ --py-unit: 1;
2371
+ --br-unit: 1;
2372
+ --gap-unit: 1;
2473
2373
  }
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);
2374
+ .vane-badge[data-size="sm"] {
2375
+ --fs-unit: 7;
2376
+ --py-unit: 1.5;
2377
+ --br-unit: 1.5;
2378
+ --gap-unit: 1.5;
2479
2379
  }
2480
- }
2481
- .active\:\[background\:transparent\] {
2482
- &:active {
2483
- background: transparent;
2380
+ .vane-badge[data-size="md"] {
2381
+ --fs-unit: 8;
2382
+ --py-unit: 2;
2383
+ --br-unit: 2;
2384
+ --gap-unit: 2;
2484
2385
  }
2485
- }
2486
- .active\:\[background\:var\(--color-bg-active-accent\)\] {
2487
- &:active {
2488
- background: var(--color-bg-active-accent);
2386
+ .vane-badge[data-size="lg"] {
2387
+ --fs-unit: 9;
2388
+ --py-unit: 2.5;
2389
+ --br-unit: 2.5;
2390
+ --gap-unit: 2.5;
2489
2391
  }
2490
- }
2491
- .active\:\[background\:var\(--color-bg-active-brand\)\] {
2492
- &:active {
2493
- background: var(--color-bg-active-brand);
2392
+ .vane-badge[data-size="xl"] {
2393
+ --fs-unit: 10;
2394
+ --py-unit: 3;
2395
+ --br-unit: 3;
2396
+ --gap-unit: 3;
2494
2397
  }
2495
- }
2496
- .active\:\[background\:var\(--color-bg-active-danger\)\] {
2497
- &:active {
2498
- background: var(--color-bg-active-danger);
2398
+ .vane-chip {
2399
+ --lh: 1.2;
2400
+ --br-unit: 2;
2401
+ --py-unit: 1.5;
2402
+ --aspect-ratio: 2;
2403
+ --gap-unit: 2;
2499
2404
  }
2500
- }
2501
- .active\:\[background\:var\(--color-bg-active-info\)\] {
2502
- &:active {
2503
- background: var(--color-bg-active-info);
2405
+ .vane-chip[data-size="xs"] {
2406
+ --fs-unit: 6;
2407
+ --py-unit: 0.5;
2408
+ --br-unit: 1;
2409
+ --gap-unit: 1;
2504
2410
  }
2505
- }
2506
- .active\:\[background\:var\(--color-bg-active-primary\)\] {
2507
- &:active {
2508
- background: var(--color-bg-active-primary);
2411
+ .vane-chip[data-size="sm"] {
2412
+ --fs-unit: 7;
2413
+ --py-unit: 1;
2414
+ --br-unit: 1.5;
2415
+ --gap-unit: 1.5;
2509
2416
  }
2510
- }
2511
- .active\:\[background\:var\(--color-bg-active-secondary\)\] {
2512
- &:active {
2513
- background: var(--color-bg-active-secondary);
2417
+ .vane-chip[data-size="md"] {
2418
+ --fs-unit: 8;
2419
+ --py-unit: 1.5;
2420
+ --br-unit: 2;
2421
+ --gap-unit: 2;
2514
2422
  }
2515
- }
2516
- .active\:\[background\:var\(--color-bg-active-success\)\] {
2517
- &:active {
2518
- background: var(--color-bg-active-success);
2423
+ .vane-chip[data-size="lg"] {
2424
+ --fs-unit: 9;
2425
+ --py-unit: 2;
2426
+ --br-unit: 2.5;
2427
+ --gap-unit: 2.5;
2519
2428
  }
2520
- }
2521
- .active\:\[background\:var\(--color-bg-active-tertiary\)\] {
2522
- &:active {
2523
- background: var(--color-bg-active-tertiary);
2429
+ .vane-chip[data-size="xl"] {
2430
+ --fs-unit: 10;
2431
+ --py-unit: 2.5;
2432
+ --br-unit: 3;
2433
+ --gap-unit: 3;
2524
2434
  }
2525
- }
2526
- .active\:\[background\:var\(--color-bg-active-warning\)\] {
2527
- &:active {
2528
- background: var(--color-bg-active-warning);
2435
+ .vane-code {
2436
+ --lh: 1;
2437
+ --br-unit: 1.5;
2438
+ --py-unit: 0.8;
2439
+ --aspect-ratio: 1.8;
2529
2440
  }
2530
- }
2531
- .active\:\[background\:var\(--color-bg-filled-active-accent\)\] {
2532
- &:active {
2533
- background: var(--color-bg-filled-active-accent);
2441
+ .vane-code[data-size="xs"] {
2442
+ --fs-unit: 5;
2443
+ --py-unit: 0.4;
2444
+ --br-unit: 0.5;
2534
2445
  }
2535
- }
2536
- .active\:\[background\:var\(--color-bg-filled-active-brand\)\] {
2537
- &:active {
2538
- background: var(--color-bg-filled-active-brand);
2446
+ .vane-code[data-size="sm"] {
2447
+ --fs-unit: 6;
2448
+ --py-unit: 0.6;
2449
+ --br-unit: 1;
2539
2450
  }
2540
- }
2541
- .active\:\[background\:var\(--color-bg-filled-active-danger\)\] {
2542
- &:active {
2543
- background: var(--color-bg-filled-active-danger);
2451
+ .vane-code[data-size="md"] {
2452
+ --fs-unit: 7;
2453
+ --py-unit: 0.8;
2454
+ --br-unit: 1.5;
2544
2455
  }
2545
- }
2546
- .active\:\[background\:var\(--color-bg-filled-active-info\)\] {
2547
- &:active {
2548
- background: var(--color-bg-filled-active-info);
2456
+ .vane-code[data-size="lg"] {
2457
+ --fs-unit: 8;
2458
+ --py-unit: 1;
2459
+ --br-unit: 2;
2549
2460
  }
2550
- }
2551
- .active\:\[background\:var\(--color-bg-filled-active-primary\)\] {
2552
- &:active {
2553
- background: var(--color-bg-filled-active-primary);
2461
+ .vane-code[data-size="xl"] {
2462
+ --fs-unit: 9;
2463
+ --py-unit: 1.2;
2464
+ --br-unit: 2.5;
2554
2465
  }
2555
- }
2556
- .active\:\[background\:var\(--color-bg-filled-active-secondary\)\] {
2557
- &:active {
2558
- background: var(--color-bg-filled-active-secondary);
2466
+ .vane-input {
2467
+ --lh: 1.6;
2468
+ --br-unit: 2;
2469
+ --py-unit: 2;
2470
+ --aspect-ratio: 2;
2559
2471
  }
2560
- }
2561
- .active\:\[background\:var\(--color-bg-filled-active-success\)\] {
2562
- &:active {
2563
- background: var(--color-bg-filled-active-success);
2472
+ .vane-input[data-size="xs"] {
2473
+ --fs-unit: 6;
2474
+ --py-unit: 1;
2475
+ --br-unit: 1;
2564
2476
  }
2565
- }
2566
- .active\:\[background\:var\(--color-bg-filled-active-tertiary\)\] {
2567
- &:active {
2568
- background: var(--color-bg-filled-active-tertiary);
2477
+ .vane-input[data-size="sm"] {
2478
+ --fs-unit: 7;
2479
+ --py-unit: 1.5;
2480
+ --br-unit: 1.5;
2569
2481
  }
2570
- }
2571
- .active\:\[background\:var\(--color-bg-filled-active-warning\)\] {
2572
- &:active {
2573
- background: var(--color-bg-filled-active-warning);
2482
+ .vane-input[data-size="md"] {
2483
+ --fs-unit: 8;
2484
+ --py-unit: 2;
2485
+ --br-unit: 2;
2574
2486
  }
2575
- }
2576
- .active\:ring-inset {
2577
- &:active {
2578
- --tw-ring-inset: inset;
2487
+ .vane-input[data-size="lg"] {
2488
+ --fs-unit: 9;
2489
+ --py-unit: 2.5;
2490
+ --br-unit: 2.5;
2579
2491
  }
2580
- }
2581
- .has-\[input\]\:cursor-pointer {
2582
- &:has(*:is(input)) {
2583
- cursor: pointer;
2492
+ .vane-input[data-size="xl"] {
2493
+ --fs-unit: 10;
2494
+ --py-unit: 3;
2495
+ --br-unit: 3;
2584
2496
  }
2585
- }
2586
- .max-desktop\:hidden {
2587
- @media (width < 80rem) {
2588
- display: none;
2497
+ .vane-checkbox {
2498
+ --br-unit: 1;
2589
2499
  }
2590
- }
2591
- .max-desktop\:flex-col {
2592
- @media (width < 80rem) {
2593
- flex-direction: column;
2500
+ .vane-checkbox[data-size="xs"] {
2501
+ --size-unit: 3;
2502
+ --br-unit: 0.5;
2594
2503
  }
2595
- }
2596
- .max-laptop\:hidden {
2597
- @media (width < 64rem) {
2598
- display: none;
2504
+ .vane-checkbox[data-size="sm"] {
2505
+ --size-unit: 3.5;
2506
+ --br-unit: 0.5;
2599
2507
  }
2600
- }
2601
- .max-laptop\:flex-col {
2602
- @media (width < 64rem) {
2603
- flex-direction: column;
2508
+ .vane-checkbox[data-size="md"] {
2509
+ --size-unit: 4;
2510
+ --br-unit: 1;
2604
2511
  }
2605
- }
2606
- .max-laptop\:\[--fs-unit\:8\] {
2607
- @media (width < 64rem) {
2512
+ .vane-checkbox[data-size="lg"] {
2513
+ --size-unit: 4.5;
2514
+ --br-unit: 1;
2515
+ }
2516
+ .vane-checkbox[data-size="xl"] {
2517
+ --size-unit: 5;
2518
+ --br-unit: 1.5;
2519
+ }
2520
+ .vane-label {
2521
+ --lh: 1.6;
2522
+ --gap-unit: 2;
2523
+ }
2524
+ .vane-label[data-size="xs"] {
2525
+ --fs-unit: 6;
2526
+ --gap-unit: 1;
2527
+ }
2528
+ .vane-label[data-size="sm"] {
2529
+ --fs-unit: 7;
2530
+ --gap-unit: 1.5;
2531
+ }
2532
+ .vane-label[data-size="md"] {
2608
2533
  --fs-unit: 8;
2534
+ --gap-unit: 2;
2609
2535
  }
2610
- }
2611
- .max-laptop\:\[--fs-unit\:9\] {
2612
- @media (width < 64rem) {
2536
+ .vane-label[data-size="lg"] {
2613
2537
  --fs-unit: 9;
2538
+ --gap-unit: 2.5;
2614
2539
  }
2615
- }
2616
- .max-laptop\:\[--fs-unit\:10\] {
2617
- @media (width < 64rem) {
2540
+ .vane-label[data-size="xl"] {
2618
2541
  --fs-unit: 10;
2542
+ --gap-unit: 3;
2619
2543
  }
2620
- }
2621
- .max-laptop\:\[--fs-unit\:11\] {
2622
- @media (width < 64rem) {
2623
- --fs-unit: 11;
2544
+ .vane-card {
2545
+ --br-unit: 5;
2546
+ --py-unit: 6;
2547
+ --aspect-ratio: 1;
2548
+ --gap-unit: 4;
2624
2549
  }
2625
- }
2626
- .max-laptop\:\[--fs-unit\:12\] {
2627
- @media (width < 64rem) {
2628
- --fs-unit: 12;
2550
+ .vane-card[data-size="xs"] {
2551
+ --py-unit: 2;
2552
+ --gap-unit: 2;
2553
+ --br-unit: 3;
2629
2554
  }
2630
- }
2631
- .max-laptop\:\[--fs-unit\:13\] {
2632
- @media (width < 64rem) {
2633
- --fs-unit: 13;
2555
+ .vane-card[data-size="sm"] {
2556
+ --py-unit: 4;
2557
+ --gap-unit: 3;
2558
+ --br-unit: 4;
2634
2559
  }
2635
- }
2636
- .max-laptop\:\[--fs-unit\:14\] {
2637
- @media (width < 64rem) {
2638
- --fs-unit: 14;
2560
+ .vane-card[data-size="md"] {
2561
+ --py-unit: 6;
2562
+ --gap-unit: 4;
2563
+ --br-unit: 5;
2639
2564
  }
2640
- }
2641
- .max-laptop\:\[--fs-unit\:15\] {
2642
- @media (width < 64rem) {
2643
- --fs-unit: 15;
2565
+ .vane-card[data-size="lg"] {
2566
+ --py-unit: 8;
2567
+ --gap-unit: 5;
2568
+ --br-unit: 6;
2644
2569
  }
2645
- }
2646
- .max-laptop\:\[--fs-unit\:16\] {
2647
- @media (width < 64rem) {
2648
- --fs-unit: 16;
2570
+ .vane-card[data-size="xl"] {
2571
+ --py-unit: 10;
2572
+ --gap-unit: 6;
2573
+ --br-unit: 7;
2649
2574
  }
2650
- }
2651
- .max-laptop\:\[--fs-unit\:17\] {
2652
- @media (width < 64rem) {
2653
- --fs-unit: 17;
2575
+ .vane-stack {
2576
+ --gap-unit: 4;
2577
+ --py-unit: 4;
2578
+ --aspect-ratio: 1;
2579
+ --br-unit: 5;
2654
2580
  }
2655
- }
2656
- .max-laptop\:\[--fs-unit\:21\] {
2657
- @media (width < 64rem) {
2658
- --fs-unit: 21;
2581
+ .vane-stack[data-size="xs"] {
2582
+ --gap-unit: 2;
2583
+ --py-unit: 2;
2584
+ --br-unit: 3;
2659
2585
  }
2660
- }
2661
- .max-laptop\:\[--fs-unit\:22\] {
2662
- @media (width < 64rem) {
2663
- --fs-unit: 22;
2586
+ .vane-stack[data-size="sm"] {
2587
+ --gap-unit: 3;
2588
+ --py-unit: 3;
2589
+ --br-unit: 4;
2664
2590
  }
2665
- }
2666
- .max-laptop\:\[--fs-unit\:27\] {
2667
- @media (width < 64rem) {
2668
- --fs-unit: 27;
2591
+ .vane-stack[data-size="md"] {
2592
+ --gap-unit: 4;
2593
+ --py-unit: 4;
2594
+ --br-unit: 5;
2669
2595
  }
2670
- }
2671
- .max-laptop\:\[--fs-unit\:28\] {
2672
- @media (width < 64rem) {
2673
- --fs-unit: 28;
2596
+ .vane-stack[data-size="lg"] {
2597
+ --gap-unit: 5;
2598
+ --py-unit: 5;
2599
+ --br-unit: 6;
2674
2600
  }
2675
- }
2676
- .max-laptop\:\[--fs-unit\:33\] {
2677
- @media (width < 64rem) {
2678
- --fs-unit: 33;
2601
+ .vane-stack[data-size="xl"] {
2602
+ --gap-unit: 6;
2603
+ --py-unit: 6;
2604
+ --br-unit: 7;
2679
2605
  }
2680
- }
2681
- .max-laptop\:\[--gap-unit\:3\] {
2682
- @media (width < 64rem) {
2606
+ .vane-row {
2607
+ --gap-unit: 4;
2608
+ --br-unit: 5;
2609
+ }
2610
+ .vane-row[data-size="xs"] {
2611
+ --gap-unit: 2;
2612
+ --br-unit: 3;
2613
+ }
2614
+ .vane-row[data-size="sm"] {
2683
2615
  --gap-unit: 3;
2616
+ --br-unit: 4;
2684
2617
  }
2685
- }
2686
- .max-laptop\:\[--gap-unit\:5\] {
2687
- @media (width < 64rem) {
2618
+ .vane-row[data-size="md"] {
2619
+ --gap-unit: 4;
2620
+ --br-unit: 5;
2621
+ }
2622
+ .vane-row[data-size="lg"] {
2688
2623
  --gap-unit: 5;
2624
+ --br-unit: 6;
2689
2625
  }
2690
- }
2691
- .max-laptop\:\[--gap-unit\:6\] {
2692
- @media (width < 64rem) {
2626
+ .vane-row[data-size="xl"] {
2693
2627
  --gap-unit: 6;
2628
+ --br-unit: 7;
2694
2629
  }
2695
- }
2696
- .max-laptop\:\[--gap-unit\:8\] {
2697
- @media (width < 64rem) {
2698
- --gap-unit: 8;
2630
+ .vane-col {
2631
+ --gap-unit: 4;
2632
+ --br-unit: 5;
2699
2633
  }
2700
- }
2701
- .max-laptop\:\[--gap-unit\:10\] {
2702
- @media (width < 64rem) {
2703
- --gap-unit: 10;
2634
+ .vane-col[data-size="xs"] {
2635
+ --gap-unit: 2;
2636
+ --br-unit: 3;
2704
2637
  }
2705
- }
2706
- .max-laptop\:\[--py-unit\:3\] {
2707
- @media (width < 64rem) {
2708
- --py-unit: 3;
2638
+ .vane-col[data-size="sm"] {
2639
+ --gap-unit: 3;
2640
+ --br-unit: 4;
2709
2641
  }
2710
- }
2711
- .max-laptop\:\[--py-unit\:4\] {
2712
- @media (width < 64rem) {
2642
+ .vane-col[data-size="md"] {
2643
+ --gap-unit: 4;
2644
+ --br-unit: 5;
2645
+ }
2646
+ .vane-col[data-size="lg"] {
2647
+ --gap-unit: 5;
2648
+ --br-unit: 6;
2649
+ }
2650
+ .vane-col[data-size="xl"] {
2651
+ --gap-unit: 6;
2652
+ --br-unit: 7;
2653
+ }
2654
+ .vane-container {
2655
+ --py-unit: 8;
2656
+ --aspect-ratio: 2;
2657
+ --br-unit: 5;
2658
+ --gap-unit: 4;
2659
+ }
2660
+ .vane-container[data-size="xs"] {
2713
2661
  --py-unit: 4;
2662
+ --br-unit: 3;
2663
+ --gap-unit: 2;
2714
2664
  }
2715
- }
2716
- .max-laptop\:\[--py-unit\:6\] {
2717
- @media (width < 64rem) {
2665
+ .vane-container[data-size="sm"] {
2718
2666
  --py-unit: 6;
2667
+ --br-unit: 4;
2668
+ --gap-unit: 3;
2719
2669
  }
2720
- }
2721
- .max-laptop\:\[--py-unit\:8\] {
2722
- @media (width < 64rem) {
2670
+ .vane-container[data-size="md"] {
2723
2671
  --py-unit: 8;
2672
+ --br-unit: 5;
2673
+ --gap-unit: 4;
2724
2674
  }
2725
- }
2726
- .max-laptop\:\[--py-unit\:10\] {
2727
- @media (width < 64rem) {
2675
+ .vane-container[data-size="lg"] {
2728
2676
  --py-unit: 10;
2677
+ --br-unit: 6;
2678
+ --gap-unit: 5;
2729
2679
  }
2730
- }
2731
- .max-tablet\:hidden {
2732
- @media (width < 48rem) {
2733
- display: none;
2680
+ .vane-container[data-size="xl"] {
2681
+ --py-unit: 12;
2682
+ --br-unit: 7;
2683
+ --gap-unit: 6;
2734
2684
  }
2735
- }
2736
- .max-tablet\:flex-col {
2737
- @media (width < 48rem) {
2738
- flex-direction: column;
2685
+ .vane-grid {
2686
+ --gap-unit: 4;
2687
+ --br-unit: 5;
2739
2688
  }
2740
- }
2741
- .max-tablet\:\[--fs-unit\:7\] {
2742
- @media (width < 48rem) {
2743
- --fs-unit: 7;
2689
+ .vane-grid[data-size="xs"] {
2690
+ --gap-unit: 2;
2691
+ --br-unit: 3;
2744
2692
  }
2745
- }
2746
- .max-tablet\:\[--fs-unit\:8\] {
2747
- @media (width < 48rem) {
2748
- --fs-unit: 8;
2693
+ .vane-grid[data-size="sm"] {
2694
+ --gap-unit: 3;
2695
+ --br-unit: 4;
2749
2696
  }
2750
- }
2751
- .max-tablet\:\[--fs-unit\:9\] {
2752
- @media (width < 48rem) {
2753
- --fs-unit: 9;
2697
+ .vane-grid[data-size="md"] {
2698
+ --gap-unit: 4;
2699
+ --br-unit: 5;
2754
2700
  }
2755
- }
2756
- .max-tablet\:\[--fs-unit\:10\] {
2757
- @media (width < 48rem) {
2758
- --fs-unit: 10;
2701
+ .vane-grid[data-size="lg"] {
2702
+ --gap-unit: 5;
2703
+ --br-unit: 6;
2759
2704
  }
2760
- }
2761
- .max-tablet\:\[--fs-unit\:11\] {
2762
- @media (width < 48rem) {
2763
- --fs-unit: 11;
2705
+ .vane-grid[data-size="xl"] {
2706
+ --gap-unit: 6;
2707
+ --br-unit: 7;
2764
2708
  }
2765
- }
2766
- .max-tablet\:\[--fs-unit\:12\] {
2767
- @media (width < 48rem) {
2768
- --fs-unit: 12;
2709
+ .vane-divider {
2710
+ --py-unit: 4;
2769
2711
  }
2770
- }
2771
- .max-tablet\:\[--fs-unit\:13\] {
2772
- @media (width < 48rem) {
2773
- --fs-unit: 13;
2712
+ .vane-divider[data-size="xs"] {
2713
+ --py-unit: 2;
2774
2714
  }
2775
- }
2776
- .max-tablet\:\[--fs-unit\:14\] {
2777
- @media (width < 48rem) {
2778
- --fs-unit: 14;
2715
+ .vane-divider[data-size="sm"] {
2716
+ --py-unit: 3;
2779
2717
  }
2780
- }
2781
- .max-tablet\:\[--fs-unit\:16\] {
2782
- @media (width < 48rem) {
2783
- --fs-unit: 16;
2718
+ .vane-divider[data-size="md"] {
2719
+ --py-unit: 4;
2784
2720
  }
2785
- }
2786
- .max-tablet\:\[--fs-unit\:18\] {
2787
- @media (width < 48rem) {
2788
- --fs-unit: 18;
2721
+ .vane-divider[data-size="lg"] {
2722
+ --py-unit: 5;
2789
2723
  }
2790
- }
2791
- .max-tablet\:\[--fs-unit\:20\] {
2792
- @media (width < 48rem) {
2793
- --fs-unit: 20;
2724
+ .vane-divider[data-size="xl"] {
2725
+ --py-unit: 6;
2794
2726
  }
2795
- }
2796
- .max-tablet\:\[--fs-unit\:24\] {
2797
- @media (width < 48rem) {
2798
- --fs-unit: 24;
2727
+ .vane-img {
2728
+ --br-unit: 5;
2799
2729
  }
2800
- }
2801
- .max-tablet\:\[--fs-unit\:26\] {
2802
- @media (width < 48rem) {
2803
- --fs-unit: 26;
2730
+ .vane-img[data-size="xs"] {
2731
+ --br-unit: 3;
2804
2732
  }
2805
- }
2806
- .max-tablet\:\[--fs-unit\:30\] {
2807
- @media (width < 48rem) {
2808
- --fs-unit: 30;
2733
+ .vane-img[data-size="sm"] {
2734
+ --br-unit: 4;
2809
2735
  }
2810
- }
2811
- .max-tablet\:\[--gap-unit\:2\] {
2812
- @media (width < 48rem) {
2813
- --gap-unit: 2;
2736
+ .vane-img[data-size="md"] {
2737
+ --br-unit: 5;
2814
2738
  }
2815
- }
2816
- .max-tablet\:\[--gap-unit\:4\] {
2817
- @media (width < 48rem) {
2818
- --gap-unit: 4;
2739
+ .vane-img[data-size="lg"] {
2740
+ --br-unit: 6;
2819
2741
  }
2820
- }
2821
- .max-tablet\:\[--gap-unit\:6\] {
2822
- @media (width < 48rem) {
2823
- --gap-unit: 6;
2742
+ .vane-img[data-size="xl"] {
2743
+ --br-unit: 7;
2824
2744
  }
2825
- }
2826
- .max-tablet\:\[--gap-unit\:8\] {
2827
- @media (width < 48rem) {
2828
- --gap-unit: 8;
2745
+ .vane-list {
2746
+ --lh: 1.6;
2747
+ --py-unit: 3;
2829
2748
  }
2830
- }
2831
- .max-tablet\:\[--py-unit\:2\] {
2832
- @media (width < 48rem) {
2749
+ .vane-list[data-size="xs"] {
2750
+ --fs-unit: 6;
2751
+ --py-unit: 1;
2752
+ }
2753
+ .vane-list[data-size="sm"] {
2754
+ --fs-unit: 7;
2833
2755
  --py-unit: 2;
2834
2756
  }
2835
- }
2836
- .max-tablet\:\[--py-unit\:4\] {
2837
- @media (width < 48rem) {
2757
+ .vane-list[data-size="md"] {
2758
+ --fs-unit: 8;
2759
+ --py-unit: 3;
2760
+ }
2761
+ .vane-list[data-size="lg"] {
2762
+ --fs-unit: 9;
2838
2763
  --py-unit: 4;
2839
2764
  }
2840
- }
2841
- .max-mobile\:hidden {
2842
- @media (width < 40rem) {
2843
- display: none;
2765
+ .vane-list[data-size="xl"] {
2766
+ --fs-unit: 10;
2767
+ --py-unit: 5;
2844
2768
  }
2845
- }
2846
- .max-mobile\:flex-col {
2847
- @media (width < 40rem) {
2848
- flex-direction: column;
2769
+ .vane-text {
2770
+ --lh: 1.6;
2849
2771
  }
2850
- }
2851
- .sm\:grid-cols-2 {
2852
- @media (width >= 40rem) {
2853
- grid-template-columns: repeat(2, minmax(0, 1fr));
2772
+ .vane-text[data-size="xs"] {
2773
+ --fs-unit: 6;
2854
2774
  }
2855
- }
2856
- .md\:grid-cols-2 {
2857
- @media (width >= 48rem) {
2858
- grid-template-columns: repeat(2, minmax(0, 1fr));
2775
+ .vane-text[data-size="sm"] {
2776
+ --fs-unit: 7;
2859
2777
  }
2860
- }
2861
- .md\:grid-cols-3 {
2862
- @media (width >= 48rem) {
2863
- grid-template-columns: repeat(3, minmax(0, 1fr));
2778
+ .vane-text[data-size="md"] {
2779
+ --fs-unit: 8;
2864
2780
  }
2865
- }
2866
- .md\:grid-cols-4 {
2867
- @media (width >= 48rem) {
2868
- grid-template-columns: repeat(4, minmax(0, 1fr));
2781
+ .vane-text[data-size="lg"] {
2782
+ --fs-unit: 9;
2869
2783
  }
2870
- }
2871
- .lg\:grid-cols-4 {
2872
- @media (width >= 64rem) {
2873
- grid-template-columns: repeat(4, minmax(0, 1fr));
2784
+ .vane-text[data-size="xl"] {
2785
+ --fs-unit: 10;
2874
2786
  }
2875
- }
2876
- .lg\:grid-cols-5 {
2877
- @media (width >= 64rem) {
2878
- grid-template-columns: repeat(5, minmax(0, 1fr));
2787
+ .vane-link {
2788
+ --lh: 1.6;
2879
2789
  }
2880
- }
2881
- .lg\:grid-cols-6 {
2882
- @media (width >= 64rem) {
2883
- grid-template-columns: repeat(6, minmax(0, 1fr));
2790
+ .vane-link[data-size="xs"] {
2791
+ --fs-unit: 6;
2884
2792
  }
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));
2793
+ .vane-link[data-size="sm"] {
2794
+ --fs-unit: 7;
2795
+ }
2796
+ .vane-link[data-size="md"] {
2797
+ --fs-unit: 8;
2798
+ }
2799
+ .vane-link[data-size="lg"] {
2800
+ --fs-unit: 9;
2801
+ }
2802
+ .vane-link[data-size="xl"] {
2803
+ --fs-unit: 10;
2804
+ }
2805
+ .vane-list-item {
2806
+ --lh: 1.6;
2807
+ }
2808
+ .vane-list-item[data-size="xs"] {
2809
+ --fs-unit: 6;
2810
+ }
2811
+ .vane-list-item[data-size="sm"] {
2812
+ --fs-unit: 7;
2813
+ }
2814
+ .vane-list-item[data-size="md"] {
2815
+ --fs-unit: 8;
2816
+ }
2817
+ .vane-list-item[data-size="lg"] {
2818
+ --fs-unit: 9;
2819
+ }
2820
+ .vane-list-item[data-size="xl"] {
2821
+ --fs-unit: 10;
2822
+ }
2823
+ .vane-section {
2824
+ --lh: 1.6;
2825
+ --py-unit-desktop: 8;
2826
+ --py-unit-tablet: 6;
2827
+ --py-unit-mobile: 4;
2828
+ --gap-unit-desktop: 8;
2829
+ --gap-unit-tablet: 6;
2830
+ --gap-unit-mobile: 4;
2831
+ }
2832
+ .vane-section[data-size="xs"] {
2833
+ --py-unit-desktop: 4;
2834
+ --py-unit-tablet: 3;
2835
+ --py-unit-mobile: 2;
2836
+ --gap-unit-desktop: 4;
2837
+ --gap-unit-tablet: 3;
2838
+ --gap-unit-mobile: 2;
2839
+ }
2840
+ .vane-section[data-size="sm"] {
2841
+ --py-unit-desktop: 8;
2842
+ --py-unit-tablet: 4;
2843
+ --py-unit-mobile: 2;
2844
+ --gap-unit-desktop: 6;
2845
+ --gap-unit-tablet: 5;
2846
+ --gap-unit-mobile: 4;
2847
+ }
2848
+ .vane-section[data-size="md"] {
2849
+ --py-unit-desktop: 12;
2850
+ --py-unit-tablet: 6;
2851
+ --py-unit-mobile: 2;
2852
+ --gap-unit-desktop: 8;
2853
+ --gap-unit-tablet: 6;
2854
+ --gap-unit-mobile: 4;
2855
+ }
2856
+ .vane-section[data-size="lg"] {
2857
+ --py-unit-desktop: 16;
2858
+ --py-unit-tablet: 8;
2859
+ --py-unit-mobile: 2;
2860
+ --gap-unit-desktop: 10;
2861
+ --gap-unit-tablet: 8;
2862
+ --gap-unit-mobile: 6;
2863
+ }
2864
+ .vane-section[data-size="xl"] {
2865
+ --py-unit-desktop: 20;
2866
+ --py-unit-tablet: 10;
2867
+ --py-unit-mobile: 4;
2868
+ --gap-unit-desktop: 12;
2869
+ --gap-unit-tablet: 10;
2870
+ --gap-unit-mobile: 8;
2871
+ }
2872
+ .vane-title {
2873
+ --lh: 1.3;
2874
+ --fs-unit-desktop: 12;
2875
+ --fs-unit-tablet: 11;
2876
+ --fs-unit-mobile: 10;
2877
+ }
2878
+ .vane-title[data-size="xs"] {
2879
+ --fs-unit-desktop: 9;
2880
+ --fs-unit-tablet: 8;
2881
+ --fs-unit-mobile: 7;
2882
+ --lh: 1.556;
2883
+ }
2884
+ .vane-title[data-size="sm"] {
2885
+ --fs-unit-desktop: 10;
2886
+ --fs-unit-tablet: 9;
2887
+ --fs-unit-mobile: 8;
2888
+ --lh: 1.4;
2889
+ }
2890
+ .vane-title[data-size="md"] {
2891
+ --fs-unit-desktop: 12;
2892
+ --fs-unit-tablet: 11;
2893
+ --fs-unit-mobile: 10;
2894
+ --lh: 1.333;
2895
+ }
2896
+ .vane-title[data-size="lg"] {
2897
+ --fs-unit-desktop: 15;
2898
+ --fs-unit-tablet: 14;
2899
+ --fs-unit-mobile: 13;
2900
+ --lh: 1.2;
2901
+ }
2902
+ .vane-title[data-size="xl"] {
2903
+ --fs-unit-desktop: 18;
2904
+ --fs-unit-tablet: 17;
2905
+ --fs-unit-mobile: 16;
2906
+ --lh: 1.111;
2907
+ }
2908
+ .vane-section-title {
2909
+ --lh: 1.2;
2910
+ --fs-unit-desktop: 18;
2911
+ --fs-unit-tablet: 16;
2912
+ --fs-unit-mobile: 14;
2913
+ }
2914
+ .vane-section-title[data-size="xs"] {
2915
+ --fs-unit-desktop: 12;
2916
+ --fs-unit-tablet: 10;
2917
+ --fs-unit-mobile: 8;
2918
+ --lh: 1.333;
2919
+ }
2920
+ .vane-section-title[data-size="sm"] {
2921
+ --fs-unit-desktop: 15;
2922
+ --fs-unit-tablet: 13;
2923
+ --fs-unit-mobile: 11;
2924
+ --lh: 1.2;
2925
+ }
2926
+ .vane-section-title[data-size="md"] {
2927
+ --fs-unit-desktop: 18;
2928
+ --fs-unit-tablet: 16;
2929
+ --fs-unit-mobile: 14;
2930
+ --lh: 1.111;
2931
+ }
2932
+ .vane-section-title[data-size="lg"] {
2933
+ --fs-unit-desktop: 24;
2934
+ --fs-unit-tablet: 22;
2935
+ --fs-unit-mobile: 20;
2936
+ --lh: 1;
2937
+ }
2938
+ .vane-section-title[data-size="xl"] {
2939
+ --fs-unit-desktop: 30;
2940
+ --fs-unit-tablet: 28;
2941
+ --fs-unit-mobile: 26;
2942
+ --lh: 1;
2943
+ }
2944
+ .vane-page-title {
2945
+ --lh: 1.1;
2946
+ --fs-unit-desktop: 24;
2947
+ --fs-unit-tablet: 21;
2948
+ --fs-unit-mobile: 18;
2949
+ }
2950
+ .vane-page-title[data-size="xs"] {
2951
+ --fs-unit-desktop: 15;
2952
+ --fs-unit-tablet: 12;
2953
+ --fs-unit-mobile: 9;
2954
+ --lh: 1.2;
2955
+ }
2956
+ .vane-page-title[data-size="sm"] {
2957
+ --fs-unit-desktop: 18;
2958
+ --fs-unit-tablet: 15;
2959
+ --fs-unit-mobile: 12;
2960
+ --lh: 1.111;
2961
+ }
2962
+ .vane-page-title[data-size="md"] {
2963
+ --fs-unit-desktop: 24;
2964
+ --fs-unit-tablet: 21;
2965
+ --fs-unit-mobile: 18;
2966
+ --lh: 1;
2967
+ }
2968
+ .vane-page-title[data-size="lg"] {
2969
+ --fs-unit-desktop: 30;
2970
+ --fs-unit-tablet: 27;
2971
+ --fs-unit-mobile: 24;
2972
+ --lh: 1;
2973
+ }
2974
+ .vane-page-title[data-size="xl"] {
2975
+ --fs-unit-desktop: 36;
2976
+ --fs-unit-tablet: 33;
2977
+ --fs-unit-mobile: 30;
2978
+ --lh: 1;
2979
+ }
2980
+ [data-variant="outline"][data-appearance="primary"] {
2981
+ --text-color: var(--color-text-primary);
2982
+ --bg-color: var(--color-bg-primary);
2983
+ --bg-hover-color: var(--color-bg-hover-primary);
2984
+ --bg-active-color: var(--color-bg-active-primary);
2985
+ --border-color: var(--color-border-primary);
2986
+ --ring-color: var(--color-border-primary);
2987
+ --accent-color: var(--color-bg-primary);
2988
+ --checked-bg-color: var(--color-bg-primary);
2989
+ }
2990
+ [data-variant="outline"][data-appearance="brand"] {
2991
+ --text-color: var(--color-text-brand);
2992
+ --bg-color: var(--color-bg-brand);
2993
+ --bg-hover-color: var(--color-bg-hover-brand);
2994
+ --bg-active-color: var(--color-bg-active-brand);
2995
+ --border-color: var(--color-border-brand);
2996
+ --ring-color: var(--color-border-brand);
2997
+ --accent-color: var(--color-bg-brand);
2998
+ --checked-bg-color: var(--color-bg-brand);
2999
+ }
3000
+ [data-variant="outline"][data-appearance="secondary"] {
3001
+ --text-color: var(--color-text-secondary);
3002
+ --bg-color: var(--color-bg-secondary);
3003
+ --bg-hover-color: var(--color-bg-hover-secondary);
3004
+ --bg-active-color: var(--color-bg-active-secondary);
3005
+ --border-color: var(--color-border-secondary);
3006
+ --ring-color: var(--color-border-secondary);
3007
+ --accent-color: var(--color-bg-secondary);
3008
+ --checked-bg-color: var(--color-bg-secondary);
3009
+ }
3010
+ [data-variant="outline"][data-appearance="tertiary"] {
3011
+ --text-color: var(--color-text-tertiary);
3012
+ --bg-color: var(--color-bg-tertiary);
3013
+ --bg-hover-color: var(--color-bg-hover-tertiary);
3014
+ --bg-active-color: var(--color-bg-active-tertiary);
3015
+ --border-color: var(--color-border-tertiary);
3016
+ --ring-color: var(--color-border-tertiary);
3017
+ --accent-color: var(--color-bg-tertiary);
3018
+ --checked-bg-color: var(--color-bg-tertiary);
3019
+ }
3020
+ [data-variant="outline"][data-appearance="accent"] {
3021
+ --text-color: var(--color-text-accent);
3022
+ --bg-color: var(--color-bg-accent);
3023
+ --bg-hover-color: var(--color-bg-hover-accent);
3024
+ --bg-active-color: var(--color-bg-active-accent);
3025
+ --border-color: var(--color-border-accent);
3026
+ --ring-color: var(--color-border-accent);
3027
+ --accent-color: var(--color-bg-accent);
3028
+ --checked-bg-color: var(--color-bg-accent);
3029
+ }
3030
+ [data-variant="outline"][data-appearance="success"] {
3031
+ --text-color: var(--color-text-success);
3032
+ --bg-color: var(--color-bg-success);
3033
+ --bg-hover-color: var(--color-bg-hover-success);
3034
+ --bg-active-color: var(--color-bg-active-success);
3035
+ --border-color: var(--color-border-success);
3036
+ --ring-color: var(--color-border-success);
3037
+ --accent-color: var(--color-bg-success);
3038
+ --checked-bg-color: var(--color-bg-success);
3039
+ }
3040
+ [data-variant="outline"][data-appearance="danger"] {
3041
+ --text-color: var(--color-text-danger);
3042
+ --bg-color: var(--color-bg-danger);
3043
+ --bg-hover-color: var(--color-bg-hover-danger);
3044
+ --bg-active-color: var(--color-bg-active-danger);
3045
+ --border-color: var(--color-border-danger);
3046
+ --ring-color: var(--color-border-danger);
3047
+ --accent-color: var(--color-bg-danger);
3048
+ --checked-bg-color: var(--color-bg-danger);
3049
+ }
3050
+ [data-variant="outline"][data-appearance="warning"] {
3051
+ --text-color: var(--color-text-warning);
3052
+ --bg-color: var(--color-bg-warning);
3053
+ --bg-hover-color: var(--color-bg-hover-warning);
3054
+ --bg-active-color: var(--color-bg-active-warning);
3055
+ --border-color: var(--color-border-warning);
3056
+ --ring-color: var(--color-border-warning);
3057
+ --accent-color: var(--color-bg-warning);
3058
+ --checked-bg-color: var(--color-bg-warning);
3059
+ }
3060
+ [data-variant="outline"][data-appearance="info"] {
3061
+ --text-color: var(--color-text-info);
3062
+ --bg-color: var(--color-bg-info);
3063
+ --bg-hover-color: var(--color-bg-hover-info);
3064
+ --bg-active-color: var(--color-bg-active-info);
3065
+ --border-color: var(--color-border-info);
3066
+ --ring-color: var(--color-border-info);
3067
+ --accent-color: var(--color-bg-info);
3068
+ --checked-bg-color: var(--color-bg-info);
3069
+ }
3070
+ [data-variant="filled"][data-appearance="primary"] {
3071
+ --text-color: var(--color-text-filled-primary);
3072
+ --bg-color: var(--color-bg-filled-primary);
3073
+ --bg-hover-color: var(--color-bg-filled-hover-primary);
3074
+ --bg-active-color: var(--color-bg-filled-active-primary);
3075
+ --border-color: var(--color-border-filled-primary);
3076
+ --ring-color: var(--color-border-filled-primary);
3077
+ --accent-color: var(--color-bg-filled-primary);
3078
+ --checked-bg-color: var(--color-bg-filled-primary);
3079
+ }
3080
+ [data-variant="filled"][data-appearance="brand"] {
3081
+ --text-color: var(--color-text-filled-brand);
3082
+ --bg-color: var(--color-bg-filled-brand);
3083
+ --bg-hover-color: var(--color-bg-filled-hover-brand);
3084
+ --bg-active-color: var(--color-bg-filled-active-brand);
3085
+ --border-color: var(--color-border-filled-brand);
3086
+ --ring-color: var(--color-border-filled-brand);
3087
+ --accent-color: var(--color-bg-filled-brand);
3088
+ --checked-bg-color: var(--color-bg-filled-brand);
3089
+ }
3090
+ [data-variant="filled"][data-appearance="secondary"] {
3091
+ --text-color: var(--color-text-filled-secondary);
3092
+ --bg-color: var(--color-bg-filled-secondary);
3093
+ --bg-hover-color: var(--color-bg-filled-hover-secondary);
3094
+ --bg-active-color: var(--color-bg-filled-active-secondary);
3095
+ --border-color: var(--color-border-filled-secondary);
3096
+ --ring-color: var(--color-border-filled-secondary);
3097
+ --accent-color: var(--color-bg-filled-secondary);
3098
+ --checked-bg-color: var(--color-bg-filled-secondary);
3099
+ }
3100
+ [data-variant="filled"][data-appearance="tertiary"] {
3101
+ --text-color: var(--color-text-filled-tertiary);
3102
+ --bg-color: var(--color-bg-filled-tertiary);
3103
+ --bg-hover-color: var(--color-bg-filled-hover-tertiary);
3104
+ --bg-active-color: var(--color-bg-filled-active-tertiary);
3105
+ --border-color: var(--color-border-filled-tertiary);
3106
+ --ring-color: var(--color-border-filled-tertiary);
3107
+ --accent-color: var(--color-bg-filled-tertiary);
3108
+ --checked-bg-color: var(--color-bg-filled-tertiary);
3109
+ }
3110
+ [data-variant="filled"][data-appearance="accent"] {
3111
+ --text-color: var(--color-text-filled-accent);
3112
+ --bg-color: var(--color-bg-filled-accent);
3113
+ --bg-hover-color: var(--color-bg-filled-hover-accent);
3114
+ --bg-active-color: var(--color-bg-filled-active-accent);
3115
+ --border-color: var(--color-border-filled-accent);
3116
+ --ring-color: var(--color-border-filled-accent);
3117
+ --accent-color: var(--color-bg-filled-accent);
3118
+ --checked-bg-color: var(--color-bg-filled-accent);
3119
+ }
3120
+ [data-variant="filled"][data-appearance="success"] {
3121
+ --text-color: var(--color-text-filled-success);
3122
+ --bg-color: var(--color-bg-filled-success);
3123
+ --bg-hover-color: var(--color-bg-filled-hover-success);
3124
+ --bg-active-color: var(--color-bg-filled-active-success);
3125
+ --border-color: var(--color-border-filled-success);
3126
+ --ring-color: var(--color-border-filled-success);
3127
+ --accent-color: var(--color-bg-filled-success);
3128
+ --checked-bg-color: var(--color-bg-filled-success);
3129
+ }
3130
+ [data-variant="filled"][data-appearance="danger"] {
3131
+ --text-color: var(--color-text-filled-danger);
3132
+ --bg-color: var(--color-bg-filled-danger);
3133
+ --bg-hover-color: var(--color-bg-filled-hover-danger);
3134
+ --bg-active-color: var(--color-bg-filled-active-danger);
3135
+ --border-color: var(--color-border-filled-danger);
3136
+ --ring-color: var(--color-border-filled-danger);
3137
+ --accent-color: var(--color-bg-filled-danger);
3138
+ --checked-bg-color: var(--color-bg-filled-danger);
3139
+ }
3140
+ [data-variant="filled"][data-appearance="warning"] {
3141
+ --text-color: var(--color-text-filled-warning);
3142
+ --bg-color: var(--color-bg-filled-warning);
3143
+ --bg-hover-color: var(--color-bg-filled-hover-warning);
3144
+ --bg-active-color: var(--color-bg-filled-active-warning);
3145
+ --border-color: var(--color-border-filled-warning);
3146
+ --ring-color: var(--color-border-filled-warning);
3147
+ --accent-color: var(--color-bg-filled-warning);
3148
+ --checked-bg-color: var(--color-bg-filled-warning);
3149
+ }
3150
+ [data-variant="filled"][data-appearance="info"] {
3151
+ --text-color: var(--color-text-filled-info);
3152
+ --bg-color: var(--color-bg-filled-info);
3153
+ --bg-hover-color: var(--color-bg-filled-hover-info);
3154
+ --bg-active-color: var(--color-bg-filled-active-info);
3155
+ --border-color: var(--color-border-filled-info);
3156
+ --ring-color: var(--color-border-filled-info);
3157
+ --accent-color: var(--color-bg-filled-info);
3158
+ --checked-bg-color: var(--color-bg-filled-info);
3159
+ }
3160
+ [data-transparent="true"] {
3161
+ --bg-color: transparent;
3162
+ --bg-hover-color: transparent;
3163
+ --bg-active-color: transparent;
3164
+ --accent-color: transparent;
3165
+ --checked-bg-color: transparent;
3166
+ }
3167
+ .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"] {
3168
+ --text-color: transparent;
2900
3169
  }
2901
3170
  }
2902
3171
  }