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

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 (5) hide show
  1. package/css/global.css +0 -3
  2. package/css/theme-next.css +64 -43
  3. package/css/theme.css +13 -7
  4. package/index.css +13 -10
  5. package/package.json +2 -2
package/css/global.css CHANGED
@@ -6,9 +6,6 @@
6
6
  letter-spacing: var(--salt-text-letterSpacing);
7
7
  line-height: var(--salt-text-lineHeight);
8
8
  }
9
- .salt-theme ::selection {
10
- background: var(--salt-content-foreground-highlight);
11
- }
12
9
  .salt-theme[data-mode=light] {
13
10
  color-scheme: light;
14
11
  }
package/css/theme-next.css CHANGED
@@ -466,8 +466,6 @@
466
466
  --salt-palette-accent-weaker: var(--salt-color-blue-200);
467
467
  --salt-palette-accent-weaker-disabled: var(--salt-color-blue-200-40a);
468
468
  --salt-palette-accent-weakest: var(--salt-color-blue-100);
469
- --salt-palette-accent-action-hover: var(--salt-color-blue-100);
470
- --salt-palette-accent-action-active: var(--salt-color-blue-200);
471
469
  }
472
470
  .salt-theme.salt-theme-next[data-mode=dark][data-accent=blue] {
473
471
  --salt-palette-accent: var(--salt-color-blue-500);
@@ -481,8 +479,6 @@
481
479
  --salt-palette-accent-weaker: var(--salt-color-blue-800);
482
480
  --salt-palette-accent-weaker-disabled: var(--salt-color-blue-800-40a);
483
481
  --salt-palette-accent-weakest: var(--salt-color-blue-900);
484
- --salt-palette-accent-action-hover: var(--salt-color-blue-900);
485
- --salt-palette-accent-action-active: var(--salt-color-blue-800);
486
482
  }
487
483
  .salt-theme.salt-theme-next[data-mode=light][data-accent=teal] {
488
484
  --salt-palette-accent: var(--salt-color-teal-500);
@@ -496,8 +492,6 @@
496
492
  --salt-palette-accent-weaker: var(--salt-color-teal-200);
497
493
  --salt-palette-accent-weaker-disabled: var(--salt-color-teal-200-40a);
498
494
  --salt-palette-accent-weakest: var(--salt-color-teal-100);
499
- --salt-palette-accent-action-hover: var(--salt-color-teal-100);
500
- --salt-palette-accent-action-active: var(--salt-color-teal-200);
501
495
  }
502
496
  .salt-theme.salt-theme-next[data-mode=dark][data-accent=teal] {
503
497
  --salt-palette-accent: var(--salt-color-teal-500);
@@ -511,8 +505,6 @@
511
505
  --salt-palette-accent-weaker: var(--salt-color-teal-800);
512
506
  --salt-palette-accent-weaker-disabled: var(--salt-color-teal-800-40a);
513
507
  --salt-palette-accent-weakest: var(--salt-color-teal-900);
514
- --salt-palette-accent-action-hover: var(--salt-color-teal-900);
515
- --salt-palette-accent-action-active: var(--salt-color-teal-800);
516
508
  }
517
509
 
518
510
  /* css/palette/background-next.css */
@@ -587,8 +579,10 @@
587
579
  .salt-theme.salt-theme-next[data-mode=light] {
588
580
  --salt-palette-negative: var(--salt-color-red-500);
589
581
  --salt-palette-negative-disabled: var(--salt-color-red-500-40a);
582
+ --salt-palette-negative-stronger: var(--salt-color-red-700);
590
583
  --salt-palette-negative-strong: var(--salt-color-red-600);
591
584
  --salt-palette-negative-strong-disabled: var(--salt-color-red-600-40a);
585
+ --salt-palette-negative-weaker: var(--salt-color-red-200);
592
586
  --salt-palette-negative-weakest: var(--salt-color-red-100);
593
587
  --salt-palette-negative-action-hover: var(--salt-color-red-100);
594
588
  --salt-palette-negative-action-active: var(--salt-color-red-200);
@@ -596,8 +590,10 @@
596
590
  .salt-theme.salt-theme-next[data-mode=dark] {
597
591
  --salt-palette-negative: var(--salt-color-red-500);
598
592
  --salt-palette-negative-disabled: var(--salt-color-red-500-40a);
593
+ --salt-palette-negative-stronger: var(--salt-color-red-300);
599
594
  --salt-palette-negative-strong: var(--salt-color-red-400);
600
595
  --salt-palette-negative-strong-disabled: var(--salt-color-red-400-40a);
596
+ --salt-palette-negative-weaker: var(--salt-color-red-800);
601
597
  --salt-palette-negative-weakest: var(--salt-color-red-900);
602
598
  --salt-palette-negative-action-hover: var(--salt-color-red-900);
603
599
  --salt-palette-negative-action-active: var(--salt-color-red-800);
@@ -619,7 +615,6 @@
619
615
  --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-300-10a);
620
616
  --salt-palette-neutral-weakest: var(--salt-color-gray-200);
621
617
  --salt-palette-neutral-action-hover: var(--salt-color-gray-100);
622
- --salt-palette-neutral-action-active: var(--salt-color-gray-200);
623
618
  }
