@salt-ds/theme 1.30.0 → 1.31.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 (4) hide show
  1. package/css/theme-next.css +89 -31
  2. package/css/theme.css +116 -94
  3. package/index.css +116 -94
  4. package/package.json +1 -1
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));
@@ -895,16 +940,16 @@
895
940
  .salt-theme.salt-theme-next {
896
941
  --salt-container-primary-background: var(--salt-palette-background-primary);
897
942
  --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);
943
+ --salt-container-primary-borderColor: var(--salt-palette-alpha-contrast-medium);
944
+ --salt-container-primary-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
900
945
  --salt-container-secondary-background: var(--salt-palette-background-secondary);
901
946
  --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);
947
+ --salt-container-secondary-borderColor: var(--salt-palette-alpha-contrast-medium);
948
+ --salt-container-secondary-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
904
949
  --salt-container-tertiary-background: var(--salt-palette-background-tertiary);
905
950
  --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);
951
+ --salt-container-tertiary-borderColor: var(--salt-palette-alpha-contrast-medium);
952
+ --salt-container-tertiary-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
908
953
  }
909
954
 
910
955
  /* css/characteristics/content-next.css */
@@ -950,14 +995,17 @@
950
995
  /* css/characteristics/navigable-next.css */
951
996
  .salt-theme.salt-theme-next {
952
997
  --salt-navigable-indicator-hover: var(--salt-palette-neutral);
953
- --salt-navigable-indicator-active: var(--salt-palette-accent);
998
+ --salt-navigable-accent-indicator-active: var(--salt-palette-accent);
999
+ --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
1000
+ --salt-navigable-accent-background-active: var(--salt-palette-accent-weakest);
1001
+ --salt-navigable-accent-borderColor-active: var(--salt-palette-accent);
954
1002
  }
955
1003
 
956
1004
  /* css/characteristics/overlayable-next.css */
957
1005
  .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);
1006
+ --salt-overlayable-background: var(--salt-palette-alpha-higher);
1007
+ --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-medium);
1008
+ --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-mediumLow);
961
1009
  }
962
1010
 
963
1011
  /* css/characteristics/selectable-next.css */
@@ -976,17 +1024,25 @@
976
1024
  --salt-selectable-background: var(--salt-palette-alpha-none);
977
1025
  --salt-selectable-background-hover: var(--salt-palette-accent-weakest);
978
1026
  --salt-selectable-background-selected: var(--salt-palette-accent-weaker);
979
- --salt-selectable-background-blurSelected: var(--salt-palette-neutral-weakest);
980
1027
  --salt-selectable-background-disabled: var(--salt-palette-alpha-none);
981
1028
  --salt-selectable-background-selectedDisabled: var(--salt-palette-accent-weaker-disabled);
982
1029
  }
983
1030
 
1031
+ /* css/characteristics/sentiment-next.css */
1032
+ .salt-theme-next.salt-theme {
1033
+ --salt-sentiment-negative-foreground-informative: var(--salt-palette-negative-strong);
1034
+ --salt-sentiment-positive-foreground-informative: var(--salt-palette-positive-strong);
1035
+ --salt-sentiment-negative-foreground-decorative: var(--salt-palette-negative);
1036
+ --salt-sentiment-positive-foreground-decorative: var(--salt-palette-positive);
1037
+ --salt-sentiment-neutral-track: var(--salt-palette-alpha-contrast-high);
1038
+ --salt-sentiment-neutral-track-disabled: var(--salt-palette-alpha-contrast-lower);
1039
+ }
1040
+
984
1041
  /* css/characteristics/separable-next.css */
985
1042
  .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);
1043
+ --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumHigh);
1044
+ --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-medium);
1045
+ --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-contrast-mediumLow);
990
1046
  --salt-separable-foreground: var(--salt-palette-foreground-primary);
991
1047
  --salt-separable-foreground-hover: var(--salt-palette-foreground-primary);
992
1048
  --salt-separable-foreground-active: var(--salt-palette-foreground-primary-alt);
@@ -997,9 +1053,6 @@
997
1053
 
998
1054
  /* css/characteristics/status-next.css */
999
1055
  .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
1056
  --salt-status-info-foreground-decorative: var(--salt-palette-info);
1004
1057
  --salt-status-success-foreground-decorative: var(--salt-palette-positive);
1005
1058
  --salt-status-warning-foreground-decorative: var(--salt-palette-warning);
@@ -1073,10 +1126,15 @@
1073
1126
  --salt-text-display4-lineHeight: 32px;
1074
1127
  }
1075
1128
 
1076
- /* css/characteristics/track-next.css */
1129
+ /* css/deprecated/characteristics-next.css */
1077
1130
  .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);
1131
+ --salt-navigable-indicator-active: var(--salt-palette-accent);
1132
+ --salt-selectable-background-blurSelected: var(--salt-palette-neutral-weakest);
1133
+ --salt-status-static-foreground: var(--salt-palette-foreground-secondary);
1134
+ --salt-status-negative-foreground: var(--salt-palette-negative);
1135
+ --salt-status-positive-foreground: var(--salt-palette-positive);
1136
+ --salt-track-borderColor: var(--salt-palette-alpha-contrast-high);
1137
+ --salt-track-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
1080
1138
  }
1081
1139
 
1082
1140
  /* css/deprecated/foundations-next.css */
package/css/theme.css CHANGED
@@ -1,23 +1,23 @@
1
1
  /* css/foundations/alpha.css */
2
2
  .salt-theme {
3
+ --salt-color-white-5a: rgba(var(--salt-color-white-rgb), 0.05);
3
4
  --salt-color-white-10a: rgba(var(--salt-color-white-rgb), 0.1);
5
+ --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
4
6
  --salt-color-white-20a: rgba(var(--salt-color-white-rgb), 0.2);
5
7
  --salt-color-white-30a: rgba(var(--salt-color-white-rgb), 0.3);
6
8
  --salt-color-white-40a: rgba(var(--salt-color-white-rgb), 0.4);
7
9
  --salt-color-white-50a: rgba(var(--salt-color-white-rgb), 0.5);
8
- --salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
9
- --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
10
+ --salt-color-white-65a: rgba(var(--salt-color-white-rgb), 0.65);
10
11
  --salt-color-white-80a: rgba(var(--salt-color-white-rgb), 0.8);
11
- --salt-color-white-90a: rgba(var(--salt-color-white-rgb), 0.9);
12
+ --salt-color-black-5a: rgba(var(--salt-color-black-rgb), 0.05);
12
13
  --salt-color-black-10a: rgba(var(--salt-color-black-rgb), 0.1);
14
+ --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
13
15
  --salt-color-black-20a: rgba(var(--salt-color-black-rgb), 0.2);
14
16
  --salt-color-black-30a: rgba(var(--salt-color-black-rgb), 0.3);
15
17
  --salt-color-black-40a: rgba(var(--salt-color-black-rgb), 0.4);
16
18
  --salt-color-black-50a: rgba(var(--salt-color-black-rgb), 0.5);
17
- --salt-color-black-60a: rgba(var(--salt-color-black-rgb), 0.6);
18
- --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
19
+ --salt-color-black-65a: rgba(var(--salt-color-black-rgb), 0.65);
19
20
  --salt-color-black-80a: rgba(var(--salt-color-black-rgb), 0.8);
20
- --salt-color-black-90a: rgba(var(--salt-color-black-rgb), 0.9);
21
21
  --salt-color-blue-30-40a: rgba(var(--salt-color-blue-30-rgb), 0.4);
22
22
  --salt-color-blue-100-40a: rgba(var(--salt-color-blue-100-rgb), 0.4);
23
23
  --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
@@ -195,6 +195,13 @@
195
195
  }
