@salt-ds/theme 1.33.0 → 1.34.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,
@@ -628,8 +832,6 @@
628
832
  22,
629
833
  22,
630
834
  22;
631
- --salt-color-white: rgb(var(--salt-color-white-rgb));
632
- --salt-color-black: rgb(var(--salt-color-black-rgb));
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));
@@ -865,272 +1067,74 @@
865
1067
  --salt-color-smoke-300: rgb(176, 179, 184);
866
1068
  --salt-color-smoke-400: rgb(144, 147, 152);
867
1069
  --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;
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);
977
1119
  }
978
1120
 
979
- /* css/foundations/shadow.css */
1121
+ /* css/legacy/palette/accent.css */
980
1122
  .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);
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);
1127
+ --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-600-40a);
986
1128
  }
987
1129
  .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;
1100
- }
1101
-
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;
1115
- }
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;
1130
+ --salt-palette-accent: var(--salt-color-blue-500);
1131
+ --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
1132
+ --salt-palette-accent-foreground: var(--salt-color-white);
1133
+ --salt-palette-accent-foreground-informative: var(--salt-color-blue-200);
1134
+ --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-200-40a);
1131
1135
  }
1132
1136
 
1133
- /* css/palette/alpha.css */
1137
+ /* css/legacy/palette/alpha.css */
1134
1138
  .salt-theme[data-mode=light] {
1135
1139
  --salt-palette-alpha-highest: var(--salt-color-white-80a);
1136
1140
  --salt-palette-alpha-higher: var(--salt-color-white-65a);
@@ -1174,41 +1178,7 @@
1174
1178
  --salt-palette-alpha-none: transparent;
1175
1179
  }
1176
1180
 
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 */
1181
+ /* css/legacy/palette/categorical.css */
1212
1182
  .salt-theme[data-mode=light] {
1213
1183
  --salt-palette-categorical-1: var(--salt-color-cobalt-500);
1214
1184
  --salt-palette-categorical-1-strong: var(--salt-color-cobalt-600);
@@ -1334,7 +1304,7 @@
1334
1304
  --salt-palette-categorical-20-weakest: var(--salt-color-forest-900);
1335
1305
  }
1336
1306
 
1337
- /* css/palette/corner.css */
1307
+ /* css/legacy/palette/corner.css */
1338
1308
  .salt-theme {
1339
1309
  --salt-palette-corner-weaker: var(--salt-curve-0);
1340
1310
  --salt-palette-corner-weak: var(--salt-curve-0);
@@ -1344,7 +1314,25 @@
1344
1314
  --salt-palette-corner-strongest: var(--salt-curve-999);
1345
1315
  }
1346
1316
 
1347
- /* css/palette/info.css */
1317
+ /* css/legacy/palette/error.css */
1318
+ .salt-theme[data-mode=light] {
1319
+ --salt-palette-error-background: var(--salt-color-red-10);
1320
+ --salt-palette-error-bold-background: var(--salt-color-red-500);
1321
+ --salt-palette-error-background-selected: var(--salt-color-red-30);
1322
+ --salt-palette-error-border: var(--salt-color-red-500);
1323
+ --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
1324
+ --salt-palette-error-foreground-informative: var(--salt-color-red-600);
1325
+ }
1326
+ .salt-theme[data-mode=dark] {
1327
+ --salt-palette-error-background: var(--salt-color-red-900);
1328
+ --salt-palette-error-bold-background: var(--salt-color-red-500);
1329
+ --salt-palette-error-background-selected: var(--salt-color-red-800);
1330
+ --salt-palette-error-border: var(--salt-color-red-400);
1331
+ --salt-palette-error-foreground-decorative: var(--salt-color-red-400);
1332
+ --salt-palette-error-foreground-informative: var(--salt-color-red-200);
1333
+ }
1334
+
1335
+ /* css/legacy/palette/info.css */
1348
1336
  .salt-theme[data-mode=light] {
1349
1337
  --salt-palette-info-background: var(--salt-color-blue-10);
1350
1338
  --salt-palette-info-bold-background: var(--salt-color-blue-500);
@@ -1360,7 +1348,7 @@
1360
1348
  --salt-palette-info-foreground-informative: var(--salt-color-blue-200);
1361
1349
  }
1362
1350
 
