@salt-ds/theme 0.0.0-snapshot-20251015105819 → 0.0.0-snapshot-20251109205350

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 +271 -170
  2. package/css/theme.css +179 -92
  3. package/index.css +179 -92
  4. package/package.json +1 -1
package/css/theme-next.css CHANGED
@@ -24,7 +24,8 @@
24
24
  .salt-density-touch,
25
25
  .salt-density-low,
26
26
  .salt-density-medium,
27
- .salt-density-high {
27
+ .salt-density-high,
28
+ .salt-density-mobile {
28
29
  --salt-animation-opacity-start: 0;
29
30
  --salt-animation-opacity-end: 1;
30
31
  --salt-animation-scale-start: 0;
@@ -228,6 +229,7 @@
228
229
  --salt-curve-250: 15px;
229
230
  --salt-curve-999: 999px;
230
231
  }
232
+ .salt-density-mobile,
231
233
  .salt-density-touch {
232
234
  --salt-curve-0: 0;
233
235
  --salt-curve-50: 4px;
@@ -274,6 +276,7 @@
274
276
  --salt-size-selectable: 16px;
275
277
  --salt-size-bar-strong: 12px;
276
278
  }
279
+ .salt-density-mobile,
277
280
  .salt-density-touch {
278
281
  --salt-size-adornment: 12px;
279
282
  --salt-size-bar: 8px;
@@ -286,7 +289,8 @@
286
289
  .salt-density-touch,
287
290
  .salt-density-low,
288
291
  .salt-density-medium,
289
- .salt-density-high {
292
+ .salt-density-high,
293
+ .salt-density-mobile {
290
294
  --salt-size-fixed-100: 1px;
291
295
  --salt-size-fixed-200: 2px;
292
296
  --salt-size-fixed-300: 3px;
@@ -335,6 +339,35 @@
335
339
  --salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
336
340
  --salt-spacing-900: calc(9 * var(--salt-spacing-100));
337
341
  --salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
342
+ }
343
+ .salt-density-mobile {
344
+ --salt-spacing-25: 4px;
345
+ --salt-spacing-50: 8px;
346
+ --salt-spacing-75: 12px;
347
+ --salt-spacing-100: 16px;
348
+ --salt-spacing-150: 18px;
349
+ --salt-spacing-200: 20px;
350
+ --salt-spacing-250: 22px;
351
+ --salt-spacing-300: 24px;
352
+ --salt-spacing-350: 26px;
353
+ --salt-spacing-400: 28px;
354
+ --salt-spacing-450: 30px;
355
+ --salt-spacing-500: 32px;
356
+ --salt-spacing-550: 34px;
357
+ --salt-spacing-600: 36px;
358
+ --salt-spacing-650: 38px;
359
+ --salt-spacing-700: 40px;
360
+ --salt-spacing-750: 42px;
361
+ --salt-spacing-800: 44px;
362
+ --salt-spacing-850: 46px;
363
+ --salt-spacing-900: 48px;
364
+ --salt-spacing-950: 50px;
365
+ }
366
+ .salt-density-touch,
367
+ .salt-density-low,
368
+ .salt-density-medium,
369
+ .salt-density-high,
370
+ .salt-density-mobile {
338
371
  --salt-spacing-fixed-100: 1px;
339
372
  --salt-spacing-fixed-200: 2px;
340
373
  --salt-spacing-fixed-300: 3px;
@@ -366,7 +399,8 @@
366
399
  .salt-density-touch,
367
400
  .salt-density-low,
368
401
  .salt-density-medium,
369
- .salt-density-high {
402
+ .salt-density-high,
403
+ .salt-density-mobile {
370
404
  --salt-zIndex-default: 1;
371
405
  --salt-zIndex-popout: 1000;
372
406
  --salt-zIndex-appHeader: 1100;
@@ -830,61 +864,45 @@
830
864
  --salt-palette-accent: var(--salt-color-blue-500);
831
865
  --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
832
866
  --salt-palette-accent-strong: var(--salt-color-blue-600);
833
- --salt-palette-accent-strong-disabled: var(--salt-color-blue-600-40a);
834
867
  --salt-palette-accent-stronger: var(--salt-color-blue-700);
835
- --salt-palette-accent-stronger-disabled: var(--salt-color-blue-700-40a);
836
868
  --salt-palette-accent-strongest: var(--salt-color-blue-800);
837
869
  --salt-palette-accent-weak: var(--salt-color-blue-400);
838
870
  --salt-palette-accent-weaker: var(--salt-color-blue-200);
839
871
  --salt-palette-accent-weaker-disabled: var(--salt-color-blue-200-40a);
840
872
  --salt-palette-accent-weakest: var(--salt-color-blue-100);
841
- --salt-palette-accent-action-hover: var(--salt-color-blue-600);
842
- --salt-palette-accent-action-active: var(--salt-color-blue-800);
843
873
  }
844
874
  .salt-theme.salt-theme-next[data-mode=dark][data-accent=blue] {
845
875
  --salt-palette-accent: var(--salt-color-blue-500);
846
876
  --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
847
877
  --salt-palette-accent-strong: var(--salt-color-blue-400);
848
- --salt-palette-accent-strong-disabled: var(--salt-color-blue-400-40a);
849
878
  --salt-palette-accent-stronger: var(--salt-color-blue-300);
850
- --salt-palette-accent-stronger-disabled: var(--salt-color-blue-300-40a);
851
879
  --salt-palette-accent-strongest: var(--salt-color-blue-200);
852
880
  --salt-palette-accent-weak: var(--salt-color-blue-600);
853
881
  --salt-palette-accent-weaker: var(--salt-color-blue-800);
854
882
  --salt-palette-accent-weaker-disabled: var(--salt-color-blue-800-40a);
855
883
  --salt-palette-accent-weakest: var(--salt-color-blue-900);
856
- --salt-palette-accent-action-hover: var(--salt-color-blue-600);
857
- --salt-palette-accent-action-active: var(--salt-color-blue-800);
858
884
  }
859
885
  .salt-theme.salt-theme-next[data-mode=light][data-accent=teal] {
860
886
  --salt-palette-accent: var(--salt-color-teal-500);
861
887
  --salt-palette-accent-disabled: var(--salt-color-teal-500-40a);
862
888
  --salt-palette-accent-strong: var(--salt-color-teal-600);
863
- --salt-palette-accent-strong-disabled: var(--salt-color-teal-600-40a);
864
889
  --salt-palette-accent-stronger: var(--salt-color-teal-700);
865
- --salt-palette-accent-stronger-disabled: var(--salt-color-teal-700-40a);
866
890
  --salt-palette-accent-strongest: var(--salt-color-teal-800);
867
891
  --salt-palette-accent-weak: var(--salt-color-teal-400);
868
892
  --salt-palette-accent-weaker: var(--salt-color-teal-200);
869
893
  --salt-palette-accent-weaker-disabled: var(--salt-color-teal-200-40a);
870
894
  --salt-palette-accent-weakest: var(--salt-color-teal-100);
871
- --salt-palette-accent-action-hover: var(--salt-color-teal-600);
872
- --salt-palette-accent-action-active: var(--salt-color-teal-800);
873
895
  }
874
896
  .salt-theme.salt-theme-next[data-mode=dark][data-accent=teal] {
875
897
  --salt-palette-accent: var(--salt-color-teal-500);
876
898
  --salt-palette-accent-disabled: var(--salt-color-teal-500-40a);
877
899
  --salt-palette-accent-strong: var(--salt-color-teal-400);
878
- --salt-palette-accent-strong-disabled: var(--salt-color-teal-400-40a);
879
900
  --salt-palette-accent-stronger: var(--salt-color-teal-300);
880
- --salt-palette-accent-stronger-disabled: var(--salt-color-teal-300-40a);
881
901
  --salt-palette-accent-strongest: var(--salt-color-teal-200);
882
902
  --salt-palette-accent-weak: var(--salt-color-teal-600);
883
903
  --salt-palette-accent-weaker: var(--salt-color-teal-800);
884
904
  --salt-palette-accent-weaker-disabled: var(--salt-color-teal-800-40a);
885
905
  --salt-palette-accent-weakest: var(--salt-color-teal-900);
886
- --salt-palette-accent-action-hover: var(--salt-color-teal-600);
887
- --salt-palette-accent-action-active: var(--salt-color-teal-800);
888
906
  }
889
907
 
890
908
  /* css/next/palette/alpha.css */
@@ -1127,24 +1145,18 @@
1127
1145
 
1128
1146
  /* css/next/palette/negative.css */
1129
1147
  .salt-theme.salt-theme-next[data-mode=light] {
1130
- --salt-palette-negative: var(--salt-color-red-500);
1131
- --salt-palette-negative-disabled: var(--salt-color-red-500-40a);
1148
+ --salt-palette-negative-stronger: var(--salt-color-red-700);
1132
1149
  --salt-palette-negative-strong: var(--salt-color-red-600);
1133
- --salt-palette-negative-strong-disabled: var(--salt-color-red-600-40a);
1150
+ --salt-palette-negative: var(--salt-color-red-500);
1134
1151
  --salt-palette-negative-weaker: var(--salt-color-red-200);
1135
1152
  --salt-palette-negative-weakest: var(--salt-color-red-100);
1136
- --salt-palette-negative-action-hover: var(--salt-color-red-600);
1137
- --salt-palette-negative-action-active: var(--salt-color-red-800);
1138
1153
  }
1139
1154
  .salt-theme.salt-theme-next[data-mode=dark] {
1140
- --salt-palette-negative: var(--salt-color-red-500);
1141
- --salt-palette-negative-disabled: var(--salt-color-red-500-40a);
1155
+ --salt-palette-negative-stronger: var(--salt-color-red-300);
1142
1156
  --salt-palette-negative-strong: var(--salt-color-red-400);
1143
- --salt-palette-negative-strong-disabled: var(--salt-color-red-400-40a);
1157
+ --salt-palette-negative: var(--salt-color-red-500);
1144
1158
  --salt-palette-negative-weaker: var(--salt-color-red-800);
1145
1159
  --salt-palette-negative-weakest: var(--salt-color-red-900);
1146
- --salt-palette-negative-action-hover: var(--salt-color-red-600);
1147
- --salt-palette-negative-action-active: var(--salt-color-red-800);
1148
1160
  }
1149
1161
 
1150
1162
  /* css/next/palette/neutral.css */
@@ -1157,13 +1169,8 @@
1157
1169
  --salt-palette-neutral-stronger: var(--salt-color-gray-700);
1158
1170
  --salt-palette-neutral-strongest: var(--salt-color-gray-800);
1159
1171
  --salt-palette-neutral-weak: var(--salt-color-gray-400);
1160
- --salt-palette-neutral-weak-disabled: var(--salt-color-gray-400-40a);
1161
- --salt-palette-neutral-weaker: var(--salt-color-gray-300);
1162
- --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-300-40a);
1163
- --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-300-10a);
1164
- --salt-palette-neutral-weakest: var(--salt-color-gray-200);
1165
- --salt-palette-neutral-action-hover: var(--salt-color-gray-600);
1166
- --salt-palette-neutral-action-active: var(--salt-color-gray-800);
1172
+ --salt-palette-neutral-weaker: var(--salt-color-gray-200);
1173
+ --salt-palette-neutral-weakest: var(--salt-color-gray-100);
1167
1174
  }
1168
1175
  .salt-theme.salt-theme-next[data-mode=dark] {
1169
1176
  --salt-palette-neutral: var(--salt-color-gray-500);
@@ -1171,38 +1178,27 @@
1171
1178
  --salt-palette-neutral-readonly: var(--salt-color-gray-500-10a);
1172
1179
  --salt-palette-neutral-strong: var(--salt-color-gray-400);
1173
1180
  --salt-palette-neutral-strong-disabled: var(--salt-color-gray-400-40a);
1174
- --salt-palette-neutral-stronger: var(--salt-color-gray-300);
1175
- --salt-palette-neutral-strongest: var(--salt-color-gray-200);
1181
+ --salt-palette-neutral-stronger: var(--salt-color-gray-200);
1182
+ --salt-palette-neutral-strongest: var(--salt-color-gray-100);
1176
1183
  --salt-palette-neutral-weak: var(--salt-color-gray-600);
1177
- --salt-palette-neutral-weak-disabled: var(--salt-color-gray-600-40a);
1178
- --salt-palette-neutral-weaker: var(--salt-color-gray-700);
1179
- --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-700-40a);
1180
- --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-700-10a);
1181
- --salt-palette-neutral-weakest: var(--salt-color-gray-800);
1182
- --salt-palette-neutral-action-hover: var(--salt-color-gray-600);
1183
- --salt-palette-neutral-action-active: var(--salt-color-gray-800);
1184
+ --salt-palette-neutral-weaker: var(--salt-color-gray-800);
1185
+ --salt-palette-neutral-weakest: var(--salt-color-gray-900);
1184
1186
  }
