@salt-ds/theme 0.0.0-snapshot-20250724191822 → 0.0.0-snapshot-20250813082930

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/index.css CHANGED
@@ -26,26 +26,9 @@
26
26
  white-space: nowrap;
27
27
  border-width: 0;
28
28
  }
29
- .saltFocusVisible:after,
30
- .focused:focus:after,
31
- .focused:focus-visible:after {
32
- content: "";
33
- inset: var(--salt-focused-outlineInset);
34
- outline-color: var(--salt-focused-outlineColor);
35
- outline-offset: var(--salt-focused-outlineOffset);
36
- outline-style: var(--salt-focused-outlineStyle);
37
- outline-width: var(--salt-focused-outlineWidth);
38
- position: absolute;
39
- }
40
29
 
41
30
  /* css/foundations/alpha.css */
42
31
  .salt-theme {
43
- --salt-color-background-snow-40a: rgba(var(--salt-color-background-snow-rgb), 0.4);
44
- --salt-color-background-marble-40a: rgba(var(--salt-color-background-marble-rgb), 0.4);
45
- --salt-color-background-limestone-40a: rgba(var(--salt-color-background-limestone-rgb), 0.4);
46
- --salt-color-background-granite-40a: rgba(var(--salt-color-background-granite-rgb), 0.4);
47
- --salt-color-background-jet-40a: rgba(var(--salt-color-background-jet-rgb), 0.4);
48
- --salt-color-background-leather-40a: rgba(var(--salt-color-background-leather-rgb), 0.4);
49
32
  --salt-color-white-5a: rgba(var(--salt-color-white-rgb), 0.05);
50
33
  --salt-color-white-10a: rgba(var(--salt-color-white-rgb), 0.1);
51
34
  --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
@@ -64,6 +47,36 @@
64
47
  --salt-color-black-50a: rgba(var(--salt-color-black-rgb), 0.5);
65
48
  --salt-color-black-65a: rgba(var(--salt-color-black-rgb), 0.65);
66
49
  --salt-color-black-80a: rgba(var(--salt-color-black-rgb), 0.8);
50
+ --salt-color-blue-30-40a: rgba(var(--salt-color-blue-30-rgb), 0.4);
51
+ --salt-color-blue-100-40a: rgba(var(--salt-color-blue-100-rgb), 0.4);
52
+ --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
53
+ --salt-color-blue-500-40a: rgba(var(--salt-color-blue-500-rgb), 0.4);
54
+ --salt-color-blue-600-40a: rgba(var(--salt-color-blue-600-rgb), 0.4);
55
+ --salt-color-blue-700-40a: rgba(var(--salt-color-blue-700-rgb), 0.4);
56
+ --salt-color-gray-20-40a: rgba(var(--salt-color-gray-20-rgb), 0.4);
57
+ --salt-color-gray-30-40a: rgba(var(--salt-color-gray-30-rgb), 0.4);
58
+ --salt-color-gray-50-40a: rgba(var(--salt-color-gray-50-rgb), 0.4);
59
+ --salt-color-gray-60-40a: rgba(var(--salt-color-gray-60-rgb), 0.4);
60
+ --salt-color-gray-70-40a: rgba(var(--salt-color-gray-70-rgb), 0.4);
61
+ --salt-color-gray-90-15a: rgba(var(--salt-color-gray-90-rgb), 0.15);
62
+ --salt-color-gray-90-40a: rgba(var(--salt-color-gray-90-rgb), 0.4);
63
+ --salt-color-gray-200-15a: rgba(var(--salt-color-gray-200-rgb), 0.15);
64
+ --salt-color-gray-200-40a: rgba(var(--salt-color-gray-200-rgb), 0.4);
65
+ --salt-color-gray-300-40a: rgba(var(--salt-color-gray-300-rgb), 0.4);
66
+ --salt-color-gray-600-40a: rgba(var(--salt-color-gray-600-rgb), 0.4);
67
+ --salt-color-gray-800-40a: rgba(var(--salt-color-gray-800-rgb), 0.4);
68
+ --salt-color-gray-900-40a: rgba(var(--salt-color-gray-900-rgb), 0.4);
69
+ --salt-color-green-200-40a: rgba(var(--salt-color-green-200-rgb), 0.4);
70
+ --salt-color-green-500-40a: rgba(var(--salt-color-green-500-rgb), 0.4);
71
+ --salt-color-green-600-40a: rgba(var(--salt-color-green-600-rgb), 0.4);
72
+ --salt-color-orange-400-40a: rgba(var(--salt-color-orange-400-rgb), 0.4);
73
+ --salt-color-orange-500-40a: rgba(var(--salt-color-orange-500-rgb), 0.4);
74
+ --salt-color-orange-600-40a: rgba(var(--salt-color-orange-600-rgb), 0.4);
75
+ --salt-color-orange-700-40a: rgba(var(--salt-color-orange-700-rgb), 0.4);
76
+ --salt-color-orange-850-40a: rgba(var(--salt-color-orange-850-rgb), 0.4);
77
+ --salt-color-red-200-40a: rgba(var(--salt-color-red-200-rgb), 0.4);
78
+ --salt-color-red-500-40a: rgba(var(--salt-color-red-500-rgb), 0.4);
79
+ --salt-color-red-600-40a: rgba(var(--salt-color-red-600-rgb), 0.4);
67
80
  }
68
81
 
69
82
  /* css/foundations/animation.css */
@@ -228,631 +241,6 @@
228
241
  0,
229
242
  0,
230
243
  0;