196
196
  }
197
197
 
198
+ /* css/foundations/borderStyle.css */
199
+ .salt-theme {
200
+ --salt-borderStyle-solid: solid;
201
+ --salt-borderStyle-dashed: dashed;
202
+ --salt-borderStyle-dotted: dotted;
203
+ }
204
+
198
205
  /* css/foundations/color.css */
199
206
  .salt-theme {
200
207
  --salt-color-white-rgb:
@@ -1120,45 +1127,45 @@
1120
1127
 
1121
1128
  /* css/palette/alpha.css */
1122
1129
  .salt-theme[data-mode=light] {
1123
- --salt-palette-alpha-highest: var(--salt-color-white-90a);
1124
- --salt-palette-alpha-higher: var(--salt-color-white-80a);
1125
- --salt-palette-alpha-high: var(--salt-color-white-70a);
1126
- --salt-palette-alpha-mediumHigh: var(--salt-color-white-60a);
1127
- --salt-palette-alpha-medium: var(--salt-color-white-50a);
1128
- --salt-palette-alpha-mediumLow: var(--salt-color-white-40a);
1129
- --salt-palette-alpha-low: var(--salt-color-white-30a);
1130
- --salt-palette-alpha-lower: var(--salt-color-white-20a);
1131
- --salt-palette-alpha-lowest: var(--salt-color-white-10a);
1132
- --salt-palette-alpha-contrast-highest: var(--salt-color-black-90a);
1133
- --salt-palette-alpha-contrast-higher: var(--salt-color-black-80a);
1134
- --salt-palette-alpha-contrast-high: var(--salt-color-black-70a);
1135
- --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-black-60a);
1136
- --salt-palette-alpha-contrast-medium: var(--salt-color-black-50a);
1137
- --salt-palette-alpha-contrast-mediumLow: var(--salt-color-black-40a);
1138
- --salt-palette-alpha-contrast-low: var(--salt-color-black-30a);
1139
- --salt-palette-alpha-contrast-lower: var(--salt-color-black-20a);
1140
- --salt-palette-alpha-contrast-lowest: var(--salt-color-black-10a);
1130
+ --salt-palette-alpha-highest: var(--salt-color-white-80a);
1131
+ --salt-palette-alpha-higher: var(--salt-color-white-65a);
1132
+ --salt-palette-alpha-high: var(--salt-color-white-50a);
1133
+ --salt-palette-alpha-mediumHigh: var(--salt-color-white-40a);
1134
+ --salt-palette-alpha-medium: var(--salt-color-white-30a);
1135
+ --salt-palette-alpha-mediumLow: var(--salt-color-white-20a);
1136
+ --salt-palette-alpha-low: var(--salt-color-white-15a);
1137
+ --salt-palette-alpha-lower: var(--salt-color-white-10a);
1138
+ --salt-palette-alpha-lowest: var(--salt-color-white-5a);
1139
+ --salt-palette-alpha-contrast-highest: var(--salt-color-black-80a);
1140
+ --salt-palette-alpha-contrast-higher: var(--salt-color-black-65a);
1141
+ --salt-palette-alpha-contrast-high: var(--salt-color-black-50a);
1142
+ --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-black-40a);
1143
+ --salt-palette-alpha-contrast-medium: var(--salt-color-black-30a);
1144
+ --salt-palette-alpha-contrast-mediumLow: var(--salt-color-black-20a);
1145
+ --salt-palette-alpha-contrast-low: var(--salt-color-black-15a);
1146
+ --salt-palette-alpha-contrast-lower: var(--salt-color-black-10a);
1147
+ --salt-palette-alpha-contrast-lowest: var(--salt-color-black-5a);
1141
1148
  --salt-palette-alpha-none: transparent;
1142
1149
  }
1143
1150
  .salt-theme[data-mode=dark] {
1144
- --salt-palette-alpha-highest: var(--salt-color-black-90a);
1145
- --salt-palette-alpha-higher: var(--salt-color-black-80a);
1146
- --salt-palette-alpha-high: var(--salt-color-black-70a);
1147
- --salt-palette-alpha-mediumHigh: var(--salt-color-black-60a);
1148
- --salt-palette-alpha-medium: var(--salt-color-black-50a);
1149
- --salt-palette-alpha-mediumLow: var(--salt-color-black-40a);
1150
- --salt-palette-alpha-low: var(--salt-color-black-30a);
1151
- --salt-palette-alpha-lower: var(--salt-color-black-20a);
1152
- --salt-palette-alpha-lowest: var(--salt-color-black-10a);
1153
- --salt-palette-alpha-contrast-highest: var(--salt-color-white-90a);
1154
- --salt-palette-alpha-contrast-higher: var(--salt-color-white-80a);
1155
- --salt-palette-alpha-contrast-high: var(--salt-color-white-70a);
1156
- --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-white-60a);
1157
- --salt-palette-alpha-contrast-medium: var(--salt-color-white-50a);
1158
- --salt-palette-alpha-contrast-mediumLow: var(--salt-color-white-40a);
1159
- --salt-palette-alpha-contrast-low: var(--salt-color-white-30a);
1160
- --salt-palette-alpha-contrast-lower: var(--salt-color-white-20a);
1161
- --salt-palette-alpha-contrast-lowest: var(--salt-color-white-10a);
1151
+ --salt-palette-alpha-highest: var(--salt-color-black-80a);
1152
+ --salt-palette-alpha-higher: var(--salt-color-black-65a);
1153
+ --salt-palette-alpha-high: var(--salt-color-black-50a);
1154
+ --salt-palette-alpha-mediumHigh: var(--salt-color-black-40a);
1155
+ --salt-palette-alpha-medium: var(--salt-color-black-30a);
1156
+ --salt-palette-alpha-mediumLow: var(--salt-color-black-20a);
1157
+ --salt-palette-alpha-low: var(--salt-color-black-15a);
1158
+ --salt-palette-alpha-lower: var(--salt-color-black-10a);
1159
+ --salt-palette-alpha-lowest: var(--salt-color-black-5a);
1160
+ --salt-palette-alpha-contrast-highest: var(--salt-color-white-80a);
1161
+ --salt-palette-alpha-contrast-higher: var(--salt-color-white-65a);
1162
+ --salt-palette-alpha-contrast-high: var(--salt-color-white-50a);
1163
+ --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-white-40a);
1164
+ --salt-palette-alpha-contrast-medium: var(--salt-color-white-30a);
1165
+ --salt-palette-alpha-contrast-mediumLow: var(--salt-color-white-20a);
1166
+ --salt-palette-alpha-contrast-low: var(--salt-color-white-15a);
1167
+ --salt-palette-alpha-contrast-lower: var(--salt-color-white-10a);
1168
+ --salt-palette-alpha-contrast-lowest: var(--salt-color-white-5a);
1162
1169
  --salt-palette-alpha-none: transparent;
