@salt-ds/theme 1.6.0 → 1.7.1

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/css/theme.css +356 -280
  2. package/index.css +356 -280
  3. package/package.json +1 -1
package/index.css CHANGED
@@ -49,10 +49,10 @@
49
49
  --salt-animation-slide-in-left: slide-in-left var(--salt-animation-duration) var(--salt-animation-timing-function);
50
50
  --salt-animation-slide-in-right: slide-in-right var(--salt-animation-duration) var(--salt-animation-timing-function);
51
51
  --salt-animation-slide-in-bottom: slide-in-bottom var(--salt-animation-duration) var(--salt-animation-timing-function);
52
- --salt-animation-slide-out-top: slide-out-top var(--salt-animation-duration) var(--salt-animation-timing-function);
53
- --salt-animation-slide-out-left: slide-out-left var(--salt-animation-duration) var(--salt-animation-timing-function);
54
- --salt-animation-slide-out-right: slide-out-right var(--salt-animation-duration) var(--salt-animation-timing-function);
55
- --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;
56
56
  --salt-animation-fade-in-back: fade-in-back var(--salt-animation-duration) var(--salt-animation-timing-function);
57
57
  --salt-animation-fade-in-forward: fade-in-forward var(--salt-animation-duration) var(--salt-animation-timing-function);
58
58
  --salt-animation-fade-in-center: fade-in-center var(--salt-animation-duration) var(--salt-animation-timing-function);
@@ -285,17 +285,9 @@
285
285
  --salt-color-gray-900: rgb(22, 22, 22);
286
286
  }
287
287
 
288
- /* css/foundations/delay.css */
289
- .salt-theme {
290
- --salt-delay-instant: 100ms;
291
- --salt-delay-perceptible: 300ms;
292
- --salt-delay-notable: 1000ms;
293
- --salt-delay-cutoff: 10000ms;
294
- }
295
-
296
288
  /* css/foundations/duration.css */
297
289
  .salt-theme {
298
- --salt-duration-instant: 100ms;
290
+ --salt-duration-instant: 0ms;
299
291
  --salt-duration-perceptible: 300ms;
300
292
  --salt-duration-notable: 1000ms;
301
293
  --salt-duration-cutoff: 10000ms;
@@ -303,60 +295,54 @@
303
295
 
304
296
  /* css/foundations/fade.css */
305
297
  .salt-theme {
306
- --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-foreground));
307
- --salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-foreground));
308
- --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-foreground));
309
- --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-foreground));
310
- --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-foreground));
311
- --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-foreground));
312
- --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-foreground));
313
- --salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-foreground));
314
- --salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-foreground));
315
- --salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-foreground));
316
- --salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-foreground));
317
- --salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
318
- --salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
319
- --salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-foreground));
320
- --salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-foreground));
321
- --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-foreground));
322
- --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-foreground));
323
- --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-border));
324
- --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-border));
325
- --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-border));
326
- --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-border));
327
- --salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-border));
328
- --salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-border));
329
- --salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-border));
330
- --salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-border));
331
- --salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-border));
332
- --salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-border));
333
- --salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-border));
334
- --salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-border));
298
+ --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
299
+ --salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
300
+ --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
301
+ --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
302
+ --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
303
+ --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
304
+ --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-disabled));
305
+ --salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-disabled));
306
+ --salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
307
+ --salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
308
+ --salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-disabled));
309
+ --salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-disabled));
310
+ --salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
311
+ --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-disabled));
312
+ --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
313
+ --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
314
+ --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
315
+ --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
316
+ --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
317
+ --salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
318
+ --salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
319
+ --salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
320
+ --salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-disabled));
321
+ --salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-disabled));
322
+ --salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-disabled));
323
+ --salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-disabled));
324
+ --salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
335
325
  --salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));
336
326
  --salt-color-gray-200-fade-border-readonly: rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly));
337
- --salt-color-blue-30-fade-background: rgba(164, 213, 244, var(--salt-palette-opacity-background));
338
- --salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-background));
339
- --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-background));
340
- --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-background));
341
- --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-background));
342
- --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-background));
343
- --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-background));
344
- --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-background));
345
- --salt-color-gray-300-fade-background: rgba(76, 80, 91, var(--salt-palette-opacity-background));
346
- --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-background));
347
- --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-background));
348
- --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
349
- --salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));
350
- --salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-background));
327
+ --salt-color-blue-30-fade-background: rgba(164, 213, 244, var(--salt-palette-opacity-disabled));
328
+ --salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
329
+ --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
330
+ --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-disabled));
331
+ --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-disabled));
332
+ --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
333
+ --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
334
+ --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
335
+ --salt-color-gray-300-fade-background: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
336
+ --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-disabled));
337
+ --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-disabled));
338
+ --salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
351
339
  --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