231
- --salt-color-white: rgb(var(--salt-color-white-rgb));
232
- --salt-color-black: rgb(var(--salt-color-black-rgb));
233
- }
234
-
235
- /* css/foundations/curve.css */
236
- .salt-density-high {
237
- --salt-curve-0: 0;
238
- --salt-curve-50: 1px;
239
- --salt-curve-100: 2px;
240
- --salt-curve-150: 3px;
241
- --salt-curve-200: 4px;
242
- --salt-curve-250: 5px;
243
- --salt-curve-999: 999px;
244
- }
245
- .salt-density-medium {
246
- --salt-curve-0: 0;
247
- --salt-curve-50: 2px;
248
- --salt-curve-100: 4px;
249
- --salt-curve-150: 6px;
250
- --salt-curve-200: 8px;
251
- --salt-curve-250: 10px;
252
- --salt-curve-999: 999px;
253
- }
254
- .salt-density-low {
255
- --salt-curve-0: 0;
256
- --salt-curve-50: 3px;
257
- --salt-curve-100: 6px;
258
- --salt-curve-150: 9px;
259
- --salt-curve-200: 12px;
260
- --salt-curve-250: 15px;
261
- --salt-curve-999: 999px;
262
- }
263
- .salt-density-touch {
264
- --salt-curve-0: 0;
265
- --salt-curve-50: 4px;
266
- --salt-curve-100: 8px;
267
- --salt-curve-150: 12px;
268
- --salt-curve-200: 16px;
269
- --salt-curve-250: 20px;
270
- --salt-curve-999: 999px;
271
- }
272
-
273
- /* css/foundations/cursor.css */
274
- .salt-theme {
275
- --salt-cursor-active: pointer;
276
- --salt-cursor-disabled: not-allowed;
277
- --salt-cursor-drag-ew: ew-resize;
278
- --salt-cursor-drag-ns: ns-resize;
279
- --salt-cursor-grab: grab;
280
- --salt-cursor-grab-active: grabbing;
281
- --salt-cursor-hover: pointer;
282
- --salt-cursor-pending: progress;
283
- --salt-cursor-readonly: text;
284
- --salt-cursor-text: text;
285
- }
286
-
287
- /* css/foundations/duration.css */
288
- .salt-theme {
289
- --salt-duration-instant: 0ms;
290
- --salt-duration-perceptible: 300ms;
291
- --salt-duration-notable: 1000ms;
292
- --salt-duration-cutoff: 10000ms;
293
- }
294
-
295
- /* css/foundations/shadow.css */
296
- .salt-theme[data-mode=light] {
297
- --salt-shadow-100-color: rgba(0, 0, 0, 0.1);
298
- --salt-shadow-200-color: rgba(0, 0, 0, 0.1);
299
- --salt-shadow-300-color: rgba(0, 0, 0, 0.15);
300
- --salt-shadow-400-color: rgba(0, 0, 0, 0.2);
301
- --salt-shadow-500-color: rgba(0, 0, 0, 0.3);
302
- }
303
- .salt-theme[data-mode=dark] {
304
- --salt-shadow-100-color: rgba(0, 0, 0, 0.5);
305
- --salt-shadow-200-color: rgba(0, 0, 0, 0.5);
306
- --salt-shadow-300-color: rgba(0, 0, 0, 0.55);
307
- --salt-shadow-400-color: rgba(0, 0, 0, 0.55);
308
- --salt-shadow-500-color: rgba(0, 0, 0, 0.65);
309
- }
310
- .salt-theme {
311
- --salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color);
312
- --salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color);
313
- --salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color);
314
- --salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color);
315
- --salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color);
316
- }
317
-
318
- /* css/foundations/size.css */
319
- .salt-density-high {
320
- --salt-size-adornment: 6px;
321
- --salt-size-bar: 2px;
322
- --salt-size-base: 20px;
323
- --salt-size-icon: 10px;
324
- --salt-size-indicator: 2px;
325
- --salt-size-selectable: 12px;
326
- --salt-size-bar-strong: 4px;
327
- }
328
- .salt-density-medium {
329
- --salt-size-adornment: 8px;
330
- --salt-size-bar: 4px;
331
- --salt-size-base: 28px;
332
- --salt-size-icon: 12px;
333
- --salt-size-indicator: 3px;
334
- --salt-size-selectable: 14px;
335
- --salt-size-bar-strong: 8px;
336
- }
337
- .salt-density-low {
338
- --salt-size-adornment: 10px;
339
- --salt-size-bar: 6px;
340
- --salt-size-base: 36px;
341
- --salt-size-icon: 14px;
342
- --salt-size-indicator: 4px;
343
- --salt-size-selectable: 16px;
344
- --salt-size-bar-strong: 12px;
345
- }
346
- .salt-density-touch {
347
- --salt-size-adornment: 12px;
348
- --salt-size-bar: 8px;
349
- --salt-size-base: 44px;
350
- --salt-size-icon: 16px;
351
- --salt-size-indicator: 5px;
352
- --salt-size-selectable: 18px;
353
- --salt-size-bar-strong: 16px;
354
- }
355
- .salt-density-touch,
356
- .salt-density-low,
357
- .salt-density-medium,
358
- .salt-density-high {
359
- --salt-size-fixed-100: 1px;
360
- --salt-size-fixed-200: 2px;
361
- --salt-size-fixed-300: 3px;
362
- --salt-size-fixed-400: 4px;
363
- --salt-size-fixed-500: 5px;
364
- --salt-size-fixed-600: 6px;
365
- --salt-size-fixed-700: 7px;
366
- --salt-size-fixed-800: 8px;
367
- --salt-size-fixed-900: 9px;
368
- }
369
-
370
- /* css/foundations/spacing.css */
371
- .salt-density-touch {
372
- --salt-spacing-100: 16px;
373
- }
374
- .salt-density-low {
375
- --salt-spacing-100: 12px;
376
- }
377
- .salt-density-medium {
378
- --salt-spacing-100: 8px;
379
- }
380
- .salt-density-high {
381
- --salt-spacing-100: 4px;
382
- }
383
- .salt-density-touch,
384
- .salt-density-low,
385
- .salt-density-medium,
386
- .salt-density-high {
387
- --salt-spacing-25: calc(0.25 * var(--salt-spacing-100));
388
- --salt-spacing-50: calc(0.5 * var(--salt-spacing-100));
389
- --salt-spacing-75: calc(0.75 * var(--salt-spacing-100));
390
- --salt-spacing-150: calc(1.5 * var(--salt-spacing-100));
391
- --salt-spacing-200: calc(2 * var(--salt-spacing-100));
392
- --salt-spacing-250: calc(2.5 * var(--salt-spacing-100));
393
- --salt-spacing-300: calc(3 * var(--salt-spacing-100));
394
- --salt-spacing-350: calc(3.5 * var(--salt-spacing-100));
395
- --salt-spacing-400: calc(4 * var(--salt-spacing-100));
396
- --salt-spacing-450: calc(4.5 * var(--salt-spacing-100));
397
- --salt-spacing-500: calc(5 * var(--salt-spacing-100));
398
- --salt-spacing-550: calc(5.5 * var(--salt-spacing-100));
399
- --salt-spacing-600: calc(6 * var(--salt-spacing-100));
400
- --salt-spacing-650: calc(6.5 * var(--salt-spacing-100));
401
- --salt-spacing-700: calc(7 * var(--salt-spacing-100));
402
- --salt-spacing-750: calc(7.5 * var(--salt-spacing-100));
403
- --salt-spacing-800: calc(8 * var(--salt-spacing-100));
404
- --salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
405
- --salt-spacing-900: calc(9 * var(--salt-spacing-100));
406
- --salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
407
- --salt-spacing-fixed-100: 1px;
408
- --salt-spacing-fixed-200: 2px;
409
- --salt-spacing-fixed-300: 3px;
410
- --salt-spacing-fixed-400: 4px;
411
- --salt-spacing-fixed-500: 5px;
412
- --salt-spacing-fixed-600: 6px;
413
- --salt-spacing-fixed-700: 7px;
414
- --salt-spacing-fixed-800: 8px;
415
- --salt-spacing-fixed-900: 9px;
416
- }
417
-
418
- /* css/foundations/typography.css */
419
- .salt-theme {
420
- --salt-typography-fontFamily-openSans: "Open Sans";
421
- --salt-typography-fontFamily-amplitude: "Amplitude";
422
- --salt-typography-fontFamily-ptMono: "PT Mono";
423
- --salt-typography-fontWeight-light: 300;
424
- --salt-typography-fontWeight-regular: 400;
425
- --salt-typography-fontWeight-medium: 500;
426
- --salt-typography-fontWeight-semiBold: 600;
427
- --salt-typography-fontWeight-bold: 700;
428
- --salt-typography-fontWeight-extraBold: 800;
429
- --salt-typography-textDecoration-none: none;
430
- --salt-typography-textDecoration-underline: underline;
431
- }
432
-
433
- /* css/foundations/zindex.css */
434
- .salt-density-touch,
435
- .salt-density-low,
436
- .salt-density-medium,
437
- .salt-density-high {
438
- --salt-zIndex-default: 1;
439
- --salt-zIndex-popout: 1000;
440
- --salt-zIndex-appHeader: 1100;
441
- --salt-zIndex-drawer: 1200;
442
- --salt-zIndex-modal: 1300;
443
- --salt-zIndex-notification: 1400;
444
- --salt-zIndex-dragObject: 1420;
445
- --salt-zIndex-contextMenu: 1450;
446
- --salt-zIndex-flyover: 1500;
447
- }
448
-
449
- /* css/foundations/index.css */
450
-
451
- /* css/deprecated/characteristics-next.css */
452
- .salt-theme[data-brand=commercial] {
453
- --salt-navigable-indicator-active: var(--salt-palette-accent);
454
- --salt-selectable-background-blurSelected: var(--salt-palette-neutral-weakest);
455
- --salt-status-static-foreground: var(--salt-palette-foreground-secondary);
456
- --salt-status-negative-foreground: var(--salt-palette-negative);
457
- --salt-status-positive-foreground: var(--salt-palette-positive);
458
- --salt-track-borderColor: var(--salt-palette-alpha-contrast-high);
459
- --salt-track-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
460
- }
461
-
462
- /* css/deprecated/characteristics.css */
463
- .salt-theme {
464
- --salt-container-borderStyle: solid;
465
- --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
466
- --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
467
- --salt-editable-borderStyle: solid;
468
- --salt-editable-borderStyle-hover: solid;
469
- --salt-editable-borderStyle-active: solid;
470
- --salt-editable-borderStyle-disabled: solid;
471
- --salt-editable-borderStyle-readonly: solid;
472
- --salt-editable-cursor-hover: text;
473
- --salt-editable-cursor-active: text;
474
- --salt-editable-cursor-disabled: not-allowed;
475
- --salt-editable-cursor-readonly: text;
476
- --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
477
- --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
478
- --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
479
- --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
480
- --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
481
- --salt-editable-borderWidth-active: 2px;
482
- --salt-measured-borderStyle: solid;
483
- --salt-measured-borderStyle-active: solid;
484
- --salt-measured-borderStyle-complete: solid;
485
- --salt-measured-borderStyle-incomplete: dotted;
486
- --salt-measured-borderWidth: 2px;
487
- --salt-measured-borderWidth-active: 2px;
488
- --salt-measured-borderWidth-complete: 2px;
489
- --salt-measured-borderWidth-incomplete: 2px;
490
- --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
491
- --salt-measured-textAlign: center;
492
- --salt-measured-background: var(--salt-palette-measured-background);
493
- --salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
494
- --salt-measured-borderColor: var(--salt-palette-measured-border);
495
- --salt-measured-borderColor-disabled: var(--salt-palette-measured-border-disabled);
496
- --salt-measured-fill: var(--salt-palette-measured-fill);
497
- --salt-measured-fill-disabled: var(--salt-palette-measured-fill-disabled);
498
- --salt-measured-foreground: var(--salt-palette-measured-foreground);
499
- --salt-measured-foreground-hover: var(--salt-palette-measured-foreground-active);
500
- --salt-measured-foreground-active: var(--salt-palette-measured-foreground-active);
501
- --salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
502
- --salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
503
- --salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);
504
- --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
505
- --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
506
- --salt-overlayable-rangeSelection: var(--salt-overlayable-background-rangeSelection);
507
- --salt-selectable-borderStyle: solid;
508
- --salt-selectable-borderStyle-hover: solid;
509
- --salt-selectable-borderStyle-selected: solid;
510
- --salt-selectable-borderStyle-blurSelected: solid;
511
- --salt-selectable-cursor-hover: pointer;
512
- --salt-selectable-cursor-selected: pointer;
513
- --salt-selectable-cursor-blurSelected: pointer;
514
- --salt-selectable-cursor-disabled: not-allowed;
515
- --salt-selectable-cursor-readonly: not-allowed;
516
- --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
517
- --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
518
- --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
519
- --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
520
- --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
521
- --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
522
- --salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
523
- --salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
524
- --salt-selectable-cta-background: var(--salt-palette-interact-background);
525
- --salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled);
526
- --salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
527
- --salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active);
528
- --salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled);
529
- --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
530
- --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
531
- --salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
532
- --salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
533
- --salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled);
534
- --salt-selectable-primary-background: var(--salt-palette-interact-background);
535
- --salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled);
536
- --salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
537
- --salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active);
538
- --salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled);
539
- --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
540
- --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
541
- --salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
542
- --salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active);
543
- --salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled);
544
- --salt-selectable-secondary-background: var(--salt-palette-interact-background);
545
- --salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled);
546
- --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
547
- --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
548
- --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
549
- --salt-separable-borderStyle: solid;
550
- --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
551
- --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
552
- --salt-status-info-background-emphasize: var(--salt-status-info-background);
553
- --salt-status-success-background-emphasize: var(--salt-status-success-background);
554
- --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
555
- --salt-status-error-background-emphasize: var(--salt-status-error-background);
556
- --salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
557
- --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
558
- --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
559
- --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
560
- --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
561
- --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
562
- --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
563
- --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
564
- --salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
565
- --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
566
- --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
567
- --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
568
- --salt-status-info-foreground: var(--salt-palette-info-foreground);
569
- --salt-status-error-foreground: var(--salt-palette-error-foreground);
570
- --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
571
- --salt-status-success-foreground: var(--salt-palette-success-foreground);
572
- --salt-draggable-horizontal-cursor-hover: row-resize;
573
- --salt-draggable-horizontal-cursor-active: row-resize;
574
- --salt-draggable-vertical-cursor-hover: col-resize;
575
- --salt-draggable-vertical-cursor-active: col-resize;
576
- --salt-draggable-grab-cursor-hover: grab;
577
- --salt-draggable-grab-cursor-active: grabbing;
578
- --salt-actionable-cursor-hover: pointer;
579
- --salt-actionable-cursor-active: pointer;
580
- --salt-actionable-cursor-disabled: not-allowed;
581
- --salt-actionable-letterSpacing: 0.6px;
582
- --salt-actionable-textTransform: uppercase;
583
- --salt-actionable-textAlign: center;
584
- --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
585
- --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
586
- --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
587
- --salt-target-cursor-disabled: not-allowed;
588
- --salt-target-borderStyle: dashed;
589
- --salt-target-borderStyle-hover: solid;
590
- --salt-target-borderStyle-disabled: dashed;
591
- --salt-text-background-selected: var(--salt-content-foreground-highlight);
592
- --salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover);
593
- --salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active);
594
- --salt-text-link-foreground-visited: var(--salt-palette-navigate-foreground-visited);
595
- --salt-text-link-textDecoration: underline;
596
- --salt-text-link-textDecoration-hover: none;
597
- --salt-text-link-textDecoration-selected: underline;
598
- --salt-text-primary-foreground: var(--salt-palette-neutral-primary-foreground);
599
- --salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
600
- --salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
601
- --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
602
- --salt-text-textDecoration: var(--salt-typography-textDecoration-none);
603
- --salt-text-textTransform: none;
604
- --salt-navigable-cursor-active: pointer;
605
- --salt-navigable-cursor-hover: pointer;
606
- --salt-navigable-cursor-disabled: not-allowed;
607
- --salt-navigable-cursor-edit: text;
608
- --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);
609
- --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);
610
- --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);
611
- --salt-navigable-secondary-background: var(--salt-palette-navigate-secondary-background);
612
- --salt-navigable-secondary-background-hover: var(--salt-palette-navigate-secondary-background-hover);
613
- --salt-navigable-secondary-background-active: var(--salt-palette-navigate-secondary-background-active);
614
- --salt-navigable-tertiary-background: var(--salt-palette-navigate-tertiary-background);
615
- --salt-navigable-tertiary-background-hover: var(--salt-palette-navigate-tertiary-background-hover);
616
- --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
617
- --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
618
- --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
619
- --salt-navigable-textDecoration: var(--salt-typography-textDecoration-underline);
620
- --salt-navigable-textDecoration-hover: var(--salt-typography-textDecoration-none);
621
- --salt-navigable-textDecoration-selected: var(--salt-typography-textDecoration-underline);
622
- --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
623
- --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
624
- --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
625
- --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
626
- --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
627
- --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
628
- --salt-track-borderStyle: solid;
629
- --salt-track-borderStyle-active: solid;
630
- --salt-track-borderStyle-complete: solid;
631
- --salt-track-borderStyle-incomplete: dotted;
632
- --salt-track-borderWidth: 2px;
633
- --salt-track-borderWidth-active: 2px;
634
- --salt-track-borderWidth-complete: 2px;
635
- --salt-track-borderWidth-incomplete: 2px;
636
- --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
637
- --salt-track-textAlign: center;
638
- --salt-track-background: var(--salt-palette-track-background);
639
- --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
640
- --salt-track-borderColor: var(--salt-palette-neutral-border);
641
- --salt-track-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
642
- --salt-taggable-cursor-hover: pointer;
643
- --salt-taggable-cursor-active: pointer;
644
- --salt-taggable-cursor-disabled: not-allowed;
645
- --salt-taggable-background: var(--salt-palette-interact-primary-background);
646
- --salt-taggable-background-hover: var(--salt-palette-interact-primary-background-hover);
647
- --salt-taggable-background-active: var(--salt-palette-interact-primary-background-active);
648
- --salt-taggable-background-disabled: var(--salt-palette-interact-primary-background-disabled);
649
- --salt-taggable-foreground: var(--salt-palette-interact-primary-foreground);
650
- --salt-taggable-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
651
- --salt-taggable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
652
- --salt-taggable-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
653
- --salt-actionable-cta-background-active: var(--salt-actionable-accented-bold-background-active);
654
- --salt-actionable-cta-background-disabled: var(--salt-actionable-accented-bold-background-disabled);
655
- --salt-actionable-cta-background-hover: var(--salt-actionable-accented-bold-background-hover);
656
- --salt-actionable-cta-background: var(--salt-actionable-accented-bold-background);
657
- --salt-actionable-cta-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);
658
- --salt-actionable-cta-borderColor-disabled: var(--salt-actionable-accented-bold-borderColor-disabled);
659
- --salt-actionable-cta-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);
660
- --salt-actionable-cta-borderColor: var(--salt-actionable-accented-bold-borderColor);
661
- --salt-actionable-cta-foreground-active: var(--salt-actionable-accented-bold-foreground-active);
662
- --salt-actionable-cta-foreground-disabled: var(--salt-actionable-accented-bold-foreground-disabled);
663
- --salt-actionable-cta-foreground-hover: var(--salt-actionable-accented-bold-foreground-hover);
664
- --salt-actionable-cta-foreground: var(--salt-actionable-accented-bold-foreground);
665
- --salt-actionable-primary-background-active: var(--salt-actionable-bold-background-active);
666
- --salt-actionable-primary-background-disabled: var(--salt-actionable-bold-background-disabled);
667
- --salt-actionable-primary-background-hover: var(--salt-actionable-bold-background-hover);
668
- --salt-actionable-primary-background: var(--salt-actionable-bold-background);
669
- --salt-actionable-primary-borderColor-active: var(--salt-actionable-bold-borderColor-active);
670
- --salt-actionable-primary-borderColor-disabled: var(--salt-actionable-bold-borderColor-disabled);
671
- --salt-actionable-primary-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);
672
- --salt-actionable-primary-borderColor: var(--salt-actionable-bold-borderColor);
673
- --salt-actionable-primary-foreground-active: var(--salt-actionable-bold-foreground-active);
674
- --salt-actionable-primary-foreground-disabled: var(--salt-actionable-bold-foreground-disabled);
675
- --salt-actionable-primary-foreground-hover: var(--salt-actionable-bold-foreground-hover);
676
- --salt-actionable-primary-foreground: var(--salt-actionable-bold-foreground);
677
- --salt-actionable-secondary-background-active: var(--salt-actionable-subtle-background-active);
678
- --salt-actionable-secondary-background-disabled: var(--salt-actionable-subtle-background-disabled);
679
- --salt-actionable-secondary-background-hover: var(--salt-actionable-subtle-background-hover);
680
- --salt-actionable-secondary-background: var(--salt-actionable-subtle-background);
681
- --salt-actionable-secondary-borderColor-active: var(--salt-actionable-subtle-borderColor-active);
682
- --salt-actionable-secondary-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);
683
- --salt-actionable-secondary-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);
684
- --salt-actionable-secondary-borderColor: var(--salt-actionable-subtle-borderColor);
685
- --salt-actionable-secondary-foreground-active: var(--salt-actionable-subtle-foreground-active);
686
- --salt-actionable-secondary-foreground-disabled: var(--salt-actionable-subtle-foreground-disabled);
687
- --salt-actionable-secondary-foreground-hover: var(--salt-actionable-subtle-foreground-hover);
688
- --salt-actionable-secondary-foreground: var(--salt-actionable-subtle-foreground);
689
- }
690
- .salt-density-high {
691
- --salt-accent-fontSize: 8px;
692
- --salt-accent-lineHeight: 11px;
693
- }
694
- .salt-density-medium {
695
- --salt-accent-fontSize: 10px;
696
- --salt-accent-lineHeight: 13px;
697
- }
698
- .salt-density-low {
699
- --salt-accent-fontSize: 12px;
700
- --salt-accent-lineHeight: 16px;
701
- }
702
- .salt-density-touch {
703
- --salt-accent-fontSize: 14px;
704
- --salt-accent-lineHeight: 18px;
705
- }
706
-
707
- /* css/deprecated/fade.css */
708
- .salt-theme {
709
- --salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
710
- --salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
711
- --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
712
- --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
713
- --salt-color-blue-500-fade-fill: rgba(38, 112, 169, var(--salt-palette-opacity-fill));
714
- --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
715
- --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
716
- --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
717
- --salt-color-blue-200-fade-foreground: rgba(75, 159, 216, var(--salt-palette-opacity-disabled));
718
- --salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
719
- --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
720
- --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
721
- --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
722
- --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
723
- --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-disabled));
724
- --salt-color-green-200-fade-foreground: rgba(77, 180, 105, var(--salt-palette-opacity-disabled));
725
- --salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-disabled));
726
- --salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
727
- --salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
728
- --salt-color-green-600-fade-foreground: rgba(24, 114, 61, var(--salt-palette-opacity-disabled));
729
- --salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-disabled));
730
- --salt-color-red-200-fade-foreground: rgba(255, 108, 88, var(--salt-palette-opacity-disabled));
731
- --salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-disabled));
732
- --salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
733
- --salt-color-red-600-fade-foreground: rgba(196, 32, 16, var(--salt-palette-opacity-disabled));
734
- --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-disabled));
735
- --salt-color-orange-400-fade-foreground: rgba(238, 133, 43, var(--salt-palette-opacity-disabled));
736
- --salt-color-orange-850-fade-foreground: rgba(194, 52, 7, var(--salt-palette-opacity-disabled));
737
- --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
738
- --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
739
- --salt-color-gray-50-fade-border: rgba(206, 210, 217, var(--salt-palette-opacity-disabled));
740
- --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
741
- --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
742
- --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
743
- --salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
744
- --salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
745
- --salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
746
- --salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-disabled));
747
- --salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-disabled));
748
- --salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-disabled));
749
- --salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-disabled));
750
- --salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
751
- --salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));
752
- --salt-color-gray-200-fade-border-readonly: rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly));
753
- --salt-color-blue-30-fade-background: rgba(164, 213, 244, var(--salt-palette-opacity-disabled));
754
- --salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
755
- --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
756
- --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-disabled));
757
- --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-disabled));
758
- --salt-color-gray-30-fade-background: rgba(224, 228, 233, var(--salt-palette-opacity-disabled));
759
- --salt-color-gray-50-fade-background: rgba(206, 210, 217, var(--salt-palette-opacity-disabled));
760
- --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
761
- --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
762
- --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
763
- --salt-color-gray-300-fade-background: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
764
- --salt-color-gray-500-fade-background: rgba(59, 63, 70, var(--salt-palette-opacity-disabled));
765
- --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-disabled));
766
- --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-disabled));
767
- --salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
768
- --salt-color-green-500-fade-background: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
769
- --salt-color-green-600-fade-background: rgba(24, 114, 61, var(--salt-palette-opacity-disabled));
770
- --salt-color-red-600-fade-background: rgba(196, 32, 16, var(--salt-palette-opacity-disabled));
771
- --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
772
- --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
773
- --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
774
- --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly));
775
- --salt-color-white-fade-backdrop: rgba(255, 255, 255, var(--salt-palette-opacity-backdrop));
776
- --salt-color-black-fade-backdrop: rgba(0, 0, 0, var(--salt-palette-opacity-backdrop));
777
- --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
778
- --salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
779
- --salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 255, var(--salt-palette-opacity-primary-border));
780
- --salt-color-white-fade-separatorOpacity-secondary: rgba(255, 255, 255, var(--salt-palette-opacity-secondary-border));
781
- --salt-color-white-fade-separatorOpacity-tertiary: rgba(255, 255, 255, var(--salt-palette-opacity-tertiary-border));
782
- --salt-color-black-fade-separatorOpacity-primary: rgba(0, 0, 0, var(--salt-palette-opacity-primary-border));
783
- --salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border));
784
- --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
785
- --salt-color-black-fade-background-selection: rgba(0, 0, 0, var(--salt-opacity-15));
786
- --salt-color-black-fade-background-highlight: rgba(0, 0, 0, var(--salt-opacity-25));
787
- --salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15));
788
- --salt-color-white-fade-background-highlight: rgba(255, 255, 255, var(--salt-opacity-25));
789
- --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
790
- --salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
791
- --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
792
- --salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
793
- }
794
-
795
- /* css/deprecated/foundations-next.css */
796
- .salt-theme[data-brand=commercial] {
797
- --salt-color-background-gradientlight-rgb: var(--salt-color-background-titanium-rgb);
798
- --salt-color-background-gradientlight: var(--salt-color-background-titanium);
799
- }
800
-
801
- /* css/deprecated/palette-next.css */
802
- .salt-theme[data-brand=commercial][data-mode=light] {
803
- --salt-palette-foreground-active: var(--salt-color-blue-700);
804
- --salt-palette-foreground-hover: var(--salt-color-blue-600);
805
- }
806
- .salt-theme[data-brand=commercial][data-mode=dark] {
807
- --salt-palette-foreground-active: var(--salt-color-blue-300);
808
- --salt-palette-foreground-hover: var(--salt-color-blue-400);
809
- }
810
-
811
- /* css/deprecated/index.css */
812
-
813
- /* css/legacy/foundations/alpha.css */
814
- .salt-theme[data-brand=legacy] {
815
- --salt-color-blue-30-40a: rgba(var(--salt-color-blue-30-rgb), 0.4);
816
- --salt-color-blue-100-40a: rgba(var(--salt-color-blue-100-rgb), 0.4);
817
- --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
818
- --salt-color-blue-500-40a: rgba(var(--salt-color-blue-500-rgb), 0.4);
819
- --salt-color-blue-600-40a: rgba(var(--salt-color-blue-600-rgb), 0.4);
820
- --salt-color-blue-700-40a: rgba(var(--salt-color-blue-700-rgb), 0.4);
821
- --salt-color-gray-20-40a: rgba(var(--salt-color-gray-20-rgb), 0.4);
822
- --salt-color-gray-30-40a: rgba(var(--salt-color-gray-30-rgb), 0.4);
823
- --salt-color-gray-50-40a: rgba(var(--salt-color-gray-50-rgb), 0.4);
824
- --salt-color-gray-60-40a: rgba(var(--salt-color-gray-60-rgb), 0.4);
825
- --salt-color-gray-70-40a: rgba(var(--salt-color-gray-70-rgb), 0.4);
826
- --salt-color-gray-90-15a: rgba(var(--salt-color-gray-90-rgb), 0.15);
827
- --salt-color-gray-90-40a: rgba(var(--salt-color-gray-90-rgb), 0.4);
828
- --salt-color-gray-200-15a: rgba(var(--salt-color-gray-200-rgb), 0.15);
829
- --salt-color-gray-200-40a: rgba(var(--salt-color-gray-200-rgb), 0.4);
830
- --salt-color-gray-300-40a: rgba(var(--salt-color-gray-300-rgb), 0.4);
831
- --salt-color-gray-600-40a: rgba(var(--salt-color-gray-600-rgb), 0.4);
832
- --salt-color-gray-800-40a: rgba(var(--salt-color-gray-800-rgb), 0.4);
833
- --salt-color-gray-900-40a: rgba(var(--salt-color-gray-900-rgb), 0.4);
834
- --salt-color-green-200-40a: rgba(var(--salt-color-green-200-rgb), 0.4);
835
- --salt-color-green-500-40a: rgba(var(--salt-color-green-500-rgb), 0.4);
836
- --salt-color-green-600-40a: rgba(var(--salt-color-green-600-rgb), 0.4);
837
- --salt-color-orange-400-40a: rgba(var(--salt-color-orange-400-rgb), 0.4);
838
- --salt-color-orange-500-40a: rgba(var(--salt-color-orange-500-rgb), 0.4);
839
- --salt-color-orange-600-40a: rgba(var(--salt-color-orange-600-rgb), 0.4);
840
- --salt-color-orange-700-40a: rgba(var(--salt-color-orange-700-rgb), 0.4);
841
- --salt-color-orange-850-40a: rgba(var(--salt-color-orange-850-rgb), 0.4);
842
- --salt-color-red-200-40a: rgba(var(--salt-color-red-200-rgb), 0.4);
843
- --salt-color-red-500-40a: rgba(var(--salt-color-red-500-rgb), 0.4);
844
- --salt-color-red-600-40a: rgba(var(--salt-color-red-600-rgb), 0.4);
845
- --salt-color-teal-200-40a: rgba(var(--salt-color-teal-200-rgb), 0.4);
846
- --salt-color-teal-300-40a: rgba(var(--salt-color-teal-300-rgb), 0.4);
847
- --salt-color-teal-400-40a: rgba(var(--salt-color-teal-400-rgb), 0.4);
848
- --salt-color-teal-500-40a: rgba(var(--salt-color-teal-500-rgb), 0.4);
849
- --salt-color-teal-600-40a: rgba(var(--salt-color-teal-600-rgb), 0.4);
850
- --salt-color-teal-700-40a: rgba(var(--salt-color-teal-700-rgb), 0.4);
851
- --salt-color-teal-800-40a: rgba(var(--salt-color-teal-800-rgb), 0.4);
852
- }
853
-
854
- /* css/legacy/foundations/color.css */
855
- .salt-theme[data-brand=legacy] {
856
244
  --salt-color-red-10-rgb:
857
245
  255,
858
246
  227,
@@ -1265,38 +653,8 @@
1265
653
  22,
1266
654
  22,
1267
655
  22;
1268
- --salt-color-background-snow-rgb:
1269
- 255,
1270
- 255,
1271
- 255;
1272
- --salt-color-background-marble-rgb:
1273
- 245,
1274
- 247,
1275
- 248;
1276
- --salt-color-background-limestone-rgb:
1277
- 250,
1278
- 248,
1279
- 242;
1280
- --salt-color-background-titanium-rgb:
1281
- 226,
1282
- 228,
1283
- 229;
1284
- --salt-color-background-jet-rgb:
1285
- 16,
1286
- 24,
1287
- 32;
1288
- --salt-color-background-granite-rgb:
1289
- 26,
1290
- 34,
1291
- 41;
1292
- --salt-color-background-leather-rgb:
1293
- 38,
1294
- 41,
1295
- 43;
1296
- --salt-color-logo-brown-rgb:
1297
- 58,
1298
- 34,
1299
- 6;
656
+ --salt-color-white: rgb(var(--salt-color-white-rgb));
657
+ --salt-color-black: rgb(var(--salt-color-black-rgb));
1300
658
  --salt-color-red-10: rgb(var(--salt-color-red-10-rgb));
1301
659
  --salt-color-red-20: rgb(var(--salt-color-red-20-rgb));
1302
660
  --salt-color-red-30: rgb(var(--salt-color-red-30-rgb));
@@ -1400,14 +758,6 @@
1400
758
  --salt-color-gray-700: rgb(var(--salt-color-gray-700-rgb));
1401
759
  --salt-color-gray-800: rgb(var(--salt-color-gray-800-rgb));
1402
760
  --salt-color-gray-900: rgb(var(--salt-color-gray-900-rgb));
1403
- --salt-color-background-snow: rgb(var(--salt-color-background-snow-rgb));
1404
- --salt-color-background-marble: rgb(var(--salt-color-background-marble-rgb));
1405
- --salt-color-background-limestone: rgb(var(--salt-color-background-limestone-rgb));
1406
- --salt-color-background-titanium: rgb(var(--salt-color-background-titanium-rgb));
1407
- --salt-color-background-jet: rgb(var(--salt-color-background-jet-rgb));
1408
- --salt-color-background-granite: rgb(var(--salt-color-background-granite-rgb));
1409
- --salt-color-background-leather: rgb(var(--salt-color-background-leather-rgb));
1410
- --salt-color-logo-brown: rgb(var(--salt-color-logo-brown-rgb));
1411
761
  --salt-color-cobalt-100: rgb(237, 244, 255);
1412
762
  --salt-color-cobalt-200: rgb(198, 211, 239);
1413
763
  --salt-color-cobalt-300: rgb(159, 179, 223);
@@ -1590,76 +940,222 @@
1590
940
  --salt-color-forest-900: rgb(0, 51, 31);
1591
941
  }
