@salt-ds/theme 1.32.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.
@@ -1,4 +1,386 @@
1
- /* css/foundations/alpha-next.css */
1
+ /* css/foundations/alpha.css */
2
+ .salt-theme {
3
+ --salt-color-white-5a: rgba(var(--salt-color-white-rgb), 0.05);
4
+ --salt-color-white-10a: rgba(var(--salt-color-white-rgb), 0.1);
5
+ --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
6
+ --salt-color-white-20a: rgba(var(--salt-color-white-rgb), 0.2);
7
+ --salt-color-white-30a: rgba(var(--salt-color-white-rgb), 0.3);
8
+ --salt-color-white-40a: rgba(var(--salt-color-white-rgb), 0.4);
9
+ --salt-color-white-50a: rgba(var(--salt-color-white-rgb), 0.5);
10
+ --salt-color-white-65a: rgba(var(--salt-color-white-rgb), 0.65);
11
+ --salt-color-white-80a: rgba(var(--salt-color-white-rgb), 0.8);
12
+ --salt-color-black-5a: rgba(var(--salt-color-black-rgb), 0.05);
13
+ --salt-color-black-10a: rgba(var(--salt-color-black-rgb), 0.1);
14
+ --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
15
+ --salt-color-black-20a: rgba(var(--salt-color-black-rgb), 0.2);
16
+ --salt-color-black-30a: rgba(var(--salt-color-black-rgb), 0.3);
17
+ --salt-color-black-40a: rgba(var(--salt-color-black-rgb), 0.4);
18
+ --salt-color-black-50a: rgba(var(--salt-color-black-rgb), 0.5);
19
+ --salt-color-black-65a: rgba(var(--salt-color-black-rgb), 0.65);
20
+ --salt-color-black-80a: rgba(var(--salt-color-black-rgb), 0.8);
21
+ }
22
+
23
+ /* css/foundations/animation.css */
24
+ .salt-density-touch,
25
+ .salt-density-low,
26
+ .salt-density-medium,
27
+ .salt-density-high {
28
+ --salt-animation-opacity-start: 0;
29
+ --salt-animation-opacity-end: 1;
30
+ --salt-animation-scale-start: 0;
31
+ --salt-animation-scale-end: 1;
32
+ --salt-animation-transform-start: 100%;
33
+ --salt-animation-transform-end: 0;
34
+ --salt-animation-duration: var(--salt-duration-perceptible);
35
+ --salt-animation-timing-function: ease-in-out;
36
+ --salt-animation-slide-in-top: slide-in-top var(--salt-animation-duration) var(--salt-animation-timing-function);
37
+ --salt-animation-slide-in-left: slide-in-left var(--salt-animation-duration) var(--salt-animation-timing-function);
38
+ --salt-animation-slide-in-right: slide-in-right var(--salt-animation-duration) var(--salt-animation-timing-function);
39
+ --salt-animation-slide-in-bottom: slide-in-bottom var(--salt-animation-duration) var(--salt-animation-timing-function);
40
+ --salt-animation-slide-out-top: slide-out-top var(--salt-animation-duration) var(--salt-animation-timing-function) both;
41
+ --salt-animation-slide-out-left: slide-out-left var(--salt-animation-duration) var(--salt-animation-timing-function) both;
42
+ --salt-animation-slide-out-right: slide-out-right var(--salt-animation-duration) var(--salt-animation-timing-function) both;
43
+ --salt-animation-slide-out-bottom: slide-out-bottom var(--salt-animation-duration) var(--salt-animation-timing-function) both;
44
+ --salt-animation-fade-in-back: fade-in-back var(--salt-animation-duration) var(--salt-animation-timing-function);
45
+ --salt-animation-fade-in-forward: fade-in-forward var(--salt-animation-duration) var(--salt-animation-timing-function);
46
+ --salt-animation-fade-in-center: fade-in-center var(--salt-animation-duration) var(--salt-animation-timing-function);
47
+ --salt-animation-fade-out-back: fade-out-back var(--salt-animation-duration) ease-in-out both;
48
+ }
49
+ @keyframes slide-in-top {
50
+ 0% {
51
+ opacity: var(--salt-animation-opacity-start);
52
+ transform: translateY(var(--salt-animation-transform-start));
53
+ }
54
+ 100% {
55
+ opacity: var(--salt-animation-opacity-end);
56
+ transform: translateY(var(--salt-animation-transform-end));
57
+ }
58
+ }
59
+ @keyframes slide-out-top {
60
+ 0% {
61
+ opacity: var(--salt-animation-opacity-end);
62
+ transform: translateY(var(--salt-animation-transform-end));
63
+ }
64
+ 100% {
65
+ opacity: var(--salt-animation-opacity-start);
66
+ transform: translateY(var(--salt-animation-transform-start));
67
+ }
68
+ }
69
+ @keyframes slide-in-left {
70
+ 0% {
71
+ opacity: var(--salt-animation-opacity-start);
72
+ transform: translateX(calc(-1 * var(--salt-animation-transform-start)));
73
+ }
74
+ 100% {
75
+ opacity: var(--salt-animation-opacity-end);
76
+ transform: translateX(var(--salt-animation-transform-end));
77
+ }
78
+ }
79
+ @keyframes slide-out-left {
80
+ 0% {
81
+ opacity: var(--salt-animation-opacity-end);
82
+ transform: translateX(var(--salt-animation-transform-end));
83
+ }
84
+ 100% {
85
+ opacity: var(--salt-animation-opacity-start);
86
+ transform: translateX(calc(-1 * var(--salt-animation-transform-start)));
87
+ }
88
+ }
89
+ @keyframes slide-in-right {
90
+ 0% {
91
+ opacity: var(--salt-animation-opacity-start);
92
+ transform: translateX(var(--salt-animation-transform-start));
93
+ }
94
+ 100% {
95
+ opacity: var(--salt-animation-opacity-end);
96
+ transform: translateX(var(--salt-animation-transform-end));
97
+ }
98
+ }
99
+ @keyframes slide-out-right {
100
+ 0% {
101
+ opacity: var(--salt-animation-opacity-end);
102
+ transform: translateX(var(--salt-animation-transform-end));
103
+ }
104
+ 100% {
105
+ opacity: var(--salt-animation-opacity-start);
106
+ transform: translateX(var(--salt-animation-transform-start));
107
+ }
108
+ }
109
+ @keyframes slide-in-bottom {
110
+ 0% {
111
+ opacity: var(--salt-animation-opacity-start);
112
+ transform: translateY(calc(-1 * var(--salt-animation-transform-start)));
113
+ }
114
+ 100% {
115
+ opacity: var(--salt-animation-opacity-end);
116
+ transform: translateY(var(--salt-animation-transform-end));
117
+ }
118
+ }
119
+ @keyframes slide-out-bottom {
120
+ 0% {
121
+ opacity: var(--salt-animation-opacity-end);
122
+ transform: translateY(var(--salt-animation-transform-end));
123
+ }
124
+ 100% {
125
+ opacity: var(--salt-animation-opacity-start);
126
+ transform: translateY(calc(-1 * var(--salt-animation-transform-start)));
127
+ }
128
+ }
129
+ @keyframes fade-in-back {
130
+ 0% {
131
+ --salt-animation-scale-start: 1.4;
132
+ opacity: var(--salt-animation-opacity-start);
133
+ transform: scale(var(--salt-animation-scale-start));
134
+ }
135
+ 100% {
136
+ opacity: var(--salt-animation-opacity-end);
137
+ transform: scale(var(--salt-animation-scale-end));
138
+ }
139
+ }
140
+ @keyframes fade-in-forward {
141
+ 0% {
142
+ --salt-animation-scale-start: 0.6;
143
+ opacity: var(--salt-animation-opacity-start);
144
+ transform: scale(var(--salt-animation-scale-start));
145
+ }
146
+ 100% {
147
+ opacity: var(--salt-animation-opacity-end);
148
+ transform: scale(var(--salt-animation-scale-end));
149
+ }
150
+ }
151
+ @keyframes fade-in-center {
152
+ 0% {
153
+ opacity: var(--salt-animation-opacity-start);
154
+ }
155
+ 100% {
156
+ opacity: var(--salt-animation-opacity-end);
157
+ }
158
+ }
159
+ @keyframes fade-out-back {
160
+ 0% {
161
+ opacity: var(--salt-animation-opacity-end);
162
+ }
163
+ 100% {
164
+ opacity: var(--salt-animation-opacity-start);
165
+ }
166
+ }
167
+
168
+ /* css/foundations/borderStyle.css */
169
+ .salt-theme {
170
+ --salt-borderStyle-solid: solid;
171
+ --salt-borderStyle-dashed: dashed;
172
+ --salt-borderStyle-dotted: dotted;
173
+ }
174
+
175
+ /* css/foundations/color.css */
176
+ .salt-theme {
177
+ --salt-color-black-rgb:
178
+ 0,
179
+ 0,
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/next/foundations/alpha.css */
2
384
  .salt-theme.salt-theme-next {
3
385
  --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
4
386
  --salt-color-blue-300-40a: rgba(var(--salt-color-blue-300-rgb), 0.4);
@@ -39,12 +421,8 @@
39
421
  --salt-color-background-leather-40a: rgba(var(--salt-color-background-leather-rgb), 0.4);
40
422
  }
41
423
 
42
- /* css/foundations/color-next.css */
424
+ /* css/next/foundations/color.css */
43
425
  .salt-theme.salt-theme-next {
44
- --salt-color-white-rgb:
45
- 255,
46
- 255,
47
- 255;
48
426
  --salt-color-gray-100-rgb:
49
427
  230,
50
428
  233,
@@ -81,10 +459,6 @@
81
459
  41,
82
460
  46,
83
461
  51;
84
- --salt-color-black-rgb:
85
- 0,
86
- 0,
87
- 0;
88
462
  --salt-color-blue-100-rgb:
89
463
  234,
90
464
  246,
@@ -369,7 +743,6 @@
369
743
  58,
370
744
  34,
371
745
  6;
372
- --salt-color-white: rgb(var(--salt-color-white-rgb));
373
746
  --salt-color-gray-100: rgb(var(--salt-color-gray-100-rgb));
374
747
  --salt-color-gray-200: rgb(var(--salt-color-gray-200-rgb));
375
748
  --salt-color-gray-300: rgb(var(--salt-color-gray-300-rgb));
@@ -379,7 +752,6 @@
379
752
  --salt-color-gray-700: rgb(var(--salt-color-gray-700-rgb));
380
753
  --salt-color-gray-800: rgb(var(--salt-color-gray-800-rgb));
381
754
  --salt-color-gray-900: rgb(var(--salt-color-gray-900-rgb));
382
- --salt-color-black: rgb(var(--salt-color-black-rgb));
383
755
  --salt-color-blue-100: rgb(var(--salt-color-blue-100-rgb));
384
756
  --salt-color-blue-200: rgb(var(--salt-color-blue-200-rgb));
385
757
  --salt-color-blue-300: rgb(var(--salt-color-blue-300-rgb));
@@ -453,7 +825,7 @@
453
825
  --salt-color-logo-brown: rgb(var(--salt-color-logo-brown-rgb));
454
826
  }
455
827
 
456
- /* css/palette/accent-next.css */
828
+ /* css/next/palette/accent.css */
457
829
  .salt-theme.salt-theme-next[data-mode=light][data-accent=blue] {
458
830
  --salt-palette-accent: var(--salt-color-blue-500);
459
831
  --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
@@ -515,7 +887,51 @@
515
887
  --salt-palette-accent-action-active: var(--salt-color-teal-800);
516
888
  }
517
889
 
518
- /* css/palette/background-next.css */
890
+ /* css/next/palette/alpha.css */
891
+ .salt-theme-next[data-mode=light] {
892
+ --salt-palette-alpha-highest: var(--salt-color-white-80a);
893
+ --salt-palette-alpha-higher: var(--salt-color-white-65a);
894
+ --salt-palette-alpha-high: var(--salt-color-white-50a);
895
+ --salt-palette-alpha-mediumHigh: var(--salt-color-white-40a);
896
+ --salt-palette-alpha-medium: var(--salt-color-white-30a);
897
+ --salt-palette-alpha-mediumLow: var(--salt-color-white-20a);
898
+ --salt-palette-alpha-low: var(--salt-color-white-15a);
899
+ --salt-palette-alpha-lower: var(--salt-color-white-10a);
900
+ --salt-palette-alpha-lowest: var(--salt-color-white-5a);
901
+ --salt-palette-alpha-contrast-highest: var(--salt-color-black-80a);
902
+ --salt-palette-alpha-contrast-higher: var(--salt-color-black-65a);
903
+ --salt-palette-alpha-contrast-high: var(--salt-color-black-50a);
904
+ --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-black-40a);
905
+ --salt-palette-alpha-contrast-medium: var(--salt-color-black-30a);
906
+ --salt-palette-alpha-contrast-mediumLow: var(--salt-color-black-20a);
907
+ --salt-palette-alpha-contrast-low: var(--salt-color-black-15a);
908
+ --salt-palette-alpha-contrast-lower: var(--salt-color-black-10a);
909
+ --salt-palette-alpha-contrast-lowest: var(--salt-color-black-5a);
910
+ --salt-palette-alpha-none: transparent;
911
+ }
912
+ .salt-theme-next[data-mode=dark] {
913
+ --salt-palette-alpha-highest: var(--salt-color-black-80a);
914
+ --salt-palette-alpha-higher: var(--salt-color-black-65a);
915
+ --salt-palette-alpha-high: var(--salt-color-black-50a);
916
+ --salt-palette-alpha-mediumHigh: var(--salt-color-black-40a);
917
+ --salt-palette-alpha-medium: var(--salt-color-black-30a);
918
+ --salt-palette-alpha-mediumLow: var(--salt-color-black-20a);
919
+ --salt-palette-alpha-low: var(--salt-color-black-15a);
920
+ --salt-palette-alpha-lower: var(--salt-color-black-10a);
921
+ --salt-palette-alpha-lowest: var(--salt-color-black-5a);
922
+ --salt-palette-alpha-contrast-highest: var(--salt-color-white-80a);
923
+ --salt-palette-alpha-contrast-higher: var(--salt-color-white-65a);
924
+ --salt-palette-alpha-contrast-high: var(--salt-color-white-50a);
925
+ --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-white-40a);
926
+ --salt-palette-alpha-contrast-medium: var(--salt-color-white-30a);
927
+ --salt-palette-alpha-contrast-mediumLow: var(--salt-color-white-20a);
928
+ --salt-palette-alpha-contrast-low: var(--salt-color-white-15a);
929
+ --salt-palette-alpha-contrast-lower: var(--salt-color-white-10a);
930
+ --salt-palette-alpha-contrast-lowest: var(--salt-color-white-5a);
931
+ --salt-palette-alpha-none: transparent;
932
+ }
933
+
934
+ /* css/next/palette/background.css */
519
935
  .salt-theme.salt-theme-next[data-mode=light] {
520
936
  --salt-palette-background-primary: var(--salt-color-background-snow);
521
937
  --salt-palette-background-primary-disabled: var(--salt-color-background-snow-40a);
@@ -533,7 +949,133 @@
533
949
  --salt-palette-background-tertiary-disabled: var(--salt-color-background-leather-40a);
534
950
  }