352
340
  --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
353
341
  --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
354
342
  --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly));
355
343
  --salt-color-black-fade-backdrop: rgba(36, 37, 38, var(--salt-palette-opacity-backdrop));
356
- --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-fill));
357
- --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
358
- --salt-color-blue-500-fade-fill: rgba(38, 112, 169, var(--salt-palette-opacity-fill));
359
- --salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-fill));
344
+ --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
345
+ --salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
360
346
  --salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 255, var(--salt-palette-opacity-primary-border));
361
347
  --salt-color-white-fade-separatorOpacity-secondary: rgba(255, 255, 255, var(--salt-palette-opacity-secondary-border));
362
348
  --salt-color-white-fade-separatorOpacity-tertiary: rgba(255, 255, 255, var(--salt-palette-opacity-tertiary-border));
@@ -382,16 +368,15 @@
382
368
  --salt-icon-size-base: 10px;
383
369
  --salt-icon-size-status-adornment: 6px;
384
370
  }
385
- .salt-theme {
386
- --salt-size-icon-base: var(--salt-icon-size-base);
387
- }
388
371
 
389
372
  /* css/foundations/opacity.css */
390
373
  .salt-theme {
391
- --salt-opacity-1: 0.15;
392
- --salt-opacity-2: 0.25;
393
- --salt-opacity-3: 0.4;
394
- --salt-opacity-4: 0.7;
374
+ --salt-opacity-0: 0;
375
+ --salt-opacity-8: 0.08;
376
+ --salt-opacity-15: 0.15;
377
+ --salt-opacity-25: 0.25;
378
+ --salt-opacity-40: 0.4;
379
+ --salt-opacity-70: 0.7;
395
380
  }
396
381
 
397
382
  /* css/foundations/shadow.css */
@@ -432,13 +417,6 @@
432
417
  --salt-size-sharktooth-height: 5px;
433
418
  --salt-size-sharktooth-width: 10px;
434
419
  --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
435
- --salt-size-selection: var(--salt-size-selectable);
436
- --salt-size-brandBar: 4px;
437
- --salt-size-graphic-small: 12px;
438
- --salt-size-graphic-medium: 24px;
439
- --salt-size-graphic-large: 48px;
440
- --salt-size-divider-height: var(--salt-size-separator-height);
441
- --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
442
420
  }
443
421
  .salt-density-high {
444
422
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
@@ -450,7 +428,6 @@
450
428
  --salt-size-border: 1px;
451
429
  --salt-size-selectable: 12px;
452
430
  --salt-size-icon: 12px;
453
- --salt-size-detail: var(--salt-size-compact);
454
431
  }
455
432
  .salt-density-medium {
456
433
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
@@ -462,7 +439,6 @@
462
439
  --salt-size-border: 1px;
463
440
  --salt-size-selectable: 14px;
464
441
  --salt-size-icon: 12px;
465
- --salt-size-detail: var(--salt-size-compact);
466
442
  }
467
443
  .salt-density-low {
468
444
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
@@ -474,7 +450,6 @@
474
450
  --salt-size-border: 1px;
475
451
  --salt-size-selectable: 16px;
476
452
  --salt-size-icon: 14px;
477
- --salt-size-detail: var(--salt-size-compact);
478
453
  }
479
454
  .salt-density-touch {
480
455
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
@@ -486,7 +461,6 @@
486
461
  --salt-size-border: 1px;
487
462
  --salt-size-selectable: 18px;
488
463
  --salt-size-icon: 16px;
489
- --salt-size-detail: var(--salt-size-compact);
490
464
  }
491
465
 
492
466
  /* css/foundations/spacing.css */
@@ -546,24 +520,7 @@
546
520
  --salt-zIndex-flyover: 1500;
547
521
  }
548
522
 
