@salt-ds/theme 1.5.1 → 1.7.0

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 -275
  2. package/index.css +356 -275
  3. package/package.json +3 -2
package/index.css CHANGED
@@ -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,59 +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-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-background));
338
- --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-background));
339
- --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-background));
340
- --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-background));
341
- --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-background));
342
- --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-background));
343
- --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-background));
344
- --salt-color-gray-300-fade-background: rgba(76, 80, 91, var(--salt-palette-opacity-background));
345
- --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-background));
346
- --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-background));
347
- --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
348
- --salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));
349
- --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));
350
339
  --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
351
340
  --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
352
341
  --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
353
342
  --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly));
354
343
  --salt-color-black-fade-backdrop: rgba(36, 37, 38, var(--salt-palette-opacity-backdrop));
355
- --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-fill));
356
- --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
357
- --salt-color-blue-500-fade-fill: rgba(38, 112, 169, var(--salt-palette-opacity-fill));
358
- --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));
359
346
  --salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 255, var(--salt-palette-opacity-primary-border));
360
347
  --salt-color-white-fade-separatorOpacity-secondary: rgba(255, 255, 255, var(--salt-palette-opacity-secondary-border));
361
348
  --salt-color-white-fade-separatorOpacity-tertiary: rgba(255, 255, 255, var(--salt-palette-opacity-tertiary-border));
@@ -381,16 +368,15 @@
381
368
  --salt-icon-size-base: 10px;
382
369
  --salt-icon-size-status-adornment: 6px;
383
370
  }
384
- .salt-theme {
385
- --salt-size-icon-base: var(--salt-icon-size-base);
386
- }
387
371
 
388
372
  /* css/foundations/opacity.css */
389
373
  .salt-theme {
390
- --salt-opacity-1: 0.15;
391
- --salt-opacity-2: 0.25;
392
- --salt-opacity-3: 0.4;
393
- --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;
394
380
  }
395
381
 
396
382
  /* css/foundations/shadow.css */
@@ -431,13 +417,6 @@
431
417
  --salt-size-sharktooth-height: 5px;
432
418
  --salt-size-sharktooth-width: 10px;
433
419
  --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
434
- --salt-size-selection: var(--salt-size-selectable);
435
- --salt-size-brandBar: 4px;
436
- --salt-size-graphic-small: 12px;
437
- --salt-size-graphic-medium: 24px;
438
- --salt-size-graphic-large: 48px;
439
- --salt-size-divider-height: var(--salt-size-separator-height);
440
- --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
441
420
  }
442
421
  .salt-density-high {
443
422
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
@@ -449,7 +428,6 @@
449
428
  --salt-size-border: 1px;
450
429
  --salt-size-selectable: 12px;
451
430
  --salt-size-icon: 12px;
452
- --salt-size-detail: var(--salt-size-compact);
453
431
  }
454
432
  .salt-density-medium {
455
433
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
@@ -461,7 +439,6 @@
461
439
  --salt-size-border: 1px;
462
440
  --salt-size-selectable: 14px;
463
441
  --salt-size-icon: 12px;
464
- --salt-size-detail: var(--salt-size-compact);
465
442
  }
466
443
  .salt-density-low {
467
444
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
@@ -473,7 +450,6 @@
473
450
  --salt-size-border: 1px;
474
451
  --salt-size-selectable: 16px;
475
452
  --salt-size-icon: 14px;
476
- --salt-size-detail: var(--salt-size-compact);
477
453
  }
478
454
  .salt-density-touch {
479
455
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
@@ -485,7 +461,6 @@
485
461
  --salt-size-border: 1px;
486
462
  --salt-size-selectable: 18px;
487
463
  --salt-size-icon: 16px;
488
- --salt-size-detail: var(--salt-size-compact);
489
464
  }
490
465
 
491
466
  /* css/foundations/spacing.css */
@@ -545,24 +520,7 @@
545
520
  --salt-zIndex-flyover: 1500;
