@salt-ds/theme 1.30.0 → 1.32.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/css/global.css +0 -3
  2. package/css/theme-next.css +124 -51
  3. package/css/theme.css +129 -101
  4. package/index.css +129 -104
  5. package/package.json +2 -2
package/css/global.css CHANGED
@@ -6,9 +6,6 @@
6
6
  letter-spacing: var(--salt-text-letterSpacing);
7
7
  line-height: var(--salt-text-lineHeight);
8
8
  }
9
- .salt-theme ::selection {
10
- background: var(--salt-content-foreground-highlight);
11
- }
12
9
  .salt-theme[data-mode=light] {
13
10
  color-scheme: light;
14
11
  }
package/css/theme-next.css CHANGED
@@ -46,9 +46,9 @@
46
46
  255,
47
47
  255;
48
48
  --salt-color-gray-100-rgb:
49
- 245,
50
- 247,
51
- 248;
49
+ 230,
50
+ 233,
51
+ 235;
52
52
  --salt-color-gray-200-rgb:
53
53
  211,
54
54
  213,
@@ -121,6 +121,42 @@
121
121
  0,
122
122
  23,
123
123
  54;
124
+ --salt-color-brown-100-rgb:
125
+ 243,
126
+ 238,
127
+ 232;
128
+ --salt-color-brown-200-rgb:
129
+ 237,
130
+ 229,
131
+ 216;
132
+ --salt-color-brown-300-rgb:
133
+ 215,
134
+ 186,
135
+ 157;
136
+ --salt-color-brown-400-rgb:
137
+ 184,
138
+ 138,
139
+ 103;
140
+ --salt-color-brown-500-rgb:
141
+ 153,
142
+ 108,
143
+ 72;
144
+ --salt-color-brown-600-rgb:
145
+ 125,
146
+ 83,
147
+ 47;
148
+ --salt-color-brown-700-rgb:
149
+ 103,
150
+ 63,
151
+ 27;
152
+ --salt-color-brown-800-rgb:
153
+ 66,
154
+ 36,
155
+ 7;
156
+ --salt-color-brown-900-rgb:
157
+ 46,
158
+ 25,
159
+ 5;
124
160
  --salt-color-green-100-rgb:
125
161
  234,
126
162
  245,
@@ -191,8 +227,8 @@
191
227
  66;
192
228
  --salt-color-teal-900-rgb:
193
229
  0,
194
- 27,
195
- 41;
230
+ 37,
231
+ 56;
196
232
  --salt-color-orange-100-rgb:
197
233
  255,
198
234
  236,
@@ -206,16 +242,16 @@
206
242
  160,
207
243
  106;
208
244
  --salt-color-orange-400-rgb:
209
- 232,
210
- 122,
211
- 56;
245
+ 235,
246
+ 123,
247
+ 57;
212
248
  --salt-color-orange-500-rgb:
213
249
  199,
214
250
  83,
215
251
  0;
216
252
  --salt-color-orange-600-rgb:
217
- 163,
218
- 68,
253
+ 158,
254
+ 66,
219
255
  0;
220
256
  --salt-color-orange-700-rgb:
221
257
  129,
@@ -353,6 +389,15 @@
353
389
  --salt-color-blue-700: rgb(var(--salt-color-blue-700-rgb));
354
390
  --salt-color-blue-800: rgb(var(--salt-color-blue-800-rgb));
355
391
  --salt-color-blue-900: rgb(var(--salt-color-blue-900-rgb));
392
+ --salt-color-brown-100: rgb(var(--salt-color-brown-100-rgb));
393
+ --salt-color-brown-200: rgb(var(--salt-color-brown-200-rgb));
394
+ --salt-color-brown-300: rgb(var(--salt-color-brown-300-rgb));
395
+ --salt-color-brown-400: rgb(var(--salt-color-brown-400-rgb));
396
+ --salt-color-brown-500: rgb(var(--salt-color-brown-500-rgb));
397
+ --salt-color-brown-600: rgb(var(--salt-color-brown-600-rgb));
398
+ --salt-color-brown-700: rgb(var(--salt-color-brown-700-rgb));
399
+ --salt-color-brown-800: rgb(var(--salt-color-brown-800-rgb));
400
+ --salt-color-brown-900: rgb(var(--salt-color-brown-900-rgb));
356
401
  --salt-color-green-100: rgb(var(--salt-color-green-100-rgb));