535
951
 
536
- /* css/palette/corner-next.css */
952
+ /* css/next/palette/categorical.css */
953
+ .salt-theme.salt-theme-next[data-mode=light] {
954
+ --salt-palette-categorical-1: var(--salt-color-cobalt-500);
955
+ --salt-palette-categorical-1-strong: var(--salt-color-cobalt-600);
956
+ --salt-palette-categorical-1-weakest: var(--salt-color-cobalt-100);
957
+ --salt-palette-categorical-2: var(--salt-color-cider-500);
958
+ --salt-palette-categorical-2-strong: var(--salt-color-cider-600);
959
+ --salt-palette-categorical-2-weakest: var(--salt-color-cider-100);
960
+ --salt-palette-categorical-3: var(--salt-color-plum-500);
961
+ --salt-palette-categorical-3-strong: var(--salt-color-plum-600);
962
+ --salt-palette-categorical-3-weakest: var(--salt-color-plum-100);
963
+ --salt-palette-categorical-4: var(--salt-color-aqua-500);
964
+ --salt-palette-categorical-4-strong: var(--salt-color-aqua-600);
965
+ --salt-palette-categorical-4-weakest: var(--salt-color-aqua-100);
966
+ --salt-palette-categorical-5: var(--salt-color-slate-500);
967
+ --salt-palette-categorical-5-strong: var(--salt-color-slate-600);
968
+ --salt-palette-categorical-5-weakest: var(--salt-color-slate-100);
969
+ --salt-palette-categorical-6: var(--salt-color-rose-500);
970
+ --salt-palette-categorical-6-strong: var(--salt-color-rose-600);
971
+ --salt-palette-categorical-6-weakest: var(--salt-color-rose-100);
972
+ --salt-palette-categorical-7: var(--salt-color-olive-500);
973
+ --salt-palette-categorical-7-strong: var(--salt-color-olive-600);
974
+ --salt-palette-categorical-7-weakest: var(--salt-color-olive-100);
975
+ --salt-palette-categorical-8: var(--salt-color-salmon-500);
976
+ --salt-palette-categorical-8-strong: var(--salt-color-salmon-600);
977
+ --salt-palette-categorical-8-weakest: var(--salt-color-salmon-100);
978
+ --salt-palette-categorical-9: var(--salt-color-indigo-500);
979
+ --salt-palette-categorical-9-strong: var(--salt-color-indigo-600);
980
+ --salt-palette-categorical-9-weakest: var(--salt-color-indigo-100);
981
+ --salt-palette-categorical-10: var(--salt-color-jade-500);
982
+ --salt-palette-categorical-10-strong: var(--salt-color-jade-600);
983
+ --salt-palette-categorical-10-weakest: var(--salt-color-jade-100);
984
+ --salt-palette-categorical-11: var(--salt-color-citrine-500);
985
+ --salt-palette-categorical-11-strong: var(--salt-color-citrine-600);
986
+ --salt-palette-categorical-11-weakest: var(--salt-color-citrine-100);
987
+ --salt-palette-categorical-12: var(--salt-color-autumn-500);
988
+ --salt-palette-categorical-12-strong: var(--salt-color-autumn-600);
989
+ --salt-palette-categorical-12-weakest: var(--salt-color-autumn-100);
990
+ --salt-palette-categorical-13: var(--salt-color-lavender-500);
991
+ --salt-palette-categorical-13-strong: var(--salt-color-lavender-600);
992
+ --salt-palette-categorical-13-weakest: var(--salt-color-lavender-100);
993
+ --salt-palette-categorical-14: var(--salt-color-ocean-500);
994
+ --salt-palette-categorical-14-strong: var(--salt-color-ocean-600);
995
+ --salt-palette-categorical-14-weakest: var(--salt-color-ocean-100);
996
+ --salt-palette-categorical-15: var(--salt-color-smoke-500);
997
+ --salt-palette-categorical-15-strong: var(--salt-color-smoke-600);
998
+ --salt-palette-categorical-15-weakest: var(--salt-color-smoke-100);
999
+ --salt-palette-categorical-16: var(--salt-color-fuchsia-500);
1000
+ --salt-palette-categorical-16-strong: var(--salt-color-fuchsia-600);
1001
+ --salt-palette-categorical-16-weakest: var(--salt-color-fuchsia-100);
1002
+ --salt-palette-categorical-17: var(--salt-color-lime-500);
1003
+ --salt-palette-categorical-17-strong: var(--salt-color-lime-600);
1004
+ --salt-palette-categorical-17-weakest: var(--salt-color-lime-100);
1005
+ --salt-palette-categorical-18: var(--salt-color-fur-500);
1006
+ --salt-palette-categorical-18-strong: var(--salt-color-fur-600);
1007
+ --salt-palette-categorical-18-weakest: var(--salt-color-fur-100);
1008
+ --salt-palette-categorical-19: var(--salt-color-violet-500);
1009
+ --salt-palette-categorical-19-strong: var(--salt-color-violet-600);
1010
+ --salt-palette-categorical-19-weakest: var(--salt-color-violet-100);
1011
+ --salt-palette-categorical-20: var(--salt-color-forest-500);
1012
+ --salt-palette-categorical-20-strong: var(--salt-color-forest-600);
1013
+ --salt-palette-categorical-20-weakest: var(--salt-color-forest-100);
1014
+ }
1015
+ .salt-theme.salt-theme-next[data-mode=dark] {
1016
+ --salt-palette-categorical-1: var(--salt-color-cobalt-500);
1017
+ --salt-palette-categorical-1-strong: var(--salt-color-cobalt-400);
1018
+ --salt-palette-categorical-1-weakest: var(--salt-color-cobalt-900);
1019
+ --salt-palette-categorical-2: var(--salt-color-cider-500);
1020
+ --salt-palette-categorical-2-strong: var(--salt-color-cider-400);
1021
+ --salt-palette-categorical-2-weakest: var(--salt-color-cider-900);
1022
+ --salt-palette-categorical-3: var(--salt-color-plum-500);
1023
+ --salt-palette-categorical-3-strong: var(--salt-color-plum-400);
1024
+ --salt-palette-categorical-3-weakest: var(--salt-color-plum-900);
1025
+ --salt-palette-categorical-4: var(--salt-color-aqua-500);
1026
+ --salt-palette-categorical-4-strong: var(--salt-color-aqua-400);
1027
+ --salt-palette-categorical-4-weakest: var(--salt-color-aqua-900);
1028
+ --salt-palette-categorical-5: var(--salt-color-slate-500);
1029
+ --salt-palette-categorical-5-strong: var(--salt-color-slate-400);
1030
+ --salt-palette-categorical-5-weakest: var(--salt-color-slate-900);
1031
+ --salt-palette-categorical-6: var(--salt-color-rose-500);
1032
+ --salt-palette-categorical-6-strong: var(--salt-color-rose-400);
1033
+ --salt-palette-categorical-6-weakest: var(--salt-color-rose-900);
1034
+ --salt-palette-categorical-7: var(--salt-color-olive-500);
1035
+ --salt-palette-categorical-7-strong: var(--salt-color-olive-400);
1036
+ --salt-palette-categorical-7-weakest: var(--salt-color-olive-900);
1037
+ --salt-palette-categorical-8: var(--salt-color-salmon-500);
1038
+ --salt-palette-categorical-8-strong: var(--salt-color-salmon-400);
1039
+ --salt-palette-categorical-8-weakest: var(--salt-color-salmon-900);
1040
+ --salt-palette-categorical-9: var(--salt-color-indigo-500);
1041
+ --salt-palette-categorical-9-strong: var(--salt-color-indigo-400);
1042
+ --salt-palette-categorical-9-weakest: var(--salt-color-indigo-900);
1043
+ --salt-palette-categorical-10: var(--salt-color-jade-500);
1044
+ --salt-palette-categorical-10-strong: var(--salt-color-jade-400);
1045
+ --salt-palette-categorical-10-weakest: var(--salt-color-jade-900);
1046
+ --salt-palette-categorical-11: var(--salt-color-citrine-500);
1047
+ --salt-palette-categorical-11-strong: var(--salt-color-citrine-400);
1048
+ --salt-palette-categorical-11-weakest: var(--salt-color-citrine-900);
1049
+ --salt-palette-categorical-12: var(--salt-color-autumn-500);
1050
+ --salt-palette-categorical-12-strong: var(--salt-color-autumn-400);
1051
+ --salt-palette-categorical-12-weakest: var(--salt-color-autumn-900);
1052
+ --salt-palette-categorical-13: var(--salt-color-lavender-500);
1053
+ --salt-palette-categorical-13-strong: var(--salt-color-lavender-400);
1054
+ --salt-palette-categorical-13-weakest: var(--salt-color-lavender-900);
1055
+ --salt-palette-categorical-14: var(--salt-color-ocean-500);
1056
+ --salt-palette-categorical-14-strong: var(--salt-color-ocean-400);
1057
+ --salt-palette-categorical-14-weakest: var(--salt-color-ocean-900);
1058
+ --salt-palette-categorical-15: var(--salt-color-smoke-500);
1059
+ --salt-palette-categorical-15-strong: var(--salt-color-smoke-400);
1060
+ --salt-palette-categorical-15-weakest: var(--salt-color-smoke-900);
1061
+ --salt-palette-categorical-16: var(--salt-color-fuchsia-500);
1062
+ --salt-palette-categorical-16-strong: var(--salt-color-fuchsia-400);
1063
+ --salt-palette-categorical-16-weakest: var(--salt-color-fuchsia-900);
1064
+ --salt-palette-categorical-17: var(--salt-color-lime-500);
1065
+ --salt-palette-categorical-17-strong: var(--salt-color-lime-400);
1066
+ --salt-palette-categorical-17-weakest: var(--salt-color-lime-900);
1067
+ --salt-palette-categorical-18: var(--salt-color-fur-500);
1068
+ --salt-palette-categorical-18-strong: var(--salt-color-fur-400);
1069
+ --salt-palette-categorical-18-weakest: var(--salt-color-fur-900);
1070
+ --salt-palette-categorical-19: var(--salt-color-violet-500);
1071
+ --salt-palette-categorical-19-strong: var(--salt-color-violet-400);
1072
+ --salt-palette-categorical-19-weakest: var(--salt-color-violet-900);
1073
+ --salt-palette-categorical-20: var(--salt-color-forest-500);
1074
+ --salt-palette-categorical-20-strong: var(--salt-color-forest-400);
1075
+ --salt-palette-categorical-20-weakest: var(--salt-color-forest-900);
1076
+ }
1077
+
1078
+ /* css/next/palette/corner.css */
537
1079
  .salt-theme-next[data-corner=rounded] {
538
1080
  --salt-palette-corner-weaker: var(--salt-curve-50);
539
1081
  --salt-palette-corner-weak: var(--salt-curve-100);
@@ -551,7 +1093,7 @@
551
1093
  --salt-palette-corner-strongest: var(--salt-curve-999);
552
1094
  }