546
521
  }
547
522
 
548
- /* css/foundations/palette.css */
549
- .salt-theme {
550
- --salt-palette-opacity-background: var(--salt-opacity-3);
551
- --salt-palette-opacity-background-readonly: var(--salt-opacity-1);
552
- --salt-palette-opacity-border: var(--salt-opacity-3);
553
- --salt-palette-opacity-border-readonly: var(--salt-opacity-2);
554
- --salt-palette-opacity-fill: var(--salt-opacity-3);
555
- --salt-palette-opacity-foreground: var(--salt-opacity-4);
556
- --salt-palette-opacity-backdrop: var(--salt-opacity-4);
557
- --salt-palette-opacity-stroke: var(--salt-opacity-3);
558
- --salt-palette-opacity-primary-border: var(--salt-opacity-3);
559
- --salt-palette-opacity-secondary-border: var(--salt-opacity-2);
560
- --salt-palette-opacity-tertiary-border: var(--salt-opacity-1);
561
- --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
562
- --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
563
- --salt-palette-success-background-emphasize: var(--salt-palette-success-background);
564
- --salt-palette-info-background-emphasize: var(--salt-palette-info-background);
565
- }
523
+ /* css/palette/accent.css */
566
524
  .salt-theme[data-mode=light] {
567
525
  --salt-palette-accent-background: var(--salt-color-blue-500);
568
526
  --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
@@ -570,11 +528,50 @@
570
528
  --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
571
529
  --salt-palette-accent-foreground: var(--salt-color-white);
572
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] {
573
569
  --salt-palette-interact-background: transparent;
574
570
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
575
571
  --salt-palette-interact-background-hover: var(--salt-color-blue-10);
576
572
  --salt-palette-interact-background-active: var(--salt-color-blue-30);
577
573
  --salt-palette-interact-background-disabled: transparent;
574
+ --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-fade-background);
578
575
  --salt-palette-interact-border: var(--salt-color-gray-200);
579
576
  --salt-palette-interact-border-active: var(--salt-color-blue-600);
580
577
  --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-600-fade-fill);
@@ -617,86 +614,14 @@
617
614
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
618
615
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
619
616
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
620
- --salt-palette-error-background: var(--salt-color-red-10);
621
- --salt-palette-error-background-selected: var(--salt-color-red-20);
622
- --salt-palette-error-border: var(--salt-color-red-500);
623
- --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
624
- --salt-palette-error-foreground: var(--salt-color-red-500);
625
- --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
626
- --salt-palette-info-background: var(--salt-color-blue-10);
627
- --salt-palette-info-border: var(--salt-color-blue-500);
628
- --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
629
- --salt-palette-info-foreground: var(--salt-color-blue-500);
630
- --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
631
- --salt-palette-success-background: var(--salt-color-green-10);
632
- --salt-palette-success-background-selected: var(--salt-color-green-20);
633
- --salt-palette-success-border: var(--salt-color-green-500);
634
- --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
635
- --salt-palette-success-foreground: var(--salt-color-green-500);
636
- --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
637
- --salt-palette-warning-background: var(--salt-color-orange-10);
638
- --salt-palette-warning-background-selected: var(--salt-color-orange-20);
639
- --salt-palette-warning-border: var(--salt-color-orange-700);
640
- --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
641
- --salt-palette-warning-foreground: var(--salt-color-orange-700);
642
- --salt-palette-navigate-primary-background: transparent;
643
- --salt-palette-navigate-primary-background-active: transparent;
644
- --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
645
- --salt-palette-navigate-secondary-background: transparent;
646
- --salt-palette-navigate-secondary-background-active: transparent;
647
- --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-30);
648
- --salt-palette-navigate-tertiary-background: transparent;
649
- --salt-palette-navigate-tertiary-background-active: transparent;
650
- --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-20);
651
- --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);
652
- --salt-palette-navigate-foreground-active: var(--salt-color-blue-700);
653
- --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
654
- --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
655
- --salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
656
- --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
657
- --salt-palette-negative-foreground: var(--salt-color-red-700);
658
- --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
659
- --salt-palette-neutral-primary-background: var(--salt-color-white);
660
- --salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
661
- --salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
662
- --salt-palette-neutral-primary-foreground: var(--salt-color-gray-900);
663
- --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
664
- --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary);
665
- --salt-palette-neutral-primary-border: var(--salt-color-gray-60);
666
- --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-60-fade-border);
667
- --salt-palette-neutral-secondary-background: var(--salt-color-gray-20);
668
- --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background);
669
- --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly);
670
- --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
671
- --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
672
- --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
673
- --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
674
- --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
675
- --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
676
- --salt-palette-neutral-tertiary-background: transparent;
677
- --salt-palette-neutral-tertiary-background-disabled: transparent;
678
- --salt-palette-neutral-tertiary-border: transparent;
679
- --salt-palette-neutral-tertiary-border-disabled: transparent;
680
- --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
681
- --salt-palette-positive-foreground: var(--salt-color-green-700);
682
- --salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
683
- --salt-palette-track-background: var(--salt-color-gray-60);
684
- --salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);
685
- --salt-palette-track-border: var(--salt-color-gray-90);
686
- --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
687
617
  }