1163
1170
  }
1164
1171
 
@@ -1350,7 +1357,6 @@
1350
1357
 
1351
1358
  /* css/palette/interact.css */
1352
1359
  .salt-theme[data-mode=light] {
1353
- --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
1354
1360
  --salt-palette-interact-background-hover: var(--salt-color-blue-10);
1355
1361
  --salt-palette-interact-background-active: var(--salt-color-blue-30);
1356
1362
  --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-40a);
@@ -1391,7 +1397,6 @@
1391
1397
  }
1392
1398
  .salt-theme[data-mode=dark] {
1393
1399
  --salt-palette-interact-background-active: var(--salt-color-blue-700);
1394
- --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
1395
1400
  --salt-palette-interact-background-hover: var(--salt-color-blue-800);
1396
1401
  --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-700-40a);
1397
1402
  --salt-palette-interact-border: var(--salt-color-gray-90);
@@ -1890,7 +1895,6 @@
1890
1895
 
1891
1896
  /* css/characteristics/container.css */
1892
1897
  .salt-theme {
1893
- --salt-container-borderStyle: solid;
1894
1898
  --salt-container-primary-background: var(--salt-palette-neutral-primary-background);
1895
1899
  --salt-container-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
1896
1900
  --salt-container-primary-borderColor: var(--salt-palette-neutral-border);
@@ -1903,26 +1907,18 @@
1903
1907
  --salt-container-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
1904
1908
  --salt-container-tertiary-borderColor: var(--salt-palette-neutral-border);
1905
1909
  --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
1906
- --salt-container-ghost-background: var(--salt-palette-alpha-low);
1907
- --salt-container-ghost-borderColor: var(--salt-palette-alpha-contrast-low);
1910
+ --salt-container-ghost-background: var(--salt-palette-alpha-medium);
1911
+ --salt-container-ghost-borderColor: var(--salt-palette-alpha-contrast-medium);
1908
1912
  }
1909
1913
 
1910
1914
  /* css/characteristics/target.css */
1911
1915
  .salt-theme {
1912
1916
  --salt-target-background-hover: var(--salt-palette-interact-background-hover);
1913
1917
  --salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);
1914
- --salt-target-borderStyle: dashed;
1915
- --salt-target-borderStyle-hover: solid;
1916
- --salt-target-borderStyle-disabled: dashed;
1917
1918
  }
1918
1919
 
1919
1920
  /* css/characteristics/editable.css */
1920
1921
  .salt-theme {
1921
- --salt-editable-borderStyle: solid;
1922
- --salt-editable-borderStyle-hover: solid;
1923
- --salt-editable-borderStyle-active: solid;
1924
- --salt-editable-borderStyle-disabled: solid;
1925
- --salt-editable-borderStyle-readonly: solid;
1926
1922
  --salt-editable-borderColor: var(--salt-palette-interact-border);
1927
1923
  --salt-editable-borderColor-active: var(--salt-palette-interact-border-active);
1928
1924
  --salt-editable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
@@ -1944,8 +1940,8 @@
1944
1940
  /* css/characteristics/focused.css */
1945
1941
  .salt-theme {
1946
1942
  --salt-focused-outlineColor: var(--salt-palette-interact-outline);
1947
- --salt-focused-outlineStyle: dotted;
1948
- --salt-focused-outlineWidth: 2px;
1943
+ --salt-focused-outlineStyle: var(--salt-borderStyle-dotted);
1944
+ --salt-focused-outlineWidth: var(--salt-size-fixed-200);
1949
1945
  --salt-focused-outlineInset: 0;
1950
1946
  --salt-focused-outlineOffset: 0;
1951
1947
  --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
@@ -1964,12 +1960,11 @@
1964
1960
 
1965
1961
  /* css/characteristics/navigable.css */
1966
1962
  .salt-theme {
1967
- --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
1968
- --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
1969
- --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
1970
- --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
1971
1963
  --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
1972
- --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
1964
+ --salt-navigable-accent-indicator-active: var(--salt-palette-navigate-indicator-active);
1965
+ --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
1966
+ --salt-navigable-accent-background-active: var(--salt-palette-alpha-none);
1967
+ --salt-navigable-accent-borderColor-active: var(--salt-palette-interact-border-active);
1973
1968
  }
1974
1969
 
1975
1970
  /* css/characteristics/overlayable.css */
@@ -1981,17 +1976,13 @@
1981
1976
  --salt-overlayable-shadow-popout: var(--salt-shadow-400);
1982
1977
  --salt-overlayable-shadow-drag: var(--salt-shadow-400);
1983
1978
  --salt-overlayable-shadow-modal: var(--salt-shadow-500);
1984
- --salt-overlayable-background: var(--salt-palette-alpha-high);
1985
- --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-low);
1986
- --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-lower);
1979
+ --salt-overlayable-background: var(--salt-palette-alpha-higher);
1980
+ --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-medium);
1981
+ --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-mediumLow);
1987
1982
  }
1988
1983
 
1989
1984
  /* css/characteristics/selectable.css */
1990
1985
  .salt-theme {
1991
- --salt-selectable-borderStyle: solid;
1992
- --salt-selectable-borderStyle-hover: solid;
1993
- --salt-selectable-borderStyle-selected: solid;
1994
- --salt-selectable-borderStyle-blurSelected: solid;
1995
1986
  --salt-selectable-borderColor: var(--salt-palette-interact-border);
1996
1987
  --salt-selectable-borderColor-hover: var(--salt-palette-interact-border-hover);
1997
1988
  --salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
@@ -2006,30 +1997,35 @@
2006
1997
  --salt-selectable-background: var(--salt-palette-alpha-none);
2007
1998
  --salt-selectable-background-hover: var(--salt-palette-interact-background-hover);
2008
1999
  --salt-selectable-background-selected: var(--salt-palette-interact-background-active);
2009
- --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
2010
2000
  --salt-selectable-background-disabled: var(--salt-palette-alpha-none);
2011
2001
  --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
2012
2002
  }
2013
2003
 