553
1095
 
554
- /* css/palette/foreground-next.css */
1096
+ /* css/next/palette/foreground.css */
555
1097
  .salt-theme.salt-theme-next[data-mode=light] {
556
1098
  --salt-palette-foreground-primary: var(--salt-color-black);
557
1099
  --salt-palette-foreground-primary-disabled: var(--salt-color-black-40a);
@@ -571,7 +1113,7 @@
571
1113
  --salt-palette-foreground-visited: var(--salt-color-purple-200);
572
1114
  }
573
1115
 
574
- /* css/palette/info-next.css */
1116
+ /* css/next/palette/info.css */
575
1117
  .salt-theme.salt-theme-next[data-mode=light] {
576
1118
  --salt-palette-info: var(--salt-color-blue-500);
577
1119
  --salt-palette-info-strong: var(--salt-color-blue-600);
@@ -583,7 +1125,7 @@
583
1125
  --salt-palette-info-weakest: var(--salt-color-blue-900);
584
1126
  }
585
1127
 
586
- /* css/palette/negative-next.css */
1128
+ /* css/next/palette/negative.css */
587
1129
  .salt-theme.salt-theme-next[data-mode=light] {
588
1130
  --salt-palette-negative: var(--salt-color-red-500);
589
1131
  --salt-palette-negative-disabled: var(--salt-color-red-500-40a);
@@ -605,7 +1147,7 @@
605
1147
  --salt-palette-negative-action-active: var(--salt-color-red-800);
606
1148
  }
