@salt-ds/theme 1.33.0 → 1.35.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/css/theme.css CHANGED
@@ -18,36 +18,6 @@
18
18
  --salt-color-black-50a: rgba(var(--salt-color-black-rgb), 0.5);
19
19
  --salt-color-black-65a: rgba(var(--salt-color-black-rgb), 0.65);
20
20
  --salt-color-black-80a: rgba(var(--salt-color-black-rgb), 0.8);
21
- --salt-color-blue-30-40a: rgba(var(--salt-color-blue-30-rgb), 0.4);
22
- --salt-color-blue-100-40a: rgba(var(--salt-color-blue-100-rgb), 0.4);
23
- --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
24
- --salt-color-blue-500-40a: rgba(var(--salt-color-blue-500-rgb), 0.4);
25
- --salt-color-blue-600-40a: rgba(var(--salt-color-blue-600-rgb), 0.4);
26
- --salt-color-blue-700-40a: rgba(var(--salt-color-blue-700-rgb), 0.4);
27
- --salt-color-gray-20-40a: rgba(var(--salt-color-gray-20-rgb), 0.4);
28
- --salt-color-gray-30-40a: rgba(var(--salt-color-gray-30-rgb), 0.4);
29
- --salt-color-gray-50-40a: rgba(var(--salt-color-gray-50-rgb), 0.4);
30
- --salt-color-gray-60-40a: rgba(var(--salt-color-gray-60-rgb), 0.4);
31
- --salt-color-gray-70-40a: rgba(var(--salt-color-gray-70-rgb), 0.4);
32
- --salt-color-gray-90-15a: rgba(var(--salt-color-gray-90-rgb), 0.15);
33
- --salt-color-gray-90-40a: rgba(var(--salt-color-gray-90-rgb), 0.4);
34
- --salt-color-gray-200-15a: rgba(var(--salt-color-gray-200-rgb), 0.15);
35
- --salt-color-gray-200-40a: rgba(var(--salt-color-gray-200-rgb), 0.4);
36
- --salt-color-gray-300-40a: rgba(var(--salt-color-gray-300-rgb), 0.4);
37
- --salt-color-gray-600-40a: rgba(var(--salt-color-gray-600-rgb), 0.4);
38
- --salt-color-gray-800-40a: rgba(var(--salt-color-gray-800-rgb), 0.4);
39
- --salt-color-gray-900-40a: rgba(var(--salt-color-gray-900-rgb), 0.4);
40
- --salt-color-green-200-40a: rgba(var(--salt-color-green-200-rgb), 0.4);
41
- --salt-color-green-500-40a: rgba(var(--salt-color-green-500-rgb), 0.4);
42
- --salt-color-green-600-40a: rgba(var(--salt-color-green-600-rgb), 0.4);
43
- --salt-color-orange-400-40a: rgba(var(--salt-color-orange-400-rgb), 0.4);
44
- --salt-color-orange-500-40a: rgba(var(--salt-color-orange-500-rgb), 0.4);
45
- --salt-color-orange-600-40a: rgba(var(--salt-color-orange-600-rgb), 0.4);
46
- --salt-color-orange-700-40a: rgba(var(--salt-color-orange-700-rgb), 0.4);
47
- --salt-color-orange-850-40a: rgba(var(--salt-color-orange-850-rgb), 0.4);
48
- --salt-color-red-200-40a: rgba(var(--salt-color-red-200-rgb), 0.4);
49
- --salt-color-red-500-40a: rgba(var(--salt-color-red-500-rgb), 0.4);
50
- --salt-color-red-600-40a: rgba(var(--salt-color-red-600-rgb), 0.4);
51
21
  }
52
22
 
53
23
  /* css/foundations/animation.css */
@@ -204,14 +174,248 @@
204
174
 
205
175
  /* css/foundations/color.css */
