@salt-ds/theme 0.0.0-snapshot-20240910092109 → 0.0.0-snapshot-20241008123012
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-next.css +6 -4
- package/css/theme.css +19 -7
- package/index.css +19 -7
- package/package.json +1 -1
package/css/theme-next.css
CHANGED
|
@@ -566,8 +566,8 @@
|
|
|
566
566
|
--salt-palette-foreground-primary-disabled: var(--salt-color-black-40a);
|
|
567
567
|
--salt-palette-foreground-primary-alt: var(--salt-color-white);
|
|
568
568
|
--salt-palette-foreground-primary-alt-disabled: var(--salt-color-white-40a);
|
|
569
|
-
--salt-palette-foreground-secondary: var(--salt-color-gray-
|
|
570
|
-
--salt-palette-foreground-secondary-disabled: var(--salt-color-gray-
|
|
569
|
+
--salt-palette-foreground-secondary: var(--salt-color-gray-700);
|
|
570
|
+
--salt-palette-foreground-secondary-disabled: var(--salt-color-gray-700-40a);
|
|
571
571
|
--salt-palette-foreground-visited: var(--salt-color-purple-800);
|
|
572
572
|
}
|
|
573
573
|
.salt-theme.salt-theme-next[data-mode=dark] {
|
|
@@ -577,8 +577,8 @@
|
|
|
577
577
|
--salt-palette-foreground-primary-disabled: var(--salt-color-white-40a);
|
|
578
578
|
--salt-palette-foreground-primary-alt: var(--salt-color-white);
|
|
579
579
|
--salt-palette-foreground-primary-alt-disabled: var(--salt-color-white-40a);
|
|
580
|
-
--salt-palette-foreground-secondary: var(--salt-color-gray-
|
|
581
|
-
--salt-palette-foreground-secondary-disabled: var(--salt-color-gray-
|
|
580
|
+
--salt-palette-foreground-secondary: var(--salt-color-gray-300);
|
|
581
|
+
--salt-palette-foreground-secondary-disabled: var(--salt-color-gray-300-40a);
|
|
582
582
|
--salt-palette-foreground-visited: var(--salt-color-purple-200);
|
|
583
583
|
}
|
|
584
584
|
|
|
@@ -727,6 +727,7 @@
|
|
|
727
727
|
/* css/characteristics/accent-next.css */
|
|
728
728
|
.salt-theme.salt-theme-next {
|
|
729
729
|
--salt-accent-background: var(--salt-palette-accent);
|
|
730
|
+
--salt-accent-background-disabled: var(--salt-palette-accent-disabled);
|
|
730
731
|
--salt-accent-borderColor: var(--salt-palette-accent);
|
|
731
732
|
--salt-accent-foreground: var(--salt-palette-foreground-primary-alt);
|
|
732
733
|
}
|
|
@@ -1002,6 +1003,7 @@
|
|
|
1002
1003
|
/* css/characteristics/overlayable-next.css */
|
|
1003
1004
|
.salt-theme.salt-theme-next {
|
|
1004
1005
|
--salt-overlayable-background: var(--salt-palette-alpha-backdrop);
|
|
1006
|
+
--salt-overlayable-background-highlight: var(--salt-palette-alpha);
|
|
1005
1007
|
--salt-overlayable-rangeSelection: var(--salt-palette-alpha-weak);
|
|
1006
1008
|
}
|
|
1007
1009
|
|
package/css/theme.css
CHANGED
|
@@ -512,8 +512,10 @@
|
|
|
512
512
|
--salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
|
|
513
513
|
--salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
|
|
514
514
|
--salt-color-black-fade-background-selection: rgba(0, 0, 0, var(--salt-opacity-15));
|
|
515
|
+
--salt-color-black-fade-background-highlight: rgba(0, 0, 0, var(--salt-opacity-25));
|
|
515
516
|
--salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
|
|
516
517
|
--salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15));
|
|
518
|
+
--salt-color-white-fade-background-highlight: rgba(255, 255, 255, var(--salt-opacity-25));
|
|
517
519
|
}
|
|
518
520
|
|
|
519
521
|
/* css/foundations/opacity.css */
|
|
@@ -660,6 +662,7 @@
|
|
|
660
662
|
/* css/palette/accent.css */
|
|
661
663
|
.salt-theme[data-mode=light] {
|
|
662
664
|
--salt-palette-accent-background: var(--salt-color-blue-500);
|
|
665
|
+
--salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
|
|
663
666
|
--salt-palette-accent-border: var(--salt-color-blue-500);
|
|
664
667
|
--salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
|
|
665
668
|
--salt-palette-accent-foreground: var(--salt-color-white);
|
|
@@ -668,6 +671,7 @@
|
|
|
668
671
|
}
|
|
669
672
|
.salt-theme[data-mode=dark] {
|
|
670
673
|
--salt-palette-accent-background: var(--salt-color-blue-500);
|
|
674
|
+
--salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
|
|
671
675
|
--salt-palette-accent-border: var(--salt-color-blue-500);
|
|
672
676
|
--salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
|
|
673
677
|
--salt-palette-accent-foreground: var(--salt-color-white);
|
|
@@ -864,6 +868,8 @@
|
|
|
864
868
|
--salt-palette-interact-cta-foreground-active: var(--salt-color-white);
|
|
865
869
|
--salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
|
|
866
870
|
--salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
|
|
871
|
+
--salt-palette-interact-cta-border-hover: var(--salt-color-blue-500);
|
|
872
|
+
--salt-palette-interact-cta-border-active: var(--salt-color-blue-700);
|
|
867
873
|
--salt-palette-interact-primary-background: var(--salt-color-gray-60);
|
|
868
874
|
--salt-palette-interact-primary-background-active: var(--salt-color-gray-200);
|
|
869
875
|
--salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background);
|
|
@@ -909,6 +915,8 @@
|
|
|
909
915
|
--salt-palette-interact-cta-foreground-active: var(--salt-color-white);
|
|
910
916
|
--salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
|
|
911
917
|
--salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
|
|
918
|
+
--salt-palette-interact-cta-border-hover: var(--salt-color-blue-500);
|
|
919
|
+
--salt-palette-interact-cta-border-active: var(--salt-color-blue-700);
|
|
912
920
|
--salt-palette-interact-primary-background: var(--salt-color-gray-300);
|
|
913
921
|
--salt-palette-interact-primary-background-active: var(--salt-color-gray-70);
|
|
914
922
|
--salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background);
|
|
@@ -984,14 +992,15 @@
|
|
|
984
992
|
--salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-50-fade-border);
|
|
985
993
|
--salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
|
|
986
994
|
--salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
|
|
987
|
-
--salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
|
|
988
995
|
--salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
|
|
989
|
-
--salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
|
|
990
|
-
--salt-palette-neutral-selection: var(--salt-color-black-fade-background-selection);
|
|
991
996
|
--salt-palette-neutral-tertiary-background: var(--salt-color-gray-30);
|
|
992
997
|
--salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-30-fade-background);
|
|
993
998
|
--salt-palette-neutral-tertiary-border: var(--salt-color-gray-50);
|
|
994
999
|
--salt-palette-neutral-tertiary-border-disabled: var(--salt-color-gray-50-fade-background);
|
|
1000
|
+
--salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
|
|
1001
|
+
--salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
|
|
1002
|
+
--salt-palette-neutral-selection: var(--salt-color-black-fade-background-selection);
|
|
1003
|
+
--salt-palette-neutral-highlight: var(--salt-color-black-fade-background-highlight);
|
|
995
1004
|
}
|
|
996
1005
|
.salt-theme[data-mode=dark] {
|
|
997
1006
|
--salt-palette-neutral-primary-background: var(--salt-color-gray-800);
|
|
@@ -1009,14 +1018,15 @@
|
|
|
1009
1018
|
--salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-300-fade-border);
|
|
1010
1019
|
--salt-palette-neutral-secondary-foreground: var(--salt-color-gray-70);
|
|
1011
1020
|
--salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground);
|
|
1012
|
-
--salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
|
|
1013
1021
|
--salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
|
|
1014
1022
|
--salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
|
|
1015
|
-
--salt-palette-neutral-selection: var(--salt-color-white-fade-background-selection);
|
|
1016
1023
|
--salt-palette-neutral-tertiary-background: var(--salt-color-gray-500);
|
|
1017
1024
|
--salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-500-fade-background);
|
|
1018
1025
|
--salt-palette-neutral-tertiary-border: var(--salt-color-gray-300);
|
|
1019
1026
|
--salt-palette-neutral-tertiary-border-disabled: var(--salt-color-gray-300-fade-background);
|
|
1027
|
+
--salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
|
|
1028
|
+
--salt-palette-neutral-selection: var(--salt-color-white-fade-background-selection);
|
|
1029
|
+
--salt-palette-neutral-highlight: var(--salt-color-white-fade-background-highlight);
|
|
1020
1030
|
}
|
|
1021
1031
|
|
|
1022
1032
|
/* css/palette/opacity.css */
|
|
@@ -1128,6 +1138,7 @@
|
|
|
1128
1138
|
/* css/characteristics/accent.css */
|
|
1129
1139
|
.salt-theme {
|
|
1130
1140
|
--salt-accent-background: var(--salt-palette-accent-background);
|
|
1141
|
+
--salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
|
|
1131
1142
|
--salt-accent-borderColor: var(--salt-palette-accent-border);
|
|
1132
1143
|
--salt-accent-foreground: var(--salt-palette-accent-foreground);
|
|
1133
1144
|
}
|
|
@@ -1165,9 +1176,9 @@
|
|
|
1165
1176
|
--salt-actionable-accented-background-disabled: var(--salt-palette-interact-background);
|
|
1166
1177
|
--salt-actionable-accented-background-hover: var(--salt-palette-interact-cta-background-hover);
|
|
1167
1178
|
--salt-actionable-accented-background: var(--salt-palette-interact-background);
|
|
1168
|
-
--salt-actionable-accented-borderColor-active: var(--salt-palette-interact-border-
|
|
1179
|
+
--salt-actionable-accented-borderColor-active: var(--salt-palette-interact-cta-border-active);
|
|
1169
1180
|
--salt-actionable-accented-borderColor-disabled: var(--salt-palette-accent-border-disabled);
|
|
1170
|
-
--salt-actionable-accented-borderColor-hover: var(--salt-palette-interact-border-
|
|
1181
|
+
--salt-actionable-accented-borderColor-hover: var(--salt-palette-interact-cta-border-hover);
|
|
1171
1182
|
--salt-actionable-accented-borderColor: var(--salt-palette-accent-border);
|
|
1172
1183
|
--salt-actionable-accented-foreground-active: var(--salt-palette-interact-cta-foreground);
|
|
1173
1184
|
--salt-actionable-accented-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
|
|
@@ -1539,6 +1550,7 @@
|
|
|
1539
1550
|
--salt-overlayable-shadow-drag: var(--salt-shadow-400);
|
|
1540
1551
|
--salt-overlayable-shadow-modal: var(--salt-shadow-500);
|
|
1541
1552
|
--salt-overlayable-background: var(--salt-palette-neutral-backdrop);
|
|
1553
|
+
--salt-overlayable-background-highlight: var(--salt-palette-neutral-highlight);
|
|
1542
1554
|
--salt-overlayable-rangeSelection: var(--salt-palette-neutral-selection);
|
|
1543
1555
|
}
|
|
1544
1556
|
|
package/index.css
CHANGED
|
@@ -541,8 +541,10 @@
|
|
|
541
541
|
--salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
|
|
542
542
|
--salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
|
|
543
543
|
--salt-color-black-fade-background-selection: rgba(0, 0, 0, var(--salt-opacity-15));
|
|
544
|
+
--salt-color-black-fade-background-highlight: rgba(0, 0, 0, var(--salt-opacity-25));
|
|
544
545
|
--salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
|
|
545
546
|
--salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15));
|
|
547
|
+
--salt-color-white-fade-background-highlight: rgba(255, 255, 255, var(--salt-opacity-25));
|
|
546
548
|
}
|
|
547
549
|
|
|
548
550
|
/* css/foundations/opacity.css */
|
|
@@ -689,6 +691,7 @@
|
|
|
689
691
|
/* css/palette/accent.css */
|
|
690
692
|
.salt-theme[data-mode=light] {
|
|
691
693
|
--salt-palette-accent-background: var(--salt-color-blue-500);
|
|
694
|
+
--salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
|
|
692
695
|
--salt-palette-accent-border: var(--salt-color-blue-500);
|
|
693
696
|
--salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
|
|
694
697
|
--salt-palette-accent-foreground: var(--salt-color-white);
|
|
@@ -697,6 +700,7 @@
|
|
|
697
700
|
}
|
|
698
701
|
.salt-theme[data-mode=dark] {
|
|
699
702
|
--salt-palette-accent-background: var(--salt-color-blue-500);
|
|
703
|
+
--salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
|
|
700
704
|
--salt-palette-accent-border: var(--salt-color-blue-500);
|
|
701
705
|
--salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
|
|
702
706
|
--salt-palette-accent-foreground: var(--salt-color-white);
|
|
@@ -893,6 +897,8 @@
|
|
|
893
897
|
--salt-palette-interact-cta-foreground-active: var(--salt-color-white);
|
|
894
898
|
--salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
|
|
895
899
|
--salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
|
|
900
|
+
--salt-palette-interact-cta-border-hover: var(--salt-color-blue-500);
|
|
901
|
+
--salt-palette-interact-cta-border-active: var(--salt-color-blue-700);
|
|
896
902
|
--salt-palette-interact-primary-background: var(--salt-color-gray-60);
|
|
897
903
|
--salt-palette-interact-primary-background-active: var(--salt-color-gray-200);
|
|
898
904
|
--salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background);
|
|
@@ -938,6 +944,8 @@
|
|
|
938
944
|
--salt-palette-interact-cta-foreground-active: var(--salt-color-white);
|
|
939
945
|
--salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
|
|
940
946
|
--salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
|
|
947
|
+
--salt-palette-interact-cta-border-hover: var(--salt-color-blue-500);
|
|
948
|
+
--salt-palette-interact-cta-border-active: var(--salt-color-blue-700);
|
|
941
949
|
--salt-palette-interact-primary-background: var(--salt-color-gray-300);
|
|
942
950
|
--salt-palette-interact-primary-background-active: var(--salt-color-gray-70);
|
|
943
951
|
--salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background);
|
|
@@ -1013,14 +1021,15 @@
|
|
|
1013
1021
|
--salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-50-fade-border);
|
|
1014
1022
|
--salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
|
|
1015
1023
|
--salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
|
|
1016
|
-
--salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
|
|
1017
1024
|
--salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
|
|
1018
|
-
--salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
|
|
1019
|
-
--salt-palette-neutral-selection: var(--salt-color-black-fade-background-selection);
|
|
1020
1025
|
--salt-palette-neutral-tertiary-background: var(--salt-color-gray-30);
|
|
1021
1026
|
--salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-30-fade-background);
|
|
1022
1027
|
--salt-palette-neutral-tertiary-border: var(--salt-color-gray-50);
|
|
1023
1028
|
--salt-palette-neutral-tertiary-border-disabled: var(--salt-color-gray-50-fade-background);
|
|
1029
|
+
--salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
|
|
1030
|
+
--salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
|
|
1031
|
+
--salt-palette-neutral-selection: var(--salt-color-black-fade-background-selection);
|
|
1032
|
+
--salt-palette-neutral-highlight: var(--salt-color-black-fade-background-highlight);
|
|
1024
1033
|
}
|
|
1025
1034
|
.salt-theme[data-mode=dark] {
|
|
1026
1035
|
--salt-palette-neutral-primary-background: var(--salt-color-gray-800);
|
|
@@ -1038,14 +1047,15 @@
|
|
|
1038
1047
|
--salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-300-fade-border);
|
|
1039
1048
|
--salt-palette-neutral-secondary-foreground: var(--salt-color-gray-70);
|
|
1040
1049
|
--salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground);
|
|
1041
|
-
--salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
|
|
1042
1050
|
--salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
|
|
1043
1051
|
--salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
|
|
1044
|
-
--salt-palette-neutral-selection: var(--salt-color-white-fade-background-selection);
|
|
1045
1052
|
--salt-palette-neutral-tertiary-background: var(--salt-color-gray-500);
|
|
1046
1053
|
--salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-500-fade-background);
|
|
1047
1054
|
--salt-palette-neutral-tertiary-border: var(--salt-color-gray-300);
|
|
1048
1055
|
--salt-palette-neutral-tertiary-border-disabled: var(--salt-color-gray-300-fade-background);
|
|
1056
|
+
--salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
|
|
1057
|
+
--salt-palette-neutral-selection: var(--salt-color-white-fade-background-selection);
|
|
1058
|
+
--salt-palette-neutral-highlight: var(--salt-color-white-fade-background-highlight);
|
|
1049
1059
|
}
|
|
1050
1060
|
|
|
1051
1061
|
/* css/palette/opacity.css */
|
|
@@ -1157,6 +1167,7 @@
|
|
|
1157
1167
|
/* css/characteristics/accent.css */
|
|
1158
1168
|
.salt-theme {
|
|
1159
1169
|
--salt-accent-background: var(--salt-palette-accent-background);
|
|
1170
|
+
--salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
|
|
1160
1171
|
--salt-accent-borderColor: var(--salt-palette-accent-border);
|
|
1161
1172
|
--salt-accent-foreground: var(--salt-palette-accent-foreground);
|
|
1162
1173
|
}
|
|
@@ -1194,9 +1205,9 @@
|
|
|
1194
1205
|
--salt-actionable-accented-background-disabled: var(--salt-palette-interact-background);
|
|
1195
1206
|
--salt-actionable-accented-background-hover: var(--salt-palette-interact-cta-background-hover);
|
|
1196
1207
|
--salt-actionable-accented-background: var(--salt-palette-interact-background);
|
|
1197
|
-
--salt-actionable-accented-borderColor-active: var(--salt-palette-interact-border-
|
|
1208
|
+
--salt-actionable-accented-borderColor-active: var(--salt-palette-interact-cta-border-active);
|
|
1198
1209
|
--salt-actionable-accented-borderColor-disabled: var(--salt-palette-accent-border-disabled);
|
|
1199
|
-
--salt-actionable-accented-borderColor-hover: var(--salt-palette-interact-border-
|
|
1210
|
+
--salt-actionable-accented-borderColor-hover: var(--salt-palette-interact-cta-border-hover);
|
|
1200
1211
|
--salt-actionable-accented-borderColor: var(--salt-palette-accent-border);
|
|
1201
1212
|
--salt-actionable-accented-foreground-active: var(--salt-palette-interact-cta-foreground);
|
|
1202
1213
|
--salt-actionable-accented-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
|
|
@@ -1568,6 +1579,7 @@
|
|
|
1568
1579
|
--salt-overlayable-shadow-drag: var(--salt-shadow-400);
|
|
1569
1580
|
--salt-overlayable-shadow-modal: var(--salt-shadow-500);
|
|
1570
1581
|
--salt-overlayable-background: var(--salt-palette-neutral-backdrop);
|
|
1582
|
+
--salt-overlayable-background-highlight: var(--salt-palette-neutral-highlight);
|
|
1571
1583
|
--salt-overlayable-rangeSelection: var(--salt-palette-neutral-selection);
|
|
1572
1584
|
}
|
|
1573
1585
|
|