@salt-ds/theme 0.0.0-snapshot-20230419162206

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/css/global.css +22 -0
  2. package/css/theme.css +1264 -0
  3. package/index.css +1289 -0
  4. package/package.json +16 -0
package/css/theme.css ADDED
@@ -0,0 +1,1264 @@
1
+ /* css/foundations/animation.css */
2
+ .salt-density-touch,
3
+ .salt-density-low,
4
+ .salt-density-medium,
5
+ .salt-density-high {
6
+ --salt-animation-opacity-start: 0;
7
+ --salt-animation-opacity-end: 1;
8
+ --salt-animation-scale-start: 0;
9
+ --salt-animation-scale-end: 1;
10
+ --salt-animation-transform-start: 100%;
11
+ --salt-animation-transform-end: 0;
12
+ --salt-animation-duration: 0.3s;
13
+ --salt-animation-timing-function: ease-in;
14
+ --salt-animation-slide-in-top: slide-in-top var(--salt-animation-duration) var(--salt-animation-timing-function);
15
+ --salt-animation-slide-in-left: slide-in-left var(--salt-animation-duration) var(--salt-animation-timing-function);
16
+ --salt-animation-slide-in-right: slide-in-right var(--salt-animation-duration) var(--salt-animation-timing-function);
17
+ --salt-animation-slide-in-bottom: slide-in-bottom var(--salt-animation-duration) var(--salt-animation-timing-function);
18
+ --salt-animation-slide-out-top: slide-out-top var(--salt-animation-duration) var(--salt-animation-timing-function);
19
+ --salt-animation-slide-out-left: slide-out-left var(--salt-animation-duration) var(--salt-animation-timing-function);
20
+ --salt-animation-slide-out-right: slide-out-right var(--salt-animation-duration) var(--salt-animation-timing-function);
21
+ --salt-animation-slide-out-bottom: slide-out-bottom var(--salt-animation-duration) var(--salt-animation-timing-function);
22
+ --salt-animation-fade-in-back: fade-in-back var(--salt-animation-duration) var(--salt-animation-timing-function);
23
+ --salt-animation-fade-in-forward: fade-in-forward var(--salt-animation-duration) var(--salt-animation-timing-function);
24
+ --salt-animation-fade-in-center: fade-in-center var(--salt-animation-duration) var(--salt-animation-timing-function);
25
+ --salt-animation-fade-out-back: fade-out-back var(--salt-animation-duration) ease-out both;
26
+ }
27
+ @keyframes slide-in-top {
28
+ 0% {
29
+ opacity: var(--salt-animation-opacity-start);
30
+ transform: translateY(var(--salt-animation-transform-start));
31
+ }
32
+ 100% {
33
+ opacity: var(--salt-animation-opacity-end);
34
+ transform: translateY(var(--salt-animation-transform-end));
35
+ }
36
+ }
37
+ @keyframes slide-out-top {
38
+ 0% {
39
+ opacity: var(--salt-animation-opacity-end);
40
+ transform: translateY(var(--salt-animation-transform-end));
41
+ }
42
+ 100% {
43
+ opacity: var(--salt-animation-opacity-start);
44
+ transform: translateY(var(--salt-animation-transform-start));
45
+ }
46
+ }
47
+ @keyframes slide-in-left {
48
+ 0% {
49
+ opacity: var(--salt-animation-opacity-start);
50
+ transform: translateX(calc(-1 * var(--salt-animation-transform-start)));
51
+ }
52
+ 100% {
53
+ opacity: var(--salt-animation-opacity-end);
54
+ transform: translateX(var(--salt-animation-transform-end));
55
+ }
56
+ }
57
+ @keyframes slide-out-left {
58
+ 0% {
59
+ opacity: var(--salt-animation-opacity-end);
60
+ transform: translateX(var(--salt-animation-transform-end));
61
+ }
62
+ 100% {
63
+ opacity: var(--salt-animation-opacity-start);
64
+ transform: translateX(calc(-1 * var(--salt-animation-transform-start)));
65
+ }
66
+ }
67
+ @keyframes slide-in-right {
68
+ 0% {
69
+ opacity: var(--salt-animation-opacity-start);
70
+ transform: translateX(var(--salt-animation-transform-start));
71
+ }
72
+ 100% {
73
+ opacity: var(--salt-animation-opacity-end);
74
+ transform: translateX(var(--salt-animation-transform-end));
75
+ }
76
+ }
77
+ @keyframes slide-out-right {
78
+ 0% {
79
+ opacity: var(--salt-animation-opacity-end);
80
+ transform: translateX(var(--salt-animation-transform-end));
81
+ }
82
+ 100% {
83
+ opacity: var(--salt-animation-opacity-start);
84
+ transform: translateX(var(--salt-animation-transform-start));
85
+ }
86
+ }
87
+ @keyframes slide-in-bottom {
88
+ 0% {
89
+ opacity: var(--salt-animation-opacity-start);
90
+ transform: translateY(calc(-1 * var(--salt-animation-transform-start)));
91
+ }
92
+ 100% {
93
+ opacity: var(--salt-animation-opacity-end);
94
+ transform: translateY(var(--salt-animation-transform-end));
95
+ }
96
+ }
97
+ @keyframes slide-out-bottom {
98
+ 0% {
99
+ opacity: var(--salt-animation-opacity-end);
100
+ transform: translateY(var(--salt-animation-transform-end));
101
+ }
102
+ 100% {
103
+ opacity: var(--salt-animation-opacity-start);
104
+ transform: translateY(calc(-1 * var(--salt-animation-transform-start)));
105
+ }
106
+ }
107
+ @keyframes fade-in-back {
108
+ 0% {
109
+ --salt-animation-scale-start: 1.4;
110
+ opacity: var(--salt-animation-opacity-start);
111
+ transform: scale(var(--salt-animation-scale-start));
112
+ }
113
+ 100% {
114
+ opacity: var(--salt-animation-opacity-end);
115
+ transform: scale(var(--salt-animation-scale-end));
116
+ }
117
+ }
118
+ @keyframes fade-in-forward {
119
+ 0% {
120
+ --salt-animation-scale-start: 0.6;
121
+ opacity: var(--salt-animation-opacity-start);
122
+ transform: scale(var(--salt-animation-scale-start));
123
+ }
124
+ 100% {
125
+ opacity: var(--salt-animation-opacity-end);
126
+ transform: scale(var(--salt-animation-scale-end));
127
+ }
128
+ }
129
+ @keyframes fade-in-center {
130
+ 0% {
131
+ opacity: var(--salt-animation-opacity-start);
132
+ }
133
+ 100% {
134
+ opacity: var(--salt-animation-opacity-end);
135
+ }
136
+ }
137
+ @keyframes fade-out-back {
138
+ 0% {
139
+ opacity: var(--salt-animation-opacity-end);
140
+ }
141
+ 100% {
142
+ opacity: var(--salt-animation-opacity-start);
143
+ }
144
+ }
145
+
146
+ /* css/foundations/color.css */
147
+ .salt-theme {
148
+ --salt-color-white: rgb(255, 255, 255);
149
+ --salt-color-black: rgb(0, 0, 0);
150
+ --salt-color-red-10: rgb(255, 227, 224);
151
+ --salt-color-red-20: rgb(255, 207, 201);
152
+ --salt-color-red-30: rgb(255, 187, 178);
153
+ --salt-color-red-40: rgb(255, 167, 156);
154
+ --salt-color-red-50: rgb(255, 148, 133);
155
+ --salt-color-red-100: rgb(255, 128, 111);
156
+ --salt-color-red-200: rgb(255, 108, 88);
157
+ --salt-color-red-300: rgb(255, 89, 66);
158
+ --salt-color-red-400: rgb(237, 65, 42);
159
+ --salt-color-red-500: rgb(227, 43, 22);
160
+ --salt-color-red-600: rgb(196, 32, 16);
161
+ --salt-color-red-700: rgb(166, 21, 11);
162
+ --salt-color-red-800: rgb(136, 10, 5);
163
+ --salt-color-red-900: rgb(65, 37, 34);
164
+ --salt-color-orange-10: rgb(255, 232, 191);
165
+ --salt-color-orange-20: rgb(254, 223, 166);
166
+ --salt-color-orange-30: rgb(254, 214, 142);
167
+ --salt-color-orange-40: rgb(254, 205, 118);
168
+ --salt-color-orange-50: rgb(254, 197, 94);
169
+ --salt-color-orange-100: rgb(250, 181, 81);
170
+ --salt-color-orange-200: rgb(246, 165, 68);
171
+ --salt-color-orange-300: rgb(242, 149, 56);
172
+ --salt-color-orange-400: rgb(238, 133, 43);
173
+ --salt-color-orange-500: rgb(234, 115, 25);
174
+ --salt-color-orange-600: rgb(224, 101, 25);
175
+ --salt-color-orange-700: rgb(214, 85, 19);
176
+ --salt-color-orange-800: rgb(204, 68, 13);
177
+ --salt-color-orange-900: rgb(54, 44, 36);
178
+ --salt-color-green-10: rgb(209, 244, 201);
179
+ --salt-color-green-20: rgb(184, 232, 182);
180
+ --salt-color-green-30: rgb(160, 221, 164);
181
+ --salt-color-green-40: rgb(136, 210, 145);
182
+ --salt-color-green-50: rgb(112, 199, 127);
183
+ --salt-color-green-100: rgb(93, 189, 116);
184
+ --salt-color-green-200: rgb(77, 180, 105);
185
+ --salt-color-green-300: rgb(60, 171, 96);
186
+ --salt-color-green-400: rgb(48, 156, 90);
187
+ --salt-color-green-500: rgb(36, 135, 75);
188
+ --salt-color-green-600: rgb(24, 114, 61);
189
+ --salt-color-green-700: rgb(12, 93, 46);
190
+ --salt-color-green-800: rgb(1, 73, 32);
191
+ --salt-color-green-900: rgb(35, 52, 43);
192
+ --salt-color-teal-10: rgb(218, 240, 240);
193
+ --salt-color-teal-20: rgb(199, 232, 232);
194
+ --salt-color-teal-30: rgb(180, 224, 225);
195
+ --salt-color-teal-40: rgb(162, 217, 218);
196
+ --salt-color-teal-50: rgb(141, 205, 209);
197
+ --salt-color-teal-100: rgb(123, 193, 200);
198
+ --salt-color-teal-200: rgb(99, 181, 192);
199
+ --salt-color-teal-300: rgb(73, 160, 172);
200
+ --salt-color-teal-400: rgb(48, 149, 166);
201
+ --salt-color-teal-500: rgb(0, 130, 151);
202
+ --salt-color-teal-600: rgb(27, 107, 133);
203
+ --salt-color-teal-700: rgb(0, 85, 113);
204
+ --salt-color-teal-800: rgb(1, 65, 86);
205
+ --salt-color-teal-900: rgb(0, 49, 76);
206
+ --salt-color-blue-10: rgb(203, 231, 249);
207
+ --salt-color-blue-20: rgb(183, 222, 246);
208
+ --salt-color-blue-30: rgb(164, 213, 244);
209
+ --salt-color-blue-40: rgb(144, 204, 242);
210
+ --salt-color-blue-50: rgb(125, 195, 240);
211
+ --salt-color-blue-100: rgb(100, 177, 228);
212
+ --salt-color-blue-200: rgb(75, 159, 216);
213
+ --salt-color-blue-300: rgb(51, 141, 205);
214
+ --salt-color-blue-400: rgb(46, 132, 198);
215
+ --salt-color-blue-500: rgb(38, 112, 169);
216
+ --salt-color-blue-600: rgb(21, 92, 147);
217
+ --salt-color-blue-700: rgb(0, 71, 123);
218
+ --salt-color-blue-800: rgb(39, 60, 77);
219
+ --salt-color-blue-900: rgb(35, 47, 56);
220
+ --salt-color-purple-10: rgb(249, 224, 247);
221
+ --salt-color-purple-20: rgb(247, 212, 244);
222
+ --salt-color-purple-30: rgb(245, 201, 241);
223
+ --salt-color-purple-40: rgb(243, 189, 238);
224
+ --salt-color-purple-50: rgb(241, 178, 235);
225
+ --salt-color-purple-100: rgb(223, 156, 225);
226
+ --salt-color-purple-200: rgb(205, 135, 215);
227
+ --salt-color-purple-300: rgb(192, 116, 203);
228
+ --salt-color-purple-400: rgb(169, 97, 181);
229
+ --salt-color-purple-500: rgb(150, 78, 162);
230
+ --salt-color-purple-600: rgb(129, 60, 141);
231
+ --salt-color-purple-700: rgb(103, 46, 122);
232
+ --salt-color-purple-800: rgb(83, 37, 109);
233
+ --salt-color-purple-900: rgb(59, 16, 84);
234
+ --salt-color-gray-10: rgb(242, 244, 246);
235
+ --salt-color-gray-20: rgb(234, 237, 239);
236
+ --salt-color-gray-30: rgb(224, 228, 233);
237
+ --salt-color-gray-40: rgb(217, 221, 227);
238
+ --salt-color-gray-50: rgb(206, 210, 217);
239
+ --salt-color-gray-60: rgb(197, 201, 208);
240
+ --salt-color-gray-70: rgb(180, 183, 190);
241
+ --salt-color-gray-80: rgb(159, 163, 170);
242
+ --salt-color-gray-90: rgb(132, 135, 142);
243
+ --salt-color-gray-100: rgb(116, 119, 127);
244
+ --salt-color-gray-200: rgb(97, 101, 110);
245
+ --salt-color-gray-300: rgb(76, 80, 91);
246
+ --salt-color-gray-400: rgb(68, 72, 79);
247
+ --salt-color-gray-500: rgb(59, 63, 70);
248
+ --salt-color-gray-600: rgb(47, 49, 54);
249
+ --salt-color-gray-700: rgb(42, 44, 47);
250
+ --salt-color-gray-800: rgb(36, 37, 38);
251
+ --salt-color-gray-900: rgb(22, 22, 22);
252
+ }
253
+
254
+ /* css/foundations/delay.css */
255
+ .salt-theme {
256
+ --salt-delay-instant: 100;
257
+ --salt-delay-perceptible: 300;
258
+ --salt-delay-notable: 1000;
259
+ --salt-delay-cutoff: 10000;
260
+ }
261
+
262
+ /* css/foundations/duration.css */
263
+ .salt-theme {
264
+ --salt-duration-instant: 100;
265
+ --salt-duration-perceptible: 300;
266
+ --salt-duration-notable: 1000;
267
+ --salt-duration-cutoff: 10000;
268
+ }
269
+
270
+ /* css/foundations/fade.css */
271
+ .salt-theme {
272
+ --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-foreground));
273
+ --salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-foreground));
274
+ --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-foreground));
275
+ --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-foreground));
276
+ --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-foreground));
277
+ --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-foreground));
278
+ --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-foreground));
279
+ --salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-foreground));
280
+ --salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-foreground));
281
+ --salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-foreground));
282
+ --salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-foreground));
283
+ --salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
284
+ --salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
285
+ --salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-foreground));
286
+ --salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-foreground));
287
+ --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-foreground));
288
+ --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-foreground));
289
+ --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-border));
290
+ --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-border));
291
+ --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-border));
292
+ --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-border));
293
+ --salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-border));
294
+ --salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-border));
295
+ --salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-border));
296
+ --salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-border));
297
+ --salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-border));
298
+ --salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-border));
299
+ --salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-border));
300
+ --salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-border));
301
+ --salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));
302
+ --salt-color-gray-200-fade-border-readonly: rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly));
303
+ --salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-background));
304
+ --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-background));
305
+ --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-background));
306
+ --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-background));
307
+ --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-background));
308
+ --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-background));
309
+ --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-background));
310
+ --salt-color-gray-300-fade-background: rgba(76, 80, 91, var(--salt-palette-opacity-background));
311
+ --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-background));
312
+ --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-background));
313
+ --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
314
+ --salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));
315
+ --salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-background));
316
+ --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
317
+ --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
318
+ --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
319
+ --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly));
320
+ --salt-color-black-fade-backdrop: rgba(36, 37, 38, var(--salt-palette-opacity-backdrop));
321
+ --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-fill));
322
+ --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
323
+ --salt-color-blue-500-fade-fill: rgba(38, 112, 169, var(--salt-palette-opacity-fill));
324
+ --salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-fill));
325
+ --salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 255, var(--salt-palette-opacity-primary-border));
326
+ --salt-color-white-fade-separatorOpacity-secondary: rgba(255, 255, 255, var(--salt-palette-opacity-secondary-border));
327
+ --salt-color-white-fade-separatorOpacity-tertiary: rgba(255, 255, 255, var(--salt-palette-opacity-tertiary-border));
328
+ --salt-color-black-fade-separatorOpacity-primary: rgba(0, 0, 0, var(--salt-palette-opacity-primary-border));
329
+ --salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border));
330
+ --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
331
+ }
332
+
333
+ /* css/foundations/icon.css */
334
+ .salt-density-touch {
335
+ --salt-icon-size-base: 16px;
336
+ --salt-icon-size-status-adornment: 12px;
337
+ }
338
+ .salt-density-low {
339
+ --salt-icon-size-base: 14px;
340
+ --salt-icon-size-status-adornment: 10px;
341
+ }
342
+ .salt-density-medium {
343
+ --salt-icon-size-base: 12px;
344
+ --salt-icon-size-status-adornment: 8px;
345
+ }
346
+ .salt-density-high {
347
+ --salt-icon-size-base: 10px;
348
+ --salt-icon-size-status-adornment: 6px;
349
+ }
350
+ .salt-theme {
351
+ --salt-size-icon-base: var(--salt-icon-size-base);
352
+ }
353
+
354
+ /* css/foundations/opacity.css */
355
+ .salt-theme {
356
+ --salt-opacity-1: 0.15;
357
+ --salt-opacity-2: 0.25;
358
+ --salt-opacity-3: 0.4;
359
+ --salt-opacity-4: 0.7;
360
+ }
361
+
362
+ /* css/foundations/shadow.css */
363
+ .salt-theme[data-mode=light] {
364
+ --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
365
+ --salt-shadow-2-color: rgba(0, 0, 0, 0.1);
366
+ --salt-shadow-3-color: rgba(0, 0, 0, 0.15);
367
+ --salt-shadow-4-color: rgba(0, 0, 0, 0.2);
368
+ --salt-shadow-5-color: rgba(0, 0, 0, 0.3);
369
+ }
370
+ .salt-theme[data-mode=dark] {
371
+ --salt-shadow-1-color: rgba(0, 0, 0, 0.5);
372
+ --salt-shadow-2-color: rgba(0, 0, 0, 0.5);
373
+ --salt-shadow-3-color: rgba(0, 0, 0, 0.55);
374
+ --salt-shadow-4-color: rgba(0, 0, 0, 0.55);
375
+ --salt-shadow-5-color: rgba(0, 0, 0, 0.65);
376
+ }
377
+ .salt-theme {
378
+ --salt-shadow-0: none;
379
+ --salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color);
380
+ --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
381
+ --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
382
+ --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
383
+ --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
384
+ }
385
+
386
+ /* css/foundations/size.css */
387
+ .salt-density-touch,
388
+ .salt-density-low,
389
+ .salt-density-medium,
390
+ .salt-density-high {
391
+ --salt-size-basis-unit: 4px;
392
+ --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
393
+ --salt-size-border: 1px;
394
+ --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
395
+ --salt-size-separator-strokeWidth: 1px;
396
+ --salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
397
+ --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
398
+ --salt-size-sharktooth-height: 5px;
399
+ --salt-size-sharktooth-width: 10px;
400
+ --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
401
+ --salt-size-selection: var(--salt-size-selectable);
402
+ --salt-size-brandBar: 4px;
403
+ --salt-size-graphic-small: 12px;
404
+ --salt-size-graphic-medium: 24px;
405
+ --salt-size-graphic-large: 48px;
406
+ --salt-size-divider-height: var(--salt-size-separator-height);
407
+ --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
408
+ }
409
+ .salt-density-high {
410
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
411
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
412
+ --salt-size-base: calc(var(--salt-size-basis-unit) * 5);
413
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
414
+ --salt-size-detail: var(--salt-size-compact);
415
+ }
416
+ .salt-density-medium {
417
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
418
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
419
+ --salt-size-base: calc(var(--salt-size-basis-unit) * 7);
420
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
421
+ --salt-size-detail: var(--salt-size-compact);
422
+ }
423
+ .salt-density-low {
424
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
425
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
426
+ --salt-size-base: calc(var(--salt-size-basis-unit) * 9);
427
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
428
+ --salt-size-detail: var(--salt-size-compact);
429
+ }
430
+ .salt-density-touch {
431
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
432
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
433
+ --salt-size-base: calc(var(--salt-size-basis-unit) * 11);
434
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
435
+ --salt-size-detail: var(--salt-size-compact);
436
+ }
437
+
438
+ /* css/foundations/typography.css */
439
+ .salt-theme {
440
+ --salt-typography-fontFamily: "Open Sans";
441
+ --salt-typography-fontFamily-code: "PT Mono";
442
+ --salt-typography-fontWeight-light: 300;
443
+ --salt-typography-fontWeight-regular: 400;
444
+ --salt-typography-fontWeight-medium: 500;
445
+ --salt-typography-fontWeight-semiBold: 600;
446
+ --salt-typography-fontWeight-bold: 700;
447
+ --salt-typography-fontWeight-extraBold: 800;
448
+ }
449
+
450
+ /* css/foundations/zindex.css */
451
+ .salt-density-touch,
452
+ .salt-density-low,
453
+ .salt-density-medium,
454
+ .salt-density-high {
455
+ --salt-zIndex-default: 1;
456
+ --salt-zIndex-popout: 1000;
457
+ --salt-zIndex-docked: 1050;
458
+ --salt-zIndex-appHeader: 1100;
459
+ --salt-zIndex-drawer: 1200;
460
+ --salt-zIndex-modal: 1300;
461
+ --salt-zIndex-notification: 1400;
462
+ --salt-zIndex-dragObject: 1420;
463
+ --salt-zIndex-contextMenu: 1450;
464
+ --salt-zIndex-flyover: 1500;
465
+ }
466
+
467
+ /* css/foundations/palette.css */
468
+ .salt-theme {
469
+ --salt-palette-opacity-background: var(--salt-opacity-3);
470
+ --salt-palette-opacity-background-readonly: var(--salt-opacity-1);
471
+ --salt-palette-opacity-border: var(--salt-opacity-3);
472
+ --salt-palette-opacity-border-readonly: var(--salt-opacity-2);
473
+ --salt-palette-opacity-fill: var(--salt-opacity-3);
474
+ --salt-palette-opacity-foreground: var(--salt-opacity-4);
475
+ --salt-palette-opacity-backdrop: var(--salt-opacity-4);
476
+ --salt-palette-opacity-stroke: var(--salt-opacity-3);
477
+ --salt-palette-opacity-primary-border: var(--salt-opacity-3);
478
+ --salt-palette-opacity-secondary-border: var(--salt-opacity-2);
479
+ --salt-palette-opacity-tertiary-border: var(--salt-opacity-1);
480
+ --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
481
+ --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
482
+ --salt-palette-success-background-emphasize: var(--salt-palette-success-background);
483
+ --salt-palette-info-background-emphasize: var(--salt-palette-info-background);
484
+ }
485
+ .salt-theme[data-mode=light] {
486
+ --salt-palette-accent-background: var(--salt-color-blue-500);
487
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
488
+ --salt-palette-accent-border: var(--salt-color-blue-500);
489
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
490
+ --salt-palette-accent-foreground: var(--salt-color-white);
491
+ --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
492
+ --salt-palette-interact-background: transparent;
493
+ --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
494
+ --salt-palette-interact-background-hover: var(--salt-color-blue-10);
495
+ --salt-palette-interact-background-active: var(--salt-color-blue-30);
496
+ --salt-palette-interact-background-disabled: transparent;
497
+ --salt-palette-interact-border: var(--salt-color-gray-200);
498
+ --salt-palette-interact-border-active: var(--salt-color-blue-600);
499
+ --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-600-fade-fill);
500
+ --salt-palette-interact-border-disabled: var(--salt-color-gray-200-fade-border);
501
+ --salt-palette-interact-border-hover: var(--salt-color-blue-500);
502
+ --salt-palette-interact-border-readonly: var(--salt-color-gray-200-fade-border-readonly);
503
+ --salt-palette-interact-foreground: var(--salt-color-gray-200);
504
+ --salt-palette-interact-foreground-active: var(--salt-color-blue-600);
505
+ --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-fade-foreground);
506
+ --salt-palette-interact-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
507
+ --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
508
+ --salt-palette-interact-outline: var(--salt-color-blue-600);
509
+ --salt-palette-interact-cta-background: var(--salt-color-blue-600);
510
+ --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
511
+ --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);
512
+ --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background);
513
+ --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);
514
+ --salt-palette-interact-cta-foreground: var(--salt-color-white);
515
+ --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
516
+ --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
517
+ --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
518
+ --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
519
+ --salt-palette-interact-primary-background: var(--salt-color-gray-60);
520
+ --salt-palette-interact-primary-background-active: var(--salt-color-gray-200);
521
+ --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
522
+ --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background);
523
+ --salt-palette-interact-primary-background-hover: var(--salt-color-gray-40);
524
+ --salt-palette-interact-primary-foreground: var(--salt-color-gray-900);
525
+ --salt-palette-interact-primary-foreground-active: var(--salt-color-white);
526
+ --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
527
+ --salt-palette-interact-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
528
+ --salt-palette-interact-primary-foreground-hover: var(--salt-color-gray-900);
529
+ --salt-palette-interact-secondary-background: transparent;
530
+ --salt-palette-interact-secondary-background-active: var(--salt-color-gray-200);
531
+ --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
532
+ --salt-palette-interact-secondary-background-disabled: transparent;
533
+ --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-40);
534
+ --salt-palette-interact-secondary-foreground: var(--salt-color-gray-900);
535
+ --salt-palette-interact-secondary-foreground-active: var(--salt-color-white);
536
+ --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
537
+ --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
538
+ --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
539
+ --salt-palette-error-background: var(--salt-color-red-10);
540
+ --salt-palette-error-background-selected: var(--salt-color-red-20);
541
+ --salt-palette-error-border: var(--salt-color-red-500);
542
+ --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
543
+ --salt-palette-error-foreground: var(--salt-color-red-500);
544
+ --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
545
+ --salt-palette-info-background: var(--salt-color-blue-10);
546
+ --salt-palette-info-border: var(--salt-color-blue-500);
547
+ --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
548
+ --salt-palette-info-foreground: var(--salt-color-blue-500);
549
+ --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
550
+ --salt-palette-success-background: var(--salt-color-green-10);
551
+ --salt-palette-success-background-selected: var(--salt-color-green-20);
552
+ --salt-palette-success-border: var(--salt-color-green-500);
553
+ --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
554
+ --salt-palette-success-foreground: var(--salt-color-green-500);
555
+ --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
556
+ --salt-palette-warning-background: var(--salt-color-orange-10);
557
+ --salt-palette-warning-background-selected: var(--salt-color-orange-20);
558
+ --salt-palette-warning-border: var(--salt-color-orange-700);
559
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
560
+ --salt-palette-warning-foreground: var(--salt-color-orange-700);
561
+ --salt-palette-navigate-primary-background: transparent;
562
+ --salt-palette-navigate-primary-background-active: transparent;
563
+ --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
564
+ --salt-palette-navigate-secondary-background: transparent;
565
+ --salt-palette-navigate-secondary-background-active: transparent;
566
+ --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-30);
567
+ --salt-palette-navigate-tertiary-background: transparent;
568
+ --salt-palette-navigate-tertiary-background-active: transparent;
569
+ --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-20);
570
+ --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);
571
+ --salt-palette-navigate-foreground-active: var(--salt-color-blue-700);
572
+ --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
573
+ --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
574
+ --salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
575
+ --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
576
+ --salt-palette-negative-foreground: var(--salt-color-red-700);
577
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
578
+ --salt-palette-neutral-primary-background: var(--salt-color-white);
579
+ --salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
580
+ --salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
581
+ --salt-palette-neutral-primary-foreground: var(--salt-color-gray-900);
582
+ --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
583
+ --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary);
584
+ --salt-palette-neutral-primary-border: var(--salt-color-gray-60);
585
+ --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-60-fade-border);
586
+ --salt-palette-neutral-secondary-background: var(--salt-color-gray-20);
587
+ --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background);
588
+ --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly);
589
+ --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
590
+ --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
591
+ --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
592
+ --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
593
+ --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
594
+ --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
595
+ --salt-palette-neutral-tertiary-background: transparent;
596
+ --salt-palette-neutral-tertiary-background-disabled: transparent;
597
+ --salt-palette-neutral-tertiary-border: transparent;
598
+ --salt-palette-neutral-tertiary-border-disabled: transparent;
599
+ --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
600
+ --salt-palette-positive-foreground: var(--salt-color-green-700);
601
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
602
+ --salt-palette-track-background: var(--salt-color-gray-60);
603
+ --salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);
604
+ --salt-palette-track-border: var(--salt-color-gray-90);
605
+ --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
606
+ }
607
+ .salt-theme[data-mode=dark] {
608
+ --salt-palette-accent-background: var(--salt-color-blue-500);
609
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
610
+ --salt-palette-accent-border: var(--salt-color-blue-500);
611
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
612
+ --salt-palette-accent-foreground: var(--salt-color-white);
613
+ --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
614
+ --salt-palette-interact-background: transparent;
615
+ --salt-palette-interact-background-active: var(--salt-color-blue-700);
616
+ --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
617
+ --salt-palette-interact-background-hover: var(--salt-color-blue-800);
618
+ --salt-palette-interact-background-disabled: transparent;
619
+ --salt-palette-interact-border: var(--salt-color-gray-90);
620
+ --salt-palette-interact-border-active: var(--salt-color-blue-100);
621
+ --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-100-fade-fill);
622
+ --salt-palette-interact-border-disabled: var(--salt-color-gray-90-fade-border);
623
+ --salt-palette-interact-border-hover: var(--salt-color-blue-500);
624
+ --salt-palette-interact-border-readonly: var(--salt-color-gray-90-fade-border-readonly);
625
+ --salt-palette-interact-foreground: var(--salt-color-gray-90);
626
+ --salt-palette-interact-foreground-active: var(--salt-color-blue-100);
627
+ --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground);
628
+ --salt-palette-interact-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
629
+ --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
630
+ --salt-palette-interact-outline: var(--salt-color-blue-100);
631
+ --salt-palette-interact-cta-background: var(--salt-color-blue-600);
632
+ --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
633
+ --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);
634
+ --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background);
635
+ --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);
636
+ --salt-palette-interact-cta-foreground: var(--salt-color-white);
637
+ --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
638
+ --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
639
+ --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
640
+ --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
641
+ --salt-palette-interact-primary-background: var(--salt-color-gray-300);
642
+ --salt-palette-interact-primary-background-active: var(--salt-color-gray-70);
643
+ --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
644
+ --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background);
645
+ --salt-palette-interact-primary-background-hover: var(--salt-color-gray-200);
646
+ --salt-palette-interact-primary-foreground: var(--salt-color-white);
647
+ --salt-palette-interact-primary-foreground-active: var(--salt-color-gray-900);
648
+ --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
649
+ --salt-palette-interact-primary-foreground-disabled: var(--salt-color-white-fade-foreground);
650
+ --salt-palette-interact-primary-foreground-hover: var(--salt-color-white);
651
+ --salt-palette-interact-secondary-background: transparent;
652
+ --salt-palette-interact-secondary-background-active: var(--salt-color-gray-70);
653
+ --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
654
+ --salt-palette-interact-secondary-background-disabled: transparent;
655
+ --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-200);
656
+ --salt-palette-interact-secondary-foreground: var(--salt-color-white);
657
+ --salt-palette-interact-secondary-foreground-active: var(--salt-color-gray-900);
658
+ --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
659
+ --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);
660
+ --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
661
+ --salt-palette-error-background: var(--salt-color-red-900);
662
+ --salt-palette-error-background-selected: var(--salt-color-red-900);
663
+ --salt-palette-error-border: var(--salt-color-red-500);
664
+ --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
665
+ --salt-palette-error-foreground: var(--salt-color-red-500);
666
+ --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
667
+ --salt-palette-info-background: var(--salt-color-blue-900);
668
+ --salt-palette-info-border: var(--salt-color-blue-500);
669
+ --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
670
+ --salt-palette-info-foreground: var(--salt-color-blue-500);
671
+ --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
672
+ --salt-palette-success-background: var(--salt-color-green-900);
673
+ --salt-palette-success-background-selected: var(--salt-color-green-900);
674
+ --salt-palette-success-border: var(--salt-color-green-400);
675
+ --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
676
+ --salt-palette-success-foreground: var(--salt-color-green-400);
677
+ --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
678
+ --salt-palette-warning-background: var(--salt-color-orange-900);
679
+ --salt-palette-warning-background-selected: var(--salt-color-orange-900);
680
+ --salt-palette-warning-border: var(--salt-color-orange-500);
681
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
682
+ --salt-palette-warning-foreground: var(--salt-color-orange-500);
683
+ --salt-palette-navigate-primary-background: transparent;
684
+ --salt-palette-navigate-primary-background-active: transparent;
685
+ --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
686
+ --salt-palette-navigate-secondary-background: transparent;
687
+ --salt-palette-navigate-secondary-background-active: transparent;
688
+ --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-600);
689
+ --salt-palette-navigate-tertiary-background: transparent;
690
+ --salt-palette-navigate-tertiary-background-active: transparent;
691
+ --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-700);
692
+ --salt-palette-navigate-foreground-hover: var(--salt-color-blue-200);
693
+ --salt-palette-navigate-foreground-active: var(--salt-color-blue-300);
694
+ --salt-palette-navigate-foreground-visited: var(--salt-color-purple-100);
695
+ --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
696
+ --salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
697
+ --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
698
+ --salt-palette-negative-foreground: var(--salt-color-red-300);
699
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
700
+ --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
701
+ --salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background);
702
+ --salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly);
703
+ --salt-palette-neutral-primary-border: var(--salt-color-gray-300);
704
+ --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-300-fade-border);
705
+ --salt-palette-neutral-primary-foreground: var(--salt-color-white);
706
+ --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-white-fade-foreground);
707
+ --salt-palette-neutral-primary-separator: var(--salt-color-white-fade-separatorOpacity-primary);
708
+ --salt-palette-neutral-secondary-background: var(--salt-color-gray-600);
709
+ --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-600-fade-background);
710
+ --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-600-fade-background-readonly);
711
+ --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
712
+ --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
713
+ --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-70);
714
+ --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground);
715
+ --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
716
+ --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
717
+ --salt-palette-neutral-tertiary-background: transparent;
718
+ --salt-palette-neutral-tertiary-background-disabled: transparent;
719
+ --salt-palette-neutral-tertiary-border: transparent;
720
+ --salt-palette-neutral-tertiary-border-disabled: transparent;
721
+ --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
722
+ --salt-palette-positive-foreground: var(--salt-color-green-300);
723
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
724
+ --salt-palette-track-background: var(--salt-color-gray-300);
725
+ --salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background);
726
+ --salt-palette-track-border: var(--salt-color-gray-90);
727
+ --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
728
+ }
729
+ .salt-theme[data-mode=light] {
730
+ --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
731
+ --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
732
+ --salt-palette-measured-fill: var(--salt-color-blue-500);
733
+ --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
734
+ --salt-palette-measured-foreground: var(--salt-color-gray-90);
735
+ --salt-palette-measured-foreground-active: var(--salt-color-blue-500);
736
+ --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
737
+ --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
738
+ --salt-palette-measured-background: var(--salt-color-gray-60);
739
+ --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
740
+ --salt-palette-measured-border: var(--salt-color-gray-90);
741
+ --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
742
+ --salt-palette-neutral-tertiary-background-readonly: transparent;
743
+ }
744
+ .salt-theme[data-mode=dark] {
745
+ --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
746
+ --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
747
+ --salt-palette-measured-fill: var(--salt-color-blue-300);
748
+ --salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
749
+ --salt-palette-measured-foreground: var(--salt-color-gray-90);
750
+ --salt-palette-measured-foreground-active: var(--salt-color-blue-300);
751
+ --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
752
+ --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
753
+ --salt-palette-measured-background: var(--salt-color-gray-300);
754
+ --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
755
+ --salt-palette-measured-border: var(--salt-color-gray-90);
756
+ --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
757
+ --salt-palette-neutral-tertiary-background-readonly: transparent;
758
+ }
759
+
760
+ /* css/characteristics/accent.css */
761
+ .salt-density-high {
762
+ --salt-accent-fontSize: 8px;
763
+ --salt-accent-lineHeight: 11px;
764
+ }
765
+ .salt-density-medium {
766
+ --salt-accent-fontSize: 10px;
767
+ --salt-accent-lineHeight: 13px;
768
+ }
769
+ .salt-density-low {
770
+ --salt-accent-fontSize: 12px;
771
+ --salt-accent-lineHeight: 16px;
772
+ }
773
+ .salt-density-touch {
774
+ --salt-accent-fontSize: 14px;
775
+ --salt-accent-lineHeight: 18px;
776
+ }
777
+ .salt-theme {
778
+ --salt-accent-background: var(--salt-palette-accent-background);
779
+ --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
780
+ --salt-accent-borderColor: var(--salt-palette-accent-border);
781
+ --salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled);
782
+ --salt-accent-foreground: var(--salt-palette-accent-foreground);
783
+ --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
784
+ --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
785
+ }
786
+
787
+ /* css/characteristics/actionable.css */
788
+ .salt-theme {
789
+ --salt-actionable-cursor-hover: pointer;
790
+ --salt-actionable-cursor-active: pointer;
791
+ --salt-actionable-cursor-disabled: not-allowed;
792
+ --salt-actionable-letterSpacing: 0.6px;
793
+ --salt-actionable-textAlign: center;
794
+ --salt-actionable-textTransform: uppercase;
795
+ --salt-actionable-primary-foreground: var(--salt-palette-interact-primary-foreground);
796
+ --salt-actionable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
797
+ --salt-actionable-primary-foreground-active: var(--salt-palette-interact-primary-foreground-active);
798
+ --salt-actionable-primary-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
799
+ --salt-actionable-primary-background: var(--salt-palette-interact-primary-background);
800
+ --salt-actionable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
801
+ --salt-actionable-primary-background-active: var(--salt-palette-interact-primary-background-active);
802
+ --salt-actionable-primary-background-disabled: var(--salt-palette-interact-primary-background-disabled);
803
+ --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
804
+ --salt-actionable-cta-foreground: var(--salt-palette-interact-cta-foreground);
805
+ --salt-actionable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
806
+ --salt-actionable-cta-foreground-active: var(--salt-palette-interact-cta-foreground-active);
807
+ --salt-actionable-cta-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
808
+ --salt-actionable-cta-background: var(--salt-palette-interact-cta-background);
809
+ --salt-actionable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
810
+ --salt-actionable-cta-background-active: var(--salt-palette-interact-cta-background-active);
811
+ --salt-actionable-cta-background-disabled: var(--salt-palette-interact-cta-background-disabled);
812
+ --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
813
+ --salt-actionable-secondary-foreground: var(--salt-palette-interact-secondary-foreground);
814
+ --salt-actionable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
815
+ --salt-actionable-secondary-foreground-active: var(--salt-palette-interact-secondary-foreground-active);
816
+ --salt-actionable-secondary-foreground-disabled: var(--salt-palette-interact-secondary-foreground-disabled);
817
+ --salt-actionable-secondary-background: var(--salt-palette-interact-secondary-background);
818
+ --salt-actionable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
819
+ --salt-actionable-secondary-background-active: var(--salt-palette-interact-secondary-background-active);
820
+ --salt-actionable-secondary-background-disabled: var(--salt-palette-interact-secondary-background-disabled);
821
+ --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
822
+ }
823
+
824
+ /* css/characteristics/container.css */
825
+ .salt-theme {
826
+ --salt-container-borderStyle: solid;
827
+ --salt-container-primary-background: var(--salt-palette-neutral-primary-background);
828
+ --salt-container-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
829
+ --salt-container-primary-borderColor: var(--salt-palette-neutral-primary-border);
830
+ --salt-container-primary-borderColor-disabled: var(--salt-palette-neutral-primary-border-disabled);
831
+ --salt-container-secondary-background: var(--salt-palette-neutral-secondary-background);
832
+ --salt-container-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
833
+ --salt-container-secondary-borderColor: var(--salt-palette-neutral-secondary-border);
834
+ --salt-container-secondary-borderColor-disabled: var(--salt-palette-neutral-secondary-border-disabled);
835
+ --salt-container-tertiary-background: var(--salt-palette-neutral-tertiary-background);
836
+ --salt-container-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
837
+ --salt-container-tertiary-borderColor: var(--salt-palette-neutral-tertiary-border);
838
+ --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-tertiary-border-disabled);
839
+ }
840
+
841
+ /* css/characteristics/differential.css */
842
+ .salt-theme {
843
+ --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
844
+ --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
845
+ }
846
+
847
+ /* css/characteristics/draggable.css */
848
+ .salt-theme {
849
+ --salt-draggable-horizontal-cursor-hover: row-resize;
850
+ --salt-draggable-horizontal-cursor-active: row-resize;
851
+ --salt-draggable-vertical-cursor-hover: col-resize;
852
+ --salt-draggable-vertical-cursor-active: col-resize;
853
+ --salt-draggable-grab-cursor-hover: grab;
854
+ --salt-draggable-grab-cursor-active: grabbing;
855
+ }
856
+
857
+ /* css/characteristics/target.css */
858
+ .salt-theme {
859
+ --salt-target-background-hover: var(--salt-palette-interact-background-hover);
860
+ --salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);
861
+ --salt-target-borderStyle: dashed;
862
+ --salt-target-borderStyle-hover: solid;
863
+ --salt-target-borderStyle-disabled: dashed;
864
+ --salt-target-cursor-disabled: not-allowed;
865
+ }
866
+
867
+ /* css/characteristics/editable.css */
868
+ .salt-theme {
869
+ --salt-editable-cursor-hover: text;
870
+ --salt-editable-cursor-active: text;
871
+ --salt-editable-cursor-disabled: not-allowed;
872
+ --salt-editable-cursor-readonly: text;
873
+ --salt-editable-borderStyle: solid;
874
+ --salt-editable-borderStyle-hover: solid;
875
+ --salt-editable-borderStyle-active: solid;
876
+ --salt-editable-borderStyle-disabled: solid;
877
+ --salt-editable-borderStyle-readonly: solid;
878
+ --salt-editable-borderWidth-active: 2px;
879
+ --salt-editable-borderColor: var(--salt-palette-interact-border);
880
+ --salt-editable-borderColor-active: var(--salt-palette-interact-border-active);
881
+ --salt-editable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
882
+ --salt-editable-borderColor-hover: var(--salt-palette-interact-border-hover);
883
+ --salt-editable-borderColor-readonly: var(--salt-palette-interact-border-readonly);
884
+ --salt-editable-primary-background: var(--salt-palette-neutral-primary-background);
885
+ --salt-editable-primary-background-active: var(--salt-palette-neutral-primary-background);
886
+ --salt-editable-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
887
+ --salt-editable-primary-background-hover: var(--salt-palette-neutral-primary-background);
888
+ --salt-editable-primary-background-readonly: var(--salt-palette-neutral-primary-background-readonly);
889
+ --salt-editable-secondary-background: var(--salt-palette-neutral-secondary-background);
890
+ --salt-editable-secondary-background-active: var(--salt-palette-neutral-secondary-background);
891
+ --salt-editable-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
892
+ --salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);
893
+ --salt-editable-secondary-background-readonly: var(--salt-palette-neutral-secondary-background-readonly);
894
+ --salt-editable-help-fontStyle: italic;
895
+ --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
896
+ --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
897
+ --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
898
+ --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
899
+ --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
900
+ }
901
+
902
+ /* css/characteristics/focused.css */
903
+ .salt-theme {
904
+ --salt-focused-outlineColor: var(--salt-palette-interact-outline);
905
+ --salt-focused-outlineStyle: dotted;
906
+ --salt-focused-outlineWidth: 2px;
907
+ --salt-focused-outlineInset: 0;
908
+ --salt-focused-outlineOffset: 0;
909
+ --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
910
+ }
911
+ .saltFocusVisible:after,
912
+ .focused:focus:after,
913
+ .focused:focus-visible:after {
914
+ content: "";
915
+ inset: var(--salt-focused-outlineInset);
916
+ outline-color: var(--salt-focused-outlineColor);
917
+ outline-offset: var(--salt-focused-outlineOffset);
918
+ outline-style: var(--salt-focused-outlineStyle);
919
+ outline-width: var(--salt-focused-outlineWidth);
920
+ position: absolute;
921
+ }
922
+
923
+ /* css/characteristics/measured.css */
924
+ .salt-theme {
925
+ --salt-measured-borderStyle: solid;
926
+ --salt-measured-borderStyle-active: solid;
927
+ --salt-measured-borderStyle-complete: solid;
928
+ --salt-measured-borderStyle-incomplete: dotted;
929
+ --salt-measured-borderWidth: 2px;
930
+ --salt-measured-borderWidth-active: 2px;
931
+ --salt-measured-borderWidth-complete: 2px;
932
+ --salt-measured-borderWidth-incomplete: 2px;
933
+ --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
934
+ --salt-measured-textAlign: center;
935
+ --salt-measured-background: var(--salt-palette-measured-background);
936
+ --salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
937
+ --salt-measured-borderColor: var(--salt-palette-measured-border);
938
+ --salt-measured-borderColor-disabled: var(--salt-palette-measured-border-disabled);
939
+ --salt-measured-fill: var(--salt-palette-measured-fill);
940
+ --salt-measured-fill-disabled: var(--salt-palette-measured-fill-disabled);
941
+ --salt-measured-foreground: var(--salt-palette-measured-foreground);
942
+ --salt-measured-foreground-hover: var(--salt-palette-measured-foreground-active);
943
+ --salt-measured-foreground-active: var(--salt-palette-measured-foreground-active);
944
+ --salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
945
+ --salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
946
+ --salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);
947
+ }
948
+
949
+ /* css/characteristics/navigable.css */
950
+ .salt-theme {
951
+ --salt-navigable-cursor-active: pointer;
952
+ --salt-navigable-cursor-hover: pointer;
953
+ --salt-navigable-cursor-disabled: not-allowed;
954
+ --salt-navigable-cursor-edit: text;
955
+ --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
956
+ --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
957
+ --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
958
+ --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
959
+ --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
960
+ --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
961
+ --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
962
+ --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);
963
+ --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);
964
+ --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);
965
+ --salt-navigable-secondary-background: var(--salt-palette-navigate-secondary-background);
966
+ --salt-navigable-secondary-background-hover: var(--salt-palette-navigate-secondary-background-hover);
967
+ --salt-navigable-secondary-background-active: var(--salt-palette-navigate-secondary-background-active);
968
+ --salt-navigable-tertiary-background: var(--salt-palette-navigate-tertiary-background);
969
+ --salt-navigable-tertiary-background-hover: var(--salt-palette-navigate-tertiary-background-hover);
970
+ --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
971
+ }
972
+
973
+ /* css/characteristics/overlayable.css */
974
+ .salt-theme {
975
+ --salt-overlayable-shadow-scroll: var(--salt-shadow-1);
976
+ --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
977
+ --salt-overlayable-shadow: var(--salt-shadow-2);
978
+ --salt-overlayable-shadow-hover: var(--salt-shadow-3);
979
+ --salt-overlayable-shadow-popout: var(--salt-shadow-4);
980
+ --salt-overlayable-shadow-drag: var(--salt-shadow-4);
981
+ --salt-overlayable-shadow-modal: var(--salt-shadow-5);
982
+ --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
983
+ --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
984
+ }
985
+
986
+ /* css/characteristics/selectable.css */
987
+ .salt-theme {
988
+ --salt-selectable-cursor-hover: pointer;
989
+ --salt-selectable-cursor-selected: pointer;
990
+ --salt-selectable-cursor-blurSelected: pointer;
991
+ --salt-selectable-cursor-disabled: not-allowed;
992
+ --salt-selectable-borderStyle: solid;
993
+ --salt-selectable-borderStyle-hover: solid;
994
+ --salt-selectable-borderStyle-selected: solid;
995
+ --salt-selectable-borderStyle-blurSelected: solid;
996
+ --salt-selectable-borderColor: var(--salt-palette-interact-border);
997
+ --salt-selectable-borderColor-hover: var(--salt-palette-interact-border-hover);
998
+ --salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
999
+ --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);
1000
+ --salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
1001
+ --salt-selectable-foreground: var(--salt-palette-interact-foreground);
1002
+ --salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1003
+ --salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);
1004
+ --salt-selectable-foreground-selected: var(--salt-palette-interact-foreground-active);
1005
+ --salt-selectable-foreground-selectedDisabled: var(--salt-palette-interact-foreground-activeDisabled);
1006
+ --salt-selectable-background: var(--salt-palette-interact-background);
1007
+ --salt-selectable-background-hover: var(--salt-palette-interact-background-hover);
1008
+ --salt-selectable-background-selected: var(--salt-palette-interact-background-active);
1009
+ --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
1010
+ --salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);
1011
+ --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
1012
+ --salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
1013
+ --salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
1014
+ --salt-selectable-cta-background: var(--salt-palette-interact-background);
1015
+ --salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled);
1016
+ --salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
1017
+ --salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active);
1018
+ --salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled);
1019
+ --salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1020
+ --salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
1021
+ --salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled);
1022
+ --salt-selectable-primary-background: var(--salt-palette-interact-background);
1023
+ --salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled);
1024
+ --salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
1025
+ --salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active);
1026
+ --salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled);
1027
+ --salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
1028
+ --salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active);
1029
+ --salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled);
1030
+ --salt-selectable-secondary-background: var(--salt-palette-interact-background);
1031
+ --salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled);
1032
+ --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
1033
+ --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
1034
+ --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
1035
+ --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
1036
+ --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
1037
+ --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
1038
+ --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1039
+ --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
1040
+ --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1041
+ --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
1042
+ --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1043
+ }
1044
+
1045
+ /* css/characteristics/separable.css */
1046
+ .salt-theme {
1047
+ --salt-separable-borderStyle: solid;
1048
+ --salt-separable-primary-borderColor: var(--salt-palette-neutral-primary-separator);
1049
+ --salt-separable-secondary-borderColor: var(--salt-palette-neutral-secondary-separator);
1050
+ --salt-separable-tertiary-borderColor: var(--salt-palette-neutral-tertiary-separator);
1051
+ }
1052
+
1053
+ /* css/characteristics/status.css */
1054
+ .salt-theme {
1055
+ --salt-status-info-foreground: var(--salt-palette-info-foreground);
1056
+ --salt-status-success-foreground: var(--salt-palette-success-foreground);
1057
+ --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
1058
+ --salt-status-error-foreground: var(--salt-palette-error-foreground);
1059
+ --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
1060
+ --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
1061
+ --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
1062
+ --salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
1063
+ --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
1064
+ --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
1065
+ --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
1066
+ --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1067
+ --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1068
+ --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1069
+ --salt-status-info-borderColor: var(--salt-palette-info-border);
1070
+ --salt-status-success-borderColor: var(--salt-palette-success-border);
1071
+ --salt-status-warning-borderColor: var(--salt-palette-warning-border);
1072
+ --salt-status-error-borderColor: var(--salt-palette-error-border);
1073
+ --salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
1074
+ --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1075
+ --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1076
+ --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
1077
+ --salt-status-info-background: var(--salt-palette-info-background);
1078
+ --salt-status-success-background: var(--salt-palette-success-background);
1079
+ --salt-status-warning-background: var(--salt-palette-warning-background);
1080
+ --salt-status-error-background: var(--salt-palette-error-background);
1081
+ --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
1082
+ --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
1083
+ --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
1084
+ --salt-status-info-background-emphasize: var(--salt-status-info-background);
1085
+ --salt-status-success-background-emphasize: var(--salt-status-success-background);
1086
+ --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
1087
+ --salt-status-error-background-emphasize: var(--salt-status-error-background);
1088
+ }
1089
+
1090
+ /* css/characteristics/taggable.css */
1091
+ .salt-theme {
1092
+ --salt-taggable-cursor-hover: pointer;
1093
+ --salt-taggable-cursor-active: pointer;
1094
+ --salt-taggable-cursor-disabled: not-allowed;
1095
+ --salt-taggable-background: var(--salt-palette-interact-primary-background);
1096
+ --salt-taggable-background-hover: var(--salt-palette-interact-primary-background-hover);
1097
+ --salt-taggable-background-active: var(--salt-palette-interact-primary-background-active);
1098
+ --salt-taggable-background-disabled: var(--salt-palette-interact-primary-background-disabled);
1099
+ --salt-taggable-foreground: var(--salt-palette-interact-primary-foreground);
1100
+ --salt-taggable-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1101
+ --salt-taggable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1102
+ --salt-taggable-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
1103
+ }
1104
+
1105
+ /* css/characteristics/text.css */
1106
+ .salt-theme {
1107
+ --salt-text-letterSpacing: 0;
1108
+ --salt-text-textAlign: left;
1109
+ --salt-text-textAlign-embedded: center;
1110
+ --salt-text-textDecoration: none;
1111
+ --salt-text-textTransform: none;
1112
+ --salt-text-fontFamily: var(--salt-typography-fontFamily);
1113
+ --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
1114
+ --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
1115
+ --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1116
+ --salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
1117
+ --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
1118
+ --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
1119
+ --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
1120
+ --salt-text-h2-fontFamily: var(--salt-typography-fontFamily);
1121
+ --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1122
+ --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1123
+ --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1124
+ --salt-text-h3-fontFamily: var(--salt-typography-fontFamily);
1125
+ --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1126
+ --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1127
+ --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1128
+ --salt-text-h4-fontFamily: var(--salt-typography-fontFamily);
1129
+ --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
1130
+ --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
1131
+ --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1132
+ --salt-text-label-fontFamily: var(--salt-typography-fontFamily);
1133
+ --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
1134
+ --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
1135
+ --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1136
+ --salt-text-display1-fontFamily: var(--salt-typography-fontFamily);
1137
+ --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
1138
+ --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1139
+ --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
1140
+ --salt-text-display2-fontFamily: var(--salt-typography-fontFamily);
1141
+ --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1142
+ --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1143
+ --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1144
+ --salt-text-display3-fontFamily: var(--salt-typography-fontFamily);
1145
+ --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1146
+ --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1147
+ --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1148
+ --salt-text-background-selected: var(--salt-palette-interact-background-active);
1149
+ --salt-text-primary-foreground: var(--salt-palette-neutral-primary-foreground);
1150
+ --salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1151
+ --salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
1152
+ --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1153
+ --salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover);
1154
+ --salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active);
1155
+ --salt-text-link-foreground-visited: var(--salt-palette-navigate-foreground-visited);
1156
+ --salt-text-link-textDecoration: underline;
1157
+ --salt-text-link-textDecoration-hover: none;
1158
+ --salt-text-link-textDecoration-selected: underline;
1159
+ --salt-text-code-fontFamily: var(--salt-typography-fontFamily-code);
1160
+ }
1161
+ .salt-density-touch {
1162
+ --salt-text-h1-fontSize: 42px;
1163
+ --salt-text-h1-lineHeight: 54px;
1164
+ --salt-text-h2-fontSize: 32px;
1165
+ --salt-text-h2-lineHeight: 42px;
1166
+ --salt-text-h3-fontSize: 24px;
1167
+ --salt-text-h3-lineHeight: 32px;
1168
+ --salt-text-h4-fontSize: 16px;
1169
+ --salt-text-h4-lineHeight: 20px;
1170
+ --salt-text-label-fontSize: 14px;
1171
+ --salt-text-label-lineHeight: 18px;
1172
+ --salt-text-fontSize: 16px;
1173
+ --salt-text-lineHeight: 20px;
1174
+ --salt-text-minHeight: 20px;
1175
+ --salt-text-display1-fontSize: 84px;
1176
+ --salt-text-display1-lineHeight: 109px;
1177
+ --salt-text-display2-fontSize: 58px;
1178
+ --salt-text-display2-lineHeight: 76px;
1179
+ --salt-text-display3-fontSize: 42px;
1180
+ --salt-text-display3-lineHeight: 54px;
1181
+ }
1182
+ .salt-density-low {
1183
+ --salt-text-h1-fontSize: 32px;
1184
+ --salt-text-h1-lineHeight: 42px;
1185
+ --salt-text-h2-fontSize: 24px;
1186
+ --salt-text-h2-lineHeight: 32px;
1187
+ --salt-text-h3-fontSize: 18px;
1188
+ --salt-text-h3-lineHeight: 24px;
1189
+ --salt-text-h4-fontSize: 14px;
1190
+ --salt-text-h4-lineHeight: 18px;
1191
+ --salt-text-label-fontSize: 12px;
1192
+ --salt-text-label-lineHeight: 16px;
1193
+ --salt-text-fontSize: 14px;
1194
+ --salt-text-lineHeight: 18px;
1195
+ --salt-text-minHeight: 18px;
1196
+ --salt-text-display1-fontSize: 68px;
1197
+ --salt-text-display1-lineHeight: 88px;
1198
+ --salt-text-display2-fontSize: 46px;
1199
+ --salt-text-display2-lineHeight: 60px;
1200
+ --salt-text-display3-fontSize: 32px;
1201
+ --salt-text-display3-lineHeight: 42px;
1202
+ }
1203
+ .salt-density-medium {
1204
+ --salt-text-h1-fontSize: 24px;
1205
+ --salt-text-h1-lineHeight: 32px;
1206
+ --salt-text-h2-fontSize: 18px;
1207
+ --salt-text-h2-lineHeight: 24px;
1208
+ --salt-text-h3-fontSize: 14px;
1209
+ --salt-text-h3-lineHeight: 18px;
1210
+ --salt-text-h4-fontSize: 12px;
1211
+ --salt-text-h4-lineHeight: 16px;
1212
+ --salt-text-label-fontSize: 11px;
1213
+ --salt-text-label-lineHeight: 14px;
1214
+ --salt-text-fontSize: 12px;
1215
+ --salt-text-lineHeight: 16px;
1216
+ --salt-text-minHeight: 16px;
1217
+ --salt-text-display1-fontSize: 54px;
1218
+ --salt-text-display1-lineHeight: 70px;
1219
+ --salt-text-display2-fontSize: 36px;
1220
+ --salt-text-display2-lineHeight: 47px;
1221
+ --salt-text-display3-fontSize: 24px;
1222
+ --salt-text-display3-lineHeight: 32px;
1223
+ }
1224
+ .salt-density-high {
1225
+ --salt-text-h1-fontSize: 18px;
1226
+ --salt-text-h1-lineHeight: 24px;
1227
+ --salt-text-h2-fontSize: 14px;
1228
+ --salt-text-h2-lineHeight: 18px;
1229
+ --salt-text-h3-fontSize: 12px;
1230
+ --salt-text-h3-lineHeight: 16px;
1231
+ --salt-text-h4-fontSize: 11px;
1232
+ --salt-text-h4-lineHeight: 14px;
1233
+ --salt-text-label-fontSize: 10px;
1234
+ --salt-text-label-lineHeight: 13px;
1235
+ --salt-text-fontSize: 11px;
1236
+ --salt-text-lineHeight: 14px;
1237
+ --salt-text-minHeight: 14px;
1238
+ --salt-text-display1-fontSize: 42px;
1239
+ --salt-text-display1-lineHeight: 54px;
1240
+ --salt-text-display2-fontSize: 28px;
1241
+ --salt-text-display2-lineHeight: 36px;
1242
+ --salt-text-display3-fontSize: 18px;
1243
+ --salt-text-display3-lineHeight: 24px;
1244
+ }
1245
+
1246
+ /* css/characteristics/track.css */
1247
+ .salt-theme {
1248
+ --salt-track-borderStyle: solid;
1249
+ --salt-track-borderStyle-active: solid;
1250
+ --salt-track-borderStyle-complete: solid;
1251
+ --salt-track-borderStyle-incomplete: dotted;
1252
+ --salt-track-borderWidth: 2px;
1253
+ --salt-track-borderWidth-active: 2px;
1254
+ --salt-track-borderWidth-complete: 2px;
1255
+ --salt-track-borderWidth-incomplete: 2px;
1256
+ --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
1257
+ --salt-track-textAlign: center;
1258
+ --salt-track-background: var(--salt-palette-track-background);
1259
+ --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
1260
+ --salt-track-borderColor: var(--salt-palette-track-border);
1261
+ --salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
1262
+ }
1263
+
1264
+ /* css/theme.css */