206
176
  .salt-theme {
207
- --salt-color-white-rgb:
208
- 255,
209
- 255,
210
- 255;
211
177
  --salt-color-black-rgb:
212
178
  0,
213
179
  0,
214
180
  0;
181
+ --salt-color-white-rgb:
182
+ 255,
183
+ 255,
184
+ 255;
185
+ --salt-color-black: rgb(var(--salt-color-black-rgb));
186
+ --salt-color-white: rgb(var(--salt-color-white-rgb));
187
+ }
188
+
189
+ /* css/foundations/cursor.css */
190
+ .salt-theme {
191
+ --salt-cursor-active: pointer;
192
+ --salt-cursor-disabled: not-allowed;
193
+ --salt-cursor-drag-ew: ew-resize;
194
+ --salt-cursor-drag-ns: ns-resize;
195
+ --salt-cursor-grab: grab;
196
+ --salt-cursor-grab-active: grabbing;
197
+ --salt-cursor-hover: pointer;
198
+ --salt-cursor-pending: progress;
199
+ --salt-cursor-readonly: text;
200
+ --salt-cursor-text: text;
201
+ }
202
+
203
+ /* css/foundations/curve.css */
204
+ .salt-density-high {
205
+ --salt-curve-0: 0;
206
+ --salt-curve-50: 1px;
207
+ --salt-curve-100: 2px;
208
+ --salt-curve-150: 3px;
209
+ --salt-curve-200: 4px;
210
+ --salt-curve-250: 5px;
211
+ --salt-curve-999: 999px;
212
+ }
213
+ .salt-density-medium {
214
+ --salt-curve-0: 0;
215
+ --salt-curve-50: 2px;
216
+ --salt-curve-100: 4px;
217
+ --salt-curve-150: 6px;
218
+ --salt-curve-200: 8px;
219
+ --salt-curve-250: 10px;
220
+ --salt-curve-999: 999px;
221
+ }
222
+ .salt-density-low {
223
+ --salt-curve-0: 0;
224
+ --salt-curve-50: 3px;
225
+ --salt-curve-100: 6px;
226
+ --salt-curve-150: 9px;
227
+ --salt-curve-200: 12px;
228
+ --salt-curve-250: 15px;
229
+ --salt-curve-999: 999px;
230
+ }
231
+ .salt-density-touch {
232
+ --salt-curve-0: 0;
233
+ --salt-curve-50: 4px;
234
+ --salt-curve-100: 8px;
235
+ --salt-curve-150: 12px;
236
+ --salt-curve-200: 16px;
237
+ --salt-curve-250: 20px;
238
+ --salt-curve-999: 999px;
239
+ }
240
+
241
+ /* css/foundations/duration.css */
242
+ .salt-theme {
243
+ --salt-duration-instant: 0ms;
244
+ --salt-duration-perceptible: 300ms;
245
+ --salt-duration-notable: 1000ms;
246
+ --salt-duration-cutoff: 10000ms;
247
+ }
248
+
249
+ /* css/foundations/size.css */
250
+ .salt-density-high {
251
+ --salt-size-adornment: 6px;
252
+ --salt-size-bar: 2px;
253
+ --salt-size-base: 20px;
254
+ --salt-size-icon: 10px;
255
+ --salt-size-indicator: 2px;
256
+ --salt-size-selectable: 12px;
257
+ --salt-size-bar-strong: 4px;
258
+ }
259
+ .salt-density-medium {
260
+ --salt-size-adornment: 8px;
261
+ --salt-size-bar: 4px;
262
+ --salt-size-base: 28px;
263
+ --salt-size-icon: 12px;
264
+ --salt-size-indicator: 3px;
265
+ --salt-size-selectable: 14px;
266
+ --salt-size-bar-strong: 8px;
267
+ }
268
+ .salt-density-low {
269
+ --salt-size-adornment: 10px;
270
+ --salt-size-bar: 6px;
271
+ --salt-size-base: 36px;
272
+ --salt-size-icon: 14px;
273
+ --salt-size-indicator: 4px;
274
+ --salt-size-selectable: 16px;
275
+ --salt-size-bar-strong: 12px;
276
+ }
277
+ .salt-density-touch {
278
+ --salt-size-adornment: 12px;
279
+ --salt-size-bar: 8px;
280
+ --salt-size-base: 44px;
281
+ --salt-size-icon: 16px;
282
+ --salt-size-indicator: 5px;
283
+ --salt-size-selectable: 18px;
284
+ --salt-size-bar-strong: 16px;
285
+ }
286
+ .salt-density-touch,
287
+ .salt-density-low,
288
+ .salt-density-medium,
289
+ .salt-density-high {
290
+ --salt-size-fixed-100: 1px;
291
+ --salt-size-fixed-200: 2px;
292
+ --salt-size-fixed-300: 3px;
293
+ --salt-size-fixed-400: 4px;
294
+ --salt-size-fixed-500: 5px;
295
+ --salt-size-fixed-600: 6px;
296
+ --salt-size-fixed-700: 7px;
297
+ --salt-size-fixed-800: 8px;
298
+ --salt-size-fixed-900: 9px;
299
+ }
300
+
301
+ /* css/foundations/spacing.css */
302
+ .salt-density-touch {
303
+ --salt-spacing-100: 16px;
304
+ }
305
+ .salt-density-low {
306
+ --salt-spacing-100: 12px;
307
+ }
308
+ .salt-density-medium {
309
+ --salt-spacing-100: 8px;
310
+ }
311
+ .salt-density-high {
312
+ --salt-spacing-100: 4px;
313
+ }
314
+ .salt-density-touch,
315
+ .salt-density-low,
316
+ .salt-density-medium,
317
+ .salt-density-high {
318
+ --salt-spacing-25: calc(0.25 * var(--salt-spacing-100));
319
+ --salt-spacing-50: calc(0.5 * var(--salt-spacing-100));
320
+ --salt-spacing-75: calc(0.75 * var(--salt-spacing-100));
321
+ --salt-spacing-150: calc(1.5 * var(--salt-spacing-100));
322
+ --salt-spacing-200: calc(2 * var(--salt-spacing-100));
323
+ --salt-spacing-250: calc(2.5 * var(--salt-spacing-100));
324
+ --salt-spacing-300: calc(3 * var(--salt-spacing-100));
325
+ --salt-spacing-350: calc(3.5 * var(--salt-spacing-100));
326
+ --salt-spacing-400: calc(4 * var(--salt-spacing-100));
327
+ --salt-spacing-450: calc(4.5 * var(--salt-spacing-100));
328
+ --salt-spacing-500: calc(5 * var(--salt-spacing-100));
329
+ --salt-spacing-550: calc(5.5 * var(--salt-spacing-100));
330
+ --salt-spacing-600: calc(6 * var(--salt-spacing-100));
331
+ --salt-spacing-650: calc(6.5 * var(--salt-spacing-100));
332
+ --salt-spacing-700: calc(7 * var(--salt-spacing-100));
333
+ --salt-spacing-750: calc(7.5 * var(--salt-spacing-100));
334
+ --salt-spacing-800: calc(8 * var(--salt-spacing-100));
335
+ --salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
336
+ --salt-spacing-900: calc(9 * var(--salt-spacing-100));
337
+ --salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
338
+ --salt-spacing-fixed-100: 1px;
339
+ --salt-spacing-fixed-200: 2px;
340
+ --salt-spacing-fixed-300: 3px;
341
+ --salt-spacing-fixed-400: 4px;
342
+ --salt-spacing-fixed-500: 5px;
343
+ --salt-spacing-fixed-600: 6px;
344
+ --salt-spacing-fixed-700: 7px;
345
+ --salt-spacing-fixed-800: 8px;
346
+ --salt-spacing-fixed-900: 9px;
347
+ }
348
+
349
+ /* css/foundations/typography.css */
350
+ .salt-theme {
351
+ --salt-typography-fontFamily-openSans: "Open Sans";
352
+ --salt-typography-fontFamily-amplitude: "Amplitude";
353
+ --salt-typography-fontFamily-ptMono: "PT Mono";
354
+ --salt-typography-fontWeight-light: 300;
355
+ --salt-typography-fontWeight-regular: 400;
356
+ --salt-typography-fontWeight-medium: 500;
357
+ --salt-typography-fontWeight-semiBold: 600;
358
+ --salt-typography-fontWeight-bold: 700;
359
+ --salt-typography-fontWeight-extraBold: 800;
360
+ --salt-typography-textDecoration-none: none;
361
+ --salt-typography-textDecoration-underline: underline;
362
+ --salt-typography-textDecoration-italic: italic;
363
+ }
364
+
365
+ /* css/foundations/zindex.css */
366
+ .salt-density-touch,
367
+ .salt-density-low,
368
+ .salt-density-medium,
369
+ .salt-density-high {
370
+ --salt-zIndex-default: 1;
371
+ --salt-zIndex-popout: 1000;
372
+ --salt-zIndex-appHeader: 1100;
373
+ --salt-zIndex-drawer: 1200;
374
+ --salt-zIndex-modal: 1300;
375
+ --salt-zIndex-notification: 1400;
376
+ --salt-zIndex-dragObject: 1420;
377
+ --salt-zIndex-contextMenu: 1450;
378
+ --salt-zIndex-flyover: 1500;
379
+ }
380
+
381
+ /* css/foundations/index.css */
382
+
383
+ /* css/legacy/foundations/alpha.css */
384
+ .salt-theme {
385
+ --salt-color-blue-30-40a: rgba(var(--salt-color-blue-30-rgb), 0.4);
386
+ --salt-color-blue-100-40a: rgba(var(--salt-color-blue-100-rgb), 0.4);
387
+ --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
388
+ --salt-color-blue-500-40a: rgba(var(--salt-color-blue-500-rgb), 0.4);
389
+ --salt-color-blue-600-40a: rgba(var(--salt-color-blue-600-rgb), 0.4);
390
+ --salt-color-blue-700-40a: rgba(var(--salt-color-blue-700-rgb), 0.4);
391
+ --salt-color-gray-20-40a: rgba(var(--salt-color-gray-20-rgb), 0.4);
392
+ --salt-color-gray-30-40a: rgba(var(--salt-color-gray-30-rgb), 0.4);
393
+ --salt-color-gray-50-40a: rgba(var(--salt-color-gray-50-rgb), 0.4);
394
+ --salt-color-gray-60-40a: rgba(var(--salt-color-gray-60-rgb), 0.4);
395
+ --salt-color-gray-70-40a: rgba(var(--salt-color-gray-70-rgb), 0.4);
396
+ --salt-color-gray-90-15a: rgba(var(--salt-color-gray-90-rgb), 0.15);
397
+ --salt-color-gray-90-40a: rgba(var(--salt-color-gray-90-rgb), 0.4);
398
+ --salt-color-gray-200-15a: rgba(var(--salt-color-gray-200-rgb), 0.15);
399
+ --salt-color-gray-200-40a: rgba(var(--salt-color-gray-200-rgb), 0.4);
400
+ --salt-color-gray-300-40a: rgba(var(--salt-color-gray-300-rgb), 0.4);
401
+ --salt-color-gray-600-40a: rgba(var(--salt-color-gray-600-rgb), 0.4);
402
+ --salt-color-gray-800-40a: rgba(var(--salt-color-gray-800-rgb), 0.4);
403
+ --salt-color-gray-900-40a: rgba(var(--salt-color-gray-900-rgb), 0.4);
404
+ --salt-color-green-200-40a: rgba(var(--salt-color-green-200-rgb), 0.4);
405
+ --salt-color-green-500-40a: rgba(var(--salt-color-green-500-rgb), 0.4);
406
+ --salt-color-green-600-40a: rgba(var(--salt-color-green-600-rgb), 0.4);
407
+ --salt-color-orange-400-40a: rgba(var(--salt-color-orange-400-rgb), 0.4);
408
+ --salt-color-orange-500-40a: rgba(var(--salt-color-orange-500-rgb), 0.4);
409
+ --salt-color-orange-600-40a: rgba(var(--salt-color-orange-600-rgb), 0.4);
410
+ --salt-color-orange-700-40a: rgba(var(--salt-color-orange-700-rgb), 0.4);
411
+ --salt-color-orange-850-40a: rgba(var(--salt-color-orange-850-rgb), 0.4);
412
+ --salt-color-red-200-40a: rgba(var(--salt-color-red-200-rgb), 0.4);
413
+ --salt-color-red-500-40a: rgba(var(--salt-color-red-500-rgb), 0.4);
414
+ --salt-color-red-600-40a: rgba(var(--salt-color-red-600-rgb), 0.4);
415
+ }
416
+
417
+ /* css/legacy/foundations/color.css */
418
+ .salt-theme {
215
419
  --salt-color-red-10-rgb:
216
420
  255,
217
421
  227,
@@ -627,9 +831,7 @@
627
831
  --salt-color-gray-900-rgb:
628
832
  22,
629
833
  22,
630
- 22;
631
- --salt-color-white: rgb(var(--salt-color-white-rgb));
632
- --salt-color-black: rgb(var(--salt-color-black-rgb));
834
+ 22;
633
835
  --salt-color-red-10: rgb(var(--salt-color-red-10-rgb));
634
836
  --salt-color-red-20: rgb(var(--salt-color-red-20-rgb));
635
837
  --salt-color-red-30: rgb(var(--salt-color-red-30-rgb));
@@ -841,296 +1043,96 @@
841
1043
  --salt-color-autumn-600: rgb(153, 73, 18);
842
1044
  --salt-color-autumn-700: rgb(119, 55, 14);
843
1045
  --salt-color-autumn-800: rgb(86, 39, 10);
844
- --salt-color-autumn-900: rgb(56, 23, 0);
845
- --salt-color-lavender-100: rgb(250, 235, 250);
846
- --salt-color-lavender-200: rgb(237, 199, 237);
847
- --salt-color-lavender-300: rgb(212, 167, 212);
848
- --salt-color-lavender-400: rgb(186, 134, 186);
849
- --salt-color-lavender-500: rgb(148, 102, 148);
850
- --salt-color-lavender-600: rgb(126, 80, 126);
851
- --salt-color-lavender-700: rgb(105, 58, 105);
852
- --salt-color-lavender-800: rgb(84, 37, 84);
853
- --salt-color-lavender-900: rgb(64, 15, 64);
854
- --salt-color-ocean-100: rgb(227, 251, 255);
855
- --salt-color-ocean-200: rgb(180, 229, 240);
856
- --salt-color-ocean-300: rgb(131, 197, 212);
857
- --salt-color-ocean-400: rgb(80, 167, 186);
858
- --salt-color-ocean-500: rgb(0, 128, 148);
859
- --salt-color-ocean-600: rgb(0, 106, 122);
860
- --salt-color-ocean-700: rgb(0, 84, 97);
861
- --salt-color-ocean-800: rgb(0, 64, 74);
862
- --salt-color-ocean-900: rgb(0, 44, 51);
863
- --salt-color-smoke-100: rgb(242, 245, 250);
864
- --salt-color-smoke-200: rgb(208, 211, 216);
865
- --salt-color-smoke-300: rgb(176, 179, 184);
866
- --salt-color-smoke-400: rgb(144, 147, 152);
867
- --salt-color-smoke-500: rgb(114, 117, 122);
868
- --salt-color-smoke-600: rgb(93, 96, 101);
869
- --salt-color-smoke-700: rgb(73, 76, 81);
870
- --salt-color-smoke-800: rgb(53, 56, 61);
871
- --salt-color-smoke-900: rgb(35, 38, 43);
872
- --salt-color-fuchsia-100: rgb(255, 232, 247);
873
- --salt-color-fuchsia-200: rgb(255, 191, 229);
874
- --salt-color-fuchsia-300: rgb(240, 151, 203);
875
- --salt-color-fuchsia-400: rgb(222, 109, 178);
876
- --salt-color-fuchsia-500: rgb(194, 71, 149);
877
- --salt-color-fuchsia-600: rgb(167, 54, 125);
878
- --salt-color-fuchsia-700: rgb(140, 37, 101);
879
- --salt-color-fuchsia-800: rgb(114, 19, 79);
880
- --salt-color-fuchsia-900: rgb(89, 0, 57);
881
- --salt-color-lime-100: rgb(239, 245, 220);
882
- --salt-color-lime-200: rgb(215, 227, 168);
883
- --salt-color-lime-300: rgb(182, 196, 120);
884
- --salt-color-lime-400: rgb(146, 166, 71);
885
- --salt-color-lime-500: rgb(102, 125, 21);
886
- --salt-color-lime-600: rgb(85, 106, 16);
887
- --salt-color-lime-700: rgb(69, 87, 11);
888
- --salt-color-lime-800: rgb(53, 68, 6);
889
- --salt-color-lime-900: rgb(36, 46, 0);
890
- --salt-color-fur-100: rgb(255, 244, 235);
891
- --salt-color-fur-200: rgb(245, 214, 191);
892
- --salt-color-fur-300: rgb(219, 178, 147);
893
- --salt-color-fur-400: rgb(194, 144, 107);
894
- --salt-color-fur-500: rgb(153, 106, 69);
895
- --salt-color-fur-600: rgb(130, 85, 52);
896
- --salt-color-fur-700: rgb(107, 65, 36);
897
- --salt-color-fur-800: rgb(85, 46, 20);
898
- --salt-color-fur-900: rgb(64, 28, 0);
899
- --salt-color-violet-100: rgb(237, 239, 255);
900
- --salt-color-violet-200: rgb(202, 203, 252);
901
- --salt-color-violet-300: rgb(167, 169, 235);
902
- --salt-color-violet-400: rgb(134, 139, 219);
903
- --salt-color-violet-500: rgb(99, 110, 191);
904
- --salt-color-violet-600: rgb(81, 90, 159);
905
- --salt-color-violet-700: rgb(63, 71, 128);
906
- --salt-color-violet-800: rgb(47, 53, 99);
907
- --salt-color-violet-900: rgb(31, 36, 71);
908
- --salt-color-forest-100: rgb(237, 250, 245);
909
- --salt-color-forest-200: rgb(188, 232, 211);
910
- --salt-color-forest-300: rgb(141, 204, 174);
911
- --salt-color-forest-400: rgb(91, 176, 136);
912
- --salt-color-forest-500: rgb(35, 133, 94);
913
- --salt-color-forest-600: rgb(25, 111, 77);
914
- --salt-color-forest-700: rgb(15, 90, 61);
915
- --salt-color-forest-800: rgb(6, 70, 46);
916
- --salt-color-forest-900: rgb(0, 51, 31);
917
- }
918
-
919
- /* css/foundations/cursor.css */
920
- .salt-theme {
921
- --salt-cursor-active: pointer;
922
- --salt-cursor-disabled: not-allowed;
923
- --salt-cursor-drag-ew: ew-resize;
924
- --salt-cursor-drag-ns: ns-resize;
925
- --salt-cursor-grab: grab;
926
- --salt-cursor-grab-active: grabbing;
927
- --salt-cursor-hover: pointer;
928
- --salt-cursor-pending: progress;
929
- --salt-cursor-readonly: text;
930
- --salt-cursor-text: text;
931
- }
932
-
933
- /* css/foundations/curve.css */
934
- .salt-density-high {
935
- --salt-curve-0: 0;
936
- --salt-curve-50: 1px;
937
- --salt-curve-100: 2px;
938
- --salt-curve-150: 3px;
939
- --salt-curve-200: 4px;
940
- --salt-curve-250: 5px;
941
- --salt-curve-999: 999px;
942
- }
943
- .salt-density-medium {
944
- --salt-curve-0: 0;
945
- --salt-curve-50: 2px;
946
- --salt-curve-100: 4px;
947
- --salt-curve-150: 6px;
948
- --salt-curve-200: 8px;
949
- --salt-curve-250: 10px;
950
- --salt-curve-999: 999px;
951
- }
952
- .salt-density-low {
953
- --salt-curve-0: 0;
954
- --salt-curve-50: 3px;
955
- --salt-curve-100: 6px;
956
- --salt-curve-150: 9px;
957
- --salt-curve-200: 12px;
958
- --salt-curve-250: 15px;
959
- --salt-curve-999: 999px;
960
- }
961
- .salt-density-touch {
962
- --salt-curve-0: 0;
963
- --salt-curve-50: 4px;
964
- --salt-curve-100: 8px;
965
- --salt-curve-150: 12px;
966
- --salt-curve-200: 16px;
967
- --salt-curve-250: 20px;
968
- --salt-curve-999: 999px;
969
- }
970
-
971
- /* css/foundations/duration.css */
972
- .salt-theme {
973
- --salt-duration-instant: 0ms;
974
- --salt-duration-perceptible: 300ms;
975
- --salt-duration-notable: 1000ms;
976
- --salt-duration-cutoff: 10000ms;
977
- }
978
-
979
- /* css/foundations/shadow.css */
980
- .salt-theme[data-mode=light] {
981
- --salt-shadow-100-color: rgba(0, 0, 0, 0.1);
982
- --salt-shadow-200-color: rgba(0, 0, 0, 0.1);
983
- --salt-shadow-300-color: rgba(0, 0, 0, 0.15);
984
- --salt-shadow-400-color: rgba(0, 0, 0, 0.2);
985
- --salt-shadow-500-color: rgba(0, 0, 0, 0.3);
986
- }
987
- .salt-theme[data-mode=dark] {
988
- --salt-shadow-100-color: rgba(0, 0, 0, 0.5);
989
- --salt-shadow-200-color: rgba(0, 0, 0, 0.5);
990
- --salt-shadow-300-color: rgba(0, 0, 0, 0.55);
991
- --salt-shadow-400-color: rgba(0, 0, 0, 0.55);
992
- --salt-shadow-500-color: rgba(0, 0, 0, 0.65);
993
- }
994
- .salt-theme {
995
- --salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color);
996
- --salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color);
997
- --salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color);
998
- --salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color);
999
- --salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color);
1000
- }
1001
-
1002
- /* css/foundations/size.css */
1003
- .salt-density-high {
1004
- --salt-size-adornment: 6px;
1005
- --salt-size-bar: 2px;
1006
- --salt-size-base: 20px;
1007
- --salt-size-icon: 10px;
1008
- --salt-size-indicator: 2px;
1009
- --salt-size-selectable: 12px;
1010
- --salt-size-bar-strong: 4px;
1011
- }
1012
- .salt-density-medium {
1013
- --salt-size-adornment: 8px;
1014
- --salt-size-bar: 4px;
1015
- --salt-size-base: 28px;
1016
- --salt-size-icon: 12px;
1017
- --salt-size-indicator: 3px;
1018
- --salt-size-selectable: 14px;
1019
- --salt-size-bar-strong: 8px;
1020
- }
1021
- .salt-density-low {
1022
- --salt-size-adornment: 10px;
1023
- --salt-size-bar: 6px;
1024
- --salt-size-base: 36px;
1025
- --salt-size-icon: 14px;
1026
- --salt-size-indicator: 4px;
1027
- --salt-size-selectable: 16px;
1028
- --salt-size-bar-strong: 12px;
1029
- }
1030
- .salt-density-touch {
1031
- --salt-size-adornment: 12px;
1032
- --salt-size-bar: 8px;
1033
- --salt-size-base: 44px;
1034
- --salt-size-icon: 16px;
1035
- --salt-size-indicator: 5px;
1036
- --salt-size-selectable: 18px;
1037
- --salt-size-bar-strong: 16px;
1038
- }
1039
- .salt-density-touch,
1040
- .salt-density-low,
1041
- .salt-density-medium,
1042
- .salt-density-high {
1043
- --salt-size-fixed-100: 1px;
1044
- --salt-size-fixed-200: 2px;
1045
- --salt-size-fixed-300: 3px;
1046
- --salt-size-fixed-400: 4px;
1047
- --salt-size-fixed-500: 5px;
1048
- --salt-size-fixed-600: 6px;
1049
- --salt-size-fixed-700: 7px;
1050
- --salt-size-fixed-800: 8px;
1051
- --salt-size-fixed-900: 9px;
1052
- }
1053
-
1054
- /* css/foundations/spacing.css */
1055
- .salt-density-touch {
1056
- --salt-spacing-100: 16px;
1057
- }
1058
- .salt-density-low {
1059
- --salt-spacing-100: 12px;
1060
- }
1061
- .salt-density-medium {
1062
- --salt-spacing-100: 8px;
1063
- }
1064
- .salt-density-high {
1065
- --salt-spacing-100: 4px;
1066
- }
1067
- .salt-density-touch,
1068
- .salt-density-low,
1069
- .salt-density-medium,
1070
- .salt-density-high {
1071
- --salt-spacing-25: calc(0.25 * var(--salt-spacing-100));
1072
- --salt-spacing-50: calc(0.5 * var(--salt-spacing-100));
1073
- --salt-spacing-75: calc(0.75 * var(--salt-spacing-100));
1074
- --salt-spacing-150: calc(1.5 * var(--salt-spacing-100));
1075
- --salt-spacing-200: calc(2 * var(--salt-spacing-100));
1076
- --salt-spacing-250: calc(2.5 * var(--salt-spacing-100));
1077
- --salt-spacing-300: calc(3 * var(--salt-spacing-100));
1078
- --salt-spacing-350: calc(3.5 * var(--salt-spacing-100));
1079
- --salt-spacing-400: calc(4 * var(--salt-spacing-100));
1080
- --salt-spacing-450: calc(4.5 * var(--salt-spacing-100));
1081
- --salt-spacing-500: calc(5 * var(--salt-spacing-100));
1082
- --salt-spacing-550: calc(5.5 * var(--salt-spacing-100));
1083
- --salt-spacing-600: calc(6 * var(--salt-spacing-100));
1084
- --salt-spacing-650: calc(6.5 * var(--salt-spacing-100));
1085
- --salt-spacing-700: calc(7 * var(--salt-spacing-100));
1086
- --salt-spacing-750: calc(7.5 * var(--salt-spacing-100));
1087
- --salt-spacing-800: calc(8 * var(--salt-spacing-100));
1088
- --salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
1089
- --salt-spacing-900: calc(9 * var(--salt-spacing-100));
1090
- --salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
1091
- --salt-spacing-fixed-100: 1px;
1092
- --salt-spacing-fixed-200: 2px;
1093
- --salt-spacing-fixed-300: 3px;
1094
- --salt-spacing-fixed-400: 4px;
1095
- --salt-spacing-fixed-500: 5px;
1096
- --salt-spacing-fixed-600: 6px;
1097
- --salt-spacing-fixed-700: 7px;
1098
- --salt-spacing-fixed-800: 8px;
1099
- --salt-spacing-fixed-900: 9px;
1046
+ --salt-color-autumn-900: rgb(56, 23, 0);
1047
+ --salt-color-lavender-100: rgb(250, 235, 250);
1048
+ --salt-color-lavender-200: rgb(237, 199, 237);
1049
+ --salt-color-lavender-300: rgb(212, 167, 212);
1050
+ --salt-color-lavender-400: rgb(186, 134, 186);
1051
+ --salt-color-lavender-500: rgb(148, 102, 148);
1052
+ --salt-color-lavender-600: rgb(126, 80, 126);
1053
+ --salt-color-lavender-700: rgb(105, 58, 105);
1054
+ --salt-color-lavender-800: rgb(84, 37, 84);
1055
+ --salt-color-lavender-900: rgb(64, 15, 64);
1056
+ --salt-color-ocean-100: rgb(227, 251, 255);
1057
+ --salt-color-ocean-200: rgb(180, 229, 240);
1058
+ --salt-color-ocean-300: rgb(131, 197, 212);
1059
+ --salt-color-ocean-400: rgb(80, 167, 186);
1060
+ --salt-color-ocean-500: rgb(0, 128, 148);
1061
+ --salt-color-ocean-600: rgb(0, 106, 122);
1062
+ --salt-color-ocean-700: rgb(0, 84, 97);
1063
+ --salt-color-ocean-800: rgb(0, 64, 74);
1064
+ --salt-color-ocean-900: rgb(0, 44, 51);
1065
+ --salt-color-smoke-100: rgb(242, 245, 250);
1066
+ --salt-color-smoke-200: rgb(208, 211, 216);
1067
+ --salt-color-smoke-300: rgb(176, 179, 184);
1068
+ --salt-color-smoke-400: rgb(144, 147, 152);
1069
+ --salt-color-smoke-500: rgb(114, 117, 122);
1070
+ --salt-color-smoke-600: rgb(93, 96, 101);
1071
+ --salt-color-smoke-700: rgb(73, 76, 81);
1072
+ --salt-color-smoke-800: rgb(53, 56, 61);
1073
+ --salt-color-smoke-900: rgb(35, 38, 43);
1074
+ --salt-color-fuchsia-100: rgb(255, 232, 247);
1075
+ --salt-color-fuchsia-200: rgb(255, 191, 229);
1076
+ --salt-color-fuchsia-300: rgb(240, 151, 203);
1077
+ --salt-color-fuchsia-400: rgb(222, 109, 178);
1078
+ --salt-color-fuchsia-500: rgb(194, 71, 149);
1079
+ --salt-color-fuchsia-600: rgb(167, 54, 125);
1080
+ --salt-color-fuchsia-700: rgb(140, 37, 101);
1081
+ --salt-color-fuchsia-800: rgb(114, 19, 79);
1082
+ --salt-color-fuchsia-900: rgb(89, 0, 57);
1083
+ --salt-color-lime-100: rgb(239, 245, 220);
1084
+ --salt-color-lime-200: rgb(215, 227, 168);
1085
+ --salt-color-lime-300: rgb(182, 196, 120);
1086
+ --salt-color-lime-400: rgb(146, 166, 71);
1087
+ --salt-color-lime-500: rgb(102, 125, 21);
1088
+ --salt-color-lime-600: rgb(85, 106, 16);
1089
+ --salt-color-lime-700: rgb(69, 87, 11);
1090
+ --salt-color-lime-800: rgb(53, 68, 6);
1091
+ --salt-color-lime-900: rgb(36, 46, 0);
1092
+ --salt-color-fur-100: rgb(255, 244, 235);
1093
+ --salt-color-fur-200: rgb(245, 214, 191);
1094
+ --salt-color-fur-300: rgb(219, 178, 147);
1095
+ --salt-color-fur-400: rgb(194, 144, 107);
1096
+ --salt-color-fur-500: rgb(153, 106, 69);
1097
+ --salt-color-fur-600: rgb(130, 85, 52);
1098
+ --salt-color-fur-700: rgb(107, 65, 36);
1099
+ --salt-color-fur-800: rgb(85, 46, 20);
1100
+ --salt-color-fur-900: rgb(64, 28, 0);
1101
+ --salt-color-violet-100: rgb(237, 239, 255);
1102
+ --salt-color-violet-200: rgb(202, 203, 252);
1103
+ --salt-color-violet-300: rgb(167, 169, 235);
1104
+ --salt-color-violet-400: rgb(134, 139, 219);
1105
+ --salt-color-violet-500: rgb(99, 110, 191);
1106
+ --salt-color-violet-600: rgb(81, 90, 159);
1107
+ --salt-color-violet-700: rgb(63, 71, 128);
1108
+ --salt-color-violet-800: rgb(47, 53, 99);
1109
+ --salt-color-violet-900: rgb(31, 36, 71);
1110
+ --salt-color-forest-100: rgb(237, 250, 245);
1111
+ --salt-color-forest-200: rgb(188, 232, 211);
1112
+ --salt-color-forest-300: rgb(141, 204, 174);
1113
+ --salt-color-forest-400: rgb(91, 176, 136);
1114
+ --salt-color-forest-500: rgb(35, 133, 94);
1115
+ --salt-color-forest-600: rgb(25, 111, 77);
1116
+ --salt-color-forest-700: rgb(15, 90, 61);
1117
+ --salt-color-forest-800: rgb(6, 70, 46);
1118
+ --salt-color-forest-900: rgb(0, 51, 31);
1100
1119
  }