1363
- /* css/palette/interact.css */
1351
+ /* css/legacy/palette/interact.css */
1364
1352
  .salt-theme[data-mode=light] {
1365
1353
  --salt-palette-interact-background-hover: var(--salt-color-blue-10);
1366
1354
  --salt-palette-interact-background-active: var(--salt-color-blue-30);
@@ -1440,7 +1428,7 @@
1440
1428
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
1441
1429
  }
1442
1430
 
1443
- /* css/palette/navigate.css */
1431
+ /* css/legacy/palette/navigate.css */
1444
1432
  .salt-theme[data-mode=light] {
1445
1433
  --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
1446
1434
  --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
@@ -1452,7 +1440,7 @@
1452
1440
  --salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
1453
1441
  }
1454
1442
 
1455
- /* css/palette/negative.css */
1443
+ /* css/legacy/palette/negative.css */
1456
1444
  .salt-theme[data-mode=light] {
1457
1445
  --salt-palette-negative-foreground: var(--salt-color-red-600);
1458
1446
  --salt-palette-negative-foreground-disabled: var(--salt-color-red-600-40a);
@@ -1474,7 +1462,7 @@
1474
1462
  --salt-palette-negative-border-disabled: var(--salt-color-red-500-40a);
1475
1463
  }
1476
1464
 
1477
- /* css/palette/neutral.css */
1465
+ /* css/legacy/palette/neutral.css */
1478
1466
  .salt-theme[data-mode=light] {
1479
1467
  --salt-palette-neutral-border: var(--salt-color-gray-50);
1480
1468
  --salt-palette-neutral-border-disabled: var(--salt-color-gray-50-40a);
@@ -1504,7 +1492,7 @@
1504
1492
  --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-500-40a);
1505
1493
  }
1506
1494
 
1507
- /* css/palette/positive.css */
1495
+ /* css/legacy/palette/positive.css */
1508
1496
  .salt-theme[data-mode=light] {
1509
1497
  --salt-palette-positive-foreground: var(--salt-color-green-600);
1510
1498
  --salt-palette-positive-foreground-disabled: var(--salt-color-green-600-40a);
@@ -1526,7 +1514,23 @@
1526
1514
  --salt-palette-positive-border-disabled: var(--salt-color-green-500-40a);
1527
1515
  }
1528
1516
 
1529
- /* css/palette/success.css */
1517
+ /* css/legacy/palette/shadow.css */
1518
+ .salt-theme[data-mode=light] {
1519
+ --salt-shadow-lowest: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
1520
+ --salt-shadow-lower: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
1521
+ --salt-shadow-low: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
1522
+ --salt-shadow-mediumLow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
1523
+ --salt-shadow-medium: 0 12px 40px 0 rgba(0, 0, 0, 0.3);
1524
+ }
1525
+ .salt-theme[data-mode=dark] {
1526
+ --salt-shadow-lowest: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
1527
+ --salt-shadow-lower: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
1528
+ --salt-shadow-low: 0 4px 8px 0 rgba(0, 0, 0, 0.55);
1529
+ --salt-shadow-mediumLow: 0 6px 10px 0 rgba(0, 0, 0, 0.55);
1530
+ --salt-shadow-medium: 0 12px 40px 0 rgba(0, 0, 0, 0.65);
1531
+ }
1532
+
1533
+ /* css/legacy/palette/success.css */
1530
1534
  .salt-theme[data-mode=light] {
1531
1535
  --salt-palette-success-background: var(--salt-color-green-10);
1532
1536
  --salt-palette-success-bold-background: var(--salt-color-green-500);
@@ -1544,7 +1548,7 @@
1544
1548
  --salt-palette-success-foreground-informative: var(--salt-color-green-200);
1545
1549
  }
1546
1550
 
1547
- /* css/palette/text.css */
1551
+ /* css/legacy/palette/text.css */
1548
1552
  .salt-theme {
1549
1553
  --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
1550
1554
  --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
@@ -1567,7 +1571,7 @@
1567
1571
  --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1568
1572
  }
1569
1573
 
1570
- /* css/palette/warning.css */
1574
+ /* css/legacy/palette/warning.css */
1571
1575
  .salt-theme[data-mode=light] {
1572
1576
  --salt-palette-warning-background: var(--salt-color-orange-10);
1573
1577
  --salt-palette-warning-bold-background: var(--salt-color-orange-800);
@@ -1601,7 +1605,7 @@
1601
1605
  --salt-palette-warning-action-foreground-disabled: var(--salt-color-gray-900-40a);
1602
1606
  }
1603
1607
 