624
619
  .salt-theme.salt-theme-next[data-mode=dark] {
625
620
  --salt-palette-neutral: var(--salt-color-gray-500);
@@ -636,27 +631,28 @@
636
631
  --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-700-10a);
637
632
  --salt-palette-neutral-weakest: var(--salt-color-gray-800);
638
633
  --salt-palette-neutral-action-hover: var(--salt-color-gray-900);
639
- --salt-palette-neutral-action-active: var(--salt-color-gray-800);
640
634
  }
641
635
 
642
636
  /* css/palette/positive-next.css */
643
637
  .salt-theme.salt-theme-next[data-mode=light] {
644
638
  --salt-palette-positive: var(--salt-color-green-500);
645
639
  --salt-palette-positive-disabled: var(--salt-color-green-500-40a);
640
+ --salt-palette-positive-stronger: var(--salt-color-green-700);
646
641
  --salt-palette-positive-strong: var(--salt-color-green-600);
647
642
  --salt-palette-positive-strong-disabled: var(--salt-color-green-600-40a);
643
+ --salt-palette-positive-weaker: var(--salt-color-green-200);
648
644
  --salt-palette-positive-weakest: var(--salt-color-green-100);
649
645
  --salt-palette-positive-action-hover: var(--salt-color-green-100);
650
- --salt-palette-positive-action-active: var(--salt-color-green-200);
651
646
  }
652
647
  .salt-theme.salt-theme-next[data-mode=dark] {
653
648
  --salt-palette-positive: var(--salt-color-green-500);
654
649
  --salt-palette-positive-disabled: var(--salt-color-green-500-40a);
650
+ --salt-palette-positive-stronger: var(--salt-color-green-300);
655
651
  --salt-palette-positive-strong: var(--salt-color-green-400);
656
652
  --salt-palette-positive-strong-disabled: var(--salt-color-green-400-40a);
653
+ --salt-palette-positive-weaker: var(--salt-color-green-800);
657
654
  --salt-palette-positive-weakest: var(--salt-color-green-900);
658
655
  --salt-palette-positive-action-hover: var(--salt-color-green-900);
659
- --salt-palette-positive-action-active: var(--salt-color-green-800);
660
656
  }
661
657
 
662
658
  /* css/palette/text-next.css */
@@ -703,20 +699,22 @@
703
699
  .salt-theme.salt-theme-next[data-mode=light] {
704
700
  --salt-palette-warning: var(--salt-color-orange-500);
705
701
  --salt-palette-warning-disabled: var(--salt-color-orange-500-40a);
702
+ --salt-palette-warning-stronger: var(--salt-color-orange-700);
706
703
  --salt-palette-warning-strong: var(--salt-color-orange-600);
707
704
  --salt-palette-warning-strong-disabled: var(--salt-color-orange-600-40a);
705
+ --salt-palette-warning-weaker: var(--salt-color-orange-200);
708
706
  --salt-palette-warning-weakest: var(--salt-color-orange-100);
709
707
  --salt-palette-warning-action-hover: var(--salt-color-orange-100);
710
- --salt-palette-warning-action-active: var(--salt-color-orange-200);
711
708
  }
712
709
  .salt-theme.salt-theme-next[data-mode=dark] {
713
710
  --salt-palette-warning: var(--salt-color-orange-500);
714
711
  --salt-palette-warning-disabled: var(--salt-color-orange-500-40a);
712
+ --salt-palette-warning-stronger: var(--salt-color-orange-300);
715
713
  --salt-palette-warning-strong: var(--salt-color-orange-400);
716
714
  --salt-palette-warning-strong-disabled: var(--salt-color-orange-400-40a);
715
+ --salt-palette-warning-weaker: var(--salt-color-orange-800);
717
716
  --salt-palette-warning-weakest: var(--salt-color-orange-900);
718
717
  --salt-palette-warning-action-hover: var(--salt-color-orange-900);
719
- --salt-palette-warning-action-active: var(--salt-color-orange-800);
720
718
  }
721
719
 
722
720
  /* css/characteristics/accent-next.css */
@@ -730,7 +728,7 @@
730
728
 
731
729
  /* css/characteristics/actionable-next.css */