1101
1120
 
1102
- /* css/foundations/typography.css */
1103
- .salt-theme {
1104
- --salt-typography-fontFamily-openSans: "Open Sans";
1105
- --salt-typography-fontFamily-amplitude: "Amplitude";
1106
- --salt-typography-fontFamily-ptMono: "PT Mono";
1107
- --salt-typography-fontWeight-light: 300;
1108
- --salt-typography-fontWeight-regular: 400;
1109
- --salt-typography-fontWeight-medium: 500;
1110
- --salt-typography-fontWeight-semiBold: 600;
1111
- --salt-typography-fontWeight-bold: 700;
1112
- --salt-typography-fontWeight-extraBold: 800;
1113
- --salt-typography-textDecoration-none: none;
1114
- --salt-typography-textDecoration-underline: underline;
1121
+ /* css/legacy/palette/accent.css */
1122
+ .salt-theme[data-mode=light] {
1123
+ --salt-palette-accent: var(--salt-color-blue-500);
1124
+ --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
1125
+ --salt-palette-accent-foreground: var(--salt-color-white);
1126
+ --salt-palette-accent-foreground-informative: var(--salt-color-blue-600);
1115
1127
  }
1116
-
1117
- /* css/foundations/zindex.css */
1118
- .salt-density-touch,
1119
- .salt-density-low,
1120
- .salt-density-medium,
1121
- .salt-density-high {
1122
- --salt-zIndex-default: 1;
1123
- --salt-zIndex-popout: 1000;
1124
- --salt-zIndex-appHeader: 1100;
1125
- --salt-zIndex-drawer: 1200;
1126
- --salt-zIndex-modal: 1300;
1127
- --salt-zIndex-notification: 1400;
1128
- --salt-zIndex-dragObject: 1420;
1129
- --salt-zIndex-contextMenu: 1450;
1130
- --salt-zIndex-flyover: 1500;
1128
+ .salt-theme[data-mode=dark] {
1129
+ --salt-palette-accent: var(--salt-color-blue-500);
1130
+ --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
1131
+ --salt-palette-accent-foreground: var(--salt-color-white);
1132
+ --salt-palette-accent-foreground-informative: var(--salt-color-blue-200);
1131
1133
  }
1132
1134
 
1133
- /* css/palette/alpha.css */
1135
+ /* css/legacy/palette/alpha.css */
1134
1136
  .salt-theme[data-mode=light] {
1135
1137
  --salt-palette-alpha-highest: var(--salt-color-white-80a);
1136
1138
  --salt-palette-alpha-higher: var(--salt-color-white-65a);
@@ -1174,41 +1176,7 @@
1174
1176
  --salt-palette-alpha-none: transparent;
1175
1177
  }
1176
1178
 
1177
- /* css/palette/accent.css */
1178
- .salt-theme[data-mode=light] {
1179
- --salt-palette-accent: var(--salt-color-blue-500);
1180
- --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
1181
- --salt-palette-accent-foreground: var(--salt-color-white);
1182
- --salt-palette-accent-foreground-informative: var(--salt-color-blue-600);
1183
- --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-600-40a);
1184
- }
1185
- .salt-theme[data-mode=dark] {
1186
- --salt-palette-accent: var(--salt-color-blue-500);
1187
- --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
1188
- --salt-palette-accent-foreground: var(--salt-color-white);
1189
- --salt-palette-accent-foreground-informative: var(--salt-color-blue-200);
1190
- --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-200-40a);
1191
- }
1192
-
1193
- /* css/palette/error.css */
1194
- .salt-theme[data-mode=light] {
1195
- --salt-palette-error-background: var(--salt-color-red-10);
1196
- --salt-palette-error-bold-background: var(--salt-color-red-500);
1197
- --salt-palette-error-background-selected: var(--salt-color-red-30);
1198
- --salt-palette-error-border: var(--salt-color-red-500);
1199
- --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
1200
- --salt-palette-error-foreground-informative: var(--salt-color-red-600);
1201
- }
1202
- .salt-theme[data-mode=dark] {
1203
- --salt-palette-error-background: var(--salt-color-red-900);
1204
- --salt-palette-error-bold-background: var(--salt-color-red-500);
1205
- --salt-palette-error-background-selected: var(--salt-color-red-800);
1206
- --salt-palette-error-border: var(--salt-color-red-400);
1207
- --salt-palette-error-foreground-decorative: var(--salt-color-red-400);
1208
- --salt-palette-error-foreground-informative: var(--salt-color-red-200);
1209
- }
1210
-
1211
- /* css/palette/categorical.css */
1179
+ /* css/legacy/palette/categorical.css */
1212
1180
  .salt-theme[data-mode=light] {
1213
1181
  --salt-palette-categorical-1: var(--salt-color-cobalt-500);
1214
1182
  --salt-palette-categorical-1-strong: var(--salt-color-cobalt-600);
@@ -1334,7 +1302,7 @@
1334
1302
  --salt-palette-categorical-20-weakest: var(--salt-color-forest-900);
1335
1303
  }
1336
1304
 
1337
- /* css/palette/corner.css */
1305
+ /* css/legacy/palette/corner.css */
1338
1306
  .salt-theme {
1339
1307
  --salt-palette-corner-weaker: var(--salt-curve-0);
1340
1308
  --salt-palette-corner-weak: var(--salt-curve-0);
@@ -1344,7 +1312,25 @@
1344
1312
  --salt-palette-corner-strongest: var(--salt-curve-999);
1345
1313
  }
1346
1314
 