1604
- /* css/characteristics/accent.css */
1608
+ /* css/legacy/characteristics/accent.css */
1605
1609
  .salt-theme {
1606
1610
  --salt-accent-background: var(--salt-palette-accent);
1607
1611
  --salt-accent-background-disabled: var(--salt-palette-accent-disabled);
@@ -1610,7 +1614,7 @@
1610
1614
  --salt-accent-foreground: var(--salt-palette-accent-foreground);
1611
1615
  }
1612
1616
 
1613
- /* css/characteristics/actionable.css */
1617
+ /* css/legacy/characteristics/actionable.css */
1614
1618
  .salt-theme {
1615
1619
  --salt-actionable-accented-bold-background-active: var(--salt-palette-interact-cta-background-active);
1616
1620
  --salt-actionable-accented-bold-background-disabled: var(--salt-palette-interact-cta-background-disabled);
@@ -1794,7 +1798,7 @@
1794
1798
  --salt-actionable-caution-subtle-foreground: var(--salt-palette-warning-foreground-informative);
1795
1799
  }
1796
1800
 
1797
- /* css/characteristics/category.css */
1801
+ /* css/legacy/characteristics/category.css */
1798
1802
  .salt-theme {
1799
1803
  --salt-category-1-subtle-foreground: var(--salt-palette-categorical-1-strong);
1800
1804
  --salt-category-1-subtle-background: var(--salt-palette-categorical-1-weakest);
@@ -1898,7 +1902,7 @@
1898
1902
  --salt-category-20-bold-background: var(--salt-palette-categorical-20);
1899
1903
  }
1900
1904
 
1901
- /* css/characteristics/container.css */
1905
+ /* css/legacy/characteristics/container.css */
1902
1906
  .salt-theme {
1903
1907
  --salt-container-primary-background: var(--salt-palette-neutral-primary-background);
1904
1908
  --salt-container-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
@@ -1916,13 +1920,23 @@
1916
1920
  --salt-container-ghost-borderColor: var(--salt-palette-alpha-contrast-medium);
1917
1921
  }
1918
1922
 
1919
- /* css/characteristics/target.css */
1923
+ /* css/legacy/characteristics/content.css */
1920
1924
  .salt-theme {
1921
- --salt-target-background-hover: var(--salt-palette-interact-background-hover);
1922
- --salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);
1925
+ --salt-content-primary-foreground: var(--salt-palette-neutral-primary-foreground);
1926
+ --salt-content-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1927
+ --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
1928
+ --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1929
+ --salt-content-accent-foreground: var(--salt-palette-accent-foreground-informative);
1930
+ --salt-content-attention-foreground: var(--salt-palette-negative-foreground);
1931
+ --salt-content-bold-foreground: var(--salt-palette-interact-cta-foreground);
1932
+ --salt-content-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1933
+ --salt-content-foreground-hover: var(--salt-palette-accent-foreground-informative);
1934
+ --salt-content-foreground-active: var(--salt-palette-accent-foreground-informative);
1935
+ --salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);
1936
+ --salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
1923
1937
  }
1924
1938
 
1925
- /* css/characteristics/editable.css */
1939
+ /* css/legacy/characteristics/editable.css */
1926
1940
  .salt-theme {
1927
1941
  --salt-editable-borderColor: var(--salt-palette-interact-border);
1928
1942
  --salt-editable-borderColor-active: var(--salt-palette-interact-border-active);
@@ -1939,10 +1953,9 @@
1939
1953
  --salt-editable-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
1940
1954
  --salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);
1941
1955
  --salt-editable-secondary-background-readonly: var(--salt-palette-alpha-none);
1942
- --salt-editable-help-fontStyle: italic;
1943
1956
  }
1944
1957
 
1945
- /* css/characteristics/focused.css */
1958
+ /* css/legacy/characteristics/focused.css */
1946
1959
  .salt-theme {
1947
1960
  --salt-focused-outlineColor: var(--salt-palette-interact-outline);
1948
1961
  --salt-focused-outlineStyle: var(--salt-borderStyle-dotted);
@@ -1951,19 +1964,8 @@
1951
1964
  --salt-focused-outlineOffset: 0;
1952
1965
  --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
1953
1966
  }
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
1967
 
1966
- /* css/characteristics/navigable.css */
1968
+ /* css/legacy/characteristics/navigable.css */
1967
1969
  .salt-theme {
1968
1970
  --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
1969
1971
  --salt-navigable-accent-indicator-active: var(--salt-palette-navigate-indicator-active);
@@ -1971,22 +1973,22 @@
1971
1973
  --salt-navigable-accent-borderColor-active: var(--salt-palette-interact-border-active);
1972
1974
  }
