@vuu-ui/vuu-theme 0.8.5-debug → 0.8.6-debug

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/index.css +610 -462
  2. package/index.css.map +3 -3
  3. package/package.json +1 -1
package/index.css CHANGED
@@ -1,15 +1,18 @@
1
1
  /* css/global.css */
2
- .salt-theme {
2
+ .vuu-theme {
3
3
  color: var(--salt-text-primary-foreground);
4
4
  font-family: var(--salt-typography-fontFamily);
5
5
  font-size: var(--salt-text-fontSize);
6
6
  letter-spacing: var(--salt-text-letterSpacing);
7
7
  line-height: var(--salt-text-lineHeight);
8
8
  }
9
- .salt-theme[data-mode=light] {
9
+ ::selection {
10
+ background: var(--salt-text-background-selected);
11
+ }
12
+ .vuu-theme[data-mode=light] {
10
13
  color-scheme: light;
11
14
  }
12
- .salt-theme[data-mode=dark] {
15
+ .vuu-theme[data-mode=dark] {
13
16
  color-scheme: dark;
14
17
  }
15
18
  *,
@@ -17,12 +20,23 @@
17
20
  *::after {
18
21
  box-sizing: border-box;
19
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
+ }
20
34
 
21
35
  /* css/foundations/animation.css */
22
- .salt-density-touch,
23
- .salt-density-low,
24
- .salt-density-medium,
25
- .salt-density-high {
36
+ .vuu-density-touch,
37
+ .vuu-density-low,
38
+ .vuu-density-medium,
39
+ .vuu-density-high {
26
40
  --salt-animation-opacity-start: 0;
27
41
  --salt-animation-opacity-end: 1;
28
42
  --salt-animation-scale-start: 0;
@@ -35,10 +49,10 @@
35
49
  --salt-animation-slide-in-left: slide-in-left var(--salt-animation-duration) var(--salt-animation-timing-function);
36
50
  --salt-animation-slide-in-right: slide-in-right var(--salt-animation-duration) var(--salt-animation-timing-function);
37
51
  --salt-animation-slide-in-bottom: slide-in-bottom var(--salt-animation-duration) var(--salt-animation-timing-function);
38
- --salt-animation-slide-out-top: slide-out-top var(--salt-animation-duration) var(--salt-animation-timing-function);
39
- --salt-animation-slide-out-left: slide-out-left var(--salt-animation-duration) var(--salt-animation-timing-function);
40
- --salt-animation-slide-out-right: slide-out-right var(--salt-animation-duration) var(--salt-animation-timing-function);
41
- --salt-animation-slide-out-bottom: slide-out-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;
42
56
  --salt-animation-fade-in-back: fade-in-back var(--salt-animation-duration) var(--salt-animation-timing-function);
43
57
  --salt-animation-fade-in-forward: fade-in-forward var(--salt-animation-duration) var(--salt-animation-timing-function);
44
58
  --salt-animation-fade-in-center: fade-in-center var(--salt-animation-duration) var(--salt-animation-timing-function);
@@ -164,7 +178,18 @@
164
178
  }
165
179
 
166
180
  /* css/foundations/color.css */
167
- .salt-theme {
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);
168
193
  --salt-color-white: rgb(255, 255, 255);
169
194
  --salt-color-black: rgb(0, 0, 0);
170
195
  --salt-color-red-10: rgb(255, 227, 224);
@@ -271,52 +296,64 @@
271
296
  --salt-color-gray-900: rgb(22, 22, 22);
272
297
  }
273
298
 
274
- /* css/foundations/delay.css */
275
- .salt-theme {
276
- --salt-delay-instant: 100;
277
- --salt-delay-perceptible: 300;
278
- --salt-delay-notable: 1000;
279
- --salt-delay-cutoff: 10000;
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;
280
305
  }
281
306
 
282
307
  /* css/foundations/fade.css */
283
- .salt-theme {
284
- --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-foreground));
285
- --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-foreground));
286
- --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-foreground));
287
- --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-foreground));
288
- --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-foreground));
289
- --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-foreground));
290
- --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-foreground));
291
- --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-border));
292
- --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-border));
293
- --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-border));
294
- --salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-border));
295
- --salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-border));
296
- --salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-border));
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));
297
336
  --salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));
298
337
  --salt-color-gray-200-fade-border-readonly: rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly));
299
- --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-background));
300
- --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-background));
301
- --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-background));
302
- --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-background));
303
- --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-background));
304
- --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-background));
305
- --salt-color-gray-300-fade-background: rgba(76, 80, 91, var(--salt-palette-opacity-background));
306
- --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-background));
307
- --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-background));
308
- --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
309
- --salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));
310
- --salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-background));
311
- --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-readonly));
312
- --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-readonly));
313
- --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-readonly));
314
- --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-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));
315
354
  --salt-color-black-fade-backdrop: rgba(36, 37, 38, var(--salt-palette-opacity-backdrop));
316
- --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-fill));
317
- --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
318
- --salt-color-blue-500-fade-fill: rgba(38, 112, 169, var(--salt-palette-opacity-fill));
319
- --salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-fill));
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));
320
357
  --salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 255, var(--salt-palette-opacity-primary-border));
321
358
  --salt-color-white-fade-separatorOpacity-secondary: rgba(255, 255, 255, var(--salt-palette-opacity-secondary-border));
322
359
  --salt-color-white-fade-separatorOpacity-tertiary: rgba(255, 255, 255, var(--salt-palette-opacity-tertiary-border));
@@ -326,93 +363,148 @@
326
363
  }
327
364
 
328
365
  /* css/foundations/icon.css */