357
402
  --salt-color-green-200: rgb(var(--salt-color-green-200-rgb));
358
403
  --salt-color-green-300: rgb(var(--salt-color-green-300-rgb));
@@ -530,32 +575,34 @@
530
575
  .salt-theme.salt-theme-next[data-mode=light] {
531
576
  --salt-palette-info: var(--salt-color-blue-500);
532
577
  --salt-palette-info-strong: var(--salt-color-blue-600);
533
- --salt-palette-info-weak: var(--salt-color-blue-100);
578
+ --salt-palette-info-weakest: var(--salt-color-blue-100);
534
579
  }
535
580
  .salt-theme.salt-theme-next[data-mode=dark] {
536
581
  --salt-palette-info: var(--salt-color-blue-500);
537
582
  --salt-palette-info-strong: var(--salt-color-blue-400);
538
- --salt-palette-info-weak: var(--salt-color-blue-900);
583
+ --salt-palette-info-weakest: var(--salt-color-blue-900);
539
584
  }
540
585
 
541
586
  /* css/palette/negative-next.css */
542
587
  .salt-theme.salt-theme-next[data-mode=light] {
543
588
  --salt-palette-negative: var(--salt-color-red-500);
589
+ --salt-palette-negative-disabled: var(--salt-color-red-500-40a);
544
590
  --salt-palette-negative-strong: var(--salt-color-red-600);
545
591
  --salt-palette-negative-strong-disabled: var(--salt-color-red-600-40a);
546
- --salt-palette-negative-weak: var(--salt-color-red-100);
592
+ --salt-palette-negative-weaker: var(--salt-color-red-200);
593
+ --salt-palette-negative-weakest: var(--salt-color-red-100);
547
594
  --salt-palette-negative-action-hover: var(--salt-color-red-600);
548
595
  --salt-palette-negative-action-active: var(--salt-color-red-800);
549
- --salt-palette-negative-disabled: var(--salt-color-red-500-40a);
550
596
  }
551
597
  .salt-theme.salt-theme-next[data-mode=dark] {
552
598
  --salt-palette-negative: var(--salt-color-red-500);
599
+ --salt-palette-negative-disabled: var(--salt-color-red-500-40a);
553
600
  --salt-palette-negative-strong: var(--salt-color-red-400);
554
601
  --salt-palette-negative-strong-disabled: var(--salt-color-red-400-40a);
555
- --salt-palette-negative-weak: var(--salt-color-red-900);
602
+ --salt-palette-negative-weaker: var(--salt-color-red-800);
603
+ --salt-palette-negative-weakest: var(--salt-color-red-900);
556
604
  --salt-palette-negative-action-hover: var(--salt-color-red-600);
557
605
  --salt-palette-negative-action-active: var(--salt-color-red-800);
558
- --salt-palette-negative-disabled: var(--salt-color-red-500-40a);
559
606
  }
560
607
 
561
608
  /* css/palette/neutral-next.css */
@@ -597,21 +644,23 @@
597
644
  /* css/palette/positive-next.css */
598
645
  .salt-theme.salt-theme-next[data-mode=light] {
599
646
  --salt-palette-positive: var(--salt-color-green-500);
647
+ --salt-palette-positive-disabled: var(--salt-color-green-500-40a);
600
648
  --salt-palette-positive-strong: var(--salt-color-green-600);
601
649
  --salt-palette-positive-strong-disabled: var(--salt-color-green-600-40a);
602
- --salt-palette-positive-weak: var(--salt-color-green-100);
650
+ --salt-palette-positive-weaker: var(--salt-color-green-200);
651
+ --salt-palette-positive-weakest: var(--salt-color-green-100);
603
652
  --salt-palette-positive-action-hover: var(--salt-color-green-600);
604
653
  --salt-palette-positive-action-active: var(--salt-color-green-800);
605
- --salt-palette-positive-disabled: var(--salt-color-green-500-40a);
606
654
  }