1185
1187
 
1186
1188
  /* css/next/palette/positive.css */
1187
1189
  .salt-theme.salt-theme-next[data-mode=light] {
1188
- --salt-palette-positive: var(--salt-color-green-500);
1189
- --salt-palette-positive-disabled: var(--salt-color-green-500-40a);
1190
+ --salt-palette-positive-stronger: var(--salt-color-green-700);
1190
1191
  --salt-palette-positive-strong: var(--salt-color-green-600);
1191
- --salt-palette-positive-strong-disabled: var(--salt-color-green-600-40a);
1192
+ --salt-palette-positive: var(--salt-color-green-500);
1192
1193
  --salt-palette-positive-weaker: var(--salt-color-green-200);
1193
1194
  --salt-palette-positive-weakest: var(--salt-color-green-100);
1194
- --salt-palette-positive-action-hover: var(--salt-color-green-600);
1195
- --salt-palette-positive-action-active: var(--salt-color-green-800);
1196
1195
  }
1197
1196
  .salt-theme.salt-theme-next[data-mode=dark] {
1198
- --salt-palette-positive: var(--salt-color-green-500);
1199
- --salt-palette-positive-disabled: var(--salt-color-green-500-40a);
1197
+ --salt-palette-positive-stronger: var(--salt-color-green-300);
1200
1198
  --salt-palette-positive-strong: var(--salt-color-green-400);
1201
- --salt-palette-positive-strong-disabled: var(--salt-color-green-400-40a);
1199
+ --salt-palette-positive: var(--salt-color-green-500);
1202
1200
  --salt-palette-positive-weaker: var(--salt-color-green-800);
1203
1201
  --salt-palette-positive-weakest: var(--salt-color-green-900);
1204
- --salt-palette-positive-action-hover: var(--salt-color-green-600);
1205
- --salt-palette-positive-action-active: var(--salt-color-green-800);
1206
1202
  }
