@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/css/theme.css CHANGED
@@ -443,19 +443,26 @@
443
443
  /* css/foundations/fade.css */
444
444
  .salt-theme {
445
445
  --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
446
+ --salt-color-blue-200-fade-foreground: rgba(75, 159, 216, var(--salt-palette-opacity-disabled));
446
447
  --salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
447
448
  --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
448
449
  --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
449
450
  --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
450
451
  --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
451
452
  --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-disabled));
453
+ --salt-color-green-200-fade-foreground: rgba(77, 180, 105, var(--salt-palette-opacity-disabled));
452
454
  --salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-disabled));
453
455
  --salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
454
456
  --salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
457
+ --salt-color-green-600-fade-foreground: rgba(24, 114, 61, var(--salt-palette-opacity-disabled));
455
458
  --salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-disabled));
459
+ --salt-color-red-200-fade-foreground: rgba(255, 108, 88, var(--salt-palette-opacity-disabled));
456
460
  --salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-disabled));
457
461
  --salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
462
+ --salt-color-red-600-fade-foreground: rgba(196, 32, 16, var(--salt-palette-opacity-disabled));
458
463
  --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-disabled));
464
+ --salt-color-orange-400-fade-foreground: rgba(238, 133, 43, var(--salt-palette-opacity-disabled));
465
+ --salt-color-orange-850-fade-foreground: rgba(194, 52, 7, var(--salt-palette-opacity-disabled));
459
466
  --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
460
467
  --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
461
468
  --salt-color-gray-50-fade-border: rgba(206, 210, 217, var(--salt-palette-opacity-disabled));
@@ -486,6 +493,9 @@
486
493
  --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-disabled));
487
494
  --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-disabled));
488
495
  --salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
496
+ --salt-color-green-500-fade-background: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
497
+ --salt-color-green-600-fade-background: rgba(24, 114, 61, var(--salt-palette-opacity-disabled));
498
+ --salt-color-red-600-fade-background: rgba(196, 32, 16, var(--salt-palette-opacity-disabled));
489
499
  --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
490
500
  --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
491
501
  --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
@@ -502,8 +512,10 @@
502
512
  --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
503
513
  --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
504
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));
505
516
  --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
506
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));
507
519
  }
508
520
 
509
521
  /* css/foundations/opacity.css */
@@ -650,13 +662,21 @@
650
662
  /* css/palette/accent.css */
651
663
  .salt-theme[data-mode=light] {
652
664
  --salt-palette-accent-background: var(--salt-color-blue-500);
665
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
653
666
  --salt-palette-accent-border: var(--salt-color-blue-500);
667
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
654
668
  --salt-palette-accent-foreground: var(--salt-color-white);
669
+ --salt-palette-accent-foreground-informative: var(--salt-color-blue-600);
670
+ --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-600-fade-foreground);
655
671
  }
656
672
  .salt-theme[data-mode=dark] {
657
673
  --salt-palette-accent-background: var(--salt-color-blue-500);
674
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
658
675
  --salt-palette-accent-border: var(--salt-color-blue-500);
676
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
659
677
  --salt-palette-accent-foreground: var(--salt-color-white);
678
+ --salt-palette-accent-foreground-informative: var(--salt-color-blue-200);
679
+ --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-200-fade-foreground);
660
680
  }
661
681
 
662
682
  /* css/palette/error.css */
@@ -833,6 +853,7 @@
833
853
  --salt-palette-interact-border-disabled: var(--salt-color-gray-200-fade-border);
834
854
  --salt-palette-interact-border-hover: var(--salt-color-blue-500);
835
855
  --salt-palette-interact-border-readonly: var(--salt-color-gray-200-fade-border-readonly);
856
+ --salt-palette-interact-border-none: transparent;
836
857
  --salt-palette-interact-foreground: var(--salt-color-gray-200);
837
858
  --salt-palette-interact-foreground-active: var(--salt-color-blue-600);
838
859
  --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-fade-foreground);
@@ -847,6 +868,8 @@
847
868
  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
848
869
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
849
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);
850
873
  --salt-palette-interact-primary-background: var(--salt-color-gray-60);
851
874
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-200);
852
875
  --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background);
@@ -877,6 +900,7 @@
877
900
  --salt-palette-interact-border-disabled: var(--salt-color-gray-90-fade-border);
878
901
  --salt-palette-interact-border-hover: var(--salt-color-blue-500);
879
902
  --salt-palette-interact-border-readonly: var(--salt-color-gray-90-fade-border-readonly);
903
+ --salt-palette-interact-border-none: transparent;
880
904
  --salt-palette-interact-foreground: var(--salt-color-gray-90);