607
655
  .salt-theme.salt-theme-next[data-mode=dark] {
608
656
  --salt-palette-positive: var(--salt-color-green-500);
657
+ --salt-palette-positive-disabled: var(--salt-color-green-500-40a);
609
658
  --salt-palette-positive-strong: var(--salt-color-green-400);
610
659
  --salt-palette-positive-strong-disabled: var(--salt-color-green-400-40a);
611
- --salt-palette-positive-weak: var(--salt-color-green-900);
660
+ --salt-palette-positive-weaker: var(--salt-color-green-800);
661
+ --salt-palette-positive-weakest: var(--salt-color-green-900);
612
662
  --salt-palette-positive-action-hover: var(--salt-color-green-600);
613
663
  --salt-palette-positive-action-active: var(--salt-color-green-800);
614
- --salt-palette-positive-disabled: var(--salt-color-green-500-40a);
615
664
  }
616
665
 
617
666
  /* css/palette/text-next.css */
@@ -660,7 +709,8 @@
660
709
  --salt-palette-warning-disabled: var(--salt-color-orange-500-40a);
661
710
  --salt-palette-warning-strong: var(--salt-color-orange-600);
662
711
  --salt-palette-warning-strong-disabled: var(--salt-color-orange-600-40a);
663
- --salt-palette-warning-weak: var(--salt-color-orange-100);
712
+ --salt-palette-warning-weaker: var(--salt-color-orange-200);
713
+ --salt-palette-warning-weakest: var(--salt-color-orange-100);
664
714
  --salt-palette-warning-action-hover: var(--salt-color-orange-600);
665
715
  --salt-palette-warning-action-active: var(--salt-color-orange-800);
666
716
  }
@@ -669,7 +719,8 @@
669
719
  --salt-palette-warning-disabled: var(--salt-color-orange-500-40a);
670
720
  --salt-palette-warning-strong: var(--salt-color-orange-400);
671
721
  --salt-palette-warning-strong-disabled: var(--salt-color-orange-400-40a);
672
- --salt-palette-warning-weak: var(--salt-color-orange-900);
722
+ --salt-palette-warning-weaker: var(--salt-color-orange-800);
723
+ --salt-palette-warning-weakest: var(--salt-color-orange-900);
673
724
  --salt-palette-warning-action-hover: var(--salt-color-orange-600);
674
725
  --salt-palette-warning-action-active: var(--salt-color-orange-800);
675
726
  }
@@ -895,16 +946,16 @@
895
946
  .salt-theme.salt-theme-next {
896
947
  --salt-container-primary-background: var(--salt-palette-background-primary);
897
948
  --salt-container-primary-background-disabled: var(--salt-palette-background-primary-disabled);
898
- --salt-container-primary-borderColor: var(--salt-palette-alpha-contrast-low);
899
- --salt-container-primary-borderColor-disabled: var(--salt-palette-alpha-contrast-lowest);
949
+ --salt-container-primary-borderColor: var(--salt-palette-alpha-contrast-medium);
950
+ --salt-container-primary-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
900
951
  --salt-container-secondary-background: var(--salt-palette-background-secondary);
901
952
  --salt-container-secondary-background-disabled: var(--salt-palette-background-secondary-disabled);
902
- --salt-container-secondary-borderColor: var(--salt-palette-alpha-contrast-low);
903
- --salt-container-secondary-borderColor-disabled: var(--salt-palette-alpha-contrast-lowest);
953
+ --salt-container-secondary-borderColor: var(--salt-palette-alpha-contrast-medium);
954
+ --salt-container-secondary-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
904
955
  --salt-container-tertiary-background: var(--salt-palette-background-tertiary);
905
956
  --salt-container-tertiary-background-disabled: var(--salt-palette-background-tertiary-disabled);
906
- --salt-container-tertiary-borderColor: var(--salt-palette-alpha-contrast-low);
907
- --salt-container-tertiary-borderColor-disabled: var(--salt-palette-alpha-contrast-lowest);
957
+ --salt-container-tertiary-borderColor: var(--salt-palette-alpha-contrast-medium);
958
+ --salt-container-tertiary-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
908
959
  }
909
960
 
910
961
  /* css/characteristics/content-next.css */
@@ -950,14 +1001,17 @@
950
1001
  /* css/characteristics/navigable-next.css */
951
1002
  .salt-theme.salt-theme-next {
952
1003
  --salt-navigable-indicator-hover: var(--salt-palette-neutral);
953
- --salt-navigable-indicator-active: var(--salt-palette-accent);
1004
+ --salt-navigable-accent-indicator-active: var(--salt-palette-accent);
1005
+ --salt-navigable-accent-background-active: var(--salt-palette-accent-weakest);
1006
+ --salt-navigable-accent-borderColor-active: var(--salt-palette-accent);
954
1007
  }
