@salt-ds/theme 1.21.0 → 1.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.css CHANGED
@@ -472,19 +472,26 @@
472
472
  /* css/foundations/fade.css */
473
473
  .salt-theme {
474
474
  --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
475
+ --salt-color-blue-200-fade-foreground: rgba(75, 159, 216, var(--salt-palette-opacity-disabled));
475
476
  --salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
476
477
  --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
477
478
  --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
478
479
  --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
479
480
  --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
480
481
  --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-disabled));
482
+ --salt-color-green-200-fade-foreground: rgba(77, 180, 105, var(--salt-palette-opacity-disabled));
481
483
  --salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-disabled));
482
484
  --salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
483
485
  --salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
486
+ --salt-color-green-600-fade-foreground: rgba(24, 114, 61, var(--salt-palette-opacity-disabled));
484
487
  --salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-disabled));
488
+ --salt-color-red-200-fade-foreground: rgba(255, 108, 88, var(--salt-palette-opacity-disabled));
485
489
  --salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-disabled));
486
490
  --salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
491
+ --salt-color-red-600-fade-foreground: rgba(196, 32, 16, var(--salt-palette-opacity-disabled));
487
492
  --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-disabled));
493
+ --salt-color-orange-400-fade-foreground: rgba(238, 133, 43, var(--salt-palette-opacity-disabled));
494
+ --salt-color-orange-850-fade-foreground: rgba(194, 52, 7, var(--salt-palette-opacity-disabled));
488
495
  --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
489
496
  --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
490
497
  --salt-color-gray-50-fade-border: rgba(206, 210, 217, var(--salt-palette-opacity-disabled));
@@ -515,6 +522,9 @@
515
522
  --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-disabled));
516
523
  --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-disabled));
517
524
  --salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
525
+ --salt-color-green-500-fade-background: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
526
+ --salt-color-green-600-fade-background: rgba(24, 114, 61, var(--salt-palette-opacity-disabled));
527
+ --salt-color-red-600-fade-background: rgba(196, 32, 16, var(--salt-palette-opacity-disabled));
518
528
  --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
519
529
  --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
520
530
  --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
@@ -531,8 +541,10 @@
531
541
  --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
532
542
  --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
533
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));
534
545
  --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
535
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));
536
548
  }
537
549
 
538
550
  /* css/foundations/opacity.css */
@@ -679,13 +691,21 @@
679
691
  /* css/palette/accent.css */
680
692
  .salt-theme[data-mode=light] {
681
693
  --salt-palette-accent-background: var(--salt-color-blue-500);
694
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
682
695
  --salt-palette-accent-border: var(--salt-color-blue-500);
696
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
683
697
  --salt-palette-accent-foreground: var(--salt-color-white);
698
+ --salt-palette-accent-foreground-informative: var(--salt-color-blue-600);
699
+ --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-600-fade-foreground);
684
700
  }
685
701
  .salt-theme[data-mode=dark] {
686
702
  --salt-palette-accent-background: var(--salt-color-blue-500);
703
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
687
704
  --salt-palette-accent-border: var(--salt-color-blue-500);
705
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
688
706
  --salt-palette-accent-foreground: var(--salt-color-white);
707
+ --salt-palette-accent-foreground-informative: var(--salt-color-blue-200);
708
+ --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-200-fade-foreground);
689
709
  }
690
710
 
691
711
  /* css/palette/error.css */
@@ -862,6 +882,7 @@
862
882
  --salt-palette-interact-border-disabled: var(--salt-color-gray-200-fade-border);
863
883
  --salt-palette-interact-border-hover: var(--salt-color-blue-500);
864
884
  --salt-palette-interact-border-readonly: var(--salt-color-gray-200-fade-border-readonly);
885
+ --salt-palette-interact-border-none: transparent;
865
886
  --salt-palette-interact-foreground: var(--salt-color-gray-200);
866
887
  --salt-palette-interact-foreground-active: var(--salt-color-blue-600);
867
888
  --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-fade-foreground);
@@ -876,6 +897,8 @@
876
897
  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
877
898
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
878
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);
879
902
  --salt-palette-interact-primary-background: var(--salt-color-gray-60);
880
903
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-200);
881
904
  --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background);
@@ -906,6 +929,7 @@
906
929
  --salt-palette-interact-border-disabled: var(--salt-color-gray-90-fade-border);
907
930
  --salt-palette-interact-border-hover: var(--salt-color-blue-500);
908
931
  --salt-palette-interact-border-readonly: var(--salt-color-gray-90-fade-border-readonly);
932
+ --salt-palette-interact-border-none: transparent;
909
933
  --salt-palette-interact-foreground: var(--salt-color-gray-90);