1973
1975
 
1974
- /* css/characteristics/overlayable.css */
1976
+ /* css/legacy/characteristics/overlayable.css */
1975
1977
  .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);
1978
+ --salt-overlayable-shadow-scroll: var(--salt-shadow-lowest);
1979
+ --salt-overlayable-shadow-region: var(--salt-shadow-lower);
1980
+ --salt-overlayable-shadow: var(--salt-shadow-lower);
1981
+ --salt-overlayable-shadow-hover: var(--salt-shadow-low);
1982
+ --salt-overlayable-shadow-popout: var(--salt-shadow-mediumLow);
1983
+ --salt-overlayable-shadow-drag: var(--salt-shadow-mediumLow);
1984
+ --salt-overlayable-shadow-modal: var(--salt-shadow-medium);
1983
1985
  --salt-overlayable-background: var(--salt-palette-alpha-higher);
1984
1986
  --salt-overlayable-background-hover: var(--salt-palette-alpha-contrast-lowest);
1985
1987
  --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-medium);
1986
1988
  --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-mediumLow);
1987
1989
  }
1988
1990
 
1989
- /* css/characteristics/selectable.css */
1991
+ /* css/legacy/characteristics/selectable.css */
1990
1992
  .salt-theme {
1991
1993
  --salt-selectable-borderColor: var(--salt-palette-interact-border);
1992
1994
  --salt-selectable-borderColor-hover: var(--salt-palette-interact-border-hover);
@@ -2006,7 +2008,7 @@
2006
2008
  --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
2007
2009
  }
2008
2010
 
2009
- /* css/characteristics/sentiment.css */
2011
+ /* css/legacy/characteristics/sentiment.css */
2010
2012
  .salt-theme {
2011
2013
  --salt-sentiment-negative-foreground-informative: var(--salt-palette-negative-foreground);
2012
2014
  --salt-sentiment-positive-foreground-informative: var(--salt-palette-positive-foreground);
@@ -2016,7 +2018,7 @@
2016
2018
  --salt-sentiment-neutral-track-disabled: var(--salt-palette-neutral-border-disabled);
2017
2019
  }
2018
2020
 
2019
- /* css/characteristics/separable.css */
2021
+ /* css/legacy/characteristics/separable.css */
2020
2022
  .salt-theme {
2021
2023
  --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumHigh);
2022
2024
  --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-medium);
@@ -2029,7 +2031,7 @@
2029
2031
  --salt-separable-background-active: var(--salt-palette-accent);
2030
2032
  }
2031
2033
 
2032
- /* css/characteristics/status.css */
2034
+ /* css/legacy/characteristics/status.css */
2033
2035
  .salt-theme {
2034
2036
  --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
2035
2037
  --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
@@ -2056,7 +2058,13 @@
2056
2058
  --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
2057
2059
  }
2058
2060
 
2059
- /* css/characteristics/text.css */
2061
+ /* css/legacy/characteristics/target.css */
2062
+ .salt-theme {
2063
+ --salt-target-background-hover: var(--salt-palette-interact-background-hover);
2064
+ --salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);
2065
+ }
2066
+
2067
+ /* css/legacy/characteristics/text.css */
2060
2068
  .salt-theme {
2061
2069
  --salt-text-letterSpacing: 0;
2062
2070
  --salt-text-textAlign: left;
@@ -2190,77 +2198,263 @@
2190
2198
  --salt-text-notation-lineHeight: 13px;
2191
2199
  }
