@salt-ds/theme 0.0.0-snapshot-20250723132141 → 0.0.0-snapshot-20250811134000

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/css/global.css +0 -11
  2. package/css/{salt/index.css → theme-next.css} +189 -394
  3. package/css/{uitk/index.css → theme.css} +879 -220
  4. package/index.css +1838 -58
  5. package/package.json +1 -1
  6. package/css/consumer/index.css +0 -1501
  7. package/css/deprecated/index.css +0 -639
package/css/{salt/index.css → theme-next.css} RENAMED
@@ -1,7 +1,5 @@
1
- /* css/salt/foundations/alpha.css */
2
- .salt-theme[data-brand=salt] {
3
- --salt-color-blue-30-40a: rgba(var(--salt-color-blue-30-rgb), 0.4);
4
- --salt-color-blue-100-40a: rgba(var(--salt-color-blue-100-rgb), 0.4);
1
+ /* css/foundations/alpha-next.css */
2
+ .salt-theme.salt-theme-next {
5
3
  --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
6
4
  --salt-color-blue-300-40a: rgba(var(--salt-color-blue-300-rgb), 0.4);
7
5
  --salt-color-blue-400-40a: rgba(var(--salt-color-blue-400-rgb), 0.4);
@@ -9,15 +7,6 @@
9
7
  --salt-color-blue-600-40a: rgba(var(--salt-color-blue-600-rgb), 0.4);
10
8
  --salt-color-blue-700-40a: rgba(var(--salt-color-blue-700-rgb), 0.4);
11
9
  --salt-color-blue-800-40a: rgba(var(--salt-color-blue-800-rgb), 0.4);
12
- --salt-color-gray-20-40a: rgba(var(--salt-color-gray-20-rgb), 0.4);
13
- --salt-color-gray-30-40a: rgba(var(--salt-color-gray-30-rgb), 0.4);
14
- --salt-color-gray-50-40a: rgba(var(--salt-color-gray-50-rgb), 0.4);
15
- --salt-color-gray-60-40a: rgba(var(--salt-color-gray-60-rgb), 0.4);
16
- --salt-color-gray-70-40a: rgba(var(--salt-color-gray-70-rgb), 0.4);
17
- --salt-color-gray-90-15a: rgba(var(--salt-color-gray-90-rgb), 0.15);
18
- --salt-color-gray-90-40a: rgba(var(--salt-color-gray-90-rgb), 0.4);
19
- --salt-color-gray-200-15a: rgba(var(--salt-color-gray-200-rgb), 0.15);
20
- --salt-color-gray-200-40a: rgba(var(--salt-color-gray-200-rgb), 0.4);
21
10
  --salt-color-gray-300-10a: rgba(var(--salt-color-gray-300-rgb), 0.1);
22
11
  --salt-color-gray-300-40a: rgba(var(--salt-color-gray-300-rgb), 0.4);
23
12
  --salt-color-gray-400-40a: rgba(var(--salt-color-gray-400-rgb), 0.4);
@@ -26,18 +15,12 @@
26
15
  --salt-color-gray-600-40a: rgba(var(--salt-color-gray-600-rgb), 0.4);
27
16
  --salt-color-gray-700-10a: rgba(var(--salt-color-gray-700-rgb), 0.1);
28
17
  --salt-color-gray-700-40a: rgba(var(--salt-color-gray-700-rgb), 0.4);
29
- --salt-color-gray-800-40a: rgba(var(--salt-color-gray-800-rgb), 0.4);
30
- --salt-color-gray-900-40a: rgba(var(--salt-color-gray-900-rgb), 0.4);
31
- --salt-color-green-200-40a: rgba(var(--salt-color-green-200-rgb), 0.4);
32
18
  --salt-color-green-400-40a: rgba(var(--salt-color-green-400-rgb), 0.4);
33
19
  --salt-color-green-500-40a: rgba(var(--salt-color-green-500-rgb), 0.4);
34
20
  --salt-color-green-600-40a: rgba(var(--salt-color-green-600-rgb), 0.4);
35
21
  --salt-color-orange-400-40a: rgba(var(--salt-color-orange-400-rgb), 0.4);
36
22
  --salt-color-orange-500-40a: rgba(var(--salt-color-orange-500-rgb), 0.4);
37
23
  --salt-color-orange-600-40a: rgba(var(--salt-color-orange-600-rgb), 0.4);
38
- --salt-color-orange-700-40a: rgba(var(--salt-color-orange-700-rgb), 0.4);
39
- --salt-color-orange-850-40a: rgba(var(--salt-color-orange-850-rgb), 0.4);
40
- --salt-color-red-200-40a: rgba(var(--salt-color-red-200-rgb), 0.4);
41
24
  --salt-color-red-400-40a: rgba(var(--salt-color-red-400-rgb), 0.4);
42
25
  --salt-color-red-500-40a: rgba(var(--salt-color-red-500-rgb), 0.4);
43
26
  --salt-color-red-600-40a: rgba(var(--salt-color-red-600-rgb), 0.4);
@@ -48,10 +31,20 @@
48
31
  --salt-color-teal-600-40a: rgba(var(--salt-color-teal-600-rgb), 0.4);
49
32
  --salt-color-teal-700-40a: rgba(var(--salt-color-teal-700-rgb), 0.4);
50
33
  --salt-color-teal-800-40a: rgba(var(--salt-color-teal-800-rgb), 0.4);
34
+ --salt-color-background-snow-40a: rgba(var(--salt-color-background-snow-rgb), 0.4);
35
+ --salt-color-background-marble-40a: rgba(var(--salt-color-background-marble-rgb), 0.4);
36
+ --salt-color-background-limestone-40a: rgba(var(--salt-color-background-limestone-rgb), 0.4);
37
+ --salt-color-background-granite-40a: rgba(var(--salt-color-background-granite-rgb), 0.4);
38
+ --salt-color-background-jet-40a: rgba(var(--salt-color-background-jet-rgb), 0.4);
39
+ --salt-color-background-leather-40a: rgba(var(--salt-color-background-leather-rgb), 0.4);
51
40
  }
52
41
 
53
- /* css/salt/foundations/color.css */
54
- .salt-theme[data-brand=salt] {
42
+ /* css/foundations/color-next.css */
43
+ .salt-theme.salt-theme-next {
44
+ --salt-color-white-rgb:
45
+ 255,
46
+ 255,
47
+ 255;
55
48
  --salt-color-gray-100-rgb:
56
49
  230,
57
50
  233,
@@ -88,6 +81,10 @@
88
81
  41,
89
82
  46,
90
83
  51;
84
+ --salt-color-black-rgb:
85
+ 0,
86
+ 0,
87
+ 0;
91
88
  --salt-color-blue-100-rgb:
92
89
  234,
93
90
  246,
@@ -372,6 +369,7 @@
372
369
  58,
373
370
  34,
374
371
  6;
372
+ --salt-color-white: rgb(var(--salt-color-white-rgb));
375
373
  --salt-color-gray-100: rgb(var(--salt-color-gray-100-rgb));
376
374
  --salt-color-gray-200: rgb(var(--salt-color-gray-200-rgb));
377
375
  --salt-color-gray-300: rgb(var(--salt-color-gray-300-rgb));
@@ -381,6 +379,7 @@
381
379
  --salt-color-gray-700: rgb(var(--salt-color-gray-700-rgb));
382
380
  --salt-color-gray-800: rgb(var(--salt-color-gray-800-rgb));
383
381
  --salt-color-gray-900: rgb(var(--salt-color-gray-900-rgb));
382
+ --salt-color-black: rgb(var(--salt-color-black-rgb));
384
383
  --salt-color-blue-100: rgb(var(--salt-color-blue-100-rgb));
385
384
  --salt-color-blue-200: rgb(var(--salt-color-blue-200-rgb));
386
385
  --salt-color-blue-300: rgb(var(--salt-color-blue-300-rgb));
@@ -454,8 +453,38 @@
454
453
  --salt-color-logo-brown: rgb(var(--salt-color-logo-brown-rgb));
455
454
  }
456
455
 
457
- /* css/salt/palette/accent.css */
458
- .salt-theme[data-brand=salt][data-mode=light] {
456
+ /* css/palette/accent-next.css */
457
+ .salt-theme.salt-theme-next[data-mode=light][data-accent=blue] {
458
+ --salt-palette-accent: var(--salt-color-blue-500);
459
+ --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
460
+ --salt-palette-accent-strong: var(--salt-color-blue-600);
461
+ --salt-palette-accent-strong-disabled: var(--salt-color-blue-600-40a);
462
+ --salt-palette-accent-stronger: var(--salt-color-blue-700);
463
+ --salt-palette-accent-stronger-disabled: var(--salt-color-blue-700-40a);
464
+ --salt-palette-accent-strongest: var(--salt-color-blue-800);
465
+ --salt-palette-accent-weak: var(--salt-color-blue-400);
466
+ --salt-palette-accent-weaker: var(--salt-color-blue-200);
467
+ --salt-palette-accent-weaker-disabled: var(--salt-color-blue-200-40a);
468
+ --salt-palette-accent-weakest: var(--salt-color-blue-100);
469
+ --salt-palette-accent-action-hover: var(--salt-color-blue-600);
470
+ --salt-palette-accent-action-active: var(--salt-color-blue-800);
471
+ }
472
+ .salt-theme.salt-theme-next[data-mode=dark][data-accent=blue] {
473
+ --salt-palette-accent: var(--salt-color-blue-500);
474
+ --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
475
+ --salt-palette-accent-strong: var(--salt-color-blue-400);
476
+ --salt-palette-accent-strong-disabled: var(--salt-color-blue-400-40a);
477
+ --salt-palette-accent-stronger: var(--salt-color-blue-300);
478
+ --salt-palette-accent-stronger-disabled: var(--salt-color-blue-300-40a);
479
+ --salt-palette-accent-strongest: var(--salt-color-blue-200);
480
+ --salt-palette-accent-weak: var(--salt-color-blue-600);
481
+ --salt-palette-accent-weaker: var(--salt-color-blue-800);
482
+ --salt-palette-accent-weaker-disabled: var(--salt-color-blue-800-40a);
483
+ --salt-palette-accent-weakest: var(--salt-color-blue-900);
484
+ --salt-palette-accent-action-hover: var(--salt-color-blue-600);
485
+ --salt-palette-accent-action-active: var(--salt-color-blue-800);
486
+ }
487
+ .salt-theme.salt-theme-next[data-mode=light][data-accent=teal] {
459
488
  --salt-palette-accent: var(--salt-color-teal-500);
460
489
  --salt-palette-accent-disabled: var(--salt-color-teal-500-40a);
461
490
  --salt-palette-accent-strong: var(--salt-color-teal-600);
@@ -470,7 +499,7 @@
470
499
  --salt-palette-accent-action-hover: var(--salt-color-teal-600);
471
500
  --salt-palette-accent-action-active: var(--salt-color-teal-800);
472
501
  }
473
- .salt-theme[data-brand=salt][data-mode=dark] {
502
+ .salt-theme.salt-theme-next[data-mode=dark][data-accent=teal] {
474
503
  --salt-palette-accent: var(--salt-color-teal-500);
475
504
  --salt-palette-accent-disabled: var(--salt-color-teal-500-40a);
476
505
  --salt-palette-accent-strong: var(--salt-color-teal-400);
@@ -486,52 +515,8 @@
486
515
  --salt-palette-accent-action-active: var(--salt-color-teal-800);
487
516
  }
488
517
 
489
- /* css/salt/palette/alpha.css */
490
- .salt-theme[data-mode=light][data-brand=salt] {
491
- --salt-palette-alpha-highest: var(--salt-color-white-80a);
492
- --salt-palette-alpha-higher: var(--salt-color-white-65a);
493
- --salt-palette-alpha-high: var(--salt-color-white-50a);
494
- --salt-palette-alpha-mediumHigh: var(--salt-color-white-40a);
495
- --salt-palette-alpha-medium: var(--salt-color-white-30a);
496
- --salt-palette-alpha-mediumLow: var(--salt-color-white-20a);
497
- --salt-palette-alpha-low: var(--salt-color-white-15a);
498
- --salt-palette-alpha-lower: var(--salt-color-white-10a);
499
- --salt-palette-alpha-lowest: var(--salt-color-white-5a);
500
- --salt-palette-alpha-contrast-highest: var(--salt-color-black-80a);
501
- --salt-palette-alpha-contrast-higher: var(--salt-color-black-65a);
502
- --salt-palette-alpha-contrast-high: var(--salt-color-black-50a);
503
- --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-black-40a);
504
- --salt-palette-alpha-contrast-medium: var(--salt-color-black-30a);
505
- --salt-palette-alpha-contrast-mediumLow: var(--salt-color-black-20a);
506
- --salt-palette-alpha-contrast-low: var(--salt-color-black-15a);
507
- --salt-palette-alpha-contrast-lower: var(--salt-color-black-10a);
508
- --salt-palette-alpha-contrast-lowest: var(--salt-color-black-5a);
509
- --salt-palette-alpha-none: transparent;
510
- }
511
- .salt-theme[data-mode=dark][data-brand=salt] {
512
- --salt-palette-alpha-highest: var(--salt-color-black-80a);
513
- --salt-palette-alpha-higher: var(--salt-color-black-65a);
514
- --salt-palette-alpha-high: var(--salt-color-black-50a);
515
- --salt-palette-alpha-mediumHigh: var(--salt-color-black-40a);
516
- --salt-palette-alpha-medium: var(--salt-color-black-30a);
517
- --salt-palette-alpha-mediumLow: var(--salt-color-black-20a);
518
- --salt-palette-alpha-low: var(--salt-color-black-15a);
519
- --salt-palette-alpha-lower: var(--salt-color-black-10a);
520
- --salt-palette-alpha-lowest: var(--salt-color-black-5a);
521
- --salt-palette-alpha-contrast-highest: var(--salt-color-white-80a);
522
- --salt-palette-alpha-contrast-higher: var(--salt-color-white-65a);
523
- --salt-palette-alpha-contrast-high: var(--salt-color-white-50a);
524
- --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-white-40a);
525
- --salt-palette-alpha-contrast-medium: var(--salt-color-white-30a);
526
- --salt-palette-alpha-contrast-mediumLow: var(--salt-color-white-20a);
527
- --salt-palette-alpha-contrast-low: var(--salt-color-white-15a);
528
- --salt-palette-alpha-contrast-lower: var(--salt-color-white-10a);
529
- --salt-palette-alpha-contrast-lowest: var(--salt-color-white-5a);
530
- --salt-palette-alpha-none: transparent;
531
- }
532
-
533
- /* css/salt/palette/background.css */
534
- .salt-theme[data-brand=salt][data-mode=light] {
518
+ /* css/palette/background-next.css */
519
+ .salt-theme.salt-theme-next[data-mode=light] {
535
520
  --salt-palette-background-primary: var(--salt-color-background-snow);
536
521
  --salt-palette-background-primary-disabled: var(--salt-color-background-snow-40a);
537
522
  --salt-palette-background-secondary: var(--salt-color-background-marble);
@@ -539,7 +524,7 @@
539
524
  --salt-palette-background-tertiary: var(--salt-color-background-limestone);
540
525
  --salt-palette-background-tertiary-disabled: var(--salt-color-background-limestone-40a);
541
526
  }
542
- .salt-theme[data-brand=salt][data-mode=dark] {
527
+ .salt-theme.salt-theme-next[data-mode=dark] {
543
528
  --salt-palette-background-primary: var(--salt-color-background-jet);
544
529
  --salt-palette-background-primary-disabled: var(--salt-color-background-jet-40a);
545
530
  --salt-palette-background-secondary: var(--salt-color-background-granite);
@@ -548,8 +533,8 @@
548
533
  --salt-palette-background-tertiary-disabled: var(--salt-color-background-leather-40a);
549
534
  }
550
535
 
551
- /* css/salt/palette/corner.css */
552
- .salt-theme[data-brand=salt][data-corner=rounded] {
536
+ /* css/palette/corner-next.css */
537
+ .salt-theme-next[data-corner=rounded] {
553
538
  --salt-palette-corner-weaker: var(--salt-curve-50);
554
539
  --salt-palette-corner-weak: var(--salt-curve-100);
555
540
  --salt-palette-corner: var(--salt-curve-150);
@@ -557,7 +542,7 @@
557
542
  --salt-palette-corner-stronger: var(--salt-curve-250);
558
543
  --salt-palette-corner-strongest: var(--salt-curve-999);
559
544
  }
560
- .salt-theme[data-brand=salt][data-corner=sharp] {
545
+ .salt-theme-next[data-corner=sharp] {
561
546
  --salt-palette-corner-weaker: var(--salt-curve-0);
562
547
  --salt-palette-corner-weak: var(--salt-curve-0);
563
548
  --salt-palette-corner: var(--salt-curve-0);
@@ -566,8 +551,8 @@
566
551
  --salt-palette-corner-strongest: var(--salt-curve-999);
567
552
  }
568
553
 
569
- /* css/salt/palette/foreground.css */
570
- .salt-theme[data-brand=salt][data-mode=light] {
554
+ /* css/palette/foreground-next.css */
555
+ .salt-theme.salt-theme-next[data-mode=light] {
571
556
  --salt-palette-foreground-primary: var(--salt-color-black);
572
557
  --salt-palette-foreground-primary-disabled: var(--salt-color-black-40a);
573
558
  --salt-palette-foreground-primary-alt: var(--salt-color-white);
@@ -576,7 +561,7 @@
576
561
  --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-700-40a);
577
562
  --salt-palette-foreground-visited: var(--salt-color-purple-800);
578
563
  }
579
- .salt-theme[data-brand=salt][data-mode=dark] {
564
+ .salt-theme.salt-theme-next[data-mode=dark] {
580
565
  --salt-palette-foreground-primary: var(--salt-color-white);
581
566
  --salt-palette-foreground-primary-disabled: var(--salt-color-white-40a);
582
567
  --salt-palette-foreground-primary-alt: var(--salt-color-white);
@@ -586,40 +571,40 @@
586
571
  --salt-palette-foreground-visited: var(--salt-color-purple-200);
587
572
  }
588
573
 
589
- /* css/salt/palette/info.css */
590
- .salt-theme[data-brand=salt][data-mode=light] {
574
+ /* css/palette/info-next.css */
575
+ .salt-theme.salt-theme-next[data-mode=light] {
591
576
  --salt-palette-info: var(--salt-color-blue-500);
592
577
  --salt-palette-info-strong: var(--salt-color-blue-600);
593
- --salt-palette-info-weak: var(--salt-color-blue-100);
578
+ --salt-palette-info-weakest: var(--salt-color-blue-100);
594
579
  }
595
- .salt-theme[data-brand=salt][data-mode=dark] {
580
+ .salt-theme.salt-theme-next[data-mode=dark] {
596
581
  --salt-palette-info: var(--salt-color-blue-500);
597
582
  --salt-palette-info-strong: var(--salt-color-blue-400);
598
- --salt-palette-info-weak: var(--salt-color-blue-900);
583
+ --salt-palette-info-weakest: var(--salt-color-blue-900);
599
584
  }
600
585
 
601
- /* css/salt/palette/negative.css */
602
- .salt-theme[data-brand=salt][data-mode=light] {
586
+ /* css/palette/negative-next.css */
587
+ .salt-theme.salt-theme-next[data-mode=light] {
603
588
  --salt-palette-negative: var(--salt-color-red-500);
589
+ --salt-palette-negative-disabled: var(--salt-color-red-500-40a);
604
590
  --salt-palette-negative-strong: var(--salt-color-red-600);
605
591
  --salt-palette-negative-strong-disabled: var(--salt-color-red-600-40a);
606
- --salt-palette-negative-weak: var(--salt-color-red-100);
592
+ --salt-palette-negative-weakest: var(--salt-color-red-100);
607
593
  --salt-palette-negative-action-hover: var(--salt-color-red-600);
608
594
  --salt-palette-negative-action-active: var(--salt-color-red-800);
609
- --salt-palette-negative-disabled: var(--salt-color-red-500-40a);
610
595
  }
611
- .salt-theme[data-brand=salt][data-mode=dark] {
596
+ .salt-theme.salt-theme-next[data-mode=dark] {
612
597
  --salt-palette-negative: var(--salt-color-red-500);
598
+ --salt-palette-negative-disabled: var(--salt-color-red-500-40a);
613
599
  --salt-palette-negative-strong: var(--salt-color-red-400);
614
600
  --salt-palette-negative-strong-disabled: var(--salt-color-red-400-40a);
615
- --salt-palette-negative-weak: var(--salt-color-red-900);
601
+ --salt-palette-negative-weakest: var(--salt-color-red-900);
616
602
  --salt-palette-negative-action-hover: var(--salt-color-red-600);
617
603
  --salt-palette-negative-action-active: var(--salt-color-red-800);
618
- --salt-palette-negative-disabled: var(--salt-color-red-500-40a);
619
604
  }
620
605
 
621
- /* css/salt/palette/neutral.css */
622
- .salt-theme[data-brand=salt][data-mode=light] {
606
+ /* css/palette/neutral-next.css */
607
+ .salt-theme.salt-theme-next[data-mode=light] {
623
608
  --salt-palette-neutral: var(--salt-color-gray-500);
624
609
  --salt-palette-neutral-disabled: var(--salt-color-gray-500-40a);
625
610
  --salt-palette-neutral-readonly: var(--salt-color-gray-500-10a);
@@ -636,7 +621,7 @@
636
621
  --salt-palette-neutral-action-hover: var(--salt-color-gray-600);
637
622
  --salt-palette-neutral-action-active: var(--salt-color-gray-800);
638
623
  }
639
- .salt-theme[data-brand=salt][data-mode=dark] {
624
+ .salt-theme.salt-theme-next[data-mode=dark] {
640
625
  --salt-palette-neutral: var(--salt-color-gray-500);
641
626
  --salt-palette-neutral-disabled: var(--salt-color-gray-500-40a);
642
627
  --salt-palette-neutral-readonly: var(--salt-color-gray-500-10a);
@@ -654,35 +639,44 @@
654
639
  --salt-palette-neutral-action-active: var(--salt-color-gray-800);
655
640
  }
656
641
 
657
- /* css/salt/palette/positive.css */
658
- .salt-theme[data-brand=salt][data-mode=light] {
642
+ /* css/palette/positive-next.css */
643
+ .salt-theme.salt-theme-next[data-mode=light] {
659
644
  --salt-palette-positive: var(--salt-color-green-500);
645
+ --salt-palette-positive-disabled: var(--salt-color-green-500-40a);
660
646
  --salt-palette-positive-strong: var(--salt-color-green-600);
661
647
  --salt-palette-positive-strong-disabled: var(--salt-color-green-600-40a);
662
- --salt-palette-positive-weak: var(--salt-color-green-100);
648
+ --salt-palette-positive-weakest: var(--salt-color-green-100);
663
649
  --salt-palette-positive-action-hover: var(--salt-color-green-600);
664
650
  --salt-palette-positive-action-active: var(--salt-color-green-800);
665
- --salt-palette-positive-disabled: var(--salt-color-green-500-40a);
666
651
  }
667
- .salt-theme[data-brand=salt][data-mode=dark] {
652
+ .salt-theme.salt-theme-next[data-mode=dark] {
668
653
  --salt-palette-positive: var(--salt-color-green-500);
654
+ --salt-palette-positive-disabled: var(--salt-color-green-500-40a);
669
655
  --salt-palette-positive-strong: var(--salt-color-green-400);
670
656
  --salt-palette-positive-strong-disabled: var(--salt-color-green-400-40a);
671
- --salt-palette-positive-weak: var(--salt-color-green-900);
657
+ --salt-palette-positive-weakest: var(--salt-color-green-900);
672
658
  --salt-palette-positive-action-hover: var(--salt-color-green-600);
673
659
  --salt-palette-positive-action-active: var(--salt-color-green-800);
674
- --salt-palette-positive-disabled: var(--salt-color-green-500-40a);
675
660
  }
676
661
 
677
- /* css/salt/palette/text.css */
678
- .salt-theme[data-brand=salt] {
679
- --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
662
+ /* css/palette/text-next.css */
663
+ .salt-theme-next.salt-theme[data-heading-font="Open Sans"] {
664
+ --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
665
+ --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
666
+ --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
667
+ --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
668
+ --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-semiBold);
669
+ --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
670
+ --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
671
+ --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular);
672
+ --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light);
673
+ --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
674
+ --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
675
+ --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
676
+ --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
677
+ }
678
+ .salt-theme-next.salt-theme[data-heading-font=Amplitude] {
680
679
  --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-amplitude);
681
- --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
682
- --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-amplitude);
683
- --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-medium);
684
- --salt-palette-text-action-fontWeight-small: var(--salt-typography-fontWeight-regular);
685
- --salt-palette-text-action-fontWeight-strong: var(--salt-typography-fontWeight-bold);
686
680
  --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-medium);
687
681
  --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
688
682
  --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
@@ -696,30 +690,37 @@
696
690
  --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
697
691
  --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
698
692
  }
693
+ .salt-theme-next.salt-theme[data-action-font="Open Sans"] {
694
+ --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
695
+ --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
696
+ }
697
+ .salt-theme-next.salt-theme[data-action-font=Amplitude] {
698
+ --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-amplitude);
699
+ --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-medium);
700
+ }
699
701
 
700
- /* css/salt/palette/warning.css */
701
- .salt-theme[data-brand=salt][data-mode=light] {
702
+ /* css/palette/warning-next.css */
703
+ .salt-theme.salt-theme-next[data-mode=light] {
702
704
  --salt-palette-warning: var(--salt-color-orange-500);
703
705
  --salt-palette-warning-disabled: var(--salt-color-orange-500-40a);
704
706
  --salt-palette-warning-strong: var(--salt-color-orange-600);
705
707
  --salt-palette-warning-strong-disabled: var(--salt-color-orange-600-40a);
706
- --salt-palette-warning-weak: var(--salt-color-orange-100);
708
+ --salt-palette-warning-weakest: var(--salt-color-orange-100);
707
709
  --salt-palette-warning-action-hover: var(--salt-color-orange-600);
708
710
  --salt-palette-warning-action-active: var(--salt-color-orange-800);
709
711
  }
710
- .salt-theme[data-brand=salt][data-mode=dark] {
712
+ .salt-theme.salt-theme-next[data-mode=dark] {
711
713
  --salt-palette-warning: var(--salt-color-orange-500);
712
714
  --salt-palette-warning-disabled: var(--salt-color-orange-500-40a);
713
715
  --salt-palette-warning-strong: var(--salt-color-orange-400);
714
716
  --salt-palette-warning-strong-disabled: var(--salt-color-orange-400-40a);
715
- --salt-palette-warning-weak: var(--salt-color-orange-900);
717
+ --salt-palette-warning-weakest: var(--salt-color-orange-900);
716
718
  --salt-palette-warning-action-hover: var(--salt-color-orange-600);
717
719
  --salt-palette-warning-action-active: var(--salt-color-orange-800);
718
720
  }
719
721
 
720
- /* css/salt/characteristics/accent.css */
721
- .salt-theme-next,
722
- .salt-theme[data-brand=salt] {
722
+ /* css/characteristics/accent-next.css */
723
+ .salt-theme.salt-theme-next {
723
724
  --salt-accent-background: var(--salt-palette-accent);
724
725
  --salt-accent-background-disabled: var(--salt-palette-accent-disabled);
725
726
  --salt-accent-borderColor: var(--salt-palette-accent);
@@ -727,9 +728,8 @@
727
728
  --salt-accent-foreground: var(--salt-palette-foreground-primary-alt);
728
729
  }
729
730
 
730
- /* css/salt/characteristics/actionable.css */
731
- .salt-theme-next,
732
- .salt-theme[data-brand=salt] {
731
+ /* css/characteristics/actionable-next.css */
732
+ .salt-theme.salt-theme-next {
733
733
  --salt-actionable-accented-bold-background-active: var(--salt-palette-accent-action-active);
734
734
  --salt-actionable-accented-bold-background-disabled: var(--salt-palette-accent-disabled);
735
735
  --salt-actionable-accented-bold-background-hover: var(--salt-palette-accent-action-hover);
@@ -912,114 +912,32 @@
912
912
  --salt-actionable-caution-subtle-foreground: var(--salt-palette-warning-strong);
913
913
  }
914
914
 
915
- /* css/salt/characteristics/category.css */
916
- .salt-theme-next,
917
- .salt-theme[data-brand=salt] {
918
- --salt-category-1-bold-background: var(--salt-palette-categorical-1);
915
+ /* css/characteristics/category-next.css */
916
+ .salt-theme.salt-theme-next {
919
917
  --salt-category-1-bold-foreground: var(--salt-palette-foreground-primary-alt);
920
- --salt-category-1-subtle-foreground: var(--salt-palette-categorical-1-strong);
921
- --salt-category-1-subtle-background: var(--salt-palette-categorical-1-weakest);
922
- --salt-category-1-subtle-borderColor: var(--salt-palette-categorical-1);
923
- --salt-category-2-bold-background: var(--salt-palette-categorical-2);
924
918
  --salt-category-2-bold-foreground: var(--salt-palette-foreground-primary-alt);
925
- --salt-category-2-subtle-foreground: var(--salt-palette-categorical-2-strong);
926
- --salt-category-2-subtle-background: var(--salt-palette-categorical-2-weakest);
927
- --salt-category-2-subtle-borderColor: var(--salt-palette-categorical-2);
928
- --salt-category-3-bold-background: var(--salt-palette-categorical-3);
929
919
  --salt-category-3-bold-foreground: var(--salt-palette-foreground-primary-alt);
930
- --salt-category-3-subtle-foreground: var(--salt-palette-categorical-3-strong);
931
- --salt-category-3-subtle-background: var(--salt-palette-categorical-3-weakest);
932
- --salt-category-3-subtle-borderColor: var(--salt-palette-categorical-3);
933
- --salt-category-4-bold-background: var(--salt-palette-categorical-4);
934
920
  --salt-category-4-bold-foreground: var(--salt-palette-foreground-primary-alt);
935
- --salt-category-4-subtle-foreground: var(--salt-palette-categorical-4-strong);
936
- --salt-category-4-subtle-background: var(--salt-palette-categorical-4-weakest);
937
- --salt-category-4-subtle-borderColor: var(--salt-palette-categorical-4);
938
- --salt-category-5-bold-background: var(--salt-palette-categorical-5);
939
921
  --salt-category-5-bold-foreground: var(--salt-palette-foreground-primary-alt);
940
- --salt-category-5-subtle-foreground: var(--salt-palette-categorical-5-strong);
941
- --salt-category-5-subtle-background: var(--salt-palette-categorical-5-weakest);
942
- --salt-category-5-subtle-borderColor: var(--salt-palette-categorical-5);
943
- --salt-category-6-bold-background: var(--salt-palette-categorical-6);
944
922
  --salt-category-6-bold-foreground: var(--salt-palette-foreground-primary-alt);
945
- --salt-category-6-subtle-foreground: var(--salt-palette-categorical-6-strong);
946
- --salt-category-6-subtle-background: var(--salt-palette-categorical-6-weakest);
947
- --salt-category-6-subtle-borderColor: var(--salt-palette-categorical-6);
948
- --salt-category-7-bold-background: var(--salt-palette-categorical-7);
949
923
  --salt-category-7-bold-foreground: var(--salt-palette-foreground-primary-alt);
950
- --salt-category-7-subtle-foreground: var(--salt-palette-categorical-7-strong);
951
- --salt-category-7-subtle-background: var(--salt-palette-categorical-7-weakest);
952
- --salt-category-7-subtle-borderColor: var(--salt-palette-categorical-7);
953
- --salt-category-8-subtle-foreground: var(--salt-palette-categorical-8-strong);
954
- --salt-category-8-subtle-background: var(--salt-palette-categorical-8-weakest);
955
- --salt-category-8-subtle-borderColor: var(--salt-palette-categorical-8);
956
924
  --salt-category-8-bold-foreground: var(--salt-palette-foreground-primary-alt);
957
- --salt-category-8-bold-background: var(--salt-palette-categorical-8);
958
- --salt-category-9-subtle-foreground: var(--salt-palette-categorical-9-strong);
959
- --salt-category-9-subtle-background: var(--salt-palette-categorical-9-weakest);
960
- --salt-category-9-subtle-borderColor: var(--salt-palette-categorical-9);
961
925
  --salt-category-9-bold-foreground: var(--salt-palette-foreground-primary-alt);
962
- --salt-category-9-bold-background: var(--salt-palette-categorical-9);
963
- --salt-category-10-subtle-foreground: var(--salt-palette-categorical-10-strong);
964
- --salt-category-10-subtle-background: var(--salt-palette-categorical-10-weakest);
965
- --salt-category-10-subtle-borderColor: var(--salt-palette-categorical-10);
966
926
  --salt-category-10-bold-foreground: var(--salt-palette-foreground-primary-alt);
967
- --salt-category-10-bold-background: var(--salt-palette-categorical-10);
968
- --salt-category-11-subtle-foreground: var(--salt-palette-categorical-11-strong);
969
- --salt-category-11-subtle-background: var(--salt-palette-categorical-11-weakest);
970
- --salt-category-11-subtle-borderColor: var(--salt-palette-categorical-11);
971
927
  --salt-category-11-bold-foreground: var(--salt-palette-foreground-primary-alt);
972
- --salt-category-11-bold-background: var(--salt-palette-categorical-11);
973
- --salt-category-12-subtle-foreground: var(--salt-palette-categorical-12-strong);
974
- --salt-category-12-subtle-background: var(--salt-palette-categorical-12-weakest);
975
- --salt-category-12-subtle-borderColor: var(--salt-palette-categorical-12);
976
928
  --salt-category-12-bold-foreground: var(--salt-palette-foreground-primary-alt);
977
- --salt-category-12-bold-background: var(--salt-palette-categorical-12);
978
- --salt-category-13-subtle-foreground: var(--salt-palette-categorical-13-strong);
979
- --salt-category-13-subtle-background: var(--salt-palette-categorical-13-weakest);
980
- --salt-category-13-subtle-borderColor: var(--salt-palette-categorical-13);
981
- --salt-category-13-bold-background: var(--salt-palette-categorical-13);
982
929
  --salt-category-13-bold-foreground: var(--salt-palette-foreground-primary-alt);
983
- --salt-category-14-subtle-foreground: var(--salt-palette-categorical-14-strong);
984
- --salt-category-14-subtle-background: var(--salt-palette-categorical-14-weakest);
985
- --salt-category-14-subtle-borderColor: var(--salt-palette-categorical-14);
986
- --salt-category-14-bold-background: var(--salt-palette-categorical-14);
987
930
  --salt-category-14-bold-foreground: var(--salt-palette-foreground-primary-alt);
988
- --salt-category-15-subtle-foreground: var(--salt-palette-categorical-15-strong);
989
- --salt-category-15-subtle-background: var(--salt-palette-categorical-15-weakest);
990
- --salt-category-15-subtle-borderColor: var(--salt-palette-categorical-15);
991
- --salt-category-15-bold-background: var(--salt-palette-categorical-15);
992
931
  --salt-category-15-bold-foreground: var(--salt-palette-foreground-primary-alt);
993
- --salt-category-16-subtle-foreground: var(--salt-palette-categorical-16-strong);
994
- --salt-category-16-subtle-background: var(--salt-palette-categorical-16-weakest);
995
- --salt-category-16-subtle-borderColor: var(--salt-palette-categorical-16);
996
- --salt-category-16-bold-background: var(--salt-palette-categorical-16);
997
932
  --salt-category-16-bold-foreground: var(--salt-palette-foreground-primary-alt);
998
- --salt-category-17-subtle-foreground: var(--salt-palette-categorical-17-strong);
999
- --salt-category-17-subtle-background: var(--salt-palette-categorical-17-weakest);
1000
- --salt-category-17-subtle-borderColor: var(--salt-palette-categorical-17);
1001
- --salt-category-17-bold-background: var(--salt-palette-categorical-17);
1002
933
  --salt-category-17-bold-foreground: var(--salt-palette-foreground-primary-alt);
1003
- --salt-category-18-subtle-foreground: var(--salt-palette-categorical-18-strong);
1004
- --salt-category-18-subtle-background: var(--salt-palette-categorical-18-weakest);
1005
- --salt-category-18-subtle-borderColor: var(--salt-palette-categorical-18);
1006
- --salt-category-18-bold-background: var(--salt-palette-categorical-18);
1007
934
  --salt-category-18-bold-foreground: var(--salt-palette-foreground-primary-alt);
1008
- --salt-category-19-subtle-foreground: var(--salt-palette-categorical-19-strong);
1009
- --salt-category-19-subtle-background: var(--salt-palette-categorical-19-weakest);
1010
- --salt-category-19-subtle-borderColor: var(--salt-palette-categorical-19);
1011
- --salt-category-19-bold-background: var(--salt-palette-categorical-19);
1012
935
  --salt-category-19-bold-foreground: var(--salt-palette-foreground-primary-alt);
1013
- --salt-category-20-subtle-foreground: var(--salt-palette-categorical-20-strong);
1014
- --salt-category-20-subtle-background: var(--salt-palette-categorical-20-weakest);
1015
- --salt-category-20-subtle-borderColor: var(--salt-palette-categorical-20);
1016
- --salt-category-20-bold-background: var(--salt-palette-categorical-20);
1017
936
  --salt-category-20-bold-foreground: var(--salt-palette-foreground-primary-alt);
1018
937
  }
1019
938
 
1020
- /* css/salt/characteristics/container.css */
1021
- .salt-theme-next,
1022
- .salt-theme[data-brand=salt] {
939
+ /* css/characteristics/container-next.css */
940
+ .salt-theme.salt-theme-next {
1023
941
  --salt-container-primary-background: var(--salt-palette-background-primary);
1024
942
  --salt-container-primary-background-disabled: var(--salt-palette-background-primary-disabled);
1025
943
  --salt-container-primary-borderColor: var(--salt-palette-alpha-contrast-medium);
@@ -1032,13 +950,10 @@
1032
950
  --salt-container-tertiary-background-disabled: var(--salt-palette-background-tertiary-disabled);
1033
951
  --salt-container-tertiary-borderColor: var(--salt-palette-alpha-contrast-medium);
1034
952
  --salt-container-tertiary-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
1035
- --salt-container-ghost-background: var(--salt-palette-alpha-medium);
1036
- --salt-container-ghost-borderColor: var(--salt-palette-alpha-contrast-medium);
1037
953
  }
1038
954
 
1039
- /* css/salt/characteristics/content.css */
1040
- .salt-theme-next,
1041
- .salt-theme[data-brand=salt] {
955
+ /* css/characteristics/content-next.css */
956
+ .salt-theme.salt-theme-next {
1042
957
  --salt-content-primary-foreground: var(--salt-palette-foreground-primary);
1043
958
  --salt-content-primary-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
1044
959
  --salt-content-secondary-foreground: var(--salt-palette-foreground-secondary);
@@ -1053,9 +968,8 @@
1053
968
  --salt-content-foreground-highlight: var(--salt-palette-accent-weaker);
1054
969
  }
1055
970
 
1056
- /* css/salt/characteristics/editable.css */
1057
- .salt-theme-next,
1058
- .salt-theme[data-brand=salt] {
971
+ /* css/characteristics/editable-next.css */
972
+ .salt-theme.salt-theme-next {
1059
973
  --salt-editable-borderColor: var(--salt-palette-neutral);
1060
974
  --salt-editable-borderColor-active: var(--salt-palette-accent-stronger);
1061
975
  --salt-editable-borderColor-disabled: var(--salt-palette-neutral-disabled);
@@ -1073,20 +987,13 @@
1073
987
  --salt-editable-secondary-background-readonly: var(--salt-palette-alpha-none);
1074
988
  }
1075
989
 
1076
- /* css/salt/characteristics/focused.css */
1077
- .salt-theme-next,
1078
- .salt-theme[data-brand=salt] {
990
+ /* css/characteristics/focused-next.css */
991
+ .salt-theme.salt-theme-next {
1079
992
  --salt-focused-outlineColor: var(--salt-palette-accent-stronger);
1080
- --salt-focused-outlineStyle: dotted;
1081
- --salt-focused-outlineWidth: var(--salt-size-fixed-200);
1082
- --salt-focused-outlineInset: 0;
1083
- --salt-focused-outlineOffset: 0;
1084
- --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
1085
993
  }
1086
994
 
1087
- /* css/salt/characteristics/navigable.css */
1088
- .salt-theme-next,
1089
- .salt-theme[data-brand=salt] {
995
+ /* css/characteristics/navigable-next.css */
996
+ .salt-theme.salt-theme-next {
1090
997
  --salt-navigable-indicator-hover: var(--salt-palette-neutral);
1091
998
  --salt-navigable-accent-indicator-active: var(--salt-palette-accent);
1092
999
  --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
@@ -1094,30 +1001,21 @@
1094
1001
  --salt-navigable-accent-borderColor-active: var(--salt-palette-accent);
1095
1002
  }
1096
1003
 
1097
- /* css/salt/characteristics/overlayable.css */
1098
- .salt-theme-next,
1099
- .salt-theme[data-brand=salt] {
1100
- --salt-overlayable-shadow-scroll: var(--salt-shadow-100);
1101
- --salt-overlayable-shadow-region: var(--salt-shadow-200);
1102
- --salt-overlayable-shadow: var(--salt-shadow-200);
1103
- --salt-overlayable-shadow-hover: var(--salt-shadow-300);
1104
- --salt-overlayable-shadow-popout: var(--salt-shadow-400);
1105
- --salt-overlayable-shadow-drag: var(--salt-shadow-400);
1106
- --salt-overlayable-shadow-modal: var(--salt-shadow-500);
1004
+ /* css/characteristics/overlayable-next.css */
1005
+ .salt-theme.salt-theme-next {
1107
1006
  --salt-overlayable-background: var(--salt-palette-alpha-higher);
1108
1007
  --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-medium);
1109
1008
  --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-mediumLow);
1110
1009
  }
1111
1010
 
1112
- /* css/salt/characteristics/selectable.css */
1113
- .salt-theme-next,
1114
- .salt-theme[data-brand=salt] {
1011
+ /* css/characteristics/selectable-next.css */
1012
+ .salt-theme.salt-theme-next {
1115
1013
  --salt-selectable-borderColor: var(--salt-palette-neutral);
1116
1014
  --salt-selectable-borderColor-hover: var(--salt-palette-accent-weak);
1117
1015
  --salt-selectable-borderColor-selected: var(--salt-palette-accent);
1118
1016
  --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-accent-disabled);
1119
1017
  --salt-selectable-borderColor-disabled: var(--salt-palette-neutral-disabled);
1120
- --salt-selectable-borderColor-readonly: var(--salt-palette-neutral-readonly);
1018
+ --salt-selectable-borderColor-readonly: var(--salt-palette-neutral);
1121
1019
  --salt-selectable-foreground: var(--salt-palette-neutral-strong);
1122
1020
  --salt-selectable-foreground-disabled: var(--salt-palette-neutral-strong-disabled);
1123
1021
  --salt-selectable-foreground-hover: var(--salt-palette-accent-weak);
@@ -1130,9 +1028,8 @@
1130
1028
  --salt-selectable-background-selectedDisabled: var(--salt-palette-accent-weaker-disabled);
1131
1029
  }
1132
1030
 
1133
- /* css/salt/characteristics/sentiment.css */
1134
- .salt-theme-next,
1135
- .salt-theme[data-brand=salt] {
1031
+ /* css/characteristics/sentiment-next.css */
1032
+ .salt-theme-next.salt-theme {
1136
1033
  --salt-sentiment-negative-foreground-informative: var(--salt-palette-negative-strong);
1137
1034
  --salt-sentiment-positive-foreground-informative: var(--salt-palette-positive-strong);
1138
1035
  --salt-sentiment-negative-foreground-decorative: var(--salt-palette-negative);
@@ -1141,9 +1038,8 @@
1141
1038
  --salt-sentiment-neutral-track-disabled: var(--salt-palette-alpha-contrast-lower);
1142
1039
  }
1143
1040
 
1144
- /* css/salt/characteristics/separable.css */
1145
- .salt-theme-next,
1146
- .salt-theme[data-brand=salt] {
1041
+ /* css/characteristics/separable-next.css */
1042
+ .salt-theme.salt-theme-next {
1147
1043
  --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumHigh);
1148
1044
  --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-medium);
1149
1045
  --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-contrast-mediumLow);
@@ -1155,114 +1051,41 @@
1155
1051
  --salt-separable-background-active: var(--salt-palette-accent);
1156
1052
  }
1157
1053
 
1158
- /* css/salt/characteristics/status.css */
1159
- .salt-theme-next,
1160
- .salt-theme[data-brand=salt] {
1161
- --salt-status-error-foreground-decorative: var(--salt-palette-negative);
1162
- --salt-status-error-foreground-informative: var(--salt-palette-negative-strong);
1163
- --salt-status-error-background: var(--salt-palette-negative-weak);
1164
- --salt-status-error-background-selected: var(--salt-palette-negative-weak);
1165
- --salt-status-error-bold-background: var(--salt-palette-negative);
1166
- --salt-status-error-borderColor: var(--salt-palette-negative);
1054
+ /* css/characteristics/status-next.css */
1055
+ .salt-theme.salt-theme-next {
1167
1056
  --salt-status-info-foreground-decorative: var(--salt-palette-info);
1168
- --salt-status-info-foreground-informative: var(--salt-palette-info-strong);
1169
- --salt-status-info-background: var(--salt-palette-info-weak);
1170
- --salt-status-info-bold-background: var(--salt-palette-info);
1171
- --salt-status-info-borderColor: var(--salt-palette-info);
1172
1057
  --salt-status-success-foreground-decorative: var(--salt-palette-positive);
1173
- --salt-status-success-foreground-informative: var(--salt-palette-positive-strong);
1174
- --salt-status-success-background: var(--salt-palette-positive-weak);
1175
- --salt-status-success-background-selected: var(--salt-palette-positive-weak);
1176
- --salt-status-success-bold-background: var(--salt-palette-positive);
1177
- --salt-status-success-borderColor: var(--salt-palette-positive);
1178
1058
  --salt-status-warning-foreground-decorative: var(--salt-palette-warning);
1059
+ --salt-status-error-foreground-decorative: var(--salt-palette-negative);
1060
+ --salt-status-info-foreground-informative: var(--salt-palette-info-strong);
1061
+ --salt-status-success-foreground-informative: var(--salt-palette-positive-strong);
1179
1062
  --salt-status-warning-foreground-informative: var(--salt-palette-warning-strong);
1180
- --salt-status-warning-background: var(--salt-palette-warning-weak);
1181
- --salt-status-warning-background-selected: var(--salt-palette-warning-weak);
1182
- --salt-status-warning-bold-background: var(--salt-palette-warning);
1063
+ --salt-status-error-foreground-informative: var(--salt-palette-negative-strong);
1064
+ --salt-status-info-borderColor: var(--salt-palette-info);
1065
+ --salt-status-success-borderColor: var(--salt-palette-positive);
1183
1066
  --salt-status-warning-borderColor: var(--salt-palette-warning);
1067
+ --salt-status-error-borderColor: var(--salt-palette-negative);
1068
+ --salt-status-info-background: var(--salt-palette-info-weakest);
1069
+ --salt-status-success-background: var(--salt-palette-positive-weakest);
1070
+ --salt-status-warning-background: var(--salt-palette-warning-weakest);
1071
+ --salt-status-error-background: var(--salt-palette-negative-weakest);
1072
+ --salt-status-info-bold-background: var(--salt-palette-info);
1073
+ --salt-status-error-bold-background: var(--salt-palette-negative);
1074
+ --salt-status-warning-bold-background: var(--salt-palette-warning);
1075
+ --salt-status-success-bold-background: var(--salt-palette-positive);
1076
+ --salt-status-success-background-selected: var(--salt-palette-positive-weakest);
1077
+ --salt-status-warning-background-selected: var(--salt-palette-warning-weakest);
1078
+ --salt-status-error-background-selected: var(--salt-palette-negative-weakest);
1184
1079
  }
1185
1080
 
1186
- /* css/salt/characteristics/target.css */
1187
- .salt-theme-next,
1188
- .salt-theme[data-brand=salt] {
1081
+ /* css/characteristics/target-next.css */
1082
+ .salt-theme.salt-theme-next {
1189
1083
  --salt-target-background-hover: var(--salt-palette-accent-weakest);
1190
1084
  --salt-target-borderColor-hover: var(--salt-palette-accent);
1191
1085
  }
1192
1086
 
1193
- /* css/salt/characteristics/text.css */
1194
- .salt-theme-next,
1195
- .salt-theme[data-brand=salt] {
1196
- --salt-text-letterSpacing: 0;
1197
- --salt-text-textAlign: left;
1198
- --salt-text-textAlign-embedded: center;
1199
- --salt-text-action-fontFamily: var(--salt-palette-text-fontFamily-action);
1200
- --salt-text-action-letterSpacing: 0.6px;
1201
- --salt-text-action-textTransform: uppercase;
1202
- --salt-text-action-textAlign: center;
1203
- --salt-text-action-fontWeight: var(--salt-palette-text-action-fontWeight);
1204
- --salt-text-action-fontWeight-small: var(--salt-palette-text-action-fontWeight-small);
1205
- --salt-text-action-fontWeight-strong: var(--salt-palette-text-action-fontWeight-strong);
1206
- --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
1207
- --salt-text-fontWeight: var(--salt-palette-text-body-fontWeight);
1208
- --salt-text-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
1209
- --salt-text-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
1210
- --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
1211
- --salt-text-notation-fontWeight: var(--salt-palette-text-notation-fontWeight);
1212
- --salt-text-notation-fontWeight-small: var(--salt-palette-text-notation-fontWeight-small);
1213
- --salt-text-notation-fontWeight-strong: var(--salt-palette-text-notation-fontWeight-strong);
1214
- --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
1215
- --salt-text-h1-fontWeight: var(--salt-palette-text-heading-fontWeight);
1216
- --salt-text-h1-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1217
- --salt-text-h1-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1218
- --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
1219
- --salt-text-h2-fontWeight: var(--salt-palette-text-heading-fontWeight);
1220
- --salt-text-h2-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1221
- --salt-text-h2-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1222
- --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
1223
- --salt-text-h3-fontWeight: var(--salt-palette-text-heading-fontWeight);
1224
- --salt-text-h3-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1225
- --salt-text-h3-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1226
- --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
1227
- --salt-text-h4-fontWeight: var(--salt-palette-text-heading-fontWeight);
1228
- --salt-text-h4-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1229
- --salt-text-h4-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1230
- --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
1231
- --salt-text-label-fontWeight: var(--salt-palette-text-body-fontWeight);
1232
- --salt-text-label-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
1233
- --salt-text-label-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
1234
- --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
1235
- --salt-text-display1-fontWeight: var(--salt-palette-text-display-fontWeight);
1236
- --salt-text-display1-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1237
- --salt-text-display1-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1238
- --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
1239
- --salt-text-display2-fontWeight: var(--salt-palette-text-display-fontWeight);
1240
- --salt-text-display2-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1241
- --salt-text-display2-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1242
- --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
1243
- --salt-text-display3-fontWeight: var(--salt-palette-text-display-fontWeight);
1244
- --salt-text-display3-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1245
- --salt-text-display3-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1246
- --salt-text-display4-fontFamily: var(--salt-palette-text-fontFamily-heading);
1247
- --salt-text-display4-fontWeight: var(--salt-palette-text-display-fontWeight);
1248
- --salt-text-display4-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1249
- --salt-text-display4-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1250
- --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
1251
- }
1252
- .salt-density-touch[data-brand=salt] {
1253
- --salt-text-h1-fontSize: 42px;
1254
- --salt-text-h1-lineHeight: 54px;
1255
- --salt-text-h2-fontSize: 32px;
1256
- --salt-text-h2-lineHeight: 42px;
1257
- --salt-text-h3-fontSize: 24px;
1258
- --salt-text-h3-lineHeight: 32px;
1259
- --salt-text-h4-fontSize: 16px;
1260
- --salt-text-h4-lineHeight: 20px;
1261
- --salt-text-label-fontSize: 14px;
1262
- --salt-text-label-lineHeight: 18px;
1263
- --salt-text-fontSize: 16px;
1264
- --salt-text-lineHeight: 20px;
1265
- --salt-text-minHeight: 20px;
1087
+ /* css/characteristics/text-next.css */
1088
+ .salt-theme-next.salt-density-touch {
1266
1089
  --salt-text-display1-fontSize: 102px;
1267
1090
  --salt-text-display1-lineHeight: 133px;
1268
1091
  --salt-text-display2-fontSize: 84px;
@@ -1271,23 +1094,8 @@
1271
1094
  --salt-text-display3-lineHeight: 88px;
1272
1095
  --salt-text-display4-fontSize: 54px;
1273
1096
  --salt-text-display4-lineHeight: 70px;
1274
- --salt-text-notation-fontSize: 14px;
1275
- --salt-text-notation-lineHeight: 18px;
1276
1097
  }
1277
- .salt-density-low[data-brand=salt] {
1278
- --salt-text-h1-fontSize: 32px;
1279
- --salt-text-h1-lineHeight: 42px;
1280
- --salt-text-h2-fontSize: 24px;
1281
- --salt-text-h2-lineHeight: 32px;
1282
- --salt-text-h3-fontSize: 18px;
1283
- --salt-text-h3-lineHeight: 24px;
1284
- --salt-text-h4-fontSize: 14px;
1285
- --salt-text-h4-lineHeight: 18px;
1286
- --salt-text-label-fontSize: 12px;
1287
- --salt-text-label-lineHeight: 16px;
1288
- --salt-text-fontSize: 14px;
1289
- --salt-text-lineHeight: 18px;
1290
- --salt-text-minHeight: 18px;
1098
+ .salt-theme-next.salt-density-low {
1291
1099
  --salt-text-display1-fontSize: 84px;
1292
1100
  --salt-text-display1-lineHeight: 109px;
1293
1101
  --salt-text-display2-fontSize: 68px;
@@ -1296,23 +1104,8 @@
1296
1104
  --salt-text-display3-lineHeight: 70px;
1297
1105
  --salt-text-display4-fontSize: 42px;
1298
1106
  --salt-text-display4-lineHeight: 55px;
1299
- --salt-text-notation-fontSize: 12px;
1300
- --salt-text-notation-lineHeight: 16px;
1301
1107
  }
1302
- .salt-density-medium[data-brand=salt] {
1303
- --salt-text-h1-fontSize: 24px;
1304
- --salt-text-h1-lineHeight: 32px;
1305
- --salt-text-h2-fontSize: 18px;
1306
- --salt-text-h2-lineHeight: 24px;
1307
- --salt-text-h3-fontSize: 14px;
1308
- --salt-text-h3-lineHeight: 18px;
1309
- --salt-text-h4-fontSize: 12px;
1310
- --salt-text-h4-lineHeight: 16px;
1311
- --salt-text-label-fontSize: 11px;
1312
- --salt-text-label-lineHeight: 14px;
1313
- --salt-text-fontSize: 12px;
1314
- --salt-text-lineHeight: 16px;
1315
- --salt-text-minHeight: 16px;
1108
+ .salt-theme-next.salt-density-medium {
1316
1109
  --salt-text-display1-fontSize: 68px;
1317
1110
  --salt-text-display1-lineHeight: 88px;
1318
1111
  --salt-text-display2-fontSize: 54px;
@@ -1321,23 +1114,8 @@
1321
1114
  --salt-text-display3-lineHeight: 55px;
1322
1115
  --salt-text-display4-fontSize: 32px;
1323
1116
  --salt-text-display4-lineHeight: 42px;
1324
- --salt-text-notation-fontSize: 10px;
1325
- --salt-text-notation-lineHeight: 13px;
1326
1117
  }
1327
- .salt-density-high[data-brand=salt] {
1328
- --salt-text-h1-fontSize: 18px;
1329
- --salt-text-h1-lineHeight: 24px;
1330
- --salt-text-h2-fontSize: 14px;
1331
- --salt-text-h2-lineHeight: 18px;
1332
- --salt-text-h3-fontSize: 12px;
1333
- --salt-text-h3-lineHeight: 16px;
1334
- --salt-text-h4-fontSize: 11px;
1335
- --salt-text-h4-lineHeight: 14px;
1336
- --salt-text-label-fontSize: 10px;
1337
- --salt-text-label-lineHeight: 13px;
1338
- --salt-text-fontSize: 11px;
1339
- --salt-text-lineHeight: 14px;
1340
- --salt-text-minHeight: 14px;
1118
+ .salt-theme-next.salt-density-high {
1341
1119
  --salt-text-display1-fontSize: 54px;
1342
1120
  --salt-text-display1-lineHeight: 70px;
1343
1121
  --salt-text-display2-fontSize: 42px;
@@ -1346,24 +1124,41 @@
1346
1124
  --salt-text-display3-lineHeight: 42px;
1347
1125
  --salt-text-display4-fontSize: 24px;
1348
1126
  --salt-text-display4-lineHeight: 32px;
1349
- --salt-text-notation-fontSize: 8px;
1350
- --salt-text-notation-lineHeight: 10px;
1127
+ }
1128
+
1129
+ /* css/deprecated/characteristics-next.css */
1130
+ .salt-theme.salt-theme-next {
1131
+ --salt-navigable-indicator-active: var(--salt-palette-accent);
1132
+ --salt-selectable-background-blurSelected: var(--salt-palette-neutral-weakest);
1133
+ --salt-status-static-foreground: var(--salt-palette-foreground-secondary);
1134
+ --salt-status-negative-foreground: var(--salt-palette-negative);
1135
+ --salt-status-positive-foreground: var(--salt-palette-positive);
1136
+ --salt-track-borderColor: var(--salt-palette-alpha-contrast-high);
1137
+ --salt-track-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
1351
1138
  }
1352
1139
 
1353
1140
  /* css/deprecated/foundations-next.css */
1354
- .salt-theme[data-brand=salt] {
1141
+ .salt-theme.salt-theme-next {
1355
1142
  --salt-color-background-gradientlight-rgb: var(--salt-color-background-titanium-rgb);
1356
1143
  --salt-color-background-gradientlight: var(--salt-color-background-titanium);
1357
1144
  }
1358
1145
 
1359
1146
  /* css/deprecated/palette-next.css */
1360
- .salt-theme[data-brand=salt][data-mode=light] {
1147
+ .salt-theme[data-mode=light] {
1361
1148
  --salt-palette-foreground-active: var(--salt-color-blue-700);
1362
1149
  --salt-palette-foreground-hover: var(--salt-color-blue-600);
1150
+ --salt-palette-warning-weak: var(--salt-color-orange-100);
1151
+ --salt-palette-positive-weak: var(--salt-color-green-100);
1152
+ --salt-palette-info-weak: var(--salt-color-blue-100);
1153
+ --salt-palette-negative-weak: var(--salt-color-red-100);
1363
1154
  }
1364
- .salt-theme[data-brand=salt][data-mode=dark] {
1155
+ .salt-theme[data-mode=dark] {
1365
1156
  --salt-palette-foreground-active: var(--salt-color-blue-300);
1366
1157
  --salt-palette-foreground-hover: var(--salt-color-blue-400);
1158
+ --salt-palette-warning-weak: var(--salt-color-orange-900);
1159
+ --salt-palette-positive-weak: var(--salt-color-green-900);
1160
+ --salt-palette-info-weak: var(--salt-color-blue-900);
1161
+ --salt-palette-negative-weak: var(--salt-color-red-900);
1367
1162
  }
1368
1163
 
1369
- /* css/salt/index.css */
1164
+ /* css/theme-next.css */