@salt-ds/theme 0.0.0-snapshot-20240910092109 → 0.0.0-snapshot-20241101142910

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/README.md +1 -0
  2. package/css/theme-next.css +26 -12
  3. package/css/theme.css +19 -7
  4. package/index.css +19 -7
  5. package/package.json +3 -2
package/README.md ADDED
@@ -0,0 +1 @@
1
+ This is a regular package
package/css/theme-next.css CHANGED
@@ -29,9 +29,15 @@
29
29
  --salt-color-gray-600-40a: rgba(var(--salt-color-gray-600-rgb), 0.4);
30
30
  --salt-color-gray-700-10a: rgba(var(--salt-color-gray-700-rgb), 0.1);
31
31
  --salt-color-gray-700-40a: rgba(var(--salt-color-gray-700-rgb), 0.4);
32
+ --salt-color-green-400-40a: rgba(var(--salt-color-green-400-rgb), 0.4);
32
33
  --salt-color-green-500-40a: rgba(var(--salt-color-green-500-rgb), 0.4);
34
+ --salt-color-green-600-40a: rgba(var(--salt-color-green-600-rgb), 0.4);
35
+ --salt-color-orange-400-40a: rgba(var(--salt-color-orange-400-rgb), 0.4);
33
36
  --salt-color-orange-500-40a: rgba(var(--salt-color-orange-500-rgb), 0.4);
37
+ --salt-color-orange-600-40a: rgba(var(--salt-color-orange-600-rgb), 0.4);
38
+ --salt-color-red-400-40a: rgba(var(--salt-color-red-400-rgb), 0.4);
34
39
  --salt-color-red-500-40a: rgba(var(--salt-color-red-500-rgb), 0.4);
40
+ --salt-color-red-600-40a: rgba(var(--salt-color-red-600-rgb), 0.4);
35
41
  --salt-color-teal-200-40a: rgba(var(--salt-color-teal-200-rgb), 0.4);
36
42
  --salt-color-teal-300-40a: rgba(var(--salt-color-teal-300-rgb), 0.4);
37
43
  --salt-color-teal-400-40a: rgba(var(--salt-color-teal-400-rgb), 0.4);
@@ -566,8 +572,8 @@
566
572
  --salt-palette-foreground-primary-disabled: var(--salt-color-black-40a);
567
573
  --salt-palette-foreground-primary-alt: var(--salt-color-white);
568
574
  --salt-palette-foreground-primary-alt-disabled: var(--salt-color-white-40a);
569
- --salt-palette-foreground-secondary: var(--salt-color-gray-600);
570
- --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-600-40a);
575
+ --salt-palette-foreground-secondary: var(--salt-color-gray-700);
576
+ --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-700-40a);
571
577
  --salt-palette-foreground-visited: var(--salt-color-purple-800);
572
578
  }
573
579
  .salt-theme.salt-theme-next[data-mode=dark] {
@@ -577,8 +583,8 @@
577
583
  --salt-palette-foreground-primary-disabled: var(--salt-color-white-40a);
578
584
  --salt-palette-foreground-primary-alt: var(--salt-color-white);
579
585
  --salt-palette-foreground-primary-alt-disabled: var(--salt-color-white-40a);
580
- --salt-palette-foreground-secondary: var(--salt-color-gray-400);
581
- --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-400-40a);
586
+ --salt-palette-foreground-secondary: var(--salt-color-gray-300);
587
+ --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-300-40a);
582
588
  --salt-palette-foreground-visited: var(--salt-color-purple-200);
583
589
  }
584
590
 