549
- /* css/foundations/palette.css */
550
- .salt-theme {
551
- --salt-palette-opacity-background: var(--salt-opacity-3);
552
- --salt-palette-opacity-background-readonly: var(--salt-opacity-1);
553
- --salt-palette-opacity-border: var(--salt-opacity-3);
554
- --salt-palette-opacity-border-readonly: var(--salt-opacity-2);
555
- --salt-palette-opacity-fill: var(--salt-opacity-3);
556
- --salt-palette-opacity-foreground: var(--salt-opacity-4);
557
- --salt-palette-opacity-backdrop: var(--salt-opacity-4);
558
- --salt-palette-opacity-stroke: var(--salt-opacity-3);
559
- --salt-palette-opacity-primary-border: var(--salt-opacity-3);
560
- --salt-palette-opacity-secondary-border: var(--salt-opacity-2);
561
- --salt-palette-opacity-tertiary-border: var(--salt-opacity-1);
562
- --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
563
- --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
564
- --salt-palette-success-background-emphasize: var(--salt-palette-success-background);
565
- --salt-palette-info-background-emphasize: var(--salt-palette-info-background);
566
- }
523
+ /* css/palette/accent.css */
567
524
  .salt-theme[data-mode=light] {
568
525
  --salt-palette-accent-background: var(--salt-color-blue-500);
569
526
  --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
@@ -571,6 +528,44 @@
571
528
  --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
572
529
  --salt-palette-accent-foreground: var(--salt-color-white);
573
530
  --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
531
+ }
532
+ .salt-theme[data-mode=dark] {
533
+ --salt-palette-accent-background: var(--salt-color-blue-500);
534
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
535
+ --salt-palette-accent-border: var(--salt-color-blue-500);
536
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
537
+ --salt-palette-accent-foreground: var(--salt-color-white);
538
+ --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
539
+ }
540
+
541
+ /* css/palette/error.css */
542
+ .salt-theme[data-mode=light] {
543
+ --salt-palette-error-background: var(--salt-color-red-10);
544
+ --salt-palette-error-background-selected: var(--salt-color-red-20);
545
+ --salt-palette-error-border: var(--salt-color-red-500);
546
+ --salt-palette-error-foreground: var(--salt-color-red-500);
547
+ }
548
+ .salt-theme[data-mode=dark] {
549
+ --salt-palette-error-background: var(--salt-color-red-900);
550
+ --salt-palette-error-background-selected: var(--salt-color-red-900);
551
+ --salt-palette-error-border: var(--salt-color-red-500);
552
+ --salt-palette-error-foreground: var(--salt-color-red-500);
553
+ }
554
+
555
+ /* css/palette/info.css */
556
+ .salt-theme[data-mode=light] {
557
+ --salt-palette-info-background: var(--salt-color-blue-10);
558
+ --salt-palette-info-border: var(--salt-color-blue-500);
559
+ --salt-palette-info-foreground: var(--salt-color-blue-500);
560
+ }
561
+ .salt-theme[data-mode=dark] {
562
+ --salt-palette-info-background: var(--salt-color-blue-900);
563
+ --salt-palette-info-border: var(--salt-color-blue-500);
564
+ --salt-palette-info-foreground: var(--salt-color-blue-500);
565
+ }
566
+
567
+ /* css/palette/interact.css */
568
+ .salt-theme[data-mode=light] {
574
569
  --salt-palette-interact-background: transparent;
575
570
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
576
571
  --salt-palette-interact-background-hover: var(--salt-color-blue-10);
@@ -619,74 +614,8 @@
619
614
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
620
615
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
621
616
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
622
- --salt-palette-error-background: var(--salt-color-red-10);
623
- --salt-palette-error-background-selected: var(--salt-color-red-20);
624
- --salt-palette-error-border: var(--salt-color-red-500);
625
- --salt-palette-error-foreground: var(--salt-color-red-500);
626
- --salt-palette-info-background: var(--salt-color-blue-10);
627
- --salt-palette-info-border: var(--salt-color-blue-500);
628
- --salt-palette-info-foreground: var(--salt-color-blue-500);
629
- --salt-palette-success-background: var(--salt-color-green-10);
630
- --salt-palette-success-background-selected: var(--salt-color-green-20);
631
- --salt-palette-success-border: var(--salt-color-green-500);
632
- --salt-palette-success-foreground: var(--salt-color-green-500);
633
- --salt-palette-warning-background: var(--salt-color-orange-10);
634
- --salt-palette-warning-background-selected: var(--salt-color-orange-20);
635
- --salt-palette-warning-border: var(--salt-color-orange-700);
636
- --salt-palette-warning-foreground: var(--salt-color-orange-700);
637
- --salt-palette-navigate-primary-background: transparent;
638
- --salt-palette-navigate-primary-background-active: transparent;
639
- --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
640
- --salt-palette-navigate-secondary-background: transparent;
641
- --salt-palette-navigate-secondary-background-active: transparent;
642
- --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-30);
643
- --salt-palette-navigate-tertiary-background: transparent;
644
- --salt-palette-navigate-tertiary-background-active: transparent;
645
- --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-20);
646
- --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);
647
- --salt-palette-navigate-foreground-active: var(--salt-color-blue-700);
648
- --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
649
- --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
650
- --salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
651
- --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
652
- --salt-palette-negative-foreground: var(--salt-color-red-700);
653
- --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
654
- --salt-palette-neutral-primary-background: var(--salt-color-white);
655
- --salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
656
- --salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
657
- --salt-palette-neutral-primary-foreground: var(--salt-color-gray-900);
658
- --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
659
- --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary);
660
- --salt-palette-neutral-primary-border: var(--salt-color-gray-60);
661
- --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-60-fade-border);
662
- --salt-palette-neutral-secondary-background: var(--salt-color-gray-20);
663
- --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background);
664
- --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly);
665
- --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
666
- --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
667
- --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
668
- --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
669
- --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
670
- --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
671
- --salt-palette-neutral-tertiary-background: transparent;
672
- --salt-palette-neutral-tertiary-background-disabled: transparent;
673
- --salt-palette-neutral-tertiary-border: transparent;
674
- --salt-palette-neutral-tertiary-border-disabled: transparent;
675
- --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
676
- --salt-palette-positive-foreground: var(--salt-color-green-700);
677
- --salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
678
- --salt-palette-track-background: var(--salt-color-gray-60);
679
- --salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);
680
- --salt-palette-track-border: var(--salt-color-gray-90);
681
- --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
682
617
  }