2004
+ /* css/characteristics/sentiment.css */
2005
+ .salt-theme {
2006
+ --salt-sentiment-negative-foreground-informative: var(--salt-palette-negative-foreground);
2007
+ --salt-sentiment-positive-foreground-informative: var(--salt-palette-positive-foreground);
2008
+ --salt-sentiment-negative-foreground-decorative: var(--salt-palette-negative-foreground);
2009
+ --salt-sentiment-positive-foreground-decorative: var(--salt-palette-positive-foreground);
2010
+ --salt-sentiment-neutral-track: var(--salt-palette-neutral-border);
2011
+ --salt-sentiment-neutral-track-disabled: var(--salt-palette-neutral-border-disabled);
2012
+ }
2013
+
2014
2014
  /* css/characteristics/separable.css */
2015
2015
  .salt-theme {
2016
- --salt-separable-borderStyle: solid;
2017
- --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumLow);
2018
- --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-low);
2019
- --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-contrast-lower);
2016
+ --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumHigh);
2017
+ --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-medium);
2018
+ --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-contrast-mediumLow);
2020
2019
  --salt-separable-foreground: var(--salt-palette-neutral-primary-foreground);
2021
2020
  --salt-separable-foreground-hover: var(--salt-palette-neutral-primary-foreground);
2022
2021
  --salt-separable-foreground-active: var(--salt-palette-interact-cta-foreground);
2023
2022
  --salt-separable-background: var(--salt-palette-alpha-none);
2024
- --salt-separable-background-hover: var(--salt-palette-alpha-weak);
2023
+ --salt-separable-background-hover: var(--salt-palette-alpha-contrast-mediumLow);
2025
2024
  --salt-separable-background-active: var(--salt-palette-accent);
2026
2025
  }
2027
2026
 
2028
2027
  /* css/characteristics/status.css */
2029
2028
  .salt-theme {
2030
- --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
2031
- --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
2032
- --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
2033
2029
  --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
2034
2030
  --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
2035
2031
  --salt-status-warning-foreground-decorative: var(--salt-palette-warning-foreground-decorative);
@@ -2230,20 +2226,16 @@
2230
2226
  --salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
2231
2227
  }
2232
2228
 
2233
- /* css/characteristics/track.css */
2234
- .salt-theme {
2235
- --salt-track-borderStyle: solid;
2236
- --salt-track-borderStyle-active: solid;
2237
- --salt-track-borderStyle-complete: solid;
2238
- --salt-track-borderStyle-incomplete: dotted;
2239
- --salt-track-borderColor: var(--salt-palette-neutral-border);
2240
- --salt-track-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
2241
- }
2242
-
2243
2229
  /* css/deprecated/characteristics.css */
2244
2230
  .salt-theme {
2231
+ --salt-container-borderStyle: solid;
2245
2232
  --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
2246
2233
  --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
2234
+ --salt-editable-borderStyle: solid;
2235
+ --salt-editable-borderStyle-hover: solid;
2236
+ --salt-editable-borderStyle-active: solid;
2237
+ --salt-editable-borderStyle-disabled: solid;
2238
+ --salt-editable-borderStyle-readonly: solid;
2247
2239
  --salt-editable-cursor-hover: text;
2248
2240
  --salt-editable-cursor-active: text;
2249
2241
  --salt-editable-cursor-disabled: not-allowed;
@@ -2279,6 +2271,10 @@
2279
2271
  --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
2280
2272
  --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
2281
2273
  --salt-overlayable-rangeSelection: var(--salt-overlayable-background-rangeSelection);
2274
+ --salt-selectable-borderStyle: solid;
2275
+ --salt-selectable-borderStyle-hover: solid;
2276
+ --salt-selectable-borderStyle-selected: solid;
2277
+ --salt-selectable-borderStyle-blurSelected: solid;
2282
2278
  --salt-selectable-cursor-hover: pointer;
2283
2279
  --salt-selectable-cursor-selected: pointer;
2284
2280
  --salt-selectable-cursor-blurSelected: pointer;
@@ -2286,6 +2282,7 @@
2286
2282
  --salt-selectable-cursor-readonly: not-allowed;
2287
2283
  --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
2288
2284
  --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
2285
+ --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
2289
2286
  --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
2290
2287
  --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
2291
2288
  --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
@@ -2316,6 +2313,9 @@
2316
2313
  --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
2317
2314
  --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
2318
2315
  --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
2316
+ --salt-separable-borderStyle: solid;
2317
+ --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
2318
+ --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
2319
2319
  --salt-status-info-background-emphasize: var(--salt-status-info-background);
2320
2320
  --salt-status-success-background-emphasize: var(--salt-status-success-background);
2321
2321
  --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
@@ -2324,6 +2324,7 @@
2324
2324
  --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
2325
2325
  --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
2326
2326
  --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
2327
+ --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
2327
2328
  --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
2328
2329
  --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
2329
2330
  --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
@@ -2351,6 +2352,9 @@
2351
2352
  --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
2352
2353
  --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
2353
2354
  --salt-target-cursor-disabled: not-allowed;
2355
+ --salt-target-borderStyle: dashed;
2356
+ --salt-target-borderStyle-hover: solid;
2357
+ --salt-target-borderStyle-disabled: dashed;
2354
2358
  --salt-text-background-selected: var(--salt-content-foreground-highlight);
2355
2359
  --salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover);
2356
2360
  --salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active);
@@ -2377,13 +2381,21 @@
2377
2381
  --salt-navigable-tertiary-background: var(--salt-palette-navigate-tertiary-background);
2378
2382
  --salt-navigable-tertiary-background-hover: var(--salt-palette-navigate-tertiary-background-hover);
2379
2383
  --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
2384
+ --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
2380
2385
  --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
2381
- --salt-navigable-background-hover: var(--salt-palette-navigate-background-hover);
2382
2386
  --salt-navigable-textDecoration: var(--salt-typography-textDecoration-underline);
2383
2387
  --salt-navigable-textDecoration-hover: var(--salt-typography-textDecoration-none);
2384
2388
  --salt-navigable-textDecoration-selected: var(--salt-typography-textDecoration-underline);
2389
+ --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
2390
+ --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
2391
+ --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
2392
+ --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
2385
2393
  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
2386
2394
  --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
2395
+ --salt-track-borderStyle: solid;
2396
+ --salt-track-borderStyle-active: solid;
2397
+ --salt-track-borderStyle-complete: solid;
2398
+ --salt-track-borderStyle-incomplete: dotted;
2387
2399
  --salt-track-borderWidth: 2px;
2388
2400
  --salt-track-borderWidth-active: 2px;
2389
2401
  --salt-track-borderWidth-complete: 2px;
@@ -2392,6 +2404,8 @@
2392
2404
  --salt-track-textAlign: center;
2393
2405
  --salt-track-background: var(--salt-palette-track-background);
2394
2406
  --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
2407
+ --salt-track-borderColor: var(--salt-palette-neutral-border);
2408
+ --salt-track-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
2395
2409
  --salt-taggable-cursor-hover: pointer;
2396
2410
  --salt-taggable-cursor-active: pointer;
2397
2411
  --salt-taggable-cursor-disabled: not-allowed;