2192
2200
  .salt-density-high {
2193
- --salt-text-h1-fontSize: 18px;
2194
- --salt-text-h1-lineHeight: 24px;
2195
- --salt-text-h2-fontSize: 14px;
2196
- --salt-text-h2-lineHeight: 18px;
2197
- --salt-text-h3-fontSize: 12px;
2198
- --salt-text-h3-lineHeight: 16px;
2199
- --salt-text-h4-fontSize: 11px;
2200
- --salt-text-h4-lineHeight: 14px;
2201
- --salt-text-label-fontSize: 10px;
2202
- --salt-text-label-lineHeight: 13px;
2203
- --salt-text-fontSize: 11px;
2204
- --salt-text-lineHeight: 14px;
2205
- --salt-text-minHeight: 14px;
2206
- --salt-text-display1-fontSize: 42px;
2207
- --salt-text-display1-lineHeight: 54px;
2208
- --salt-text-display2-fontSize: 28px;
2209
- --salt-text-display2-lineHeight: 36px;
2210
- --salt-text-display3-fontSize: 18px;
2211
- --salt-text-display3-lineHeight: 24px;
2212
- --salt-text-display4-fontSize: 18px;
2213
- --salt-text-display4-lineHeight: 24px;
2214
- --salt-text-notation-fontSize: 8px;
2215
- --salt-text-notation-lineHeight: 10px;
2201
+ --salt-text-h1-fontSize: 18px;
2202
+ --salt-text-h1-lineHeight: 24px;
2203
+ --salt-text-h2-fontSize: 14px;
2204
+ --salt-text-h2-lineHeight: 18px;
2205
+ --salt-text-h3-fontSize: 12px;
2206
+ --salt-text-h3-lineHeight: 16px;
2207
+ --salt-text-h4-fontSize: 11px;
2208
+ --salt-text-h4-lineHeight: 14px;
2209
+ --salt-text-label-fontSize: 10px;
2210
+ --salt-text-label-lineHeight: 13px;
2211
+ --salt-text-fontSize: 11px;
2212
+ --salt-text-lineHeight: 14px;
2213
+ --salt-text-minHeight: 14px;
2214
+ --salt-text-display1-fontSize: 42px;
2215
+ --salt-text-display1-lineHeight: 54px;
2216
+ --salt-text-display2-fontSize: 28px;
2217
+ --salt-text-display2-lineHeight: 36px;
2218
+ --salt-text-display3-fontSize: 18px;
2219
+ --salt-text-display3-lineHeight: 24px;
2220
+ --salt-text-display4-fontSize: 18px;
2221
+ --salt-text-display4-lineHeight: 24px;
2222
+ --salt-text-notation-fontSize: 8px;
2223
+ --salt-text-notation-lineHeight: 10px;
2224
+ }
2225
+
2226
+ /* css/deprecated/foundations.css */
2227
+ .salt-theme {
2228
+ --salt-delay-instant: 100ms;
2229
+ --salt-delay-perceptible: 300ms;
2230
+ --salt-delay-notable: 1000ms;
2231
+ --salt-delay-cutoff: 10000ms;
2232
+ --salt-size-icon-base: var(--salt-icon-size-base);
2233
+ --salt-opacity-1: 0.15;
2234
+ --salt-opacity-2: 0.25;
2235
+ --salt-opacity-3: 0.4;
2236
+ --salt-opacity-4: 0.7;
2237
+ --salt-opacity-8: 0.08;
2238
+ --salt-opacity-0: 0;
2239
+ --salt-opacity-15: 0.15;
2240
+ --salt-opacity-25: 0.25;
2241
+ --salt-opacity-40: 0.4;
2242
+ --salt-opacity-45: 0.45;
2243
+ --salt-opacity-70: 0.7;
2244
+ --salt-shadow-0: none;
2245
+ --salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color);
2246
+ --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
2247
+ --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
2248
+ --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
2249
+ --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
2250
+ --salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color);
2251
+ --salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color);
2252
+ --salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color);
2253
+ --salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color);
2254
+ --salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color);
2255
+ --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
2256
+ --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
2257
+ --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
2258
+ --salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
2259
+ --salt-color-black-60a: rgba(var(--salt-color-black-rgb), 0.6);
2260
+ --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
2261
+ --salt-color-black-90a: rgba(var(--salt-color-black-rgb), 0.9);
2262
+ --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
2263
+ --salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
2264
+ --salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
2265
+ --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
2266
+ --salt-color-white-90a: rgba(var(--salt-color-white-rgb), 0.9);
2267
+ }
2268
+ .salt-theme[data-mode=light] {
2269
+ --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
2270
+ --salt-shadow-2-color: rgba(0, 0, 0, 0.1);
2271
+ --salt-shadow-3-color: rgba(0, 0, 0, 0.15);
2272
+ --salt-shadow-4-color: rgba(0, 0, 0, 0.2);
2273
+ --salt-shadow-5-color: rgba(0, 0, 0, 0.3);
2274
+ --salt-shadow-100-color: rgba(0, 0, 0, 0.1);
2275
+ --salt-shadow-200-color: rgba(0, 0, 0, 0.1);
2276
+ --salt-shadow-300-color: rgba(0, 0, 0, 0.15);
2277
+ --salt-shadow-400-color: rgba(0, 0, 0, 0.2);
2278
+ --salt-shadow-500-color: rgba(0, 0, 0, 0.3);
2279
+ }
2280
+ .salt-theme[data-mode=dark] {
2281
+ --salt-shadow-1-color: rgba(0, 0, 0, 0.5);
2282
+ --salt-shadow-2-color: rgba(0, 0, 0, 0.5);
2283
+ --salt-shadow-3-color: rgba(0, 0, 0, 0.55);
2284
+ --salt-shadow-4-color: rgba(0, 0, 0, 0.55);
2285
+ --salt-shadow-5-color: rgba(0, 0, 0, 0.65);
2286
+ --salt-shadow-100-color: rgba(0, 0, 0, 0.5);
2287
+ --salt-shadow-200-color: rgba(0, 0, 0, 0.5);
2288
+ --salt-shadow-300-color: rgba(0, 0, 0, 0.55);
2289
+ --salt-shadow-400-color: rgba(0, 0, 0, 0.55);
2290
+ --salt-shadow-500-color: rgba(0, 0, 0, 0.65);
2291
+ }
2292
+ .salt-density-touch,
2293
+ .salt-density-low,
2294
+ .salt-density-medium,
2295
+ .salt-density-high {
2296
+ --salt-size-selection: var(--salt-size-selectable);
2297
+ --salt-size-brandBar: 4px;
2298
+ --salt-size-graphic-small: 12px;
2299
+ --salt-size-graphic-medium: 24px;
2300
+ --salt-size-graphic-large: 48px;
2301
+ --salt-size-divider-height: var(--salt-size-separator-height);
2302
+ --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
2303
+ --salt-size-detail: var(--salt-size-compact);
2304
+ --salt-size-basis-unit: 4px;
2305
+ --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
2306
+ --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
2307
+ --salt-size-separator-strokeWidth: 1px;
2308
+ --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
2309
+ --salt-size-sharktooth-height: 5px;
2310
+ --salt-size-sharktooth-width: 10px;
2311
+ --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
2312
+ --salt-size-border: 1px;
2313
+ --salt-size-bar-small: 2px;
2314
+ --salt-size-border-strong: 2px;
2315
+ --salt-zIndex-docked: 1050;
2316
+ }
2317
+ .salt-density-high {
2318
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
2319
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
2320
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
2321
+ --salt-icon-size-base: 10px;
2322
+ --salt-icon-size-status-adornment: 6px;
2323
+ }
2324
+ .salt-density-medium {
2325
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
2326
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
2327
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
2328
+ --salt-icon-size-base: 12px;
2329
+ --salt-icon-size-status-adornment: 8px;
2330
+ }
2331
+ .salt-density-low {
2332
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
2333
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
2334
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
2335
+ --salt-icon-size-base: 14px;
2336
+ --salt-icon-size-status-adornment: 10px;
2337
+ }
2338
+ .salt-density-touch {
2339
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
2340
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
2341
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
2342
+ --salt-icon-size-base: 16px;
2343
+ --salt-icon-size-status-adornment: 12px;
2344
+ }
2345
+
2346
+ /* css/deprecated/characteristics.css */
2347
+ .salt-theme {
2348
+ --salt-container-borderStyle: solid;
2349
+ --salt-editable-borderStyle: solid;
2350
+ --salt-editable-borderStyle-hover: solid;
2351
+ --salt-editable-borderStyle-active: solid;
2352
+ --salt-editable-borderStyle-disabled: solid;
2353
+ --salt-editable-borderStyle-readonly: solid;
2354
+ --salt-editable-cursor-hover: text;
2355
+ --salt-editable-cursor-active: text;
2356
+ --salt-editable-cursor-disabled: not-allowed;
2357
+ --salt-editable-cursor-readonly: text;
2358
+ --salt-editable-borderWidth-active: 2px;
2359
+ --salt-editable-help-fontStyle: italic;
2360
+ --salt-measured-borderStyle: solid;
2361
+ --salt-measured-borderStyle-active: solid;
2362
+ --salt-measured-borderStyle-complete: solid;
2363
+ --salt-measured-borderStyle-incomplete: dotted;
2364
+ --salt-measured-borderWidth: 2px;
2365
+ --salt-measured-borderWidth-active: 2px;
2366
+ --salt-measured-borderWidth-complete: 2px;
2367
+ --salt-measured-borderWidth-incomplete: 2px;
2368
+ --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
2369
+ --salt-measured-textAlign: center;
2370
+ --salt-selectable-borderStyle: solid;
2371
+ --salt-selectable-borderStyle-hover: solid;
2372
+ --salt-selectable-borderStyle-selected: solid;
2373
+ --salt-selectable-borderStyle-blurSelected: solid;
2374
+ --salt-selectable-cursor-hover: pointer;
2375
+ --salt-selectable-cursor-selected: pointer;
2376
+ --salt-selectable-cursor-blurSelected: pointer;
2377
+ --salt-selectable-cursor-disabled: not-allowed;
2378
+ --salt-selectable-cursor-readonly: not-allowed;
2379
+ --salt-separable-borderStyle: solid;
2380
+ --salt-draggable-horizontal-cursor-hover: row-resize;
2381
+ --salt-draggable-horizontal-cursor-active: row-resize;
2382
+ --salt-draggable-vertical-cursor-hover: col-resize;
2383
+ --salt-draggable-vertical-cursor-active: col-resize;
2384
+ --salt-draggable-grab-cursor-hover: grab;
2385
+ --salt-draggable-grab-cursor-active: grabbing;
2386
+ --salt-actionable-cursor-hover: pointer;
2387
+ --salt-actionable-cursor-active: pointer;
2388
+ --salt-actionable-cursor-disabled: not-allowed;
2389
+ --salt-actionable-letterSpacing: 0.6px;
2390
+ --salt-actionable-textTransform: uppercase;
2391
+ --salt-actionable-textAlign: center;
2392
+ --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
2393
+ --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
2394
+ --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
2395
+ --salt-target-cursor-disabled: not-allowed;
2396
+ --salt-target-borderStyle: dashed;
2397
+ --salt-target-borderStyle-hover: solid;
2398
+ --salt-target-borderStyle-disabled: dashed;
2399
+ --salt-text-link-textDecoration: underline;
2400
+ --salt-text-link-textDecoration-hover: none;
2401
+ --salt-text-link-textDecoration-selected: underline;
2402
+ --salt-text-textDecoration: var(--salt-typography-textDecoration-none);
2403
+ --salt-text-textTransform: none;
2404
+ --salt-navigable-cursor-active: pointer;
2405
+ --salt-navigable-cursor-hover: pointer;
2406
+ --salt-navigable-cursor-disabled: not-allowed;
2407
+ --salt-navigable-cursor-edit: text;
2408
+ --salt-navigable-textDecoration: var(--salt-typography-textDecoration-underline);
2409
+ --salt-navigable-textDecoration-hover: var(--salt-typography-textDecoration-none);
2410
+ --salt-navigable-textDecoration-selected: var(--salt-typography-textDecoration-underline);
2411
+ --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
2412
+ --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
2413
+ --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
2414
+ --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
2415
+ --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
2416
+ --salt-track-borderStyle: solid;
2417
+ --salt-track-borderStyle-active: solid;
2418
+ --salt-track-borderStyle-complete: solid;
2419
+ --salt-track-borderStyle-incomplete: dotted;
2420
+ --salt-track-borderWidth: 2px;
2421
+ --salt-track-borderWidth-active: 2px;
2422
+ --salt-track-borderWidth-complete: 2px;
2423
+ --salt-track-borderWidth-incomplete: 2px;
2424
+ --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
2425
+ --salt-track-textAlign: center;
2426
+ --salt-taggable-cursor-hover: pointer;
2427
+ --salt-taggable-cursor-active: pointer;
2428
+ --salt-taggable-cursor-disabled: not-allowed;
2429
+ --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
2430
+ --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
2431
+ }
2432
+ .salt-density-high {
2433
+ --salt-accent-fontSize: 8px;
2434
+ --salt-accent-lineHeight: 11px;
2216
2435
  }