1207
1203
 
1208
1204
  /* css/next/palette/shadow.css */
@@ -1263,24 +1259,18 @@
1263
1259
 
1264
1260
  /* css/next/palette/warning.css */
1265
1261
  .salt-theme.salt-theme-next[data-mode=light] {
1266
- --salt-palette-warning: var(--salt-color-orange-500);
1267
- --salt-palette-warning-disabled: var(--salt-color-orange-500-40a);
1262
+ --salt-palette-warning-stronger: var(--salt-color-orange-700);
1268
1263
  --salt-palette-warning-strong: var(--salt-color-orange-600);
1269
- --salt-palette-warning-strong-disabled: var(--salt-color-orange-600-40a);
1264
+ --salt-palette-warning: var(--salt-color-orange-500);
1270
1265
  --salt-palette-warning-weaker: var(--salt-color-orange-200);
1271
1266
  --salt-palette-warning-weakest: var(--salt-color-orange-100);
1272
- --salt-palette-warning-action-hover: var(--salt-color-orange-600);
1273
- --salt-palette-warning-action-active: var(--salt-color-orange-800);
1274
1267
  }
1275
1268
  .salt-theme.salt-theme-next[data-mode=dark] {
1276
- --salt-palette-warning: var(--salt-color-orange-500);
1277
- --salt-palette-warning-disabled: var(--salt-color-orange-500-40a);
1269
+ --salt-palette-warning-stronger: var(--salt-color-orange-300);
1278
1270
  --salt-palette-warning-strong: var(--salt-color-orange-400);
1279
- --salt-palette-warning-strong-disabled: var(--salt-color-orange-400-40a);
1271
+ --salt-palette-warning: var(--salt-color-orange-500);
1280
1272
  --salt-palette-warning-weaker: var(--salt-color-orange-800);
1281
1273
  --salt-palette-warning-weakest: var(--salt-color-orange-900);
1282
- --salt-palette-warning-action-hover: var(--salt-color-orange-600);
1283
- --salt-palette-warning-action-active: var(--salt-color-orange-800);
1284
1274
  }
1285
1275
 
1286
1276
  /* css/next/characteristics/accent.css */
@@ -1294,185 +1284,155 @@
1294
1284
 
1295
1285
  /* css/next/characteristics/actionable.css */
