vrembem 4.0.0-next.7 → 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 +1031 -862
  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,7 +444,7 @@ 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);
@@ -443,30 +458,60 @@ input::-moz-placeholder {
443
458
  :root, .vb-theme-root {
444
459
  --vb-button-background: transparent;
445
460
  --vb-button-background-hover: transparent;
446
- --vb-button-background-active: transparent;
447
- --vb-button-foreground: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
448
- --vb-button-foreground-hover: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
449
- --vb-button-foreground-active: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
450
- --vb-button-border-color: var(--vb-border-color-dark, rgba(0, 0, 0, 0.2));
451
- --vb-button-border-color-hover: var(--vb-border-color-darker, rgba(0, 0, 0, 0.3));
452
- --vb-button-border-color-active: var(--vb-border-color-darker, rgba(0, 0, 0, 0.3));
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);
453
468
  --vb-button-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
454
469
  --vb-button-box-shadow-focus: 0 0 0 0.2rem rgba(0, 0, 0, 0.15);
455
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
+
456
487
  .vb-theme-light {
457
488
  --vb-button-background: transparent;
458
489
  --vb-button-background-hover: transparent;
459
- --vb-button-background-active: transparent;
460
- --vb-button-foreground: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
461
- --vb-button-foreground-hover: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
462
- --vb-button-foreground-active: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
463
- --vb-button-border-color: var(--vb-border-color-dark, rgba(0, 0, 0, 0.2));
464
- --vb-button-border-color-hover: var(--vb-border-color-darker, rgba(0, 0, 0, 0.3));
465
- --vb-button-border-color-active: var(--vb-border-color-darker, rgba(0, 0, 0, 0.3));
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);
466
497
  --vb-button-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
467
498
  --vb-button-box-shadow-focus: 0 0 0 0.2rem rgba(0, 0, 0, 0.15);
468
499
  }
469
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);
513
+ }
514
+
470
515
  .button {
471
516
  position: relative;
472
517
  display: inline-flex;
@@ -489,7 +534,7 @@ input::-moz-placeholder {
489
534
  font-family: inherit;
490
535
  font-size: var(--vb-button-font-size);
491
536
  font-weight: var(--vb-button-font-weight);
492
- line-height: var(--vb-button-font-height);
537
+ line-height: var(--vb-button-line-height);
493
538
  text-decoration: none;
494
539
  white-space: nowrap;
495
540
  cursor: pointer;
@@ -498,17 +543,14 @@ input::-moz-placeholder {
498
543
  opacity: var(--vb-button-disabled-opacity);
499
544
  pointer-events: none;
500
545
  }
501
- .button:hover {
546
+ .button:hover, .button:focus-visible {
502
547
  border-color: var(--vb-button-border-color-hover);
503
548
  background-color: var(--vb-button-background-hover);
504
- box-shadow: var(--vb-button-box-shadow-hover);
549
+ box-shadow: var(--vb-button-box-shadow);
505
550
  color: var(--vb-button-foreground-hover);
506
551
  }
507
552
  .button:focus-visible {
508
- border-color: var(--vb-button-border-color-hover);
509
- background-color: var(--vb-button-background-hover);
510
553
  box-shadow: var(--vb-button-box-shadow-focus);
511
- color: var(--vb-button-foreground-hover);
512
554
  }
513
555
  .button:active {
514
556
  border-color: var(--vb-button-border-color-active);
@@ -602,59 +644,59 @@ input::-moz-placeholder {
602
644
  }
603
645
  }
604
646
  .button_color_primary {
605
- --vb-button-background: var(--vb-primary-50, hsl(152, 60%, 50%));
606
- --vb-button-background-hover: var(--vb-primary-40, hsl(152, 60%, 40%));
607
- --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);
608
650
  --vb-button-foreground: white;
609
651
  --vb-button-foreground-hover: white;
610
652
  --vb-button-foreground-active: white;
611
653
  --vb-button-border-color: transparent;
612
654
  --vb-button-border-color-hover: transparent;
613
655
  --vb-button-border-color-active: transparent;
614
- --vb-button-box-shadow: 0 0 0 0 hsl(152deg, 60%, 50%, 0%);
615
- --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%);
616
658
  }
617
659
 
618
660
  .button_color_secondary {
619
- --vb-button-background: var(--vb-secondary-50, hsl(214, 50%, 50%));
620
- --vb-button-background-hover: var(--vb-secondary-40, hsl(214, 50%, 40%));
621
- --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);
622
664
  --vb-button-foreground: white;
623
665
  --vb-button-foreground-hover: white;
624
666
  --vb-button-foreground-active: white;
625
667
  --vb-button-border-color: transparent;
626
668
  --vb-button-border-color-hover: transparent;
627
669
  --vb-button-border-color-active: transparent;
628
- --vb-button-box-shadow: 0 0 0 0 hsl(214deg, 50%, 50%, 0%);
629
- --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%);
630
672
  }
631
673
 
632
674
  .button_color_neutral {
633
- --vb-button-background: var(--vb-neutral-50, hsl(214, 20%, 50%));
634
- --vb-button-background-hover: var(--vb-neutral-40, hsl(214, 20%, 40%));
635
- --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);
636
678
  --vb-button-foreground: white;
637
679
  --vb-button-foreground-hover: white;
638
680
  --vb-button-foreground-active: white;
639
681
  --vb-button-border-color: transparent;
640
682
  --vb-button-border-color-hover: transparent;
641
683
  --vb-button-border-color-active: transparent;
642
- --vb-button-box-shadow: 0 0 0 0 hsl(214deg, 20%, 50%, 0%);
643
- --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%);
644
686
  }
645
687
 
646
688
  .button_color_important {
647
- --vb-button-background: var(--vb-important-50, hsl(0, 80%, 50%));
648
- --vb-button-background-hover: var(--vb-important-40, hsl(0, 80%, 40%));
649
- --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);
650
692
  --vb-button-foreground: white;
651
693
  --vb-button-foreground-hover: white;
652
694
  --vb-button-foreground-active: white;
653
695
  --vb-button-border-color: transparent;
654
696
  --vb-button-border-color-hover: transparent;
655
697
  --vb-button-border-color-active: transparent;
656
- --vb-button-box-shadow: 0 0 0 0 hsl(0deg, 80%, 50%, 0%);
657
- --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%);
658
700
  }
659
701
 
660
702
  .button_icon {
@@ -681,17 +723,85 @@ input::-moz-placeholder {
681
723
  --vb-button-line-height: 1.875;
682
724
  }
683
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
+
684
782
  .card {
685
783
  position: relative;
686
784
  display: flex;
687
785
  flex-direction: column;
688
786
  overflow: hidden;
689
- transition-property: background-color, border-color, box-shadow, transform;
690
- transition-duration: 0.3s;
691
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
692
- border-radius: 0.25rem;
693
- background: white;
694
- 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);
695
805
  }
696
806
 
697
807
  .card__header,
@@ -701,55 +811,54 @@ input::-moz-placeholder {
701
811
  position: relative;
702
812
  z-index: 3;
703
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
+ }
704
828
 
705
- .card__body,
706
829
  .card__header,
830
+ .card__body,
707
831
  .card__footer {
708
- padding: 1.25em;
832
+ padding: var(--vb-card-padding);
709
833
  }
710
834
 
711
835
  .card__body {
712
836
  flex: 1 1 auto;
713
837
  }
714
838
  .card__body + .card__body {
715
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
716
- }
717
-
718
- .card__image {
719
- flex: 0 1 auto;
720
- width: 100%;
721
- height: auto;
722
- }
723
- .card__image:first-child {
724
- border-top-left-radius: 0.25rem;
725
- border-top-right-radius: 0.25rem;
726
- }
727
- .card__image:last-child {
728
- border-bottom-left-radius: 0.25rem;
729
- border-bottom-right-radius: 0.25rem;
839
+ border-top: var(--vb-card-sep-border);
730
840
  }
731
841
 
732
842
  .card__header {
733
- border-bottom: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
734
- }
735
- .card__header:first-child {
736
- border-top-left-radius: 0.25rem;
737
- border-top-right-radius: 0.25rem;
843
+ border-bottom: var(--vb-card-sep-border);
738
844
  }
739
845
 
740
846
  .card__footer {
741
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
847
+ border-top: var(--vb-card-sep-border);
742
848
  }
743
- .card__footer:last-child {
744
- border-bottom-left-radius: 0.25rem;
745
- border-bottom-right-radius: 0.25rem;
849
+
850
+ .card__image {
851
+ flex: 0 1 auto;
852
+ width: 100%;
853
+ height: auto;
746
854
  }
747
855
 
748
856
  .card__title {
749
857
  flex-grow: 1;
750
- font-size: 1.125rem;
751
- font-weight: 600;
752
- 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);
753
862
  }
754
863
 
755
864
  .card__background,
@@ -758,10 +867,10 @@ input::-moz-placeholder {
758
867
  height: 100%;
759
868
  position: absolute;
760
869
  inset: 0;
761
- transition-property: background-color, border-color, box-shadow, transform;
762
- transition-duration: 0.3s;
763
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
764
- 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);
765
874
  }
766
875
 
767
876
  .card__background {
@@ -771,45 +880,50 @@ input::-moz-placeholder {
771
880
 
772
881
  .card__screen {
773
882
  z-index: 2;
774
- background: var(--vb-neutral-10, hsl(214, 20%, 10%));
775
- opacity: 0.7;
883
+ background: var(--vb-card-screen-background);
884
+ opacity: var(--vb-card-screen-opacity);
776
885
  }
777
886
 
778
- @media (min-width: 760px) {
779
- .card_fade .card__header,
780
- .card_fade .card__body,
781
- .card_fade .card__footer,
782
- .card_fade .card__screen {
783
- transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
784
- opacity: 0;
785
- }
786
- .card_fade:hover .card__header,
787
- .card_fade:hover .card__body,
788
- .card_fade:hover .card__footer, .card_fade:focus .card__header,
789
- .card_fade:focus .card__body,
790
- .card_fade:focus .card__footer, .card_fade:focus-within .card__header,
791
- .card_fade:focus-within .card__body,
792
- .card_fade:focus-within .card__footer {
793
- opacity: 1;
794
- }
795
- .card_fade:hover .card__screen, .card_fade:focus .card__screen, .card_fade:focus-within .card__screen {
796
- opacity: 0.7;
797
- }
798
- }
799
- .card_link {
800
- transform: translate(0, 0);
801
- 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);
802
902
  }
803
- .card_link:hover, .card_link:focus, .card_link:focus-within {
804
- transform: translate(0, -0.25em);
805
- box-shadow: 0 4px 12px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
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;
908
+ }
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
+ }
806
915
  }
807
916
 
808
- .card_zoom .card__background {
809
- 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;
810
921
  }
811
- .card_zoom:hover .card__background, .card_zoom:focus .card__background, .card_zoom:focus-within .card__background {
812
- 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);
813
927
  }
814
928
 
815
929
  .checkbox {
@@ -822,36 +936,37 @@ input::-moz-placeholder {
822
936
  }
823
937
 
824
938
  .checkbox__background {
825
- width: 2.5rem;
826
- height: 2.5rem;
939
+ width: var(--vb-checkbox-size);
940
+ height: var(--vb-checkbox-size);
827
941
  position: relative;
828
942
  z-index: 1;
829
943
  display: flex;
830
944
  align-items: center;
831
945
  justify-content: center;
832
- border-radius: 9999px;
833
- 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));
834
948
  }
835
949
 
836
950
  .checkbox__box {
837
- width: 18px;
838
- height: 18px;
951
+ width: var(--vb-checkbox-box-size);
952
+ height: var(--vb-checkbox-box-size);
839
953
  display: flex;
840
954
  align-items: center;
841
955
  justify-content: center;
842
- border: 2px solid var(--vb-neutral-50, hsl(214, 20%, 50%));
843
- border-radius: 0.25rem;
844
- 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);
845
959
  color: transparent;
846
960
  }
847
961
 
848
962
  .checkbox__icon {
849
- width: 12px;
850
- height: 12px;
851
- 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>');
852
- background-repeat: no-repeat;
853
- background-position: center -12px;
854
- 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%;
855
970
  opacity: 0;
856
971
  }
857
972
 
@@ -866,94 +981,129 @@ input::-moz-placeholder {
866
981
  cursor: pointer;
867
982
  }
868
983
  .checkbox__native:hover + .checkbox__background {
869
- 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));
870
985
  }
871
986
  .checkbox__native:hover + .checkbox__background .checkbox__box {
872
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
987
+ border-color: var(--vb-checkbox-color);
988
+ background-color: var(--vb-checkbox-fill);
873
989
  }
874
990
  .checkbox__native:focus + .checkbox__background {
875
- 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));
876
992
  }
877
993
  .checkbox__native:focus + .checkbox__background .checkbox__box {
878
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
994
+ border-color: var(--vb-checkbox-color);
995
+ background-color: var(--vb-checkbox-fill);
879
996
  }
880
997
  .checkbox__native:focus-visible + .checkbox__background, .checkbox__native:active + .checkbox__background {
881
- 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));
882
999
  }
883
1000
  .checkbox__native:focus-visible + .checkbox__background .checkbox__box, .checkbox__native:active + .checkbox__background .checkbox__box {
884
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
1001
+ border-color: var(--vb-checkbox-color);
1002
+ background-color: var(--vb-checkbox-fill);
885
1003
  }