2217
-
2218
- /* css/characteristics/content.css */
2219
- .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);
2436
+ .salt-density-medium {
2437
+ --salt-accent-fontSize: 10px;
2438
+ --salt-accent-lineHeight: 13px;
2439
+ }
2440
+ .salt-density-low {
2441
+ --salt-accent-fontSize: 12px;
2442
+ --salt-accent-lineHeight: 16px;
2443
+ }
2444
+ .salt-density-touch {
2445
+ --salt-accent-fontSize: 14px;
2446
+ --salt-accent-lineHeight: 18px;
2232
2447
  }
2233
2448
 
2234
- /* css/deprecated/characteristics.css */
2449
+ /* css/legacy/deprecated/characteristics.css */
2235
2450
  .salt-theme {
2236
- --salt-container-borderStyle: solid;
2237
2451
  --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
2238
2452
  --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
2239
- --salt-editable-borderStyle: solid;
2240
- --salt-editable-borderStyle-hover: solid;
2241
- --salt-editable-borderStyle-active: solid;
2242
- --salt-editable-borderStyle-disabled: solid;
2243
- --salt-editable-borderStyle-readonly: solid;
2244
- --salt-editable-cursor-hover: text;
2245
- --salt-editable-cursor-active: text;
2246
- --salt-editable-cursor-disabled: not-allowed;
2247
- --salt-editable-cursor-readonly: text;
2248
2453
  --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
2249
2454
  --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
2250
2455
  --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
2251
2456
  --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
2252
2457
  --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
2253
- --salt-editable-borderWidth-active: 2px;
2254
- --salt-measured-borderStyle: solid;
2255
- --salt-measured-borderStyle-active: solid;
2256
- --salt-measured-borderStyle-complete: solid;
2257
- --salt-measured-borderStyle-incomplete: dotted;
2258
- --salt-measured-borderWidth: 2px;
2259
- --salt-measured-borderWidth-active: 2px;
2260
- --salt-measured-borderWidth-complete: 2px;
2261
- --salt-measured-borderWidth-incomplete: 2px;
2262
- --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
2263
- --salt-measured-textAlign: center;
2264
2458
  --salt-measured-background: var(--salt-palette-measured-background);
2265
2459
  --salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
2266
2460
  --salt-measured-borderColor: var(--salt-palette-measured-border);
@@ -2273,18 +2467,7 @@
2273
2467
  --salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
2274
2468
  --salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
2275
2469
  --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
2470
  --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
2471
  --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
2289
2472
  --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
2290
2473
  --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
@@ -2318,7 +2501,6 @@
2318
2501
  --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
2319
2502
  --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
2320
2503
  --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
2321
- --salt-separable-borderStyle: solid;
2322
2504
  --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
2323
2505
  --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
2324
2506
  --salt-status-info-background-emphasize: var(--salt-status-info-background);
@@ -2341,42 +2523,14 @@
2341
2523
  --salt-status-error-foreground: var(--salt-palette-error-foreground);
2342
2524
  --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
2343
2525
  --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
2526
  --salt-text-background-selected: var(--salt-content-foreground-highlight);
2364
2527
  --salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover);