1296
1286
  .salt-theme.salt-theme-next {
1297
- --salt-actionable-accented-bold-background-active: var(--salt-palette-accent-action-active);
1298
- --salt-actionable-accented-bold-background-disabled: var(--salt-palette-accent-disabled);
1299
- --salt-actionable-accented-bold-background-hover: var(--salt-palette-accent-action-hover);
1287
+ --salt-actionable-accented-bold-background-active: var(--salt-palette-accent-weaker);
1288
+ --salt-actionable-accented-bold-background-hover: var(--salt-palette-accent);
1300
1289
  --salt-actionable-accented-bold-background: var(--salt-palette-accent);
1301
1290
  --salt-actionable-accented-bold-borderColor-active: var(--salt-palette-accent);
1302
- --salt-actionable-accented-bold-borderColor-disabled: var(--salt-palette-alpha-none);
1303
- --salt-actionable-accented-bold-borderColor-hover: var(--salt-palette-accent);
1291
+ --salt-actionable-accented-bold-borderColor-hover: var(--salt-palette-alpha-contrast-high);
1304
1292
  --salt-actionable-accented-bold-borderColor: var(--salt-palette-accent);
1305
- --salt-actionable-accented-bold-foreground-active: var(--salt-palette-foreground-primary-alt);
1306
- --salt-actionable-accented-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
1293
+ --salt-actionable-accented-bold-foreground-active: var(--salt-palette-foreground-primary);
1307
1294
  --salt-actionable-accented-bold-foreground-hover: var(--salt-palette-foreground-primary-alt);
1308
1295
  --salt-actionable-accented-bold-foreground: var(--salt-palette-foreground-primary-alt);
1309
- --salt-actionable-accented-background-active: var(--salt-palette-accent-action-active);
1310
- --salt-actionable-accented-background-disabled: var(--salt-palette-alpha-none);
1311
- --salt-actionable-accented-background-hover: var(--salt-palette-accent-action-hover);
1296
+ --salt-actionable-accented-background-active: var(--salt-palette-accent-weaker);
1297
+ --salt-actionable-accented-background-hover: var(--salt-palette-accent-weakest);
1312
1298
  --salt-actionable-accented-background: var(--salt-palette-alpha-none);
1313
1299
  --salt-actionable-accented-borderColor-active: var(--salt-palette-accent);
1314
- --salt-actionable-accented-borderColor-disabled: var(--salt-palette-accent-disabled);
1315
1300
  --salt-actionable-accented-borderColor-hover: var(--salt-palette-accent);
1316
1301
  --salt-actionable-accented-borderColor: var(--salt-palette-accent);
1317
- --salt-actionable-accented-foreground-active: var(--salt-palette-foreground-primary-alt);
1318
- --salt-actionable-accented-foreground-disabled: var(--salt-palette-accent-strong-disabled);
1319
- --salt-actionable-accented-foreground-hover: var(--salt-palette-foreground-primary-alt);
1302
+ --salt-actionable-accented-foreground-active: var(--salt-palette-foreground-primary);
1303
+ --salt-actionable-accented-foreground-hover: var(--salt-palette-accent-stronger);
1320
1304
  --salt-actionable-accented-foreground: var(--salt-palette-accent-strong);
1321
- --salt-actionable-accented-subtle-background-active: var(--salt-palette-accent-action-active);
1322
- --salt-actionable-accented-subtle-background-disabled: var(--salt-palette-alpha-none);
1323
- --salt-actionable-accented-subtle-background-hover: var(--salt-palette-accent-action-hover);
1305
+ --salt-actionable-accented-background-selected: var(--salt-palette-accent);
1306
+ --salt-actionable-accented-borderColor-selected: var(--salt-palette-accent);
1307
+ --salt-actionable-accented-foreground-selected: var(--salt-palette-foreground-primary-alt);
1308
+ --salt-actionable-accented-subtle-background-active: var(--salt-palette-accent-weaker);
1309
+ --salt-actionable-accented-subtle-background-hover: var(--salt-palette-accent-weakest);
1324
1310
  --salt-actionable-accented-subtle-background: var(--salt-palette-alpha-none);
1325
1311
  --salt-actionable-accented-subtle-borderColor-active: var(--salt-palette-accent);
1326
- --salt-actionable-accented-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
1327
1312
  --salt-actionable-accented-subtle-borderColor-hover: var(--salt-palette-accent);
1328
1313
  --salt-actionable-accented-subtle-borderColor: var(--salt-palette-alpha-none);
1329
- --salt-actionable-accented-subtle-foreground-active: var(--salt-palette-foreground-primary-alt);
1330
- --salt-actionable-accented-subtle-foreground-disabled: var(--salt-palette-accent-strong-disabled);
1331
- --salt-actionable-accented-subtle-foreground-hover: var(--salt-palette-foreground-primary-alt);
1314
+ --salt-actionable-accented-subtle-foreground-active: var(--salt-palette-foreground-primary);
1315
+ --salt-actionable-accented-subtle-foreground-hover: var(--salt-palette-accent-stronger);
1332
1316
  --salt-actionable-accented-subtle-foreground: var(--salt-palette-accent-strong);
1333
- --salt-actionable-bold-background-active: var(--salt-palette-neutral-action-active);
1334
- --salt-actionable-bold-background-disabled: var(--salt-palette-neutral-disabled);
1335
- --salt-actionable-bold-background-hover: var(--salt-palette-neutral-action-hover);
1317
+ --salt-actionable-bold-background-active: var(--salt-palette-neutral-weaker);
1318
+ --salt-actionable-bold-background-hover: var(--salt-palette-neutral);
1336
1319
  --salt-actionable-bold-background: var(--salt-palette-neutral);
1337
1320
  --salt-actionable-bold-borderColor-active: var(--salt-palette-neutral);
1338
- --salt-actionable-bold-borderColor-disabled: var(--salt-palette-alpha-none);
1339
- --salt-actionable-bold-borderColor-hover: var(--salt-palette-neutral);
1321
+ --salt-actionable-bold-borderColor-hover: var(--salt-palette-alpha-contrast-high);
1340
1322
  --salt-actionable-bold-borderColor: var(--salt-palette-neutral);
1341
- --salt-actionable-bold-foreground-active: var(--salt-palette-foreground-primary-alt);
1342
- --salt-actionable-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
1323
+ --salt-actionable-bold-foreground-active: var(--salt-palette-foreground-primary);
1343
1324
  --salt-actionable-bold-foreground-hover: var(--salt-palette-foreground-primary-alt);
1344
1325
  --salt-actionable-bold-foreground: var(--salt-palette-foreground-primary-alt);
1345
- --salt-actionable-background-active: var(--salt-palette-neutral-action-active);
1346
- --salt-actionable-background-disabled: var(--salt-palette-alpha-none);
1347
- --salt-actionable-background-hover: var(--salt-palette-neutral-action-hover);
1326
+ --salt-actionable-background-active: var(--salt-palette-neutral-weaker);
1327
+ --salt-actionable-background-hover: var(--salt-palette-neutral-weakest);
1348
1328
  --salt-actionable-background: var(--salt-palette-alpha-none);
1349
1329
  --salt-actionable-borderColor-active: var(--salt-palette-neutral);
1350
- --salt-actionable-borderColor-disabled: var(--salt-palette-neutral-disabled);
1351
1330
  --salt-actionable-borderColor-hover: var(--salt-palette-neutral);
1352
1331
  --salt-actionable-borderColor: var(--salt-palette-neutral);
1353
- --salt-actionable-foreground-active: var(--salt-palette-foreground-primary-alt);
1354
- --salt-actionable-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
1355
- --salt-actionable-foreground-hover: var(--salt-palette-foreground-primary-alt);
1332
+ --salt-actionable-foreground-active: var(--salt-palette-foreground-primary);
1333
+ --salt-actionable-foreground-hover: var(--salt-palette-foreground-primary);
1356
1334
  --salt-actionable-foreground: var(--salt-palette-foreground-primary);
1357
- --salt-actionable-subtle-background-active: var(--salt-palette-neutral-action-active);
1358
- --salt-actionable-subtle-background-disabled: var(--salt-palette-alpha-none);
1359
- --salt-actionable-subtle-background-hover: var(--salt-palette-neutral-action-hover);
1335
+ --salt-actionable-background-selected: var(--salt-palette-neutral);
1336
+ --salt-actionable-borderColor-selected: var(--salt-palette-neutral);
1337
+ --salt-actionable-foreground-selected: var(--salt-palette-foreground-primary-alt);
1338
+ --salt-actionable-subtle-background-active: var(--salt-palette-neutral-weaker);
1339
+ --salt-actionable-subtle-background-hover: var(--salt-palette-neutral-weakest);
1360
1340
  --salt-actionable-subtle-background: var(--salt-palette-alpha-none);
1361
1341
  --salt-actionable-subtle-borderColor-active: var(--salt-palette-neutral);
1362
- --salt-actionable-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
1363
1342
  --salt-actionable-subtle-borderColor-hover: var(--salt-palette-neutral);
1364
1343
  --salt-actionable-subtle-borderColor: var(--salt-palette-alpha-none);
1365
- --salt-actionable-subtle-foreground-active: var(--salt-palette-foreground-primary-alt);
1366
- --salt-actionable-subtle-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
1367
- --salt-actionable-subtle-foreground-hover: var(--salt-palette-foreground-primary-alt);
1344
+ --salt-actionable-subtle-foreground-active: var(--salt-palette-foreground-primary);
1345
+ --salt-actionable-subtle-foreground-hover: var(--salt-palette-foreground-primary);
1368
1346
  --salt-actionable-subtle-foreground: var(--salt-palette-foreground-primary);
1369
- --salt-actionable-negative-bold-background-active: var(--salt-palette-negative-action-active);
1370
- --salt-actionable-negative-bold-background-disabled: var(--salt-palette-negative-disabled);
1371
- --salt-actionable-negative-bold-background-hover: var(--salt-palette-negative-action-hover);
1347
+ --salt-actionable-negative-bold-background-active: var(--salt-palette-negative-weaker);
1348
+ --salt-actionable-negative-bold-background-hover: var(--salt-palette-negative);
1372
1349
  --salt-actionable-negative-bold-background: var(--salt-palette-negative);
1373
1350
  --salt-actionable-negative-bold-borderColor-active: var(--salt-palette-negative);
1374
- --salt-actionable-negative-bold-borderColor-disabled: var(--salt-palette-alpha-none);
1375
- --salt-actionable-negative-bold-borderColor-hover: var(--salt-palette-negative);
1351
+ --salt-actionable-negative-bold-borderColor-hover: var(--salt-palette-alpha-contrast-high);
1376
1352
  --salt-actionable-negative-bold-borderColor: var(--salt-palette-negative);
1377
- --salt-actionable-negative-bold-foreground-active: var(--salt-palette-foreground-primary-alt);
1378
- --salt-actionable-negative-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
1353
+ --salt-actionable-negative-bold-foreground-active: var(--salt-palette-foreground-primary);
1379
1354
  --salt-actionable-negative-bold-foreground-hover: var(--salt-palette-foreground-primary-alt);
1380
1355
  --salt-actionable-negative-bold-foreground: var(--salt-palette-foreground-primary-alt);
1381
- --salt-actionable-negative-background-active: var(--salt-palette-negative-action-active);
1382
- --salt-actionable-negative-background-disabled: var(--salt-palette-alpha-none);
1383
- --salt-actionable-negative-background-hover: var(--salt-palette-negative-action-hover);
1356
+ --salt-actionable-negative-background-active: var(--salt-palette-negative-weaker);
1357
+ --salt-actionable-negative-background-hover: var(--salt-palette-negative-weakest);
1384
1358
  --salt-actionable-negative-background: var(--salt-palette-alpha-none);
1385
1359
  --salt-actionable-negative-borderColor-active: var(--salt-palette-negative);
1386
- --salt-actionable-negative-borderColor-disabled: var(--salt-palette-negative-disabled);
1387
1360
  --salt-actionable-negative-borderColor-hover: var(--salt-palette-negative);
1388
1361
  --salt-actionable-negative-borderColor: var(--salt-palette-negative);
1389
- --salt-actionable-negative-foreground-active: var(--salt-palette-foreground-primary-alt);
1390
- --salt-actionable-negative-foreground-disabled: var(--salt-palette-negative-strong-disabled);
1391
- --salt-actionable-negative-foreground-hover: var(--salt-palette-foreground-primary-alt);
1362
+ --salt-actionable-negative-foreground-active: var(--salt-palette-foreground-primary);
1363
+ --salt-actionable-negative-foreground-hover: var(--salt-palette-negative-stronger);
1392
1364
  --salt-actionable-negative-foreground: var(--salt-palette-negative-strong);
1393
- --salt-actionable-negative-subtle-background-active: var(--salt-palette-negative-action-active);
1394
- --salt-actionable-negative-subtle-background-disabled: var(--salt-palette-alpha-none);
1395
- --salt-actionable-negative-subtle-background-hover: var(--salt-palette-negative-action-hover);
1365
+ --salt-actionable-negative-background-selected: var(--salt-palette-negative);
1366
+ --salt-actionable-negative-borderColor-selected: var(--salt-palette-negative);
1367
+ --salt-actionable-negative-foreground-selected: var(--salt-palette-foreground-primary-alt);
1368
+ --salt-actionable-negative-subtle-background-active: var(--salt-palette-negative-weaker);
1369
+ --salt-actionable-negative-subtle-background-hover: var(--salt-palette-negative-weakest);
1396
1370
  --salt-actionable-negative-subtle-background: var(--salt-palette-alpha-none);
1397
1371
  --salt-actionable-negative-subtle-borderColor-active: var(--salt-palette-negative);
1398
- --salt-actionable-negative-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
1399
1372
  --salt-actionable-negative-subtle-borderColor-hover: var(--salt-palette-negative);
1400
1373
  --salt-actionable-negative-subtle-borderColor: var(--salt-palette-alpha-none);
1401
- --salt-actionable-negative-subtle-foreground-active: var(--salt-palette-foreground-primary-alt);
1402
- --salt-actionable-negative-subtle-foreground-disabled: var(--salt-palette-negative-strong-disabled);
1403
- --salt-actionable-negative-subtle-foreground-hover: var(--salt-palette-foreground-primary-alt);
1374
+ --salt-actionable-negative-subtle-foreground-active: var(--salt-palette-foreground-primary);
1375
+ --salt-actionable-negative-subtle-foreground-hover: var(--salt-palette-negative-stronger);
1404
1376
  --salt-actionable-negative-subtle-foreground: var(--salt-palette-negative-strong);
1405
- --salt-actionable-positive-bold-background-active: var(--salt-palette-positive-action-active);
1406
- --salt-actionable-positive-bold-background-disabled: var(--salt-palette-positive-disabled);
1407
- --salt-actionable-positive-bold-background-hover: var(--salt-palette-positive-action-hover);
1377
+ --salt-actionable-positive-bold-background-active: var(--salt-palette-positive-weaker);
1378
+ --salt-actionable-positive-bold-background-hover: var(--salt-palette-positive);
1408
1379
  --salt-actionable-positive-bold-background: var(--salt-palette-positive);
1409
1380
  --salt-actionable-positive-bold-borderColor-active: var(--salt-palette-positive);
1410
- --salt-actionable-positive-bold-borderColor-disabled: var(--salt-palette-alpha-none);
1411
- --salt-actionable-positive-bold-borderColor-hover: var(--salt-palette-positive);
1381
+ --salt-actionable-positive-bold-borderColor-hover: var(--salt-palette-alpha-contrast-high);
1412
1382
  --salt-actionable-positive-bold-borderColor: var(--salt-palette-positive);
1413
- --salt-actionable-positive-bold-foreground-active: var(--salt-palette-foreground-primary-alt);
1414
- --salt-actionable-positive-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
1383
+ --salt-actionable-positive-bold-foreground-active: var(--salt-palette-foreground-primary);
1415
1384
  --salt-actionable-positive-bold-foreground-hover: var(--salt-palette-foreground-primary-alt);
1416
1385
  --salt-actionable-positive-bold-foreground: var(--salt-palette-foreground-primary-alt);
1417
- --salt-actionable-positive-background-active: var(--salt-palette-positive-action-active);
1418
- --salt-actionable-positive-background-disabled: var(--salt-palette-alpha-none);
1419
- --salt-actionable-positive-background-hover: var(--salt-palette-positive-action-hover);
1386
+ --salt-actionable-positive-background-active: var(--salt-palette-positive-weaker);
1387
+ --salt-actionable-positive-background-hover: var(--salt-palette-positive-weakest);
1420
1388
  --salt-actionable-positive-background: var(--salt-palette-alpha-none);
1421
1389
  --salt-actionable-positive-borderColor-active: var(--salt-palette-positive);
1422
- --salt-actionable-positive-borderColor-disabled: var(--salt-palette-positive-disabled);
1423
1390
  --salt-actionable-positive-borderColor-hover: var(--salt-palette-positive);
1424
1391
  --salt-actionable-positive-borderColor: var(--salt-palette-positive);
1425
- --salt-actionable-positive-foreground-active: var(--salt-palette-foreground-primary-alt);
1426
- --salt-actionable-positive-foreground-disabled: var(--salt-palette-positive-strong-disabled);
1427
- --salt-actionable-positive-foreground-hover: var(--salt-palette-foreground-primary-alt);
1392
+ --salt-actionable-positive-foreground-active: var(--salt-palette-foreground-primary);
1393
+ --salt-actionable-positive-foreground-hover: var(--salt-palette-positive-stronger);
1428
1394
  --salt-actionable-positive-foreground: var(--salt-palette-positive-strong);
1429
- --salt-actionable-positive-subtle-background-active: var(--salt-palette-positive-action-active);
1430
- --salt-actionable-positive-subtle-background-disabled: var(--salt-palette-alpha-none);
1431
- --salt-actionable-positive-subtle-background-hover: var(--salt-palette-positive-action-hover);
1395
+ --salt-actionable-positive-background-selected: var(--salt-palette-positive);
1396
+ --salt-actionable-positive-borderColor-selected: var(--salt-palette-positive);
1397
+ --salt-actionable-positive-foreground-selected: var(--salt-palette-foreground-primary-alt);
1398
+ --salt-actionable-positive-subtle-background-active: var(--salt-palette-positive-weaker);
1399
+ --salt-actionable-positive-subtle-background-hover: var(--salt-palette-positive-weakest);
1432
1400
  --salt-actionable-positive-subtle-background: var(--salt-palette-alpha-none);
1433
1401
  --salt-actionable-positive-subtle-borderColor-active: var(--salt-palette-positive);
1434
- --salt-actionable-positive-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
1435
1402
  --salt-actionable-positive-subtle-borderColor-hover: var(--salt-palette-positive);
1436
1403
  --salt-actionable-positive-subtle-borderColor: var(--salt-palette-alpha-none);
1437
- --salt-actionable-positive-subtle-foreground-active: var(--salt-palette-foreground-primary-alt);
1438
- --salt-actionable-positive-subtle-foreground-disabled: var(--salt-palette-positive-strong-disabled);
1439
- --salt-actionable-positive-subtle-foreground-hover: var(--salt-palette-foreground-primary-alt);
1404
+ --salt-actionable-positive-subtle-foreground-active: var(--salt-palette-foreground-primary);
1405
+ --salt-actionable-positive-subtle-foreground-hover: var(--salt-palette-positive-stronger);
1440
1406
  --salt-actionable-positive-subtle-foreground: var(--salt-palette-positive-strong);
1441
- --salt-actionable-caution-bold-background-active: var(--salt-palette-warning-action-active);
1442
- --salt-actionable-caution-bold-background-disabled: var(--salt-palette-warning-disabled);
1443
- --salt-actionable-caution-bold-background-hover: var(--salt-palette-warning-action-hover);
1407
+ --salt-actionable-caution-bold-background-active: var(--salt-palette-warning-weaker);
1408
+ --salt-actionable-caution-bold-background-hover: var(--salt-palette-warning);
1444
1409
  --salt-actionable-caution-bold-background: var(--salt-palette-warning);
1445
1410
  --salt-actionable-caution-bold-borderColor-active: var(--salt-palette-warning);
1446
- --salt-actionable-caution-bold-borderColor-disabled: var(--salt-palette-alpha-none);
1447
- --salt-actionable-caution-bold-borderColor-hover: var(--salt-palette-warning);
1411
+ --salt-actionable-caution-bold-borderColor-hover: var(--salt-palette-alpha-contrast-high);
1448
1412
  --salt-actionable-caution-bold-borderColor: var(--salt-palette-warning);
1449
- --salt-actionable-caution-bold-foreground-active: var(--salt-palette-foreground-primary-alt);
1450
- --salt-actionable-caution-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
1413
+ --salt-actionable-caution-bold-foreground-active: var(--salt-palette-foreground-primary);
1451
1414
  --salt-actionable-caution-bold-foreground-hover: var(--salt-palette-foreground-primary-alt);
1452
1415
  --salt-actionable-caution-bold-foreground: var(--salt-palette-foreground-primary-alt);
1453
- --salt-actionable-caution-background-active: var(--salt-palette-warning-action-active);
1454
- --salt-actionable-caution-background-disabled: var(--salt-palette-alpha-none);
1455
- --salt-actionable-caution-background-hover: var(--salt-palette-warning-action-hover);
1416
+ --salt-actionable-caution-background-active: var(--salt-palette-warning-weaker);
1417
+ --salt-actionable-caution-background-hover: var(--salt-palette-warning-weakest);
1456
1418
  --salt-actionable-caution-background: var(--salt-palette-alpha-none);
1457
1419
  --salt-actionable-caution-borderColor-active: var(--salt-palette-warning);
1458
- --salt-actionable-caution-borderColor-disabled: var(--salt-palette-warning-disabled);
1459
1420
  --salt-actionable-caution-borderColor-hover: var(--salt-palette-warning);
1460
1421
  --salt-actionable-caution-borderColor: var(--salt-palette-warning);
1461
- --salt-actionable-caution-foreground-active: var(--salt-palette-foreground-primary-alt);
1462
- --salt-actionable-caution-foreground-disabled: var(--salt-palette-warning-strong-disabled);
1463
- --salt-actionable-caution-foreground-hover: var(--salt-palette-foreground-primary-alt);
1422
+ --salt-actionable-caution-foreground-active: var(--salt-palette-foreground-primary);
1423
+ --salt-actionable-caution-foreground-hover: var(--salt-palette-warning-stronger);
1464
1424
  --salt-actionable-caution-foreground: var(--salt-palette-warning-strong);
1465
- --salt-actionable-caution-subtle-background-active: var(--salt-palette-warning-action-active);
1466
- --salt-actionable-caution-subtle-background-disabled: var(--salt-palette-alpha-none);
1467
- --salt-actionable-caution-subtle-background-hover: var(--salt-palette-warning-action-hover);
1425
+ --salt-actionable-caution-background-selected: var(--salt-palette-warning);
1426
+ --salt-actionable-caution-borderColor-selected: var(--salt-palette-warning);
1427
+ --salt-actionable-caution-foreground-selected: var(--salt-palette-foreground-primary-alt);
1428
+ --salt-actionable-caution-subtle-background-active: var(--salt-palette-warning-weaker);
1429
+ --salt-actionable-caution-subtle-background-hover: var(--salt-palette-warning-weakest);
1468
1430
  --salt-actionable-caution-subtle-background: var(--salt-palette-alpha-none);
1469
1431
  --salt-actionable-caution-subtle-borderColor-active: var(--salt-palette-warning);
1470
- --salt-actionable-caution-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
1471
1432
  --salt-actionable-caution-subtle-borderColor-hover: var(--salt-palette-warning);
1472
1433
  --salt-actionable-caution-subtle-borderColor: var(--salt-palette-alpha-none);
1473
- --salt-actionable-caution-subtle-foreground-active: var(--salt-palette-foreground-primary-alt);
1474
- --salt-actionable-caution-subtle-foreground-disabled: var(--salt-palette-warning-strong-disabled);
1475
- --salt-actionable-caution-subtle-foreground-hover: var(--salt-palette-foreground-primary-alt);
1434
+ --salt-actionable-caution-subtle-foreground-active: var(--salt-palette-foreground-primary);
1435
+ --salt-actionable-caution-subtle-foreground-hover: var(--salt-palette-warning-stronger);
1476
1436
  --salt-actionable-caution-subtle-foreground: var(--salt-palette-warning-strong);
1477
1437
  }