910
934
  --salt-palette-interact-foreground-active: var(--salt-color-blue-100);
911
935
  --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground);
@@ -920,6 +944,8 @@
920
944
  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
921
945
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
922
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);
923
949
  --salt-palette-interact-primary-background: var(--salt-color-gray-300);
924
950
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-70);
925
951
  --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background);
@@ -958,10 +984,24 @@
958
984
 
959
985
  /* css/palette/negative.css */
960
986
  .salt-theme[data-mode=light] {
961
- --salt-palette-negative-foreground: var(--salt-color-red-700);
987
+ --salt-palette-negative-foreground: var(--salt-color-red-600);
988
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-600-fade-foreground);
989
+ --salt-palette-negative-background: var(--salt-color-red-600);
990
+ --salt-palette-negative-background-hover: var(--salt-color-red-500);
991
+ --salt-palette-negative-background-active: var(--salt-color-red-700);
992
+ --salt-palette-negative-background-disabled: var(--salt-color-red-600-fade-background);
993
+ --salt-palette-negative-border: var(--salt-color-red-500);
994
+ --salt-palette-negative-border-disabled: var(--salt-color-red-500-fade-border);
962
995
  }
963
996
  .salt-theme[data-mode=dark] {
964
- --salt-palette-negative-foreground: var(--salt-color-red-300);
997
+ --salt-palette-negative-foreground: var(--salt-color-red-200);
998
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-200-fade-foreground);
999
+ --salt-palette-negative-background: var(--salt-color-red-600);
1000
+ --salt-palette-negative-background-hover: var(--salt-color-red-500);
1001
+ --salt-palette-negative-background-active: var(--salt-color-red-700);
1002
+ --salt-palette-negative-background-disabled: var(--salt-color-red-600-fade-background);
1003
+ --salt-palette-negative-border: var(--salt-color-red-500);
1004
+ --salt-palette-negative-border-disabled: var(--salt-color-red-500-fade-border);
965
1005
  }
966
1006
 
967
1007
  /* css/palette/neutral.css */
@@ -981,14 +1021,15 @@
981
1021
  --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-50-fade-border);
982
1022
  --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
983
1023
  --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
984
- --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
985
1024
  --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
986
- --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
987
- --salt-palette-neutral-selection: var(--salt-color-black-fade-background-selection);
988
1025
  --salt-palette-neutral-tertiary-background: var(--salt-color-gray-30);
989
1026
  --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-30-fade-background);
990
1027
  --salt-palette-neutral-tertiary-border: var(--salt-color-gray-50);
991
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);
992
1033
  }
993
1034
  .salt-theme[data-mode=dark] {
994
1035
  --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
@@ -1006,14 +1047,15 @@
1006
1047
  --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-300-fade-border);
1007
1048
  --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-70);
1008
1049
  --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground);
1009
- --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
1010
1050
  --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
1011
1051
  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
1012
- --salt-palette-neutral-selection: var(--salt-color-white-fade-background-selection);
1013
1052
  --salt-palette-neutral-tertiary-background: var(--salt-color-gray-500);
1014
1053
  --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-500-fade-background);
1015
1054
  --salt-palette-neutral-tertiary-border: var(--salt-color-gray-300);
1016
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);
1017
1059
  }
1018
1060
 
1019
1061
  /* css/palette/opacity.css */
@@ -1029,10 +1071,24 @@
1029
1071
 
1030
1072
  /* css/palette/positive.css */
1031
1073
  .salt-theme[data-mode=light] {
1032
- --salt-palette-positive-foreground: var(--salt-color-green-700);
1074
+ --salt-palette-positive-foreground: var(--salt-color-green-600);
1075
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-600-fade-foreground);
1076
+ --salt-palette-positive-background: var(--salt-color-green-600);
1077
+ --salt-palette-positive-background-hover: var(--salt-color-green-500);
1078
+ --salt-palette-positive-background-active: var(--salt-color-green-700);
1079
+ --salt-palette-positive-background-disabled: var(--salt-color-green-600-fade-background);
1080
+ --salt-palette-positive-border: var(--salt-color-green-500);
1081
+ --salt-palette-positive-border-disabled: var(--salt-color-green-500-fade-background);
1033
1082
  }