886
1004
  .checkbox__native:checked + .checkbox__background .checkbox__box {
887
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
888
- background-color: var(--vb-primary-50, hsl(152, 60%, 50%));
1005
+ border-color: var(--vb-checkbox-color);
1006
+ background-color: var(--vb-checkbox-color);
889
1007
  }
890
1008
  .checkbox__native:checked + .checkbox__background .checkbox__icon {
891
- transition-property: opacity, background-position;
892
- transition-duration: 0.15s;
893
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
894
- 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;
895
1013
  opacity: 1;
896
1014
  }
897
1015
  .checkbox__native:indeterminate + .checkbox__background .checkbox__box {
898
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
899
- background-color: var(--vb-primary-50, hsl(152, 60%, 50%));
1016
+ border-color: var(--vb-checkbox-color);
1017
+ background-color: var(--vb-checkbox-color);
900
1018
  }
901
1019
  .checkbox__native:indeterminate + .checkbox__background .checkbox__icon {
902
- transition-property: opacity, background-position;
903
- transition-duration: 0.15s;
904
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
905
- 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>');
906
- 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;
907
1026
  opacity: 1;
908
1027
  }
909
1028
 
910
- .checkbox_size_sm .checkbox__background {
911
- width: 1.875rem;
912
- height: 1.875rem;
913
- }
914
- .checkbox_size_sm .checkbox__box {
915
- width: 14px;
916
- height: 14px;
917
- 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;
918
1035
  }
919
1036
  .checkbox_size_sm .checkbox__icon {
920
- width: 10px;
921
- height: 10px;
922
- 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>');
923
1038
  }
924
1039
  .checkbox_size_sm .checkbox__native:indeterminate + .checkbox__background .checkbox__icon {
925
- 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>');
926
1041
  }
927
1042
 
928
- .checkbox_size_lg .checkbox__background {
929
- width: 3.125rem;
930
- height: 3.125rem;
931
- }
932
- .checkbox_size_lg .checkbox__box {
933
- width: 24px;
934
- height: 24px;
935
- 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;
936
1049
  }
937
1050
  .checkbox_size_lg .checkbox__icon {
938
- width: 18px;
939
- height: 18px;
940
- 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>');
941
1052
  }
942
1053
  .checkbox_size_lg .checkbox__native:indeterminate + .checkbox__background .checkbox__icon {
943
- 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);
944
1094
  }
945
1095
 
946
1096
  .dialog {
947
1097
  position: relative;
948
- z-index: 500;
949
1098
  display: flex;
950
1099
  flex-direction: column;
951
1100
  overflow: auto;
952
- border-radius: 0.25rem;
953
- 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);
954
1104
  background-clip: padding-box;
955
- box-shadow: 0 8px 18px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
956
- 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);
957
1107
  -webkit-overflow-scrolling: touch;
958
1108
  }
959
1109
 
@@ -961,7 +1111,7 @@ input::-moz-placeholder {
961
1111
  .dialog__body,
962
1112
  .dialog__footer {
963
1113
  flex: 0 0 auto;
964
- padding: 1em;
1114
+ padding: var(--vb-dialog-padding);
965
1115
  }
966
1116
 
967
1117
  .dialog__header,
@@ -970,49 +1120,37 @@ input::-moz-placeholder {
970
1120
  z-index: 1;
971
1121
  display: flex;
972
1122
  align-items: center;
973
- background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
1123
+ background: var(--vb-dialog-background);
974
1124
  vertical-align: middle;
975
- }
976
- .dialog__header > * + *,
977
- .dialog__footer > * + * {
978
- margin-left: 0.5em;
1125
+ gap: var(--vb-dialog-gap);
979
1126
  }
980
1127
 
981
1128
  .dialog__header {
982
1129
  top: 0;
983
- border-bottom: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
1130
+ border-bottom: var(--vb-dialog-sep-border);
984
1131
  }
985
1132
 
986
1133
  .dialog__body {
987
1134
  flex-grow: 1;
988
1135
  }
989
1136
  .dialog__body + .dialog__body {
990
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
1137
+ border-top: var(--vb-dialog-sep-border);
991
1138
  }
992
1139
 
993
1140
  .dialog__footer {
994
1141
  bottom: 0;
995
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
1142
+ border-top: var(--vb-dialog-sep-border);
996
1143
  }
997
1144
 
998
1145
  .dialog__title {
999
1146
  flex-grow: 1;
1000
- font-size: 1.125rem;
1001
- font-weight: 600;
1002
- line-height: 1.875;
1003
- }
1004
-
1005
- .dialog > .dialog__close {
1006
- position: absolute;
1007
- top: 1em;
1008
- right: 1em;
1009
- }
1010
- .dialog > .dialog__close + .dialog__body {
1011
- 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);
1012
1150
  }
1013
1151
 
1014
1152
  :root {
1015
- --vrembem-prefix: vb-;
1153
+ --vb-prefix: vb-;
1016
1154
  }
1017
1155
 