732
730
  .salt-theme.salt-theme-next {
733
- --salt-actionable-accented-bold-background-active: var(--salt-palette-accent-action-active);
731
+ --salt-actionable-accented-bold-background-active: var(--salt-palette-accent-weaker);
734
732
  --salt-actionable-accented-bold-background-disabled: var(--salt-palette-accent-disabled);
735
733
  --salt-actionable-accented-bold-background-hover: var(--salt-palette-accent);
736
734
  --salt-actionable-accented-bold-background: var(--salt-palette-accent);
@@ -742,9 +740,9 @@
742
740
  --salt-actionable-accented-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
743
741
  --salt-actionable-accented-bold-foreground-hover: var(--salt-palette-foreground-primary-alt);
744
742
  --salt-actionable-accented-bold-foreground: var(--salt-palette-foreground-primary-alt);
745
- --salt-actionable-accented-background-active: var(--salt-palette-accent-action-active);
743
+ --salt-actionable-accented-background-active: var(--salt-palette-accent-weaker);
746
744
  --salt-actionable-accented-background-disabled: var(--salt-palette-alpha-none);
747
- --salt-actionable-accented-background-hover: var(--salt-palette-accent-action-hover);
745
+ --salt-actionable-accented-background-hover: var(--salt-palette-accent-weakest);
748
746
  --salt-actionable-accented-background: var(--salt-palette-alpha-none);
749
747
  --salt-actionable-accented-borderColor-active: var(--salt-palette-accent);
750
748
  --salt-actionable-accented-borderColor-disabled: var(--salt-palette-accent-disabled);
@@ -752,11 +750,11 @@
752
750
  --salt-actionable-accented-borderColor: var(--salt-palette-accent);
753
751
  --salt-actionable-accented-foreground-active: var(--salt-palette-foreground-primary);
754
752
  --salt-actionable-accented-foreground-disabled: var(--salt-palette-accent-strong-disabled);
755
- --salt-actionable-accented-foreground-hover: var(--salt-palette-accent-strong);
753
+ --salt-actionable-accented-foreground-hover: var(--salt-palette-accent-stronger);
756
754
  --salt-actionable-accented-foreground: var(--salt-palette-accent-strong);
757
- --salt-actionable-accented-subtle-background-active: var(--salt-palette-accent-action-active);
755
+ --salt-actionable-accented-subtle-background-active: var(--salt-palette-accent-weaker);
758
756
  --salt-actionable-accented-subtle-background-disabled: var(--salt-palette-alpha-none);
759
- --salt-actionable-accented-subtle-background-hover: var(--salt-palette-accent-action-hover);
757
+ --salt-actionable-accented-subtle-background-hover: var(--salt-palette-accent-weakest);
760
758
  --salt-actionable-accented-subtle-background: var(--salt-palette-alpha-none);
761
759
  --salt-actionable-accented-subtle-borderColor-active: var(--salt-palette-accent);
762
760
  --salt-actionable-accented-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
@@ -764,9 +762,9 @@
764
762
  --salt-actionable-accented-subtle-borderColor: var(--salt-palette-alpha-none);
765
763
  --salt-actionable-accented-subtle-foreground-active: var(--salt-palette-foreground-primary);
766
764
  --salt-actionable-accented-subtle-foreground-disabled: var(--salt-palette-accent-strong-disabled);
767
- --salt-actionable-accented-subtle-foreground-hover: var(--salt-palette-accent-strong);
765
+ --salt-actionable-accented-subtle-foreground-hover: var(--salt-palette-accent-stronger);
768
766
  --salt-actionable-accented-subtle-foreground: var(--salt-palette-accent-strong);
769
- --salt-actionable-bold-background-active: var(--salt-palette-neutral-action-active);
767
+ --salt-actionable-bold-background-active: var(--salt-palette-neutral-weaker);
770
768
  --salt-actionable-bold-background-disabled: var(--salt-palette-neutral-disabled);
771
769
  --salt-actionable-bold-background-hover: var(--salt-palette-neutral);
772
770
  --salt-actionable-bold-background: var(--salt-palette-neutral);
@@ -778,7 +776,7 @@
778
776
  --salt-actionable-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
779
777
  --salt-actionable-bold-foreground-hover: var(--salt-palette-foreground-primary-alt);
780
778
  --salt-actionable-bold-foreground: var(--salt-palette-foreground-primary-alt);
781
- --salt-actionable-background-active: var(--salt-palette-neutral-action-active);
779
+ --salt-actionable-background-active: var(--salt-palette-neutral-weaker);
782
780
  --salt-actionable-background-disabled: var(--salt-palette-alpha-none);
783
781
  --salt-actionable-background-hover: var(--salt-palette-neutral-action-hover);
784
782
  --salt-actionable-background: var(--salt-palette-alpha-none);
@@ -790,7 +788,7 @@
790
788
  --salt-actionable-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
791
789
  --salt-actionable-foreground-hover: var(--salt-palette-foreground-primary);
792
790
  --salt-actionable-foreground: var(--salt-palette-foreground-primary);
793
- --salt-actionable-subtle-background-active: var(--salt-palette-neutral-action-active);
791
+ --salt-actionable-subtle-background-active: var(--salt-palette-neutral-weaker);
794
792
  --salt-actionable-subtle-background-disabled: var(--salt-palette-alpha-none);
795
793
  --salt-actionable-subtle-background-hover: var(--salt-palette-neutral-action-hover);
796
794
  --salt-actionable-subtle-background: var(--salt-palette-alpha-none);
@@ -802,7 +800,7 @@
802
800
  --salt-actionable-subtle-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
803
801
  --salt-actionable-subtle-foreground-hover: var(--salt-palette-foreground-primary);
804
802
  --salt-actionable-subtle-foreground: var(--salt-palette-foreground-primary);
805
- --salt-actionable-negative-bold-background-active: var(--salt-palette-negative-action-active);
803
+ --salt-actionable-negative-bold-background-active: var(--salt-palette-negative-weaker);
806
804
  --salt-actionable-negative-bold-background-disabled: var(--salt-palette-negative-disabled);
807
805
  --salt-actionable-negative-bold-background-hover: var(--salt-palette-negative);
808
806
  --salt-actionable-negative-bold-background: var(--salt-palette-negative);
@@ -814,7 +812,7 @@
814
812
  --salt-actionable-negative-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
815
813
  --salt-actionable-negative-bold-foreground-hover: var(--salt-palette-foreground-primary-alt);
816
814
  --salt-actionable-negative-bold-foreground: var(--salt-palette-foreground-primary-alt);
817
- --salt-actionable-negative-background-active: var(--salt-palette-negative-action-active);
815
+ --salt-actionable-negative-background-active: var(--salt-palette-negative-weaker);
818
816
  --salt-actionable-negative-background-disabled: var(--salt-palette-alpha-none);
819
817
  --salt-actionable-negative-background-hover: var(--salt-palette-negative-action-hover);
820
818
  --salt-actionable-negative-background: var(--salt-palette-alpha-none);
@@ -824,9 +822,9 @@
824
822
  --salt-actionable-negative-borderColor: var(--salt-palette-negative);
825
823
  --salt-actionable-negative-foreground-active: var(--salt-palette-foreground-primary);
826
824
  --salt-actionable-negative-foreground-disabled: var(--salt-palette-negative-strong-disabled);
827
- --salt-actionable-negative-foreground-hover: var(--salt-palette-negative-strong);
825
+ --salt-actionable-negative-foreground-hover: var(--salt-palette-negative-stronger);
828
826
  --salt-actionable-negative-foreground: var(--salt-palette-negative-strong);
829
- --salt-actionable-negative-subtle-background-active: var(--salt-palette-negative-action-active);
827
+ --salt-actionable-negative-subtle-background-active: var(--salt-palette-negative-weaker);
830
828
  --salt-actionable-negative-subtle-background-disabled: var(--salt-palette-alpha-none);
831
829
  --salt-actionable-negative-subtle-background-hover: var(--salt-palette-negative-action-hover);
832
830
  --salt-actionable-negative-subtle-background: var(--salt-palette-alpha-none);
@@ -836,9 +834,9 @@
836
834
  --salt-actionable-negative-subtle-borderColor: var(--salt-palette-alpha-none);
837
835
  --salt-actionable-negative-subtle-foreground-active: var(--salt-palette-foreground-primary);
838
836
  --salt-actionable-negative-subtle-foreground-disabled: var(--salt-palette-negative-strong-disabled);
839
- --salt-actionable-negative-subtle-foreground-hover: var(--salt-palette-negative-strong);
837
+ --salt-actionable-negative-subtle-foreground-hover: var(--salt-palette-negative-stronger);
840
838
  --salt-actionable-negative-subtle-foreground: var(--salt-palette-negative-strong);
841
- --salt-actionable-positive-bold-background-active: var(--salt-palette-positive-action-active);
839
+ --salt-actionable-positive-bold-background-active: var(--salt-palette-positive-weaker);
842
840
  --salt-actionable-positive-bold-background-disabled: var(--salt-palette-positive-disabled);
843
841
  --salt-actionable-positive-bold-background-hover: var(--salt-palette-positive);
844
842
  --salt-actionable-positive-bold-background: var(--salt-palette-positive);
@@ -850,7 +848,7 @@
850
848
  --salt-actionable-positive-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
851
849
  --salt-actionable-positive-bold-foreground-hover: var(--salt-palette-foreground-primary-alt);
852
850
  --salt-actionable-positive-bold-foreground: var(--salt-palette-foreground-primary-alt);
853
- --salt-actionable-positive-background-active: var(--salt-palette-positive-action-active);
851
+ --salt-actionable-positive-background-active: var(--salt-palette-positive-weaker);
854
852
  --salt-actionable-positive-background-disabled: var(--salt-palette-alpha-none);
855
853
  --salt-actionable-positive-background-hover: var(--salt-palette-positive-action-hover);
856
854
  --salt-actionable-positive-background: var(--salt-palette-alpha-none);
@@ -860,9 +858,9 @@
860
858
  --salt-actionable-positive-borderColor: var(--salt-palette-positive);
861
859
  --salt-actionable-positive-foreground-active: var(--salt-palette-foreground-primary);
862
860
  --salt-actionable-positive-foreground-disabled: var(--salt-palette-positive-strong-disabled);
863
- --salt-actionable-positive-foreground-hover: var(--salt-palette-positive-strong);
861
+ --salt-actionable-positive-foreground-hover: var(--salt-palette-positive-stronger);
864
862
  --salt-actionable-positive-foreground: var(--salt-palette-positive-strong);
865
- --salt-actionable-positive-subtle-background-active: var(--salt-palette-positive-action-active);
863
+ --salt-actionable-positive-subtle-background-active: var(--salt-palette-positive-weaker);
866
864
  --salt-actionable-positive-subtle-background-disabled: var(--salt-palette-alpha-none);
867
865
  --salt-actionable-positive-subtle-background-hover: var(--salt-palette-positive-action-hover);
868
866
  --salt-actionable-positive-subtle-background: var(--salt-palette-alpha-none);
@@ -872,9 +870,9 @@
872
870
  --salt-actionable-positive-subtle-borderColor: var(--salt-palette-alpha-none);
873
871
  --salt-actionable-positive-subtle-foreground-active: var(--salt-palette-foreground-primary);
874
872
  --salt-actionable-positive-subtle-foreground-disabled: var(--salt-palette-positive-strong-disabled);
875
- --salt-actionable-positive-subtle-foreground-hover: var(--salt-palette-positive-strong);
873
+ --salt-actionable-positive-subtle-foreground-hover: var(--salt-palette-positive-stronger);
876
874
  --salt-actionable-positive-subtle-foreground: var(--salt-palette-positive-strong);
877
- --salt-actionable-caution-bold-background-active: var(--salt-palette-warning-action-active);
875
+ --salt-actionable-caution-bold-background-active: var(--salt-palette-warning-weaker);
878
876
  --salt-actionable-caution-bold-background-disabled: var(--salt-palette-warning-disabled);
879
877
  --salt-actionable-caution-bold-background-hover: var(--salt-palette-warning);
880
878
  --salt-actionable-caution-bold-background: var(--salt-palette-warning);
@@ -886,7 +884,7 @@
886
884
  --salt-actionable-caution-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
887
885
  --salt-actionable-caution-bold-foreground-hover: var(--salt-palette-foreground-primary-alt);
888
886
  --salt-actionable-caution-bold-foreground: var(--salt-palette-foreground-primary-alt);
889
- --salt-actionable-caution-background-active: var(--salt-palette-warning-action-active);
887
+ --salt-actionable-caution-background-active: var(--salt-palette-warning-weaker);
890
888
  --salt-actionable-caution-background-disabled: var(--salt-palette-alpha-none);
891
889
  --salt-actionable-caution-background-hover: var(--salt-palette-warning-action-hover);
892
890
  --salt-actionable-caution-background: var(--salt-palette-alpha-none);
@@ -896,9 +894,9 @@
896
894
  --salt-actionable-caution-borderColor: var(--salt-palette-warning);
897
895
  --salt-actionable-caution-foreground-active: var(--salt-palette-foreground-primary);
898
896
  --salt-actionable-caution-foreground-disabled: var(--salt-palette-warning-strong-disabled);
899
- --salt-actionable-caution-foreground-hover: var(--salt-palette-warning-strong);
897
+ --salt-actionable-caution-foreground-hover: var(--salt-palette-warning-stronger);
900
898
  --salt-actionable-caution-foreground: var(--salt-palette-warning-strong);
901
- --salt-actionable-caution-subtle-background-active: var(--salt-palette-warning-action-active);
899
+ --salt-actionable-caution-subtle-background-active: var(--salt-palette-warning-weaker);
902
900
  --salt-actionable-caution-subtle-background-disabled: var(--salt-palette-alpha-none);
903
901
  --salt-actionable-caution-subtle-background-hover: var(--salt-palette-warning-action-hover);
904
902
  --salt-actionable-caution-subtle-background: var(--salt-palette-alpha-none);
@@ -908,7 +906,7 @@
908
906
  --salt-actionable-caution-subtle-borderColor: var(--salt-palette-alpha-none);
909
907
  --salt-actionable-caution-subtle-foreground-active: var(--salt-palette-foreground-primary);
910
908
  --salt-actionable-caution-subtle-foreground-disabled: var(--salt-palette-warning-strong-disabled);
911
- --salt-actionable-caution-subtle-foreground-hover: var(--salt-palette-warning-strong);
909
+ --salt-actionable-caution-subtle-foreground-hover: var(--salt-palette-warning-stronger);
912
910
  --salt-actionable-caution-subtle-foreground: var(--salt-palette-warning-strong);
913
911
  }