@@ -2571,6 +2585,12 @@
2571
2585
  --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
2572
2586
  --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
2573
2587
  --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
2588
+ --salt-color-black-60a: rgba(var(--salt-color-black-rgb), 0.6);
2589
+ --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
2590
+ --salt-color-black-90a: rgba(var(--salt-color-black-rgb), 0.9);
2591
+ --salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
2592
+ --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
2593
+ --salt-color-white-90a: rgba(var(--salt-color-white-rgb), 0.9);
2574
2594
  }
2575
2595
  .salt-theme[data-mode=light] {
2576
2596
  --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
@@ -2658,11 +2678,11 @@
2658
2678
  --salt-palette-opacity-primary-border: var(--salt-opacity-45);
2659
2679
  --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
2660
2680
  --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
2661
- --salt-palette-alpha: var(--salt-palette-alpha-contrast-low);
2662
- --salt-palette-alpha-strong: var(--salt-palette-alpha-contrast-mediumLow);
2663
- --salt-palette-alpha-weak: var(--salt-palette-alpha-contrast-lower);
2664
- --salt-palette-alpha-weaker: var(--salt-palette-alpha-contrast-lowest);
2665
- --salt-palette-alpha-backdrop: var(--salt-palette-alpha-high);
2681
+ --salt-palette-alpha: var(--salt-palette-alpha-contrast-medium);
2682
+ --salt-palette-alpha-strong: var(--salt-palette-alpha-contrast-mediumHigh);
2683
+ --salt-palette-alpha-weak: var(--salt-palette-alpha-contrast-mediumLow);
2684
+ --salt-palette-alpha-weaker: var(--salt-palette-alpha-contrast-lower);
2685
+ --salt-palette-alpha-backdrop: var(--salt-palette-alpha-higher);
2666
2686
  }
2667
2687
  .salt-theme[data-mode=light] {
2668
2688
  --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
@@ -2674,6 +2694,7 @@
2674
2694
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
2675
2695
  --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
2676
2696
  --salt-palette-interact-background: transparent;
2697
+ --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
2677
2698
  --salt-palette-interact-background-disabled: transparent;
2678
2699
  --salt-palette-interact-border-none: transparent;
2679
2700
  --salt-palette-interact-secondary-background: transparent;
@@ -2749,6 +2770,7 @@
2749
2770
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
2750
2771
  --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
2751
2772
  --salt-palette-interact-background: transparent;
2773
+ --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
2752
2774
  --salt-palette-interact-background-disabled: transparent;
2753
2775
  --salt-palette-interact-border-none: transparent;
2754
2776
  --salt-palette-interact-secondary-background: transparent;
package/index.css CHANGED
@@ -29,24 +29,24 @@
29
29
 
30
30
  /* css/foundations/alpha.css */
31
31
  .salt-theme {
32
+ --salt-color-white-5a: rgba(var(--salt-color-white-rgb), 0.05);
32
33
  --salt-color-white-10a: rgba(var(--salt-color-white-rgb), 0.1);
34
+ --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
33
35
  --salt-color-white-20a: rgba(var(--salt-color-white-rgb), 0.2);
34
36
  --salt-color-white-30a: rgba(var(--salt-color-white-rgb), 0.3);
35
37
  --salt-color-white-40a: rgba(var(--salt-color-white-rgb), 0.4);
36
38
  --salt-color-white-50a: rgba(var(--salt-color-white-rgb), 0.5);
37
- --salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
38
- --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
39
+ --salt-color-white-65a: rgba(var(--salt-color-white-rgb), 0.65);
39
40
  --salt-color-white-80a: rgba(var(--salt-color-white-rgb), 0.8);
40
- --salt-color-white-90a: rgba(var(--salt-color-white-rgb), 0.9);
41
+ --salt-color-black-5a: rgba(var(--salt-color-black-rgb), 0.05);
41
42
  --salt-color-black-10a: rgba(var(--salt-color-black-rgb), 0.1);
43
+ --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
42
44
  --salt-color-black-20a: rgba(var(--salt-color-black-rgb), 0.2);
43
45
  --salt-color-black-30a: rgba(var(--salt-color-black-rgb), 0.3);
44
46
  --salt-color-black-40a: rgba(var(--salt-color-black-rgb), 0.4);
45
47
  --salt-color-black-50a: rgba(var(--salt-color-black-rgb), 0.5);
46
- --salt-color-black-60a: rgba(var(--salt-color-black-rgb), 0.6);
47
- --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
48
+ --salt-color-black-65a: rgba(var(--salt-color-black-rgb), 0.65);
48
49
  --salt-color-black-80a: rgba(var(--salt-color-black-rgb), 0.8);
49
- --salt-color-black-90a: rgba(var(--salt-color-black-rgb), 0.9);
50
50
  --salt-color-blue-30-40a: rgba(var(--salt-color-blue-30-rgb), 0.4);
51
51
  --salt-color-blue-100-40a: rgba(var(--salt-color-blue-100-rgb), 0.4);
52
52
  --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
@@ -224,6 +224,13 @@
224
224
  }
225
225
  }
226
226
 
227
+ /* css/foundations/borderStyle.css */
228
+ .salt-theme {
229
+ --salt-borderStyle-solid: solid;
230
+ --salt-borderStyle-dashed: dashed;
231
+ --salt-borderStyle-dotted: dotted;
232
+ }
233
+
227
234
  /* css/foundations/color.css */