1347
- /* css/palette/info.css */
1315
+ /* css/legacy/palette/error.css */
1316
+ .salt-theme[data-mode=light] {
1317
+ --salt-palette-error-background: var(--salt-color-red-10);
1318
+ --salt-palette-error-bold-background: var(--salt-color-red-500);
1319
+ --salt-palette-error-background-selected: var(--salt-color-red-30);
1320
+ --salt-palette-error-border: var(--salt-color-red-500);
1321
+ --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
1322
+ --salt-palette-error-foreground-informative: var(--salt-color-red-600);
1323
+ }
1324
+ .salt-theme[data-mode=dark] {
1325
+ --salt-palette-error-background: var(--salt-color-red-900);
1326
+ --salt-palette-error-bold-background: var(--salt-color-red-500);
1327
+ --salt-palette-error-background-selected: var(--salt-color-red-800);
1328
+ --salt-palette-error-border: var(--salt-color-red-400);
1329
+ --salt-palette-error-foreground-decorative: var(--salt-color-red-400);
1330
+ --salt-palette-error-foreground-informative: var(--salt-color-red-200);
1331
+ }
1332
+
1333
+ /* css/legacy/palette/info.css */
1348
1334
  .salt-theme[data-mode=light] {
1349
1335
  --salt-palette-info-background: var(--salt-color-blue-10);
1350
1336
  --salt-palette-info-bold-background: var(--salt-color-blue-500);
@@ -1360,7 +1346,7 @@
1360
1346
  --salt-palette-info-foreground-informative: var(--salt-color-blue-200);
1361
1347
  }
1362
1348
 
1363
- /* css/palette/interact.css */
1349
+ /* css/legacy/palette/interact.css */
1364
1350
  .salt-theme[data-mode=light] {
1365
1351
  --salt-palette-interact-background-hover: var(--salt-color-blue-10);
1366
1352
  --salt-palette-interact-background-active: var(--salt-color-blue-30);
@@ -1379,7 +1365,6 @@
1379
1365
  --salt-palette-interact-outline: var(--salt-color-blue-600);
1380
1366
  --salt-palette-interact-cta-background: var(--salt-color-blue-600);
1381
1367
  --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
1382
- --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-40a);
1383
1368
  --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);
1384
1369
  --salt-palette-interact-cta-foreground: var(--salt-color-white);
1385
1370
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-40a);
@@ -1387,7 +1372,6 @@
1387
1372
  --salt-palette-interact-cta-border-active: var(--salt-color-blue-700);
1388
1373
  --salt-palette-interact-primary-background: var(--salt-color-gray-60);
1389
1374
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-200);
1390
- --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-40a);
1391
1375
  --salt-palette-interact-primary-background-hover: var(--salt-color-gray-40);
1392
1376
  --salt-palette-interact-primary-foreground: var(--salt-color-gray-900);
1393
1377
  --salt-palette-interact-primary-foreground-active: var(--salt-color-white);
@@ -1418,7 +1402,6 @@
1418
1402
  --salt-palette-interact-outline: var(--salt-color-blue-100);
1419
1403
  --salt-palette-interact-cta-background: var(--salt-color-blue-600);
1420
1404
  --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
1421
- --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-40a);
1422
1405
  --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);
1423
1406
  --salt-palette-interact-cta-foreground: var(--salt-color-white);
1424
1407
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-40a);
@@ -1426,7 +1409,6 @@
1426
1409
  --salt-palette-interact-cta-border-active: var(--salt-color-blue-700);
1427
1410
  --salt-palette-interact-primary-background: var(--salt-color-gray-300);
1428
1411
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-70);
1429
- --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-40a);
1430
1412
  --salt-palette-interact-primary-background-hover: var(--salt-color-gray-200);
1431
1413
  --salt-palette-interact-primary-foreground: var(--salt-color-white);
1432
1414
  --salt-palette-interact-primary-foreground-active: var(--salt-color-gray-900);
@@ -1440,7 +1422,7 @@
1440
1422
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
1441
1423
  }
1442
1424
 
1443
- /* css/palette/navigate.css */
1425
+ /* css/legacy/palette/navigate.css */
1444
1426
  .salt-theme[data-mode=light] {
1445
1427
  --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
1446
1428
  --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
@@ -1452,29 +1434,23 @@
1452
1434
  --salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
1453
1435
  }
1454
1436
 
1455
- /* css/palette/negative.css */
1437
+ /* css/legacy/palette/negative.css */
1456
1438
  .salt-theme[data-mode=light] {
1457
1439
  --salt-palette-negative-foreground: var(--salt-color-red-600);
1458
- --salt-palette-negative-foreground-disabled: var(--salt-color-red-600-40a);
1459
1440
  --salt-palette-negative-background: var(--salt-color-red-600);
1460
1441
  --salt-palette-negative-background-hover: var(--salt-color-red-500);
1461
1442
  --salt-palette-negative-background-active: var(--salt-color-red-700);
1462
- --salt-palette-negative-background-disabled: var(--salt-color-red-600-40a);
1463
1443
  --salt-palette-negative-border: var(--salt-color-red-500);
1464
- --salt-palette-negative-border-disabled: var(--salt-color-red-500-40a);
1465
1444
  }
1466
1445
  .salt-theme[data-mode=dark] {
1467
1446
  --salt-palette-negative-foreground: var(--salt-color-red-200);
1468
- --salt-palette-negative-foreground-disabled: var(--salt-color-red-200-40a);
1469
1447
  --salt-palette-negative-background: var(--salt-color-red-600);
1470
1448
  --salt-palette-negative-background-hover: var(--salt-color-red-500);
1471
1449
  --salt-palette-negative-background-active: var(--salt-color-red-700);
1472
- --salt-palette-negative-background-disabled: var(--salt-color-red-600-40a);
1473
1450
  --salt-palette-negative-border: var(--salt-color-red-500);
1474
- --salt-palette-negative-border-disabled: var(--salt-color-red-500-40a);
1475
1451
  }
1476
1452
 
1477
- /* css/palette/neutral.css */
1453
+ /* css/legacy/palette/neutral.css */
1478
1454
  .salt-theme[data-mode=light] {
1479
1455
  --salt-palette-neutral-border: var(--salt-color-gray-50);
1480
1456
  --salt-palette-neutral-border-disabled: var(--salt-color-gray-50-40a);
@@ -1504,29 +1480,39 @@
1504
1480
  --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-500-40a);
1505
1481
  }
1506
1482
 
1507
- /* css/palette/positive.css */
1483
+ /* css/legacy/palette/positive.css */
1508
1484
  .salt-theme[data-mode=light] {
1509
1485
  --salt-palette-positive-foreground: var(--salt-color-green-600);
1510
- --salt-palette-positive-foreground-disabled: var(--salt-color-green-600-40a);
1511
1486
  --salt-palette-positive-background: var(--salt-color-green-600);
1512
1487
  --salt-palette-positive-background-hover: var(--salt-color-green-500);
1513
1488
  --salt-palette-positive-background-active: var(--salt-color-green-700);
1514
- --salt-palette-positive-background-disabled: var(--salt-color-green-600-40a);
1515
1489
  --salt-palette-positive-border: var(--salt-color-green-500);
1516
- --salt-palette-positive-border-disabled: var(--salt-color-green-500-40a);
1517
1490
  }
1518
1491
  .salt-theme[data-mode=dark] {
1519
1492
  --salt-palette-positive-foreground: var(--salt-color-green-200);
1520
- --salt-palette-positive-foreground-disabled: var(--salt-color-green-200-40a);
1521
1493
  --salt-palette-positive-background: var(--salt-color-green-600);
1522
1494
  --salt-palette-positive-background-hover: var(--salt-color-green-500);
1523
1495
  --salt-palette-positive-background-active: var(--salt-color-green-700);
1524
- --salt-palette-positive-background-disabled: var(--salt-color-green-600-40a);
1525
1496
  --salt-palette-positive-border: var(--salt-color-green-500);
1526
- --salt-palette-positive-border-disabled: var(--salt-color-green-500-40a);
1527
1497
  }
1528
1498
 
1529
- /* css/palette/success.css */
1499
+ /* css/legacy/palette/shadow.css */
1500
+ .salt-theme[data-mode=light] {
1501
+ --salt-shadow-lowest: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
1502
+ --salt-shadow-lower: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
1503
+ --salt-shadow-low: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
1504
+ --salt-shadow-mediumLow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
1505
+ --salt-shadow-medium: 0 12px 40px 0 rgba(0, 0, 0, 0.3);
1506
+ }
1507
+ .salt-theme[data-mode=dark] {
1508
+ --salt-shadow-lowest: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
1509
+ --salt-shadow-lower: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
1510
+ --salt-shadow-low: 0 4px 8px 0 rgba(0, 0, 0, 0.55);
1511
+ --salt-shadow-mediumLow: 0 6px 10px 0 rgba(0, 0, 0, 0.55);
1512
+ --salt-shadow-medium: 0 12px 40px 0 rgba(0, 0, 0, 0.65);
1513
+ }
1514
+
1515
+ /* css/legacy/palette/success.css */
1530
1516
  .salt-theme[data-mode=light] {
1531
1517
  --salt-palette-success-background: var(--salt-color-green-10);
1532
1518
  --salt-palette-success-bold-background: var(--salt-color-green-500);
@@ -1544,7 +1530,7 @@
1544
1530
  --salt-palette-success-foreground-informative: var(--salt-color-green-200);
1545
1531
  }
1546
1532
 
1547
- /* css/palette/text.css */
1533
+ /* css/legacy/palette/text.css */
1548
1534
  .salt-theme {
1549
1535
  --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
1550
1536
  --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
@@ -1567,41 +1553,33 @@
1567
1553
  --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1568
1554
  }
1569
1555
 
1570
- /* css/palette/warning.css */
1556
+ /* css/legacy/palette/warning.css */
1571
1557
  .salt-theme[data-mode=light] {
1572
1558
  --salt-palette-warning-background: var(--salt-color-orange-10);
1573
1559
  --salt-palette-warning-bold-background: var(--salt-color-orange-800);
1574
1560
  --salt-palette-warning-background-selected: var(--salt-color-orange-30);
1575
1561
  --salt-palette-warning-border: var(--salt-color-orange-700);
1576
- --salt-palette-warning-border-disabled: var(--salt-color-orange-700-40a);
1577
1562
  --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700);
1578
1563
  --salt-palette-warning-foreground-informative: var(--salt-color-orange-850);
1579
- --salt-palette-warning-foreground-informative-disabled: var(--salt-color-orange-850-40a);
1580
1564
  --salt-palette-warning-action: var(--salt-color-orange-600);
1581
1565
  --salt-palette-warning-action-hover: var(--salt-color-orange-500);
1582
1566
  --salt-palette-warning-action-active: var(--salt-color-orange-800);
1583
- --salt-palette-warning-action-disabled: var(--salt-color-orange-600-40a);
1584
1567
  --salt-palette-warning-action-foreground: var(--salt-color-gray-900);
1585
- --salt-palette-warning-action-foreground-disabled: var(--salt-color-gray-900-40a);
1586
1568
  }
1587
1569
  .salt-theme[data-mode=dark] {
1588
1570
  --salt-palette-warning-background: var(--salt-color-orange-900);
1589
1571
  --salt-palette-warning-bold-background: var(--salt-color-orange-800);
1590
1572
  --salt-palette-warning-background-selected: var(--salt-color-orange-875);
1591
1573
  --salt-palette-warning-border: var(--salt-color-orange-500);
1592
- --salt-palette-warning-border-disabled: var(--salt-color-orange-500-40a);
1593
1574
  --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500);
1594
1575
  --salt-palette-warning-foreground-informative: var(--salt-color-orange-400);
1595
- --salt-palette-warning-foreground-informative-disabled: var(--salt-color-orange-400-40a);
1596
1576
  --salt-palette-warning-action: var(--salt-color-orange-600);
1597
1577
  --salt-palette-warning-action-hover: var(--salt-color-orange-500);
1598
1578
  --salt-palette-warning-action-active: var(--salt-color-orange-800);
1599
- --salt-palette-warning-action-disabled: var(--salt-color-orange-600-40a);
1600
1579
  --salt-palette-warning-action-foreground: var(--salt-color-gray-900);
1601
- --salt-palette-warning-action-foreground-disabled: var(--salt-color-gray-900-40a);
1602
1580
  }
1603
1581
 
1604
- /* css/characteristics/accent.css */
1582
+ /* css/legacy/characteristics/accent.css */
1605
1583
  .salt-theme {
1606
1584
  --salt-accent-background: var(--salt-palette-accent);
1607
1585
  --salt-accent-background-disabled: var(--salt-palette-accent-disabled);
@@ -1610,191 +1588,161 @@
1610
1588
  --salt-accent-foreground: var(--salt-palette-accent-foreground);
1611
1589
  }
1612
1590
 