955
1008
 
956
1009
  /* css/characteristics/overlayable-next.css */
957
1010
  .salt-theme.salt-theme-next {
958
- --salt-overlayable-background: var(--salt-palette-alpha-high);
959
- --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-low);
960
- --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-lower);
1011
+ --salt-overlayable-background: var(--salt-palette-alpha-higher);
1012
+ --salt-overlayable-background-hover: var(--salt-palette-alpha-contrast-lowest);
1013
+ --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-medium);
1014
+ --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-mediumLow);
961
1015
  }
962
1016
 
963
1017
  /* css/characteristics/selectable-next.css */
@@ -967,7 +1021,7 @@
967
1021
  --salt-selectable-borderColor-selected: var(--salt-palette-accent);
968
1022
  --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-accent-disabled);
969
1023
  --salt-selectable-borderColor-disabled: var(--salt-palette-neutral-disabled);
970
- --salt-selectable-borderColor-readonly: var(--salt-palette-neutral-readonly);
1024
+ --salt-selectable-borderColor-readonly: var(--salt-palette-neutral);
971
1025
  --salt-selectable-foreground: var(--salt-palette-neutral-strong);
972
1026
  --salt-selectable-foreground-disabled: var(--salt-palette-neutral-strong-disabled);
973
1027
  --salt-selectable-foreground-hover: var(--salt-palette-accent-weak);
@@ -976,17 +1030,25 @@
976
1030
  --salt-selectable-background: var(--salt-palette-alpha-none);
977
1031
  --salt-selectable-background-hover: var(--salt-palette-accent-weakest);
978
1032
  --salt-selectable-background-selected: var(--salt-palette-accent-weaker);
979
- --salt-selectable-background-blurSelected: var(--salt-palette-neutral-weakest);
980
1033
  --salt-selectable-background-disabled: var(--salt-palette-alpha-none);
981
1034
  --salt-selectable-background-selectedDisabled: var(--salt-palette-accent-weaker-disabled);
982
1035
  }
983
1036
 
1037
+ /* css/characteristics/sentiment-next.css */
1038
+ .salt-theme-next.salt-theme {
1039
+ --salt-sentiment-negative-foreground-informative: var(--salt-palette-negative-strong);
1040
+ --salt-sentiment-positive-foreground-informative: var(--salt-palette-positive-strong);
1041
+ --salt-sentiment-negative-foreground-decorative: var(--salt-palette-negative);
1042
+ --salt-sentiment-positive-foreground-decorative: var(--salt-palette-positive);
1043
+ --salt-sentiment-neutral-track: var(--salt-palette-alpha-contrast-high);
1044
+ --salt-sentiment-neutral-track-disabled: var(--salt-palette-alpha-contrast-lower);
1045
+ }
1046
+
984
1047
  /* css/characteristics/separable-next.css */
985
1048
  .salt-theme.salt-theme-next {
986
- --salt-separable-borderStyle: solid;
987
- --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumLow);
988
- --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-low);
989
- --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-contrast-lower);
1049
+ --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumHigh);
1050
+ --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-medium);
1051
+ --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-contrast-mediumLow);
990
1052
  --salt-separable-foreground: var(--salt-palette-foreground-primary);
991
1053
  --salt-separable-foreground-hover: var(--salt-palette-foreground-primary);
992
1054
  --salt-separable-foreground-active: var(--salt-palette-foreground-primary-alt);
@@ -997,9 +1059,6 @@
997
1059
 
998
1060
  /* css/characteristics/status-next.css */