914
912
 
@@ -996,7 +994,6 @@
996
994
  .salt-theme.salt-theme-next {
997
995
  --salt-navigable-indicator-hover: var(--salt-palette-neutral);
998
996
  --salt-navigable-accent-indicator-active: var(--salt-palette-accent);
999
- --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
1000
997
  --salt-navigable-accent-background-active: var(--salt-palette-accent-weakest);
1001
998
  --salt-navigable-accent-borderColor-active: var(--salt-palette-accent);
1002
999
  }
@@ -1004,6 +1001,7 @@
1004
1001
  /* css/characteristics/overlayable-next.css */
1005
1002
  .salt-theme.salt-theme-next {
1006
1003
  --salt-overlayable-background: var(--salt-palette-alpha-higher);
1004
+ --salt-overlayable-background-hover: var(--salt-palette-alpha-contrast-lowest);
1007
1005
  --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-medium);
1008
1006
  --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-mediumLow);
1009
1007
  }
@@ -1073,9 +1071,9 @@
1073
1071
  --salt-status-error-bold-background: var(--salt-palette-negative);
1074
1072
  --salt-status-warning-bold-background: var(--salt-palette-warning);
1075
1073
  --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);
1074
+ --salt-status-success-background-selected: var(--salt-palette-positive-weaker);
1075
+ --salt-status-warning-background-selected: var(--salt-palette-warning-weaker);
1076
+ --salt-status-error-background-selected: var(--salt-palette-negative-weaker);
1079
1077
  }
