vrembem 4.0.0-next.3 → 4.0.0-next.4

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.
package/dev/index.css CHANGED
@@ -1,91 +1,3 @@
1
- :root {
2
- --vrembem-variable-prefix: vb-;
3
- }
4
-
5
- :root {
6
- --vb-breakpoint-xs: 480px;
7
- --vb-breakpoint-sm: 620px;
8
- --vb-breakpoint-md: 760px;
9
- --vb-breakpoint-lg: 990px;
10
- --vb-breakpoint-xl: 1380px;
11
- }
12
-
13
- :root {
14
- --vb-primary-hs: 152deg, 60%;
15
- --vb-primary: var(--vb-primary-50);
16
- --vb-primary-0: hsl(var(--vb-primary-hs), 0%);
17
- --vb-primary-10: hsl(var(--vb-primary-hs), 10%);
18
- --vb-primary-20: hsl(var(--vb-primary-hs), 20%);
19
- --vb-primary-30: hsl(var(--vb-primary-hs), 30%);
20
- --vb-primary-40: hsl(var(--vb-primary-hs), 40%);
21
- --vb-primary-50: hsl(var(--vb-primary-hs), 50%);
22
- --vb-primary-60: hsl(var(--vb-primary-hs), 60%);
23
- --vb-primary-70: hsl(var(--vb-primary-hs), 70%);
24
- --vb-primary-80: hsl(var(--vb-primary-hs), 80%);
25
- --vb-primary-90: hsl(var(--vb-primary-hs), 90%);
26
- --vb-primary-95: hsl(var(--vb-primary-hs), 95%);
27
- --vb-primary-98: hsl(var(--vb-primary-hs), 98%);
28
- --vb-primary-100: hsl(var(--vb-primary-hs), 100%);
29
- --vb-secondary-hs: 214deg, 50%;
30
- --vb-secondary: var(--vb-secondary-50);
31
- --vb-secondary-0: hsl(var(--vb-secondary-hs), 0%);
32
- --vb-secondary-10: hsl(var(--vb-secondary-hs), 10%);
33
- --vb-secondary-20: hsl(var(--vb-secondary-hs), 20%);
34
- --vb-secondary-30: hsl(var(--vb-secondary-hs), 30%);
35
- --vb-secondary-40: hsl(var(--vb-secondary-hs), 40%);
36
- --vb-secondary-50: hsl(var(--vb-secondary-hs), 50%);
37
- --vb-secondary-60: hsl(var(--vb-secondary-hs), 60%);
38
- --vb-secondary-70: hsl(var(--vb-secondary-hs), 70%);
39
- --vb-secondary-80: hsl(var(--vb-secondary-hs), 80%);
40
- --vb-secondary-90: hsl(var(--vb-secondary-hs), 90%);
41
- --vb-secondary-95: hsl(var(--vb-secondary-hs), 95%);
42
- --vb-secondary-98: hsl(var(--vb-secondary-hs), 98%);
43
- --vb-secondary-100: hsl(var(--vb-secondary-hs), 100%);
44
- --vb-neutral-hs: 214deg, 20%;
45
- --vb-neutral: var(--vb-neutral-50);
46
- --vb-neutral-0: hsl(var(--vb-neutral-hs), 0%);
47
- --vb-neutral-10: hsl(var(--vb-neutral-hs), 10%);
48
- --vb-neutral-20: hsl(var(--vb-neutral-hs), 20%);
49
- --vb-neutral-30: hsl(var(--vb-neutral-hs), 30%);
50
- --vb-neutral-40: hsl(var(--vb-neutral-hs), 40%);
51
- --vb-neutral-50: hsl(var(--vb-neutral-hs), 50%);
52
- --vb-neutral-60: hsl(var(--vb-neutral-hs), 60%);
53
- --vb-neutral-70: hsl(var(--vb-neutral-hs), 70%);
54
- --vb-neutral-80: hsl(var(--vb-neutral-hs), 80%);
55
- --vb-neutral-90: hsl(var(--vb-neutral-hs), 90%);
56
- --vb-neutral-95: hsl(var(--vb-neutral-hs), 95%);
57
- --vb-neutral-98: hsl(var(--vb-neutral-hs), 98%);
58
- --vb-neutral-100: hsl(var(--vb-neutral-hs), 100%);
59
- --vb-important-hs: 0deg, 80%;
60
- --vb-important: var(--vb-important-50);
61
- --vb-important-0: hsl(var(--vb-important-hs), 0%);
62
- --vb-important-10: hsl(var(--vb-important-hs), 10%);
63
- --vb-important-20: hsl(var(--vb-important-hs), 20%);
64
- --vb-important-30: hsl(var(--vb-important-hs), 30%);
65
- --vb-important-40: hsl(var(--vb-important-hs), 40%);
66
- --vb-important-50: hsl(var(--vb-important-hs), 50%);
67
- --vb-important-60: hsl(var(--vb-important-hs), 60%);
68
- --vb-important-70: hsl(var(--vb-important-hs), 70%);
69
- --vb-important-80: hsl(var(--vb-important-hs), 80%);
70
- --vb-important-90: hsl(var(--vb-important-hs), 90%);
71
- --vb-important-95: hsl(var(--vb-important-hs), 95%);
72
- --vb-important-98: hsl(var(--vb-important-hs), 98%);
73
- --vb-important-100: hsl(var(--vb-important-hs), 100%);
74
- }
75
-
76
- :root {
77
- --vb-background: var(--vb-neutral-100, hsl(214, 20%, 100%));
78
- --vb-background-dark: var(--vb-neutral-98, hsl(214, 20%, 98%));
79
- --vb-background-darker: var(--vb-neutral-95, hsl(214, 20%, 95%));
80
- --vb-foreground: var(--vb-neutral-20, hsl(214, 20%, 20%));
81
- --vb-foreground-light: var(--vb-neutral-40, hsl(214, 20%, 40%));
82
- --vb-foreground-lighter: var(--vb-neutral-60, hsl(214, 20%, 60%));
83
- --vb-border-color: rgba(0, 0, 0, 0.1);
84
- --vb-border-color-dark: rgba(0, 0, 0, 0.2);
85
- --vb-border-color-darker: rgba(0, 0, 0, 0.3);
86
- --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%);
87
- }
88
-
89
1
  *,
90
2
  *::before,