683
618
  .salt-theme[data-mode=dark] {
684
- --salt-palette-accent-background: var(--salt-color-blue-500);
685
- --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
686
- --salt-palette-accent-border: var(--salt-color-blue-500);
687
- --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
688
- --salt-palette-accent-foreground: var(--salt-color-white);
689
- --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
690
619
  --salt-palette-interact-background: transparent;
691
620
  --salt-palette-interact-background-active: var(--salt-color-blue-700);
692
621
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
@@ -735,21 +664,27 @@
735
664
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
736
665
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);
737
666
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
738
- --salt-palette-error-background: var(--salt-color-red-900);
739
- --salt-palette-error-background-selected: var(--salt-color-red-900);
740
- --salt-palette-error-border: var(--salt-color-red-500);
741
- --salt-palette-error-foreground: var(--salt-color-red-500);
742
- --salt-palette-info-background: var(--salt-color-blue-900);
743
- --salt-palette-info-border: var(--salt-color-blue-500);
744
- --salt-palette-info-foreground: var(--salt-color-blue-500);
745
- --salt-palette-success-background: var(--salt-color-green-900);
746
- --salt-palette-success-background-selected: var(--salt-color-green-900);
747
- --salt-palette-success-border: var(--salt-color-green-400);
748
- --salt-palette-success-foreground: var(--salt-color-green-400);
749
- --salt-palette-warning-background: var(--salt-color-orange-900);
750
- --salt-palette-warning-background-selected: var(--salt-color-orange-900);
751
- --salt-palette-warning-border: var(--salt-color-orange-500);
752
- --salt-palette-warning-foreground: var(--salt-color-orange-500);
667
+ }
668
+
669
+ /* css/palette/navigate.css */
670
+ .salt-theme[data-mode=light] {
671
+ --salt-palette-navigate-primary-background: transparent;
672
+ --salt-palette-navigate-primary-background-active: transparent;
673
+ --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
674
+ --salt-palette-navigate-secondary-background: transparent;
675
+ --salt-palette-navigate-secondary-background-active: transparent;
676
+ --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-30);
677
+ --salt-palette-navigate-tertiary-background: transparent;
678
+ --salt-palette-navigate-tertiary-background-active: transparent;
679
+ --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-20);
680
+ --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);
681
+ --salt-palette-navigate-foreground-active: var(--salt-color-blue-700);
682
+ --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
683
+ --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
684
+ --salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
685
+ --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
686
+ }
687
+ .salt-theme[data-mode=dark] {
753
688
  --salt-palette-navigate-primary-background: transparent;
754
689
  --salt-palette-navigate-primary-background-active: transparent;
755
690
  --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
@@ -765,8 +700,42 @@
765
700
  --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
766
701
  --salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
767
702
  --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
703
+ }
704
+
705
+ /* css/palette/negative.css */
706
+ .salt-theme[data-mode=light] {
707
+ --salt-palette-negative-foreground: var(--salt-color-red-700);
708
+ }
709
+ .salt-theme[data-mode=dark] {
768
710
  --salt-palette-negative-foreground: var(--salt-color-red-300);
769
- --salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
711
+ }
712
+
713
+ /* css/palette/neutral.css */
714
+ .salt-theme[data-mode=light] {
715
+ --salt-palette-neutral-primary-background: var(--salt-color-white);
716
+ --salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
717
+ --salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
718
+ --salt-palette-neutral-primary-foreground: var(--salt-color-gray-900);
719
+ --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
720
+ --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary);
721
+ --salt-palette-neutral-primary-border: var(--salt-color-gray-60);
722
+ --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-60-fade-border);
723
+ --salt-palette-neutral-secondary-background: var(--salt-color-gray-20);
724
+ --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background);
725
+ --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly);
726
+ --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
727
+ --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
728
+ --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
729
+ --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
730
+ --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
731
+ --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
732
+ --salt-palette-neutral-tertiary-background: transparent;
733
+ --salt-palette-neutral-tertiary-background-disabled: transparent;
734
+ --salt-palette-neutral-tertiary-border: transparent;
735
+ --salt-palette-neutral-tertiary-border-disabled: transparent;
736
+ --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
737
+ }
738
+ .salt-theme[data-mode=dark] {
770
739
  --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
771
740
  --salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background);