1478
1438
 
@@ -1643,6 +1603,19 @@
1643
1603
  --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
1644
1604
  }
1645
1605
 
1606
+ /* css/next/characteristics/layout.css */
1607
+ .salt-density-low,
1608
+ .salt-density-medium,
1609
+ .salt-density-high {
1610
+ --salt-layout-page-margin: var(--salt-spacing-300);
1611
+ --salt-layout-gap: var(--salt-spacing-300);
1612
+ }
1613
+ .salt-density-touch,
1614
+ .salt-density-mobile {
1615
+ --salt-layout-page-margin: var(--salt-spacing-100);
1616
+ --salt-layout-gap: var(--salt-spacing-100);
1617
+ }
1618
+
1646
1619
  /* css/next/characteristics/navigable.css */
1647
1620
  .salt-theme.salt-theme-next {
1648
1621
  --salt-navigable-indicator-hover: var(--salt-palette-neutral);
@@ -1900,6 +1873,31 @@
1900
1873
  --salt-text-notation-fontSize: 8px;
1901
1874
  --salt-text-notation-lineHeight: 10px;
1902
1875
  }
1876
+ .salt-density-mobile {
1877
+ --salt-text-h1-fontSize: 42px;
1878
+ --salt-text-h1-lineHeight: 54px;
1879
+ --salt-text-h2-fontSize: 32px;
1880
+ --salt-text-h2-lineHeight: 42px;
1881
+ --salt-text-h3-fontSize: 24px;
1882
+ --salt-text-h3-lineHeight: 32px;
1883
+ --salt-text-h4-fontSize: 16px;
1884
+ --salt-text-h4-lineHeight: 21px;
1885
+ --salt-text-label-fontSize: 14px;
1886
+ --salt-text-label-lineHeight: 18px;
1887
+ --salt-text-fontSize: 16px;
1888
+ --salt-text-lineHeight: 21px;
1889
+ --salt-text-minHeight: 21px;
1890
+ --salt-text-display1-fontSize: 84px;
1891
+ --salt-text-display1-lineHeight: 109px;
1892
+ --salt-text-display2-fontSize: 58px;
1893
+ --salt-text-display2-lineHeight: 76px;
1894
+ --salt-text-display3-fontSize: 42px;
1895
+ --salt-text-display3-lineHeight: 54px;
1896
+ --salt-text-display4-fontSize: 42px;
1897
+ --salt-text-display4-lineHeight: 54px;
1898
+ --salt-text-notation-fontSize: 14px;
1899
+ --salt-text-notation-lineHeight: 18px;
1900
+ }
1903
1901
 