329
- .salt-density-touch {
330
- --salt-size-icon-base: 16px;
366
+ .vuu-density-touch {
367
+ --salt-icon-size-base: 16px;
368
+ --salt-icon-size-status-adornment: 12px;
331
369
  }
332
- .salt-density-low {
333
- --salt-size-icon-base: 14px;
370
+ .vuu-density-low {
371
+ --salt-icon-size-base: 14px;
372
+ --salt-icon-size-status-adornment: 10px;
334
373
  }
335
- .salt-density-medium {
336
- --salt-size-icon-base: 12px;
374
+ .vuu-density-medium {
375
+ --salt-icon-size-base: 12px;
376
+ --salt-icon-size-status-adornment: 8px;
337
377
  }
338
- .salt-density-high {
339
- --salt-size-icon-base: 10px;
378
+ .vuu-density-high {
379
+ --salt-icon-size-base: 10px;
380
+ --salt-icon-size-status-adornment: 6px;
340
381
  }
341
382
 
342
383
  /* css/foundations/opacity.css */
343
- .salt-theme {
344
- --salt-opacity-1: 0.15;
345
- --salt-opacity-2: 0.25;
346
- --salt-opacity-3: 0.4;
347
- --salt-opacity-4: 0.7;
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;
348
391
  }
349
392
 
350
393
  /* css/foundations/shadow.css */
351
- .salt-theme[data-mode=light] {
394
+ .vuu-theme[data-mode=light] {
352
395
  --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
353
396
  --salt-shadow-2-color: rgba(0, 0, 0, 0.1);
354
397
  --salt-shadow-3-color: rgba(0, 0, 0, 0.15);
355
398
  --salt-shadow-4-color: rgba(0, 0, 0, 0.2);
356
399
  --salt-shadow-5-color: rgba(0, 0, 0, 0.3);
357
400
  }
358
- .salt-theme[data-mode=dark] {
401
+ .vuu-theme[data-mode=dark] {
359
402
  --salt-shadow-1-color: rgba(0, 0, 0, 0.5);
360
403
  --salt-shadow-2-color: rgba(0, 0, 0, 0.5);
361
404
  --salt-shadow-3-color: rgba(0, 0, 0, 0.55);
362
405
  --salt-shadow-4-color: rgba(0, 0, 0, 0.55);
363
406
  --salt-shadow-5-color: rgba(0, 0, 0, 0.65);
364
407
  }
365
- .salt-theme {
408
+ .vuu-theme {
366
409
  --salt-shadow-0: none;
367
410
  --salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color);
368
411
  --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
369
412
  --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
370
413
  --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
371
- --salt-shadow-5: 0 12px 40px 5px var(--salt-shadow-5-color);
414
+ --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
372
415
  }
373
416
 
374
417
  /* css/foundations/size.css */
375
- .salt-density-touch,
376
- .salt-density-low,
377
- .salt-density-medium,
378
- .salt-density-high {
418
+ .vuu-density-touch,
419
+ .vuu-density-low,
420
+ .vuu-density-medium,
421
+ .vuu-density-high {
379
422
  --salt-size-basis-unit: 4px;
380
- --salt-size-border: 1px;
381
- --salt-size-brandBar: 4px;
382
- --salt-size-divider-strokeWidth: 1px;
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));
383
428
  --salt-size-sharktooth-height: 5px;
384
429
  --salt-size-sharktooth-width: 10px;
385
- --salt-size-divider-height: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
386
- --salt-size-selection: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
387
430
  --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
388
- --salt-size-graphic-small: 12px;
389
- --salt-size-graphic-medium: 24px;
390
- --salt-size-graphic-large: 48px;
391
431
  }
392
- .salt-density-high {
432
+ .vuu-density-high {
393
433
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
394
- --salt-size-detail: calc(var(--salt-size-basis-unit) * 1.5);
395
- --salt-size-base: calc(var(--salt-size-basis-unit) * 5);
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;
396
442
  }
397
- .salt-density-medium {
443
+ .vuu-density-medium {
398
444
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
399
- --salt-size-detail: calc(var(--salt-size-basis-unit) * 2);
400
- --salt-size-base: calc(var(--salt-size-basis-unit) * 7);
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;
401
453
  }
402
- .salt-density-low {
454
+ .vuu-density-low {
403
455
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
404
- --salt-size-detail: calc(var(--salt-size-basis-unit) * 2.5);
405
- --salt-size-base: calc(var(--salt-size-basis-unit) * 9);
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;
406
464
  }
407
- .salt-density-touch {
465
+ .vuu-density-touch {
408
466
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
409
- --salt-size-detail: calc(var(--salt-size-basis-unit) * 3);
410
- --salt-size-base: calc(var(--salt-size-basis-unit) * 11);
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));
411
503
  }
412
504
 
413
505
  /* css/foundations/typography.css */
414
- .salt-theme {
415
- --salt-typography-fontFamily: "Open Sans";
506
+ .vuu-theme {
507
+ --salt-typography-fontFamily: "Nunito Sans";
416
508
  --salt-typography-fontFamily-code: "PT Mono";
417
509
  --salt-typography-fontWeight-light: 300;
418
510
  --salt-typography-fontWeight-regular: 400;
@@ -423,10 +515,10 @@
423
515
  }
424
516
 
425
517
  /* css/foundations/zindex.css */
426
- .salt-density-touch,
427
- .salt-density-low,
428
- .salt-density-medium,
429
- .salt-density-high {
518
+ .vuu-density-touch,
519
+ .vuu-density-low,
520
+ .vuu-density-medium,
521
+ .vuu-density-high {
430
522
  --salt-zIndex-default: 1;
431
523
  --salt-zIndex-popout: 1000;
432
524
  --salt-zIndex-docked: 1050;
@@ -439,38 +531,69 @@
439
531
  --salt-zIndex-flyover: 1500;
440
532
  }
441
533
 
442
- /* css/foundations/palette.css */
443
- .salt-theme {
444
- --salt-palette-opacity-background: var(--salt-opacity-3);
445
- --salt-palette-opacity-border: var(--salt-opacity-3);
446
- --salt-palette-opacity-border-readonly: var(--salt-opacity-2);
447
- --salt-palette-opacity-fill: var(--salt-opacity-3);
448
- --salt-palette-opacity-foreground: var(--salt-opacity-4);
449
- --salt-palette-opacity-backdrop: var(--salt-opacity-3);
450
- --salt-palette-opacity-stroke: var(--salt-opacity-3);
451
- --salt-palette-opacity-primary-border: var(--salt-opacity-3);
452
- --salt-palette-opacity-secondary-border: var(--salt-opacity-2);
453
- --salt-palette-opacity-tertiary-border: var(--salt-opacity-1);
454
- }
455
- .salt-theme[data-mode=light] {
534
+ /* css/palette/accent.css */
535
+ .vuu-theme[data-mode=light] {
456
536
  --salt-palette-accent-background: var(--salt-color-blue-500);
537
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
457
538
  --salt-palette-accent-border: var(--salt-color-blue-500);
539
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
458
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] {
459
580
  --salt-palette-interact-background: transparent;
460
581
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
461
- --salt-palette-interact-background-hover: var(--salt-color-blue-10);
582
+ --salt-palette-interact-background-hover: var(--vuu-color-gray-10);
462
583
  --salt-palette-interact-background-active: var(--salt-color-blue-30);
463
584
  --salt-palette-interact-background-disabled: transparent;
585
+ --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-fade-background);
464
586
  --salt-palette-interact-border: var(--salt-color-gray-200);
465
587
  --salt-palette-interact-border-active: var(--salt-color-blue-600);
466
588
  --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-600-fade-fill);
467
589
  --salt-palette-interact-border-disabled: var(--salt-color-gray-200-fade-border);
468
590
  --salt-palette-interact-border-hover: var(--salt-color-blue-500);
469
591
  --salt-palette-interact-border-readonly: var(--salt-color-gray-200-fade-border-readonly);
470
- --salt-palette-interact-foreground: var(--salt-color-gray-900);
471
- --salt-palette-interact-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
472
- --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
473
- --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
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);
474
597
  --salt-palette-interact-outline: var(--salt-color-blue-600);
475
598
  --salt-palette-interact-cta-background: var(--salt-color-blue-600);
476
599
  --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
@@ -482,16 +605,16 @@
482
605
  --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
483
606
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
484
607
  --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
485
- --salt-palette-interact-primary-background: var(--salt-color-gray-60);
608
+ --salt-palette-interact-primary-background: var(--vuu-color-white);
486
609
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-200);
487
610
  --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
488
611
  --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background);
489
- --salt-palette-interact-primary-background-hover: var(--salt-color-gray-40);
490
- --salt-palette-interact-primary-foreground: var(--salt-color-gray-900);
612
+ --salt-palette-interact-primary-background-hover: var(--vuu-color-pink-10);
613
+ --salt-palette-interact-primary-foreground: var(--vuu-color-gray-50);
491
614
  --salt-palette-interact-primary-foreground-active: var(--salt-color-white);
492
615
  --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
493
616
  --salt-palette-interact-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
494
- --salt-palette-interact-primary-foreground-hover: var(--salt-color-gray-900);
617
+ --salt-palette-interact-primary-foreground-hover: var(--vuu-color-gray-80);
495
618
  --salt-palette-interact-secondary-background: transparent;
496
619
  --salt-palette-interact-secondary-background-active: var(--salt-color-gray-200);
497
620
  --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
@@ -502,91 +625,26 @@
502
625
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
503
626
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
504
627
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
505
- --salt-palette-error-background-emphasize: var(--salt-color-red-10);
506
- --salt-palette-error-border: var(--salt-color-red-500);
507
- --salt-palette-error-foreground: var(--salt-color-red-500);
508
- --salt-palette-info-background-emphasize: var(--salt-color-blue-10);
509
- --salt-palette-info-border: var(--salt-color-blue-500);
510
- --salt-palette-info-foreground: var(--salt-color-blue-500);
511
- --salt-palette-success-background-emphasize: var(--salt-color-green-10);
512
- --salt-palette-success-border: var(--salt-color-green-500);
513
- --salt-palette-success-foreground: var(--salt-color-green-500);
514
- --salt-palette-warning-background-emphasize: var(--salt-color-orange-10);
515
- --salt-palette-warning-border: var(--salt-color-orange-500);
516
- --salt-palette-warning-foreground: var(--salt-color-orange-500);
517
- --salt-palette-measured-fill: var(--salt-color-blue-500);
518
- --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
519
- --salt-palette-measured-foreground: var(--salt-color-gray-90);
520
- --salt-palette-measured-foreground-active: var(--salt-color-blue-500);
521
- --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
522
- --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
523
- --salt-palette-measured-background: var(--salt-color-gray-60);
524
- --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
525
- --salt-palette-measured-border: var(--salt-color-gray-90);
526
- --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
527
- --salt-palette-navigate-primary-background: transparent;
528
- --salt-palette-navigate-primary-background-active: transparent;
529
- --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
530
- --salt-palette-navigate-secondary-background: transparent;
531
- --salt-palette-navigate-secondary-background-active: transparent;
532
- --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-30);
533
- --salt-palette-navigate-tertiary-background: transparent;
534
- --salt-palette-navigate-tertiary-background-active: transparent;
535
- --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-20);
536
- --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);
537
- --salt-palette-navigate-foreground-active: var(--salt-color-blue-700);
538
- --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
539
- --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
540
- --salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
541
- --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
542
- --salt-palette-negative-background: var(--salt-color-red-40);
543
- --salt-palette-negative-foreground: var(--salt-color-red-700);
544
- --salt-palette-neutral-primary-background: var(--salt-color-white);
545
- --salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
546
- --salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
547
- --salt-palette-neutral-primary-foreground: var(--salt-color-gray-900);
548
- --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
549
- --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary);
550
- --salt-palette-neutral-primary-border: var(--salt-color-gray-60);
551
- --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-60-fade-border);
552
- --salt-palette-neutral-secondary-background: var(--salt-color-gray-20);
553
- --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background);
554
- --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly);
555
- --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
556
- --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
557
- --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
558
- --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
559
- --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
560
- --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
561
- --salt-palette-neutral-tertiary-background: transparent;
562
- --salt-palette-neutral-tertiary-background-disabled: transparent;
563
- --salt-palette-neutral-tertiary-background-readonly: transparent;
564
- --salt-palette-neutral-tertiary-border: transparent;
565
- --salt-palette-neutral-tertiary-border-disabled: transparent;
566
- --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
567
- --salt-palette-positive-background: var(--salt-color-green-20);
568
- --salt-palette-positive-foreground: var(--salt-color-green-700);
569
628
  }