772
741
  --salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly);
@@ -789,56 +758,67 @@
789
758
  --salt-palette-neutral-tertiary-border: transparent;
790
759
  --salt-palette-neutral-tertiary-border-disabled: transparent;
791
760
  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
761
+ }
762
+
763
+ /* css/palette/opacity.css */
764
+ .salt-theme {
765
+ --salt-palette-opacity-backdrop: var(--salt-opacity-70);
766
+ --salt-palette-opacity-disabled: var(--salt-opacity-40);
767
+ --salt-palette-opacity-background-readonly: var(--salt-opacity-0);
768
+ --salt-palette-opacity-border-readonly: var(--salt-opacity-15);
769
+ --salt-palette-opacity-primary-border: var(--salt-opacity-40);
770
+ --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
771
+ --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
772
+ }
773
+
774
+ /* css/palette/positive.css */
775
+ .salt-theme[data-mode=light] {
776
+ --salt-palette-positive-foreground: var(--salt-color-green-700);
777
+ }
778
+ .salt-theme[data-mode=dark] {
792
779
  --salt-palette-positive-foreground: var(--salt-color-green-300);
793
- --salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
780
+ }
781
+
782
+ /* css/palette/success.css */
783
+ .salt-theme[data-mode=light] {
784
+ --salt-palette-success-background: var(--salt-color-green-10);
785
+ --salt-palette-success-background-selected: var(--salt-color-green-20);
786
+ --salt-palette-success-border: var(--salt-color-green-500);
787
+ --salt-palette-success-foreground: var(--salt-color-green-500);
788
+ }
789
+ .salt-theme[data-mode=dark] {
790
+ --salt-palette-success-background: var(--salt-color-green-900);
791
+ --salt-palette-success-background-selected: var(--salt-color-green-900);
792
+ --salt-palette-success-border: var(--salt-color-green-400);
793
+ --salt-palette-success-foreground: var(--salt-color-green-400);
794
+ }
795
+
796
+ /* css/palette/track.css */
797
+ .salt-theme[data-mode=light] {
798
+ --salt-palette-track-background: var(--salt-color-gray-60);
799
+ --salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);
800
+ --salt-palette-track-border: var(--salt-color-gray-90);
801
+ --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
802
+ }
803
+ .salt-theme[data-mode=dark] {
794
804
  --salt-palette-track-background: var(--salt-color-gray-300);
795
805
  --salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background);
796
806
  --salt-palette-track-border: var(--salt-color-gray-90);
797
807
  --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
798
808
  }