228
235
  .salt-theme {
229
236
  --salt-color-white-rgb:
@@ -1149,45 +1156,45 @@
1149
1156
 
1150
1157
  /* css/palette/alpha.css */
1151
1158
  .salt-theme[data-mode=light] {
1152
- --salt-palette-alpha-highest: var(--salt-color-white-90a);
1153
- --salt-palette-alpha-higher: var(--salt-color-white-80a);
1154
- --salt-palette-alpha-high: var(--salt-color-white-70a);
1155
- --salt-palette-alpha-mediumHigh: var(--salt-color-white-60a);
1156
- --salt-palette-alpha-medium: var(--salt-color-white-50a);
1157
- --salt-palette-alpha-mediumLow: var(--salt-color-white-40a);
1158
- --salt-palette-alpha-low: var(--salt-color-white-30a);
1159
- --salt-palette-alpha-lower: var(--salt-color-white-20a);
1160
- --salt-palette-alpha-lowest: var(--salt-color-white-10a);
1161
- --salt-palette-alpha-contrast-highest: var(--salt-color-black-90a);
1162
- --salt-palette-alpha-contrast-higher: var(--salt-color-black-80a);
1163
- --salt-palette-alpha-contrast-high: var(--salt-color-black-70a);
1164
- --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-black-60a);
1165
- --salt-palette-alpha-contrast-medium: var(--salt-color-black-50a);
1166
- --salt-palette-alpha-contrast-mediumLow: var(--salt-color-black-40a);
1167
- --salt-palette-alpha-contrast-low: var(--salt-color-black-30a);
1168
- --salt-palette-alpha-contrast-lower: var(--salt-color-black-20a);
1169
- --salt-palette-alpha-contrast-lowest: var(--salt-color-black-10a);
1159
+ --salt-palette-alpha-highest: var(--salt-color-white-80a);
1160
+ --salt-palette-alpha-higher: var(--salt-color-white-65a);
1161
+ --salt-palette-alpha-high: var(--salt-color-white-50a);
1162
+ --salt-palette-alpha-mediumHigh: var(--salt-color-white-40a);
1163
+ --salt-palette-alpha-medium: var(--salt-color-white-30a);
1164
+ --salt-palette-alpha-mediumLow: var(--salt-color-white-20a);
1165
+ --salt-palette-alpha-low: var(--salt-color-white-15a);
1166
+ --salt-palette-alpha-lower: var(--salt-color-white-10a);
1167
+ --salt-palette-alpha-lowest: var(--salt-color-white-5a);
1168
+ --salt-palette-alpha-contrast-highest: var(--salt-color-black-80a);
1169
+ --salt-palette-alpha-contrast-higher: var(--salt-color-black-65a);
1170
+ --salt-palette-alpha-contrast-high: var(--salt-color-black-50a);
1171
+ --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-black-40a);
1172
+ --salt-palette-alpha-contrast-medium: var(--salt-color-black-30a);
1173
+ --salt-palette-alpha-contrast-mediumLow: var(--salt-color-black-20a);
1174
+ --salt-palette-alpha-contrast-low: var(--salt-color-black-15a);
1175
+ --salt-palette-alpha-contrast-lower: var(--salt-color-black-10a);
1176
+ --salt-palette-alpha-contrast-lowest: var(--salt-color-black-5a);
1170
1177
  --salt-palette-alpha-none: transparent;
1171
1178
  }
1172
1179
  .salt-theme[data-mode=dark] {
1173
- --salt-palette-alpha-highest: var(--salt-color-black-90a);
1174
- --salt-palette-alpha-higher: var(--salt-color-black-80a);
1175
- --salt-palette-alpha-high: var(--salt-color-black-70a);
1176
- --salt-palette-alpha-mediumHigh: var(--salt-color-black-60a);
1177
- --salt-palette-alpha-medium: var(--salt-color-black-50a);
1178
- --salt-palette-alpha-mediumLow: var(--salt-color-black-40a);
1179
- --salt-palette-alpha-low: var(--salt-color-black-30a);
1180
- --salt-palette-alpha-lower: var(--salt-color-black-20a);
1181
- --salt-palette-alpha-lowest: var(--salt-color-black-10a);
1182
- --salt-palette-alpha-contrast-highest: var(--salt-color-white-90a);
1183
- --salt-palette-alpha-contrast-higher: var(--salt-color-white-80a);
1184
- --salt-palette-alpha-contrast-high: var(--salt-color-white-70a);
1185
- --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-white-60a);
1186
- --salt-palette-alpha-contrast-medium: var(--salt-color-white-50a);
1187
- --salt-palette-alpha-contrast-mediumLow: var(--salt-color-white-40a);
1188
- --salt-palette-alpha-contrast-low: var(--salt-color-white-30a);
1189
- --salt-palette-alpha-contrast-lower: var(--salt-color-white-20a);
1190
- --salt-palette-alpha-contrast-lowest: var(--salt-color-white-10a);
1180
+ --salt-palette-alpha-highest: var(--salt-color-black-80a);
1181
+ --salt-palette-alpha-higher: var(--salt-color-black-65a);
1182
+ --salt-palette-alpha-high: var(--salt-color-black-50a);
1183
+ --salt-palette-alpha-mediumHigh: var(--salt-color-black-40a);
1184
+ --salt-palette-alpha-medium: var(--salt-color-black-30a);
1185
+ --salt-palette-alpha-mediumLow: var(--salt-color-black-20a);
1186
+ --salt-palette-alpha-low: var(--salt-color-black-15a);
1187
+ --salt-palette-alpha-lower: var(--salt-color-black-10a);
1188
+ --salt-palette-alpha-lowest: var(--salt-color-black-5a);
1189
+ --salt-palette-alpha-contrast-highest: var(--salt-color-white-80a);
1190
+ --salt-palette-alpha-contrast-higher: var(--salt-color-white-65a);
1191
+ --salt-palette-alpha-contrast-high: var(--salt-color-white-50a);
1192
+ --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-white-40a);
1193
+ --salt-palette-alpha-contrast-medium: var(--salt-color-white-30a);
1194
+ --salt-palette-alpha-contrast-mediumLow: var(--salt-color-white-20a);
1195
+ --salt-palette-alpha-contrast-low: var(--salt-color-white-15a);
1196
+ --salt-palette-alpha-contrast-lower: var(--salt-color-white-10a);
1197
+ --salt-palette-alpha-contrast-lowest: var(--salt-color-white-5a);
1191
1198
  --salt-palette-alpha-none: transparent;
1192
1199
  }
1193
1200
 
@@ -1379,7 +1386,6 @@
1379
1386
 
1380
1387
  /* css/palette/interact.css */
1381
1388
  .salt-theme[data-mode=light] {
1382
- --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
1383
1389
  --salt-palette-interact-background-hover: var(--salt-color-blue-10);
1384
1390
  --salt-palette-interact-background-active: var(--salt-color-blue-30);
1385
1391
  --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-40a);
@@ -1420,7 +1426,6 @@
1420
1426
  }
1421
1427
  .salt-theme[data-mode=dark] {
1422
1428
  --salt-palette-interact-background-active: var(--salt-color-blue-700);
1423
- --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
1424
1429
  --salt-palette-interact-background-hover: var(--salt-color-blue-800);
1425
1430
  --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-700-40a);
1426
1431
  --salt-palette-interact-border: var(--salt-color-gray-90);
@@ -1919,7 +1924,6 @@
1919
1924
 
1920
1925
  /* css/characteristics/container.css */
1921
1926
  .salt-theme {
1922
- --salt-container-borderStyle: solid;
1923
1927
  --salt-container-primary-background: var(--salt-palette-neutral-primary-background);
1924
1928
  --salt-container-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
1925
1929
  --salt-container-primary-borderColor: var(--salt-palette-neutral-border);
@@ -1932,26 +1936,18 @@
1932
1936
  --salt-container-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
1933
1937
  --salt-container-tertiary-borderColor: var(--salt-palette-neutral-border);
1934
1938
  --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
1935
- --salt-container-ghost-background: var(--salt-palette-alpha-low);
1936
- --salt-container-ghost-borderColor: var(--salt-palette-alpha-contrast-low);
1939
+ --salt-container-ghost-background: var(--salt-palette-alpha-medium);
1940
+ --salt-container-ghost-borderColor: var(--salt-palette-alpha-contrast-medium);
1937
1941
  }
1938
1942
 
1939
1943
  /* css/characteristics/target.css */