881
905
  --salt-palette-interact-foreground-active: var(--salt-color-blue-100);
882
906
  --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground);
@@ -891,6 +915,8 @@
891
915
  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
892
916
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
893
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);
894
920
  --salt-palette-interact-primary-background: var(--salt-color-gray-300);
895
921
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-70);
896
922
  --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background);
@@ -929,10 +955,24 @@
929
955
 
930
956
  /* css/palette/negative.css */
931
957
  .salt-theme[data-mode=light] {
932
- --salt-palette-negative-foreground: var(--salt-color-red-700);
958
+ --salt-palette-negative-foreground: var(--salt-color-red-600);
959
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-600-fade-foreground);
960
+ --salt-palette-negative-background: var(--salt-color-red-600);
961
+ --salt-palette-negative-background-hover: var(--salt-color-red-500);
962
+ --salt-palette-negative-background-active: var(--salt-color-red-700);
963
+ --salt-palette-negative-background-disabled: var(--salt-color-red-600-fade-background);
964
+ --salt-palette-negative-border: var(--salt-color-red-500);
965
+ --salt-palette-negative-border-disabled: var(--salt-color-red-500-fade-border);
933
966
  }
934
967
  .salt-theme[data-mode=dark] {
935
- --salt-palette-negative-foreground: var(--salt-color-red-300);
968
+ --salt-palette-negative-foreground: var(--salt-color-red-200);
969
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-200-fade-foreground);
970
+ --salt-palette-negative-background: var(--salt-color-red-600);
971
+ --salt-palette-negative-background-hover: var(--salt-color-red-500);
972
+ --salt-palette-negative-background-active: var(--salt-color-red-700);
973
+ --salt-palette-negative-background-disabled: var(--salt-color-red-600-fade-background);
974
+ --salt-palette-negative-border: var(--salt-color-red-500);
975
+ --salt-palette-negative-border-disabled: var(--salt-color-red-500-fade-border);
936
976
  }
937
977
 
938
978
  /* css/palette/neutral.css */
@@ -952,14 +992,15 @@
952
992
  --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-50-fade-border);
953
993
  --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
954
994
  --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
955
- --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
956
995
  --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
957
- --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
958
- --salt-palette-neutral-selection: var(--salt-color-black-fade-background-selection);
959
996
  --salt-palette-neutral-tertiary-background: var(--salt-color-gray-30);
960
997
  --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-30-fade-background);
961
998
  --salt-palette-neutral-tertiary-border: var(--salt-color-gray-50);
962
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);
963
1004
  }
964
1005
  .salt-theme[data-mode=dark] {
965
1006
  --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
@@ -977,14 +1018,15 @@
977
1018
  --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-300-fade-border);
978
1019
  --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-70);
979
1020
  --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground);
980
- --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
981
1021
  --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
982
1022
  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
983
- --salt-palette-neutral-selection: var(--salt-color-white-fade-background-selection);
984
1023
  --salt-palette-neutral-tertiary-background: var(--salt-color-gray-500);
985
1024
  --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-500-fade-background);
986
1025
  --salt-palette-neutral-tertiary-border: var(--salt-color-gray-300);
987
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);
988
1030
  }
989
1031
 
990
1032
  /* css/palette/opacity.css */
@@ -1000,10 +1042,24 @@
1000
1042
 
1001
1043
  /* css/palette/positive.css */
1002
1044
  .salt-theme[data-mode=light] {
1003
- --salt-palette-positive-foreground: var(--salt-color-green-700);
1045
+ --salt-palette-positive-foreground: var(--salt-color-green-600);
1046
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-600-fade-foreground);
1047
+ --salt-palette-positive-background: var(--salt-color-green-600);
1048
+ --salt-palette-positive-background-hover: var(--salt-color-green-500);
1049
+ --salt-palette-positive-background-active: var(--salt-color-green-700);
1050
+ --salt-palette-positive-background-disabled: var(--salt-color-green-600-fade-background);
1051
+ --salt-palette-positive-border: var(--salt-color-green-500);
1052
+ --salt-palette-positive-border-disabled: var(--salt-color-green-500-fade-background);
1004
1053
  }
1005
1054
  .salt-theme[data-mode=dark] {
1006
- --salt-palette-positive-foreground: var(--salt-color-green-300);
1055
+ --salt-palette-positive-foreground: var(--salt-color-green-200);
1056
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-200-fade-foreground);
1057
+ --salt-palette-positive-background: var(--salt-color-green-600);
1058
+ --salt-palette-positive-background-hover: var(--salt-color-green-500);
1059
+ --salt-palette-positive-background-active: var(--salt-color-green-700);
1060
+ --salt-palette-positive-background-disabled: var(--salt-color-green-600-fade-background);
1061
+ --salt-palette-positive-border: var(--salt-color-green-500);
1062
+ --salt-palette-positive-border-disabled: var(--salt-color-green-500-fade-background);
1007
1063
  }