570
- .salt-theme[data-mode=dark] {
571
- --salt-palette-accent-background: var(--salt-color-blue-500);
572
- --salt-palette-accent-border: var(--salt-color-blue-500);
573
- --salt-palette-accent-foreground: var(--salt-color-white);
629
+ .vuu-theme[data-mode=dark] {
574
630
  --salt-palette-interact-background: transparent;
575
631
  --salt-palette-interact-background-active: var(--salt-color-blue-700);
576
632
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
577
633
  --salt-palette-interact-background-hover: var(--salt-color-blue-800);
578
634
  --salt-palette-interact-background-disabled: transparent;
635
+ --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-700-fade-background);
579
636
  --salt-palette-interact-border: var(--salt-color-gray-90);
580
637
  --salt-palette-interact-border-active: var(--salt-color-blue-100);
581
638
  --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-100-fade-fill);
582
639
  --salt-palette-interact-border-disabled: var(--salt-color-gray-90-fade-border);
583
640
  --salt-palette-interact-border-hover: var(--salt-color-blue-500);
584
641
  --salt-palette-interact-border-readonly: var(--salt-color-gray-90-fade-border-readonly);
585
- --salt-palette-interact-foreground: var(--salt-color-white);
586
- --salt-palette-interact-foreground-disabled: var(--salt-color-white-fade-foreground);
587
- --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
588
- --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
589
- --salt-palette-interact-outline: var(--salt-color-blue-100);
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);
590
648
  --salt-palette-interact-cta-background: var(--salt-color-blue-600);
591
649
  --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
592
650
  --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);
@@ -617,28 +675,27 @@
617
675
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
618
676
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);
619
677
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
620
- --salt-palette-error-background-emphasize: var(--salt-color-red-900);
621
- --salt-palette-error-border: var(--salt-color-red-500);
622
- --salt-palette-error-foreground: var(--salt-color-red-500);
623
- --salt-palette-info-background-emphasize: var(--salt-color-blue-900);
624
- --salt-palette-info-border: var(--salt-color-blue-500);
625
- --salt-palette-info-foreground: var(--salt-color-blue-500);
626
- --salt-palette-success-background-emphasize: var(--salt-color-green-900);
627
- --salt-palette-success-border: var(--salt-color-green-500);
628
- --salt-palette-success-foreground: var(--salt-color-green-500);
629
- --salt-palette-warning-background-emphasize: var(--salt-color-orange-900);
630
- --salt-palette-warning-border: var(--salt-color-orange-500);
631
- --salt-palette-warning-foreground: var(--salt-color-orange-500);
632
- --salt-palette-measured-fill: var(--salt-color-blue-300);
633
- --salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
634
- --salt-palette-measured-foreground: var(--salt-color-gray-90);
635
- --salt-palette-measured-foreground-active: var(--salt-color-blue-300);
636
- --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
637
- --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
638
- --salt-palette-measured-background: var(--salt-color-gray-300);
639
- --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
640
- --salt-palette-measured-border: var(--salt-color-gray-90);
641
- --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
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] {
642
699
  --salt-palette-navigate-primary-background: transparent;
643
700
  --salt-palette-navigate-primary-background-active: transparent;
644
701
  --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
@@ -652,10 +709,44 @@
652
709
  --salt-palette-navigate-foreground-active: var(--salt-color-blue-300);
653
710
  --salt-palette-navigate-foreground-visited: var(--salt-color-purple-100);
654
711
  --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
655
- --salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
712
+ --salt-palette-navigate-indicator-active: var(--vuu-color-pink-10);
656
713
  --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
657
- --salt-palette-negative-background: var(--salt-color-red-40);
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] {
658
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] {
659
750
  --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
660
751
  --salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background);
661
752
  --salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly);
@@ -675,40 +766,101 @@
675
766
  --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
676
767
  --salt-palette-neutral-tertiary-background: transparent;
677
768
  --salt-palette-neutral-tertiary-background-disabled: transparent;
678
- --salt-palette-neutral-tertiary-background-readonly: transparent;
679
769
  --salt-palette-neutral-tertiary-border: transparent;
680
770
  --salt-palette-neutral-tertiary-border-disabled: transparent;
681
771
  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
682
- --salt-palette-positive-background: var(--salt-color-green-30);
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] {
683
790
  --salt-palette-positive-foreground: var(--salt-color-green-300);
684
791
  }
685
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
+
686
835
  /* css/characteristics/accent.css */