1080
1078
 
1081
1079
  /* css/characteristics/target-next.css */
@@ -1129,6 +1127,7 @@
1129
1127
  /* css/deprecated/characteristics-next.css */
1130
1128
  .salt-theme.salt-theme-next {
1131
1129
  --salt-navigable-indicator-active: var(--salt-palette-accent);
1130
+ --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
1132
1131
  --salt-selectable-background-blurSelected: var(--salt-palette-neutral-weakest);
1133
1132
  --salt-status-static-foreground: var(--salt-palette-foreground-secondary);
1134
1133
  --salt-status-negative-foreground: var(--salt-palette-negative);
@@ -1151,6 +1150,9 @@
1151
1150
  --salt-palette-positive-weak: var(--salt-color-green-100);
1152
1151
  --salt-palette-info-weak: var(--salt-color-blue-100);
1153
1152
  --salt-palette-negative-weak: var(--salt-color-red-100);
1153
+ --salt-palette-warning-action-active: var(--salt-color-orange-800);
1154
+ --salt-palette-neutral-action-active: var(--salt-color-gray-800);
1155
+ --salt-palette-positive-action-active: var(--salt-color-green-800);
1154
1156
  }
1155
1157
  .salt-theme[data-mode=dark] {
1156
1158
  --salt-palette-foreground-active: var(--salt-color-blue-300);
@@ -1159,6 +1161,25 @@
1159
1161
  --salt-palette-positive-weak: var(--salt-color-green-900);
1160
1162
  --salt-palette-info-weak: var(--salt-color-blue-900);
1161
1163
  --salt-palette-negative-weak: var(--salt-color-red-900);
1164
+ --salt-palette-warning-action-active: var(--salt-color-orange-800);
1165
+ --salt-palette-neutral-action-active: var(--salt-color-gray-800);
1166
+ --salt-palette-positive-action-active: var(--salt-color-green-800);
1167
+ }
1168
+ .salt-theme.salt-theme-next[data-mode=light][data-accent=blue] {
1169
+ --salt-palette-accent-action-active: var(--salt-color-blue-800);
1170
+ --salt-palette-accent-action-hover: var(--salt-color-blue-100);
1171
+ }
1172
+ .salt-theme.salt-theme-next[data-mode=dark][data-accent=blue] {
1173
+ --salt-palette-accent-action-active: var(--salt-color-blue-800);
1174
+ --salt-palette-accent-action-hover: var(--salt-color-blue-900);
1175
+ }
1176
+ .salt-theme.salt-theme-next[data-mode=light][data-accent=teal] {
1177
+ --salt-palette-accent-action-active: var(--salt-color-teal-800);
1178
+ --salt-palette-accent-action-hover: var(--salt-color-teal-100);
1179
+ }
1180
+ .salt-theme.salt-theme-next[data-mode=dark][data-accent=teal] {
1181
+ --salt-palette-accent-action-active: var(--salt-color-teal-800);
1182
+ --salt-palette-accent-action-hover: var(--salt-color-teal-900);
1162
1183
  }