1008
1064
 
1009
1065
  /* css/palette/success.css */
@@ -1051,21 +1107,38 @@
1051
1107
  --salt-palette-warning-bold-background: var(--salt-color-orange-800);
1052
1108
  --salt-palette-warning-background-selected: var(--salt-color-orange-20);
1053
1109
  --salt-palette-warning-border: var(--salt-color-orange-700);
1110
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
1054
1111
  --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700);
1055
1112
  --salt-palette-warning-foreground-informative: var(--salt-color-orange-850);
1113
+ --salt-palette-warning-foreground-informative-disabled: var(--salt-color-orange-850-fade-foreground);
1114
+ --salt-palette-warning-action: var(--salt-color-orange-600);
1115
+ --salt-palette-warning-action-hover: var(--salt-color-orange-500);
1116
+ --salt-palette-warning-action-active: var(--salt-color-orange-800);
1117
+ --salt-palette-warning-action-disabled: var(--salt-color-orange-600-fade-background);
1118
+ --salt-palette-warning-action-foreground: var(--salt-color-gray-900);
1119
+ --salt-palette-warning-action-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
1056
1120
  }
1057
1121
  .salt-theme[data-mode=dark] {
1058
1122
  --salt-palette-warning-background: var(--salt-color-orange-900);
1059
1123
  --salt-palette-warning-bold-background: var(--salt-color-orange-800);
1060
1124
  --salt-palette-warning-background-selected: var(--salt-color-orange-900);
1061
1125
  --salt-palette-warning-border: var(--salt-color-orange-500);
1126
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
1062
1127
  --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500);
1063
1128
  --salt-palette-warning-foreground-informative: var(--salt-color-orange-400);
1129
+ --salt-palette-warning-foreground-informative-disabled: var(--salt-color-orange-400-fade-foreground);
1130
+ --salt-palette-warning-action: var(--salt-color-orange-600);
1131
+ --salt-palette-warning-action-hover: var(--salt-color-orange-500);
1132
+ --salt-palette-warning-action-active: var(--salt-color-orange-800);
1133
+ --salt-palette-warning-action-disabled: var(--salt-color-orange-600-fade-background);
1134
+ --salt-palette-warning-action-foreground: var(--salt-color-gray-900);
1135
+ --salt-palette-warning-action-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
1064
1136
  }
1065
1137
 
1066
1138
  /* css/characteristics/accent.css */
1067
1139
  .salt-theme {
1068
1140
  --salt-accent-background: var(--salt-palette-accent-background);
1141
+ --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
1069
1142
  --salt-accent-borderColor: var(--salt-palette-accent-border);
1070
1143
  --salt-accent-foreground: var(--salt-palette-accent-foreground);
1071
1144
  }
@@ -1075,42 +1148,186 @@
1075
1148
  --salt-actionable-cursor-hover: pointer;
1076
1149
  --salt-actionable-cursor-active: pointer;
1077
1150
  --salt-actionable-cursor-disabled: not-allowed;