607
1149
 
608
- /* css/palette/neutral-next.css */
1150
+ /* css/next/palette/neutral.css */
609
1151
  .salt-theme.salt-theme-next[data-mode=light] {
610
1152
  --salt-palette-neutral: var(--salt-color-gray-500);
611
1153
  --salt-palette-neutral-disabled: var(--salt-color-gray-500-40a);
@@ -641,7 +1183,7 @@
641
1183
  --salt-palette-neutral-action-active: var(--salt-color-gray-800);
642
1184
  }
643
1185
 
644
- /* css/palette/positive-next.css */
1186
+ /* css/next/palette/positive.css */
645
1187
  .salt-theme.salt-theme-next[data-mode=light] {
646
1188
  --salt-palette-positive: var(--salt-color-green-500);
647
1189
  --salt-palette-positive-disabled: var(--salt-color-green-500-40a);
@@ -663,7 +1205,23 @@
663
1205
  --salt-palette-positive-action-active: var(--salt-color-green-800);
664
1206
  }
665
1207
 
666
- /* css/palette/text-next.css */
1208
+ /* css/next/palette/shadow.css */
1209
+ .salt-theme.salt-theme-next[data-mode=light] {
1210
+ --salt-shadow-lowest: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
1211
+ --salt-shadow-lower: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
1212
+ --salt-shadow-low: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
1213
+ --salt-shadow-mediumLow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
1214
+ --salt-shadow-medium: 0 12px 40px 0 rgba(0, 0, 0, 0.3);
1215
+ }
1216
+ .salt-theme.salt-theme-next[data-mode=dark] {
1217
+ --salt-shadow-lowest: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
1218
+ --salt-shadow-lower: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
1219
+ --salt-shadow-low: 0 4px 8px 0 rgba(0, 0, 0, 0.55);
1220
+ --salt-shadow-mediumLow: 0 6px 10px 0 rgba(0, 0, 0, 0.55);
1221
+ --salt-shadow-medium: 0 12px 40px 0 rgba(0, 0, 0, 0.65);
1222
+ }
1223
+
1224
+ /* css/next/palette/text.css */
667
1225
  .salt-theme-next.salt-theme[data-heading-font="Open Sans"] {
668
1226
  --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
669
1227
  --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
@@ -703,7 +1261,7 @@
703
1261
  --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-medium);
704
1262
  }
705
1263
 
706
- /* css/palette/warning-next.css */
1264
+ /* css/next/palette/warning.css */
707
1265
  .salt-theme.salt-theme-next[data-mode=light] {
708
1266
  --salt-palette-warning: var(--salt-color-orange-500);
709
1267
  --salt-palette-warning-disabled: var(--salt-color-orange-500-40a);
@@ -725,7 +1283,7 @@
725
1283
  --salt-palette-warning-action-active: var(--salt-color-orange-800);
726
1284
  }
727
1285
 
728
- /* css/characteristics/accent-next.css */
1286
+ /* css/next/characteristics/accent.css */
729
1287
  .salt-theme.salt-theme-next {
730
1288
  --salt-accent-background: var(--salt-palette-accent);
731
1289
  --salt-accent-background-disabled: var(--salt-palette-accent-disabled);
@@ -734,7 +1292,7 @@
734
1292
  --salt-accent-foreground: var(--salt-palette-foreground-primary-alt);
735
1293
  }
736
1294
 
737
- /* css/characteristics/actionable-next.css */
1295
+ /* css/next/characteristics/actionable.css */
738
1296
  .salt-theme.salt-theme-next {
739
1297
  --salt-actionable-accented-bold-background-active: var(--salt-palette-accent-action-active);
740
1298
  --salt-actionable-accented-bold-background-disabled: var(--salt-palette-accent-disabled);
@@ -918,31 +1476,111 @@
918
1476
  --salt-actionable-caution-subtle-foreground: var(--salt-palette-warning-strong);
919
1477
  }
920
1478
 