1592
942
 
1593
- /* css/legacy/palette/accent.css */
1594
- .salt-theme[data-mode=light][data-brand=legacy] {
1595
- --salt-palette-accent-foreground: var(--salt-color-white);
1596
- --salt-palette-accent-foreground-informative: var(--salt-color-blue-600);
1597
- --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-600-40a);
1598
- --salt-palette-accent: var(--salt-color-blue-500);
1599
- --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
1600
- --salt-palette-accent-strong: var(--salt-color-blue-600);
1601
- --salt-palette-accent-strong-disabled: var(--salt-color-blue-600-40a);
1602
- --salt-palette-accent-stronger: var(--salt-color-blue-700);
1603
- --salt-palette-accent-stronger-disabled: var(--salt-color-blue-700-40a);
1604
- --salt-palette-accent-strongest: var(--salt-color-blue-800);
1605
- --salt-palette-accent-weak: var(--salt-color-blue-400);
1606
- --salt-palette-accent-weaker: var(--salt-color-blue-200);
1607
- --salt-palette-accent-weaker-disabled: var(--salt-color-blue-200-40a);
1608
- --salt-palette-accent-weakest: var(--salt-color-blue-100);
1609
- --salt-palette-accent-action-hover: var(--salt-color-blue-600);
1610
- --salt-palette-accent-action-active: var(--salt-color-blue-800);
1611
- }
1612
- .salt-theme[data-mode=dark][data-brand=legacy] {
1613
- --salt-palette-accent-foreground: var(--salt-color-white);
1614
- --salt-palette-accent-foreground-informative: var(--salt-color-blue-200);
1615
- --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-200-40a);
1616
- --salt-palette-accent: var(--salt-color-blue-500);
1617
- --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
1618
- --salt-palette-accent-strong: var(--salt-color-blue-400);
1619
- --salt-palette-accent-strong-disabled: var(--salt-color-blue-400-40a);
1620
- --salt-palette-accent-stronger: var(--salt-color-blue-300);
1621
- --salt-palette-accent-stronger-disabled: var(--salt-color-blue-300-40a);
1622
- --salt-palette-accent-strongest: var(--salt-color-blue-200);
1623
- --salt-palette-accent-weak: var(--salt-color-blue-600);
1624
- --salt-palette-accent-weaker: var(--salt-color-blue-800);
1625
- --salt-palette-accent-weaker-disabled: var(--salt-color-blue-800-40a);
1626
- --salt-palette-accent-weakest: var(--salt-color-blue-900);
1627
- --salt-palette-accent-action-hover: var(--salt-color-blue-600);
1628
- --salt-palette-accent-action-active: var(--salt-color-blue-800);
1629
- }
1630
- .salt-theme.salt-theme-next[data-accent=teal][data-mode=light] {
1631
- --salt-palette-accent: var(--salt-color-teal-500);
1632
- --salt-palette-accent-disabled: var(--salt-color-teal-500-40a);
1633
- --salt-palette-accent-strong: var(--salt-color-teal-600);
1634
- --salt-palette-accent-strong-disabled: var(--salt-color-teal-600-40a);
1635
- --salt-palette-accent-stronger: var(--salt-color-teal-700);
1636
- --salt-palette-accent-stronger-disabled: var(--salt-color-teal-700-40a);
1637
- --salt-palette-accent-strongest: var(--salt-color-teal-800);
1638
- --salt-palette-accent-weak: var(--salt-color-teal-400);
1639
- --salt-palette-accent-weaker: var(--salt-color-teal-200);
1640
- --salt-palette-accent-weaker-disabled: var(--salt-color-teal-200-40a);
1641
- --salt-palette-accent-weakest: var(--salt-color-teal-100);
1642
- --salt-palette-accent-action-hover: var(--salt-color-teal-600);
1643
- --salt-palette-accent-action-active: var(--salt-color-teal-800);
1644
- }
1645
- .salt-theme.salt-theme-next[data-accent=teal][data-mode=dark] {
1646
- --salt-palette-accent: var(--salt-color-teal-500);
1647
- --salt-palette-accent-disabled: var(--salt-color-teal-500-40a);
1648
- --salt-palette-accent-strong: var(--salt-color-teal-400);
1649
- --salt-palette-accent-strong-disabled: var(--salt-color-teal-400-40a);
1650
- --salt-palette-accent-stronger: var(--salt-color-teal-300);
1651
- --salt-palette-accent-stronger-disabled: var(--salt-color-teal-300-40a);
1652
- --salt-palette-accent-strongest: var(--salt-color-teal-200);
1653
- --salt-palette-accent-weak: var(--salt-color-teal-600);
1654
- --salt-palette-accent-weaker: var(--salt-color-teal-800);
1655
- --salt-palette-accent-weaker-disabled: var(--salt-color-teal-800-40a);
1656
- --salt-palette-accent-weakest: var(--salt-color-teal-900);
1657
- --salt-palette-accent-action-hover: var(--salt-color-teal-600);
1658
- --salt-palette-accent-action-active: var(--salt-color-teal-800);
943
+ /* css/foundations/cursor.css */
944
+ .salt-theme {
945
+ --salt-cursor-active: pointer;
946
+ --salt-cursor-disabled: not-allowed;
947
+ --salt-cursor-drag-ew: ew-resize;
948
+ --salt-cursor-drag-ns: ns-resize;
949
+ --salt-cursor-grab: grab;
950
+ --salt-cursor-grab-active: grabbing;
951
+ --salt-cursor-hover: pointer;
952
+ --salt-cursor-pending: progress;
953
+ --salt-cursor-readonly: text;
954
+ --salt-cursor-text: text;
955
+ }
956
+
957
+ /* css/foundations/curve.css */
958
+ .salt-density-high {
959
+ --salt-curve-0: 0;
960
+ --salt-curve-50: 1px;
961
+ --salt-curve-100: 2px;
962
+ --salt-curve-150: 3px;
963
+ --salt-curve-200: 4px;
964
+ --salt-curve-250: 5px;
965
+ --salt-curve-999: 999px;
966
+ }
967
+ .salt-density-medium {
968
+ --salt-curve-0: 0;
969
+ --salt-curve-50: 2px;
970
+ --salt-curve-100: 4px;
971
+ --salt-curve-150: 6px;
972
+ --salt-curve-200: 8px;
973
+ --salt-curve-250: 10px;
974
+ --salt-curve-999: 999px;
975
+ }
976
+ .salt-density-low {
977
+ --salt-curve-0: 0;
978
+ --salt-curve-50: 3px;
979
+ --salt-curve-100: 6px;
980
+ --salt-curve-150: 9px;
981
+ --salt-curve-200: 12px;
982
+ --salt-curve-250: 15px;
983
+ --salt-curve-999: 999px;
984
+ }
985
+ .salt-density-touch {
986
+ --salt-curve-0: 0;
987
+ --salt-curve-50: 4px;
988
+ --salt-curve-100: 8px;
989
+ --salt-curve-150: 12px;
990
+ --salt-curve-200: 16px;
991
+ --salt-curve-250: 20px;
992
+ --salt-curve-999: 999px;
993
+ }
994
+
995
+ /* css/foundations/duration.css */
996
+ .salt-theme {
997
+ --salt-duration-instant: 0ms;
998
+ --salt-duration-perceptible: 300ms;
999
+ --salt-duration-notable: 1000ms;
1000
+ --salt-duration-cutoff: 10000ms;
1001
+ }
1002
+
1003
+ /* css/foundations/shadow.css */
1004
+ .salt-theme[data-mode=light] {
1005
+ --salt-shadow-100-color: rgba(0, 0, 0, 0.1);
1006
+ --salt-shadow-200-color: rgba(0, 0, 0, 0.1);
1007
+ --salt-shadow-300-color: rgba(0, 0, 0, 0.15);
1008
+ --salt-shadow-400-color: rgba(0, 0, 0, 0.2);
1009
+ --salt-shadow-500-color: rgba(0, 0, 0, 0.3);
1010
+ }
1011
+ .salt-theme[data-mode=dark] {
1012
+ --salt-shadow-100-color: rgba(0, 0, 0, 0.5);
1013
+ --salt-shadow-200-color: rgba(0, 0, 0, 0.5);
1014
+ --salt-shadow-300-color: rgba(0, 0, 0, 0.55);
1015
+ --salt-shadow-400-color: rgba(0, 0, 0, 0.55);
1016
+ --salt-shadow-500-color: rgba(0, 0, 0, 0.65);
1017
+ }
1018
+ .salt-theme {
1019
+ --salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color);
1020
+ --salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color);
1021
+ --salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color);
1022
+ --salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color);
1023
+ --salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color);
1024
+ }
1025
+
1026
+ /* css/foundations/size.css */
1027
+ .salt-density-high {
1028
+ --salt-size-adornment: 6px;
1029
+ --salt-size-bar: 2px;
1030
+ --salt-size-base: 20px;
1031
+ --salt-size-icon: 10px;
1032
+ --salt-size-indicator: 2px;
1033
+ --salt-size-selectable: 12px;
1034
+ --salt-size-bar-strong: 4px;
1035
+ }
1036
+ .salt-density-medium {
1037
+ --salt-size-adornment: 8px;
1038
+ --salt-size-bar: 4px;
1039
+ --salt-size-base: 28px;
1040
+ --salt-size-icon: 12px;
1041
+ --salt-size-indicator: 3px;
1042
+ --salt-size-selectable: 14px;
1043
+ --salt-size-bar-strong: 8px;
1044
+ }
1045
+ .salt-density-low {
1046
+ --salt-size-adornment: 10px;
1047
+ --salt-size-bar: 6px;
1048
+ --salt-size-base: 36px;
1049
+ --salt-size-icon: 14px;
1050
+ --salt-size-indicator: 4px;
1051
+ --salt-size-selectable: 16px;
1052
+ --salt-size-bar-strong: 12px;
1053
+ }
1054
+ .salt-density-touch {
1055
+ --salt-size-adornment: 12px;
1056
+ --salt-size-bar: 8px;
1057
+ --salt-size-base: 44px;
1058
+ --salt-size-icon: 16px;
1059
+ --salt-size-indicator: 5px;
1060
+ --salt-size-selectable: 18px;
1061
+ --salt-size-bar-strong: 16px;
1062
+ }
1063
+ .salt-density-touch,
1064
+ .salt-density-low,
1065
+ .salt-density-medium,
1066
+ .salt-density-high {
1067
+ --salt-size-fixed-100: 1px;
1068
+ --salt-size-fixed-200: 2px;
1069
+ --salt-size-fixed-300: 3px;
1070
+ --salt-size-fixed-400: 4px;
1071
+ --salt-size-fixed-500: 5px;
1072
+ --salt-size-fixed-600: 6px;
1073
+ --salt-size-fixed-700: 7px;
1074
+ --salt-size-fixed-800: 8px;
1075
+ --salt-size-fixed-900: 9px;
1076
+ }
1077
+
1078
+ /* css/foundations/spacing.css */
1079
+ .salt-density-touch {
1080
+ --salt-spacing-100: 16px;
1081
+ }
1082
+ .salt-density-low {
1083
+ --salt-spacing-100: 12px;
1084
+ }
1085
+ .salt-density-medium {
1086
+ --salt-spacing-100: 8px;
1087
+ }
1088
+ .salt-density-high {
1089
+ --salt-spacing-100: 4px;
1090
+ }
1091
+ .salt-density-touch,
1092
+ .salt-density-low,
1093
+ .salt-density-medium,
1094
+ .salt-density-high {
1095
+ --salt-spacing-25: calc(0.25 * var(--salt-spacing-100));
1096
+ --salt-spacing-50: calc(0.5 * var(--salt-spacing-100));
1097
+ --salt-spacing-75: calc(0.75 * var(--salt-spacing-100));
1098
+ --salt-spacing-150: calc(1.5 * var(--salt-spacing-100));
1099
+ --salt-spacing-200: calc(2 * var(--salt-spacing-100));
1100
+ --salt-spacing-250: calc(2.5 * var(--salt-spacing-100));
1101
+ --salt-spacing-300: calc(3 * var(--salt-spacing-100));
1102
+ --salt-spacing-350: calc(3.5 * var(--salt-spacing-100));
1103
+ --salt-spacing-400: calc(4 * var(--salt-spacing-100));
1104
+ --salt-spacing-450: calc(4.5 * var(--salt-spacing-100));
1105
+ --salt-spacing-500: calc(5 * var(--salt-spacing-100));
1106
+ --salt-spacing-550: calc(5.5 * var(--salt-spacing-100));
1107
+ --salt-spacing-600: calc(6 * var(--salt-spacing-100));
1108
+ --salt-spacing-650: calc(6.5 * var(--salt-spacing-100));
1109
+ --salt-spacing-700: calc(7 * var(--salt-spacing-100));
1110
+ --salt-spacing-750: calc(7.5 * var(--salt-spacing-100));
1111
+ --salt-spacing-800: calc(8 * var(--salt-spacing-100));
1112
+ --salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
1113
+ --salt-spacing-900: calc(9 * var(--salt-spacing-100));
1114
+ --salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
1115
+ --salt-spacing-fixed-100: 1px;
1116
+ --salt-spacing-fixed-200: 2px;
1117
+ --salt-spacing-fixed-300: 3px;
1118
+ --salt-spacing-fixed-400: 4px;
1119
+ --salt-spacing-fixed-500: 5px;
1120
+ --salt-spacing-fixed-600: 6px;
1121
+ --salt-spacing-fixed-700: 7px;
1122
+ --salt-spacing-fixed-800: 8px;
1123
+ --salt-spacing-fixed-900: 9px;
1124
+ }
1125
+
1126
+ /* css/foundations/typography.css */
1127
+ .salt-theme {
1128
+ --salt-typography-fontFamily-openSans: "Open Sans";
1129
+ --salt-typography-fontFamily-amplitude: "Amplitude";
1130
+ --salt-typography-fontFamily-ptMono: "PT Mono";
1131
+ --salt-typography-fontWeight-light: 300;
1132
+ --salt-typography-fontWeight-regular: 400;
1133
+ --salt-typography-fontWeight-medium: 500;
1134
+ --salt-typography-fontWeight-semiBold: 600;
1135
+ --salt-typography-fontWeight-bold: 700;
1136
+ --salt-typography-fontWeight-extraBold: 800;
1137
+ --salt-typography-textDecoration-none: none;
1138
+ --salt-typography-textDecoration-underline: underline;
1139
+ }
1140
+
1141
+ /* css/foundations/zindex.css */
1142
+ .salt-density-touch,
1143
+ .salt-density-low,
1144
+ .salt-density-medium,
1145
+ .salt-density-high {
1146
+ --salt-zIndex-default: 1;
1147
+ --salt-zIndex-popout: 1000;
1148
+ --salt-zIndex-appHeader: 1100;
1149
+ --salt-zIndex-drawer: 1200;
1150
+ --salt-zIndex-modal: 1300;
1151
+ --salt-zIndex-notification: 1400;
1152
+ --salt-zIndex-dragObject: 1420;
1153
+ --salt-zIndex-contextMenu: 1450;
1154
+ --salt-zIndex-flyover: 1500;
1659
1155
  }