@@ -598,6 +604,7 @@
598
604
  .salt-theme.salt-theme-next[data-mode=light] {
599
605
  --salt-palette-negative: var(--salt-color-red-500);
600
606
  --salt-palette-negative-strong: var(--salt-color-red-600);
607
+ --salt-palette-negative-strong-disabled: var(--salt-color-red-600-40a);
601
608
  --salt-palette-negative-weak: var(--salt-color-red-100);
602
609
  --salt-palette-negative-action-hover: var(--salt-color-red-600);
603
610
  --salt-palette-negative-action-active: var(--salt-color-red-800);
@@ -606,6 +613,7 @@
606
613
  .salt-theme.salt-theme-next[data-mode=dark] {
607
614
  --salt-palette-negative: var(--salt-color-red-500);
608
615
  --salt-palette-negative-strong: var(--salt-color-red-400);
616
+ --salt-palette-negative-strong-disabled: var(--salt-color-red-400-40a);
609
617
  --salt-palette-negative-weak: var(--salt-color-red-900);
610
618
  --salt-palette-negative-action-hover: var(--salt-color-red-600);
611
619
  --salt-palette-negative-action-active: var(--salt-color-red-800);
@@ -652,6 +660,7 @@
652
660
  .salt-theme.salt-theme-next[data-mode=light] {
653
661
  --salt-palette-positive: var(--salt-color-green-500);
654
662
  --salt-palette-positive-strong: var(--salt-color-green-600);
663
+ --salt-palette-positive-strong-disabled: var(--salt-color-green-600-40a);
655
664
  --salt-palette-positive-weak: var(--salt-color-green-100);
656
665
  --salt-palette-positive-action-hover: var(--salt-color-green-600);
657
666
  --salt-palette-positive-action-active: var(--salt-color-green-800);
@@ -660,6 +669,7 @@
660
669
  .salt-theme.salt-theme-next[data-mode=dark] {
661
670
  --salt-palette-positive: var(--salt-color-green-500);
662
671
  --salt-palette-positive-strong: var(--salt-color-green-400);
672
+ --salt-palette-positive-strong-disabled: var(--salt-color-green-400-40a);
663
673
  --salt-palette-positive-weak: var(--salt-color-green-900);
664
674
  --salt-palette-positive-action-hover: var(--salt-color-green-600);
665
675
  --salt-palette-positive-action-active: var(--salt-color-green-800);
@@ -711,6 +721,7 @@
711
721
  --salt-palette-warning: var(--salt-color-orange-500);
712
722
  --salt-palette-warning-disabled: var(--salt-color-orange-500-40a);
713
723
  --salt-palette-warning-strong: var(--salt-color-orange-600);
724
+ --salt-palette-warning-strong-disabled: var(--salt-color-orange-600-40a);
714
725
  --salt-palette-warning-weak: var(--salt-color-orange-100);
715
726
  --salt-palette-warning-action-hover: var(--salt-color-orange-600);
716
727
  --salt-palette-warning-action-active: var(--salt-color-orange-800);
@@ -719,6 +730,7 @@
719
730
  --salt-palette-warning: var(--salt-color-orange-500);
720
731
  --salt-palette-warning-disabled: var(--salt-color-orange-500-40a);
721
732
  --salt-palette-warning-strong: var(--salt-color-orange-400);
733
+ --salt-palette-warning-strong-disabled: var(--salt-color-orange-400-40a);
722
734
  --salt-palette-warning-weak: var(--salt-color-orange-900);
723
735
  --salt-palette-warning-action-hover: var(--salt-color-orange-600);
724
736
  --salt-palette-warning-action-active: var(--salt-color-orange-800);
@@ -727,6 +739,7 @@
727
739
  /* css/characteristics/accent-next.css */
728
740
  .salt-theme.salt-theme-next {
729
741
  --salt-accent-background: var(--salt-palette-accent);
742
+ --salt-accent-background-disabled: var(--salt-palette-accent-disabled);
730
743
  --salt-accent-borderColor: var(--salt-palette-accent);
731
744
  --salt-accent-foreground: var(--salt-palette-foreground-primary-alt);
732
745
  }
@@ -826,7 +839,7 @@
826
839
  --salt-actionable-negative-borderColor-hover: var(--salt-palette-negative);
827
840
  --salt-actionable-negative-borderColor: var(--salt-palette-negative);
828
841
  --salt-actionable-negative-foreground-active: var(--salt-palette-foreground-primary-alt);
829
- --salt-actionable-negative-foreground-disabled: var(--salt-palette-negative-strong disabled);
842
+ --salt-actionable-negative-foreground-disabled: var(--salt-palette-negative-strong-disabled);
830
843
  --salt-actionable-negative-foreground-hover: var(--salt-palette-foreground-primary-alt);
831
844
  --salt-actionable-negative-foreground: var(--salt-palette-negative-strong);
832
845
  --salt-actionable-negative-subtle-background-active: var(--salt-palette-negative-action-active);
@@ -838,7 +851,7 @@
838
851
  --salt-actionable-negative-subtle-borderColor-hover: var(--salt-palette-negative);
839
852
  --salt-actionable-negative-subtle-borderColor: var(--salt-palette-alpha-none);
840
853
  --salt-actionable-negative-subtle-foreground-active: var(--salt-palette-foreground-primary-alt);
841
- --salt-actionable-negative-subtle-foreground-disabled: var(--salt-palette-negative-strong disabled);
854
+ --salt-actionable-negative-subtle-foreground-disabled: var(--salt-palette-negative-strong-disabled);
842
855
  --salt-actionable-negative-subtle-foreground-hover: var(--salt-palette-foreground-primary-alt);
843
856
  --salt-actionable-negative-subtle-foreground: var(--salt-palette-negative-strong);
844
857
  --salt-actionable-positive-bold-background-active: var(--salt-palette-positive-action-active);
@@ -862,7 +875,7 @@
862
875
  --salt-actionable-positive-borderColor-hover: var(--salt-palette-positive);
863
876
  --salt-actionable-positive-borderColor: var(--salt-palette-positive);
864
877
  --salt-actionable-positive-foreground-active: var(--salt-palette-foreground-primary-alt);
865
- --salt-actionable-positive-foreground-disabled: var(--salt-palette-positive-strong disabled);
878
+ --salt-actionable-positive-foreground-disabled: var(--salt-palette-positive-strong-disabled);
866
879
  --salt-actionable-positive-foreground-hover: var(--salt-palette-foreground-primary-alt);
867
880
  --salt-actionable-positive-foreground: var(--salt-palette-positive-strong);
868
881
  --salt-actionable-positive-subtle-background-active: var(--salt-palette-positive-action-active);
@@ -874,7 +887,7 @@
874
887
  --salt-actionable-positive-subtle-borderColor-hover: var(--salt-palette-positive);
875
888
  --salt-actionable-positive-subtle-borderColor: var(--salt-palette-alpha-none);
876
889
  --salt-actionable-positive-subtle-foreground-active: var(--salt-palette-foreground-primary-alt);
877
- --salt-actionable-positive-subtle-foreground-disabled: var(--salt-palette-positive-strong disabled);
890
+ --salt-actionable-positive-subtle-foreground-disabled: var(--salt-palette-positive-strong-disabled);
878
891
  --salt-actionable-positive-subtle-foreground-hover: var(--salt-palette-foreground-primary-alt);
879
892
  --salt-actionable-positive-subtle-foreground: var(--salt-palette-positive-strong);
880
893
  --salt-actionable-caution-bold-background-active: var(--salt-palette-warning-action-active);
@@ -898,7 +911,7 @@
898
911
  --salt-actionable-caution-borderColor-hover: var(--salt-palette-warning);
899
912
  --salt-actionable-caution-borderColor: var(--salt-palette-warning);
900
913
  --salt-actionable-caution-foreground-active: var(--salt-palette-foreground-primary-alt);
901
- --salt-actionable-caution-foreground-disabled: var(--salt-palette-warning-strong disabled);
914
+ --salt-actionable-caution-foreground-disabled: var(--salt-palette-warning-strong-disabled);
902
915
  --salt-actionable-caution-foreground-hover: var(--salt-palette-foreground-primary-alt);
903
916
  --salt-actionable-caution-foreground: var(--salt-palette-warning-strong);
904
917
  --salt-actionable-caution-subtle-background-active: var(--salt-palette-warning-action-active);
@@ -910,7 +923,7 @@
910
923
  --salt-actionable-caution-subtle-borderColor-hover: var(--salt-palette-warning);
911
924
  --salt-actionable-caution-subtle-borderColor: var(--salt-palette-alpha-none);
912
925
  --salt-actionable-caution-subtle-foreground-active: var(--salt-palette-foreground-primary-alt);
913
- --salt-actionable-caution-subtle-foreground-disabled: var(--salt-palette-warning-strong disabled);
926
+ --salt-actionable-caution-subtle-foreground-disabled: var(--salt-palette-warning-strong-disabled);
914
927
  --salt-actionable-caution-subtle-foreground-hover: var(--salt-palette-foreground-primary-alt);
915
928
  --salt-actionable-caution-subtle-foreground: var(--salt-palette-warning-strong);
916
929
  }
@@ -1002,6 +1015,7 @@
1002
1015
  /* css/characteristics/overlayable-next.css */
1003
1016
  .salt-theme.salt-theme-next {
1004
1017
  --salt-overlayable-background: var(--salt-palette-alpha-backdrop);
1018
+ --salt-overlayable-background-highlight: var(--salt-palette-alpha);
1005
1019
  --salt-overlayable-rangeSelection: var(--salt-palette-alpha-weak);
1006
1020
  }
1007
1021
 
@@ -1065,8 +1079,8 @@
1065
1079
 
1066
1080
  /* css/characteristics/target-next.css */
1067
1081
  .salt-theme.salt-theme-next {
1068
- --salt-target-background-hover: var(--salt-palette-accent);
1069
- --salt-target-borderColor-hover: var(--salt-palette-accent-weakest);
1082
+ --salt-target-background-hover: var(--salt-palette-accent-weakest);
1083
+ --salt-target-borderColor-hover: var(--salt-palette-accent);
1070
1084
  }
1071
1085
 
1072
1086
  /* css/characteristics/text-next.css */
package/css/theme.css CHANGED
@@ -512,8 +512,10 @@
512
512
  --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
513
513
  --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
514
514
  --salt-color-black-fade-background-selection: rgba(0, 0, 0, var(--salt-opacity-15));
515
+ --salt-color-black-fade-background-highlight: rgba(0, 0, 0, var(--salt-opacity-25));
515
516
  --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
516
517
  --salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15));
518
+ --salt-color-white-fade-background-highlight: rgba(255, 255, 255, var(--salt-opacity-25));
517
519
  }