688
618
  .salt-theme[data-mode=dark] {
689
- --salt-palette-accent-background: var(--salt-color-blue-500);
690
- --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
691
- --salt-palette-accent-border: var(--salt-color-blue-500);
692
- --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
693
- --salt-palette-accent-foreground: var(--salt-color-white);
694
- --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
695
619
  --salt-palette-interact-background: transparent;
696
620
  --salt-palette-interact-background-active: var(--salt-color-blue-700);
697
621
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
698
622
  --salt-palette-interact-background-hover: var(--salt-color-blue-800);
699
623
  --salt-palette-interact-background-disabled: transparent;
624
+ --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-700-fade-background);
700
625
  --salt-palette-interact-border: var(--salt-color-gray-90);
701
626
  --salt-palette-interact-border-active: var(--salt-color-blue-100);
702
627
  --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-100-fade-fill);
@@ -739,28 +664,27 @@
739
664
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
740
665
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);
741
666
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
742
- --salt-palette-error-background: var(--salt-color-red-900);
743
- --salt-palette-error-background-selected: var(--salt-color-red-900);
744
- --salt-palette-error-border: var(--salt-color-red-500);
745
- --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
746
- --salt-palette-error-foreground: var(--salt-color-red-500);
747
- --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
748
- --salt-palette-info-background: var(--salt-color-blue-900);
749
- --salt-palette-info-border: var(--salt-color-blue-500);
750
- --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
751
- --salt-palette-info-foreground: var(--salt-color-blue-500);
752
- --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
753
- --salt-palette-success-background: var(--salt-color-green-900);
754
- --salt-palette-success-background-selected: var(--salt-color-green-900);
755
- --salt-palette-success-border: var(--salt-color-green-400);
756
- --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
757
- --salt-palette-success-foreground: var(--salt-color-green-400);
758
- --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
759
- --salt-palette-warning-background: var(--salt-color-orange-900);
760
- --salt-palette-warning-background-selected: var(--salt-color-orange-900);
761
- --salt-palette-warning-border: var(--salt-color-orange-500);
762
- --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
763
- --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] {
764
688
  --salt-palette-navigate-primary-background: transparent;
765
689
  --salt-palette-navigate-primary-background-active: transparent;
766
690
  --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
@@ -776,8 +700,42 @@
776
700
  --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
777
701
  --salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
778
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] {
779
710
  --salt-palette-negative-foreground: var(--salt-color-red-300);
780
- --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] {
781
739
  --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
782
740
  --salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background);
783
741
  --salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly);
@@ -800,42 +758,67 @@
800
758
  --salt-palette-neutral-tertiary-border: transparent;