1904
1902
  /* css/deprecated/foundations.css */
1905
1903
  .salt-theme {
@@ -2134,6 +2132,51 @@
2134
2132
  --salt-status-positive-foreground: var(--salt-palette-positive);
2135
2133
  --salt-track-borderColor: var(--salt-palette-alpha-contrast-high);
2136
2134
  --salt-track-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
2135
+ --salt-actionable-accented-bold-background-disabled: var(--salt-palette-accent-disabled);
2136
+ --salt-actionable-accented-bold-borderColor-disabled: var(--salt-palette-alpha-none);
2137
+ --salt-actionable-accented-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
2138
+ --salt-actionable-accented-background-disabled: var(--salt-palette-alpha-none);
2139
+ --salt-actionable-accented-borderColor-disabled: var(--salt-palette-accent-disabled);
2140
+ --salt-actionable-accented-foreground-disabled: var(--salt-palette-accent-strong-disabled);
2141
+ --salt-actionable-accented-subtle-background-disabled: var(--salt-palette-alpha-none);
2142
+ --salt-actionable-accented-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
2143
+ --salt-actionable-accented-subtle-foreground-disabled: var(--salt-palette-accent-strong-disabled);
2144
+ --salt-actionable-bold-background-disabled: var(--salt-palette-neutral-disabled);
2145
+ --salt-actionable-bold-borderColor-disabled: var(--salt-palette-alpha-none);
2146
+ --salt-actionable-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
2147
+ --salt-actionable-background-disabled: var(--salt-palette-alpha-none);
2148
+ --salt-actionable-borderColor-disabled: var(--salt-palette-neutral-disabled);
2149
+ --salt-actionable-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
2150
+ --salt-actionable-subtle-background-disabled: var(--salt-palette-alpha-none);
2151
+ --salt-actionable-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
2152
+ --salt-actionable-subtle-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
2153
+ --salt-actionable-negative-bold-background-disabled: var(--salt-palette-negative-disabled);
2154
+ --salt-actionable-negative-bold-borderColor-disabled: var(--salt-palette-alpha-none);
2155
+ --salt-actionable-negative-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
2156
+ --salt-actionable-negative-background-disabled: var(--salt-palette-alpha-none);
2157
+ --salt-actionable-negative-borderColor-disabled: var(--salt-palette-negative-disabled);
2158
+ --salt-actionable-negative-foreground-disabled: var(--salt-palette-negative-strong-disabled);
2159
+ --salt-actionable-negative-subtle-background-disabled: var(--salt-palette-alpha-none);
2160
+ --salt-actionable-negative-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
2161
+ --salt-actionable-negative-subtle-foreground-disabled: var(--salt-palette-negative-strong-disabled);
2162
+ --salt-actionable-positive-bold-background-disabled: var(--salt-palette-positive-disabled);
2163
+ --salt-actionable-positive-bold-borderColor-disabled: var(--salt-palette-alpha-none);
2164
+ --salt-actionable-positive-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
2165
+ --salt-actionable-positive-background-disabled: var(--salt-palette-alpha-none);
2166
+ --salt-actionable-positive-borderColor-disabled: var(--salt-palette-positive-disabled);
2167
+ --salt-actionable-positive-foreground-disabled: var(--salt-palette-positive-strong-disabled);
2168
+ --salt-actionable-positive-subtle-background-disabled: var(--salt-palette-alpha-none);
2169
+ --salt-actionable-positive-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
2170
+ --salt-actionable-positive-subtle-foreground-disabled: var(--salt-palette-positive-strong-disabled);
2171
+ --salt-actionable-caution-bold-background-disabled: var(--salt-palette-warning-disabled);
2172
+ --salt-actionable-caution-bold-borderColor-disabled: var(--salt-palette-alpha-none);
2173
+ --salt-actionable-caution-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
2174
+ --salt-actionable-caution-background-disabled: var(--salt-palette-alpha-none);
2175
+ --salt-actionable-caution-borderColor-disabled: var(--salt-palette-warning-disabled);
2176
+ --salt-actionable-caution-foreground-disabled: var(--salt-palette-warning-strong-disabled);
2177
+ --salt-actionable-caution-subtle-background-disabled: var(--salt-palette-alpha-none);
2178
+ --salt-actionable-caution-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
2179
+ --salt-actionable-caution-subtle-foreground-disabled: var(--salt-palette-warning-strong-disabled);
2137
2180
  }