1163
1184
 
1164
1185
  /* css/theme-next.css */
package/css/theme.css CHANGED
@@ -324,6 +324,10 @@
324
324
  194,
325
325
  52,
326
326
  7;
327
+ --salt-color-orange-875-rgb:
328
+ 138,
329
+ 43,
330
+ 15;
327
331
  --salt-color-orange-900-rgb:
328
332
  54,
329
333
  44,
@@ -654,6 +658,7 @@
654
658
  --salt-color-orange-700: rgb(var(--salt-color-orange-700-rgb));
655
659
  --salt-color-orange-800: rgb(var(--salt-color-orange-800-rgb));
656
660
  --salt-color-orange-850: rgb(var(--salt-color-orange-850-rgb));
661
+ --salt-color-orange-875: rgb(var(--salt-color-orange-875-rgb));
657
662
  --salt-color-orange-900: rgb(var(--salt-color-orange-900-rgb));
658
663
  --salt-color-green-10: rgb(var(--salt-color-green-10-rgb));
659
664
  --salt-color-green-20: rgb(var(--salt-color-green-20-rgb));
@@ -1189,7 +1194,7 @@
1189
1194
  .salt-theme[data-mode=light] {
1190
1195
  --salt-palette-error-background: var(--salt-color-red-10);
1191
1196
  --salt-palette-error-bold-background: var(--salt-color-red-500);
1192
- --salt-palette-error-background-selected: var(--salt-color-red-20);
1197
+ --salt-palette-error-background-selected: var(--salt-color-red-30);
1193
1198
  --salt-palette-error-border: var(--salt-color-red-500);
1194
1199
  --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
1195
1200
  --salt-palette-error-foreground-informative: var(--salt-color-red-600);
@@ -1197,7 +1202,7 @@
1197
1202
  .salt-theme[data-mode=dark] {
1198
1203
  --salt-palette-error-background: var(--salt-color-red-900);
1199
1204
  --salt-palette-error-bold-background: var(--salt-color-red-500);
1200
- --salt-palette-error-background-selected: var(--salt-color-red-900);
1205
+ --salt-palette-error-background-selected: var(--salt-color-red-800);
1201
1206
  --salt-palette-error-border: var(--salt-color-red-400);
1202
1207
  --salt-palette-error-foreground-decorative: var(--salt-color-red-400);
1203
1208
  --salt-palette-error-foreground-informative: var(--salt-color-red-200);
@@ -1525,7 +1530,7 @@
1525
1530
  .salt-theme[data-mode=light] {
1526
1531
  --salt-palette-success-background: var(--salt-color-green-10);
1527
1532
  --salt-palette-success-bold-background: var(--salt-color-green-500);
1528
- --salt-palette-success-background-selected: var(--salt-color-green-20);
1533
+ --salt-palette-success-background-selected: var(--salt-color-green-30);
1529
1534
  --salt-palette-success-border: var(--salt-color-green-500);
1530
1535
  --salt-palette-success-foreground-decorative: var(--salt-color-green-500);
1531
1536
  --salt-palette-success-foreground-informative: var(--salt-color-green-600);
@@ -1533,7 +1538,7 @@
1533
1538
  .salt-theme[data-mode=dark] {
1534
1539
  --salt-palette-success-background: var(--salt-color-green-900);
1535
1540
  --salt-palette-success-bold-background: var(--salt-color-green-500);
1536
- --salt-palette-success-background-selected: var(--salt-color-green-900);
1541
+ --salt-palette-success-background-selected: var(--salt-color-green-800);
1537
1542
  --salt-palette-success-border: var(--salt-color-green-400);
1538
1543
  --salt-palette-success-foreground-decorative: var(--salt-color-green-400);
1539
1544
  --salt-palette-success-foreground-informative: var(--salt-color-green-200);
@@ -1566,7 +1571,7 @@
1566
1571
  .salt-theme[data-mode=light] {
1567
1572
  --salt-palette-warning-background: var(--salt-color-orange-10);
1568
1573
  --salt-palette-warning-bold-background: var(--salt-color-orange-800);
1569
- --salt-palette-warning-background-selected: var(--salt-color-orange-20);
1574
+ --salt-palette-warning-background-selected: var(--salt-color-orange-30);
1570
1575
  --salt-palette-warning-border: var(--salt-color-orange-700);
1571
1576
  --salt-palette-warning-border-disabled: var(--salt-color-orange-700-40a);
1572
1577
  --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700);
@@ -1582,7 +1587,7 @@
1582
1587
  .salt-theme[data-mode=dark] {
1583
1588
  --salt-palette-warning-background: var(--salt-color-orange-900);
1584
1589
  --salt-palette-warning-bold-background: var(--salt-color-orange-800);
1585
- --salt-palette-warning-background-selected: var(--salt-color-orange-900);
1590
+ --salt-palette-warning-background-selected: var(--salt-color-orange-875);
1586
1591
  --salt-palette-warning-border: var(--salt-color-orange-500);
1587
1592
  --salt-palette-warning-border-disabled: var(--salt-color-orange-500-40a);
1588
1593
  --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500);
@@ -1962,7 +1967,6 @@
1962
1967
  .salt-theme {
1963
1968
  --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
1964
1969
  --salt-navigable-accent-indicator-active: var(--salt-palette-navigate-indicator-active);
1965
- --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
1966
1970
  --salt-navigable-accent-background-active: var(--salt-palette-alpha-none);
1967
1971
  --salt-navigable-accent-borderColor-active: var(--salt-palette-interact-border-active);
1968
1972
  }
@@ -1977,6 +1981,7 @@
1977
1981
  --salt-overlayable-shadow-drag: var(--salt-shadow-400);
1978
1982
  --salt-overlayable-shadow-modal: var(--salt-shadow-500);
1979
1983
  --salt-overlayable-background: var(--salt-palette-alpha-higher);
1984
+ --salt-overlayable-background-hover: var(--salt-palette-alpha-contrast-lowest);
1980
1985
  --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-medium);
1981
1986
  --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-mediumLow);
1982
1987
  }
@@ -2390,6 +2395,7 @@
2390
2395
  --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
2391
2396
  --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
2392
2397
  --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
2398
+ --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
2393
2399
  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
2394
2400
  --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
2395
2401
  --salt-track-borderStyle: solid;
package/index.css CHANGED
@@ -6,9 +6,6 @@
6
6
  letter-spacing: var(--salt-text-letterSpacing);
7
7
  line-height: var(--salt-text-lineHeight);
8
8
  }