518
520
 
519
521
  /* css/foundations/opacity.css */
@@ -660,6 +662,7 @@
660
662
  /* css/palette/accent.css */
661
663
  .salt-theme[data-mode=light] {
662
664
  --salt-palette-accent-background: var(--salt-color-blue-500);
665
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
663
666
  --salt-palette-accent-border: var(--salt-color-blue-500);
664
667
  --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
665
668
  --salt-palette-accent-foreground: var(--salt-color-white);
@@ -668,6 +671,7 @@
668
671
  }
669
672
  .salt-theme[data-mode=dark] {
670
673
  --salt-palette-accent-background: var(--salt-color-blue-500);
674
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
671
675
  --salt-palette-accent-border: var(--salt-color-blue-500);
672
676
  --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
673
677
  --salt-palette-accent-foreground: var(--salt-color-white);
@@ -864,6 +868,8 @@
864
868
  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
865
869
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
866
870
  --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
871
+ --salt-palette-interact-cta-border-hover: var(--salt-color-blue-500);
872
+ --salt-palette-interact-cta-border-active: var(--salt-color-blue-700);
867
873
  --salt-palette-interact-primary-background: var(--salt-color-gray-60);
868
874
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-200);
869
875
  --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background);
@@ -909,6 +915,8 @@
909
915
  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