1034
1083
  .salt-theme[data-mode=dark] {
1035
- --salt-palette-positive-foreground: var(--salt-color-green-300);
1084
+ --salt-palette-positive-foreground: var(--salt-color-green-200);
1085
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-200-fade-foreground);
1086
+ --salt-palette-positive-background: var(--salt-color-green-600);
1087
+ --salt-palette-positive-background-hover: var(--salt-color-green-500);
1088
+ --salt-palette-positive-background-active: var(--salt-color-green-700);
1089
+ --salt-palette-positive-background-disabled: var(--salt-color-green-600-fade-background);
1090
+ --salt-palette-positive-border: var(--salt-color-green-500);
1091
+ --salt-palette-positive-border-disabled: var(--salt-color-green-500-fade-background);
1036
1092
  }
1037
1093
 
1038
1094
  /* css/palette/success.css */
@@ -1080,21 +1136,38 @@
1080
1136
  --salt-palette-warning-bold-background: var(--salt-color-orange-800);
1081
1137
  --salt-palette-warning-background-selected: var(--salt-color-orange-20);
1082
1138
  --salt-palette-warning-border: var(--salt-color-orange-700);
1139
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
1083
1140
  --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700);
1084
1141
  --salt-palette-warning-foreground-informative: var(--salt-color-orange-850);
1142
+ --salt-palette-warning-foreground-informative-disabled: var(--salt-color-orange-850-fade-foreground);
1143
+ --salt-palette-warning-action: var(--salt-color-orange-600);
1144
+ --salt-palette-warning-action-hover: var(--salt-color-orange-500);
1145
+ --salt-palette-warning-action-active: var(--salt-color-orange-800);
1146
+ --salt-palette-warning-action-disabled: var(--salt-color-orange-600-fade-background);
1147
+ --salt-palette-warning-action-foreground: var(--salt-color-gray-900);
1148
+ --salt-palette-warning-action-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
1085
1149
  }
1086
1150
  .salt-theme[data-mode=dark] {
1087
1151
  --salt-palette-warning-background: var(--salt-color-orange-900);
1088
1152
  --salt-palette-warning-bold-background: var(--salt-color-orange-800);
1089
1153
  --salt-palette-warning-background-selected: var(--salt-color-orange-900);
1090
1154
  --salt-palette-warning-border: var(--salt-color-orange-500);
1155
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
1091
1156
  --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500);
1092
1157
  --salt-palette-warning-foreground-informative: var(--salt-color-orange-400);
1158
+ --salt-palette-warning-foreground-informative-disabled: var(--salt-color-orange-400-fade-foreground);
1159
+ --salt-palette-warning-action: var(--salt-color-orange-600);
1160
+ --salt-palette-warning-action-hover: var(--salt-color-orange-500);
1161
+ --salt-palette-warning-action-active: var(--salt-color-orange-800);
1162
+ --salt-palette-warning-action-disabled: var(--salt-color-orange-600-fade-background);
1163
+ --salt-palette-warning-action-foreground: var(--salt-color-gray-900);
1164
+ --salt-palette-warning-action-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
1093
1165
  }
1094
1166
 
1095
1167
  /* css/characteristics/accent.css */
1096
1168
  .salt-theme {
1097
1169
  --salt-accent-background: var(--salt-palette-accent-background);
1170
+ --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
1098
1171
  --salt-accent-borderColor: var(--salt-palette-accent-border);
1099
1172
  --salt-accent-foreground: var(--salt-palette-accent-foreground);
1100
1173
  }
@@ -1104,42 +1177,186 @@
1104
1177
  --salt-actionable-cursor-hover: pointer;
1105
1178
  --salt-actionable-cursor-active: pointer;
1106
1179
  --salt-actionable-cursor-disabled: not-allowed;