801
759
  --salt-palette-neutral-tertiary-border-disabled: transparent;
802
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] {
803
779
  --salt-palette-positive-foreground: var(--salt-color-green-300);
804
- --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] {
805
804
  --salt-palette-track-background: var(--salt-color-gray-300);
806
805
  --salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background);
807
806
  --salt-palette-track-border: var(--salt-color-gray-90);
808
807
  --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
809
808
  }
809
+
810
+ /* css/palette/warning.css */
810
811
  .salt-theme[data-mode=light] {
811
- --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
812
- --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
813
- --salt-palette-measured-fill: var(--salt-color-blue-500);
814
- --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
815
- --salt-palette-measured-foreground: var(--salt-color-gray-90);
816
- --salt-palette-measured-foreground-active: var(--salt-color-blue-500);
817
- --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
818
- --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
819
- --salt-palette-measured-background: var(--salt-color-gray-60);
820
- --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
821
- --salt-palette-measured-border: var(--salt-color-gray-90);
822
- --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
823
- --salt-palette-neutral-tertiary-background-readonly: transparent;
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);
824
816
  }
825
817
  .salt-theme[data-mode=dark] {
826
- --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
827
- --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
828
- --salt-palette-measured-fill: var(--salt-color-blue-300);
829
- --salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
830
- --salt-palette-measured-foreground: var(--salt-color-gray-90);
831
- --salt-palette-measured-foreground-active: var(--salt-color-blue-300);
832
- --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
833
- --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
834
- --salt-palette-measured-background: var(--salt-color-gray-300);
835
- --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
836
- --salt-palette-measured-border: var(--salt-color-gray-90);
837
- --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
838
- --salt-palette-neutral-tertiary-background-readonly: transparent;
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);
839
822
  }
840
823
 
841
824
  /* css/characteristics/accent.css */
@@ -919,12 +902,6 @@
919
902
  --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-tertiary-border-disabled);
920
903
  }
921
904
 
922
- /* css/characteristics/differential.css */
923
- .salt-theme {
924
- --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
925
- --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
926
- }
927
-
928
905
  /* css/characteristics/draggable.css */
929
906
  .salt-theme {
930
907
  --salt-draggable-horizontal-cursor-hover: row-resize;
@@ -973,11 +950,6 @@
973
950
  --salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);
974
951
  --salt-editable-secondary-background-readonly: var(--salt-palette-neutral-secondary-background-readonly);
975
952
  --salt-editable-help-fontStyle: italic;
976
- --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
977
- --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
978
- --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
979
- --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
980
- --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
981
953
  }
982
954
 
983
955
  /* css/characteristics/focused.css */
@@ -1001,32 +973,6 @@
1001
973
  position: absolute;
1002
974
  }
1003
975
 
1004
- /* css/characteristics/measured.css */
1005
- .salt-theme {
1006
- --salt-measured-borderStyle: solid;
1007
- --salt-measured-borderStyle-active: solid;
1008
- --salt-measured-borderStyle-complete: solid;
1009
- --salt-measured-borderStyle-incomplete: dotted;
1010
- --salt-measured-borderWidth: 2px;
1011
- --salt-measured-borderWidth-active: 2px;
1012
- --salt-measured-borderWidth-complete: 2px;
1013
- --salt-measured-borderWidth-incomplete: 2px;
1014
- --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
1015
- --salt-measured-textAlign: center;
1016
- --salt-measured-background: var(--salt-palette-measured-background);
1017
- --salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
1018
- --salt-measured-borderColor: var(--salt-palette-measured-border);
1019
- --salt-measured-borderColor-disabled: var(--salt-palette-measured-border-disabled);
1020
- --salt-measured-fill: var(--salt-palette-measured-fill);
1021
- --salt-measured-fill-disabled: var(--salt-palette-measured-fill-disabled);
1022
- --salt-measured-foreground: var(--salt-palette-measured-foreground);
1023
- --salt-measured-foreground-hover: var(--salt-palette-measured-foreground-active);
1024
- --salt-measured-foreground-active: var(--salt-palette-measured-foreground-active);
1025
- --salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
1026
- --salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
1027
- --salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);
1028
- }
1029
-
1030
976
  /* css/characteristics/navigable.css */