910
916
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
911
917
  --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
918
+ --salt-palette-interact-cta-border-hover: var(--salt-color-blue-500);
919
+ --salt-palette-interact-cta-border-active: var(--salt-color-blue-700);
912
920
  --salt-palette-interact-primary-background: var(--salt-color-gray-300);
913
921
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-70);
914
922
  --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background);
@@ -984,14 +992,15 @@
984
992
  --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-50-fade-border);
985
993
  --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
986
994
  --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
987
- --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
988
995
  --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
989
- --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
990
- --salt-palette-neutral-selection: var(--salt-color-black-fade-background-selection);
991
996
  --salt-palette-neutral-tertiary-background: var(--salt-color-gray-30);
992
997
  --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-30-fade-background);
993
998
  --salt-palette-neutral-tertiary-border: var(--salt-color-gray-50);
994
999
  --salt-palette-neutral-tertiary-border-disabled: var(--salt-color-gray-50-fade-background);
1000
+ --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
1001
+ --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
1002
+ --salt-palette-neutral-selection: var(--salt-color-black-fade-background-selection);
1003
+ --salt-palette-neutral-highlight: var(--salt-color-black-fade-background-highlight);
995
1004
  }
996
1005
  .salt-theme[data-mode=dark] {
997
1006
  --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
@@ -1009,14 +1018,15 @@
1009
1018
  --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-300-fade-border);
1010
1019
  --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-70);
1011
1020
  --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground);
1012
- --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
1013
1021
  --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
1014
1022
  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
1015
- --salt-palette-neutral-selection: var(--salt-color-white-fade-background-selection);
1016
1023
  --salt-palette-neutral-tertiary-background: var(--salt-color-gray-500);
1017
1024
  --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-500-fade-background);
1018
1025
  --salt-palette-neutral-tertiary-border: var(--salt-color-gray-300);
1019
1026
  --salt-palette-neutral-tertiary-border-disabled: var(--salt-color-gray-300-fade-background);
1027
+ --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
1028
+ --salt-palette-neutral-selection: var(--salt-color-white-fade-background-selection);
1029
+ --salt-palette-neutral-highlight: var(--salt-color-white-fade-background-highlight);
1020
1030
  }