921
- /* css/characteristics/category-next.css */
1479
+ /* css/next/characteristics/category.css */
922
1480
  .salt-theme.salt-theme-next {
1481
+ --salt-category-1-subtle-foreground: var(--salt-palette-categorical-1-strong);
1482
+ --salt-category-1-subtle-background: var(--salt-palette-categorical-1-weakest);
1483
+ --salt-category-1-subtle-borderColor: var(--salt-palette-categorical-1);
923
1484
  --salt-category-1-bold-foreground: var(--salt-palette-foreground-primary-alt);
1485
+ --salt-category-1-bold-background: var(--salt-palette-categorical-1);
1486
+ --salt-category-2-subtle-foreground: var(--salt-palette-categorical-2-strong);
1487
+ --salt-category-2-subtle-background: var(--salt-palette-categorical-2-weakest);
1488
+ --salt-category-2-subtle-borderColor: var(--salt-palette-categorical-2);
924
1489
  --salt-category-2-bold-foreground: var(--salt-palette-foreground-primary-alt);
1490
+ --salt-category-2-bold-background: var(--salt-palette-categorical-2);
1491
+ --salt-category-3-subtle-foreground: var(--salt-palette-categorical-3-strong);
1492
+ --salt-category-3-subtle-background: var(--salt-palette-categorical-3-weakest);
1493
+ --salt-category-3-subtle-borderColor: var(--salt-palette-categorical-3);
925
1494
  --salt-category-3-bold-foreground: var(--salt-palette-foreground-primary-alt);
1495
+ --salt-category-3-bold-background: var(--salt-palette-categorical-3);
1496
+ --salt-category-4-subtle-foreground: var(--salt-palette-categorical-4-strong);
1497
+ --salt-category-4-subtle-background: var(--salt-palette-categorical-4-weakest);
1498
+ --salt-category-4-subtle-borderColor: var(--salt-palette-categorical-4);
926
1499
  --salt-category-4-bold-foreground: var(--salt-palette-foreground-primary-alt);
1500
+ --salt-category-4-bold-background: var(--salt-palette-categorical-4);
1501
+ --salt-category-5-subtle-foreground: var(--salt-palette-categorical-5-strong);
1502
+ --salt-category-5-subtle-background: var(--salt-palette-categorical-5-weakest);
1503
+ --salt-category-5-subtle-borderColor: var(--salt-palette-categorical-5);
927
1504
  --salt-category-5-bold-foreground: var(--salt-palette-foreground-primary-alt);
1505
+ --salt-category-5-bold-background: var(--salt-palette-categorical-5);
1506
+ --salt-category-6-subtle-foreground: var(--salt-palette-categorical-6-strong);
1507
+ --salt-category-6-subtle-background: var(--salt-palette-categorical-6-weakest);
1508
+ --salt-category-6-subtle-borderColor: var(--salt-palette-categorical-6);
928
1509
  --salt-category-6-bold-foreground: var(--salt-palette-foreground-primary-alt);
1510
+ --salt-category-6-bold-background: var(--salt-palette-categorical-6);
1511
+ --salt-category-7-subtle-foreground: var(--salt-palette-categorical-7-strong);
1512
+ --salt-category-7-subtle-background: var(--salt-palette-categorical-7-weakest);
1513
+ --salt-category-7-subtle-borderColor: var(--salt-palette-categorical-7);
929
1514
  --salt-category-7-bold-foreground: var(--salt-palette-foreground-primary-alt);
1515
+ --salt-category-7-bold-background: var(--salt-palette-categorical-7);
1516
+ --salt-category-8-subtle-foreground: var(--salt-palette-categorical-8-strong);
1517
+ --salt-category-8-subtle-background: var(--salt-palette-categorical-8-weakest);
1518
+ --salt-category-8-subtle-borderColor: var(--salt-palette-categorical-8);
930
1519
  --salt-category-8-bold-foreground: var(--salt-palette-foreground-primary-alt);
1520
+ --salt-category-8-bold-background: var(--salt-palette-categorical-8);
1521
+ --salt-category-9-subtle-foreground: var(--salt-palette-categorical-9-strong);
1522
+ --salt-category-9-subtle-background: var(--salt-palette-categorical-9-weakest);
1523
+ --salt-category-9-subtle-borderColor: var(--salt-palette-categorical-9);
931
1524
  --salt-category-9-bold-foreground: var(--salt-palette-foreground-primary-alt);
1525
+ --salt-category-9-bold-background: var(--salt-palette-categorical-9);
1526
+ --salt-category-10-subtle-foreground: var(--salt-palette-categorical-10-strong);
1527
+ --salt-category-10-subtle-background: var(--salt-palette-categorical-10-weakest);
1528
+ --salt-category-10-subtle-borderColor: var(--salt-palette-categorical-10);
932
1529
  --salt-category-10-bold-foreground: var(--salt-palette-foreground-primary-alt);
1530
+ --salt-category-10-bold-background: var(--salt-palette-categorical-10);
1531
+ --salt-category-11-subtle-foreground: var(--salt-palette-categorical-11-strong);
1532
+ --salt-category-11-subtle-background: var(--salt-palette-categorical-11-weakest);
1533
+ --salt-category-11-subtle-borderColor: var(--salt-palette-categorical-11);
933
1534
  --salt-category-11-bold-foreground: var(--salt-palette-foreground-primary-alt);
1535
+ --salt-category-11-bold-background: var(--salt-palette-categorical-11);
1536
+ --salt-category-12-subtle-foreground: var(--salt-palette-categorical-12-strong);
1537
+ --salt-category-12-subtle-background: var(--salt-palette-categorical-12-weakest);
1538
+ --salt-category-12-subtle-borderColor: var(--salt-palette-categorical-12);
934
1539
  --salt-category-12-bold-foreground: var(--salt-palette-foreground-primary-alt);
1540
+ --salt-category-12-bold-background: var(--salt-palette-categorical-12);
1541
+ --salt-category-13-subtle-foreground: var(--salt-palette-categorical-13-strong);
1542
+ --salt-category-13-subtle-background: var(--salt-palette-categorical-13-weakest);
1543
+ --salt-category-13-subtle-borderColor: var(--salt-palette-categorical-13);
935
1544
  --salt-category-13-bold-foreground: var(--salt-palette-foreground-primary-alt);
1545
+ --salt-category-13-bold-background: var(--salt-palette-categorical-13);
1546
+ --salt-category-14-subtle-foreground: var(--salt-palette-categorical-14-strong);
1547
+ --salt-category-14-subtle-background: var(--salt-palette-categorical-14-weakest);
1548
+ --salt-category-14-subtle-borderColor: var(--salt-palette-categorical-14);
936
1549
  --salt-category-14-bold-foreground: var(--salt-palette-foreground-primary-alt);
1550
+ --salt-category-14-bold-background: var(--salt-palette-categorical-14);
1551
+ --salt-category-15-subtle-foreground: var(--salt-palette-categorical-15-strong);
1552
+ --salt-category-15-subtle-background: var(--salt-palette-categorical-15-weakest);
1553
+ --salt-category-15-subtle-borderColor: var(--salt-palette-categorical-15);
937
1554
  --salt-category-15-bold-foreground: var(--salt-palette-foreground-primary-alt);
1555
+ --salt-category-15-bold-background: var(--salt-palette-categorical-15);
1556
+ --salt-category-16-subtle-foreground: var(--salt-palette-categorical-16-strong);
1557
+ --salt-category-16-subtle-background: var(--salt-palette-categorical-16-weakest);
1558
+ --salt-category-16-subtle-borderColor: var(--salt-palette-categorical-16);
938
1559
  --salt-category-16-bold-foreground: var(--salt-palette-foreground-primary-alt);
1560
+ --salt-category-16-bold-background: var(--salt-palette-categorical-16);
1561
+ --salt-category-17-subtle-foreground: var(--salt-palette-categorical-17-strong);
1562
+ --salt-category-17-subtle-background: var(--salt-palette-categorical-17-weakest);
1563
+ --salt-category-17-subtle-borderColor: var(--salt-palette-categorical-17);
939
1564
  --salt-category-17-bold-foreground: var(--salt-palette-foreground-primary-alt);
1565
+ --salt-category-17-bold-background: var(--salt-palette-categorical-17);
1566
+ --salt-category-18-subtle-foreground: var(--salt-palette-categorical-18-strong);
1567
+ --salt-category-18-subtle-background: var(--salt-palette-categorical-18-weakest);
1568
+ --salt-category-18-subtle-borderColor: var(--salt-palette-categorical-18);
940
1569
  --salt-category-18-bold-foreground: var(--salt-palette-foreground-primary-alt);
1570
+ --salt-category-18-bold-background: var(--salt-palette-categorical-18);
1571
+ --salt-category-19-subtle-foreground: var(--salt-palette-categorical-19-strong);
1572
+ --salt-category-19-subtle-background: var(--salt-palette-categorical-19-weakest);
1573
+ --salt-category-19-subtle-borderColor: var(--salt-palette-categorical-19);
941
1574
  --salt-category-19-bold-foreground: var(--salt-palette-foreground-primary-alt);
1575
+ --salt-category-19-bold-background: var(--salt-palette-categorical-19);
1576
+ --salt-category-20-subtle-foreground: var(--salt-palette-categorical-20-strong);
1577
+ --salt-category-20-subtle-background: var(--salt-palette-categorical-20-weakest);
1578
+ --salt-category-20-subtle-borderColor: var(--salt-palette-categorical-20);
942
1579
  --salt-category-20-bold-foreground: var(--salt-palette-foreground-primary-alt);
1580
+ --salt-category-20-bold-background: var(--salt-palette-categorical-20);
943
1581
  }
944
1582
 
945
- /* css/characteristics/container-next.css */
1583
+ /* css/next/characteristics/container.css */
946
1584
  .salt-theme.salt-theme-next {
947
1585
  --salt-container-primary-background: var(--salt-palette-background-primary);
948
1586
  --salt-container-primary-background-disabled: var(--salt-palette-background-primary-disabled);
@@ -956,9 +1594,11 @@
956
1594
  --salt-container-tertiary-background-disabled: var(--salt-palette-background-tertiary-disabled);
957
1595
  --salt-container-tertiary-borderColor: var(--salt-palette-alpha-contrast-medium);
958
1596
  --salt-container-tertiary-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
1597
+ --salt-container-ghost-background: var(--salt-palette-alpha-medium);
1598
+ --salt-container-ghost-borderColor: var(--salt-palette-alpha-contrast-medium);
959
1599
  }
960
1600
 
961
- /* css/characteristics/content-next.css */
1601
+ /* css/next/characteristics/content.css */
962
1602
  .salt-theme.salt-theme-next {
963
1603
  --salt-content-primary-foreground: var(--salt-palette-foreground-primary);
964
1604
  --salt-content-primary-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
@@ -974,7 +1614,7 @@
974
1614
  --salt-content-foreground-highlight: var(--salt-palette-accent-weaker);
975
1615
  }
976
1616
 
977
- /* css/characteristics/editable-next.css */
1617
+ /* css/next/characteristics/editable.css */
978
1618
  .salt-theme.salt-theme-next {
979
1619
  --salt-editable-borderColor: var(--salt-palette-neutral);
980
1620
  --salt-editable-borderColor-active: var(--salt-palette-accent-stronger);
@@ -993,12 +1633,17 @@
993
1633
  --salt-editable-secondary-background-readonly: var(--salt-palette-alpha-none);
994
1634
  }