809
+
810
+ /* css/palette/warning.css */
799
811
  .salt-theme[data-mode=light] {
800
- --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
801
- --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
802
- --salt-palette-measured-fill: var(--salt-color-blue-500);
803
- --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
804
- --salt-palette-measured-foreground: var(--salt-color-gray-90);
805
- --salt-palette-measured-foreground-active: var(--salt-color-blue-500);
806
- --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
807
- --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
808
- --salt-palette-measured-background: var(--salt-color-gray-60);
809
- --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
810
- --salt-palette-measured-border: var(--salt-color-gray-90);
811
- --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
812
- --salt-palette-neutral-tertiary-background-readonly: transparent;
813
- --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
814
- --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
815
- --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
816
- --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
817
- --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
818
- --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
819
- --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
812
+ --salt-palette-warning-background: var(--salt-color-orange-10);
813
+ --salt-palette-warning-background-selected: var(--salt-color-orange-20);
814
+ --salt-palette-warning-border: var(--salt-color-orange-700);
815
+ --salt-palette-warning-foreground: var(--salt-color-orange-700);
820
816
  }
821
817
  .salt-theme[data-mode=dark] {
822
- --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
823
- --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
824
- --salt-palette-measured-fill: var(--salt-color-blue-300);
825
- --salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
826
- --salt-palette-measured-foreground: var(--salt-color-gray-90);
827
- --salt-palette-measured-foreground-active: var(--salt-color-blue-300);
828
- --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
829
- --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
830
- --salt-palette-measured-background: var(--salt-color-gray-300);
831
- --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
832
- --salt-palette-measured-border: var(--salt-color-gray-90);
833
- --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
834
- --salt-palette-neutral-tertiary-background-readonly: transparent;
835
- --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
836
- --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
837
- --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
838
- --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
839
- --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
840
- --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
841
- --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
818
+ --salt-palette-warning-background: var(--salt-color-orange-900);
819
+ --salt-palette-warning-background-selected: var(--salt-color-orange-900);
820
+ --salt-palette-warning-border: var(--salt-color-orange-500);
821
+ --salt-palette-warning-foreground: var(--salt-color-orange-500);
842
822
  }
843
823
 
844
824
  /* css/characteristics/accent.css */
@@ -922,12 +902,6 @@
922
902
  --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-tertiary-border-disabled);
923
903
  }
924
904
 
925
- /* css/characteristics/differential.css */
926
- .salt-theme {
927
- --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
928
- --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
929
- }
930
-
931
905
  /* css/characteristics/draggable.css */
932
906
  .salt-theme {
933
907
  --salt-draggable-horizontal-cursor-hover: row-resize;
@@ -976,11 +950,6 @@
976
950
  --salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);
977
951
  --salt-editable-secondary-background-readonly: var(--salt-palette-neutral-secondary-background-readonly);
978
952
  --salt-editable-help-fontStyle: italic;
979
- --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
980
- --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
981
- --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
982
- --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
983
- --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
984
953
  }
985
954
 
986
955
  /* css/characteristics/focused.css */
@@ -1004,32 +973,6 @@
1004
973
  position: absolute;
1005
974
  }
1006
975
 
1007
- /* css/characteristics/measured.css */
1008
- .salt-theme {
1009
- --salt-measured-borderStyle: solid;
1010
- --salt-measured-borderStyle-active: solid;
1011
- --salt-measured-borderStyle-complete: solid;
1012
- --salt-measured-borderStyle-incomplete: dotted;
1013
- --salt-measured-borderWidth: 2px;
1014
- --salt-measured-borderWidth-active: 2px;
1015
- --salt-measured-borderWidth-complete: 2px;
1016
- --salt-measured-borderWidth-incomplete: 2px;
1017
- --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
1018
- --salt-measured-textAlign: center;
1019
- --salt-measured-background: var(--salt-palette-measured-background);
1020
- --salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
1021
- --salt-measured-borderColor: var(--salt-palette-measured-border);
1022
- --salt-measured-borderColor-disabled: var(--salt-palette-measured-border-disabled);
1023
- --salt-measured-fill: var(--salt-palette-measured-fill);
1024
- --salt-measured-fill-disabled: var(--salt-palette-measured-fill-disabled);
1025
- --salt-measured-foreground: var(--salt-palette-measured-foreground);
1026
- --salt-measured-foreground-hover: var(--salt-palette-measured-foreground-active);
1027
- --salt-measured-foreground-active: var(--salt-palette-measured-foreground-active);
1028
- --salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
1029
- --salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
1030
- --salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);
1031
- }
1032
-
1033
976
  /* css/characteristics/navigable.css */