1018
1156
  :root {
@@ -1062,17 +1200,17 @@ input::-moz-placeholder {
1062
1200
  height: 100%;
1063
1201
  overflow: auto;
1064
1202
  border-radius: 0;
1065
- background: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
1203
+ background: var(--vb-background-darker);
1066
1204
  box-shadow: none;
1067
1205
  opacity: 0;
1068
1206
  -webkit-overflow-scrolling: touch;
1069
1207
  }
1070
1208
  .drawer__dialog .dialog__header,
1071
1209
  .drawer__dialog .dialog__footer {
1072
- background: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
1210
+ background: var(--vb-background-darker);
1073
1211
  }
1074
1212
  .drawer__dialog .dialog__body {
1075
- background: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
1213
+ background: var(--vb-background-darker);
1076
1214
  }
1077
1215
 
1078
1216
  /**
@@ -1176,7 +1314,7 @@ input::-moz-placeholder {
1176
1314
  inset: 0;
1177
1315
  width: 100%;
1178
1316
  height: 100%;
1179
- background-color: var(--vb-neutral-10, hsl(214, 20%, 10%));
1317
+ background-color: var(--vb-neutral-10);
1180
1318
  opacity: 0;
1181
1319
  }
1182
1320
  .drawer_modal .drawer__dialog {
@@ -1187,7 +1325,7 @@ input::-moz-placeholder {
1187
1325
  max-width: 80%;
1188
1326
  transform: translateX(-100%);
1189
1327
  background-color: white;
1190
- 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);
1191
1329
  }
1192
1330
  .drawer_modal.drawer_switch {
1193
1331
  right: auto;
@@ -1898,11 +2036,11 @@ input::-moz-placeholder {
1898
2036
  transition-duration: 0.15s;
1899
2037
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1900
2038
  outline: none;
1901
- border: 1px solid var(--vb-border-color-dark, rgba(0, 0, 0, 0.2));
2039
+ border: 1px solid var(--vb-border-color-dark);
1902
2040
  border-radius: 0.25rem;
1903
2041
  background: white;
1904
- 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);
1905
- 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);
1906
2044
  font-family: blinkmacsystemfont, -apple-system, system-ui, "Segoe UI", "Roboto", "Helvetica Neue", arial, sans-serif;
1907
2045
  font-size: 16px;
1908
2046
  line-height: 1.625;
@@ -1911,21 +2049,21 @@ input::-moz-placeholder {
1911
2049
  appearance: none;
1912
2050
  }
1913
2051
  .input:hover {
1914
- border-color: var(--vb-border-color-darker, rgba(0, 0, 0, 0.3));
2052
+ border-color: var(--vb-border-color-darker);
1915
2053
  }
1916
2054
  .input:focus {
1917
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
1918
- 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);
1919
2057
  }
1920
2058
  .input:disabled {
1921
- background-color: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
2059
+ background-color: var(--vb-background-darker);
1922
2060
  pointer-events: none;
1923
2061
  }
1924
2062
  .input:read-only {
1925
- background-color: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
2063
+ background-color: var(--vb-background-darker);
1926
2064
  }
1927
2065
  .input::placeholder {
1928
- color: var(--vb-foreground-lighter, var(--vb-neutral-60, hsl(214, 20%, 60%)));
2066
+ color: var(--vb-foreground-lighter);
1929
2067
  }
1930
2068
 
1931
2069
  .input_auto {
@@ -1949,7 +2087,7 @@ input::-moz-placeholder {
1949
2087
  .input_error {
1950
2088
  border-color: hsl(0, 80%, 50%);
1951
2089
  box-shadow: 0 0 0 0 rgba(230, 26, 26, 0), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
1952
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
2090
+ color: var(--vb-foreground);
1953
2091
  }
1954
2092
  .input_error:hover {
1955
2093
  border-color: hsl(0, 80%, 50%);
@@ -1970,7 +2108,7 @@ input::-moz-placeholder {
1970
2108
  background-color: white;
1971
2109
  }
1972
2110
  .input_type_select:disabled {
1973
- background-color: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
2111
+ background-color: var(--vb-background-darker);
1974
2112
  }
1975
2113
 
1976
2114
  .input_type_textarea {
@@ -2425,7 +2563,7 @@ input::-moz-placeholder {
2425
2563
  width: auto;
2426
2564
  height: 1px;
2427
2565
  margin: 0.5em 0;
2428
- background: var(--vb-border-color, rgba(0, 0, 0, 0.1));
2566
+ background: var(--vb-border-color);
2429
2567
  }
2430
2568
  .menu__sep:first-child {
2431
2569
  margin-top: 0;
@@ -2445,7 +2583,7 @@ input::-moz-placeholder {
2445
2583
  padding: 0.5em 1em;
2446
2584
  border-radius: 0.25rem;
2447
2585
  background: none;
2448
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
2586
+ color: var(--vb-foreground);
2449
2587
  white-space: normal;
2450
2588
  }
2451
2589
  .menu__action > * {
@@ -2458,36 +2596,36 @@ input::-moz-placeholder {
2458
2596
  padding: 0.5em;
2459
2597
  }
2460
2598
  .menu__action:hover {
2461
- background: var(--vb-background-hover, rgba(0, 0, 0, 0.05));
2599
+ background: var(--vb-background-hover);
2462
2600
  }
2463
2601
  .menu__action:focus {
2464
2602
  outline: none;
2465
- background: var(--vb-background-focus, rgba(0, 0, 0, 0.05));
2603
+ background: var(--vb-background-focus);
2466
2604
  }
2467
2605
  .menu__action:focus-visible {
2468
2606
  z-index: 1;
2469
- outline: 2px solid var(--vb-focus-visible, var(--vb-primary-50, hsl(152, 60%, 50%)));
2607
+ outline: 2px solid var(--vb-focus-visible);
2470
2608
  }
2471
2609
  .menu__action:active {
2472
- background: var(--vb-background-active, rgba(0, 0, 0, 0.1));
2610
+ background: var(--vb-background-active);
2473
2611
  }
2474
2612
  .menu__action.is-active, .menu__action.is-active[disabled] {
2475
2613
  background: none;
2476
- color: var(--vb-primary-50, hsl(152, 60%, 50%));
2614
+ color: var(--vb-primary-50);
2477
2615
  cursor: pointer;
2478
2616
  }
2479
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 {
2480
2618
  background: none;
2481
- color: var(--vb-primary-50, hsl(152, 60%, 50%));
2619
+ color: var(--vb-primary-50);
2482
2620
  }
2483
2621
  .menu__action.is-disabled, .menu__action[disabled] {
2484
2622
  background: none;
2485
- color: var(--vb-foreground-lighter, var(--vb-neutral-60, hsl(214, 20%, 60%)));
2623
+ color: var(--vb-foreground-lighter);
2486
2624
  cursor: default;
2487
2625
  }
2488
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 {
2489
2627
  background: none;
2490
- color: var(--vb-foreground-lighter, var(--vb-neutral-60, hsl(214, 20%, 60%)));
2628
+ color: var(--vb-foreground-lighter);
2491
2629
  }
2492
2630
 
2493
2631
  .menu__text {
@@ -2741,7 +2879,7 @@ input::-moz-placeholder {
2741
2879
  inset: 0;
2742
2880
  width: 100%;
2743
2881
  height: 100%;
2744
- background-color: var(--vb-neutral-10, hsl(214, 20%, 10%));
2882
+ background-color: var(--vb-neutral-10);
2745
2883
  opacity: 0;
2746
2884
  }
2747
2885
 
@@ -2754,14 +2892,14 @@ input::-moz-placeholder {
2754
2892
  transition-duration: var(--vb-modal-transition-duration);
2755
2893
  transition-timing-function: var(--vb-modal-transition-timing-function);
2756
2894
  outline: 0 solid transparent;
2757
- 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);
2758
2896
  opacity: 0;
2759
2897
  }
2760
2898
  .modal__dialog:focus {
2761
- outline: 4px solid var(--vb-primary-50, hsl(152, 60%, 50%));
2899
+ outline: 4px solid var(--vb-primary-50);
2762
2900
  }
2763
2901
  .modal__dialog[role=alertdialog]:focus {
2764
- outline: 4px solid var(--vb-important-50, hsl(0, 80%, 50%));
2902
+ outline: 4px solid var(--vb-important-50);
2765
2903
  }
2766
2904
 
2767
2905
  .modal.is-closed {
@@ -2878,21 +3016,21 @@ input::-moz-placeholder {
2878
3016
  }
2879
3017
 
2880
3018
  :root, .vb-theme-root {
2881
- --vb-notice-background: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%)));
2882
- --vb-notice-foreground: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
3019
+ --vb-notice-background: var(--vb-background-dark);
3020
+ --vb-notice-foreground: var(--vb-foreground);
2883
3021
  }
2884
3022
  .vb-theme-light {
2885
- --vb-notice-background: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%)));
2886
- --vb-notice-foreground: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
3023
+ --vb-notice-background: var(--vb-background-dark);
3024
+ --vb-notice-foreground: var(--vb-foreground);
2887
3025
  }
2888
3026
 
2889
3027
  .notice {
2890
3028
  padding: 1em;
2891
3029
  border: var(--vb-notice-border);
2892
3030
  border-radius: 0.25rem;
2893
- background: var(--vb-notice-background, var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%))));
3031
+ background: var(--vb-notice-background);
2894
3032
  box-shadow: var(--vb-notice-shadow);
2895
- color: var(--vb-notice-foreground, var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%))));
3033
+ color: var(--vb-notice-foreground);
2896
3034
  }
2897
3035
  .notice > * + * {
2898
3036
  margin-top: 0.5em;
@@ -2905,23 +3043,23 @@ input::-moz-placeholder {
2905
3043
  }
2906
3044
 
2907
3045
  .notice_theme_primary {
2908
- background-color: var(--vb-primary-90, hsl(152, 60%, 90%));
2909
- color: var(--vb-primary-30, hsl(152, 60%, 30%));
3046
+ background-color: var(--vb-primary-90);
3047
+ color: var(--vb-primary-30);
2910
3048
  }
2911
3049
 
2912
3050
  .notice_theme_secondary {
2913
- background-color: var(--vb-secondary-90, hsl(214, 50%, 90%));
2914
- color: var(--vb-secondary-30, hsl(214, 50%, 30%));
3051
+ background-color: var(--vb-secondary-90);
3052
+ color: var(--vb-secondary-30);
2915
3053
  }
2916
3054
 
2917
3055
  .notice_theme_neutral {
2918
- background-color: var(--vb-neutral-90, hsl(214, 20%, 90%));
2919
- color: var(--vb-neutral-30, hsl(214, 20%, 30%));
3056
+ background-color: var(--vb-neutral-90);
3057
+ color: var(--vb-neutral-30);
2920
3058
  }
2921
3059
 
2922
3060
  .notice_theme_important {
2923
- background-color: var(--vb-important-90, hsl(0, 80%, 90%));
2924
- color: var(--vb-important-30, hsl(0, 80%, 30%));
3061
+ background-color: var(--vb-important-90);
3062
+ color: var(--vb-important-30);
2925
3063
  }
2926
3064
 
2927
3065
  :root {
@@ -2942,10 +3080,10 @@ input::-moz-placeholder {
2942
3080
  margin: calc(var(--vb-popover-offset) * 1px) 0 0;
2943
3081
  padding: 0.5em;
2944
3082
  border-radius: 0.25rem;
2945
- background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
3083
+ background: var(--vb-background);
2946
3084
  background-clip: padding-box;
2947
- box-shadow: 0 2px 6px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
2948
- 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);
2949
3087
  font-size: 0.875rem;
2950
3088
  }
2951
3089
  .popover::before {
@@ -3013,7 +3151,7 @@ input::-moz-placeholder {
3013
3151
  content: "";
3014
3152
  visibility: visible;
3015
3153
  transform: rotate(45deg);
3016
- 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));
3017
3155
  border-right-color: transparent;
3018
3156
  border-bottom-color: transparent;
3019
3157
  background-clip: padding-box;
@@ -3067,8 +3205,48 @@ input::-moz-placeholder {
3067
3205
  width: auto;
3068
3206
  max-width: 16rem;
3069
3207
  padding: 0.5rem 0.75rem;
3070
- background: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
3071
- 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);
3072
3250
  }
3073
3251
 
3074
3252
  .radio {
@@ -3081,34 +3259,34 @@ input::-moz-placeholder {
3081
3259
  }
3082
3260
 
3083
3261
  .radio__background {
3084
- width: 2.5rem;
3085
- height: 2.5rem;
3262
+ width: var(--vb-radio-size);
3263
+ height: var(--vb-radio-size);
3086
3264
  position: relative;
3087
3265
  z-index: 1;
3088
3266
  display: flex;
3089
3267
  align-items: center;
3090
3268
  justify-content: center;
3091
- border-radius: 9999px;
3092
- 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));
3093
3271
  }
3094
3272
 
3095
3273
  .radio__circle {
3096
- width: 20px;
3097
- height: 20px;
3274
+ width: var(--vb-radio-circle-size);
3275
+ height: var(--vb-radio-circle-size);
3098
3276
  display: flex;
3099
3277
  align-items: center;
3100
3278
  justify-content: center;
3101
- border: 2px solid var(--vb-neutral-50, hsl(214, 20%, 50%));
3102
- border-radius: 20px;
3103
- 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);
3104
3282
  color: transparent;
3105
3283
  }
3106
3284
 
3107
3285
  .radio__dot {
3108
3286
  width: 0;
3109
3287
  height: 0;
3110
- border-radius: 8px;
3111
- background-color: white;
3288
+ border-radius: var(--vb-radio-dot-size);
3289
+ background-color: var(--vb-radio-dot-color);
3112
3290
  opacity: 0;
3113
3291
  }
3114
3292
 
@@ -3123,91 +3301,117 @@ input::-moz-placeholder {
3123
3301
  cursor: pointer;
3124
3302
  }
3125
3303
  .radio__native:hover + .radio__background {
3126
- 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));
3127
3305
  }
3128
3306
  .radio__native:hover + .radio__background .radio__circle {
3129
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
3307
+ border-color: var(--vb-radio-color);
3308
+ background-color: var(--vb-radio-fill);
3130
3309
  }
3131
3310
  .radio__native:focus + .radio__background {
3132
- 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));
3133
3312
  }
3134
3313
  .radio__native:focus + .radio__background .radio__circle {
3135
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
3314
+ border-color: var(--vb-radio-color);
3315
+ background-color: var(--vb-radio-fill);
3136
3316
  }
3137
3317
  .radio__native:focus-visible + .radio__background, .radio__native:active + .radio__background {
3138
- 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));
3139
3319
  }
3140
3320
  .radio__native:focus-visible + .radio__background .radio__circle, .radio__native:active + .radio__background .radio__circle {
3141
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
3321
+ border-color: var(--vb-radio-color);
3322
+ background-color: var(--vb-radio-fill);
3142
3323
  }
3143
3324
  .radio__native:checked + .radio__background .radio__circle {
3144
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
3145
- background-color: var(--vb-primary-50, hsl(152, 60%, 50%));
3325
+ border-color: var(--vb-radio-color);
3326
+ background-color: var(--vb-radio-color);
3146
3327
  }
3147
3328
  .radio__native:checked + .radio__background .radio__dot {
3148
- width: 8px;
3149
- height: 8px;
3329
+ width: var(--vb-radio-dot-size);
3330
+ height: var(--vb-radio-dot-size);
3150
3331
  transition-property: opacity, width, height;
3151
- transition-duration: 0.15s;
3152
- 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);
3153
3334
  background-position: center center;
3154
3335
  opacity: 1;
3155
3336
  }
3156
3337
 
3157
- .radio_size_sm .radio__background {
3158
- width: 1.875rem;
3159
- 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;
3160
3343
  }
3161
- .radio_size_sm .radio__circle {
3162
- width: 16px;
3163
- height: 16px;
3164
- border-width: 2px;
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;
3165
3350
  }
3166
- .radio_size_sm .radio__native:checked + .radio__background .radio__dot {
3167
- width: 6px;
3168
- height: 6px;
3351
+
3352
+ :root, .vb-theme-root {
3353
+ --vb-section-max-width: 70rem;
3354
+ --vb-section-image-opacity: 1;
3355
+ --vb-section-padding: 1.5em;
3356
+ }
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
+ }
3169
3366
  }
3170
3367
 
3171
- .radio_size_lg .radio__background {
3172
- width: 3.125rem;
3173
- 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;
3373
+ }
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
+ }
3174
3381
  }
3175
- .radio_size_lg .radio__circle {
3176
- width: 26px;
3177
- height: 26px;
3178
- border-width: 2.5px;
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;
3179
3388
  }
3180
- .radio_size_lg .radio__native:checked + .radio__background .radio__dot {
3181
- width: 10px;
3182
- 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;
3183
3395
  }
3184
3396
 
3185
3397
  .section {
3186
3398
  position: relative;
3187
3399
  display: flex;
3188
3400
  flex-direction: column;
3189
- padding: 1.5em;
3401
+ padding: var(--vb-section-padding);
3402
+ background: var(--vb-section-background);
3403
+ color: var(--vb-section-foreground);
3190
3404
  }
3191
3405
 
3192
3406
  .section__container {
3193
3407
  position: relative;
3194
3408
  z-index: 3;
3195
3409
  width: 100%;
3196
- max-width: 70rem;
3410
+ max-width: var(--vb-section-max-width);
3197
3411
  margin: auto;
3198
3412
  }
3199
3413
 
3200
- @media (min-width: 760px) {
3201
- .section {
3202
- padding: 2em 1.5em;
3203
- }
3204
- }
3205
- @media (min-width: 990px) {
3206
- .section {
3207
- padding: 3em 1.5em;
3208
- }
3209
- }
3210
- .section__background,
3414
+ .section__image,
3211
3415
  .section__screen {
3212
3416
  width: 100%;
3213
3417
  height: 100%;
@@ -3215,101 +3419,123 @@ input::-moz-placeholder {
3215
3419
  inset: 0;
3216
3420
  }
3217
3421
 
3218
- .section__background {
3422
+ .section__image {
3219
3423
  object-fit: cover;
3220
3424
  z-index: 1;
3425
+ opacity: var(--vb-section-image-opacity);
3221
3426
  }
3222
3427
 
3223
3428
  .section__screen {
3224
3429
  z-index: 2;
3225
- background: var(--vb-neutral-10, hsl(214, 20%, 10%));
3226
- opacity: 0.7;
3227
- }
3228
-
3229
- .section_size_xs {
3230
- padding: 0;
3430
+ background: var(--vb-section-screen-background);
3431
+ opacity: var(--vb-section-screen-opacity);
3231
3432
  }
3232
3433
 
3233
- @media (min-width: 760px) {
3234
- .section_size_xs {
3235
- padding: 0;
3236
- }
3237
- }
3238
- @media (min-width: 990px) {
3239
- .section_size_xs {
3240
- padding: 0;
3241
- }
3242
- }
3243
3434
  .section_size_sm {
3244
- padding: 1em;
3435
+ --vb-section-padding: 1em;
3245
3436
  }
3246
3437
 
3247
- @media (min-width: 760px) {
3248
- .section_size_sm {
3249
- padding: 1em;
3250
- }
3251
- }
3252
- @media (min-width: 990px) {
3253
- .section_size_sm {
3254
- padding: 1em;
3255
- }
3256
- }
3257
3438
  .section_size_md {
3258
- padding: 1.5em;
3439
+ --vb-section-padding: 1.5em;
3259
3440
  }
3260
-
3261
3441
  @media (min-width: 760px) {
3262
3442
  .section_size_md {
3263
- padding: 2em 1.5em;
3443
+ --vb-section-padding: 2em 1.5em;
3264
3444
  }
3265
3445
  }
3266
3446
  @media (min-width: 990px) {
3267
3447
  .section_size_md {
3268
- padding: 3em 1.5em;
3448
+ --vb-section-padding: 3em 1.5em;
3269
3449
  }
3270
3450
  }
3451
+
3271
3452
  .section_size_lg {
3272
- padding: 1.5em;
3453
+ --vb-section-padding: 1.5em;
3273
3454
  }
3274
-
3275
3455
  @media (min-width: 760px) {
3276
3456
  .section_size_lg {
3277
- padding: 4em 1.5em;
3457
+ --vb-section-padding: 4em 1.5em;
3278
3458
  }
3279
3459
  }
3280
3460
  @media (min-width: 990px) {
3281
3461
  .section_size_lg {
3282
- padding: 6em 1.5em;
3462
+ --vb-section-padding: 6em 1.5em;
3283
3463
  }
3284
3464
  }
3465
+
3285
3466
  .section_size_xl {
3286
- 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
+ }
3287
3473
  }
3288
-
3289
3474
  @media (min-width: 760px) {
3290
3475
  .section_size_xl {
3291
- padding: 8em 2em;
3476
+ --vb-section-padding: 8em 2em;
3292
3477
  }
3293
3478
  }
3294
3479
  @media (min-width: 990px) {
3295
3480
  .section_size_xl {
3296
- padding: 12em 2em;
3481
+ --vb-section-padding: 12em 2em;
3297
3482
  }
3298
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);
3510
+ }
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
+
3299
3525
  .switch {
3300
3526
  position: relative;
3301
3527
  display: inline-flex;
3302
3528
  flex: 0 0 auto;
3303
3529
  align-items: center;
3304
3530
  justify-content: center;
3305
- padding-right: 0.625rem;
3306
- padding-left: 0.625rem;
3531
+ padding-right: calc(var(--vb-switch-size) * 0.25);
3532
+ padding-left: calc(var(--vb-switch-size) * 0.25);
3307
3533
  vertical-align: middle;
3308
3534
  }
3309
3535
 
3310
3536
  .switch__background {
3311
- width: 2.5rem;
3312
- height: 2.5rem;
3537
+ width: var(--vb-switch-size);
3538
+ height: var(--vb-switch-size);
3313
3539
  position: relative;
3314
3540
  z-index: 1;
3315
3541
  display: flex;
@@ -3317,39 +3543,39 @@ input::-moz-placeholder {
3317
3543
  justify-content: center;
3318
3544
  }
3319
3545
  .switch__background::after {
3320
- width: 2.5rem;
3321
- height: 2.5rem;
3546
+ width: var(--vb-switch-size);
3547
+ height: var(--vb-switch-size);
3322
3548
  content: "";
3323
3549
  position: absolute;
3324
3550
  top: 0;
3325
- left: -0.625rem;
3326
- transition: left 0.15s cubic-bezier(0.4, 0, 0.2, 1);
3327
- border-radius: 9999px;
3328
- 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));
3329
3555
  }
3330
3556
 
3331
3557
  .switch__track {
3332
3558
  width: 100%;
3333
- height: 20px;
3559
+ height: var(--vb-switch-track-size);
3334
3560
  position: relative;
3335
3561
  display: block;
3336
- border: 2px solid var(--vb-neutral-50, hsl(214, 20%, 50%));
3337
- border-radius: 9999px;
3338
- 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);
3339
3565
  }
3340
3566
 
3341
3567
  .switch__thumb {
3342
- width: 16px;
3343
- 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);
3344
3570
  position: absolute;
3345
3571
  z-index: 1;
3346
3572
  top: 0;
3347
3573
  left: 0;
3348
3574
  display: block;
3349
- transition: left 0.15s cubic-bezier(0.4, 0, 0.2, 1);
3350
- border-radius: 9999px;
3351
- background-color: white;
3352
- 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);
3353
3579
  }
3354
3580
 
3355
3581
  .switch__native {
@@ -3363,128 +3589,118 @@ input::-moz-placeholder {
3363
3589
  cursor: pointer;
3364
3590
  }
3365
3591
  .switch__native:hover + .switch__background::after {
3366
- 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);
3367
3597
  }
3368
3598
  .switch__native:hover + .switch__background .switch__thumb {
3369
- 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);
3370
3600
  }
3371
3601
  .switch__native:focus + .switch__background::after {
3372
- 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);
3373
3607
  }
3374
3608
  .switch__native:focus + .switch__background .switch__thumb {
3375
- 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);
3376
3610
  }
3377
3611
  .switch__native:focus-visible + .switch__background::after, .switch__native:active + .switch__background::after {
3378
- 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);
3379
3617
  }
3380
3618
  .switch__native:focus-visible + .switch__background .switch__thumb, .switch__native:active + .switch__background .switch__thumb {
3381
- 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);
3382
3620
  }
3383
3621
  .switch__native:checked + .switch__background::after {
3384
- left: calc(100% - 1.875rem);
3622
+ left: calc(100% - var(--vb-switch-size) * 0.75);
3385
3623
  }
3386
3624
  .switch__native:checked + .switch__background .switch__track {
3387
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
3388
- background-color: var(--vb-primary-50, hsl(152, 60%, 50%));
3625
+ border-color: var(--vb-switch-color);
3626
+ background-color: var(--vb-switch-color);
3389
3627
  }
3390
3628
  .switch__native:checked + .switch__background .switch__thumb {
3391
- left: calc(100% - 16px);
3392
- 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);
3393
3631
  }
3394
3632
 
3395
3633
  .switch_size_sm {
3396
- padding-right: 0.46875rem;
3397
- padding-left: 0.46875rem;
3398
- }
3399
- .switch_size_sm .switch__background {
3400
- width: 1.875rem;
3401
- height: 1.875rem;
3402
- }
3403
- .switch_size_sm .switch__background::after {
3404
- width: 1.875rem;
3405
- height: 1.875rem;
3406
- left: -0.46875rem;
3407
- }
3408
- .switch_size_sm .switch__track {
3409
- width: 100%;
3410
- height: 16px;
3411
- border-width: 2px;
3412
- }
3413
- .switch_size_sm .switch__thumb {
3414
- width: 12px;
3415
- height: 12px;
3416
- box-shadow: 0 0 0 2px var(--vb-neutral-50, hsl(214, 20%, 50%));
3417
- }
3418
- .switch_size_sm .switch__native:hover + .switch__background .switch__thumb {
3419
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
3420
- }
3421
- .switch_size_sm .switch__native:focus + .switch__background .switch__thumb {
3422
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
3423
- }
3424
- .switch_size_sm .switch__native:active + .switch__background .switch__thumb {
3425
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
3426
- }
3427
- .switch_size_sm .switch__native:checked + .switch__background::after {
3428
- left: calc(100% - 1.40625rem);
3429
- }
3430
- .switch_size_sm .switch__native:checked + .switch__background .switch__thumb {
3431
- left: calc(100% - 12px);
3432
- 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;
3433
3637
  }
3434
3638
 
3435
3639
  .switch_size_lg {
3436
- padding-right: 0.78125rem;
3437
- padding-left: 0.78125rem;
3640
+ --vb-switch-size: 3.125rem;
3641
+ --vb-switch-border-width: 2.5px;
3642
+ --vb-switch-track-size: 26px;
3438
3643
  }
3439
- .switch_size_lg .switch__background {
3440
- width: 3.125rem;
3441
- height: 3.125rem;
3442
- }
3443
- .switch_size_lg .switch__background::after {
3444
- width: 3.125rem;
3445
- height: 3.125rem;
3446
- left: -0.78125rem;
3447
- }
3448
- .switch_size_lg .switch__track {
3449
- width: 100%;
3450
- height: 26px;
3451
- border-width: 2.5px;
3452
- }
3453
- .switch_size_lg .switch__thumb {
3454
- width: 21px;
3455
- height: 21px;
3456
- box-shadow: 0 0 0 2.5px var(--vb-neutral-50, hsl(214, 20%, 50%));
3457
- }
3458
- .switch_size_lg .switch__native:hover + .switch__background .switch__thumb {
3459
- 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;
3460
3649
  }
3461
- .switch_size_lg .switch__native:focus + .switch__background .switch__thumb {
3462
- 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);
3463
3658
  }
3464
- .switch_size_lg .switch__native:active + .switch__background .switch__thumb {
3465
- 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
+ }
3466
3668
  }
3467
- .switch_size_lg .switch__native:checked + .switch__background::after {
3468
- 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);
3469
3677
  }
3470
- .switch_size_lg .switch__native:checked + .switch__background .switch__thumb {
3471
- left: calc(100% - 21px);
3472
- 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);
3473
3686
  }
3474
3687
 
3475
3688
  .table {
3476
3689
  width: 100%;
3690
+ background-color: var(--vb-table-background);
3691
+ color: var(--vb-table-foreground);
3477
3692
  text-align: left;
3478
3693
  }
3479
3694
  .table th,
3480
3695
  .table td,
3481
3696
  .table caption {
3482
- padding: 0.5em 1em;
3697
+ padding: var(--vb-table-padding);
3483
3698
  vertical-align: top;
3484
3699
  }
3485
3700
  .table th {
3486
3701
  font-weight: 700;
3487
3702
  }
3703
+
3488
3704
  .table__auto {
3489
3705
  width: 0;
3490
3706
  white-space: nowrap;
@@ -3507,7 +3723,8 @@ input::-moz-placeholder {
3507
3723
  .table_hover tbody tr:hover,
3508
3724
  .table_hover tbody tr:focus {
3509
3725
  z-index: 2;
3510
- background-color: hsla(53, 100%, 50%, 0.15);
3726
+ background-color: var(--vb-table-background-hover);
3727
+ color: var(--vb-table-foreground-hover);
3511
3728
  }
3512
3729
 
3513
3730
  .table_responsive thead,
@@ -3525,7 +3742,7 @@ input::-moz-placeholder {
3525
3742
  }
3526
3743
  .table_responsive [data-mobile-label] {
3527
3744
  position: relative;
3528
- padding-left: calc(8rem + 1em);
3745
+ padding-left: calc(var(--vb-table-mobile-label-width) + var(--vb-table-mobile-label-spacing));
3529
3746
  white-space: normal;
3530
3747
  }
3531
3748
  .table_responsive [data-mobile-label]::before {
@@ -3537,37 +3754,27 @@ input::-moz-placeholder {
3537
3754
  top: 0;
3538
3755
  bottom: 0;
3539
3756
  left: 0;
3540
- width: 8rem;
3541
- padding: 0.5em 1em;
3542
- font-weight: 600;
3543
- }
3544
- .table_responsive.table_size_sm [data-mobile-label] {
3545
- padding-left: calc(8rem + 0.5rem);
3546
- }
3547
- .table_responsive.table_size_sm [data-mobile-label]::before {
3548
- padding: 0.25rem 0.5rem;
3549
- }
3550
- .table_responsive.table_size_lg [data-mobile-label] {
3551
- padding-left: calc(8rem + 1.5rem);
3552
- }
3553
- .table_responsive.table_size_lg [data-mobile-label]::before {
3554
- 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;
3555
3762
  }
3556
3763
  .table_responsive.table_style_bordered {
3557
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3764
+ border: var(--vb-table-border);
3558
3765
  }
3559
3766
  .table_responsive.table_style_bordered td {
3560
3767
  border: none;
3561
3768
  }
3562
3769
  .table_responsive.table_style_bordered td + td,
3563
3770
  .table_responsive.table_style_bordered th + td {
3564
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
3771
+ border-top: var(--vb-table-border-alt);
3565
3772
  }
3566
3773
  .table_responsive.table_style_bordered [data-mobile-label]::before {
3567
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3774
+ border-right: var(--vb-table-border);
3568
3775
  }
3569
3776
  .table_responsive.table_style_bordered tr + tr {
3570
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3777
+ border-top: var(--vb-table-border);
3571
3778
  }
3572
3779
 
3573
3780
  @media (max-width: 479px) {
@@ -3586,7 +3793,7 @@ input::-moz-placeholder {
3586
3793
  }
3587
3794
  .table_responsive_xs [data-mobile-label] {
3588
3795
  position: relative;
3589
- padding-left: calc(8rem + 1em);
3796
+ padding-left: calc(var(--vb-table-mobile-label-width) + var(--vb-table-mobile-label-spacing));
3590
3797
  white-space: normal;
3591
3798
  }
3592
3799
  .table_responsive_xs [data-mobile-label]::before {
@@ -3598,37 +3805,27 @@ input::-moz-placeholder {
3598
3805
  top: 0;
3599
3806
  bottom: 0;
3600
3807
  left: 0;
3601
- width: 8rem;
3602
- padding: 0.5em 1em;
3603
- font-weight: 600;
3604
- }
3605
- .table_responsive_xs.table_size_sm [data-mobile-label] {
3606
- padding-left: calc(8rem + 0.5rem);
3607
- }
3608
- .table_responsive_xs.table_size_sm [data-mobile-label]::before {
3609
- padding: 0.25rem 0.5rem;
3610
- }
3611
- .table_responsive_xs.table_size_lg [data-mobile-label] {
3612
- padding-left: calc(8rem + 1.5rem);
3613
- }
3614
- .table_responsive_xs.table_size_lg [data-mobile-label]::before {
3615
- 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;
3616
3813
  }
3617
3814
  .table_responsive_xs.table_style_bordered {
3618
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3815
+ border: var(--vb-table-border);
3619
3816
  }
3620
3817
  .table_responsive_xs.table_style_bordered td {
3621
3818
  border: none;
3622
3819
  }
3623
3820
  .table_responsive_xs.table_style_bordered td + td,
3624
3821
  .table_responsive_xs.table_style_bordered th + td {
3625
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
3822
+ border-top: var(--vb-table-border-alt);
3626
3823
  }
3627
3824
  .table_responsive_xs.table_style_bordered [data-mobile-label]::before {
3628
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3825
+ border-right: var(--vb-table-border);
3629
3826
  }
3630
3827
  .table_responsive_xs.table_style_bordered tr + tr {
3631
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3828
+ border-top: var(--vb-table-border);
3632
3829
  }
3633
3830
  }
3634
3831
 
@@ -3648,7 +3845,7 @@ input::-moz-placeholder {
3648
3845
  }
3649
3846
  .table_responsive_sm [data-mobile-label] {
3650
3847
  position: relative;
3651
- padding-left: calc(8rem + 1em);
3848
+ padding-left: calc(var(--vb-table-mobile-label-width) + var(--vb-table-mobile-label-spacing));
3652
3849
  white-space: normal;
3653
3850
  }
3654
3851
  .table_responsive_sm [data-mobile-label]::before {
@@ -3660,37 +3857,27 @@ input::-moz-placeholder {
3660
3857
  top: 0;
3661
3858
  bottom: 0;
3662
3859
  left: 0;
3663
- width: 8rem;
3664
- padding: 0.5em 1em;
3665
- font-weight: 600;
3666
- }
3667
- .table_responsive_sm.table_size_sm [data-mobile-label] {
3668
- padding-left: calc(8rem + 0.5rem);
3669
- }
3670
- .table_responsive_sm.table_size_sm [data-mobile-label]::before {
3671
- padding: 0.25rem 0.5rem;
3672
- }
3673
- .table_responsive_sm.table_size_lg [data-mobile-label] {
3674
- padding-left: calc(8rem + 1.5rem);
3675
- }
3676
- .table_responsive_sm.table_size_lg [data-mobile-label]::before {
3677
- 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;
3678
3865
  }
3679
3866
  .table_responsive_sm.table_style_bordered {
3680
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3867
+ border: var(--vb-table-border);
3681
3868
  }
3682
3869
  .table_responsive_sm.table_style_bordered td {
3683
3870
  border: none;
3684
3871
  }
3685
3872
  .table_responsive_sm.table_style_bordered td + td,
3686
3873
  .table_responsive_sm.table_style_bordered th + td {
3687
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
3874
+ border-top: var(--vb-table-border-alt);
3688
3875
  }
3689
3876
  .table_responsive_sm.table_style_bordered [data-mobile-label]::before {
3690
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3877
+ border-right: var(--vb-table-border);
3691
3878
  }
3692
3879
  .table_responsive_sm.table_style_bordered tr + tr {
3693
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3880
+ border-top: var(--vb-table-border);
3694
3881
  }
3695
3882
  }
3696
3883
 
@@ -3710,7 +3897,7 @@ input::-moz-placeholder {
3710
3897
  }
3711
3898
  .table_responsive_md [data-mobile-label] {
3712
3899
  position: relative;
3713
- padding-left: calc(8rem + 1em);
3900
+ padding-left: calc(var(--vb-table-mobile-label-width) + var(--vb-table-mobile-label-spacing));
3714
3901
  white-space: normal;
3715
3902
  }
3716
3903
  .table_responsive_md [data-mobile-label]::before {
@@ -3722,37 +3909,27 @@ input::-moz-placeholder {
3722
3909
  top: 0;
3723
3910
  bottom: 0;
3724
3911
  left: 0;
3725
- width: 8rem;
3726
- padding: 0.5em 1em;
3727
- font-weight: 600;
3728
- }
3729
- .table_responsive_md.table_size_sm [data-mobile-label] {
3730
- padding-left: calc(8rem + 0.5rem);
3731
- }
3732
- .table_responsive_md.table_size_sm [data-mobile-label]::before {
3733
- padding: 0.25rem 0.5rem;
3734
- }
3735
- .table_responsive_md.table_size_lg [data-mobile-label] {
3736
- padding-left: calc(8rem + 1.5rem);
3737
- }
3738
- .table_responsive_md.table_size_lg [data-mobile-label]::before {
3739
- 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;
3740
3917
  }
3741
3918
  .table_responsive_md.table_style_bordered {
3742
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3919
+ border: var(--vb-table-border);
3743
3920
  }
3744
3921
  .table_responsive_md.table_style_bordered td {
3745
3922
  border: none;
3746
3923
  }
3747
3924
  .table_responsive_md.table_style_bordered td + td,
3748
3925
  .table_responsive_md.table_style_bordered th + td {
3749
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
3926
+ border-top: var(--vb-table-border-alt);
3750
3927
  }
3751
3928
  .table_responsive_md.table_style_bordered [data-mobile-label]::before {
3752
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3929
+ border-right: var(--vb-table-border);
3753
3930
  }
3754
3931
  .table_responsive_md.table_style_bordered tr + tr {
3755
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3932
+ border-top: var(--vb-table-border);
3756
3933
  }
3757
3934
  }
3758
3935
 
@@ -3772,7 +3949,7 @@ input::-moz-placeholder {
3772
3949
  }
3773
3950
  .table_responsive_lg [data-mobile-label] {
3774
3951
  position: relative;
3775
- padding-left: calc(8rem + 1em);
3952
+ padding-left: calc(var(--vb-table-mobile-label-width) + var(--vb-table-mobile-label-spacing));
3776
3953
  white-space: normal;
3777
3954
  }
3778
3955
  .table_responsive_lg [data-mobile-label]::before {
@@ -3784,37 +3961,27 @@ input::-moz-placeholder {
3784
3961
  top: 0;
3785
3962
  bottom: 0;
3786
3963
  left: 0;
3787
- width: 8rem;
3788
- padding: 0.5em 1em;
3789
- font-weight: 600;
3790
- }
3791
- .table_responsive_lg.table_size_sm [data-mobile-label] {
3792
- padding-left: calc(8rem + 0.5rem);
3793
- }
3794
- .table_responsive_lg.table_size_sm [data-mobile-label]::before {
3795
- padding: 0.25rem 0.5rem;
3796
- }
3797
- .table_responsive_lg.table_size_lg [data-mobile-label] {
3798
- padding-left: calc(8rem + 1.5rem);
3799
- }
3800
- .table_responsive_lg.table_size_lg [data-mobile-label]::before {
3801
- 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;
3802
3969
  }
3803
3970
  .table_responsive_lg.table_style_bordered {
3804
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3971
+ border: var(--vb-table-border);
3805
3972
  }
3806
3973
  .table_responsive_lg.table_style_bordered td {
3807
3974
  border: none;
3808
3975
  }
3809
3976
  .table_responsive_lg.table_style_bordered td + td,
3810
3977
  .table_responsive_lg.table_style_bordered th + td {
3811
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
3978
+ border-top: var(--vb-table-border-alt);
3812
3979
  }
3813
3980
  .table_responsive_lg.table_style_bordered [data-mobile-label]::before {
3814
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3981
+ border-right: var(--vb-table-border);
3815
3982
  }
3816
3983
  .table_responsive_lg.table_style_bordered tr + tr {
3817
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3984
+ border-top: var(--vb-table-border);
3818
3985
  }
3819
3986
  }
3820
3987
 
@@ -3834,7 +4001,7 @@ input::-moz-placeholder {
3834
4001
  }
3835
4002
  .table_responsive_xl [data-mobile-label] {
3836
4003
  position: relative;
3837
- padding-left: calc(8rem + 1em);
4004
+ padding-left: calc(var(--vb-table-mobile-label-width) + var(--vb-table-mobile-label-spacing));
3838
4005
  white-space: normal;
3839
4006
  }
3840
4007
  .table_responsive_xl [data-mobile-label]::before {
@@ -3846,57 +4013,51 @@ input::-moz-placeholder {
3846
4013
  top: 0;
3847
4014
  bottom: 0;
3848
4015
  left: 0;
3849
- width: 8rem;
3850
- padding: 0.5em 1em;
3851
- font-weight: 600;
3852
- }
3853
- .table_responsive_xl.table_size_sm [data-mobile-label] {
3854
- padding-left: calc(8rem + 0.5rem);
3855
- }
3856
- .table_responsive_xl.table_size_sm [data-mobile-label]::before {
3857
- padding: 0.25rem 0.5rem;
3858
- }
3859
- .table_responsive_xl.table_size_lg [data-mobile-label] {
3860
- padding-left: calc(8rem + 1.5rem);
3861
- }
3862
- .table_responsive_xl.table_size_lg [data-mobile-label]::before {
3863
- 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;
3864
4021
  }
3865
4022
  .table_responsive_xl.table_style_bordered {
3866
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4023
+ border: var(--vb-table-border);
3867
4024
  }
3868
4025
  .table_responsive_xl.table_style_bordered td {
3869
4026
  border: none;
3870
4027
  }
3871
4028
  .table_responsive_xl.table_style_bordered td + td,
3872
4029
  .table_responsive_xl.table_style_bordered th + td {
3873
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
4030
+ border-top: var(--vb-table-border-alt);
3874
4031
  }
3875
4032
  .table_responsive_xl.table_style_bordered [data-mobile-label]::before {
3876
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4033
+ border-right: var(--vb-table-border);
3877
4034
  }
3878
4035
  .table_responsive_xl.table_style_bordered tr + tr {
3879
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4036
+ border-top: var(--vb-table-border);
3880
4037
  }
3881
4038
  }
3882
4039
 
3883
4040
  .table_size_sm th,
3884
4041
  .table_size_sm td,
3885
4042
  .table_size_sm caption {
3886
- 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;
3887
4046
  }
3888
4047
 
3889
4048
  .table_size_lg th,
3890
4049
  .table_size_lg td,
3891
4050
  .table_size_lg caption {
3892
- 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;
3893
4054
  }
3894
4055
 
3895
4056
  .table_style_rowed {
3896
- border-bottom: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4057
+ border-bottom: var(--vb-table-border);
3897
4058
  }
3898
4059
  .table_style_rowed tr {
3899
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4060
+ border-top: var(--vb-table-border);
3900
4061
  }
3901
4062
  .table_style_rowed th:first-child,
3902
4063
  .table_style_rowed td:first-child {
@@ -3909,14 +4070,14 @@ input::-moz-placeholder {
3909
4070
 
3910
4071
  .table_style_bordered th,
3911
4072
  .table_style_bordered td {
3912
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4073
+ border: var(--vb-table-border);
3913
4074
  }
3914
4075
 
3915
4076
  .table_zebra thead tr {
3916
- background-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 50%, 3%);
4077
+ background-color: var(--vb-table-background-zebra);
3917
4078
  }
3918
4079
  .table_zebra tr:nth-child(even) {
3919
- background-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 50%, 3%);
4080
+ background-color: var(--vb-table-background-zebra);
3920
4081
  }
3921
4082
 
3922
4083
  .background-clip-border {
@@ -3932,15 +4093,15 @@ input::-moz-placeholder {
3932
4093
  }
3933
4094
 
3934
4095
  .background {
3935
- background-color: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%))) !important;
4096
+ background-color: var(--vb-background) !important;
3936
4097
  }
3937
4098
 
3938
4099
  .background-dark {
3939
- background-color: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%))) !important;
4100
+ background-color: var(--vb-background-dark) !important;
3940
4101
  }
3941
4102
 
3942
4103
  .background-darker {
3943
- background-color: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%))) !important;
4104
+ background-color: var(--vb-background-darker) !important;
3944
4105
  }
3945
4106
 
3946
4107
  .background-black {
@@ -3960,67 +4121,67 @@ input::-moz-placeholder {
3960
4121
  }
3961
4122
 
3962
4123
  .background-primary-0 {
3963
- background-color: var(--vb-primary-0, hsl(152, 60%, 0%)) !important;
4124
+ background-color: var(--vb-primary-0) !important;
3964
4125
  }
3965
4126
 
3966
4127
  .background-primary-5 {
3967
- background-color: var(--vb-primary-5, hsl(152, 60%, 5%)) !important;
4128
+ background-color: var(--vb-primary-5) !important;
3968
4129
  }
3969
4130
 
3970
4131
  .background-primary-10 {
3971
- background-color: var(--vb-primary-10, hsl(152, 60%, 10%)) !important;
4132
+ background-color: var(--vb-primary-10) !important;
3972
4133
  }
3973
4134
 
3974
4135
  .background-primary-12 {
3975
- background-color: var(--vb-primary-12, hsl(152, 60%, 12%)) !important;
4136
+ background-color: var(--vb-primary-12) !important;
3976
4137
  }
3977
4138
 
3978
4139
  .background-primary-15 {
3979
- background-color: var(--vb-primary-15, hsl(152, 60%, 15%)) !important;
4140
+ background-color: var(--vb-primary-15) !important;
3980
4141
  }
3981
4142
 
3982
4143
  .background-primary-20 {
3983
- background-color: var(--vb-primary-20, hsl(152, 60%, 20%)) !important;
4144
+ background-color: var(--vb-primary-20) !important;
3984
4145
  }
3985
4146
 
3986
4147
  .background-primary-30 {
3987
- background-color: var(--vb-primary-30, hsl(152, 60%, 30%)) !important;
4148
+ background-color: var(--vb-primary-30) !important;
3988
4149
  }
3989
4150
 
3990
4151
  .background-primary-40 {
3991
- background-color: var(--vb-primary-40, hsl(152, 60%, 40%)) !important;
4152
+ background-color: var(--vb-primary-40) !important;
3992
4153
  }
3993
4154
 
3994
4155
  .background-primary-50 {
3995
- background-color: var(--vb-primary-50, hsl(152, 60%, 50%)) !important;
4156
+ background-color: var(--vb-primary-50) !important;
3996
4157
  }
3997
4158
 
3998
4159
  .background-primary-60 {
3999
- background-color: var(--vb-primary-60, hsl(152, 60%, 60%)) !important;
4160
+ background-color: var(--vb-primary-60) !important;
4000
4161
  }
4001
4162
 
4002
4163
  .background-primary-70 {
4003
- background-color: var(--vb-primary-70, hsl(152, 60%, 70%)) !important;
4164
+ background-color: var(--vb-primary-70) !important;
4004
4165
  }
4005
4166
 
4006
4167
  .background-primary-80 {
4007
- background-color: var(--vb-primary-80, hsl(152, 60%, 80%)) !important;
4168
+ background-color: var(--vb-primary-80) !important;
4008
4169
  }
4009
4170
 
4010
4171
  .background-primary-90 {
4011
- background-color: var(--vb-primary-90, hsl(152, 60%, 90%)) !important;
4172
+ background-color: var(--vb-primary-90) !important;
4012
4173
  }
4013
4174
 
4014
4175
  .background-primary-95 {
4015
- background-color: var(--vb-primary-95, hsl(152, 60%, 95%)) !important;
4176
+ background-color: var(--vb-primary-95) !important;
4016
4177
  }
4017
4178
 
4018
4179
  .background-primary-98 {
4019
- background-color: var(--vb-primary-98, hsl(152, 60%, 98%)) !important;
4180
+ background-color: var(--vb-primary-98) !important;
4020
4181
  }
4021
4182
 
4022
4183
  .background-primary-100 {
4023
- background-color: var(--vb-primary-100, hsl(152, 60%, 100%)) !important;
4184
+ background-color: var(--vb-primary-100) !important;
4024
4185
  }
4025
4186
 
4026
4187
  .background-secondary {
@@ -4028,67 +4189,67 @@ input::-moz-placeholder {
4028
4189
  }
4029
4190
 
4030
4191
  .background-secondary-0 {
4031
- background-color: var(--vb-secondary-0, hsl(214, 50%, 0%)) !important;
4192
+ background-color: var(--vb-secondary-0) !important;
4032
4193
  }
4033
4194
 
4034
4195
  .background-secondary-5 {
4035
- background-color: var(--vb-secondary-5, hsl(214, 50%, 5%)) !important;
4196
+ background-color: var(--vb-secondary-5) !important;
4036
4197
  }
4037
4198
 
4038
4199
  .background-secondary-10 {
4039
- background-color: var(--vb-secondary-10, hsl(214, 50%, 10%)) !important;
4200
+ background-color: var(--vb-secondary-10) !important;
4040
4201
  }
4041
4202
 
4042
4203
  .background-secondary-12 {
4043
- background-color: var(--vb-secondary-12, hsl(214, 50%, 12%)) !important;
4204
+ background-color: var(--vb-secondary-12) !important;
4044
4205
  }
4045
4206
 
4046
4207
  .background-secondary-15 {
4047
- background-color: var(--vb-secondary-15, hsl(214, 50%, 15%)) !important;
4208
+ background-color: var(--vb-secondary-15) !important;
4048
4209
  }
4049
4210
 
4050
4211
  .background-secondary-20 {
4051
- background-color: var(--vb-secondary-20, hsl(214, 50%, 20%)) !important;
4212
+ background-color: var(--vb-secondary-20) !important;
4052
4213
  }
4053
4214
 
4054
4215
  .background-secondary-30 {
4055
- background-color: var(--vb-secondary-30, hsl(214, 50%, 30%)) !important;
4216
+ background-color: var(--vb-secondary-30) !important;
4056
4217
  }
4057
4218
 
4058
4219
  .background-secondary-40 {
4059
- background-color: var(--vb-secondary-40, hsl(214, 50%, 40%)) !important;
4220
+ background-color: var(--vb-secondary-40) !important;
4060
4221
  }
4061
4222
 
4062
4223
  .background-secondary-50 {
4063
- background-color: var(--vb-secondary-50, hsl(214, 50%, 50%)) !important;
4224
+ background-color: var(--vb-secondary-50) !important;
4064
4225
  }
4065
4226
 
4066
4227
  .background-secondary-60 {
4067
- background-color: var(--vb-secondary-60, hsl(214, 50%, 60%)) !important;
4228
+ background-color: var(--vb-secondary-60) !important;
4068
4229
  }
4069
4230
 
4070
4231
  .background-secondary-70 {
4071
- background-color: var(--vb-secondary-70, hsl(214, 50%, 70%)) !important;
4232
+ background-color: var(--vb-secondary-70) !important;
4072
4233
  }
4073
4234
 
4074
4235
  .background-secondary-80 {
4075
- background-color: var(--vb-secondary-80, hsl(214, 50%, 80%)) !important;
4236
+ background-color: var(--vb-secondary-80) !important;
4076
4237
  }
4077
4238
 
4078
4239
  .background-secondary-90 {
4079
- background-color: var(--vb-secondary-90, hsl(214, 50%, 90%)) !important;
4240
+ background-color: var(--vb-secondary-90) !important;
4080
4241
  }
4081
4242
 
4082
4243
  .background-secondary-95 {
4083
- background-color: var(--vb-secondary-95, hsl(214, 50%, 95%)) !important;
4244
+ background-color: var(--vb-secondary-95) !important;
4084
4245
  }
4085
4246
 
4086
4247
  .background-secondary-98 {
4087
- background-color: var(--vb-secondary-98, hsl(214, 50%, 98%)) !important;
4248
+ background-color: var(--vb-secondary-98) !important;
4088
4249
  }
4089
4250
 
4090
4251
  .background-secondary-100 {
4091
- background-color: var(--vb-secondary-100, hsl(214, 50%, 100%)) !important;
4252
+ background-color: var(--vb-secondary-100) !important;
4092
4253
  }
4093
4254
 
4094
4255
  .background-neutral {
@@ -4096,67 +4257,67 @@ input::-moz-placeholder {
4096
4257
  }
4097
4258
 
4098
4259
  .background-neutral-0 {
4099
- background-color: var(--vb-neutral-0, hsl(214, 20%, 0%)) !important;
4260
+ background-color: var(--vb-neutral-0) !important;
4100
4261
  }
4101
4262
 
4102
4263
  .background-neutral-5 {
4103
- background-color: var(--vb-neutral-5, hsl(214, 20%, 5%)) !important;
4264
+ background-color: var(--vb-neutral-5) !important;
4104
4265
  }
4105
4266
 
4106
4267
  .background-neutral-10 {
4107
- background-color: var(--vb-neutral-10, hsl(214, 20%, 10%)) !important;
4268
+ background-color: var(--vb-neutral-10) !important;
4108
4269
  }
4109
4270
 
4110
4271
  .background-neutral-12 {
4111
- background-color: var(--vb-neutral-12, hsl(214, 20%, 12%)) !important;
4272
+ background-color: var(--vb-neutral-12) !important;
4112
4273
  }
4113
4274
 
4114
4275
  .background-neutral-15 {
4115
- background-color: var(--vb-neutral-15, hsl(214, 20%, 15%)) !important;
4276
+ background-color: var(--vb-neutral-15) !important;
4116
4277
  }
4117
4278
 
4118
4279
  .background-neutral-20 {
4119
- background-color: var(--vb-neutral-20, hsl(214, 20%, 20%)) !important;
4280
+ background-color: var(--vb-neutral-20) !important;
4120
4281
  }
4121
4282
 
4122
4283
  .background-neutral-30 {
4123
- background-color: var(--vb-neutral-30, hsl(214, 20%, 30%)) !important;
4284
+ background-color: var(--vb-neutral-30) !important;
4124
4285
  }
4125
4286
 
4126
4287
  .background-neutral-40 {
4127
- background-color: var(--vb-neutral-40, hsl(214, 20%, 40%)) !important;
4288
+ background-color: var(--vb-neutral-40) !important;
4128
4289
  }
4129
4290
 
4130
4291
  .background-neutral-50 {
4131
- background-color: var(--vb-neutral-50, hsl(214, 20%, 50%)) !important;
4292
+ background-color: var(--vb-neutral-50) !important;
4132
4293
  }
4133
4294
 
4134
4295
  .background-neutral-60 {
4135
- background-color: var(--vb-neutral-60, hsl(214, 20%, 60%)) !important;
4296
+ background-color: var(--vb-neutral-60) !important;
4136
4297
  }
4137
4298
 
4138
4299
  .background-neutral-70 {
4139
- background-color: var(--vb-neutral-70, hsl(214, 20%, 70%)) !important;
4300
+ background-color: var(--vb-neutral-70) !important;
4140
4301
  }
4141
4302
 
4142
4303
  .background-neutral-80 {
4143
- background-color: var(--vb-neutral-80, hsl(214, 20%, 80%)) !important;
4304
+ background-color: var(--vb-neutral-80) !important;
4144
4305
  }
4145
4306
 
4146
4307
  .background-neutral-90 {
4147
- background-color: var(--vb-neutral-90, hsl(214, 20%, 90%)) !important;
4308
+ background-color: var(--vb-neutral-90) !important;
4148
4309
  }
4149
4310
 
4150
4311
  .background-neutral-95 {
4151
- background-color: var(--vb-neutral-95, hsl(214, 20%, 95%)) !important;
4312
+ background-color: var(--vb-neutral-95) !important;
4152
4313
  }
4153
4314
 
4154
4315
  .background-neutral-98 {
4155
- background-color: var(--vb-neutral-98, hsl(214, 20%, 98%)) !important;
4316
+ background-color: var(--vb-neutral-98) !important;
4156
4317
  }
4157
4318
 
4158
4319
  .background-neutral-100 {
4159
- background-color: var(--vb-neutral-100, hsl(214, 20%, 100%)) !important;
4320
+ background-color: var(--vb-neutral-100) !important;
4160
4321
  }
4161
4322
 
4162
4323
  .background-important {
@@ -4164,79 +4325,79 @@ input::-moz-placeholder {
4164
4325
  }
4165
4326
 
4166
4327
  .background-important-0 {
4167
- background-color: var(--vb-important-0, hsl(0, 80%, 0%)) !important;
4328
+ background-color: var(--vb-important-0) !important;
4168
4329
  }
4169
4330
 
4170
4331
  .background-important-5 {
4171
- background-color: var(--vb-important-5, hsl(0, 80%, 5%)) !important;
4332
+ background-color: var(--vb-important-5) !important;
4172
4333
  }
4173
4334
 
4174
4335
  .background-important-10 {
4175
- background-color: var(--vb-important-10, hsl(0, 80%, 10%)) !important;
4336
+ background-color: var(--vb-important-10) !important;
4176
4337
  }
4177
4338
 
4178
4339
  .background-important-12 {
4179
- background-color: var(--vb-important-12, hsl(0, 80%, 12%)) !important;
4340
+ background-color: var(--vb-important-12) !important;
4180
4341
  }
4181
4342
 
4182
4343
  .background-important-15 {
4183
- background-color: var(--vb-important-15, hsl(0, 80%, 15%)) !important;
4344
+ background-color: var(--vb-important-15) !important;
4184
4345
  }
4185
4346
 
4186
4347
  .background-important-20 {
4187
- background-color: var(--vb-important-20, hsl(0, 80%, 20%)) !important;
4348
+ background-color: var(--vb-important-20) !important;
4188
4349
  }
4189
4350
 
4190
4351
  .background-important-30 {
4191
- background-color: var(--vb-important-30, hsl(0, 80%, 30%)) !important;
4352
+ background-color: var(--vb-important-30) !important;
4192
4353
  }
4193
4354
 
4194
4355
  .background-important-40 {
4195
- background-color: var(--vb-important-40, hsl(0, 80%, 40%)) !important;
4356
+ background-color: var(--vb-important-40) !important;
4196
4357
  }
4197
4358
 
4198
4359
  .background-important-50 {
4199
- background-color: var(--vb-important-50, hsl(0, 80%, 50%)) !important;
4360
+ background-color: var(--vb-important-50) !important;
4200
4361
  }
4201
4362
 
4202
4363
  .background-important-60 {
4203
- background-color: var(--vb-important-60, hsl(0, 80%, 60%)) !important;
4364
+ background-color: var(--vb-important-60) !important;
4204
4365
  }
4205
4366
 
4206
4367
  .background-important-70 {
4207
- background-color: var(--vb-important-70, hsl(0, 80%, 70%)) !important;
4368
+ background-color: var(--vb-important-70) !important;
4208
4369
  }
4209
4370
 
4210
4371
  .background-important-80 {
4211
- background-color: var(--vb-important-80, hsl(0, 80%, 80%)) !important;
4372
+ background-color: var(--vb-important-80) !important;
4212
4373
  }
4213
4374
 
4214
4375
  .background-important-90 {
4215
- background-color: var(--vb-important-90, hsl(0, 80%, 90%)) !important;
4376
+ background-color: var(--vb-important-90) !important;
4216
4377
  }
4217
4378
 
4218
4379
  .background-important-95 {
4219
- background-color: var(--vb-important-95, hsl(0, 80%, 95%)) !important;
4380
+ background-color: var(--vb-important-95) !important;
4220
4381
  }
4221
4382
 
4222
4383
  .background-important-98 {
4223
- background-color: var(--vb-important-98, hsl(0, 80%, 98%)) !important;
4384
+ background-color: var(--vb-important-98) !important;
4224
4385
  }
4225
4386
 
4226
4387
  .background-important-100 {
4227
- background-color: var(--vb-important-100, hsl(0, 80%, 100%)) !important;
4388
+ background-color: var(--vb-important-100) !important;
4228
4389
  }
4229
4390
 
4230
4391
  .foreground {
4231
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%))) !important;
4392
+ color: var(--vb-foreground) !important;
4232
4393
  }
4233
4394
 
4234
4395
  .foreground-light {
4235
- color: var(--vb-foreground-light, var(--vb-neutral-40, hsl(214, 20%, 40%))) !important;
4396
+ color: var(--vb-foreground-light) !important;
4236
4397
  }
4237
4398
 
4238
4399
  .foreground-lighter {
4239
- color: var(--vb-foreground-lighter, var(--vb-neutral-60, hsl(214, 20%, 60%))) !important;
4400
+ color: var(--vb-foreground-lighter) !important;
4240
4401
  }
4241
4402
 
4242
4403
  .foreground-black {
@@ -4256,67 +4417,67 @@ input::-moz-placeholder {
4256
4417
  }
4257
4418
 
4258
4419
  .foreground-primary-0 {
4259
- color: var(--vb-primary-0, hsl(152, 60%, 0%)) !important;
4420
+ color: var(--vb-primary-0) !important;
4260
4421
  }
4261
4422
 
4262
4423
  .foreground-primary-5 {
4263
- color: var(--vb-primary-5, hsl(152, 60%, 5%)) !important;
4424
+ color: var(--vb-primary-5) !important;
4264
4425
  }
4265
4426
 
4266
4427
  .foreground-primary-10 {
4267
- color: var(--vb-primary-10, hsl(152, 60%, 10%)) !important;
4428
+ color: var(--vb-primary-10) !important;
4268
4429
  }
4269
4430
 
4270
4431
  .foreground-primary-12 {
4271
- color: var(--vb-primary-12, hsl(152, 60%, 12%)) !important;
4432
+ color: var(--vb-primary-12) !important;
4272
4433
  }
4273
4434
 
4274
4435
  .foreground-primary-15 {
4275
- color: var(--vb-primary-15, hsl(152, 60%, 15%)) !important;
4436
+ color: var(--vb-primary-15) !important;
4276
4437
  }
4277
4438
 
4278
4439
  .foreground-primary-20 {
4279
- color: var(--vb-primary-20, hsl(152, 60%, 20%)) !important;
4440
+ color: var(--vb-primary-20) !important;
4280
4441
  }
4281
4442
 
4282
4443
  .foreground-primary-30 {
4283
- color: var(--vb-primary-30, hsl(152, 60%, 30%)) !important;
4444
+ color: var(--vb-primary-30) !important;
4284
4445
  }
4285
4446
 
4286
4447
  .foreground-primary-40 {
4287
- color: var(--vb-primary-40, hsl(152, 60%, 40%)) !important;
4448
+ color: var(--vb-primary-40) !important;
4288
4449
  }
4289
4450
 
4290
4451
  .foreground-primary-50 {
4291
- color: var(--vb-primary-50, hsl(152, 60%, 50%)) !important;
4452
+ color: var(--vb-primary-50) !important;
4292
4453
  }
4293
4454
 
4294
4455
  .foreground-primary-60 {
4295
- color: var(--vb-primary-60, hsl(152, 60%, 60%)) !important;
4456
+ color: var(--vb-primary-60) !important;
4296
4457
  }
4297
4458
 
4298
4459
  .foreground-primary-70 {
4299
- color: var(--vb-primary-70, hsl(152, 60%, 70%)) !important;
4460
+ color: var(--vb-primary-70) !important;
4300
4461
  }
4301
4462
 
4302
4463
  .foreground-primary-80 {
4303
- color: var(--vb-primary-80, hsl(152, 60%, 80%)) !important;
4464
+ color: var(--vb-primary-80) !important;
4304
4465
  }
4305
4466
 
4306
4467
  .foreground-primary-90 {
4307
- color: var(--vb-primary-90, hsl(152, 60%, 90%)) !important;
4468
+ color: var(--vb-primary-90) !important;
4308
4469
  }
4309
4470
 
4310
4471
  .foreground-primary-95 {
4311
- color: var(--vb-primary-95, hsl(152, 60%, 95%)) !important;
4472
+ color: var(--vb-primary-95) !important;
4312
4473
  }
4313
4474
 
4314
4475
  .foreground-primary-98 {
4315
- color: var(--vb-primary-98, hsl(152, 60%, 98%)) !important;
4476
+ color: var(--vb-primary-98) !important;
4316
4477
  }
4317
4478
 
4318
4479
  .foreground-primary-100 {
4319
- color: var(--vb-primary-100, hsl(152, 60%, 100%)) !important;
4480
+ color: var(--vb-primary-100) !important;
4320
4481
  }
4321
4482
 
4322
4483
  .foreground-secondary {
@@ -4324,67 +4485,67 @@ input::-moz-placeholder {
4324
4485
  }
4325
4486
 
4326
4487
  .foreground-secondary-0 {
4327
- color: var(--vb-secondary-0, hsl(214, 50%, 0%)) !important;
4488
+ color: var(--vb-secondary-0) !important;
4328
4489
  }
4329
4490
 
4330
4491
  .foreground-secondary-5 {
4331
- color: var(--vb-secondary-5, hsl(214, 50%, 5%)) !important;
4492
+ color: var(--vb-secondary-5) !important;
4332
4493
  }
4333
4494
 
4334
4495
  .foreground-secondary-10 {
4335
- color: var(--vb-secondary-10, hsl(214, 50%, 10%)) !important;
4496
+ color: var(--vb-secondary-10) !important;
4336
4497
  }
4337
4498
 
4338
4499
  .foreground-secondary-12 {
4339
- color: var(--vb-secondary-12, hsl(214, 50%, 12%)) !important;
4500
+ color: var(--vb-secondary-12) !important;
4340
4501
  }
4341
4502
 
4342
4503
  .foreground-secondary-15 {
4343
- color: var(--vb-secondary-15, hsl(214, 50%, 15%)) !important;
4504
+ color: var(--vb-secondary-15) !important;
4344
4505
  }
4345
4506
 
4346
4507
  .foreground-secondary-20 {
4347
- color: var(--vb-secondary-20, hsl(214, 50%, 20%)) !important;
4508
+ color: var(--vb-secondary-20) !important;
4348
4509
  }
4349
4510
 
4350
4511
  .foreground-secondary-30 {
4351
- color: var(--vb-secondary-30, hsl(214, 50%, 30%)) !important;
4512
+ color: var(--vb-secondary-30) !important;
4352
4513
  }
4353
4514
 
4354
4515
  .foreground-secondary-40 {
4355
- color: var(--vb-secondary-40, hsl(214, 50%, 40%)) !important;
4516
+ color: var(--vb-secondary-40) !important;
4356
4517
  }
4357
4518
 
4358
4519
  .foreground-secondary-50 {
4359
- color: var(--vb-secondary-50, hsl(214, 50%, 50%)) !important;
4520
+ color: var(--vb-secondary-50) !important;
4360
4521
  }
4361
4522
 
4362
4523
  .foreground-secondary-60 {
4363
- color: var(--vb-secondary-60, hsl(214, 50%, 60%)) !important;
4524
+ color: var(--vb-secondary-60) !important;
4364
4525
  }
4365
4526
 
4366
4527
  .foreground-secondary-70 {
4367
- color: var(--vb-secondary-70, hsl(214, 50%, 70%)) !important;
4528
+ color: var(--vb-secondary-70) !important;
4368
4529
  }
4369
4530
 
4370
4531
  .foreground-secondary-80 {
4371
- color: var(--vb-secondary-80, hsl(214, 50%, 80%)) !important;
4532
+ color: var(--vb-secondary-80) !important;
4372
4533
  }
4373
4534
 
4374
4535
  .foreground-secondary-90 {
4375
- color: var(--vb-secondary-90, hsl(214, 50%, 90%)) !important;
4536
+ color: var(--vb-secondary-90) !important;
4376
4537
  }
4377
4538
 
4378
4539
  .foreground-secondary-95 {
4379
- color: var(--vb-secondary-95, hsl(214, 50%, 95%)) !important;
4540
+ color: var(--vb-secondary-95) !important;
4380
4541
  }
4381
4542
 
4382
4543
  .foreground-secondary-98 {
4383
- color: var(--vb-secondary-98, hsl(214, 50%, 98%)) !important;
4544
+ color: var(--vb-secondary-98) !important;
4384
4545
  }
4385
4546
 
4386
4547
  .foreground-secondary-100 {
4387
- color: var(--vb-secondary-100, hsl(214, 50%, 100%)) !important;
4548
+ color: var(--vb-secondary-100) !important;
4388
4549
  }
4389
4550
 
4390
4551
  .foreground-neutral {
@@ -4392,67 +4553,67 @@ input::-moz-placeholder {
4392
4553
  }
4393
4554
 
4394
4555
  .foreground-neutral-0 {
4395
- color: var(--vb-neutral-0, hsl(214, 20%, 0%)) !important;
4556
+ color: var(--vb-neutral-0) !important;
4396
4557
  }
4397
4558
 
4398
4559
  .foreground-neutral-5 {
4399
- color: var(--vb-neutral-5, hsl(214, 20%, 5%)) !important;
4560
+ color: var(--vb-neutral-5) !important;
4400
4561
  }
4401
4562
 
4402
4563
  .foreground-neutral-10 {
4403
- color: var(--vb-neutral-10, hsl(214, 20%, 10%)) !important;
4564
+ color: var(--vb-neutral-10) !important;
4404
4565
  }
4405
4566
 
4406
4567
  .foreground-neutral-12 {
4407
- color: var(--vb-neutral-12, hsl(214, 20%, 12%)) !important;
4568
+ color: var(--vb-neutral-12) !important;
4408
4569
  }
4409
4570
 
4410
4571
  .foreground-neutral-15 {
4411
- color: var(--vb-neutral-15, hsl(214, 20%, 15%)) !important;
4572
+ color: var(--vb-neutral-15) !important;
4412
4573
  }
4413
4574
 
4414
4575
  .foreground-neutral-20 {
4415
- color: var(--vb-neutral-20, hsl(214, 20%, 20%)) !important;
4576
+ color: var(--vb-neutral-20) !important;
4416
4577
  }
4417
4578
 
4418
4579
  .foreground-neutral-30 {
4419
- color: var(--vb-neutral-30, hsl(214, 20%, 30%)) !important;
4580
+ color: var(--vb-neutral-30) !important;
4420
4581
  }
4421
4582
 
4422
4583
  .foreground-neutral-40 {
4423
- color: var(--vb-neutral-40, hsl(214, 20%, 40%)) !important;
4584
+ color: var(--vb-neutral-40) !important;
4424
4585
  }
4425
4586
 
4426
4587
  .foreground-neutral-50 {
4427
- color: var(--vb-neutral-50, hsl(214, 20%, 50%)) !important;
4588
+ color: var(--vb-neutral-50) !important;
4428
4589
  }
4429
4590
 
4430
4591
  .foreground-neutral-60 {
4431
- color: var(--vb-neutral-60, hsl(214, 20%, 60%)) !important;
4592
+ color: var(--vb-neutral-60) !important;
4432
4593
  }
4433
4594
 
4434
4595
  .foreground-neutral-70 {
4435
- color: var(--vb-neutral-70, hsl(214, 20%, 70%)) !important;
4596
+ color: var(--vb-neutral-70) !important;
4436
4597
  }
4437
4598
 
4438
4599
  .foreground-neutral-80 {
4439
- color: var(--vb-neutral-80, hsl(214, 20%, 80%)) !important;
4600
+ color: var(--vb-neutral-80) !important;
4440
4601
  }
4441
4602
 
4442
4603
  .foreground-neutral-90 {
4443
- color: var(--vb-neutral-90, hsl(214, 20%, 90%)) !important;
4604
+ color: var(--vb-neutral-90) !important;
4444
4605
  }
4445
4606
 
4446
4607
  .foreground-neutral-95 {
4447
- color: var(--vb-neutral-95, hsl(214, 20%, 95%)) !important;
4608
+ color: var(--vb-neutral-95) !important;
4448
4609
  }
4449
4610
 
4450
4611
  .foreground-neutral-98 {
4451
- color: var(--vb-neutral-98, hsl(214, 20%, 98%)) !important;
4612
+ color: var(--vb-neutral-98) !important;
4452
4613
  }
4453
4614
 
4454
4615
  .foreground-neutral-100 {
4455
- color: var(--vb-neutral-100, hsl(214, 20%, 100%)) !important;
4616
+ color: var(--vb-neutral-100) !important;
4456
4617
  }
4457
4618
 
4458
4619
  .foreground-important {
@@ -4460,87 +4621,87 @@ input::-moz-placeholder {
4460
4621
  }
4461
4622
 
4462
4623
  .foreground-important-0 {
4463
- color: var(--vb-important-0, hsl(0, 80%, 0%)) !important;
4624
+ color: var(--vb-important-0) !important;
4464
4625
  }
4465
4626
 
4466
4627
  .foreground-important-5 {
4467
- color: var(--vb-important-5, hsl(0, 80%, 5%)) !important;
4628
+ color: var(--vb-important-5) !important;
4468
4629
  }
4469
4630
 
4470
4631
  .foreground-important-10 {
4471
- color: var(--vb-important-10, hsl(0, 80%, 10%)) !important;
4632
+ color: var(--vb-important-10) !important;
4472
4633
  }
4473
4634
 
4474
4635
  .foreground-important-12 {
4475
- color: var(--vb-important-12, hsl(0, 80%, 12%)) !important;
4636
+ color: var(--vb-important-12) !important;
4476
4637
  }
4477
4638
 
4478
4639
  .foreground-important-15 {
4479
- color: var(--vb-important-15, hsl(0, 80%, 15%)) !important;
4640
+ color: var(--vb-important-15) !important;
4480
4641
  }
4481
4642
 
4482
4643
  .foreground-important-20 {
4483
- color: var(--vb-important-20, hsl(0, 80%, 20%)) !important;
4644
+ color: var(--vb-important-20) !important;
4484
4645
  }
4485
4646
 
4486
4647
  .foreground-important-30 {
4487
- color: var(--vb-important-30, hsl(0, 80%, 30%)) !important;
4648
+ color: var(--vb-important-30) !important;
4488
4649
  }
4489
4650
 
4490
4651
  .foreground-important-40 {
4491
- color: var(--vb-important-40, hsl(0, 80%, 40%)) !important;
4652
+ color: var(--vb-important-40) !important;
4492
4653
  }
4493
4654
 
4494
4655
  .foreground-important-50 {
4495
- color: var(--vb-important-50, hsl(0, 80%, 50%)) !important;
4656
+ color: var(--vb-important-50) !important;
4496
4657
  }
4497
4658
 
4498
4659
  .foreground-important-60 {
4499
- color: var(--vb-important-60, hsl(0, 80%, 60%)) !important;
4660
+ color: var(--vb-important-60) !important;
4500
4661
  }
4501
4662
 
4502
4663
  .foreground-important-70 {
4503
- color: var(--vb-important-70, hsl(0, 80%, 70%)) !important;
4664
+ color: var(--vb-important-70) !important;
4504
4665
  }
4505
4666
 
4506
4667
  .foreground-important-80 {
4507
- color: var(--vb-important-80, hsl(0, 80%, 80%)) !important;
4668
+ color: var(--vb-important-80) !important;
4508
4669
  }
4509
4670
 
4510
4671
  .foreground-important-90 {
4511
- color: var(--vb-important-90, hsl(0, 80%, 90%)) !important;
4672
+ color: var(--vb-important-90) !important;
4512
4673
  }
4513
4674
 
4514
4675
  .foreground-important-95 {
4515
- color: var(--vb-important-95, hsl(0, 80%, 95%)) !important;
4676
+ color: var(--vb-important-95) !important;
4516
4677
  }
4517
4678
 
4518
4679
  .foreground-important-98 {
4519
- color: var(--vb-important-98, hsl(0, 80%, 98%)) !important;
4680
+ color: var(--vb-important-98) !important;
4520
4681
  }
4521
4682
 
4522
4683
  .foreground-important-100 {
4523
- color: var(--vb-important-100, hsl(0, 80%, 100%)) !important;
4684
+ color: var(--vb-important-100) !important;
4524
4685
  }
4525
4686
 
4526
4687
  .border {
4527
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1)) !important;
4688
+ border: 1px solid var(--vb-border-color) !important;
4528
4689
  }
4529
4690
 
4530
4691
  .border-top {
4531
- 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;
4532
4693
  }
4533
4694
 
4534
4695
  .border-bottom {
4535
- 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;
4536
4697
  }
4537
4698
 
4538
4699
  .border-left {
4539
- 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;
4540
4701
  }
4541
4702
 
4542
4703
  .border-right {
4543
- 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;
4544
4705
  }
4545
4706
 
4546
4707
  .border-none {
@@ -4564,11 +4725,11 @@ input::-moz-placeholder {
4564
4725
  }
4565
4726
 
4566
4727
  .border-color-dark {
4567
- border-color: var(--vb-border-color-dark, rgba(0, 0, 0, 0.2)) !important;
4728
+ border-color: var(--vb-border-color-dark) !important;
4568
4729
  }
4569
4730
 
4570
4731
  .border-color-darker {
4571
- border-color: var(--vb-border-color-darker, rgba(0, 0, 0, 0.3)) !important;
4732
+ border-color: var(--vb-border-color-darker) !important;
4572
4733
  }
4573
4734
 
4574
4735
  .border-color-transparent {
@@ -4688,7 +4849,7 @@ input::-moz-placeholder {
4688
4849
  }
4689
4850
 
4690
4851
  .shadow {
4691
- 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;
4692
4853
  }
4693
4854
 
4694
4855
  .shadow-flat {
@@ -4696,23 +4857,23 @@ input::-moz-placeholder {
4696
4857
  }
4697
4858
 
4698
4859
  .shadow-1 {
4699
- 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;
4700
4861
  }
4701
4862
 
4702
4863
  .shadow-2 {
4703
- 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;
4704
4865
  }
4705
4866
 
4706
4867
  .shadow-3 {
4707
- 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;
4708
4869
  }
4709
4870
 
4710
4871
  .shadow-4 {
4711
- 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;
4712
4873
  }
4713
4874
 
4714
4875
  .shadow-5 {
4715
- 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;
4716
4877
  }
4717
4878
 
4718
4879
  .display-inline {
@@ -5906,150 +6067,158 @@ input::-moz-placeholder {
5906
6067
  }
5907
6068
 
5908
6069
  :root {
5909
- --vb-primary-hs: 152deg, 60%;
6070
+ --vb-primary-hs: 152deg 60%;
5910
6071
  --vb-primary: var(--vb-primary-50);
5911
- --vb-primary-0: hsl(var(--vb-primary-hs), 0%);
5912
- --vb-primary-5: hsl(var(--vb-primary-hs), 5%);
5913
- --vb-primary-10: hsl(var(--vb-primary-hs), 10%);
5914
- --vb-primary-12: hsl(var(--vb-primary-hs), 12%);
5915
- --vb-primary-15: hsl(var(--vb-primary-hs), 15%);
5916
- --vb-primary-20: hsl(var(--vb-primary-hs), 20%);
5917
- --vb-primary-30: hsl(var(--vb-primary-hs), 30%);
5918
- --vb-primary-40: hsl(var(--vb-primary-hs), 40%);
5919
- --vb-primary-50: hsl(var(--vb-primary-hs), 50%);
5920
- --vb-primary-60: hsl(var(--vb-primary-hs), 60%);
5921
- --vb-primary-70: hsl(var(--vb-primary-hs), 70%);
5922
- --vb-primary-80: hsl(var(--vb-primary-hs), 80%);
5923
- --vb-primary-90: hsl(var(--vb-primary-hs), 90%);
5924
- --vb-primary-95: hsl(var(--vb-primary-hs), 95%);
5925
- --vb-primary-98: hsl(var(--vb-primary-hs), 98%);
5926
- --vb-primary-100: hsl(var(--vb-primary-hs), 100%);
5927
- --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%;
5928
6089
  --vb-secondary: var(--vb-secondary-50);
5929
- --vb-secondary-0: hsl(var(--vb-secondary-hs), 0%);
5930
- --vb-secondary-5: hsl(var(--vb-secondary-hs), 5%);
5931
- --vb-secondary-10: hsl(var(--vb-secondary-hs), 10%);
5932
- --vb-secondary-12: hsl(var(--vb-secondary-hs), 12%);
5933
- --vb-secondary-15: hsl(var(--vb-secondary-hs), 15%);
5934
- --vb-secondary-20: hsl(var(--vb-secondary-hs), 20%);
5935
- --vb-secondary-30: hsl(var(--vb-secondary-hs), 30%);
5936
- --vb-secondary-40: hsl(var(--vb-secondary-hs), 40%);
5937
- --vb-secondary-50: hsl(var(--vb-secondary-hs), 50%);
5938
- --vb-secondary-60: hsl(var(--vb-secondary-hs), 60%);
5939
- --vb-secondary-70: hsl(var(--vb-secondary-hs), 70%);
5940
- --vb-secondary-80: hsl(var(--vb-secondary-hs), 80%);
5941
- --vb-secondary-90: hsl(var(--vb-secondary-hs), 90%);
5942
- --vb-secondary-95: hsl(var(--vb-secondary-hs), 95%);
5943
- --vb-secondary-98: hsl(var(--vb-secondary-hs), 98%);
5944
- --vb-secondary-100: hsl(var(--vb-secondary-hs), 100%);
5945
- --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%;
5946
6107
  --vb-neutral: var(--vb-neutral-50);
5947
- --vb-neutral-0: hsl(var(--vb-neutral-hs), 0%);
5948
- --vb-neutral-5: hsl(var(--vb-neutral-hs), 5%);
5949
- --vb-neutral-10: hsl(var(--vb-neutral-hs), 10%);
5950
- --vb-neutral-12: hsl(var(--vb-neutral-hs), 12%);
5951
- --vb-neutral-15: hsl(var(--vb-neutral-hs), 15%);
5952
- --vb-neutral-20: hsl(var(--vb-neutral-hs), 20%);
5953
- --vb-neutral-30: hsl(var(--vb-neutral-hs), 30%);
5954
- --vb-neutral-40: hsl(var(--vb-neutral-hs), 40%);
5955
- --vb-neutral-50: hsl(var(--vb-neutral-hs), 50%);
5956
- --vb-neutral-60: hsl(var(--vb-neutral-hs), 60%);
5957
- --vb-neutral-70: hsl(var(--vb-neutral-hs), 70%);
5958
- --vb-neutral-80: hsl(var(--vb-neutral-hs), 80%);
5959
- --vb-neutral-90: hsl(var(--vb-neutral-hs), 90%);
5960
- --vb-neutral-95: hsl(var(--vb-neutral-hs), 95%);
5961
- --vb-neutral-98: hsl(var(--vb-neutral-hs), 98%);
5962
- --vb-neutral-100: hsl(var(--vb-neutral-hs), 100%);
5963
- --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%;
5964
6125
  --vb-important: var(--vb-important-50);
5965
- --vb-important-0: hsl(var(--vb-important-hs), 0%);
5966
- --vb-important-5: hsl(var(--vb-important-hs), 5%);
5967
- --vb-important-10: hsl(var(--vb-important-hs), 10%);
5968
- --vb-important-12: hsl(var(--vb-important-hs), 12%);
5969
- --vb-important-15: hsl(var(--vb-important-hs), 15%);
5970
- --vb-important-20: hsl(var(--vb-important-hs), 20%);
5971
- --vb-important-30: hsl(var(--vb-important-hs), 30%);
5972
- --vb-important-40: hsl(var(--vb-important-hs), 40%);
5973
- --vb-important-50: hsl(var(--vb-important-hs), 50%);
5974
- --vb-important-60: hsl(var(--vb-important-hs), 60%);
5975
- --vb-important-70: hsl(var(--vb-important-hs), 70%);
5976
- --vb-important-80: hsl(var(--vb-important-hs), 80%);
5977
- --vb-important-90: hsl(var(--vb-important-hs), 90%);
5978
- --vb-important-95: hsl(var(--vb-important-hs), 95%);
5979
- --vb-important-98: hsl(var(--vb-important-hs), 98%);
5980
- --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%);
5981
6142
  }
5982
6143
 
5983
6144
  :root, .vb-theme-root {
5984
- --vb-background: var(--vb-neutral-100, hsl(214, 20%, 100%));
5985
- --vb-background-dark: var(--vb-neutral-98, hsl(214, 20%, 98%));
5986
- --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%);
5987
6149
  --vb-background-hover: rgba(0, 0, 0, 0.05);
5988
6150
  --vb-background-focus: rgba(0, 0, 0, 0.05);
5989
6151
  --vb-background-active: rgba(0, 0, 0, 0.1);
5990
- --vb-foreground: var(--vb-neutral-20, hsl(214, 20%, 20%));
5991
- --vb-foreground-light: var(--vb-neutral-40, hsl(214, 20%, 40%));
5992
- --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);
5993
6156
  --vb-border-color: rgba(0, 0, 0, 0.1);
5994
6157
  --vb-border-color-dark: rgba(0, 0, 0, 0.2);
5995
6158
  --vb-border-color-darker: rgba(0, 0, 0, 0.3);
5996
- --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%);
5997
- --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);
5998
6161
  color-scheme: light;
5999
6162
  }
6000
6163
  @media (prefers-color-scheme: dark) {
6001
6164
  :root, .vb-theme-root {
6002
- --vb-background: var(--vb-neutral-10, hsl(214, 20%, 10%));
6003
- --vb-background-dark: var(--vb-neutral-12, hsl(214, 20%, 12%));
6004
- --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%);
6005
6169
  --vb-background-hover: rgba(255, 255, 255, 0.05);
6006
6170
  --vb-background-focus: rgba(255, 255, 255, 0.05);
6007
- --vb-background-active: rgba(255, 255, 255, 0.1);
6008
- --vb-foreground: var(--vb-neutral-90, hsl(214, 20%, 90%));
6009
- --vb-foreground-light: var(--vb-neutral-70, hsl(214, 20%, 70%));
6010
- --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);
6011
6176
  --vb-border-color: rgba(255, 255, 255, 0.1);
6012
6177
  --vb-border-color-dark: rgba(255, 255, 255, 0.2);
6013
6178
  --vb-border-color-darker: rgba(255, 255, 255, 0.3);
6014
- --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 0%, 20%);
6015
- --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);
6016
6181
  color-scheme: dark;
6017
6182
  }
6018
6183
  }
6019
6184
 
6020
6185
  .vb-theme-light {
6021
- --vb-background: var(--vb-neutral-100, hsl(214, 20%, 100%));
6022
- --vb-background-dark: var(--vb-neutral-98, hsl(214, 20%, 98%));
6023
- --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%);
6024
6190
  --vb-background-hover: rgba(0, 0, 0, 0.05);
6025
6191
  --vb-background-focus: rgba(0, 0, 0, 0.05);
6026
6192
  --vb-background-active: rgba(0, 0, 0, 0.1);
6027
- --vb-foreground: var(--vb-neutral-20, hsl(214, 20%, 20%));
6028
- --vb-foreground-light: var(--vb-neutral-40, hsl(214, 20%, 40%));
6029
- --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);
6030
6197
  --vb-border-color: rgba(0, 0, 0, 0.1);
6031
6198
  --vb-border-color-dark: rgba(0, 0, 0, 0.2);
6032
6199
  --vb-border-color-darker: rgba(0, 0, 0, 0.3);
6033
- --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%);
6034
- --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);
6035
6202
  color-scheme: light;
6036
6203
  }
6037
6204
 
6038
6205
  .vb-theme-dark {
6039
- --vb-background: var(--vb-neutral-10, hsl(214, 20%, 10%));
6040
- --vb-background-dark: var(--vb-neutral-12, hsl(214, 20%, 12%));
6041
- --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%);
6042
6210
  --vb-background-hover: rgba(255, 255, 255, 0.05);
6043
6211
  --vb-background-focus: rgba(255, 255, 255, 0.05);
6044
- --vb-background-active: rgba(255, 255, 255, 0.1);
6045
- --vb-foreground: var(--vb-neutral-90, hsl(214, 20%, 90%));
6046
- --vb-foreground-light: var(--vb-neutral-70, hsl(214, 20%, 70%));
6047
- --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);
6048
6217
  --vb-border-color: rgba(255, 255, 255, 0.1);
6049
6218
  --vb-border-color-dark: rgba(255, 255, 255, 0.2);
6050
6219
  --vb-border-color-darker: rgba(255, 255, 255, 0.3);
6051
- --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 0%, 20%);
6052
- --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);
6053
6222
  color-scheme: dark;
6054
6223
  }
6055
6224