1078
- --salt-actionable-primary-foreground: var(--salt-palette-interact-primary-foreground);
1079
- --salt-actionable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1080
- --salt-actionable-primary-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1081
- --salt-actionable-primary-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
1082
- --salt-actionable-primary-background: var(--salt-palette-interact-primary-background);
1083
- --salt-actionable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
1084
- --salt-actionable-primary-background-active: var(--salt-palette-interact-primary-background-active);
1085
- --salt-actionable-primary-background-disabled: var(--salt-palette-interact-primary-background-disabled);
1086
- --salt-actionable-primary-borderColor: transparent;
1087
- --salt-actionable-primary-borderColor-hover: transparent;
1088
- --salt-actionable-primary-borderColor-active: transparent;
1089
- --salt-actionable-primary-borderColor-disabled: transparent;
1090
- --salt-actionable-cta-foreground: var(--salt-palette-interact-cta-foreground);
1091
- --salt-actionable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
1092
- --salt-actionable-cta-foreground-active: var(--salt-palette-interact-cta-foreground-active);
1093
- --salt-actionable-cta-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1094
- --salt-actionable-cta-background: var(--salt-palette-interact-cta-background);
1095
- --salt-actionable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
1096
- --salt-actionable-cta-background-active: var(--salt-palette-interact-cta-background-active);
1097
- --salt-actionable-cta-background-disabled: var(--salt-palette-interact-cta-background-disabled);
1098
- --salt-actionable-cta-borderColor: transparent;
1099
- --salt-actionable-cta-borderColor-hover: transparent;
1100
- --salt-actionable-cta-borderColor-active: transparent;
1101
- --salt-actionable-cta-borderColor-disabled: transparent;
1102
- --salt-actionable-secondary-foreground: var(--salt-palette-interact-secondary-foreground);
1103
- --salt-actionable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
1104
- --salt-actionable-secondary-foreground-active: var(--salt-palette-interact-secondary-foreground-active);
1105
- --salt-actionable-secondary-foreground-disabled: var(--salt-palette-interact-secondary-foreground-disabled);
1106
- --salt-actionable-secondary-background: var(--salt-palette-interact-secondary-background);
1107
- --salt-actionable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
1108
- --salt-actionable-secondary-background-active: var(--salt-palette-interact-secondary-background-active);
1109
- --salt-actionable-secondary-background-disabled: var(--salt-palette-interact-secondary-background-disabled);
1110
- --salt-actionable-secondary-borderColor: transparent;
1111
- --salt-actionable-secondary-borderColor-hover: transparent;
1112
- --salt-actionable-secondary-borderColor-active: transparent;
1113
- --salt-actionable-secondary-borderColor-disabled: transparent;
1151
+ --salt-actionable-accented-bold-background-active: var(--salt-palette-interact-cta-background-active);
1152
+ --salt-actionable-accented-bold-background-disabled: var(--salt-palette-interact-cta-background-disabled);
1153
+ --salt-actionable-accented-bold-background-hover: var(--salt-palette-interact-cta-background-hover);
1154
+ --salt-actionable-accented-bold-background: var(--salt-palette-interact-cta-background);
1155
+ --salt-actionable-accented-bold-borderColor-active: var(--salt-palette-interact-border-none);
1156
+ --salt-actionable-accented-bold-borderColor-disabled: var(--salt-palette-interact-border-none);
1157
+ --salt-actionable-accented-bold-borderColor-hover: var(--salt-palette-interact-border-none);
1158
+ --salt-actionable-accented-bold-borderColor: var(--salt-palette-interact-border-none);
1159
+ --salt-actionable-accented-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
1160
+ --salt-actionable-accented-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1161
+ --salt-actionable-accented-bold-foreground-hover: var(--salt-palette-interact-cta-foreground);
1162
+ --salt-actionable-accented-bold-foreground: var(--salt-palette-interact-cta-foreground);
1163
+ --salt-actionable-bold-background-active: var(--salt-palette-interact-primary-background-active);
1164
+ --salt-actionable-bold-background-disabled: var(--salt-palette-interact-primary-background-disabled);
1165
+ --salt-actionable-bold-background-hover: var(--salt-palette-interact-primary-background-hover);
1166
+ --salt-actionable-bold-background: var(--salt-palette-interact-primary-background);
1167
+ --salt-actionable-bold-borderColor-active: var(--salt-palette-interact-border-none);
1168
+ --salt-actionable-bold-borderColor-disabled: var(--salt-palette-interact-border-none);
1169
+ --salt-actionable-bold-borderColor-hover: var(--salt-palette-interact-border-none);
1170
+ --salt-actionable-bold-borderColor: var(--salt-palette-interact-border-none);
1171
+ --salt-actionable-bold-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1172
+ --salt-actionable-bold-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1173
+ --salt-actionable-bold-foreground-hover: var(--salt-palette-neutral-primary-foreground);
1174
+ --salt-actionable-bold-foreground: var(--salt-palette-neutral-primary-foreground);
1175
+ --salt-actionable-accented-background-active: var(--salt-palette-interact-cta-background-active);
1176
+ --salt-actionable-accented-background-disabled: var(--salt-palette-interact-background);
1177
+ --salt-actionable-accented-background-hover: var(--salt-palette-interact-cta-background-hover);
1178
+ --salt-actionable-accented-background: var(--salt-palette-interact-background);
1179
+ --salt-actionable-accented-borderColor-active: var(--salt-palette-interact-cta-border-active);
1180
+ --salt-actionable-accented-borderColor-disabled: var(--salt-palette-accent-border-disabled);
1181
+ --salt-actionable-accented-borderColor-hover: var(--salt-palette-interact-cta-border-hover);
1182
+ --salt-actionable-accented-borderColor: var(--salt-palette-accent-border);
1183
+ --salt-actionable-accented-foreground-active: var(--salt-palette-interact-cta-foreground);
1184
+ --salt-actionable-accented-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
1185
+ --salt-actionable-accented-foreground-hover: var(--salt-palette-interact-cta-foreground);
1186
+ --salt-actionable-accented-foreground: var(--salt-palette-accent-foreground-informative);
1187
+ --salt-actionable-background-active: var(--salt-palette-interact-primary-background-active);
1188
+ --salt-actionable-background-disabled: var(--salt-palette-interact-background);
1189
+ --salt-actionable-background-hover: var(--salt-palette-interact-primary-background-hover);
1190
+ --salt-actionable-background: var(--salt-palette-interact-background);
1191
+ --salt-actionable-borderColor-active: var(--salt-palette-interact-border-none);
1192
+ --salt-actionable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
1193
+ --salt-actionable-borderColor-hover: var(--salt-palette-interact-border-none);
1194
+ --salt-actionable-borderColor: var(--salt-palette-interact-border);
1195
+ --salt-actionable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1196
+ --salt-actionable-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1197
+ --salt-actionable-foreground-hover: var(--salt-palette-neutral-primary-foreground);
1198
+ --salt-actionable-foreground: var(--salt-palette-neutral-primary-foreground);
1199
+ --salt-actionable-accented-subtle-background-active: var(--salt-palette-interact-cta-background-active);
1200
+ --salt-actionable-accented-subtle-background-disabled: var(--salt-palette-interact-background);
1201
+ --salt-actionable-accented-subtle-background-hover: var(--salt-palette-interact-cta-background-hover);
1202
+ --salt-actionable-accented-subtle-background: var(--salt-palette-interact-background);
1203
+ --salt-actionable-accented-subtle-borderColor-active: var(--salt-palette-interact-border-none);
1204
+ --salt-actionable-accented-subtle-borderColor-disabled: var(--salt-palette-interact-border-none);
1205
+ --salt-actionable-accented-subtle-borderColor-hover: var(--salt-palette-interact-border-none);
1206
+ --salt-actionable-accented-subtle-borderColor: var(--salt-palette-interact-border-none);
1207
+ --salt-actionable-accented-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
1208
+ --salt-actionable-accented-subtle-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
1209
+ --salt-actionable-accented-subtle-foreground-hover: var(--salt-palette-interact-cta-foreground);
1210
+ --salt-actionable-accented-subtle-foreground: var(--salt-palette-accent-foreground-informative);
1211
+ --salt-actionable-subtle-background-active: var(--salt-palette-interact-primary-background-active);
1212
+ --salt-actionable-subtle-background-disabled: var(--salt-palette-interact-background);
1213
+ --salt-actionable-subtle-background-hover: var(--salt-palette-interact-primary-background-hover);
1214
+ --salt-actionable-subtle-background: var(--salt-palette-interact-background);
1215
+ --salt-actionable-subtle-borderColor-active: var(--salt-palette-interact-border-none);
1216
+ --salt-actionable-subtle-borderColor-disabled: var(--salt-palette-interact-border-none);
1217
+ --salt-actionable-subtle-borderColor-hover: var(--salt-palette-interact-border-none);
1218
+ --salt-actionable-subtle-borderColor: var(--salt-palette-interact-border-none);
1219
+ --salt-actionable-subtle-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1220
+ --salt-actionable-subtle-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1221
+ --salt-actionable-subtle-foreground-hover: var(--salt-palette-neutral-primary-foreground);
1222
+ --salt-actionable-subtle-foreground: var(--salt-palette-neutral-primary-foreground);
1223
+ --salt-actionable-negative-bold-background-active: var(--salt-palette-negative-background-active);
1224
+ --salt-actionable-negative-bold-background-disabled: var(--salt-palette-negative-background-disabled);
1225
+ --salt-actionable-negative-bold-background-hover: var(--salt-palette-negative-background-hover);
1226
+ --salt-actionable-negative-bold-background: var(--salt-palette-negative-background);
1227
+ --salt-actionable-negative-bold-borderColor-active: var(--salt-palette-interact-border-none);
1228
+ --salt-actionable-negative-bold-borderColor-disabled: var(--salt-palette-interact-border-none);
1229
+ --salt-actionable-negative-bold-borderColor-hover: var(--salt-palette-interact-border-none);
1230
+ --salt-actionable-negative-bold-borderColor: var(--salt-palette-interact-border-none);
1231
+ --salt-actionable-negative-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
1232
+ --salt-actionable-negative-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1233
+ --salt-actionable-negative-bold-foreground-hover: var(--salt-palette-interact-cta-foreground);
1234
+ --salt-actionable-negative-bold-foreground: var(--salt-palette-interact-cta-foreground);
1235
+ --salt-actionable-negative-background-active: var(--salt-palette-negative-background-active);
1236
+ --salt-actionable-negative-background-disabled: var(--salt-palette-interact-border-none);
1237
+ --salt-actionable-negative-background-hover: var(--salt-palette-negative-background-hover);
1238
+ --salt-actionable-negative-background: var(--salt-palette-interact-border-none);
1239
+ --salt-actionable-negative-borderColor-active: var(--salt-palette-interact-border-none);
1240
+ --salt-actionable-negative-borderColor-disabled: var(--salt-palette-negative-border-disabled);
1241
+ --salt-actionable-negative-borderColor-hover: var(--salt-palette-interact-border-none);
1242
+ --salt-actionable-negative-borderColor: var(--salt-palette-negative-border);
1243
+ --salt-actionable-negative-foreground-active: var(--salt-palette-interact-cta-foreground);
1244
+ --salt-actionable-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1245
+ --salt-actionable-negative-foreground-hover: var(--salt-palette-interact-cta-foreground);
1246
+ --salt-actionable-negative-foreground: var(--salt-palette-negative-foreground);
1247
+ --salt-actionable-negative-subtle-background-active: var(--salt-palette-negative-background-active);
1248
+ --salt-actionable-negative-subtle-background-disabled: var(--salt-palette-interact-border-none);
1249
+ --salt-actionable-negative-subtle-background-hover: var(--salt-palette-negative-background-hover);
1250
+ --salt-actionable-negative-subtle-background: var(--salt-palette-interact-border-none);
1251
+ --salt-actionable-negative-subtle-borderColor-active: var(--salt-palette-interact-border-none);
1252
+ --salt-actionable-negative-subtle-borderColor-disabled: var(--salt-palette-interact-border-none);
1253
+ --salt-actionable-negative-subtle-borderColor-hover: var(--salt-palette-interact-border-none);
1254
+ --salt-actionable-negative-subtle-borderColor: var(--salt-palette-interact-border-none);
1255
+ --salt-actionable-negative-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
1256
+ --salt-actionable-negative-subtle-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1257
+ --salt-actionable-negative-subtle-foreground-hover: var(--salt-palette-interact-cta-foreground);
1258
+ --salt-actionable-negative-subtle-foreground: var(--salt-palette-negative-foreground);
1259
+ --salt-actionable-positive-bold-background-active: var(--salt-palette-positive-background-active);
1260
+ --salt-actionable-positive-bold-background-disabled: var(--salt-palette-positive-background-disabled);
1261
+ --salt-actionable-positive-bold-background-hover: var(--salt-palette-positive-background-hover);
1262
+ --salt-actionable-positive-bold-background: var(--salt-palette-positive-background);
1263
+ --salt-actionable-positive-bold-borderColor-active: var(--salt-palette-interact-border-none);
1264
+ --salt-actionable-positive-bold-borderColor-disabled: var(--salt-palette-interact-border-none);
1265
+ --salt-actionable-positive-bold-borderColor-hover: var(--salt-palette-interact-border-none);
1266
+ --salt-actionable-positive-bold-borderColor: var(--salt-palette-interact-border-none);
1267
+ --salt-actionable-positive-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
1268
+ --salt-actionable-positive-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1269
+ --salt-actionable-positive-bold-foreground-hover: var(--salt-palette-interact-cta-foreground);
1270
+ --salt-actionable-positive-bold-foreground: var(--salt-palette-interact-cta-foreground);
1271
+ --salt-actionable-positive-background-active: var(--salt-palette-positive-background-active);
1272
+ --salt-actionable-positive-background-disabled: var(--salt-palette-interact-border-none);
1273
+ --salt-actionable-positive-background-hover: var(--salt-palette-positive-background-hover);
1274
+ --salt-actionable-positive-background: var(--salt-palette-interact-border-none);
1275
+ --salt-actionable-positive-borderColor-active: var(--salt-palette-interact-border-none);
1276
+ --salt-actionable-positive-borderColor-disabled: var(--salt-palette-positive-border-disabled);
1277
+ --salt-actionable-positive-borderColor-hover: var(--salt-palette-interact-border-none);
1278
+ --salt-actionable-positive-borderColor: var(--salt-palette-positive-border);
1279
+ --salt-actionable-positive-foreground-active: var(--salt-palette-interact-cta-foreground);
1280
+ --salt-actionable-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1281
+ --salt-actionable-positive-foreground-hover: var(--salt-palette-interact-cta-foreground);
1282
+ --salt-actionable-positive-foreground: var(--salt-palette-positive-foreground);
1283
+ --salt-actionable-positive-subtle-background-active: var(--salt-palette-positive-background-active);
1284
+ --salt-actionable-positive-subtle-background-disabled: var(--salt-palette-interact-border-none);
1285
+ --salt-actionable-positive-subtle-background-hover: var(--salt-palette-positive-background-hover);
1286
+ --salt-actionable-positive-subtle-background: var(--salt-palette-interact-border-none);
1287
+ --salt-actionable-positive-subtle-borderColor-active: var(--salt-palette-interact-border-none);
1288
+ --salt-actionable-positive-subtle-borderColor-disabled: var(--salt-palette-interact-border-none);
1289
+ --salt-actionable-positive-subtle-borderColor-hover: var(--salt-palette-interact-border-none);
1290
+ --salt-actionable-positive-subtle-borderColor: var(--salt-palette-interact-border-none);
1291
+ --salt-actionable-positive-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
1292
+ --salt-actionable-positive-subtle-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1293
+ --salt-actionable-positive-subtle-foreground-hover: var(--salt-palette-interact-cta-foreground);
1294
+ --salt-actionable-positive-subtle-foreground: var(--salt-palette-positive-foreground);
1295
+ --salt-actionable-caution-bold-background-active: var(--salt-palette-warning-action-active);
1296
+ --salt-actionable-caution-bold-background-disabled: var(--salt-palette-warning-action-disabled);
1297
+ --salt-actionable-caution-bold-background-hover: var(--salt-palette-warning-action-hover);
1298
+ --salt-actionable-caution-bold-background: var(--salt-palette-warning-action);
1299
+ --salt-actionable-caution-bold-borderColor-active: var(--salt-palette-interact-border-none);
1300
+ --salt-actionable-caution-bold-borderColor-disabled: var(--salt-palette-interact-border-none);
1301
+ --salt-actionable-caution-bold-borderColor-hover: var(--salt-palette-interact-border-none);
1302
+ --salt-actionable-caution-bold-borderColor: var(--salt-palette-interact-border-none);
1303
+ --salt-actionable-caution-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
1304
+ --salt-actionable-caution-bold-foreground-disabled: var(--salt-palette-warning-action-foreground-disabled);
1305
+ --salt-actionable-caution-bold-foreground-hover: var(--salt-palette-warning-action-foreground);
1306
+ --salt-actionable-caution-bold-foreground: var(--salt-palette-warning-action-foreground);
1307
+ --salt-actionable-caution-background-active: var(--salt-palette-warning-action-active);
1308
+ --salt-actionable-caution-background-disabled: var(--salt-palette-interact-border-none);
1309
+ --salt-actionable-caution-background-hover: var(--salt-palette-warning-action-hover);
1310
+ --salt-actionable-caution-background: var(--salt-palette-interact-border-none);
1311
+ --salt-actionable-caution-borderColor-active: var(--salt-palette-interact-border-none);
1312
+ --salt-actionable-caution-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1313
+ --salt-actionable-caution-borderColor-hover: var(--salt-palette-interact-border-none);
1314
+ --salt-actionable-caution-borderColor: var(--salt-palette-warning-border);
1315
+ --salt-actionable-caution-foreground-active: var(--salt-palette-interact-cta-foreground);
1316
+ --salt-actionable-caution-foreground-disabled: var(--salt-palette-warning-foreground-informative-disabled);
1317
+ --salt-actionable-caution-foreground-hover: var(--salt-palette-warning-action-foreground);
1318
+ --salt-actionable-caution-foreground: var(--salt-palette-warning-foreground-informative);
1319
+ --salt-actionable-caution-subtle-background-active: var(--salt-palette-warning-action-active);
1320
+ --salt-actionable-caution-subtle-background-disabled: var(--salt-palette-interact-border-none);
1321
+ --salt-actionable-caution-subtle-background-hover: var(--salt-palette-warning-action-hover);
1322
+ --salt-actionable-caution-subtle-background: var(--salt-palette-interact-border-none);
1323
+ --salt-actionable-caution-subtle-borderColor-active: var(--salt-palette-interact-border-none);
1324
+ --salt-actionable-caution-subtle-borderColor-disabled: var(--salt-palette-interact-border-none);
1325
+ --salt-actionable-caution-subtle-borderColor-hover: var(--salt-palette-interact-border-none);
1326
+ --salt-actionable-caution-subtle-borderColor: var(--salt-palette-interact-border-none);
1327
+ --salt-actionable-caution-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
1328
+ --salt-actionable-caution-subtle-foreground-disabled: var(--salt-palette-warning-foreground-informative-disabled);
1329
+ --salt-actionable-caution-subtle-foreground-hover: var(--salt-palette-warning-action-foreground);
1330
+ --salt-actionable-caution-subtle-foreground: var(--salt-palette-warning-foreground-informative);
1114
1331
  }