1107
- --salt-actionable-primary-foreground: var(--salt-palette-interact-primary-foreground);
1108
- --salt-actionable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1109
- --salt-actionable-primary-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1110
- --salt-actionable-primary-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
1111
- --salt-actionable-primary-background: var(--salt-palette-interact-primary-background);
1112
- --salt-actionable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
1113
- --salt-actionable-primary-background-active: var(--salt-palette-interact-primary-background-active);
1114
- --salt-actionable-primary-background-disabled: var(--salt-palette-interact-primary-background-disabled);
1115
- --salt-actionable-primary-borderColor: transparent;
1116
- --salt-actionable-primary-borderColor-hover: transparent;
1117
- --salt-actionable-primary-borderColor-active: transparent;
1118
- --salt-actionable-primary-borderColor-disabled: transparent;
1119
- --salt-actionable-cta-foreground: var(--salt-palette-interact-cta-foreground);
1120
- --salt-actionable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
1121
- --salt-actionable-cta-foreground-active: var(--salt-palette-interact-cta-foreground-active);
1122
- --salt-actionable-cta-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1123
- --salt-actionable-cta-background: var(--salt-palette-interact-cta-background);
1124
- --salt-actionable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
1125
- --salt-actionable-cta-background-active: var(--salt-palette-interact-cta-background-active);
1126
- --salt-actionable-cta-background-disabled: var(--salt-palette-interact-cta-background-disabled);
1127
- --salt-actionable-cta-borderColor: transparent;
1128
- --salt-actionable-cta-borderColor-hover: transparent;
1129
- --salt-actionable-cta-borderColor-active: transparent;
1130
- --salt-actionable-cta-borderColor-disabled: transparent;
1131
- --salt-actionable-secondary-foreground: var(--salt-palette-interact-secondary-foreground);
1132
- --salt-actionable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
1133
- --salt-actionable-secondary-foreground-active: var(--salt-palette-interact-secondary-foreground-active);
1134
- --salt-actionable-secondary-foreground-disabled: var(--salt-palette-interact-secondary-foreground-disabled);
1135
- --salt-actionable-secondary-background: var(--salt-palette-interact-secondary-background);
1136
- --salt-actionable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
1137
- --salt-actionable-secondary-background-active: var(--salt-palette-interact-secondary-background-active);
1138
- --salt-actionable-secondary-background-disabled: var(--salt-palette-interact-secondary-background-disabled);
1139
- --salt-actionable-secondary-borderColor: transparent;
1140
- --salt-actionable-secondary-borderColor-hover: transparent;
1141
- --salt-actionable-secondary-borderColor-active: transparent;
1142
- --salt-actionable-secondary-borderColor-disabled: transparent;
1180
+ --salt-actionable-accented-bold-background-active: var(--salt-palette-interact-cta-background-active);
1181
+ --salt-actionable-accented-bold-background-disabled: var(--salt-palette-interact-cta-background-disabled);
1182
+ --salt-actionable-accented-bold-background-hover: var(--salt-palette-interact-cta-background-hover);
1183
+ --salt-actionable-accented-bold-background: var(--salt-palette-interact-cta-background);
1184
+ --salt-actionable-accented-bold-borderColor-active: var(--salt-palette-interact-border-none);
1185
+ --salt-actionable-accented-bold-borderColor-disabled: var(--salt-palette-interact-border-none);
1186
+ --salt-actionable-accented-bold-borderColor-hover: var(--salt-palette-interact-border-none);
1187
+ --salt-actionable-accented-bold-borderColor: var(--salt-palette-interact-border-none);
1188
+ --salt-actionable-accented-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
1189
+ --salt-actionable-accented-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1190
+ --salt-actionable-accented-bold-foreground-hover: var(--salt-palette-interact-cta-foreground);
1191
+ --salt-actionable-accented-bold-foreground: var(--salt-palette-interact-cta-foreground);
1192
+ --salt-actionable-bold-background-active: var(--salt-palette-interact-primary-background-active);
1193
+ --salt-actionable-bold-background-disabled: var(--salt-palette-interact-primary-background-disabled);
1194
+ --salt-actionable-bold-background-hover: var(--salt-palette-interact-primary-background-hover);
1195
+ --salt-actionable-bold-background: var(--salt-palette-interact-primary-background);
1196
+ --salt-actionable-bold-borderColor-active: var(--salt-palette-interact-border-none);
1197
+ --salt-actionable-bold-borderColor-disabled: var(--salt-palette-interact-border-none);
1198
+ --salt-actionable-bold-borderColor-hover: var(--salt-palette-interact-border-none);
1199
+ --salt-actionable-bold-borderColor: var(--salt-palette-interact-border-none);
1200
+ --salt-actionable-bold-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1201
+ --salt-actionable-bold-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1202
+ --salt-actionable-bold-foreground-hover: var(--salt-palette-neutral-primary-foreground);
1203
+ --salt-actionable-bold-foreground: var(--salt-palette-neutral-primary-foreground);
1204
+ --salt-actionable-accented-background-active: var(--salt-palette-interact-cta-background-active);
1205
+ --salt-actionable-accented-background-disabled: var(--salt-palette-interact-background);
1206
+ --salt-actionable-accented-background-hover: var(--salt-palette-interact-cta-background-hover);
1207
+ --salt-actionable-accented-background: var(--salt-palette-interact-background);
1208
+ --salt-actionable-accented-borderColor-active: var(--salt-palette-interact-cta-border-active);
1209
+ --salt-actionable-accented-borderColor-disabled: var(--salt-palette-accent-border-disabled);
1210
+ --salt-actionable-accented-borderColor-hover: var(--salt-palette-interact-cta-border-hover);
1211
+ --salt-actionable-accented-borderColor: var(--salt-palette-accent-border);
1212
+ --salt-actionable-accented-foreground-active: var(--salt-palette-interact-cta-foreground);
1213
+ --salt-actionable-accented-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
1214
+ --salt-actionable-accented-foreground-hover: var(--salt-palette-interact-cta-foreground);
1215
+ --salt-actionable-accented-foreground: var(--salt-palette-accent-foreground-informative);
1216
+ --salt-actionable-background-active: var(--salt-palette-interact-primary-background-active);
1217
+ --salt-actionable-background-disabled: var(--salt-palette-interact-background);
1218
+ --salt-actionable-background-hover: var(--salt-palette-interact-primary-background-hover);
1219
+ --salt-actionable-background: var(--salt-palette-interact-background);
1220
+ --salt-actionable-borderColor-active: var(--salt-palette-interact-border-none);
1221
+ --salt-actionable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
1222
+ --salt-actionable-borderColor-hover: var(--salt-palette-interact-border-none);
1223
+ --salt-actionable-borderColor: var(--salt-palette-interact-border);
1224
+ --salt-actionable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1225
+ --salt-actionable-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1226
+ --salt-actionable-foreground-hover: var(--salt-palette-neutral-primary-foreground);
1227
+ --salt-actionable-foreground: var(--salt-palette-neutral-primary-foreground);
1228
+ --salt-actionable-accented-subtle-background-active: var(--salt-palette-interact-cta-background-active);
1229
+ --salt-actionable-accented-subtle-background-disabled: var(--salt-palette-interact-background);
1230
+ --salt-actionable-accented-subtle-background-hover: var(--salt-palette-interact-cta-background-hover);
1231
+ --salt-actionable-accented-subtle-background: var(--salt-palette-interact-background);
1232
+ --salt-actionable-accented-subtle-borderColor-active: var(--salt-palette-interact-border-none);
1233
+ --salt-actionable-accented-subtle-borderColor-disabled: var(--salt-palette-interact-border-none);
1234
+ --salt-actionable-accented-subtle-borderColor-hover: var(--salt-palette-interact-border-none);
1235
+ --salt-actionable-accented-subtle-borderColor: var(--salt-palette-interact-border-none);
1236
+ --salt-actionable-accented-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
1237
+ --salt-actionable-accented-subtle-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
1238
+ --salt-actionable-accented-subtle-foreground-hover: var(--salt-palette-interact-cta-foreground);
1239
+ --salt-actionable-accented-subtle-foreground: var(--salt-palette-accent-foreground-informative);
1240
+ --salt-actionable-subtle-background-active: var(--salt-palette-interact-primary-background-active);
1241
+ --salt-actionable-subtle-background-disabled: var(--salt-palette-interact-background);
1242
+ --salt-actionable-subtle-background-hover: var(--salt-palette-interact-primary-background-hover);
1243
+ --salt-actionable-subtle-background: var(--salt-palette-interact-background);
1244
+ --salt-actionable-subtle-borderColor-active: var(--salt-palette-interact-border-none);
1245
+ --salt-actionable-subtle-borderColor-disabled: var(--salt-palette-interact-border-none);
1246
+ --salt-actionable-subtle-borderColor-hover: var(--salt-palette-interact-border-none);
1247
+ --salt-actionable-subtle-borderColor: var(--salt-palette-interact-border-none);
1248
+ --salt-actionable-subtle-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1249
+ --salt-actionable-subtle-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1250
+ --salt-actionable-subtle-foreground-hover: var(--salt-palette-neutral-primary-foreground);
1251
+ --salt-actionable-subtle-foreground: var(--salt-palette-neutral-primary-foreground);
1252
+ --salt-actionable-negative-bold-background-active: var(--salt-palette-negative-background-active);
1253
+ --salt-actionable-negative-bold-background-disabled: var(--salt-palette-negative-background-disabled);
1254
+ --salt-actionable-negative-bold-background-hover: var(--salt-palette-negative-background-hover);
1255
+ --salt-actionable-negative-bold-background: var(--salt-palette-negative-background);
1256
+ --salt-actionable-negative-bold-borderColor-active: var(--salt-palette-interact-border-none);
1257
+ --salt-actionable-negative-bold-borderColor-disabled: var(--salt-palette-interact-border-none);
1258
+ --salt-actionable-negative-bold-borderColor-hover: var(--salt-palette-interact-border-none);
1259
+ --salt-actionable-negative-bold-borderColor: var(--salt-palette-interact-border-none);
1260
+ --salt-actionable-negative-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
1261
+ --salt-actionable-negative-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1262
+ --salt-actionable-negative-bold-foreground-hover: var(--salt-palette-interact-cta-foreground);
1263
+ --salt-actionable-negative-bold-foreground: var(--salt-palette-interact-cta-foreground);
1264
+ --salt-actionable-negative-background-active: var(--salt-palette-negative-background-active);
1265
+ --salt-actionable-negative-background-disabled: var(--salt-palette-interact-border-none);
1266
+ --salt-actionable-negative-background-hover: var(--salt-palette-negative-background-hover);
1267
+ --salt-actionable-negative-background: var(--salt-palette-interact-border-none);
1268
+ --salt-actionable-negative-borderColor-active: var(--salt-palette-interact-border-none);
1269
+ --salt-actionable-negative-borderColor-disabled: var(--salt-palette-negative-border-disabled);
1270
+ --salt-actionable-negative-borderColor-hover: var(--salt-palette-interact-border-none);
1271
+ --salt-actionable-negative-borderColor: var(--salt-palette-negative-border);
1272
+ --salt-actionable-negative-foreground-active: var(--salt-palette-interact-cta-foreground);
1273
+ --salt-actionable-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1274
+ --salt-actionable-negative-foreground-hover: var(--salt-palette-interact-cta-foreground);
1275
+ --salt-actionable-negative-foreground: var(--salt-palette-negative-foreground);
1276
+ --salt-actionable-negative-subtle-background-active: var(--salt-palette-negative-background-active);
1277
+ --salt-actionable-negative-subtle-background-disabled: var(--salt-palette-interact-border-none);
1278
+ --salt-actionable-negative-subtle-background-hover: var(--salt-palette-negative-background-hover);
1279
+ --salt-actionable-negative-subtle-background: var(--salt-palette-interact-border-none);
1280
+ --salt-actionable-negative-subtle-borderColor-active: var(--salt-palette-interact-border-none);
1281
+ --salt-actionable-negative-subtle-borderColor-disabled: var(--salt-palette-interact-border-none);
1282
+ --salt-actionable-negative-subtle-borderColor-hover: var(--salt-palette-interact-border-none);
1283
+ --salt-actionable-negative-subtle-borderColor: var(--salt-palette-interact-border-none);
1284
+ --salt-actionable-negative-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
1285
+ --salt-actionable-negative-subtle-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1286
+ --salt-actionable-negative-subtle-foreground-hover: var(--salt-palette-interact-cta-foreground);
1287
+ --salt-actionable-negative-subtle-foreground: var(--salt-palette-negative-foreground);
1288
+ --salt-actionable-positive-bold-background-active: var(--salt-palette-positive-background-active);
1289
+ --salt-actionable-positive-bold-background-disabled: var(--salt-palette-positive-background-disabled);
1290
+ --salt-actionable-positive-bold-background-hover: var(--salt-palette-positive-background-hover);
1291
+ --salt-actionable-positive-bold-background: var(--salt-palette-positive-background);
1292
+ --salt-actionable-positive-bold-borderColor-active: var(--salt-palette-interact-border-none);
1293
+ --salt-actionable-positive-bold-borderColor-disabled: var(--salt-palette-interact-border-none);
1294
+ --salt-actionable-positive-bold-borderColor-hover: var(--salt-palette-interact-border-none);
1295
+ --salt-actionable-positive-bold-borderColor: var(--salt-palette-interact-border-none);
1296
+ --salt-actionable-positive-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
1297
+ --salt-actionable-positive-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1298
+ --salt-actionable-positive-bold-foreground-hover: var(--salt-palette-interact-cta-foreground);
1299
+ --salt-actionable-positive-bold-foreground: var(--salt-palette-interact-cta-foreground);
1300
+ --salt-actionable-positive-background-active: var(--salt-palette-positive-background-active);
1301
+ --salt-actionable-positive-background-disabled: var(--salt-palette-interact-border-none);
1302
+ --salt-actionable-positive-background-hover: var(--salt-palette-positive-background-hover);
1303
+ --salt-actionable-positive-background: var(--salt-palette-interact-border-none);
1304
+ --salt-actionable-positive-borderColor-active: var(--salt-palette-interact-border-none);
1305
+ --salt-actionable-positive-borderColor-disabled: var(--salt-palette-positive-border-disabled);
1306
+ --salt-actionable-positive-borderColor-hover: var(--salt-palette-interact-border-none);
1307
+ --salt-actionable-positive-borderColor: var(--salt-palette-positive-border);
1308
+ --salt-actionable-positive-foreground-active: var(--salt-palette-interact-cta-foreground);
1309
+ --salt-actionable-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1310
+ --salt-actionable-positive-foreground-hover: var(--salt-palette-interact-cta-foreground);
1311
+ --salt-actionable-positive-foreground: var(--salt-palette-positive-foreground);
1312
+ --salt-actionable-positive-subtle-background-active: var(--salt-palette-positive-background-active);
1313
+ --salt-actionable-positive-subtle-background-disabled: var(--salt-palette-interact-border-none);
1314
+ --salt-actionable-positive-subtle-background-hover: var(--salt-palette-positive-background-hover);
1315
+ --salt-actionable-positive-subtle-background: var(--salt-palette-interact-border-none);
1316
+ --salt-actionable-positive-subtle-borderColor-active: var(--salt-palette-interact-border-none);
1317
+ --salt-actionable-positive-subtle-borderColor-disabled: var(--salt-palette-interact-border-none);
1318
+ --salt-actionable-positive-subtle-borderColor-hover: var(--salt-palette-interact-border-none);
1319
+ --salt-actionable-positive-subtle-borderColor: var(--salt-palette-interact-border-none);
1320
+ --salt-actionable-positive-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
1321
+ --salt-actionable-positive-subtle-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1322
+ --salt-actionable-positive-subtle-foreground-hover: var(--salt-palette-interact-cta-foreground);
1323
+ --salt-actionable-positive-subtle-foreground: var(--salt-palette-positive-foreground);
1324
+ --salt-actionable-caution-bold-background-active: var(--salt-palette-warning-action-active);
1325
+ --salt-actionable-caution-bold-background-disabled: var(--salt-palette-warning-action-disabled);
1326
+ --salt-actionable-caution-bold-background-hover: var(--salt-palette-warning-action-hover);
1327
+ --salt-actionable-caution-bold-background: var(--salt-palette-warning-action);
1328
+ --salt-actionable-caution-bold-borderColor-active: var(--salt-palette-interact-border-none);
1329
+ --salt-actionable-caution-bold-borderColor-disabled: var(--salt-palette-interact-border-none);
1330
+ --salt-actionable-caution-bold-borderColor-hover: var(--salt-palette-interact-border-none);
1331
+ --salt-actionable-caution-bold-borderColor: var(--salt-palette-interact-border-none);
1332
+ --salt-actionable-caution-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
1333
+ --salt-actionable-caution-bold-foreground-disabled: var(--salt-palette-warning-action-foreground-disabled);
1334
+ --salt-actionable-caution-bold-foreground-hover: var(--salt-palette-warning-action-foreground);
1335
+ --salt-actionable-caution-bold-foreground: var(--salt-palette-warning-action-foreground);
1336
+ --salt-actionable-caution-background-active: var(--salt-palette-warning-action-active);
1337
+ --salt-actionable-caution-background-disabled: var(--salt-palette-interact-border-none);
1338
+ --salt-actionable-caution-background-hover: var(--salt-palette-warning-action-hover);
1339
+ --salt-actionable-caution-background: var(--salt-palette-interact-border-none);
1340
+ --salt-actionable-caution-borderColor-active: var(--salt-palette-interact-border-none);
1341
+ --salt-actionable-caution-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1342
+ --salt-actionable-caution-borderColor-hover: var(--salt-palette-interact-border-none);
1343
+ --salt-actionable-caution-borderColor: var(--salt-palette-warning-border);
1344
+ --salt-actionable-caution-foreground-active: var(--salt-palette-interact-cta-foreground);
1345
+ --salt-actionable-caution-foreground-disabled: var(--salt-palette-warning-foreground-informative-disabled);
1346
+ --salt-actionable-caution-foreground-hover: var(--salt-palette-warning-action-foreground);
1347
+ --salt-actionable-caution-foreground: var(--salt-palette-warning-foreground-informative);
1348
+ --salt-actionable-caution-subtle-background-active: var(--salt-palette-warning-action-active);
1349
+ --salt-actionable-caution-subtle-background-disabled: var(--salt-palette-interact-border-none);
1350
+ --salt-actionable-caution-subtle-background-hover: var(--salt-palette-warning-action-hover);
1351
+ --salt-actionable-caution-subtle-background: var(--salt-palette-interact-border-none);
1352
+ --salt-actionable-caution-subtle-borderColor-active: var(--salt-palette-interact-border-none);
1353
+ --salt-actionable-caution-subtle-borderColor-disabled: var(--salt-palette-interact-border-none);
1354
+ --salt-actionable-caution-subtle-borderColor-hover: var(--salt-palette-interact-border-none);
1355
+ --salt-actionable-caution-subtle-borderColor: var(--salt-palette-interact-border-none);
1356
+ --salt-actionable-caution-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
1357
+ --salt-actionable-caution-subtle-foreground-disabled: var(--salt-palette-warning-foreground-informative-disabled);
1358
+ --salt-actionable-caution-subtle-foreground-hover: var(--salt-palette-warning-action-foreground);
1359
+ --salt-actionable-caution-subtle-foreground: var(--salt-palette-warning-foreground-informative);
1143
1360
  }