1660
1156
 
1661
- /* css/legacy/palette/alpha.css */
1662
- .salt-theme[data-mode=light][data-brand=legacy] {
1157
+ /* css/palette/alpha.css */
1158
+ .salt-theme[data-mode=light] {
1663
1159
  --salt-palette-alpha-highest: var(--salt-color-white-80a);
1664
1160
  --salt-palette-alpha-higher: var(--salt-color-white-65a);
1665
1161
  --salt-palette-alpha-high: var(--salt-color-white-50a);
@@ -1680,7 +1176,7 @@
1680
1176
  --salt-palette-alpha-contrast-lowest: var(--salt-color-black-5a);
1681
1177
  --salt-palette-alpha-none: transparent;
1682
1178
  }
1683
- .salt-theme[data-mode=dark][data-brand=legacy] {
1179
+ .salt-theme[data-mode=dark] {
1684
1180
  --salt-palette-alpha-highest: var(--salt-color-black-80a);
1685
1181
  --salt-palette-alpha-higher: var(--salt-color-black-65a);
1686
1182
  --salt-palette-alpha-high: var(--salt-color-black-50a);
@@ -1702,8 +1198,42 @@
1702
1198
  --salt-palette-alpha-none: transparent;
1703
1199
  }
1704
1200
 
1705
- /* css/legacy/palette/categorical.css */
1706
- .salt-theme[data-mode=light][data-brand=legacy] {
1201
+ /* css/palette/accent.css */
1202
+ .salt-theme[data-mode=light] {
1203
+ --salt-palette-accent: var(--salt-color-blue-500);
1204
+ --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
1205
+ --salt-palette-accent-foreground: var(--salt-color-white);
1206
+ --salt-palette-accent-foreground-informative: var(--salt-color-blue-600);
1207
+ --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-600-40a);
1208
+ }
1209
+ .salt-theme[data-mode=dark] {
1210
+ --salt-palette-accent: var(--salt-color-blue-500);
1211
+ --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
1212
+ --salt-palette-accent-foreground: var(--salt-color-white);
1213
+ --salt-palette-accent-foreground-informative: var(--salt-color-blue-200);
1214
+ --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-200-40a);
1215
+ }
1216
+
1217
+ /* css/palette/error.css */
1218
+ .salt-theme[data-mode=light] {
1219
+ --salt-palette-error-background: var(--salt-color-red-10);
1220
+ --salt-palette-error-bold-background: var(--salt-color-red-500);
1221
+ --salt-palette-error-background-selected: var(--salt-color-red-20);
1222
+ --salt-palette-error-border: var(--salt-color-red-500);
1223
+ --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
1224
+ --salt-palette-error-foreground-informative: var(--salt-color-red-600);
1225
+ }
1226
+ .salt-theme[data-mode=dark] {
1227
+ --salt-palette-error-background: var(--salt-color-red-900);
1228
+ --salt-palette-error-bold-background: var(--salt-color-red-500);
1229
+ --salt-palette-error-background-selected: var(--salt-color-red-900);
1230
+ --salt-palette-error-border: var(--salt-color-red-400);
1231
+ --salt-palette-error-foreground-decorative: var(--salt-color-red-400);
1232
+ --salt-palette-error-foreground-informative: var(--salt-color-red-200);
1233
+ }
1234
+
1235
+ /* css/palette/categorical.css */
1236
+ .salt-theme[data-mode=light] {
1707
1237
  --salt-palette-categorical-1: var(--salt-color-cobalt-500);
1708
1238
  --salt-palette-categorical-1-strong: var(--salt-color-cobalt-600);
1709
1239
  --salt-palette-categorical-1-weakest: var(--salt-color-cobalt-100);
@@ -1765,7 +1295,7 @@
1765
1295
  --salt-palette-categorical-20-strong: var(--salt-color-forest-600);
1766
1296
  --salt-palette-categorical-20-weakest: var(--salt-color-forest-100);
1767
1297
  }
1768
- .salt-theme[data-mode=dark][data-brand=legacy] {
1298
+ .salt-theme[data-mode=dark] {
1769
1299
  --salt-palette-categorical-1: var(--salt-color-cobalt-500);
1770
1300
  --salt-palette-categorical-1-strong: var(--salt-color-cobalt-400);
1771
1301
  --salt-palette-categorical-1-weakest: var(--salt-color-cobalt-900);
@@ -1828,9 +1358,8 @@
1828
1358
  --salt-palette-categorical-20-weakest: var(--salt-color-forest-900);
1829
1359
  }
1830
1360
 
1831
- /* css/legacy/palette/corner.css */
1832
- .salt-theme.salt-theme-next[data-corner=sharp],
1833
- .salt-theme[data-brand=legacy] {
1361
+ /* css/palette/corner.css */
1362
+ .salt-theme {
1834
1363
  --salt-palette-corner-weaker: var(--salt-curve-0);
1835
1364
  --salt-palette-corner-weak: var(--salt-curve-0);
1836
1365
  --salt-palette-corner: var(--salt-curve-0);
@@ -1838,42 +1367,16 @@
1838
1367
  --salt-palette-corner-stronger: var(--salt-curve-0);
1839
1368
  --salt-palette-corner-strongest: var(--salt-curve-999);
1840
1369
  }
1841
- .salt-theme.salt-theme-next[data-corner=rounded] {
1842
- --salt-palette-corner-weaker: var(--salt-curve-50);
1843
- --salt-palette-corner-weak: var(--salt-curve-100);
1844
- --salt-palette-corner: var(--salt-curve-150);
1845
- --salt-palette-corner-strong: var(--salt-curve-200);
1846
- --salt-palette-corner-stronger: var(--salt-curve-250);
1847
- --salt-palette-corner-strongest: var(--salt-curve-999);
1848
- }
1849
-
1850
- /* css/legacy/palette/error.css */
1851
- .salt-theme[data-mode=light][data-brand=legacy] {
1852
- --salt-palette-error-background: var(--salt-color-red-10);
1853
- --salt-palette-error-bold-background: var(--salt-color-red-500);
1854
- --salt-palette-error-background-selected: var(--salt-color-red-20);
1855
- --salt-palette-error-border: var(--salt-color-red-500);
1856
- --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
1857
- --salt-palette-error-foreground-informative: var(--salt-color-red-600);
1858
- }
1859
- .salt-theme[data-mode=dark][data-brand=legacy] {
1860
- --salt-palette-error-background: var(--salt-color-red-900);
1861
- --salt-palette-error-bold-background: var(--salt-color-red-500);
1862
- --salt-palette-error-background-selected: var(--salt-color-red-900);
1863
- --salt-palette-error-border: var(--salt-color-red-400);
1864
- --salt-palette-error-foreground-decorative: var(--salt-color-red-400);
1865
- --salt-palette-error-foreground-informative: var(--salt-color-red-200);
1866
- }
1867
1370
 
1868
- /* css/legacy/palette/info.css */
1869
- .salt-theme[data-mode=light][data-brand=legacy] {
1371
+ /* css/palette/info.css */
1372
+ .salt-theme[data-mode=light] {
1870
1373
  --salt-palette-info-background: var(--salt-color-blue-10);
1871
1374
  --salt-palette-info-bold-background: var(--salt-color-blue-500);
1872
1375
  --salt-palette-info-border: var(--salt-color-blue-500);
1873
1376
  --salt-palette-info-foreground-decorative: var(--salt-color-blue-500);
1874
1377
  --salt-palette-info-foreground-informative: var(--salt-color-blue-600);
1875
1378
  }
1876
- .salt-theme[data-mode=dark][data-brand=legacy] {
1379
+ .salt-theme[data-mode=dark] {
1877
1380
  --salt-palette-info-background: var(--salt-color-blue-900);
1878
1381
  --salt-palette-info-bold-background: var(--salt-color-blue-500);
1879
1382
  --salt-palette-info-border: var(--salt-color-blue-400);
@@ -1881,8 +1384,8 @@
1881
1384
  --salt-palette-info-foreground-informative: var(--salt-color-blue-200);
1882
1385
  }
1883
1386
 
1884
- /* css/legacy/palette/interact.css */
1885
- .salt-theme[data-mode=light][data-brand=legacy] {
1387
+ /* css/palette/interact.css */
1388
+ .salt-theme[data-mode=light] {
1886
1389
  --salt-palette-interact-background-hover: var(--salt-color-blue-10);
1887
1390
  --salt-palette-interact-background-active: var(--salt-color-blue-30);
1888
1391
  --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-40a);
@@ -1921,7 +1424,7 @@
1921
1424
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-40a);
1922
1425
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
1923
1426
  }
1924
- .salt-theme[data-mode=dark][data-brand=legacy] {
1427
+ .salt-theme[data-mode=dark] {
1925
1428
  --salt-palette-interact-background-active: var(--salt-color-blue-700);
1926
1429
  --salt-palette-interact-background-hover: var(--salt-color-blue-800);
1927
1430
  --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-700-40a);
@@ -1961,20 +1464,20 @@
1961
1464
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
1962
1465
  }
1963
1466
 
1964
- /* css/legacy/palette/navigate.css */
1965
- .salt-theme[data-mode=light][data-brand=legacy] {
1467
+ /* css/palette/navigate.css */
1468
+ .salt-theme[data-mode=light] {
1966
1469
  --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
1967
1470
  --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
1968
1471
  --salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
1969
1472
  }
1970
- .salt-theme[data-mode=dark][data-brand=legacy] {
1473
+ .salt-theme[data-mode=dark] {
1971
1474
  --salt-palette-navigate-foreground-visited: var(--salt-color-purple-100);
1972
1475
  --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
1973
1476
  --salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
1974
1477
  }
1975
1478
 
1976
- /* css/legacy/palette/negative.css */
1977
- .salt-theme[data-brand=legacy][data-mode=light] {
1479
+ /* css/palette/negative.css */
1480
+ .salt-theme[data-mode=light] {
1978
1481
  --salt-palette-negative-foreground: var(--salt-color-red-600);
1979
1482
  --salt-palette-negative-foreground-disabled: var(--salt-color-red-600-40a);
1980
1483
  --salt-palette-negative-background: var(--salt-color-red-600);
@@ -1984,7 +1487,7 @@
1984
1487
  --salt-palette-negative-border: var(--salt-color-red-500);
1985
1488
  --salt-palette-negative-border-disabled: var(--salt-color-red-500-40a);
1986
1489
  }
1987
- .salt-theme[data-brand=legacy][data-mode=dark] {
1490
+ .salt-theme[data-mode=dark] {
1988
1491
  --salt-palette-negative-foreground: var(--salt-color-red-200);
1989
1492
  --salt-palette-negative-foreground-disabled: var(--salt-color-red-200-40a);
1990
1493
  --salt-palette-negative-background: var(--salt-color-red-600);
@@ -1995,8 +1498,8 @@
1995
1498
  --salt-palette-negative-border-disabled: var(--salt-color-red-500-40a);
1996
1499
  }
1997
1500
 
1998
- /* css/legacy/palette/neutral.css */
1999
- .salt-theme[data-mode=light][data-brand=legacy] {
1501
+ /* css/palette/neutral.css */
1502
+ .salt-theme[data-mode=light] {
2000
1503
  --salt-palette-neutral-border: var(--salt-color-gray-50);
2001
1504
  --salt-palette-neutral-border-disabled: var(--salt-color-gray-50-40a);
2002
1505
  --salt-palette-neutral-primary-background: var(--salt-color-white);
@@ -2010,7 +1513,7 @@
2010
1513
  --salt-palette-neutral-tertiary-background: var(--salt-color-gray-30);
2011
1514
  --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-30-40a);
2012
1515
  }
2013
- .salt-theme[data-mode=dark][data-brand=legacy] {
1516
+ .salt-theme[data-mode=dark] {
2014
1517
  --salt-palette-neutral-border: var(--salt-color-gray-300);
2015
1518
  --salt-palette-neutral-border-disabled: var(--salt-color-gray-300-40a);
2016
1519
  --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
@@ -2025,8 +1528,8 @@
2025
1528
  --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-500-40a);
2026
1529
  }
2027
1530
 
2028
- /* css/legacy/palette/positive.css */
2029
- .salt-theme[data-mode=light][data-brand=legacy] {
1531
+ /* css/palette/positive.css */
1532
+ .salt-theme[data-mode=light] {
2030
1533
  --salt-palette-positive-foreground: var(--salt-color-green-600);
2031
1534
  --salt-palette-positive-foreground-disabled: var(--salt-color-green-600-40a);
2032
1535
  --salt-palette-positive-background: var(--salt-color-green-600);
@@ -2036,7 +1539,7 @@
2036
1539
  --salt-palette-positive-border: var(--salt-color-green-500);
2037
1540
  --salt-palette-positive-border-disabled: var(--salt-color-green-500-40a);
2038
1541
  }
2039
- .salt-theme[data-mode=dark][data-brand=legacy] {
1542
+ .salt-theme[data-mode=dark] {
2040
1543
  --salt-palette-positive-foreground: var(--salt-color-green-200);
2041
1544
  --salt-palette-positive-foreground-disabled: var(--salt-color-green-200-40a);
2042
1545
  --salt-palette-positive-background: var(--salt-color-green-600);
@@ -2047,8 +1550,8 @@
2047
1550
  --salt-palette-positive-border-disabled: var(--salt-color-green-500-40a);
2048
1551
  }
2049
1552
 
2050
- /* css/legacy/palette/success.css */
2051
- .salt-theme[data-mode=light][data-brand=legacy] {
1553
+ /* css/palette/success.css */
1554
+ .salt-theme[data-mode=light] {
2052
1555
  --salt-palette-success-background: var(--salt-color-green-10);
2053
1556
  --salt-palette-success-bold-background: var(--salt-color-green-500);
2054
1557
  --salt-palette-success-background-selected: var(--salt-color-green-20);
@@ -2056,7 +1559,7 @@
2056
1559
  --salt-palette-success-foreground-decorative: var(--salt-color-green-500);
2057
1560
  --salt-palette-success-foreground-informative: var(--salt-color-green-600);
2058
1561
  }
2059
- .salt-theme[data-mode=dark][data-brand=legacy] {
1562
+ .salt-theme[data-mode=dark] {
2060
1563
  --salt-palette-success-background: var(--salt-color-green-900);
2061
1564
  --salt-palette-success-bold-background: var(--salt-color-green-500);
2062
1565
  --salt-palette-success-background-selected: var(--salt-color-green-900);
@@ -2065,9 +1568,8 @@
2065
1568
  --salt-palette-success-foreground-informative: var(--salt-color-green-200);
2066
1569
  }
2067
1570
 
2068
- /* css/legacy/palette/text.css */
2069
- .salt-theme[data-heading-font="Open Sans"],
2070
- .salt-theme[data-brand=legacy] {
1571
+ /* css/palette/text.css */
1572
+ .salt-theme {
2071
1573
  --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
2072
1574
  --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
2073
1575
  --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
@@ -2088,38 +1590,9 @@
2088
1590
  --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
2089
1591
  --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2090
1592
  }
2091
- .salt-theme.salt-theme-next[data-heading-font=Amplitude] {
2092
- --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
2093
- --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-amplitude);
2094
- --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
2095
- --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-amplitude);
2096
- --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-medium);
2097
- --salt-palette-text-action-fontWeight-small: var(--salt-typography-fontWeight-regular);
2098
- --salt-palette-text-action-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2099
- --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-medium);
2100
- --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2101
- --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
2102
- --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-medium);
2103
- --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
2104
- --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2105
- --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular);
2106
- --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light);
2107
- --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
2108
- --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
2109
- --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
2110
- --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2111
- }
2112
- .salt-theme.salt-theme-next[data-action-font="Open Sans"] {
2113
- --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
2114
- --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
2115
- }
2116
- .salt-theme.salt-theme-next[data-action-font=Amplitude] {
2117
- --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-amplitude);
2118
- --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-medium);
2119
- }
2120
1593
 
2121
- /* css/legacy/palette/warning.css */
2122
- .salt-theme[data-mode=light][data-brand=legacy] {
1594
+ /* css/palette/warning.css */
1595
+ .salt-theme[data-mode=light] {
2123
1596
  --salt-palette-warning-background: var(--salt-color-orange-10);
2124
1597
  --salt-palette-warning-bold-background: var(--salt-color-orange-800);
2125
1598
  --salt-palette-warning-background-selected: var(--salt-color-orange-20);
@@ -2135,7 +1608,7 @@
2135
1608
  --salt-palette-warning-action-foreground: var(--salt-color-gray-900);
2136
1609
  --salt-palette-warning-action-foreground-disabled: var(--salt-color-gray-900-40a);
2137
1610
  }
2138
- .salt-theme[data-mode=dark][data-brand=legacy] {
1611
+ .salt-theme[data-mode=dark] {
2139
1612
  --salt-palette-warning-background: var(--salt-color-orange-900);
2140
1613
  --salt-palette-warning-bold-background: var(--salt-color-orange-800);
2141
1614
  --salt-palette-warning-background-selected: var(--salt-color-orange-900);
@@ -2152,8 +1625,8 @@
2152
1625
  --salt-palette-warning-action-foreground-disabled: var(--salt-color-gray-900-40a);
2153
1626
  }
2154
1627
 
2155
- /* css/legacy/characteristics/accent.css */
2156
- .salt-theme[data-brand=legacy] {
1628
+ /* css/characteristics/accent.css */
1629
+ .salt-theme {
2157
1630
  --salt-accent-background: var(--salt-palette-accent);
2158
1631
  --salt-accent-background-disabled: var(--salt-palette-accent-disabled);
2159
1632
  --salt-accent-borderColor: var(--salt-palette-accent);
@@ -2161,8 +1634,8 @@
2161
1634
  --salt-accent-foreground: var(--salt-palette-accent-foreground);
2162
1635
  }
2163
1636
 
2164
- /* css/legacy/characteristics/actionable.css */
2165
- .salt-theme[data-brand=legacy] {
1637
+ /* css/characteristics/actionable.css */
1638
+ .salt-theme {
2166
1639
  --salt-actionable-accented-bold-background-active: var(--salt-palette-interact-cta-background-active);
2167
1640
  --salt-actionable-accented-bold-background-disabled: var(--salt-palette-interact-cta-background-disabled);
2168
1641
  --salt-actionable-accented-bold-background-hover: var(--salt-palette-interact-cta-background-hover);
@@ -2345,8 +1818,8 @@
2345
1818
  --salt-actionable-caution-subtle-foreground: var(--salt-palette-warning-foreground-informative);
2346
1819
  }
2347
1820
 
2348
- /* css/legacy/characteristics/category.css */
2349
- .salt-theme[data-brand=legacy] {
1821
+ /* css/characteristics/category.css */
1822
+ .salt-theme {
2350
1823
  --salt-category-1-subtle-foreground: var(--salt-palette-categorical-1-strong);
2351
1824
  --salt-category-1-subtle-background: var(--salt-palette-categorical-1-weakest);
2352
1825
  --salt-category-1-subtle-borderColor: var(--salt-palette-categorical-1);
@@ -2449,8 +1922,8 @@
2449
1922
  --salt-category-20-bold-background: var(--salt-palette-categorical-20);
2450
1923
  }
2451
1924
 
2452
- /* css/legacy/characteristics/container.css */
2453
- .salt-theme[data-brand=legacy] {
1925
+ /* css/characteristics/container.css */
1926
+ .salt-theme {
2454
1927
  --salt-container-primary-background: var(--salt-palette-neutral-primary-background);
2455
1928
  --salt-container-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
2456
1929
  --salt-container-primary-borderColor: var(--salt-palette-neutral-border);
@@ -2467,24 +1940,14 @@
2467
1940
  --salt-container-ghost-borderColor: var(--salt-palette-alpha-contrast-medium);
2468
1941
  }
2469
1942
 
2470
- /* css/legacy/characteristics/content.css */
2471
- .salt-theme[data-brand=legacy] {
2472
- --salt-content-primary-foreground: var(--salt-palette-neutral-primary-foreground);
2473
- --salt-content-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
2474
- --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
2475
- --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
2476
- --salt-content-accent-foreground: var(--salt-palette-accent-foreground-informative);
2477
- --salt-content-attention-foreground: var(--salt-palette-negative-foreground);
2478
- --salt-content-bold-foreground: var(--salt-palette-interact-cta-foreground);
2479
- --salt-content-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
2480
- --salt-content-foreground-hover: var(--salt-palette-accent-foreground-informative);
2481
- --salt-content-foreground-active: var(--salt-palette-accent-foreground-informative);
2482
- --salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);
2483
- --salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
1943
+ /* css/characteristics/target.css */
1944
+ .salt-theme {
1945
+ --salt-target-background-hover: var(--salt-palette-interact-background-hover);
1946
+ --salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);
2484
1947
  }
2485
1948
 
2486
- /* css/legacy/characteristics/editable.css */
2487
- .salt-theme[data-brand=legacy] {
1949
+ /* css/characteristics/editable.css */
1950
+ .salt-theme {
2488
1951
  --salt-editable-borderColor: var(--salt-palette-interact-border);
2489
1952
  --salt-editable-borderColor-active: var(--salt-palette-interact-border-active);
2490
1953
  --salt-editable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
@@ -2502,26 +1965,9 @@
2502
1965
  --salt-editable-secondary-background-readonly: var(--salt-palette-alpha-none);
2503
1966
  --salt-editable-help-fontStyle: italic;
2504
1967
  }
2505
- .salt-theme[data-brand=legacy] {
2506
- --salt-editable-borderColor: var(--salt-palette-neutral);
2507
- --salt-editable-borderColor-active: var(--salt-palette-accent-stronger);
2508
- --salt-editable-borderColor-disabled: var(--salt-palette-neutral-disabled);
2509
- --salt-editable-borderColor-hover: var(--salt-palette-accent);
2510
- --salt-editable-borderColor-readonly: var(--salt-palette-neutral-readonly);
2511
- --salt-editable-primary-background: var(--salt-palette-background-primary);
2512
- --salt-editable-primary-background-active: var(--salt-palette-background-primary);
2513
- --salt-editable-primary-background-disabled: var(--salt-palette-background-primary-disabled);
2514
- --salt-editable-primary-background-hover: var(--salt-palette-background-primary);
2515
- --salt-editable-primary-background-readonly: var(--salt-palette-alpha-none);
2516
- --salt-editable-secondary-background: var(--salt-palette-background-secondary);
2517
- --salt-editable-secondary-background-active: var(--salt-palette-background-secondary);
2518
- --salt-editable-secondary-background-disabled: var(--salt-palette-background-secondary-disabled);
2519
- --salt-editable-secondary-background-hover: var(--salt-palette-background-secondary);
2520
- --salt-editable-secondary-background-readonly: var(--salt-palette-alpha-none);
2521
- }
2522
1968
 
2523
- /* css/legacy/characteristics/focused.css */
2524
- .salt-theme[data-brand=legacy] {
1969
+ /* css/characteristics/focused.css */
1970
+ .salt-theme {
2525
1971
  --salt-focused-outlineColor: var(--salt-palette-interact-outline);
2526
1972
  --salt-focused-outlineStyle: var(--salt-borderStyle-dotted);
2527
1973
  --salt-focused-outlineWidth: var(--salt-size-fixed-200);
@@ -2529,9 +1975,20 @@
2529
1975
  --salt-focused-outlineOffset: 0;
2530
1976
  --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
2531
1977
  }
1978
+ .saltFocusVisible:after,
1979
+ .focused:focus:after,
1980
+ .focused:focus-visible:after {
1981
+ content: "";
1982
+ inset: var(--salt-focused-outlineInset);
1983
+ outline-color: var(--salt-focused-outlineColor);
1984
+ outline-offset: var(--salt-focused-outlineOffset);
1985
+ outline-style: var(--salt-focused-outlineStyle);
1986
+ outline-width: var(--salt-focused-outlineWidth);
1987
+ position: absolute;
1988
+ }
2532
1989
 
2533
- /* css/legacy/characteristics/navigable.css */
2534
- .salt-theme[data-brand=legacy] {
1990
+ /* css/characteristics/navigable.css */
1991
+ .salt-theme {
2535
1992
  --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
2536
1993
  --salt-navigable-accent-indicator-active: var(--salt-palette-navigate-indicator-active);
2537
1994
  --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
@@ -2539,8 +1996,8 @@
2539
1996
  --salt-navigable-accent-borderColor-active: var(--salt-palette-interact-border-active);
2540
1997
  }
2541
1998
 
2542
- /* css/legacy/characteristics/overlayable.css */
2543
- .salt-theme[data-brand=legacy] {
1999
+ /* css/characteristics/overlayable.css */
2000
+ .salt-theme {
2544
2001
  --salt-overlayable-shadow-scroll: var(--salt-shadow-100);
2545
2002
  --salt-overlayable-shadow-region: var(--salt-shadow-200);
2546
2003
  --salt-overlayable-shadow: var(--salt-shadow-200);
@@ -2548,19 +2005,19 @@
2548
2005
  --salt-overlayable-shadow-popout: var(--salt-shadow-400);
2549
2006
  --salt-overlayable-shadow-drag: var(--salt-shadow-400);
2550
2007
  --salt-overlayable-shadow-modal: var(--salt-shadow-500);
2551
- --salt-overlayable-background: var(--salt-palette-alpha-high);
2552
- --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-low);
2553
- --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-lower);
2008
+ --salt-overlayable-background: var(--salt-palette-alpha-higher);
2009
+ --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-medium);
2010
+ --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-mediumLow);
2554
2011
  }
2555
2012
 
2556
- /* css/legacy/characteristics/selectable.css */
2557
- .salt-theme[data-brand=legacy] {
2013
+ /* css/characteristics/selectable.css */
2014
+ .salt-theme {
2558
2015
  --salt-selectable-borderColor: var(--salt-palette-interact-border);
2559
2016
  --salt-selectable-borderColor-hover: var(--salt-palette-interact-border-hover);
2560
2017
  --salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
2561
2018
  --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);
2562
2019
  --salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
2563
- --salt-selectable-borderColor-readonly: var(--salt-palette-interact-border-readonly);
2020
+ --salt-selectable-borderColor-readonly: var(--salt-palette-interact-border);
2564
2021
  --salt-selectable-foreground: var(--salt-palette-interact-foreground);
2565
2022
  --salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
2566
2023
  --salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);
@@ -2573,8 +2030,8 @@
2573
2030
  --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
2574
2031
  }
2575
2032
 
2576
- /* css/legacy/characteristics/sentiment.css */
2577
- .salt-theme[data-brand=legacy] {
2033
+ /* css/characteristics/sentiment.css */
2034
+ .salt-theme {
2578
2035
  --salt-sentiment-negative-foreground-informative: var(--salt-palette-negative-foreground);
2579
2036
  --salt-sentiment-positive-foreground-informative: var(--salt-palette-positive-foreground);
2580
2037
  --salt-sentiment-negative-foreground-decorative: var(--salt-palette-negative-foreground);
@@ -2583,8 +2040,8 @@
2583
2040
  --salt-sentiment-neutral-track-disabled: var(--salt-palette-neutral-border-disabled);
2584
2041
  }
2585
2042
 
2586
- /* css/legacy/characteristics/separable.css */
2587
- .salt-theme[data-brand=legacy] {
2043
+ /* css/characteristics/separable.css */
2044
+ .salt-theme {
2588
2045
  --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumHigh);
2589
2046
  --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-medium);
2590
2047
  --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-contrast-mediumLow);
@@ -2596,196 +2053,539 @@
2596
2053
  --salt-separable-background-active: var(--salt-palette-accent);
2597
2054
  }
2598
2055
 
2599
- /* css/legacy/characteristics/status.css */
2600
- .salt-theme[data-brand=legacy] {
2601
- --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
2602
- --salt-status-error-foreground-informative: var(--salt-palette-error-foreground-informative);
2603
- --salt-status-error-background: var(--salt-palette-error-background);
2604
- --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
2605
- --salt-status-error-bold-background: var(--salt-palette-error-bold-background);
2606
- --salt-status-error-borderColor: var(--salt-palette-error-border);
2607
- --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
2608
- --salt-status-info-foreground-informative: var(--salt-palette-info-foreground-informative);
2609
- --salt-status-info-background: var(--salt-palette-info-background);
2610
- --salt-status-info-bold-background: var(--salt-palette-info-bold-background);
2611
- --salt-status-info-borderColor: var(--salt-palette-info-border);
2612
- --salt-status-success-foreground-decorative: var(--salt-palette-success-foreground-decorative);
2613
- --salt-status-success-foreground-informative: var(--salt-palette-success-foreground-informative);
2614
- --salt-status-success-background: var(--salt-palette-success-background);
2615
- --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
2616
- --salt-status-success-bold-background: var(--salt-palette-success-bold-background);
2617
- --salt-status-success-borderColor: var(--salt-palette-success-border);
2618
- --salt-status-warning-foreground-decorative: var(--salt-palette-warning-foreground-decorative);
2619
- --salt-status-warning-foreground-informative: var(--salt-palette-warning-foreground-informative);
2620
- --salt-status-warning-background: var(--salt-palette-warning-background);
2621
- --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
2622
- --salt-status-warning-bold-background: var(--salt-palette-warning-bold-background);
2623
- --salt-status-warning-borderColor: var(--salt-palette-warning-border);
2056
+ /* css/characteristics/status.css */
2057
+ .salt-theme {
2058
+ --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
2059
+ --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
2060
+ --salt-status-warning-foreground-decorative: var(--salt-palette-warning-foreground-decorative);
2061
+ --salt-status-success-foreground-decorative: var(--salt-palette-success-foreground-decorative);
2062
+ --salt-status-info-foreground-informative: var(--salt-palette-info-foreground-informative);
2063
+ --salt-status-error-foreground-informative: var(--salt-palette-error-foreground-informative);
2064
+ --salt-status-warning-foreground-informative: var(--salt-palette-warning-foreground-informative);
2065
+ --salt-status-success-foreground-informative: var(--salt-palette-success-foreground-informative);
2066
+ --salt-status-info-borderColor: var(--salt-palette-info-border);
2067
+ --salt-status-error-borderColor: var(--salt-palette-error-border);
2068
+ --salt-status-warning-borderColor: var(--salt-palette-warning-border);
2069
+ --salt-status-success-borderColor: var(--salt-palette-success-border);
2070
+ --salt-status-info-background: var(--salt-palette-info-background);
2071
+ --salt-status-error-background: var(--salt-palette-error-background);
2072
+ --salt-status-warning-background: var(--salt-palette-warning-background);
2073
+ --salt-status-success-background: var(--salt-palette-success-background);
2074
+ --salt-status-info-bold-background: var(--salt-palette-info-bold-background);
2075
+ --salt-status-error-bold-background: var(--salt-palette-error-bold-background);
2076
+ --salt-status-warning-bold-background: var(--salt-palette-warning-bold-background);
2077
+ --salt-status-success-bold-background: var(--salt-palette-success-bold-background);
2078
+ --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
2079
+ --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
2080
+ --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
2081
+ }
2082
+
2083
+ /* css/characteristics/text.css */
2084
+ .salt-theme {
2085
+ --salt-text-letterSpacing: 0;
2086
+ --salt-text-textAlign: left;
2087
+ --salt-text-textAlign-embedded: center;
2088
+ --salt-text-action-fontFamily: var(--salt-palette-text-fontFamily-action);
2089
+ --salt-text-action-letterSpacing: 0.6px;
2090
+ --salt-text-action-textTransform: uppercase;
2091
+ --salt-text-action-textAlign: center;
2092
+ --salt-text-action-fontWeight: var(--salt-palette-text-action-fontWeight);
2093
+ --salt-text-action-fontWeight-small: var(--salt-palette-text-action-fontWeight-small);
2094
+ --salt-text-action-fontWeight-strong: var(--salt-palette-text-action-fontWeight-strong);
2095
+ --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
2096
+ --salt-text-fontWeight: var(--salt-palette-text-body-fontWeight);
2097
+ --salt-text-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
2098
+ --salt-text-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
2099
+ --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
2100
+ --salt-text-notation-fontWeight: var(--salt-palette-text-notation-fontWeight);
2101
+ --salt-text-notation-fontWeight-small: var(--salt-palette-text-notation-fontWeight-small);
2102
+ --salt-text-notation-fontWeight-strong: var(--salt-palette-text-notation-fontWeight-strong);
2103
+ --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
2104
+ --salt-text-h1-fontWeight: var(--salt-palette-text-heading-fontWeight);
2105
+ --salt-text-h1-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
2106
+ --salt-text-h1-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
2107
+ --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
2108
+ --salt-text-h2-fontWeight: var(--salt-palette-text-heading-fontWeight);
2109
+ --salt-text-h2-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
2110
+ --salt-text-h2-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
2111
+ --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
2112
+ --salt-text-h3-fontWeight: var(--salt-palette-text-heading-fontWeight);
2113
+ --salt-text-h3-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
2114
+ --salt-text-h3-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
2115
+ --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
2116
+ --salt-text-h4-fontWeight: var(--salt-palette-text-heading-fontWeight);
2117
+ --salt-text-h4-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
2118
+ --salt-text-h4-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
2119
+ --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
2120
+ --salt-text-label-fontWeight: var(--salt-palette-text-body-fontWeight);
2121
+ --salt-text-label-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
2122
+ --salt-text-label-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
2123
+ --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
2124
+ --salt-text-display1-fontWeight: var(--salt-palette-text-display-fontWeight);
2125
+ --salt-text-display1-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
2126
+ --salt-text-display1-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
2127
+ --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
2128
+ --salt-text-display2-fontWeight: var(--salt-palette-text-display-fontWeight);
2129
+ --salt-text-display2-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
2130
+ --salt-text-display2-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
2131
+ --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
2132
+ --salt-text-display3-fontWeight: var(--salt-palette-text-display-fontWeight);
2133
+ --salt-text-display3-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
2134
+ --salt-text-display3-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
2135
+ --salt-text-display4-fontFamily: var(--salt-palette-text-fontFamily-heading);
2136
+ --salt-text-display4-fontWeight: var(--salt-palette-text-display-fontWeight);
2137
+ --salt-text-display4-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
2138
+ --salt-text-display4-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
2139
+ --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
2140
+ }
2141
+ .salt-density-touch {
2142
+ --salt-text-h1-fontSize: 42px;
2143
+ --salt-text-h1-lineHeight: 54px;
2144
+ --salt-text-h2-fontSize: 32px;
2145
+ --salt-text-h2-lineHeight: 42px;
2146
+ --salt-text-h3-fontSize: 24px;
2147
+ --salt-text-h3-lineHeight: 32px;
2148
+ --salt-text-h4-fontSize: 16px;
2149
+ --salt-text-h4-lineHeight: 20px;
2150
+ --salt-text-label-fontSize: 14px;
2151
+ --salt-text-label-lineHeight: 18px;
2152
+ --salt-text-fontSize: 16px;
2153
+ --salt-text-lineHeight: 20px;
2154
+ --salt-text-minHeight: 20px;
2155
+ --salt-text-display1-fontSize: 84px;
2156
+ --salt-text-display1-lineHeight: 109px;
2157
+ --salt-text-display2-fontSize: 58px;
2158
+ --salt-text-display2-lineHeight: 76px;
2159
+ --salt-text-display3-fontSize: 42px;
2160
+ --salt-text-display3-lineHeight: 54px;
2161
+ --salt-text-display4-fontSize: 42px;
2162
+ --salt-text-display4-lineHeight: 54px;
2163
+ --salt-text-notation-fontSize: 14px;
2164
+ --salt-text-notation-lineHeight: 18px;
2165
+ }
2166
+ .salt-density-low {
2167
+ --salt-text-h1-fontSize: 32px;
2168
+ --salt-text-h1-lineHeight: 42px;
2169
+ --salt-text-h2-fontSize: 24px;
2170
+ --salt-text-h2-lineHeight: 32px;
2171
+ --salt-text-h3-fontSize: 18px;
2172
+ --salt-text-h3-lineHeight: 24px;
2173
+ --salt-text-h4-fontSize: 14px;
2174
+ --salt-text-h4-lineHeight: 18px;
2175
+ --salt-text-label-fontSize: 12px;
2176
+ --salt-text-label-lineHeight: 16px;
2177
+ --salt-text-fontSize: 14px;
2178
+ --salt-text-lineHeight: 18px;
2179
+ --salt-text-minHeight: 18px;
2180
+ --salt-text-display1-fontSize: 68px;
2181
+ --salt-text-display1-lineHeight: 88px;
2182
+ --salt-text-display2-fontSize: 46px;
2183
+ --salt-text-display2-lineHeight: 60px;
2184
+ --salt-text-display3-fontSize: 32px;
2185
+ --salt-text-display3-lineHeight: 42px;
2186
+ --salt-text-display4-fontSize: 32px;
2187
+ --salt-text-display4-lineHeight: 42px;
2188
+ --salt-text-notation-fontSize: 12px;
2189
+ --salt-text-notation-lineHeight: 16px;
2190
+ }
2191
+ .salt-density-medium {
2192
+ --salt-text-h1-fontSize: 24px;
2193
+ --salt-text-h1-lineHeight: 32px;
2194
+ --salt-text-h2-fontSize: 18px;
2195
+ --salt-text-h2-lineHeight: 24px;
2196
+ --salt-text-h3-fontSize: 14px;
2197
+ --salt-text-h3-lineHeight: 18px;
2198
+ --salt-text-h4-fontSize: 12px;
2199
+ --salt-text-h4-lineHeight: 16px;
2200
+ --salt-text-label-fontSize: 11px;
2201
+ --salt-text-label-lineHeight: 14px;
2202
+ --salt-text-fontSize: 12px;
2203
+ --salt-text-lineHeight: 16px;
2204
+ --salt-text-minHeight: 16px;
2205
+ --salt-text-display1-fontSize: 54px;
2206
+ --salt-text-display1-lineHeight: 70px;
2207
+ --salt-text-display2-fontSize: 36px;
2208
+ --salt-text-display2-lineHeight: 47px;
2209
+ --salt-text-display3-fontSize: 24px;
2210
+ --salt-text-display3-lineHeight: 32px;
2211
+ --salt-text-display4-fontSize: 24px;
2212
+ --salt-text-display4-lineHeight: 32px;
2213
+ --salt-text-notation-fontSize: 10px;
2214
+ --salt-text-notation-lineHeight: 13px;
2215
+ }
2216
+ .salt-density-high {
2217
+ --salt-text-h1-fontSize: 18px;
2218
+ --salt-text-h1-lineHeight: 24px;
2219
+ --salt-text-h2-fontSize: 14px;
2220
+ --salt-text-h2-lineHeight: 18px;
2221
+ --salt-text-h3-fontSize: 12px;
2222
+ --salt-text-h3-lineHeight: 16px;
2223
+ --salt-text-h4-fontSize: 11px;
2224
+ --salt-text-h4-lineHeight: 14px;
2225
+ --salt-text-label-fontSize: 10px;
2226
+ --salt-text-label-lineHeight: 13px;
2227
+ --salt-text-fontSize: 11px;
2228
+ --salt-text-lineHeight: 14px;
2229
+ --salt-text-minHeight: 14px;
2230
+ --salt-text-display1-fontSize: 42px;
2231
+ --salt-text-display1-lineHeight: 54px;
2232
+ --salt-text-display2-fontSize: 28px;
2233
+ --salt-text-display2-lineHeight: 36px;
2234
+ --salt-text-display3-fontSize: 18px;
2235
+ --salt-text-display3-lineHeight: 24px;
2236
+ --salt-text-display4-fontSize: 18px;
2237
+ --salt-text-display4-lineHeight: 24px;
2238
+ --salt-text-notation-fontSize: 8px;
2239
+ --salt-text-notation-lineHeight: 10px;
2240
+ }
2241
+
2242
+ /* css/characteristics/content.css */
2243
+ .salt-theme {
2244
+ --salt-content-primary-foreground: var(--salt-palette-neutral-primary-foreground);
2245
+ --salt-content-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
2246
+ --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
2247
+ --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
2248
+ --salt-content-accent-foreground: var(--salt-palette-accent-foreground-informative);
2249
+ --salt-content-attention-foreground: var(--salt-palette-negative-foreground);
2250
+ --salt-content-bold-foreground: var(--salt-palette-interact-cta-foreground);
2251
+ --salt-content-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
2252
+ --salt-content-foreground-hover: var(--salt-palette-accent-foreground-informative);
2253
+ --salt-content-foreground-active: var(--salt-palette-accent-foreground-informative);
2254
+ --salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);
2255
+ --salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
2624
2256
  }
2625
2257
 
2626
- /* css/legacy/characteristics/target.css */
2627
- .salt-theme[data-brand=legacy] {
2628
- --salt-target-background-hover: var(--salt-palette-interact-background-hover);
2629
- --salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);
2258
+ /* css/deprecated/characteristics.css */
2259
+ .salt-theme {
2260
+ --salt-container-borderStyle: solid;
2261
+ --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
2262
+ --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
2263
+ --salt-editable-borderStyle: solid;
2264
+ --salt-editable-borderStyle-hover: solid;
2265
+ --salt-editable-borderStyle-active: solid;
2266
+ --salt-editable-borderStyle-disabled: solid;
2267
+ --salt-editable-borderStyle-readonly: solid;
2268
+ --salt-editable-cursor-hover: text;
2269
+ --salt-editable-cursor-active: text;
2270
+ --salt-editable-cursor-disabled: not-allowed;
2271
+ --salt-editable-cursor-readonly: text;
2272
+ --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
2273
+ --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
2274
+ --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
2275
+ --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
2276
+ --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
2277
+ --salt-editable-borderWidth-active: 2px;
2278
+ --salt-measured-borderStyle: solid;
2279
+ --salt-measured-borderStyle-active: solid;
2280
+ --salt-measured-borderStyle-complete: solid;
2281
+ --salt-measured-borderStyle-incomplete: dotted;
2282
+ --salt-measured-borderWidth: 2px;
2283
+ --salt-measured-borderWidth-active: 2px;
2284
+ --salt-measured-borderWidth-complete: 2px;
2285
+ --salt-measured-borderWidth-incomplete: 2px;
2286
+ --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
2287
+ --salt-measured-textAlign: center;
2288
+ --salt-measured-background: var(--salt-palette-measured-background);
2289
+ --salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
2290
+ --salt-measured-borderColor: var(--salt-palette-measured-border);
2291
+ --salt-measured-borderColor-disabled: var(--salt-palette-measured-border-disabled);
2292
+ --salt-measured-fill: var(--salt-palette-measured-fill);
2293
+ --salt-measured-fill-disabled: var(--salt-palette-measured-fill-disabled);
2294
+ --salt-measured-foreground: var(--salt-palette-measured-foreground);
2295
+ --salt-measured-foreground-hover: var(--salt-palette-measured-foreground-active);
2296
+ --salt-measured-foreground-active: var(--salt-palette-measured-foreground-active);
2297
+ --salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
2298
+ --salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
2299
+ --salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);
2300
+ --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
2301
+ --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
2302
+ --salt-overlayable-rangeSelection: var(--salt-overlayable-background-rangeSelection);
2303
+ --salt-selectable-borderStyle: solid;
2304
+ --salt-selectable-borderStyle-hover: solid;
2305
+ --salt-selectable-borderStyle-selected: solid;
2306
+ --salt-selectable-borderStyle-blurSelected: solid;
2307
+ --salt-selectable-cursor-hover: pointer;
2308
+ --salt-selectable-cursor-selected: pointer;
2309
+ --salt-selectable-cursor-blurSelected: pointer;
2310
+ --salt-selectable-cursor-disabled: not-allowed;
2311
+ --salt-selectable-cursor-readonly: not-allowed;
2312
+ --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
2313
+ --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
2314
+ --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
2315
+ --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
2316
+ --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
2317
+ --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
2318
+ --salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
2319
+ --salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
2320
+ --salt-selectable-cta-background: var(--salt-palette-interact-background);
2321
+ --salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled);
2322
+ --salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
2323
+ --salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active);
2324
+ --salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled);
2325
+ --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
2326
+ --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
2327
+ --salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
2328
+ --salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
2329
+ --salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled);
2330
+ --salt-selectable-primary-background: var(--salt-palette-interact-background);
2331
+ --salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled);
2332
+ --salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
2333
+ --salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active);
2334
+ --salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled);
2335
+ --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
2336
+ --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
2337
+ --salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
2338
+ --salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active);
2339
+ --salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled);
2340
+ --salt-selectable-secondary-background: var(--salt-palette-interact-background);
2341
+ --salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled);
2342
+ --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
2343
+ --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
2344
+ --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
2345
+ --salt-separable-borderStyle: solid;
2346
+ --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
2347
+ --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
2348
+ --salt-status-info-background-emphasize: var(--salt-status-info-background);
2349
+ --salt-status-success-background-emphasize: var(--salt-status-success-background);
2350
+ --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
2351
+ --salt-status-error-background-emphasize: var(--salt-status-error-background);
2352
+ --salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
2353
+ --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
2354
+ --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
2355
+ --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
2356
+ --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
2357
+ --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
2358
+ --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
2359
+ --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
2360
+ --salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
2361
+ --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
2362
+ --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
2363
+ --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
2364
+ --salt-status-info-foreground: var(--salt-palette-info-foreground);
2365
+ --salt-status-error-foreground: var(--salt-palette-error-foreground);
2366
+ --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
2367
+ --salt-status-success-foreground: var(--salt-palette-success-foreground);
2368
+ --salt-draggable-horizontal-cursor-hover: row-resize;
2369
+ --salt-draggable-horizontal-cursor-active: row-resize;
2370
+ --salt-draggable-vertical-cursor-hover: col-resize;
2371
+ --salt-draggable-vertical-cursor-active: col-resize;
2372
+ --salt-draggable-grab-cursor-hover: grab;
2373
+ --salt-draggable-grab-cursor-active: grabbing;
2374
+ --salt-actionable-cursor-hover: pointer;
2375
+ --salt-actionable-cursor-active: pointer;
2376
+ --salt-actionable-cursor-disabled: not-allowed;
2377
+ --salt-actionable-letterSpacing: 0.6px;
2378
+ --salt-actionable-textTransform: uppercase;
2379
+ --salt-actionable-textAlign: center;
2380
+ --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
2381
+ --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
2382
+ --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
2383
+ --salt-target-cursor-disabled: not-allowed;
2384
+ --salt-target-borderStyle: dashed;
2385
+ --salt-target-borderStyle-hover: solid;
2386
+ --salt-target-borderStyle-disabled: dashed;
2387
+ --salt-text-background-selected: var(--salt-content-foreground-highlight);
2388
+ --salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover);
2389
+ --salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active);
2390
+ --salt-text-link-foreground-visited: var(--salt-palette-navigate-foreground-visited);
2391
+ --salt-text-link-textDecoration: underline;
2392
+ --salt-text-link-textDecoration-hover: none;
2393
+ --salt-text-link-textDecoration-selected: underline;
2394
+ --salt-text-primary-foreground: var(--salt-palette-neutral-primary-foreground);
2395
+ --salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
2396
+ --salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
2397
+ --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
2398
+ --salt-text-textDecoration: var(--salt-typography-textDecoration-none);
2399
+ --salt-text-textTransform: none;
2400
+ --salt-navigable-cursor-active: pointer;
2401
+ --salt-navigable-cursor-hover: pointer;
2402
+ --salt-navigable-cursor-disabled: not-allowed;
2403
+ --salt-navigable-cursor-edit: text;
2404
+ --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);
2405
+ --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);
2406
+ --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);
2407
+ --salt-navigable-secondary-background: var(--salt-palette-navigate-secondary-background);
2408
+ --salt-navigable-secondary-background-hover: var(--salt-palette-navigate-secondary-background-hover);
2409
+ --salt-navigable-secondary-background-active: var(--salt-palette-navigate-secondary-background-active);
2410
+ --salt-navigable-tertiary-background: var(--salt-palette-navigate-tertiary-background);
2411
+ --salt-navigable-tertiary-background-hover: var(--salt-palette-navigate-tertiary-background-hover);
2412
+ --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
2413
+ --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
2414
+ --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
2415
+ --salt-navigable-textDecoration: var(--salt-typography-textDecoration-underline);
2416
+ --salt-navigable-textDecoration-hover: var(--salt-typography-textDecoration-none);
2417
+ --salt-navigable-textDecoration-selected: var(--salt-typography-textDecoration-underline);
2418
+ --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
2419
+ --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
2420
+ --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
2421
+ --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
2422
+ --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
2423
+ --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
2424
+ --salt-track-borderStyle: solid;
2425
+ --salt-track-borderStyle-active: solid;
2426
+ --salt-track-borderStyle-complete: solid;
2427
+ --salt-track-borderStyle-incomplete: dotted;
2428
+ --salt-track-borderWidth: 2px;
2429
+ --salt-track-borderWidth-active: 2px;
2430
+ --salt-track-borderWidth-complete: 2px;
2431
+ --salt-track-borderWidth-incomplete: 2px;
2432
+ --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
2433
+ --salt-track-textAlign: center;
2434
+ --salt-track-background: var(--salt-palette-track-background);
2435
+ --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
2436
+ --salt-track-borderColor: var(--salt-palette-neutral-border);
2437
+ --salt-track-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
2438
+ --salt-taggable-cursor-hover: pointer;
2439
+ --salt-taggable-cursor-active: pointer;
2440
+ --salt-taggable-cursor-disabled: not-allowed;
2441
+ --salt-taggable-background: var(--salt-palette-interact-primary-background);
2442
+ --salt-taggable-background-hover: var(--salt-palette-interact-primary-background-hover);
2443
+ --salt-taggable-background-active: var(--salt-palette-interact-primary-background-active);
2444
+ --salt-taggable-background-disabled: var(--salt-palette-interact-primary-background-disabled);
2445
+ --salt-taggable-foreground: var(--salt-palette-interact-primary-foreground);
2446
+ --salt-taggable-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
2447
+ --salt-taggable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
2448
+ --salt-taggable-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
2449
+ --salt-actionable-cta-background-active: var(--salt-actionable-accented-bold-background-active);
2450
+ --salt-actionable-cta-background-disabled: var(--salt-actionable-accented-bold-background-disabled);
2451
+ --salt-actionable-cta-background-hover: var(--salt-actionable-accented-bold-background-hover);
2452
+ --salt-actionable-cta-background: var(--salt-actionable-accented-bold-background);
2453
+ --salt-actionable-cta-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);
2454
+ --salt-actionable-cta-borderColor-disabled: var(--salt-actionable-accented-bold-borderColor-disabled);
2455
+ --salt-actionable-cta-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);
2456
+ --salt-actionable-cta-borderColor: var(--salt-actionable-accented-bold-borderColor);
2457
+ --salt-actionable-cta-foreground-active: var(--salt-actionable-accented-bold-foreground-active);
2458
+ --salt-actionable-cta-foreground-disabled: var(--salt-actionable-accented-bold-foreground-disabled);
2459
+ --salt-actionable-cta-foreground-hover: var(--salt-actionable-accented-bold-foreground-hover);
2460
+ --salt-actionable-cta-foreground: var(--salt-actionable-accented-bold-foreground);
2461
+ --salt-actionable-primary-background-active: var(--salt-actionable-bold-background-active);
2462
+ --salt-actionable-primary-background-disabled: var(--salt-actionable-bold-background-disabled);
2463
+ --salt-actionable-primary-background-hover: var(--salt-actionable-bold-background-hover);
2464
+ --salt-actionable-primary-background: var(--salt-actionable-bold-background);
2465
+ --salt-actionable-primary-borderColor-active: var(--salt-actionable-bold-borderColor-active);
2466
+ --salt-actionable-primary-borderColor-disabled: var(--salt-actionable-bold-borderColor-disabled);
2467
+ --salt-actionable-primary-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);
2468
+ --salt-actionable-primary-borderColor: var(--salt-actionable-bold-borderColor);
2469
+ --salt-actionable-primary-foreground-active: var(--salt-actionable-bold-foreground-active);
2470
+ --salt-actionable-primary-foreground-disabled: var(--salt-actionable-bold-foreground-disabled);
2471
+ --salt-actionable-primary-foreground-hover: var(--salt-actionable-bold-foreground-hover);
2472
+ --salt-actionable-primary-foreground: var(--salt-actionable-bold-foreground);
2473
+ --salt-actionable-secondary-background-active: var(--salt-actionable-subtle-background-active);
2474
+ --salt-actionable-secondary-background-disabled: var(--salt-actionable-subtle-background-disabled);
2475
+ --salt-actionable-secondary-background-hover: var(--salt-actionable-subtle-background-hover);
2476
+ --salt-actionable-secondary-background: var(--salt-actionable-subtle-background);
2477
+ --salt-actionable-secondary-borderColor-active: var(--salt-actionable-subtle-borderColor-active);
2478
+ --salt-actionable-secondary-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);
2479
+ --salt-actionable-secondary-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);
2480
+ --salt-actionable-secondary-borderColor: var(--salt-actionable-subtle-borderColor);
2481
+ --salt-actionable-secondary-foreground-active: var(--salt-actionable-subtle-foreground-active);
2482
+ --salt-actionable-secondary-foreground-disabled: var(--salt-actionable-subtle-foreground-disabled);
2483
+ --salt-actionable-secondary-foreground-hover: var(--salt-actionable-subtle-foreground-hover);
2484
+ --salt-actionable-secondary-foreground: var(--salt-actionable-subtle-foreground);
2630
2485
  }
