@salt-ds/theme 1.1.0 → 1.2.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.
- package/css/theme.css +129 -39
- package/index.css +129 -39
- package/package.json +1 -1
package/css/theme.css
CHANGED
|
@@ -262,20 +262,37 @@
|
|
|
262
262
|
/* css/foundations/fade.css */
|
|
263
263
|
.salt-theme {
|
|
264
264
|
--salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-foreground));
|
|
265
|
+
--salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-foreground));
|
|
265
266
|
--salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-foreground));
|
|
266
|
-
--salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-foreground));
|
|
267
267
|
--salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-foreground));
|
|
268
|
+
--salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-foreground));
|
|
268
269
|
--salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-foreground));
|
|
269
270
|
--salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-foreground));
|
|
271
|
+
--salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-foreground));
|
|
272
|
+
--salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-foreground));
|
|
273
|
+
--salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-foreground));
|
|
274
|
+
--salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-foreground));
|
|
275
|
+
--salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
|
|
276
|
+
--salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
|
|
277
|
+
--salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-foreground));
|
|
278
|
+
--salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-foreground));
|
|
279
|
+
--salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-foreground));
|
|
270
280
|
--salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-foreground));
|
|
281
|
+
--salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-border));
|
|
271
282
|
--salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-border));
|
|
272
283
|
--salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-border));
|
|
273
284
|
--salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-border));
|
|
274
285
|
--salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-border));
|
|
286
|
+
--salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-border));
|
|
287
|
+
--salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-border));
|
|
275
288
|
--salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-border));
|
|
289
|
+
--salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-border));
|
|
276
290
|
--salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-border));
|
|
291
|
+
--salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-border));
|
|
292
|
+
--salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-border));
|
|
277
293
|
--salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));
|
|
278
294
|
--salt-color-gray-200-fade-border-readonly: rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly));
|
|
295
|
+
--salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-background));
|
|
279
296
|
--salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-background));
|
|
280
297
|
--salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-background));
|
|
281
298
|
--salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-background));
|
|
@@ -446,6 +463,7 @@
|
|
|
446
463
|
}
|
|
447
464
|
.salt-theme[data-mode=light] {
|
|
448
465
|
--salt-palette-accent-background: var(--salt-color-blue-500);
|
|
466
|
+
--salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
|
|
449
467
|
--salt-palette-accent-border: var(--salt-color-blue-500);
|
|
450
468
|
--salt-palette-accent-foreground: var(--salt-color-white);
|
|
451
469
|
--salt-palette-interact-background: transparent;
|
|
@@ -459,10 +477,11 @@
|
|
|
459
477
|
--salt-palette-interact-border-disabled: var(--salt-color-gray-200-fade-border);
|
|
460
478
|
--salt-palette-interact-border-hover: var(--salt-color-blue-500);
|
|
461
479
|
--salt-palette-interact-border-readonly: var(--salt-color-gray-200-fade-border-readonly);
|
|
462
|
-
--salt-palette-interact-foreground: var(--salt-color-gray-
|
|
463
|
-
--salt-palette-interact-foreground-
|
|
464
|
-
--salt-palette-interact-foreground-
|
|
465
|
-
--salt-palette-interact-foreground-
|
|
480
|
+
--salt-palette-interact-foreground: var(--salt-color-gray-200);
|
|
481
|
+
--salt-palette-interact-foreground-active: var(--salt-color-blue-600);
|
|
482
|
+
--salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-fade-foreground);
|
|
483
|
+
--salt-palette-interact-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
|
|
484
|
+
--salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
|
|
466
485
|
--salt-palette-interact-outline: var(--salt-color-blue-600);
|
|
467
486
|
--salt-palette-interact-cta-background: var(--salt-color-blue-600);
|
|
468
487
|
--salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
|
|
@@ -497,28 +516,25 @@
|
|
|
497
516
|
--salt-palette-error-background-emphasize: var(--salt-color-red-10);
|
|
498
517
|
--salt-palette-error-background-selected: var(--salt-color-red-20);
|
|
499
518
|
--salt-palette-error-border: var(--salt-color-red-500);
|
|
519
|
+
--salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
|
|
500
520
|
--salt-palette-error-foreground: var(--salt-color-red-500);
|
|
521
|
+
--salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
|
|
501
522
|
--salt-palette-info-background-emphasize: var(--salt-color-blue-10);
|
|
502
523
|
--salt-palette-info-border: var(--salt-color-blue-500);
|
|
524
|
+
--salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
|
|
503
525
|
--salt-palette-info-foreground: var(--salt-color-blue-500);
|
|
526
|
+
--salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
|
|
504
527
|
--salt-palette-success-background-emphasize: var(--salt-color-green-10);
|
|
505
528
|
--salt-palette-success-background-selected: var(--salt-color-green-20);
|
|
506
529
|
--salt-palette-success-border: var(--salt-color-green-500);
|
|
530
|
+
--salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
|
|
507
531
|
--salt-palette-success-foreground: var(--salt-color-green-500);
|
|
532
|
+
--salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
|
|
508
533
|
--salt-palette-warning-background-emphasize: var(--salt-color-orange-10);
|
|
509
534
|
--salt-palette-warning-background-selected: var(--salt-color-orange-20);
|
|
510
535
|
--salt-palette-warning-border: var(--salt-color-orange-700);
|
|
536
|
+
--salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
|
|
511
537
|
--salt-palette-warning-foreground: var(--salt-color-orange-700);
|
|
512
|
-
--salt-palette-measured-fill: var(--salt-color-blue-500);
|
|
513
|
-
--salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
|
|
514
|
-
--salt-palette-measured-foreground: var(--salt-color-gray-90);
|
|
515
|
-
--salt-palette-measured-foreground-active: var(--salt-color-blue-500);
|
|
516
|
-
--salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
|
|
517
|
-
--salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
|
|
518
|
-
--salt-palette-measured-background: var(--salt-color-gray-60);
|
|
519
|
-
--salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
|
|
520
|
-
--salt-palette-measured-border: var(--salt-color-gray-90);
|
|
521
|
-
--salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
522
538
|
--salt-palette-navigate-primary-background: transparent;
|
|
523
539
|
--salt-palette-navigate-primary-background-active: transparent;
|
|
524
540
|
--salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
|
|
@@ -535,6 +551,7 @@
|
|
|
535
551
|
--salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
|
|
536
552
|
--salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
|
|
537
553
|
--salt-palette-negative-foreground: var(--salt-color-red-700);
|
|
554
|
+
--salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
|
|
538
555
|
--salt-palette-neutral-primary-background: var(--salt-color-white);
|
|
539
556
|
--salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
|
|
540
557
|
--salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
|
|
@@ -559,9 +576,15 @@
|
|
|
559
576
|
--salt-palette-neutral-tertiary-border-disabled: transparent;
|
|
560
577
|
--salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
|
|
561
578
|
--salt-palette-positive-foreground: var(--salt-color-green-700);
|
|
579
|
+
--salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
|
|
580
|
+
--salt-palette-track-background: var(--salt-color-gray-60);
|
|
581
|
+
--salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);
|
|
582
|
+
--salt-palette-track-border: var(--salt-color-gray-90);
|
|
583
|
+
--salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
562
584
|
}
|
|
563
585
|
.salt-theme[data-mode=dark] {
|
|
564
586
|
--salt-palette-accent-background: var(--salt-color-blue-500);
|
|
587
|
+
--salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
|
|
565
588
|
--salt-palette-accent-border: var(--salt-color-blue-500);
|
|
566
589
|
--salt-palette-accent-foreground: var(--salt-color-white);
|
|
567
590
|
--salt-palette-interact-background: transparent;
|
|
@@ -575,10 +598,11 @@
|
|
|
575
598
|
--salt-palette-interact-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
576
599
|
--salt-palette-interact-border-hover: var(--salt-color-blue-500);
|
|
577
600
|
--salt-palette-interact-border-readonly: var(--salt-color-gray-90-fade-border-readonly);
|
|
578
|
-
--salt-palette-interact-foreground: var(--salt-color-
|
|
579
|
-
--salt-palette-interact-foreground-
|
|
580
|
-
--salt-palette-interact-foreground-
|
|
581
|
-
--salt-palette-interact-foreground-
|
|
601
|
+
--salt-palette-interact-foreground: var(--salt-color-gray-90);
|
|
602
|
+
--salt-palette-interact-foreground-active: var(--salt-color-blue-100);
|
|
603
|
+
--salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground);
|
|
604
|
+
--salt-palette-interact-foreground-disabled: var(--salt-color-90-fade-foreground);
|
|
605
|
+
--salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
|
|
582
606
|
--salt-palette-interact-outline: var(--salt-color-blue-100);
|
|
583
607
|
--salt-palette-interact-cta-background: var(--salt-color-blue-600);
|
|
584
608
|
--salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
|
|
@@ -613,28 +637,25 @@
|
|
|
613
637
|
--salt-palette-error-background-emphasize: var(--salt-color-red-900);
|
|
614
638
|
--salt-palette-error-background-selected: var(--salt-color-red-900);
|
|
615
639
|
--salt-palette-error-border: var(--salt-color-red-500);
|
|
640
|
+
--salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
|
|
616
641
|
--salt-palette-error-foreground: var(--salt-color-red-500);
|
|
642
|
+
--salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
|
|
617
643
|
--salt-palette-info-background-emphasize: var(--salt-color-blue-900);
|
|
618
644
|
--salt-palette-info-border: var(--salt-color-blue-500);
|
|
645
|
+
--salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
|
|
619
646
|
--salt-palette-info-foreground: var(--salt-color-blue-500);
|
|
647
|
+
--salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
|
|
620
648
|
--salt-palette-success-background-emphasize: var(--salt-color-green-900);
|
|
621
649
|
--salt-palette-success-background-selected: var(--salt-color-green-900);
|
|
622
650
|
--salt-palette-success-border: var(--salt-color-green-400);
|
|
651
|
+
--salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
|
|
623
652
|
--salt-palette-success-foreground: var(--salt-color-green-400);
|
|
653
|
+
--salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
|
|
624
654
|
--salt-palette-warning-background-emphasize: var(--salt-color-orange-900);
|
|
625
655
|
--salt-palette-warning-background-selected: var(--salt-color-orange-900);
|
|
626
656
|
--salt-palette-warning-border: var(--salt-color-orange-500);
|
|
657
|
+
--salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
|
|
627
658
|
--salt-palette-warning-foreground: var(--salt-color-orange-500);
|
|
628
|
-
--salt-palette-measured-fill: var(--salt-color-blue-300);
|
|
629
|
-
--salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
|
|
630
|
-
--salt-palette-measured-foreground: var(--salt-color-gray-90);
|
|
631
|
-
--salt-palette-measured-foreground-active: var(--salt-color-blue-300);
|
|
632
|
-
--salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
|
|
633
|
-
--salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
|
|
634
|
-
--salt-palette-measured-background: var(--salt-color-gray-300);
|
|
635
|
-
--salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
|
|
636
|
-
--salt-palette-measured-border: var(--salt-color-gray-90);
|
|
637
|
-
--salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
638
659
|
--salt-palette-navigate-primary-background: transparent;
|
|
639
660
|
--salt-palette-navigate-primary-background-active: transparent;
|
|
640
661
|
--salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
|
|
@@ -651,6 +672,7 @@
|
|
|
651
672
|
--salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
|
|
652
673
|
--salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
|
|
653
674
|
--salt-palette-negative-foreground: var(--salt-color-red-300);
|
|
675
|
+
--salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
|
|
654
676
|
--salt-palette-neutral-primary-background: var(--salt-color-gray-800);
|
|
655
677
|
--salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background);
|
|
656
678
|
--salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly);
|
|
@@ -675,6 +697,39 @@
|
|
|
675
697
|
--salt-palette-neutral-tertiary-border-disabled: transparent;
|
|
676
698
|
--salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
|
|
677
699
|
--salt-palette-positive-foreground: var(--salt-color-green-300);
|
|
700
|
+
--salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
|
|
701
|
+
--salt-palette-track-background: var(--salt-color-gray-300);
|
|
702
|
+
--salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background);
|
|
703
|
+
--salt-palette-track-border: var(--salt-color-gray-90);
|
|
704
|
+
--salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
705
|
+
}
|
|
706
|
+
.salt-theme[data-mode=light] {
|
|
707
|
+
--salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
|
|
708
|
+
--salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
|
|
709
|
+
--salt-palette-measured-fill: var(--salt-color-blue-500);
|
|
710
|
+
--salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
|
|
711
|
+
--salt-palette-measured-foreground: var(--salt-color-gray-90);
|
|
712
|
+
--salt-palette-measured-foreground-active: var(--salt-color-blue-500);
|
|
713
|
+
--salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
|
|
714
|
+
--salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
|
|
715
|
+
--salt-palette-measured-background: var(--salt-color-gray-60);
|
|
716
|
+
--salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
|
|
717
|
+
--salt-palette-measured-border: var(--salt-color-gray-90);
|
|
718
|
+
--salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
719
|
+
}
|
|
720
|
+
.salt-theme[data-mode=dark] {
|
|
721
|
+
--salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
|
|
722
|
+
--salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
|
|
723
|
+
--salt-palette-measured-fill: var(--salt-color-blue-300);
|
|
724
|
+
--salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
|
|
725
|
+
--salt-palette-measured-foreground: var(--salt-color-gray-90);
|
|
726
|
+
--salt-palette-measured-foreground-active: var(--salt-color-blue-300);
|
|
727
|
+
--salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
|
|
728
|
+
--salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
|
|
729
|
+
--salt-palette-measured-background: var(--salt-color-gray-300);
|
|
730
|
+
--salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
|
|
731
|
+
--salt-palette-measured-border: var(--salt-color-gray-90);
|
|
732
|
+
--salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
678
733
|
}
|
|
679
734
|
|
|
680
735
|
/* css/characteristics/accent.css */
|
|
@@ -696,6 +751,7 @@
|
|
|
696
751
|
}
|
|
697
752
|
.salt-theme {
|
|
698
753
|
--salt-accent-background: var(--salt-palette-accent-background);
|
|
754
|
+
--salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
|
|
699
755
|
--salt-accent-borderColor: var(--salt-palette-accent-border);
|
|
700
756
|
--salt-accent-foreground: var(--salt-palette-accent-foreground);
|
|
701
757
|
--salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
@@ -915,43 +971,48 @@
|
|
|
915
971
|
--salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
|
|
916
972
|
--salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);
|
|
917
973
|
--salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
|
|
918
|
-
--salt-selectable-foreground
|
|
919
|
-
--salt-selectable-foreground-
|
|
974
|
+
--salt-selectable-foreground: var(--salt-palette-interact-foreground);
|
|
975
|
+
--salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
976
|
+
--salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);
|
|
977
|
+
--salt-selectable-foreground-selected: var(--salt-palette-interact-foreground-active);
|
|
978
|
+
--salt-selectable-foreground-selectedDisabled: var(--salt-palette-interact-foreground-activeDisabled);
|
|
920
979
|
--salt-selectable-background: var(--salt-palette-interact-background);
|
|
921
980
|
--salt-selectable-background-hover: var(--salt-palette-interact-background-hover);
|
|
922
981
|
--salt-selectable-background-selected: var(--salt-palette-interact-background-active);
|
|
923
982
|
--salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
|
|
924
983
|
--salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);
|
|
925
|
-
--salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
|
|
926
984
|
--salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
|
|
927
985
|
--salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
|
|
928
986
|
--salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
|
|
929
|
-
--salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
930
987
|
--salt-selectable-cta-background: var(--salt-palette-interact-background);
|
|
931
988
|
--salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled);
|
|
932
989
|
--salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
|
|
933
990
|
--salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active);
|
|
934
991
|
--salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled);
|
|
935
|
-
--salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
|
|
992
|
+
--salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
|
|
936
993
|
--salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
|
|
937
994
|
--salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled);
|
|
938
|
-
--salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
939
|
-
--salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
|
|
940
995
|
--salt-selectable-primary-background: var(--salt-palette-interact-background);
|
|
941
996
|
--salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled);
|
|
942
997
|
--salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
|
|
943
998
|
--salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active);
|
|
944
999
|
--salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled);
|
|
945
|
-
--salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
|
|
1000
|
+
--salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
|
|
946
1001
|
--salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active);
|
|
947
1002
|
--salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled);
|
|
948
|
-
--salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
949
|
-
--salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
|
|
950
1003
|
--salt-selectable-secondary-background: var(--salt-palette-interact-background);
|
|
951
1004
|
--salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled);
|
|
952
1005
|
--salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
|
|
953
1006
|
--salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
|
|
954
1007
|
--salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
|
|
1008
|
+
--salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
|
|
1009
|
+
--salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
|
|
1010
|
+
--salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
|
|
1011
|
+
--salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
1012
|
+
--salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
|
|
1013
|
+
--salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
1014
|
+
--salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
|
|
1015
|
+
--salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
955
1016
|
}
|
|
956
1017
|
|
|
957
1018
|
/* css/characteristics/separable.css */
|
|
@@ -971,10 +1032,21 @@
|
|
|
971
1032
|
--salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
|
|
972
1033
|
--salt-status-negative-foreground: var(--salt-palette-negative-foreground);
|
|
973
1034
|
--salt-status-positive-foreground: var(--salt-palette-positive-foreground);
|
|
1035
|
+
--salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
|
|
1036
|
+
--salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
|
|
1037
|
+
--salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
|
|
1038
|
+
--salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
|
|
1039
|
+
--salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
|
|
1040
|
+
--salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
|
|
1041
|
+
--salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
|
|
974
1042
|
--salt-status-info-borderColor: var(--salt-palette-info-border);
|
|
975
1043
|
--salt-status-success-borderColor: var(--salt-palette-success-border);
|
|
976
1044
|
--salt-status-warning-borderColor: var(--salt-palette-warning-border);
|
|
977
1045
|
--salt-status-error-borderColor: var(--salt-palette-error-border);
|
|
1046
|
+
--salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
|
|
1047
|
+
--salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
|
|
1048
|
+
--salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
|
|
1049
|
+
--salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
|
|
978
1050
|
--salt-status-info-background-emphasize: var(--salt-palette-info-background-emphasize);
|
|
979
1051
|
--salt-status-success-background-emphasize: var(--salt-palette-success-background-emphasize);
|
|
980
1052
|
--salt-status-warning-background-emphasize: var(--salt-palette-warning-background-emphasize);
|
|
@@ -1132,4 +1204,22 @@
|
|
|
1132
1204
|
--salt-text-display3-lineHeight: 24px;
|
|
1133
1205
|
}
|
|
1134
1206
|
|
|
1207
|
+
/* css/characteristics/track.css */
|
|
1208
|
+
.salt-theme {
|
|
1209
|
+
--salt-track-borderStyle: solid;
|
|
1210
|
+
--salt-track-borderStyle-active: solid;
|
|
1211
|
+
--salt-track-borderStyle-complete: solid;
|
|
1212
|
+
--salt-track-borderStyle-incomplete: dotted;
|
|
1213
|
+
--salt-track-borderWidth: 2px;
|
|
1214
|
+
--salt-track-borderWidth-active: 2px;
|
|
1215
|
+
--salt-track-borderWidth-complete: 2px;
|
|
1216
|
+
--salt-track-borderWidth-incomplete: 2px;
|
|
1217
|
+
--salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
1218
|
+
--salt-track-textAlign: center;
|
|
1219
|
+
--salt-track-background: var(--salt-palette-track-background);
|
|
1220
|
+
--salt-track-background-disabled: var(--salt-palette-track-background-disabled);
|
|
1221
|
+
--salt-track-borderColor: var(--salt-palette-track-border);
|
|
1222
|
+
--salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
|
|
1223
|
+
}
|
|
1224
|
+
|
|
1135
1225
|
/* css/theme.css */
|
package/index.css
CHANGED
|
@@ -285,20 +285,37 @@
|
|
|
285
285
|
/* css/foundations/fade.css */
|
|
286
286
|
.salt-theme {
|
|
287
287
|
--salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-foreground));
|
|
288
|
+
--salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-foreground));
|
|
288
289
|
--salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-foreground));
|
|
289
|
-
--salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-foreground));
|
|
290
290
|
--salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-foreground));
|
|
291
|
+
--salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-foreground));
|
|
291
292
|
--salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-foreground));
|
|
292
293
|
--salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-foreground));
|
|
294
|
+
--salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-foreground));
|
|
295
|
+
--salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-foreground));
|
|
296
|
+
--salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-foreground));
|
|
297
|
+
--salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-foreground));
|
|
298
|
+
--salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
|
|
299
|
+
--salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
|
|
300
|
+
--salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-foreground));
|
|
301
|
+
--salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-foreground));
|
|
302
|
+
--salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-foreground));
|
|
293
303
|
--salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-foreground));
|
|
304
|
+
--salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-border));
|
|
294
305
|
--salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-border));
|
|
295
306
|
--salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-border));
|
|
296
307
|
--salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-border));
|
|
297
308
|
--salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-border));
|
|
309
|
+
--salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-border));
|
|
310
|
+
--salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-border));
|
|
298
311
|
--salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-border));
|
|
312
|
+
--salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-border));
|
|
299
313
|
--salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-border));
|
|
314
|
+
--salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-border));
|
|
315
|
+
--salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-border));
|
|
300
316
|
--salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));
|
|
301
317
|
--salt-color-gray-200-fade-border-readonly: rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly));
|
|
318
|
+
--salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-background));
|
|
302
319
|
--salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-background));
|
|
303
320
|
--salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-background));
|
|
304
321
|
--salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-background));
|
|
@@ -469,6 +486,7 @@
|
|
|
469
486
|
}
|
|
470
487
|
.salt-theme[data-mode=light] {
|
|
471
488
|
--salt-palette-accent-background: var(--salt-color-blue-500);
|
|
489
|
+
--salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
|
|
472
490
|
--salt-palette-accent-border: var(--salt-color-blue-500);
|
|
473
491
|
--salt-palette-accent-foreground: var(--salt-color-white);
|
|
474
492
|
--salt-palette-interact-background: transparent;
|
|
@@ -482,10 +500,11 @@
|
|
|
482
500
|
--salt-palette-interact-border-disabled: var(--salt-color-gray-200-fade-border);
|
|
483
501
|
--salt-palette-interact-border-hover: var(--salt-color-blue-500);
|
|
484
502
|
--salt-palette-interact-border-readonly: var(--salt-color-gray-200-fade-border-readonly);
|
|
485
|
-
--salt-palette-interact-foreground: var(--salt-color-gray-
|
|
486
|
-
--salt-palette-interact-foreground-
|
|
487
|
-
--salt-palette-interact-foreground-
|
|
488
|
-
--salt-palette-interact-foreground-
|
|
503
|
+
--salt-palette-interact-foreground: var(--salt-color-gray-200);
|
|
504
|
+
--salt-palette-interact-foreground-active: var(--salt-color-blue-600);
|
|
505
|
+
--salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-fade-foreground);
|
|
506
|
+
--salt-palette-interact-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
|
|
507
|
+
--salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
|
|
489
508
|
--salt-palette-interact-outline: var(--salt-color-blue-600);
|
|
490
509
|
--salt-palette-interact-cta-background: var(--salt-color-blue-600);
|
|
491
510
|
--salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
|
|
@@ -520,28 +539,25 @@
|
|
|
520
539
|
--salt-palette-error-background-emphasize: var(--salt-color-red-10);
|
|
521
540
|
--salt-palette-error-background-selected: var(--salt-color-red-20);
|
|
522
541
|
--salt-palette-error-border: var(--salt-color-red-500);
|
|
542
|
+
--salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
|
|
523
543
|
--salt-palette-error-foreground: var(--salt-color-red-500);
|
|
544
|
+
--salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
|
|
524
545
|
--salt-palette-info-background-emphasize: var(--salt-color-blue-10);
|
|
525
546
|
--salt-palette-info-border: var(--salt-color-blue-500);
|
|
547
|
+
--salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
|
|
526
548
|
--salt-palette-info-foreground: var(--salt-color-blue-500);
|
|
549
|
+
--salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
|
|
527
550
|
--salt-palette-success-background-emphasize: var(--salt-color-green-10);
|
|
528
551
|
--salt-palette-success-background-selected: var(--salt-color-green-20);
|
|
529
552
|
--salt-palette-success-border: var(--salt-color-green-500);
|
|
553
|
+
--salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
|
|
530
554
|
--salt-palette-success-foreground: var(--salt-color-green-500);
|
|
555
|
+
--salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
|
|
531
556
|
--salt-palette-warning-background-emphasize: var(--salt-color-orange-10);
|
|
532
557
|
--salt-palette-warning-background-selected: var(--salt-color-orange-20);
|
|
533
558
|
--salt-palette-warning-border: var(--salt-color-orange-700);
|
|
559
|
+
--salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
|
|
534
560
|
--salt-palette-warning-foreground: var(--salt-color-orange-700);
|
|
535
|
-
--salt-palette-measured-fill: var(--salt-color-blue-500);
|
|
536
|
-
--salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
|
|
537
|
-
--salt-palette-measured-foreground: var(--salt-color-gray-90);
|
|
538
|
-
--salt-palette-measured-foreground-active: var(--salt-color-blue-500);
|
|
539
|
-
--salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
|
|
540
|
-
--salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
|
|
541
|
-
--salt-palette-measured-background: var(--salt-color-gray-60);
|
|
542
|
-
--salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
|
|
543
|
-
--salt-palette-measured-border: var(--salt-color-gray-90);
|
|
544
|
-
--salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
545
561
|
--salt-palette-navigate-primary-background: transparent;
|
|
546
562
|
--salt-palette-navigate-primary-background-active: transparent;
|
|
547
563
|
--salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
|
|
@@ -558,6 +574,7 @@
|
|
|
558
574
|
--salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
|
|
559
575
|
--salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
|
|
560
576
|
--salt-palette-negative-foreground: var(--salt-color-red-700);
|
|
577
|
+
--salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
|
|
561
578
|
--salt-palette-neutral-primary-background: var(--salt-color-white);
|
|
562
579
|
--salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
|
|
563
580
|
--salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
|
|
@@ -582,9 +599,15 @@
|
|
|
582
599
|
--salt-palette-neutral-tertiary-border-disabled: transparent;
|
|
583
600
|
--salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
|
|
584
601
|
--salt-palette-positive-foreground: var(--salt-color-green-700);
|
|
602
|
+
--salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
|
|
603
|
+
--salt-palette-track-background: var(--salt-color-gray-60);
|
|
604
|
+
--salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);
|
|
605
|
+
--salt-palette-track-border: var(--salt-color-gray-90);
|
|
606
|
+
--salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
585
607
|
}
|
|
586
608
|
.salt-theme[data-mode=dark] {
|
|
587
609
|
--salt-palette-accent-background: var(--salt-color-blue-500);
|
|
610
|
+
--salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
|
|
588
611
|
--salt-palette-accent-border: var(--salt-color-blue-500);
|
|
589
612
|
--salt-palette-accent-foreground: var(--salt-color-white);
|
|
590
613
|
--salt-palette-interact-background: transparent;
|
|
@@ -598,10 +621,11 @@
|
|
|
598
621
|
--salt-palette-interact-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
599
622
|
--salt-palette-interact-border-hover: var(--salt-color-blue-500);
|
|
600
623
|
--salt-palette-interact-border-readonly: var(--salt-color-gray-90-fade-border-readonly);
|
|
601
|
-
--salt-palette-interact-foreground: var(--salt-color-
|
|
602
|
-
--salt-palette-interact-foreground-
|
|
603
|
-
--salt-palette-interact-foreground-
|
|
604
|
-
--salt-palette-interact-foreground-
|
|
624
|
+
--salt-palette-interact-foreground: var(--salt-color-gray-90);
|
|
625
|
+
--salt-palette-interact-foreground-active: var(--salt-color-blue-100);
|
|
626
|
+
--salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground);
|
|
627
|
+
--salt-palette-interact-foreground-disabled: var(--salt-color-90-fade-foreground);
|
|
628
|
+
--salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
|
|
605
629
|
--salt-palette-interact-outline: var(--salt-color-blue-100);
|
|
606
630
|
--salt-palette-interact-cta-background: var(--salt-color-blue-600);
|
|
607
631
|
--salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
|
|
@@ -636,28 +660,25 @@
|
|
|
636
660
|
--salt-palette-error-background-emphasize: var(--salt-color-red-900);
|
|
637
661
|
--salt-palette-error-background-selected: var(--salt-color-red-900);
|
|
638
662
|
--salt-palette-error-border: var(--salt-color-red-500);
|
|
663
|
+
--salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
|
|
639
664
|
--salt-palette-error-foreground: var(--salt-color-red-500);
|
|
665
|
+
--salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
|
|
640
666
|
--salt-palette-info-background-emphasize: var(--salt-color-blue-900);
|
|
641
667
|
--salt-palette-info-border: var(--salt-color-blue-500);
|
|
668
|
+
--salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
|
|
642
669
|
--salt-palette-info-foreground: var(--salt-color-blue-500);
|
|
670
|
+
--salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
|
|
643
671
|
--salt-palette-success-background-emphasize: var(--salt-color-green-900);
|
|
644
672
|
--salt-palette-success-background-selected: var(--salt-color-green-900);
|
|
645
673
|
--salt-palette-success-border: var(--salt-color-green-400);
|
|
674
|
+
--salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
|
|
646
675
|
--salt-palette-success-foreground: var(--salt-color-green-400);
|
|
676
|
+
--salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
|
|
647
677
|
--salt-palette-warning-background-emphasize: var(--salt-color-orange-900);
|
|
648
678
|
--salt-palette-warning-background-selected: var(--salt-color-orange-900);
|
|
649
679
|
--salt-palette-warning-border: var(--salt-color-orange-500);
|
|
680
|
+
--salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
|
|
650
681
|
--salt-palette-warning-foreground: var(--salt-color-orange-500);
|
|
651
|
-
--salt-palette-measured-fill: var(--salt-color-blue-300);
|
|
652
|
-
--salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
|
|
653
|
-
--salt-palette-measured-foreground: var(--salt-color-gray-90);
|
|
654
|
-
--salt-palette-measured-foreground-active: var(--salt-color-blue-300);
|
|
655
|
-
--salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
|
|
656
|
-
--salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
|
|
657
|
-
--salt-palette-measured-background: var(--salt-color-gray-300);
|
|
658
|
-
--salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
|
|
659
|
-
--salt-palette-measured-border: var(--salt-color-gray-90);
|
|
660
|
-
--salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
661
682
|
--salt-palette-navigate-primary-background: transparent;
|
|
662
683
|
--salt-palette-navigate-primary-background-active: transparent;
|
|
663
684
|
--salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
|
|
@@ -674,6 +695,7 @@
|
|
|
674
695
|
--salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
|
|
675
696
|
--salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
|
|
676
697
|
--salt-palette-negative-foreground: var(--salt-color-red-300);
|
|
698
|
+
--salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
|
|
677
699
|
--salt-palette-neutral-primary-background: var(--salt-color-gray-800);
|
|
678
700
|
--salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background);
|
|
679
701
|
--salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly);
|
|
@@ -698,6 +720,39 @@
|
|
|
698
720
|
--salt-palette-neutral-tertiary-border-disabled: transparent;
|
|
699
721
|
--salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
|
|
700
722
|
--salt-palette-positive-foreground: var(--salt-color-green-300);
|
|
723
|
+
--salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
|
|
724
|
+
--salt-palette-track-background: var(--salt-color-gray-300);
|
|
725
|
+
--salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background);
|
|
726
|
+
--salt-palette-track-border: var(--salt-color-gray-90);
|
|
727
|
+
--salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
728
|
+
}
|
|
729
|
+
.salt-theme[data-mode=light] {
|
|
730
|
+
--salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
|
|
731
|
+
--salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
|
|
732
|
+
--salt-palette-measured-fill: var(--salt-color-blue-500);
|
|
733
|
+
--salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
|
|
734
|
+
--salt-palette-measured-foreground: var(--salt-color-gray-90);
|
|
735
|
+
--salt-palette-measured-foreground-active: var(--salt-color-blue-500);
|
|
736
|
+
--salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
|
|
737
|
+
--salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
|
|
738
|
+
--salt-palette-measured-background: var(--salt-color-gray-60);
|
|
739
|
+
--salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
|
|
740
|
+
--salt-palette-measured-border: var(--salt-color-gray-90);
|
|
741
|
+
--salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
742
|
+
}
|
|
743
|
+
.salt-theme[data-mode=dark] {
|
|
744
|
+
--salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
|
|
745
|
+
--salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
|
|
746
|
+
--salt-palette-measured-fill: var(--salt-color-blue-300);
|
|
747
|
+
--salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
|
|
748
|
+
--salt-palette-measured-foreground: var(--salt-color-gray-90);
|
|
749
|
+
--salt-palette-measured-foreground-active: var(--salt-color-blue-300);
|
|
750
|
+
--salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
|
|
751
|
+
--salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
|
|
752
|
+
--salt-palette-measured-background: var(--salt-color-gray-300);
|
|
753
|
+
--salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
|
|
754
|
+
--salt-palette-measured-border: var(--salt-color-gray-90);
|
|
755
|
+
--salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
701
756
|
}
|
|
702
757
|
|
|
703
758
|
/* css/characteristics/accent.css */
|
|
@@ -719,6 +774,7 @@
|
|
|
719
774
|
}
|
|
720
775
|
.salt-theme {
|
|
721
776
|
--salt-accent-background: var(--salt-palette-accent-background);
|
|
777
|
+
--salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
|
|
722
778
|
--salt-accent-borderColor: var(--salt-palette-accent-border);
|
|
723
779
|
--salt-accent-foreground: var(--salt-palette-accent-foreground);
|
|
724
780
|
--salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
@@ -938,43 +994,48 @@
|
|
|
938
994
|
--salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
|
|
939
995
|
--salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);
|
|
940
996
|
--salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
|
|
941
|
-
--salt-selectable-foreground
|
|
942
|
-
--salt-selectable-foreground-
|
|
997
|
+
--salt-selectable-foreground: var(--salt-palette-interact-foreground);
|
|
998
|
+
--salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
999
|
+
--salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);
|
|
1000
|
+
--salt-selectable-foreground-selected: var(--salt-palette-interact-foreground-active);
|
|
1001
|
+
--salt-selectable-foreground-selectedDisabled: var(--salt-palette-interact-foreground-activeDisabled);
|
|
943
1002
|
--salt-selectable-background: var(--salt-palette-interact-background);
|
|
944
1003
|
--salt-selectable-background-hover: var(--salt-palette-interact-background-hover);
|
|
945
1004
|
--salt-selectable-background-selected: var(--salt-palette-interact-background-active);
|
|
946
1005
|
--salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
|
|
947
1006
|
--salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);
|
|
948
|
-
--salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
|
|
949
1007
|
--salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
|
|
950
1008
|
--salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
|
|
951
1009
|
--salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
|
|
952
|
-
--salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
953
1010
|
--salt-selectable-cta-background: var(--salt-palette-interact-background);
|
|
954
1011
|
--salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled);
|
|
955
1012
|
--salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
|
|
956
1013
|
--salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active);
|
|
957
1014
|
--salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled);
|
|
958
|
-
--salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
|
|
1015
|
+
--salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
|
|
959
1016
|
--salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
|
|
960
1017
|
--salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled);
|
|
961
|
-
--salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
962
|
-
--salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
|
|
963
1018
|
--salt-selectable-primary-background: var(--salt-palette-interact-background);
|
|
964
1019
|
--salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled);
|
|
965
1020
|
--salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
|
|
966
1021
|
--salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active);
|
|
967
1022
|
--salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled);
|
|
968
|
-
--salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
|
|
1023
|
+
--salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
|
|
969
1024
|
--salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active);
|
|
970
1025
|
--salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled);
|
|
971
|
-
--salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
972
|
-
--salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
|
|
973
1026
|
--salt-selectable-secondary-background: var(--salt-palette-interact-background);
|
|
974
1027
|
--salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled);
|
|
975
1028
|
--salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
|
|
976
1029
|
--salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
|
|
977
1030
|
--salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
|
|
1031
|
+
--salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
|
|
1032
|
+
--salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
|
|
1033
|
+
--salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
|
|
1034
|
+
--salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
1035
|
+
--salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
|
|
1036
|
+
--salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
1037
|
+
--salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
|
|
1038
|
+
--salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
978
1039
|
}
|
|
979
1040
|
|
|
980
1041
|
/* css/characteristics/separable.css */
|
|
@@ -994,10 +1055,21 @@
|
|
|
994
1055
|
--salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
|
|
995
1056
|
--salt-status-negative-foreground: var(--salt-palette-negative-foreground);
|
|
996
1057
|
--salt-status-positive-foreground: var(--salt-palette-positive-foreground);
|
|
1058
|
+
--salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
|
|
1059
|
+
--salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
|
|
1060
|
+
--salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
|
|
1061
|
+
--salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
|
|
1062
|
+
--salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
|
|
1063
|
+
--salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
|
|
1064
|
+
--salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
|
|
997
1065
|
--salt-status-info-borderColor: var(--salt-palette-info-border);
|
|
998
1066
|
--salt-status-success-borderColor: var(--salt-palette-success-border);
|
|
999
1067
|
--salt-status-warning-borderColor: var(--salt-palette-warning-border);
|
|
1000
1068
|
--salt-status-error-borderColor: var(--salt-palette-error-border);
|
|
1069
|
+
--salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
|
|
1070
|
+
--salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
|
|
1071
|
+
--salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
|
|
1072
|
+
--salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
|
|
1001
1073
|
--salt-status-info-background-emphasize: var(--salt-palette-info-background-emphasize);
|
|
1002
1074
|
--salt-status-success-background-emphasize: var(--salt-palette-success-background-emphasize);
|
|
1003
1075
|
--salt-status-warning-background-emphasize: var(--salt-palette-warning-background-emphasize);
|
|
@@ -1155,6 +1227,24 @@
|
|
|
1155
1227
|
--salt-text-display3-lineHeight: 24px;
|
|
1156
1228
|
}
|
|
1157
1229
|
|
|
1230
|
+
/* css/characteristics/track.css */
|
|
1231
|
+
.salt-theme {
|
|
1232
|
+
--salt-track-borderStyle: solid;
|
|
1233
|
+
--salt-track-borderStyle-active: solid;
|
|
1234
|
+
--salt-track-borderStyle-complete: solid;
|
|
1235
|
+
--salt-track-borderStyle-incomplete: dotted;
|
|
1236
|
+
--salt-track-borderWidth: 2px;
|
|
1237
|
+
--salt-track-borderWidth-active: 2px;
|
|
1238
|
+
--salt-track-borderWidth-complete: 2px;
|
|
1239
|
+
--salt-track-borderWidth-incomplete: 2px;
|
|
1240
|
+
--salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
1241
|
+
--salt-track-textAlign: center;
|
|
1242
|
+
--salt-track-background: var(--salt-palette-track-background);
|
|
1243
|
+
--salt-track-background-disabled: var(--salt-palette-track-background-disabled);
|
|
1244
|
+
--salt-track-borderColor: var(--salt-palette-track-border);
|
|
1245
|
+
--salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
|
|
1246
|
+
}
|
|
1247
|
+
|
|
1158
1248
|
/* css/theme.css */
|
|
1159
1249
|
|
|
1160
1250
|
/* index.css */
|