@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.
- package/css/global.css +14 -0
- package/css/theme-next.css +1032 -40
- package/css/theme.css +631 -619
- package/index.css +635 -609
- package/package.json +1 -1
package/css/theme.css
CHANGED
|
@@ -18,36 +18,6 @@
|
|
|
18
18
|
--salt-color-black-50a: rgba(var(--salt-color-black-rgb), 0.5);
|
|
19
19
|
--salt-color-black-65a: rgba(var(--salt-color-black-rgb), 0.65);
|
|
20
20
|
--salt-color-black-80a: rgba(var(--salt-color-black-rgb), 0.8);
|
|
21
|
-
--salt-color-blue-30-40a: rgba(var(--salt-color-blue-30-rgb), 0.4);
|
|
22
|
-
--salt-color-blue-100-40a: rgba(var(--salt-color-blue-100-rgb), 0.4);
|
|
23
|
-
--salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
|
|
24
|
-
--salt-color-blue-500-40a: rgba(var(--salt-color-blue-500-rgb), 0.4);
|
|
25
|
-
--salt-color-blue-600-40a: rgba(var(--salt-color-blue-600-rgb), 0.4);
|
|
26
|
-
--salt-color-blue-700-40a: rgba(var(--salt-color-blue-700-rgb), 0.4);
|
|
27
|
-
--salt-color-gray-20-40a: rgba(var(--salt-color-gray-20-rgb), 0.4);
|
|
28
|
-
--salt-color-gray-30-40a: rgba(var(--salt-color-gray-30-rgb), 0.4);
|
|
29
|
-
--salt-color-gray-50-40a: rgba(var(--salt-color-gray-50-rgb), 0.4);
|
|
30
|
-
--salt-color-gray-60-40a: rgba(var(--salt-color-gray-60-rgb), 0.4);
|
|
31
|
-
--salt-color-gray-70-40a: rgba(var(--salt-color-gray-70-rgb), 0.4);
|
|
32
|
-
--salt-color-gray-90-15a: rgba(var(--salt-color-gray-90-rgb), 0.15);
|
|
33
|
-
--salt-color-gray-90-40a: rgba(var(--salt-color-gray-90-rgb), 0.4);
|
|
34
|
-
--salt-color-gray-200-15a: rgba(var(--salt-color-gray-200-rgb), 0.15);
|
|
35
|
-
--salt-color-gray-200-40a: rgba(var(--salt-color-gray-200-rgb), 0.4);
|
|
36
|
-
--salt-color-gray-300-40a: rgba(var(--salt-color-gray-300-rgb), 0.4);
|
|
37
|
-
--salt-color-gray-600-40a: rgba(var(--salt-color-gray-600-rgb), 0.4);
|
|
38
|
-
--salt-color-gray-800-40a: rgba(var(--salt-color-gray-800-rgb), 0.4);
|
|
39
|
-
--salt-color-gray-900-40a: rgba(var(--salt-color-gray-900-rgb), 0.4);
|
|
40
|
-
--salt-color-green-200-40a: rgba(var(--salt-color-green-200-rgb), 0.4);
|
|
41
|
-
--salt-color-green-500-40a: rgba(var(--salt-color-green-500-rgb), 0.4);
|
|
42
|
-
--salt-color-green-600-40a: rgba(var(--salt-color-green-600-rgb), 0.4);
|
|
43
|
-
--salt-color-orange-400-40a: rgba(var(--salt-color-orange-400-rgb), 0.4);
|
|
44
|
-
--salt-color-orange-500-40a: rgba(var(--salt-color-orange-500-rgb), 0.4);
|
|
45
|
-
--salt-color-orange-600-40a: rgba(var(--salt-color-orange-600-rgb), 0.4);
|
|
46
|
-
--salt-color-orange-700-40a: rgba(var(--salt-color-orange-700-rgb), 0.4);
|
|
47
|
-
--salt-color-orange-850-40a: rgba(var(--salt-color-orange-850-rgb), 0.4);
|
|
48
|
-
--salt-color-red-200-40a: rgba(var(--salt-color-red-200-rgb), 0.4);
|
|
49
|
-
--salt-color-red-500-40a: rgba(var(--salt-color-red-500-rgb), 0.4);
|
|
50
|
-
--salt-color-red-600-40a: rgba(var(--salt-color-red-600-rgb), 0.4);
|
|
51
21
|
}
|
|
52
22
|
|
|
53
23
|
/* css/foundations/animation.css */
|
|
@@ -204,14 +174,248 @@
|
|
|
204
174
|
|
|
205
175
|
/* css/foundations/color.css */
|
|
206
176
|
.salt-theme {
|
|
207
|
-
--salt-color-white-rgb:
|
|
208
|
-
255,
|
|
209
|
-
255,
|
|
210
|
-
255;
|
|
211
177
|
--salt-color-black-rgb:
|
|
212
178
|
0,
|
|
213
179
|
0,
|
|
214
180
|
0;
|
|
181
|
+
--salt-color-white-rgb:
|
|
182
|
+
255,
|
|
183
|
+
255,
|
|
184
|
+
255;
|
|
185
|
+
--salt-color-black: rgb(var(--salt-color-black-rgb));
|
|
186
|
+
--salt-color-white: rgb(var(--salt-color-white-rgb));
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
/* css/foundations/cursor.css */
|
|
190
|
+
.salt-theme {
|
|
191
|
+
--salt-cursor-active: pointer;
|
|
192
|
+
--salt-cursor-disabled: not-allowed;
|
|
193
|
+
--salt-cursor-drag-ew: ew-resize;
|
|
194
|
+
--salt-cursor-drag-ns: ns-resize;
|
|
195
|
+
--salt-cursor-grab: grab;
|
|
196
|
+
--salt-cursor-grab-active: grabbing;
|
|
197
|
+
--salt-cursor-hover: pointer;
|
|
198
|
+
--salt-cursor-pending: progress;
|
|
199
|
+
--salt-cursor-readonly: text;
|
|
200
|
+
--salt-cursor-text: text;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/* css/foundations/curve.css */
|
|
204
|
+
.salt-density-high {
|
|
205
|
+
--salt-curve-0: 0;
|
|
206
|
+
--salt-curve-50: 1px;
|
|
207
|
+
--salt-curve-100: 2px;
|
|
208
|
+
--salt-curve-150: 3px;
|
|
209
|
+
--salt-curve-200: 4px;
|
|
210
|
+
--salt-curve-250: 5px;
|
|
211
|
+
--salt-curve-999: 999px;
|
|
212
|
+
}
|
|
213
|
+
.salt-density-medium {
|
|
214
|
+
--salt-curve-0: 0;
|
|
215
|
+
--salt-curve-50: 2px;
|
|
216
|
+
--salt-curve-100: 4px;
|
|
217
|
+
--salt-curve-150: 6px;
|
|
218
|
+
--salt-curve-200: 8px;
|
|
219
|
+
--salt-curve-250: 10px;
|
|
220
|
+
--salt-curve-999: 999px;
|
|
221
|
+
}
|
|
222
|
+
.salt-density-low {
|
|
223
|
+
--salt-curve-0: 0;
|
|
224
|
+
--salt-curve-50: 3px;
|
|
225
|
+
--salt-curve-100: 6px;
|
|
226
|
+
--salt-curve-150: 9px;
|
|
227
|
+
--salt-curve-200: 12px;
|
|
228
|
+
--salt-curve-250: 15px;
|
|
229
|
+
--salt-curve-999: 999px;
|
|
230
|
+
}
|
|
231
|
+
.salt-density-touch {
|
|
232
|
+
--salt-curve-0: 0;
|
|
233
|
+
--salt-curve-50: 4px;
|
|
234
|
+
--salt-curve-100: 8px;
|
|
235
|
+
--salt-curve-150: 12px;
|
|
236
|
+
--salt-curve-200: 16px;
|
|
237
|
+
--salt-curve-250: 20px;
|
|
238
|
+
--salt-curve-999: 999px;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* css/foundations/duration.css */
|
|
242
|
+
.salt-theme {
|
|
243
|
+
--salt-duration-instant: 0ms;
|
|
244
|
+
--salt-duration-perceptible: 300ms;
|
|
245
|
+
--salt-duration-notable: 1000ms;
|
|
246
|
+
--salt-duration-cutoff: 10000ms;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
/* css/foundations/size.css */
|
|
250
|
+
.salt-density-high {
|
|
251
|
+
--salt-size-adornment: 6px;
|
|
252
|
+
--salt-size-bar: 2px;
|
|
253
|
+
--salt-size-base: 20px;
|
|
254
|
+
--salt-size-icon: 10px;
|
|
255
|
+
--salt-size-indicator: 2px;
|
|
256
|
+
--salt-size-selectable: 12px;
|
|
257
|
+
--salt-size-bar-strong: 4px;
|
|
258
|
+
}
|
|
259
|
+
.salt-density-medium {
|
|
260
|
+
--salt-size-adornment: 8px;
|
|
261
|
+
--salt-size-bar: 4px;
|
|
262
|
+
--salt-size-base: 28px;
|
|
263
|
+
--salt-size-icon: 12px;
|
|
264
|
+
--salt-size-indicator: 3px;
|
|
265
|
+
--salt-size-selectable: 14px;
|
|
266
|
+
--salt-size-bar-strong: 8px;
|
|
267
|
+
}
|
|
268
|
+
.salt-density-low {
|
|
269
|
+
--salt-size-adornment: 10px;
|
|
270
|
+
--salt-size-bar: 6px;
|
|
271
|
+
--salt-size-base: 36px;
|
|
272
|
+
--salt-size-icon: 14px;
|
|
273
|
+
--salt-size-indicator: 4px;
|
|
274
|
+
--salt-size-selectable: 16px;
|
|
275
|
+
--salt-size-bar-strong: 12px;
|
|
276
|
+
}
|
|
277
|
+
.salt-density-touch {
|
|
278
|
+
--salt-size-adornment: 12px;
|
|
279
|
+
--salt-size-bar: 8px;
|
|
280
|
+
--salt-size-base: 44px;
|
|
281
|
+
--salt-size-icon: 16px;
|
|
282
|
+
--salt-size-indicator: 5px;
|
|
283
|
+
--salt-size-selectable: 18px;
|
|
284
|
+
--salt-size-bar-strong: 16px;
|
|
285
|
+
}
|
|
286
|
+
.salt-density-touch,
|
|
287
|
+
.salt-density-low,
|
|
288
|
+
.salt-density-medium,
|
|
289
|
+
.salt-density-high {
|
|
290
|
+
--salt-size-fixed-100: 1px;
|
|
291
|
+
--salt-size-fixed-200: 2px;
|
|
292
|
+
--salt-size-fixed-300: 3px;
|
|
293
|
+
--salt-size-fixed-400: 4px;
|
|
294
|
+
--salt-size-fixed-500: 5px;
|
|
295
|
+
--salt-size-fixed-600: 6px;
|
|
296
|
+
--salt-size-fixed-700: 7px;
|
|
297
|
+
--salt-size-fixed-800: 8px;
|
|
298
|
+
--salt-size-fixed-900: 9px;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
/* css/foundations/spacing.css */
|
|
302
|
+
.salt-density-touch {
|
|
303
|
+
--salt-spacing-100: 16px;
|
|
304
|
+
}
|
|
305
|
+
.salt-density-low {
|
|
306
|
+
--salt-spacing-100: 12px;
|
|
307
|
+
}
|
|
308
|
+
.salt-density-medium {
|
|
309
|
+
--salt-spacing-100: 8px;
|
|
310
|
+
}
|
|
311
|
+
.salt-density-high {
|
|
312
|
+
--salt-spacing-100: 4px;
|
|
313
|
+
}
|
|
314
|
+
.salt-density-touch,
|
|
315
|
+
.salt-density-low,
|
|
316
|
+
.salt-density-medium,
|
|
317
|
+
.salt-density-high {
|
|
318
|
+
--salt-spacing-25: calc(0.25 * var(--salt-spacing-100));
|
|
319
|
+
--salt-spacing-50: calc(0.5 * var(--salt-spacing-100));
|
|
320
|
+
--salt-spacing-75: calc(0.75 * var(--salt-spacing-100));
|
|
321
|
+
--salt-spacing-150: calc(1.5 * var(--salt-spacing-100));
|
|
322
|
+
--salt-spacing-200: calc(2 * var(--salt-spacing-100));
|
|
323
|
+
--salt-spacing-250: calc(2.5 * var(--salt-spacing-100));
|
|
324
|
+
--salt-spacing-300: calc(3 * var(--salt-spacing-100));
|
|
325
|
+
--salt-spacing-350: calc(3.5 * var(--salt-spacing-100));
|
|
326
|
+
--salt-spacing-400: calc(4 * var(--salt-spacing-100));
|
|
327
|
+
--salt-spacing-450: calc(4.5 * var(--salt-spacing-100));
|
|
328
|
+
--salt-spacing-500: calc(5 * var(--salt-spacing-100));
|
|
329
|
+
--salt-spacing-550: calc(5.5 * var(--salt-spacing-100));
|
|
330
|
+
--salt-spacing-600: calc(6 * var(--salt-spacing-100));
|
|
331
|
+
--salt-spacing-650: calc(6.5 * var(--salt-spacing-100));
|
|
332
|
+
--salt-spacing-700: calc(7 * var(--salt-spacing-100));
|
|
333
|
+
--salt-spacing-750: calc(7.5 * var(--salt-spacing-100));
|
|
334
|
+
--salt-spacing-800: calc(8 * var(--salt-spacing-100));
|
|
335
|
+
--salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
|
|
336
|
+
--salt-spacing-900: calc(9 * var(--salt-spacing-100));
|
|
337
|
+
--salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
|
|
338
|
+
--salt-spacing-fixed-100: 1px;
|
|
339
|
+
--salt-spacing-fixed-200: 2px;
|
|
340
|
+
--salt-spacing-fixed-300: 3px;
|
|
341
|
+
--salt-spacing-fixed-400: 4px;
|
|
342
|
+
--salt-spacing-fixed-500: 5px;
|
|
343
|
+
--salt-spacing-fixed-600: 6px;
|
|
344
|
+
--salt-spacing-fixed-700: 7px;
|
|
345
|
+
--salt-spacing-fixed-800: 8px;
|
|
346
|
+
--salt-spacing-fixed-900: 9px;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
/* css/foundations/typography.css */
|
|
350
|
+
.salt-theme {
|
|
351
|
+
--salt-typography-fontFamily-openSans: "Open Sans";
|
|
352
|
+
--salt-typography-fontFamily-amplitude: "Amplitude";
|
|
353
|
+
--salt-typography-fontFamily-ptMono: "PT Mono";
|
|
354
|
+
--salt-typography-fontWeight-light: 300;
|
|
355
|
+
--salt-typography-fontWeight-regular: 400;
|
|
356
|
+
--salt-typography-fontWeight-medium: 500;
|
|
357
|
+
--salt-typography-fontWeight-semiBold: 600;
|
|
358
|
+
--salt-typography-fontWeight-bold: 700;
|
|
359
|
+
--salt-typography-fontWeight-extraBold: 800;
|
|
360
|
+
--salt-typography-textDecoration-none: none;
|
|
361
|
+
--salt-typography-textDecoration-underline: underline;
|
|
362
|
+
--salt-typography-textDecoration-italic: italic;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
/* css/foundations/zindex.css */
|
|
366
|
+
.salt-density-touch,
|
|
367
|
+
.salt-density-low,
|
|
368
|
+
.salt-density-medium,
|
|
369
|
+
.salt-density-high {
|
|
370
|
+
--salt-zIndex-default: 1;
|
|
371
|
+
--salt-zIndex-popout: 1000;
|
|
372
|
+
--salt-zIndex-appHeader: 1100;
|
|
373
|
+
--salt-zIndex-drawer: 1200;
|
|
374
|
+
--salt-zIndex-modal: 1300;
|
|
375
|
+
--salt-zIndex-notification: 1400;
|
|
376
|
+
--salt-zIndex-dragObject: 1420;
|
|
377
|
+
--salt-zIndex-contextMenu: 1450;
|
|
378
|
+
--salt-zIndex-flyover: 1500;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
/* css/foundations/index.css */
|
|
382
|
+
|
|
383
|
+
/* css/legacy/foundations/alpha.css */
|
|
384
|
+
.salt-theme {
|
|
385
|
+
--salt-color-blue-30-40a: rgba(var(--salt-color-blue-30-rgb), 0.4);
|
|
386
|
+
--salt-color-blue-100-40a: rgba(var(--salt-color-blue-100-rgb), 0.4);
|
|
387
|
+
--salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
|
|
388
|
+
--salt-color-blue-500-40a: rgba(var(--salt-color-blue-500-rgb), 0.4);
|
|
389
|
+
--salt-color-blue-600-40a: rgba(var(--salt-color-blue-600-rgb), 0.4);
|
|
390
|
+
--salt-color-blue-700-40a: rgba(var(--salt-color-blue-700-rgb), 0.4);
|
|
391
|
+
--salt-color-gray-20-40a: rgba(var(--salt-color-gray-20-rgb), 0.4);
|
|
392
|
+
--salt-color-gray-30-40a: rgba(var(--salt-color-gray-30-rgb), 0.4);
|
|
393
|
+
--salt-color-gray-50-40a: rgba(var(--salt-color-gray-50-rgb), 0.4);
|
|
394
|
+
--salt-color-gray-60-40a: rgba(var(--salt-color-gray-60-rgb), 0.4);
|
|
395
|
+
--salt-color-gray-70-40a: rgba(var(--salt-color-gray-70-rgb), 0.4);
|
|
396
|
+
--salt-color-gray-90-15a: rgba(var(--salt-color-gray-90-rgb), 0.15);
|
|
397
|
+
--salt-color-gray-90-40a: rgba(var(--salt-color-gray-90-rgb), 0.4);
|
|
398
|
+
--salt-color-gray-200-15a: rgba(var(--salt-color-gray-200-rgb), 0.15);
|
|
399
|
+
--salt-color-gray-200-40a: rgba(var(--salt-color-gray-200-rgb), 0.4);
|
|
400
|
+
--salt-color-gray-300-40a: rgba(var(--salt-color-gray-300-rgb), 0.4);
|
|
401
|
+
--salt-color-gray-600-40a: rgba(var(--salt-color-gray-600-rgb), 0.4);
|
|
402
|
+
--salt-color-gray-800-40a: rgba(var(--salt-color-gray-800-rgb), 0.4);
|
|
403
|
+
--salt-color-gray-900-40a: rgba(var(--salt-color-gray-900-rgb), 0.4);
|
|
404
|
+
--salt-color-green-200-40a: rgba(var(--salt-color-green-200-rgb), 0.4);
|
|
405
|
+
--salt-color-green-500-40a: rgba(var(--salt-color-green-500-rgb), 0.4);
|
|
406
|
+
--salt-color-green-600-40a: rgba(var(--salt-color-green-600-rgb), 0.4);
|
|
407
|
+
--salt-color-orange-400-40a: rgba(var(--salt-color-orange-400-rgb), 0.4);
|
|
408
|
+
--salt-color-orange-500-40a: rgba(var(--salt-color-orange-500-rgb), 0.4);
|
|
409
|
+
--salt-color-orange-600-40a: rgba(var(--salt-color-orange-600-rgb), 0.4);
|
|
410
|
+
--salt-color-orange-700-40a: rgba(var(--salt-color-orange-700-rgb), 0.4);
|
|
411
|
+
--salt-color-orange-850-40a: rgba(var(--salt-color-orange-850-rgb), 0.4);
|
|
412
|
+
--salt-color-red-200-40a: rgba(var(--salt-color-red-200-rgb), 0.4);
|
|
413
|
+
--salt-color-red-500-40a: rgba(var(--salt-color-red-500-rgb), 0.4);
|
|
414
|
+
--salt-color-red-600-40a: rgba(var(--salt-color-red-600-rgb), 0.4);
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
/* css/legacy/foundations/color.css */
|
|
418
|
+
.salt-theme {
|
|
215
419
|
--salt-color-red-10-rgb:
|
|
216
420
|
255,
|
|
217
421
|
227,
|
|
@@ -628,8 +832,6 @@
|
|
|
628
832
|
22,
|
|
629
833
|
22,
|
|
630
834
|
22;
|
|
631
|
-
--salt-color-white: rgb(var(--salt-color-white-rgb));
|
|
632
|
-
--salt-color-black: rgb(var(--salt-color-black-rgb));
|
|
633
835
|
--salt-color-red-10: rgb(var(--salt-color-red-10-rgb));
|
|
634
836
|
--salt-color-red-20: rgb(var(--salt-color-red-20-rgb));
|
|
635
837
|
--salt-color-red-30: rgb(var(--salt-color-red-30-rgb));
|
|
@@ -865,272 +1067,74 @@
|
|
|
865
1067
|
--salt-color-smoke-300: rgb(176, 179, 184);
|
|
866
1068
|
--salt-color-smoke-400: rgb(144, 147, 152);
|
|
867
1069
|
--salt-color-smoke-500: rgb(114, 117, 122);
|
|
868
|
-
--salt-color-smoke-600: rgb(93, 96, 101);
|
|
869
|
-
--salt-color-smoke-700: rgb(73, 76, 81);
|
|
870
|
-
--salt-color-smoke-800: rgb(53, 56, 61);
|
|
871
|
-
--salt-color-smoke-900: rgb(35, 38, 43);
|
|
872
|
-
--salt-color-fuchsia-100: rgb(255, 232, 247);
|
|
873
|
-
--salt-color-fuchsia-200: rgb(255, 191, 229);
|
|
874
|
-
--salt-color-fuchsia-300: rgb(240, 151, 203);
|
|
875
|
-
--salt-color-fuchsia-400: rgb(222, 109, 178);
|
|
876
|
-
--salt-color-fuchsia-500: rgb(194, 71, 149);
|
|
877
|
-
--salt-color-fuchsia-600: rgb(167, 54, 125);
|
|
878
|
-
--salt-color-fuchsia-700: rgb(140, 37, 101);
|
|
879
|
-
--salt-color-fuchsia-800: rgb(114, 19, 79);
|
|
880
|
-
--salt-color-fuchsia-900: rgb(89, 0, 57);
|
|
881
|
-
--salt-color-lime-100: rgb(239, 245, 220);
|
|
882
|
-
--salt-color-lime-200: rgb(215, 227, 168);
|
|
883
|
-
--salt-color-lime-300: rgb(182, 196, 120);
|
|
884
|
-
--salt-color-lime-400: rgb(146, 166, 71);
|
|
885
|
-
--salt-color-lime-500: rgb(102, 125, 21);
|
|
886
|
-
--salt-color-lime-600: rgb(85, 106, 16);
|
|
887
|
-
--salt-color-lime-700: rgb(69, 87, 11);
|
|
888
|
-
--salt-color-lime-800: rgb(53, 68, 6);
|
|
889
|
-
--salt-color-lime-900: rgb(36, 46, 0);
|
|
890
|
-
--salt-color-fur-100: rgb(255, 244, 235);
|
|
891
|
-
--salt-color-fur-200: rgb(245, 214, 191);
|
|
892
|
-
--salt-color-fur-300: rgb(219, 178, 147);
|
|
893
|
-
--salt-color-fur-400: rgb(194, 144, 107);
|
|
894
|
-
--salt-color-fur-500: rgb(153, 106, 69);
|
|
895
|
-
--salt-color-fur-600: rgb(130, 85, 52);
|
|
896
|
-
--salt-color-fur-700: rgb(107, 65, 36);
|
|
897
|
-
--salt-color-fur-800: rgb(85, 46, 20);
|
|
898
|
-
--salt-color-fur-900: rgb(64, 28, 0);
|
|
899
|
-
--salt-color-violet-100: rgb(237, 239, 255);
|
|
900
|
-
--salt-color-violet-200: rgb(202, 203, 252);
|
|
901
|
-
--salt-color-violet-300: rgb(167, 169, 235);
|
|
902
|
-
--salt-color-violet-400: rgb(134, 139, 219);
|
|
903
|
-
--salt-color-violet-500: rgb(99, 110, 191);
|
|
904
|
-
--salt-color-violet-600: rgb(81, 90, 159);
|
|
905
|
-
--salt-color-violet-700: rgb(63, 71, 128);
|
|
906
|
-
--salt-color-violet-800: rgb(47, 53, 99);
|
|
907
|
-
--salt-color-violet-900: rgb(31, 36, 71);
|
|
908
|
-
--salt-color-forest-100: rgb(237, 250, 245);
|
|
909
|
-
--salt-color-forest-200: rgb(188, 232, 211);
|
|
910
|
-
--salt-color-forest-300: rgb(141, 204, 174);
|
|
911
|
-
--salt-color-forest-400: rgb(91, 176, 136);
|
|
912
|
-
--salt-color-forest-500: rgb(35, 133, 94);
|
|
913
|
-
--salt-color-forest-600: rgb(25, 111, 77);
|
|
914
|
-
--salt-color-forest-700: rgb(15, 90, 61);
|
|
915
|
-
--salt-color-forest-800: rgb(6, 70, 46);
|
|
916
|
-
--salt-color-forest-900: rgb(0, 51, 31);
|
|
917
|
-
}
|
|
918
|
-
|
|
919
|
-
/* css/foundations/cursor.css */
|
|
920
|
-
.salt-theme {
|
|
921
|
-
--salt-cursor-active: pointer;
|
|
922
|
-
--salt-cursor-disabled: not-allowed;
|
|
923
|
-
--salt-cursor-drag-ew: ew-resize;
|
|
924
|
-
--salt-cursor-drag-ns: ns-resize;
|
|
925
|
-
--salt-cursor-grab: grab;
|
|
926
|
-
--salt-cursor-grab-active: grabbing;
|
|
927
|
-
--salt-cursor-hover: pointer;
|
|
928
|
-
--salt-cursor-pending: progress;
|
|
929
|
-
--salt-cursor-readonly: text;
|
|
930
|
-
--salt-cursor-text: text;
|
|
931
|
-
}
|
|
932
|
-
|
|
933
|
-
/* css/foundations/curve.css */
|
|
934
|
-
.salt-density-high {
|
|
935
|
-
--salt-curve-0: 0;
|
|
936
|
-
--salt-curve-50: 1px;
|
|
937
|
-
--salt-curve-100: 2px;
|
|
938
|
-
--salt-curve-150: 3px;
|
|
939
|
-
--salt-curve-200: 4px;
|
|
940
|
-
--salt-curve-250: 5px;
|
|
941
|
-
--salt-curve-999: 999px;
|
|
942
|
-
}
|
|
943
|
-
.salt-density-medium {
|
|
944
|
-
--salt-curve-0: 0;
|
|
945
|
-
--salt-curve-50: 2px;
|
|
946
|
-
--salt-curve-100: 4px;
|
|
947
|
-
--salt-curve-150: 6px;
|
|
948
|
-
--salt-curve-200: 8px;
|
|
949
|
-
--salt-curve-250: 10px;
|
|
950
|
-
--salt-curve-999: 999px;
|
|
951
|
-
}
|
|
952
|
-
.salt-density-low {
|
|
953
|
-
--salt-curve-0: 0;
|
|
954
|
-
--salt-curve-50: 3px;
|
|
955
|
-
--salt-curve-100: 6px;
|
|
956
|
-
--salt-curve-150: 9px;
|
|
957
|
-
--salt-curve-200: 12px;
|
|
958
|
-
--salt-curve-250: 15px;
|
|
959
|
-
--salt-curve-999: 999px;
|
|
960
|
-
}
|
|
961
|
-
.salt-density-touch {
|
|
962
|
-
--salt-curve-0: 0;
|
|
963
|
-
--salt-curve-50: 4px;
|
|
964
|
-
--salt-curve-100: 8px;
|
|
965
|
-
--salt-curve-150: 12px;
|
|
966
|
-
--salt-curve-200: 16px;
|
|
967
|
-
--salt-curve-250: 20px;
|
|
968
|
-
--salt-curve-999: 999px;
|
|
969
|
-
}
|
|
970
|
-
|
|
971
|
-
/* css/foundations/duration.css */
|
|
972
|
-
.salt-theme {
|
|
973
|
-
--salt-duration-instant: 0ms;
|
|
974
|
-
--salt-duration-perceptible: 300ms;
|
|
975
|
-
--salt-duration-notable: 1000ms;
|
|
976
|
-
--salt-duration-cutoff: 10000ms;
|
|
1070
|
+
--salt-color-smoke-600: rgb(93, 96, 101);
|
|
1071
|
+
--salt-color-smoke-700: rgb(73, 76, 81);
|
|
1072
|
+
--salt-color-smoke-800: rgb(53, 56, 61);
|
|
1073
|
+
--salt-color-smoke-900: rgb(35, 38, 43);
|
|
1074
|
+
--salt-color-fuchsia-100: rgb(255, 232, 247);
|
|
1075
|
+
--salt-color-fuchsia-200: rgb(255, 191, 229);
|
|
1076
|
+
--salt-color-fuchsia-300: rgb(240, 151, 203);
|
|
1077
|
+
--salt-color-fuchsia-400: rgb(222, 109, 178);
|
|
1078
|
+
--salt-color-fuchsia-500: rgb(194, 71, 149);
|
|
1079
|
+
--salt-color-fuchsia-600: rgb(167, 54, 125);
|
|
1080
|
+
--salt-color-fuchsia-700: rgb(140, 37, 101);
|
|
1081
|
+
--salt-color-fuchsia-800: rgb(114, 19, 79);
|
|
1082
|
+
--salt-color-fuchsia-900: rgb(89, 0, 57);
|
|
1083
|
+
--salt-color-lime-100: rgb(239, 245, 220);
|
|
1084
|
+
--salt-color-lime-200: rgb(215, 227, 168);
|
|
1085
|
+
--salt-color-lime-300: rgb(182, 196, 120);
|
|
1086
|
+
--salt-color-lime-400: rgb(146, 166, 71);
|
|
1087
|
+
--salt-color-lime-500: rgb(102, 125, 21);
|
|
1088
|
+
--salt-color-lime-600: rgb(85, 106, 16);
|
|
1089
|
+
--salt-color-lime-700: rgb(69, 87, 11);
|
|
1090
|
+
--salt-color-lime-800: rgb(53, 68, 6);
|
|
1091
|
+
--salt-color-lime-900: rgb(36, 46, 0);
|
|
1092
|
+
--salt-color-fur-100: rgb(255, 244, 235);
|
|
1093
|
+
--salt-color-fur-200: rgb(245, 214, 191);
|
|
1094
|
+
--salt-color-fur-300: rgb(219, 178, 147);
|
|
1095
|
+
--salt-color-fur-400: rgb(194, 144, 107);
|
|
1096
|
+
--salt-color-fur-500: rgb(153, 106, 69);
|
|
1097
|
+
--salt-color-fur-600: rgb(130, 85, 52);
|
|
1098
|
+
--salt-color-fur-700: rgb(107, 65, 36);
|
|
1099
|
+
--salt-color-fur-800: rgb(85, 46, 20);
|
|
1100
|
+
--salt-color-fur-900: rgb(64, 28, 0);
|
|
1101
|
+
--salt-color-violet-100: rgb(237, 239, 255);
|
|
1102
|
+
--salt-color-violet-200: rgb(202, 203, 252);
|
|
1103
|
+
--salt-color-violet-300: rgb(167, 169, 235);
|
|
1104
|
+
--salt-color-violet-400: rgb(134, 139, 219);
|
|
1105
|
+
--salt-color-violet-500: rgb(99, 110, 191);
|
|
1106
|
+
--salt-color-violet-600: rgb(81, 90, 159);
|
|
1107
|
+
--salt-color-violet-700: rgb(63, 71, 128);
|
|
1108
|
+
--salt-color-violet-800: rgb(47, 53, 99);
|
|
1109
|
+
--salt-color-violet-900: rgb(31, 36, 71);
|
|
1110
|
+
--salt-color-forest-100: rgb(237, 250, 245);
|
|
1111
|
+
--salt-color-forest-200: rgb(188, 232, 211);
|
|
1112
|
+
--salt-color-forest-300: rgb(141, 204, 174);
|
|
1113
|
+
--salt-color-forest-400: rgb(91, 176, 136);
|
|
1114
|
+
--salt-color-forest-500: rgb(35, 133, 94);
|
|
1115
|
+
--salt-color-forest-600: rgb(25, 111, 77);
|
|
1116
|
+
--salt-color-forest-700: rgb(15, 90, 61);
|
|
1117
|
+
--salt-color-forest-800: rgb(6, 70, 46);
|
|
1118
|
+
--salt-color-forest-900: rgb(0, 51, 31);
|
|
977
1119
|
}
|
|
978
1120
|
|
|
979
|
-
/* css/
|
|
1121
|
+
/* css/legacy/palette/accent.css */
|
|
980
1122
|
.salt-theme[data-mode=light] {
|
|
981
|
-
--salt-
|
|
982
|
-
--salt-
|
|
983
|
-
--salt-
|
|
984
|
-
--salt-
|
|
985
|
-
--salt-
|
|
1123
|
+
--salt-palette-accent: var(--salt-color-blue-500);
|
|
1124
|
+
--salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
|
|
1125
|
+
--salt-palette-accent-foreground: var(--salt-color-white);
|
|
1126
|
+
--salt-palette-accent-foreground-informative: var(--salt-color-blue-600);
|
|
1127
|
+
--salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-600-40a);
|
|
986
1128
|
}
|
|
987
1129
|
.salt-theme[data-mode=dark] {
|
|
988
|
-
--salt-
|
|
989
|
-
--salt-
|
|
990
|
-
--salt-
|
|
991
|
-
--salt-
|
|
992
|
-
--salt-
|
|
993
|
-
}
|
|
994
|
-
.salt-theme {
|
|
995
|
-
--salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color);
|
|
996
|
-
--salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color);
|
|
997
|
-
--salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color);
|
|
998
|
-
--salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color);
|
|
999
|
-
--salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color);
|
|
1000
|
-
}
|
|
1001
|
-
|
|
1002
|
-
/* css/foundations/size.css */
|
|
1003
|
-
.salt-density-high {
|
|
1004
|
-
--salt-size-adornment: 6px;
|
|
1005
|
-
--salt-size-bar: 2px;
|
|
1006
|
-
--salt-size-base: 20px;
|
|
1007
|
-
--salt-size-icon: 10px;
|
|
1008
|
-
--salt-size-indicator: 2px;
|
|
1009
|
-
--salt-size-selectable: 12px;
|
|
1010
|
-
--salt-size-bar-strong: 4px;
|
|
1011
|
-
}
|
|
1012
|
-
.salt-density-medium {
|
|
1013
|
-
--salt-size-adornment: 8px;
|
|
1014
|
-
--salt-size-bar: 4px;
|
|
1015
|
-
--salt-size-base: 28px;
|
|
1016
|
-
--salt-size-icon: 12px;
|
|
1017
|
-
--salt-size-indicator: 3px;
|
|
1018
|
-
--salt-size-selectable: 14px;
|
|
1019
|
-
--salt-size-bar-strong: 8px;
|
|
1020
|
-
}
|
|
1021
|
-
.salt-density-low {
|
|
1022
|
-
--salt-size-adornment: 10px;
|
|
1023
|
-
--salt-size-bar: 6px;
|
|
1024
|
-
--salt-size-base: 36px;
|
|
1025
|
-
--salt-size-icon: 14px;
|
|
1026
|
-
--salt-size-indicator: 4px;
|
|
1027
|
-
--salt-size-selectable: 16px;
|
|
1028
|
-
--salt-size-bar-strong: 12px;
|
|
1029
|
-
}
|
|
1030
|
-
.salt-density-touch {
|
|
1031
|
-
--salt-size-adornment: 12px;
|
|
1032
|
-
--salt-size-bar: 8px;
|
|
1033
|
-
--salt-size-base: 44px;
|
|
1034
|
-
--salt-size-icon: 16px;
|
|
1035
|
-
--salt-size-indicator: 5px;
|
|
1036
|
-
--salt-size-selectable: 18px;
|
|
1037
|
-
--salt-size-bar-strong: 16px;
|
|
1038
|
-
}
|
|
1039
|
-
.salt-density-touch,
|
|
1040
|
-
.salt-density-low,
|
|
1041
|
-
.salt-density-medium,
|
|
1042
|
-
.salt-density-high {
|
|
1043
|
-
--salt-size-fixed-100: 1px;
|
|
1044
|
-
--salt-size-fixed-200: 2px;
|
|
1045
|
-
--salt-size-fixed-300: 3px;
|
|
1046
|
-
--salt-size-fixed-400: 4px;
|
|
1047
|
-
--salt-size-fixed-500: 5px;
|
|
1048
|
-
--salt-size-fixed-600: 6px;
|
|
1049
|
-
--salt-size-fixed-700: 7px;
|
|
1050
|
-
--salt-size-fixed-800: 8px;
|
|
1051
|
-
--salt-size-fixed-900: 9px;
|
|
1052
|
-
}
|
|
1053
|
-
|
|
1054
|
-
/* css/foundations/spacing.css */
|
|
1055
|
-
.salt-density-touch {
|
|
1056
|
-
--salt-spacing-100: 16px;
|
|
1057
|
-
}
|
|
1058
|
-
.salt-density-low {
|
|
1059
|
-
--salt-spacing-100: 12px;
|
|
1060
|
-
}
|
|
1061
|
-
.salt-density-medium {
|
|
1062
|
-
--salt-spacing-100: 8px;
|
|
1063
|
-
}
|
|
1064
|
-
.salt-density-high {
|
|
1065
|
-
--salt-spacing-100: 4px;
|
|
1066
|
-
}
|
|
1067
|
-
.salt-density-touch,
|
|
1068
|
-
.salt-density-low,
|
|
1069
|
-
.salt-density-medium,
|
|
1070
|
-
.salt-density-high {
|
|
1071
|
-
--salt-spacing-25: calc(0.25 * var(--salt-spacing-100));
|
|
1072
|
-
--salt-spacing-50: calc(0.5 * var(--salt-spacing-100));
|
|
1073
|
-
--salt-spacing-75: calc(0.75 * var(--salt-spacing-100));
|
|
1074
|
-
--salt-spacing-150: calc(1.5 * var(--salt-spacing-100));
|
|
1075
|
-
--salt-spacing-200: calc(2 * var(--salt-spacing-100));
|
|
1076
|
-
--salt-spacing-250: calc(2.5 * var(--salt-spacing-100));
|
|
1077
|
-
--salt-spacing-300: calc(3 * var(--salt-spacing-100));
|
|
1078
|
-
--salt-spacing-350: calc(3.5 * var(--salt-spacing-100));
|
|
1079
|
-
--salt-spacing-400: calc(4 * var(--salt-spacing-100));
|
|
1080
|
-
--salt-spacing-450: calc(4.5 * var(--salt-spacing-100));
|
|
1081
|
-
--salt-spacing-500: calc(5 * var(--salt-spacing-100));
|
|
1082
|
-
--salt-spacing-550: calc(5.5 * var(--salt-spacing-100));
|
|
1083
|
-
--salt-spacing-600: calc(6 * var(--salt-spacing-100));
|
|
1084
|
-
--salt-spacing-650: calc(6.5 * var(--salt-spacing-100));
|
|
1085
|
-
--salt-spacing-700: calc(7 * var(--salt-spacing-100));
|
|
1086
|
-
--salt-spacing-750: calc(7.5 * var(--salt-spacing-100));
|
|
1087
|
-
--salt-spacing-800: calc(8 * var(--salt-spacing-100));
|
|
1088
|
-
--salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
|
|
1089
|
-
--salt-spacing-900: calc(9 * var(--salt-spacing-100));
|
|
1090
|
-
--salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
|
|
1091
|
-
--salt-spacing-fixed-100: 1px;
|
|
1092
|
-
--salt-spacing-fixed-200: 2px;
|
|
1093
|
-
--salt-spacing-fixed-300: 3px;
|
|
1094
|
-
--salt-spacing-fixed-400: 4px;
|
|
1095
|
-
--salt-spacing-fixed-500: 5px;
|
|
1096
|
-
--salt-spacing-fixed-600: 6px;
|
|
1097
|
-
--salt-spacing-fixed-700: 7px;
|
|
1098
|
-
--salt-spacing-fixed-800: 8px;
|
|
1099
|
-
--salt-spacing-fixed-900: 9px;
|
|
1100
|
-
}
|
|
1101
|
-
|
|
1102
|
-
/* css/foundations/typography.css */
|
|
1103
|
-
.salt-theme {
|
|
1104
|
-
--salt-typography-fontFamily-openSans: "Open Sans";
|
|
1105
|
-
--salt-typography-fontFamily-amplitude: "Amplitude";
|
|
1106
|
-
--salt-typography-fontFamily-ptMono: "PT Mono";
|
|
1107
|
-
--salt-typography-fontWeight-light: 300;
|
|
1108
|
-
--salt-typography-fontWeight-regular: 400;
|
|
1109
|
-
--salt-typography-fontWeight-medium: 500;
|
|
1110
|
-
--salt-typography-fontWeight-semiBold: 600;
|
|
1111
|
-
--salt-typography-fontWeight-bold: 700;
|
|
1112
|
-
--salt-typography-fontWeight-extraBold: 800;
|
|
1113
|
-
--salt-typography-textDecoration-none: none;
|
|
1114
|
-
--salt-typography-textDecoration-underline: underline;
|
|
1115
|
-
}
|
|
1116
|
-
|
|
1117
|
-
/* css/foundations/zindex.css */
|
|
1118
|
-
.salt-density-touch,
|
|
1119
|
-
.salt-density-low,
|
|
1120
|
-
.salt-density-medium,
|
|
1121
|
-
.salt-density-high {
|
|
1122
|
-
--salt-zIndex-default: 1;
|
|
1123
|
-
--salt-zIndex-popout: 1000;
|
|
1124
|
-
--salt-zIndex-appHeader: 1100;
|
|
1125
|
-
--salt-zIndex-drawer: 1200;
|
|
1126
|
-
--salt-zIndex-modal: 1300;
|
|
1127
|
-
--salt-zIndex-notification: 1400;
|
|
1128
|
-
--salt-zIndex-dragObject: 1420;
|
|
1129
|
-
--salt-zIndex-contextMenu: 1450;
|
|
1130
|
-
--salt-zIndex-flyover: 1500;
|
|
1130
|
+
--salt-palette-accent: var(--salt-color-blue-500);
|
|
1131
|
+
--salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
|
|
1132
|
+
--salt-palette-accent-foreground: var(--salt-color-white);
|
|
1133
|
+
--salt-palette-accent-foreground-informative: var(--salt-color-blue-200);
|
|
1134
|
+
--salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-200-40a);
|
|
1131
1135
|
}
|
|
1132
1136
|
|
|
1133
|
-
/* css/palette/alpha.css */
|
|
1137
|
+
/* css/legacy/palette/alpha.css */
|
|
1134
1138
|
.salt-theme[data-mode=light] {
|
|
1135
1139
|
--salt-palette-alpha-highest: var(--salt-color-white-80a);
|
|
1136
1140
|
--salt-palette-alpha-higher: var(--salt-color-white-65a);
|
|
@@ -1174,41 +1178,7 @@
|
|
|
1174
1178
|
--salt-palette-alpha-none: transparent;
|
|
1175
1179
|
}
|
|
1176
1180
|
|
|
1177
|
-
/* css/palette/
|
|
1178
|
-
.salt-theme[data-mode=light] {
|
|
1179
|
-
--salt-palette-accent: var(--salt-color-blue-500);
|
|
1180
|
-
--salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
|
|
1181
|
-
--salt-palette-accent-foreground: var(--salt-color-white);
|
|
1182
|
-
--salt-palette-accent-foreground-informative: var(--salt-color-blue-600);
|
|
1183
|
-
--salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-600-40a);
|
|
1184
|
-
}
|
|
1185
|
-
.salt-theme[data-mode=dark] {
|
|
1186
|
-
--salt-palette-accent: var(--salt-color-blue-500);
|
|
1187
|
-
--salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
|
|
1188
|
-
--salt-palette-accent-foreground: var(--salt-color-white);
|
|
1189
|
-
--salt-palette-accent-foreground-informative: var(--salt-color-blue-200);
|
|
1190
|
-
--salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-200-40a);
|
|
1191
|
-
}
|
|
1192
|
-
|
|
1193
|
-
/* css/palette/error.css */
|
|
1194
|
-
.salt-theme[data-mode=light] {
|
|
1195
|
-
--salt-palette-error-background: var(--salt-color-red-10);
|
|
1196
|
-
--salt-palette-error-bold-background: var(--salt-color-red-500);
|
|
1197
|
-
--salt-palette-error-background-selected: var(--salt-color-red-30);
|
|
1198
|
-
--salt-palette-error-border: var(--salt-color-red-500);
|
|
1199
|
-
--salt-palette-error-foreground-decorative: var(--salt-color-red-500);
|
|
1200
|
-
--salt-palette-error-foreground-informative: var(--salt-color-red-600);
|
|
1201
|
-
}
|
|
1202
|
-
.salt-theme[data-mode=dark] {
|
|
1203
|
-
--salt-palette-error-background: var(--salt-color-red-900);
|
|
1204
|
-
--salt-palette-error-bold-background: var(--salt-color-red-500);
|
|
1205
|
-
--salt-palette-error-background-selected: var(--salt-color-red-800);
|
|
1206
|
-
--salt-palette-error-border: var(--salt-color-red-400);
|
|
1207
|
-
--salt-palette-error-foreground-decorative: var(--salt-color-red-400);
|
|
1208
|
-
--salt-palette-error-foreground-informative: var(--salt-color-red-200);
|
|
1209
|
-
}
|
|
1210
|
-
|
|
1211
|
-
/* css/palette/categorical.css */
|
|
1181
|
+
/* css/legacy/palette/categorical.css */
|
|
1212
1182
|
.salt-theme[data-mode=light] {
|
|
1213
1183
|
--salt-palette-categorical-1: var(--salt-color-cobalt-500);
|
|
1214
1184
|
--salt-palette-categorical-1-strong: var(--salt-color-cobalt-600);
|
|
@@ -1334,7 +1304,7 @@
|
|
|
1334
1304
|
--salt-palette-categorical-20-weakest: var(--salt-color-forest-900);
|
|
1335
1305
|
}
|
|
1336
1306
|
|
|
1337
|
-
/* css/palette/corner.css */
|
|
1307
|
+
/* css/legacy/palette/corner.css */
|
|
1338
1308
|
.salt-theme {
|
|
1339
1309
|
--salt-palette-corner-weaker: var(--salt-curve-0);
|
|
1340
1310
|
--salt-palette-corner-weak: var(--salt-curve-0);
|
|
@@ -1344,7 +1314,25 @@
|
|
|
1344
1314
|
--salt-palette-corner-strongest: var(--salt-curve-999);
|
|
1345
1315
|
}
|
|
1346
1316
|
|
|
1347
|
-
/* css/palette/
|
|
1317
|
+
/* css/legacy/palette/error.css */
|
|
1318
|
+
.salt-theme[data-mode=light] {
|
|
1319
|
+
--salt-palette-error-background: var(--salt-color-red-10);
|
|
1320
|
+
--salt-palette-error-bold-background: var(--salt-color-red-500);
|
|
1321
|
+
--salt-palette-error-background-selected: var(--salt-color-red-30);
|
|
1322
|
+
--salt-palette-error-border: var(--salt-color-red-500);
|
|
1323
|
+
--salt-palette-error-foreground-decorative: var(--salt-color-red-500);
|
|
1324
|
+
--salt-palette-error-foreground-informative: var(--salt-color-red-600);
|
|
1325
|
+
}
|
|
1326
|
+
.salt-theme[data-mode=dark] {
|
|
1327
|
+
--salt-palette-error-background: var(--salt-color-red-900);
|
|
1328
|
+
--salt-palette-error-bold-background: var(--salt-color-red-500);
|
|
1329
|
+
--salt-palette-error-background-selected: var(--salt-color-red-800);
|
|
1330
|
+
--salt-palette-error-border: var(--salt-color-red-400);
|
|
1331
|
+
--salt-palette-error-foreground-decorative: var(--salt-color-red-400);
|
|
1332
|
+
--salt-palette-error-foreground-informative: var(--salt-color-red-200);
|
|
1333
|
+
}
|
|
1334
|
+
|
|
1335
|
+
/* css/legacy/palette/info.css */
|
|
1348
1336
|
.salt-theme[data-mode=light] {
|
|
1349
1337
|
--salt-palette-info-background: var(--salt-color-blue-10);
|
|
1350
1338
|
--salt-palette-info-bold-background: var(--salt-color-blue-500);
|
|
@@ -1360,7 +1348,7 @@
|
|
|
1360
1348
|
--salt-palette-info-foreground-informative: var(--salt-color-blue-200);
|
|
1361
1349
|
}
|
|
1362
1350
|
|
|
1363
|
-
/* css/palette/interact.css */
|
|
1351
|
+
/* css/legacy/palette/interact.css */
|
|
1364
1352
|
.salt-theme[data-mode=light] {
|
|
1365
1353
|
--salt-palette-interact-background-hover: var(--salt-color-blue-10);
|
|
1366
1354
|
--salt-palette-interact-background-active: var(--salt-color-blue-30);
|
|
@@ -1440,7 +1428,7 @@
|
|
|
1440
1428
|
--salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
|
|
1441
1429
|
}
|
|
1442
1430
|
|
|
1443
|
-
/* css/palette/navigate.css */
|
|
1431
|
+
/* css/legacy/palette/navigate.css */
|
|
1444
1432
|
.salt-theme[data-mode=light] {
|
|
1445
1433
|
--salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
|
|
1446
1434
|
--salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
|
|
@@ -1452,7 +1440,7 @@
|
|
|
1452
1440
|
--salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
|
|
1453
1441
|
}
|
|
1454
1442
|
|
|
1455
|
-
/* css/palette/negative.css */
|
|
1443
|
+
/* css/legacy/palette/negative.css */
|
|
1456
1444
|
.salt-theme[data-mode=light] {
|
|
1457
1445
|
--salt-palette-negative-foreground: var(--salt-color-red-600);
|
|
1458
1446
|
--salt-palette-negative-foreground-disabled: var(--salt-color-red-600-40a);
|
|
@@ -1474,7 +1462,7 @@
|
|
|
1474
1462
|
--salt-palette-negative-border-disabled: var(--salt-color-red-500-40a);
|
|
1475
1463
|
}
|
|
1476
1464
|
|
|
1477
|
-
/* css/palette/neutral.css */
|
|
1465
|
+
/* css/legacy/palette/neutral.css */
|
|
1478
1466
|
.salt-theme[data-mode=light] {
|
|
1479
1467
|
--salt-palette-neutral-border: var(--salt-color-gray-50);
|
|
1480
1468
|
--salt-palette-neutral-border-disabled: var(--salt-color-gray-50-40a);
|
|
@@ -1504,7 +1492,7 @@
|
|
|
1504
1492
|
--salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-500-40a);
|
|
1505
1493
|
}
|
|
1506
1494
|
|
|
1507
|
-
/* css/palette/positive.css */
|
|
1495
|
+
/* css/legacy/palette/positive.css */
|
|
1508
1496
|
.salt-theme[data-mode=light] {
|
|
1509
1497
|
--salt-palette-positive-foreground: var(--salt-color-green-600);
|
|
1510
1498
|
--salt-palette-positive-foreground-disabled: var(--salt-color-green-600-40a);
|
|
@@ -1526,7 +1514,23 @@
|
|
|
1526
1514
|
--salt-palette-positive-border-disabled: var(--salt-color-green-500-40a);
|
|
1527
1515
|
}
|
|
1528
1516
|
|
|
1529
|
-
/* css/palette/
|
|
1517
|
+
/* css/legacy/palette/shadow.css */
|
|
1518
|
+
.salt-theme[data-mode=light] {
|
|
1519
|
+
--salt-shadow-lowest: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
|
1520
|
+
--salt-shadow-lower: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
|
1521
|
+
--salt-shadow-low: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
|
|
1522
|
+
--salt-shadow-mediumLow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
|
|
1523
|
+
--salt-shadow-medium: 0 12px 40px 0 rgba(0, 0, 0, 0.3);
|
|
1524
|
+
}
|
|
1525
|
+
.salt-theme[data-mode=dark] {
|
|
1526
|
+
--salt-shadow-lowest: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
|
|
1527
|
+
--salt-shadow-lower: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
|
|
1528
|
+
--salt-shadow-low: 0 4px 8px 0 rgba(0, 0, 0, 0.55);
|
|
1529
|
+
--salt-shadow-mediumLow: 0 6px 10px 0 rgba(0, 0, 0, 0.55);
|
|
1530
|
+
--salt-shadow-medium: 0 12px 40px 0 rgba(0, 0, 0, 0.65);
|
|
1531
|
+
}
|
|
1532
|
+
|
|
1533
|
+
/* css/legacy/palette/success.css */
|
|
1530
1534
|
.salt-theme[data-mode=light] {
|
|
1531
1535
|
--salt-palette-success-background: var(--salt-color-green-10);
|
|
1532
1536
|
--salt-palette-success-bold-background: var(--salt-color-green-500);
|
|
@@ -1544,7 +1548,7 @@
|
|
|
1544
1548
|
--salt-palette-success-foreground-informative: var(--salt-color-green-200);
|
|
1545
1549
|
}
|
|
1546
1550
|
|
|
1547
|
-
/* css/palette/text.css */
|
|
1551
|
+
/* css/legacy/palette/text.css */
|
|
1548
1552
|
.salt-theme {
|
|
1549
1553
|
--salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
|
|
1550
1554
|
--salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
|
|
@@ -1567,7 +1571,7 @@
|
|
|
1567
1571
|
--salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
1568
1572
|
}
|
|
1569
1573
|
|
|
1570
|
-
/* css/palette/warning.css */
|
|
1574
|
+
/* css/legacy/palette/warning.css */
|
|
1571
1575
|
.salt-theme[data-mode=light] {
|
|
1572
1576
|
--salt-palette-warning-background: var(--salt-color-orange-10);
|
|
1573
1577
|
--salt-palette-warning-bold-background: var(--salt-color-orange-800);
|
|
@@ -1601,7 +1605,7 @@
|
|
|
1601
1605
|
--salt-palette-warning-action-foreground-disabled: var(--salt-color-gray-900-40a);
|
|
1602
1606
|
}
|
|
1603
1607
|
|
|
1604
|
-
/* css/characteristics/accent.css */
|
|
1608
|
+
/* css/legacy/characteristics/accent.css */
|
|
1605
1609
|
.salt-theme {
|
|
1606
1610
|
--salt-accent-background: var(--salt-palette-accent);
|
|
1607
1611
|
--salt-accent-background-disabled: var(--salt-palette-accent-disabled);
|
|
@@ -1610,7 +1614,7 @@
|
|
|
1610
1614
|
--salt-accent-foreground: var(--salt-palette-accent-foreground);
|
|
1611
1615
|
}
|
|
1612
1616
|
|
|
1613
|
-
/* css/characteristics/actionable.css */
|
|
1617
|
+
/* css/legacy/characteristics/actionable.css */
|
|
1614
1618
|
.salt-theme {
|
|
1615
1619
|
--salt-actionable-accented-bold-background-active: var(--salt-palette-interact-cta-background-active);
|
|
1616
1620
|
--salt-actionable-accented-bold-background-disabled: var(--salt-palette-interact-cta-background-disabled);
|
|
@@ -1794,7 +1798,7 @@
|
|
|
1794
1798
|
--salt-actionable-caution-subtle-foreground: var(--salt-palette-warning-foreground-informative);
|
|
1795
1799
|
}
|
|
1796
1800
|
|
|
1797
|
-
/* css/characteristics/category.css */
|
|
1801
|
+
/* css/legacy/characteristics/category.css */
|
|
1798
1802
|
.salt-theme {
|
|
1799
1803
|
--salt-category-1-subtle-foreground: var(--salt-palette-categorical-1-strong);
|
|
1800
1804
|
--salt-category-1-subtle-background: var(--salt-palette-categorical-1-weakest);
|
|
@@ -1898,7 +1902,7 @@
|
|
|
1898
1902
|
--salt-category-20-bold-background: var(--salt-palette-categorical-20);
|
|
1899
1903
|
}
|
|
1900
1904
|
|
|
1901
|
-
/* css/characteristics/container.css */
|
|
1905
|
+
/* css/legacy/characteristics/container.css */
|
|
1902
1906
|
.salt-theme {
|
|
1903
1907
|
--salt-container-primary-background: var(--salt-palette-neutral-primary-background);
|
|
1904
1908
|
--salt-container-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
|
|
@@ -1916,13 +1920,23 @@
|
|
|
1916
1920
|
--salt-container-ghost-borderColor: var(--salt-palette-alpha-contrast-medium);
|
|
1917
1921
|
}
|
|
1918
1922
|
|
|
1919
|
-
/* css/characteristics/
|
|
1923
|
+
/* css/legacy/characteristics/content.css */
|
|
1920
1924
|
.salt-theme {
|
|
1921
|
-
--salt-
|
|
1922
|
-
--salt-
|
|
1925
|
+
--salt-content-primary-foreground: var(--salt-palette-neutral-primary-foreground);
|
|
1926
|
+
--salt-content-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
|
|
1927
|
+
--salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
|
|
1928
|
+
--salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
|
|
1929
|
+
--salt-content-accent-foreground: var(--salt-palette-accent-foreground-informative);
|
|
1930
|
+
--salt-content-attention-foreground: var(--salt-palette-negative-foreground);
|
|
1931
|
+
--salt-content-bold-foreground: var(--salt-palette-interact-cta-foreground);
|
|
1932
|
+
--salt-content-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
|
|
1933
|
+
--salt-content-foreground-hover: var(--salt-palette-accent-foreground-informative);
|
|
1934
|
+
--salt-content-foreground-active: var(--salt-palette-accent-foreground-informative);
|
|
1935
|
+
--salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);
|
|
1936
|
+
--salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
|
|
1923
1937
|
}
|
|
1924
1938
|
|
|
1925
|
-
/* css/characteristics/editable.css */
|
|
1939
|
+
/* css/legacy/characteristics/editable.css */
|
|
1926
1940
|
.salt-theme {
|
|
1927
1941
|
--salt-editable-borderColor: var(--salt-palette-interact-border);
|
|
1928
1942
|
--salt-editable-borderColor-active: var(--salt-palette-interact-border-active);
|
|
@@ -1939,10 +1953,9 @@
|
|
|
1939
1953
|
--salt-editable-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
|
|
1940
1954
|
--salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);
|
|
1941
1955
|
--salt-editable-secondary-background-readonly: var(--salt-palette-alpha-none);
|
|
1942
|
-
--salt-editable-help-fontStyle: italic;
|
|
1943
1956
|
}
|
|
1944
1957
|
|
|
1945
|
-
/* css/characteristics/focused.css */
|
|
1958
|
+
/* css/legacy/characteristics/focused.css */
|
|
1946
1959
|
.salt-theme {
|
|
1947
1960
|
--salt-focused-outlineColor: var(--salt-palette-interact-outline);
|
|
1948
1961
|
--salt-focused-outlineStyle: var(--salt-borderStyle-dotted);
|
|
@@ -1951,19 +1964,8 @@
|
|
|
1951
1964
|
--salt-focused-outlineOffset: 0;
|
|
1952
1965
|
--salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
|
|
1953
1966
|
}
|
|
1954
|
-
.saltFocusVisible:after,
|
|
1955
|
-
.focused:focus:after,
|
|
1956
|
-
.focused:focus-visible:after {
|
|
1957
|
-
content: "";
|
|
1958
|
-
inset: var(--salt-focused-outlineInset);
|
|
1959
|
-
outline-color: var(--salt-focused-outlineColor);
|
|
1960
|
-
outline-offset: var(--salt-focused-outlineOffset);
|
|
1961
|
-
outline-style: var(--salt-focused-outlineStyle);
|
|
1962
|
-
outline-width: var(--salt-focused-outlineWidth);
|
|
1963
|
-
position: absolute;
|
|
1964
|
-
}
|
|
1965
1967
|
|
|
1966
|
-
/* css/characteristics/navigable.css */
|
|
1968
|
+
/* css/legacy/characteristics/navigable.css */
|
|
1967
1969
|
.salt-theme {
|
|
1968
1970
|
--salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
|
|
1969
1971
|
--salt-navigable-accent-indicator-active: var(--salt-palette-navigate-indicator-active);
|
|
@@ -1971,22 +1973,22 @@
|
|
|
1971
1973
|
--salt-navigable-accent-borderColor-active: var(--salt-palette-interact-border-active);
|
|
1972
1974
|
}
|
|
1973
1975
|
|
|
1974
|
-
/* css/characteristics/overlayable.css */
|
|
1976
|
+
/* css/legacy/characteristics/overlayable.css */
|
|
1975
1977
|
.salt-theme {
|
|
1976
|
-
--salt-overlayable-shadow-scroll: var(--salt-shadow-
|
|
1977
|
-
--salt-overlayable-shadow-region: var(--salt-shadow-
|
|
1978
|
-
--salt-overlayable-shadow: var(--salt-shadow-
|
|
1979
|
-
--salt-overlayable-shadow-hover: var(--salt-shadow-
|
|
1980
|
-
--salt-overlayable-shadow-popout: var(--salt-shadow-
|
|
1981
|
-
--salt-overlayable-shadow-drag: var(--salt-shadow-
|
|
1982
|
-
--salt-overlayable-shadow-modal: var(--salt-shadow-
|
|
1978
|
+
--salt-overlayable-shadow-scroll: var(--salt-shadow-lowest);
|
|
1979
|
+
--salt-overlayable-shadow-region: var(--salt-shadow-lower);
|
|
1980
|
+
--salt-overlayable-shadow: var(--salt-shadow-lower);
|
|
1981
|
+
--salt-overlayable-shadow-hover: var(--salt-shadow-low);
|
|
1982
|
+
--salt-overlayable-shadow-popout: var(--salt-shadow-mediumLow);
|
|
1983
|
+
--salt-overlayable-shadow-drag: var(--salt-shadow-mediumLow);
|
|
1984
|
+
--salt-overlayable-shadow-modal: var(--salt-shadow-medium);
|
|
1983
1985
|
--salt-overlayable-background: var(--salt-palette-alpha-higher);
|
|
1984
1986
|
--salt-overlayable-background-hover: var(--salt-palette-alpha-contrast-lowest);
|
|
1985
1987
|
--salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-medium);
|
|
1986
1988
|
--salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-mediumLow);
|
|
1987
1989
|
}
|
|
1988
1990
|
|
|
1989
|
-
/* css/characteristics/selectable.css */
|
|
1991
|
+
/* css/legacy/characteristics/selectable.css */
|
|
1990
1992
|
.salt-theme {
|
|
1991
1993
|
--salt-selectable-borderColor: var(--salt-palette-interact-border);
|
|
1992
1994
|
--salt-selectable-borderColor-hover: var(--salt-palette-interact-border-hover);
|
|
@@ -2006,7 +2008,7 @@
|
|
|
2006
2008
|
--salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
|
|
2007
2009
|
}
|
|
2008
2010
|
|
|
2009
|
-
/* css/characteristics/sentiment.css */
|
|
2011
|
+
/* css/legacy/characteristics/sentiment.css */
|
|
2010
2012
|
.salt-theme {
|
|
2011
2013
|
--salt-sentiment-negative-foreground-informative: var(--salt-palette-negative-foreground);
|
|
2012
2014
|
--salt-sentiment-positive-foreground-informative: var(--salt-palette-positive-foreground);
|
|
@@ -2016,7 +2018,7 @@
|
|
|
2016
2018
|
--salt-sentiment-neutral-track-disabled: var(--salt-palette-neutral-border-disabled);
|
|
2017
2019
|
}
|
|
2018
2020
|
|
|
2019
|
-
/* css/characteristics/separable.css */
|
|
2021
|
+
/* css/legacy/characteristics/separable.css */
|
|
2020
2022
|
.salt-theme {
|
|
2021
2023
|
--salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumHigh);
|
|
2022
2024
|
--salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-medium);
|
|
@@ -2029,7 +2031,7 @@
|
|
|
2029
2031
|
--salt-separable-background-active: var(--salt-palette-accent);
|
|
2030
2032
|
}
|
|
2031
2033
|
|
|
2032
|
-
/* css/characteristics/status.css */
|
|
2034
|
+
/* css/legacy/characteristics/status.css */
|
|
2033
2035
|
.salt-theme {
|
|
2034
2036
|
--salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
|
|
2035
2037
|
--salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
|
|
@@ -2056,7 +2058,13 @@
|
|
|
2056
2058
|
--salt-status-success-background-selected: var(--salt-palette-success-background-selected);
|
|
2057
2059
|
}
|
|
2058
2060
|
|
|
2059
|
-
/* css/characteristics/
|
|
2061
|
+
/* css/legacy/characteristics/target.css */
|
|
2062
|
+
.salt-theme {
|
|
2063
|
+
--salt-target-background-hover: var(--salt-palette-interact-background-hover);
|
|
2064
|
+
--salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);
|
|
2065
|
+
}
|
|
2066
|
+
|
|
2067
|
+
/* css/legacy/characteristics/text.css */
|
|
2060
2068
|
.salt-theme {
|
|
2061
2069
|
--salt-text-letterSpacing: 0;
|
|
2062
2070
|
--salt-text-textAlign: left;
|
|
@@ -2190,77 +2198,263 @@
|
|
|
2190
2198
|
--salt-text-notation-lineHeight: 13px;
|
|
2191
2199
|
}
|
|
2192
2200
|
.salt-density-high {
|
|
2193
|
-
--salt-text-h1-fontSize: 18px;
|
|
2194
|
-
--salt-text-h1-lineHeight: 24px;
|
|
2195
|
-
--salt-text-h2-fontSize: 14px;
|
|
2196
|
-
--salt-text-h2-lineHeight: 18px;
|
|
2197
|
-
--salt-text-h3-fontSize: 12px;
|
|
2198
|
-
--salt-text-h3-lineHeight: 16px;
|
|
2199
|
-
--salt-text-h4-fontSize: 11px;
|
|
2200
|
-
--salt-text-h4-lineHeight: 14px;
|
|
2201
|
-
--salt-text-label-fontSize: 10px;
|
|
2202
|
-
--salt-text-label-lineHeight: 13px;
|
|
2203
|
-
--salt-text-fontSize: 11px;
|
|
2204
|
-
--salt-text-lineHeight: 14px;
|
|
2205
|
-
--salt-text-minHeight: 14px;
|
|
2206
|
-
--salt-text-display1-fontSize: 42px;
|
|
2207
|
-
--salt-text-display1-lineHeight: 54px;
|
|
2208
|
-
--salt-text-display2-fontSize: 28px;
|
|
2209
|
-
--salt-text-display2-lineHeight: 36px;
|
|
2210
|
-
--salt-text-display3-fontSize: 18px;
|
|
2211
|
-
--salt-text-display3-lineHeight: 24px;
|
|
2212
|
-
--salt-text-display4-fontSize: 18px;
|
|
2213
|
-
--salt-text-display4-lineHeight: 24px;
|
|
2214
|
-
--salt-text-notation-fontSize: 8px;
|
|
2215
|
-
--salt-text-notation-lineHeight: 10px;
|
|
2201
|
+
--salt-text-h1-fontSize: 18px;
|
|
2202
|
+
--salt-text-h1-lineHeight: 24px;
|
|
2203
|
+
--salt-text-h2-fontSize: 14px;
|
|
2204
|
+
--salt-text-h2-lineHeight: 18px;
|
|
2205
|
+
--salt-text-h3-fontSize: 12px;
|
|
2206
|
+
--salt-text-h3-lineHeight: 16px;
|
|
2207
|
+
--salt-text-h4-fontSize: 11px;
|
|
2208
|
+
--salt-text-h4-lineHeight: 14px;
|
|
2209
|
+
--salt-text-label-fontSize: 10px;
|
|
2210
|
+
--salt-text-label-lineHeight: 13px;
|
|
2211
|
+
--salt-text-fontSize: 11px;
|
|
2212
|
+
--salt-text-lineHeight: 14px;
|
|
2213
|
+
--salt-text-minHeight: 14px;
|
|
2214
|
+
--salt-text-display1-fontSize: 42px;
|
|
2215
|
+
--salt-text-display1-lineHeight: 54px;
|
|
2216
|
+
--salt-text-display2-fontSize: 28px;
|
|
2217
|
+
--salt-text-display2-lineHeight: 36px;
|
|
2218
|
+
--salt-text-display3-fontSize: 18px;
|
|
2219
|
+
--salt-text-display3-lineHeight: 24px;
|
|
2220
|
+
--salt-text-display4-fontSize: 18px;
|
|
2221
|
+
--salt-text-display4-lineHeight: 24px;
|
|
2222
|
+
--salt-text-notation-fontSize: 8px;
|
|
2223
|
+
--salt-text-notation-lineHeight: 10px;
|
|
2224
|
+
}
|
|
2225
|
+
|
|
2226
|
+
/* css/deprecated/foundations.css */
|
|
2227
|
+
.salt-theme {
|
|
2228
|
+
--salt-delay-instant: 100ms;
|
|
2229
|
+
--salt-delay-perceptible: 300ms;
|
|
2230
|
+
--salt-delay-notable: 1000ms;
|
|
2231
|
+
--salt-delay-cutoff: 10000ms;
|
|
2232
|
+
--salt-size-icon-base: var(--salt-icon-size-base);
|
|
2233
|
+
--salt-opacity-1: 0.15;
|
|
2234
|
+
--salt-opacity-2: 0.25;
|
|
2235
|
+
--salt-opacity-3: 0.4;
|
|
2236
|
+
--salt-opacity-4: 0.7;
|
|
2237
|
+
--salt-opacity-8: 0.08;
|
|
2238
|
+
--salt-opacity-0: 0;
|
|
2239
|
+
--salt-opacity-15: 0.15;
|
|
2240
|
+
--salt-opacity-25: 0.25;
|
|
2241
|
+
--salt-opacity-40: 0.4;
|
|
2242
|
+
--salt-opacity-45: 0.45;
|
|
2243
|
+
--salt-opacity-70: 0.7;
|
|
2244
|
+
--salt-shadow-0: none;
|
|
2245
|
+
--salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color);
|
|
2246
|
+
--salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
|
|
2247
|
+
--salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
|
|
2248
|
+
--salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
|
|
2249
|
+
--salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
|
|
2250
|
+
--salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color);
|
|
2251
|
+
--salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color);
|
|
2252
|
+
--salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color);
|
|
2253
|
+
--salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color);
|
|
2254
|
+
--salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color);
|
|
2255
|
+
--salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
|
|
2256
|
+
--salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
|
|
2257
|
+
--salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
|
|
2258
|
+
--salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
|
|
2259
|
+
--salt-color-black-60a: rgba(var(--salt-color-black-rgb), 0.6);
|
|
2260
|
+
--salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
|
|
2261
|
+
--salt-color-black-90a: rgba(var(--salt-color-black-rgb), 0.9);
|
|
2262
|
+
--salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
|
|
2263
|
+
--salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
|
|
2264
|
+
--salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
|
|
2265
|
+
--salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
|
|
2266
|
+
--salt-color-white-90a: rgba(var(--salt-color-white-rgb), 0.9);
|
|
2267
|
+
}
|
|
2268
|
+
.salt-theme[data-mode=light] {
|
|
2269
|
+
--salt-shadow-1-color: rgba(0, 0, 0, 0.1);
|
|
2270
|
+
--salt-shadow-2-color: rgba(0, 0, 0, 0.1);
|
|
2271
|
+
--salt-shadow-3-color: rgba(0, 0, 0, 0.15);
|
|
2272
|
+
--salt-shadow-4-color: rgba(0, 0, 0, 0.2);
|
|
2273
|
+
--salt-shadow-5-color: rgba(0, 0, 0, 0.3);
|
|
2274
|
+
--salt-shadow-100-color: rgba(0, 0, 0, 0.1);
|
|
2275
|
+
--salt-shadow-200-color: rgba(0, 0, 0, 0.1);
|
|
2276
|
+
--salt-shadow-300-color: rgba(0, 0, 0, 0.15);
|
|
2277
|
+
--salt-shadow-400-color: rgba(0, 0, 0, 0.2);
|
|
2278
|
+
--salt-shadow-500-color: rgba(0, 0, 0, 0.3);
|
|
2279
|
+
}
|
|
2280
|
+
.salt-theme[data-mode=dark] {
|
|
2281
|
+
--salt-shadow-1-color: rgba(0, 0, 0, 0.5);
|
|
2282
|
+
--salt-shadow-2-color: rgba(0, 0, 0, 0.5);
|
|
2283
|
+
--salt-shadow-3-color: rgba(0, 0, 0, 0.55);
|
|
2284
|
+
--salt-shadow-4-color: rgba(0, 0, 0, 0.55);
|
|
2285
|
+
--salt-shadow-5-color: rgba(0, 0, 0, 0.65);
|
|
2286
|
+
--salt-shadow-100-color: rgba(0, 0, 0, 0.5);
|
|
2287
|
+
--salt-shadow-200-color: rgba(0, 0, 0, 0.5);
|
|
2288
|
+
--salt-shadow-300-color: rgba(0, 0, 0, 0.55);
|
|
2289
|
+
--salt-shadow-400-color: rgba(0, 0, 0, 0.55);
|
|
2290
|
+
--salt-shadow-500-color: rgba(0, 0, 0, 0.65);
|
|
2291
|
+
}
|
|
2292
|
+
.salt-density-touch,
|
|
2293
|
+
.salt-density-low,
|
|
2294
|
+
.salt-density-medium,
|
|
2295
|
+
.salt-density-high {
|
|
2296
|
+
--salt-size-selection: var(--salt-size-selectable);
|
|
2297
|
+
--salt-size-brandBar: 4px;
|
|
2298
|
+
--salt-size-graphic-small: 12px;
|
|
2299
|
+
--salt-size-graphic-medium: 24px;
|
|
2300
|
+
--salt-size-graphic-large: 48px;
|
|
2301
|
+
--salt-size-divider-height: var(--salt-size-separator-height);
|
|
2302
|
+
--salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
|
|
2303
|
+
--salt-size-detail: var(--salt-size-compact);
|
|
2304
|
+
--salt-size-basis-unit: 4px;
|
|
2305
|
+
--salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
|
|
2306
|
+
--salt-size-container-spacing: calc(3 * var(--salt-size-unit));
|
|
2307
|
+
--salt-size-separator-strokeWidth: 1px;
|
|
2308
|
+
--salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
|
|
2309
|
+
--salt-size-sharktooth-height: 5px;
|
|
2310
|
+
--salt-size-sharktooth-width: 10px;
|
|
2311
|
+
--salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
|
|
2312
|
+
--salt-size-border: 1px;
|
|
2313
|
+
--salt-size-bar-small: 2px;
|
|
2314
|
+
--salt-size-border-strong: 2px;
|
|
2315
|
+
--salt-zIndex-docked: 1050;
|
|
2316
|
+
}
|
|
2317
|
+
.salt-density-high {
|
|
2318
|
+
--salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
|
|
2319
|
+
--salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
|
|
2320
|
+
--salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
|
|
2321
|
+
--salt-icon-size-base: 10px;
|
|
2322
|
+
--salt-icon-size-status-adornment: 6px;
|
|
2323
|
+
}
|
|
2324
|
+
.salt-density-medium {
|
|
2325
|
+
--salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
|
|
2326
|
+
--salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
|
|
2327
|
+
--salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
|
|
2328
|
+
--salt-icon-size-base: 12px;
|
|
2329
|
+
--salt-icon-size-status-adornment: 8px;
|
|
2330
|
+
}
|
|
2331
|
+
.salt-density-low {
|
|
2332
|
+
--salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
|
|
2333
|
+
--salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
|
|
2334
|
+
--salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
|
|
2335
|
+
--salt-icon-size-base: 14px;
|
|
2336
|
+
--salt-icon-size-status-adornment: 10px;
|
|
2337
|
+
}
|
|
2338
|
+
.salt-density-touch {
|
|
2339
|
+
--salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
|
|
2340
|
+
--salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
|
|
2341
|
+
--salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
|
|
2342
|
+
--salt-icon-size-base: 16px;
|
|
2343
|
+
--salt-icon-size-status-adornment: 12px;
|
|
2344
|
+
}
|
|
2345
|
+
|
|
2346
|
+
/* css/deprecated/characteristics.css */
|
|
2347
|
+
.salt-theme {
|
|
2348
|
+
--salt-container-borderStyle: solid;
|
|
2349
|
+
--salt-editable-borderStyle: solid;
|
|
2350
|
+
--salt-editable-borderStyle-hover: solid;
|
|
2351
|
+
--salt-editable-borderStyle-active: solid;
|
|
2352
|
+
--salt-editable-borderStyle-disabled: solid;
|
|
2353
|
+
--salt-editable-borderStyle-readonly: solid;
|
|
2354
|
+
--salt-editable-cursor-hover: text;
|
|
2355
|
+
--salt-editable-cursor-active: text;
|
|
2356
|
+
--salt-editable-cursor-disabled: not-allowed;
|
|
2357
|
+
--salt-editable-cursor-readonly: text;
|
|
2358
|
+
--salt-editable-borderWidth-active: 2px;
|
|
2359
|
+
--salt-editable-help-fontStyle: italic;
|
|
2360
|
+
--salt-measured-borderStyle: solid;
|
|
2361
|
+
--salt-measured-borderStyle-active: solid;
|
|
2362
|
+
--salt-measured-borderStyle-complete: solid;
|
|
2363
|
+
--salt-measured-borderStyle-incomplete: dotted;
|
|
2364
|
+
--salt-measured-borderWidth: 2px;
|
|
2365
|
+
--salt-measured-borderWidth-active: 2px;
|
|
2366
|
+
--salt-measured-borderWidth-complete: 2px;
|
|
2367
|
+
--salt-measured-borderWidth-incomplete: 2px;
|
|
2368
|
+
--salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
2369
|
+
--salt-measured-textAlign: center;
|
|
2370
|
+
--salt-selectable-borderStyle: solid;
|
|
2371
|
+
--salt-selectable-borderStyle-hover: solid;
|
|
2372
|
+
--salt-selectable-borderStyle-selected: solid;
|
|
2373
|
+
--salt-selectable-borderStyle-blurSelected: solid;
|
|
2374
|
+
--salt-selectable-cursor-hover: pointer;
|
|
2375
|
+
--salt-selectable-cursor-selected: pointer;
|
|
2376
|
+
--salt-selectable-cursor-blurSelected: pointer;
|
|
2377
|
+
--salt-selectable-cursor-disabled: not-allowed;
|
|
2378
|
+
--salt-selectable-cursor-readonly: not-allowed;
|
|
2379
|
+
--salt-separable-borderStyle: solid;
|
|
2380
|
+
--salt-draggable-horizontal-cursor-hover: row-resize;
|
|
2381
|
+
--salt-draggable-horizontal-cursor-active: row-resize;
|
|
2382
|
+
--salt-draggable-vertical-cursor-hover: col-resize;
|
|
2383
|
+
--salt-draggable-vertical-cursor-active: col-resize;
|
|
2384
|
+
--salt-draggable-grab-cursor-hover: grab;
|
|
2385
|
+
--salt-draggable-grab-cursor-active: grabbing;
|
|
2386
|
+
--salt-actionable-cursor-hover: pointer;
|
|
2387
|
+
--salt-actionable-cursor-active: pointer;
|
|
2388
|
+
--salt-actionable-cursor-disabled: not-allowed;
|
|
2389
|
+
--salt-actionable-letterSpacing: 0.6px;
|
|
2390
|
+
--salt-actionable-textTransform: uppercase;
|
|
2391
|
+
--salt-actionable-textAlign: center;
|
|
2392
|
+
--salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
|
|
2393
|
+
--salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
|
|
2394
|
+
--salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
2395
|
+
--salt-target-cursor-disabled: not-allowed;
|
|
2396
|
+
--salt-target-borderStyle: dashed;
|
|
2397
|
+
--salt-target-borderStyle-hover: solid;
|
|
2398
|
+
--salt-target-borderStyle-disabled: dashed;
|
|
2399
|
+
--salt-text-link-textDecoration: underline;
|
|
2400
|
+
--salt-text-link-textDecoration-hover: none;
|
|
2401
|
+
--salt-text-link-textDecoration-selected: underline;
|
|
2402
|
+
--salt-text-textDecoration: var(--salt-typography-textDecoration-none);
|
|
2403
|
+
--salt-text-textTransform: none;
|
|
2404
|
+
--salt-navigable-cursor-active: pointer;
|
|
2405
|
+
--salt-navigable-cursor-hover: pointer;
|
|
2406
|
+
--salt-navigable-cursor-disabled: not-allowed;
|
|
2407
|
+
--salt-navigable-cursor-edit: text;
|
|
2408
|
+
--salt-navigable-textDecoration: var(--salt-typography-textDecoration-underline);
|
|
2409
|
+
--salt-navigable-textDecoration-hover: var(--salt-typography-textDecoration-none);
|
|
2410
|
+
--salt-navigable-textDecoration-selected: var(--salt-typography-textDecoration-underline);
|
|
2411
|
+
--salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
|
|
2412
|
+
--salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
|
|
2413
|
+
--salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
|
|
2414
|
+
--salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
|
|
2415
|
+
--salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
2416
|
+
--salt-track-borderStyle: solid;
|
|
2417
|
+
--salt-track-borderStyle-active: solid;
|
|
2418
|
+
--salt-track-borderStyle-complete: solid;
|
|
2419
|
+
--salt-track-borderStyle-incomplete: dotted;
|
|
2420
|
+
--salt-track-borderWidth: 2px;
|
|
2421
|
+
--salt-track-borderWidth-active: 2px;
|
|
2422
|
+
--salt-track-borderWidth-complete: 2px;
|
|
2423
|
+
--salt-track-borderWidth-incomplete: 2px;
|
|
2424
|
+
--salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
2425
|
+
--salt-track-textAlign: center;
|
|
2426
|
+
--salt-taggable-cursor-hover: pointer;
|
|
2427
|
+
--salt-taggable-cursor-active: pointer;
|
|
2428
|
+
--salt-taggable-cursor-disabled: not-allowed;
|
|
2429
|
+
--salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
|
|
2430
|
+
--salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
|
|
2431
|
+
}
|
|
2432
|
+
.salt-density-high {
|
|
2433
|
+
--salt-accent-fontSize: 8px;
|
|
2434
|
+
--salt-accent-lineHeight: 11px;
|
|
2216
2435
|
}
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
--salt-
|
|
2223
|
-
--salt-
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
--salt-
|
|
2227
|
-
--salt-
|
|
2228
|
-
--salt-content-foreground-hover: var(--salt-palette-accent-foreground-informative);
|
|
2229
|
-
--salt-content-foreground-active: var(--salt-palette-accent-foreground-informative);
|
|
2230
|
-
--salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);
|
|
2231
|
-
--salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
|
|
2436
|
+
.salt-density-medium {
|
|
2437
|
+
--salt-accent-fontSize: 10px;
|
|
2438
|
+
--salt-accent-lineHeight: 13px;
|
|
2439
|
+
}
|
|
2440
|
+
.salt-density-low {
|
|
2441
|
+
--salt-accent-fontSize: 12px;
|
|
2442
|
+
--salt-accent-lineHeight: 16px;
|
|
2443
|
+
}
|
|
2444
|
+
.salt-density-touch {
|
|
2445
|
+
--salt-accent-fontSize: 14px;
|
|
2446
|
+
--salt-accent-lineHeight: 18px;
|
|
2232
2447
|
}
|
|
2233
2448
|
|
|
2234
|
-
/* css/deprecated/characteristics.css */
|
|
2449
|
+
/* css/legacy/deprecated/characteristics.css */
|
|
2235
2450
|
.salt-theme {
|
|
2236
|
-
--salt-container-borderStyle: solid;
|
|
2237
2451
|
--salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
|
|
2238
2452
|
--salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
|
|
2239
|
-
--salt-editable-borderStyle: solid;
|
|
2240
|
-
--salt-editable-borderStyle-hover: solid;
|
|
2241
|
-
--salt-editable-borderStyle-active: solid;
|
|
2242
|
-
--salt-editable-borderStyle-disabled: solid;
|
|
2243
|
-
--salt-editable-borderStyle-readonly: solid;
|
|
2244
|
-
--salt-editable-cursor-hover: text;
|
|
2245
|
-
--salt-editable-cursor-active: text;
|
|
2246
|
-
--salt-editable-cursor-disabled: not-allowed;
|
|
2247
|
-
--salt-editable-cursor-readonly: text;
|
|
2248
2453
|
--salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
|
|
2249
2454
|
--salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
|
|
2250
2455
|
--salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
|
|
2251
2456
|
--salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
|
|
2252
2457
|
--salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
|
|
2253
|
-
--salt-editable-borderWidth-active: 2px;
|
|
2254
|
-
--salt-measured-borderStyle: solid;
|
|
2255
|
-
--salt-measured-borderStyle-active: solid;
|
|
2256
|
-
--salt-measured-borderStyle-complete: solid;
|
|
2257
|
-
--salt-measured-borderStyle-incomplete: dotted;
|
|
2258
|
-
--salt-measured-borderWidth: 2px;
|
|
2259
|
-
--salt-measured-borderWidth-active: 2px;
|
|
2260
|
-
--salt-measured-borderWidth-complete: 2px;
|
|
2261
|
-
--salt-measured-borderWidth-incomplete: 2px;
|
|
2262
|
-
--salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
2263
|
-
--salt-measured-textAlign: center;
|
|
2264
2458
|
--salt-measured-background: var(--salt-palette-measured-background);
|
|
2265
2459
|
--salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
|
|
2266
2460
|
--salt-measured-borderColor: var(--salt-palette-measured-border);
|
|
@@ -2273,18 +2467,7 @@
|
|
|
2273
2467
|
--salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
|
|
2274
2468
|
--salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
|
|
2275
2469
|
--salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);
|
|
2276
|
-
--salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
|
|
2277
|
-
--salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
|
|
2278
2470
|
--salt-overlayable-rangeSelection: var(--salt-overlayable-background-rangeSelection);
|
|
2279
|
-
--salt-selectable-borderStyle: solid;
|
|
2280
|
-
--salt-selectable-borderStyle-hover: solid;
|
|
2281
|
-
--salt-selectable-borderStyle-selected: solid;
|
|
2282
|
-
--salt-selectable-borderStyle-blurSelected: solid;
|
|
2283
|
-
--salt-selectable-cursor-hover: pointer;
|
|
2284
|
-
--salt-selectable-cursor-selected: pointer;
|
|
2285
|
-
--salt-selectable-cursor-blurSelected: pointer;
|
|
2286
|
-
--salt-selectable-cursor-disabled: not-allowed;
|
|
2287
|
-
--salt-selectable-cursor-readonly: not-allowed;
|
|
2288
2471
|
--salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
|
|
2289
2472
|
--salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
|
|
2290
2473
|
--salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
|
|
@@ -2318,7 +2501,6 @@
|
|
|
2318
2501
|
--salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
|
|
2319
2502
|
--salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
|
|
2320
2503
|
--salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
|
|
2321
|
-
--salt-separable-borderStyle: solid;
|
|
2322
2504
|
--salt-status-negative-foreground: var(--salt-palette-negative-foreground);
|
|
2323
2505
|
--salt-status-positive-foreground: var(--salt-palette-positive-foreground);
|
|
2324
2506
|
--salt-status-info-background-emphasize: var(--salt-status-info-background);
|
|
@@ -2341,42 +2523,14 @@
|
|
|
2341
2523
|
--salt-status-error-foreground: var(--salt-palette-error-foreground);
|
|
2342
2524
|
--salt-status-warning-foreground: var(--salt-palette-warning-foreground);
|
|
2343
2525
|
--salt-status-success-foreground: var(--salt-palette-success-foreground);
|
|
2344
|
-
--salt-draggable-horizontal-cursor-hover: row-resize;
|
|
2345
|
-
--salt-draggable-horizontal-cursor-active: row-resize;
|
|
2346
|
-
--salt-draggable-vertical-cursor-hover: col-resize;
|
|
2347
|
-
--salt-draggable-vertical-cursor-active: col-resize;
|
|
2348
|
-
--salt-draggable-grab-cursor-hover: grab;
|
|
2349
|
-
--salt-draggable-grab-cursor-active: grabbing;
|
|
2350
|
-
--salt-actionable-cursor-hover: pointer;
|
|
2351
|
-
--salt-actionable-cursor-active: pointer;
|
|
2352
|
-
--salt-actionable-cursor-disabled: not-allowed;
|
|
2353
|
-
--salt-actionable-letterSpacing: 0.6px;
|
|
2354
|
-
--salt-actionable-textTransform: uppercase;
|
|
2355
|
-
--salt-actionable-textAlign: center;
|
|
2356
|
-
--salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
|
|
2357
|
-
--salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
|
|
2358
|
-
--salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
2359
|
-
--salt-target-cursor-disabled: not-allowed;
|
|
2360
|
-
--salt-target-borderStyle: dashed;
|
|
2361
|
-
--salt-target-borderStyle-hover: solid;
|
|
2362
|
-
--salt-target-borderStyle-disabled: dashed;
|
|
2363
2526
|
--salt-text-background-selected: var(--salt-content-foreground-highlight);
|
|
2364
2527
|
--salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover);
|
|
2365
2528
|
--salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active);
|
|
2366
2529
|
--salt-text-link-foreground-visited: var(--salt-palette-navigate-foreground-visited);
|
|
2367
|
-
--salt-text-link-textDecoration: underline;
|
|
2368
|
-
--salt-text-link-textDecoration-hover: none;
|
|
2369
|
-
--salt-text-link-textDecoration-selected: underline;
|
|
2370
2530
|
--salt-text-primary-foreground: var(--salt-palette-neutral-primary-foreground);
|
|
2371
2531
|
--salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
|
|
2372
2532
|
--salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
|
|
2373
2533
|
--salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
|
|
2374
|
-
--salt-text-textDecoration: var(--salt-typography-textDecoration-none);
|
|
2375
|
-
--salt-text-textTransform: none;
|
|
2376
|
-
--salt-navigable-cursor-active: pointer;
|
|
2377
|
-
--salt-navigable-cursor-hover: pointer;
|
|
2378
|
-
--salt-navigable-cursor-disabled: not-allowed;
|
|
2379
|
-
--salt-navigable-cursor-edit: text;
|
|
2380
2534
|
--salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);
|
|
2381
2535
|
--salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);
|
|
2382
2536
|
--salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);
|
|
@@ -2388,33 +2542,12 @@
|
|
|
2388
2542
|
--salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
|
|
2389
2543
|
--salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
|
|
2390
2544
|
--salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
|
|
2391
|
-
--salt-navigable-textDecoration: var(--salt-typography-textDecoration-underline);
|
|
2392
|
-
--salt-navigable-textDecoration-hover: var(--salt-typography-textDecoration-none);
|
|
2393
|
-
--salt-navigable-textDecoration-selected: var(--salt-typography-textDecoration-underline);
|
|
2394
|
-
--salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
|
|
2395
|
-
--salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
|
|
2396
|
-
--salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
|
|
2397
|
-
--salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
|
|
2398
2545
|
--salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
|
|
2399
|
-
--salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
2400
2546
|
--salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
|
|
2401
|
-
--salt-track-borderStyle: solid;
|
|
2402
|
-
--salt-track-borderStyle-active: solid;
|
|
2403
|
-
--salt-track-borderStyle-complete: solid;
|
|
2404
|
-
--salt-track-borderStyle-incomplete: dotted;
|
|
2405
|
-
--salt-track-borderWidth: 2px;
|
|
2406
|
-
--salt-track-borderWidth-active: 2px;
|
|
2407
|
-
--salt-track-borderWidth-complete: 2px;
|
|
2408
|
-
--salt-track-borderWidth-incomplete: 2px;
|
|
2409
|
-
--salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
2410
|
-
--salt-track-textAlign: center;
|
|
2411
2547
|
--salt-track-background: var(--salt-palette-track-background);
|
|
2412
2548
|
--salt-track-background-disabled: var(--salt-palette-track-background-disabled);
|
|
2413
2549
|
--salt-track-borderColor: var(--salt-palette-neutral-border);
|
|
2414
2550
|
--salt-track-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
|
|
2415
|
-
--salt-taggable-cursor-hover: pointer;
|
|
2416
|
-
--salt-taggable-cursor-active: pointer;
|
|
2417
|
-
--salt-taggable-cursor-disabled: not-allowed;
|
|
2418
2551
|
--salt-taggable-background: var(--salt-palette-interact-primary-background);
|
|
2419
2552
|
--salt-taggable-background-hover: var(--salt-palette-interact-primary-background-hover);
|
|
2420
2553
|
--salt-taggable-background-active: var(--salt-palette-interact-primary-background-active);
|
|
@@ -2460,24 +2593,8 @@
|
|
|
2460
2593
|
--salt-actionable-secondary-foreground-hover: var(--salt-actionable-subtle-foreground-hover);
|
|
2461
2594
|
--salt-actionable-secondary-foreground: var(--salt-actionable-subtle-foreground);
|
|
2462
2595
|
}
|
|
2463
|
-
.salt-density-high {
|
|
2464
|
-
--salt-accent-fontSize: 8px;
|
|
2465
|
-
--salt-accent-lineHeight: 11px;
|
|
2466
|
-
}
|
|
2467
|
-
.salt-density-medium {
|
|
2468
|
-
--salt-accent-fontSize: 10px;
|
|
2469
|
-
--salt-accent-lineHeight: 13px;
|
|
2470
|
-
}
|
|
2471
|
-
.salt-density-low {
|
|
2472
|
-
--salt-accent-fontSize: 12px;
|
|
2473
|
-
--salt-accent-lineHeight: 16px;
|
|
2474
|
-
}
|
|
2475
|
-
.salt-density-touch {
|
|
2476
|
-
--salt-accent-fontSize: 14px;
|
|
2477
|
-
--salt-accent-lineHeight: 18px;
|
|
2478
|
-
}
|
|
2479
2596
|
|
|
2480
|
-
/* css/deprecated/fade.css */
|
|
2597
|
+
/* css/legacy/deprecated/fade.css */
|
|
2481
2598
|
.salt-theme {
|
|
2482
2599
|
--salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
|
|
2483
2600
|
--salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
|
|
@@ -2559,114 +2676,9 @@
|
|
|
2559
2676
|
--salt-color-black-fade-background-highlight: rgba(0, 0, 0, var(--salt-opacity-25));
|
|
2560
2677
|
--salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15));
|
|
2561
2678
|
--salt-color-white-fade-background-highlight: rgba(255, 255, 255, var(--salt-opacity-25));
|
|
2562
|
-
--salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
|
|
2563
|
-
--salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
|
|
2564
|
-
--salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
|
|
2565
|
-
--salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
|
|
2566
|
-
}
|
|
2567
|
-
|
|
2568
|
-
/* css/deprecated/foundations.css */
|
|
2569
|
-
.salt-theme {
|
|
2570
|
-
--salt-delay-instant: 100ms;
|
|
2571
|
-
--salt-delay-perceptible: 300ms;
|
|
2572
|
-
--salt-delay-notable: 1000ms;
|
|
2573
|
-
--salt-delay-cutoff: 10000ms;
|
|
2574
|
-
--salt-size-icon-base: var(--salt-icon-size-base);
|
|
2575
|
-
--salt-opacity-1: 0.15;
|
|
2576
|
-
--salt-opacity-2: 0.25;
|
|
2577
|
-
--salt-opacity-3: 0.4;
|
|
2578
|
-
--salt-opacity-4: 0.7;
|
|
2579
|
-
--salt-opacity-8: 0.08;
|
|
2580
|
-
--salt-opacity-0: 0;
|
|
2581
|
-
--salt-opacity-15: 0.15;
|
|
2582
|
-
--salt-opacity-25: 0.25;
|
|
2583
|
-
--salt-opacity-40: 0.4;
|
|
2584
|
-
--salt-opacity-45: 0.45;
|
|
2585
|
-
--salt-opacity-70: 0.7;
|
|
2586
|
-
--salt-shadow-0: none;
|
|
2587
|
-
--salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color);
|
|
2588
|
-
--salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
|
|
2589
|
-
--salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
|
|
2590
|
-
--salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
|
|
2591
|
-
--salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
|
|
2592
|
-
--salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
|
|
2593
|
-
--salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
|
|
2594
|
-
--salt-color-black-60a: rgba(var(--salt-color-black-rgb), 0.6);
|
|
2595
|
-
--salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
|
|
2596
|
-
--salt-color-black-90a: rgba(var(--salt-color-black-rgb), 0.9);
|
|
2597
|
-
--salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
|
|
2598
|
-
--salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
|
|
2599
|
-
--salt-color-white-90a: rgba(var(--salt-color-white-rgb), 0.9);
|
|
2600
|
-
}
|
|
2601
|
-
.salt-theme[data-mode=light] {
|
|
2602
|
-
--salt-shadow-1-color: rgba(0, 0, 0, 0.1);
|
|
2603
|
-
--salt-shadow-2-color: rgba(0, 0, 0, 0.1);
|
|
2604
|
-
--salt-shadow-3-color: rgba(0, 0, 0, 0.15);
|
|
2605
|
-
--salt-shadow-4-color: rgba(0, 0, 0, 0.2);
|
|
2606
|
-
--salt-shadow-5-color: rgba(0, 0, 0, 0.3);
|
|
2607
|
-
}
|
|
2608
|
-
.salt-theme[data-mode=dark] {
|
|
2609
|
-
--salt-shadow-1-color: rgba(0, 0, 0, 0.5);
|
|
2610
|
-
--salt-shadow-2-color: rgba(0, 0, 0, 0.5);
|
|
2611
|
-
--salt-shadow-3-color: rgba(0, 0, 0, 0.55);
|
|
2612
|
-
--salt-shadow-4-color: rgba(0, 0, 0, 0.55);
|
|
2613
|
-
--salt-shadow-5-color: rgba(0, 0, 0, 0.65);
|
|
2614
|
-
}
|
|
2615
|
-
.salt-density-touch,
|
|
2616
|
-
.salt-density-low,
|
|
2617
|
-
.salt-density-medium,
|
|
2618
|
-
.salt-density-high {
|
|
2619
|
-
--salt-size-selection: var(--salt-size-selectable);
|
|
2620
|
-
--salt-size-brandBar: 4px;
|
|
2621
|
-
--salt-size-graphic-small: 12px;
|
|
2622
|
-
--salt-size-graphic-medium: 24px;
|
|
2623
|
-
--salt-size-graphic-large: 48px;
|
|
2624
|
-
--salt-size-divider-height: var(--salt-size-separator-height);
|
|
2625
|
-
--salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
|
|
2626
|
-
--salt-size-detail: var(--salt-size-compact);
|
|
2627
|
-
--salt-size-basis-unit: 4px;
|
|
2628
|
-
--salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
|
|
2629
|
-
--salt-size-container-spacing: calc(3 * var(--salt-size-unit));
|
|
2630
|
-
--salt-size-separator-strokeWidth: 1px;
|
|
2631
|
-
--salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
|
|
2632
|
-
--salt-size-sharktooth-height: 5px;
|
|
2633
|
-
--salt-size-sharktooth-width: 10px;
|
|
2634
|
-
--salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
|
|
2635
|
-
--salt-size-border: 1px;
|
|
2636
|
-
--salt-size-bar-small: 2px;
|
|
2637
|
-
--salt-size-border-strong: 2px;
|
|
2638
|
-
--salt-zIndex-docked: 1050;
|
|
2639
|
-
}
|
|
2640
|
-
.salt-density-high {
|
|
2641
|
-
--salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
|
|
2642
|
-
--salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
|
|
2643
|
-
--salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
|
|
2644
|
-
--salt-icon-size-base: 10px;
|
|
2645
|
-
--salt-icon-size-status-adornment: 6px;
|
|
2646
|
-
}
|
|
2647
|
-
.salt-density-medium {
|
|
2648
|
-
--salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
|
|
2649
|
-
--salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
|
|
2650
|
-
--salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
|
|
2651
|
-
--salt-icon-size-base: 12px;
|
|
2652
|
-
--salt-icon-size-status-adornment: 8px;
|
|
2653
|
-
}
|
|
2654
|
-
.salt-density-low {
|
|
2655
|
-
--salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
|
|
2656
|
-
--salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
|
|
2657
|
-
--salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
|
|
2658
|
-
--salt-icon-size-base: 14px;
|
|
2659
|
-
--salt-icon-size-status-adornment: 10px;
|
|
2660
|
-
}
|
|
2661
|
-
.salt-density-touch {
|
|
2662
|
-
--salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
|
|
2663
|
-
--salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
|
|
2664
|
-
--salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
|
|
2665
|
-
--salt-icon-size-base: 16px;
|
|
2666
|
-
--salt-icon-size-status-adornment: 12px;
|
|
2667
2679
|
}
|
|
2668
2680
|
|
|
2669
|
-
/* css/deprecated/palette.css */
|
|
2681
|
+
/* css/legacy/deprecated/palette.css */
|
|
2670
2682
|
.salt-theme {
|
|
2671
2683
|
--salt-palette-error-background-emphasize: var(--salt-palette-error-background);
|
|
2672
2684
|
--salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
|