91
3
  *::after {
@@ -102,7 +14,7 @@ body {
102
14
  html {
103
15
  box-sizing: border-box;
104
16
  font-size: 16px;
105
- line-height: 1.5;
17
+ line-height: 1.625;
106
18
  -moz-osx-font-smoothing: grayscale;
107
19
  -webkit-text-size-adjust: 100%;
108
20
  }
@@ -265,7 +177,7 @@ input::-moz-placeholder {
265
177
  .code {
266
178
  color: var(--vb-secondary-50, hsl(214, 50%, 50%));
267
179
  font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
268
- font-size: 0.9em;
180
+ font-size: 16px;
269
181
  word-break: break-word;
270
182
  }
271
183
 
@@ -331,6 +243,8 @@ input::-moz-placeholder {
331
243
  .link {
332
244
  color: var(--vb-primary-50, hsl(152, 60%, 50%));
333
245
  text-decoration: underline;
246
+ text-decoration-thickness: 1px;
247
+ text-underline-offset: 2px;
334
248
  }
335
249
  .link:hover {
336
250
  color: var(--vb-primary-40, hsl(152, 60%, 40%));
@@ -372,7 +286,7 @@ input::-moz-placeholder {
372
286
  border: none;
373
287
  background: none;
374
288
  color: inherit;
375
- font-size: 1em;
289
+ font-size: 16px;
376
290
  }
377
291
 
378
292
  .scroll-box {
@@ -389,13 +303,18 @@ input::-moz-placeholder {
389
303
  border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
390
304
  }
391
305
 
306
+ .type {
307
+ color: var(--vb-foreground-light, var(--vb-neutral-40, hsl(214, 20%, 40%)));
308
+ font-size: 1.125rem;
309
+ line-height: 1.7778;
310
+ }
392
311
  .type h1,
393
312
  .type h2,
394
313
  .type h3,
395
314
  .type h4,
396
315
  .type h5,
397
316
  .type h6 {
398
- color: inherit;
317
+ color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
399
318
  font-family: inherit;
400
319
  font-weight: 600;
401
320
  line-height: 1.375;
@@ -424,6 +343,8 @@ input::-moz-placeholder {
424
343
  .type > :not(div) a {
425
344
  color: var(--vb-primary-50, hsl(152, 60%, 50%));
426
345
  text-decoration: underline;
346
+ text-decoration-thickness: 1px;
347
+ text-underline-offset: 2px;
427
348
  }
428
349
  .type > a:hover,
429
350
  .type > :not(div) a:hover {
@@ -441,7 +362,7 @@ input::-moz-placeholder {
441
362
  .type > :not(div) code {
442
363
  color: var(--vb-secondary-50, hsl(214, 50%, 50%));
443
364
  font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
444
- font-size: 0.9em;
365
+ font-size: 16px;
445
366
  word-break: break-word;
446
367
  }
447
368
  .type > hr {
@@ -497,7 +418,7 @@ input::-moz-placeholder {
497
418
  border: none;
498
419
  background: none;
499
420
  color: inherit;
500
- font-size: 1em;
421
+ font-size: 16px;
501
422
  }
502
423
 
503
424
  .button {
@@ -521,7 +442,7 @@ input::-moz-placeholder {
521
442
  font-family: inherit;
522
443
  font-size: 1em;
523
444
  font-weight: inherit;
524
- line-height: 1.5;
445
+ line-height: 1.625;
525
446
  text-decoration: none;
526
447
  white-space: nowrap;
527
448
  cursor: pointer;
@@ -745,7 +666,7 @@ input::-moz-placeholder {
745
666
  height: 3.125rem;
746
667
  padding: calc(0.648rem - 1px) 1.5rem;
747
668
  font-size: 1.125rem;
748
- line-height: 1.625;
669
+ line-height: 1.875;
749
670
  }
750
671
 
751
672
  .card {
@@ -816,7 +737,7 @@ input::-moz-placeholder {
816
737
  flex-grow: 1;
817
738
  font-size: 1.125rem;
818
739
  font-weight: 600;
819
- line-height: 1.625;
740
+ line-height: 1.875;
820
741
  }
821
742
 
822
743
  .card__background,
@@ -1017,9 +938,10 @@ input::-moz-placeholder {
1017
938
  flex-direction: column;
1018
939
  overflow: auto;
1019
940
  border-radius: 0.25rem;
1020
- background: white;
941
+ background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
1021
942
  background-clip: padding-box;
1022
943
  box-shadow: 0 8px 18px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
944
+ color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
1023
945
  -webkit-overflow-scrolling: touch;
1024
946
  }
1025
947
 
@@ -1036,7 +958,7 @@ input::-moz-placeholder {
1036
958
  z-index: 1;
1037
959
  display: flex;
1038
960
  align-items: center;
1039
- background: white;
961
+ background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
1040
962
  vertical-align: middle;
1041
963
  }
1042
964
  .dialog__header > * + *,
@@ -1065,7 +987,7 @@ input::-moz-placeholder {
1065
987
  flex-grow: 1;
1066
988
  font-size: 1.125rem;
1067
989
  font-weight: 600;
1068
- line-height: 1.625;
990
+ line-height: 1.875;
1069
991
  }
1070
992
 
1071
993
  .dialog > .dialog__close {
@@ -1077,6 +999,15 @@ input::-moz-placeholder {
1077
999
  padding-right: 3.5em;
1078
1000
  }
1079
1001
 
1002
+ :root {
1003
+ --vrembem-prefix: vb-;
1004
+ }
1005
+
1006
+ :root {
1007
+ --vb-drawer-transition-duration: var(--vb-transition-duration, 0.3s);
1008
+ --vb-drawer-transition-timing-function: var(--vb-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
1009
+ }
1010
+
1080
1011
  /**
1081
1012
  * Required structure styles
1082
1013
  */
@@ -1150,11 +1081,17 @@ input::-moz-placeholder {
1150
1081
  overflow: visible;
1151
1082
  }
1152
1083
 
1084
+ .drawer.is-opening,
1085
+ .drawer.is-closing {
1086
+ transition-property: background-color, opacity, transform;
1087
+ transition-duration: var(--vb-drawer-transition-duration);
1088
+ transition-timing-function: var(--vb-drawer-transition-timing-function);
1089
+ }
1153
1090
  .drawer.is-opening .drawer__dialog,
1154
1091
  .drawer.is-closing .drawer__dialog {
1155
1092
  transition-property: opacity, transform;
1156
- transition-duration: 0.3s;
1157
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1093
+ transition-duration: var(--vb-drawer-transition-duration);
1094
+ transition-timing-function: var(--vb-drawer-transition-timing-function);
1158
1095
  }
1159
1096
 
1160
1097
  .drawer.is-opening .drawer__dialog,
@@ -1170,21 +1107,86 @@ input::-moz-placeholder {
1170
1107
  opacity: 0;
1171
1108
  }
1172
1109
 
1110
+ /**
1111
+ * Drawer slide transition
1112
+ */
1113
+ .drawer {
1114
+ left: 0;
1115
+ transform: translateX(-100%);
1116
+ }
1117
+ .drawer.is-opening,
1118
+ .drawer.is-opened {
1119
+ transform: translateX(0);
1120
+ }
1121
+
1122
+ .drawer.is-closing {
1123
+ transform: translateX(-100%);
1124
+ }
1125
+
1126
+ /**
1127
+ * Drawer switched slide transition
1128
+ */
1129
+ .drawer_switch {
1130
+ right: 0;
1131
+ left: auto;
1132
+ transform: translateX(100%);
1133
+ }
1134
+ .drawer_switch.is-closing {
1135
+ transform: translateX(100%);
1136
+ }
1137
+
1138
+ /**
1139
+ * Drawer main margins
1140
+ */
1141
+ .drawer:not(.drawer_modal, .drawer_switch).is-opening ~ .drawer-main, .drawer:not(.drawer_modal, .drawer_switch).is-opened ~ .drawer-main {
1142
+ margin-left: 18em;
1143
+ }
1144
+
1145
+ .drawer.drawer_switch:not(.drawer_modal).is-opening ~ .drawer-main, .drawer.drawer_switch:not(.drawer_modal).is-opened ~ .drawer-main {
1146
+ margin-right: 18em;
1147
+ }
1148
+
1149
+ /**
1150
+ * Drawer modal styles
1151
+ */
1173
1152
  .drawer_modal {
1174
1153
  z-index: 900;
1154
+ right: auto;
1155
+ left: 0;
1175
1156
  width: 0;
1176
1157
  height: 0;
1177
1158
  overflow: hidden;
1178
- background-color: rgba(255, 255, 255, 0);
1159
+ transform: translateX(0);
1160
+ }
1161
+ .drawer_modal::before {
1162
+ content: "";
1163
+ position: absolute;
1164
+ inset: 0;
1165
+ width: 100%;
1166
+ height: 100%;
1167
+ background-color: var(--vb-neutral-10, hsl(214, 20%, 10%));
1168
+ opacity: 0;
1179
1169
  }
1180
1170
  .drawer_modal .drawer__dialog {
1181
1171
  position: absolute;
1182
1172
  z-index: 901;
1173
+ left: 0;
1183
1174
  width: 18em;
1184
1175
  max-width: 80%;
1176
+ transform: translateX(-100%);
1185
1177
  background-color: white;
1186
1178
  box-shadow: 0 12px 24px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
1187
1179
  }
1180
+ .drawer_modal.drawer_switch {
1181
+ right: auto;
1182
+ left: 0;
1183
+ transform: translateX(0);
1184
+ }
1185
+ .drawer_modal.drawer_switch .drawer__dialog {
1186
+ right: 0;
1187
+ left: auto;
1188
+ transform: translateX(100%);
1189
+ }
1188
1190
  .drawer_modal .dialog__header,
1189
1191
  .drawer_modal .dialog__footer {
1190
1192
  background: white;
@@ -1193,6 +1195,9 @@ input::-moz-placeholder {
1193
1195
  background: white;
1194
1196
  }
1195
1197
 
1198
+ /**
1199
+ * Drawer modal transition
1200
+ */
1196
1201
  .drawer_modal.is-opening,
1197
1202
  .drawer_modal.is-opened,
1198
1203
  .drawer_modal.is-closing {
@@ -1201,56 +1206,35 @@ input::-moz-placeholder {
1201
1206
  height: 100%;
1202
1207
  }
1203
1208
 
1204
- .drawer_modal.is-opening,
1205
- .drawer_modal.is-closing {
1206
- transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1209
+ .drawer_modal.is-opening::before,
1210
+ .drawer_modal.is-closing::before {
1211
+ transition: opacity var(--vb-drawer-transition-duration) var(--vb-drawer-transition-timing-function);
1207
1212
  }
1208
1213
 
1209
1214
  .drawer_modal.is-opening,
1210
1215
  .drawer_modal.is-opened {
1211
- background-color: rgba(var(--vb-neutral-10, hsl(214, 20%, 10%)), 0.8);
1212
- }
1213
-
1214
- .drawer_modal.is-closing {
1215
- background-color: rgba(var(--vb-neutral-10, hsl(214, 20%, 10%)), 0);
1216
- }
1217
-
1218
- .drawer:not(.drawer_switch) {
1219
- left: 0;
1220
- }
1221
- .drawer:not(.drawer_switch) .drawer__dialog {
1222
- left: 0;
1223
- transform: translateX(-100%);
1224
- }
1225
-
1226
- .drawer_switch {
1227
- right: 0;
1228
- }
1229
- .drawer_switch .drawer__dialog {
1230
- right: 0;
1231
- transform: translateX(100%);
1216
+ transform: translateX(0);
1232
1217
  }
1233
-
1234
- .drawer:not(.drawer_switch).is-opening:not(.drawer_modal) ~ .drawer-main,
1235
- .drawer:not(.drawer_switch).is-opened:not(.drawer_modal) ~ .drawer-main {
1236
- margin-left: 18em;
1218
+ .drawer_modal.is-opening::before,
1219
+ .drawer_modal.is-opened::before {
1220
+ opacity: 0.8;
1237
1221
  }
1238
-
1239
- .drawer_switch.is-opening:not(.drawer_modal) ~ .drawer-main,
1240
- .drawer_switch.is-opened:not(.drawer_modal) ~ .drawer-main {
1241
- margin-right: 18em;
1222
+ .drawer_modal.is-opening .drawer__dialog,
1223
+ .drawer_modal.is-opened .drawer__dialog {
1224
+ transform: translateX(0);
1242
1225
  }
1243
1226
 
1244
- .drawer.is-opening .drawer__dialog,
1245
- .drawer.is-opened .drawer__dialog {
1227
+ .drawer_modal.is-closing {
1246
1228
  transform: translateX(0);
1247
1229
  }
1248
-
1249
- .drawer:not(.drawer_switch).is-closing .drawer__dialog {
1230
+ .drawer_modal.is-closing .drawer__dialog {
1250
1231
  transform: translateX(-100%);
1251
1232
  }
1252
1233
 
1253
- .drawer_switch.is-closing .drawer__dialog {
1234
+ .drawer_modal.drawer_switch.is-closing {
1235
+ transform: translateX(0);
1236
+ }
1237
+ .drawer_modal.drawer_switch.is-closing .drawer__dialog {
1254
1238
  transform: translateX(100%);
1255
1239
  }
1256
1240
 
@@ -1846,39 +1830,42 @@ input::-moz-placeholder {
1846
1830
  }
1847
1831
  .icon {
1848
1832
  stroke: currentcolor;
1849
- stroke-width: 2px;
1833
+ stroke-width: 2;
1850
1834
  fill: none;
1851
1835
  display: inline-block;
1852
1836
  box-sizing: content-box;
1853
1837
  flex-shrink: 0;
1854
1838
  width: 1em;
1855
1839
  height: 1em;
1856
- stroke-width: 2px;
1857
1840
  stroke-linecap: round;
1858
1841
  stroke-linejoin: round;
1859
- font-size: 1.25em;
1842
+ font-size: 1.5em;
1860
1843
  vertical-align: top;
1861
1844
  }
1862
1845
 
1863
1846
  .icon_size_xs {
1847
+ stroke-width: 3.5;
1864
1848
  font-size: 0.75em;
1865
1849
  }
1866
1850
 
1867
1851
  .icon_size_sm {
1868
- font-size: 1em;
1852
+ stroke-width: 2.5;
1853
+ font-size: 1.125em;
1869
1854
  }
1870
1855
 
1871
1856
  .icon_size_lg {
1872
- font-size: 1.75em;
1857
+ stroke-width: 1.75;
1858
+ font-size: 2em;
1873
1859
  }
1874
1860
 
1875
1861
  .icon_size_xl {
1876
- font-size: 2.25em;
1862
+ stroke-width: 1.3;
1863
+ font-size: 3em;
1877
1864
  }
1878
1865
 
1879
1866
  .icon_style_stroke {
1880
1867
  stroke: currentcolor;
1881
- stroke-width: 2px;
1868
+ stroke-width: 2;
1882
1869
  fill: none;
1883
1870
  }
1884
1871
 
@@ -1906,7 +1893,7 @@ input::-moz-placeholder {
1906
1893
  color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
1907
1894
  font-family: blinkmacsystemfont, -apple-system, system-ui, "Segoe UI", "Roboto", "Helvetica Neue", arial, sans-serif;
1908
1895
  font-size: 16px;
1909
- line-height: 1.5;
1896
+ line-height: 1.625;
1910
1897
  -moz-appearance: none;
1911
1898
  -webkit-appearance: none;
1912
1899
  appearance: none;
@@ -1944,7 +1931,7 @@ input::-moz-placeholder {
1944
1931
  height: 3.125rem;
1945
1932
  padding: calc(0.648rem - 1px);
1946
1933
  font-size: 1.125rem;
1947
- line-height: 1.625;
1934
+ line-height: 1.875;
1948
1935
  }
1949
1936
 
1950
1937
  .input_error {
@@ -2205,7 +2192,7 @@ input::-moz-placeholder {
2205
2192
  flex: 0 0 auto;
2206
2193
  align-items: center;
2207
2194
  max-width: 30%;
2208
- min-height: 1.5em;
2195
+ min-height: 1.625em;
2209
2196
  }
2210
2197
 
2211
2198
  .media_gap_none > * + * {
@@ -2576,14 +2563,18 @@ input::-moz-placeholder {
2576
2563
  padding: 0.5em;
2577
2564
  }
2578
2565
  .menu__action:hover {
2579
- background: rgba(0, 0, 0, 0.05);
2566
+ background: var(--vb-background-hover, rgba(0, 0, 0, 0.05));
2580
2567
  }
2581
2568
  .menu__action:focus {
2582
2569
  outline: none;
2583
- background: rgba(0, 0, 0, 0.05);
2570
+ background: var(--vb-background-focus, rgba(0, 0, 0, 0.05));
2571
+ }
2572
+ .menu__action:focus-visible {
2573
+ z-index: 1;
2574
+ outline: 2px solid var(--vb-focus-visible, var(--vb-primary-50, hsl(152, 60%, 50%)));
2584
2575
  }
2585
2576
  .menu__action:active {
2586
- background: rgba(0, 0, 0, 0.1);
2577
+ background: var(--vb-background-active, rgba(0, 0, 0, 0.1));
2587
2578
  }
2588
2579
  .menu__action.is-active, .menu__action.is-active[disabled] {
2589
2580
  background: none;
@@ -2819,7 +2810,7 @@ input::-moz-placeholder {
2819
2810
 
2820
2811
  .menu_size_lg {
2821
2812
  font-size: 1.125rem;
2822
- line-height: 1.625;
2813
+ line-height: 1.875;
2823
2814
  }
2824
2815
  .menu_size_lg .menu__action {
2825
2816
  min-width: 3.125rem;
@@ -2830,6 +2821,11 @@ input::-moz-placeholder {
2830
2821
  padding: 0.648rem;
2831
2822
  }
2832
2823
 
2824
+ :root {
2825
+ --vb-modal-transition-duration: var(--vb-transition-duration, 0.3s);
2826
+ --vb-modal-transition-timing-function: var(--vb-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
2827
+ }
2828
+
2833
2829
  .modal {
2834
2830
  position: fixed;
2835
2831
  z-index: 1000;
@@ -2860,8 +2856,8 @@ input::-moz-placeholder {
2860
2856
  overflow: auto;
2861
2857
  transform: translateY(-5em);
2862
2858
  transition-property: outline;
2863
- transition-duration: 0.3s;
2864
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2859
+ transition-duration: var(--vb-modal-transition-duration);
2860
+ transition-timing-function: var(--vb-modal-transition-timing-function);
2865
2861
  outline: 0 solid transparent;
2866
2862
  box-shadow: 0 12px 24px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
2867
2863
  opacity: 0;
@@ -2888,13 +2884,13 @@ input::-moz-placeholder {
2888
2884
 
2889
2885
  .modal.is-opening::before,
2890
2886
  .modal.is-closing::before {
2891
- transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
2887
+ transition: opacity var(--vb-modal-transition-duration) var(--vb-modal-transition-timing-function);
2892
2888
  }
2893
2889
  .modal.is-opening .modal__dialog,
2894
2890
  .modal.is-closing .modal__dialog {
2895
2891
  transition-property: opacity, transform;
2896
- transition-duration: 0.3s;
2897
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2892
+ transition-duration: var(--vb-modal-transition-duration);
2893
+ transition-timing-function: var(--vb-modal-transition-timing-function);
2898
2894
  }
2899
2895
 
2900
2896
  .modal.is-opening::before,
@@ -2920,7 +2916,7 @@ input::-moz-placeholder {
2920
2916
  transform: scale(1);
2921
2917
  }
2922
2918
  .modal_full.is-closing .modal__dialog {
2923
- transform: scale(1);
2919
+ transform: scale(0.75);
2924
2920
  }
2925
2921
 
2926
2922
  .modal_pos_top {
@@ -2988,8 +2984,11 @@ input::-moz-placeholder {
2988
2984
 
2989
2985
  .notice {
2990
2986
  padding: 1em;
2987
+ border: var(--vb-notice-border);
2991
2988
  border-radius: 0.25rem;
2992
- background: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%)));
2989
+ background: var(--vb-notice-background, var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%))));
2990
+ box-shadow: var(--vb-notice-shadow);
2991
+ color: var(--vb-notice-foreground, var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%))));
2993
2992
  }
2994
2993
  .notice > * + * {
2995
2994
  margin-top: 0.5em;
@@ -2998,7 +2997,7 @@ input::-moz-placeholder {
2998
2997
  .notice__title {
2999
2998
  font-size: 1.125rem;
3000
2999
  font-weight: 600;
3001
- line-height: 1.625;
3000
+ line-height: 1.875;
3002
3001
  }
3003
3002
 
3004
3003
  .notice_theme_primary {
@@ -3021,6 +3020,15 @@ input::-moz-placeholder {
3021
3020
  color: var(--vb-important-30, hsl(0, 80%, 30%));
3022
3021
  }
3023
3022
 
3023
+ :root, .vb-theme-root {
3024
+ --vb-notice-background: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%)));
3025
+ --vb-notice-foreground: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
3026
+ }
3027
+ .vb-theme-light {
3028
+ --vb-notice-background: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%)));
3029
+ --vb-notice-foreground: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
3030
+ }
3031
+
3024
3032
  :root {
3025
3033
  --vb-popover-offset: 8;
3026
3034
  --vb-popover-overflow-padding: 10;
@@ -3039,9 +3047,10 @@ input::-moz-placeholder {
3039
3047
  margin: calc(var(--vb-popover-offset) * 1px) 0 0;
3040
3048
  padding: 0.5em;
3041
3049
  border-radius: 0.25rem;
3042
- background: white;
3050
+ background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
3043
3051
  background-clip: padding-box;
3044
3052
  box-shadow: 0 2px 6px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
3053
+ color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
3045
3054
  font-size: 0.875rem;
3046
3055
  }
3047
3056
  .popover::before {
@@ -3165,7 +3174,6 @@ input::-moz-placeholder {
3165
3174
  padding: 0.5rem 0.75rem;
3166
3175
  background: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
3167
3176
  color: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
3168
- font-size: 0.75em;
3169
3177
  }
3170
3178
 
3171
3179
  .radio {
@@ -4052,10 +4060,22 @@ input::-moz-placeholder {
4052
4060
  background-color: var(--vb-primary-0, hsl(152, 60%, 0%)) !important;
4053
4061
  }
4054
4062
 
4063
+ .background-primary-5 {
4064
+ background-color: var(--vb-primary-5, hsl(152, 60%, 5%)) !important;
4065
+ }
4066
+
4055
4067
  .background-primary-10 {
4056
4068
  background-color: var(--vb-primary-10, hsl(152, 60%, 10%)) !important;
4057
4069
  }
4058
4070
 
4071
+ .background-primary-12 {
4072
+ background-color: var(--vb-primary-12, hsl(152, 60%, 12%)) !important;
4073
+ }
4074
+
4075
+ .background-primary-15 {
4076
+ background-color: var(--vb-primary-15, hsl(152, 60%, 15%)) !important;
4077
+ }
4078
+
4059
4079
  .background-primary-20 {
4060
4080
  background-color: var(--vb-primary-20, hsl(152, 60%, 20%)) !important;
4061
4081
  }
@@ -4108,10 +4128,22 @@ input::-moz-placeholder {
4108
4128
  background-color: var(--vb-secondary-0, hsl(214, 50%, 0%)) !important;
4109
4129
  }
4110
4130
 
4131
+ .background-secondary-5 {
4132
+ background-color: var(--vb-secondary-5, hsl(214, 50%, 5%)) !important;
4133
+ }
4134
+
4111
4135
  .background-secondary-10 {
4112
4136
  background-color: var(--vb-secondary-10, hsl(214, 50%, 10%)) !important;
4113
4137
  }
4114
4138
 
4139
+ .background-secondary-12 {
4140
+ background-color: var(--vb-secondary-12, hsl(214, 50%, 12%)) !important;
4141
+ }
4142
+
4143
+ .background-secondary-15 {
4144
+ background-color: var(--vb-secondary-15, hsl(214, 50%, 15%)) !important;
4145
+ }
4146
+
4115
4147
  .background-secondary-20 {
4116
4148
  background-color: var(--vb-secondary-20, hsl(214, 50%, 20%)) !important;
4117
4149
  }
@@ -4164,10 +4196,22 @@ input::-moz-placeholder {
4164
4196
  background-color: var(--vb-neutral-0, hsl(214, 20%, 0%)) !important;
4165
4197
  }
4166
4198
 
4199
+ .background-neutral-5 {
4200
+ background-color: var(--vb-neutral-5, hsl(214, 20%, 5%)) !important;
4201
+ }
4202
+
4167
4203
  .background-neutral-10 {
4168
4204
  background-color: var(--vb-neutral-10, hsl(214, 20%, 10%)) !important;
4169
4205
  }
4170
4206
 
4207
+ .background-neutral-12 {
4208
+ background-color: var(--vb-neutral-12, hsl(214, 20%, 12%)) !important;
4209
+ }
4210
+
4211
+ .background-neutral-15 {
4212
+ background-color: var(--vb-neutral-15, hsl(214, 20%, 15%)) !important;
4213
+ }
4214
+
4171
4215
  .background-neutral-20 {
4172
4216
  background-color: var(--vb-neutral-20, hsl(214, 20%, 20%)) !important;
4173
4217
  }
@@ -4220,10 +4264,22 @@ input::-moz-placeholder {
4220
4264
  background-color: var(--vb-important-0, hsl(0, 80%, 0%)) !important;
4221
4265
  }
4222
4266
 
4267
+ .background-important-5 {
4268
+ background-color: var(--vb-important-5, hsl(0, 80%, 5%)) !important;
4269
+ }
4270
+
4223
4271
  .background-important-10 {
4224
4272
  background-color: var(--vb-important-10, hsl(0, 80%, 10%)) !important;
4225
4273
  }
4226
4274
 
4275
+ .background-important-12 {
4276
+ background-color: var(--vb-important-12, hsl(0, 80%, 12%)) !important;
4277
+ }
4278
+
4279
+ .background-important-15 {
4280
+ background-color: var(--vb-important-15, hsl(0, 80%, 15%)) !important;
4281
+ }
4282
+
4227
4283
  .background-important-20 {
4228
4284
  background-color: var(--vb-important-20, hsl(0, 80%, 20%)) !important;
4229
4285
  }
@@ -4300,10 +4356,22 @@ input::-moz-placeholder {
4300
4356
  color: var(--vb-primary-0, hsl(152, 60%, 0%)) !important;
4301
4357
  }
4302
4358
 
4359
+ .foreground-primary-5 {
4360
+ color: var(--vb-primary-5, hsl(152, 60%, 5%)) !important;
4361
+ }
4362
+
4303
4363
  .foreground-primary-10 {
4304
4364
  color: var(--vb-primary-10, hsl(152, 60%, 10%)) !important;
4305
4365
  }
4306
4366
 
4367
+ .foreground-primary-12 {
4368
+ color: var(--vb-primary-12, hsl(152, 60%, 12%)) !important;
4369
+ }
4370
+
4371
+ .foreground-primary-15 {
4372
+ color: var(--vb-primary-15, hsl(152, 60%, 15%)) !important;
4373
+ }
4374
+
4307
4375
  .foreground-primary-20 {
4308
4376
  color: var(--vb-primary-20, hsl(152, 60%, 20%)) !important;
4309
4377
  }
@@ -4356,10 +4424,22 @@ input::-moz-placeholder {
4356
4424
  color: var(--vb-secondary-0, hsl(214, 50%, 0%)) !important;
4357
4425
  }
4358
4426
 
4427
+ .foreground-secondary-5 {
4428
+ color: var(--vb-secondary-5, hsl(214, 50%, 5%)) !important;
4429
+ }
4430
+
4359
4431
  .foreground-secondary-10 {
4360
4432
  color: var(--vb-secondary-10, hsl(214, 50%, 10%)) !important;
4361
4433
  }
4362
4434
 
4435
+ .foreground-secondary-12 {
4436
+ color: var(--vb-secondary-12, hsl(214, 50%, 12%)) !important;
4437
+ }
4438
+
4439
+ .foreground-secondary-15 {
4440
+ color: var(--vb-secondary-15, hsl(214, 50%, 15%)) !important;
4441
+ }
4442
+
4363
4443
  .foreground-secondary-20 {
4364
4444
  color: var(--vb-secondary-20, hsl(214, 50%, 20%)) !important;
4365
4445
  }
@@ -4412,10 +4492,22 @@ input::-moz-placeholder {
4412
4492
  color: var(--vb-neutral-0, hsl(214, 20%, 0%)) !important;
4413
4493
  }
4414
4494
 
4495
+ .foreground-neutral-5 {
4496
+ color: var(--vb-neutral-5, hsl(214, 20%, 5%)) !important;
4497
+ }
4498
+
4415
4499
  .foreground-neutral-10 {
4416
4500
  color: var(--vb-neutral-10, hsl(214, 20%, 10%)) !important;
4417
4501
  }
4418
4502
 
4503
+ .foreground-neutral-12 {
4504
+ color: var(--vb-neutral-12, hsl(214, 20%, 12%)) !important;
4505
+ }
4506
+
4507
+ .foreground-neutral-15 {
4508
+ color: var(--vb-neutral-15, hsl(214, 20%, 15%)) !important;
4509
+ }
4510
+
4419
4511
  .foreground-neutral-20 {
4420
4512
  color: var(--vb-neutral-20, hsl(214, 20%, 20%)) !important;
4421
4513
  }
@@ -4468,10 +4560,22 @@ input::-moz-placeholder {
4468
4560
  color: var(--vb-important-0, hsl(0, 80%, 0%)) !important;
4469
4561
  }
4470
4562
 
4563
+ .foreground-important-5 {
4564
+ color: var(--vb-important-5, hsl(0, 80%, 5%)) !important;
4565
+ }
4566
+
4471
4567
  .foreground-important-10 {
4472
4568
  color: var(--vb-important-10, hsl(0, 80%, 10%)) !important;
4473
4569
  }
4474
4570
 
4571
+ .foreground-important-12 {
4572
+ color: var(--vb-important-12, hsl(0, 80%, 12%)) !important;
4573
+ }
4574
+
4575
+ .foreground-important-15 {
4576
+ color: var(--vb-important-15, hsl(0, 80%, 15%)) !important;
4577
+ }
4578
+
4475
4579
  .foreground-important-20 {
4476
4580
  color: var(--vb-important-20, hsl(0, 80%, 20%)) !important;
4477
4581
  }
@@ -4596,59 +4700,87 @@ input::-moz-placeholder {
4596
4700
  border-bottom-left-radius: 0.25rem !important;
4597
4701
  }
4598
4702
 
4599
- .radius-circle {
4703
+ .radius-lg {
4704
+ border-radius: 0.5rem !important;
4705
+ }
4706
+
4707
+ .radius-lg-top,
4708
+ .radius-lg-left,
4709
+ .radius-lg-top-left {
4710
+ border-top-left-radius: 0.5rem !important;
4711
+ }
4712
+
4713
+ .radius-lg-top,
4714
+ .radius-lg-right,
4715
+ .radius-lg-top-right {
4716
+ border-top-right-radius: 0.5rem !important;
4717
+ }
4718
+
4719
+ .radius-lg-bottom,
4720
+ .radius-lg-right,
4721
+ .radius-lg-bottom-right {
4722
+ border-bottom-right-radius: 0.5rem !important;
4723
+ }
4724
+
4725
+ .radius-lg-bottom,
4726
+ .radius-lg-left,
4727
+ .radius-lg-bottom-left {
4728
+ border-bottom-left-radius: 0.5rem !important;
4729
+ }
4730
+
4731
+ .radius-lg-circle {
4600
4732
  border-radius: 9999px !important;
4601
4733
  }
4602
4734
 
4603
- .radius-circle-top,
4604
- .radius-circle-left,
4605
- .radius-circle-top-left {
4735
+ .radius-lg-circle-top,
4736
+ .radius-lg-circle-left,
4737
+ .radius-lg-circle-top-left {
4606
4738
  border-top-left-radius: 9999px !important;
4607
4739
  }
4608
4740
 
4609
- .radius-circle-top,
4610
- .radius-circle-right,
4611
- .radius-circle-top-right {
4741
+ .radius-lg-circle-top,
4742
+ .radius-lg-circle-right,
4743
+ .radius-lg-circle-top-right {
4612
4744
  border-top-right-radius: 9999px !important;
4613
4745
  }
4614
4746
 
4615
- .radius-circle-bottom,
4616
- .radius-circle-right,
4617
- .radius-circle-bottom-right {
4747
+ .radius-lg-circle-bottom,
4748
+ .radius-lg-circle-right,
4749
+ .radius-lg-circle-bottom-right {
4618
4750
  border-bottom-right-radius: 9999px !important;
4619
4751
  }
4620
4752
 
4621
- .radius-circle-bottom,
4622
- .radius-circle-left,
4623
- .radius-circle-bottom-left {
4753
+ .radius-lg-circle-bottom,
4754
+ .radius-lg-circle-left,
4755
+ .radius-lg-circle-bottom-left {
4624
4756
  border-bottom-left-radius: 9999px !important;
4625
4757
  }
4626
4758
 
4627
- .radius-square {
4759
+ .radius-lg-circle-square {
4628
4760
  border-radius: 0 !important;
4629
4761
  }
4630
4762
 
4631
- .radius-square-top,
4632
- .radius-square-left,
4633
- .radius-square-top-left {
4763
+ .radius-lg-circle-square-top,
4764
+ .radius-lg-circle-square-left,
4765
+ .radius-lg-circle-square-top-left {
4634
4766
  border-top-left-radius: 0 !important;
4635
4767
  }
4636
4768
 
4637
- .radius-square-top,
4638
- .radius-square-right,
4639
- .radius-square-top-right {
4769
+ .radius-lg-circle-square-top,
4770
+ .radius-lg-circle-square-right,
4771
+ .radius-lg-circle-square-top-right {
4640
4772
  border-top-right-radius: 0 !important;
4641
4773
  }
4642
4774
 
4643
- .radius-square-bottom,
4644
- .radius-square-right,
4645
- .radius-square-bottom-right {
4775
+ .radius-lg-circle-square-bottom,
4776
+ .radius-lg-circle-square-right,
4777
+ .radius-lg-circle-square-bottom-right {
4646
4778
  border-bottom-right-radius: 0 !important;
4647
4779
  }
4648
4780
 
4649
- .radius-square-bottom,
4650
- .radius-square-left,
4651
- .radius-square-bottom-left {
4781
+ .radius-lg-circle-square-bottom,
4782
+ .radius-lg-circle-square-left,
4783
+ .radius-lg-circle-square-bottom-left {
4652
4784
  border-bottom-left-radius: 0 !important;
4653
4785
  }
4654
4786
 
@@ -5214,7 +5346,7 @@ input::-moz-placeholder {
5214
5346
  }
5215
5347
 
5216
5348
  .font-leading-base {
5217
- line-height: 1.5 !important;
5349
+ line-height: 1.625 !important;
5218
5350
  }
5219
5351
 
5220
5352
  .font-leading-sm {
@@ -5222,7 +5354,7 @@ input::-moz-placeholder {
5222
5354
  }
5223
5355
 
5224
5356
  .font-leading-lg {
5225
- line-height: 1.625 !important;
5357
+ line-height: 1.875 !important;
5226
5358
  }
5227
5359
 
5228
5360
  .font-kerning-0 {
@@ -5607,6 +5739,66 @@ input::-moz-placeholder {
5607
5739
  max-width: 100% !important;
5608
5740
  }
5609
5741
 
5742
+ .overflow-visible {
5743
+ overflow: visible !important;
5744
+ }
5745
+
5746
+ .overflow-x-visible {
5747
+ overflow-x: visible !important;
5748
+ }
5749
+
5750
+ .overflow-y-visible {
5751
+ overflow-y: visible !important;
5752
+ }
5753
+
5754
+ .overflow-hidden {
5755
+ overflow: hidden !important;
5756
+ }
5757
+
5758
+ .overflow-x-hidden {
5759
+ overflow-x: hidden !important;
5760
+ }
5761
+
5762
+ .overflow-y-hidden {
5763
+ overflow-y: hidden !important;
5764
+ }
5765
+
5766
+ .overflow-clip {
5767
+ overflow: clip !important;
5768
+ }
5769
+
5770
+ .overflow-x-clip {
5771
+ overflow-x: clip !important;
5772
+ }
5773
+
5774
+ .overflow-y-clip {
5775
+ overflow-y: clip !important;
5776
+ }
5777
+
5778
+ .overflow-scroll {
5779
+ overflow: scroll !important;
5780
+ }
5781
+
5782
+ .overflow-x-scroll {
5783
+ overflow-x: scroll !important;
5784
+ }
5785
+
5786
+ .overflow-y-scroll {
5787
+ overflow-y: scroll !important;
5788
+ }
5789
+
5790
+ .overflow-auto {
5791
+ overflow: auto !important;
5792
+ }
5793
+
5794
+ .overflow-x-auto {
5795
+ overflow-x: auto !important;
5796
+ }
5797
+
5798
+ .overflow-y-auto {
5799
+ overflow-y: auto !important;
5800
+ }
5801
+
5610
5802
  .padding {
5611
5803
  padding: 1em !important;
5612
5804
  }
@@ -5883,4 +6075,173 @@ input::-moz-placeholder {
5883
6075
  white-space: nowrap !important;
5884
6076
  }
5885
6077
 
6078
+ :root {
6079
+ --vb-primary-hs: 152deg, 60%;
6080
+ --vb-primary: var(--vb-primary-50);
6081
+ --vb-primary-0: hsl(var(--vb-primary-hs), 0%);
6082
+ --vb-primary-5: hsl(var(--vb-primary-hs), 5%);
6083
+ --vb-primary-10: hsl(var(--vb-primary-hs), 10%);
6084
+ --vb-primary-12: hsl(var(--vb-primary-hs), 12%);
6085
+ --vb-primary-15: hsl(var(--vb-primary-hs), 15%);
6086
+ --vb-primary-20: hsl(var(--vb-primary-hs), 20%);
6087
+ --vb-primary-30: hsl(var(--vb-primary-hs), 30%);
6088
+ --vb-primary-40: hsl(var(--vb-primary-hs), 40%);
6089
+ --vb-primary-50: hsl(var(--vb-primary-hs), 50%);
6090
+ --vb-primary-60: hsl(var(--vb-primary-hs), 60%);
6091
+ --vb-primary-70: hsl(var(--vb-primary-hs), 70%);
6092
+ --vb-primary-80: hsl(var(--vb-primary-hs), 80%);
6093
+ --vb-primary-90: hsl(var(--vb-primary-hs), 90%);
6094
+ --vb-primary-95: hsl(var(--vb-primary-hs), 95%);
6095
+ --vb-primary-98: hsl(var(--vb-primary-hs), 98%);
6096
+ --vb-primary-100: hsl(var(--vb-primary-hs), 100%);
6097
+ --vb-secondary-hs: 214deg, 50%;
6098
+ --vb-secondary: var(--vb-secondary-50);
6099
+ --vb-secondary-0: hsl(var(--vb-secondary-hs), 0%);
6100
+ --vb-secondary-5: hsl(var(--vb-secondary-hs), 5%);
6101
+ --vb-secondary-10: hsl(var(--vb-secondary-hs), 10%);
6102
+ --vb-secondary-12: hsl(var(--vb-secondary-hs), 12%);
6103
+ --vb-secondary-15: hsl(var(--vb-secondary-hs), 15%);
6104
+ --vb-secondary-20: hsl(var(--vb-secondary-hs), 20%);
6105
+ --vb-secondary-30: hsl(var(--vb-secondary-hs), 30%);
6106
+ --vb-secondary-40: hsl(var(--vb-secondary-hs), 40%);
6107
+ --vb-secondary-50: hsl(var(--vb-secondary-hs), 50%);
6108
+ --vb-secondary-60: hsl(var(--vb-secondary-hs), 60%);
6109
+ --vb-secondary-70: hsl(var(--vb-secondary-hs), 70%);
6110
+ --vb-secondary-80: hsl(var(--vb-secondary-hs), 80%);
6111
+ --vb-secondary-90: hsl(var(--vb-secondary-hs), 90%);
6112
+ --vb-secondary-95: hsl(var(--vb-secondary-hs), 95%);
6113
+ --vb-secondary-98: hsl(var(--vb-secondary-hs), 98%);
6114
+ --vb-secondary-100: hsl(var(--vb-secondary-hs), 100%);
6115
+ --vb-neutral-hs: 214deg, 20%;
6116
+ --vb-neutral: var(--vb-neutral-50);
6117
+ --vb-neutral-0: hsl(var(--vb-neutral-hs), 0%);
6118
+ --vb-neutral-5: hsl(var(--vb-neutral-hs), 5%);
6119
+ --vb-neutral-10: hsl(var(--vb-neutral-hs), 10%);
6120
+ --vb-neutral-12: hsl(var(--vb-neutral-hs), 12%);
6121
+ --vb-neutral-15: hsl(var(--vb-neutral-hs), 15%);
6122
+ --vb-neutral-20: hsl(var(--vb-neutral-hs), 20%);
6123
+ --vb-neutral-30: hsl(var(--vb-neutral-hs), 30%);
6124
+ --vb-neutral-40: hsl(var(--vb-neutral-hs), 40%);
6125
+ --vb-neutral-50: hsl(var(--vb-neutral-hs), 50%);
6126
+ --vb-neutral-60: hsl(var(--vb-neutral-hs), 60%);
6127
+ --vb-neutral-70: hsl(var(--vb-neutral-hs), 70%);
6128
+ --vb-neutral-80: hsl(var(--vb-neutral-hs), 80%);
6129
+ --vb-neutral-90: hsl(var(--vb-neutral-hs), 90%);
6130
+ --vb-neutral-95: hsl(var(--vb-neutral-hs), 95%);
6131
+ --vb-neutral-98: hsl(var(--vb-neutral-hs), 98%);
6132
+ --vb-neutral-100: hsl(var(--vb-neutral-hs), 100%);
6133
+ --vb-important-hs: 0deg, 80%;
6134
+ --vb-important: var(--vb-important-50);
6135
+ --vb-important-0: hsl(var(--vb-important-hs), 0%);
6136
+ --vb-important-5: hsl(var(--vb-important-hs), 5%);
6137
+ --vb-important-10: hsl(var(--vb-important-hs), 10%);
6138
+ --vb-important-12: hsl(var(--vb-important-hs), 12%);
6139
+ --vb-important-15: hsl(var(--vb-important-hs), 15%);
6140
+ --vb-important-20: hsl(var(--vb-important-hs), 20%);
6141
+ --vb-important-30: hsl(var(--vb-important-hs), 30%);
6142
+ --vb-important-40: hsl(var(--vb-important-hs), 40%);
6143
+ --vb-important-50: hsl(var(--vb-important-hs), 50%);
6144
+ --vb-important-60: hsl(var(--vb-important-hs), 60%);
6145
+ --vb-important-70: hsl(var(--vb-important-hs), 70%);
6146
+ --vb-important-80: hsl(var(--vb-important-hs), 80%);
6147
+ --vb-important-90: hsl(var(--vb-important-hs), 90%);
6148
+ --vb-important-95: hsl(var(--vb-important-hs), 95%);
6149
+ --vb-important-98: hsl(var(--vb-important-hs), 98%);
6150
+ --vb-important-100: hsl(var(--vb-important-hs), 100%);
6151
+ }
6152
+
6153
+ :root, .vb-theme-root {
6154
+ --vb-background: var(--vb-neutral-100, hsl(214, 20%, 100%));
6155
+ --vb-background-dark: var(--vb-neutral-98, hsl(214, 20%, 98%));
6156
+ --vb-background-darker: var(--vb-neutral-95, hsl(214, 20%, 95%));
6157
+ --vb-background-hover: rgba(0, 0, 0, 0.05);
6158
+ --vb-background-focus: rgba(0, 0, 0, 0.05);
6159
+ --vb-background-active: rgba(0, 0, 0, 0.1);
6160
+ --vb-foreground: var(--vb-neutral-20, hsl(214, 20%, 20%));
6161
+ --vb-foreground-light: var(--vb-neutral-40, hsl(214, 20%, 40%));
6162
+ --vb-foreground-lighter: var(--vb-neutral-60, hsl(214, 20%, 60%));
6163
+ --vb-border-color: rgba(0, 0, 0, 0.1);
6164
+ --vb-border-color-dark: rgba(0, 0, 0, 0.2);
6165
+ --vb-border-color-darker: rgba(0, 0, 0, 0.3);
6166
+ --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%);
6167
+ --vb-focus-visible: var(--vb-primary-50, hsl(152, 60%, 50%));
6168
+ color-scheme: light;
6169
+ }
6170
+ @media (prefers-color-scheme: dark) {
6171
+ :root, .vb-theme-root {
6172
+ --vb-background: var(--vb-neutral-10, hsl(214, 20%, 10%));
6173
+ --vb-background-dark: var(--vb-neutral-12, hsl(214, 20%, 12%));
6174
+ --vb-background-darker: var(--vb-neutral-15, hsl(214, 20%, 15%));
6175
+ --vb-background-hover: rgba(255, 255, 255, 0.05);
6176
+ --vb-background-focus: rgba(255, 255, 255, 0.05);
6177
+ --vb-background-active: rgba(255, 255, 255, 0.1);
6178
+ --vb-foreground: var(--vb-neutral-90, hsl(214, 20%, 90%));
6179
+ --vb-foreground-light: var(--vb-neutral-70, hsl(214, 20%, 70%));
6180
+ --vb-foreground-lighter: var(--vb-neutral-50, hsl(214, 20%, 50%));
6181
+ --vb-border-color: rgba(255, 255, 255, 0.1);
6182
+ --vb-border-color-dark: rgba(255, 255, 255, 0.2);
6183
+ --vb-border-color-darker: rgba(255, 255, 255, 0.3);
6184
+ --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 0%, 20%);
6185
+ --vb-focus-visible: var(--vb-primary-50, hsl(152, 60%, 50%));
6186
+ color-scheme: dark;
6187
+ }
6188
+ }
6189
+
6190
+ .vb-theme-light {
6191
+ --vb-background: var(--vb-neutral-100, hsl(214, 20%, 100%));
6192
+ --vb-background-dark: var(--vb-neutral-98, hsl(214, 20%, 98%));
6193
+ --vb-background-darker: var(--vb-neutral-95, hsl(214, 20%, 95%));
6194
+ --vb-background-hover: rgba(0, 0, 0, 0.05);
6195
+ --vb-background-focus: rgba(0, 0, 0, 0.05);
6196
+ --vb-background-active: rgba(0, 0, 0, 0.1);
6197
+ --vb-foreground: var(--vb-neutral-20, hsl(214, 20%, 20%));
6198
+ --vb-foreground-light: var(--vb-neutral-40, hsl(214, 20%, 40%));
6199
+ --vb-foreground-lighter: var(--vb-neutral-60, hsl(214, 20%, 60%));
6200
+ --vb-border-color: rgba(0, 0, 0, 0.1);
6201
+ --vb-border-color-dark: rgba(0, 0, 0, 0.2);
6202
+ --vb-border-color-darker: rgba(0, 0, 0, 0.3);
6203
+ --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%);
6204
+ --vb-focus-visible: var(--vb-primary-50, hsl(152, 60%, 50%));
6205
+ color-scheme: light;
6206
+ }
6207
+
6208
+ .vb-theme-dark {
6209
+ --vb-background: var(--vb-neutral-10, hsl(214, 20%, 10%));
6210
+ --vb-background-dark: var(--vb-neutral-12, hsl(214, 20%, 12%));
6211
+ --vb-background-darker: var(--vb-neutral-15, hsl(214, 20%, 15%));
6212
+ --vb-background-hover: rgba(255, 255, 255, 0.05);
6213
+ --vb-background-focus: rgba(255, 255, 255, 0.05);
6214
+ --vb-background-active: rgba(255, 255, 255, 0.1);
6215
+ --vb-foreground: var(--vb-neutral-90, hsl(214, 20%, 90%));
6216
+ --vb-foreground-light: var(--vb-neutral-70, hsl(214, 20%, 70%));
6217
+ --vb-foreground-lighter: var(--vb-neutral-50, hsl(214, 20%, 50%));
6218
+ --vb-border-color: rgba(255, 255, 255, 0.1);
6219
+ --vb-border-color-dark: rgba(255, 255, 255, 0.2);
6220
+ --vb-border-color-darker: rgba(255, 255, 255, 0.3);
6221
+ --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 0%, 20%);
6222
+ --vb-focus-visible: var(--vb-primary-50, hsl(152, 60%, 50%));
6223
+ color-scheme: dark;
6224
+ }
6225
+
6226
+ :root {
6227
+ --vb-breakpoint-xs: 480px;
6228
+ --vb-breakpoint-sm: 620px;
6229
+ --vb-breakpoint-md: 760px;
6230
+ --vb-breakpoint-lg: 990px;
6231
+ --vb-breakpoint-xl: 1380px;
6232
+ }
6233
+
6234
+ :root {
6235
+ --vb-border-radius: 0.25rem;
6236
+ --vb-border-radius-lg: 0.5rem;
6237
+ --vb-border-radius-circle: 9999px;
6238
+ }
6239
+
6240
+ :root {
6241
+ --vb-transition-duration: 0.3s;
6242
+ --vb-transition-duration-short: 0.15s;
6243
+ --vb-transition-duration-long: 0.6s;
6244
+ --vb-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
6245
+ }
6246
+
5886
6247
  /*# sourceMappingURL=index.css.map */