@salt-ds/theme 1.14.0 → 1.16.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/global.css +1 -1
- package/css/theme-next.css +790 -0
- package/css/theme.css +85 -33
- package/index.css +86 -34
- package/package.json +1 -1
package/css/theme.css
CHANGED
|
@@ -174,6 +174,7 @@
|
|
|
174
174
|
--salt-color-orange-600: rgb(224, 101, 25);
|
|
175
175
|
--salt-color-orange-700: rgb(214, 85, 19);
|
|
176
176
|
--salt-color-orange-800: rgb(204, 68, 13);
|
|
177
|
+
--salt-color-orange-850: rgb(194, 52, 7);
|
|
177
178
|
--salt-color-orange-900: rgb(54, 44, 36);
|
|
178
179
|
--salt-color-green-10: rgb(209, 244, 201);
|
|
179
180
|
--salt-color-green-20: rgb(184, 232, 182);
|
|
@@ -318,7 +319,9 @@
|
|
|
318
319
|
--salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border));
|
|
319
320
|
--salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
|
|
320
321
|
--salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
|
|
322
|
+
--salt-color-black-fade-background-selection: rgba(0, 0, 0, var(--salt-opacity-15));
|
|
321
323
|
--salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
|
|
324
|
+
--salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15));
|
|
322
325
|
}
|
|
323
326
|
|
|
324
327
|
/* css/foundations/opacity.css */
|
|
@@ -434,8 +437,9 @@
|
|
|
434
437
|
|
|
435
438
|
/* css/foundations/typography.css */
|
|
436
439
|
.salt-theme {
|
|
437
|
-
--salt-typography-fontFamily: "Open Sans";
|
|
438
|
-
--salt-typography-fontFamily-
|
|
440
|
+
--salt-typography-fontFamily-openSans: "Open Sans";
|
|
441
|
+
--salt-typography-fontFamily-amplitude: "Amplitude";
|
|
442
|
+
--salt-typography-fontFamily-ptMono: "PT Mono";
|
|
439
443
|
--salt-typography-fontWeight-light: 300;
|
|
440
444
|
--salt-typography-fontWeight-regular: 400;
|
|
441
445
|
--salt-typography-fontWeight-medium: 500;
|
|
@@ -477,25 +481,29 @@
|
|
|
477
481
|
--salt-palette-error-background: var(--salt-color-red-10);
|
|
478
482
|
--salt-palette-error-background-selected: var(--salt-color-red-20);
|
|
479
483
|
--salt-palette-error-border: var(--salt-color-red-500);
|
|
480
|
-
--salt-palette-error-foreground: var(--salt-color-red-500);
|
|
484
|
+
--salt-palette-error-foreground-decorative: var(--salt-color-red-500);
|
|
485
|
+
--salt-palette-error-foreground-informative: var(--salt-color-red-600);
|
|
481
486
|
}
|
|
482
487
|
.salt-theme[data-mode=dark] {
|
|
483
488
|
--salt-palette-error-background: var(--salt-color-red-900);
|
|
484
489
|
--salt-palette-error-background-selected: var(--salt-color-red-900);
|
|
485
|
-
--salt-palette-error-border: var(--salt-color-red-
|
|
486
|
-
--salt-palette-error-foreground: var(--salt-color-red-
|
|
490
|
+
--salt-palette-error-border: var(--salt-color-red-400);
|
|
491
|
+
--salt-palette-error-foreground-decorative: var(--salt-color-red-400);
|
|
492
|
+
--salt-palette-error-foreground-informative: var(--salt-color-red-200);
|
|
487
493
|
}
|
|
488
494
|
|
|
489
495
|
/* css/palette/info.css */
|
|
490
496
|
.salt-theme[data-mode=light] {
|
|
491
497
|
--salt-palette-info-background: var(--salt-color-blue-10);
|
|
492
498
|
--salt-palette-info-border: var(--salt-color-blue-500);
|
|
493
|
-
--salt-palette-info-foreground: var(--salt-color-blue-500);
|
|
499
|
+
--salt-palette-info-foreground-decorative: var(--salt-color-blue-500);
|
|
500
|
+
--salt-palette-info-foreground-informative: var(--salt-color-blue-600);
|
|
494
501
|
}
|
|
495
502
|
.salt-theme[data-mode=dark] {
|
|
496
503
|
--salt-palette-info-background: var(--salt-color-blue-900);
|
|
497
|
-
--salt-palette-info-border: var(--salt-color-blue-
|
|
498
|
-
--salt-palette-info-foreground: var(--salt-color-blue-
|
|
504
|
+
--salt-palette-info-border: var(--salt-color-blue-400);
|
|
505
|
+
--salt-palette-info-foreground-decorative: var(--salt-color-blue-400);
|
|
506
|
+
--salt-palette-info-foreground-informative: var(--salt-color-blue-200);
|
|
499
507
|
}
|
|
500
508
|
|
|
501
509
|
/* css/palette/interact.css */
|
|
@@ -634,6 +642,7 @@
|
|
|
634
642
|
--salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
|
|
635
643
|
--salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
|
|
636
644
|
--salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
|
|
645
|
+
--salt-palette-neutral-selection: var(--salt-color-black-fade-background-selection);
|
|
637
646
|
}
|
|
638
647
|
.salt-theme[data-mode=dark] {
|
|
639
648
|
--salt-palette-neutral-primary-background: var(--salt-color-gray-800);
|
|
@@ -654,6 +663,7 @@
|
|
|
654
663
|
--salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
|
|
655
664
|
--salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
|
|
656
665
|
--salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
|
|
666
|
+
--salt-palette-neutral-selection: var(--salt-color-white-fade-background-selection);
|
|
657
667
|
}
|
|
658
668
|
|
|
659
669
|
/* css/palette/opacity.css */
|
|
@@ -680,13 +690,22 @@
|
|
|
680
690
|
--salt-palette-success-background: var(--salt-color-green-10);
|
|
681
691
|
--salt-palette-success-background-selected: var(--salt-color-green-20);
|
|
682
692
|
--salt-palette-success-border: var(--salt-color-green-500);
|
|
683
|
-
--salt-palette-success-foreground: var(--salt-color-green-500);
|
|
693
|
+
--salt-palette-success-foreground-decorative: var(--salt-color-green-500);
|
|
694
|
+
--salt-palette-success-foreground-informative: var(--salt-color-green-600);
|
|
684
695
|
}
|
|
685
696
|
.salt-theme[data-mode=dark] {
|
|
686
697
|
--salt-palette-success-background: var(--salt-color-green-900);
|
|
687
698
|
--salt-palette-success-background-selected: var(--salt-color-green-900);
|
|
688
699
|
--salt-palette-success-border: var(--salt-color-green-400);
|
|
689
|
-
--salt-palette-success-foreground: var(--salt-color-green-400);
|
|
700
|
+
--salt-palette-success-foreground-decorative: var(--salt-color-green-400);
|
|
701
|
+
--salt-palette-success-foreground-informative: var(--salt-color-green-200);
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
/* css/palette/text.css */
|
|
705
|
+
.salt-theme {
|
|
706
|
+
--salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
|
|
707
|
+
--salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
|
|
708
|
+
--salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
|
|
690
709
|
}
|
|
691
710
|
|
|
692
711
|
/* css/palette/warning.css */
|
|
@@ -694,13 +713,15 @@
|
|
|
694
713
|
--salt-palette-warning-background: var(--salt-color-orange-10);
|
|
695
714
|
--salt-palette-warning-background-selected: var(--salt-color-orange-20);
|
|
696
715
|
--salt-palette-warning-border: var(--salt-color-orange-700);
|
|
697
|
-
--salt-palette-warning-foreground: var(--salt-color-orange-700);
|
|
716
|
+
--salt-palette-warning-foreground-decorative: var(--salt-color-orange-700);
|
|
717
|
+
--salt-palette-warning-foreground-informative: var(--salt-color-orange-850);
|
|
698
718
|
}
|
|
699
719
|
.salt-theme[data-mode=dark] {
|
|
700
720
|
--salt-palette-warning-background: var(--salt-color-orange-900);
|
|
701
721
|
--salt-palette-warning-background-selected: var(--salt-color-orange-900);
|
|
702
722
|
--salt-palette-warning-border: var(--salt-color-orange-500);
|
|
703
|
-
--salt-palette-warning-foreground: var(--salt-color-orange-500);
|
|
723
|
+
--salt-palette-warning-foreground-decorative: var(--salt-color-orange-500);
|
|
724
|
+
--salt-palette-warning-foreground-informative: var(--salt-color-orange-400);
|
|
704
725
|
}
|
|
705
726
|
|
|
706
727
|
/* css/characteristics/accent.css */
|
|
@@ -723,6 +744,10 @@
|
|
|
723
744
|
--salt-actionable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
|
|
724
745
|
--salt-actionable-primary-background-active: var(--salt-palette-interact-primary-background-active);
|
|
725
746
|
--salt-actionable-primary-background-disabled: var(--salt-palette-interact-primary-background-disabled);
|
|
747
|
+
--salt-actionable-primary-borderColor: transparent;
|
|
748
|
+
--salt-actionable-primary-borderColor-hover: transparent;
|
|
749
|
+
--salt-actionable-primary-borderColor-active: transparent;
|
|
750
|
+
--salt-actionable-primary-borderColor-disabled: transparent;
|
|
726
751
|
--salt-actionable-cta-foreground: var(--salt-palette-interact-cta-foreground);
|
|
727
752
|
--salt-actionable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
|
|
728
753
|
--salt-actionable-cta-foreground-active: var(--salt-palette-interact-cta-foreground-active);
|
|
@@ -731,6 +756,10 @@
|
|
|
731
756
|
--salt-actionable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
|
|
732
757
|
--salt-actionable-cta-background-active: var(--salt-palette-interact-cta-background-active);
|
|
733
758
|
--salt-actionable-cta-background-disabled: var(--salt-palette-interact-cta-background-disabled);
|
|
759
|
+
--salt-actionable-cta-borderColor: transparent;
|
|
760
|
+
--salt-actionable-cta-borderColor-hover: transparent;
|
|
761
|
+
--salt-actionable-cta-borderColor-active: transparent;
|
|
762
|
+
--salt-actionable-cta-borderColor-disabled: transparent;
|
|
734
763
|
--salt-actionable-secondary-foreground: var(--salt-palette-interact-secondary-foreground);
|
|
735
764
|
--salt-actionable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
|
|
736
765
|
--salt-actionable-secondary-foreground-active: var(--salt-palette-interact-secondary-foreground-active);
|
|
@@ -739,6 +768,10 @@
|
|
|
739
768
|
--salt-actionable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
|
|
740
769
|
--salt-actionable-secondary-background-active: var(--salt-palette-interact-secondary-background-active);
|
|
741
770
|
--salt-actionable-secondary-background-disabled: var(--salt-palette-interact-secondary-background-disabled);
|
|
771
|
+
--salt-actionable-secondary-borderColor: transparent;
|
|
772
|
+
--salt-actionable-secondary-borderColor-hover: transparent;
|
|
773
|
+
--salt-actionable-secondary-borderColor-active: transparent;
|
|
774
|
+
--salt-actionable-secondary-borderColor-disabled: transparent;
|
|
742
775
|
}
|
|
743
776
|
|
|
744
777
|
/* css/characteristics/container.css */
|
|
@@ -853,6 +886,7 @@
|
|
|
853
886
|
--salt-overlayable-shadow-drag: var(--salt-shadow-400);
|
|
854
887
|
--salt-overlayable-shadow-modal: var(--salt-shadow-500);
|
|
855
888
|
--salt-overlayable-background: var(--salt-palette-neutral-backdrop);
|
|
889
|
+
--salt-overlayable-rangeSelection: var(--salt-palette-neutral-selection);
|
|
856
890
|
}
|
|
857
891
|
|
|
858
892
|
/* css/characteristics/selectable.css */
|
|
@@ -895,24 +929,28 @@
|
|
|
895
929
|
|
|
896
930
|
/* css/characteristics/status.css */
|
|
897
931
|
.salt-theme {
|
|
898
|
-
--salt-status-info-foreground: var(--salt-palette-info-foreground);
|
|
899
|
-
--salt-status-success-foreground: var(--salt-palette-success-foreground);
|
|
900
|
-
--salt-status-warning-foreground: var(--salt-palette-warning-foreground);
|
|
901
|
-
--salt-status-error-foreground: var(--salt-palette-error-foreground);
|
|
902
932
|
--salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
|
|
903
933
|
--salt-status-negative-foreground: var(--salt-palette-negative-foreground);
|
|
904
934
|
--salt-status-positive-foreground: var(--salt-palette-positive-foreground);
|
|
935
|
+
--salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
|
|
936
|
+
--salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
|
|
937
|
+
--salt-status-warning-foreground-decorative: var(--salt-palette-warning-foreground-decorative);
|
|
938
|
+
--salt-status-success-foreground-decorative: var(--salt-palette-success-foreground-decorative);
|
|
939
|
+
--salt-status-info-foreground-informative: var(--salt-palette-info-foreground-informative);
|
|
940
|
+
--salt-status-error-foreground-informative: var(--salt-palette-error-foreground-informative);
|
|
941
|
+
--salt-status-warning-foreground-informative: var(--salt-palette-warning-foreground-informative);
|
|
942
|
+
--salt-status-success-foreground-informative: var(--salt-palette-success-foreground-informative);
|
|
905
943
|
--salt-status-info-borderColor: var(--salt-palette-info-border);
|
|
906
|
-
--salt-status-success-borderColor: var(--salt-palette-success-border);
|
|
907
|
-
--salt-status-warning-borderColor: var(--salt-palette-warning-border);
|
|
908
944
|
--salt-status-error-borderColor: var(--salt-palette-error-border);
|
|
945
|
+
--salt-status-warning-borderColor: var(--salt-palette-warning-border);
|
|
946
|
+
--salt-status-success-borderColor: var(--salt-palette-success-border);
|
|
909
947
|
--salt-status-info-background: var(--salt-palette-info-background);
|
|
910
|
-
--salt-status-success-background: var(--salt-palette-success-background);
|
|
911
|
-
--salt-status-warning-background: var(--salt-palette-warning-background);
|
|
912
948
|
--salt-status-error-background: var(--salt-palette-error-background);
|
|
913
|
-
--salt-status-
|
|
914
|
-
--salt-status-
|
|
949
|
+
--salt-status-warning-background: var(--salt-palette-warning-background);
|
|
950
|
+
--salt-status-success-background: var(--salt-palette-success-background);
|
|
915
951
|
--salt-status-error-background-selected: var(--salt-palette-error-background-selected);
|
|
952
|
+
--salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
|
|
953
|
+
--salt-status-success-background-selected: var(--salt-palette-success-background-selected);
|
|
916
954
|
}
|
|
917
955
|
|
|
918
956
|
/* css/characteristics/text.css */
|
|
@@ -926,47 +964,47 @@
|
|
|
926
964
|
--salt-text-action-textTransform: uppercase;
|
|
927
965
|
--salt-text-action-textAlign: center;
|
|
928
966
|
--salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
929
|
-
--salt-text-fontFamily: var(--salt-
|
|
967
|
+
--salt-text-fontFamily: var(--salt-palette-text-fontFamily);
|
|
930
968
|
--salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
|
|
931
969
|
--salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
|
|
932
970
|
--salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
|
|
933
|
-
--salt-text-notation-fontFamily: var(--salt-
|
|
971
|
+
--salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
|
|
934
972
|
--salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
935
973
|
--salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
936
974
|
--salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
937
|
-
--salt-text-h1-fontFamily: var(--salt-
|
|
975
|
+
--salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
938
976
|
--salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
|
|
939
977
|
--salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
|
|
940
978
|
--salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
|
|
941
|
-
--salt-text-h2-fontFamily: var(--salt-
|
|
979
|
+
--salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
942
980
|
--salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
943
981
|
--salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
944
982
|
--salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
945
|
-
--salt-text-h3-fontFamily: var(--salt-
|
|
983
|
+
--salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
946
984
|
--salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
947
985
|
--salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
948
986
|
--salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
949
|
-
--salt-text-h4-fontFamily: var(--salt-
|
|
987
|
+
--salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
950
988
|
--salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
951
989
|
--salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
952
990
|
--salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
953
|
-
--salt-text-label-fontFamily: var(--salt-
|
|
991
|
+
--salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
|
|
954
992
|
--salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
|
|
955
993
|
--salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
|
|
956
994
|
--salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
|
|
957
|
-
--salt-text-display1-fontFamily: var(--salt-
|
|
995
|
+
--salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
958
996
|
--salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
959
997
|
--salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
960
998
|
--salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
961
|
-
--salt-text-display2-fontFamily: var(--salt-
|
|
999
|
+
--salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
962
1000
|
--salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
963
1001
|
--salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
964
1002
|
--salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
965
|
-
--salt-text-display3-fontFamily: var(--salt-
|
|
1003
|
+
--salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
966
1004
|
--salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
967
1005
|
--salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
968
1006
|
--salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
969
|
-
--salt-text-code-fontFamily: var(--salt-
|
|
1007
|
+
--salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
|
|
970
1008
|
}
|
|
971
1009
|
.salt-density-touch {
|
|
972
1010
|
--salt-text-h1-fontSize: 42px;
|
|
@@ -1162,6 +1200,10 @@
|
|
|
1162
1200
|
--salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
|
|
1163
1201
|
--salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
|
|
1164
1202
|
--salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
|
|
1203
|
+
--salt-status-info-foreground: var(--salt-palette-info-foreground);
|
|
1204
|
+
--salt-status-error-foreground: var(--salt-palette-error-foreground);
|
|
1205
|
+
--salt-status-warning-foreground: var(--salt-palette-warning-foreground);
|
|
1206
|
+
--salt-status-success-foreground: var(--salt-palette-success-foreground);
|
|
1165
1207
|
--salt-actionable-letterSpacing: 0.6px;
|
|
1166
1208
|
--salt-actionable-textTransform: uppercase;
|
|
1167
1209
|
--salt-actionable-textAlign: center;
|
|
@@ -1262,6 +1304,8 @@
|
|
|
1262
1304
|
--salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
|
|
1263
1305
|
--salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
|
|
1264
1306
|
--salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
|
|
1307
|
+
--salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
|
|
1308
|
+
--salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
|
|
1265
1309
|
}
|
|
1266
1310
|
.salt-theme[data-mode=light] {
|
|
1267
1311
|
--salt-shadow-1-color: rgba(0, 0, 0, 0.1);
|
|
@@ -1367,14 +1411,18 @@
|
|
|
1367
1411
|
--salt-palette-neutral-tertiary-border-disabled: transparent;
|
|
1368
1412
|
--salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
|
|
1369
1413
|
--salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
|
|
1414
|
+
--salt-palette-error-foreground: var(--salt-color-red-500);
|
|
1370
1415
|
--salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
|
|
1371
1416
|
--salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
|
|
1417
|
+
--salt-palette-info-foreground: var(--salt-color-blue-500);
|
|
1372
1418
|
--salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
|
|
1373
1419
|
--salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
|
|
1374
1420
|
--salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
|
|
1375
1421
|
--salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
|
|
1422
|
+
--salt-palette-success-foreground: var(--salt-color-green-500);
|
|
1376
1423
|
--salt-palette-warning-foreground-disabled: var(--salt-color-orange-700-fade-foreground);
|
|
1377
1424
|
--salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
|
|
1425
|
+
--salt-palette-warning-foreground: var(--salt-color-orange-700);
|
|
1378
1426
|
--salt-palette-navigate-primary-background: transparent;
|
|
1379
1427
|
--salt-palette-navigate-primary-background-active: transparent;
|
|
1380
1428
|
--salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
|
|
@@ -1419,14 +1467,18 @@
|
|
|
1419
1467
|
--salt-palette-neutral-tertiary-border-disabled: transparent;
|
|
1420
1468
|
--salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
|
|
1421
1469
|
--salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
|
|
1470
|
+
--salt-palette-error-foreground: var(--salt-color-red-500);
|
|
1422
1471
|
--salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
|
|
1423
1472
|
--salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
|
|
1473
|
+
--salt-palette-info-foreground: var(--salt-color-blue-500);
|
|
1424
1474
|
--salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
|
|
1425
1475
|
--salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
|
|
1426
1476
|
--salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
|
|
1427
1477
|
--salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
|
|
1478
|
+
--salt-palette-success-foreground: var(--salt-color-green-400);
|
|
1428
1479
|
--salt-palette-warning-foreground-disabled: var(--salt-color-orange-500-fade-foreground);
|
|
1429
1480
|
--salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
|
|
1481
|
+
--salt-palette-warning-foreground: var(--salt-color-orange-500);
|
|
1430
1482
|
--salt-palette-navigate-primary-background: transparent;
|
|
1431
1483
|
--salt-palette-navigate-primary-background-active: transparent;
|
|
1432
1484
|
--salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
|
package/index.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* css/global.css */
|
|
2
2
|
.salt-theme {
|
|
3
3
|
color: var(--salt-content-primary-foreground);
|
|
4
|
-
font-family: var(--salt-
|
|
4
|
+
font-family: var(--salt-text-fontFamily);
|
|
5
5
|
font-size: var(--salt-text-fontSize);
|
|
6
6
|
letter-spacing: var(--salt-text-letterSpacing);
|
|
7
7
|
line-height: var(--salt-text-lineHeight);
|
|
@@ -203,6 +203,7 @@
|
|
|
203
203
|
--salt-color-orange-600: rgb(224, 101, 25);
|
|
204
204
|
--salt-color-orange-700: rgb(214, 85, 19);
|
|
205
205
|
--salt-color-orange-800: rgb(204, 68, 13);
|
|
206
|
+
--salt-color-orange-850: rgb(194, 52, 7);
|
|
206
207
|
--salt-color-orange-900: rgb(54, 44, 36);
|
|
207
208
|
--salt-color-green-10: rgb(209, 244, 201);
|
|
208
209
|
--salt-color-green-20: rgb(184, 232, 182);
|
|
@@ -347,7 +348,9 @@
|
|
|
347
348
|
--salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border));
|
|
348
349
|
--salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
|
|
349
350
|
--salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
|
|
351
|
+
--salt-color-black-fade-background-selection: rgba(0, 0, 0, var(--salt-opacity-15));
|
|
350
352
|
--salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
|
|
353
|
+
--salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15));
|
|
351
354
|
}
|
|
352
355
|
|
|
353
356
|
/* css/foundations/opacity.css */
|
|
@@ -463,8 +466,9 @@
|
|
|
463
466
|
|
|
464
467
|
/* css/foundations/typography.css */
|
|
465
468
|
.salt-theme {
|
|
466
|
-
--salt-typography-fontFamily: "Open Sans";
|
|
467
|
-
--salt-typography-fontFamily-
|
|
469
|
+
--salt-typography-fontFamily-openSans: "Open Sans";
|
|
470
|
+
--salt-typography-fontFamily-amplitude: "Amplitude";
|
|
471
|
+
--salt-typography-fontFamily-ptMono: "PT Mono";
|
|
468
472
|
--salt-typography-fontWeight-light: 300;
|
|
469
473
|
--salt-typography-fontWeight-regular: 400;
|
|
470
474
|
--salt-typography-fontWeight-medium: 500;
|
|
@@ -506,25 +510,29 @@
|
|
|
506
510
|
--salt-palette-error-background: var(--salt-color-red-10);
|
|
507
511
|
--salt-palette-error-background-selected: var(--salt-color-red-20);
|
|
508
512
|
--salt-palette-error-border: var(--salt-color-red-500);
|
|
509
|
-
--salt-palette-error-foreground: var(--salt-color-red-500);
|
|
513
|
+
--salt-palette-error-foreground-decorative: var(--salt-color-red-500);
|
|
514
|
+
--salt-palette-error-foreground-informative: var(--salt-color-red-600);
|
|
510
515
|
}
|
|
511
516
|
.salt-theme[data-mode=dark] {
|
|
512
517
|
--salt-palette-error-background: var(--salt-color-red-900);
|
|
513
518
|
--salt-palette-error-background-selected: var(--salt-color-red-900);
|
|
514
|
-
--salt-palette-error-border: var(--salt-color-red-
|
|
515
|
-
--salt-palette-error-foreground: var(--salt-color-red-
|
|
519
|
+
--salt-palette-error-border: var(--salt-color-red-400);
|
|
520
|
+
--salt-palette-error-foreground-decorative: var(--salt-color-red-400);
|
|
521
|
+
--salt-palette-error-foreground-informative: var(--salt-color-red-200);
|
|
516
522
|
}
|
|
517
523
|
|
|
518
524
|
/* css/palette/info.css */
|
|
519
525
|
.salt-theme[data-mode=light] {
|
|
520
526
|
--salt-palette-info-background: var(--salt-color-blue-10);
|
|
521
527
|
--salt-palette-info-border: var(--salt-color-blue-500);
|
|
522
|
-
--salt-palette-info-foreground: var(--salt-color-blue-500);
|
|
528
|
+
--salt-palette-info-foreground-decorative: var(--salt-color-blue-500);
|
|
529
|
+
--salt-palette-info-foreground-informative: var(--salt-color-blue-600);
|
|
523
530
|
}
|
|
524
531
|
.salt-theme[data-mode=dark] {
|
|
525
532
|
--salt-palette-info-background: var(--salt-color-blue-900);
|
|
526
|
-
--salt-palette-info-border: var(--salt-color-blue-
|
|
527
|
-
--salt-palette-info-foreground: var(--salt-color-blue-
|
|
533
|
+
--salt-palette-info-border: var(--salt-color-blue-400);
|
|
534
|
+
--salt-palette-info-foreground-decorative: var(--salt-color-blue-400);
|
|
535
|
+
--salt-palette-info-foreground-informative: var(--salt-color-blue-200);
|
|
528
536
|
}
|
|
529
537
|
|
|
530
538
|
/* css/palette/interact.css */
|
|
@@ -663,6 +671,7 @@
|
|
|
663
671
|
--salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
|
|
664
672
|
--salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
|
|
665
673
|
--salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
|
|
674
|
+
--salt-palette-neutral-selection: var(--salt-color-black-fade-background-selection);
|
|
666
675
|
}
|
|
667
676
|
.salt-theme[data-mode=dark] {
|
|
668
677
|
--salt-palette-neutral-primary-background: var(--salt-color-gray-800);
|
|
@@ -683,6 +692,7 @@
|
|
|
683
692
|
--salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
|
|
684
693
|
--salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
|
|
685
694
|
--salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
|
|
695
|
+
--salt-palette-neutral-selection: var(--salt-color-white-fade-background-selection);
|
|
686
696
|
}
|
|
687
697
|
|
|
688
698
|
/* css/palette/opacity.css */
|
|
@@ -709,13 +719,22 @@
|
|
|
709
719
|
--salt-palette-success-background: var(--salt-color-green-10);
|
|
710
720
|
--salt-palette-success-background-selected: var(--salt-color-green-20);
|
|
711
721
|
--salt-palette-success-border: var(--salt-color-green-500);
|
|
712
|
-
--salt-palette-success-foreground: var(--salt-color-green-500);
|
|
722
|
+
--salt-palette-success-foreground-decorative: var(--salt-color-green-500);
|
|
723
|
+
--salt-palette-success-foreground-informative: var(--salt-color-green-600);
|
|
713
724
|
}
|
|
714
725
|
.salt-theme[data-mode=dark] {
|
|
715
726
|
--salt-palette-success-background: var(--salt-color-green-900);
|
|
716
727
|
--salt-palette-success-background-selected: var(--salt-color-green-900);
|
|
717
728
|
--salt-palette-success-border: var(--salt-color-green-400);
|
|
718
|
-
--salt-palette-success-foreground: var(--salt-color-green-400);
|
|
729
|
+
--salt-palette-success-foreground-decorative: var(--salt-color-green-400);
|
|
730
|
+
--salt-palette-success-foreground-informative: var(--salt-color-green-200);
|
|
731
|
+
}
|
|
732
|
+
|
|
733
|
+
/* css/palette/text.css */
|
|
734
|
+
.salt-theme {
|
|
735
|
+
--salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
|
|
736
|
+
--salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
|
|
737
|
+
--salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
|
|
719
738
|
}
|
|
720
739
|
|
|
721
740
|
/* css/palette/warning.css */
|
|
@@ -723,13 +742,15 @@
|
|
|
723
742
|
--salt-palette-warning-background: var(--salt-color-orange-10);
|
|
724
743
|
--salt-palette-warning-background-selected: var(--salt-color-orange-20);
|
|
725
744
|
--salt-palette-warning-border: var(--salt-color-orange-700);
|
|
726
|
-
--salt-palette-warning-foreground: var(--salt-color-orange-700);
|
|
745
|
+
--salt-palette-warning-foreground-decorative: var(--salt-color-orange-700);
|
|
746
|
+
--salt-palette-warning-foreground-informative: var(--salt-color-orange-850);
|
|
727
747
|
}
|
|
728
748
|
.salt-theme[data-mode=dark] {
|
|
729
749
|
--salt-palette-warning-background: var(--salt-color-orange-900);
|
|
730
750
|
--salt-palette-warning-background-selected: var(--salt-color-orange-900);
|
|
731
751
|
--salt-palette-warning-border: var(--salt-color-orange-500);
|
|
732
|
-
--salt-palette-warning-foreground: var(--salt-color-orange-500);
|
|
752
|
+
--salt-palette-warning-foreground-decorative: var(--salt-color-orange-500);
|
|
753
|
+
--salt-palette-warning-foreground-informative: var(--salt-color-orange-400);
|
|
733
754
|
}
|
|
734
755
|
|
|
735
756
|
/* css/characteristics/accent.css */
|
|
@@ -752,6 +773,10 @@
|
|
|
752
773
|
--salt-actionable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
|
|
753
774
|
--salt-actionable-primary-background-active: var(--salt-palette-interact-primary-background-active);
|
|
754
775
|
--salt-actionable-primary-background-disabled: var(--salt-palette-interact-primary-background-disabled);
|
|
776
|
+
--salt-actionable-primary-borderColor: transparent;
|
|
777
|
+
--salt-actionable-primary-borderColor-hover: transparent;
|
|
778
|
+
--salt-actionable-primary-borderColor-active: transparent;
|
|
779
|
+
--salt-actionable-primary-borderColor-disabled: transparent;
|
|
755
780
|
--salt-actionable-cta-foreground: var(--salt-palette-interact-cta-foreground);
|
|
756
781
|
--salt-actionable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
|
|
757
782
|
--salt-actionable-cta-foreground-active: var(--salt-palette-interact-cta-foreground-active);
|
|
@@ -760,6 +785,10 @@
|
|
|
760
785
|
--salt-actionable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
|
|
761
786
|
--salt-actionable-cta-background-active: var(--salt-palette-interact-cta-background-active);
|
|
762
787
|
--salt-actionable-cta-background-disabled: var(--salt-palette-interact-cta-background-disabled);
|
|
788
|
+
--salt-actionable-cta-borderColor: transparent;
|
|
789
|
+
--salt-actionable-cta-borderColor-hover: transparent;
|
|
790
|
+
--salt-actionable-cta-borderColor-active: transparent;
|
|
791
|
+
--salt-actionable-cta-borderColor-disabled: transparent;
|
|
763
792
|
--salt-actionable-secondary-foreground: var(--salt-palette-interact-secondary-foreground);
|
|
764
793
|
--salt-actionable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
|
|
765
794
|
--salt-actionable-secondary-foreground-active: var(--salt-palette-interact-secondary-foreground-active);
|
|
@@ -768,6 +797,10 @@
|
|
|
768
797
|
--salt-actionable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
|
|
769
798
|
--salt-actionable-secondary-background-active: var(--salt-palette-interact-secondary-background-active);
|
|
770
799
|
--salt-actionable-secondary-background-disabled: var(--salt-palette-interact-secondary-background-disabled);
|
|
800
|
+
--salt-actionable-secondary-borderColor: transparent;
|
|
801
|
+
--salt-actionable-secondary-borderColor-hover: transparent;
|
|
802
|
+
--salt-actionable-secondary-borderColor-active: transparent;
|
|
803
|
+
--salt-actionable-secondary-borderColor-disabled: transparent;
|
|
771
804
|
}
|
|
772
805
|
|
|
773
806
|
/* css/characteristics/container.css */
|
|
@@ -882,6 +915,7 @@
|
|
|
882
915
|
--salt-overlayable-shadow-drag: var(--salt-shadow-400);
|
|
883
916
|
--salt-overlayable-shadow-modal: var(--salt-shadow-500);
|
|
884
917
|
--salt-overlayable-background: var(--salt-palette-neutral-backdrop);
|
|
918
|
+
--salt-overlayable-rangeSelection: var(--salt-palette-neutral-selection);
|
|
885
919
|
}
|
|
886
920
|
|
|
887
921
|
/* css/characteristics/selectable.css */
|
|
@@ -924,24 +958,28 @@
|
|
|
924
958
|
|
|
925
959
|
/* css/characteristics/status.css */
|
|
926
960
|
.salt-theme {
|
|
927
|
-
--salt-status-info-foreground: var(--salt-palette-info-foreground);
|
|
928
|
-
--salt-status-success-foreground: var(--salt-palette-success-foreground);
|
|
929
|
-
--salt-status-warning-foreground: var(--salt-palette-warning-foreground);
|
|
930
|
-
--salt-status-error-foreground: var(--salt-palette-error-foreground);
|
|
931
961
|
--salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
|
|
932
962
|
--salt-status-negative-foreground: var(--salt-palette-negative-foreground);
|
|
933
963
|
--salt-status-positive-foreground: var(--salt-palette-positive-foreground);
|
|
964
|
+
--salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
|
|
965
|
+
--salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
|
|
966
|
+
--salt-status-warning-foreground-decorative: var(--salt-palette-warning-foreground-decorative);
|
|
967
|
+
--salt-status-success-foreground-decorative: var(--salt-palette-success-foreground-decorative);
|
|
968
|
+
--salt-status-info-foreground-informative: var(--salt-palette-info-foreground-informative);
|
|
969
|
+
--salt-status-error-foreground-informative: var(--salt-palette-error-foreground-informative);
|
|
970
|
+
--salt-status-warning-foreground-informative: var(--salt-palette-warning-foreground-informative);
|
|
971
|
+
--salt-status-success-foreground-informative: var(--salt-palette-success-foreground-informative);
|
|
934
972
|
--salt-status-info-borderColor: var(--salt-palette-info-border);
|
|
935
|
-
--salt-status-success-borderColor: var(--salt-palette-success-border);
|
|
936
|
-
--salt-status-warning-borderColor: var(--salt-palette-warning-border);
|
|
937
973
|
--salt-status-error-borderColor: var(--salt-palette-error-border);
|
|
974
|
+
--salt-status-warning-borderColor: var(--salt-palette-warning-border);
|
|
975
|
+
--salt-status-success-borderColor: var(--salt-palette-success-border);
|
|
938
976
|
--salt-status-info-background: var(--salt-palette-info-background);
|
|
939
|
-
--salt-status-success-background: var(--salt-palette-success-background);
|
|
940
|
-
--salt-status-warning-background: var(--salt-palette-warning-background);
|
|
941
977
|
--salt-status-error-background: var(--salt-palette-error-background);
|
|
942
|
-
--salt-status-
|
|
943
|
-
--salt-status-
|
|
978
|
+
--salt-status-warning-background: var(--salt-palette-warning-background);
|
|
979
|
+
--salt-status-success-background: var(--salt-palette-success-background);
|
|
944
980
|
--salt-status-error-background-selected: var(--salt-palette-error-background-selected);
|
|
981
|
+
--salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
|
|
982
|
+
--salt-status-success-background-selected: var(--salt-palette-success-background-selected);
|
|
945
983
|
}
|
|
946
984
|
|
|
947
985
|
/* css/characteristics/text.css */
|
|
@@ -955,47 +993,47 @@
|
|
|
955
993
|
--salt-text-action-textTransform: uppercase;
|
|
956
994
|
--salt-text-action-textAlign: center;
|
|
957
995
|
--salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
958
|
-
--salt-text-fontFamily: var(--salt-
|
|
996
|
+
--salt-text-fontFamily: var(--salt-palette-text-fontFamily);
|
|
959
997
|
--salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
|
|
960
998
|
--salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
|
|
961
999
|
--salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
|
|
962
|
-
--salt-text-notation-fontFamily: var(--salt-
|
|
1000
|
+
--salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
|
|
963
1001
|
--salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
964
1002
|
--salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
965
1003
|
--salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
966
|
-
--salt-text-h1-fontFamily: var(--salt-
|
|
1004
|
+
--salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
967
1005
|
--salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
|
|
968
1006
|
--salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
|
|
969
1007
|
--salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
|
|
970
|
-
--salt-text-h2-fontFamily: var(--salt-
|
|
1008
|
+
--salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
971
1009
|
--salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
972
1010
|
--salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
973
1011
|
--salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
974
|
-
--salt-text-h3-fontFamily: var(--salt-
|
|
1012
|
+
--salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
975
1013
|
--salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
976
1014
|
--salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
977
1015
|
--salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
978
|
-
--salt-text-h4-fontFamily: var(--salt-
|
|
1016
|
+
--salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
979
1017
|
--salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
980
1018
|
--salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
981
1019
|
--salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
982
|
-
--salt-text-label-fontFamily: var(--salt-
|
|
1020
|
+
--salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
|
|
983
1021
|
--salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
|
|
984
1022
|
--salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
|
|
985
1023
|
--salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
|
|
986
|
-
--salt-text-display1-fontFamily: var(--salt-
|
|
1024
|
+
--salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
987
1025
|
--salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
988
1026
|
--salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
989
1027
|
--salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
990
|
-
--salt-text-display2-fontFamily: var(--salt-
|
|
1028
|
+
--salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
991
1029
|
--salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
992
1030
|
--salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
993
1031
|
--salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
994
|
-
--salt-text-display3-fontFamily: var(--salt-
|
|
1032
|
+
--salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
995
1033
|
--salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
996
1034
|
--salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
997
1035
|
--salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
998
|
-
--salt-text-code-fontFamily: var(--salt-
|
|
1036
|
+
--salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
|
|
999
1037
|
}
|
|
1000
1038
|
.salt-density-touch {
|
|
1001
1039
|
--salt-text-h1-fontSize: 42px;
|
|
@@ -1191,6 +1229,10 @@
|
|
|
1191
1229
|
--salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
|
|
1192
1230
|
--salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
|
|
1193
1231
|
--salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
|
|
1232
|
+
--salt-status-info-foreground: var(--salt-palette-info-foreground);
|
|
1233
|
+
--salt-status-error-foreground: var(--salt-palette-error-foreground);
|
|
1234
|
+
--salt-status-warning-foreground: var(--salt-palette-warning-foreground);
|
|
1235
|
+
--salt-status-success-foreground: var(--salt-palette-success-foreground);
|
|
1194
1236
|
--salt-actionable-letterSpacing: 0.6px;
|
|
1195
1237
|
--salt-actionable-textTransform: uppercase;
|
|
1196
1238
|
--salt-actionable-textAlign: center;
|
|
@@ -1291,6 +1333,8 @@
|
|
|
1291
1333
|
--salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
|
|
1292
1334
|
--salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
|
|
1293
1335
|
--salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
|
|
1336
|
+
--salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
|
|
1337
|
+
--salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
|
|
1294
1338
|
}
|
|
1295
1339
|
.salt-theme[data-mode=light] {
|
|
1296
1340
|
--salt-shadow-1-color: rgba(0, 0, 0, 0.1);
|
|
@@ -1396,14 +1440,18 @@
|
|
|
1396
1440
|
--salt-palette-neutral-tertiary-border-disabled: transparent;
|
|
1397
1441
|
--salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
|
|
1398
1442
|
--salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
|
|
1443
|
+
--salt-palette-error-foreground: var(--salt-color-red-500);
|
|
1399
1444
|
--salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
|
|
1400
1445
|
--salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
|
|
1446
|
+
--salt-palette-info-foreground: var(--salt-color-blue-500);
|
|
1401
1447
|
--salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
|
|
1402
1448
|
--salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
|
|
1403
1449
|
--salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
|
|
1404
1450
|
--salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
|
|
1451
|
+
--salt-palette-success-foreground: var(--salt-color-green-500);
|
|
1405
1452
|
--salt-palette-warning-foreground-disabled: var(--salt-color-orange-700-fade-foreground);
|
|
1406
1453
|
--salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
|
|
1454
|
+
--salt-palette-warning-foreground: var(--salt-color-orange-700);
|
|
1407
1455
|
--salt-palette-navigate-primary-background: transparent;
|
|
1408
1456
|
--salt-palette-navigate-primary-background-active: transparent;
|
|
1409
1457
|
--salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
|
|
@@ -1448,14 +1496,18 @@
|
|
|
1448
1496
|
--salt-palette-neutral-tertiary-border-disabled: transparent;
|
|
1449
1497
|
--salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
|
|
1450
1498
|
--salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
|
|
1499
|
+
--salt-palette-error-foreground: var(--salt-color-red-500);
|
|
1451
1500
|
--salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
|
|
1452
1501
|
--salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
|
|
1502
|
+
--salt-palette-info-foreground: var(--salt-color-blue-500);
|
|
1453
1503
|
--salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
|
|
1454
1504
|
--salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
|
|
1455
1505
|
--salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
|
|
1456
1506
|
--salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
|
|
1507
|
+
--salt-palette-success-foreground: var(--salt-color-green-400);
|
|
1457
1508
|
--salt-palette-warning-foreground-disabled: var(--salt-color-orange-500-fade-foreground);
|
|
1458
1509
|
--salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
|
|
1510
|
+
--salt-palette-warning-foreground: var(--salt-color-orange-500);
|
|
1459
1511
|
--salt-palette-navigate-primary-background: transparent;
|
|
1460
1512
|
--salt-palette-navigate-primary-background-active: transparent;
|
|
1461
1513
|
--salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
|