2631
-
2632
- /* css/legacy/characteristics/text.css */
2633
- .salt-theme[data-brand=legacy] {
2634
- --salt-text-letterSpacing: 0;
2635
- --salt-text-textAlign: left;
2636
- --salt-text-textAlign-embedded: center;
2637
- --salt-text-action-fontFamily: var(--salt-palette-text-fontFamily-action);
2638
- --salt-text-action-letterSpacing: 0.6px;
2639
- --salt-text-action-textTransform: uppercase;
2640
- --salt-text-action-textAlign: center;
2641
- --salt-text-action-fontWeight: var(--salt-palette-text-action-fontWeight);
2642
- --salt-text-action-fontWeight-small: var(--salt-palette-text-action-fontWeight-small);
2643
- --salt-text-action-fontWeight-strong: var(--salt-palette-text-action-fontWeight-strong);
2644
- --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
2645
- --salt-text-fontWeight: var(--salt-palette-text-body-fontWeight);
2646
- --salt-text-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
2647
- --salt-text-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
2648
- --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
2649
- --salt-text-notation-fontWeight: var(--salt-palette-text-notation-fontWeight);
2650
- --salt-text-notation-fontWeight-small: var(--salt-palette-text-notation-fontWeight-small);
2651
- --salt-text-notation-fontWeight-strong: var(--salt-palette-text-notation-fontWeight-strong);
2652
- --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
2653
- --salt-text-h1-fontWeight: var(--salt-palette-text-heading-fontWeight);
2654
- --salt-text-h1-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
2655
- --salt-text-h1-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
2656
- --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
2657
- --salt-text-h2-fontWeight: var(--salt-palette-text-heading-fontWeight);
2658
- --salt-text-h2-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
2659
- --salt-text-h2-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
2660
- --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
2661
- --salt-text-h3-fontWeight: var(--salt-palette-text-heading-fontWeight);
2662
- --salt-text-h3-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
2663
- --salt-text-h3-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
2664
- --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
2665
- --salt-text-h4-fontWeight: var(--salt-palette-text-heading-fontWeight);
2666
- --salt-text-h4-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
2667
- --salt-text-h4-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
2668
- --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
2669
- --salt-text-label-fontWeight: var(--salt-palette-text-body-fontWeight);
2670
- --salt-text-label-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
2671
- --salt-text-label-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
2672
- --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
2673
- --salt-text-display1-fontWeight: var(--salt-palette-text-display-fontWeight);
2674
- --salt-text-display1-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
2675
- --salt-text-display1-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
2676
- --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
2677
- --salt-text-display2-fontWeight: var(--salt-palette-text-display-fontWeight);
2678
- --salt-text-display2-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
2679
- --salt-text-display2-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
2680
- --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
2681
- --salt-text-display3-fontWeight: var(--salt-palette-text-display-fontWeight);
2682
- --salt-text-display3-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
2683
- --salt-text-display3-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
2684
- --salt-text-display4-fontFamily: var(--salt-palette-text-fontFamily-heading);
2685
- --salt-text-display4-fontWeight: var(--salt-palette-text-display-fontWeight);
2686
- --salt-text-display4-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
2687
- --salt-text-display4-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
2688
- --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
2486
+ .salt-density-high {
2487
+ --salt-accent-fontSize: 8px;
2488
+ --salt-accent-lineHeight: 11px;
2689
2489
  }
2690
- .salt-density-touch[data-brand=legacy] {
2691
- --salt-text-h1-fontSize: 42px;
2692
- --salt-text-h1-lineHeight: 54px;
2693
- --salt-text-h2-fontSize: 32px;
2694
- --salt-text-h2-lineHeight: 42px;
2695
- --salt-text-h3-fontSize: 24px;
2696
- --salt-text-h3-lineHeight: 32px;
2697
- --salt-text-h4-fontSize: 16px;
2698
- --salt-text-h4-lineHeight: 20px;
2699
- --salt-text-label-fontSize: 14px;
2700
- --salt-text-label-lineHeight: 18px;
2701
- --salt-text-fontSize: 16px;
2702
- --salt-text-lineHeight: 20px;
2703
- --salt-text-minHeight: 20px;
2704
- --salt-text-display1-fontSize: 84px;
2705
- --salt-text-display1-lineHeight: 109px;
2706
- --salt-text-display2-fontSize: 58px;
2707
- --salt-text-display2-lineHeight: 76px;
2708
- --salt-text-display3-fontSize: 42px;
2709
- --salt-text-display3-lineHeight: 54px;
2710
- --salt-text-display4-fontSize: 42px;
2711
- --salt-text-display4-lineHeight: 54px;
2712
- --salt-text-notation-fontSize: 14px;
2713
- --salt-text-notation-lineHeight: 18px;
2490
+ .salt-density-medium {
2491
+ --salt-accent-fontSize: 10px;
2492
+ --salt-accent-lineHeight: 13px;
2714
2493
  }
2715
- .salt-density-low[data-brand=legacy] {
2716
- --salt-text-h1-fontSize: 32px;
2717
- --salt-text-h1-lineHeight: 42px;
2718
- --salt-text-h2-fontSize: 24px;
2719
- --salt-text-h2-lineHeight: 32px;
2720
- --salt-text-h3-fontSize: 18px;
2721
- --salt-text-h3-lineHeight: 24px;
2722
- --salt-text-h4-fontSize: 14px;
2723
- --salt-text-h4-lineHeight: 18px;
2724
- --salt-text-label-fontSize: 12px;
2725
- --salt-text-label-lineHeight: 16px;
2726
- --salt-text-fontSize: 14px;
2727
- --salt-text-lineHeight: 18px;
2728
- --salt-text-minHeight: 18px;
2729
- --salt-text-display1-fontSize: 68px;
2730
- --salt-text-display1-lineHeight: 88px;
2731
- --salt-text-display2-fontSize: 46px;
2732
- --salt-text-display2-lineHeight: 60px;
2733
- --salt-text-display3-fontSize: 32px;
2734
- --salt-text-display3-lineHeight: 42px;
2735
- --salt-text-display4-fontSize: 32px;
2736
- --salt-text-display4-lineHeight: 42px;
2737
- --salt-text-notation-fontSize: 12px;
2738
- --salt-text-notation-lineHeight: 16px;
2494
+ .salt-density-low {
2495
+ --salt-accent-fontSize: 12px;
2496
+ --salt-accent-lineHeight: 16px;
2739
2497
  }
2740
- .salt-density-medium[data-brand=legacy] {
2741
- --salt-text-h1-fontSize: 24px;
2742
- --salt-text-h1-lineHeight: 32px;
2743
- --salt-text-h2-fontSize: 18px;
2744
- --salt-text-h2-lineHeight: 24px;
2745
- --salt-text-h3-fontSize: 14px;
2746
- --salt-text-h3-lineHeight: 18px;
2747
- --salt-text-h4-fontSize: 12px;
2748
- --salt-text-h4-lineHeight: 16px;
2749
- --salt-text-label-fontSize: 11px;
2750
- --salt-text-label-lineHeight: 14px;
2751
- --salt-text-fontSize: 12px;
2752
- --salt-text-lineHeight: 16px;
2753
- --salt-text-minHeight: 16px;
2754
- --salt-text-display1-fontSize: 54px;
2755
- --salt-text-display1-lineHeight: 70px;
2756
- --salt-text-display2-fontSize: 36px;
2757
- --salt-text-display2-lineHeight: 47px;
2758
- --salt-text-display3-fontSize: 24px;
2759
- --salt-text-display3-lineHeight: 32px;
2760
- --salt-text-display4-fontSize: 24px;
2761
- --salt-text-display4-lineHeight: 32px;
2762
- --salt-text-notation-fontSize: 10px;
2763
- --salt-text-notation-lineHeight: 13px;
2498
+ .salt-density-touch {
2499
+ --salt-accent-fontSize: 14px;
2500
+ --salt-accent-lineHeight: 18px;
2764
2501
  }
2765
- .salt-density-high[data-brand=legacy] {
2766
- --salt-text-h1-fontSize: 18px;
2767
- --salt-text-h1-lineHeight: 24px;
2768
- --salt-text-h2-fontSize: 14px;
2769
- --salt-text-h2-lineHeight: 18px;
2770
- --salt-text-h3-fontSize: 12px;
2771
- --salt-text-h3-lineHeight: 16px;
2772
- --salt-text-h4-fontSize: 11px;
2773
- --salt-text-h4-lineHeight: 14px;
2774
- --salt-text-label-fontSize: 10px;
2775
- --salt-text-label-lineHeight: 13px;
2776
- --salt-text-fontSize: 11px;
2777
- --salt-text-lineHeight: 14px;
2778
- --salt-text-minHeight: 14px;
2779
- --salt-text-display1-fontSize: 42px;
2780
- --salt-text-display1-lineHeight: 54px;
2781
- --salt-text-display2-fontSize: 28px;
2782
- --salt-text-display2-lineHeight: 36px;
2783
- --salt-text-display3-fontSize: 18px;
2784
- --salt-text-display3-lineHeight: 24px;
2785
- --salt-text-display4-fontSize: 18px;
2786
- --salt-text-display4-lineHeight: 24px;
2787
- --salt-text-notation-fontSize: 8px;
2788
- --salt-text-notation-lineHeight: 10px;
2502
+
2503
+ /* css/deprecated/fade.css */
2504
+ .salt-theme {
2505
+ --salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
2506
+ --salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
2507
+ --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
2508
+ --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
2509
+ --salt-color-blue-500-fade-fill: rgba(38, 112, 169, var(--salt-palette-opacity-fill));
2510
+ --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
2511
+ --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
2512
+ --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
2513
+ --salt-color-blue-200-fade-foreground: rgba(75, 159, 216, var(--salt-palette-opacity-disabled));
2514
+ --salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
2515
+ --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
2516
+ --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
2517
+ --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
2518
+ --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
2519
+ --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-disabled));
2520
+ --salt-color-green-200-fade-foreground: rgba(77, 180, 105, var(--salt-palette-opacity-disabled));
2521
+ --salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-disabled));
2522
+ --salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
2523
+ --salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
2524
+ --salt-color-green-600-fade-foreground: rgba(24, 114, 61, var(--salt-palette-opacity-disabled));
2525
+ --salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-disabled));
2526
+ --salt-color-red-200-fade-foreground: rgba(255, 108, 88, var(--salt-palette-opacity-disabled));
2527
+ --salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-disabled));
2528
+ --salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
2529
+ --salt-color-red-600-fade-foreground: rgba(196, 32, 16, var(--salt-palette-opacity-disabled));
2530
+ --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-disabled));
2531
+ --salt-color-orange-400-fade-foreground: rgba(238, 133, 43, var(--salt-palette-opacity-disabled));
2532
+ --salt-color-orange-850-fade-foreground: rgba(194, 52, 7, var(--salt-palette-opacity-disabled));
2533
+ --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
2534
+ --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
2535
+ --salt-color-gray-50-fade-border: rgba(206, 210, 217, var(--salt-palette-opacity-disabled));
2536
+ --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
2537
+ --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
2538
+ --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
2539
+ --salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
2540
+ --salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
2541
+ --salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
2542
+ --salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-disabled));
2543
+ --salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-disabled));
2544
+ --salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-disabled));
2545
+ --salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-disabled));
2546
+ --salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
2547
+ --salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));
2548
+ --salt-color-gray-200-fade-border-readonly: rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly));
2549
+ --salt-color-blue-30-fade-background: rgba(164, 213, 244, var(--salt-palette-opacity-disabled));
2550
+ --salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
2551
+ --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
2552
+ --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-disabled));
2553
+ --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-disabled));
2554
+ --salt-color-gray-30-fade-background: rgba(224, 228, 233, var(--salt-palette-opacity-disabled));
2555
+ --salt-color-gray-50-fade-background: rgba(206, 210, 217, var(--salt-palette-opacity-disabled));
2556
+ --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
2557
+ --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
2558
+ --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
2559
+ --salt-color-gray-300-fade-background: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
2560
+ --salt-color-gray-500-fade-background: rgba(59, 63, 70, var(--salt-palette-opacity-disabled));
2561
+ --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-disabled));
2562
+ --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-disabled));
2563
+ --salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
2564
+ --salt-color-green-500-fade-background: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
2565
+ --salt-color-green-600-fade-background: rgba(24, 114, 61, var(--salt-palette-opacity-disabled));
2566
+ --salt-color-red-600-fade-background: rgba(196, 32, 16, var(--salt-palette-opacity-disabled));
2567
+ --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
2568
+ --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
2569
+ --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
2570
+ --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly));
2571
+ --salt-color-white-fade-backdrop: rgba(255, 255, 255, var(--salt-palette-opacity-backdrop));
2572
+ --salt-color-black-fade-backdrop: rgba(0, 0, 0, var(--salt-palette-opacity-backdrop));
2573
+ --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
2574
+ --salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
2575
+ --salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 255, var(--salt-palette-opacity-primary-border));
2576
+ --salt-color-white-fade-separatorOpacity-secondary: rgba(255, 255, 255, var(--salt-palette-opacity-secondary-border));
2577
+ --salt-color-white-fade-separatorOpacity-tertiary: rgba(255, 255, 255, var(--salt-palette-opacity-tertiary-border));
2578
+ --salt-color-black-fade-separatorOpacity-primary: rgba(0, 0, 0, var(--salt-palette-opacity-primary-border));
2579
+ --salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border));
2580
+ --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
2581
+ --salt-color-black-fade-background-selection: rgba(0, 0, 0, var(--salt-opacity-15));
2582
+ --salt-color-black-fade-background-highlight: rgba(0, 0, 0, var(--salt-opacity-25));
2583
+ --salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15));
2584
+ --salt-color-white-fade-background-highlight: rgba(255, 255, 255, var(--salt-opacity-25));
2585
+ --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
2586
+ --salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
2587
+ --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
2588
+ --salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
2789
2589
  }
2790
2590
 
2791
2591
  /* css/deprecated/foundations.css */
@@ -3066,6 +2866,6 @@
3066
2866
  --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
3067
2867
  }
3068
2868
 
3069
- /* css/legacy/index.css */
2869
+ /* css/theme.css */
3070
2870
 
3071
2871
  /* index.css */