@salt-ds/theme 1.22.0 → 1.23.1

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 (4) hide show
  1. package/css/theme-next.css +19 -6
  2. package/css/theme.css +9 -2
  3. package/index.css +9 -2
  4. package/package.json +1 -1
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);
@@ -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
  }
package/css/theme.css CHANGED
@@ -662,6 +662,7 @@
662
662
  /* css/palette/accent.css */
663
663
  .salt-theme[data-mode=light] {
664
664
  --salt-palette-accent-background: var(--salt-color-blue-500);
665
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
665
666
  --salt-palette-accent-border: var(--salt-color-blue-500);
666
667
  --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
667
668
  --salt-palette-accent-foreground: var(--salt-color-white);
@@ -670,6 +671,7 @@
670
671
  }
671
672
  .salt-theme[data-mode=dark] {
672
673
  --salt-palette-accent-background: var(--salt-color-blue-500);
674
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
673
675
  --salt-palette-accent-border: var(--salt-color-blue-500);
674
676
  --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
675
677
  --salt-palette-accent-foreground: var(--salt-color-white);
@@ -866,6 +868,8 @@
866
868
  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
867
869
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
868
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);
869
873
  --salt-palette-interact-primary-background: var(--salt-color-gray-60);
870
874
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-200);
871
875
  --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background);
@@ -911,6 +915,8 @@
911
915
  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
912
916
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
913
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);
914
920
  --salt-palette-interact-primary-background: var(--salt-color-gray-300);
915
921
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-70);
916
922
  --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background);
@@ -1132,6 +1138,7 @@
1132
1138
  /* css/characteristics/accent.css */
1133
1139
  .salt-theme {
1134
1140
  --salt-accent-background: var(--salt-palette-accent-background);
1141
+ --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
1135
1142
  --salt-accent-borderColor: var(--salt-palette-accent-border);
1136
1143
  --salt-accent-foreground: var(--salt-palette-accent-foreground);
1137
1144
  }
@@ -1169,9 +1176,9 @@
1169
1176
  --salt-actionable-accented-background-disabled: var(--salt-palette-interact-background);
1170
1177
  --salt-actionable-accented-background-hover: var(--salt-palette-interact-cta-background-hover);
1171
1178
  --salt-actionable-accented-background: var(--salt-palette-interact-background);
1172
- --salt-actionable-accented-borderColor-active: var(--salt-palette-interact-border-none);
1179
+ --salt-actionable-accented-borderColor-active: var(--salt-palette-interact-cta-border-active);
1173
1180
  --salt-actionable-accented-borderColor-disabled: var(--salt-palette-accent-border-disabled);
1174
- --salt-actionable-accented-borderColor-hover: var(--salt-palette-interact-border-none);
1181
+ --salt-actionable-accented-borderColor-hover: var(--salt-palette-interact-cta-border-hover);
1175
1182
  --salt-actionable-accented-borderColor: var(--salt-palette-accent-border);
1176
1183
  --salt-actionable-accented-foreground-active: var(--salt-palette-interact-cta-foreground);
1177
1184
  --salt-actionable-accented-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
package/index.css CHANGED
@@ -691,6 +691,7 @@
691
691
  /* css/palette/accent.css */
692
692
  .salt-theme[data-mode=light] {
693
693
  --salt-palette-accent-background: var(--salt-color-blue-500);
694
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
694
695
  --salt-palette-accent-border: var(--salt-color-blue-500);
695
696
  --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
696
697
  --salt-palette-accent-foreground: var(--salt-color-white);
@@ -699,6 +700,7 @@
699
700
  }
700
701
  .salt-theme[data-mode=dark] {
701
702
  --salt-palette-accent-background: var(--salt-color-blue-500);
703
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
702
704
  --salt-palette-accent-border: var(--salt-color-blue-500);
703
705
  --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
704
706
  --salt-palette-accent-foreground: var(--salt-color-white);
@@ -895,6 +897,8 @@
895
897
  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
896
898
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
897
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);
898
902
  --salt-palette-interact-primary-background: var(--salt-color-gray-60);
899
903
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-200);
900
904
  --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background);
@@ -940,6 +944,8 @@
940
944
  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
941
945
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
942
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);
943
949
  --salt-palette-interact-primary-background: var(--salt-color-gray-300);
944
950
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-70);
945
951
  --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background);
@@ -1161,6 +1167,7 @@
1161
1167
  /* css/characteristics/accent.css */
1162
1168
  .salt-theme {
1163
1169
  --salt-accent-background: var(--salt-palette-accent-background);
1170
+ --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
1164
1171
  --salt-accent-borderColor: var(--salt-palette-accent-border);
1165
1172
  --salt-accent-foreground: var(--salt-palette-accent-foreground);
1166
1173
  }
@@ -1198,9 +1205,9 @@
1198
1205
  --salt-actionable-accented-background-disabled: var(--salt-palette-interact-background);
1199
1206
  --salt-actionable-accented-background-hover: var(--salt-palette-interact-cta-background-hover);
1200
1207
  --salt-actionable-accented-background: var(--salt-palette-interact-background);
1201
- --salt-actionable-accented-borderColor-active: var(--salt-palette-interact-border-none);
1208
+ --salt-actionable-accented-borderColor-active: var(--salt-palette-interact-cta-border-active);
1202
1209
  --salt-actionable-accented-borderColor-disabled: var(--salt-palette-accent-border-disabled);
1203
- --salt-actionable-accented-borderColor-hover: var(--salt-palette-interact-border-none);
1210
+ --salt-actionable-accented-borderColor-hover: var(--salt-palette-interact-cta-border-hover);
1204
1211
  --salt-actionable-accented-borderColor: var(--salt-palette-accent-border);
1205
1212
  --salt-actionable-accented-foreground-active: var(--salt-palette-interact-cta-foreground);
1206
1213
  --salt-actionable-accented-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "1.22.0",
3
+ "version": "1.23.1",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",