1115
1332
 
1116
1333
  /* css/characteristics/category.css */
@@ -1333,6 +1550,7 @@
1333
1550
  --salt-overlayable-shadow-drag: var(--salt-shadow-400);
1334
1551
  --salt-overlayable-shadow-modal: var(--salt-shadow-500);
1335
1552
  --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
1553
+ --salt-overlayable-background-highlight: var(--salt-palette-neutral-highlight);
1336
1554
  --salt-overlayable-rangeSelection: var(--salt-palette-neutral-selection);
1337
1555
  }
1338
1556
 
@@ -1721,6 +1939,42 @@
1721
1939
  --salt-taggable-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1722
1940
  --salt-taggable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1723
1941
  --salt-taggable-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
1942
+ --salt-actionable-cta-background-active: var(--salt-actionable-accented-bold-background-active);
1943
+ --salt-actionable-cta-background-disabled: var(--salt-actionable-accented-bold-background-disabled);
1944
+ --salt-actionable-cta-background-hover: var(--salt-actionable-accented-bold-background-hover);
1945
+ --salt-actionable-cta-background: var(--salt-actionable-accented-bold-background);
1946
+ --salt-actionable-cta-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);
1947
+ --salt-actionable-cta-borderColor-disabled: var(--salt-actionable-accented-bold-borderColor-disabled);
1948
+ --salt-actionable-cta-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);
1949
+ --salt-actionable-cta-borderColor: var(--salt-actionable-accented-bold-borderColor);
1950
+ --salt-actionable-cta-foreground-active: var(--salt-actionable-accented-bold-foreground-active);
1951
+ --salt-actionable-cta-foreground-disabled: var(--salt-actionable-accented-bold-foreground-disabled);
1952
+ --salt-actionable-cta-foreground-hover: var(--salt-actionable-accented-bold-foreground-hover);
1953
+ --salt-actionable-cta-foreground: var(--salt-actionable-accented-bold-foreground);
1954
+ --salt-actionable-primary-background-active: var(--salt-actionable-bold-background-active);
1955
+ --salt-actionable-primary-background-disabled: var(--salt-actionable-bold-background-disabled);
1956
+ --salt-actionable-primary-background-hover: var(--salt-actionable-bold-background-hover);
1957
+ --salt-actionable-primary-background: var(--salt-actionable-bold-background);
1958
+ --salt-actionable-primary-borderColor-active: var(--salt-actionable-bold-borderColor-active);
1959
+ --salt-actionable-primary-borderColor-disabled: var(--salt-actionable-bold-borderColor-disabled);
1960
+ --salt-actionable-primary-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);
1961
+ --salt-actionable-primary-borderColor: var(--salt-actionable-bold-borderColor);
1962
+ --salt-actionable-primary-foreground-active: var(--salt-actionable-bold-foreground-active);
1963
+ --salt-actionable-primary-foreground-disabled: var(--salt-actionable-bold-foreground-disabled);
1964
+ --salt-actionable-primary-foreground-hover: var(--salt-actionable-bold-foreground-hover);
1965
+ --salt-actionable-primary-foreground: var(--salt-actionable-bold-foreground);
1966
+ --salt-actionable-secondary-background-active: var(--salt-actionable-subtle-background-active);
1967
+ --salt-actionable-secondary-background-disabled: var(--salt-actionable-subtle-background-disabled);
1968
+ --salt-actionable-secondary-background-hover: var(--salt-actionable-subtle-background-hover);
1969
+ --salt-actionable-secondary-background: var(--salt-actionable-subtle-background);
1970
+ --salt-actionable-secondary-borderColor-active: var(--salt-actionable-subtle-borderColor-active);
1971
+ --salt-actionable-secondary-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);
1972
+ --salt-actionable-secondary-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);
1973
+ --salt-actionable-secondary-borderColor: var(--salt-actionable-subtle-borderColor);
1974
+ --salt-actionable-secondary-foreground-active: var(--salt-actionable-subtle-foreground-active);
1975
+ --salt-actionable-secondary-foreground-disabled: var(--salt-actionable-subtle-foreground-disabled);
1976
+ --salt-actionable-secondary-foreground-hover: var(--salt-actionable-subtle-foreground-hover);
1977
+ --salt-actionable-secondary-foreground: var(--salt-actionable-subtle-foreground);
1724
1978
  }
1725
1979
  .salt-density-high {
1726
1980
  --salt-accent-fontSize: 8px;