1613
- /* css/characteristics/actionable.css */
1591
+ /* css/legacy/characteristics/actionable.css */
1614
1592
  .salt-theme {
1615
1593
  --salt-actionable-accented-bold-background-active: var(--salt-palette-interact-cta-background-active);
1616
- --salt-actionable-accented-bold-background-disabled: var(--salt-palette-interact-cta-background-disabled);
1617
1594
  --salt-actionable-accented-bold-background-hover: var(--salt-palette-interact-cta-background-hover);
1618
1595
  --salt-actionable-accented-bold-background: var(--salt-palette-interact-cta-background);
1619
1596
  --salt-actionable-accented-bold-borderColor-active: var(--salt-palette-alpha-none);
1620
- --salt-actionable-accented-bold-borderColor-disabled: var(--salt-palette-alpha-none);
1621
1597
  --salt-actionable-accented-bold-borderColor-hover: var(--salt-palette-alpha-none);
1622
1598
  --salt-actionable-accented-bold-borderColor: var(--salt-palette-alpha-none);
1623
1599
  --salt-actionable-accented-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
1624
- --salt-actionable-accented-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1625
1600
  --salt-actionable-accented-bold-foreground-hover: var(--salt-palette-interact-cta-foreground);
1626
1601
  --salt-actionable-accented-bold-foreground: var(--salt-palette-interact-cta-foreground);
1627
- --salt-actionable-bold-background-active: var(--salt-palette-interact-primary-background-active);
1628
- --salt-actionable-bold-background-disabled: var(--salt-palette-interact-primary-background-disabled);
1629
- --salt-actionable-bold-background-hover: var(--salt-palette-interact-primary-background-hover);
1630
- --salt-actionable-bold-background: var(--salt-palette-interact-primary-background);
1631
- --salt-actionable-bold-borderColor-active: var(--salt-palette-alpha-none);
1632
- --salt-actionable-bold-borderColor-disabled: var(--salt-palette-alpha-none);
1633
- --salt-actionable-bold-borderColor-hover: var(--salt-palette-alpha-none);
1634
- --salt-actionable-bold-borderColor: var(--salt-palette-alpha-none);
1635
- --salt-actionable-bold-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1636
- --salt-actionable-bold-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1637
- --salt-actionable-bold-foreground-hover: var(--salt-palette-neutral-primary-foreground);
1638
- --salt-actionable-bold-foreground: var(--salt-palette-neutral-primary-foreground);
1639
1602
  --salt-actionable-accented-background-active: var(--salt-palette-interact-cta-background-active);
1640
- --salt-actionable-accented-background-disabled: var(--salt-palette-alpha-none);
1641
1603
  --salt-actionable-accented-background-hover: var(--salt-palette-interact-cta-background-hover);
1642
1604
  --salt-actionable-accented-background: var(--salt-palette-alpha-none);
1643
1605
  --salt-actionable-accented-borderColor-active: var(--salt-palette-interact-cta-border-active);
1644
- --salt-actionable-accented-borderColor-disabled: var(--salt-palette-accent-disabled);
1645
1606
  --salt-actionable-accented-borderColor-hover: var(--salt-palette-interact-cta-border-hover);
1646
1607
  --salt-actionable-accented-borderColor: var(--salt-palette-accent);
1647
1608
  --salt-actionable-accented-foreground-active: var(--salt-palette-interact-cta-foreground);
1648
- --salt-actionable-accented-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
1649
1609
  --salt-actionable-accented-foreground-hover: var(--salt-palette-interact-cta-foreground);
1650
1610
  --salt-actionable-accented-foreground: var(--salt-palette-accent-foreground-informative);
1651
- --salt-actionable-background-active: var(--salt-palette-interact-primary-background-active);
1652
- --salt-actionable-background-disabled: var(--salt-palette-alpha-none);
1653
- --salt-actionable-background-hover: var(--salt-palette-interact-primary-background-hover);
1654
- --salt-actionable-background: var(--salt-palette-alpha-none);
1655
- --salt-actionable-borderColor-active: var(--salt-palette-alpha-none);
1656
- --salt-actionable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
1657
- --salt-actionable-borderColor-hover: var(--salt-palette-alpha-none);
1658
- --salt-actionable-borderColor: var(--salt-palette-interact-border);
1659
- --salt-actionable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1660
- --salt-actionable-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1661
- --salt-actionable-foreground-hover: var(--salt-palette-neutral-primary-foreground);
1662
- --salt-actionable-foreground: var(--salt-palette-neutral-primary-foreground);
1611
+ --salt-actionable-accented-background-selected: var(--salt-palette-interact-cta-background-active);
1612
+ --salt-actionable-accented-borderColor-selected: var(--salt-palette-alpha-none);
1613
+ --salt-actionable-accented-foreground-selected: var(--salt-palette-interact-cta-foreground);
1663
1614
  --salt-actionable-accented-subtle-background-active: var(--salt-palette-interact-cta-background-active);
1664
- --salt-actionable-accented-subtle-background-disabled: var(--salt-palette-alpha-none);
1665
1615
  --salt-actionable-accented-subtle-background-hover: var(--salt-palette-interact-cta-background-hover);
1666
1616
  --salt-actionable-accented-subtle-background: var(--salt-palette-alpha-none);
1667
1617
  --salt-actionable-accented-subtle-borderColor-active: var(--salt-palette-alpha-none);
1668
- --salt-actionable-accented-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
1669
1618
  --salt-actionable-accented-subtle-borderColor-hover: var(--salt-palette-alpha-none);
1670
1619
  --salt-actionable-accented-subtle-borderColor: var(--salt-palette-alpha-none);
1671
1620
  --salt-actionable-accented-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
1672
- --salt-actionable-accented-subtle-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
1673
1621
  --salt-actionable-accented-subtle-foreground-hover: var(--salt-palette-interact-cta-foreground);
1674
1622
  --salt-actionable-accented-subtle-foreground: var(--salt-palette-accent-foreground-informative);
1623
+ --salt-actionable-bold-background-active: var(--salt-palette-interact-primary-background-active);
1624
+ --salt-actionable-bold-background-hover: var(--salt-palette-interact-primary-background-hover);
1625
+ --salt-actionable-bold-background: var(--salt-palette-interact-primary-background);
1626
+ --salt-actionable-bold-borderColor-active: var(--salt-palette-alpha-none);
1627
+ --salt-actionable-bold-borderColor-hover: var(--salt-palette-alpha-none);
1628
+ --salt-actionable-bold-borderColor: var(--salt-palette-alpha-none);
1629
+ --salt-actionable-bold-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1630
+ --salt-actionable-bold-foreground-hover: var(--salt-palette-neutral-primary-foreground);
1631
+ --salt-actionable-bold-foreground: var(--salt-palette-neutral-primary-foreground);
1632
+ --salt-actionable-background-active: var(--salt-palette-interact-primary-background-active);
1633
+ --salt-actionable-background-hover: var(--salt-palette-interact-primary-background-hover);
1634
+ --salt-actionable-background: var(--salt-palette-alpha-none);
1635
+ --salt-actionable-borderColor-active: var(--salt-palette-alpha-none);
1636
+ --salt-actionable-borderColor-hover: var(--salt-palette-alpha-none);
1637
+ --salt-actionable-borderColor: var(--salt-palette-interact-border);
1638
+ --salt-actionable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1639
+ --salt-actionable-foreground-hover: var(--salt-palette-neutral-primary-foreground);
1640
+ --salt-actionable-foreground: var(--salt-palette-neutral-primary-foreground);
1641
+ --salt-actionable-background-selected: var(--salt-palette-interact-primary-background-active);
1642
+ --salt-actionable-borderColor-selected: var(--salt-palette-alpha-none);
1643
+ --salt-actionable-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
1675
1644
  --salt-actionable-subtle-background-active: var(--salt-palette-interact-primary-background-active);
1676
- --salt-actionable-subtle-background-disabled: var(--salt-palette-alpha-none);
1677
1645
  --salt-actionable-subtle-background-hover: var(--salt-palette-interact-primary-background-hover);
1678
1646
  --salt-actionable-subtle-background: var(--salt-palette-alpha-none);
1679
1647
  --salt-actionable-subtle-borderColor-active: var(--salt-palette-alpha-none);
1680
- --salt-actionable-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
1681
1648
  --salt-actionable-subtle-borderColor-hover: var(--salt-palette-alpha-none);
1682
1649
  --salt-actionable-subtle-borderColor: var(--salt-palette-alpha-none);
1683
1650
  --salt-actionable-subtle-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1684
- --salt-actionable-subtle-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1685
1651
  --salt-actionable-subtle-foreground-hover: var(--salt-palette-neutral-primary-foreground);
1686
1652
  --salt-actionable-subtle-foreground: var(--salt-palette-neutral-primary-foreground);
1687
1653
  --salt-actionable-negative-bold-background-active: var(--salt-palette-negative-background-active);
1688
- --salt-actionable-negative-bold-background-disabled: var(--salt-palette-negative-background-disabled);
1689
1654
  --salt-actionable-negative-bold-background-hover: var(--salt-palette-negative-background-hover);
1690
1655
  --salt-actionable-negative-bold-background: var(--salt-palette-negative-background);
1691
1656
  --salt-actionable-negative-bold-borderColor-active: var(--salt-palette-alpha-none);
1692
- --salt-actionable-negative-bold-borderColor-disabled: var(--salt-palette-alpha-none);
1693
1657
  --salt-actionable-negative-bold-borderColor-hover: var(--salt-palette-alpha-none);
1694
1658
  --salt-actionable-negative-bold-borderColor: var(--salt-palette-alpha-none);
1695
1659
  --salt-actionable-negative-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
1696
- --salt-actionable-negative-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1697
1660
  --salt-actionable-negative-bold-foreground-hover: var(--salt-palette-interact-cta-foreground);
1698
1661
  --salt-actionable-negative-bold-foreground: var(--salt-palette-interact-cta-foreground);
1699
1662
  --salt-actionable-negative-background-active: var(--salt-palette-negative-background-active);
1700
- --salt-actionable-negative-background-disabled: var(--salt-palette-alpha-none);
1701
1663
  --salt-actionable-negative-background-hover: var(--salt-palette-negative-background-hover);
1702
1664
  --salt-actionable-negative-background: var(--salt-palette-alpha-none);
1703
1665
  --salt-actionable-negative-borderColor-active: var(--salt-palette-alpha-none);
1704
- --salt-actionable-negative-borderColor-disabled: var(--salt-palette-negative-border-disabled);
1705
1666
  --salt-actionable-negative-borderColor-hover: var(--salt-palette-alpha-none);
1706
1667
  --salt-actionable-negative-borderColor: var(--salt-palette-negative-border);
1707
1668
  --salt-actionable-negative-foreground-active: var(--salt-palette-interact-cta-foreground);
1708
- --salt-actionable-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1709
1669
  --salt-actionable-negative-foreground-hover: var(--salt-palette-interact-cta-foreground);
1710
1670
  --salt-actionable-negative-foreground: var(--salt-palette-negative-foreground);
1671
+ --salt-actionable-negative-background-selected: var(--salt-palette-negative-background-active);
1672
+ --salt-actionable-negative-borderColor-selected: var(--salt-palette-alpha-none);
1673
+ --salt-actionable-negative-foreground-selected: var(--salt-palette-interact-cta-foreground);
1711
1674
  --salt-actionable-negative-subtle-background-active: var(--salt-palette-negative-background-active);
1712
- --salt-actionable-negative-subtle-background-disabled: var(--salt-palette-alpha-none);
1713
1675
  --salt-actionable-negative-subtle-background-hover: var(--salt-palette-negative-background-hover);
1714
1676
  --salt-actionable-negative-subtle-background: var(--salt-palette-alpha-none);
1715
1677
  --salt-actionable-negative-subtle-borderColor-active: var(--salt-palette-alpha-none);
1716
- --salt-actionable-negative-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
1717
1678
  --salt-actionable-negative-subtle-borderColor-hover: var(--salt-palette-alpha-none);
1718
1679
  --salt-actionable-negative-subtle-borderColor: var(--salt-palette-alpha-none);
1719
1680
  --salt-actionable-negative-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
1720
- --salt-actionable-negative-subtle-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1721
1681
  --salt-actionable-negative-subtle-foreground-hover: var(--salt-palette-interact-cta-foreground);
1722
1682
  --salt-actionable-negative-subtle-foreground: var(--salt-palette-negative-foreground);
1723
1683
  --salt-actionable-positive-bold-background-active: var(--salt-palette-positive-background-active);
1724
- --salt-actionable-positive-bold-background-disabled: var(--salt-palette-positive-background-disabled);
1725
1684
  --salt-actionable-positive-bold-background-hover: var(--salt-palette-positive-background-hover);
1726
1685
  --salt-actionable-positive-bold-background: var(--salt-palette-positive-background);
1727
1686
  --salt-actionable-positive-bold-borderColor-active: var(--salt-palette-alpha-none);
1728
- --salt-actionable-positive-bold-borderColor-disabled: var(--salt-palette-alpha-none);
1729
1687
  --salt-actionable-positive-bold-borderColor-hover: var(--salt-palette-alpha-none);
1730
1688
  --salt-actionable-positive-bold-borderColor: var(--salt-palette-alpha-none);
1731
1689
  --salt-actionable-positive-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
1732
- --salt-actionable-positive-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1733
1690
  --salt-actionable-positive-bold-foreground-hover: var(--salt-palette-interact-cta-foreground);
1734
1691
  --salt-actionable-positive-bold-foreground: var(--salt-palette-interact-cta-foreground);
1735
1692
  --salt-actionable-positive-background-active: var(--salt-palette-positive-background-active);
1736
- --salt-actionable-positive-background-disabled: var(--salt-palette-alpha-none);
1737
1693
  --salt-actionable-positive-background-hover: var(--salt-palette-positive-background-hover);
1738
1694
  --salt-actionable-positive-background: var(--salt-palette-alpha-none);
1739
1695
  --salt-actionable-positive-borderColor-active: var(--salt-palette-alpha-none);
1740
- --salt-actionable-positive-borderColor-disabled: var(--salt-palette-positive-border-disabled);
1741
1696
  --salt-actionable-positive-borderColor-hover: var(--salt-palette-alpha-none);
1742
1697
  --salt-actionable-positive-borderColor: var(--salt-palette-positive-border);
1743
1698
  --salt-actionable-positive-foreground-active: var(--salt-palette-interact-cta-foreground);
1744
- --salt-actionable-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1745
1699
  --salt-actionable-positive-foreground-hover: var(--salt-palette-interact-cta-foreground);
1746
1700
  --salt-actionable-positive-foreground: var(--salt-palette-positive-foreground);
1701
+ --salt-actionable-positive-background-selected: var(--salt-palette-positive-background-active);
1702
+ --salt-actionable-positive-borderColor-selected: var(--salt-palette-alpha-none);
1703
+ --salt-actionable-positive-foreground-selected: var(--salt-palette-interact-cta-foreground);
1747
1704
  --salt-actionable-positive-subtle-background-active: var(--salt-palette-positive-background-active);
1748
- --salt-actionable-positive-subtle-background-disabled: var(--salt-palette-alpha-none);
1749
1705
  --salt-actionable-positive-subtle-background-hover: var(--salt-palette-positive-background-hover);
1750
1706
  --salt-actionable-positive-subtle-background: var(--salt-palette-alpha-none);
1751
1707
  --salt-actionable-positive-subtle-borderColor-active: var(--salt-palette-alpha-none);
1752
- --salt-actionable-positive-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
1753
1708
  --salt-actionable-positive-subtle-borderColor-hover: var(--salt-palette-alpha-none);
1754
1709
  --salt-actionable-positive-subtle-borderColor: var(--salt-palette-alpha-none);
1755
1710
  --salt-actionable-positive-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
1756
- --salt-actionable-positive-subtle-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1757
1711
  --salt-actionable-positive-subtle-foreground-hover: var(--salt-palette-interact-cta-foreground);
1758
1712
  --salt-actionable-positive-subtle-foreground: var(--salt-palette-positive-foreground);
1759
1713
  --salt-actionable-caution-bold-background-active: var(--salt-palette-warning-action-active);
1760
- --salt-actionable-caution-bold-background-disabled: var(--salt-palette-warning-action-disabled);
1761
1714
  --salt-actionable-caution-bold-background-hover: var(--salt-palette-warning-action-hover);
1762
1715
  --salt-actionable-caution-bold-background: var(--salt-palette-warning-action);
1763
1716
  --salt-actionable-caution-bold-borderColor-active: var(--salt-palette-alpha-none);
1764
- --salt-actionable-caution-bold-borderColor-disabled: var(--salt-palette-alpha-none);
1765
1717
  --salt-actionable-caution-bold-borderColor-hover: var(--salt-palette-alpha-none);
1766
1718
  --salt-actionable-caution-bold-borderColor: var(--salt-palette-alpha-none);
1767
1719
  --salt-actionable-caution-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
1768
- --salt-actionable-caution-bold-foreground-disabled: var(--salt-palette-warning-action-foreground-disabled);
1769
1720
  --salt-actionable-caution-bold-foreground-hover: var(--salt-palette-warning-action-foreground);
1770
1721
  --salt-actionable-caution-bold-foreground: var(--salt-palette-warning-action-foreground);
1771
1722
  --salt-actionable-caution-background-active: var(--salt-palette-warning-action-active);
1772
- --salt-actionable-caution-background-disabled: var(--salt-palette-alpha-none);
1773
1723
  --salt-actionable-caution-background-hover: var(--salt-palette-warning-action-hover);
1774
1724
  --salt-actionable-caution-background: var(--salt-palette-alpha-none);
1775
1725
  --salt-actionable-caution-borderColor-active: var(--salt-palette-alpha-none);
1776
- --salt-actionable-caution-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1777
1726
  --salt-actionable-caution-borderColor-hover: var(--salt-palette-alpha-none);
1778
1727
  --salt-actionable-caution-borderColor: var(--salt-palette-warning-border);
1779
1728
  --salt-actionable-caution-foreground-active: var(--salt-palette-interact-cta-foreground);
1780
- --salt-actionable-caution-foreground-disabled: var(--salt-palette-warning-foreground-informative-disabled);
1781
1729
  --salt-actionable-caution-foreground-hover: var(--salt-palette-warning-action-foreground);
1782
1730
  --salt-actionable-caution-foreground: var(--salt-palette-warning-foreground-informative);
1731
+ --salt-actionable-caution-background-selected: var(--salt-palette-warning-action-active);
1732
+ --salt-actionable-caution-borderColor-selected: var(--salt-palette-alpha-none);
1733
+ --salt-actionable-caution-foreground-selected: var(--salt-palette-interact-cta-foreground);
1783
1734
  --salt-actionable-caution-subtle-background-active: var(--salt-palette-warning-action-active);
1784
- --salt-actionable-caution-subtle-background-disabled: var(--salt-palette-alpha-none);
1785
1735
  --salt-actionable-caution-subtle-background-hover: var(--salt-palette-warning-action-hover);
1786
1736
  --salt-actionable-caution-subtle-background: var(--salt-palette-alpha-none);
1787
1737
  --salt-actionable-caution-subtle-borderColor-active: var(--salt-palette-alpha-none);
1788
- --salt-actionable-caution-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
1789
1738
  --salt-actionable-caution-subtle-borderColor-hover: var(--salt-palette-alpha-none);
1790
1739
  --salt-actionable-caution-subtle-borderColor: var(--salt-palette-alpha-none);
1791
1740
  --salt-actionable-caution-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
1792
- --salt-actionable-caution-subtle-foreground-disabled: var(--salt-palette-warning-foreground-informative-disabled);
1793
1741
  --salt-actionable-caution-subtle-foreground-hover: var(--salt-palette-warning-action-foreground);
1794
1742
  --salt-actionable-caution-subtle-foreground: var(--salt-palette-warning-foreground-informative);
1795
1743
  }
