vrembem 4.0.0-next.6 → 4.0.0-next.8

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 (15) hide show
  1. package/README.md +3 -7
  2. package/dev/index.css +1062 -865
  3. package/dev/index.css.map +1 -1
  4. package/dev/index.js +685 -685
  5. package/dev/index.js.map +1 -1
  6. package/dev/index.umd.cjs +685 -685
  7. package/dev/index.umd.cjs.map +1 -1
  8. package/dist/index.css +1 -1
  9. package/dist/index.css.map +1 -1
  10. package/dist/index.js +304 -304
  11. package/dist/index.js.map +1 -1
  12. package/dist/index.umd.cjs +3 -3
  13. package/dist/index.umd.cjs.map +1 -1
  14. package/index.js +4 -4
  15. package/package.json +23 -23
package/dev/index.css CHANGED
@@ -20,8 +20,8 @@ html {
20
20
  }
21
21
 
22
22
  body {
23
- background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
24
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
23
+ background: var(--vb-background);
24
+ color: var(--vb-foreground);
25
25
  font-family: blinkmacsystemfont, -apple-system, system-ui, "Segoe UI", "Roboto", "Helvetica Neue", arial, sans-serif;
26
26
  }
27
27
 
@@ -72,7 +72,7 @@ table {
72
72
 
73
73
  caption {
74
74
  caption-side: bottom;
75
- color: var(--vb-foreground-lighter, var(--vb-neutral-60, hsl(214, 20%, 60%)));
75
+ color: var(--vb-foreground-lighter);
76
76
  text-align: left;
77
77
  }
78
78
 
@@ -158,7 +158,7 @@ input::-moz-placeholder {
158
158
  .blockquote {
159
159
  position: relative;
160
160
  padding: 1.5em;
161
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
161
+ border: 1px solid var(--vb-border-color);
162
162
  color: inherit;
163
163
  }
164
164
  .blockquote > * + * {
@@ -171,13 +171,17 @@ input::-moz-placeholder {
171
171
  bottom: -1px;
172
172
  left: -1px;
173
173
  width: 4px;
174
- background-color: var(--vb-primary-50, hsl(152, 60%, 50%));
174
+ background-color: var(--vb-primary-50);
175
175
  }
176
176
 
177
177
  .code {
178
- color: var(--vb-secondary-50, hsl(214, 50%, 50%));
178
+ margin-block: -0.125rem;
179
+ padding: 0.125rem 0.375rem;
180
+ border-radius: 0.25rem;
181
+ background: var(--vb-background-alt);
182
+ color: var(--vb-foreground-alt);
179
183
  font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
180
- font-size: 16px;
184
+ font-size: 0.875rem;
181
185
  word-break: break-word;
182
186
  }
183
187
 
@@ -241,19 +245,19 @@ input::-moz-placeholder {
241
245
  }
242
246
 
243
247
  .link {
244
- color: var(--vb-primary-50, hsl(152, 60%, 50%));
248
+ color: var(--vb-primary-50);
245
249
  text-decoration: underline;
246
250
  text-decoration-thickness: 1px;
247
251
  text-underline-offset: 2px;
248
252
  }
249
253
  .link:hover {
250
- color: var(--vb-primary-40, hsl(152, 60%, 40%));
254
+ color: var(--vb-primary-40);
251
255
  text-decoration: none;
252
256
  }
253
257
  .link:focus {
254
258
  outline: currentcolor dotted 1px;
255
259
  outline-offset: 0.125rem;
256
- color: var(--vb-primary-40, hsl(152, 60%, 40%));
260
+ color: var(--vb-primary-40);
257
261
  text-decoration: none;
258
262
  }
259
263
 
@@ -277,8 +281,8 @@ input::-moz-placeholder {
277
281
  padding: 1em;
278
282
  overflow: auto;
279
283
  border-radius: 0.25rem;
280
- background: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%)));
281
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
284
+ background: var(--vb-background-dark);
285
+ color: var(--vb-foreground);
282
286
  font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
283
287
  }