1034
977
  .salt-theme {
1035
978
  --salt-navigable-cursor-active: pointer;
@@ -1064,7 +1007,6 @@
1064
1007
  --salt-overlayable-shadow-drag: var(--salt-shadow-4);
1065
1008
  --salt-overlayable-shadow-modal: var(--salt-shadow-5);
1066
1009
  --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
1067
- --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
1068
1010
  }
1069
1011
 
1070
1012
  /* css/characteristics/selectable.css */
@@ -1083,6 +1025,7 @@
1083
1025
  --salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
1084
1026
  --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);
1085
1027
  --salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
1028
+ --salt-selectable-borderColor-readonly: var(--salt-palette-interact-border-readonly);
1086
1029
  --salt-selectable-foreground: var(--salt-palette-interact-foreground);
1087
1030
  --salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1088
1031
  --salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);
@@ -1118,14 +1061,6 @@
1118
1061
  --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
1119
1062
  --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
1120
1063
  --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
1121
- --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
1122
- --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
1123
- --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
1124
- --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1125
- --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
1126
- --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1127
- --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
1128
- --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1129
1064
  }
1130
1065
 
1131
1066
  /* css/characteristics/separable.css */
@@ -1156,21 +1091,6 @@
1156
1091
  --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
1157
1092
  --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
1158
1093
  --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
1159
- --salt-status-info-background-emphasize: var(--salt-status-info-background);
1160
- --salt-status-success-background-emphasize: var(--salt-status-success-background);
1161
- --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
1162
- --salt-status-error-background-emphasize: var(--salt-status-error-background);
1163
- --salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
1164
- --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
1165
- --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
1166
- --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
1167
- --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1168
- --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1169
- --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1170
- --salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
1171
- --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1172
- --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1173
- --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
1174
1094
  }
1175
1095
 
1176
1096
  /* css/characteristics/taggable.css */
@@ -1347,6 +1267,162 @@
1347
1267
  --salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
1348
1268
  }
1349
1269
 