995
1635
 
996
- /* css/characteristics/focused-next.css */
1636
+ /* css/next/characteristics/focused.css */
997
1637
  .salt-theme.salt-theme-next {
998
1638
  --salt-focused-outlineColor: var(--salt-palette-accent-stronger);
1639
+ --salt-focused-outlineStyle: var(--salt-borderStyle-dotted);
1640
+ --salt-focused-outlineWidth: var(--salt-size-fixed-200);
1641
+ --salt-focused-outlineInset: 0;
1642
+ --salt-focused-outlineOffset: 0;
1643
+ --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
999
1644
  }
1000
1645
 
1001
- /* css/characteristics/navigable-next.css */
1646
+ /* css/next/characteristics/navigable.css */
1002
1647
  .salt-theme.salt-theme-next {
1003
1648
  --salt-navigable-indicator-hover: var(--salt-palette-neutral);
1004
1649
  --salt-navigable-accent-indicator-active: var(--salt-palette-accent);
@@ -1006,15 +1651,22 @@
1006
1651
  --salt-navigable-accent-borderColor-active: var(--salt-palette-accent);
1007
1652
  }
1008
1653
 
1009
- /* css/characteristics/overlayable-next.css */
1654
+ /* css/next/characteristics/overlayable.css */
1010
1655
  .salt-theme.salt-theme-next {
1656
+ --salt-overlayable-shadow-scroll: var(--salt-shadow-lowest);
1657
+ --salt-overlayable-shadow-region: var(--salt-shadow-lower);
1658
+ --salt-overlayable-shadow: var(--salt-shadow-lower);
1659
+ --salt-overlayable-shadow-hover: var(--salt-shadow-low);
1660
+ --salt-overlayable-shadow-popout: var(--salt-shadow-mediumLow);
1661
+ --salt-overlayable-shadow-drag: var(--salt-shadow-mediumLow);
1662
+ --salt-overlayable-shadow-modal: var(--salt-shadow-medium);
1011
1663
  --salt-overlayable-background: var(--salt-palette-alpha-higher);
1012
1664
  --salt-overlayable-background-hover: var(--salt-palette-alpha-contrast-lowest);
1013
1665
  --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-medium);
1014
1666
  --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-mediumLow);
1015
1667
  }
1016
1668
 
1017
- /* css/characteristics/selectable-next.css */
1669
+ /* css/next/characteristics/selectable.css */
1018
1670
  .salt-theme.salt-theme-next {
1019
1671
  --salt-selectable-borderColor: var(--salt-palette-neutral);
1020
1672
  --salt-selectable-borderColor-hover: var(--salt-palette-accent-weak);
@@ -1034,7 +1686,7 @@
1034
1686
  --salt-selectable-background-selectedDisabled: var(--salt-palette-accent-weaker-disabled);
1035
1687
  }
1036
1688
 
1037
- /* css/characteristics/sentiment-next.css */
1689
+ /* css/next/characteristics/sentiment.css */
1038
1690
  .salt-theme-next.salt-theme {
1039
1691
  --salt-sentiment-negative-foreground-informative: var(--salt-palette-negative-strong);
1040
1692
  --salt-sentiment-positive-foreground-informative: var(--salt-palette-positive-strong);
@@ -1044,7 +1696,7 @@
1044
1696
  --salt-sentiment-neutral-track-disabled: var(--salt-palette-alpha-contrast-lower);
1045
1697
  }
1046
1698
 
1047
- /* css/characteristics/separable-next.css */
1699
+ /* css/next/characteristics/separable.css */
1048
1700
  .salt-theme.salt-theme-next {
1049
1701
  --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumHigh);
1050
1702
  --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-medium);
@@ -1057,7 +1709,7 @@
1057
1709
  --salt-separable-background-active: var(--salt-palette-accent);
1058
1710
  }
1059
1711
 
1060
- /* css/characteristics/status-next.css */
1712
+ /* css/next/characteristics/status.css */
1061
1713
  .salt-theme.salt-theme-next {
1062
1714
  --salt-status-info-foreground-decorative: var(--salt-palette-info);
1063
1715
  --salt-status-success-foreground-decorative: var(--salt-palette-positive);
@@ -1084,14 +1736,84 @@
1084
1736
  --salt-status-error-background-selected: var(--salt-palette-negative-weaker);
1085
1737
  }
1086
1738
 
1087
- /* css/characteristics/target-next.css */
1739
+ /* css/next/characteristics/target.css */
1088
1740
  .salt-theme.salt-theme-next {
1089
1741
  --salt-target-background-hover: var(--salt-palette-accent-weakest);
1090
1742
  --salt-target-borderColor-hover: var(--salt-palette-accent);
1091
1743
  }
1092
1744
 
1093
- /* css/characteristics/text-next.css */
1745
+ /* css/next/characteristics/text.css */
1746
+ .salt-theme.salt-theme-next {
1747
+ --salt-text-letterSpacing: 0;
1748
+ --salt-text-textAlign: left;
1749
+ --salt-text-textAlign-embedded: center;
1750
+ --salt-text-action-fontFamily: var(--salt-palette-text-fontFamily-action);
1751
+ --salt-text-action-letterSpacing: 0.6px;
1752
+ --salt-text-action-textTransform: uppercase;
1753
+ --salt-text-action-textAlign: center;
1754
+ --salt-text-action-fontWeight: var(--salt-palette-text-action-fontWeight);
1755
+ --salt-text-action-fontWeight-small: var(--salt-palette-text-action-fontWeight-small);
1756
+ --salt-text-action-fontWeight-strong: var(--salt-palette-text-action-fontWeight-strong);
1757
+ --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
1758
+ --salt-text-fontWeight: var(--salt-palette-text-body-fontWeight);
1759
+ --salt-text-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
1760
+ --salt-text-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
1761
+ --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
1762
+ --salt-text-notation-fontWeight: var(--salt-palette-text-notation-fontWeight);
1763
+ --salt-text-notation-fontWeight-small: var(--salt-palette-text-notation-fontWeight-small);
1764
+ --salt-text-notation-fontWeight-strong: var(--salt-palette-text-notation-fontWeight-strong);
1765
+ --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
1766
+ --salt-text-h1-fontWeight: var(--salt-palette-text-heading-fontWeight);
1767
+ --salt-text-h1-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1768
+ --salt-text-h1-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1769
+ --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
1770
+ --salt-text-h2-fontWeight: var(--salt-palette-text-heading-fontWeight);
1771
+ --salt-text-h2-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1772
+ --salt-text-h2-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1773
+ --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
1774
+ --salt-text-h3-fontWeight: var(--salt-palette-text-heading-fontWeight);
1775
+ --salt-text-h3-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1776
+ --salt-text-h3-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1777
+ --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
1778
+ --salt-text-h4-fontWeight: var(--salt-palette-text-heading-fontWeight);
1779
+ --salt-text-h4-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1780
+ --salt-text-h4-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1781
+ --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
1782
+ --salt-text-label-fontWeight: var(--salt-palette-text-body-fontWeight);
1783
+ --salt-text-label-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
1784
+ --salt-text-label-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
1785
+ --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
1786
+ --salt-text-display1-fontWeight: var(--salt-palette-text-display-fontWeight);
1787
+ --salt-text-display1-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1788
+ --salt-text-display1-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1789
+ --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
1790
+ --salt-text-display2-fontWeight: var(--salt-palette-text-display-fontWeight);
1791
+ --salt-text-display2-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1792
+ --salt-text-display2-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1793
+ --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
1794
+ --salt-text-display3-fontWeight: var(--salt-palette-text-display-fontWeight);
1795
+ --salt-text-display3-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1796
+ --salt-text-display3-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1797
+ --salt-text-display4-fontFamily: var(--salt-palette-text-fontFamily-heading);
1798
+ --salt-text-display4-fontWeight: var(--salt-palette-text-display-fontWeight);
1799
+ --salt-text-display4-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1800
+ --salt-text-display4-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1801
+ --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
1802
+ }
1094
1803
  .salt-theme-next.salt-density-touch {
1804
+ --salt-text-h1-fontSize: 42px;
1805
+ --salt-text-h1-lineHeight: 54px;
1806
+ --salt-text-h2-fontSize: 32px;
1807
+ --salt-text-h2-lineHeight: 42px;
1808
+ --salt-text-h3-fontSize: 24px;
1809
+ --salt-text-h3-lineHeight: 32px;
1810
+ --salt-text-h4-fontSize: 16px;
1811
+ --salt-text-h4-lineHeight: 20px;
1812
+ --salt-text-label-fontSize: 14px;
1813
+ --salt-text-label-lineHeight: 18px;
1814
+ --salt-text-fontSize: 16px;
1815
+ --salt-text-lineHeight: 20px;
1816
+ --salt-text-minHeight: 20px;
1095
1817
  --salt-text-display1-fontSize: 102px;
1096
1818
  --salt-text-display1-lineHeight: 133px;
1097
1819
  --salt-text-display2-fontSize: 84px;
@@ -1100,8 +1822,23 @@
1100
1822
  --salt-text-display3-lineHeight: 88px;
1101
1823
  --salt-text-display4-fontSize: 54px;
1102
1824
  --salt-text-display4-lineHeight: 70px;
1825
+ --salt-text-notation-fontSize: 14px;
1826
+ --salt-text-notation-lineHeight: 18px;
1103
1827
  }