284
288
  .pre code {
@@ -300,21 +304,32 @@ input::-moz-placeholder {
300
304
  display: block;
301
305
  height: 0;
302
306
  border: none;
303
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
307
+ border-top: 1px solid var(--vb-border-color);
308
+ }
309
+
310
+ .sr-only {
311
+ position: absolute;
312
+ width: 1px;
313
+ height: 1px;
314
+ margin: -1px;
315
+ padding: 0;
316
+ overflow: hidden;
317
+ clip: rect(1px, 1px, 1px, 1px);
318
+ clip-path: inset(50%);
304
319
  }
305
320
 
306
321
  .type {
307
- color: var(--vb-foreground-light, var(--vb-neutral-40, hsl(214, 20%, 40%)));
322
+ color: var(--vb-foreground-light);
308
323
  font-size: 1.125rem;
309
324
  line-height: 1.7778;
310
325
  }
311
- .type h1,
312
- .type h2,
313
- .type h3,
314
- .type h4,
315
- .type h5,
316
- .type h6 {
317
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
326
+ .type > h1,
327
+ .type > h2,
328
+ .type > h3,
329
+ .type > h4,
330
+ .type > h5,
331
+ .type > h6 {
332
+ color: var(--vb-foreground);
318
333
  font-family: inherit;
319
334
  font-weight: 600;
320
335
  line-height: 1.375;
@@ -339,37 +354,37 @@ input::-moz-placeholder {
339
354
  font-size: 1em;
340
355
  line-height: inherit;
341
356
  }
342
- .type > a,
343
- .type > :not(div) a {
344
- color: var(--vb-primary-50, hsl(152, 60%, 50%));
357
+ .type :not(div) > a {
358
+ color: var(--vb-primary-50);
345
359
  text-decoration: underline;
346
360
  text-decoration-thickness: 1px;
347
361
  text-underline-offset: 2px;
348
362
  }
349
- .type > a:hover,
350
- .type > :not(div) a:hover {
351
- color: var(--vb-primary-40, hsl(152, 60%, 40%));
363
+ .type :not(div) > a:hover {
364
+ color: var(--vb-primary-40);
352
365
  text-decoration: none;
353
366
  }
354
- .type > a:focus,
355
- .type > :not(div) a:focus {
367
+ .type :not(div) > a:focus {
356
368
  outline: currentcolor dotted 1px;
357
369
  outline-offset: 0.125rem;
358
- color: var(--vb-primary-40, hsl(152, 60%, 40%));
370
+ color: var(--vb-primary-40);
359
371
  text-decoration: none;
360
372
  }
361
- .type > code,
362
- .type > :not(div) code {
363
- color: var(--vb-secondary-50, hsl(214, 50%, 50%));
373
+ .type :not(pre) > code {
374
+ margin-block: -0.125rem;
375
+ padding: 0.125rem 0.375rem;
376
+ border-radius: 0.25rem;
377
+ background: var(--vb-background-alt);
378
+ color: var(--vb-foreground-alt);
364
379
  font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
365
- font-size: 16px;
380
+ font-size: 0.875rem;
366
381
  word-break: break-word;
367
382
  }
368
383
  .type > hr {
369
384
  display: block;
370
385
  height: 0;
371
386
  border: none;
372
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
387
+ border-top: 1px solid var(--vb-border-color);
373
388
  }
374
389
  .type > ul,
375
390
  .type > ol {
@@ -390,7 +405,7 @@ input::-moz-placeholder {
390
405
  .type > blockquote {
391
406
  position: relative;
392
407
  padding: 1.5em;
393
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
408
+ border: 1px solid var(--vb-border-color);
394
409
  color: inherit;
395
410
  }
396
411
  .type > blockquote > * + * {
@@ -403,14 +418,14 @@ input::-moz-placeholder {
403
418
  bottom: -1px;
404
419
  left: -1px;
405
420
  width: 4px;
406
- background-color: var(--vb-primary-50, hsl(152, 60%, 50%));
421
+ background-color: var(--vb-primary-50);
407
422
  }
408
423
  .type > pre {
409
424
  padding: 1em;
410
425
  overflow: auto;
411
426
  border-radius: 0.25rem;
412
- background: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%)));
413
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
427
+ background: var(--vb-background-dark);
428
+ color: var(--vb-foreground);
414
429
  font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
415
430
  }
416
431
  .type > pre code {
@@ -421,7 +436,7 @@ input::-moz-placeholder {
421
436
  font-size: 16px;
422
437
  }
423
438
 
424
- :root {
439
+ :root, .vb-theme-root {
425
440
  --vb-button-size: 2.5rem;
426
441
  --vb-button-padding: calc(0.5em - 1px) 1em;
427
442
  --vb-button-gap: 0.5rem;
@@ -429,26 +444,72 @@ input::-moz-placeholder {
429
444
  --vb-button-border-radius: 0.25rem;
430
445
  --vb-button-font-size: 1em;
431
446
  --vb-button-font-weight: inherit;
432
- --vb-button-line-height: 1.625;
447
+ --vb-button-line-height: 1.6;
433
448
  --vb-button-transition-property: background, color, border-color, box-shadow;
434
449
  --vb-button-transition-duration: 0.15s;
435
450
  --vb-button-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
436
- --vb-button-background: transparent;
437
- --vb-button-background-hover: transparent;
438
- --vb-button-background-active: transparent;
439
- --vb-button-foreground: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
440
- --vb-button-foreground-hover: ;
441
- --vb-button-foreground-active: ;
442
- --vb-button-border-color: var(--vb-border-color-dark, rgba(0, 0, 0, 0.2));
443
- --vb-button-border-color-hover: var(--vb-border-color-darker, rgba(0, 0, 0, 0.3));
444
- --vb-button-border-color-active: ;
445
- --vb-button-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
446
- --vb-button-box-shadow-focus: 0 0 0 0.2rem rgba(0, 0, 0, 0.15);
451
+ --vb-button-disabled-opacity: 0.6;
447
452
  --vb-button-loading-size: 1em;
448
453
  --vb-button-loading-border: 2px solid;
449
454
  --vb-button-loading-animation-duration: 0.6s;
450
455
  --vb-button-loading-animation-timing-function: linear;
451
- --vb-button-disabled-opacity: 0.6;
456
+ }
457
+
458
+ :root, .vb-theme-root {
459
+ --vb-button-background: transparent;
460
+ --vb-button-background-hover: transparent;
461
+ --vb-button-background-focus: transparent;
462
+ --vb-button-foreground: var(--vb-foreground);
463
+ --vb-button-foreground-hover: var(--vb-foreground);
464
+ --vb-button-foreground-focus: var(--vb-foreground);
465
+ --vb-button-border-color: var(--vb-border-color-dark);
466
+ --vb-button-border-color-hover: var(--vb-border-color-darker);
467
+ --vb-button-border-color-focus: var(--vb-border-color-darker);
468
+ --vb-button-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
469
+ --vb-button-box-shadow-focus: 0 0 0 0.2rem rgba(0, 0, 0, 0.15);
470
+ }
471
+ @media (prefers-color-scheme: dark) {
472
+ :root, .vb-theme-root {
473
+ --vb-button-background: transparent;
474
+ --vb-button-background-hover: transparent;
475
+ --vb-button-background-focus: transparent;
476
+ --vb-button-foreground: var(--vb-foreground);
477
+ --vb-button-foreground-hover: var(--vb-foreground);
478
+ --vb-button-foreground-focus: var(--vb-foreground);
479
+ --vb-button-border-color: var(--vb-border-color-dark);
480
+ --vb-button-border-color-hover: var(--vb-border-color-darker);
481
+ --vb-button-border-color-focus: var(--vb-border-color-darker);
482
+ --vb-button-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
483
+ --vb-button-box-shadow-focus: 0 0 0 0.2rem rgba(255, 255, 255, 0.15);
484
+ }
485
+ }
486
+
487
+ .vb-theme-light {
488
+ --vb-button-background: transparent;
489
+ --vb-button-background-hover: transparent;
490
+ --vb-button-background-focus: transparent;
491
+ --vb-button-foreground: var(--vb-foreground);
492
+ --vb-button-foreground-hover: var(--vb-foreground);
493
+ --vb-button-foreground-focus: var(--vb-foreground);
494
+ --vb-button-border-color: var(--vb-border-color-dark);
495
+ --vb-button-border-color-hover: var(--vb-border-color-darker);
496
+ --vb-button-border-color-focus: var(--vb-border-color-darker);
497
+ --vb-button-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
498
+ --vb-button-box-shadow-focus: 0 0 0 0.2rem rgba(0, 0, 0, 0.15);
499
+ }
500
+
501
+ .vb-theme-dark {
502
+ --vb-button-background: transparent;
503
+ --vb-button-background-hover: transparent;
504
+ --vb-button-background-focus: transparent;
505
+ --vb-button-foreground: var(--vb-foreground);
506
+ --vb-button-foreground-hover: var(--vb-foreground);
507
+ --vb-button-foreground-focus: var(--vb-foreground);
508
+ --vb-button-border-color: var(--vb-border-color-dark);
509
+ --vb-button-border-color-hover: var(--vb-border-color-darker);
510
+ --vb-button-border-color-focus: var(--vb-border-color-darker);
511
+ --vb-button-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
512
+ --vb-button-box-shadow-focus: 0 0 0 0.2rem rgba(255, 255, 255, 0.15);
452
513
  }
453
514
 
454
515
  .button {
@@ -473,7 +534,7 @@ input::-moz-placeholder {
473
534
  font-family: inherit;
474
535
  font-size: var(--vb-button-font-size);
475
536
  font-weight: var(--vb-button-font-weight);
476
- line-height: var(--vb-button-font-height);
537
+ line-height: var(--vb-button-line-height);
477
538
  text-decoration: none;
478
539
  white-space: nowrap;
479
540
  cursor: pointer;
@@ -482,17 +543,14 @@ input::-moz-placeholder {
482
543
  opacity: var(--vb-button-disabled-opacity);
483
544
  pointer-events: none;
484
545
  }
485
- .button:hover {
546
+ .button:hover, .button:focus-visible {
486
547
  border-color: var(--vb-button-border-color-hover);
487
548
  background-color: var(--vb-button-background-hover);
488
- box-shadow: var(--vb-button-box-shadow-hover);
549
+ box-shadow: var(--vb-button-box-shadow);
489
550
  color: var(--vb-button-foreground-hover);
490
551
  }
491
552
  .button:focus-visible {
492
- border-color: var(--vb-button-border-color-hover);
493
- background-color: var(--vb-button-background-hover);
494
553
  box-shadow: var(--vb-button-box-shadow-focus);
495
- color: var(--vb-button-foreground-hover);
496
554
  }
497
555
  .button:active {
498
556
  border-color: var(--vb-button-border-color-active);
@@ -586,59 +644,59 @@ input::-moz-placeholder {
586
644
  }
587
645
  }
588
646
  .button_color_primary {
589
- --vb-button-background: var(--vb-primary-50, hsl(152, 60%, 50%));
590
- --vb-button-background-hover: var(--vb-primary-40, hsl(152, 60%, 40%));
591
- --vb-button-background-active: var(--vb-primary-30, hsl(152, 60%, 30%));
647
+ --vb-button-background: var(--vb-primary-50);
648
+ --vb-button-background-hover: var(--vb-primary-40);
649
+ --vb-button-background-active: var(--vb-primary-30);
592
650
  --vb-button-foreground: white;
593
651
  --vb-button-foreground-hover: white;
594
652
  --vb-button-foreground-active: white;
595
653
  --vb-button-border-color: transparent;
596
654
  --vb-button-border-color-hover: transparent;
597
655
  --vb-button-border-color-active: transparent;
598
- --vb-button-box-shadow: 0 0 0 0 hsl(152deg, 60%, 50%, 0%);
599
- --vb-button-box-shadow-focus: 0 0 0 0.2rem hsl(152deg, 60%, 50%, 50%);
656
+ --vb-button-box-shadow: 0 0 0 0 hsl(var(--vb-primary-hs) 50% / 0%);
657
+ --vb-button-box-shadow-focus: 0 0 0 0.2rem hsl(var(--vb-primary-hs) 50% / 50%);
600
658
  }
601
659
 
602
660
  .button_color_secondary {
603
- --vb-button-background: var(--vb-secondary-50, hsl(214, 50%, 50%));
604
- --vb-button-background-hover: var(--vb-secondary-40, hsl(214, 50%, 40%));
605
- --vb-button-background-active: var(--vb-secondary-30, hsl(214, 50%, 30%));
661
+ --vb-button-background: var(--vb-secondary-50);
662
+ --vb-button-background-hover: var(--vb-secondary-40);
663
+ --vb-button-background-active: var(--vb-secondary-30);
606
664
  --vb-button-foreground: white;
607
665
  --vb-button-foreground-hover: white;
608
666
  --vb-button-foreground-active: white;
609
667
  --vb-button-border-color: transparent;
610
668
  --vb-button-border-color-hover: transparent;
611
669
  --vb-button-border-color-active: transparent;
612
- --vb-button-box-shadow: 0 0 0 0 hsl(214deg, 50%, 50%, 0%);
613
- --vb-button-box-shadow-focus: 0 0 0 0.2rem hsl(214deg, 50%, 50%, 50%);
670
+ --vb-button-box-shadow: 0 0 0 0 hsl(var(--vb-secondary-hs) 50% / 0%);
671
+ --vb-button-box-shadow-focus: 0 0 0 0.2rem hsl(var(--vb-secondary-hs) 50% / 50%);
614
672
  }
615
673
 
616
674
  .button_color_neutral {
617
- --vb-button-background: var(--vb-neutral-50, hsl(214, 20%, 50%));
618
- --vb-button-background-hover: var(--vb-neutral-40, hsl(214, 20%, 40%));
619
- --vb-button-background-active: var(--vb-neutral-30, hsl(214, 20%, 30%));
675
+ --vb-button-background: var(--vb-neutral-50);
676
+ --vb-button-background-hover: var(--vb-neutral-40);
677
+ --vb-button-background-active: var(--vb-neutral-30);
620
678
  --vb-button-foreground: white;
621
679
  --vb-button-foreground-hover: white;
622
680
  --vb-button-foreground-active: white;
623
681
  --vb-button-border-color: transparent;
624
682
  --vb-button-border-color-hover: transparent;
625
683
  --vb-button-border-color-active: transparent;
626
- --vb-button-box-shadow: 0 0 0 0 hsl(214deg, 20%, 50%, 0%);
627
- --vb-button-box-shadow-focus: 0 0 0 0.2rem hsl(214deg, 20%, 50%, 50%);
684
+ --vb-button-box-shadow: 0 0 0 0 hsl(var(--vb-neutral-hs) 50% / 0%);
685
+ --vb-button-box-shadow-focus: 0 0 0 0.2rem hsl(var(--vb-neutral-hs) 50% / 50%);
628
686
  }
629
687
 
630
688
  .button_color_important {
631
- --vb-button-background: var(--vb-important-50, hsl(0, 80%, 50%));
632
- --vb-button-background-hover: var(--vb-important-40, hsl(0, 80%, 40%));
633
- --vb-button-background-active: var(--vb-important-30, hsl(0, 80%, 30%));
689
+ --vb-button-background: var(--vb-important-50);
690
+ --vb-button-background-hover: var(--vb-important-40);
691
+ --vb-button-background-active: var(--vb-important-30);
634
692
  --vb-button-foreground: white;
635
693
  --vb-button-foreground-hover: white;
636
694
  --vb-button-foreground-active: white;
637
695
  --vb-button-border-color: transparent;
638
696
  --vb-button-border-color-hover: transparent;
639
697
  --vb-button-border-color-active: transparent;
640
- --vb-button-box-shadow: 0 0 0 0 hsl(0deg, 80%, 50%, 0%);
641
- --vb-button-box-shadow-focus: 0 0 0 0.2rem hsl(0deg, 80%, 50%, 50%);
698
+ --vb-button-box-shadow: 0 0 0 0 hsl(var(--vb-important-hs) 50% / 0%);
699
+ --vb-button-box-shadow-focus: 0 0 0 0.2rem hsl(var(--vb-important-hs) 50% / 50%);
642
700
  }
643
701
 
644
702
  .button_icon {
@@ -665,17 +723,85 @@ input::-moz-placeholder {
665
723
  --vb-button-line-height: 1.875;
666
724
  }
667
725
 
726
+ :root, .vb-theme-root {
727
+ --vb-card-padding: 1.25em;
728
+ --vb-card-border-radius: 0.25rem;
729
+ --vb-card-box-shadow: 0 1px 3px var(--vb-shadow-color);
730
+ --vb-card-link-box-shadow: 0 2px 6px var(--vb-shadow-color);
731
+ --vb-card-link-box-shadow-hover: 0 4px 12px var(--vb-shadow-color);
732
+ --vb-card-link-offset: -0.25em;
733
+ --vb-card-title-font-size: 1.125rem;
734
+ --vb-card-title-line-height: 1.875;
735
+ --vb-card-title-font-weight: 600;
736
+ --vb-card-transition-property: background-color, border-color, box-shadow, transform;
737
+ --vb-card-transition-duration: 0.3s;
738
+ --vb-card-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
739
+ }
740
+
741
+ :root, .vb-theme-root {
742
+ --vb-card-background: var(--vb-background);
743
+ --vb-card-foreground: var(--vb-foreground-light);
744
+ --vb-card-border: 1px solid var(--vb-border-color);
745
+ --vb-card-sep-border: 1px solid var(--vb-border-color);
746
+ --vb-card-title-color: var(--vb-foreground);
747
+ --vb-card-screen-background: var(--vb-background);
748
+ --vb-card-screen-opacity: 0.9;
749
+ }
750
+ @media (prefers-color-scheme: dark) {
751
+ :root, .vb-theme-root {
752
+ --vb-card-background: var(--vb-background-darker);
753
+ --vb-card-foreground: var(--vb-foreground-light);
754
+ --vb-card-border: 1px solid var(--vb-border-color);
755
+ --vb-card-sep-border: 1px solid var(--vb-border-color);
756
+ --vb-card-title-color: var(--vb-foreground);
757
+ --vb-card-screen-background: var(--vb-background-darker);
758
+ --vb-card-screen-opacity: 0.8;
759
+ }
760
+ }
761
+
762
+ .vb-theme-light {
763
+ --vb-card-background: var(--vb-background);
764
+ --vb-card-foreground: var(--vb-foreground-light);
765
+ --vb-card-border: 1px solid var(--vb-border-color);
766
+ --vb-card-sep-border: 1px solid var(--vb-border-color);
767
+ --vb-card-title-color: var(--vb-foreground);
768
+ --vb-card-screen-background: var(--vb-background);
769
+ --vb-card-screen-opacity: 0.9;
770
+ }
771
+
772
+ .vb-theme-dark {
773
+ --vb-card-background: var(--vb-background-darker);
774
+ --vb-card-foreground: var(--vb-foreground-light);
775
+ --vb-card-border: 1px solid var(--vb-border-color);
776
+ --vb-card-sep-border: 1px solid var(--vb-border-color);
777
+ --vb-card-title-color: var(--vb-foreground);
778
+ --vb-card-screen-background: var(--vb-background-darker);
779
+ --vb-card-screen-opacity: 0.8;
780
+ }
781
+
668
782
  .card {
669
783
  position: relative;
670
784
  display: flex;
671
785
  flex-direction: column;
672
786
  overflow: hidden;
673
- transition-property: background-color, border-color, box-shadow, transform;
674
- transition-duration: 0.3s;
675
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
676
- border-radius: 0.25rem;
677
- background: white;
678
- box-shadow: 0 1px 3px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
787
+ transition-property: var(--vb-card-transition-property);
788
+ transition-duration: var(--vb-card-transition-duration);
789
+ transition-timing-function: var(--vb-card-transition-timing-function);
790
+ border: var(--vb-card-border);
791
+ border-radius: var(--vb-card-border-radius);
792
+ background: var(--vb-card-background);
793
+ background-clip: padding-box;
794
+ box-shadow: var(--vb-card-box-shadow);
795
+ color: var(--vb-card-foreground);
796
+ }
797
+
798
+ a.card {
799
+ transform: translate(0, 0);
800
+ box-shadow: var(--vb-card-link-box-shadow);
801
+ }
802
+ a.card:hover, a.card:focus, a.card:focus-within {
803
+ transform: translate(0, var(--vb-card-link-offset));
804
+ box-shadow: var(--vb-card-link-box-shadow-hover);
679
805
  }
680
806
 
681
807
  .card__header,
@@ -685,55 +811,54 @@ input::-moz-placeholder {
685
811
  position: relative;
686
812
  z-index: 3;
687
813
  }
814
+ .card__header:first-child,
815
+ .card__body:first-child,
816
+ .card__footer:first-child,
817
+ .card__image:first-child {
818
+ border-top-left-radius: var(--vb-card-border-radius);
819
+ border-top-right-radius: var(--vb-card-border-radius);
820
+ }
821
+ .card__header:last-child,
822
+ .card__body:last-child,
823
+ .card__footer:last-child,
824
+ .card__image:last-child {
825
+ border-bottom-left-radius: var(--vb-card-border-radius);
826
+ border-bottom-right-radius: var(--vb-card-border-radius);
827
+ }
688
828
 
689
- .card__body,
690
829
  .card__header,
830
+ .card__body,
691
831
  .card__footer {
692
- padding: 1.25em;
832
+ padding: var(--vb-card-padding);
693
833
  }
694
834
 
695
835
  .card__body {
696
836
  flex: 1 1 auto;
697
837
  }
698
838
  .card__body + .card__body {
699
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
700
- }
701
-
702
- .card__image {
703
- flex: 0 1 auto;
704
- width: 100%;
705
- height: auto;
706
- }
707
- .card__image:first-child {
708
- border-top-left-radius: 0.25rem;
709
- border-top-right-radius: 0.25rem;
710
- }
711
- .card__image:last-child {
712
- border-bottom-left-radius: 0.25rem;
713
- border-bottom-right-radius: 0.25rem;
839
+ border-top: var(--vb-card-sep-border);
714
840
  }
715
841
 
716
842
  .card__header {
717
- border-bottom: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
718
- }
719
- .card__header:first-child {
720
- border-top-left-radius: 0.25rem;
721
- border-top-right-radius: 0.25rem;
843
+ border-bottom: var(--vb-card-sep-border);
722
844
  }
723
845
 
724
846
  .card__footer {
725
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
847
+ border-top: var(--vb-card-sep-border);
726
848
  }
727
- .card__footer:last-child {
728
- border-bottom-left-radius: 0.25rem;
729
- border-bottom-right-radius: 0.25rem;
849
+
850
+ .card__image {
851
+ flex: 0 1 auto;
852
+ width: 100%;
853
+ height: auto;
730
854
  }
731
855
 
732
856
  .card__title {
733
857
  flex-grow: 1;
734
- font-size: 1.125rem;
735
- font-weight: 600;
736
- line-height: 1.875;
858
+ color: var(--vb-card-title-color);
859
+ font-size: var(--vb-card-title-font-size);
860
+ font-weight: var(--vb-card-title-font-weight);
861
+ line-height: var(--vb-card-title-line-height);
737
862
  }
738
863
 
739
864
  .card__background,
@@ -742,10 +867,10 @@ input::-moz-placeholder {
742
867
  height: 100%;
743
868
  position: absolute;
744
869
  inset: 0;
745
- transition-property: background-color, border-color, box-shadow, transform;
746
- transition-duration: 0.3s;
747
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
748
- border-radius: 0.25rem;
870
+ transition-property: var(--vb-card-transition-property);
871
+ transition-duration: var(--vb-card-transition-duration);
872
+ transition-timing-function: var(--vb-card-transition-timing-function);
873
+ border-radius: var(--vb-card-border-radius);
749
874
  }
750
875
 
751
876
  .card__background {
@@ -755,45 +880,50 @@ input::-moz-placeholder {
755
880
 
756
881
  .card__screen {
757
882
  z-index: 2;
758
- background: var(--vb-neutral-10, hsl(214, 20%, 10%));
759
- opacity: 0.7;
883
+ background: var(--vb-card-screen-background);
884
+ opacity: var(--vb-card-screen-opacity);
760
885
  }
761
886
 
762
- @media (min-width: 760px) {
763
- .card_fade .card__header,
764
- .card_fade .card__body,
765
- .card_fade .card__footer,
766
- .card_fade .card__screen {
767
- transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
768
- opacity: 0;
769
- }
770
- .card_fade:hover .card__header,
771
- .card_fade:hover .card__body,
772
- .card_fade:hover .card__footer, .card_fade:focus .card__header,
773
- .card_fade:focus .card__body,
774
- .card_fade:focus .card__footer, .card_fade:focus-within .card__header,
775
- .card_fade:focus-within .card__body,
776
- .card_fade:focus-within .card__footer {
777
- opacity: 1;
778
- }
779
- .card_fade:hover .card__screen, .card_fade:focus .card__screen, .card_fade:focus-within .card__screen {
780
- opacity: 0.7;
781
- }
782
- }
783
- .card_link {
784
- transform: translate(0, 0);
785
- box-shadow: 0 2px 6px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
887
+ :root, .vb-theme-root {
888
+ --vb-checkbox-size: 2.5rem;
889
+ --vb-checkbox-box-size: 18px;
890
+ --vb-checkbox-icon-size: 12px;
891
+ --vb-checkbox-color: var(--vb-primary-50);
892
+ --vb-checkbox-icon-stroke: 2.5;
893
+ --vb-checkbox-border-width: 2px;
894
+ --vb-checkbox-border-radius: 0.25rem;
895
+ --vb-checkbox-background-border-radius: 9999px;
896
+ --vb-checkbox-background-opacity: 0%;
897
+ --vb-checkbox-background-opacity-hover: 20%;
898
+ --vb-checkbox-background-opacity-focus: 20%;
899
+ --vb-checkbox-background-opacity-active: 30%;
900
+ --vb-checkbox-transition-duration: 0.15s;
901
+ --vb-checkbox-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
902
+ }
903
+
904
+ :root, .vb-theme-root {
905
+ --vb-checkbox-fill: white;
906
+ --vb-checkbox-border-color: var(--vb-neutral-50);
907
+ --vb-checkbox-icon-color: white;
786
908
  }
787
- .card_link:hover, .card_link:focus, .card_link:focus-within {
788
- transform: translate(0, -0.25em);
789
- box-shadow: 0 4px 12px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
909
+ @media (prefers-color-scheme: dark) {
910
+ :root, .vb-theme-root {
911
+ --vb-checkbox-fill: var(--vb-neutral-10);
912
+ --vb-checkbox-border-color: var(--vb-neutral-80);
913
+ --vb-checkbox-icon-color: var(--vb-neutral-10);
914
+ }
790
915
  }
791
916
 
792
- .card_zoom .card__background {
793
- transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
917
+ .vb-theme-light {
918
+ --vb-checkbox-fill: white;
919
+ --vb-checkbox-border-color: var(--vb-neutral-50);
920
+ --vb-checkbox-icon-color: white;
794
921
  }
795
- .card_zoom:hover .card__background, .card_zoom:focus .card__background, .card_zoom:focus-within .card__background {
796
- transform: scale(1.1);
922
+
923
+ .vb-theme-dark {
924
+ --vb-checkbox-fill: var(--vb-neutral-10);
925
+ --vb-checkbox-border-color: var(--vb-neutral-80);
926
+ --vb-checkbox-icon-color: var(--vb-neutral-10);
797
927
  }
798
928
 
799
929
  .checkbox {
@@ -806,36 +936,37 @@ input::-moz-placeholder {
806
936
  }
807
937
 
808
938
  .checkbox__background {
809
- width: 2.5rem;
810
- height: 2.5rem;
939
+ width: var(--vb-checkbox-size);
940
+ height: var(--vb-checkbox-size);
811
941
  position: relative;
812
942
  z-index: 1;
813
943
  display: flex;
814
944
  align-items: center;
815
945
  justify-content: center;
816
- border-radius: 9999px;
817
- background-color: transparent;
946
+ border-radius: var(--vb-checkbox-background-border-radius);
947
+ background-color: hsl(from var(--vb-checkbox-color) h s l/var(--vb-checkbox-background-opacity));
818
948
  }
819
949
 
820
950
  .checkbox__box {
821
- width: 18px;
822
- height: 18px;
951
+ width: var(--vb-checkbox-box-size);
952
+ height: var(--vb-checkbox-box-size);
823
953
  display: flex;
824
954
  align-items: center;
825
955
  justify-content: center;
826
- border: 2px solid var(--vb-neutral-50, hsl(214, 20%, 50%));
827
- border-radius: 0.25rem;
828
- background-color: white;
956
+ border: var(--vb-checkbox-border-width) solid var(--vb-checkbox-border-color);
957
+ border-radius: var(--vb-checkbox-border-radius);
958
+ background-color: var(--vb-checkbox-fill);
829
959
  color: transparent;
830
960
  }
831
961
 
832
962
  .checkbox__icon {
833
- width: 12px;
834
- height: 12px;
835
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" stroke="%23FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9.5,3 4.5,8.5 2,6"></polyline></svg>');
836
- background-repeat: no-repeat;
837
- background-position: center -12px;
838
- background-size: 100%;
963
+ width: var(--vb-checkbox-icon-size);
964
+ height: var(--vb-checkbox-icon-size);
965
+ background-color: var(--vb-checkbox-icon-color);
966
+ mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9.5,3 4.5,8.5 2,6"></polyline></svg>');
967
+ mask-repeat: no-repeat;
968
+ mask-position: center calc(var(--vb-checkbox-icon-size) * -1);
969
+ mask-size: 100%;
839
970
  opacity: 0;
840
971
  }
841
972
 
@@ -850,94 +981,129 @@ input::-moz-placeholder {
850
981
  cursor: pointer;
851
982
  }
852
983
  .checkbox__native:hover + .checkbox__background {
853
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.1);
984
+ background-color: hsl(from var(--vb-checkbox-color) h s l/var(--vb-checkbox-background-opacity-hover));
854
985
  }
855
986
  .checkbox__native:hover + .checkbox__background .checkbox__box {
856
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
987
+ border-color: var(--vb-checkbox-color);
988
+ background-color: var(--vb-checkbox-fill);
857
989
  }
858
990
  .checkbox__native:focus + .checkbox__background {
859
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.1);
991
+ background-color: hsl(from var(--vb-checkbox-color) h s l/var(--vb-checkbox-background-opacity-focus));
860
992
  }
861
993
  .checkbox__native:focus + .checkbox__background .checkbox__box {
862
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
994
+ border-color: var(--vb-checkbox-color);
995
+ background-color: var(--vb-checkbox-fill);
863
996
  }
864
997
  .checkbox__native:focus-visible + .checkbox__background, .checkbox__native:active + .checkbox__background {
865
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.2);
998
+ background-color: hsl(from var(--vb-checkbox-color) h s l/var(--vb-checkbox-background-opacity-active));
866
999
  }
867
1000
  .checkbox__native:focus-visible + .checkbox__background .checkbox__box, .checkbox__native:active + .checkbox__background .checkbox__box {
868
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
1001
+ border-color: var(--vb-checkbox-color);
1002
+ background-color: var(--vb-checkbox-fill);
869
1003
  }
870
1004
  .checkbox__native:checked + .checkbox__background .checkbox__box {
871
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
872
- background-color: var(--vb-primary-50, hsl(152, 60%, 50%));
1005
+ border-color: var(--vb-checkbox-color);
1006
+ background-color: var(--vb-checkbox-color);
873
1007
  }
874
1008
  .checkbox__native:checked + .checkbox__background .checkbox__icon {
875
- transition-property: opacity, background-position;
876
- transition-duration: 0.15s;
877
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
878
- background-position: center center;
1009
+ transition-property: opacity, mask-position;
1010
+ transition-duration: var(--vb-checkbox-transition-duration);
1011
+ transition-timing-function: var(--vb-checkbox-transition-timing-function);
1012
+ mask-position: center center;
879
1013
  opacity: 1;
880
1014
  }
881
1015
  .checkbox__native:indeterminate + .checkbox__background .checkbox__box {
882
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
883
- background-color: var(--vb-primary-50, hsl(152, 60%, 50%));
1016
+ border-color: var(--vb-checkbox-color);
1017
+ background-color: var(--vb-checkbox-color);
884
1018
  }
885
1019
  .checkbox__native:indeterminate + .checkbox__background .checkbox__icon {
886
- transition-property: opacity, background-position;
887
- transition-duration: 0.15s;
888
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
889
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" stroke="%23FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="6" x2="10" y2="6" /></svg>');
890
- background-position: center center;
1020
+ transition-property: opacity, mask-position;
1021
+ transition-duration: var(--vb-checkbox-transition-duration);
1022
+ transition-timing-function: var(--vb-checkbox-transition-timing-function);
1023
+ background-color: var(--vb-checkbox-icon-color);
1024
+ mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="6" x2="10" y2="6" /></svg>');
1025
+ mask-position: center center;
891
1026
  opacity: 1;
892
1027
  }
893
1028
 
894
- .checkbox_size_sm .checkbox__background {
895
- width: 1.875rem;
896
- height: 1.875rem;
897
- }
898
- .checkbox_size_sm .checkbox__box {
899
- width: 14px;
900
- height: 14px;
901
- border-width: 2px;
1029
+ .checkbox_size_sm {
1030
+ --vb-checkbox-size: 1.875rem;
1031
+ --vb-checkbox-border-width: 2px;
1032
+ --vb-checkbox-box-size: 14px;
1033
+ --vb-checkbox-icon-size: 10px;
1034
+ --vb-checkbox-icon-stroke: 2.5;
902
1035
  }
903
1036
  .checkbox_size_sm .checkbox__icon {
904
- width: 10px;
905
- height: 10px;
906
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" stroke="%23FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9.5,3 4.5,8.5 2,6"></polyline></svg>');
1037
+ mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9.5,3 4.5,8.5 2,6"></polyline></svg>');
907
1038
  }
908
1039
  .checkbox_size_sm .checkbox__native:indeterminate + .checkbox__background .checkbox__icon {
909
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" stroke="%23FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="6" x2="10" y2="6" /></svg>');
1040
+ mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="6" x2="10" y2="6" /></svg>');
910
1041
  }
911
1042
 
912
- .checkbox_size_lg .checkbox__background {
913
- width: 3.125rem;
914
- height: 3.125rem;
915
- }
916
- .checkbox_size_lg .checkbox__box {
917
- width: 24px;
918
- height: 24px;
919
- border-width: 2.5px;
1043
+ .checkbox_size_lg {
1044
+ --vb-checkbox-size: 3.125rem;
1045
+ --vb-checkbox-border-width: 2.5px;
1046
+ --vb-checkbox-box-size: 24px;
1047
+ --vb-checkbox-icon-size: 18px;
1048
+ --vb-checkbox-icon-stroke: 2;
920
1049
  }
921
1050
  .checkbox_size_lg .checkbox__icon {
922
- width: 18px;
923
- height: 18px;
924
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" stroke="%23FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9.5,3 4.5,8.5 2,6"></polyline></svg>');
1051
+ mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9.5,3 4.5,8.5 2,6"></polyline></svg>');
925
1052
  }
926
1053
  .checkbox_size_lg .checkbox__native:indeterminate + .checkbox__background .checkbox__icon {
927
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" stroke="%23FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="6" x2="10" y2="6" /></svg>');
1054
+ mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="6" x2="10" y2="6" /></svg>');
1055
+ }
1056
+
1057
+ :root, .vb-theme-root {
1058
+ --vb-dialog-padding: 1em;
1059
+ --vb-dialog-gap: 0.5em;
1060
+ --vb-dialog-border-radius: 0.25rem;
1061
+ --vb-dialog-box-shadow: 0 8px 18px var(--vb-shadow-color);
1062
+ --vb-dialog-title-font-size: 1.125rem;
1063
+ --vb-dialog-title-line-height: 1.875;
1064
+ --vb-dialog-title-font-weight: 600;
1065
+ }
1066
+
1067
+ :root, .vb-theme-root {
1068
+ --vb-dialog-foreground: var(--vb-foreground);
1069
+ --vb-dialog-background: var(--vb-background);
1070
+ --vb-dialog-border: 1px solid var(--vb-border-color);
1071
+ --vb-dialog-sep-border: 1px solid var(--vb-border-color);
1072
+ }
1073
+ @media (prefers-color-scheme: dark) {
1074
+ :root, .vb-theme-root {
1075
+ --vb-dialog-foreground: var(--vb-foreground);
1076
+ --vb-dialog-background: var(--vb-background);
1077
+ --vb-dialog-border: 1px solid var(--vb-border-color);
1078
+ --vb-dialog-sep-border: 1px solid var(--vb-border-color);
1079
+ }
1080
+ }
1081
+
1082
+ .vb-theme-light {
1083
+ --vb-dialog-foreground: var(--vb-foreground);
1084
+ --vb-dialog-background: var(--vb-background);
1085
+ --vb-dialog-border: 1px solid var(--vb-border-color);
1086
+ --vb-dialog-sep-border: 1px solid var(--vb-border-color);
1087
+ }
1088
+
1089
+ .vb-theme-dark {
1090
+ --vb-dialog-foreground: var(--vb-foreground);
1091
+ --vb-dialog-background: var(--vb-background);
1092
+ --vb-dialog-border: 1px solid var(--vb-border-color);
1093
+ --vb-dialog-sep-border: 1px solid var(--vb-border-color);
928
1094
  }
929
1095
 
930
1096
  .dialog {
931
1097
  position: relative;
932
- z-index: 500;
933
1098
  display: flex;
934
1099
  flex-direction: column;
935
1100
  overflow: auto;
936
- border-radius: 0.25rem;
937
- background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
1101
+ border: var(--vb-dialog-border);
1102
+ border-radius: var(--vb-dialog-border-radius);
1103
+ background: var(--vb-dialog-background);
938
1104
  background-clip: padding-box;
939
- box-shadow: 0 8px 18px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
940
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
1105
+ box-shadow: var(--vb-dialog-box-shadow);
1106
+ color: var(--vb-dialog-foreground);
941
1107
  -webkit-overflow-scrolling: touch;
942
1108
  }
943
1109
 
@@ -945,7 +1111,7 @@ input::-moz-placeholder {
945
1111
  .dialog__body,
946
1112
  .dialog__footer {
947
1113
  flex: 0 0 auto;
948
- padding: 1em;
1114
+ padding: var(--vb-dialog-padding);
949
1115
  }
950
1116
 
951
1117
  .dialog__header,
@@ -954,49 +1120,37 @@ input::-moz-placeholder {
954
1120
  z-index: 1;
955
1121
  display: flex;
956
1122
  align-items: center;
957
- background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
1123
+ background: var(--vb-dialog-background);
958
1124
  vertical-align: middle;
959
- }
960
- .dialog__header > * + *,
961
- .dialog__footer > * + * {
962
- margin-left: 0.5em;
1125
+ gap: var(--vb-dialog-gap);
963
1126
  }
964
1127
 
965
1128
  .dialog__header {
966
1129
  top: 0;
967
- border-bottom: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
1130
+ border-bottom: var(--vb-dialog-sep-border);
968
1131
  }
969
1132
 
970
1133
  .dialog__body {
971
1134
  flex-grow: 1;
972
1135
  }
973
1136
  .dialog__body + .dialog__body {
974
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
1137
+ border-top: var(--vb-dialog-sep-border);
975
1138
  }
976
1139
 
977
1140
  .dialog__footer {
978
1141
  bottom: 0;
979
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
1142
+ border-top: var(--vb-dialog-sep-border);
980
1143
  }
981
1144
 
982
1145
  .dialog__title {
983
1146
  flex-grow: 1;
984
- font-size: 1.125rem;
985
- font-weight: 600;
986
- line-height: 1.875;
987
- }
988
-
989
- .dialog > .dialog__close {
990
- position: absolute;
991
- top: 1em;
992
- right: 1em;
993
- }
994
- .dialog > .dialog__close + .dialog__body {
995
- padding-right: 3.5em;
1147
+ font-size: var(--vb-dialog-title-font-size);
1148
+ font-weight: var(--vb-dialog-title-font-weight);
1149
+ line-height: var(--vb-dialog-title-line-height);
996
1150
  }
997
1151
 
998
1152
  :root {
999
- --vrembem-prefix: vb-;
1153
+ --vb-prefix: vb-;
1000
1154
  }
1001
1155
 
1002
1156
  :root {
@@ -1046,17 +1200,17 @@ input::-moz-placeholder {
1046
1200
  height: 100%;
1047
1201
  overflow: auto;
1048
1202
  border-radius: 0;
1049
- background: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
1203
+ background: var(--vb-background-darker);
1050
1204
  box-shadow: none;
1051
1205
  opacity: 0;
1052
1206
  -webkit-overflow-scrolling: touch;
1053
1207
  }
1054
1208
  .drawer__dialog .dialog__header,
1055
1209
  .drawer__dialog .dialog__footer {
1056
- background: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
1210
+ background: var(--vb-background-darker);
1057
1211
  }
1058
1212
  .drawer__dialog .dialog__body {
1059
- background: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
1213
+ background: var(--vb-background-darker);
1060
1214
  }
1061
1215
 
1062
1216
  /**
@@ -1160,7 +1314,7 @@ input::-moz-placeholder {
1160
1314
  inset: 0;
1161
1315
  width: 100%;
1162
1316
  height: 100%;
1163
- background-color: var(--vb-neutral-10, hsl(214, 20%, 10%));
1317
+ background-color: var(--vb-neutral-10);
1164
1318
  opacity: 0;
1165
1319
  }
1166
1320
  .drawer_modal .drawer__dialog {
@@ -1171,7 +1325,7 @@ input::-moz-placeholder {
1171
1325
  max-width: 80%;
1172
1326
  transform: translateX(-100%);
1173
1327
  background-color: white;
1174
- box-shadow: 0 12px 24px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
1328
+ box-shadow: 0 12px 24px var(--vb-shadow-color);
1175
1329
  }
1176
1330
  .drawer_modal.drawer_switch {
1177
1331
  right: auto;
@@ -1882,11 +2036,11 @@ input::-moz-placeholder {
1882
2036
  transition-duration: 0.15s;
1883
2037
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1884
2038
  outline: none;
1885
- border: 1px solid var(--vb-border-color-dark, rgba(0, 0, 0, 0.2));
2039
+ border: 1px solid var(--vb-border-color-dark);
1886
2040
  border-radius: 0.25rem;
1887
2041
  background: white;
1888
- box-shadow: 0 0 0 0 rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
1889
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
2042
+ box-shadow: 0 0 0 0 hsl(var(--vb-primary-hs) 50% / 0%), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
2043
+ color: var(--vb-foreground);
1890
2044
  font-family: blinkmacsystemfont, -apple-system, system-ui, "Segoe UI", "Roboto", "Helvetica Neue", arial, sans-serif;
1891
2045
  font-size: 16px;
1892
2046
  line-height: 1.625;
@@ -1895,21 +2049,21 @@ input::-moz-placeholder {
1895
2049
  appearance: none;
1896
2050
  }
1897
2051
  .input:hover {
1898
- border-color: var(--vb-border-color-darker, rgba(0, 0, 0, 0.3));
2052
+ border-color: var(--vb-border-color-darker);
1899
2053
  }
1900
2054
  .input:focus {
1901
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
1902
- box-shadow: 0 0 0 0.2rem rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.5), inset 0 0 0 rgba(0, 0, 0, 0);
2055
+ border-color: var(--vb-primary-50);
2056
+ box-shadow: 0 0 0 0.2rem hsl(var(--vb-primary-hs) 50% / 50%), inset 0 0 0 rgba(0, 0, 0, 0);
1903
2057
  }
1904
2058
  .input:disabled {
1905
- background-color: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
2059
+ background-color: var(--vb-background-darker);
1906
2060
  pointer-events: none;
1907
2061
  }
1908
2062
  .input:read-only {
1909
- background-color: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
2063
+ background-color: var(--vb-background-darker);
1910
2064
  }
1911
2065
  .input::placeholder {
1912
- color: var(--vb-foreground-lighter, var(--vb-neutral-60, hsl(214, 20%, 60%)));
2066
+ color: var(--vb-foreground-lighter);
1913
2067
  }
1914
2068
 
1915
2069
  .input_auto {
@@ -1933,7 +2087,7 @@ input::-moz-placeholder {
1933
2087
  .input_error {
1934
2088
  border-color: hsl(0, 80%, 50%);
1935
2089
  box-shadow: 0 0 0 0 rgba(230, 26, 26, 0), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
1936
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
2090
+ color: var(--vb-foreground);
1937
2091
  }
1938
2092
  .input_error:hover {
1939
2093
  border-color: hsl(0, 80%, 50%);
@@ -1954,7 +2108,7 @@ input::-moz-placeholder {
1954
2108
  background-color: white;
1955
2109
  }
1956
2110
  .input_type_select:disabled {
1957
- background-color: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
2111
+ background-color: var(--vb-background-darker);
1958
2112
  }
1959
2113
 
1960
2114
  .input_type_textarea {
@@ -2409,7 +2563,7 @@ input::-moz-placeholder {
2409
2563
  width: auto;
2410
2564
  height: 1px;
2411
2565
  margin: 0.5em 0;
2412
- background: var(--vb-border-color, rgba(0, 0, 0, 0.1));
2566
+ background: var(--vb-border-color);
2413
2567
  }
2414
2568
  .menu__sep:first-child {
2415
2569
  margin-top: 0;
@@ -2429,7 +2583,7 @@ input::-moz-placeholder {
2429
2583
  padding: 0.5em 1em;
2430
2584
  border-radius: 0.25rem;
2431
2585
  background: none;
2432
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
2586
+ color: var(--vb-foreground);
2433
2587
  white-space: normal;
2434
2588
  }
2435
2589
  .menu__action > * {
@@ -2442,36 +2596,36 @@ input::-moz-placeholder {
2442
2596
  padding: 0.5em;
2443
2597
  }
2444
2598
  .menu__action:hover {
2445
- background: var(--vb-background-hover, rgba(0, 0, 0, 0.05));
2599
+ background: var(--vb-background-hover);
2446
2600
  }
2447
2601
  .menu__action:focus {
2448
2602
  outline: none;
2449
- background: var(--vb-background-focus, rgba(0, 0, 0, 0.05));
2603
+ background: var(--vb-background-focus);
2450
2604
  }
2451
2605
  .menu__action:focus-visible {
2452
2606
  z-index: 1;
2453
- outline: 2px solid var(--vb-focus-visible, var(--vb-primary-50, hsl(152, 60%, 50%)));
2607
+ outline: 2px solid var(--vb-focus-visible);
2454
2608
  }
2455
2609
  .menu__action:active {
2456
- background: var(--vb-background-active, rgba(0, 0, 0, 0.1));
2610
+ background: var(--vb-background-active);
2457
2611
  }
2458
2612
  .menu__action.is-active, .menu__action.is-active[disabled] {
2459
2613
  background: none;
2460
- color: var(--vb-primary-50, hsl(152, 60%, 50%));
2614
+ color: var(--vb-primary-50);
2461
2615
  cursor: pointer;
2462
2616
  }
2463
2617
  .menu__action.is-active:hover, .menu__action.is-active:focus, .menu__action.is-active:active, .menu__action.is-active[disabled]:hover, .menu__action.is-active[disabled]:focus, .menu__action.is-active[disabled]:active {
2464
2618
  background: none;
2465
- color: var(--vb-primary-50, hsl(152, 60%, 50%));
2619
+ color: var(--vb-primary-50);
2466
2620
  }
2467
2621
  .menu__action.is-disabled, .menu__action[disabled] {
2468
2622
  background: none;
2469
- color: var(--vb-foreground-lighter, var(--vb-neutral-60, hsl(214, 20%, 60%)));
2623
+ color: var(--vb-foreground-lighter);
2470
2624
  cursor: default;
2471
2625
  }
2472
2626
  .menu__action.is-disabled:hover, .menu__action.is-disabled:focus, .menu__action.is-disabled:active, .menu__action[disabled]:hover, .menu__action[disabled]:focus, .menu__action[disabled]:active {
2473
2627
  background: none;
2474
- color: var(--vb-foreground-lighter, var(--vb-neutral-60, hsl(214, 20%, 60%)));
2628
+ color: var(--vb-foreground-lighter);
2475
2629
  }
2476
2630
 
2477
2631
  .menu__text {
@@ -2725,7 +2879,7 @@ input::-moz-placeholder {
2725
2879
  inset: 0;
2726
2880
  width: 100%;
2727
2881
  height: 100%;
2728
- background-color: var(--vb-neutral-10, hsl(214, 20%, 10%));
2882
+ background-color: var(--vb-neutral-10);
2729
2883
  opacity: 0;
2730
2884
  }
2731
2885
 
@@ -2738,14 +2892,14 @@ input::-moz-placeholder {
2738
2892
  transition-duration: var(--vb-modal-transition-duration);
2739
2893
  transition-timing-function: var(--vb-modal-transition-timing-function);
2740
2894
  outline: 0 solid transparent;
2741
- box-shadow: 0 12px 24px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
2895
+ box-shadow: 0 12px 24px var(--vb-shadow-color);
2742
2896
  opacity: 0;
2743
2897
  }
2744
2898
  .modal__dialog:focus {
2745
- outline: 4px solid var(--vb-primary-50, hsl(152, 60%, 50%));
2899
+ outline: 4px solid var(--vb-primary-50);
2746
2900
  }
2747
2901
  .modal__dialog[role=alertdialog]:focus {
2748
- outline: 4px solid var(--vb-important-50, hsl(0, 80%, 50%));
2902
+ outline: 4px solid var(--vb-important-50);
2749
2903
  }
2750
2904
 
2751
2905
  .modal.is-closed {
@@ -2861,13 +3015,22 @@ input::-moz-placeholder {
2861
3015
  width: 60em;
2862
3016
  }
2863
3017
 
3018
+ :root, .vb-theme-root {
3019
+ --vb-notice-background: var(--vb-background-dark);
3020
+ --vb-notice-foreground: var(--vb-foreground);
3021
+ }
3022
+ .vb-theme-light {
3023
+ --vb-notice-background: var(--vb-background-dark);
3024
+ --vb-notice-foreground: var(--vb-foreground);
3025
+ }
3026
+
2864
3027
  .notice {
2865
3028
  padding: 1em;
2866
3029
  border: var(--vb-notice-border);
2867
3030
  border-radius: 0.25rem;
2868
- background: var(--vb-notice-background, var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%))));
3031
+ background: var(--vb-notice-background);
2869
3032
  box-shadow: var(--vb-notice-shadow);
2870
- color: var(--vb-notice-foreground, var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%))));
3033
+ color: var(--vb-notice-foreground);
2871
3034
  }
2872
3035
  .notice > * + * {
2873
3036
  margin-top: 0.5em;
@@ -2880,32 +3043,23 @@ input::-moz-placeholder {
2880
3043
  }
2881
3044
 
2882
3045
  .notice_theme_primary {
2883
- background-color: var(--vb-primary-90, hsl(152, 60%, 90%));
2884
- color: var(--vb-primary-30, hsl(152, 60%, 30%));
3046
+ background-color: var(--vb-primary-90);
3047
+ color: var(--vb-primary-30);
2885
3048
  }
2886
3049
 
2887
3050
  .notice_theme_secondary {
2888
- background-color: var(--vb-secondary-90, hsl(214, 50%, 90%));
2889
- color: var(--vb-secondary-30, hsl(214, 50%, 30%));
3051
+ background-color: var(--vb-secondary-90);
3052
+ color: var(--vb-secondary-30);
2890
3053
  }
2891
3054
 
2892
3055
  .notice_theme_neutral {
2893
- background-color: var(--vb-neutral-90, hsl(214, 20%, 90%));
2894
- color: var(--vb-neutral-30, hsl(214, 20%, 30%));
3056
+ background-color: var(--vb-neutral-90);
3057
+ color: var(--vb-neutral-30);
2895
3058
  }
2896
3059
 
2897
3060
  .notice_theme_important {
2898
- background-color: var(--vb-important-90, hsl(0, 80%, 90%));
2899
- color: var(--vb-important-30, hsl(0, 80%, 30%));
2900
- }
2901
-
2902
- :root, .vb-theme-root {
2903
- --vb-notice-background: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%)));
2904
- --vb-notice-foreground: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
2905
- }
2906
- .vb-theme-light {
2907
- --vb-notice-background: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%)));
2908
- --vb-notice-foreground: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
3061
+ background-color: var(--vb-important-90);
3062
+ color: var(--vb-important-30);
2909
3063
  }
2910
3064
 
2911
3065
  :root {
@@ -2926,10 +3080,10 @@ input::-moz-placeholder {
2926
3080
  margin: calc(var(--vb-popover-offset) * 1px) 0 0;
2927
3081
  padding: 0.5em;
2928
3082
  border-radius: 0.25rem;
2929
- background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
3083
+ background: var(--vb-background);
2930
3084
  background-clip: padding-box;
2931
- box-shadow: 0 2px 6px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
2932
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
3085
+ box-shadow: 0 2px 6px var(--vb-shadow-color);
3086
+ color: var(--vb-foreground);
2933
3087
  font-size: 0.875rem;
2934
3088
  }
2935
3089
  .popover::before {
@@ -2997,7 +3151,7 @@ input::-moz-placeholder {
2997
3151
  content: "";
2998
3152
  visibility: visible;
2999
3153
  transform: rotate(45deg);
3000
- border: var(--vb-popover-arrow-border, 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1)));
3154
+ border: var(--vb-popover-arrow-border, 1px solid var(--vb-border-color));
3001
3155
  border-right-color: transparent;
3002
3156
  border-bottom-color: transparent;
3003
3157
  background-clip: padding-box;
@@ -3051,8 +3205,48 @@ input::-moz-placeholder {
3051
3205
  width: auto;
3052
3206
  max-width: 16rem;
3053
3207
  padding: 0.5rem 0.75rem;
3054
- background: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
3055
- color: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
3208
+ background: var(--vb-foreground);
3209
+ color: var(--vb-background);
3210
+ }
3211
+
3212
+ :root, .vb-theme-root {
3213
+ --vb-radio-size: 2.5rem;
3214
+ --vb-radio-circle-size: 20px;
3215
+ --vb-radio-dot-size: 8px;
3216
+ --vb-radio-color: var(--vb-primary-50);
3217
+ --vb-radio-border-width: 2px;
3218
+ --vb-radio-background-border-radius: 9999px;
3219
+ --vb-radio-background-opacity: 0%;
3220
+ --vb-radio-background-opacity-hover: 20%;
3221
+ --vb-radio-background-opacity-focus: 20%;
3222
+ --vb-radio-background-opacity-active: 30%;
3223
+ --vb-radio-transition-duration: 0.15s;
3224
+ --vb-radio-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3225
+ }
3226
+
3227
+ :root, .vb-theme-root {
3228
+ --vb-radio-fill: white;
3229
+ --vb-radio-border-color: var(--vb-neutral-50);
3230
+ --vb-radio-dot-color: white;
3231
+ }
3232
+ @media (prefers-color-scheme: dark) {
3233
+ :root, .vb-theme-root {
3234
+ --vb-radio-fill: var(--vb-neutral-10);
3235
+ --vb-radio-border-color: var(--vb-neutral-80);
3236
+ --vb-radio-dot-color: var(--vb-neutral-10);
3237
+ }
3238
+ }
3239
+
3240
+ .vb-theme-light {
3241
+ --vb-radio-fill: white;
3242
+ --vb-radio-border-color: var(--vb-neutral-50);
3243
+ --vb-radio-dot-color: white;
3244
+ }
3245
+
3246
+ .vb-theme-dark {
3247
+ --vb-radio-fill: var(--vb-neutral-10);
3248
+ --vb-radio-border-color: var(--vb-neutral-80);
3249
+ --vb-radio-dot-color: var(--vb-neutral-10);
3056
3250
  }
3057
3251
 
3058
3252
  .radio {
@@ -3065,34 +3259,34 @@ input::-moz-placeholder {
3065
3259
  }
3066
3260
 
3067
3261
  .radio__background {
3068
- width: 2.5rem;
3069
- height: 2.5rem;
3262
+ width: var(--vb-radio-size);
3263
+ height: var(--vb-radio-size);
3070
3264
  position: relative;
3071
3265
  z-index: 1;
3072
3266
  display: flex;
3073
3267
  align-items: center;
3074
3268
  justify-content: center;
3075
- border-radius: 9999px;
3076
- background-color: transparent;
3269
+ border-radius: var(--vb-radio-background-border-radius);
3270
+ background-color: hsl(from var(--vb-radio-color) h s l/var(--vb-radio-background-opacity));
3077
3271
  }
3078
3272
 
3079
3273
  .radio__circle {
3080
- width: 20px;
3081
- height: 20px;
3274
+ width: var(--vb-radio-circle-size);
3275
+ height: var(--vb-radio-circle-size);
3082
3276
  display: flex;
3083
3277
  align-items: center;
3084
3278
  justify-content: center;
3085
- border: 2px solid var(--vb-neutral-50, hsl(214, 20%, 50%));
3086
- border-radius: 20px;
3087
- background-color: white;
3279
+ border: var(--vb-radio-border-width) solid var(--vb-radio-border-color);
3280
+ border-radius: var(--vb-radio-circle-size);
3281
+ background-color: var(--vb-radio-fill);
3088
3282
  color: transparent;
3089
3283
  }
3090
3284
 
3091
3285
  .radio__dot {
3092
3286
  width: 0;
3093
3287
  height: 0;
3094
- border-radius: 8px;
3095
- background-color: white;
3288
+ border-radius: var(--vb-radio-dot-size);
3289
+ background-color: var(--vb-radio-dot-color);
3096
3290
  opacity: 0;
3097
3291
  }
3098
3292
 
@@ -3107,91 +3301,117 @@ input::-moz-placeholder {
3107
3301
  cursor: pointer;
3108
3302
  }
3109
3303
  .radio__native:hover + .radio__background {
3110
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.1);
3304
+ background-color: hsl(from var(--vb-radio-color) h s l/var(--vb-radio-background-opacity-hover));
3111
3305
  }
3112
3306
  .radio__native:hover + .radio__background .radio__circle {
3113
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
3307
+ border-color: var(--vb-radio-color);
3308
+ background-color: var(--vb-radio-fill);
3114
3309
  }
3115
3310
  .radio__native:focus + .radio__background {
3116
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.1);
3311
+ background-color: hsl(from var(--vb-radio-color) h s l/var(--vb-radio-background-opacity-focus));
3117
3312
  }
3118
3313
  .radio__native:focus + .radio__background .radio__circle {
3119
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
3314
+ border-color: var(--vb-radio-color);
3315
+ background-color: var(--vb-radio-fill);
3120
3316
  }
3121
3317
  .radio__native:focus-visible + .radio__background, .radio__native:active + .radio__background {
3122
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.2);
3318
+ background-color: hsl(from var(--vb-radio-color) h s l/var(--vb-radio-background-opacity-active));
3123
3319
  }
3124
3320
  .radio__native:focus-visible + .radio__background .radio__circle, .radio__native:active + .radio__background .radio__circle {
3125
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
3321
+ border-color: var(--vb-radio-color);
3322
+ background-color: var(--vb-radio-fill);
3126
3323
  }
3127
3324
  .radio__native:checked + .radio__background .radio__circle {
3128
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
3129
- background-color: var(--vb-primary-50, hsl(152, 60%, 50%));
3325
+ border-color: var(--vb-radio-color);
3326
+ background-color: var(--vb-radio-color);
3130
3327
  }
3131
3328
  .radio__native:checked + .radio__background .radio__dot {
3132
- width: 8px;
3133
- height: 8px;
3329
+ width: var(--vb-radio-dot-size);
3330
+ height: var(--vb-radio-dot-size);
3134
3331
  transition-property: opacity, width, height;
3135
- transition-duration: 0.15s;
3136
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3332
+ transition-duration: var(--vb-radio-transition-duration);
3333
+ transition-timing-function: var(--vb-radio-transition-timing-function);
3137
3334
  background-position: center center;
3138
3335
  opacity: 1;
3139
3336
  }
3140
3337
 
3141
- .radio_size_sm .radio__background {
3142
- width: 1.875rem;
3143
- height: 1.875rem;
3338
+ .radio_size_sm {
3339
+ --vb-radio-size: 1.875rem;
3340
+ --vb-radio-border-width: 2px;
3341
+ --vb-radio-circle-size: 16px;
3342
+ --vb-radio-dot-size: 6px;
3343
+ }
3344
+
3345
+ .radio_size_lg {
3346
+ --vb-radio-size: 3.125rem;
3347
+ --vb-radio-border-width: 2.5px;
3348
+ --vb-radio-circle-size: 26px;
3349
+ --vb-radio-dot-size: 10px;
3144
3350
  }
3145
- .radio_size_sm .radio__circle {
3146
- width: 16px;
3147
- height: 16px;
3148
- border-width: 2px;
3351
+
3352
+ :root, .vb-theme-root {
3353
+ --vb-section-max-width: 70rem;
3354
+ --vb-section-image-opacity: 1;
3355
+ --vb-section-padding: 1.5em;
3149
3356
  }
3150
- .radio_size_sm .radio__native:checked + .radio__background .radio__dot {
3151
- width: 6px;
3152
- height: 6px;
3357
+ @media (min-width: 760px) {
3358
+ :root, .vb-theme-root {
3359
+ --vb-section-padding: 2em 1.5em;
3360
+ }
3361
+ }
3362
+ @media (min-width: 990px) {
3363
+ :root, .vb-theme-root {
3364
+ --vb-section-padding: 3em 1.5em;
3365
+ }
3153
3366
  }
3154
3367
 
3155
- .radio_size_lg .radio__background {
3156
- width: 3.125rem;
3157
- height: 3.125rem;
3368
+ :root, .vb-theme-root {
3369
+ --vb-section-background: transparent;
3370
+ --vb-section-foreground: var(--vb-foreground);
3371
+ --vb-section-screen-background: var(--vb-background);
3372
+ --vb-section-screen-opacity: 0.8;
3158
3373
  }
3159
- .radio_size_lg .radio__circle {
3160
- width: 26px;
3161
- height: 26px;
3162
- border-width: 2.5px;
3374
+ @media (prefers-color-scheme: dark) {
3375
+ :root, .vb-theme-root {
3376
+ --vb-section-background: transparent;
3377
+ --vb-section-foreground: var(--vb-foreground);
3378
+ --vb-section-screen-background: var(--vb-background);
3379
+ --vb-section-screen-opacity: 0.7;
3380
+ }
3381
+ }
3382
+
3383
+ .vb-theme-light {
3384
+ --vb-section-background: transparent;
3385
+ --vb-section-foreground: var(--vb-foreground);
3386
+ --vb-section-screen-background: var(--vb-background);
3387
+ --vb-section-screen-opacity: 0.8;
3163
3388
  }
3164
- .radio_size_lg .radio__native:checked + .radio__background .radio__dot {
3165
- width: 10px;
3166
- height: 10px;
3389
+
3390
+ .vb-theme-dark {
3391
+ --vb-section-background: transparent;
3392
+ --vb-section-foreground: var(--vb-foreground);
3393
+ --vb-section-screen-background: var(--vb-background);
3394
+ --vb-section-screen-opacity: 0.7;
3167
3395
  }
3168
3396
 
3169
3397
  .section {
3170
3398
  position: relative;
3171
3399
  display: flex;
3172
3400
  flex-direction: column;
3173
- padding: 1.5em;
3401
+ padding: var(--vb-section-padding);
3402
+ background: var(--vb-section-background);
3403
+ color: var(--vb-section-foreground);
3174
3404
  }
3175
3405
 
3176
3406
  .section__container {
3177
3407
  position: relative;
3178
3408
  z-index: 3;
3179
3409
  width: 100%;
3180
- max-width: 70rem;
3410
+ max-width: var(--vb-section-max-width);
3181
3411
  margin: auto;
3182
3412
  }
3183
3413
 
3184
- @media (min-width: 760px) {
3185
- .section {
3186
- padding: 2em 1.5em;
3187
- }
3188
- }
3189
- @media (min-width: 990px) {
3190
- .section {
3191
- padding: 3em 1.5em;
3192
- }
3193
- }
3194
- .section__background,
3414
+ .section__image,
3195
3415
  .section__screen {
3196
3416
  width: 100%;
3197
3417
  height: 100%;
@@ -3199,101 +3419,123 @@ input::-moz-placeholder {
3199
3419
  inset: 0;
3200
3420
  }
3201
3421
 
3202
- .section__background {
3422
+ .section__image {
3203
3423
  object-fit: cover;
3204
3424
  z-index: 1;
3425
+ opacity: var(--vb-section-image-opacity);
3205
3426
  }
3206
3427
 
3207
3428
  .section__screen {
3208
3429
  z-index: 2;
3209
- background: var(--vb-neutral-10, hsl(214, 20%, 10%));
3210
- opacity: 0.7;
3430
+ background: var(--vb-section-screen-background);
3431
+ opacity: var(--vb-section-screen-opacity);
3211
3432
  }
3212
3433
 
3213
- .section_size_xs {
3214
- padding: 0;
3215
- }
3216
-
3217
- @media (min-width: 760px) {
3218
- .section_size_xs {
3219
- padding: 0;
3220
- }
3221
- }
3222
- @media (min-width: 990px) {
3223
- .section_size_xs {
3224
- padding: 0;
3225
- }
3226
- }
3227
3434
  .section_size_sm {
3228
- padding: 1em;
3435
+ --vb-section-padding: 1em;
3229
3436
  }
3230
3437
 
3231
- @media (min-width: 760px) {
3232
- .section_size_sm {
3233
- padding: 1em;
3234
- }
3235
- }
3236
- @media (min-width: 990px) {
3237
- .section_size_sm {
3238
- padding: 1em;
3239
- }
3240
- }
3241
3438
  .section_size_md {
3242
- padding: 1.5em;
3439
+ --vb-section-padding: 1.5em;
3243
3440
  }
3244
-
3245
3441
  @media (min-width: 760px) {
3246
3442
  .section_size_md {
3247
- padding: 2em 1.5em;
3443
+ --vb-section-padding: 2em 1.5em;
3248
3444
  }
3249
3445
  }
3250
3446
  @media (min-width: 990px) {
3251
3447
  .section_size_md {
3252
- padding: 3em 1.5em;
3448
+ --vb-section-padding: 3em 1.5em;
3253
3449
  }
3254
3450
  }
3451
+
3255
3452
  .section_size_lg {
3256
- padding: 1.5em;
3453
+ --vb-section-padding: 1.5em;
3257
3454
  }
3258
-
3259
3455
  @media (min-width: 760px) {
3260
3456
  .section_size_lg {
3261
- padding: 4em 1.5em;
3457
+ --vb-section-padding: 4em 1.5em;
3262
3458
  }
3263
3459
  }
3264
3460
  @media (min-width: 990px) {
3265
3461
  .section_size_lg {
3266
- padding: 6em 1.5em;
3462
+ --vb-section-padding: 6em 1.5em;
3267
3463
  }
3268
3464
  }
3465
+
3269
3466
  .section_size_xl {
3270
- padding: 3em 1.5em;
3467
+ --vb-section-padding: 1.5em;
3468
+ }
3469
+ @media (min-width: 620px) {
3470
+ .section_size_xl {
3471
+ --vb-section-padding: 3em 1.5em;
3472
+ }
3271
3473
  }
3272
-
3273
3474
  @media (min-width: 760px) {
3274
3475
  .section_size_xl {
3275
- padding: 8em 2em;
3476
+ --vb-section-padding: 8em 2em;
3276
3477
  }
3277
3478
  }
3278
3479
  @media (min-width: 990px) {
3279
3480
  .section_size_xl {
3280
- padding: 12em 2em;
3481
+ --vb-section-padding: 12em 2em;
3482
+ }
3483
+ }
3484
+
3485
+ :root, .vb-theme-root {
3486
+ --vb-switch-size: 2.5rem;
3487
+ --vb-switch-track-size: 20px;
3488
+ --vb-switch-color: var(--vb-primary-50);
3489
+ --vb-switch-border-width: 2px;
3490
+ --vb-switch-border-radius: 9999px;
3491
+ --vb-switch-background-border-radius: 9999px;
3492
+ --vb-switch-background-opacity: 0%;
3493
+ --vb-switch-background-opacity-hover: 20%;
3494
+ --vb-switch-background-opacity-focus: 20%;
3495
+ --vb-switch-background-opacity-active: 30%;
3496
+ --vb-switch-transition-duration: 0.15s;
3497
+ --vb-switch-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3498
+ }
3499
+
3500
+ :root, .vb-theme-root {
3501
+ --vb-switch-thumb-fill: white;
3502
+ --vb-switch-track-fill: hsl(var(--vb-neutral-hs) 50% / 20%);
3503
+ --vb-switch-border-color: var(--vb-neutral-50);
3504
+ }
3505
+ @media (prefers-color-scheme: dark) {
3506
+ :root, .vb-theme-root {
3507
+ --vb-switch-thumb-fill: var(--vb-neutral-10);
3508
+ --vb-switch-track-fill: hsl(var(--vb-neutral-hs) 50% / 20%);
3509
+ --vb-switch-border-color: var(--vb-neutral-80);
3281
3510
  }
3282
3511
  }
3512
+
3513
+ .vb-theme-light {
3514
+ --vb-switch-thumb-fill: white;
3515
+ --vb-switch-track-fill: hsl(var(--vb-neutral-hs) 50% / 20%);
3516
+ --vb-switch-border-color: var(--vb-neutral-50);
3517
+ }
3518
+
3519
+ .vb-theme-dark {
3520
+ --vb-switch-thumb-fill: var(--vb-neutral-10);
3521
+ --vb-switch-track-fill: hsl(var(--vb-neutral-hs) 50% / 20%);
3522
+ --vb-switch-border-color: var(--vb-neutral-80);
3523
+ }
3524
+
3283
3525
  .switch {
3284
3526
  position: relative;
3285
3527
  display: inline-flex;
3286
3528
  flex: 0 0 auto;
3287
3529
  align-items: center;
3288
3530
  justify-content: center;
3289
- padding-right: 0.625rem;
3290
- padding-left: 0.625rem;
3531
+ padding-right: calc(var(--vb-switch-size) * 0.25);
3532
+ padding-left: calc(var(--vb-switch-size) * 0.25);
3291
3533
  vertical-align: middle;
3292
3534
  }
3293
3535
 
3294
3536
  .switch__background {
3295
- width: 2.5rem;
3296
- height: 2.5rem;
3537
+ width: var(--vb-switch-size);
3538
+ height: var(--vb-switch-size);
3297
3539
  position: relative;
3298
3540
  z-index: 1;
3299
3541
  display: flex;
@@ -3301,39 +3543,39 @@ input::-moz-placeholder {
3301
3543
  justify-content: center;
3302
3544
  }
3303
3545
  .switch__background::after {
3304
- width: 2.5rem;
3305
- height: 2.5rem;
3546
+ width: var(--vb-switch-size);
3547
+ height: var(--vb-switch-size);
3306
3548
  content: "";
3307
3549
  position: absolute;
3308
3550
  top: 0;
3309
- left: -0.625rem;
3310
- transition: left 0.15s cubic-bezier(0.4, 0, 0.2, 1);
3311
- border-radius: 9999px;
3312
- background-color: transparent;
3551
+ left: calc(var(--vb-switch-size) * 0.25 * -1);
3552
+ transition: left var(--vb-switch-transition-duration) var(--vb-switch-transition-timing-function);
3553
+ border-radius: var(--vb-switch-background-border-radius);
3554
+ background-color: hsl(from var(--vb-switch-color) h s l/var(--vb-switch-background-opacity));
3313
3555
  }
3314
3556
 
3315
3557
  .switch__track {
3316
3558
  width: 100%;
3317
- height: 20px;
3559
+ height: var(--vb-switch-track-size);
3318
3560
  position: relative;
3319
3561
  display: block;
3320
- border: 2px solid var(--vb-neutral-50, hsl(214, 20%, 50%));
3321
- border-radius: 9999px;
3322
- background-color: var(--vb-neutral-80, hsl(214, 20%, 80%));
3562
+ border: var(--vb-switch-border-width) solid var(--vb-switch-border-color);
3563
+ border-radius: var(--vb-switch-border-radius);
3564
+ background-color: var(--vb-switch-track-fill);
3323
3565
  }
3324
3566
 
3325
3567
  .switch__thumb {
3326
- width: 16px;
3327
- height: 16px;
3568
+ width: calc(var(--vb-switch-track-size) - var(--vb-switch-border-width) * 2);
3569
+ height: calc(var(--vb-switch-track-size) - var(--vb-switch-border-width) * 2);
3328
3570
  position: absolute;
3329
3571
  z-index: 1;
3330
3572
  top: 0;
3331
3573
  left: 0;
3332
3574
  display: block;
3333
- transition: left 0.15s cubic-bezier(0.4, 0, 0.2, 1);
3334
- border-radius: 9999px;
3335
- background-color: white;
3336
- box-shadow: 0 0 0 2px var(--vb-neutral-50, hsl(214, 20%, 50%));
3575
+ transition: left var(--vb-switch-transition-duration) var(--vb-switch-transition-timing-function);
3576
+ border-radius: var(--vb-switch-border-radius);
3577
+ background-color: var(--vb-switch-thumb-fill);
3578
+ box-shadow: 0 0 0 var(--vb-switch-border-width) var(--vb-switch-border-color);
3337
3579
  }
3338
3580
 
3339
3581
  .switch__native {
@@ -3347,128 +3589,118 @@ input::-moz-placeholder {
3347
3589
  cursor: pointer;
3348
3590
  }
3349
3591
  .switch__native:hover + .switch__background::after {
3350
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.1);
3592
+ background-color: hsl(from var(--vb-switch-color) h s l/var(--vb-switch-background-opacity-hover));
3593
+ }
3594
+ .switch__native:hover + .switch__background .switch__track {
3595
+ border-color: var(--vb-switch-border-color);
3596
+ background-color: var(--vb-switch-track-fill);
3351
3597
  }
3352
3598
  .switch__native:hover + .switch__background .switch__thumb {
3353
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
3599
+ box-shadow: 0 0 0 var(--vb-switch-border-width) var(--vb-switch-color);
3354
3600
  }
3355
3601
  .switch__native:focus + .switch__background::after {
3356
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.1);
3602
+ background-color: hsl(from var(--vb-switch-color) h s l/var(--vb-switch-background-opacity-focus));
3603
+ }
3604
+ .switch__native:focus + .switch__background .switch__track {
3605
+ border-color: var(--vb-switch-border-color);
3606
+ background-color: var(--vb-switch-track-fill);
3357
3607
  }
3358
3608
  .switch__native:focus + .switch__background .switch__thumb {
3359
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
3609
+ box-shadow: 0 0 0 var(--vb-switch-border-width) var(--vb-switch-color);
3360
3610
  }
3361
3611
  .switch__native:focus-visible + .switch__background::after, .switch__native:active + .switch__background::after {
3362
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.2);
3612
+ background-color: hsl(from var(--vb-switch-color) h s l/var(--vb-switch-background-opacity-active));
3613
+ }
3614
+ .switch__native:focus-visible + .switch__background .switch__track, .switch__native:active + .switch__background .switch__track {
3615
+ border-color: var(--vb-switch-border-color);
3616
+ background-color: var(--vb-switch-track-fill);
3363
3617
  }
3364
3618
  .switch__native:focus-visible + .switch__background .switch__thumb, .switch__native:active + .switch__background .switch__thumb {
3365
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
3619
+ box-shadow: 0 0 0 var(--vb-switch-border-width) var(--vb-switch-color);
3366
3620
  }
3367
3621
  .switch__native:checked + .switch__background::after {
3368
- left: calc(100% - 1.875rem);
3622
+ left: calc(100% - var(--vb-switch-size) * 0.75);
3369
3623
  }
3370
3624
  .switch__native:checked + .switch__background .switch__track {
3371
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
3372
- background-color: var(--vb-primary-50, hsl(152, 60%, 50%));
3625
+ border-color: var(--vb-switch-color);
3626
+ background-color: var(--vb-switch-color);
3373
3627
  }
3374
3628
  .switch__native:checked + .switch__background .switch__thumb {
3375
- left: calc(100% - 16px);
3376
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
3629
+ left: calc(100% - calc(var(--vb-switch-track-size) - var(--vb-switch-border-width) * 2));
3630
+ box-shadow: 0 0 0 var(--vb-switch-border-width) var(--vb-switch-color);
3377
3631
  }
3378
3632
 
3379
3633
  .switch_size_sm {
3380
- padding-right: 0.46875rem;
3381
- padding-left: 0.46875rem;
3382
- }
3383
- .switch_size_sm .switch__background {
3384
- width: 1.875rem;
3385
- height: 1.875rem;
3386
- }
3387
- .switch_size_sm .switch__background::after {
3388
- width: 1.875rem;
3389
- height: 1.875rem;
3390
- left: -0.46875rem;
3391
- }
3392
- .switch_size_sm .switch__track {
3393
- width: 100%;
3394
- height: 16px;
3395
- border-width: 2px;
3396
- }
3397
- .switch_size_sm .switch__thumb {
3398
- width: 12px;
3399
- height: 12px;
3400
- box-shadow: 0 0 0 2px var(--vb-neutral-50, hsl(214, 20%, 50%));
3401
- }
3402
- .switch_size_sm .switch__native:hover + .switch__background .switch__thumb {
3403
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
3404
- }
3405
- .switch_size_sm .switch__native:focus + .switch__background .switch__thumb {
3406
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
3407
- }
3408
- .switch_size_sm .switch__native:active + .switch__background .switch__thumb {
3409
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
3410
- }
3411
- .switch_size_sm .switch__native:checked + .switch__background::after {
3412
- left: calc(100% - 1.40625rem);
3413
- }
3414
- .switch_size_sm .switch__native:checked + .switch__background .switch__thumb {
3415
- left: calc(100% - 12px);
3416
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
3634
+ --vb-switch-size: 1.875rem;
3635
+ --vb-switch-border-width: 2px;
3636
+ --vb-switch-track-size: 16px;
3417
3637
  }
3418
3638
 
3419
3639
  .switch_size_lg {
3420
- padding-right: 0.78125rem;
3421
- padding-left: 0.78125rem;
3422
- }
3423
- .switch_size_lg .switch__background {
3424
- width: 3.125rem;
3425
- height: 3.125rem;
3426
- }
3427
- .switch_size_lg .switch__background::after {
3428
- width: 3.125rem;
3429
- height: 3.125rem;
3430
- left: -0.78125rem;
3640
+ --vb-switch-size: 3.125rem;
3641
+ --vb-switch-border-width: 2.5px;
3642
+ --vb-switch-track-size: 26px;
3431
3643
  }
3432
- .switch_size_lg .switch__track {
3433
- width: 100%;
3434
- height: 26px;
3435
- border-width: 2.5px;
3436
- }
3437
- .switch_size_lg .switch__thumb {
3438
- width: 21px;
3439
- height: 21px;
3440
- box-shadow: 0 0 0 2.5px var(--vb-neutral-50, hsl(214, 20%, 50%));
3441
- }
3442
- .switch_size_lg .switch__native:hover + .switch__background .switch__thumb {
3443
- box-shadow: 0 0 0 2.5px var(--vb-primary-50, hsl(152, 60%, 50%));
3644
+
3645
+ :root, .vb-theme-root {
3646
+ --vb-table-padding: 0.5em 0.75em;
3647
+ --vb-table-mobile-label-width: 8em;
3648
+ --vb-table-mobile-label-spacing: 0.75em;
3444
3649
  }
3445
- .switch_size_lg .switch__native:focus + .switch__background .switch__thumb {
3446
- box-shadow: 0 0 0 2.5px var(--vb-primary-50, hsl(152, 60%, 50%));
3650
+
3651
+ :root, .vb-theme-root {
3652
+ --vb-table-background: var(--vb-background);
3653
+ --vb-table-background-zebra: hsl(var(--vb-neutral-hs) 50% / 6%);
3654
+ --vb-table-background-hover: hsl(var(--vb-primary-hs) 50% / 20%);
3655
+ --vb-table-border: 1px solid var(--vb-border-color);
3656
+ --vb-table-border-alt: 1px dotted var(--vb-border-color);
3657
+ --vb-table-foreground: var(--vb-foreground);
3447
3658
  }
3448
- .switch_size_lg .switch__native:active + .switch__background .switch__thumb {
3449
- box-shadow: 0 0 0 2.5px var(--vb-primary-50, hsl(152, 60%, 50%));
3659
+ @media (prefers-color-scheme: dark) {
3660
+ :root, .vb-theme-root {
3661
+ --vb-table-background: var(--vb-background);
3662
+ --vb-table-background-zebra: hsl(var(--vb-neutral-hs) 50% / 10%);
3663
+ --vb-table-background-hover: hsl(var(--vb-primary-hs) 50% / 20%);
3664
+ --vb-table-border: 1px solid var(--vb-border-color-dark);
3665
+ --vb-table-border-alt: 1px dotted var(--vb-border-color-dark);
3666
+ --vb-table-foreground: var(--vb-foreground);
3667
+ }
3450
3668
  }
3451
- .switch_size_lg .switch__native:checked + .switch__background::after {
3452
- left: calc(100% - 2.34375rem);
3669
+
3670
+ .vb-theme-light {
3671
+ --vb-table-background: var(--vb-background);
3672
+ --vb-table-background-zebra: hsl(var(--vb-neutral-hs) 50% / 6%);
3673
+ --vb-table-background-hover: hsl(var(--vb-primary-hs) 50% / 20%);
3674
+ --vb-table-border: 1px solid var(--vb-border-color);
3675
+ --vb-table-border-alt: 1px dotted var(--vb-border-color);
3676
+ --vb-table-foreground: var(--vb-foreground);
3453
3677
  }
3454
- .switch_size_lg .switch__native:checked + .switch__background .switch__thumb {
3455
- left: calc(100% - 21px);
3456
- box-shadow: 0 0 0 2.5px var(--vb-primary-50, hsl(152, 60%, 50%));
3678
+
3679
+ .vb-theme-dark {
3680
+ --vb-table-background: var(--vb-background);
3681
+ --vb-table-background-zebra: hsl(var(--vb-neutral-hs) 50% / 10%);
3682
+ --vb-table-background-hover: hsl(var(--vb-primary-hs) 50% / 20%);
3683
+ --vb-table-border: 1px solid var(--vb-border-color-dark);
3684
+ --vb-table-border-alt: 1px dotted var(--vb-border-color-dark);
3685
+ --vb-table-foreground: var(--vb-foreground);
3457
3686
  }
3458
3687
 
3459
3688
  .table {
3460
3689
  width: 100%;
3690
+ background-color: var(--vb-table-background);
3691
+ color: var(--vb-table-foreground);
3461
3692
  text-align: left;
3462
3693
  }
3463
3694
  .table th,
3464
3695
  .table td,
3465
3696
  .table caption {
3466
- padding: 0.5em 1em;
3697
+ padding: var(--vb-table-padding);
3467
3698
  vertical-align: top;
3468
3699
  }
3469
3700
  .table th {
3470
3701
  font-weight: 700;
3471
3702
  }
3703
+
3472
3704
  .table__auto {
3473
3705
  width: 0;
3474
3706
  white-space: nowrap;
@@ -3491,7 +3723,8 @@ input::-moz-placeholder {
3491
3723
  .table_hover tbody tr:hover,
3492
3724
  .table_hover tbody tr:focus {
3493
3725
  z-index: 2;
3494
- background-color: hsla(53, 100%, 50%, 0.15);
3726
+ background-color: var(--vb-table-background-hover);
3727
+ color: var(--vb-table-foreground-hover);
3495
3728
  }
3496
3729
 
3497
3730
  .table_responsive thead,
@@ -3509,7 +3742,7 @@ input::-moz-placeholder {
3509
3742
  }
3510
3743
  .table_responsive [data-mobile-label] {
3511
3744
  position: relative;
3512
- padding-left: calc(8rem + 1em);
3745
+ padding-left: calc(var(--vb-table-mobile-label-width) + var(--vb-table-mobile-label-spacing));
3513
3746
  white-space: normal;
3514
3747
  }
3515
3748
  .table_responsive [data-mobile-label]::before {
@@ -3521,37 +3754,27 @@ input::-moz-placeholder {
3521
3754
  top: 0;
3522
3755
  bottom: 0;
3523
3756
  left: 0;
3524
- width: 8rem;
3525
- padding: 0.5em 1em;
3526
- font-weight: 600;
3527
- }
3528
- .table_responsive.table_size_sm [data-mobile-label] {
3529
- padding-left: calc(8rem + 0.5rem);
3530
- }
3531
- .table_responsive.table_size_sm [data-mobile-label]::before {
3532
- padding: 0.25rem 0.5rem;
3533
- }
3534
- .table_responsive.table_size_lg [data-mobile-label] {
3535
- padding-left: calc(8rem + 1.5rem);
3536
- }
3537
- .table_responsive.table_size_lg [data-mobile-label]::before {
3538
- padding: 0.648rem 1.5rem;
3757
+ width: var(--vb-table-mobile-label-width);
3758
+ padding: var(--vb-table-padding);
3759
+ background-color: var(--vb-table-mobile-label-background);
3760
+ color: var(--vb-table-mobile-label-foreground);
3761
+ font-weight: 700;
3539
3762
  }
3540
3763
  .table_responsive.table_style_bordered {
3541
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3764
+ border: var(--vb-table-border);
3542
3765
  }
3543
3766
  .table_responsive.table_style_bordered td {
3544
3767
  border: none;
3545
3768
  }
3546
3769
  .table_responsive.table_style_bordered td + td,
3547
3770
  .table_responsive.table_style_bordered th + td {
3548
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
3771
+ border-top: var(--vb-table-border-alt);
3549
3772
  }
3550
3773
  .table_responsive.table_style_bordered [data-mobile-label]::before {
3551
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3774
+ border-right: var(--vb-table-border);
3552
3775
  }
3553
3776
  .table_responsive.table_style_bordered tr + tr {
3554
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3777
+ border-top: var(--vb-table-border);
3555
3778
  }
3556
3779
 
3557
3780
  @media (max-width: 479px) {
@@ -3570,7 +3793,7 @@ input::-moz-placeholder {
3570
3793
  }
3571
3794
  .table_responsive_xs [data-mobile-label] {
3572
3795
  position: relative;
3573
- padding-left: calc(8rem + 1em);
3796
+ padding-left: calc(var(--vb-table-mobile-label-width) + var(--vb-table-mobile-label-spacing));
3574
3797
  white-space: normal;
3575
3798
  }
3576
3799
  .table_responsive_xs [data-mobile-label]::before {
@@ -3582,37 +3805,27 @@ input::-moz-placeholder {
3582
3805
  top: 0;
3583
3806
  bottom: 0;
3584
3807
  left: 0;
3585
- width: 8rem;
3586
- padding: 0.5em 1em;
3587
- font-weight: 600;
3588
- }
3589
- .table_responsive_xs.table_size_sm [data-mobile-label] {
3590
- padding-left: calc(8rem + 0.5rem);
3591
- }
3592
- .table_responsive_xs.table_size_sm [data-mobile-label]::before {
3593
- padding: 0.25rem 0.5rem;
3594
- }
3595
- .table_responsive_xs.table_size_lg [data-mobile-label] {
3596
- padding-left: calc(8rem + 1.5rem);
3597
- }
3598
- .table_responsive_xs.table_size_lg [data-mobile-label]::before {
3599
- padding: 0.648rem 1.5rem;
3808
+ width: var(--vb-table-mobile-label-width);
3809
+ padding: var(--vb-table-padding);
3810
+ background-color: var(--vb-table-mobile-label-background);
3811
+ color: var(--vb-table-mobile-label-foreground);
3812
+ font-weight: 700;
3600
3813
  }
3601
3814
  .table_responsive_xs.table_style_bordered {
3602
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3815
+ border: var(--vb-table-border);
3603
3816
  }
3604
3817
  .table_responsive_xs.table_style_bordered td {
3605
3818
  border: none;
3606
3819
  }
3607
3820
  .table_responsive_xs.table_style_bordered td + td,
3608
3821
  .table_responsive_xs.table_style_bordered th + td {
3609
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
3822
+ border-top: var(--vb-table-border-alt);
3610
3823
  }
3611
3824
  .table_responsive_xs.table_style_bordered [data-mobile-label]::before {
3612
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3825
+ border-right: var(--vb-table-border);
3613
3826
  }
3614
3827
  .table_responsive_xs.table_style_bordered tr + tr {
3615
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3828
+ border-top: var(--vb-table-border);
3616
3829
  }
3617
3830
  }
3618
3831
 
@@ -3632,7 +3845,7 @@ input::-moz-placeholder {
3632
3845
  }
3633
3846
  .table_responsive_sm [data-mobile-label] {
3634
3847
  position: relative;
3635
- padding-left: calc(8rem + 1em);
3848
+ padding-left: calc(var(--vb-table-mobile-label-width) + var(--vb-table-mobile-label-spacing));
3636
3849
  white-space: normal;
3637
3850
  }
3638
3851
  .table_responsive_sm [data-mobile-label]::before {
@@ -3644,37 +3857,27 @@ input::-moz-placeholder {
3644
3857
  top: 0;
3645
3858
  bottom: 0;
3646
3859
  left: 0;
3647
- width: 8rem;
3648
- padding: 0.5em 1em;
3649
- font-weight: 600;
3650
- }
3651
- .table_responsive_sm.table_size_sm [data-mobile-label] {
3652
- padding-left: calc(8rem + 0.5rem);
3653
- }
3654
- .table_responsive_sm.table_size_sm [data-mobile-label]::before {
3655
- padding: 0.25rem 0.5rem;
3656
- }
3657
- .table_responsive_sm.table_size_lg [data-mobile-label] {
3658
- padding-left: calc(8rem + 1.5rem);
3659
- }
3660
- .table_responsive_sm.table_size_lg [data-mobile-label]::before {
3661
- padding: 0.648rem 1.5rem;
3860
+ width: var(--vb-table-mobile-label-width);
3861
+ padding: var(--vb-table-padding);
3862
+ background-color: var(--vb-table-mobile-label-background);
3863
+ color: var(--vb-table-mobile-label-foreground);
3864
+ font-weight: 700;
3662
3865
  }
3663
3866
  .table_responsive_sm.table_style_bordered {
3664
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3867
+ border: var(--vb-table-border);
3665
3868
  }
3666
3869
  .table_responsive_sm.table_style_bordered td {
3667
3870
  border: none;
3668
3871
  }
3669
3872
  .table_responsive_sm.table_style_bordered td + td,
3670
3873
  .table_responsive_sm.table_style_bordered th + td {
3671
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
3874
+ border-top: var(--vb-table-border-alt);
3672
3875
  }
3673
3876
  .table_responsive_sm.table_style_bordered [data-mobile-label]::before {
3674
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3877
+ border-right: var(--vb-table-border);
3675
3878
  }
3676
3879
  .table_responsive_sm.table_style_bordered tr + tr {
3677
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3880
+ border-top: var(--vb-table-border);
3678
3881
  }
3679
3882
  }
3680
3883
 
@@ -3694,7 +3897,7 @@ input::-moz-placeholder {
3694
3897
  }
3695
3898
  .table_responsive_md [data-mobile-label] {
3696
3899
  position: relative;
3697
- padding-left: calc(8rem + 1em);
3900
+ padding-left: calc(var(--vb-table-mobile-label-width) + var(--vb-table-mobile-label-spacing));
3698
3901
  white-space: normal;
3699
3902
  }
3700
3903
  .table_responsive_md [data-mobile-label]::before {
@@ -3706,37 +3909,27 @@ input::-moz-placeholder {
3706
3909
  top: 0;
3707
3910
  bottom: 0;
3708
3911
  left: 0;
3709
- width: 8rem;
3710
- padding: 0.5em 1em;
3711
- font-weight: 600;
3712
- }
3713
- .table_responsive_md.table_size_sm [data-mobile-label] {
3714
- padding-left: calc(8rem + 0.5rem);
3715
- }
3716
- .table_responsive_md.table_size_sm [data-mobile-label]::before {
3717
- padding: 0.25rem 0.5rem;
3718
- }
3719
- .table_responsive_md.table_size_lg [data-mobile-label] {
3720
- padding-left: calc(8rem + 1.5rem);
3721
- }
3722
- .table_responsive_md.table_size_lg [data-mobile-label]::before {
3723
- padding: 0.648rem 1.5rem;
3912
+ width: var(--vb-table-mobile-label-width);
3913
+ padding: var(--vb-table-padding);
3914
+ background-color: var(--vb-table-mobile-label-background);
3915
+ color: var(--vb-table-mobile-label-foreground);
3916
+ font-weight: 700;
3724
3917
  }
3725
3918
  .table_responsive_md.table_style_bordered {
3726
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3919
+ border: var(--vb-table-border);
3727
3920
  }
3728
3921
  .table_responsive_md.table_style_bordered td {
3729
3922
  border: none;
3730
3923
  }
3731
3924
  .table_responsive_md.table_style_bordered td + td,
3732
3925
  .table_responsive_md.table_style_bordered th + td {
3733
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
3926
+ border-top: var(--vb-table-border-alt);
3734
3927
  }
3735
3928
  .table_responsive_md.table_style_bordered [data-mobile-label]::before {
3736
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3929
+ border-right: var(--vb-table-border);
3737
3930
  }
3738
3931
  .table_responsive_md.table_style_bordered tr + tr {
3739
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3932
+ border-top: var(--vb-table-border);
3740
3933
  }
3741
3934
  }
3742
3935
 
@@ -3756,7 +3949,7 @@ input::-moz-placeholder {
3756
3949
  }
3757
3950
  .table_responsive_lg [data-mobile-label] {
3758
3951
  position: relative;
3759
- padding-left: calc(8rem + 1em);
3952
+ padding-left: calc(var(--vb-table-mobile-label-width) + var(--vb-table-mobile-label-spacing));
3760
3953
  white-space: normal;
3761
3954
  }
3762
3955
  .table_responsive_lg [data-mobile-label]::before {
@@ -3768,37 +3961,27 @@ input::-moz-placeholder {
3768
3961
  top: 0;
3769
3962
  bottom: 0;
3770
3963
  left: 0;
3771
- width: 8rem;
3772
- padding: 0.5em 1em;
3773
- font-weight: 600;
3774
- }
3775
- .table_responsive_lg.table_size_sm [data-mobile-label] {
3776
- padding-left: calc(8rem + 0.5rem);
3777
- }
3778
- .table_responsive_lg.table_size_sm [data-mobile-label]::before {
3779
- padding: 0.25rem 0.5rem;
3780
- }
3781
- .table_responsive_lg.table_size_lg [data-mobile-label] {
3782
- padding-left: calc(8rem + 1.5rem);
3783
- }
3784
- .table_responsive_lg.table_size_lg [data-mobile-label]::before {
3785
- padding: 0.648rem 1.5rem;
3964
+ width: var(--vb-table-mobile-label-width);
3965
+ padding: var(--vb-table-padding);
3966
+ background-color: var(--vb-table-mobile-label-background);
3967
+ color: var(--vb-table-mobile-label-foreground);
3968
+ font-weight: 700;
3786
3969
  }
3787
3970
  .table_responsive_lg.table_style_bordered {
3788
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3971
+ border: var(--vb-table-border);
3789
3972
  }
3790
3973
  .table_responsive_lg.table_style_bordered td {
3791
3974
  border: none;
3792
3975
  }
3793
3976
  .table_responsive_lg.table_style_bordered td + td,
3794
3977
  .table_responsive_lg.table_style_bordered th + td {
3795
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
3978
+ border-top: var(--vb-table-border-alt);
3796
3979
  }
3797
3980
  .table_responsive_lg.table_style_bordered [data-mobile-label]::before {
3798
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3981
+ border-right: var(--vb-table-border);
3799
3982
  }
3800
3983
  .table_responsive_lg.table_style_bordered tr + tr {
3801
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3984
+ border-top: var(--vb-table-border);
3802
3985
  }
3803
3986
  }
3804
3987
 
@@ -3818,7 +4001,7 @@ input::-moz-placeholder {
3818
4001
  }
3819
4002
  .table_responsive_xl [data-mobile-label] {
3820
4003
  position: relative;
3821
- padding-left: calc(8rem + 1em);
4004
+ padding-left: calc(var(--vb-table-mobile-label-width) + var(--vb-table-mobile-label-spacing));
3822
4005
  white-space: normal;
3823
4006
  }
3824
4007
  .table_responsive_xl [data-mobile-label]::before {
@@ -3830,69 +4013,71 @@ input::-moz-placeholder {
3830
4013
  top: 0;
3831
4014
  bottom: 0;
3832
4015
  left: 0;
3833
- width: 8rem;
3834
- padding: 0.5em 1em;
3835
- font-weight: 600;
3836
- }
3837
- .table_responsive_xl.table_size_sm [data-mobile-label] {
3838
- padding-left: calc(8rem + 0.5rem);
3839
- }
3840
- .table_responsive_xl.table_size_sm [data-mobile-label]::before {
3841
- padding: 0.25rem 0.5rem;
3842
- }
3843
- .table_responsive_xl.table_size_lg [data-mobile-label] {
3844
- padding-left: calc(8rem + 1.5rem);
3845
- }
3846
- .table_responsive_xl.table_size_lg [data-mobile-label]::before {
3847
- padding: 0.648rem 1.5rem;
4016
+ width: var(--vb-table-mobile-label-width);
4017
+ padding: var(--vb-table-padding);
4018
+ background-color: var(--vb-table-mobile-label-background);
4019
+ color: var(--vb-table-mobile-label-foreground);
4020
+ font-weight: 700;
3848
4021
  }
3849
4022
  .table_responsive_xl.table_style_bordered {
3850
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4023
+ border: var(--vb-table-border);
3851
4024
  }
3852
4025
  .table_responsive_xl.table_style_bordered td {
3853
4026
  border: none;
3854
4027
  }
3855
4028
  .table_responsive_xl.table_style_bordered td + td,
3856
4029
  .table_responsive_xl.table_style_bordered th + td {
3857
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
4030
+ border-top: var(--vb-table-border-alt);
3858
4031
  }
3859
4032
  .table_responsive_xl.table_style_bordered [data-mobile-label]::before {
3860
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4033
+ border-right: var(--vb-table-border);
3861
4034
  }
3862
4035
  .table_responsive_xl.table_style_bordered tr + tr {
3863
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4036
+ border-top: var(--vb-table-border);
3864
4037
  }
3865
4038
  }
3866
4039
 
3867
4040
  .table_size_sm th,
3868
4041
  .table_size_sm td,
3869
4042
  .table_size_sm caption {
3870
- padding: 0.25rem 0.5rem;
4043
+ --vb-table-padding: 0.25em 0.5em;
4044
+ --vb-table-mobile-label-width: 8em;
4045
+ --vb-table-mobile-label-spacing: 0.5em;
3871
4046
  }
3872
4047
 
3873
4048
  .table_size_lg th,
3874
4049
  .table_size_lg td,
3875
4050
  .table_size_lg caption {
3876
- padding: 0.648rem 1.5rem;
4051
+ --vb-table-padding: 1em 1.25em;
4052
+ --vb-table-mobile-label-width: 8em;
4053
+ --vb-table-mobile-label-spacing: 1.25em;
3877
4054
  }
3878
4055
 
3879
4056
  .table_style_rowed {
3880
- border-bottom: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4057
+ border-bottom: var(--vb-table-border);
3881
4058
  }
3882
4059
  .table_style_rowed tr {
3883
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4060
+ border-top: var(--vb-table-border);
4061
+ }
4062
+ .table_style_rowed th:first-child,
4063
+ .table_style_rowed td:first-child {
4064
+ padding-left: 0;
4065
+ }
4066
+ .table_style_rowed th:last-child,
4067
+ .table_style_rowed td:last-child {
4068
+ padding-right: 0;
3884
4069
  }
3885
4070
 
3886
4071
  .table_style_bordered th,
3887
4072
  .table_style_bordered td {
3888
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4073
+ border: var(--vb-table-border);
3889
4074
  }
3890
4075
 
3891
4076
  .table_zebra thead tr {
3892
- background-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 50%, 3%);
4077
+ background-color: var(--vb-table-background-zebra);
3893
4078
  }
3894
4079
  .table_zebra tr:nth-child(even) {
3895
- background-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 50%, 3%);
4080
+ background-color: var(--vb-table-background-zebra);
3896
4081
  }
3897
4082
 
3898
4083
  .background-clip-border {
@@ -3908,15 +4093,15 @@ input::-moz-placeholder {
3908
4093
  }
3909
4094
 
3910
4095
  .background {
3911
- background-color: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%))) !important;
4096
+ background-color: var(--vb-background) !important;
3912
4097
  }
3913
4098
 
3914
4099
  .background-dark {
3915
- background-color: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%))) !important;
4100
+ background-color: var(--vb-background-dark) !important;
3916
4101
  }
3917
4102
 
3918
4103
  .background-darker {
3919
- background-color: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%))) !important;
4104
+ background-color: var(--vb-background-darker) !important;
3920
4105
  }
3921
4106
 
3922
4107
  .background-black {
@@ -3936,67 +4121,67 @@ input::-moz-placeholder {
3936
4121
  }
3937
4122
 
3938
4123
  .background-primary-0 {
3939
- background-color: var(--vb-primary-0, hsl(152, 60%, 0%)) !important;
4124
+ background-color: var(--vb-primary-0) !important;
3940
4125
  }
3941
4126
 
3942
4127
  .background-primary-5 {
3943
- background-color: var(--vb-primary-5, hsl(152, 60%, 5%)) !important;
4128
+ background-color: var(--vb-primary-5) !important;
3944
4129
  }
3945
4130
 
3946
4131
  .background-primary-10 {
3947
- background-color: var(--vb-primary-10, hsl(152, 60%, 10%)) !important;
4132
+ background-color: var(--vb-primary-10) !important;
3948
4133
  }
3949
4134
 
3950
4135
  .background-primary-12 {
3951
- background-color: var(--vb-primary-12, hsl(152, 60%, 12%)) !important;
4136
+ background-color: var(--vb-primary-12) !important;
3952
4137
  }
3953
4138
 
3954
4139
  .background-primary-15 {
3955
- background-color: var(--vb-primary-15, hsl(152, 60%, 15%)) !important;
4140
+ background-color: var(--vb-primary-15) !important;
3956
4141
  }
3957
4142
 
3958
4143
  .background-primary-20 {
3959
- background-color: var(--vb-primary-20, hsl(152, 60%, 20%)) !important;
4144
+ background-color: var(--vb-primary-20) !important;
3960
4145
  }
3961
4146
 
3962
4147
  .background-primary-30 {
3963
- background-color: var(--vb-primary-30, hsl(152, 60%, 30%)) !important;
4148
+ background-color: var(--vb-primary-30) !important;
3964
4149
  }
3965
4150
 
3966
4151
  .background-primary-40 {
3967
- background-color: var(--vb-primary-40, hsl(152, 60%, 40%)) !important;
4152
+ background-color: var(--vb-primary-40) !important;
3968
4153
  }
3969
4154
 
3970
4155
  .background-primary-50 {
3971
- background-color: var(--vb-primary-50, hsl(152, 60%, 50%)) !important;
4156
+ background-color: var(--vb-primary-50) !important;
3972
4157
  }
3973
4158
 
3974
4159
  .background-primary-60 {
3975
- background-color: var(--vb-primary-60, hsl(152, 60%, 60%)) !important;
4160
+ background-color: var(--vb-primary-60) !important;
3976
4161
  }
3977
4162
 
3978
4163
  .background-primary-70 {
3979
- background-color: var(--vb-primary-70, hsl(152, 60%, 70%)) !important;
4164
+ background-color: var(--vb-primary-70) !important;
3980
4165
  }
3981
4166
 
3982
4167
  .background-primary-80 {
3983
- background-color: var(--vb-primary-80, hsl(152, 60%, 80%)) !important;
4168
+ background-color: var(--vb-primary-80) !important;
3984
4169
  }
3985
4170
 
3986
4171
  .background-primary-90 {
3987
- background-color: var(--vb-primary-90, hsl(152, 60%, 90%)) !important;
4172
+ background-color: var(--vb-primary-90) !important;
3988
4173
  }
3989
4174
 
3990
4175
  .background-primary-95 {
3991
- background-color: var(--vb-primary-95, hsl(152, 60%, 95%)) !important;
4176
+ background-color: var(--vb-primary-95) !important;
3992
4177
  }
3993
4178
 
3994
4179
  .background-primary-98 {
3995
- background-color: var(--vb-primary-98, hsl(152, 60%, 98%)) !important;
4180
+ background-color: var(--vb-primary-98) !important;
3996
4181
  }
3997
4182
 
3998
4183
  .background-primary-100 {
3999
- background-color: var(--vb-primary-100, hsl(152, 60%, 100%)) !important;
4184
+ background-color: var(--vb-primary-100) !important;
4000
4185
  }
4001
4186
 
4002
4187
  .background-secondary {
@@ -4004,67 +4189,67 @@ input::-moz-placeholder {
4004
4189
  }
4005
4190
 
4006
4191
  .background-secondary-0 {
4007
- background-color: var(--vb-secondary-0, hsl(214, 50%, 0%)) !important;
4192
+ background-color: var(--vb-secondary-0) !important;
4008
4193
  }
4009
4194
 
4010
4195
  .background-secondary-5 {
4011
- background-color: var(--vb-secondary-5, hsl(214, 50%, 5%)) !important;
4196
+ background-color: var(--vb-secondary-5) !important;
4012
4197
  }
4013
4198
 
4014
4199
  .background-secondary-10 {
4015
- background-color: var(--vb-secondary-10, hsl(214, 50%, 10%)) !important;
4200
+ background-color: var(--vb-secondary-10) !important;
4016
4201
  }
4017
4202
 
4018
4203
  .background-secondary-12 {
4019
- background-color: var(--vb-secondary-12, hsl(214, 50%, 12%)) !important;
4204
+ background-color: var(--vb-secondary-12) !important;
4020
4205
  }
4021
4206
 
4022
4207
  .background-secondary-15 {
4023
- background-color: var(--vb-secondary-15, hsl(214, 50%, 15%)) !important;
4208
+ background-color: var(--vb-secondary-15) !important;
4024
4209
  }
4025
4210
 
4026
4211
  .background-secondary-20 {
4027
- background-color: var(--vb-secondary-20, hsl(214, 50%, 20%)) !important;
4212
+ background-color: var(--vb-secondary-20) !important;
4028
4213
  }
4029
4214
 
4030
4215
  .background-secondary-30 {
4031
- background-color: var(--vb-secondary-30, hsl(214, 50%, 30%)) !important;
4216
+ background-color: var(--vb-secondary-30) !important;
4032
4217
  }
4033
4218
 
4034
4219
  .background-secondary-40 {
4035
- background-color: var(--vb-secondary-40, hsl(214, 50%, 40%)) !important;
4220
+ background-color: var(--vb-secondary-40) !important;
4036
4221
  }
4037
4222
 
4038
4223
  .background-secondary-50 {
4039
- background-color: var(--vb-secondary-50, hsl(214, 50%, 50%)) !important;
4224
+ background-color: var(--vb-secondary-50) !important;
4040
4225
  }
4041
4226
 
4042
4227
  .background-secondary-60 {
4043
- background-color: var(--vb-secondary-60, hsl(214, 50%, 60%)) !important;
4228
+ background-color: var(--vb-secondary-60) !important;
4044
4229
  }
4045
4230
 
4046
4231
  .background-secondary-70 {
4047
- background-color: var(--vb-secondary-70, hsl(214, 50%, 70%)) !important;
4232
+ background-color: var(--vb-secondary-70) !important;
4048
4233
  }
4049
4234
 
4050
4235
  .background-secondary-80 {
4051
- background-color: var(--vb-secondary-80, hsl(214, 50%, 80%)) !important;
4236
+ background-color: var(--vb-secondary-80) !important;
4052
4237
  }
4053
4238
 
4054
4239
  .background-secondary-90 {
4055
- background-color: var(--vb-secondary-90, hsl(214, 50%, 90%)) !important;
4240
+ background-color: var(--vb-secondary-90) !important;
4056
4241
  }
4057
4242
 
4058
4243
  .background-secondary-95 {
4059
- background-color: var(--vb-secondary-95, hsl(214, 50%, 95%)) !important;
4244
+ background-color: var(--vb-secondary-95) !important;
4060
4245
  }
4061
4246
 
4062
4247
  .background-secondary-98 {
4063
- background-color: var(--vb-secondary-98, hsl(214, 50%, 98%)) !important;
4248
+ background-color: var(--vb-secondary-98) !important;
4064
4249
  }
4065
4250
 
4066
4251
  .background-secondary-100 {
4067
- background-color: var(--vb-secondary-100, hsl(214, 50%, 100%)) !important;
4252
+ background-color: var(--vb-secondary-100) !important;
4068
4253
  }
4069
4254
 
4070
4255
  .background-neutral {
@@ -4072,67 +4257,67 @@ input::-moz-placeholder {
4072
4257
  }
4073
4258
 
4074
4259
  .background-neutral-0 {
4075
- background-color: var(--vb-neutral-0, hsl(214, 20%, 0%)) !important;
4260
+ background-color: var(--vb-neutral-0) !important;
4076
4261
  }
4077
4262
 
4078
4263
  .background-neutral-5 {
4079
- background-color: var(--vb-neutral-5, hsl(214, 20%, 5%)) !important;
4264
+ background-color: var(--vb-neutral-5) !important;
4080
4265
  }
4081
4266
 
4082
4267
  .background-neutral-10 {
4083
- background-color: var(--vb-neutral-10, hsl(214, 20%, 10%)) !important;
4268
+ background-color: var(--vb-neutral-10) !important;
4084
4269
  }
4085
4270
 
4086
4271
  .background-neutral-12 {
4087
- background-color: var(--vb-neutral-12, hsl(214, 20%, 12%)) !important;
4272
+ background-color: var(--vb-neutral-12) !important;
4088
4273
  }
4089
4274
 
4090
4275
  .background-neutral-15 {
4091
- background-color: var(--vb-neutral-15, hsl(214, 20%, 15%)) !important;
4276
+ background-color: var(--vb-neutral-15) !important;
4092
4277
  }
4093
4278
 
4094
4279
  .background-neutral-20 {
4095
- background-color: var(--vb-neutral-20, hsl(214, 20%, 20%)) !important;
4280
+ background-color: var(--vb-neutral-20) !important;
4096
4281
  }
4097
4282
 
4098
4283
  .background-neutral-30 {
4099
- background-color: var(--vb-neutral-30, hsl(214, 20%, 30%)) !important;
4284
+ background-color: var(--vb-neutral-30) !important;
4100
4285
  }
4101
4286
 
4102
4287
  .background-neutral-40 {
4103
- background-color: var(--vb-neutral-40, hsl(214, 20%, 40%)) !important;
4288
+ background-color: var(--vb-neutral-40) !important;
4104
4289
  }
4105
4290
 
4106
4291
  .background-neutral-50 {
4107
- background-color: var(--vb-neutral-50, hsl(214, 20%, 50%)) !important;
4292
+ background-color: var(--vb-neutral-50) !important;
4108
4293
  }
4109
4294
 
4110
4295
  .background-neutral-60 {
4111
- background-color: var(--vb-neutral-60, hsl(214, 20%, 60%)) !important;
4296
+ background-color: var(--vb-neutral-60) !important;
4112
4297
  }
4113
4298
 
4114
4299
  .background-neutral-70 {
4115
- background-color: var(--vb-neutral-70, hsl(214, 20%, 70%)) !important;
4300
+ background-color: var(--vb-neutral-70) !important;
4116
4301
  }
4117
4302
 
4118
4303
  .background-neutral-80 {
4119
- background-color: var(--vb-neutral-80, hsl(214, 20%, 80%)) !important;
4304
+ background-color: var(--vb-neutral-80) !important;
4120
4305
  }
4121
4306
 
4122
4307
  .background-neutral-90 {
4123
- background-color: var(--vb-neutral-90, hsl(214, 20%, 90%)) !important;
4308
+ background-color: var(--vb-neutral-90) !important;
4124
4309
  }
4125
4310
 
4126
4311
  .background-neutral-95 {
4127
- background-color: var(--vb-neutral-95, hsl(214, 20%, 95%)) !important;
4312
+ background-color: var(--vb-neutral-95) !important;
4128
4313
  }
4129
4314
 
4130
4315
  .background-neutral-98 {
4131
- background-color: var(--vb-neutral-98, hsl(214, 20%, 98%)) !important;
4316
+ background-color: var(--vb-neutral-98) !important;
4132
4317
  }
4133
4318
 
4134
4319
  .background-neutral-100 {
4135
- background-color: var(--vb-neutral-100, hsl(214, 20%, 100%)) !important;
4320
+ background-color: var(--vb-neutral-100) !important;
4136
4321
  }
4137
4322
 
4138
4323
  .background-important {
@@ -4140,79 +4325,79 @@ input::-moz-placeholder {
4140
4325
  }
4141
4326
 
4142
4327
  .background-important-0 {
4143
- background-color: var(--vb-important-0, hsl(0, 80%, 0%)) !important;
4328
+ background-color: var(--vb-important-0) !important;
4144
4329
  }
4145
4330
 
4146
4331
  .background-important-5 {
4147
- background-color: var(--vb-important-5, hsl(0, 80%, 5%)) !important;
4332
+ background-color: var(--vb-important-5) !important;
4148
4333
  }
4149
4334
 
4150
4335
  .background-important-10 {
4151
- background-color: var(--vb-important-10, hsl(0, 80%, 10%)) !important;
4336
+ background-color: var(--vb-important-10) !important;
4152
4337
  }
4153
4338
 
4154
4339
  .background-important-12 {
4155
- background-color: var(--vb-important-12, hsl(0, 80%, 12%)) !important;
4340
+ background-color: var(--vb-important-12) !important;
4156
4341
  }
4157
4342
 
4158
4343
  .background-important-15 {
4159
- background-color: var(--vb-important-15, hsl(0, 80%, 15%)) !important;
4344
+ background-color: var(--vb-important-15) !important;
4160
4345
  }
4161
4346
 
4162
4347
  .background-important-20 {
4163
- background-color: var(--vb-important-20, hsl(0, 80%, 20%)) !important;
4348
+ background-color: var(--vb-important-20) !important;
4164
4349
  }
4165
4350
 
4166
4351
  .background-important-30 {
4167
- background-color: var(--vb-important-30, hsl(0, 80%, 30%)) !important;
4352
+ background-color: var(--vb-important-30) !important;
4168
4353
  }
4169
4354
 
4170
4355
  .background-important-40 {
4171
- background-color: var(--vb-important-40, hsl(0, 80%, 40%)) !important;
4356
+ background-color: var(--vb-important-40) !important;
4172
4357
  }
4173
4358
 
4174
4359
  .background-important-50 {
4175
- background-color: var(--vb-important-50, hsl(0, 80%, 50%)) !important;
4360
+ background-color: var(--vb-important-50) !important;
4176
4361
  }
4177
4362
 
4178
4363
  .background-important-60 {
4179
- background-color: var(--vb-important-60, hsl(0, 80%, 60%)) !important;
4364
+ background-color: var(--vb-important-60) !important;
4180
4365
  }
4181
4366
 
4182
4367
  .background-important-70 {
4183
- background-color: var(--vb-important-70, hsl(0, 80%, 70%)) !important;
4368
+ background-color: var(--vb-important-70) !important;
4184
4369
  }
4185
4370
 
4186
4371
  .background-important-80 {
4187
- background-color: var(--vb-important-80, hsl(0, 80%, 80%)) !important;
4372
+ background-color: var(--vb-important-80) !important;
4188
4373
  }
4189
4374
 
4190
4375
  .background-important-90 {
4191
- background-color: var(--vb-important-90, hsl(0, 80%, 90%)) !important;
4376
+ background-color: var(--vb-important-90) !important;
4192
4377
  }
4193
4378
 
4194
4379
  .background-important-95 {
4195
- background-color: var(--vb-important-95, hsl(0, 80%, 95%)) !important;
4380
+ background-color: var(--vb-important-95) !important;
4196
4381
  }
4197
4382
 
4198
4383
  .background-important-98 {
4199
- background-color: var(--vb-important-98, hsl(0, 80%, 98%)) !important;
4384
+ background-color: var(--vb-important-98) !important;
4200
4385
  }
4201
4386
 
4202
4387
  .background-important-100 {
4203
- background-color: var(--vb-important-100, hsl(0, 80%, 100%)) !important;
4388
+ background-color: var(--vb-important-100) !important;
4204
4389
  }
4205
4390
 
4206
4391
  .foreground {
4207
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%))) !important;
4392
+ color: var(--vb-foreground) !important;
4208
4393
  }
4209
4394
 
4210
4395
  .foreground-light {
4211
- color: var(--vb-foreground-light, var(--vb-neutral-40, hsl(214, 20%, 40%))) !important;
4396
+ color: var(--vb-foreground-light) !important;
4212
4397
  }
4213
4398
 
4214
4399
  .foreground-lighter {
4215
- color: var(--vb-foreground-lighter, var(--vb-neutral-60, hsl(214, 20%, 60%))) !important;
4400
+ color: var(--vb-foreground-lighter) !important;
4216
4401
  }
4217
4402
 
4218
4403
  .foreground-black {
@@ -4232,67 +4417,67 @@ input::-moz-placeholder {
4232
4417
  }
4233
4418
 
4234
4419
  .foreground-primary-0 {
4235
- color: var(--vb-primary-0, hsl(152, 60%, 0%)) !important;
4420
+ color: var(--vb-primary-0) !important;
4236
4421
  }
4237
4422
 
4238
4423
  .foreground-primary-5 {
4239
- color: var(--vb-primary-5, hsl(152, 60%, 5%)) !important;
4424
+ color: var(--vb-primary-5) !important;
4240
4425
  }
4241
4426
 
4242
4427
  .foreground-primary-10 {
4243
- color: var(--vb-primary-10, hsl(152, 60%, 10%)) !important;
4428
+ color: var(--vb-primary-10) !important;
4244
4429
  }
4245
4430
 
4246
4431
  .foreground-primary-12 {
4247
- color: var(--vb-primary-12, hsl(152, 60%, 12%)) !important;
4432
+ color: var(--vb-primary-12) !important;
4248
4433
  }
4249
4434
 
4250
4435
  .foreground-primary-15 {
4251
- color: var(--vb-primary-15, hsl(152, 60%, 15%)) !important;
4436
+ color: var(--vb-primary-15) !important;
4252
4437
  }
4253
4438
 
4254
4439
  .foreground-primary-20 {
4255
- color: var(--vb-primary-20, hsl(152, 60%, 20%)) !important;
4440
+ color: var(--vb-primary-20) !important;
4256
4441
  }
4257
4442
 
4258
4443
  .foreground-primary-30 {
4259
- color: var(--vb-primary-30, hsl(152, 60%, 30%)) !important;
4444
+ color: var(--vb-primary-30) !important;
4260
4445
  }
4261
4446
 
4262
4447
  .foreground-primary-40 {
4263
- color: var(--vb-primary-40, hsl(152, 60%, 40%)) !important;
4448
+ color: var(--vb-primary-40) !important;
4264
4449
  }
4265
4450
 
4266
4451
  .foreground-primary-50 {
4267
- color: var(--vb-primary-50, hsl(152, 60%, 50%)) !important;
4452
+ color: var(--vb-primary-50) !important;
4268
4453
  }
4269
4454
 
4270
4455
  .foreground-primary-60 {
4271
- color: var(--vb-primary-60, hsl(152, 60%, 60%)) !important;
4456
+ color: var(--vb-primary-60) !important;
4272
4457
  }
4273
4458
 
4274
4459
  .foreground-primary-70 {
4275
- color: var(--vb-primary-70, hsl(152, 60%, 70%)) !important;
4460
+ color: var(--vb-primary-70) !important;
4276
4461
  }
4277
4462
 
4278
4463
  .foreground-primary-80 {
4279
- color: var(--vb-primary-80, hsl(152, 60%, 80%)) !important;
4464
+ color: var(--vb-primary-80) !important;
4280
4465
  }
4281
4466
 
4282
4467
  .foreground-primary-90 {
4283
- color: var(--vb-primary-90, hsl(152, 60%, 90%)) !important;
4468
+ color: var(--vb-primary-90) !important;
4284
4469
  }
4285
4470
 
4286
4471
  .foreground-primary-95 {
4287
- color: var(--vb-primary-95, hsl(152, 60%, 95%)) !important;
4472
+ color: var(--vb-primary-95) !important;
4288
4473
  }
4289
4474
 
4290
4475
  .foreground-primary-98 {
4291
- color: var(--vb-primary-98, hsl(152, 60%, 98%)) !important;
4476
+ color: var(--vb-primary-98) !important;
4292
4477
  }
4293
4478
 
4294
4479
  .foreground-primary-100 {
4295
- color: var(--vb-primary-100, hsl(152, 60%, 100%)) !important;
4480
+ color: var(--vb-primary-100) !important;
4296
4481
  }
4297
4482
 
4298
4483
  .foreground-secondary {
@@ -4300,67 +4485,67 @@ input::-moz-placeholder {
4300
4485
  }
4301
4486
 
4302
4487
  .foreground-secondary-0 {
4303
- color: var(--vb-secondary-0, hsl(214, 50%, 0%)) !important;
4488
+ color: var(--vb-secondary-0) !important;
4304
4489
  }
4305
4490
 
4306
4491
  .foreground-secondary-5 {
4307
- color: var(--vb-secondary-5, hsl(214, 50%, 5%)) !important;
4492
+ color: var(--vb-secondary-5) !important;
4308
4493
  }
4309
4494
 
4310
4495
  .foreground-secondary-10 {
4311
- color: var(--vb-secondary-10, hsl(214, 50%, 10%)) !important;
4496
+ color: var(--vb-secondary-10) !important;
4312
4497
  }
4313
4498
 
4314
4499
  .foreground-secondary-12 {
4315
- color: var(--vb-secondary-12, hsl(214, 50%, 12%)) !important;
4500
+ color: var(--vb-secondary-12) !important;
4316
4501
  }
4317
4502
 
4318
4503
  .foreground-secondary-15 {
4319
- color: var(--vb-secondary-15, hsl(214, 50%, 15%)) !important;
4504
+ color: var(--vb-secondary-15) !important;
4320
4505
  }
4321
4506
 
4322
4507
  .foreground-secondary-20 {
4323
- color: var(--vb-secondary-20, hsl(214, 50%, 20%)) !important;
4508
+ color: var(--vb-secondary-20) !important;
4324
4509
  }
4325
4510
 
4326
4511
  .foreground-secondary-30 {
4327
- color: var(--vb-secondary-30, hsl(214, 50%, 30%)) !important;
4512
+ color: var(--vb-secondary-30) !important;
4328
4513
  }
4329
4514
 
4330
4515
  .foreground-secondary-40 {
4331
- color: var(--vb-secondary-40, hsl(214, 50%, 40%)) !important;
4516
+ color: var(--vb-secondary-40) !important;
4332
4517
  }
4333
4518
 
4334
4519
  .foreground-secondary-50 {
4335
- color: var(--vb-secondary-50, hsl(214, 50%, 50%)) !important;
4520
+ color: var(--vb-secondary-50) !important;
4336
4521
  }
4337
4522
 
4338
4523
  .foreground-secondary-60 {
4339
- color: var(--vb-secondary-60, hsl(214, 50%, 60%)) !important;
4524
+ color: var(--vb-secondary-60) !important;
4340
4525
  }
4341
4526
 
4342
4527
  .foreground-secondary-70 {
4343
- color: var(--vb-secondary-70, hsl(214, 50%, 70%)) !important;
4528
+ color: var(--vb-secondary-70) !important;
4344
4529
  }
4345
4530
 
4346
4531
  .foreground-secondary-80 {
4347
- color: var(--vb-secondary-80, hsl(214, 50%, 80%)) !important;
4532
+ color: var(--vb-secondary-80) !important;
4348
4533
  }
4349
4534
 
4350
4535
  .foreground-secondary-90 {
4351
- color: var(--vb-secondary-90, hsl(214, 50%, 90%)) !important;
4536
+ color: var(--vb-secondary-90) !important;
4352
4537
  }
4353
4538
 
4354
4539
  .foreground-secondary-95 {
4355
- color: var(--vb-secondary-95, hsl(214, 50%, 95%)) !important;
4540
+ color: var(--vb-secondary-95) !important;
4356
4541
  }
4357
4542
 
4358
4543
  .foreground-secondary-98 {
4359
- color: var(--vb-secondary-98, hsl(214, 50%, 98%)) !important;
4544
+ color: var(--vb-secondary-98) !important;
4360
4545
  }
4361
4546
 
4362
4547
  .foreground-secondary-100 {
4363
- color: var(--vb-secondary-100, hsl(214, 50%, 100%)) !important;
4548
+ color: var(--vb-secondary-100) !important;
4364
4549
  }
4365
4550
 
4366
4551
  .foreground-neutral {
@@ -4368,67 +4553,67 @@ input::-moz-placeholder {
4368
4553
  }
4369
4554
 
4370
4555
  .foreground-neutral-0 {
4371
- color: var(--vb-neutral-0, hsl(214, 20%, 0%)) !important;
4556
+ color: var(--vb-neutral-0) !important;
4372
4557
  }
4373
4558
 
4374
4559
  .foreground-neutral-5 {
4375
- color: var(--vb-neutral-5, hsl(214, 20%, 5%)) !important;
4560
+ color: var(--vb-neutral-5) !important;
4376
4561
  }
4377
4562
 
4378
4563
  .foreground-neutral-10 {
4379
- color: var(--vb-neutral-10, hsl(214, 20%, 10%)) !important;
4564
+ color: var(--vb-neutral-10) !important;
4380
4565
  }
4381
4566
 
4382
4567
  .foreground-neutral-12 {
4383
- color: var(--vb-neutral-12, hsl(214, 20%, 12%)) !important;
4568
+ color: var(--vb-neutral-12) !important;
4384
4569
  }
4385
4570
 
4386
4571
  .foreground-neutral-15 {
4387
- color: var(--vb-neutral-15, hsl(214, 20%, 15%)) !important;
4572
+ color: var(--vb-neutral-15) !important;
4388
4573
  }
4389
4574
 
4390
4575
  .foreground-neutral-20 {
4391
- color: var(--vb-neutral-20, hsl(214, 20%, 20%)) !important;
4576
+ color: var(--vb-neutral-20) !important;
4392
4577
  }
4393
4578
 
4394
4579
  .foreground-neutral-30 {
4395
- color: var(--vb-neutral-30, hsl(214, 20%, 30%)) !important;
4580
+ color: var(--vb-neutral-30) !important;
4396
4581
  }
4397
4582
 
4398
4583
  .foreground-neutral-40 {
4399
- color: var(--vb-neutral-40, hsl(214, 20%, 40%)) !important;
4584
+ color: var(--vb-neutral-40) !important;
4400
4585
  }
4401
4586
 
4402
4587
  .foreground-neutral-50 {
4403
- color: var(--vb-neutral-50, hsl(214, 20%, 50%)) !important;
4588
+ color: var(--vb-neutral-50) !important;
4404
4589
  }
4405
4590
 
4406
4591
  .foreground-neutral-60 {
4407
- color: var(--vb-neutral-60, hsl(214, 20%, 60%)) !important;
4592
+ color: var(--vb-neutral-60) !important;
4408
4593
  }
4409
4594
 
4410
4595
  .foreground-neutral-70 {
4411
- color: var(--vb-neutral-70, hsl(214, 20%, 70%)) !important;
4596
+ color: var(--vb-neutral-70) !important;
4412
4597
  }
4413
4598
 
4414
4599
  .foreground-neutral-80 {
4415
- color: var(--vb-neutral-80, hsl(214, 20%, 80%)) !important;
4600
+ color: var(--vb-neutral-80) !important;
4416
4601
  }
4417
4602
 
4418
4603
  .foreground-neutral-90 {
4419
- color: var(--vb-neutral-90, hsl(214, 20%, 90%)) !important;
4604
+ color: var(--vb-neutral-90) !important;
4420
4605
  }
4421
4606
 
4422
4607
  .foreground-neutral-95 {
4423
- color: var(--vb-neutral-95, hsl(214, 20%, 95%)) !important;
4608
+ color: var(--vb-neutral-95) !important;
4424
4609
  }
4425
4610
 
4426
4611
  .foreground-neutral-98 {
4427
- color: var(--vb-neutral-98, hsl(214, 20%, 98%)) !important;
4612
+ color: var(--vb-neutral-98) !important;
4428
4613
  }
4429
4614
 
4430
4615
  .foreground-neutral-100 {
4431
- color: var(--vb-neutral-100, hsl(214, 20%, 100%)) !important;
4616
+ color: var(--vb-neutral-100) !important;
4432
4617
  }
4433
4618
 
4434
4619
  .foreground-important {
@@ -4436,87 +4621,87 @@ input::-moz-placeholder {
4436
4621
  }
4437
4622
 
4438
4623
  .foreground-important-0 {
4439
- color: var(--vb-important-0, hsl(0, 80%, 0%)) !important;
4624
+ color: var(--vb-important-0) !important;
4440
4625
  }
4441
4626
 
4442
4627
  .foreground-important-5 {
4443
- color: var(--vb-important-5, hsl(0, 80%, 5%)) !important;
4628
+ color: var(--vb-important-5) !important;
4444
4629
  }
4445
4630
 
4446
4631
  .foreground-important-10 {
4447
- color: var(--vb-important-10, hsl(0, 80%, 10%)) !important;
4632
+ color: var(--vb-important-10) !important;
4448
4633
  }
4449
4634
 
4450
4635
  .foreground-important-12 {
4451
- color: var(--vb-important-12, hsl(0, 80%, 12%)) !important;
4636
+ color: var(--vb-important-12) !important;
4452
4637
  }
4453
4638
 
4454
4639
  .foreground-important-15 {
4455
- color: var(--vb-important-15, hsl(0, 80%, 15%)) !important;
4640
+ color: var(--vb-important-15) !important;
4456
4641
  }
4457
4642
 
4458
4643
  .foreground-important-20 {
4459
- color: var(--vb-important-20, hsl(0, 80%, 20%)) !important;
4644
+ color: var(--vb-important-20) !important;
4460
4645
  }
4461
4646
 
4462
4647
  .foreground-important-30 {
4463
- color: var(--vb-important-30, hsl(0, 80%, 30%)) !important;
4648
+ color: var(--vb-important-30) !important;
4464
4649
  }
4465
4650
 
4466
4651
  .foreground-important-40 {
4467
- color: var(--vb-important-40, hsl(0, 80%, 40%)) !important;
4652
+ color: var(--vb-important-40) !important;
4468
4653
  }
4469
4654
 
4470
4655
  .foreground-important-50 {
4471
- color: var(--vb-important-50, hsl(0, 80%, 50%)) !important;
4656
+ color: var(--vb-important-50) !important;
4472
4657
  }
4473
4658
 
4474
4659
  .foreground-important-60 {
4475
- color: var(--vb-important-60, hsl(0, 80%, 60%)) !important;
4660
+ color: var(--vb-important-60) !important;
4476
4661
  }
4477
4662
 
4478
4663
  .foreground-important-70 {
4479
- color: var(--vb-important-70, hsl(0, 80%, 70%)) !important;
4664
+ color: var(--vb-important-70) !important;
4480
4665
  }
4481
4666
 
4482
4667
  .foreground-important-80 {
4483
- color: var(--vb-important-80, hsl(0, 80%, 80%)) !important;
4668
+ color: var(--vb-important-80) !important;
4484
4669
  }
4485
4670
 
4486
4671
  .foreground-important-90 {
4487
- color: var(--vb-important-90, hsl(0, 80%, 90%)) !important;
4672
+ color: var(--vb-important-90) !important;
4488
4673
  }
4489
4674
 
4490
4675
  .foreground-important-95 {
4491
- color: var(--vb-important-95, hsl(0, 80%, 95%)) !important;
4676
+ color: var(--vb-important-95) !important;
4492
4677
  }
4493
4678
 
4494
4679
  .foreground-important-98 {
4495
- color: var(--vb-important-98, hsl(0, 80%, 98%)) !important;
4680
+ color: var(--vb-important-98) !important;
4496
4681
  }
4497
4682
 
4498
4683
  .foreground-important-100 {
4499
- color: var(--vb-important-100, hsl(0, 80%, 100%)) !important;
4684
+ color: var(--vb-important-100) !important;
4500
4685
  }
4501
4686
 
4502
4687
  .border {
4503
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1)) !important;
4688
+ border: 1px solid var(--vb-border-color) !important;
4504
4689
  }
4505
4690
 
4506
4691
  .border-top {
4507
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1)) !important;
4692
+ border-top: 1px solid var(--vb-border-color) !important;
4508
4693
  }
4509
4694
 
4510
4695
  .border-bottom {
4511
- border-bottom: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1)) !important;
4696
+ border-bottom: 1px solid var(--vb-border-color) !important;
4512
4697
  }
4513
4698
 
4514
4699
  .border-left {
4515
- border-left: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1)) !important;
4700
+ border-left: 1px solid var(--vb-border-color) !important;
4516
4701
  }
4517
4702
 
4518
4703
  .border-right {
4519
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1)) !important;
4704
+ border-right: 1px solid var(--vb-border-color) !important;
4520
4705
  }
4521
4706
 
4522
4707
  .border-none {
@@ -4540,11 +4725,11 @@ input::-moz-placeholder {
4540
4725
  }
4541
4726
 
4542
4727
  .border-color-dark {
4543
- border-color: var(--vb-border-color-dark, rgba(0, 0, 0, 0.2)) !important;
4728
+ border-color: var(--vb-border-color-dark) !important;
4544
4729
  }
4545
4730
 
4546
4731
  .border-color-darker {
4547
- border-color: var(--vb-border-color-darker, rgba(0, 0, 0, 0.3)) !important;
4732
+ border-color: var(--vb-border-color-darker) !important;
4548
4733
  }
4549
4734
 
4550
4735
  .border-color-transparent {
@@ -4664,7 +4849,7 @@ input::-moz-placeholder {
4664
4849
  }
4665
4850
 
4666
4851
  .shadow {
4667
- box-shadow: 0 2px 6px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%)) !important;
4852
+ box-shadow: 0 2px 6px var(--vb-shadow-color) !important;
4668
4853
  }
4669
4854
 
4670
4855
  .shadow-flat {
@@ -4672,23 +4857,23 @@ input::-moz-placeholder {
4672
4857
  }
4673
4858
 
4674
4859
  .shadow-1 {
4675
- box-shadow: 0 1px 3px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%)) !important;
4860
+ box-shadow: 0 1px 3px var(--vb-shadow-color) !important;
4676
4861
  }
4677
4862
 
4678
4863
  .shadow-2 {
4679
- box-shadow: 0 2px 6px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%)) !important;
4864
+ box-shadow: 0 2px 6px var(--vb-shadow-color) !important;
4680
4865
  }
4681
4866
 
4682
4867
  .shadow-3 {
4683
- box-shadow: 0 4px 12px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%)) !important;
4868
+ box-shadow: 0 4px 12px var(--vb-shadow-color) !important;
4684
4869
  }
4685
4870
 
4686
4871
  .shadow-4 {
4687
- box-shadow: 0 8px 18px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%)) !important;
4872
+ box-shadow: 0 8px 18px var(--vb-shadow-color) !important;
4688
4873
  }
4689
4874
 
4690
4875
  .shadow-5 {
4691
- box-shadow: 0 12px 24px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%)) !important;
4876
+ box-shadow: 0 12px 24px var(--vb-shadow-color) !important;
4692
4877
  }
4693
4878
 
4694
4879
  .display-inline {
@@ -4903,6 +5088,10 @@ input::-moz-placeholder {
4903
5088
  flex: 0 0 auto !important;
4904
5089
  }
4905
5090
 
5091
+ .flex-items-fill > * {
5092
+ flex: 1 0 auto !important;
5093
+ }
5094
+
4906
5095
  .flex-order-1 {
4907
5096
  order: 1 !important;
4908
5097
  }
@@ -5878,150 +6067,158 @@ input::-moz-placeholder {
5878
6067
  }
5879
6068
 
5880
6069
  :root {
5881
- --vb-primary-hs: 152deg, 60%;
6070
+ --vb-primary-hs: 152deg 60%;
5882
6071
  --vb-primary: var(--vb-primary-50);
5883
- --vb-primary-0: hsl(var(--vb-primary-hs), 0%);
5884
- --vb-primary-5: hsl(var(--vb-primary-hs), 5%);
5885
- --vb-primary-10: hsl(var(--vb-primary-hs), 10%);
5886
- --vb-primary-12: hsl(var(--vb-primary-hs), 12%);
5887
- --vb-primary-15: hsl(var(--vb-primary-hs), 15%);
5888
- --vb-primary-20: hsl(var(--vb-primary-hs), 20%);
5889
- --vb-primary-30: hsl(var(--vb-primary-hs), 30%);
5890
- --vb-primary-40: hsl(var(--vb-primary-hs), 40%);
5891
- --vb-primary-50: hsl(var(--vb-primary-hs), 50%);
5892
- --vb-primary-60: hsl(var(--vb-primary-hs), 60%);
5893
- --vb-primary-70: hsl(var(--vb-primary-hs), 70%);
5894
- --vb-primary-80: hsl(var(--vb-primary-hs), 80%);
5895
- --vb-primary-90: hsl(var(--vb-primary-hs), 90%);
5896
- --vb-primary-95: hsl(var(--vb-primary-hs), 95%);
5897
- --vb-primary-98: hsl(var(--vb-primary-hs), 98%);
5898
- --vb-primary-100: hsl(var(--vb-primary-hs), 100%);
5899
- --vb-secondary-hs: 214deg, 50%;
6072
+ --vb-primary-0: hsl(var(--vb-primary-hs) 0%);
6073
+ --vb-primary-5: hsl(var(--vb-primary-hs) 5%);
6074
+ --vb-primary-10: hsl(var(--vb-primary-hs) 10%);
6075
+ --vb-primary-12: hsl(var(--vb-primary-hs) 12%);
6076
+ --vb-primary-15: hsl(var(--vb-primary-hs) 15%);
6077
+ --vb-primary-20: hsl(var(--vb-primary-hs) 20%);
6078
+ --vb-primary-30: hsl(var(--vb-primary-hs) 30%);
6079
+ --vb-primary-40: hsl(var(--vb-primary-hs) 40%);
6080
+ --vb-primary-50: hsl(var(--vb-primary-hs) 50%);
6081
+ --vb-primary-60: hsl(var(--vb-primary-hs) 60%);
6082
+ --vb-primary-70: hsl(var(--vb-primary-hs) 70%);
6083
+ --vb-primary-80: hsl(var(--vb-primary-hs) 80%);
6084
+ --vb-primary-90: hsl(var(--vb-primary-hs) 90%);
6085
+ --vb-primary-95: hsl(var(--vb-primary-hs) 95%);
6086
+ --vb-primary-98: hsl(var(--vb-primary-hs) 98%);
6087
+ --vb-primary-100: hsl(var(--vb-primary-hs) 100%);
6088
+ --vb-secondary-hs: 214deg 50%;
5900
6089
  --vb-secondary: var(--vb-secondary-50);
5901
- --vb-secondary-0: hsl(var(--vb-secondary-hs), 0%);
5902
- --vb-secondary-5: hsl(var(--vb-secondary-hs), 5%);
5903
- --vb-secondary-10: hsl(var(--vb-secondary-hs), 10%);
5904
- --vb-secondary-12: hsl(var(--vb-secondary-hs), 12%);
5905
- --vb-secondary-15: hsl(var(--vb-secondary-hs), 15%);
5906
- --vb-secondary-20: hsl(var(--vb-secondary-hs), 20%);
5907
- --vb-secondary-30: hsl(var(--vb-secondary-hs), 30%);
5908
- --vb-secondary-40: hsl(var(--vb-secondary-hs), 40%);
5909
- --vb-secondary-50: hsl(var(--vb-secondary-hs), 50%);
5910
- --vb-secondary-60: hsl(var(--vb-secondary-hs), 60%);
5911
- --vb-secondary-70: hsl(var(--vb-secondary-hs), 70%);
5912
- --vb-secondary-80: hsl(var(--vb-secondary-hs), 80%);
5913
- --vb-secondary-90: hsl(var(--vb-secondary-hs), 90%);
5914
- --vb-secondary-95: hsl(var(--vb-secondary-hs), 95%);
5915
- --vb-secondary-98: hsl(var(--vb-secondary-hs), 98%);
5916
- --vb-secondary-100: hsl(var(--vb-secondary-hs), 100%);
5917
- --vb-neutral-hs: 214deg, 20%;
6090
+ --vb-secondary-0: hsl(var(--vb-secondary-hs) 0%);
6091
+ --vb-secondary-5: hsl(var(--vb-secondary-hs) 5%);
6092
+ --vb-secondary-10: hsl(var(--vb-secondary-hs) 10%);
6093
+ --vb-secondary-12: hsl(var(--vb-secondary-hs) 12%);
6094
+ --vb-secondary-15: hsl(var(--vb-secondary-hs) 15%);
6095
+ --vb-secondary-20: hsl(var(--vb-secondary-hs) 20%);
6096
+ --vb-secondary-30: hsl(var(--vb-secondary-hs) 30%);
6097
+ --vb-secondary-40: hsl(var(--vb-secondary-hs) 40%);
6098
+ --vb-secondary-50: hsl(var(--vb-secondary-hs) 50%);
6099
+ --vb-secondary-60: hsl(var(--vb-secondary-hs) 60%);
6100
+ --vb-secondary-70: hsl(var(--vb-secondary-hs) 70%);
6101
+ --vb-secondary-80: hsl(var(--vb-secondary-hs) 80%);
6102
+ --vb-secondary-90: hsl(var(--vb-secondary-hs) 90%);
6103
+ --vb-secondary-95: hsl(var(--vb-secondary-hs) 95%);
6104
+ --vb-secondary-98: hsl(var(--vb-secondary-hs) 98%);
6105
+ --vb-secondary-100: hsl(var(--vb-secondary-hs) 100%);
6106
+ --vb-neutral-hs: 214deg 20%;
5918
6107
  --vb-neutral: var(--vb-neutral-50);
5919
- --vb-neutral-0: hsl(var(--vb-neutral-hs), 0%);
5920
- --vb-neutral-5: hsl(var(--vb-neutral-hs), 5%);
5921
- --vb-neutral-10: hsl(var(--vb-neutral-hs), 10%);
5922
- --vb-neutral-12: hsl(var(--vb-neutral-hs), 12%);
5923
- --vb-neutral-15: hsl(var(--vb-neutral-hs), 15%);
5924
- --vb-neutral-20: hsl(var(--vb-neutral-hs), 20%);
5925
- --vb-neutral-30: hsl(var(--vb-neutral-hs), 30%);
5926
- --vb-neutral-40: hsl(var(--vb-neutral-hs), 40%);
5927
- --vb-neutral-50: hsl(var(--vb-neutral-hs), 50%);
5928
- --vb-neutral-60: hsl(var(--vb-neutral-hs), 60%);
5929
- --vb-neutral-70: hsl(var(--vb-neutral-hs), 70%);
5930
- --vb-neutral-80: hsl(var(--vb-neutral-hs), 80%);
5931
- --vb-neutral-90: hsl(var(--vb-neutral-hs), 90%);
5932
- --vb-neutral-95: hsl(var(--vb-neutral-hs), 95%);
5933
- --vb-neutral-98: hsl(var(--vb-neutral-hs), 98%);
5934
- --vb-neutral-100: hsl(var(--vb-neutral-hs), 100%);
5935
- --vb-important-hs: 0deg, 80%;
6108
+ --vb-neutral-0: hsl(var(--vb-neutral-hs) 0%);
6109
+ --vb-neutral-5: hsl(var(--vb-neutral-hs) 5%);
6110
+ --vb-neutral-10: hsl(var(--vb-neutral-hs) 10%);
6111
+ --vb-neutral-12: hsl(var(--vb-neutral-hs) 12%);
6112
+ --vb-neutral-15: hsl(var(--vb-neutral-hs) 15%);
6113
+ --vb-neutral-20: hsl(var(--vb-neutral-hs) 20%);
6114
+ --vb-neutral-30: hsl(var(--vb-neutral-hs) 30%);
6115
+ --vb-neutral-40: hsl(var(--vb-neutral-hs) 40%);
6116
+ --vb-neutral-50: hsl(var(--vb-neutral-hs) 50%);
6117
+ --vb-neutral-60: hsl(var(--vb-neutral-hs) 60%);
6118
+ --vb-neutral-70: hsl(var(--vb-neutral-hs) 70%);
6119
+ --vb-neutral-80: hsl(var(--vb-neutral-hs) 80%);
6120
+ --vb-neutral-90: hsl(var(--vb-neutral-hs) 90%);
6121
+ --vb-neutral-95: hsl(var(--vb-neutral-hs) 95%);
6122
+ --vb-neutral-98: hsl(var(--vb-neutral-hs) 98%);
6123
+ --vb-neutral-100: hsl(var(--vb-neutral-hs) 100%);
6124
+ --vb-important-hs: 0deg 80%;
5936
6125
  --vb-important: var(--vb-important-50);
5937
- --vb-important-0: hsl(var(--vb-important-hs), 0%);
5938
- --vb-important-5: hsl(var(--vb-important-hs), 5%);
5939
- --vb-important-10: hsl(var(--vb-important-hs), 10%);
5940
- --vb-important-12: hsl(var(--vb-important-hs), 12%);
5941
- --vb-important-15: hsl(var(--vb-important-hs), 15%);
5942
- --vb-important-20: hsl(var(--vb-important-hs), 20%);
5943
- --vb-important-30: hsl(var(--vb-important-hs), 30%);
5944
- --vb-important-40: hsl(var(--vb-important-hs), 40%);
5945
- --vb-important-50: hsl(var(--vb-important-hs), 50%);
5946
- --vb-important-60: hsl(var(--vb-important-hs), 60%);
5947
- --vb-important-70: hsl(var(--vb-important-hs), 70%);
5948
- --vb-important-80: hsl(var(--vb-important-hs), 80%);
5949
- --vb-important-90: hsl(var(--vb-important-hs), 90%);
5950
- --vb-important-95: hsl(var(--vb-important-hs), 95%);
5951
- --vb-important-98: hsl(var(--vb-important-hs), 98%);
5952
- --vb-important-100: hsl(var(--vb-important-hs), 100%);
6126
+ --vb-important-0: hsl(var(--vb-important-hs) 0%);
6127
+ --vb-important-5: hsl(var(--vb-important-hs) 5%);
6128
+ --vb-important-10: hsl(var(--vb-important-hs) 10%);
6129
+ --vb-important-12: hsl(var(--vb-important-hs) 12%);
6130
+ --vb-important-15: hsl(var(--vb-important-hs) 15%);
6131
+ --vb-important-20: hsl(var(--vb-important-hs) 20%);
6132
+ --vb-important-30: hsl(var(--vb-important-hs) 30%);
6133
+ --vb-important-40: hsl(var(--vb-important-hs) 40%);
6134
+ --vb-important-50: hsl(var(--vb-important-hs) 50%);
6135
+ --vb-important-60: hsl(var(--vb-important-hs) 60%);
6136
+ --vb-important-70: hsl(var(--vb-important-hs) 70%);
6137
+ --vb-important-80: hsl(var(--vb-important-hs) 80%);
6138
+ --vb-important-90: hsl(var(--vb-important-hs) 90%);
6139
+ --vb-important-95: hsl(var(--vb-important-hs) 95%);
6140
+ --vb-important-98: hsl(var(--vb-important-hs) 98%);
6141
+ --vb-important-100: hsl(var(--vb-important-hs) 100%);
5953
6142
  }
5954
6143
 
5955
6144
  :root, .vb-theme-root {
5956
- --vb-background: var(--vb-neutral-100, hsl(214, 20%, 100%));
5957
- --vb-background-dark: var(--vb-neutral-98, hsl(214, 20%, 98%));
5958
- --vb-background-darker: var(--vb-neutral-95, hsl(214, 20%, 95%));
6145
+ --vb-background: var(--vb-neutral-100);
6146
+ --vb-background-dark: var(--vb-neutral-98);
6147
+ --vb-background-darker: var(--vb-neutral-95);
6148
+ --vb-background-alt: hsl(var(--vb-secondary-hs) 60% / 10%);
5959
6149
  --vb-background-hover: rgba(0, 0, 0, 0.05);
5960
6150
  --vb-background-focus: rgba(0, 0, 0, 0.05);
5961
6151
  --vb-background-active: rgba(0, 0, 0, 0.1);
5962
- --vb-foreground: var(--vb-neutral-20, hsl(214, 20%, 20%));
5963
- --vb-foreground-light: var(--vb-neutral-40, hsl(214, 20%, 40%));
5964
- --vb-foreground-lighter: var(--vb-neutral-60, hsl(214, 20%, 60%));
6152
+ --vb-foreground: var(--vb-neutral-20);
6153
+ --vb-foreground-light: var(--vb-neutral-40);
6154
+ --vb-foreground-lighter: var(--vb-neutral-60);
6155
+ --vb-foreground-alt: var(--vb-secondary-50);
5965
6156
  --vb-border-color: rgba(0, 0, 0, 0.1);
5966
6157
  --vb-border-color-dark: rgba(0, 0, 0, 0.2);
5967
6158
  --vb-border-color-darker: rgba(0, 0, 0, 0.3);
5968
- --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%);
5969
- --vb-focus-visible: var(--vb-primary-50, hsl(152, 60%, 50%));
6159
+ --vb-shadow-color: hsl(var(--vb-neutral-hs) 20% / 20%);
6160
+ --vb-focus-visible: var(--vb-primary-50);
5970
6161
  color-scheme: light;
5971
6162
  }
5972
6163
  @media (prefers-color-scheme: dark) {
5973
6164
  :root, .vb-theme-root {
5974
- --vb-background: var(--vb-neutral-10, hsl(214, 20%, 10%));
5975
- --vb-background-dark: var(--vb-neutral-12, hsl(214, 20%, 12%));
5976
- --vb-background-darker: var(--vb-neutral-15, hsl(214, 20%, 15%));
6165
+ --vb-background: var(--vb-neutral-10);
6166
+ --vb-background-dark: var(--vb-neutral-12);
6167
+ --vb-background-darker: var(--vb-neutral-15);
6168
+ --vb-background-alt: hsl(var(--vb-secondary-hs) 70% / 10%);
5977
6169
  --vb-background-hover: rgba(255, 255, 255, 0.05);
5978
6170
  --vb-background-focus: rgba(255, 255, 255, 0.05);
5979
- --vb-background-active: rgba(255, 255, 255, 0.1);
5980
- --vb-foreground: var(--vb-neutral-90, hsl(214, 20%, 90%));
5981
- --vb-foreground-light: var(--vb-neutral-70, hsl(214, 20%, 70%));
5982
- --vb-foreground-lighter: var(--vb-neutral-50, hsl(214, 20%, 50%));
6171
+ --vb-background-active: rgba(255, 255, 255, 0.01);
6172
+ --vb-foreground: var(--vb-neutral-90);
6173
+ --vb-foreground-light: var(--vb-neutral-70);
6174
+ --vb-foreground-lighter: var(--vb-neutral-50);
6175
+ --vb-foreground-alt: var(--vb-secondary-60);
5983
6176
  --vb-border-color: rgba(255, 255, 255, 0.1);
5984
6177
  --vb-border-color-dark: rgba(255, 255, 255, 0.2);
5985
6178
  --vb-border-color-darker: rgba(255, 255, 255, 0.3);
5986
- --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 0%, 20%);
5987
- --vb-focus-visible: var(--vb-primary-50, hsl(152, 60%, 50%));
6179
+ --vb-shadow-color: hsl(var(--vb-neutral-hs) 0% / 20%);
6180
+ --vb-focus-visible: var(--vb-primary-50);
5988
6181
  color-scheme: dark;
5989
6182
  }
5990
6183
  }
5991
6184
 
5992
6185
  .vb-theme-light {
5993
- --vb-background: var(--vb-neutral-100, hsl(214, 20%, 100%));
5994
- --vb-background-dark: var(--vb-neutral-98, hsl(214, 20%, 98%));
5995
- --vb-background-darker: var(--vb-neutral-95, hsl(214, 20%, 95%));
6186
+ --vb-background: var(--vb-neutral-100);
6187
+ --vb-background-dark: var(--vb-neutral-98);
6188
+ --vb-background-darker: var(--vb-neutral-95);
6189
+ --vb-background-alt: hsl(var(--vb-secondary-hs) 60% / 10%);
5996
6190
  --vb-background-hover: rgba(0, 0, 0, 0.05);
5997
6191
  --vb-background-focus: rgba(0, 0, 0, 0.05);
5998
6192
  --vb-background-active: rgba(0, 0, 0, 0.1);
5999
- --vb-foreground: var(--vb-neutral-20, hsl(214, 20%, 20%));
6000
- --vb-foreground-light: var(--vb-neutral-40, hsl(214, 20%, 40%));
6001
- --vb-foreground-lighter: var(--vb-neutral-60, hsl(214, 20%, 60%));
6193
+ --vb-foreground: var(--vb-neutral-20);
6194
+ --vb-foreground-light: var(--vb-neutral-40);
6195
+ --vb-foreground-lighter: var(--vb-neutral-60);
6196
+ --vb-foreground-alt: var(--vb-secondary-50);
6002
6197
  --vb-border-color: rgba(0, 0, 0, 0.1);
6003
6198
  --vb-border-color-dark: rgba(0, 0, 0, 0.2);
6004
6199
  --vb-border-color-darker: rgba(0, 0, 0, 0.3);
6005
- --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%);
6006
- --vb-focus-visible: var(--vb-primary-50, hsl(152, 60%, 50%));
6200
+ --vb-shadow-color: hsl(var(--vb-neutral-hs) 20% / 20%);
6201
+ --vb-focus-visible: var(--vb-primary-50);
6007
6202
  color-scheme: light;
6008
6203
  }
6009
6204
 
6010
6205
  .vb-theme-dark {
6011
- --vb-background: var(--vb-neutral-10, hsl(214, 20%, 10%));
6012
- --vb-background-dark: var(--vb-neutral-12, hsl(214, 20%, 12%));
6013
- --vb-background-darker: var(--vb-neutral-15, hsl(214, 20%, 15%));
6206
+ --vb-background: var(--vb-neutral-10);
6207
+ --vb-background-dark: var(--vb-neutral-12);
6208
+ --vb-background-darker: var(--vb-neutral-15);
6209
+ --vb-background-alt: hsl(var(--vb-secondary-hs) 70% / 10%);
6014
6210
  --vb-background-hover: rgba(255, 255, 255, 0.05);
6015
6211
  --vb-background-focus: rgba(255, 255, 255, 0.05);
6016
- --vb-background-active: rgba(255, 255, 255, 0.1);
6017
- --vb-foreground: var(--vb-neutral-90, hsl(214, 20%, 90%));
6018
- --vb-foreground-light: var(--vb-neutral-70, hsl(214, 20%, 70%));
6019
- --vb-foreground-lighter: var(--vb-neutral-50, hsl(214, 20%, 50%));
6212
+ --vb-background-active: rgba(255, 255, 255, 0.01);
6213
+ --vb-foreground: var(--vb-neutral-90);
6214
+ --vb-foreground-light: var(--vb-neutral-70);
6215
+ --vb-foreground-lighter: var(--vb-neutral-50);
6216
+ --vb-foreground-alt: var(--vb-secondary-60);
6020
6217
  --vb-border-color: rgba(255, 255, 255, 0.1);
6021
6218
  --vb-border-color-dark: rgba(255, 255, 255, 0.2);
6022
6219
  --vb-border-color-darker: rgba(255, 255, 255, 0.3);
6023
- --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 0%, 20%);
6024
- --vb-focus-visible: var(--vb-primary-50, hsl(152, 60%, 50%));
6220
+ --vb-shadow-color: hsl(var(--vb-neutral-hs) 0% / 20%);
6221
+ --vb-focus-visible: var(--vb-primary-50);
6025
6222
  color-scheme: dark;
6026
6223
  }
6027
6224