1796
1744
 
1797
- /* css/characteristics/category.css */
1745
+ /* css/legacy/characteristics/category.css */
1798
1746
  .salt-theme {
1799
1747
  --salt-category-1-subtle-foreground: var(--salt-palette-categorical-1-strong);
1800
1748
  --salt-category-1-subtle-background: var(--salt-palette-categorical-1-weakest);
@@ -1898,7 +1846,7 @@
1898
1846
  --salt-category-20-bold-background: var(--salt-palette-categorical-20);
1899
1847
  }
1900
1848
 
1901
- /* css/characteristics/container.css */
1849
+ /* css/legacy/characteristics/container.css */
1902
1850
  .salt-theme {
1903
1851
  --salt-container-primary-background: var(--salt-palette-neutral-primary-background);
1904
1852
  --salt-container-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
@@ -1916,13 +1864,23 @@
1916
1864
  --salt-container-ghost-borderColor: var(--salt-palette-alpha-contrast-medium);
1917
1865
  }
1918
1866
 
1919
- /* css/characteristics/target.css */
1867
+ /* css/legacy/characteristics/content.css */
1920
1868
  .salt-theme {
1921
- --salt-target-background-hover: var(--salt-palette-interact-background-hover);
1922
- --salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);
1869
+ --salt-content-primary-foreground: var(--salt-palette-neutral-primary-foreground);
1870
+ --salt-content-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1871
+ --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
1872
+ --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1873
+ --salt-content-accent-foreground: var(--salt-palette-accent-foreground-informative);
1874
+ --salt-content-attention-foreground: var(--salt-palette-negative-foreground);
1875
+ --salt-content-bold-foreground: var(--salt-palette-interact-cta-foreground);
1876
+ --salt-content-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1877
+ --salt-content-foreground-hover: var(--salt-palette-accent-foreground-informative);
1878
+ --salt-content-foreground-active: var(--salt-palette-accent-foreground-informative);
1879
+ --salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);
1880
+ --salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
1923
1881
  }
1924
1882
 
1925
- /* css/characteristics/editable.css */
1883
+ /* css/legacy/characteristics/editable.css */
1926
1884
  .salt-theme {
1927
1885
  --salt-editable-borderColor: var(--salt-palette-interact-border);
1928
1886
  --salt-editable-borderColor-active: var(--salt-palette-interact-border-active);
@@ -1939,10 +1897,9 @@
1939
1897
  --salt-editable-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
1940
1898
  --salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);
1941
1899
  --salt-editable-secondary-background-readonly: var(--salt-palette-alpha-none);
1942
- --salt-editable-help-fontStyle: italic;
1943
1900
  }
1944
1901
 
1945
- /* css/characteristics/focused.css */
1902
+ /* css/legacy/characteristics/focused.css */
1946
1903
  .salt-theme {
1947
1904
  --salt-focused-outlineColor: var(--salt-palette-interact-outline);
1948
1905
  --salt-focused-outlineStyle: var(--salt-borderStyle-dotted);
@@ -1951,19 +1908,8 @@
1951
1908
  --salt-focused-outlineOffset: 0;
1952
1909
  --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
1953
1910
  }
1954
- .saltFocusVisible:after,
1955
- .focused:focus:after,
1956
- .focused:focus-visible:after {
1957
- content: "";
1958
- inset: var(--salt-focused-outlineInset);
1959
- outline-color: var(--salt-focused-outlineColor);
1960
- outline-offset: var(--salt-focused-outlineOffset);
1961
- outline-style: var(--salt-focused-outlineStyle);
1962
- outline-width: var(--salt-focused-outlineWidth);
1963
- position: absolute;
1964
- }
1965
1911
 
1966
- /* css/characteristics/navigable.css */
1912
+ /* css/legacy/characteristics/navigable.css */
1967
1913
  .salt-theme {
1968
1914
  --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
1969
1915
  --salt-navigable-accent-indicator-active: var(--salt-palette-navigate-indicator-active);
@@ -1971,22 +1917,22 @@
1971
1917
  --salt-navigable-accent-borderColor-active: var(--salt-palette-interact-border-active);
1972
1918
  }
1973
1919
 
1974
- /* css/characteristics/overlayable.css */
1920
+ /* css/legacy/characteristics/overlayable.css */
1975
1921
  .salt-theme {
1976
- --salt-overlayable-shadow-scroll: var(--salt-shadow-100);
1977
- --salt-overlayable-shadow-region: var(--salt-shadow-200);
1978
- --salt-overlayable-shadow: var(--salt-shadow-200);
1979
- --salt-overlayable-shadow-hover: var(--salt-shadow-300);
1980
- --salt-overlayable-shadow-popout: var(--salt-shadow-400);
1981
- --salt-overlayable-shadow-drag: var(--salt-shadow-400);
1982
- --salt-overlayable-shadow-modal: var(--salt-shadow-500);
1922
+ --salt-overlayable-shadow-scroll: var(--salt-shadow-lowest);
1923
+ --salt-overlayable-shadow-region: var(--salt-shadow-lower);
1924
+ --salt-overlayable-shadow: var(--salt-shadow-lower);
1925
+ --salt-overlayable-shadow-hover: var(--salt-shadow-low);
1926
+ --salt-overlayable-shadow-popout: var(--salt-shadow-mediumLow);
1927
+ --salt-overlayable-shadow-drag: var(--salt-shadow-mediumLow);
1928
+ --salt-overlayable-shadow-modal: var(--salt-shadow-medium);
1983
1929
  --salt-overlayable-background: var(--salt-palette-alpha-higher);
1984
1930
  --salt-overlayable-background-hover: var(--salt-palette-alpha-contrast-lowest);
1985
1931
  --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-medium);
1986
1932
  --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-mediumLow);
1987
1933
  }
1988
1934
 
1989
- /* css/characteristics/selectable.css */
1935
+ /* css/legacy/characteristics/selectable.css */
1990
1936
  .salt-theme {
1991
1937
  --salt-selectable-borderColor: var(--salt-palette-interact-border);
1992
1938
  --salt-selectable-borderColor-hover: var(--salt-palette-interact-border-hover);
@@ -2006,7 +1952,7 @@
2006
1952
  --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
2007
1953
  }
2008
1954
 
2009
- /* css/characteristics/sentiment.css */
1955
+ /* css/legacy/characteristics/sentiment.css */
2010
1956
  .salt-theme {
2011
1957
  --salt-sentiment-negative-foreground-informative: var(--salt-palette-negative-foreground);
2012
1958
  --salt-sentiment-positive-foreground-informative: var(--salt-palette-positive-foreground);
@@ -2016,7 +1962,7 @@
2016
1962
  --salt-sentiment-neutral-track-disabled: var(--salt-palette-neutral-border-disabled);
2017
1963
  }
2018
1964
 
2019
- /* css/characteristics/separable.css */
1965
+ /* css/legacy/characteristics/separable.css */
2020
1966
  .salt-theme {
2021
1967
  --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumHigh);
2022
1968
  --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-medium);
@@ -2029,7 +1975,7 @@
2029
1975
  --salt-separable-background-active: var(--salt-palette-accent);
2030
1976
  }
2031
1977
 
2032
- /* css/characteristics/status.css */
1978
+ /* css/legacy/characteristics/status.css */
2033
1979
  .salt-theme {
2034
1980
  --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
2035
1981
  --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
@@ -2056,7 +2002,13 @@
2056
2002
  --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
2057
2003
  }
2058
2004
 
2059
- /* css/characteristics/text.css */
2005
+ /* css/legacy/characteristics/target.css */
2006
+ .salt-theme {
2007
+ --salt-target-background-hover: var(--salt-palette-interact-background-hover);
2008
+ --salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);
2009
+ }
2010
+
2011
+ /* css/legacy/characteristics/text.css */
2060
2012
  .salt-theme {
2061
2013
  --salt-text-letterSpacing: 0;
2062
2014
  --salt-text-textAlign: left;
@@ -2215,27 +2167,129 @@
2215
2167
  --salt-text-notation-lineHeight: 10px;
2216
2168
  }
2217
2169
 