687
- .salt-density-high {
836
+ .vuu-density-high {
688
837
  --salt-accent-fontSize: 8px;
689
838
  --salt-accent-lineHeight: 11px;
690
839
  }
691
- .salt-density-medium {
840
+ .vuu-density-medium {
692
841
  --salt-accent-fontSize: 10px;
693
842
  --salt-accent-lineHeight: 13px;
694
843
  }
695
- .salt-density-low {
844
+ .vuu-density-low {
696
845
  --salt-accent-fontSize: 12px;
697
846
  --salt-accent-lineHeight: 16px;
698
847
  }
699
- .salt-density-touch {
848
+ .vuu-density-touch {
700
849
  --salt-accent-fontSize: 14px;
701
850
  --salt-accent-lineHeight: 18px;
702
851
  }
703
- .salt-theme {
852
+ .vuu-theme {
704
853
  --salt-accent-background: var(--salt-palette-accent-background);
854
+ --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
705
855
  --salt-accent-borderColor: var(--salt-palette-accent-border);
856
+ --salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled);
706
857
  --salt-accent-foreground: var(--salt-palette-accent-foreground);
858
+ --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
707
859
  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
708
860
  }
709
861
 
710
862
  /* css/characteristics/actionable.css */
711
- .salt-theme {
863
+ .vuu-theme {
712
864
  --salt-actionable-cursor-hover: pointer;
713
865
  --salt-actionable-cursor-active: pointer;
714
866
  --salt-actionable-cursor-disabled: not-allowed;
@@ -745,7 +897,7 @@
745
897
  }
746
898
 
747
899
  /* css/characteristics/container.css */
748
- .salt-theme {
900
+ .vuu-theme {
749
901
  --salt-container-borderStyle: solid;
750
902
  --salt-container-primary-background: var(--salt-palette-neutral-primary-background);
751
903
  --salt-container-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
@@ -761,16 +913,8 @@
761
913
  --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-tertiary-border-disabled);
762
914
  }
763
915
 
764
- /* css/characteristics/differential.css */
765
- .salt-theme {
766
- --salt-differential-positive-background: var(--salt-palette-positive-background);
767
- --salt-differential-negative-background: var(--salt-palette-negative-background);
768
- --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
769
- --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
770
- }
771
-
772
916
  /* css/characteristics/draggable.css */
773
- .salt-theme {
917
+ .vuu-theme {
774
918
  --salt-draggable-horizontal-cursor-hover: row-resize;
775
919
  --salt-draggable-horizontal-cursor-active: row-resize;
776
920
  --salt-draggable-vertical-cursor-hover: col-resize;
@@ -780,7 +924,7 @@
780
924
  }
781
925
 
782
926
  /* css/characteristics/target.css */
783
- .salt-theme {
927
+ .vuu-theme {
784
928
  --salt-target-background-hover: var(--salt-palette-interact-background-hover);
785
929
  --salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);
786
930
  --salt-target-borderStyle: dashed;
@@ -790,7 +934,7 @@
790
934
  }
791
935
 
792
936
  /* css/characteristics/editable.css */
793
- .salt-theme {
937
+ .vuu-theme {
794
938
  --salt-editable-cursor-hover: text;
795
939
  --salt-editable-cursor-active: text;
796
940
  --salt-editable-cursor-disabled: not-allowed;
@@ -816,16 +960,11 @@
816
960
  --salt-editable-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
817
961
  --salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);
818
962
  --salt-editable-secondary-background-readonly: var(--salt-palette-neutral-secondary-background-readonly);
819
- --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
820
- --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
821
- --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
822
- --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
823
- --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
824
963
  --salt-editable-help-fontStyle: italic;
825
964
  }
826
965
 
827
966
  /* css/characteristics/focused.css */
828
- .salt-theme {
967
+ .vuu-theme {
829
968
  --salt-focused-outlineColor: var(--salt-palette-interact-outline);
830
969
  --salt-focused-outlineStyle: dotted;
831
970
  --salt-focused-outlineWidth: 2px;
@@ -845,34 +984,8 @@
845
984
  position: absolute;
846
985
  }
847
986
 
848
- /* css/characteristics/measured.css */
849
- .salt-theme {
850
- --salt-measured-borderStyle: solid;
851
- --salt-measured-borderStyle-active: solid;
852
- --salt-measured-borderStyle-complete: solid;
853
- --salt-measured-borderStyle-incomplete: dotted;
854
- --salt-measured-borderWidth: 2px;
855
- --salt-measured-borderWidth-active: 2px;
856
- --salt-measured-borderWidth-complete: 2px;
857
- --salt-measured-borderWidth-incomplete: 2px;
858
- --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
859
- --salt-measured-textAlign: center;
860
- --salt-measured-background: var(--salt-palette-measured-background);
861
- --salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
862
- --salt-measured-borderColor: var(--salt-palette-measured-border);
863
- --salt-measured-borderColor-disabled: var(--salt-palette-measured-border-disabled);
864
- --salt-measured-fill: var(--salt-palette-measured-fill);
865
- --salt-measured-fill-disabled: var(--salt-palette-measured-fill-disabled);
866
- --salt-measured-foreground: var(--salt-palette-measured-foreground);
867
- --salt-measured-foreground-hover: var(--salt-palette-measured-foreground-active);
868
- --salt-measured-foreground-active: var(--salt-palette-measured-foreground-active);
869
- --salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
870
- --salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
871
- --salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);
872
- }
873
-
874
987
  /* css/characteristics/navigable.css */
875
- .salt-theme {
988
+ .vuu-theme {
876
989
  --salt-navigable-cursor-active: pointer;
877
990
  --salt-navigable-cursor-hover: pointer;
878
991
  --salt-navigable-cursor-disabled: not-allowed;
@@ -896,9 +1009,8 @@
896
1009
  }
897
1010
 
898
1011
  /* css/characteristics/overlayable.css */
899
- .salt-theme {
1012
+ .vuu-theme {
900
1013
  --salt-overlayable-shadow-scroll: var(--salt-shadow-1);
901
- --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
902
1014
  --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
903
1015
  --salt-overlayable-shadow: var(--salt-shadow-2);
904
1016
  --salt-overlayable-shadow-hover: var(--salt-shadow-3);
@@ -909,11 +1021,12 @@
909
1021
  }
910
1022
 
911
1023
  /* css/characteristics/selectable.css */
912
- .salt-theme {
1024
+ .vuu-theme {
913
1025
  --salt-selectable-cursor-hover: pointer;
914
1026
  --salt-selectable-cursor-selected: pointer;
915
1027
  --salt-selectable-cursor-blurSelected: pointer;
916
1028
  --salt-selectable-cursor-disabled: not-allowed;
1029
+ --salt-selectable-cursor-readonly: not-allowed;
917
1030
  --salt-selectable-borderStyle: solid;
918
1031
  --salt-selectable-borderStyle-hover: solid;
919
1032
  --salt-selectable-borderStyle-selected: solid;
@@ -923,38 +1036,37 @@
923
1036
  --salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
924
1037
  --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);
925
1038
  --salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
926
- --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
927
- --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
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);
928
1045
  --salt-selectable-background: var(--salt-palette-interact-background);
929
1046
  --salt-selectable-background-hover: var(--salt-palette-interact-background-hover);
930
1047
  --salt-selectable-background-selected: var(--salt-palette-interact-background-active);
931
1048
  --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
932
1049
  --salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);
933
- --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
1050
+ --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
934
1051
  --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
935
1052
  --salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
936
1053
  --salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
937
- --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
938
1054
  --salt-selectable-cta-background: var(--salt-palette-interact-background);
939
1055
  --salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled);
940
1056
  --salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
941
1057
  --salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active);
942
1058
  --salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled);
943
- --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
1059
+ --salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
944
1060
  --salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
945
1061
  --salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled);
946
- --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
947
- --salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
948
1062
  --salt-selectable-primary-background: var(--salt-palette-interact-background);
949
1063
  --salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled);
950
1064
  --salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
951
1065
  --salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active);
952
1066
  --salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled);
953
- --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
1067
+ --salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
954
1068
  --salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active);
955
1069
  --salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled);
956
- --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
957
- --salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
958
1070
  --salt-selectable-secondary-background: var(--salt-palette-interact-background);
959
1071
  --salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled);
960
1072
  --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
@@ -963,7 +1075,7 @@
963
1075
  }
964
1076
 
965
1077
  /* css/characteristics/separable.css */
966
- .salt-theme {
1078
+ .vuu-theme {
967
1079
  --salt-separable-borderStyle: solid;
968
1080
  --salt-separable-primary-borderColor: var(--salt-palette-neutral-primary-separator);
969
1081
  --salt-separable-secondary-borderColor: var(--salt-palette-neutral-secondary-separator);
@@ -971,23 +1083,29 @@
971
1083
  }
972
1084
 
973
1085
  /* css/characteristics/status.css */
974
- .salt-theme {
1086
+ .vuu-theme {
975
1087
  --salt-status-info-foreground: var(--salt-palette-info-foreground);
976
1088
  --salt-status-success-foreground: var(--salt-palette-success-foreground);
977
1089
  --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
978
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);
979
1094
  --salt-status-info-borderColor: var(--salt-palette-info-border);
980
1095
  --salt-status-success-borderColor: var(--salt-palette-success-border);
981
1096
  --salt-status-warning-borderColor: var(--salt-palette-warning-border);
982
1097
  --salt-status-error-borderColor: var(--salt-palette-error-border);
983
- --salt-status-info-background-emphasize: var(--salt-palette-info-background-emphasize);
984
- --salt-status-success-background-emphasize: var(--salt-palette-success-background-emphasize);
985
- --salt-status-warning-background-emphasize: var(--salt-palette-warning-background-emphasize);
986
- --salt-status-error-background-emphasize: var(--salt-palette-error-background-emphasize);
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);
987
1105
  }
988
1106
 
989
1107
  /* css/characteristics/taggable.css */