1270
+ /* css/deprecated/characteristics.css */
1271
+ .salt-theme {
1272
+ --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
1273
+ --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
1274
+ --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
1275
+ --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
1276
+ --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
1277
+ --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
1278
+ --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
1279
+ --salt-measured-borderStyle: solid;
1280
+ --salt-measured-borderStyle-active: solid;
1281
+ --salt-measured-borderStyle-complete: solid;
1282
+ --salt-measured-borderStyle-incomplete: dotted;
1283
+ --salt-measured-borderWidth: 2px;
1284
+ --salt-measured-borderWidth-active: 2px;
1285
+ --salt-measured-borderWidth-complete: 2px;
1286
+ --salt-measured-borderWidth-incomplete: 2px;
1287
+ --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
1288
+ --salt-measured-textAlign: center;
1289
+ --salt-measured-background: var(--salt-palette-measured-background);
1290
+ --salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
1291
+ --salt-measured-borderColor: var(--salt-palette-measured-border);
1292
+ --salt-measured-borderColor-disabled: var(--salt-palette-measured-border-disabled);
1293
+ --salt-measured-fill: var(--salt-palette-measured-fill);
1294
+ --salt-measured-fill-disabled: var(--salt-palette-measured-fill-disabled);
1295
+ --salt-measured-foreground: var(--salt-palette-measured-foreground);
1296
+ --salt-measured-foreground-hover: var(--salt-palette-measured-foreground-active);
1297
+ --salt-measured-foreground-active: var(--salt-palette-measured-foreground-active);
1298
+ --salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
1299
+ --salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
1300
+ --salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);
1301
+ --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
1302
+ --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
1303
+ --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
1304
+ --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
1305
+ --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1306
+ --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
1307
+ --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1308
+ --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
1309
+ --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1310
+ --salt-status-info-background-emphasize: var(--salt-status-info-background);
1311
+ --salt-status-success-background-emphasize: var(--salt-status-success-background);
1312
+ --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
1313
+ --salt-status-error-background-emphasize: var(--salt-status-error-background);
1314
+ --salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
1315
+ --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
1316
+ --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
1317
+ --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
1318
+ --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1319
+ --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1320
+ --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1321
+ --salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
1322
+ --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1323
+ --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1324
+ --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
1325
+ }
1326
+
1327
+ /* css/deprecated/fade.css */
1328
+ .salt-theme {
1329
+ --salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
1330
+ --salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
1331
+ --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
1332
+ --salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));
1333
+ --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
1334
+ --salt-color-blue-500-fade-fill: rgba(38, 112, 169, var(--salt-palette-opacity-fill));
1335
+ }
1336
+
1337
+ /* css/deprecated/foundations.css */
1338
+ .salt-theme {
1339
+ --salt-delay-instant: 100ms;
1340
+ --salt-delay-perceptible: 300ms;
1341
+ --salt-delay-notable: 1000ms;
1342
+ --salt-delay-cutoff: 10000ms;
1343
+ --salt-size-icon-base: var(--salt-icon-size-base);
1344
+ --salt-opacity-1: 0.15;
1345
+ --salt-opacity-2: 0.25;
1346
+ --salt-opacity-3: 0.4;
1347
+ --salt-opacity-4: 0.7;
1348
+ }
1349
+ .salt-density-touch,
1350
+ .salt-density-low,
1351
+ .salt-density-medium,
1352
+ .salt-density-high {
1353
+ --salt-size-selection: var(--salt-size-selectable);
1354
+ --salt-size-brandBar: 4px;
1355
+ --salt-size-graphic-small: 12px;
1356
+ --salt-size-graphic-medium: 24px;
1357
+ --salt-size-graphic-large: 48px;
1358
+ --salt-size-divider-height: var(--salt-size-separator-height);
1359
+ --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
1360
+ --salt-size-detail: var(--salt-size-compact);
1361
+ }
1362
+
1363
+ /* css/deprecated/palette.css */
1364
+ .salt-theme {
1365
+ --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
1366
+ --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
1367
+ --salt-palette-success-background-emphasize: var(--salt-palette-success-background);
1368
+ --salt-palette-info-background-emphasize: var(--salt-palette-info-background);
1369
+ --salt-palette-opacity-fill: var(--salt-palette-opacity-disabled);
1370
+ --salt-palette-opacity-stroke: var(--salt-palette-opacity-disabled);
1371
+ --salt-palette-opacity-background: var(--salt-palette-opacity-disabled);
1372
+ --salt-palette-opacity-border: var(--salt-palette-opacity-disabled);
1373
+ --salt-palette-opacity-foreground: var(--salt-palette-opacity-disabled);
1374
+ }
1375
+ .salt-theme[data-mode=light] {
1376
+ --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
1377
+ --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
1378
+ --salt-palette-measured-fill: var(--salt-color-blue-500);
1379
+ --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
1380
+ --salt-palette-measured-foreground: var(--salt-color-gray-90);
1381
+ --salt-palette-measured-foreground-active: var(--salt-color-blue-500);
1382
+ --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
1383
+ --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
1384
+ --salt-palette-measured-background: var(--salt-color-gray-60);
1385
+ --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
1386
+ --salt-palette-measured-border: var(--salt-color-gray-90);
1387
+ --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
1388
+ --salt-palette-neutral-tertiary-background-readonly: transparent;
1389
+ --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1390
+ --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1391
+ --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
1392
+ --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
1393
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
1394
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
1395
+ --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
1396
+ --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
1397
+ --salt-palette-warning-foreground-disabled: var(--salt-color-orange-700-fade-foreground);
1398
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
1399
+ }
1400
+ .salt-theme[data-mode=dark] {
1401
+ --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
1402
+ --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
1403
+ --salt-palette-measured-fill: var(--salt-color-blue-300);
1404
+ --salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
1405
+ --salt-palette-measured-foreground: var(--salt-color-gray-90);
1406
+ --salt-palette-measured-foreground-active: var(--salt-color-blue-300);
1407
+ --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
1408
+ --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
1409
+ --salt-palette-measured-background: var(--salt-color-gray-300);
1410
+ --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
1411
+ --salt-palette-measured-border: var(--salt-color-gray-90);
1412
+ --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
1413
+ --salt-palette-neutral-tertiary-background-readonly: transparent;
1414
+ --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1415
+ --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1416
+ --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
1417
+ --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
1418
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
1419
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
1420
+ --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
1421
+ --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
1422
+ --salt-palette-warning-foreground-disabled: var(--salt-color-orange-500-fade-foreground);
1423
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
1424
+ }
1425
+
1350
1426
  /* css/theme.css */
1351
1427
 
1352
1428
  /* index.css */