1940
1944
  .salt-theme {
1941
1945
  --salt-target-background-hover: var(--salt-palette-interact-background-hover);
1942
1946
  --salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);
1943
- --salt-target-borderStyle: dashed;
1944
- --salt-target-borderStyle-hover: solid;
1945
- --salt-target-borderStyle-disabled: dashed;
1946
1947
  }
1947
1948
 
1948
1949
  /* css/characteristics/editable.css */
1949
1950
  .salt-theme {
1950
- --salt-editable-borderStyle: solid;
1951
- --salt-editable-borderStyle-hover: solid;
1952
- --salt-editable-borderStyle-active: solid;
1953
- --salt-editable-borderStyle-disabled: solid;
1954
- --salt-editable-borderStyle-readonly: solid;
1955
1951
  --salt-editable-borderColor: var(--salt-palette-interact-border);
1956
1952
  --salt-editable-borderColor-active: var(--salt-palette-interact-border-active);
1957
1953
  --salt-editable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
@@ -1973,8 +1969,8 @@
1973
1969
  /* css/characteristics/focused.css */
1974
1970
  .salt-theme {
1975
1971
  --salt-focused-outlineColor: var(--salt-palette-interact-outline);
1976
- --salt-focused-outlineStyle: dotted;
1977
- --salt-focused-outlineWidth: 2px;
1972
+ --salt-focused-outlineStyle: var(--salt-borderStyle-dotted);
1973
+ --salt-focused-outlineWidth: var(--salt-size-fixed-200);
1978
1974
  --salt-focused-outlineInset: 0;
1979
1975
  --salt-focused-outlineOffset: 0;
1980
1976
  --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
@@ -1993,12 +1989,11 @@
1993
1989
 
1994
1990
  /* css/characteristics/navigable.css */
1995
1991
  .salt-theme {
1996
- --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
1997
- --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
1998
- --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
1999
- --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
2000
1992
  --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
2001
- --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
1993
+ --salt-navigable-accent-indicator-active: var(--salt-palette-navigate-indicator-active);
1994
+ --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
1995
+ --salt-navigable-accent-background-active: var(--salt-palette-alpha-none);
1996
+ --salt-navigable-accent-borderColor-active: var(--salt-palette-interact-border-active);
2002
1997
  }
2003
1998
 
2004
1999
  /* css/characteristics/overlayable.css */
@@ -2010,17 +2005,13 @@
2010
2005
  --salt-overlayable-shadow-popout: var(--salt-shadow-400);
2011
2006
  --salt-overlayable-shadow-drag: var(--salt-shadow-400);
2012
2007
  --salt-overlayable-shadow-modal: var(--salt-shadow-500);
2013
- --salt-overlayable-background: var(--salt-palette-alpha-high);
2014
- --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-low);
2015
- --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-lower);
2008
+ --salt-overlayable-background: var(--salt-palette-alpha-higher);
2009
+ --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-medium);
2010
+ --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-mediumLow);
2016
2011
  }
2017
2012
 
2018
2013
  /* css/characteristics/selectable.css */
2019
2014
  .salt-theme {
2020
- --salt-selectable-borderStyle: solid;
2021
- --salt-selectable-borderStyle-hover: solid;
2022
- --salt-selectable-borderStyle-selected: solid;
2023
- --salt-selectable-borderStyle-blurSelected: solid;
2024
2015
  --salt-selectable-borderColor: var(--salt-palette-interact-border);
2025
2016
  --salt-selectable-borderColor-hover: var(--salt-palette-interact-border-hover);
2026
2017
  --salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
@@ -2035,30 +2026,35 @@
2035
2026
  --salt-selectable-background: var(--salt-palette-alpha-none);
2036
2027
  --salt-selectable-background-hover: var(--salt-palette-interact-background-hover);
2037
2028
  --salt-selectable-background-selected: var(--salt-palette-interact-background-active);
2038
- --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
2039
2029
  --salt-selectable-background-disabled: var(--salt-palette-alpha-none);
2040
2030
  --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
2041
2031
  }
2042
2032
 
2033
+ /* css/characteristics/sentiment.css */
2034
+ .salt-theme {
2035
+ --salt-sentiment-negative-foreground-informative: var(--salt-palette-negative-foreground);
2036
+ --salt-sentiment-positive-foreground-informative: var(--salt-palette-positive-foreground);
2037
+ --salt-sentiment-negative-foreground-decorative: var(--salt-palette-negative-foreground);
2038
+ --salt-sentiment-positive-foreground-decorative: var(--salt-palette-positive-foreground);
2039
+ --salt-sentiment-neutral-track: var(--salt-palette-neutral-border);
2040
+ --salt-sentiment-neutral-track-disabled: var(--salt-palette-neutral-border-disabled);
2041
+ }
2042
+
2043
2043
  /* css/characteristics/separable.css */
2044
2044
  .salt-theme {
2045
- --salt-separable-borderStyle: solid;
2046
- --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumLow);
2047
- --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-low);
2048
- --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-contrast-lower);
2045
+ --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumHigh);
2046
+ --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-medium);
2047
+ --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-contrast-mediumLow);
2049
2048
  --salt-separable-foreground: var(--salt-palette-neutral-primary-foreground);
2050
2049
  --salt-separable-foreground-hover: var(--salt-palette-neutral-primary-foreground);
2051
2050
  --salt-separable-foreground-active: var(--salt-palette-interact-cta-foreground);
2052
2051
  --salt-separable-background: var(--salt-palette-alpha-none);
2053
- --salt-separable-background-hover: var(--salt-palette-alpha-weak);
2052
+ --salt-separable-background-hover: var(--salt-palette-alpha-contrast-mediumLow);
2054
2053
  --salt-separable-background-active: var(--salt-palette-accent);
2055
2054
  }
2056
2055
 
2057
2056
  /* css/characteristics/status.css */
2058
2057
  .salt-theme {
2059
- --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
2060
- --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
2061
- --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
2062
2058
  --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
2063
2059
  --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
2064
2060
  --salt-status-warning-foreground-decorative: var(--salt-palette-warning-foreground-decorative);
@@ -2259,20 +2255,16 @@
2259
2255
  --salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
2260
2256
  }
2261
2257
 
2262
- /* css/characteristics/track.css */
2263
- .salt-theme {
2264
- --salt-track-borderStyle: solid;
2265
- --salt-track-borderStyle-active: solid;
2266
- --salt-track-borderStyle-complete: solid;
2267
- --salt-track-borderStyle-incomplete: dotted;
2268
- --salt-track-borderColor: var(--salt-palette-neutral-border);
2269
- --salt-track-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
2270
- }
2271
-
2272
2258
  /* css/deprecated/characteristics.css */