1144
1361
 
1145
1362
  /* css/characteristics/category.css */
@@ -1362,6 +1579,7 @@
1362
1579
  --salt-overlayable-shadow-drag: var(--salt-shadow-400);
1363
1580
  --salt-overlayable-shadow-modal: var(--salt-shadow-500);
1364
1581
  --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
1582
+ --salt-overlayable-background-highlight: var(--salt-palette-neutral-highlight);
1365
1583
  --salt-overlayable-rangeSelection: var(--salt-palette-neutral-selection);
1366
1584
  }
1367
1585
 
@@ -1750,6 +1968,42 @@
1750
1968
  --salt-taggable-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1751
1969
  --salt-taggable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1752
1970
  --salt-taggable-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
1971
+ --salt-actionable-cta-background-active: var(--salt-actionable-accented-bold-background-active);
1972
+ --salt-actionable-cta-background-disabled: var(--salt-actionable-accented-bold-background-disabled);
1973
+ --salt-actionable-cta-background-hover: var(--salt-actionable-accented-bold-background-hover);
1974
+ --salt-actionable-cta-background: var(--salt-actionable-accented-bold-background);
1975
+ --salt-actionable-cta-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);
1976
+ --salt-actionable-cta-borderColor-disabled: var(--salt-actionable-accented-bold-borderColor-disabled);
1977
+ --salt-actionable-cta-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);
1978
+ --salt-actionable-cta-borderColor: var(--salt-actionable-accented-bold-borderColor);
1979
+ --salt-actionable-cta-foreground-active: var(--salt-actionable-accented-bold-foreground-active);
1980
+ --salt-actionable-cta-foreground-disabled: var(--salt-actionable-accented-bold-foreground-disabled);
1981
+ --salt-actionable-cta-foreground-hover: var(--salt-actionable-accented-bold-foreground-hover);
1982
+ --salt-actionable-cta-foreground: var(--salt-actionable-accented-bold-foreground);
1983
+ --salt-actionable-primary-background-active: var(--salt-actionable-bold-background-active);
1984
+ --salt-actionable-primary-background-disabled: var(--salt-actionable-bold-background-disabled);
1985
+ --salt-actionable-primary-background-hover: var(--salt-actionable-bold-background-hover);
1986
+ --salt-actionable-primary-background: var(--salt-actionable-bold-background);
1987
+ --salt-actionable-primary-borderColor-active: var(--salt-actionable-bold-borderColor-active);
1988
+ --salt-actionable-primary-borderColor-disabled: var(--salt-actionable-bold-borderColor-disabled);
1989
+ --salt-actionable-primary-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);
1990
+ --salt-actionable-primary-borderColor: var(--salt-actionable-bold-borderColor);
1991
+ --salt-actionable-primary-foreground-active: var(--salt-actionable-bold-foreground-active);
1992
+ --salt-actionable-primary-foreground-disabled: var(--salt-actionable-bold-foreground-disabled);
1993
+ --salt-actionable-primary-foreground-hover: var(--salt-actionable-bold-foreground-hover);
1994
+ --salt-actionable-primary-foreground: var(--salt-actionable-bold-foreground);
1995
+ --salt-actionable-secondary-background-active: var(--salt-actionable-subtle-background-active);
1996
+ --salt-actionable-secondary-background-disabled: var(--salt-actionable-subtle-background-disabled);
1997
+ --salt-actionable-secondary-background-hover: var(--salt-actionable-subtle-background-hover);
1998
+ --salt-actionable-secondary-background: var(--salt-actionable-subtle-background);
1999
+ --salt-actionable-secondary-borderColor-active: var(--salt-actionable-subtle-borderColor-active);
2000
+ --salt-actionable-secondary-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);
2001
+ --salt-actionable-secondary-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);
2002
+ --salt-actionable-secondary-borderColor: var(--salt-actionable-subtle-borderColor);
2003
+ --salt-actionable-secondary-foreground-active: var(--salt-actionable-subtle-foreground-active);
2004
+ --salt-actionable-secondary-foreground-disabled: var(--salt-actionable-subtle-foreground-disabled);
2005
+ --salt-actionable-secondary-foreground-hover: var(--salt-actionable-subtle-foreground-hover);
2006
+ --salt-actionable-secondary-foreground: var(--salt-actionable-subtle-foreground);
1753
2007
  }
1754
2008
  .salt-density-high {
1755
2009
  --salt-accent-fontSize: 8px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "1.21.0",
3
+ "version": "1.23.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",