2138
2181
 
2139
2182
  /* css/next/deprecated/foundations.css */
@@ -2150,6 +2193,23 @@
2150
2193
  --salt-palette-positive-weak: var(--salt-color-green-100);
2151
2194
  --salt-palette-info-weak: var(--salt-color-blue-100);
2152
2195
  --salt-palette-negative-weak: var(--salt-color-red-100);
2196
+ --salt-palette-warning-action-active: var(--salt-color-orange-800);
2197
+ --salt-palette-neutral-action-active: var(--salt-color-gray-800);
2198
+ --salt-palette-positive-action-active: var(--salt-color-green-800);
2199
+ --salt-palette-negative-action-active: var(--salt-color-red-800);
2200
+ --salt-palette-warning-action-hover: var(--salt-color-orange-600);
2201
+ --salt-palette-neutral-action-hover: var(--salt-color-gray-600);
2202
+ --salt-palette-positive-action-hover: var(--salt-color-green-600);
2203
+ --salt-palette-negative-action-hover: var(--salt-color-red-600);
2204
+ --salt-palette-negative-disabled: var(--salt-color-red-500-40a);
2205
+ --salt-palette-negative-strong-disabled: var(--salt-color-red-600-40a);
2206
+ --salt-palette-positive-disabled: var(--salt-color-green-500-40a);
2207
+ --salt-palette-positive-strong-disabled: var(--salt-color-green-600-40a);
2208
+ --salt-palette-warning-disabled: var(--salt-color-orange-500-40a);
2209
+ --salt-palette-warning-strong-disabled: var(--salt-color-orange-600-40a);
2210
+ --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-300-40a);
2211
+ --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-300-10a);
2212
+ --salt-palette-neutral-weak-disabled: var(--salt-color-gray-400-40a);
2153
2213
  }