2218
- /* css/characteristics/content.css */
2170
+ /* css/deprecated/foundations.css */
2219
2171
  .salt-theme {
2220
- --salt-content-primary-foreground: var(--salt-palette-neutral-primary-foreground);
2221
- --salt-content-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
2222
- --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
2223
- --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
2224
- --salt-content-accent-foreground: var(--salt-palette-accent-foreground-informative);
2225
- --salt-content-attention-foreground: var(--salt-palette-negative-foreground);
2226
- --salt-content-bold-foreground: var(--salt-palette-interact-cta-foreground);
2227
- --salt-content-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
2228
- --salt-content-foreground-hover: var(--salt-palette-accent-foreground-informative);
2229
- --salt-content-foreground-active: var(--salt-palette-accent-foreground-informative);
2230
- --salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);
2231
- --salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
2172
+ --salt-delay-instant: 100ms;
2173
+ --salt-delay-perceptible: 300ms;
2174
+ --salt-delay-notable: 1000ms;
2175
+ --salt-delay-cutoff: 10000ms;
2176
+ --salt-size-icon-base: var(--salt-icon-size-base);
2177
+ --salt-opacity-1: 0.15;
2178
+ --salt-opacity-2: 0.25;
2179
+ --salt-opacity-3: 0.4;
2180
+ --salt-opacity-4: 0.7;
2181
+ --salt-opacity-8: 0.08;
2182
+ --salt-opacity-0: 0;
2183
+ --salt-opacity-15: 0.15;
2184
+ --salt-opacity-25: 0.25;
2185
+ --salt-opacity-40: 0.4;
2186
+ --salt-opacity-45: 0.45;
2187
+ --salt-opacity-70: 0.7;
2188
+ --salt-shadow-0: none;
2189
+ --salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color);
2190
+ --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
2191
+ --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
2192
+ --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
2193
+ --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
2194
+ --salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color);
2195
+ --salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color);
2196
+ --salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color);
2197
+ --salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color);
2198
+ --salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color);
2199
+ --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
2200
+ --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
2201
+ --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
2202
+ --salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
2203
+ --salt-color-black-60a: rgba(var(--salt-color-black-rgb), 0.6);
2204
+ --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
2205
+ --salt-color-black-90a: rgba(var(--salt-color-black-rgb), 0.9);
2206
+ --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
2207
+ --salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
2208
+ --salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
2209
+ --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
2210
+ --salt-color-white-90a: rgba(var(--salt-color-white-rgb), 0.9);
2211
+ }
2212
+ .salt-theme[data-mode=light] {
2213
+ --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
2214
+ --salt-shadow-2-color: rgba(0, 0, 0, 0.1);
2215
+ --salt-shadow-3-color: rgba(0, 0, 0, 0.15);
2216
+ --salt-shadow-4-color: rgba(0, 0, 0, 0.2);
2217
+ --salt-shadow-5-color: rgba(0, 0, 0, 0.3);
2218
+ --salt-shadow-100-color: rgba(0, 0, 0, 0.1);
2219
+ --salt-shadow-200-color: rgba(0, 0, 0, 0.1);
2220
+ --salt-shadow-300-color: rgba(0, 0, 0, 0.15);
2221
+ --salt-shadow-400-color: rgba(0, 0, 0, 0.2);
2222
+ --salt-shadow-500-color: rgba(0, 0, 0, 0.3);
2223
+ }
2224
+ .salt-theme[data-mode=dark] {
2225
+ --salt-shadow-1-color: rgba(0, 0, 0, 0.5);
2226
+ --salt-shadow-2-color: rgba(0, 0, 0, 0.5);
2227
+ --salt-shadow-3-color: rgba(0, 0, 0, 0.55);
2228
+ --salt-shadow-4-color: rgba(0, 0, 0, 0.55);
2229
+ --salt-shadow-5-color: rgba(0, 0, 0, 0.65);
2230
+ --salt-shadow-100-color: rgba(0, 0, 0, 0.5);
2231
+ --salt-shadow-200-color: rgba(0, 0, 0, 0.5);
2232
+ --salt-shadow-300-color: rgba(0, 0, 0, 0.55);
2233
+ --salt-shadow-400-color: rgba(0, 0, 0, 0.55);
2234
+ --salt-shadow-500-color: rgba(0, 0, 0, 0.65);
2235
+ }
2236
+ .salt-density-touch,
2237
+ .salt-density-low,
2238
+ .salt-density-medium,
2239
+ .salt-density-high {
2240
+ --salt-size-selection: var(--salt-size-selectable);
2241
+ --salt-size-brandBar: 4px;
2242
+ --salt-size-graphic-small: 12px;
2243
+ --salt-size-graphic-medium: 24px;
2244
+ --salt-size-graphic-large: 48px;
2245
+ --salt-size-divider-height: var(--salt-size-separator-height);
2246
+ --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
2247
+ --salt-size-detail: var(--salt-size-compact);
2248
+ --salt-size-basis-unit: 4px;
2249
+ --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
2250
+ --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
2251
+ --salt-size-separator-strokeWidth: 1px;
2252
+ --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
2253
+ --salt-size-sharktooth-height: 5px;
2254
+ --salt-size-sharktooth-width: 10px;
2255
+ --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
2256
+ --salt-size-border: 1px;
2257
+ --salt-size-bar-small: 2px;
2258
+ --salt-size-border-strong: 2px;
2259
+ --salt-zIndex-docked: 1050;
2260
+ }
2261
+ .salt-density-high {
2262
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
2263
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
2264
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
2265
+ --salt-icon-size-base: 10px;
2266
+ --salt-icon-size-status-adornment: 6px;
2267
+ }
2268
+ .salt-density-medium {
2269
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
2270
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
2271
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
2272
+ --salt-icon-size-base: 12px;
2273
+ --salt-icon-size-status-adornment: 8px;
2274
+ }
2275
+ .salt-density-low {
2276
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
2277
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
2278
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
2279
+ --salt-icon-size-base: 14px;
2280
+ --salt-icon-size-status-adornment: 10px;
2281
+ }
2282
+ .salt-density-touch {
2283
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
2284
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
2285
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
2286
+ --salt-icon-size-base: 16px;
2287
+ --salt-icon-size-status-adornment: 12px;
2232
2288
  }
2233
2289
 
2234
2290
  /* css/deprecated/characteristics.css */
2235
2291
  .salt-theme {
2236
2292
  --salt-container-borderStyle: solid;
2237
- --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
2238
- --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
2239
2293
  --salt-editable-borderStyle: solid;
2240
2294
  --salt-editable-borderStyle-hover: solid;
2241
2295
  --salt-editable-borderStyle-active: solid;
@@ -2245,12 +2299,8 @@
2245
2299
  --salt-editable-cursor-active: text;
2246
2300
  --salt-editable-cursor-disabled: not-allowed;
2247
2301
  --salt-editable-cursor-readonly: text;
2248
- --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
2249
- --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
2250
- --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
2251
- --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
2252
- --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
2253
2302
  --salt-editable-borderWidth-active: 2px;
2303
+ --salt-editable-help-fontStyle: italic;
2254
2304
  --salt-measured-borderStyle: solid;
2255
2305
  --salt-measured-borderStyle-active: solid;
2256
2306
  --salt-measured-borderStyle-complete: solid;
@@ -2261,6 +2311,94 @@
2261
2311
  --salt-measured-borderWidth-incomplete: 2px;
2262
2312
  --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
2263
2313
  --salt-measured-textAlign: center;
2314
+ --salt-selectable-borderStyle: solid;
2315
+ --salt-selectable-borderStyle-hover: solid;
2316
+ --salt-selectable-borderStyle-selected: solid;
2317
+ --salt-selectable-borderStyle-blurSelected: solid;
2318
+ --salt-selectable-cursor-hover: pointer;
2319
+ --salt-selectable-cursor-selected: pointer;
2320
+ --salt-selectable-cursor-blurSelected: pointer;
2321
+ --salt-selectable-cursor-disabled: not-allowed;
2322
+ --salt-selectable-cursor-readonly: not-allowed;
2323
+ --salt-separable-borderStyle: solid;
2324
+ --salt-draggable-horizontal-cursor-hover: row-resize;
2325
+ --salt-draggable-horizontal-cursor-active: row-resize;
2326
+ --salt-draggable-vertical-cursor-hover: col-resize;
2327
+ --salt-draggable-vertical-cursor-active: col-resize;
2328
+ --salt-draggable-grab-cursor-hover: grab;
2329
+ --salt-draggable-grab-cursor-active: grabbing;
2330
+ --salt-actionable-cursor-hover: pointer;
2331
+ --salt-actionable-cursor-active: pointer;
2332
+ --salt-actionable-cursor-disabled: not-allowed;
2333
+ --salt-actionable-letterSpacing: 0.6px;
2334
+ --salt-actionable-textTransform: uppercase;
2335
+ --salt-actionable-textAlign: center;
2336
+ --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
2337
+ --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
2338
+ --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
2339
+ --salt-target-cursor-disabled: not-allowed;
2340
+ --salt-target-borderStyle: dashed;
2341
+ --salt-target-borderStyle-hover: solid;
2342
+ --salt-target-borderStyle-disabled: dashed;
2343
+ --salt-text-link-textDecoration: underline;
2344
+ --salt-text-link-textDecoration-hover: none;
2345
+ --salt-text-link-textDecoration-selected: underline;
2346
+ --salt-text-textDecoration: var(--salt-typography-textDecoration-none);
2347
+ --salt-text-textTransform: none;
2348
+ --salt-navigable-cursor-active: pointer;
2349
+ --salt-navigable-cursor-hover: pointer;
2350
+ --salt-navigable-cursor-disabled: not-allowed;
2351
+ --salt-navigable-cursor-edit: text;
2352
+ --salt-navigable-textDecoration: var(--salt-typography-textDecoration-underline);
2353
+ --salt-navigable-textDecoration-hover: var(--salt-typography-textDecoration-none);
2354
+ --salt-navigable-textDecoration-selected: var(--salt-typography-textDecoration-underline);
2355
+ --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
2356
+ --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
2357
+ --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
2358
+ --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
2359
+ --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
2360
+ --salt-track-borderStyle: solid;
2361
+ --salt-track-borderStyle-active: solid;
2362
+ --salt-track-borderStyle-complete: solid;
2363
+ --salt-track-borderStyle-incomplete: dotted;
2364
+ --salt-track-borderWidth: 2px;
2365
+ --salt-track-borderWidth-active: 2px;
2366
+ --salt-track-borderWidth-complete: 2px;
2367
+ --salt-track-borderWidth-incomplete: 2px;
2368
+ --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
2369
+ --salt-track-textAlign: center;
2370
+ --salt-taggable-cursor-hover: pointer;
2371
+ --salt-taggable-cursor-active: pointer;
2372
+ --salt-taggable-cursor-disabled: not-allowed;
2373
+ --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
2374
+ --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
2375
+ }
2376
+ .salt-density-high {
2377
+ --salt-accent-fontSize: 8px;
2378
+ --salt-accent-lineHeight: 11px;
2379
+ }
2380
+ .salt-density-medium {
2381
+ --salt-accent-fontSize: 10px;
2382
+ --salt-accent-lineHeight: 13px;
2383
+ }
2384
+ .salt-density-low {
2385
+ --salt-accent-fontSize: 12px;
2386
+ --salt-accent-lineHeight: 16px;
2387
+ }
2388
+ .salt-density-touch {
2389
+ --salt-accent-fontSize: 14px;
2390
+ --salt-accent-lineHeight: 18px;
2391
+ }
2392
+
2393
+ /* css/legacy/deprecated/characteristics.css */
2394
+ .salt-theme {
2395
+ --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
2396
+ --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
2397
+ --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
2398
+ --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
2399
+ --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
2400
+ --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
2401
+ --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
2264
2402
  --salt-measured-background: var(--salt-palette-measured-background);
2265
2403
  --salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
2266
2404
  --salt-measured-borderColor: var(--salt-palette-measured-border);
@@ -2273,18 +2411,7 @@
2273
2411
  --salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
2274
2412
  --salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
2275
2413
  --salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);
2276
- --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
2277
- --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
2278
2414
  --salt-overlayable-rangeSelection: var(--salt-overlayable-background-rangeSelection);
2279
- --salt-selectable-borderStyle: solid;
2280
- --salt-selectable-borderStyle-hover: solid;
2281
- --salt-selectable-borderStyle-selected: solid;
2282
- --salt-selectable-borderStyle-blurSelected: solid;
2283
- --salt-selectable-cursor-hover: pointer;
2284
- --salt-selectable-cursor-selected: pointer;
2285
- --salt-selectable-cursor-blurSelected: pointer;
2286
- --salt-selectable-cursor-disabled: not-allowed;
2287
- --salt-selectable-cursor-readonly: not-allowed;
2288
2415
  --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
2289
2416
  --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
2290
2417
  --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
@@ -2318,7 +2445,6 @@
2318
2445
  --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
2319
2446
  --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
2320
2447
  --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
2321
- --salt-separable-borderStyle: solid;
2322
2448
  --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
2323
2449
  --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
2324
2450
  --salt-status-info-background-emphasize: var(--salt-status-info-background);
@@ -2341,42 +2467,14 @@
2341
2467
  --salt-status-error-foreground: var(--salt-palette-error-foreground);
2342
2468
  --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
2343
2469
  --salt-status-success-foreground: var(--salt-palette-success-foreground);
2344
- --salt-draggable-horizontal-cursor-hover: row-resize;
2345
- --salt-draggable-horizontal-cursor-active: row-resize;
2346
- --salt-draggable-vertical-cursor-hover: col-resize;
2347
- --salt-draggable-vertical-cursor-active: col-resize;
2348
- --salt-draggable-grab-cursor-hover: grab;
2349
- --salt-draggable-grab-cursor-active: grabbing;
2350
- --salt-actionable-cursor-hover: pointer;
2351
- --salt-actionable-cursor-active: pointer;
2352
- --salt-actionable-cursor-disabled: not-allowed;
2353
- --salt-actionable-letterSpacing: 0.6px;
2354
- --salt-actionable-textTransform: uppercase;
2355
- --salt-actionable-textAlign: center;
2356
- --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
2357
- --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
2358
- --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
2359
- --salt-target-cursor-disabled: not-allowed;
2360
- --salt-target-borderStyle: dashed;
2361
- --salt-target-borderStyle-hover: solid;
2362
- --salt-target-borderStyle-disabled: dashed;
2363
2470
  --salt-text-background-selected: var(--salt-content-foreground-highlight);
2364
2471
  --salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover);
2365
2472
  --salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active);
2366
2473
  --salt-text-link-foreground-visited: var(--salt-palette-navigate-foreground-visited);
2367
- --salt-text-link-textDecoration: underline;
2368
- --salt-text-link-textDecoration-hover: none;
2369
- --salt-text-link-textDecoration-selected: underline;
2370
2474
  --salt-text-primary-foreground: var(--salt-palette-neutral-primary-foreground);
2371
2475
  --salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
2372
2476
  --salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
2373
2477
  --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
2374
- --salt-text-textDecoration: var(--salt-typography-textDecoration-none);
2375
- --salt-text-textTransform: none;
2376
- --salt-navigable-cursor-active: pointer;
2377
- --salt-navigable-cursor-hover: pointer;
2378
- --salt-navigable-cursor-disabled: not-allowed;
2379
- --salt-navigable-cursor-edit: text;
2380
2478
  --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);
2381
2479
  --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);
2382
2480
  --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);
@@ -2388,33 +2486,12 @@
2388
2486
  --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
2389
2487
  --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
2390
2488
  --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
2391
- --salt-navigable-textDecoration: var(--salt-typography-textDecoration-underline);
2392
- --salt-navigable-textDecoration-hover: var(--salt-typography-textDecoration-none);
2393
- --salt-navigable-textDecoration-selected: var(--salt-typography-textDecoration-underline);
2394
- --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
2395
- --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
2396
- --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
2397
- --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
2398
2489
  --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