2365
2528
  --salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active);
2366
2529
  --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
2530
  --salt-text-primary-foreground: var(--salt-palette-neutral-primary-foreground);
2371
2531
  --salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
2372
2532
  --salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
2373
2533
  --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
2534
  --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);
2381
2535
  --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);
2382
2536
  --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);
@@ -2388,33 +2542,12 @@
2388
2542
  --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
2389
2543
  --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
2390
2544
  --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
2545
  --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
2399
- --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
2400
2546
  --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
2547
  --salt-track-background: var(--salt-palette-track-background);
2412
2548
  --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
2413
2549
  --salt-track-borderColor: var(--salt-palette-neutral-border);
2414
2550
  --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
2551
  --salt-taggable-background: var(--salt-palette-interact-primary-background);
2419
2552
  --salt-taggable-background-hover: var(--salt-palette-interact-primary-background-hover);
2420
2553
  --salt-taggable-background-active: var(--salt-palette-interact-primary-background-active);
@@ -2460,24 +2593,8 @@
2460
2593
  --salt-actionable-secondary-foreground-hover: var(--salt-actionable-subtle-foreground-hover);
2461
2594
  --salt-actionable-secondary-foreground: var(--salt-actionable-subtle-foreground);
2462
2595
  }
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;
2478
- }
2479
2596
 
2480
- /* css/deprecated/fade.css */
2597
+ /* css/legacy/deprecated/fade.css */
2481
2598
  .salt-theme {
2482
2599
  --salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
2483
2600
  --salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
@@ -2559,114 +2676,9 @@
2559
2676
  --salt-color-black-fade-background-highlight: rgba(0, 0, 0, var(--salt-opacity-25));
2560
2677
  --salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15));
2561
2678
  --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
2679
  }
2668
2680
 
2669
- /* css/deprecated/palette.css */
2681
+ /* css/legacy/deprecated/palette.css */
2670
2682
  .salt-theme {
2671
2683
  --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
2672
2684
  --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);