999
1061
  .salt-theme.salt-theme-next {
1000
- --salt-status-static-foreground: var(--salt-palette-foreground-secondary);
1001
- --salt-status-negative-foreground: var(--salt-palette-negative);
1002
- --salt-status-positive-foreground: var(--salt-palette-positive);
1003
1062
  --salt-status-info-foreground-decorative: var(--salt-palette-info);
1004
1063
  --salt-status-success-foreground-decorative: var(--salt-palette-positive);
1005
1064
  --salt-status-warning-foreground-decorative: var(--salt-palette-warning);
@@ -1012,17 +1071,17 @@
1012
1071
  --salt-status-success-borderColor: var(--salt-palette-positive);
1013
1072
  --salt-status-warning-borderColor: var(--salt-palette-warning);
1014
1073
  --salt-status-error-borderColor: var(--salt-palette-negative);
1015
- --salt-status-info-background: var(--salt-palette-info-weak);
1016
- --salt-status-success-background: var(--salt-palette-positive-weak);
1017
- --salt-status-warning-background: var(--salt-palette-warning-weak);
1018
- --salt-status-error-background: var(--salt-palette-negative-weak);
1074
+ --salt-status-info-background: var(--salt-palette-info-weakest);
1075
+ --salt-status-success-background: var(--salt-palette-positive-weakest);
1076
+ --salt-status-warning-background: var(--salt-palette-warning-weakest);
1077
+ --salt-status-error-background: var(--salt-palette-negative-weakest);
1019
1078
  --salt-status-info-bold-background: var(--salt-palette-info);
1020
1079
  --salt-status-error-bold-background: var(--salt-palette-negative);
1021
1080
  --salt-status-warning-bold-background: var(--salt-palette-warning);
1022
1081
  --salt-status-success-bold-background: var(--salt-palette-positive);
1023
- --salt-status-success-background-selected: var(--salt-palette-positive-weak);
1024
- --salt-status-warning-background-selected: var(--salt-palette-warning-weak);
1025
- --salt-status-error-background-selected: var(--salt-palette-negative-weak);
1082
+ --salt-status-success-background-selected: var(--salt-palette-positive-weaker);
1083
+ --salt-status-warning-background-selected: var(--salt-palette-warning-weaker);
1084
+ --salt-status-error-background-selected: var(--salt-palette-negative-weaker);
1026
1085
  }
1027
1086
 
1028
1087
  /* css/characteristics/target-next.css */
@@ -1073,10 +1132,16 @@
1073
1132
  --salt-text-display4-lineHeight: 32px;
1074
1133
  }
1075
1134
 
1076
- /* css/characteristics/track-next.css */
1135
+ /* css/deprecated/characteristics-next.css */
1077
1136
  .salt-theme.salt-theme-next {
1078
- --salt-track-borderColor: var(--salt-palette-alpha-contrast-medium);
1079
- --salt-track-borderColor-disabled: var(--salt-palette-alpha-contrast-lowest);
1137
+ --salt-navigable-indicator-active: var(--salt-palette-accent);
1138
+ --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
1139
+ --salt-selectable-background-blurSelected: var(--salt-palette-neutral-weakest);
1140
+ --salt-status-static-foreground: var(--salt-palette-foreground-secondary);
1141
+ --salt-status-negative-foreground: var(--salt-palette-negative);
1142
+ --salt-status-positive-foreground: var(--salt-palette-positive);
1143
+ --salt-track-borderColor: var(--salt-palette-alpha-contrast-high);
1144
+ --salt-track-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
1080
1145
  }
1081
1146
 
1082
1147
  /* css/deprecated/foundations-next.css */
@@ -1089,10 +1154,18 @@
1089
1154
  .salt-theme[data-mode=light] {
1090
1155
  --salt-palette-foreground-active: var(--salt-color-blue-700);
1091
1156
  --salt-palette-foreground-hover: var(--salt-color-blue-600);
1157
+ --salt-palette-warning-weak: var(--salt-color-orange-100);
1158
+ --salt-palette-positive-weak: var(--salt-color-green-100);
1159
+ --salt-palette-info-weak: var(--salt-color-blue-100);
1160
+ --salt-palette-negative-weak: var(--salt-color-red-100);
1092
1161
  }
1093
1162
  .salt-theme[data-mode=dark] {
1094
1163
  --salt-palette-foreground-active: var(--salt-color-blue-300);
1095
1164
  --salt-palette-foreground-hover: var(--salt-color-blue-400);
1165
+ --salt-palette-warning-weak: var(--salt-color-orange-900);
1166
+ --salt-palette-positive-weak: var(--salt-color-green-900);
1167
+ --salt-palette-info-weak: var(--salt-color-blue-900);
1168
+ --salt-palette-negative-weak: var(--salt-color-red-900);
1096
1169
  }
1097
1170
 
1098
1171
  /* css/theme-next.css */