9
- .salt-theme ::selection {
10
- background: var(--salt-content-foreground-highlight);
11
- }
12
9
  .salt-theme[data-mode=light] {
13
10
  color-scheme: light;
14
11
  }
@@ -353,6 +350,10 @@
353
350
  194,
354
351
  52,
355
352
  7;
353
+ --salt-color-orange-875-rgb:
354
+ 138,
355
+ 43,
356
+ 15;
356
357
  --salt-color-orange-900-rgb:
357
358
  54,
358
359
  44,
@@ -683,6 +684,7 @@
683
684
  --salt-color-orange-700: rgb(var(--salt-color-orange-700-rgb));
684
685
  --salt-color-orange-800: rgb(var(--salt-color-orange-800-rgb));
685
686
  --salt-color-orange-850: rgb(var(--salt-color-orange-850-rgb));
687
+ --salt-color-orange-875: rgb(var(--salt-color-orange-875-rgb));
686
688
  --salt-color-orange-900: rgb(var(--salt-color-orange-900-rgb));
687
689
  --salt-color-green-10: rgb(var(--salt-color-green-10-rgb));
688
690
  --salt-color-green-20: rgb(var(--salt-color-green-20-rgb));
@@ -1218,7 +1220,7 @@
1218
1220
  .salt-theme[data-mode=light] {
1219
1221
  --salt-palette-error-background: var(--salt-color-red-10);
1220
1222
  --salt-palette-error-bold-background: var(--salt-color-red-500);
1221
- --salt-palette-error-background-selected: var(--salt-color-red-20);
1223
+ --salt-palette-error-background-selected: var(--salt-color-red-30);
1222
1224
  --salt-palette-error-border: var(--salt-color-red-500);
1223
1225
  --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
1224
1226
  --salt-palette-error-foreground-informative: var(--salt-color-red-600);
@@ -1226,7 +1228,7 @@
1226
1228
  .salt-theme[data-mode=dark] {
1227
1229
  --salt-palette-error-background: var(--salt-color-red-900);
1228
1230
  --salt-palette-error-bold-background: var(--salt-color-red-500);
1229
- --salt-palette-error-background-selected: var(--salt-color-red-900);
1231
+ --salt-palette-error-background-selected: var(--salt-color-red-800);
1230
1232
  --salt-palette-error-border: var(--salt-color-red-400);
1231
1233
  --salt-palette-error-foreground-decorative: var(--salt-color-red-400);
1232
1234
  --salt-palette-error-foreground-informative: var(--salt-color-red-200);
@@ -1554,7 +1556,7 @@
1554
1556
  .salt-theme[data-mode=light] {
1555
1557
  --salt-palette-success-background: var(--salt-color-green-10);
1556
1558
  --salt-palette-success-bold-background: var(--salt-color-green-500);
1557
- --salt-palette-success-background-selected: var(--salt-color-green-20);
1559
+ --salt-palette-success-background-selected: var(--salt-color-green-30);
1558
1560
  --salt-palette-success-border: var(--salt-color-green-500);
1559
1561
  --salt-palette-success-foreground-decorative: var(--salt-color-green-500);
1560
1562
  --salt-palette-success-foreground-informative: var(--salt-color-green-600);
@@ -1562,7 +1564,7 @@
1562
1564
  .salt-theme[data-mode=dark] {
1563
1565
  --salt-palette-success-background: var(--salt-color-green-900);
1564
1566
  --salt-palette-success-bold-background: var(--salt-color-green-500);
1565
- --salt-palette-success-background-selected: var(--salt-color-green-900);
1567
+ --salt-palette-success-background-selected: var(--salt-color-green-800);
1566
1568
  --salt-palette-success-border: var(--salt-color-green-400);
1567
1569
  --salt-palette-success-foreground-decorative: var(--salt-color-green-400);
1568
1570
  --salt-palette-success-foreground-informative: var(--salt-color-green-200);
@@ -1595,7 +1597,7 @@
1595
1597
  .salt-theme[data-mode=light] {
1596
1598
  --salt-palette-warning-background: var(--salt-color-orange-10);
1597
1599
  --salt-palette-warning-bold-background: var(--salt-color-orange-800);
1598
- --salt-palette-warning-background-selected: var(--salt-color-orange-20);
1600
+ --salt-palette-warning-background-selected: var(--salt-color-orange-30);
1599
1601
  --salt-palette-warning-border: var(--salt-color-orange-700);
1600
1602
  --salt-palette-warning-border-disabled: var(--salt-color-orange-700-40a);
1601
1603
  --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700);
@@ -1611,7 +1613,7 @@
1611
1613
  .salt-theme[data-mode=dark] {
1612
1614
  --salt-palette-warning-background: var(--salt-color-orange-900);
1613
1615
  --salt-palette-warning-bold-background: var(--salt-color-orange-800);
1614
- --salt-palette-warning-background-selected: var(--salt-color-orange-900);
1616
+ --salt-palette-warning-background-selected: var(--salt-color-orange-875);
1615
1617
  --salt-palette-warning-border: var(--salt-color-orange-500);
1616
1618
  --salt-palette-warning-border-disabled: var(--salt-color-orange-500-40a);
1617
1619
  --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500);
@@ -1991,7 +1993,6 @@
1991
1993
  .salt-theme {
1992
1994
  --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
1993
1995
  --salt-navigable-accent-indicator-active: var(--salt-palette-navigate-indicator-active);
1994
- --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
1995
1996
  --salt-navigable-accent-background-active: var(--salt-palette-alpha-none);
1996
1997
  --salt-navigable-accent-borderColor-active: var(--salt-palette-interact-border-active);
1997
1998
  }
@@ -2006,6 +2007,7 @@
2006
2007
  --salt-overlayable-shadow-drag: var(--salt-shadow-400);
2007
2008
  --salt-overlayable-shadow-modal: var(--salt-shadow-500);
2008
2009
  --salt-overlayable-background: var(--salt-palette-alpha-higher);
2010
+ --salt-overlayable-background-hover: var(--salt-palette-alpha-contrast-lowest);
2009
2011
  --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-medium);
2010
2012
  --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-mediumLow);
2011
2013
  }
@@ -2419,6 +2421,7 @@
2419
2421
  --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
2420
2422
  --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
2421
2423
  --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
2424
+ --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
2422
2425
  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
2423
2426
  --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
2424
2427
  --salt-track-borderStyle: solid;
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "0.0.0-snapshot-20250813082930",
3
+ "version": "0.0.0-snapshot-20250910193847",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",
7
- "url": "https://github.com/jpmorganchase/salt-ds.git",
7
+ "url": "git+https://github.com/jpmorganchase/salt-ds.git",
8
8
  "directory": "packages/theme"
9
9
  },
10
10
  "bugs": "https://github.com/jpmorganchase/salt-ds/issues",