990
- .salt-theme {
1108
+ .vuu-theme {
991
1109
  --salt-taggable-cursor-hover: pointer;
992
1110
  --salt-taggable-cursor-active: pointer;
993
1111
  --salt-taggable-cursor-disabled: not-allowed;
@@ -1002,7 +1120,7 @@
1002
1120
  }
1003
1121
 
1004
1122
  /* css/characteristics/text.css */
1005
- .salt-theme {
1123
+ .vuu-theme {
1006
1124
  --salt-text-letterSpacing: 0;
1007
1125
  --salt-text-textAlign: left;
1008
1126
  --salt-text-textAlign-embedded: center;
@@ -1012,27 +1130,35 @@
1012
1130
  --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
1013
1131
  --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
1014
1132
  --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1133
+ --salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
1015
1134
  --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
1016
1135
  --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
1017
1136
  --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
1137
+ --salt-text-h2-fontFamily: var(--salt-typography-fontFamily);
1018
1138
  --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1019
1139
  --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1020
1140
  --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1141
+ --salt-text-h3-fontFamily: var(--salt-typography-fontFamily);
1021
1142
  --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1022
1143
  --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1023
1144
  --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1145
+ --salt-text-h4-fontFamily: var(--salt-typography-fontFamily);
1024
1146
  --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
1025
1147
  --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
1026
1148
  --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1149
+ --salt-text-label-fontFamily: var(--salt-typography-fontFamily);
1027
1150
  --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
1028
1151
  --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
1029
1152
  --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1153
+ --salt-text-display1-fontFamily: var(--salt-typography-fontFamily);
1030
1154
  --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
1031
1155
  --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1032
1156
  --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
1157
+ --salt-text-display2-fontFamily: var(--salt-typography-fontFamily);
1033
1158
  --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1034
1159
  --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1035
1160
  --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1161
+ --salt-text-display3-fontFamily: var(--salt-typography-fontFamily);
1036
1162
  --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1037
1163
  --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1038
1164
  --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
@@ -1049,7 +1175,7 @@
1049
1175
  --salt-text-link-textDecoration-selected: underline;
1050
1176
  --salt-text-code-fontFamily: var(--salt-typography-fontFamily-code);
1051
1177
  }
1052
- .salt-density-touch {
1178
+ .vuu-density-touch {
1053
1179
  --salt-text-h1-fontSize: 42px;
1054
1180
  --salt-text-h1-lineHeight: 54px;
1055
1181
  --salt-text-h2-fontSize: 32px;
@@ -1070,7 +1196,7 @@
1070
1196
  --salt-text-display3-fontSize: 42px;
1071
1197
  --salt-text-display3-lineHeight: 54px;
1072
1198
  }
1073
- .salt-density-low {
1199
+ .vuu-density-low {
1074
1200
  --salt-text-h1-fontSize: 32px;
1075
1201
  --salt-text-h1-lineHeight: 42px;
1076
1202
  --salt-text-h2-fontSize: 24px;
@@ -1091,7 +1217,7 @@
1091
1217
  --salt-text-display3-fontSize: 32px;
1092
1218
  --salt-text-display3-lineHeight: 42px;
1093
1219
  }
1094
- .salt-density-medium {
1220
+ .vuu-density-medium {
1095
1221
  --salt-text-h1-fontSize: 24px;
1096
1222
  --salt-text-h1-lineHeight: 32px;
1097
1223
  --salt-text-h2-fontSize: 18px;
@@ -1112,7 +1238,7 @@
1112
1238
  --salt-text-display3-fontSize: 24px;
1113
1239
  --salt-text-display3-lineHeight: 32px;
1114
1240
  }
1115
- .salt-density-high {
1241
+ .vuu-density-high {
1116
1242
  --salt-text-h1-fontSize: 18px;
1117
1243
  --salt-text-h1-lineHeight: 24px;
1118
1244
  --salt-text-h2-fontSize: 14px;
@@ -1134,182 +1260,204 @@
1134
1260
  --salt-text-display3-lineHeight: 24px;
1135
1261
  }
1136
1262
 
1137
- /* css/icons/icons.css */
1138
- .salt-theme {
1139
- --svg-add: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M29 16h-9V7a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v9H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h9v9a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-9h9a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1z"/></svg>');
1140
- --svg-alert-circle-filled: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path class="fill" d="M9,1a8,8,0,1,0,8,8A8,8,0,0,0,9,1ZM7.7,3.3875A.35552.35552,0,0,1,7.8685,3.05,3.12313,3.12313,0,0,1,8.981,2.821a3.4307,3.4307,0,0,1,1.116.172.38849.38849,0,0,1,.2.3435v1.225c0,1.4425-.2885,5.4455-.3415,5.9735a.26351.26351,0,0,1-.26528.26171L9.662,10.795H8.3a.284.284,0,0,1-.289-.2365c-.05-.682-.311-4.55-.311-5.9455ZM9,14.425a1.287,1.287,0,0,1-1.4-1.3155,1.33,1.33,0,0,1,1.308-1.35167q.046-.00076.092.00167a1.316,1.316,0,0,1,1.3978,1.22877q.00389.06054.0022.12123A1.287,1.287,0,0,1,9,14.425Z" /></svg>');
1141
- --svg-arrow-thin: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M17.75,8.04h-14L8.72,3.07a.48349.48349,0,0,0,.01642-.68357L8.72,2.37l-.35-.36a.5135.5135,0,0,0-.71,0L1.24,8.44a.5135.5135,0,0,0,0,.71l6.39,6.84a.5135.5135,0,0,0,.71,0l.35-.35a.5135.5135,0,0,0,0-.71L3.76,9.5H17.75A.25.25,0,0,0,18,9.25V8.29A.25.25,0,0,0,17.75,8.04Z" /></svg>');
1142
- --svg-box: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M8.2,17.797,1.4115,14.0255A.8.8,0,0,1,1,13.326V6.597l7.2,4Z" /><path d="M16.5885,14.0255,9.8,17.797v-7.2l7.2-4v6.729A.8.8,0,0,1,16.5885,14.0255Z" /><path d="M12.3185,1.8585,9.381.2675a.8.8,0,0,0-.762,0L1.296,4.234a.4125.4125,0,0,0,0,.7255L4.0605,6.457Z" /><path d="M16.704,4.234,13.985,2.7615l-8.2575,4.6L9,9.1325l7.704-4.173a.4125.4125,0,0,0,0-.7255Z" /></svg>');
1143
- --svg-caret-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><polygon points="12,8 22,16 12,24 "/></svg>');
1144
- --svg-caret-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><polygon points="12,8 22,16 12,24 "/></svg>');
1145
- --svg-checkbox: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z"/><rect fill="none" width="32" height="32"/></svg>');
1146
- --svg-checkbox-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z"/><polygon points="14 21.5 9 16.54 10.59 15 14 18.35 21.41 11 23 12.58 14 21.5"/><rect fill="none" width="32" height="32"/></svg>');
1147
- --svg-close: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M26.485 6.686L18 15.172 9.515 6.686a1 1 0 0 0-1.414 0L6.686 8.1a1 1 0 0 0 0 1.414L15.172 18l-8.486 8.485a1 1 0 0 0 0 1.414L8.1 29.314a1 1 0 0 0 1.414 0L18 20.828l8.485 8.486a1 1 0 0 0 1.414 0l1.415-1.414a1 1 0 0 0 0-1.414L20.828 18l8.486-8.485a1 1 0 0 0 0-1.414L27.9 6.686a1 1 0 0 0-1.415 0z"/></svg>');
1148
- --svg-close-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path class="a" d="M14.657,3.343a8,8,0,1,0-.00021,11.31371l.00021-.00021A8,8,0,0,0,14.657,3.343Zm-1.3435,9.265-.707.7055a.6.6,0,0,1-.84853.00147l-.00147-.00147L9,10.5555l-2.758,2.758a.6.6,0,0,1-.84853.00147L5.392,13.3135l-.7045-.7075a.6.6,0,0,1-.00147-.84853L4.6875,11.756,7.4445,9,4.6875,6.242A.6.6,0,0,1,4.686,5.39347L4.6875,5.392l.707-.707A.6.6,0,0,1,6.243,4.68353L6.2445,4.685,9,7.444l2.758-2.7575a.6.6,0,0,1,.84853-.00147l.00147.00147.707.707a.6.6,0,0,1,.00147.84853L13.315,6.2435,10.5555,9l2.758,2.758a.6.6,0,0,1,.00147.84853Z" /></svg>');
1149
- --svg-checkbox-small: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M3.78809,9A.999.999,0,0,1,3,8.61523L.71191,5.61508A.9998.9998,0,1,1,2.28808,4.38461l1.5,1.99137L7.71192,1.385A.9998.9998,0,1,1,9.28809,2.61549L4.57617,8.61523A.999.999,0,0,1,3.78809,9Z" /></svg>');
1150
- --svg-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="1 1 16 16"><path d="M4,7.01a1,1,0,0,1,1.7055-.7055l3.289,3.286,3.289-3.286a1,1,0,0,1,1.437,1.3865l-.0245.0245L9.7,11.7075a1,1,0,0,1-1.4125,0L4.293,7.716A.9945.9945,0,0,1,4,7.01Z" /></svg>');
1151
- --svg-chevron-double-left: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="1 1 16 16"><path d="M3,9a.994.994,0,0,0,.2925.7045l3.9915,3.99a1,1,0,1,0,1.4355-1.386L8.695,12.284,5.4095,9l3.286-3.285A1,1,0,0,0,7.309,4.28l-.0245.0245L3.293,8.2945A.994.994,0,0,0,3,9Z"/><path d="M9,9a.994.994,0,0,0,.2925.7045l3.9915,3.99a1,1,0,1,0,1.4355-1.386l-.0245-.0245L11.4095,9l3.286-3.285A1,1,0,0,0,13.309,4.28l-.0245.0245L9.293,8.2945A.994.994,0,0,0,9,9Z"/></svg>');
1152
- --svg-chevron-double-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="1 1 16 16"><path d="M15,9a.994.994,0,0,1-.2925.7045l-3.9915,3.99a1,1,0,1,1-1.4355-1.386l.0245-.0245L12.5905,9,9.3045,5.715A1,1,0,0,1,10.691,4.28l.0245.0245,3.9915,3.99A.994.994,0,0,1,15,9Z"/><path d="M9,9a.994.994,0,0,1-.2925.7045l-3.9915,3.99a1,1,0,1,1-1.436-1.385l.0245-.0245L6.5905,9,3.3045,5.715A1,1,0,0,1,4.6915,4.28l.0245.0245,3.9915,3.99A.994.994,0,0,1,9,9Z"/></svg>');
1153
- --svg-column-2A: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M16,1H10V17h6a1,1,0,0,0,1-1V2A1,1,0,0,0,16,1Z" /><path d="M8,1H2A1,1,0,0,0,1,2V16a1,1,0,0,0,1,1H8Z" /></svg>');
1154
- --svg-column-2B: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M16,1H13V17h3a1,1,0,0,0,1-1V2A1,1,0,0,0,16,1Z" /><path d="M11,1H2A1,1,0,0,0,1,2V16a1,1,0,0,0,1,1h9Z" /></svg>');
1155
- --svg-corner-triangle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 5"><path d="M4.76248.00005a.249.249,0,0,0-.177.073l-4.5,4.5a.25.25,0,0,0,.177.427h4.5a.25.25,0,0,0,.25-.25v-4.5A.25.25,0,0,0,4.76248.00005Z"/></svg>');
1156
- --svg-filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path class="a" d="M15.473,1H1.527a.5.5,0,0,0-.3935.8085L7,9.2945V16.95a.496.496,0,0,0,.84.412l1.9905-2.0765A.60949.60949,0,0,0,10,14.864V9.2945l5.8665-7.486A.5.5,0,0,0,15.473,1Z" /></svg>');
1157
- --svg-folder-closed: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M1 12v-1h9.998l-0-6.001h-9.999l0.001 7.001h-1v-11h4.117l2 1h5.883v1h-0.002v9h-10.998zM5.881 3l-2-1h-2.882v1.999h9.999l0-0.999h-5.117z"/></svg>');
1158
- --svg-folder-open: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M1 10l3-6h7v-1h1v9h-12v-11h4.118l2 1h4.882v1h-5.118l-2-1h-2.882v8z"/></svg>');
1159
- --svg-function: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path class="fill" d="M3.212,16.706a3.674,3.674,0,0,1-1.6415-.356c-.059-.0285-.09-.0435-.0685-.206l.2285-1.98a4.20837,4.20837,0,0,0,1.503.314c1.2205,0,1.5555-.8845,1.8445-2.8645l.019-.1405a7.00313,7.00313,0,0,0,.0945-.831c.01-.1915.0815-1.187.0815-1.187H2.446l.4745-1.4575a.2405.2405,0,0,1,.2295-.167H5.404s.1315-1.4435.2115-1.9895l.0805-.569C6.1625,1.8945,7.563.254,9.9775.254A2.8046,2.8046,0,0,1,11.23.475a.147.147,0,0,1,.115.1665L11.072,2.503c-.0155.096-.05.096-.0615.096a3.163,3.163,0,0,0-1.1-.204c-1.529,0-1.884,1.5745-2.1625,3.4765l-.0645.4645c-.05.35-.1405,1.4935-.1405,1.4935h2.981l-.474,1.458a.242.242,0,0,1-.2295.1665h-2.4S7.3555,10.5,7.35,10.667a8.62,8.62,0,0,1-.129,1.1155C6.8575,14.3395,6.1205,16.706,3.212,16.706Zm11.867.221c-.4055-.592-1.35-2.012-1.8755-2.8285.473-.6755,1.322-2.031,1.738-2.694l.023-.0375a.187.187,0,0,0,.0115-.195.1925.1925,0,0,0-.18-.09H13.531a.2095.2095,0,0,0-.2155.123l-1.096,1.917L11.184,11.2355a.243.243,0,0,0-.2555-.1535H9.4965a.19649.19649,0,0,0-.186.1035.194.194,0,0,0,.023.2l1.744,2.78c-.2805.415-.6425.9765-.993,1.5205-.293.455-.5775.8975-.797,1.2255a.19151.19151,0,0,0-.0175.2.2.2,0,0,0,.178.1065h1.2785a.23751.23751,0,0,0,.239-.134l1.1265-1.925,1.093,1.9a.296.296,0,0,0,.263.1565h1.4675a.195.195,0,0,0,.197-.1115A.164.164,0,0,0,15.079,16.927Z" /></svg>');
1160
- --svg-logout: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><rect height="9" rx="0.5" width="2" x="8" /><path d="M12.6075,2.5315l-.57.9115a.505.505,0,0,0,.1685.692,5.869,5.869,0,1,1-6.41,0,.5.5,0,0,0,.16917-.68657L5.964,3.4465,5.392,2.531a.5.5,0,0,0-.68667-.16877L4.7,2.3655a7.95,7.95,0,1,0,8.5955,0,.5.5,0,0,0-.68753.16523Z" /></svg>');
1161
- --svg-rings: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M13.995,6.603c0-.035.005-.0685.005-.103a5.5,5.5,0,0,0-11,0c0,.0345.0045.068.005.103A5.497,5.497,0,1,0,8.5,16.1065,5.497,5.497,0,1,0,13.995,6.603ZM8.5,14.832a4.46248,4.46248,0,0,1-1.47-3.0365,5.38556,5.38556,0,0,0,2.94,0A4.46248,4.46248,0,0,1,8.5,14.832ZM8.5,11a4.45,4.45,0,0,1-1.424-.25A4.46452,4.46452,0,0,1,8.5,8.168a4.46448,4.46448,0,0,1,1.424,2.58A4.45014,4.45014,0,0,1,8.5,11Zm-2.368-.688A4.48049,4.48049,0,0,1,4.076,7.25,4.45,4.45,0,0,1,5.5,7a4.44988,4.44988,0,0,1,2.154.572A5.489,5.489,0,0,0,6.132,10.312Zm3.214-2.74a4.265,4.265,0,0,1,3.578-.32,4.4805,4.4805,0,0,1-2.056,3.06A5.489,5.489,0,0,0,9.346,7.572ZM8.5,2a4.4865,4.4865,0,0,1,4.47,4.205,5.45,5.45,0,0,0-4.47.6885A5.45,5.45,0,0,0,4.03,6.205,4.4865,4.4865,0,0,1,8.5,2Zm-3,14A4.4905,4.4905,0,0,1,3.132,7.688,5.50548,5.50548,0,0,0,6.005,11.4c0,.0345-.005.068-.005.1a5.4805,5.4805,0,0,0,1.654,3.928A4.447,4.447,0,0,1,5.5,16Zm6,0a4.447,4.447,0,0,1-2.154-.572A5.4805,5.4805,0,0,0,11,11.5c0-.0345-.0045-.068-.005-.1a5.5055,5.5055,0,0,0,2.873-3.7095A4.4905,4.4905,0,0,1,11.5,16Z" /></svg>');
1162
- --svg-settings: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path class="fill" d="M16.45,7.8965H14.8945a5.97644,5.97644,0,0,0-.921-2.2535L15.076,4.54a.55.55,0,0,0,.00219-.77781L15.076,3.76l-.8365-.836a.55.55,0,0,0-.77781-.00219L13.4595,2.924,12.357,4.0265a5.96235,5.96235,0,0,0-2.2535-.9205V1.55a.55.55,0,0,0-.55-.55H8.45a.55.55,0,0,0-.55.55V3.106a5.96235,5.96235,0,0,0-2.2535.9205l-1.1-1.1025a.55.55,0,0,0-.77781-.00219L3.7665,2.924,2.924,3.76a.55.55,0,0,0-.00219.77781L2.924,4.54,4.0265,5.643a5.97644,5.97644,0,0,0-.921,2.2535H1.55a.55.55,0,0,0-.55.55V9.55a.55.55,0,0,0,.55.55H3.1055a5.967,5.967,0,0,0,.921,2.2535L2.924,13.4595a.55.55,0,0,0-.00219.77782l.00219.00218.8365.8365a.55.55,0,0,0,.77781.00219L4.5405,15.076,5.643,13.9735a5.96235,5.96235,0,0,0,2.2535.9205V16.45a.55.55,0,0,0,.55.55H9.55a.55.55,0,0,0,.55-.55V14.894a5.96235,5.96235,0,0,0,2.2535-.9205L13.456,15.076a.55.55,0,0,0,.77782.00219L14.236,15.076l.8365-.8365a.55.55,0,0,0,.00219-.77781l-.00219-.00219L13.97,12.357a5.967,5.967,0,0,0,.921-2.2535H16.45a.55.55,0,0,0,.55-.55V8.45a.55.55,0,0,0-.54649-.55349ZM11.207,9A2.207,2.207,0,1,1,9,6.793H9A2.207,2.207,0,0,1,11.207,9Z" /></svg>');
1163
- --svg-sort-order-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><rect class="a" height="2" rx="0.5" width="6" x="1" y="12" /><rect class="a" height="2" rx="0.5" width="8" x="1" y="8" /><rect class="a" height="2" rx="0.5" width="10" x="1" y="4" /><path class="a" d="M16,12H14.9965V4.5a.494.494,0,0,0-.488-.5L14.503,4h-.496a.5.5,0,0,0-.5.5L13.5035,12H12.5a.25.25,0,0,0-.25.25.245.245,0,0,0,.0735.175l1.7685,2.0165a.25.25,0,0,0,.316,0l1.7685-2.0165a.245.245,0,0,0,.0735-.175A.25.25,0,0,0,16,12Z" /></svg>');
1164
- --svg-sorted-asc: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -3 18 15"><path d="M9,2a.497.497,0,0,0-.3735.168l-5.5,5A.48949.48949,0,0,0,3,7.497.5.5,0,0,0,3.497,8H14.5a.5.5,0,0,0,.5-.5V7.497a.48949.48949,0,0,0-.1275-.329l-5.5-5A.5.5,0,0,0,9,2Z" /></svg>');
1165
- --svg-sorted-dsc: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 3 18 18"><path d="M9,16a.5.5,0,0,0,.3735-.168l5.5-5A.48949.48949,0,0,0,15,10.503.5.5,0,0,0,14.503,10H3.5a.5.5,0,0,0-.5.5v.003a.48949.48949,0,0,0,.1275.329l5.5,5A.497.497,0,0,0,9,16Z" /></svg>');
1166
- --svg-user: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M16.4745,17a.4965.4965,0,0,0,.50089-.49207q.00015-.01724-.00089-.03443c-.3305-3.592-4.0135-4.8155-5.139-4.9135C11.013,11.4885,11,10.826,11,10a7.51507,7.51507,0,0,0,1.766-4.479C12.766,2.8085,11.2225,1,9,1S5.234,2.8085,5.234,5.521A7.51507,7.51507,0,0,0,7,10c0,.826-.013,1.4885-.837,1.56-1.1255.1-4.8085,1.3215-5.139,4.9135a.49649.49649,0,0,0,.46557.52561q.01719.001.03443.00089Z" /></svg>');
1167
- --svg-grab-handle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"> <circle cx="7" cy="13" r="1"/><circle cx="7" cy="10" r="1"/><circle cx="7" cy="7" r="1"/><circle cx="7" cy="4" r="1"/><circle cx="10" cy="13" r="1"/><circle cx="10" cy="10" r="1"/><circle cx="10" cy="7" r="1"/><circle cx="10" cy="4" r="1"/></svg>');
1168
- --svg-open-in: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M16.5,1H1.5a.5.5,0,0,0-.5.5v7a.5.5,0,0,0,.5.5h1A.5.5,0,0,0,3,8.5V3H15V15H9.5a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h7a.5.5,0,0,0,.5-.5V1.5A.5.5,0,0,0,16.5,1Z" /><path d="M9.318,13.882A.39051.39051,0,0,0,9.6,14a.4.4,0,0,0,.4-.377V8.25A.25.25,0,0,0,9.75,8H4.377A.4.4,0,0,0,4,8.4a.392.392,0,0,0,.1175.28l1.893,1.893-4.521,4.523a.5.5,0,0,0-.00039.70711l.00039.00039.707.707a.5.5,0,0,0,.707,0l4.5215-4.521Z" /></svg>');
1169
- --svg-sort-up: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><rect height="2" rx="0.5" width="6" x="1" y="4" /><rect height="2" rx="0.5" width="8" x="1" y="8" /><rect height="2" rx="0.5" width="10" x="1" y="12" /><path d="M15.99951,6H14.99634v7.5a.49378.49378,0,0,1-.49317.5h-.49633a.5.5,0,0,1-.5-.49951L13.50366,6H12.50049A.24984.24984,0,0,1,12.25,5.74823a.24439.24439,0,0,1,.07373-.175L14.0918,3.5564a.25007.25007,0,0,1,.3164,0l1.76807,2.01684a.24439.24439,0,0,1,.07373.175A.24984.24984,0,0,1,15.99951,6Z" /></svg>');
1170
- --svg-tree-node-collapse: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M2,2.5v13a.5.5,0,0,0,.5.5h13a.5.5,0,0,0,.5-.5V2.5a.5.5,0,0,0-.5-.5H2.5A.5.5,0,0,0,2,2.5ZM5.25,10A.25.25,0,0,1,5,9.75V8.25A.25.25,0,0,1,5.25,8h7.5a.25.25,0,0,1,.25.25v1.5a.25.25,0,0,1-.25.25Z" /></svg>');
1171
- --svg-tree-node-expand: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M2,2.5v13a.5.5,0,0,0,.5.5h13a.5.5,0,0,0,.5-.5V2.5a.5.5,0,0,0-.5-.5H2.5A.5.5,0,0,0,2,2.5ZM12.75,10H10v2.75a.25.25,0,0,1-.25.25H8.25A.25.25,0,0,1,8,12.75V10H5.25A.25.25,0,0,1,5,9.75V8.25A.25.25,0,0,1,5.25,8H8V5.25A.25.25,0,0,1,8.25,5h1.5a.25.25,0,0,1,.25.25V8h2.75a.25.25,0,0,1,.25.25v1.5A.25.25,0,0,1,12.75,10Z" /></svg>');
1172
- --svg-triangle-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M3.5 1l5 5-5 5z"/></svg>');
1173
- --svg-triangle-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M11 3.5l-5 5-5-5z"/></svg>');
1174
- --svg-plus-box: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M22.5 34h3v-8.5H34v-3h-8.5V14h-3v8.5H14v3h8.5ZM9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h30q1.2 0 2.1.9.9.9.9 2.1v30q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h30V9H9v30ZM9 9v30V9Z"/></svg>');
1175
- --svg-minus-box: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M12.5 25.4h23.05v-3H12.5ZM9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h30q1.2 0 2.1.9.9.9.9 2.1v30q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h30V9H9v30ZM9 9v30V9Z"/></svg>');
1176
- --vuu-icon-size: 12px;
1177
- --svg-active-status: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9,1a8,8,0,1,0,8,8A8,8,0,0,0,9,1Zm5.333,4.54L8.009,13.6705a.603.603,0,0,1-.4375.2305H7.535a.6.6,0,0,1-.4245-.1755L3.218,9.829a.6.6,0,0,1-.00147-.84853L3.218,8.979l.663-.6625A.6.6,0,0,1,4.72953,8.315L4.731,8.3165,7.4,10.991l5.257-6.7545a.6.6,0,0,1,.8419-.10586L13.5,4.1315l.7275.5685A.6.6,0,0,1,14.333,5.54Z" /></svg>');
1178
- --svg-connecting-status: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9,1a8,8,0,1,0,8,8A8,8,0,0,0,9,1ZM7.7,3.3875A.35552.35552,0,0,1,7.8685,3.05,3.12313,3.12313,0,0,1,8.981,2.821a3.4307,3.4307,0,0,1,1.116.172.38849.38849,0,0,1,.2.3435v1.225c0,1.4425-.2885,5.4455-.3415,5.9735a.26351.26351,0,0,1-.26528.26171L9.662,10.795H8.3a.284.284,0,0,1-.289-.2365c-.05-.682-.311-4.55-.311-5.9455ZM9,14.425a1.287,1.287,0,0,1-1.4-1.3155,1.33,1.33,0,0,1,1.308-1.35167q.046-.00076.092.00167a1.316,1.316,0,0,1,1.3978,1.22877q.00389.06054.0022.12123A1.287,1.287,0,0,1,9,14.425Z" /></svg>');
1179
- --svg-disconnected-status: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M14.657,3.343a8,8,0,1,0-.00021,11.31371l.00021-.00021A8,8,0,0,0,14.657,3.343Zm-1.3435,9.265-.707.7055a.6.6,0,0,1-.84853.00147l-.00147-.00147L9,10.5555l-2.758,2.758a.6.6,0,0,1-.84853.00147L5.392,13.3135l-.7045-.7075a.6.6,0,0,1-.00147-.84853L4.6875,11.756,7.4445,9,4.6875,6.242A.6.6,0,0,1,4.686,5.39347L4.6875,5.392l.707-.707A.6.6,0,0,1,6.243,4.68353L6.2445,4.685,9,7.444l2.758-2.7575a.6.6,0,0,1,.84853-.00147l.00147.00147.707.707a.6.6,0,0,1,.00147.84853L13.315,6.2435,10.5555,9l2.758,2.758a.6.6,0,0,1,.00147.84853Z" /></svg>');
1180
- --vuu-svg-chevron-left: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 12"><path d="M6.71 0.70998C6.32 0.31998 5.69 0.31998 5.3 0.70998L0.709996 5.29998C0.319996 5.68998 0.319996 6.31998 0.709996 6.70998L5.3 11.3C5.69 11.69 6.32 11.69 6.71 11.3C7.1 10.91 7.1 10.28 6.71 9.88998L2.83 5.99998L6.71 2.11998C7.1 1.72998 7.09 1.08998 6.71 0.70998Z" /></svg>');
1181
- --vuu-svg-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 12"><path d="M1.29006 0.710022C0.900059 1.10002 0.900059 1.73002 1.29006 2.12002L5.17006 6.00002L1.29006 9.88002C0.900059 10.27 0.900059 10.9 1.29006 11.29C1.68006 11.68 2.31006 11.68 2.70006 11.29L7.29006 6.70002C7.68006 6.31002 7.68006 5.68002 7.29006 5.29002L2.70006 0.700022C2.32006 0.320022 1.68006 0.320022 1.29006 0.710022Z"/></svg>');
1182
- --vuu-svg-more-horiz: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path id="Vector" d="M3.99999 6.66663C3.26666 6.66663 2.66666 7.26663 2.66666 7.99996C2.66666 8.73329 3.26666 9.33329 3.99999 9.33329C4.73332 9.33329 5.33332 8.73329 5.33332 7.99996C5.33332 7.26663 4.73332 6.66663 3.99999 6.66663ZM12 6.66663C11.2667 6.66663 10.6667 7.26663 10.6667 7.99996C10.6667 8.73329 11.2667 9.33329 12 9.33329C12.7333 9.33329 13.3333 8.73329 13.3333 7.99996C13.3333 7.26663 12.7333 6.66663 12 6.66663ZM7.99999 6.66663C7.26666 6.66663 6.66666 7.26663 6.66666 7.99996C6.66666 8.73329 7.26666 9.33329 7.99999 9.33329C8.73332 9.33329 9.33332 8.73329 9.33332 7.99996C9.33332 7.26663 8.73332 6.66663 7.99999 6.66663Z"/></svg>');
1183
- --vuu-svg-more-vert: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 5.33332C8.73333 5.33332 9.33333 4.73332 9.33333 3.99999C9.33333 3.26666 8.73333 2.66666 8 2.66666C7.26667 2.66666 6.66667 3.26666 6.66667 3.99999C6.66667 4.73332 7.26667 5.33332 8 5.33332ZM8 6.66666C7.26667 6.66666 6.66667 7.26666 6.66667 7.99999C6.66667 8.73332 7.26667 9.33332 8 9.33332C8.73333 9.33332 9.33333 8.73332 9.33333 7.99999C9.33333 7.26666 8.73333 6.66666 8 6.66666ZM8 10.6667C7.26667 10.6667 6.66667 11.2667 6.66667 12C6.66667 12.7333 7.26667 13.3333 8 13.3333C8.73333 13.3333 9.33333 12.7333 9.33333 12C9.33333 11.2667 8.73333 10.6667 8 10.6667Z" /></svg>');
1184
- --vuu-svg-triangle-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 16"><path d="M3.807 10.1933L5.53 8.46665C5.79333 8.20665 5.79333 7.78665 5.53333 7.52665L3.807 5.79998C3.387 5.38665 2.66666 5.67998 2.7 6.27331V9.71998C2.7 10.32 3.3876 10.6133 3.807 10.1933Z"/></svg>');
1185
- }
1186
- span[data-icon] {
1187
- display: inline-block;
1188
- height: var(--vuu-icon-height, var(--vuu-icon-size,18px));
1189
- position: relative;
1190
- width: var(--vuu-icon-width, var(--vuu-icon-size, 18px));
1191
- }
1192
- [data-icon]:after {
1193
- content: "";
1194
- background-color: var(--vuu-icon-color, var(--saltIcon-color, var(--salt-text-secondary-foreground)));
1195
- left: var(--vuu-icon-left, auto);
1196
- height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
1197
- -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
1198
- mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
1199
- mask-repeat: no-repeat;
1200
- -webkit-mask-repeat: no-repeat;
1201
- position: absolute;
1202
- top: var(--vuu-icon-top, auto);
1203
- width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
1204
- }
1205
- [data-icon=sort-up] {
1206
- --vuu-icon-svg: var(--svg-sort-up);
1207
- }
1208
- [data-icon=add] {
1209
- --vuu-icon-svg: var(--svg-add);
1210
- }
1211
- [data-icon=arrow-thin-left] {
1212
- --vuu-icon-svg: var(--svg-arrow-thin);
1213
- }
1214
- [data-icon=arrow-thin-right] {
1215
- --vuu-icon-svg: var(--svg-arrow-thin);
1216
- transform: rotate(180deg);
1217
- }
1218
- [data-icon=arrow-thin-up] {
1219
- --vuu-icon-svg: var(--svg-arrow-thin);
1220
- transform: rotate(90deg);
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);
1221
1279
  }
1222
- [data-icon=arrow-thin-down] {
1223
- --vuu-icon-svg: var(--svg-arrow-thin);
1224
- transform: rotate(270deg);
1225
- }
1226
- [data-icon=box] {
1227
- --vuu-icon-svg: var(--svg-box);
1228
- }
1229
- [data-icon=chevron-double-right] {
1230
- --vuu-icon-svg: var(--svg-chevron-double-right);
1231
- }
1232
- [data-icon=chevron-left] {
1233
- --vuu-icon-svg: var(--vuu-svg-chevron-left);
1234
- }
1235
- [data-icon=chevron-right] {
1236
- --vuu-icon-svg: var(--vuu-svg-chevron-right);
1237
- }
1238
- [data-icon=close] {
1239
- --vuu-icon-svg: var(--vuu-close-icon-svg, var(--svg-close));
1240
- }
1241
- [data-icon=error] {
1242
- --vuu-icon-color: var(--salt-status-error-foreground);
1243
- --vuu-icon-svg: var(--svg-alert-circle-filled);
1244
- }
1245
- [data-icon=filter] {
1246
- --vuu-icon-svg: var(--svg-filter);
1247
- }
1248
- [data-icon=rings] {
1249
- --vuu-icon-svg: var(--svg-rings);
1250
- }
1251
- [data-icon=open-in] {
1252
- --vuu-icon-svg: var(--svg-open-in);
1253
- }
1254
- [data-icon=close-circle] {
1255
- --vuu-icon-svg: var(--svg-close-circle);
1256
- }
1257
- [data-icon=chevron-double-left] {
1258
- --vuu-icon-svg: var(--svg-chevron-double-left);
1259
- }
1260
- [data-icon=chevron-double-right] {
1261
- --vuu-icon-svg: var(--svg-chevron-double-right);
1262
- }
1263
- [data-icon=column-2A] {
1264
- --vuu-icon-svg: var(--svg-column-2A);
1265
- }
1266
- [data-icon=column-2B] {
1267
- --vuu-icon-svg: var(--svg-column-2B);
1268
- }
1269
- :is([data-icon="folder"], [data-icon="folder-closed"]) {
1270
- --vuu-icon-svg: var(--svg-folder-closed);
1271
- }
1272
- [data-icon=plus-box] {
1273
- --vuu-icon-svg: var(--svg-plus-box);
1274
- }
1275
- [data-icon=minus-box] {
1276
- --vuu-icon-svg: var(--svg-minus-box);
1277
- }
1278
- [data-icon=more-vert] {
1279
- --vuu-icon-svg: var(--vuu-svg-more-vert);
1280
- }
1281
- [data-icon=more-horiz] {
1282
- --vuu-icon-svg: var(--vuu-svg-more-horiz);
1283
- }
1284
- [data-icon=settings] {
1285
- --vuu-icon-svg: var(--svg-settings);
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);
1286
1336
  }
1287
- [data-icon=sorted-asc] {
1288
- --vuu-icon-svg: var(--svg-sorted-asc);
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));
1289
1346
  }
1290
- [data-icon=sorted-dsc] {
1291
- --vuu-icon-svg: var(--svg-sorted-dsc);
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;
1292
1359
  }
1293
- [data-icon=triangle-right] {
1294
- --vuu-icon-svg: var(--svg-triangle-right);
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);
1295
1372
  }
1296
- [data-icon=user] {
1297
- --vuu-icon-svg: var(--svg-user);
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);
1298
1435
  }
1299
- [data-icon=active-status] {
1300
- --svg-icon: var(--svg-active-status);
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);
1301
1446
  }
1302
- [data-icon=connecting-status] {
1303
- --svg-icon: var(--svg-connecting-status);
1447
+ .saltButton-primary:hover {
1448
+ --saltButton-borderColor: var(--salt-actionable-primary-background-hover) ;
1304
1449
  }
1305
- [data-icon=disconnected-status] {
1306
- --svg-icon: var(--svg-disconnected-status);
1450
+
1451
+ /* css/components/list.css */
1452
+ .vuu-theme.saltList {
1453
+ border-radius: 4px;
1307
1454
  }
1308
- [data-icon=vuu-triangle-right] {
1309
- --vuu-icon-svg: var(--vuu-svg-triangle-right);
1455
+ .vuu-theme .saltListItem {
1456
+ font-size: 12px;
1457
+ padding: 0 8px;
1310
1458
  }
1311
1459
 
1312
- /* css/theme.css */
1460
+ /* css/components/components.css */
1313
1461
 
1314
1462
  /* index.css */
1315
1463
  /*# sourceMappingURL=index.css.map */