1021
1031
 
1022
1032
  /* css/palette/opacity.css */
@@ -1128,6 +1138,7 @@
1128
1138
  /* css/characteristics/accent.css */
1129
1139
  .salt-theme {
1130
1140
  --salt-accent-background: var(--salt-palette-accent-background);
1141
+ --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
1131
1142
  --salt-accent-borderColor: var(--salt-palette-accent-border);
1132
1143
  --salt-accent-foreground: var(--salt-palette-accent-foreground);
1133
1144
  }
@@ -1165,9 +1176,9 @@
1165
1176
  --salt-actionable-accented-background-disabled: var(--salt-palette-interact-background);
1166
1177
  --salt-actionable-accented-background-hover: var(--salt-palette-interact-cta-background-hover);
1167
1178
  --salt-actionable-accented-background: var(--salt-palette-interact-background);
1168
- --salt-actionable-accented-borderColor-active: var(--salt-palette-interact-border-none);
1179
+ --salt-actionable-accented-borderColor-active: var(--salt-palette-interact-cta-border-active);
1169
1180
  --salt-actionable-accented-borderColor-disabled: var(--salt-palette-accent-border-disabled);
1170
- --salt-actionable-accented-borderColor-hover: var(--salt-palette-interact-border-none);
1181
+ --salt-actionable-accented-borderColor-hover: var(--salt-palette-interact-cta-border-hover);
1171
1182
  --salt-actionable-accented-borderColor: var(--salt-palette-accent-border);
1172
1183
  --salt-actionable-accented-foreground-active: var(--salt-palette-interact-cta-foreground);
1173
1184
  --salt-actionable-accented-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
@@ -1539,6 +1550,7 @@
1539
1550
  --salt-overlayable-shadow-drag: var(--salt-shadow-400);
1540
1551
  --salt-overlayable-shadow-modal: var(--salt-shadow-500);
1541
1552
  --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
1553
+ --salt-overlayable-background-highlight: var(--salt-palette-neutral-highlight);
1542
1554
  --salt-overlayable-rangeSelection: var(--salt-palette-neutral-selection);
1543
1555
  }
1544
1556
 
package/index.css CHANGED
@@ -541,8 +541,10 @@
541
541
  --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
542
542
  --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
543
543
  --salt-color-black-fade-background-selection: rgba(0, 0, 0, var(--salt-opacity-15));
544
+ --salt-color-black-fade-background-highlight: rgba(0, 0, 0, var(--salt-opacity-25));
544
545
  --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
545
546
  --salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15));
547
+ --salt-color-white-fade-background-highlight: rgba(255, 255, 255, var(--salt-opacity-25));
546
548
  }
547
549
 
548
550
  /* css/foundations/opacity.css */
@@ -689,6 +691,7 @@
689
691
  /* css/palette/accent.css */
690
692
  .salt-theme[data-mode=light] {
691
693
  --salt-palette-accent-background: var(--salt-color-blue-500);
694
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
692
695
  --salt-palette-accent-border: var(--salt-color-blue-500);
693
696
  --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
694
697
  --salt-palette-accent-foreground: var(--salt-color-white);
@@ -697,6 +700,7 @@
697
700
  }
698
701
  .salt-theme[data-mode=dark] {
699
702
  --salt-palette-accent-background: var(--salt-color-blue-500);
703
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
700
704
  --salt-palette-accent-border: var(--salt-color-blue-500);
701
705
  --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
702
706
  --salt-palette-accent-foreground: var(--salt-color-white);
@@ -893,6 +897,8 @@
893
897
  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
894
898
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
895
899
  --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
900
+ --salt-palette-interact-cta-border-hover: var(--salt-color-blue-500);
901
+ --salt-palette-interact-cta-border-active: var(--salt-color-blue-700);
896
902
  --salt-palette-interact-primary-background: var(--salt-color-gray-60);
897
903
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-200);
898
904
  --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background);
@@ -938,6 +944,8 @@
938
944
  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
939
945
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
940
946
  --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
947
+ --salt-palette-interact-cta-border-hover: var(--salt-color-blue-500);
948
+ --salt-palette-interact-cta-border-active: var(--salt-color-blue-700);
941
949
  --salt-palette-interact-primary-background: var(--salt-color-gray-300);
942
950
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-70);
943
951
  --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background);
@@ -1013,14 +1021,15 @@
1013
1021
  --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-50-fade-border);