2399
- --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
2400
2490
  --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
2401
- --salt-track-borderStyle: solid;
2402
- --salt-track-borderStyle-active: solid;
2403
- --salt-track-borderStyle-complete: solid;
2404
- --salt-track-borderStyle-incomplete: dotted;
2405
- --salt-track-borderWidth: 2px;
2406
- --salt-track-borderWidth-active: 2px;
2407
- --salt-track-borderWidth-complete: 2px;
2408
- --salt-track-borderWidth-incomplete: 2px;
2409
- --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
2410
- --salt-track-textAlign: center;
2411
2491
  --salt-track-background: var(--salt-palette-track-background);
2412
2492
  --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
2413
2493
  --salt-track-borderColor: var(--salt-palette-neutral-border);
2414
2494
  --salt-track-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
2415
- --salt-taggable-cursor-hover: pointer;
2416
- --salt-taggable-cursor-active: pointer;
2417
- --salt-taggable-cursor-disabled: not-allowed;
2418
2495
  --salt-taggable-background: var(--salt-palette-interact-primary-background);
2419
2496
  --salt-taggable-background-hover: var(--salt-palette-interact-primary-background-hover);
2420
2497
  --salt-taggable-background-active: var(--salt-palette-interact-primary-background-active);
@@ -2459,25 +2536,54 @@
2459
2536
  --salt-actionable-secondary-foreground-disabled: var(--salt-actionable-subtle-foreground-disabled);
2460
2537
  --salt-actionable-secondary-foreground-hover: var(--salt-actionable-subtle-foreground-hover);
2461
2538
  --salt-actionable-secondary-foreground: var(--salt-actionable-subtle-foreground);
2462
- }
2463
- .salt-density-high {
2464
- --salt-accent-fontSize: 8px;
2465
- --salt-accent-lineHeight: 11px;
2466
- }
2467
- .salt-density-medium {
2468
- --salt-accent-fontSize: 10px;
2469
- --salt-accent-lineHeight: 13px;
2470
- }
2471
- .salt-density-low {
2472
- --salt-accent-fontSize: 12px;
2473
- --salt-accent-lineHeight: 16px;
2474
- }
2475
- .salt-density-touch {
2476
- --salt-accent-fontSize: 14px;
2477
- --salt-accent-lineHeight: 18px;
2539
+ --salt-actionable-accented-bold-background-disabled: var(--salt-palette-interact-cta-background-disabled);
2540
+ --salt-actionable-accented-bold-borderColor-disabled: var(--salt-palette-alpha-none);
2541
+ --salt-actionable-accented-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
2542
+ --salt-actionable-bold-background-disabled: var(--salt-palette-interact-primary-background-disabled);
2543
+ --salt-actionable-bold-borderColor-disabled: var(--salt-palette-alpha-none);
2544
+ --salt-actionable-bold-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
2545
+ --salt-actionable-accented-background-disabled: var(--salt-palette-alpha-none);
2546
+ --salt-actionable-accented-borderColor-disabled: var(--salt-palette-accent-disabled);
2547
+ --salt-actionable-accented-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
2548
+ --salt-actionable-background-disabled: var(--salt-palette-alpha-none);
2549
+ --salt-actionable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
2550
+ --salt-actionable-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
2551
+ --salt-actionable-accented-subtle-background-disabled: var(--salt-palette-alpha-none);
2552
+ --salt-actionable-accented-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
2553
+ --salt-actionable-accented-subtle-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
2554
+ --salt-actionable-subtle-background-disabled: var(--salt-palette-alpha-none);
2555
+ --salt-actionable-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
2556
+ --salt-actionable-subtle-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
2557
+ --salt-actionable-negative-bold-background-disabled: var(--salt-palette-negative-background-disabled);
2558
+ --salt-actionable-negative-bold-borderColor-disabled: var(--salt-palette-alpha-none);
2559
+ --salt-actionable-negative-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
2560
+ --salt-actionable-negative-background-disabled: var(--salt-palette-alpha-none);
2561
+ --salt-actionable-negative-borderColor-disabled: var(--salt-palette-negative-border-disabled);
2562
+ --salt-actionable-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
2563
+ --salt-actionable-negative-subtle-background-disabled: var(--salt-palette-alpha-none);
2564
+ --salt-actionable-negative-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
2565
+ --salt-actionable-negative-subtle-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
2566
+ --salt-actionable-positive-bold-background-disabled: var(--salt-palette-positive-background-disabled);
2567
+ --salt-actionable-positive-bold-borderColor-disabled: var(--salt-palette-alpha-none);
2568
+ --salt-actionable-positive-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
2569
+ --salt-actionable-positive-background-disabled: var(--salt-palette-alpha-none);
2570
+ --salt-actionable-positive-borderColor-disabled: var(--salt-palette-positive-border-disabled);
2571
+ --salt-actionable-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
2572
+ --salt-actionable-positive-subtle-background-disabled: var(--salt-palette-alpha-none);
2573
+ --salt-actionable-positive-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
2574
+ --salt-actionable-positive-subtle-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
2575
+ --salt-actionable-caution-bold-background-disabled: var(--salt-palette-warning-action-disabled);
2576
+ --salt-actionable-caution-bold-borderColor-disabled: var(--salt-palette-alpha-none);
2577
+ --salt-actionable-caution-bold-foreground-disabled: var(--salt-palette-warning-action-foreground-disabled);
2578
+ --salt-actionable-caution-background-disabled: var(--salt-palette-alpha-none);
2579
+ --salt-actionable-caution-borderColor-disabled: var(--salt-palette-warning-border-disabled);
2580
+ --salt-actionable-caution-foreground-disabled: var(--salt-palette-warning-foreground-informative-disabled);
2581
+ --salt-actionable-caution-subtle-background-disabled: var(--salt-palette-alpha-none);
2582
+ --salt-actionable-caution-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
2583
+ --salt-actionable-caution-subtle-foreground-disabled: var(--salt-palette-warning-foreground-informative-disabled);
2478
2584
  }
2479
2585
 
2480
- /* css/deprecated/fade.css */
2586
+ /* css/legacy/deprecated/fade.css */
2481
2587
  .salt-theme {
2482
2588
  --salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
2483
2589
  --salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
@@ -2559,114 +2665,9 @@
2559
2665
  --salt-color-black-fade-background-highlight: rgba(0, 0, 0, var(--salt-opacity-25));
2560
2666
  --salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15));
2561
2667
  --salt-color-white-fade-background-highlight: rgba(255, 255, 255, var(--salt-opacity-25));
2562
- --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
2563
- --salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
2564
- --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
2565
- --salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
2566
- }
2567
-
2568
- /* css/deprecated/foundations.css */
2569
- .salt-theme {
2570
- --salt-delay-instant: 100ms;
2571
- --salt-delay-perceptible: 300ms;
2572
- --salt-delay-notable: 1000ms;
2573
- --salt-delay-cutoff: 10000ms;
2574
- --salt-size-icon-base: var(--salt-icon-size-base);
2575
- --salt-opacity-1: 0.15;
2576
- --salt-opacity-2: 0.25;
2577
- --salt-opacity-3: 0.4;
2578
- --salt-opacity-4: 0.7;
2579
- --salt-opacity-8: 0.08;
2580
- --salt-opacity-0: 0;
2581
- --salt-opacity-15: 0.15;
2582
- --salt-opacity-25: 0.25;
2583
- --salt-opacity-40: 0.4;
2584
- --salt-opacity-45: 0.45;
2585
- --salt-opacity-70: 0.7;
2586
- --salt-shadow-0: none;
2587
- --salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color);
2588
- --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
2589
- --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
2590
- --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
2591
- --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
2592
- --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
2593
- --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
2594
- --salt-color-black-60a: rgba(var(--salt-color-black-rgb), 0.6);
2595
- --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
2596
- --salt-color-black-90a: rgba(var(--salt-color-black-rgb), 0.9);
2597
- --salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
2598
- --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
2599
- --salt-color-white-90a: rgba(var(--salt-color-white-rgb), 0.9);
2600
- }
2601
- .salt-theme[data-mode=light] {
2602
- --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
2603
- --salt-shadow-2-color: rgba(0, 0, 0, 0.1);
2604
- --salt-shadow-3-color: rgba(0, 0, 0, 0.15);
2605
- --salt-shadow-4-color: rgba(0, 0, 0, 0.2);
2606
- --salt-shadow-5-color: rgba(0, 0, 0, 0.3);
2607
- }
2608
- .salt-theme[data-mode=dark] {
2609
- --salt-shadow-1-color: rgba(0, 0, 0, 0.5);
2610
- --salt-shadow-2-color: rgba(0, 0, 0, 0.5);
2611
- --salt-shadow-3-color: rgba(0, 0, 0, 0.55);
2612
- --salt-shadow-4-color: rgba(0, 0, 0, 0.55);
2613
- --salt-shadow-5-color: rgba(0, 0, 0, 0.65);
2614
- }
2615
- .salt-density-touch,
2616
- .salt-density-low,
2617
- .salt-density-medium,
2618
- .salt-density-high {
2619
- --salt-size-selection: var(--salt-size-selectable);
2620
- --salt-size-brandBar: 4px;
2621
- --salt-size-graphic-small: 12px;
2622
- --salt-size-graphic-medium: 24px;
2623
- --salt-size-graphic-large: 48px;
2624
- --salt-size-divider-height: var(--salt-size-separator-height);
2625
- --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
2626
- --salt-size-detail: var(--salt-size-compact);
2627
- --salt-size-basis-unit: 4px;
2628
- --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
2629
- --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
2630
- --salt-size-separator-strokeWidth: 1px;
2631
- --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
2632
- --salt-size-sharktooth-height: 5px;
2633
- --salt-size-sharktooth-width: 10px;
2634
- --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
2635
- --salt-size-border: 1px;
2636
- --salt-size-bar-small: 2px;
2637
- --salt-size-border-strong: 2px;
2638
- --salt-zIndex-docked: 1050;
2639
- }
2640
- .salt-density-high {
2641
- --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
2642
- --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
2643
- --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
2644
- --salt-icon-size-base: 10px;
2645
- --salt-icon-size-status-adornment: 6px;
2646
- }
2647
- .salt-density-medium {
2648
- --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
2649
- --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
2650
- --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
2651
- --salt-icon-size-base: 12px;
2652
- --salt-icon-size-status-adornment: 8px;
2653
- }
2654
- .salt-density-low {
2655
- --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
2656
- --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
2657
- --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
2658
- --salt-icon-size-base: 14px;
2659
- --salt-icon-size-status-adornment: 10px;
2660
- }
2661
- .salt-density-touch {
2662
- --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
2663
- --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
2664
- --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
2665
- --salt-icon-size-base: 16px;
2666
- --salt-icon-size-status-adornment: 12px;
2667
2668
  }
2668
2669
 
2669
- /* css/deprecated/palette.css */
2670
+ /* css/legacy/deprecated/palette.css */
2670
2671
  .salt-theme {
2671
2672
  --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
2672
2673
  --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
@@ -2707,6 +2708,8 @@
2707
2708
  --salt-palette-interact-secondary-background-disabled: transparent;
2708
2709
  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
2709
2710
  --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
2711
+ --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-40a);
2712
+ --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-40a);
2710
2713
  --salt-palette-measured-fill: var(--salt-color-blue-500);
2711
2714
  --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
2712
2715
  --salt-palette-measured-foreground: var(--salt-color-gray-90);
@@ -2765,6 +2768,17 @@
2765
2768
  --salt-palette-accent-border: var(--salt-color-blue-500);
2766
2769
  --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
2767
2770
  --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
2771
+ --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-600-40a);
2772
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-600-40a);
2773
+ --salt-palette-negative-background-disabled: var(--salt-color-red-600-40a);
2774
+ --salt-palette-negative-border-disabled: var(--salt-color-red-500-40a);
2775
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-600-40a);
2776
+ --salt-palette-positive-background-disabled: var(--salt-color-green-600-40a);
2777
+ --salt-palette-positive-border-disabled: var(--salt-color-green-500-40a);
2778
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-700-40a);
2779
+ --salt-palette-warning-foreground-informative-disabled: var(--salt-color-orange-850-40a);
2780
+ --salt-palette-warning-action-disabled: var(--salt-color-orange-600-40a);
2781
+ --salt-palette-warning-action-foreground-disabled: var(--salt-color-gray-900-40a);
2768
2782
  }
2769
2783
  .salt-theme[data-mode=dark] {
2770
2784
  --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
@@ -2783,6 +2797,8 @@
2783
2797
  --salt-palette-interact-secondary-background-disabled: transparent;
2784
2798
  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
2785
2799
  --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
2800
+ --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-40a);
2801
+ --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-40a);
2786
2802
  --salt-palette-measured-fill: var(--salt-color-blue-300);
2787
2803
  --salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
2788
2804
  --salt-palette-measured-foreground: var(--salt-color-gray-90);
@@ -2841,6 +2857,17 @@
2841
2857
  --salt-palette-accent-border: var(--salt-color-blue-500);
2842
2858
  --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
2843
2859
  --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
2860
+ --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-200-40a);
2861
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-200-40a);
2862
+ --salt-palette-negative-background-disabled: var(--salt-color-red-600-40a);
2863
+ --salt-palette-negative-border-disabled: var(--salt-color-red-500-40a);
2864
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-200-40a);
2865
+ --salt-palette-positive-background-disabled: var(--salt-color-green-600-40a);
2866
+ --salt-palette-positive-border-disabled: var(--salt-color-green-500-40a);
2867
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-500-40a);
2868
+ --salt-palette-warning-foreground-informative-disabled: var(--salt-color-orange-400-40a);
2869
+ --salt-palette-warning-action-disabled: var(--salt-color-orange-600-40a);
2870
+ --salt-palette-warning-action-foreground-disabled: var(--salt-color-gray-900-40a);
2844
2871
  }
2845
2872
 
2846
2873
  /* css/theme.css */