1104
1828
  .salt-theme-next.salt-density-low {
1829
+ --salt-text-h1-fontSize: 32px;
1830
+ --salt-text-h1-lineHeight: 42px;
1831
+ --salt-text-h2-fontSize: 24px;
1832
+ --salt-text-h2-lineHeight: 32px;
1833
+ --salt-text-h3-fontSize: 18px;
1834
+ --salt-text-h3-lineHeight: 24px;
1835
+ --salt-text-h4-fontSize: 14px;
1836
+ --salt-text-h4-lineHeight: 18px;
1837
+ --salt-text-label-fontSize: 12px;
1838
+ --salt-text-label-lineHeight: 16px;
1839
+ --salt-text-fontSize: 14px;
1840
+ --salt-text-lineHeight: 18px;
1841
+ --salt-text-minHeight: 18px;
1105
1842
  --salt-text-display1-fontSize: 84px;
1106
1843
  --salt-text-display1-lineHeight: 109px;
1107
1844
  --salt-text-display2-fontSize: 68px;
@@ -1110,8 +1847,23 @@
1110
1847
  --salt-text-display3-lineHeight: 70px;
1111
1848
  --salt-text-display4-fontSize: 42px;
1112
1849
  --salt-text-display4-lineHeight: 55px;
1850
+ --salt-text-notation-fontSize: 12px;
1851
+ --salt-text-notation-lineHeight: 16px;
1113
1852
  }
1114
1853
  .salt-theme-next.salt-density-medium {
1854
+ --salt-text-h1-fontSize: 24px;
1855
+ --salt-text-h1-lineHeight: 32px;
1856
+ --salt-text-h2-fontSize: 18px;
1857
+ --salt-text-h2-lineHeight: 24px;
1858
+ --salt-text-h3-fontSize: 14px;
1859
+ --salt-text-h3-lineHeight: 18px;
1860
+ --salt-text-h4-fontSize: 12px;
1861
+ --salt-text-h4-lineHeight: 16px;
1862
+ --salt-text-label-fontSize: 11px;
1863
+ --salt-text-label-lineHeight: 14px;
1864
+ --salt-text-fontSize: 12px;
1865
+ --salt-text-lineHeight: 16px;
1866
+ --salt-text-minHeight: 16px;
1115
1867
  --salt-text-display1-fontSize: 68px;
1116
1868
  --salt-text-display1-lineHeight: 88px;
1117
1869
  --salt-text-display2-fontSize: 54px;
@@ -1120,8 +1872,23 @@
1120
1872
  --salt-text-display3-lineHeight: 55px;
1121
1873
  --salt-text-display4-fontSize: 32px;
1122
1874
  --salt-text-display4-lineHeight: 42px;
1875
+ --salt-text-notation-fontSize: 10px;
1876
+ --salt-text-notation-lineHeight: 13px;
1123
1877
  }