1014
1022
  --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
1015
1023
  --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
1016
- --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
1017
1024
  --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
1018
- --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
1019
- --salt-palette-neutral-selection: var(--salt-color-black-fade-background-selection);
1020
1025
  --salt-palette-neutral-tertiary-background: var(--salt-color-gray-30);
1021
1026
  --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-30-fade-background);
1022
1027
  --salt-palette-neutral-tertiary-border: var(--salt-color-gray-50);
1023
1028
  --salt-palette-neutral-tertiary-border-disabled: var(--salt-color-gray-50-fade-background);
1029
+ --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
1030
+ --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
1031
+ --salt-palette-neutral-selection: var(--salt-color-black-fade-background-selection);
1032
+ --salt-palette-neutral-highlight: var(--salt-color-black-fade-background-highlight);
1024
1033
  }
1025
1034
  .salt-theme[data-mode=dark] {
1026
1035
  --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
@@ -1038,14 +1047,15 @@
1038
1047
  --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-300-fade-border);
1039
1048
  --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-70);
1040
1049
  --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground);
1041
- --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
1042
1050
  --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
1043
1051
  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
1044
- --salt-palette-neutral-selection: var(--salt-color-white-fade-background-selection);
1045
1052
  --salt-palette-neutral-tertiary-background: var(--salt-color-gray-500);
1046
1053
  --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-500-fade-background);
1047
1054
  --salt-palette-neutral-tertiary-border: var(--salt-color-gray-300);
1048
1055
  --salt-palette-neutral-tertiary-border-disabled: var(--salt-color-gray-300-fade-background);
1056
+ --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
1057
+ --salt-palette-neutral-selection: var(--salt-color-white-fade-background-selection);
1058
+ --salt-palette-neutral-highlight: var(--salt-color-white-fade-background-highlight);
1049
1059
  }
1050
1060
 
1051
1061
  /* css/palette/opacity.css */
@@ -1157,6 +1167,7 @@
1157
1167
  /* css/characteristics/accent.css */
1158
1168
  .salt-theme {
1159
1169
  --salt-accent-background: var(--salt-palette-accent-background);
1170
+ --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
1160
1171
  --salt-accent-borderColor: var(--salt-palette-accent-border);
1161
1172
  --salt-accent-foreground: var(--salt-palette-accent-foreground);
1162
1173
  }
@@ -1194,9 +1205,9 @@
1194
1205
  --salt-actionable-accented-background-disabled: var(--salt-palette-interact-background);
1195
1206
  --salt-actionable-accented-background-hover: var(--salt-palette-interact-cta-background-hover);
1196
1207
  --salt-actionable-accented-background: var(--salt-palette-interact-background);
1197
- --salt-actionable-accented-borderColor-active: var(--salt-palette-interact-border-none);
1208
+ --salt-actionable-accented-borderColor-active: var(--salt-palette-interact-cta-border-active);
1198
1209
  --salt-actionable-accented-borderColor-disabled: var(--salt-palette-accent-border-disabled);
1199
- --salt-actionable-accented-borderColor-hover: var(--salt-palette-interact-border-none);
1210
+ --salt-actionable-accented-borderColor-hover: var(--salt-palette-interact-cta-border-hover);
1200
1211
  --salt-actionable-accented-borderColor: var(--salt-palette-accent-border);
1201
1212
  --salt-actionable-accented-foreground-active: var(--salt-palette-interact-cta-foreground);
1202
1213
  --salt-actionable-accented-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
@@ -1568,6 +1579,7 @@
1568
1579
  --salt-overlayable-shadow-drag: var(--salt-shadow-400);
1569
1580
  --salt-overlayable-shadow-modal: var(--salt-shadow-500);
1570
1581
  --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
1582
+ --salt-overlayable-background-highlight: var(--salt-palette-neutral-highlight);
1571
1583
  --salt-overlayable-rangeSelection: var(--salt-palette-neutral-selection);
1572
1584
  }
1573
1585
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "0.0.0-snapshot-20240910092109",
3
+ "version": "0.0.0-snapshot-20241101142910",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -14,7 +14,8 @@
14
14
  "/css"
15
15
  ],
16
16
  "scripts": {
17
- "build": "yarn node ./scripts/build.mjs"
17
+ "build": "yarn node ./scripts/build.mjs",
18
+ "build:watch": "yarn node ./scripts/build.mjs --watch"
18
19
  },
19
20
  "devDependencies": {
20
21
  "del": "^7.0.0"