@vuu-ui/vuu-theme 0.8.32-debug → 0.8.33

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 (3) hide show
  1. package/index.css +1 -1754
  2. package/index.css.map +1 -1
  3. package/package.json +1 -2
package/index.css CHANGED
@@ -1,1755 +1,2 @@
1
- /* NunitoSans.css */
2
- @font-face {
3
- font-family: "Nunito Sans";
4
- font-style: normal;
5
- font-weight: 300;
6
- font-stretch: 100%;
7
- font-display: swap;
8
- src: url(./fonts/NunitoSansv15Latin.woff2) format("woff2");
9
- unicode-range:
10
- U+0000-00FF,
11
- U+0131,
12
- U+0152-0153,
13
- U+02BB-02BC,
14
- U+02C6,
15
- U+02DA,
16
- U+02DC,
17
- U+0304,
18
- U+0308,
19
- U+0329,
20
- U+2000-206F,
21
- U+2074,
22
- U+20AC,
23
- U+2122,
24
- U+2191,
25
- U+2193,
26
- U+2212,
27
- U+2215,
28
- U+FEFF,
29
- U+FFFD;
30
- }
31
- @font-face {
32
- font-family: "Nunito Sans";
33
- font-style: normal;
34
- font-weight: 400;
35
- font-stretch: 100%;
36
- font-display: swap;
37
- src: url(./fonts/NunitoSansv15Latin.woff2) format("woff2");
38
- unicode-range:
39
- U+0000-00FF,
40
- U+0131,
41
- U+0152-0153,
42
- U+02BB-02BC,
43
- U+02C6,
44
- U+02DA,
45
- U+02DC,
46
- U+0304,
47
- U+0308,
48
- U+0329,
49
- U+2000-206F,
50
- U+2074,
51
- U+20AC,
52
- U+2122,
53
- U+2191,
54
- U+2193,
55
- U+2212,
56
- U+2215,
57
- U+FEFF,
58
- U+FFFD;
59
- }
60
- @font-face {
61
- font-family: "Nunito Sans";
62
- font-style: normal;
63
- font-weight: 500;
64
- font-stretch: 100%;
65
- font-display: swap;
66
- src: url(./fonts/NunitoSansv15Latin.woff2) format("woff2");
67
- unicode-range:
68
- U+0000-00FF,
69
- U+0131,
70
- U+0152-0153,
71
- U+02BB-02BC,
72
- U+02C6,
73
- U+02DA,
74
- U+02DC,
75
- U+0304,
76
- U+0308,
77
- U+0329,
78
- U+2000-206F,
79
- U+2074,
80
- U+20AC,
81
- U+2122,
82
- U+2191,
83
- U+2193,
84
- U+2212,
85
- U+2215,
86
- U+FEFF,
87
- U+FFFD;
88
- }
89
- @font-face {
90
- font-family: "Nunito Sans";
91
- font-style: normal;
92
- font-weight: 600;
93
- font-stretch: 100%;
94
- font-display: swap;
95
- src: url(./fonts/NunitoSansv15Latin.woff2) format("woff2");
96
- unicode-range:
97
- U+0000-00FF,
98
- U+0131,
99
- U+0152-0153,
100
- U+02BB-02BC,
101
- U+02C6,
102
- U+02DA,
103
- U+02DC,
104
- U+0304,
105
- U+0308,
106
- U+0329,
107
- U+2000-206F,
108
- U+2074,
109
- U+20AC,
110
- U+2122,
111
- U+2191,
112
- U+2193,
113
- U+2212,
114
- U+2215,
115
- U+FEFF,
116
- U+FFFD;
117
- }
118
- @font-face {
119
- font-family: "Nunito Sans";
120
- font-style: normal;
121
- font-weight: 700;
122
- font-stretch: 100%;
123
- font-display: swap;
124
- src: url(./fonts/NunitoSansv15Latin.woff2) format("woff2");
125
- unicode-range:
126
- U+0000-00FF,
127
- U+0131,
128
- U+0152-0153,
129
- U+02BB-02BC,
130
- U+02C6,
131
- U+02DA,
132
- U+02DC,
133
- U+0304,
134
- U+0308,
135
- U+0329,
136
- U+2000-206F,
137
- U+2074,
138
- U+20AC,
139
- U+2122,
140
- U+2191,
141
- U+2193,
142
- U+2212,
143
- U+2215,
144
- U+FEFF,
145
- U+FFFD;
146
- }
147
- @font-face {
148
- font-family: "Nunito Sans";
149
- font-style: normal;
150
- font-weight: 800;
151
- font-stretch: 100%;
152
- font-display: swap;
153
- src: url(./fonts/NunitoSansv15Latin.woff2) format("woff2");
154
- unicode-range:
155
- U+0000-00FF,
156
- U+0131,
157
- U+0152-0153,
158
- U+02BB-02BC,
159
- U+02C6,
160
- U+02DA,
161
- U+02DC,
162
- U+0304,
163
- U+0308,
164
- U+0329,
165
- U+2000-206F,
166
- U+2074,
167
- U+20AC,
168
- U+2122,
169
- U+2191,
170
- U+2193,
171
- U+2212,
172
- U+2215,
173
- U+FEFF,
174
- U+FFFD;
175
- }
176
- @font-face {
177
- font-family: "Nunito Sans A-Variant";
178
- src: url(./fonts/NunitoSans-Regular.woff) format("opentype");
179
- }
180
-
181
- /* SomeTypeMono.css */
182
- @font-face {
183
- font-family: "Sometype Mono";
184
- font-style: normal;
185
- font-weight: 500;
186
- font-display: swap;
187
- src: url(./fonts/SomeTypeMonov1-500.woff2) format("woff2");
188
- unicode-range:
189
- U+0000-00FF,
190
- U+0131,
191
- U+0152-0153,
192
- U+02BB-02BC,
193
- U+02C6,
194
- U+02DA,
195
- U+02DC,
196
- U+0304,
197
- U+0308,
198
- U+0329,
199
- U+2000-206F,
200
- U+2074,
201
- U+20AC,
202
- U+2122,
203
- U+2191,
204
- U+2193,
205
- U+2212,
206
- U+2215,
207
- U+FEFF,
208
- U+FFFD;
209
- }
210
-
211
- /* css/global.css */
212
- .vuu-theme {
213
- color: var(--salt-content-primary-foreground);
214
- font-family: var(--salt-typography-fontFamily);
215
- font-size: var(--salt-text-fontSize);
216
- letter-spacing: var(--salt-text-letterSpacing);
217
- line-height: var(--salt-text-lineHeight);
218
- }
219
- .vuu-theme ::selection {
220
- background: var(--salt-content-foreground-highlight);
221
- color: black;
222
- }
223
- .vuu-theme[data-mode=light] {
224
- color-scheme: light;
225
- }
226
- .vuu-theme[data-mode=dark] {
227
- color-scheme: dark;
228
- }
229
- *,
230
- *::before,
231
- *::after {
232
- box-sizing: border-box;
233
- }
234
- .salt-visuallyHidden {
235
- position: absolute;
236
- height: 1px;
237
- width: 1px;
238
- padding: 0;
239
- margin: -1px;
240
- overflow: hidden;
241
- clip: rect(0, 0, 0, 0);
242
- white-space: nowrap;
243
- border-width: 0;
244
- }
245
-
246
- /* css/foundations/animation.css */
247
- .vuu-density-touch,
248
- .vuu-density-low,
249
- .vuu-density-medium,
250
- .vuu-density-high {
251
- --salt-animation-opacity-start: 0;
252
- --salt-animation-opacity-end: 1;
253
- --salt-animation-scale-start: 0;
254
- --salt-animation-scale-end: 1;
255
- --salt-animation-transform-start: 100%;
256
- --salt-animation-transform-end: 0;
257
- --salt-animation-duration: var(--salt-duration-perceptible);
258
- --salt-animation-timing-function: ease-in-out;
259
- --salt-animation-slide-in-top: slide-in-top var(--salt-animation-duration) var(--salt-animation-timing-function);
260
- --salt-animation-slide-in-left: slide-in-left var(--salt-animation-duration) var(--salt-animation-timing-function);
261
- --salt-animation-slide-in-right: slide-in-right var(--salt-animation-duration) var(--salt-animation-timing-function);
262
- --salt-animation-slide-in-bottom: slide-in-bottom var(--salt-animation-duration) var(--salt-animation-timing-function);
263
- --salt-animation-slide-out-top: slide-out-top var(--salt-animation-duration) var(--salt-animation-timing-function) both;
264
- --salt-animation-slide-out-left: slide-out-left var(--salt-animation-duration) var(--salt-animation-timing-function) both;
265
- --salt-animation-slide-out-right: slide-out-right var(--salt-animation-duration) var(--salt-animation-timing-function) both;
266
- --salt-animation-slide-out-bottom: slide-out-bottom var(--salt-animation-duration) var(--salt-animation-timing-function) both;
267
- --salt-animation-fade-in-back: fade-in-back var(--salt-animation-duration) var(--salt-animation-timing-function);
268
- --salt-animation-fade-in-forward: fade-in-forward var(--salt-animation-duration) var(--salt-animation-timing-function);
269
- --salt-animation-fade-in-center: fade-in-center var(--salt-animation-duration) var(--salt-animation-timing-function);
270
- --salt-animation-fade-out-back: fade-out-back var(--salt-animation-duration) ease-in-out both;
271
- }
272
- @keyframes slide-in-top {
273
- 0% {
274
- opacity: var(--salt-animation-opacity-start);
275
- transform: translateY(var(--salt-animation-transform-start));
276
- }
277
- 100% {
278
- opacity: var(--salt-animation-opacity-end);
279
- transform: translateY(var(--salt-animation-transform-end));
280
- }
281
- }
282
- @keyframes slide-out-top {
283
- 0% {
284
- opacity: var(--salt-animation-opacity-end);
285
- transform: translateY(var(--salt-animation-transform-end));
286
- }
287
- 100% {
288
- opacity: var(--salt-animation-opacity-start);
289
- transform: translateY(var(--salt-animation-transform-start));
290
- }
291
- }
292
- @keyframes slide-in-left {
293
- 0% {
294
- opacity: var(--salt-animation-opacity-start);
295
- transform: translateX(calc(-1 * var(--salt-animation-transform-start)));
296
- }
297
- 100% {
298
- opacity: var(--salt-animation-opacity-end);
299
- transform: translateX(var(--salt-animation-transform-end));
300
- }
301
- }
302
- @keyframes slide-out-left {
303
- 0% {
304
- opacity: var(--salt-animation-opacity-end);
305
- transform: translateX(var(--salt-animation-transform-end));
306
- }
307
- 100% {
308
- opacity: var(--salt-animation-opacity-start);
309
- transform: translateX(calc(-1 * var(--salt-animation-transform-start)));
310
- }
311
- }
312
- @keyframes slide-in-right {
313
- 0% {
314
- opacity: var(--salt-animation-opacity-start);
315
- transform: translateX(var(--salt-animation-transform-start));
316
- }
317
- 100% {
318
- opacity: var(--salt-animation-opacity-end);
319
- transform: translateX(var(--salt-animation-transform-end));
320
- }
321
- }
322
- @keyframes slide-out-right {
323
- 0% {
324
- opacity: var(--salt-animation-opacity-end);
325
- transform: translateX(var(--salt-animation-transform-end));
326
- }
327
- 100% {
328
- opacity: var(--salt-animation-opacity-start);
329
- transform: translateX(var(--salt-animation-transform-start));
330
- }
331
- }
332
- @keyframes slide-in-bottom {
333
- 0% {
334
- opacity: var(--salt-animation-opacity-start);
335
- transform: translateY(calc(-1 * var(--salt-animation-transform-start)));
336
- }
337
- 100% {
338
- opacity: var(--salt-animation-opacity-end);
339
- transform: translateY(var(--salt-animation-transform-end));
340
- }
341
- }
342
- @keyframes slide-out-bottom {
343
- 0% {
344
- opacity: var(--salt-animation-opacity-end);
345
- transform: translateY(var(--salt-animation-transform-end));
346
- }
347
- 100% {
348
- opacity: var(--salt-animation-opacity-start);
349
- transform: translateY(calc(-1 * var(--salt-animation-transform-start)));
350
- }
351
- }
352
- @keyframes fade-in-back {
353
- 0% {
354
- --salt-animation-scale-start: 1.4;
355
- opacity: var(--salt-animation-opacity-start);
356
- transform: scale(var(--salt-animation-scale-start));
357
- }
358
- 100% {
359
- opacity: var(--salt-animation-opacity-end);
360
- transform: scale(var(--salt-animation-scale-end));
361
- }
362
- }
363
- @keyframes fade-in-forward {
364
- 0% {
365
- --salt-animation-scale-start: 0.6;
366
- opacity: var(--salt-animation-opacity-start);
367
- transform: scale(var(--salt-animation-scale-start));
368
- }
369
- 100% {
370
- opacity: var(--salt-animation-opacity-end);
371
- transform: scale(var(--salt-animation-scale-end));
372
- }
373
- }
374
- @keyframes fade-in-center {
375
- 0% {
376
- opacity: var(--salt-animation-opacity-start);
377
- }
378
- 100% {
379
- opacity: var(--salt-animation-opacity-end);
380
- }
381
- }
382
- @keyframes fade-out-back {
383
- 0% {
384
- opacity: var(--salt-animation-opacity-end);
385
- }
386
- 100% {
387
- opacity: var(--salt-animation-opacity-start);
388
- }
389
- }
390
-
391
- /* css/foundations/color.css */
392
- .vuu-theme {
393
- --vuu-fade-light: 0.13;
394
- --vuu-color-transparent: transparent;
395
- --vuu-color-black: black;
396
- --vuu-color-white: white;
397
- --vuu-color-white-fade-70: rgba(255,255,255,.7);
398
- --vuu-color-red-50: rgb(226, 52, 52);
399
- --vuu-color-blue-40: rgb(164, 213, 244);
400
- --vuu-color-blue-60: rgb(1, 124, 177);
401
- --vuu-color-orange-50: rgb(244, 202, 51);
402
- --vuu-color-purple-10: rgb(109,24,189);
403
- --vuu-color-purple-20-fade-40:rgba(197, 163, 229, .4);
404
- --vuu-color-purple-50: rgb(42, 1, 95);
405
- --vuu-color-purple-10-fade-light: rgba(109,24,189, var(--vuu-fade-light));
406
- --vuu-color-pink-10: rgb(234, 120, 128);
407
- --vuu-color-pink-10-fade-20: rgba(234, 120, 128, .2);
408
- --vuu-color-gray-02: rgb(235, 235, 236);
409
- --vuu-color-gray-03: rgb(237, 237, 237);
410
- --vuu-color-gray-05: rgb(222, 222, 222);
411
- --vuu-color-gray-07: rgb(226, 226, 227);
412
- --vuu-color-gray-10: rgb(228, 227, 231);
413
- --vuu-color-gray-20: rgb(245, 242, 248);
414
- --vuu-color-gray-25: rgb(244, 244, 244) ;
415
- --vuu-color-gray-28: rgb(249, 249, 251);
416
- --vuu-color-gray-30: rgb(214, 215, 218);
417
- --vuu-color-gray-35: rgb(155, 158, 168);
418
- --vuu-color-gray-40: rgb(169, 170, 173);
419
- --vuu-color-gray-42: rgb(135, 139, 158);
420
- --vuu-color-gray-45: rgb(119, 124, 148);
421
- --vuu-color-gray-50: rgb(96, 100, 119);
422
- --vuu-color-gray-80: rgb(21, 23, 27);
423
- --vuu-color-green-50: rgb(102, 174, 90);
424
- --vuu-color-green-60: rgb(36, 137, 19);
425
- --vuu-color-green-60-fade-30: rgba(36, 137, 19, .3);
426
- --vuu-color-red-50: rgb(226, 52, 52);
427
- --vuu-color-yellow-20: rgb(244, 202, 51);
428
- --salt-color-white: rgb(255, 255, 255);
429
- --salt-color-black: rgb(0, 0, 0);
430
- --salt-color-red-10: rgb(255, 227, 224);
431
- --salt-color-red-20: rgb(255, 207, 201);
432
- --salt-color-red-30: rgb(255, 187, 178);
433
- --salt-color-red-40: rgb(255, 167, 156);
434
- --salt-color-red-50: rgb(255, 148, 133);
435
- --salt-color-red-100: rgb(255, 128, 111);
436
- --salt-color-red-200: rgb(255, 108, 88);
437
- --salt-color-red-300: rgb(255, 89, 66);
438
- --salt-color-red-400: rgb(237, 65, 42);
439
- --salt-color-red-500: rgb(227, 43, 22);
440
- --salt-color-red-600: rgb(196, 32, 16);
441
- --salt-color-red-700: rgb(166, 21, 11);
442
- --salt-color-red-800: rgb(136, 10, 5);
443
- --salt-color-red-900: rgb(65, 37, 34);
444
- --salt-color-orange-10: rgb(255, 232, 191);
445
- --salt-color-orange-20: rgb(254, 223, 166);
446
- --salt-color-orange-30: rgb(254, 214, 142);
447
- --salt-color-orange-40: rgb(254, 205, 118);
448
- --salt-color-orange-50: rgb(254, 197, 94);
449
- --salt-color-orange-100: rgb(250, 181, 81);
450
- --salt-color-orange-200: rgb(246, 165, 68);
451
- --salt-color-orange-300: rgb(242, 149, 56);
452
- --salt-color-orange-400: rgb(238, 133, 43);
453
- --salt-color-orange-500: rgb(234, 115, 25);
454
- --salt-color-orange-600: rgb(224, 101, 25);
455
- --salt-color-orange-700: rgb(214, 85, 19);
456
- --salt-color-orange-800: rgb(204, 68, 13);
457
- --salt-color-orange-900: rgb(54, 44, 36);
458
- --salt-color-green-10: rgb(209, 244, 201);
459
- --salt-color-green-20: rgb(184, 232, 182);
460
- --salt-color-green-30: rgb(160, 221, 164);
461
- --salt-color-green-40: rgb(136, 210, 145);
462
- --salt-color-green-50: rgb(112, 199, 127);
463
- --salt-color-green-100: rgb(93, 189, 116);
464
- --salt-color-green-200: rgb(77, 180, 105);
465
- --salt-color-green-300: rgb(60, 171, 96);
466
- --salt-color-green-400: rgb(48, 156, 90);
467
- --salt-color-green-500: rgb(36, 135, 75);
468
- --salt-color-green-600: rgb(24, 114, 61);
469
- --salt-color-green-700: rgb(12, 93, 46);
470
- --salt-color-green-800: rgb(1, 73, 32);
471
- --salt-color-green-900: rgb(35, 52, 43);
472
- --salt-color-teal-10: rgb(218, 240, 240);
473
- --salt-color-teal-20: rgb(199, 232, 232);
474
- --salt-color-teal-30: rgb(180, 224, 225);
475
- --salt-color-teal-40: rgb(162, 217, 218);
476
- --salt-color-teal-50: rgb(141, 205, 209);
477
- --salt-color-teal-100: rgb(123, 193, 200);
478
- --salt-color-teal-200: rgb(99, 181, 192);
479
- --salt-color-teal-300: rgb(73, 160, 172);
480
- --salt-color-teal-400: rgb(48, 149, 166);
481
- --salt-color-teal-500: rgb(0, 130, 151);
482
- --salt-color-teal-600: rgb(27, 107, 133);
483
- --salt-color-teal-700: rgb(0, 85, 113);
484
- --salt-color-teal-800: rgb(1, 65, 86);
485
- --salt-color-teal-900: rgb(0, 49, 76);
486
- --salt-color-blue-10: rgb(203, 231, 249);
487
- --salt-color-blue-20: rgb(183, 222, 246);
488
- --salt-color-blue-30: rgb(164, 213, 244);
489
- --salt-color-blue-40: rgb(144, 204, 242);
490
- --salt-color-blue-50: rgb(125, 195, 240);
491
- --salt-color-blue-100: rgb(100, 177, 228);
492
- --salt-color-blue-200: rgb(75, 159, 216);
493
- --salt-color-blue-300: rgb(51, 141, 205);
494
- --salt-color-blue-400: rgb(46, 132, 198);
495
- --salt-color-blue-500: rgb(38, 112, 169);
496
- --salt-color-blue-600: rgb(21, 92, 147);
497
- --salt-color-blue-700: rgb(0, 71, 123);
498
- --salt-color-blue-800: rgb(39, 60, 77);
499
- --salt-color-blue-900: rgb(35, 47, 56);
500
- --salt-color-purple-10: rgb(249, 224, 247);
501
- --salt-color-purple-20: rgb(247, 212, 244);
502
- --salt-color-purple-30: rgb(245, 201, 241);
503
- --salt-color-purple-40: rgb(243, 189, 238);
504
- --salt-color-purple-50: rgb(241, 178, 235);
505
- --salt-color-purple-100: rgb(223, 156, 225);
506
- --salt-color-purple-200: rgb(205, 135, 215);
507
- --salt-color-purple-300: rgb(192, 116, 203);
508
- --salt-color-purple-400: rgb(169, 97, 181);
509
- --salt-color-purple-500: rgb(150, 78, 162);
510
- --salt-color-purple-600: rgb(129, 60, 141);
511
- --salt-color-purple-700: rgb(103, 46, 122);
512
- --salt-color-purple-800: rgb(83, 37, 109);
513
- --salt-color-purple-900: rgb(59, 16, 84);
514
- --salt-color-gray-10: rgb(242, 244, 246);
515
- --salt-color-gray-20: rgb(234, 237, 239);
516
- --salt-color-gray-30: rgb(224, 228, 233);
517
- --salt-color-gray-40: rgb(217, 221, 227);
518
- --salt-color-gray-50: rgb(206, 210, 217);
519
- --salt-color-gray-60: rgb(197, 201, 208);
520
- --salt-color-gray-70: rgb(180, 183, 190);
521
- --salt-color-gray-80: rgb(159, 163, 170);
522
- --salt-color-gray-90: rgb(132, 135, 142);
523
- --salt-color-gray-100: rgb(116, 119, 127);
524
- --salt-color-gray-200: rgb(97, 101, 110);
525
- --salt-color-gray-300: rgb(76, 80, 91);
526
- --salt-color-gray-400: rgb(68, 72, 79);
527
- --salt-color-gray-500: rgb(59, 63, 70);
528
- --salt-color-gray-600: rgb(47, 49, 54);
529
- --salt-color-gray-700: rgb(42, 44, 47);
530
- --salt-color-gray-800: rgb(36, 37, 38);
531
- --salt-color-gray-900: rgb(22, 22, 22);
532
- }
533
-
534
- /* css/foundations/duration.css */
535
- .vuu-theme {
536
- --salt-duration-instant: 0ms;
537
- --salt-duration-perceptible: 300ms;
538
- --salt-duration-notable: 1000ms;
539
- --salt-duration-cutoff: 10000ms;
540
- }
541
-
542
- /* css/foundations/fade.css */
543
- .vuu-theme {
544
- --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
545
- --salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
546
- --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
547
- --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
548
- --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
549
- --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
550
- --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-disabled));
551
- --salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-disabled));
552
- --salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
553
- --salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
554
- --salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-disabled));
555
- --salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-disabled));
556
- --salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
557
- --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-disabled));
558
- --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
559
- --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
560
- --salt-color-gray-50-fade-border: rgba(206, 210, 217, var(--salt-palette-opacity-disabled));
561
- --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
562
- --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
563
- --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
564
- --salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
565
- --salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
566
- --salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
567
- --salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-disabled));
568
- --salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-disabled));
569
- --salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-disabled));
570
- --salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-disabled));
571
- --salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
572
- --salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));
573
- --salt-color-gray-200-fade-border-readonly: rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly));
574
- --salt-color-blue-30-fade-background: rgba(164, 213, 244, var(--salt-palette-opacity-disabled));
575
- --salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
576
- --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
577
- --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-disabled));
578
- --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-disabled));
579
- --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
580
- --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
581
- --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
582
- --salt-color-gray-300-fade-background: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
583
- --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-disabled));
584
- --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-disabled));
585
- --salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
586
- --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
587
- --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
588
- --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
589
- --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly));
590
- --salt-color-white-fade-backdrop: rgba(255, 255, 255, var(--salt-palette-opacity-backdrop));
591
- --salt-color-black-fade-backdrop: rgba(0, 0, 0, var(--salt-palette-opacity-backdrop));
592
- --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
593
- --salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
594
- --salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 255, var(--salt-palette-opacity-primary-border));
595
- --salt-color-white-fade-separatorOpacity-secondary: rgba(255, 255, 255, var(--salt-palette-opacity-secondary-border));
596
- --salt-color-white-fade-separatorOpacity-tertiary: rgba(255, 255, 255, var(--salt-palette-opacity-tertiary-border));
597
- --salt-color-black-fade-separatorOpacity-primary: rgba(0, 0, 0, var(--salt-palette-opacity-primary-border));
598
- --salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border));
599
- --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
600
- --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
601
- --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
602
- }
603
-
604
- /* css/foundations/opacity.css */
605
- .vuu-theme {
606
- --salt-opacity-0: 0;
607
- --salt-opacity-8: 0.08;
608
- --salt-opacity-15: 0.15;
609
- --salt-opacity-25: 0.25;
610
- --salt-opacity-40: 0.4;
611
- --salt-opacity-70: 0.7;
612
- }
613
-
614
- /* css/foundations/shadow.css */
615
- .vuu-theme[data-mode=light] {
616
- --salt-shadow-100-color: rgba(0, 0, 0, 0.1);
617
- --salt-shadow-200-color: rgba(0, 0, 0, 0.1);
618
- --salt-shadow-300-color: rgba(0, 0, 0, 0.15);
619
- --salt-shadow-400-color: rgba(0, 0, 0, 0.2);
620
- --salt-shadow-500-color: rgba(0, 0, 0, 0.3);
621
- }
622
- .vuu-theme[data-mode=dark] {
623
- --salt-shadow-100-color: rgba(0, 0, 0, 0.5);
624
- --salt-shadow-200-color: rgba(0, 0, 0, 0.5);
625
- --salt-shadow-300-color: rgba(0, 0, 0, 0.55);
626
- --salt-shadow-400-color: rgba(0, 0, 0, 0.55);
627
- --salt-shadow-500-color: rgba(0, 0, 0, 0.65);
628
- }
629
- .vuu-theme {
630
- --salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color);
631
- --salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color);
632
- --salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color);
633
- --salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color);
634
- --salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color);
635
- }
636
-
637
- /* css/foundations/size.css */
638
- .vuu-density-high {
639
- --salt-size-adornment: 6px;
640
- --salt-size-bar: 2px;
641
- --salt-size-base: 24px;
642
- --salt-size-border: 1px;
643
- --salt-size-icon: 10px;
644
- --salt-size-indicator: 1px;
645
- --salt-size-selectable: 12px;
646
- --salt-size-bar-strong: 4px;
647
- --salt-size-bar-small: 2px;
648
- --salt-size-border-strong: 2px;
649
- }
650
- .vuu-density-medium {
651
- --salt-size-adornment: 8px;
652
- --salt-size-bar: 4px;
653
- --salt-size-base: 28px;
654
- --salt-size-border: 1px;
655
- --salt-size-icon: 12px;
656
- --salt-size-indicator: 2px;
657
- --salt-size-selectable: 14px;
658
- --salt-size-bar-strong: 8px;
659
- --salt-size-bar-small: 2px;
660
- --salt-size-border-strong: 2px;
661
- }
662
- .vuu-density-low {
663
- --salt-size-adornment: 10px;
664
- --salt-size-bar: 6px;
665
- --salt-size-base: 36px;
666
- --salt-size-border: 1px;
667
- --salt-size-icon: 14px;
668
- --salt-size-indicator: 3px;
669
- --salt-size-selectable: 16px;
670
- --salt-size-bar-strong: 12px;
671
- --salt-size-bar-small: 2px;
672
- --salt-size-border-strong: 2px;
673
- }
674
- .vuu-density-touch {
675
- --salt-size-adornment: 12px;
676
- --salt-size-bar: 8px;
677
- --salt-size-base: 44px;
678
- --salt-size-border: 1px;
679
- --salt-size-icon: 16px;
680
- --salt-size-indicator: 4px;
681
- --salt-size-selectable: 18px;
682
- --salt-size-bar-strong: 16px;
683
- --salt-size-bar-small: 2px;
684
- --salt-size-border-strong: 2px;
685
- }
686
-
687
- /* css/foundations/spacing.css */
688
- .vuu-density-touch {
689
- --salt-spacing-100: 16px;
690
- }
691
- .vuu-density-low {
692
- --salt-spacing-100: 12px;
693
- }
694
- .vuu-density-medium {
695
- --salt-spacing-100: 8px;
696
- }
697
- .vuu-density-high {
698
- --salt-spacing-100: 4px;
699
- }
700
- .vuu-density-touch,
701
- .vuu-density-low,
702
- .vuu-density-medium,
703
- .vuu-density-high {
704
- --salt-spacing-25: calc(0.25 * var(--salt-spacing-100));
705
- --salt-spacing-50: calc(0.5 * var(--salt-spacing-100));
706
- --salt-spacing-75: calc(0.75 * var(--salt-spacing-100));
707
- --salt-spacing-150: calc(1.5 * var(--salt-spacing-100));
708
- --salt-spacing-200: calc(2 * var(--salt-spacing-100));
709
- --salt-spacing-250: calc(2.5 * var(--salt-spacing-100));
710
- --salt-spacing-300: calc(3 * var(--salt-spacing-100));
711
- --salt-spacing-350: calc(3.5 * var(--salt-spacing-100));
712
- --salt-spacing-400: calc(4 * var(--salt-spacing-100));
713
- }
714
-
715
- /* css/foundations/typography.css */
716
- .vuu-theme {
717
- --salt-typography-fontFamily: "Nunito Sans";
718
- --salt-typography-fontFamily-code: "Sometype Mono";
719
- --salt-typography-fontWeight-light: 300;
720
- --salt-typography-fontWeight-regular: 400;
721
- --salt-typography-fontWeight-medium: 500;
722
- --salt-typography-fontWeight-semiBold: 600;
723
- --salt-typography-fontWeight-bold: 700;
724
- --salt-typography-fontWeight-extraBold: 800;
725
- }
726
-
727
- /* css/foundations/zindex.css */
728
- .vuu-density-touch,
729
- .vuu-density-low,
730
- .vuu-density-medium,
731
- .vuu-density-high {
732
- --salt-zIndex-default: 1;
733
- --salt-zIndex-popout: 1000;
734
- --salt-zIndex-appHeader: 1100;
735
- --salt-zIndex-drawer: 1200;
736
- --salt-zIndex-modal: 1300;
737
- --salt-zIndex-notification: 1400;
738
- --salt-zIndex-dragObject: 1420;
739
- --salt-zIndex-contextMenu: 1450;
740
- --salt-zIndex-flyover: 1500;
741
- }
742
-
743
- /* css/palette/accent.css */
744
- .vuu-theme[data-mode=light] {
745
- --salt-palette-accent-background: var(--salt-color-blue-500);
746
- --salt-palette-accent-border: var(--salt-color-blue-500);
747
- --salt-palette-accent-foreground: var(--salt-color-white);
748
- }
749
- .vuu-theme[data-mode=dark] {
750
- --salt-palette-accent-background: var(--salt-color-blue-500);
751
- --salt-palette-accent-border: var(--salt-color-blue-500);
752
- --salt-palette-accent-foreground: var(--salt-color-white);
753
- }
754
-
755
- /* css/palette/error.css */
756
- .vuu-theme[data-mode=light] {
757
- --salt-palette-error-background: var(--vuu-color-red-50);
758
- --salt-palette-error-background-selected: var(--salt-color-red-20);
759
- --salt-palette-error-border: var(--salt-color-red-500);
760
- --salt-palette-error-foreground: var(--vuu-color-white);
761
- }
762
- .vuu-theme[data-mode=dark] {
763
- --salt-palette-error-background: var(--salt-color-red-900);
764
- --salt-palette-error-background-selected: var(--salt-color-red-900);
765
- --salt-palette-error-border: var(--salt-color-red-500);
766
- --salt-palette-error-foreground: var(--salt-color-red-500);
767
- }
768
-
769
- /* css/palette/info.css */
770
- .vuu-theme[data-mode=light] {
771
- --salt-palette-info-background: var(--vuu-color-blue-60);
772
- --salt-palette-info-border: var(--salt-color-blue-500);
773
- --salt-palette-info-foreground: var(--vuu-color-white);
774
- }
775
- .vuu-theme[data-mode=dark] {
776
- --salt-palette-info-background: var(--salt-color-blue-900);
777
- --salt-palette-info-border: var(--salt-color-blue-500);
778
- --salt-palette-info-foreground: var(--salt-color-blue-500);
779
- }
780
-
781
- /* css/palette/interact.css */
782
- .vuu-theme[data-mode=light] {
783
- --salt-palette-interact-background: transparent;
784
- --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
785
- --salt-palette-interact-background-hover: var(--vuu-color-gray-10);
786
- --salt-palette-interact-background-active: var(--vuu-color-blue-40);
787
- --salt-palette-interact-background-disabled: var(--vuu-color-gray-35);
788
- --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-fade-background);
789
- --salt-palette-interact-border: var(--vuu-color-gray-45);
790
- --salt-palette-interact-border-active: var(--vuu-color-purple-10);
791
- --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-600-fade-fill);
792
- --salt-palette-interact-border-disabled: var(--salt-color-gray-200-fade-border);
793
- --salt-palette-interact-border-hover: var(--vuu-color-pink-10);
794
- --salt-palette-interact-border-readonly: var(--salt-color-gray-200-fade-border-readonly);
795
- --salt-palette-interact-foreground: var(--salt-color-gray-200);
796
- --salt-palette-interact-foreground-active: var(--vuu-color-purple-10);
797
- --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-fade-foreground);
798
- --salt-palette-interact-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
799
- --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
800
- --salt-palette-interact-outline: var(--vuu-color-purple-10);
801
- --salt-palette-interact-cta-background: var(--vuu-color-purple-10);
802
- --salt-palette-interact-cta-background-active: var(--vuu-color-purple-10);
803
- --salt-palette-interact-cta-background-disabled: var(--vuu-color-purple-20-fade-40);
804
- --salt-palette-interact-cta-background-hover: var(--vuu-color-pink-10);
805
- --salt-palette-interact-cta-foreground: var(--salt-color-white);
806
- --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
807
- --salt-palette-interact-cta-foreground-disabled: var(--vuu-color-white-fade-70);
808
- --salt-palette-interact-cta-foreground-hover: var(--vuu-color-gray-80);
809
- --salt-palette-interact-primary-background: var(--salt-color-gray-60);
810
- --salt-palette-interact-primary-background-active: var(--vuu-color-gray-50);
811
- --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background);
812
- --salt-palette-interact-primary-background-hover: var(--vuu-color-pink-10);
813
- --salt-palette-interact-primary-foreground: var(--vuu-color-gray-50);
814
- --salt-palette-interact-primary-foreground-active: var(--salt-color-white);
815
- --salt-palette-interact-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
816
- --salt-palette-interact-primary-foreground-hover: var(--vuu-color-gray-80);
817
- --salt-palette-interact-secondary-background: transparent;
818
- --salt-palette-interact-secondary-background-active: var(--vuu-color-purple-10);
819
- --salt-palette-interact-secondary-background-disabled: transparent;
820
- --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-40);
821
- --salt-palette-interact-secondary-foreground: var(--salt-color-gray-900);
822
- --salt-palette-interact-secondary-foreground-active: var(--salt-color-white);
823
- --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
824
- --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
825
- }
826
- .vuu-theme[data-mode=dark] {
827
- --salt-palette-interact-background: transparent;
828
- --salt-palette-interact-background-active: var(--salt-color-blue-700);
829
- --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
830
- --salt-palette-interact-background-hover: var(--salt-color-blue-800);
831
- --salt-palette-interact-background-disabled: transparent;
832
- --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-700-fade-background);
833
- --salt-palette-interact-border: var(--salt-color-gray-90);
834
- --salt-palette-interact-border-active: var(--salt-color-blue-100);
835
- --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-100-fade-fill);
836
- --salt-palette-interact-border-disabled: var(--salt-color-gray-90-fade-border);
837
- --salt-palette-interact-border-hover: var(--salt-color-blue-500);
838
- --salt-palette-interact-border-readonly: var(--salt-color-gray-90-fade-border-readonly);
839
- --salt-palette-interact-foreground: var(--salt-color-gray-90);
840
- --salt-palette-interact-foreground-active: var(--salt-color-blue-100);
841
- --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground);
842
- --salt-palette-interact-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
843
- --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
844
- --salt-palette-interact-outline: var(--vuu-color-pink-10);
845
- --salt-palette-interact-cta-background: var(--salt-color-blue-600);
846
- --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
847
- --salt-palette-interact-cta-background-disabled: var(--vuu-color-purple-20-fade-40);
848
- --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);
849
- --salt-palette-interact-cta-foreground: var(--salt-color-white);
850
- --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
851
- --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
852
- --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
853
- --salt-palette-interact-primary-background: var(--salt-color-gray-300);
854
- --salt-palette-interact-primary-background-active: var(--salt-color-gray-70);
855
- --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background);
856
- --salt-palette-interact-primary-background-hover: var(--salt-color-gray-200);
857
- --salt-palette-interact-primary-foreground: var(--salt-color-white);
858
- --salt-palette-interact-primary-foreground-active: var(--salt-color-gray-900);
859
- --salt-palette-interact-primary-foreground-disabled: var(--salt-color-white-fade-foreground);
860
- --salt-palette-interact-primary-foreground-hover: var(--salt-color-white);
861
- --salt-palette-interact-secondary-background: transparent;
862
- --salt-palette-interact-secondary-background-active: var(--salt-color-gray-70);
863
- --salt-palette-interact-secondary-background-disabled: transparent;
864
- --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-200);
865
- --salt-palette-interact-secondary-foreground: var(--salt-color-white);
866
- --salt-palette-interact-secondary-foreground-active: var(--salt-color-gray-900);
867
- --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);
868
- --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
869
- }
870
-
871
- /* css/palette/navigate.css */
872
- .vuu-theme[data-mode=light] {
873
- --salt-palette-navigate-primary-background-active: transparent;
874
- --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);
875
- --salt-palette-navigate-foreground-active: var(--salt-color-blue-700);
876
- --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
877
- --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
878
- --salt-palette-navigate-indicator-active: var(--vuu-color-purple-10);
879
- }
880
- .vuu-theme[data-mode=dark] {
881
- --salt-palette-navigate-primary-background-active: transparent;
882
- --salt-palette-navigate-foreground-hover: var(--salt-color-blue-200);
883
- --salt-palette-navigate-foreground-active: var(--salt-color-blue-300);
884
- --salt-palette-navigate-foreground-visited: var(--salt-color-purple-100);
885
- --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
886
- --salt-palette-navigate-indicator-active: var(--vuu-color-pink-10);
887
- }
888
-
889
- /* css/palette/negative.css */
890
- .vuu-theme[data-mode=light] {
891
- --salt-palette-negative-foreground: var(--salt-color-red-700);
892
- }
893
- .vuu-theme[data-mode=dark] {
894
- --salt-palette-negative-foreground: var(--salt-color-red-300);
895
- }
896
-
897
- /* css/palette/neutral.css */
898
- .vuu-theme[data-mode=light] {
899
- --salt-palette-neutral-primary-background: var(--salt-color-white);
900
- --salt-palette-neutral-primary-background-disabled: var(--vuu-color-gray-30);
901
- --salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
902
- --salt-palette-neutral-primary-foreground: var(--vuu-color-gray-80);
903
- --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
904
- --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary);
905
- --salt-palette-neutral-primary-border: var(--vuu-color-purple-10);
906
- --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-50-fade-border);
907
- --salt-palette-neutral-secondary-background: var(--vuu-color-gray-25);
908
- --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background);
909
- --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly);
910
- --salt-palette-neutral-secondary-border: var(--vuu-color-gray-50);
911
- --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-50-fade-border);
912
- --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
913
- --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
914
- --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
915
- --salt-palette-neutral-secondary-separator: var(--vuu-color-gray-05);
916
- --salt-palette-neutral-tertiary-separator: var(--vuu-color-gray-03);
917
- }
918
- .vuu-theme[data-mode=dark] {
919
- --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
920
- --salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background);
921
- --salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly);
922
- --salt-palette-neutral-primary-border: var(--salt-color-gray-300);
923
- --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-300-fade-border);
924
- --salt-palette-neutral-primary-foreground: var(--salt-color-white);
925
- --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-white-fade-foreground);
926
- --salt-palette-neutral-primary-separator: var(--salt-color-white-fade-separatorOpacity-primary);
927
- --salt-palette-neutral-secondary-background: var(--salt-color-gray-600);
928
- --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-600-fade-background);
929
- --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-600-fade-background-readonly);
930
- --salt-palette-neutral-secondary-border: var(--salt-color-gray-300);
931
- --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-300-fade-border);
932
- --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-70);
933
- --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground);
934
- --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
935
- --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
936
- --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
937
- }
938
-
939
- /* css/palette/opacity.css */
940
- .vuu-theme {
941
- --salt-palette-opacity-backdrop: var(--salt-opacity-70);
942
- --salt-palette-opacity-disabled: var(--salt-opacity-40);
943
- --salt-palette-opacity-background-readonly: var(--salt-opacity-0);
944
- --salt-palette-opacity-border-readonly: var(--salt-opacity-15);
945
- --salt-palette-opacity-primary-border: var(--salt-opacity-40);
946
- --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
947
- --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
948
- }
949
-
950
- /* css/palette/positive.css */
951
- .vuu-theme[data-mode=light] {
952
- --salt-palette-positive-foreground: var(--salt-color-green-700);
953
- }
954
- .vuu-theme[data-mode=dark] {
955
- --salt-palette-positive-foreground: var(--salt-color-green-300);
956
- }
957
-
958
- /* css/palette/success.css */
959
- .vuu-theme[data-mode=light] {
960
- --salt-palette-success-background: var(--vuu-color-green-60);
961
- --salt-palette-success-background-selected: var(--salt-color-green-20);
962
- --salt-palette-success-border: var(--salt-color-green-500);
963
- --salt-palette-success-foreground: var(--vuu-color-white);
964
- }
965
- .vuu-theme[data-mode=dark] {
966
- --salt-palette-success-background: var(--vuu-color-green-60);
967
- --salt-palette-success-background-selected: var(--salt-color-green-900);
968
- --salt-palette-success-border: var(--salt-color-green-400);
969
- --salt-palette-success-foreground: var(--vuu-color-white);
970
- }
971
-
972
- /* css/palette/warning.css */
973
- .vuu-theme[data-mode=light] {
974
- --salt-palette-warning-background: var(--vuu-color-orange-50);
975
- --salt-palette-warning-background-selected: var(--salt-color-orange-20);
976
- --salt-palette-warning-border: var(--salt-color-orange-700);
977
- --salt-palette-warning-foreground: var(--salt-content-primary-foreground);
978
- }
979
- .vuu-theme[data-mode=dark] {
980
- --salt-palette-warning-background: var(--salt-color-orange-900);
981
- --salt-palette-warning-background-selected: var(--salt-color-orange-900);
982
- --salt-palette-warning-border: var(--salt-color-orange-500);
983
- --salt-palette-warning-foreground: var(--salt-color-orange-500);
984
- }
985
-
986
- /* css/characteristics/accent.css */
987
- .vuu-theme {
988
- --salt-accent-background: var(--salt-palette-accent-background);
989
- --salt-accent-borderColor: var(--salt-palette-accent-border);
990
- --salt-accent-foreground: var(--salt-palette-accent-foreground);
991
- }
992
-
993
- /* css/characteristics/actionable.css */
994
- .vuu-theme {
995
- --salt-actionable-cursor-hover: pointer;
996
- --salt-actionable-cursor-active: pointer;
997
- --salt-actionable-cursor-disabled: not-allowed;
998
- --salt-actionable-primary-foreground: var(--salt-palette-interact-primary-foreground);
999
- --salt-actionable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1000
- --salt-actionable-primary-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1001
- --salt-actionable-primary-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
1002
- --salt-actionable-primary-background: var(--salt-palette-interact-primary-background);
1003
- --salt-actionable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
1004
- --salt-actionable-primary-background-active: var(--salt-palette-interact-primary-background-active);
1005
- --salt-actionable-primary-background-disabled: var(--salt-palette-interact-primary-background-disabled);
1006
- --salt-actionable-cta-foreground: var(--salt-palette-interact-cta-foreground);
1007
- --salt-actionable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
1008
- --salt-actionable-cta-foreground-active: var(--salt-palette-interact-cta-foreground-active);
1009
- --salt-actionable-cta-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1010
- --salt-actionable-cta-background: var(--salt-palette-interact-cta-background);
1011
- --salt-actionable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
1012
- --salt-actionable-cta-background-active: var(--salt-palette-interact-cta-background-active);
1013
- --salt-actionable-cta-background-disabled: var(--salt-palette-interact-cta-background-disabled);
1014
- --salt-actionable-secondary-foreground: var(--salt-palette-interact-secondary-foreground);
1015
- --salt-actionable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
1016
- --salt-actionable-secondary-foreground-active: var(--salt-palette-interact-secondary-foreground-active);
1017
- --salt-actionable-secondary-foreground-disabled: var(--salt-palette-interact-secondary-foreground-disabled);
1018
- --salt-actionable-secondary-background: var(--salt-palette-interact-secondary-background);
1019
- --salt-actionable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
1020
- --salt-actionable-secondary-background-active: var(--salt-palette-interact-secondary-background-active);
1021
- --salt-actionable-secondary-background-disabled: var(--salt-palette-interact-secondary-background-disabled);
1022
- }
1023
-
1024
- /* css/characteristics/container.css */
1025
- .vuu-theme {
1026
- --salt-container-borderStyle: solid;
1027
- --salt-container-primary-background: var(--salt-palette-neutral-primary-background);
1028
- --salt-container-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
1029
- --salt-container-primary-borderColor: var(--salt-palette-neutral-primary-border);
1030
- --salt-container-primary-borderColor-disabled: var(--salt-palette-neutral-primary-border-disabled);
1031
- --salt-container-secondary-background: var(--salt-palette-neutral-secondary-background);
1032
- --salt-container-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
1033
- --salt-container-secondary-borderColor: var(--salt-palette-neutral-secondary-border);
1034
- --salt-container-secondary-borderColor-disabled: var(--salt-palette-neutral-secondary-border-disabled);
1035
- }
1036
-
1037
- /* css/characteristics/draggable.css */
1038
- .vuu-theme {
1039
- --salt-draggable-horizontal-cursor-hover: row-resize;
1040
- --salt-draggable-horizontal-cursor-active: row-resize;
1041
- --salt-draggable-vertical-cursor-hover: col-resize;
1042
- --salt-draggable-vertical-cursor-active: col-resize;
1043
- --salt-draggable-grab-cursor-hover: grab;
1044
- --salt-draggable-grab-cursor-active: grabbing;
1045
- }
1046
-
1047
- /* css/characteristics/target.css */
1048
- .vuu-theme {
1049
- --salt-target-background-hover: var(--salt-palette-interact-background-hover);
1050
- --salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);
1051
- --salt-target-borderStyle: dashed;
1052
- --salt-target-borderStyle-hover: solid;
1053
- --salt-target-borderStyle-disabled: dashed;
1054
- --salt-target-cursor-disabled: not-allowed;
1055
- }
1056
-
1057
- /* css/characteristics/editable.css */
1058
- .vuu-theme {
1059
- --salt-editable-cursor-hover: text;
1060
- --salt-editable-cursor-active: text;
1061
- --salt-editable-cursor-disabled: not-allowed;
1062
- --salt-editable-cursor-readonly: text;
1063
- --salt-editable-borderStyle: solid;
1064
- --salt-editable-borderStyle-hover: solid;
1065
- --salt-editable-borderStyle-active: solid;
1066
- --salt-editable-borderStyle-disabled: solid;
1067
- --salt-editable-borderStyle-readonly: solid;
1068
- --salt-editable-borderWidth-active: 2px;
1069
- --salt-editable-borderColor: var(--salt-palette-interact-border);
1070
- --salt-editable-borderColor-active: var(--salt-palette-interact-border-active);
1071
- --salt-editable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
1072
- --salt-editable-borderColor-hover: var(--salt-palette-interact-border-hover);
1073
- --salt-editable-borderColor-readonly: var(--salt-palette-interact-border-readonly);
1074
- --salt-editable-primary-background: var(--salt-palette-neutral-primary-background);
1075
- --salt-editable-primary-background-active: var(--salt-palette-neutral-primary-background);
1076
- --salt-editable-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
1077
- --salt-editable-primary-background-hover: var(--salt-palette-neutral-primary-background);
1078
- --salt-editable-primary-background-readonly: var(--salt-palette-neutral-primary-background-readonly);
1079
- --salt-editable-secondary-background: var(--salt-palette-neutral-secondary-background);
1080
- --salt-editable-secondary-background-active: var(--salt-palette-neutral-secondary-background);
1081
- --salt-editable-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
1082
- --salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);
1083
- --salt-editable-secondary-background-readonly: var(--salt-palette-neutral-secondary-background-readonly);
1084
- --salt-editable-help-fontStyle: italic;
1085
- }
1086
-
1087
- /* css/characteristics/focused.css */
1088
- .vuu-theme {
1089
- --salt-focused-outlineColor: var(--salt-palette-interact-outline);
1090
- --salt-focused-outlineStyle: dotted;
1091
- --salt-focused-outlineWidth: 2px;
1092
- --salt-focused-outlineInset: 0;
1093
- --salt-focused-outlineOffset: 0;
1094
- --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
1095
- }
1096
- .saltFocusVisible:after,
1097
- .focused:focus:after,
1098
- .focused:focus-visible:after {
1099
- content: "";
1100
- inset: var(--salt-focused-outlineInset);
1101
- outline-color: var(--salt-focused-outlineColor);
1102
- outline-offset: var(--salt-focused-outlineOffset);
1103
- outline-style: var(--salt-focused-outlineStyle);
1104
- outline-width: var(--salt-focused-outlineWidth);
1105
- position: absolute;
1106
- }
1107
-
1108
- /* css/characteristics/navigable.css */
1109
- .vuu-theme {
1110
- --salt-navigable-cursor-active: pointer;
1111
- --salt-navigable-cursor-hover: pointer;
1112
- --salt-navigable-cursor-disabled: not-allowed;
1113
- --salt-navigable-cursor-edit: text;
1114
- --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
1115
- --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
1116
- --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
1117
- --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
1118
- --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
1119
- --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
1120
- --salt-navigable-background-hover: var(--salt-palette-navigate-primary-background-hover);
1121
- --salt-navigable-textDecoration: underline;
1122
- --salt-navigable-textDecoration-hover: none;
1123
- --salt-navigable-textDecoration-selected: underline;
1124
- }
1125
-
1126
- /* css/characteristics/overlayable.css */
1127
- .vuu-theme {
1128
- --salt-overlayable-shadow-scroll: var(--salt-shadow-100);
1129
- --salt-overlayable-shadow-region: var(--salt-shadow-200);
1130
- --salt-overlayable-shadow: var(--salt-shadow-200);
1131
- --salt-overlayable-shadow-hover: var(--salt-shadow-300);
1132
- --salt-overlayable-shadow-popout: var(--salt-shadow-400);
1133
- --salt-overlayable-shadow-drag: var(--salt-shadow-400);
1134
- --salt-overlayable-shadow-modal: var(--salt-shadow-500);
1135
- --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
1136
- }
1137
-
1138
- /* css/characteristics/selectable.css */
1139
- .vuu-theme {
1140
- --salt-selectable-cursor-hover: pointer;
1141
- --salt-selectable-cursor-selected: pointer;
1142
- --salt-selectable-cursor-blurSelected: pointer;
1143
- --salt-selectable-cursor-disabled: not-allowed;
1144
- --salt-selectable-cursor-readonly: not-allowed;
1145
- --salt-selectable-borderStyle: solid;
1146
- --salt-selectable-borderStyle-hover: solid;
1147
- --salt-selectable-borderStyle-selected: solid;
1148
- --salt-selectable-borderStyle-blurSelected: solid;
1149
- --salt-selectable-borderColor: var(--salt-palette-interact-border);
1150
- --salt-selectable-borderColor-hover: var(--salt-palette-interact-border-hover);
1151
- --salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
1152
- --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);
1153
- --salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
1154
- --salt-selectable-borderColor-readonly: var(--salt-palette-interact-border-readonly);
1155
- --salt-selectable-foreground: var(--salt-palette-interact-foreground);
1156
- --salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1157
- --salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);
1158
- --salt-selectable-foreground-selected: var(--salt-palette-interact-foreground-active);
1159
- --salt-selectable-foreground-selectedDisabled: var(--salt-palette-interact-foreground-activeDisabled);
1160
- --salt-selectable-background: var(--salt-palette-interact-background);
1161
- --salt-selectable-background-hover: var(--salt-palette-interact-background-hover);
1162
- --salt-selectable-background-selected: var(--salt-palette-interact-background-active);
1163
- --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
1164
- --salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);
1165
- --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
1166
- }
1167
-
1168
- /* css/characteristics/separable.css */
1169
- .vuu-theme {
1170
- --salt-separable-borderStyle: solid;
1171
- --salt-separable-primary-borderColor: var(--salt-palette-neutral-primary-separator);
1172
- --salt-separable-secondary-borderColor: var(--salt-palette-neutral-secondary-separator);
1173
- --salt-separable-tertiary-borderColor: var(--salt-palette-neutral-tertiary-separator);
1174
- }
1175
-
1176
- /* css/characteristics/status.css */
1177
- .vuu-theme {
1178
- --salt-status-info-foreground: var(--salt-palette-info-foreground);
1179
- --salt-status-success-foreground: var(--salt-palette-success-foreground);
1180
- --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
1181
- --salt-status-error-foreground: var(--salt-palette-error-foreground);
1182
- --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
1183
- --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
1184
- --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
1185
- --salt-status-info-borderColor: var(--salt-palette-info-border);
1186
- --salt-status-success-borderColor: var(--salt-palette-success-border);
1187
- --salt-status-warning-borderColor: var(--salt-palette-warning-border);
1188
- --salt-status-error-borderColor: var(--salt-palette-error-border);
1189
- --salt-status-info-background: var(--salt-palette-info-background);
1190
- --salt-status-success-background: var(--salt-palette-success-background);
1191
- --salt-status-warning-background: var(--salt-palette-warning-background);
1192
- --salt-status-error-background: var(--salt-palette-error-background);
1193
- --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
1194
- --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
1195
- --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
1196
- }
1197
-
1198
- /* css/characteristics/text.css */
1199
- .vuu-theme {
1200
- --salt-text-letterSpacing: 0;
1201
- --salt-text-textAlign: left;
1202
- --salt-text-textAlign-embedded: center;
1203
- --salt-text-textDecoration: none;
1204
- --salt-text-textTransform: none;
1205
- --salt-text-action-letterSpacing: 0.6px;
1206
- --salt-text-action-textTransform: uppercase;
1207
- --salt-text-action-textAlign: center;
1208
- --salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
1209
- --salt-text-fontFamily: var(--salt-typography-fontFamily);
1210
- --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
1211
- --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
1212
- --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1213
- --salt-text-notation-fontFamily: var(--salt-typography-fontFamily);
1214
- --salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
1215
- --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
1216
- --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1217
- --salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
1218
- --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
1219
- --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
1220
- --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
1221
- --salt-text-h2-fontFamily: var(--salt-typography-fontFamily);
1222
- --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1223
- --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1224
- --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1225
- --salt-text-h3-fontFamily: var(--salt-typography-fontFamily);
1226
- --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1227
- --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1228
- --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1229
- --salt-text-h4-fontFamily: var(--salt-typography-fontFamily);
1230
- --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
1231
- --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
1232
- --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1233
- --salt-text-label-fontFamily: var(--salt-typography-fontFamily);
1234
- --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
1235
- --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
1236
- --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1237
- --salt-text-display1-fontFamily: var(--salt-typography-fontFamily);
1238
- --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
1239
- --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1240
- --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
1241
- --salt-text-display2-fontFamily: var(--salt-typography-fontFamily);
1242
- --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1243
- --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1244
- --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1245
- --salt-text-display3-fontFamily: var(--salt-typography-fontFamily);
1246
- --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1247
- --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1248
- --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1249
- --salt-text-code-fontFamily: var(--salt-typography-fontFamily-code);
1250
- }
1251
- .vuu-density-touch {
1252
- --salt-text-h1-fontSize: 42px;
1253
- --salt-text-h1-lineHeight: 54px;
1254
- --salt-text-h2-fontSize: 32px;
1255
- --salt-text-h2-lineHeight: 42px;
1256
- --salt-text-h3-fontSize: 24px;
1257
- --salt-text-h3-lineHeight: 32px;
1258
- --salt-text-h4-fontSize: 16px;
1259
- --salt-text-h4-lineHeight: 20px;
1260
- --salt-text-label-fontSize: 14px;
1261
- --salt-text-label-lineHeight: 18px;
1262
- --salt-text-fontSize: 16px;
1263
- --salt-text-lineHeight: 20px;
1264
- --salt-text-minHeight: 20px;
1265
- --salt-text-display1-fontSize: 84px;
1266
- --salt-text-display1-lineHeight: 109px;
1267
- --salt-text-display2-fontSize: 58px;
1268
- --salt-text-display2-lineHeight: 76px;
1269
- --salt-text-display3-fontSize: 42px;
1270
- --salt-text-display3-lineHeight: 54px;
1271
- --salt-text-notation-fontSize: 14px;
1272
- --salt-text-notation-lineHeight: 18px;
1273
- }
1274
- .vuu-density-low {
1275
- --salt-text-h1-fontSize: 32px;
1276
- --salt-text-h1-lineHeight: 42px;
1277
- --salt-text-h2-fontSize: 24px;
1278
- --salt-text-h2-lineHeight: 32px;
1279
- --salt-text-h3-fontSize: 18px;
1280
- --salt-text-h3-lineHeight: 24px;
1281
- --salt-text-h4-fontSize: 14px;
1282
- --salt-text-h4-lineHeight: 18px;
1283
- --salt-text-label-fontSize: 12px;
1284
- --salt-text-label-lineHeight: 16px;
1285
- --salt-text-fontSize: 14px;
1286
- --salt-text-lineHeight: 18px;
1287
- --salt-text-minHeight: 18px;
1288
- --salt-text-display1-fontSize: 68px;
1289
- --salt-text-display1-lineHeight: 88px;
1290
- --salt-text-display2-fontSize: 46px;
1291
- --salt-text-display2-lineHeight: 60px;
1292
- --salt-text-display3-fontSize: 32px;
1293
- --salt-text-display3-lineHeight: 42px;
1294
- --salt-text-notation-fontSize: 12px;
1295
- --salt-text-notation-lineHeight: 16px;
1296
- }
1297
- .vuu-density-medium {
1298
- --salt-text-h1-fontSize: 24px;
1299
- --salt-text-h1-lineHeight: 32px;
1300
- --salt-text-h2-fontSize: 18px;
1301
- --salt-text-h2-lineHeight: 24px;
1302
- --salt-text-h3-fontSize: 14px;
1303
- --salt-text-h3-lineHeight: 18px;
1304
- --salt-text-h4-fontSize: 12px;
1305
- --salt-text-h4-lineHeight: 16px;
1306
- --salt-text-label-fontSize: 11px;
1307
- --salt-text-label-lineHeight: 14px;
1308
- --salt-text-fontSize: 12px;
1309
- --salt-text-lineHeight: 16px;
1310
- --salt-text-minHeight: 16px;
1311
- --salt-text-display1-fontSize: 54px;
1312
- --salt-text-display1-lineHeight: 70px;
1313
- --salt-text-display2-fontSize: 36px;
1314
- --salt-text-display2-lineHeight: 47px;
1315
- --salt-text-display3-fontSize: 24px;
1316
- --salt-text-display3-lineHeight: 32px;
1317
- --salt-text-notation-fontSize: 10px;
1318
- --salt-text-notation-lineHeight: 13px;
1319
- }
1320
- .vuu-density-high {
1321
- --salt-text-h1-fontSize: 18px;
1322
- --salt-text-h1-lineHeight: 24px;
1323
- --salt-text-h2-fontSize: 14px;
1324
- --salt-text-h2-lineHeight: 18px;
1325
- --salt-text-h3-fontSize: 12px;
1326
- --salt-text-h3-lineHeight: 16px;
1327
- --salt-text-h4-fontSize: 11px;
1328
- --salt-text-h4-lineHeight: 14px;
1329
- --salt-text-label-fontSize: 10px;
1330
- --salt-text-label-lineHeight: 13px;
1331
- --salt-text-fontSize: 12px;
1332
- --salt-text-lineHeight: 16px;
1333
- --salt-text-minHeight: 16px;
1334
- --salt-text-display1-fontSize: 42px;
1335
- --salt-text-display1-lineHeight: 54px;
1336
- --salt-text-display2-fontSize: 28px;
1337
- --salt-text-display2-lineHeight: 36px;
1338
- --salt-text-display3-fontSize: 18px;
1339
- --salt-text-display3-lineHeight: 24px;
1340
- --salt-text-notation-fontSize: 8px;
1341
- --salt-text-notation-lineHeight: 10px;
1342
- }
1343
-
1344
- /* css/characteristics/content.css */
1345
- .vuu-theme {
1346
- --salt-content-primary-foreground: var(--salt-palette-neutral-primary-foreground);
1347
- --salt-content-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1348
- --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
1349
- --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1350
- --salt-content-foreground-hover: var(--salt-palette-navigate-foreground-hover);
1351
- --salt-content-foreground-active: var(--salt-palette-navigate-foreground-active);
1352
- --salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);
1353
- --salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
1354
- }
1355
-
1356
- /* css/characteristics/track.css */
1357
- .vuu-theme {
1358
- --salt-track-borderStyle: solid;
1359
- --salt-track-borderStyle-active: solid;
1360
- --salt-track-borderStyle-complete: solid;
1361
- --salt-track-borderStyle-incomplete: dotted;
1362
- --salt-track-borderColor: var(--salt-palette-neutral-secondary-border);
1363
- }
1364
-
1365
- /* css/deprecated/foundations.css */
1366
- .vuu-theme {
1367
- --salt-delay-instant: 100ms;
1368
- --salt-delay-perceptible: 300ms;
1369
- --salt-delay-notable: 1000ms;
1370
- --salt-delay-cutoff: 10000ms;
1371
- --salt-size-icon-base: var(--salt-icon-size-base);
1372
- --salt-opacity-1: 0.15;
1373
- --salt-opacity-2: 0.25;
1374
- --salt-opacity-3: 0.4;
1375
- --salt-opacity-4: 0.7;
1376
- --salt-shadow-0: none;
1377
- --salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color);
1378
- --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
1379
- --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
1380
- --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
1381
- --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
1382
- }
1383
- .vuu-theme[data-mode=light] {
1384
- --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
1385
- --salt-shadow-2-color: rgba(0, 0, 0, 0.1);
1386
- --salt-shadow-3-color: rgba(0, 0, 0, 0.15);
1387
- --salt-shadow-4-color: rgba(0, 0, 0, 0.2);
1388
- --salt-shadow-5-color: rgba(0, 0, 0, 0.3);
1389
- }
1390
- .vuu-theme[data-mode=dark] {
1391
- --salt-shadow-1-color: rgba(0, 0, 0, 0.5);
1392
- --salt-shadow-2-color: rgba(0, 0, 0, 0.5);
1393
- --salt-shadow-3-color: rgba(0, 0, 0, 0.55);
1394
- --salt-shadow-4-color: rgba(0, 0, 0, 0.55);
1395
- --salt-shadow-5-color: rgba(0, 0, 0, 0.65);
1396
- }
1397
- .vuu-density-touch,
1398
- .vuu-density-low,
1399
- .vuu-density-medium,
1400
- .vuu-density-high {
1401
- --salt-size-selection: var(--salt-size-selectable);
1402
- --salt-size-brandBar: 4px;
1403
- --salt-size-graphic-small: 12px;
1404
- --salt-size-graphic-medium: 24px;
1405
- --salt-size-graphic-large: 48px;
1406
- --salt-size-divider-height: var(--salt-size-separator-height);
1407
- --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
1408
- --salt-size-detail: var(--salt-size-compact);
1409
- --salt-size-basis-unit: 4px;
1410
- --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
1411
- --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
1412
- --salt-size-separator-strokeWidth: 1px;
1413
- --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
1414
- --salt-size-sharktooth-height: 5px;
1415
- --salt-size-sharktooth-width: 10px;
1416
- --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
1417
- --salt-zIndex-docked: 1050;
1418
- }
1419
- .vuu-density-high {
1420
- --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
1421
- --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
1422
- --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
1423
- --salt-icon-size-base: 10px;
1424
- --salt-icon-size-status-adornment: 6px;
1425
- }
1426
- .vuu-density-medium {
1427
- --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
1428
- --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
1429
- --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
1430
- --salt-icon-size-base: 12px;
1431
- --salt-icon-size-status-adornment: 8px;
1432
- }
1433
- .vuu-density-low {
1434
- --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
1435
- --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
1436
- --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
1437
- --salt-icon-size-base: 14px;
1438
- --salt-icon-size-status-adornment: 10px;
1439
- }
1440
- .vuu-density-touch {
1441
- --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
1442
- --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
1443
- --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
1444
- --salt-icon-size-base: 16px;
1445
- --salt-icon-size-status-adornment: 12px;
1446
- }
1447
-
1448
- /* css/theme.css */
1449
-
1450
- /* css/components/button.css */
1451
- .vuu-theme {
1452
- --saltButton-borderRadius: 6px;
1453
- --saltButton-padding: var(--salt-spacing-400);
1454
- }
1455
- .vuu-theme .saltButton {
1456
- --vuu-icon-color: var(--vuuButtonIcon-color, var(--button-text-color));
1457
- gap: var(--salt-spacing-200);
1458
- white-space: nowrap;
1459
- }
1460
- .vuu-theme .saltButton:active:not(:disabled) {
1461
- --vuu-icon-color: var(--button-text-color-active);
1462
- }
1463
- .vuu-theme .saltButton:hover:not(.saltButton-disabled, .saltButton-active, :active) {
1464
- --vuu-icon-color: var(--button-text-color-hover);
1465
- }
1466
- .vuu-theme .saltButton-active {
1467
- --vuu-icon-color: var(--button-text-color-active);
1468
- }
1469
- .vuu-theme .saltButton-disabled {
1470
- --vuu-icon-color: var(--button-text-color-disabled);
1471
- }
1472
- .vuu-theme .saltButton-primary {
1473
- --saltButton-borderColor: var(--vuuButton-borderColor,var(--salt-actionable-primary-foreground));
1474
- --saltButton-borderWidth: 1px;
1475
- --saltButton-borderStyle: solid;
1476
- }
1477
- .vuu-theme .saltButton-primary:not(:disabled):not(:active):not(.saltButton-active):hover {
1478
- --saltButton-borderColor: var(--vuuButton-borderColor, var(--salt-actionable-primary-background-hover));
1479
- }
1480
-
1481
- /* css/components/checkbox.css */
1482
- .vuu-theme .saltCheckbox {
1483
- --checkbox-background: white;
1484
- --checkbox-borderColor: var(--salt-selectable-borderColor);
1485
- --vuu-icon-color: white;
1486
- --vuu-icon-left: -1px;
1487
- --vuu-icon-top: -1px;
1488
- }
1489
- .vuu-theme .saltCheckbox:has(.saltCheckboxIcon-checked) {
1490
- --checkbox-background: var(--salt-actionable-cta-background);
1491
- --checkbox-borderColor: var( --salt-container-primary-borderColor);
1492
- }
1493
- .vuu-theme .saltCheckbox:hover {
1494
- --vuu-icon-color:var(--salt-actionable-primary-background-hover);
1495
- --checkbox-background: var(--vuu-color-pink-10-fade-20);
1496
- --checkbox-borderColor: var(--salt-selectable-borderColor-hover);
1497
- }
1498
- .vuu-theme .saltCheckboxIcon {
1499
- background: var(--checkbox-background);
1500
- border-color: var(--checkbox-borderColor) !important;
1501
- border-radius: 3px;
1502
- border-style: solid;
1503
- border-width: 1px;
1504
- }
1505
- .vuu-theme .saltCheckboxIcon-checked.saltCheckboxIcon-disabled,
1506
- .vuu-theme .saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {
1507
- background-color: var(--salt-selectable-background-disabled);
1508
- border-color: transparent;
1509
- }
1510
- .vuu-theme .saltCheckboxIcon-checked:after {
1511
- content: "";
1512
- background-color: var(--vuu-icon-color);
1513
- left: var(--vuu-icon-left, auto);
1514
- --vuu-icon-size: calc(var(--salt-size-icon) + 2px);
1515
- height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
1516
- mask: var(--vuu-svg-tick) center center/var(--vuu-icon-size) var(--vuu-icon-size);
1517
- -webkit-mask: var(--vuu-svg-tick) center center/var(--vuu-icon-size) var(--vuu-icon-size);
1518
- mask-repeat: no-repeat;
1519
- -webkit-mask-repeat: no-repeat;
1520
- position: absolute;
1521
- top: var(--vuu-icon-top, auto);
1522
- width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
1523
- }
1524
-
1525
- /* css/components/date-input.css */
1526
- .vuu-theme .vuuDateInput {
1527
- border-radius: 6px;
1528
- }
1529
-
1530
- /* css/components/filters.css */
1531
- .vuu-theme .vuuFilterPill {
1532
- --vuuSplitButton-borderRadius: var(--salt-size-base);
1533
- }
1534
-
1535
- /* css/components/icon.css */
1536
- .vuu-theme .saltIcon {
1537
- display: none;
1538
- }
1539
-
1540
- /* css/components/input.css */
1541
- .vuu-theme .saltInput-activationIndicator {
1542
- display: none;
1543
- }
1544
- .vuu-theme .saltInput:hover {
1545
- background: inherit;
1546
- }
1547
- .vuu-theme .saltInput-primary {
1548
- border: solid 1px var(--input-borderColor, var(--salt-editable-borderColor));
1549
- border-radius: 6px;
1550
- }
1551
- .vuu-theme .saltInput-focused:hover,
1552
- .vuu-theme .saltInput-focused {
1553
- --input-borderColor: var(--vuu-color-purple-10);
1554
- }
1555
-
1556
- /* css/components/split-button.css */
1557
- .vuu-theme .vuuSplitButton {
1558
- --vuuSplitButton-borderRadius: 6px;
1559
- }
1560
-
1561
- /* css/components/splitter.css */
1562
- .vuu-theme .vuuSplitter {
1563
- --splitter-background: var(--vuu-color-gray-05);
1564
- --splitter-size: 9px;
1565
- --splitter-borderColor: white;
1566
- --splitter-borderStyle: none solid none solid;
1567
- --splitter-borderWidth: 4px;
1568
- }
1569
- .vuu-theme .vuuSplitter-column {
1570
- --splitter-borderStyle: solid none solid none;
1571
- }
1572
-
1573
- /* css/components/switch.css */
1574
- .vuu-theme .saltSwitch {
1575
- --switch-color: var(--vuu-color-gray-45);
1576
- --vuu-icon-left: -1px;
1577
- }
1578
- .vuu-theme .saltSwitch-track {
1579
- background-color: var(--switch-color);
1580
- border: none;
1581
- border-radius: 4px;
1582
- height: 14px;
1583
- padding: 0 2px;
1584
- width: 26px;
1585
- }
1586
- .vuu-theme .saltSwitch:not(.saltSwitch-disabled):hover .saltSwitch-track {
1587
- --switch-color: var(--vuu-color-pink-10);
1588
- }
1589
- .vuu-theme .saltSwitch-thumb {
1590
- background-color: var(--vuu-color-white);
1591
- border: none;
1592
- border-radius: 3px;
1593
- height: 10px;
1594
- margin: 0;
1595
- width: 10px;
1596
- }
1597
- .vuu-theme .saltSwitch-checked {
1598
- --switch-color: var(--vuu-color-purple-10);
1599
- }
1600
- .vuu-theme .saltSwitch-disabled {
1601
- --switch-color: var(--vuu-color-gray-30);
1602
- }
1603
- .vuu-theme .saltSwitch-checked .saltSwitch-thumb,
1604
- .vuu-theme .saltSwitch-checked:hover .saltSwitch-thumb {
1605
- background-color: white;
1606
- transform: translateX(calc(100% + 2px));
1607
- }
1608
- .vuu-theme .saltSwitch-checked .saltSwitch-thumb:after {
1609
- background-color: var(--switch-color);
1610
- content: "";
1611
- left: var(--vuu-icon-left, auto);
1612
- height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
1613
- mask: var(--vuu-svg-tick) center center/var(--vuu-icon-size) var(--vuu-icon-size);
1614
- -webkit-mask: var(--vuu-svg-tick) center center/var(--vuu-icon-size) var(--vuu-icon-size);
1615
- mask-repeat: no-repeat;
1616
- -webkit-mask-repeat: no-repeat;
1617
- position: absolute;
1618
- top: var(--vuu-icon-top, auto);
1619
- width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
1620
- }
1621
-
1622
- /* css/components/table.css */
1623
- .vuu-theme {
1624
- --vuuTableRow-selectionBlock-borderColor: var(--vuu-color-purple-10);
1625
- }
1626
- .vuu-theme.vuu-density-high {
1627
- --vuu-table-row-height: 20px;
1628
- }
1629
- .vuu-theme.vuu-density-medium {
1630
- --vuu-table-row-height: 28px;
1631
- }
1632
- .vuu-theme.vuu-density-low {
1633
- --vuu-table-row-height: 36px;
1634
- }
1635
- .vuu-theme.vuu-density-touch {
1636
- --vuu-table-row-height: 48px;
1637
- }
1638
- .vuu-theme .vuuTableRow-selected:not(.vuuTableRow-selectedStart, .vuuTableRow-selectedEnd) .vuuTableRow-selectionDecorator {
1639
- background: var(--vuuTableRow-selectionBlock-borderColor);
1640
- }
1641
- .vuu-theme .vuuTableRow-selectedStart .vuuTableRow-selectionDecorator:before,
1642
- .vuu-theme .vuuTableRow-selectedEnd .vuuTableRow-selectionDecorator:before {
1643
- background: var(--vuuTableRow-selectionBlock-borderColor);
1644
- }
1645
-
1646
- /* css/components/tabstrip.css */
1647
- .vuu-theme .vuuTab {
1648
- --vuuTab-padding: 0 var(--salt-spacing-400);
1649
- }
1650
- .vuu-theme .vuuTabstrip-primary {
1651
- --vuuOverflowContainer-borderColor: var(--vuu-color-gray-30);
1652
- --vuuTab-background: var(--vuu-color-gray-28);
1653
- --vuuTab-borderRadius: 6px 6px 0 0;
1654
- --vuuTab-borderColor: var(--vuu-color-gray-30);
1655
- --vuuTab-borderStyle: solid;
1656
- --vuuTab-borderWidth: 1px;
1657
- }
1658
- .vuu-theme .vuuTabstrip-primary.vuuOrientation-horizontal {
1659
- --vuuOverflowContainer-borderStyle: none;
1660
- --vuuOverflowContainer-contentHeight: calc(var(--salt-size-base) + var(--salt-spacing-100));
1661
- --vuuOverflowContainer-height: calc(var(--vuuOverflowContainer-contentHeight) + 7px);
1662
- padding-bottom: 7px;
1663
- }
1664
- .vuu-theme .vuuTabstrip-primary .vuuTab {
1665
- height: calc(var(--tab-height) + 1px);
1666
- }
1667
- .vuu-theme .vuuTabstrip-primary .vuuTab-selected {
1668
- --vuuTab-background: var(--vuu-color-white);
1669
- border-bottom-color: white;
1670
- z-index: 1;
1671
- }
1672
- .vuu-theme .vuuTabstrip-primary .vuuTab-selected:before {
1673
- height: 100%;
1674
- left: 0;
1675
- top: 0;
1676
- border-radius: 6px 0 0 0;
1677
- width: 6px;
1678
- }
1679
- .vuu-theme .vuuTabstrip-primary .vuuTab:hover:before {
1680
- background-color: #F37880;
1681
- height: 100%;
1682
- left: 0;
1683
- top: 0;
1684
- border-radius: 6px 0 0 0;
1685
- width: 6px;
1686
- }
1687
- .vuu-theme .vuuTabstrip-primary.vuuTabstrip:before {
1688
- background-color: transparent;
1689
- border-radius: 0 6px 0 0;
1690
- border-left: solid 1px var(--vuu-color-gray-30);
1691
- border-right: solid 1px var(--vuu-color-gray-30);
1692
- border-top: solid 1px var(--vuu-color-gray-30);
1693
- content: "";
1694
- position: absolute;
1695
- bottom: 0;
1696
- left: 0;
1697
- right: 0;
1698
- height: 8px;
1699
- z-index: 1;
1700
- }
1701
-
1702
- /* css/components/toggle-button.css */
1703
- .vuu-theme .saltToggleButtonGroup {
1704
- --togglebutton-borderRadius: 4px 4px 4px 4px;
1705
- --salt-spacing-100: 16px;
1706
- border-radius: 6px;
1707
- gap: 0;
1708
- height: var(--salt-size-base);
1709
- padding: 0;
1710
- }
1711
- .vuu-theme .saltToggleButtonGroup-horizontal .saltToggleButton {
1712
- height: 100%;
1713
- }
1714
- .vuu-theme .saltToggleButton {
1715
- border-radius: var(--togglebutton-borderRadius);
1716
- gap: 8px;
1717
- white-space: nowrap;
1718
- --vuu-icon-color: var(--salt-actionable-secondary-foreground);
1719
- border-radius: var(--togglebutton-borderRadius);
1720
- gap: var(--salt-spacing-200);
1721
- white-space: nowrap;
1722
- }
1723
- .vuu-theme .saltToggleButton[aria-checked=true] {
1724
- --vuu-icon-color: var(--salt-actionable-secondary-foreground-active);
1725
- }
1726
- .vuu-theme .saltToggleButton[aria-pressed=true] {
1727
- --vuu-icon-color: var(--salt-actionable-secondary-foreground-active);
1728
- }
1729
- .vuu-theme [data-variant=primary] {
1730
- --salt-actionable-secondary-background-active: var(--salt-actionable-primary-background-active);
1731
- border-color: var(--salt-container-secondary-borderColor);
1732
- }
1733
- .vuu-theme [data-variant=secondary] {
1734
- --salt-actionable-secondary-background-active: var(--salt-actionable-primary-background-active);
1735
- --salt-container-primary-borderColor: transparent ;
1736
- }
1737
- .vuu-theme .vuuStateButtonGroup .saltToggleButton {
1738
- --togglebutton-borderRadius: 0;
1739
- }
1740
- .vuu-theme .vuuStateButtonGroup .saltToggleButton:first-child {
1741
- --togglebutton-borderRadius: 4px 0 0 4px;
1742
- }
1743
- .vuu-theme .vuuStateButtonGroup .saltToggleButton:last-child {
1744
- --togglebutton-borderRadius: 0 4px 4px 0;
1745
- }
1746
-
1747
- /* css/components/tooltip.css */
1748
- .vuu-theme {
1749
- --vuuTooltip-borderRadius: 6px;
1750
- }
1751
-
1752
- /* css/components/components.css */
1753
-
1754
- /* index.css */
1
+ @font-face{font-family:Nunito Sans;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(./fonts/NunitoSansv15Latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Nunito Sans;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(./fonts/NunitoSansv15Latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Nunito Sans;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(./fonts/NunitoSansv15Latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Nunito Sans;font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(./fonts/NunitoSansv15Latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Nunito Sans;font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(./fonts/NunitoSansv15Latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Nunito Sans;font-style:normal;font-weight:800;font-stretch:100%;font-display:swap;src:url(./fonts/NunitoSansv15Latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Nunito Sans A-Variant;src:url(./fonts/NunitoSans-Regular.woff) format("opentype")}@font-face{font-family:Sometype Mono;font-style:normal;font-weight:500;font-display:swap;src:url(./fonts/SomeTypeMonov1-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.vuu-theme{color:var(--salt-content-primary-foreground);font-family:var(--salt-typography-fontFamily);font-size:var(--salt-text-fontSize);letter-spacing:var(--salt-text-letterSpacing);line-height:var(--salt-text-lineHeight)}.vuu-theme ::selection{background:var(--salt-content-foreground-highlight);color:#000}.vuu-theme[data-mode=light]{color-scheme:light}.vuu-theme[data-mode=dark]{color-scheme:dark}*,*:before,*:after{box-sizing:border-box}.salt-visuallyHidden{position:absolute;height:1px;width:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.vuu-density-touch,.vuu-density-low,.vuu-density-medium,.vuu-density-high{--salt-animation-opacity-start: 0;--salt-animation-opacity-end: 1;--salt-animation-scale-start: 0;--salt-animation-scale-end: 1;--salt-animation-transform-start: 100%;--salt-animation-transform-end: 0;--salt-animation-duration: var(--salt-duration-perceptible);--salt-animation-timing-function: ease-in-out;--salt-animation-slide-in-top: slide-in-top var(--salt-animation-duration) var(--salt-animation-timing-function);--salt-animation-slide-in-left: slide-in-left var(--salt-animation-duration) var(--salt-animation-timing-function);--salt-animation-slide-in-right: slide-in-right var(--salt-animation-duration) var(--salt-animation-timing-function);--salt-animation-slide-in-bottom: slide-in-bottom var(--salt-animation-duration) var(--salt-animation-timing-function);--salt-animation-slide-out-top: slide-out-top var(--salt-animation-duration) var(--salt-animation-timing-function) both;--salt-animation-slide-out-left: slide-out-left var(--salt-animation-duration) var(--salt-animation-timing-function) both;--salt-animation-slide-out-right: slide-out-right var(--salt-animation-duration) var(--salt-animation-timing-function) both;--salt-animation-slide-out-bottom: slide-out-bottom var(--salt-animation-duration) var(--salt-animation-timing-function) both;--salt-animation-fade-in-back: fade-in-back var(--salt-animation-duration) var(--salt-animation-timing-function);--salt-animation-fade-in-forward: fade-in-forward var(--salt-animation-duration) var(--salt-animation-timing-function);--salt-animation-fade-in-center: fade-in-center var(--salt-animation-duration) var(--salt-animation-timing-function);--salt-animation-fade-out-back: fade-out-back var(--salt-animation-duration) ease-in-out both}@keyframes slide-in-top{0%{opacity:var(--salt-animation-opacity-start);transform:translateY(var(--salt-animation-transform-start))}to{opacity:var(--salt-animation-opacity-end);transform:translateY(var(--salt-animation-transform-end))}}@keyframes slide-out-top{0%{opacity:var(--salt-animation-opacity-end);transform:translateY(var(--salt-animation-transform-end))}to{opacity:var(--salt-animation-opacity-start);transform:translateY(var(--salt-animation-transform-start))}}@keyframes slide-in-left{0%{opacity:var(--salt-animation-opacity-start);transform:translate(calc(-1 * var(--salt-animation-transform-start)))}to{opacity:var(--salt-animation-opacity-end);transform:translate(var(--salt-animation-transform-end))}}@keyframes slide-out-left{0%{opacity:var(--salt-animation-opacity-end);transform:translate(var(--salt-animation-transform-end))}to{opacity:var(--salt-animation-opacity-start);transform:translate(calc(-1 * var(--salt-animation-transform-start)))}}@keyframes slide-in-right{0%{opacity:var(--salt-animation-opacity-start);transform:translate(var(--salt-animation-transform-start))}to{opacity:var(--salt-animation-opacity-end);transform:translate(var(--salt-animation-transform-end))}}@keyframes slide-out-right{0%{opacity:var(--salt-animation-opacity-end);transform:translate(var(--salt-animation-transform-end))}to{opacity:var(--salt-animation-opacity-start);transform:translate(var(--salt-animation-transform-start))}}@keyframes slide-in-bottom{0%{opacity:var(--salt-animation-opacity-start);transform:translateY(calc(-1 * var(--salt-animation-transform-start)))}to{opacity:var(--salt-animation-opacity-end);transform:translateY(var(--salt-animation-transform-end))}}@keyframes slide-out-bottom{0%{opacity:var(--salt-animation-opacity-end);transform:translateY(var(--salt-animation-transform-end))}to{opacity:var(--salt-animation-opacity-start);transform:translateY(calc(-1 * var(--salt-animation-transform-start)))}}@keyframes fade-in-back{0%{--salt-animation-scale-start: 1.4;opacity:var(--salt-animation-opacity-start);transform:scale(var(--salt-animation-scale-start))}to{opacity:var(--salt-animation-opacity-end);transform:scale(var(--salt-animation-scale-end))}}@keyframes fade-in-forward{0%{--salt-animation-scale-start: .6;opacity:var(--salt-animation-opacity-start);transform:scale(var(--salt-animation-scale-start))}to{opacity:var(--salt-animation-opacity-end);transform:scale(var(--salt-animation-scale-end))}}@keyframes fade-in-center{0%{opacity:var(--salt-animation-opacity-start)}to{opacity:var(--salt-animation-opacity-end)}}@keyframes fade-out-back{0%{opacity:var(--salt-animation-opacity-end)}to{opacity:var(--salt-animation-opacity-start)}}.vuu-theme{--vuu-fade-light: .13;--vuu-color-transparent: transparent;--vuu-color-black: black;--vuu-color-white: white;--vuu-color-white-fade-70: rgba(255,255,255,.7);--vuu-color-blue-40: rgb(164, 213, 244);--vuu-color-blue-60: rgb(1, 124, 177);--vuu-color-orange-50: rgb(244, 202, 51);--vuu-color-purple-10: rgb(109,24,189);--vuu-color-purple-20-fade-40:rgba(197, 163, 229, .4);--vuu-color-purple-50: rgb(42, 1, 95);--vuu-color-purple-10-fade-light: rgba(109,24,189, var(--vuu-fade-light));--vuu-color-pink-10: rgb(234, 120, 128);--vuu-color-pink-10-fade-20: rgba(234, 120, 128, .2);--vuu-color-gray-02: rgb(235, 235, 236);--vuu-color-gray-03: rgb(237, 237, 237);--vuu-color-gray-05: rgb(222, 222, 222);--vuu-color-gray-07: rgb(226, 226, 227);--vuu-color-gray-10: rgb(228, 227, 231);--vuu-color-gray-20: rgb(245, 242, 248);--vuu-color-gray-25: rgb(244, 244, 244) ;--vuu-color-gray-28: rgb(249, 249, 251);--vuu-color-gray-30: rgb(214, 215, 218);--vuu-color-gray-35: rgb(155, 158, 168);--vuu-color-gray-40: rgb(169, 170, 173);--vuu-color-gray-42: rgb(135, 139, 158);--vuu-color-gray-45: rgb(119, 124, 148);--vuu-color-gray-50: rgb(96, 100, 119);--vuu-color-gray-80: rgb(21, 23, 27);--vuu-color-green-50: rgb(102, 174, 90);--vuu-color-green-60: rgb(36, 137, 19);--vuu-color-green-60-fade-30: rgba(36, 137, 19, .3);--vuu-color-red-50: rgb(226, 52, 52);--vuu-color-yellow-20: rgb(244, 202, 51);--salt-color-white: rgb(255, 255, 255);--salt-color-black: rgb(0, 0, 0);--salt-color-red-10: rgb(255, 227, 224);--salt-color-red-20: rgb(255, 207, 201);--salt-color-red-30: rgb(255, 187, 178);--salt-color-red-40: rgb(255, 167, 156);--salt-color-red-50: rgb(255, 148, 133);--salt-color-red-100: rgb(255, 128, 111);--salt-color-red-200: rgb(255, 108, 88);--salt-color-red-300: rgb(255, 89, 66);--salt-color-red-400: rgb(237, 65, 42);--salt-color-red-500: rgb(227, 43, 22);--salt-color-red-600: rgb(196, 32, 16);--salt-color-red-700: rgb(166, 21, 11);--salt-color-red-800: rgb(136, 10, 5);--salt-color-red-900: rgb(65, 37, 34);--salt-color-orange-10: rgb(255, 232, 191);--salt-color-orange-20: rgb(254, 223, 166);--salt-color-orange-30: rgb(254, 214, 142);--salt-color-orange-40: rgb(254, 205, 118);--salt-color-orange-50: rgb(254, 197, 94);--salt-color-orange-100: rgb(250, 181, 81);--salt-color-orange-200: rgb(246, 165, 68);--salt-color-orange-300: rgb(242, 149, 56);--salt-color-orange-400: rgb(238, 133, 43);--salt-color-orange-500: rgb(234, 115, 25);--salt-color-orange-600: rgb(224, 101, 25);--salt-color-orange-700: rgb(214, 85, 19);--salt-color-orange-800: rgb(204, 68, 13);--salt-color-orange-900: rgb(54, 44, 36);--salt-color-green-10: rgb(209, 244, 201);--salt-color-green-20: rgb(184, 232, 182);--salt-color-green-30: rgb(160, 221, 164);--salt-color-green-40: rgb(136, 210, 145);--salt-color-green-50: rgb(112, 199, 127);--salt-color-green-100: rgb(93, 189, 116);--salt-color-green-200: rgb(77, 180, 105);--salt-color-green-300: rgb(60, 171, 96);--salt-color-green-400: rgb(48, 156, 90);--salt-color-green-500: rgb(36, 135, 75);--salt-color-green-600: rgb(24, 114, 61);--salt-color-green-700: rgb(12, 93, 46);--salt-color-green-800: rgb(1, 73, 32);--salt-color-green-900: rgb(35, 52, 43);--salt-color-teal-10: rgb(218, 240, 240);--salt-color-teal-20: rgb(199, 232, 232);--salt-color-teal-30: rgb(180, 224, 225);--salt-color-teal-40: rgb(162, 217, 218);--salt-color-teal-50: rgb(141, 205, 209);--salt-color-teal-100: rgb(123, 193, 200);--salt-color-teal-200: rgb(99, 181, 192);--salt-color-teal-300: rgb(73, 160, 172);--salt-color-teal-400: rgb(48, 149, 166);--salt-color-teal-500: rgb(0, 130, 151);--salt-color-teal-600: rgb(27, 107, 133);--salt-color-teal-700: rgb(0, 85, 113);--salt-color-teal-800: rgb(1, 65, 86);--salt-color-teal-900: rgb(0, 49, 76);--salt-color-blue-10: rgb(203, 231, 249);--salt-color-blue-20: rgb(183, 222, 246);--salt-color-blue-30: rgb(164, 213, 244);--salt-color-blue-40: rgb(144, 204, 242);--salt-color-blue-50: rgb(125, 195, 240);--salt-color-blue-100: rgb(100, 177, 228);--salt-color-blue-200: rgb(75, 159, 216);--salt-color-blue-300: rgb(51, 141, 205);--salt-color-blue-400: rgb(46, 132, 198);--salt-color-blue-500: rgb(38, 112, 169);--salt-color-blue-600: rgb(21, 92, 147);--salt-color-blue-700: rgb(0, 71, 123);--salt-color-blue-800: rgb(39, 60, 77);--salt-color-blue-900: rgb(35, 47, 56);--salt-color-purple-10: rgb(249, 224, 247);--salt-color-purple-20: rgb(247, 212, 244);--salt-color-purple-30: rgb(245, 201, 241);--salt-color-purple-40: rgb(243, 189, 238);--salt-color-purple-50: rgb(241, 178, 235);--salt-color-purple-100: rgb(223, 156, 225);--salt-color-purple-200: rgb(205, 135, 215);--salt-color-purple-300: rgb(192, 116, 203);--salt-color-purple-400: rgb(169, 97, 181);--salt-color-purple-500: rgb(150, 78, 162);--salt-color-purple-600: rgb(129, 60, 141);--salt-color-purple-700: rgb(103, 46, 122);--salt-color-purple-800: rgb(83, 37, 109);--salt-color-purple-900: rgb(59, 16, 84);--salt-color-gray-10: rgb(242, 244, 246);--salt-color-gray-20: rgb(234, 237, 239);--salt-color-gray-30: rgb(224, 228, 233);--salt-color-gray-40: rgb(217, 221, 227);--salt-color-gray-50: rgb(206, 210, 217);--salt-color-gray-60: rgb(197, 201, 208);--salt-color-gray-70: rgb(180, 183, 190);--salt-color-gray-80: rgb(159, 163, 170);--salt-color-gray-90: rgb(132, 135, 142);--salt-color-gray-100: rgb(116, 119, 127);--salt-color-gray-200: rgb(97, 101, 110);--salt-color-gray-300: rgb(76, 80, 91);--salt-color-gray-400: rgb(68, 72, 79);--salt-color-gray-500: rgb(59, 63, 70);--salt-color-gray-600: rgb(47, 49, 54);--salt-color-gray-700: rgb(42, 44, 47);--salt-color-gray-800: rgb(36, 37, 38);--salt-color-gray-900: rgb(22, 22, 22)}.vuu-theme{--salt-duration-instant: 0ms;--salt-duration-perceptible: .3s;--salt-duration-notable: 1s;--salt-duration-cutoff: 10s}.vuu-theme{--salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));--salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));--salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));--salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));--salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));--salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));--salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-disabled));--salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-disabled));--salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));--salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));--salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-disabled));--salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-disabled));--salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));--salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-disabled));--salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));--salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));--salt-color-gray-50-fade-border: rgba(206, 210, 217, var(--salt-palette-opacity-disabled));--salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));--salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));--salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));--salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));--salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));--salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));--salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-disabled));--salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-disabled));--salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-disabled));--salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-disabled));--salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));--salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));--salt-color-gray-200-fade-border-readonly: rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly));--salt-color-blue-30-fade-background: rgba(164, 213, 244, var(--salt-palette-opacity-disabled));--salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));--salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));--salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-disabled));--salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-disabled));--salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));--salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));--salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));--salt-color-gray-300-fade-background: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));--salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-disabled));--salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-disabled));--salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));--salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));--salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));--salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));--salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly));--salt-color-white-fade-backdrop: rgba(255, 255, 255, var(--salt-palette-opacity-backdrop));--salt-color-black-fade-backdrop: rgba(0, 0, 0, var(--salt-palette-opacity-backdrop));--salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));--salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));--salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 255, var(--salt-palette-opacity-primary-border));--salt-color-white-fade-separatorOpacity-secondary: rgba(255, 255, 255, var(--salt-palette-opacity-secondary-border));--salt-color-white-fade-separatorOpacity-tertiary: rgba(255, 255, 255, var(--salt-palette-opacity-tertiary-border));--salt-color-black-fade-separatorOpacity-primary: rgba(0, 0, 0, var(--salt-palette-opacity-primary-border));--salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border));--salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));--salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));--salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8))}.vuu-theme{--salt-opacity-0: 0;--salt-opacity-8: .08;--salt-opacity-15: .15;--salt-opacity-25: .25;--salt-opacity-40: .4;--salt-opacity-70: .7}.vuu-theme[data-mode=light]{--salt-shadow-100-color: rgba(0, 0, 0, .1);--salt-shadow-200-color: rgba(0, 0, 0, .1);--salt-shadow-300-color: rgba(0, 0, 0, .15);--salt-shadow-400-color: rgba(0, 0, 0, .2);--salt-shadow-500-color: rgba(0, 0, 0, .3)}.vuu-theme[data-mode=dark]{--salt-shadow-100-color: rgba(0, 0, 0, .5);--salt-shadow-200-color: rgba(0, 0, 0, .5);--salt-shadow-300-color: rgba(0, 0, 0, .55);--salt-shadow-400-color: rgba(0, 0, 0, .55);--salt-shadow-500-color: rgba(0, 0, 0, .65)}.vuu-theme{--salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color);--salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color);--salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color);--salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color);--salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color)}.vuu-density-high{--salt-size-adornment: 6px;--salt-size-bar: 2px;--salt-size-base: 24px;--salt-size-border: 1px;--salt-size-icon: 10px;--salt-size-indicator: 1px;--salt-size-selectable: 12px;--salt-size-bar-strong: 4px;--salt-size-bar-small: 2px;--salt-size-border-strong: 2px}.vuu-density-medium{--salt-size-adornment: 8px;--salt-size-bar: 4px;--salt-size-base: 28px;--salt-size-border: 1px;--salt-size-icon: 12px;--salt-size-indicator: 2px;--salt-size-selectable: 14px;--salt-size-bar-strong: 8px;--salt-size-bar-small: 2px;--salt-size-border-strong: 2px}.vuu-density-low{--salt-size-adornment: 10px;--salt-size-bar: 6px;--salt-size-base: 36px;--salt-size-border: 1px;--salt-size-icon: 14px;--salt-size-indicator: 3px;--salt-size-selectable: 16px;--salt-size-bar-strong: 12px;--salt-size-bar-small: 2px;--salt-size-border-strong: 2px}.vuu-density-touch{--salt-size-adornment: 12px;--salt-size-bar: 8px;--salt-size-base: 44px;--salt-size-border: 1px;--salt-size-icon: 16px;--salt-size-indicator: 4px;--salt-size-selectable: 18px;--salt-size-bar-strong: 16px;--salt-size-bar-small: 2px;--salt-size-border-strong: 2px}.vuu-density-touch{--salt-spacing-100: 16px}.vuu-density-low{--salt-spacing-100: 12px}.vuu-density-medium{--salt-spacing-100: 8px}.vuu-density-high{--salt-spacing-100: 4px}.vuu-density-touch,.vuu-density-low,.vuu-density-medium,.vuu-density-high{--salt-spacing-25: calc(.25 * var(--salt-spacing-100));--salt-spacing-50: calc(.5 * var(--salt-spacing-100));--salt-spacing-75: calc(.75 * var(--salt-spacing-100));--salt-spacing-150: calc(1.5 * var(--salt-spacing-100));--salt-spacing-200: calc(2 * var(--salt-spacing-100));--salt-spacing-250: calc(2.5 * var(--salt-spacing-100));--salt-spacing-300: calc(3 * var(--salt-spacing-100));--salt-spacing-350: calc(3.5 * var(--salt-spacing-100));--salt-spacing-400: calc(4 * var(--salt-spacing-100))}.vuu-theme{--salt-typography-fontFamily: "Nunito Sans";--salt-typography-fontFamily-code: "Sometype Mono";--salt-typography-fontWeight-light: 300;--salt-typography-fontWeight-regular: 400;--salt-typography-fontWeight-medium: 500;--salt-typography-fontWeight-semiBold: 600;--salt-typography-fontWeight-bold: 700;--salt-typography-fontWeight-extraBold: 800}.vuu-density-touch,.vuu-density-low,.vuu-density-medium,.vuu-density-high{--salt-zIndex-default: 1;--salt-zIndex-popout: 1000;--salt-zIndex-appHeader: 1100;--salt-zIndex-drawer: 1200;--salt-zIndex-modal: 1300;--salt-zIndex-notification: 1400;--salt-zIndex-dragObject: 1420;--salt-zIndex-contextMenu: 1450;--salt-zIndex-flyover: 1500}.vuu-theme[data-mode=light],.vuu-theme[data-mode=dark]{--salt-palette-accent-background: var(--salt-color-blue-500);--salt-palette-accent-border: var(--salt-color-blue-500);--salt-palette-accent-foreground: var(--salt-color-white)}.vuu-theme[data-mode=light]{--salt-palette-error-background: var(--vuu-color-red-50);--salt-palette-error-background-selected: var(--salt-color-red-20);--salt-palette-error-border: var(--salt-color-red-500);--salt-palette-error-foreground: var(--vuu-color-white)}.vuu-theme[data-mode=dark]{--salt-palette-error-background: var(--salt-color-red-900);--salt-palette-error-background-selected: var(--salt-color-red-900);--salt-palette-error-border: var(--salt-color-red-500);--salt-palette-error-foreground: var(--salt-color-red-500)}.vuu-theme[data-mode=light]{--salt-palette-info-background: var(--vuu-color-blue-60);--salt-palette-info-border: var(--salt-color-blue-500);--salt-palette-info-foreground: var(--vuu-color-white)}.vuu-theme[data-mode=dark]{--salt-palette-info-background: var(--salt-color-blue-900);--salt-palette-info-border: var(--salt-color-blue-500);--salt-palette-info-foreground: var(--salt-color-blue-500)}.vuu-theme[data-mode=light]{--salt-palette-interact-background: transparent;--salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);--salt-palette-interact-background-hover: var(--vuu-color-gray-10);--salt-palette-interact-background-active: var(--vuu-color-blue-40);--salt-palette-interact-background-disabled: var(--vuu-color-gray-35);--salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-fade-background);--salt-palette-interact-border: var(--vuu-color-gray-45);--salt-palette-interact-border-active: var(--vuu-color-purple-10);--salt-palette-interact-border-activeDisabled: var(--salt-color-blue-600-fade-fill);--salt-palette-interact-border-disabled: var(--salt-color-gray-200-fade-border);--salt-palette-interact-border-hover: var(--vuu-color-pink-10);--salt-palette-interact-border-readonly: var(--salt-color-gray-200-fade-border-readonly);--salt-palette-interact-foreground: var(--salt-color-gray-200);--salt-palette-interact-foreground-active: var(--vuu-color-purple-10);--salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-fade-foreground);--salt-palette-interact-foreground-disabled: var(--salt-color-gray-200-fade-foreground);--salt-palette-interact-foreground-hover: var(--salt-color-blue-500);--salt-palette-interact-outline: var(--vuu-color-purple-10);--salt-palette-interact-cta-background: var(--vuu-color-purple-10);--salt-palette-interact-cta-background-active: var(--vuu-color-purple-10);--salt-palette-interact-cta-background-disabled: var(--vuu-color-purple-20-fade-40);--salt-palette-interact-cta-background-hover: var(--vuu-color-pink-10);--salt-palette-interact-cta-foreground: var(--salt-color-white);--salt-palette-interact-cta-foreground-active: var(--salt-color-white);--salt-palette-interact-cta-foreground-disabled: var(--vuu-color-white-fade-70);--salt-palette-interact-cta-foreground-hover: var(--vuu-color-gray-80);--salt-palette-interact-primary-background: var(--salt-color-gray-60);--salt-palette-interact-primary-background-active: var(--vuu-color-gray-50);--salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background);--salt-palette-interact-primary-background-hover: var(--vuu-color-pink-10);--salt-palette-interact-primary-foreground: var(--vuu-color-gray-50);--salt-palette-interact-primary-foreground-active: var(--salt-color-white);--salt-palette-interact-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);--salt-palette-interact-primary-foreground-hover: var(--vuu-color-gray-80);--salt-palette-interact-secondary-background: transparent;--salt-palette-interact-secondary-background-active: var(--vuu-color-purple-10);--salt-palette-interact-secondary-background-disabled: transparent;--salt-palette-interact-secondary-background-hover: var(--salt-color-gray-40);--salt-palette-interact-secondary-foreground: var(--salt-color-gray-900);--salt-palette-interact-secondary-foreground-active: var(--salt-color-white);--salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);--salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900)}.vuu-theme[data-mode=dark]{--salt-palette-interact-background: transparent;--salt-palette-interact-background-active: var(--salt-color-blue-700);--salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);--salt-palette-interact-background-hover: var(--salt-color-blue-800);--salt-palette-interact-background-disabled: transparent;--salt-palette-interact-background-activeDisabled: var(--salt-color-blue-700-fade-background);--salt-palette-interact-border: var(--salt-color-gray-90);--salt-palette-interact-border-active: var(--salt-color-blue-100);--salt-palette-interact-border-activeDisabled: var(--salt-color-blue-100-fade-fill);--salt-palette-interact-border-disabled: var(--salt-color-gray-90-fade-border);--salt-palette-interact-border-hover: var(--salt-color-blue-500);--salt-palette-interact-border-readonly: var(--salt-color-gray-90-fade-border-readonly);--salt-palette-interact-foreground: var(--salt-color-gray-90);--salt-palette-interact-foreground-active: var(--salt-color-blue-100);--salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground);--salt-palette-interact-foreground-disabled: var(--salt-color-gray-90-fade-foreground);--salt-palette-interact-foreground-hover: var(--salt-color-blue-500);--salt-palette-interact-outline: var(--vuu-color-pink-10);--salt-palette-interact-cta-background: var(--salt-color-blue-600);--salt-palette-interact-cta-background-active: var(--salt-color-blue-700);--salt-palette-interact-cta-background-disabled: var(--vuu-color-purple-20-fade-40);--salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);--salt-palette-interact-cta-foreground: var(--salt-color-white);--salt-palette-interact-cta-foreground-active: var(--salt-color-white);--salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);--salt-palette-interact-cta-foreground-hover: var(--salt-color-white);--salt-palette-interact-primary-background: var(--salt-color-gray-300);--salt-palette-interact-primary-background-active: var(--salt-color-gray-70);--salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background);--salt-palette-interact-primary-background-hover: var(--salt-color-gray-200);--salt-palette-interact-primary-foreground: var(--salt-color-white);--salt-palette-interact-primary-foreground-active: var(--salt-color-gray-900);--salt-palette-interact-primary-foreground-disabled: var(--salt-color-white-fade-foreground);--salt-palette-interact-primary-foreground-hover: var(--salt-color-white);--salt-palette-interact-secondary-background: transparent;--salt-palette-interact-secondary-background-active: var(--salt-color-gray-70);--salt-palette-interact-secondary-background-disabled: transparent;--salt-palette-interact-secondary-background-hover: var(--salt-color-gray-200);--salt-palette-interact-secondary-foreground: var(--salt-color-white);--salt-palette-interact-secondary-foreground-active: var(--salt-color-gray-900);--salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);--salt-palette-interact-secondary-foreground-hover: var(--salt-color-white)}.vuu-theme[data-mode=light]{--salt-palette-navigate-primary-background-active: transparent;--salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);--salt-palette-navigate-foreground-active: var(--salt-color-blue-700);--salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);--salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);--salt-palette-navigate-indicator-active: var(--vuu-color-purple-10)}.vuu-theme[data-mode=dark]{--salt-palette-navigate-primary-background-active: transparent;--salt-palette-navigate-foreground-hover: var(--salt-color-blue-200);--salt-palette-navigate-foreground-active: var(--salt-color-blue-300);--salt-palette-navigate-foreground-visited: var(--salt-color-purple-100);--salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);--salt-palette-navigate-indicator-active: var(--vuu-color-pink-10)}.vuu-theme[data-mode=light]{--salt-palette-negative-foreground: var(--salt-color-red-700)}.vuu-theme[data-mode=dark]{--salt-palette-negative-foreground: var(--salt-color-red-300)}.vuu-theme[data-mode=light]{--salt-palette-neutral-primary-background: var(--salt-color-white);--salt-palette-neutral-primary-background-disabled: var(--vuu-color-gray-30);--salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);--salt-palette-neutral-primary-foreground: var(--vuu-color-gray-80);--salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);--salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary);--salt-palette-neutral-primary-border: var(--vuu-color-purple-10);--salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-50-fade-border);--salt-palette-neutral-secondary-background: var(--vuu-color-gray-25);--salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background);--salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly);--salt-palette-neutral-secondary-border: var(--vuu-color-gray-50);--salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-50-fade-border);--salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);--salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);--salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);--salt-palette-neutral-secondary-separator: var(--vuu-color-gray-05);--salt-palette-neutral-tertiary-separator: var(--vuu-color-gray-03)}.vuu-theme[data-mode=dark]{--salt-palette-neutral-primary-background: var(--salt-color-gray-800);--salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background);--salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly);--salt-palette-neutral-primary-border: var(--salt-color-gray-300);--salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-300-fade-border);--salt-palette-neutral-primary-foreground: var(--salt-color-white);--salt-palette-neutral-primary-foreground-disabled: var(--salt-color-white-fade-foreground);--salt-palette-neutral-primary-separator: var(--salt-color-white-fade-separatorOpacity-primary);--salt-palette-neutral-secondary-background: var(--salt-color-gray-600);--salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-600-fade-background);--salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-600-fade-background-readonly);--salt-palette-neutral-secondary-border: var(--salt-color-gray-300);--salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-300-fade-border);--salt-palette-neutral-secondary-foreground: var(--salt-color-gray-70);--salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground);--salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);--salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);--salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary)}.vuu-theme{--salt-palette-opacity-backdrop: var(--salt-opacity-70);--salt-palette-opacity-disabled: var(--salt-opacity-40);--salt-palette-opacity-background-readonly: var(--salt-opacity-0);--salt-palette-opacity-border-readonly: var(--salt-opacity-15);--salt-palette-opacity-primary-border: var(--salt-opacity-40);--salt-palette-opacity-secondary-border: var(--salt-opacity-25);--salt-palette-opacity-tertiary-border: var(--salt-opacity-15)}.vuu-theme[data-mode=light]{--salt-palette-positive-foreground: var(--salt-color-green-700)}.vuu-theme[data-mode=dark]{--salt-palette-positive-foreground: var(--salt-color-green-300)}.vuu-theme[data-mode=light]{--salt-palette-success-background: var(--vuu-color-green-60);--salt-palette-success-background-selected: var(--salt-color-green-20);--salt-palette-success-border: var(--salt-color-green-500);--salt-palette-success-foreground: var(--vuu-color-white)}.vuu-theme[data-mode=dark]{--salt-palette-success-background: var(--vuu-color-green-60);--salt-palette-success-background-selected: var(--salt-color-green-900);--salt-palette-success-border: var(--salt-color-green-400);--salt-palette-success-foreground: var(--vuu-color-white)}.vuu-theme[data-mode=light]{--salt-palette-warning-background: var(--vuu-color-orange-50);--salt-palette-warning-background-selected: var(--salt-color-orange-20);--salt-palette-warning-border: var(--salt-color-orange-700);--salt-palette-warning-foreground: var(--salt-content-primary-foreground)}.vuu-theme[data-mode=dark]{--salt-palette-warning-background: var(--salt-color-orange-900);--salt-palette-warning-background-selected: var(--salt-color-orange-900);--salt-palette-warning-border: var(--salt-color-orange-500);--salt-palette-warning-foreground: var(--salt-color-orange-500)}.vuu-theme{--salt-accent-background: var(--salt-palette-accent-background);--salt-accent-borderColor: var(--salt-palette-accent-border);--salt-accent-foreground: var(--salt-palette-accent-foreground)}.vuu-theme{--salt-actionable-cursor-hover: pointer;--salt-actionable-cursor-active: pointer;--salt-actionable-cursor-disabled: not-allowed;--salt-actionable-primary-foreground: var(--salt-palette-interact-primary-foreground);--salt-actionable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);--salt-actionable-primary-foreground-active: var(--salt-palette-interact-primary-foreground-active);--salt-actionable-primary-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);--salt-actionable-primary-background: var(--salt-palette-interact-primary-background);--salt-actionable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);--salt-actionable-primary-background-active: var(--salt-palette-interact-primary-background-active);--salt-actionable-primary-background-disabled: var(--salt-palette-interact-primary-background-disabled);--salt-actionable-cta-foreground: var(--salt-palette-interact-cta-foreground);--salt-actionable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);--salt-actionable-cta-foreground-active: var(--salt-palette-interact-cta-foreground-active);--salt-actionable-cta-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);--salt-actionable-cta-background: var(--salt-palette-interact-cta-background);--salt-actionable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);--salt-actionable-cta-background-active: var(--salt-palette-interact-cta-background-active);--salt-actionable-cta-background-disabled: var(--salt-palette-interact-cta-background-disabled);--salt-actionable-secondary-foreground: var(--salt-palette-interact-secondary-foreground);--salt-actionable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);--salt-actionable-secondary-foreground-active: var(--salt-palette-interact-secondary-foreground-active);--salt-actionable-secondary-foreground-disabled: var(--salt-palette-interact-secondary-foreground-disabled);--salt-actionable-secondary-background: var(--salt-palette-interact-secondary-background);--salt-actionable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);--salt-actionable-secondary-background-active: var(--salt-palette-interact-secondary-background-active);--salt-actionable-secondary-background-disabled: var(--salt-palette-interact-secondary-background-disabled)}.vuu-theme{--salt-container-borderStyle: solid;--salt-container-primary-background: var(--salt-palette-neutral-primary-background);--salt-container-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);--salt-container-primary-borderColor: var(--salt-palette-neutral-primary-border);--salt-container-primary-borderColor-disabled: var(--salt-palette-neutral-primary-border-disabled);--salt-container-secondary-background: var(--salt-palette-neutral-secondary-background);--salt-container-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);--salt-container-secondary-borderColor: var(--salt-palette-neutral-secondary-border);--salt-container-secondary-borderColor-disabled: var(--salt-palette-neutral-secondary-border-disabled)}.vuu-theme{--salt-draggable-horizontal-cursor-hover: row-resize;--salt-draggable-horizontal-cursor-active: row-resize;--salt-draggable-vertical-cursor-hover: col-resize;--salt-draggable-vertical-cursor-active: col-resize;--salt-draggable-grab-cursor-hover: grab;--salt-draggable-grab-cursor-active: grabbing}.vuu-theme{--salt-target-background-hover: var(--salt-palette-interact-background-hover);--salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);--salt-target-borderStyle: dashed;--salt-target-borderStyle-hover: solid;--salt-target-borderStyle-disabled: dashed;--salt-target-cursor-disabled: not-allowed}.vuu-theme{--salt-editable-cursor-hover: text;--salt-editable-cursor-active: text;--salt-editable-cursor-disabled: not-allowed;--salt-editable-cursor-readonly: text;--salt-editable-borderStyle: solid;--salt-editable-borderStyle-hover: solid;--salt-editable-borderStyle-active: solid;--salt-editable-borderStyle-disabled: solid;--salt-editable-borderStyle-readonly: solid;--salt-editable-borderWidth-active: 2px;--salt-editable-borderColor: var(--salt-palette-interact-border);--salt-editable-borderColor-active: var(--salt-palette-interact-border-active);--salt-editable-borderColor-disabled: var(--salt-palette-interact-border-disabled);--salt-editable-borderColor-hover: var(--salt-palette-interact-border-hover);--salt-editable-borderColor-readonly: var(--salt-palette-interact-border-readonly);--salt-editable-primary-background: var(--salt-palette-neutral-primary-background);--salt-editable-primary-background-active: var(--salt-palette-neutral-primary-background);--salt-editable-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);--salt-editable-primary-background-hover: var(--salt-palette-neutral-primary-background);--salt-editable-primary-background-readonly: var(--salt-palette-neutral-primary-background-readonly);--salt-editable-secondary-background: var(--salt-palette-neutral-secondary-background);--salt-editable-secondary-background-active: var(--salt-palette-neutral-secondary-background);--salt-editable-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);--salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);--salt-editable-secondary-background-readonly: var(--salt-palette-neutral-secondary-background-readonly);--salt-editable-help-fontStyle: italic}.vuu-theme{--salt-focused-outlineColor: var(--salt-palette-interact-outline);--salt-focused-outlineStyle: dotted;--salt-focused-outlineWidth: 2px;--salt-focused-outlineInset: 0;--salt-focused-outlineOffset: 0;--salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor)}.saltFocusVisible:after,.focused:focus:after,.focused:focus-visible:after{content:"";inset:var(--salt-focused-outlineInset);outline-color:var(--salt-focused-outlineColor);outline-offset:var(--salt-focused-outlineOffset);outline-style:var(--salt-focused-outlineStyle);outline-width:var(--salt-focused-outlineWidth);position:absolute}.vuu-theme{--salt-navigable-cursor-active: pointer;--salt-navigable-cursor-hover: pointer;--salt-navigable-cursor-disabled: not-allowed;--salt-navigable-cursor-edit: text;--salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);--salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);--salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);--salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);--salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);--salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);--salt-navigable-background-hover: var(--salt-palette-navigate-primary-background-hover);--salt-navigable-textDecoration: underline;--salt-navigable-textDecoration-hover: none;--salt-navigable-textDecoration-selected: underline}.vuu-theme{--salt-overlayable-shadow-scroll: var(--salt-shadow-100);--salt-overlayable-shadow-region: var(--salt-shadow-200);--salt-overlayable-shadow: var(--salt-shadow-200);--salt-overlayable-shadow-hover: var(--salt-shadow-300);--salt-overlayable-shadow-popout: var(--salt-shadow-400);--salt-overlayable-shadow-drag: var(--salt-shadow-400);--salt-overlayable-shadow-modal: var(--salt-shadow-500);--salt-overlayable-background: var(--salt-palette-neutral-backdrop)}.vuu-theme{--salt-selectable-cursor-hover: pointer;--salt-selectable-cursor-selected: pointer;--salt-selectable-cursor-blurSelected: pointer;--salt-selectable-cursor-disabled: not-allowed;--salt-selectable-cursor-readonly: not-allowed;--salt-selectable-borderStyle: solid;--salt-selectable-borderStyle-hover: solid;--salt-selectable-borderStyle-selected: solid;--salt-selectable-borderStyle-blurSelected: solid;--salt-selectable-borderColor: var(--salt-palette-interact-border);--salt-selectable-borderColor-hover: var(--salt-palette-interact-border-hover);--salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);--salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);--salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);--salt-selectable-borderColor-readonly: var(--salt-palette-interact-border-readonly);--salt-selectable-foreground: var(--salt-palette-interact-foreground);--salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);--salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);--salt-selectable-foreground-selected: var(--salt-palette-interact-foreground-active);--salt-selectable-foreground-selectedDisabled: var(--salt-palette-interact-foreground-activeDisabled);--salt-selectable-background: var(--salt-palette-interact-background);--salt-selectable-background-hover: var(--salt-palette-interact-background-hover);--salt-selectable-background-selected: var(--salt-palette-interact-background-active);--salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);--salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);--salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled)}.vuu-theme{--salt-separable-borderStyle: solid;--salt-separable-primary-borderColor: var(--salt-palette-neutral-primary-separator);--salt-separable-secondary-borderColor: var(--salt-palette-neutral-secondary-separator);--salt-separable-tertiary-borderColor: var(--salt-palette-neutral-tertiary-separator)}.vuu-theme{--salt-status-info-foreground: var(--salt-palette-info-foreground);--salt-status-success-foreground: var(--salt-palette-success-foreground);--salt-status-warning-foreground: var(--salt-palette-warning-foreground);--salt-status-error-foreground: var(--salt-palette-error-foreground);--salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);--salt-status-negative-foreground: var(--salt-palette-negative-foreground);--salt-status-positive-foreground: var(--salt-palette-positive-foreground);--salt-status-info-borderColor: var(--salt-palette-info-border);--salt-status-success-borderColor: var(--salt-palette-success-border);--salt-status-warning-borderColor: var(--salt-palette-warning-border);--salt-status-error-borderColor: var(--salt-palette-error-border);--salt-status-info-background: var(--salt-palette-info-background);--salt-status-success-background: var(--salt-palette-success-background);--salt-status-warning-background: var(--salt-palette-warning-background);--salt-status-error-background: var(--salt-palette-error-background);--salt-status-success-background-selected: var(--salt-palette-success-background-selected);--salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);--salt-status-error-background-selected: var(--salt-palette-error-background-selected)}.vuu-theme{--salt-text-letterSpacing: 0;--salt-text-textAlign: left;--salt-text-textAlign-embedded: center;--salt-text-textDecoration: none;--salt-text-textTransform: none;--salt-text-action-letterSpacing: .6px;--salt-text-action-textTransform: uppercase;--salt-text-action-textAlign: center;--salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);--salt-text-fontFamily: var(--salt-typography-fontFamily);--salt-text-fontWeight: var(--salt-typography-fontWeight-regular);--salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);--salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);--salt-text-notation-fontFamily: var(--salt-typography-fontFamily);--salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);--salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);--salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);--salt-text-h1-fontFamily: var(--salt-typography-fontFamily);--salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);--salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);--salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);--salt-text-h2-fontFamily: var(--salt-typography-fontFamily);--salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);--salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);--salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);--salt-text-h3-fontFamily: var(--salt-typography-fontFamily);--salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);--salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);--salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);--salt-text-h4-fontFamily: var(--salt-typography-fontFamily);--salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);--salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);--salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);--salt-text-label-fontFamily: var(--salt-typography-fontFamily);--salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);--salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);--salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);--salt-text-display1-fontFamily: var(--salt-typography-fontFamily);--salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);--salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);--salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);--salt-text-display2-fontFamily: var(--salt-typography-fontFamily);--salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);--salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);--salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);--salt-text-display3-fontFamily: var(--salt-typography-fontFamily);--salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);--salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);--salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);--salt-text-code-fontFamily: var(--salt-typography-fontFamily-code)}.vuu-density-touch{--salt-text-h1-fontSize: 42px;--salt-text-h1-lineHeight: 54px;--salt-text-h2-fontSize: 32px;--salt-text-h2-lineHeight: 42px;--salt-text-h3-fontSize: 24px;--salt-text-h3-lineHeight: 32px;--salt-text-h4-fontSize: 16px;--salt-text-h4-lineHeight: 20px;--salt-text-label-fontSize: 14px;--salt-text-label-lineHeight: 18px;--salt-text-fontSize: 16px;--salt-text-lineHeight: 20px;--salt-text-minHeight: 20px;--salt-text-display1-fontSize: 84px;--salt-text-display1-lineHeight: 109px;--salt-text-display2-fontSize: 58px;--salt-text-display2-lineHeight: 76px;--salt-text-display3-fontSize: 42px;--salt-text-display3-lineHeight: 54px;--salt-text-notation-fontSize: 14px;--salt-text-notation-lineHeight: 18px}.vuu-density-low{--salt-text-h1-fontSize: 32px;--salt-text-h1-lineHeight: 42px;--salt-text-h2-fontSize: 24px;--salt-text-h2-lineHeight: 32px;--salt-text-h3-fontSize: 18px;--salt-text-h3-lineHeight: 24px;--salt-text-h4-fontSize: 14px;--salt-text-h4-lineHeight: 18px;--salt-text-label-fontSize: 12px;--salt-text-label-lineHeight: 16px;--salt-text-fontSize: 14px;--salt-text-lineHeight: 18px;--salt-text-minHeight: 18px;--salt-text-display1-fontSize: 68px;--salt-text-display1-lineHeight: 88px;--salt-text-display2-fontSize: 46px;--salt-text-display2-lineHeight: 60px;--salt-text-display3-fontSize: 32px;--salt-text-display3-lineHeight: 42px;--salt-text-notation-fontSize: 12px;--salt-text-notation-lineHeight: 16px}.vuu-density-medium{--salt-text-h1-fontSize: 24px;--salt-text-h1-lineHeight: 32px;--salt-text-h2-fontSize: 18px;--salt-text-h2-lineHeight: 24px;--salt-text-h3-fontSize: 14px;--salt-text-h3-lineHeight: 18px;--salt-text-h4-fontSize: 12px;--salt-text-h4-lineHeight: 16px;--salt-text-label-fontSize: 11px;--salt-text-label-lineHeight: 14px;--salt-text-fontSize: 12px;--salt-text-lineHeight: 16px;--salt-text-minHeight: 16px;--salt-text-display1-fontSize: 54px;--salt-text-display1-lineHeight: 70px;--salt-text-display2-fontSize: 36px;--salt-text-display2-lineHeight: 47px;--salt-text-display3-fontSize: 24px;--salt-text-display3-lineHeight: 32px;--salt-text-notation-fontSize: 10px;--salt-text-notation-lineHeight: 13px}.vuu-density-high{--salt-text-h1-fontSize: 18px;--salt-text-h1-lineHeight: 24px;--salt-text-h2-fontSize: 14px;--salt-text-h2-lineHeight: 18px;--salt-text-h3-fontSize: 12px;--salt-text-h3-lineHeight: 16px;--salt-text-h4-fontSize: 11px;--salt-text-h4-lineHeight: 14px;--salt-text-label-fontSize: 10px;--salt-text-label-lineHeight: 13px;--salt-text-fontSize: 12px;--salt-text-lineHeight: 16px;--salt-text-minHeight: 16px;--salt-text-display1-fontSize: 42px;--salt-text-display1-lineHeight: 54px;--salt-text-display2-fontSize: 28px;--salt-text-display2-lineHeight: 36px;--salt-text-display3-fontSize: 18px;--salt-text-display3-lineHeight: 24px;--salt-text-notation-fontSize: 8px;--salt-text-notation-lineHeight: 10px}.vuu-theme{--salt-content-primary-foreground: var(--salt-palette-neutral-primary-foreground);--salt-content-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);--salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);--salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);--salt-content-foreground-hover: var(--salt-palette-navigate-foreground-hover);--salt-content-foreground-active: var(--salt-palette-navigate-foreground-active);--salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);--salt-content-foreground-highlight: var(--salt-palette-interact-background-active)}.vuu-theme{--salt-track-borderStyle: solid;--salt-track-borderStyle-active: solid;--salt-track-borderStyle-complete: solid;--salt-track-borderStyle-incomplete: dotted;--salt-track-borderColor: var(--salt-palette-neutral-secondary-border)}.vuu-theme{--salt-delay-instant: .1s;--salt-delay-perceptible: .3s;--salt-delay-notable: 1s;--salt-delay-cutoff: 10s;--salt-size-icon-base: var(--salt-icon-size-base);--salt-opacity-1: .15;--salt-opacity-2: .25;--salt-opacity-3: .4;--salt-opacity-4: .7;--salt-shadow-0: none;--salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color);--salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);--salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);--salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);--salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color)}.vuu-theme[data-mode=light]{--salt-shadow-1-color: rgba(0, 0, 0, .1);--salt-shadow-2-color: rgba(0, 0, 0, .1);--salt-shadow-3-color: rgba(0, 0, 0, .15);--salt-shadow-4-color: rgba(0, 0, 0, .2);--salt-shadow-5-color: rgba(0, 0, 0, .3)}.vuu-theme[data-mode=dark]{--salt-shadow-1-color: rgba(0, 0, 0, .5);--salt-shadow-2-color: rgba(0, 0, 0, .5);--salt-shadow-3-color: rgba(0, 0, 0, .55);--salt-shadow-4-color: rgba(0, 0, 0, .55);--salt-shadow-5-color: rgba(0, 0, 0, .65)}.vuu-density-touch,.vuu-density-low,.vuu-density-medium,.vuu-density-high{--salt-size-selection: var(--salt-size-selectable);--salt-size-brandBar: 4px;--salt-size-graphic-small: 12px;--salt-size-graphic-medium: 24px;--salt-size-graphic-large: 48px;--salt-size-divider-height: var(--salt-size-separator-height);--salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);--salt-size-detail: var(--salt-size-compact);--salt-size-basis-unit: 4px;--salt-size-adornmentGap: calc(.75 * var(--salt-size-unit));--salt-size-container-spacing: calc(3 * var(--salt-size-unit));--salt-size-separator-strokeWidth: 1px;--salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));--salt-size-sharktooth-height: 5px;--salt-size-sharktooth-width: 10px;--salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));--salt-zIndex-docked: 1050}.vuu-density-high{--salt-size-unit: calc(var(--salt-size-basis-unit) * 1);--salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);--salt-size-accent: calc(var(--salt-size-basis-unit) * .5);--salt-icon-size-base: 10px;--salt-icon-size-status-adornment: 6px}.vuu-density-medium{--salt-size-unit: calc(var(--salt-size-basis-unit) * 2);--salt-size-compact: calc(var(--salt-size-basis-unit) * 2);--salt-size-accent: calc(var(--salt-size-basis-unit) * 1);--salt-icon-size-base: 12px;--salt-icon-size-status-adornment: 8px}.vuu-density-low{--salt-size-unit: calc(var(--salt-size-basis-unit) * 3);--salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);--salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);--salt-icon-size-base: 14px;--salt-icon-size-status-adornment: 10px}.vuu-density-touch{--salt-size-unit: calc(var(--salt-size-basis-unit) * 4);--salt-size-compact: calc(var(--salt-size-basis-unit) * 3);--salt-size-accent: calc(var(--salt-size-basis-unit) * 2);--salt-icon-size-base: 16px;--salt-icon-size-status-adornment: 12px}.vuu-theme{--saltButton-borderRadius: 6px;--saltButton-padding: var(--salt-spacing-400)}.vuu-theme .saltButton{--vuu-icon-color: var(--vuuButtonIcon-color, var(--button-text-color));gap:var(--salt-spacing-200);white-space:nowrap}.vuu-theme .saltButton:active:not(:disabled){--vuu-icon-color: var(--button-text-color-active)}.vuu-theme .saltButton:hover:not(.saltButton-disabled,.saltButton-active,:active){--vuu-icon-color: var(--button-text-color-hover)}.vuu-theme .saltButton-active{--vuu-icon-color: var(--button-text-color-active)}.vuu-theme .saltButton-disabled{--vuu-icon-color: var(--button-text-color-disabled)}.vuu-theme .saltButton-primary{--saltButton-borderColor: var(--vuuButton-borderColor,var(--salt-actionable-primary-foreground));--saltButton-borderWidth: 1px;--saltButton-borderStyle: solid}.vuu-theme .saltButton-primary:not(:disabled):not(:active):not(.saltButton-active):hover{--saltButton-borderColor: var(--vuuButton-borderColor, var(--salt-actionable-primary-background-hover))}.vuu-theme .saltCheckbox{--checkbox-background: white;--checkbox-borderColor: var(--salt-selectable-borderColor);--vuu-icon-color: white;--vuu-icon-left: -1px;--vuu-icon-top: -1px}.vuu-theme .saltCheckbox:has(.saltCheckboxIcon-checked){--checkbox-background: var(--salt-actionable-cta-background);--checkbox-borderColor: var( --salt-container-primary-borderColor)}.vuu-theme .saltCheckbox:hover{--vuu-icon-color:var(--salt-actionable-primary-background-hover);--checkbox-background: var(--vuu-color-pink-10-fade-20);--checkbox-borderColor: var(--salt-selectable-borderColor-hover)}.vuu-theme .saltCheckboxIcon{background:var(--checkbox-background);border-color:var(--checkbox-borderColor)!important;border-radius:3px;border-style:solid;border-width:1px}.vuu-theme .saltCheckboxIcon-checked.saltCheckboxIcon-disabled,.vuu-theme .saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled{background-color:var(--salt-selectable-background-disabled);border-color:transparent}.vuu-theme .saltCheckboxIcon-checked:after{content:"";background-color:var(--vuu-icon-color);left:var(--vuu-icon-left, auto);--vuu-icon-size: calc(var(--salt-size-icon) + 2px);height:var(--vuu-icon-height, var(--vuu-icon-size, 12px));mask:var(--vuu-svg-tick) center center/var(--vuu-icon-size) var(--vuu-icon-size);-webkit-mask:var(--vuu-svg-tick) center center/var(--vuu-icon-size) var(--vuu-icon-size);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;position:absolute;top:var(--vuu-icon-top, auto);width:var(--vuu-icon-width, var(--vuu-icon-size, 12px))}.vuu-theme .vuuDateInput{border-radius:6px}.vuu-theme .vuuFilterPill{--vuuSplitButton-borderRadius: var(--salt-size-base)}.vuu-theme .saltIcon{display:none}.vuu-theme .saltInput-activationIndicator{display:none}.vuu-theme .saltInput:hover{background:inherit}.vuu-theme .saltInput-primary{border:solid 1px var(--input-borderColor, var(--salt-editable-borderColor));border-radius:6px}.vuu-theme .saltInput-focused:hover,.vuu-theme .saltInput-focused{--input-borderColor: var(--vuu-color-purple-10)}.vuu-theme .vuuSplitButton{--vuuSplitButton-borderRadius: 6px}.vuu-theme .vuuSplitter{--splitter-background: var(--vuu-color-gray-05);--splitter-size: 9px;--splitter-borderColor: white;--splitter-borderStyle: none solid none solid;--splitter-borderWidth: 4px}.vuu-theme .vuuSplitter-column{--splitter-borderStyle: solid none solid none}.vuu-theme .saltSwitch{--switch-color: var(--vuu-color-gray-45);--vuu-icon-left: -1px}.vuu-theme .saltSwitch-track{background-color:var(--switch-color);border:none;border-radius:4px;height:14px;padding:0 2px;width:26px}.vuu-theme .saltSwitch:not(.saltSwitch-disabled):hover .saltSwitch-track{--switch-color: var(--vuu-color-pink-10)}.vuu-theme .saltSwitch-thumb{background-color:var(--vuu-color-white);border:none;border-radius:3px;height:10px;margin:0;width:10px}.vuu-theme .saltSwitch-checked{--switch-color: var(--vuu-color-purple-10)}.vuu-theme .saltSwitch-disabled{--switch-color: var(--vuu-color-gray-30)}.vuu-theme .saltSwitch-checked .saltSwitch-thumb,.vuu-theme .saltSwitch-checked:hover .saltSwitch-thumb{background-color:#fff;transform:translate(calc(100% + 2px))}.vuu-theme .saltSwitch-checked .saltSwitch-thumb:after{background-color:var(--switch-color);content:"";left:var(--vuu-icon-left, auto);height:var(--vuu-icon-height, var(--vuu-icon-size, 12px));mask:var(--vuu-svg-tick) center center/var(--vuu-icon-size) var(--vuu-icon-size);-webkit-mask:var(--vuu-svg-tick) center center/var(--vuu-icon-size) var(--vuu-icon-size);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;position:absolute;top:var(--vuu-icon-top, auto);width:var(--vuu-icon-width, var(--vuu-icon-size, 12px))}.vuu-theme{--vuuTableRow-selectionBlock-borderColor: var(--vuu-color-purple-10)}.vuu-theme.vuu-density-high{--vuu-table-row-height: 20px}.vuu-theme.vuu-density-medium{--vuu-table-row-height: 28px}.vuu-theme.vuu-density-low{--vuu-table-row-height: 36px}.vuu-theme.vuu-density-touch{--vuu-table-row-height: 48px}.vuu-theme .vuuTableRow-selected:not(.vuuTableRow-selectedStart,.vuuTableRow-selectedEnd) .vuuTableRow-selectionDecorator{background:var(--vuuTableRow-selectionBlock-borderColor)}.vuu-theme .vuuTableRow-selectedStart .vuuTableRow-selectionDecorator:before,.vuu-theme .vuuTableRow-selectedEnd .vuuTableRow-selectionDecorator:before{background:var(--vuuTableRow-selectionBlock-borderColor)}.vuu-theme .vuuTab{--vuuTab-padding: 0 var(--salt-spacing-400)}.vuu-theme .vuuTabstrip-primary{--vuuOverflowContainer-borderColor: var(--vuu-color-gray-30);--vuuTab-background: var(--vuu-color-gray-28);--vuuTab-borderRadius: 6px 6px 0 0;--vuuTab-borderColor: var(--vuu-color-gray-30);--vuuTab-borderStyle: solid;--vuuTab-borderWidth: 1px}.vuu-theme .vuuTabstrip-primary.vuuOrientation-horizontal{--vuuOverflowContainer-borderStyle: none;--vuuOverflowContainer-contentHeight: calc(var(--salt-size-base) + var(--salt-spacing-100));--vuuOverflowContainer-height: calc(var(--vuuOverflowContainer-contentHeight) + 7px);padding-bottom:7px}.vuu-theme .vuuTabstrip-primary .vuuTab{height:calc(var(--tab-height) + 1px)}.vuu-theme .vuuTabstrip-primary .vuuTab-selected{--vuuTab-background: var(--vuu-color-white);border-bottom-color:#fff;z-index:1}.vuu-theme .vuuTabstrip-primary .vuuTab-selected:before{height:100%;left:0;top:0;border-radius:6px 0 0;width:6px}.vuu-theme .vuuTabstrip-primary .vuuTab:hover:before{background-color:#f37880;height:100%;left:0;top:0;border-radius:6px 0 0;width:6px}.vuu-theme .vuuTabstrip-primary.vuuTabstrip:before{background-color:transparent;border-radius:0 6px 0 0;border-left:solid 1px var(--vuu-color-gray-30);border-right:solid 1px var(--vuu-color-gray-30);border-top:solid 1px var(--vuu-color-gray-30);content:"";position:absolute;bottom:0;left:0;right:0;height:8px;z-index:1}.vuu-theme .saltToggleButtonGroup{--togglebutton-borderRadius: 4px 4px 4px 4px;--salt-spacing-100: 16px;border-radius:6px;gap:0;height:var(--salt-size-base);padding:0}.vuu-theme .saltToggleButtonGroup-horizontal .saltToggleButton{height:100%}.vuu-theme .saltToggleButton{gap:8px;--vuu-icon-color: var(--salt-actionable-secondary-foreground);border-radius:var(--togglebutton-borderRadius);gap:var(--salt-spacing-200);white-space:nowrap}.vuu-theme .saltToggleButton[aria-checked=true],.vuu-theme .saltToggleButton[aria-pressed=true]{--vuu-icon-color: var(--salt-actionable-secondary-foreground-active)}.vuu-theme [data-variant=primary]{--salt-actionable-secondary-background-active: var(--salt-actionable-primary-background-active);border-color:var(--salt-container-secondary-borderColor)}.vuu-theme [data-variant=secondary]{--salt-actionable-secondary-background-active: var(--salt-actionable-primary-background-active);--salt-container-primary-borderColor: transparent }.vuu-theme .vuuStateButtonGroup .saltToggleButton{--togglebutton-borderRadius: 0}.vuu-theme .vuuStateButtonGroup .saltToggleButton:first-child{--togglebutton-borderRadius: 4px 0 0 4px}.vuu-theme .vuuStateButtonGroup .saltToggleButton:last-child{--togglebutton-borderRadius: 0 4px 4px 0}.vuu-theme{--vuuTooltip-borderRadius: 6px}
1755
2
  /*# sourceMappingURL=index.css.map */