2273
2259
  .salt-theme {
2260
+ --salt-container-borderStyle: solid;
2274
2261
  --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
2275
2262
  --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
2263
+ --salt-editable-borderStyle: solid;
2264
+ --salt-editable-borderStyle-hover: solid;
2265
+ --salt-editable-borderStyle-active: solid;
2266
+ --salt-editable-borderStyle-disabled: solid;
2267
+ --salt-editable-borderStyle-readonly: solid;
2276
2268
  --salt-editable-cursor-hover: text;
2277
2269
  --salt-editable-cursor-active: text;
2278
2270
  --salt-editable-cursor-disabled: not-allowed;
@@ -2308,6 +2300,10 @@
2308
2300
  --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
2309
2301
  --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
2310
2302
  --salt-overlayable-rangeSelection: var(--salt-overlayable-background-rangeSelection);
2303
+ --salt-selectable-borderStyle: solid;
2304
+ --salt-selectable-borderStyle-hover: solid;
2305
+ --salt-selectable-borderStyle-selected: solid;
2306
+ --salt-selectable-borderStyle-blurSelected: solid;
2311
2307
  --salt-selectable-cursor-hover: pointer;
2312
2308
  --salt-selectable-cursor-selected: pointer;
2313
2309
  --salt-selectable-cursor-blurSelected: pointer;
@@ -2315,6 +2311,7 @@
2315
2311
  --salt-selectable-cursor-readonly: not-allowed;
2316
2312
  --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
2317
2313
  --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
2314
+ --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
2318
2315
  --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
2319
2316
  --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
2320
2317
  --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
@@ -2345,6 +2342,9 @@
2345
2342
  --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
2346
2343
  --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
2347
2344
  --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
2345
+ --salt-separable-borderStyle: solid;
2346
+ --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
2347
+ --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
2348
2348
  --salt-status-info-background-emphasize: var(--salt-status-info-background);
2349
2349
  --salt-status-success-background-emphasize: var(--salt-status-success-background);
2350
2350
  --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
@@ -2353,6 +2353,7 @@
2353
2353
  --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
2354
2354
  --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
2355
2355
  --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
2356
+ --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
2356
2357
  --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
2357
2358
  --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
2358
2359
  --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
@@ -2380,6 +2381,9 @@
2380
2381
  --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
2381
2382
  --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
2382
2383
  --salt-target-cursor-disabled: not-allowed;
2384
+ --salt-target-borderStyle: dashed;
2385
+ --salt-target-borderStyle-hover: solid;
2386
+ --salt-target-borderStyle-disabled: dashed;
2383
2387
  --salt-text-background-selected: var(--salt-content-foreground-highlight);
2384
2388
  --salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover);
2385
2389
  --salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active);
@@ -2406,13 +2410,21 @@
2406
2410
  --salt-navigable-tertiary-background: var(--salt-palette-navigate-tertiary-background);
2407
2411
  --salt-navigable-tertiary-background-hover: var(--salt-palette-navigate-tertiary-background-hover);
2408
2412
  --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
2413
+ --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
2409
2414
  --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
2410
- --salt-navigable-background-hover: var(--salt-palette-navigate-background-hover);
2411
2415
  --salt-navigable-textDecoration: var(--salt-typography-textDecoration-underline);
2412
2416
  --salt-navigable-textDecoration-hover: var(--salt-typography-textDecoration-none);
2413
2417
  --salt-navigable-textDecoration-selected: var(--salt-typography-textDecoration-underline);
2418
+ --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
2419
+ --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
2420
+ --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
2421
+ --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
2414
2422
  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
2415
2423
  --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
2424
+ --salt-track-borderStyle: solid;
2425
+ --salt-track-borderStyle-active: solid;
2426
+ --salt-track-borderStyle-complete: solid;
2427
+ --salt-track-borderStyle-incomplete: dotted;
2416
2428
  --salt-track-borderWidth: 2px;
2417
2429
  --salt-track-borderWidth-active: 2px;
2418
2430
  --salt-track-borderWidth-complete: 2px;
@@ -2421,6 +2433,8 @@
2421
2433
  --salt-track-textAlign: center;
2422
2434
  --salt-track-background: var(--salt-palette-track-background);
2423
2435
  --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
2436
+ --salt-track-borderColor: var(--salt-palette-neutral-border);
2437
+ --salt-track-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
2424
2438
  --salt-taggable-cursor-hover: pointer;
2425
2439
  --salt-taggable-cursor-active: pointer;
2426
2440
  --salt-taggable-cursor-disabled: not-allowed;
@@ -2600,6 +2614,12 @@
2600
2614
  --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
2601
2615
  --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
2602
2616
  --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
2617
+ --salt-color-black-60a: rgba(var(--salt-color-black-rgb), 0.6);
2618
+ --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
2619
+ --salt-color-black-90a: rgba(var(--salt-color-black-rgb), 0.9);
2620
+ --salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
2621
+ --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
2622
+ --salt-color-white-90a: rgba(var(--salt-color-white-rgb), 0.9);
2603
2623
  }
2604
2624
  .salt-theme[data-mode=light] {
2605
2625
  --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
@@ -2687,11 +2707,11 @@
2687
2707
  --salt-palette-opacity-primary-border: var(--salt-opacity-45);
2688
2708
  --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
2689
2709
  --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
2690
- --salt-palette-alpha: var(--salt-palette-alpha-contrast-low);
2691
- --salt-palette-alpha-strong: var(--salt-palette-alpha-contrast-mediumLow);
2692
- --salt-palette-alpha-weak: var(--salt-palette-alpha-contrast-lower);
2693
- --salt-palette-alpha-weaker: var(--salt-palette-alpha-contrast-lowest);
2694
- --salt-palette-alpha-backdrop: var(--salt-palette-alpha-high);
2710
+ --salt-palette-alpha: var(--salt-palette-alpha-contrast-medium);
2711
+ --salt-palette-alpha-strong: var(--salt-palette-alpha-contrast-mediumHigh);
2712
+ --salt-palette-alpha-weak: var(--salt-palette-alpha-contrast-mediumLow);
2713
+ --salt-palette-alpha-weaker: var(--salt-palette-alpha-contrast-lower);
2714
+ --salt-palette-alpha-backdrop: var(--salt-palette-alpha-higher);
2695
2715
  }
2696
2716
  .salt-theme[data-mode=light] {
2697
2717
  --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
@@ -2703,6 +2723,7 @@
2703
2723
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
2704
2724
  --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
2705
2725
  --salt-palette-interact-background: transparent;
2726
+ --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
2706
2727
  --salt-palette-interact-background-disabled: transparent;
2707
2728
  --salt-palette-interact-border-none: transparent;
2708
2729
  --salt-palette-interact-secondary-background: transparent;
@@ -2778,6 +2799,7 @@
2778
2799
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
2779
2800
  --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
2780
2801
  --salt-palette-interact-background: transparent;
2802
+ --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
2781
2803
  --salt-palette-interact-background-disabled: transparent;
2782
2804
  --salt-palette-interact-border-none: transparent;
2783
2805
  --salt-palette-interact-secondary-background: transparent;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "1.30.0",
3
+ "version": "1.31.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",