1031
977
  .salt-theme {
1032
978
  --salt-navigable-cursor-active: pointer;
@@ -1061,7 +1007,6 @@
1061
1007
  --salt-overlayable-shadow-drag: var(--salt-shadow-4);
1062
1008
  --salt-overlayable-shadow-modal: var(--salt-shadow-5);
1063
1009
  --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
1064
- --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
1065
1010
  }
1066
1011
 
1067
1012
  /* css/characteristics/selectable.css */
@@ -1070,6 +1015,7 @@
1070
1015
  --salt-selectable-cursor-selected: pointer;
1071
1016
  --salt-selectable-cursor-blurSelected: pointer;
1072
1017
  --salt-selectable-cursor-disabled: not-allowed;
1018
+ --salt-selectable-cursor-readonly: not-allowed;
1073
1019
  --salt-selectable-borderStyle: solid;
1074
1020
  --salt-selectable-borderStyle-hover: solid;
1075
1021
  --salt-selectable-borderStyle-selected: solid;
@@ -1079,6 +1025,7 @@
1079
1025
  --salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
1080
1026
  --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);
1081
1027
  --salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
1028
+ --salt-selectable-borderColor-readonly: var(--salt-palette-interact-border-readonly);
1082
1029
  --salt-selectable-foreground: var(--salt-palette-interact-foreground);
1083
1030
  --salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1084
1031
  --salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);
@@ -1089,6 +1036,7 @@
1089
1036
  --salt-selectable-background-selected: var(--salt-palette-interact-background-active);
1090
1037
  --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
1091
1038
  --salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);
1039
+ --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
1092
1040
  --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
1093
1041
  --salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
1094
1042
  --salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
@@ -1113,14 +1061,6 @@
1113
1061
  --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
1114
1062
  --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
1115
1063
  --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
1116
- --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
1117
- --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
1118
- --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
1119
- --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1120
- --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
1121
- --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1122
- --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
1123
- --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1124
1064
  }
1125
1065
 
1126
1066
  /* css/characteristics/separable.css */
@@ -1140,21 +1080,10 @@
1140
1080
  --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
1141
1081
  --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
1142
1082
  --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
1143
- --salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
1144
- --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
1145
- --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
1146
- --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
1147
- --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1148
- --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1149
- --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1150
1083
  --salt-status-info-borderColor: var(--salt-palette-info-border);
1151
1084
  --salt-status-success-borderColor: var(--salt-palette-success-border);
1152
1085
  --salt-status-warning-borderColor: var(--salt-palette-warning-border);
1153
1086
  --salt-status-error-borderColor: var(--salt-palette-error-border);
1154
- --salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
1155
- --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1156
- --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1157
- --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
1158
1087
  --salt-status-info-background: var(--salt-palette-info-background);
1159
1088
  --salt-status-success-background: var(--salt-palette-success-background);
1160
1089
  --salt-status-warning-background: var(--salt-palette-warning-background);
@@ -1162,10 +1091,6 @@
1162
1091
  --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
1163
1092
  --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
1164
1093
  --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
1165
- --salt-status-info-background-emphasize: var(--salt-status-info-background);
1166
- --salt-status-success-background-emphasize: var(--salt-status-success-background);
1167
- --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
1168
- --salt-status-error-background-emphasize: var(--salt-status-error-background);
1169
1094
  }
1170
1095
 
1171
1096
  /* css/characteristics/taggable.css */
@@ -1342,6 +1267,162 @@
1342
1267
  --salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
1343
1268
  }
1344
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
+
1345
1426
  /* css/theme.css */
1346
1427
 
1347
1428
  /* index.css */