1124
1878
  .salt-theme-next.salt-density-high {
1879
+ --salt-text-h1-fontSize: 18px;
1880
+ --salt-text-h1-lineHeight: 24px;
1881
+ --salt-text-h2-fontSize: 14px;
1882
+ --salt-text-h2-lineHeight: 18px;
1883
+ --salt-text-h3-fontSize: 12px;
1884
+ --salt-text-h3-lineHeight: 16px;
1885
+ --salt-text-h4-fontSize: 11px;
1886
+ --salt-text-h4-lineHeight: 14px;
1887
+ --salt-text-label-fontSize: 10px;
1888
+ --salt-text-label-lineHeight: 13px;
1889
+ --salt-text-fontSize: 11px;
1890
+ --salt-text-lineHeight: 14px;
1891
+ --salt-text-minHeight: 14px;
1125
1892
  --salt-text-display1-fontSize: 54px;
1126
1893
  --salt-text-display1-lineHeight: 70px;
1127
1894
  --salt-text-display2-fontSize: 42px;
@@ -1130,9 +1897,234 @@
1130
1897
  --salt-text-display3-lineHeight: 42px;
1131
1898
  --salt-text-display4-fontSize: 24px;
1132
1899
  --salt-text-display4-lineHeight: 32px;
1900
+ --salt-text-notation-fontSize: 8px;
1901
+ --salt-text-notation-lineHeight: 10px;
1902
+ }
1903
+
1904
+ /* css/deprecated/foundations.css */
1905
+ .salt-theme {
1906
+ --salt-delay-instant: 100ms;
1907
+ --salt-delay-perceptible: 300ms;
1908
+ --salt-delay-notable: 1000ms;
1909
+ --salt-delay-cutoff: 10000ms;
1910
+ --salt-size-icon-base: var(--salt-icon-size-base);
1911
+ --salt-opacity-1: 0.15;
1912
+ --salt-opacity-2: 0.25;
1913
+ --salt-opacity-3: 0.4;
1914
+ --salt-opacity-4: 0.7;
1915
+ --salt-opacity-8: 0.08;
1916
+ --salt-opacity-0: 0;
1917
+ --salt-opacity-15: 0.15;
1918
+ --salt-opacity-25: 0.25;
1919
+ --salt-opacity-40: 0.4;
1920
+ --salt-opacity-45: 0.45;
1921
+ --salt-opacity-70: 0.7;
1922
+ --salt-shadow-0: none;
1923
+ --salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color);
1924
+ --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
1925
+ --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
1926
+ --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
1927
+ --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
1928
+ --salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color);
1929
+ --salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color);
1930
+ --salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color);
1931
+ --salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color);
1932
+ --salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color);
1933
+ --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
1934
+ --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
1935
+ --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
1936
+ --salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
1937
+ --salt-color-black-60a: rgba(var(--salt-color-black-rgb), 0.6);
1938
+ --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
1939
+ --salt-color-black-90a: rgba(var(--salt-color-black-rgb), 0.9);
1940
+ --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
1941
+ --salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
1942
+ --salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
1943
+ --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
1944
+ --salt-color-white-90a: rgba(var(--salt-color-white-rgb), 0.9);
1945
+ }
1946
+ .salt-theme[data-mode=light] {
1947
+ --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
1948
+ --salt-shadow-2-color: rgba(0, 0, 0, 0.1);
1949
+ --salt-shadow-3-color: rgba(0, 0, 0, 0.15);
1950
+ --salt-shadow-4-color: rgba(0, 0, 0, 0.2);
1951
+ --salt-shadow-5-color: rgba(0, 0, 0, 0.3);
1952
+ --salt-shadow-100-color: rgba(0, 0, 0, 0.1);
1953
+ --salt-shadow-200-color: rgba(0, 0, 0, 0.1);
1954
+ --salt-shadow-300-color: rgba(0, 0, 0, 0.15);
1955
+ --salt-shadow-400-color: rgba(0, 0, 0, 0.2);
1956
+ --salt-shadow-500-color: rgba(0, 0, 0, 0.3);
1957
+ }
1958
+ .salt-theme[data-mode=dark] {
1959
+ --salt-shadow-1-color: rgba(0, 0, 0, 0.5);
1960
+ --salt-shadow-2-color: rgba(0, 0, 0, 0.5);
1961
+ --salt-shadow-3-color: rgba(0, 0, 0, 0.55);
1962
+ --salt-shadow-4-color: rgba(0, 0, 0, 0.55);
1963
+ --salt-shadow-5-color: rgba(0, 0, 0, 0.65);
1964
+ --salt-shadow-100-color: rgba(0, 0, 0, 0.5);
1965
+ --salt-shadow-200-color: rgba(0, 0, 0, 0.5);
1966
+ --salt-shadow-300-color: rgba(0, 0, 0, 0.55);
1967
+ --salt-shadow-400-color: rgba(0, 0, 0, 0.55);
1968
+ --salt-shadow-500-color: rgba(0, 0, 0, 0.65);
1969
+ }
1970
+ .salt-density-touch,
1971
+ .salt-density-low,
1972
+ .salt-density-medium,
1973
+ .salt-density-high {
1974
+ --salt-size-selection: var(--salt-size-selectable);
1975
+ --salt-size-brandBar: 4px;
1976
+ --salt-size-graphic-small: 12px;
1977
+ --salt-size-graphic-medium: 24px;
1978
+ --salt-size-graphic-large: 48px;
1979
+ --salt-size-divider-height: var(--salt-size-separator-height);
1980
+ --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
1981
+ --salt-size-detail: var(--salt-size-compact);
1982
+ --salt-size-basis-unit: 4px;
1983
+ --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
1984
+ --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
1985
+ --salt-size-separator-strokeWidth: 1px;
1986
+ --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
1987
+ --salt-size-sharktooth-height: 5px;
1988
+ --salt-size-sharktooth-width: 10px;
1989
+ --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
1990
+ --salt-size-border: 1px;
1991
+ --salt-size-bar-small: 2px;
1992
+ --salt-size-border-strong: 2px;
1993
+ --salt-zIndex-docked: 1050;
1994
+ }
1995
+ .salt-density-high {
1996
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
1997
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
1998
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
1999
+ --salt-icon-size-base: 10px;
2000
+ --salt-icon-size-status-adornment: 6px;
2001
+ }
2002
+ .salt-density-medium {
2003
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
2004
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
2005
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
2006
+ --salt-icon-size-base: 12px;
2007
+ --salt-icon-size-status-adornment: 8px;
2008
+ }
2009
+ .salt-density-low {
2010
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
2011
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
2012
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
2013
+ --salt-icon-size-base: 14px;
2014
+ --salt-icon-size-status-adornment: 10px;
2015
+ }
2016
+ .salt-density-touch {
2017
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
2018
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
2019
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
2020
+ --salt-icon-size-base: 16px;
2021
+ --salt-icon-size-status-adornment: 12px;
2022
+ }
2023
+
2024
+ /* css/deprecated/characteristics.css */
2025
+ .salt-theme {
2026
+ --salt-container-borderStyle: solid;
2027
+ --salt-editable-borderStyle: solid;
2028
+ --salt-editable-borderStyle-hover: solid;
2029
+ --salt-editable-borderStyle-active: solid;
2030
+ --salt-editable-borderStyle-disabled: solid;
2031
+ --salt-editable-borderStyle-readonly: solid;
2032
+ --salt-editable-cursor-hover: text;
2033
+ --salt-editable-cursor-active: text;
2034
+ --salt-editable-cursor-disabled: not-allowed;
2035
+ --salt-editable-cursor-readonly: text;
2036
+ --salt-editable-borderWidth-active: 2px;
2037
+ --salt-editable-help-fontStyle: italic;
2038
+ --salt-measured-borderStyle: solid;
2039
+ --salt-measured-borderStyle-active: solid;
2040
+ --salt-measured-borderStyle-complete: solid;
2041
+ --salt-measured-borderStyle-incomplete: dotted;
2042
+ --salt-measured-borderWidth: 2px;
2043
+ --salt-measured-borderWidth-active: 2px;
2044
+ --salt-measured-borderWidth-complete: 2px;
2045
+ --salt-measured-borderWidth-incomplete: 2px;
2046
+ --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
2047
+ --salt-measured-textAlign: center;
2048
+ --salt-selectable-borderStyle: solid;
2049
+ --salt-selectable-borderStyle-hover: solid;
2050
+ --salt-selectable-borderStyle-selected: solid;
2051
+ --salt-selectable-borderStyle-blurSelected: solid;
2052
+ --salt-selectable-cursor-hover: pointer;
2053
+ --salt-selectable-cursor-selected: pointer;
2054
+ --salt-selectable-cursor-blurSelected: pointer;
2055
+ --salt-selectable-cursor-disabled: not-allowed;
2056
+ --salt-selectable-cursor-readonly: not-allowed;
2057
+ --salt-separable-borderStyle: solid;
2058
+ --salt-draggable-horizontal-cursor-hover: row-resize;
2059
+ --salt-draggable-horizontal-cursor-active: row-resize;
2060
+ --salt-draggable-vertical-cursor-hover: col-resize;
2061
+ --salt-draggable-vertical-cursor-active: col-resize;
2062
+ --salt-draggable-grab-cursor-hover: grab;
2063
+ --salt-draggable-grab-cursor-active: grabbing;
2064
+ --salt-actionable-cursor-hover: pointer;
2065
+ --salt-actionable-cursor-active: pointer;
2066
+ --salt-actionable-cursor-disabled: not-allowed;
2067
+ --salt-actionable-letterSpacing: 0.6px;
2068
+ --salt-actionable-textTransform: uppercase;
2069
+ --salt-actionable-textAlign: center;
2070
+ --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
2071
+ --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
2072
+ --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
2073
+ --salt-target-cursor-disabled: not-allowed;
2074
+ --salt-target-borderStyle: dashed;
2075
+ --salt-target-borderStyle-hover: solid;
2076
+ --salt-target-borderStyle-disabled: dashed;
2077
+ --salt-text-link-textDecoration: underline;
2078
+ --salt-text-link-textDecoration-hover: none;
2079
+ --salt-text-link-textDecoration-selected: underline;
2080
+ --salt-text-textDecoration: var(--salt-typography-textDecoration-none);
2081
+ --salt-text-textTransform: none;
2082
+ --salt-navigable-cursor-active: pointer;
2083
+ --salt-navigable-cursor-hover: pointer;
2084
+ --salt-navigable-cursor-disabled: not-allowed;
2085
+ --salt-navigable-cursor-edit: text;
2086
+ --salt-navigable-textDecoration: var(--salt-typography-textDecoration-underline);
2087
+ --salt-navigable-textDecoration-hover: var(--salt-typography-textDecoration-none);
2088
+ --salt-navigable-textDecoration-selected: var(--salt-typography-textDecoration-underline);
2089
+ --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
2090
+ --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
2091
+ --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
2092
+ --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
2093
+ --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
2094
+ --salt-track-borderStyle: solid;
2095
+ --salt-track-borderStyle-active: solid;
2096
+ --salt-track-borderStyle-complete: solid;
2097
+ --salt-track-borderStyle-incomplete: dotted;
2098
+ --salt-track-borderWidth: 2px;
2099
+ --salt-track-borderWidth-active: 2px;
2100
+ --salt-track-borderWidth-complete: 2px;
2101
+ --salt-track-borderWidth-incomplete: 2px;
2102
+ --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
2103
+ --salt-track-textAlign: center;
2104
+ --salt-taggable-cursor-hover: pointer;
2105
+ --salt-taggable-cursor-active: pointer;
2106
+ --salt-taggable-cursor-disabled: not-allowed;
2107
+ --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
2108
+ --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
2109
+ }
2110
+ .salt-density-high {
2111
+ --salt-accent-fontSize: 8px;
2112
+ --salt-accent-lineHeight: 11px;
2113
+ }
2114
+ .salt-density-medium {
2115
+ --salt-accent-fontSize: 10px;
2116
+ --salt-accent-lineHeight: 13px;
2117
+ }
2118
+ .salt-density-low {
2119
+ --salt-accent-fontSize: 12px;
2120
+ --salt-accent-lineHeight: 16px;
2121
+ }
2122
+ .salt-density-touch {
2123
+ --salt-accent-fontSize: 14px;
2124
+ --salt-accent-lineHeight: 18px;
1133
2125
  }
1134
2126
 
1135
- /* css/deprecated/characteristics-next.css */
2127
+ /* css/next/deprecated/characteristics.css */
1136
2128
  .salt-theme.salt-theme-next {
1137
2129
  --salt-navigable-indicator-active: var(--salt-palette-accent);
1138
2130
  --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
@@ -1144,13 +2136,13 @@
1144
2136
  --salt-track-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
1145
2137
  }
1146
2138
 
1147
- /* css/deprecated/foundations-next.css */
2139
+ /* css/next/deprecated/foundations.css */
1148
2140
  .salt-theme.salt-theme-next {
1149
2141
  --salt-color-background-gradientlight-rgb: var(--salt-color-background-titanium-rgb);
1150
2142
  --salt-color-background-gradientlight: var(--salt-color-background-titanium);
1151
2143
  }
1152
2144
 
1153
- /* css/deprecated/palette-next.css */
2145
+ /* css/next/deprecated/palette.css */
1154
2146
  .salt-theme[data-mode=light] {
1155
2147
  --salt-palette-foreground-active: var(--salt-color-blue-700);
1156
2148
  --salt-palette-foreground-hover: var(--salt-color-blue-600);