2154
2214
  .salt-theme[data-mode=dark] {
2155
2215
  --salt-palette-foreground-active: var(--salt-color-blue-300);
@@ -2158,6 +2218,47 @@
2158
2218
  --salt-palette-positive-weak: var(--salt-color-green-900);
2159
2219
  --salt-palette-info-weak: var(--salt-color-blue-900);
2160
2220
  --salt-palette-negative-weak: var(--salt-color-red-900);
2221
+ --salt-palette-warning-action-active: var(--salt-color-orange-800);
2222
+ --salt-palette-neutral-action-active: var(--salt-color-gray-800);
2223
+ --salt-palette-positive-action-active: var(--salt-color-green-800);
2224
+ --salt-palette-negative-action-active: var(--salt-color-red-800);
2225
+ --salt-palette-warning-action-hover: var(--salt-color-orange-600);
2226
+ --salt-palette-neutral-action-hover: var(--salt-color-gray-600);
2227
+ --salt-palette-positive-action-hover: var(--salt-color-green-600);
2228
+ --salt-palette-negative-action-hover: var(--salt-color-red-600);
2229
+ --salt-palette-negative-disabled: var(--salt-color-red-500-40a);
2230
+ --salt-palette-negative-strong-disabled: var(--salt-color-red-400-40a);
2231
+ --salt-palette-positive-disabled: var(--salt-color-green-500-40a);
2232
+ --salt-palette-positive-strong-disabled: var(--salt-color-green-400-40a);
2233
+ --salt-palette-warning-disabled: var(--salt-color-orange-500-40a);
2234
+ --salt-palette-warning-strong-disabled: var(--salt-color-orange-400-40a);
2235
+ --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-700-40a);
2236
+ --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-700-10a);
2237
+ --salt-palette-neutral-weak-disabled: var(--salt-color-gray-600-40a);
2238
+ }
2239
+ .salt-theme.salt-theme-next[data-mode=light][data-accent=blue] {
2240
+ --salt-palette-accent-action-active: var(--salt-color-blue-800);
2241
+ --salt-palette-accent-action-hover: var(--salt-color-blue-600);
2242
+ --salt-palette-accent-strong-disabled: var(--salt-color-blue-600-40a);
2243
+ --salt-palette-accent-stronger-disabled: var(--salt-color-blue-700-40a);
2244
+ }
2245
+ .salt-theme.salt-theme-next[data-mode=dark][data-accent=blue] {
2246
+ --salt-palette-accent-action-active: var(--salt-color-blue-800);
2247
+ --salt-palette-accent-action-hover: var(--salt-color-blue-600);
2248
+ --salt-palette-accent-strong-disabled: var(--salt-color-blue-400-40a);
2249
+ --salt-palette-accent-stronger-disabled: var(--salt-color-blue-300-40a);
2250
+ }
2251
+ .salt-theme.salt-theme-next[data-mode=light][data-accent=teal] {
2252
+ --salt-palette-accent-action-active: var(--salt-color-teal-800);
2253
+ --salt-palette-accent-action-hover: var(--salt-color-teal-600);
2254
+ --salt-palette-accent-strong-disabled: var(--salt-color-teal-600-40a);
2255
+ --salt-palette-accent-stronger-disabled: var(--salt-color-teal-700-40a);
2256
+ }
2257
+ .salt-theme.salt-theme-next[data-mode=dark][data-accent=teal] {
2258
+ --salt-palette-accent-action-active: var(--salt-color-teal-800);
2259
+ --salt-palette-accent-action-hover: var(--salt-color-teal-600);
2260
+ --salt-palette-accent-strong-disabled: var(--salt-color-teal-400-40a);
2261
+ --salt-palette-accent-stronger-disabled: var(--salt-color-teal-300-40a);
2161
2262
  }
2162
2263
 
2163
2264
  /* css/theme-next.css */