@vuu-ui/vuu-theme 0.8.7-debug → 0.8.7

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