@salt-ds/theme 1.20.0 → 1.22.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));
@@ -506,6 +513,8 @@
506
513
  --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
507
514
  --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-disabled));
508
515
  --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-disabled));
516
+ --salt-color-gray-30-fade-background: rgba(224, 228, 233, var(--salt-palette-opacity-disabled));
517
+ --salt-color-gray-50-fade-background: rgba(206, 210, 217, var(--salt-palette-opacity-disabled));
509
518
  --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
510
519
  --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
511
520
  --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
@@ -513,6 +522,9 @@
513
522
  --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-disabled));
514
523
  --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-disabled));
515
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));
516
528
  --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
517
529
  --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
518
530
  --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
@@ -529,8 +541,10 @@
529
541
  --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
530
542
  --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
531
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));
532
545
  --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
533
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));
534
548
  }
535
549
 
536
550
  /* css/foundations/opacity.css */
@@ -678,12 +692,18 @@
678
692
  .salt-theme[data-mode=light] {
679
693
  --salt-palette-accent-background: var(--salt-color-blue-500);
680
694
  --salt-palette-accent-border: var(--salt-color-blue-500);
695
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
681
696
  --salt-palette-accent-foreground: var(--salt-color-white);
697
+ --salt-palette-accent-foreground-informative: var(--salt-color-blue-600);
698
+ --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-600-fade-foreground);
682
699
  }
683
700
  .salt-theme[data-mode=dark] {
684
701
  --salt-palette-accent-background: var(--salt-color-blue-500);
685
702
  --salt-palette-accent-border: var(--salt-color-blue-500);
703
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
686
704
  --salt-palette-accent-foreground: var(--salt-color-white);
705
+ --salt-palette-accent-foreground-informative: var(--salt-color-blue-200);
706
+ --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-200-fade-foreground);
687
707
  }
688
708
 
689
709
  /* css/palette/error.css */
@@ -860,6 +880,7 @@
860
880
  --salt-palette-interact-border-disabled: var(--salt-color-gray-200-fade-border);
861
881
  --salt-palette-interact-border-hover: var(--salt-color-blue-500);
862
882
  --salt-palette-interact-border-readonly: var(--salt-color-gray-200-fade-border-readonly);
883
+ --salt-palette-interact-border-none: transparent;
863
884
  --salt-palette-interact-foreground: var(--salt-color-gray-200);
864
885
  --salt-palette-interact-foreground-active: var(--salt-color-blue-600);
865
886
  --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-fade-foreground);
@@ -904,6 +925,7 @@
904
925
  --salt-palette-interact-border-disabled: var(--salt-color-gray-90-fade-border);
905
926
  --salt-palette-interact-border-hover: var(--salt-color-blue-500);
906
927
  --salt-palette-interact-border-readonly: var(--salt-color-gray-90-fade-border-readonly);
928
+ --salt-palette-interact-border-none: transparent;
907
929
  --salt-palette-interact-foreground: var(--salt-color-gray-90);
908
930
  --salt-palette-interact-foreground-active: var(--salt-color-blue-100);
909
931
  --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground);
@@ -956,10 +978,24 @@
956
978
 
957
979
  /* css/palette/negative.css */
958
980
  .salt-theme[data-mode=light] {
959
- --salt-palette-negative-foreground: var(--salt-color-red-700);
981
+ --salt-palette-negative-foreground: var(--salt-color-red-600);
982
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-600-fade-foreground);
983
+ --salt-palette-negative-background: var(--salt-color-red-600);
984
+ --salt-palette-negative-background-hover: var(--salt-color-red-500);
985
+ --salt-palette-negative-background-active: var(--salt-color-red-700);
986
+ --salt-palette-negative-background-disabled: var(--salt-color-red-600-fade-background);
987
+ --salt-palette-negative-border: var(--salt-color-red-500);
988
+ --salt-palette-negative-border-disabled: var(--salt-color-red-500-fade-border);
960
989
  }
961
990
  .salt-theme[data-mode=dark] {
962
- --salt-palette-negative-foreground: var(--salt-color-red-300);
991
+ --salt-palette-negative-foreground: var(--salt-color-red-200);
992
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-200-fade-foreground);
993
+ --salt-palette-negative-background: var(--salt-color-red-600);
994
+ --salt-palette-negative-background-hover: var(--salt-color-red-500);
995
+ --salt-palette-negative-background-active: var(--salt-color-red-700);
996
+ --salt-palette-negative-background-disabled: var(--salt-color-red-600-fade-background);
997
+ --salt-palette-negative-border: var(--salt-color-red-500);
998
+ --salt-palette-negative-border-disabled: var(--salt-color-red-500-fade-border);
963
999
  }
964
1000
 
965
1001
  /* css/palette/neutral.css */
@@ -979,10 +1015,15 @@
979
1015
  --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-50-fade-border);
980
1016
  --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
981
1017
  --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
982
- --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
983
1018
  --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
1019
+ --salt-palette-neutral-tertiary-background: var(--salt-color-gray-30);
1020
+ --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-30-fade-background);
1021
+ --salt-palette-neutral-tertiary-border: var(--salt-color-gray-50);
1022
+ --salt-palette-neutral-tertiary-border-disabled: var(--salt-color-gray-50-fade-background);
984
1023
  --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
1024
+ --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
985
1025
  --salt-palette-neutral-selection: var(--salt-color-black-fade-background-selection);
1026
+ --salt-palette-neutral-highlight: var(--salt-color-black-fade-background-highlight);
986
1027
  }
987
1028
  .salt-theme[data-mode=dark] {
988
1029
  --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
@@ -1000,10 +1041,15 @@
1000
1041
  --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-300-fade-border);
1001
1042
  --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-70);
1002
1043
  --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground);
1003
- --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
1004
1044
  --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
1005
1045
  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
1046
+ --salt-palette-neutral-tertiary-background: var(--salt-color-gray-500);
1047
+ --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-500-fade-background);
1048
+ --salt-palette-neutral-tertiary-border: var(--salt-color-gray-300);
1049
+ --salt-palette-neutral-tertiary-border-disabled: var(--salt-color-gray-300-fade-background);
1050
+ --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
1006
1051
  --salt-palette-neutral-selection: var(--salt-color-white-fade-background-selection);
1052
+ --salt-palette-neutral-highlight: var(--salt-color-white-fade-background-highlight);
1007
1053
  }
1008
1054
 
1009
1055
  /* css/palette/opacity.css */
@@ -1019,10 +1065,24 @@
1019
1065
 
1020
1066
  /* css/palette/positive.css */
1021
1067
  .salt-theme[data-mode=light] {
1022
- --salt-palette-positive-foreground: var(--salt-color-green-700);
1068
+ --salt-palette-positive-foreground: var(--salt-color-green-600);
1069
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-600-fade-foreground);
1070
+ --salt-palette-positive-background: var(--salt-color-green-600);
1071
+ --salt-palette-positive-background-hover: var(--salt-color-green-500);
1072
+ --salt-palette-positive-background-active: var(--salt-color-green-700);
1073
+ --salt-palette-positive-background-disabled: var(--salt-color-green-600-fade-background);
1074
+ --salt-palette-positive-border: var(--salt-color-green-500);
1075
+ --salt-palette-positive-border-disabled: var(--salt-color-green-500-fade-background);
1023
1076
  }
1024
1077
  .salt-theme[data-mode=dark] {
1025
- --salt-palette-positive-foreground: var(--salt-color-green-300);
1078
+ --salt-palette-positive-foreground: var(--salt-color-green-200);
1079
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-200-fade-foreground);
1080
+ --salt-palette-positive-background: var(--salt-color-green-600);
1081
+ --salt-palette-positive-background-hover: var(--salt-color-green-500);
1082
+ --salt-palette-positive-background-active: var(--salt-color-green-700);
1083
+ --salt-palette-positive-background-disabled: var(--salt-color-green-600-fade-background);
1084
+ --salt-palette-positive-border: var(--salt-color-green-500);
1085
+ --salt-palette-positive-border-disabled: var(--salt-color-green-500-fade-background);
1026
1086
  }
1027
1087
 
1028
1088
  /* css/palette/success.css */
@@ -1070,16 +1130,32 @@
1070
1130
  --salt-palette-warning-bold-background: var(--salt-color-orange-800);
1071
1131
  --salt-palette-warning-background-selected: var(--salt-color-orange-20);
1072
1132
  --salt-palette-warning-border: var(--salt-color-orange-700);
1133
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
1073
1134
  --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700);
1074
1135
  --salt-palette-warning-foreground-informative: var(--salt-color-orange-850);
1136
+ --salt-palette-warning-foreground-informative-disabled: var(--salt-color-orange-850-fade-foreground);
1137
+ --salt-palette-warning-action: var(--salt-color-orange-600);
1138
+ --salt-palette-warning-action-hover: var(--salt-color-orange-500);
1139
+ --salt-palette-warning-action-active: var(--salt-color-orange-800);
1140
+ --salt-palette-warning-action-disabled: var(--salt-color-orange-600-fade-background);
1141
+ --salt-palette-warning-action-foreground: var(--salt-color-gray-900);
1142
+ --salt-palette-warning-action-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
1075
1143
  }
1076
1144
  .salt-theme[data-mode=dark] {
1077
1145
  --salt-palette-warning-background: var(--salt-color-orange-900);
1078
1146
  --salt-palette-warning-bold-background: var(--salt-color-orange-800);
1079
1147
  --salt-palette-warning-background-selected: var(--salt-color-orange-900);
1080
1148
  --salt-palette-warning-border: var(--salt-color-orange-500);
1149
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
1081
1150
  --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500);
1082
1151
  --salt-palette-warning-foreground-informative: var(--salt-color-orange-400);
1152
+ --salt-palette-warning-foreground-informative-disabled: var(--salt-color-orange-400-fade-foreground);
1153
+ --salt-palette-warning-action: var(--salt-color-orange-600);
1154
+ --salt-palette-warning-action-hover: var(--salt-color-orange-500);
1155
+ --salt-palette-warning-action-active: var(--salt-color-orange-800);
1156
+ --salt-palette-warning-action-disabled: var(--salt-color-orange-600-fade-background);
1157
+ --salt-palette-warning-action-foreground: var(--salt-color-gray-900);
1158
+ --salt-palette-warning-action-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
1083
1159
  }
1084
1160
 
1085
1161
  /* css/characteristics/accent.css */
@@ -1094,42 +1170,186 @@
1094
1170
  --salt-actionable-cursor-hover: pointer;
1095
1171
  --salt-actionable-cursor-active: pointer;
1096
1172
  --salt-actionable-cursor-disabled: not-allowed;
1097
- --salt-actionable-primary-foreground: var(--salt-palette-interact-primary-foreground);
1098
- --salt-actionable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1099
- --salt-actionable-primary-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1100
- --salt-actionable-primary-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
1101
- --salt-actionable-primary-background: var(--salt-palette-interact-primary-background);
1102
- --salt-actionable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
1103
- --salt-actionable-primary-background-active: var(--salt-palette-interact-primary-background-active);
1104
- --salt-actionable-primary-background-disabled: var(--salt-palette-interact-primary-background-disabled);
1105
- --salt-actionable-primary-borderColor: transparent;
1106
- --salt-actionable-primary-borderColor-hover: transparent;
1107
- --salt-actionable-primary-borderColor-active: transparent;
1108
- --salt-actionable-primary-borderColor-disabled: transparent;
1109
- --salt-actionable-cta-foreground: var(--salt-palette-interact-cta-foreground);
1110
- --salt-actionable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
1111
- --salt-actionable-cta-foreground-active: var(--salt-palette-interact-cta-foreground-active);
1112
- --salt-actionable-cta-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1113
- --salt-actionable-cta-background: var(--salt-palette-interact-cta-background);
1114
- --salt-actionable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
1115
- --salt-actionable-cta-background-active: var(--salt-palette-interact-cta-background-active);
1116
- --salt-actionable-cta-background-disabled: var(--salt-palette-interact-cta-background-disabled);
1117
- --salt-actionable-cta-borderColor: transparent;
1118
- --salt-actionable-cta-borderColor-hover: transparent;
1119
- --salt-actionable-cta-borderColor-active: transparent;
1120
- --salt-actionable-cta-borderColor-disabled: transparent;
1121
- --salt-actionable-secondary-foreground: var(--salt-palette-interact-secondary-foreground);
1122
- --salt-actionable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
1123
- --salt-actionable-secondary-foreground-active: var(--salt-palette-interact-secondary-foreground-active);
1124
- --salt-actionable-secondary-foreground-disabled: var(--salt-palette-interact-secondary-foreground-disabled);
1125
- --salt-actionable-secondary-background: var(--salt-palette-interact-secondary-background);
1126
- --salt-actionable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
1127
- --salt-actionable-secondary-background-active: var(--salt-palette-interact-secondary-background-active);
1128
- --salt-actionable-secondary-background-disabled: var(--salt-palette-interact-secondary-background-disabled);
1129
- --salt-actionable-secondary-borderColor: transparent;
1130
- --salt-actionable-secondary-borderColor-hover: transparent;
1131
- --salt-actionable-secondary-borderColor-active: transparent;
1132
- --salt-actionable-secondary-borderColor-disabled: transparent;
1173
+ --salt-actionable-accented-bold-background-active: var(--salt-palette-interact-cta-background-active);
1174
+ --salt-actionable-accented-bold-background-disabled: var(--salt-palette-interact-cta-background-disabled);
1175
+ --salt-actionable-accented-bold-background-hover: var(--salt-palette-interact-cta-background-hover);
1176
+ --salt-actionable-accented-bold-background: var(--salt-palette-interact-cta-background);
1177
+ --salt-actionable-accented-bold-borderColor-active: var(--salt-palette-interact-border-none);
1178
+ --salt-actionable-accented-bold-borderColor-disabled: var(--salt-palette-interact-border-none);
1179
+ --salt-actionable-accented-bold-borderColor-hover: var(--salt-palette-interact-border-none);
1180
+ --salt-actionable-accented-bold-borderColor: var(--salt-palette-interact-border-none);
1181
+ --salt-actionable-accented-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
1182
+ --salt-actionable-accented-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1183
+ --salt-actionable-accented-bold-foreground-hover: var(--salt-palette-interact-cta-foreground);
1184
+ --salt-actionable-accented-bold-foreground: var(--salt-palette-interact-cta-foreground);
1185
+ --salt-actionable-bold-background-active: var(--salt-palette-interact-primary-background-active);
1186
+ --salt-actionable-bold-background-disabled: var(--salt-palette-interact-primary-background-disabled);
1187
+ --salt-actionable-bold-background-hover: var(--salt-palette-interact-primary-background-hover);
1188
+ --salt-actionable-bold-background: var(--salt-palette-interact-primary-background);
1189
+ --salt-actionable-bold-borderColor-active: var(--salt-palette-interact-border-none);
1190
+ --salt-actionable-bold-borderColor-disabled: var(--salt-palette-interact-border-none);
1191
+ --salt-actionable-bold-borderColor-hover: var(--salt-palette-interact-border-none);
1192
+ --salt-actionable-bold-borderColor: var(--salt-palette-interact-border-none);
1193
+ --salt-actionable-bold-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1194
+ --salt-actionable-bold-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1195
+ --salt-actionable-bold-foreground-hover: var(--salt-palette-neutral-primary-foreground);
1196
+ --salt-actionable-bold-foreground: var(--salt-palette-neutral-primary-foreground);
1197
+ --salt-actionable-accented-background-active: var(--salt-palette-interact-cta-background-active);
1198
+ --salt-actionable-accented-background-disabled: var(--salt-palette-interact-background);
1199
+ --salt-actionable-accented-background-hover: var(--salt-palette-interact-cta-background-hover);
1200
+ --salt-actionable-accented-background: var(--salt-palette-interact-background);
1201
+ --salt-actionable-accented-borderColor-active: var(--salt-palette-interact-border-none);
1202
+ --salt-actionable-accented-borderColor-disabled: var(--salt-palette-accent-border-disabled);
1203
+ --salt-actionable-accented-borderColor-hover: var(--salt-palette-interact-border-none);
1204
+ --salt-actionable-accented-borderColor: var(--salt-palette-accent-border);
1205
+ --salt-actionable-accented-foreground-active: var(--salt-palette-interact-cta-foreground);
1206
+ --salt-actionable-accented-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
1207
+ --salt-actionable-accented-foreground-hover: var(--salt-palette-interact-cta-foreground);
1208
+ --salt-actionable-accented-foreground: var(--salt-palette-accent-foreground-informative);
1209
+ --salt-actionable-background-active: var(--salt-palette-interact-primary-background-active);
1210
+ --salt-actionable-background-disabled: var(--salt-palette-interact-background);
1211
+ --salt-actionable-background-hover: var(--salt-palette-interact-primary-background-hover);
1212
+ --salt-actionable-background: var(--salt-palette-interact-background);
1213
+ --salt-actionable-borderColor-active: var(--salt-palette-interact-border-none);
1214
+ --salt-actionable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
1215
+ --salt-actionable-borderColor-hover: var(--salt-palette-interact-border-none);
1216
+ --salt-actionable-borderColor: var(--salt-palette-interact-border);
1217
+ --salt-actionable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1218
+ --salt-actionable-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1219
+ --salt-actionable-foreground-hover: var(--salt-palette-neutral-primary-foreground);
1220
+ --salt-actionable-foreground: var(--salt-palette-neutral-primary-foreground);
1221
+ --salt-actionable-accented-subtle-background-active: var(--salt-palette-interact-cta-background-active);
1222
+ --salt-actionable-accented-subtle-background-disabled: var(--salt-palette-interact-background);
1223
+ --salt-actionable-accented-subtle-background-hover: var(--salt-palette-interact-cta-background-hover);
1224
+ --salt-actionable-accented-subtle-background: var(--salt-palette-interact-background);
1225
+ --salt-actionable-accented-subtle-borderColor-active: var(--salt-palette-interact-border-none);
1226
+ --salt-actionable-accented-subtle-borderColor-disabled: var(--salt-palette-interact-border-none);
1227
+ --salt-actionable-accented-subtle-borderColor-hover: var(--salt-palette-interact-border-none);
1228
+ --salt-actionable-accented-subtle-borderColor: var(--salt-palette-interact-border-none);
1229
+ --salt-actionable-accented-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
1230
+ --salt-actionable-accented-subtle-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
1231
+ --salt-actionable-accented-subtle-foreground-hover: var(--salt-palette-interact-cta-foreground);
1232
+ --salt-actionable-accented-subtle-foreground: var(--salt-palette-accent-foreground-informative);
1233
+ --salt-actionable-subtle-background-active: var(--salt-palette-interact-primary-background-active);
1234
+ --salt-actionable-subtle-background-disabled: var(--salt-palette-interact-background);
1235
+ --salt-actionable-subtle-background-hover: var(--salt-palette-interact-primary-background-hover);
1236
+ --salt-actionable-subtle-background: var(--salt-palette-interact-background);
1237
+ --salt-actionable-subtle-borderColor-active: var(--salt-palette-interact-border-none);
1238
+ --salt-actionable-subtle-borderColor-disabled: var(--salt-palette-interact-border-none);
1239
+ --salt-actionable-subtle-borderColor-hover: var(--salt-palette-interact-border-none);
1240
+ --salt-actionable-subtle-borderColor: var(--salt-palette-interact-border-none);
1241
+ --salt-actionable-subtle-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1242
+ --salt-actionable-subtle-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1243
+ --salt-actionable-subtle-foreground-hover: var(--salt-palette-neutral-primary-foreground);
1244
+ --salt-actionable-subtle-foreground: var(--salt-palette-neutral-primary-foreground);
1245
+ --salt-actionable-negative-bold-background-active: var(--salt-palette-negative-background-active);
1246
+ --salt-actionable-negative-bold-background-disabled: var(--salt-palette-negative-background-disabled);
1247
+ --salt-actionable-negative-bold-background-hover: var(--salt-palette-negative-background-hover);
1248
+ --salt-actionable-negative-bold-background: var(--salt-palette-negative-background);
1249
+ --salt-actionable-negative-bold-borderColor-active: var(--salt-palette-interact-border-none);
1250
+ --salt-actionable-negative-bold-borderColor-disabled: var(--salt-palette-interact-border-none);
1251
+ --salt-actionable-negative-bold-borderColor-hover: var(--salt-palette-interact-border-none);
1252
+ --salt-actionable-negative-bold-borderColor: var(--salt-palette-interact-border-none);
1253
+ --salt-actionable-negative-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
1254
+ --salt-actionable-negative-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1255
+ --salt-actionable-negative-bold-foreground-hover: var(--salt-palette-interact-cta-foreground);
1256
+ --salt-actionable-negative-bold-foreground: var(--salt-palette-interact-cta-foreground);
1257
+ --salt-actionable-negative-background-active: var(--salt-palette-negative-background-active);
1258
+ --salt-actionable-negative-background-disabled: var(--salt-palette-interact-border-none);
1259
+ --salt-actionable-negative-background-hover: var(--salt-palette-negative-background-hover);
1260
+ --salt-actionable-negative-background: var(--salt-palette-interact-border-none);
1261
+ --salt-actionable-negative-borderColor-active: var(--salt-palette-interact-border-none);
1262
+ --salt-actionable-negative-borderColor-disabled: var(--salt-palette-negative-border-disabled);
1263
+ --salt-actionable-negative-borderColor-hover: var(--salt-palette-interact-border-none);
1264
+ --salt-actionable-negative-borderColor: var(--salt-palette-negative-border);
1265
+ --salt-actionable-negative-foreground-active: var(--salt-palette-interact-cta-foreground);
1266
+ --salt-actionable-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1267
+ --salt-actionable-negative-foreground-hover: var(--salt-palette-interact-cta-foreground);
1268
+ --salt-actionable-negative-foreground: var(--salt-palette-negative-foreground);
1269
+ --salt-actionable-negative-subtle-background-active: var(--salt-palette-negative-background-active);
1270
+ --salt-actionable-negative-subtle-background-disabled: var(--salt-palette-interact-border-none);
1271
+ --salt-actionable-negative-subtle-background-hover: var(--salt-palette-negative-background-hover);
1272
+ --salt-actionable-negative-subtle-background: var(--salt-palette-interact-border-none);
1273
+ --salt-actionable-negative-subtle-borderColor-active: var(--salt-palette-interact-border-none);
1274
+ --salt-actionable-negative-subtle-borderColor-disabled: var(--salt-palette-interact-border-none);
1275
+ --salt-actionable-negative-subtle-borderColor-hover: var(--salt-palette-interact-border-none);
1276
+ --salt-actionable-negative-subtle-borderColor: var(--salt-palette-interact-border-none);
1277
+ --salt-actionable-negative-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
1278
+ --salt-actionable-negative-subtle-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1279
+ --salt-actionable-negative-subtle-foreground-hover: var(--salt-palette-interact-cta-foreground);
1280
+ --salt-actionable-negative-subtle-foreground: var(--salt-palette-negative-foreground);
1281
+ --salt-actionable-positive-bold-background-active: var(--salt-palette-positive-background-active);
1282
+ --salt-actionable-positive-bold-background-disabled: var(--salt-palette-positive-background-disabled);
1283
+ --salt-actionable-positive-bold-background-hover: var(--salt-palette-positive-background-hover);
1284
+ --salt-actionable-positive-bold-background: var(--salt-palette-positive-background);
1285
+ --salt-actionable-positive-bold-borderColor-active: var(--salt-palette-interact-border-none);
1286
+ --salt-actionable-positive-bold-borderColor-disabled: var(--salt-palette-interact-border-none);
1287
+ --salt-actionable-positive-bold-borderColor-hover: var(--salt-palette-interact-border-none);
1288
+ --salt-actionable-positive-bold-borderColor: var(--salt-palette-interact-border-none);
1289
+ --salt-actionable-positive-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
1290
+ --salt-actionable-positive-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1291
+ --salt-actionable-positive-bold-foreground-hover: var(--salt-palette-interact-cta-foreground);
1292
+ --salt-actionable-positive-bold-foreground: var(--salt-palette-interact-cta-foreground);
1293
+ --salt-actionable-positive-background-active: var(--salt-palette-positive-background-active);
1294
+ --salt-actionable-positive-background-disabled: var(--salt-palette-interact-border-none);
1295
+ --salt-actionable-positive-background-hover: var(--salt-palette-positive-background-hover);
1296
+ --salt-actionable-positive-background: var(--salt-palette-interact-border-none);
1297
+ --salt-actionable-positive-borderColor-active: var(--salt-palette-interact-border-none);
1298
+ --salt-actionable-positive-borderColor-disabled: var(--salt-palette-positive-border-disabled);
1299
+ --salt-actionable-positive-borderColor-hover: var(--salt-palette-interact-border-none);
1300
+ --salt-actionable-positive-borderColor: var(--salt-palette-positive-border);
1301
+ --salt-actionable-positive-foreground-active: var(--salt-palette-interact-cta-foreground);
1302
+ --salt-actionable-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1303
+ --salt-actionable-positive-foreground-hover: var(--salt-palette-interact-cta-foreground);
1304
+ --salt-actionable-positive-foreground: var(--salt-palette-positive-foreground);
1305
+ --salt-actionable-positive-subtle-background-active: var(--salt-palette-positive-background-active);
1306
+ --salt-actionable-positive-subtle-background-disabled: var(--salt-palette-interact-border-none);
1307
+ --salt-actionable-positive-subtle-background-hover: var(--salt-palette-positive-background-hover);
1308
+ --salt-actionable-positive-subtle-background: var(--salt-palette-interact-border-none);
1309
+ --salt-actionable-positive-subtle-borderColor-active: var(--salt-palette-interact-border-none);
1310
+ --salt-actionable-positive-subtle-borderColor-disabled: var(--salt-palette-interact-border-none);
1311
+ --salt-actionable-positive-subtle-borderColor-hover: var(--salt-palette-interact-border-none);
1312
+ --salt-actionable-positive-subtle-borderColor: var(--salt-palette-interact-border-none);
1313
+ --salt-actionable-positive-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
1314
+ --salt-actionable-positive-subtle-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1315
+ --salt-actionable-positive-subtle-foreground-hover: var(--salt-palette-interact-cta-foreground);
1316
+ --salt-actionable-positive-subtle-foreground: var(--salt-palette-positive-foreground);
1317
+ --salt-actionable-caution-bold-background-active: var(--salt-palette-warning-action-active);
1318
+ --salt-actionable-caution-bold-background-disabled: var(--salt-palette-warning-action-disabled);
1319
+ --salt-actionable-caution-bold-background-hover: var(--salt-palette-warning-action-hover);
1320
+ --salt-actionable-caution-bold-background: var(--salt-palette-warning-action);
1321
+ --salt-actionable-caution-bold-borderColor-active: var(--salt-palette-interact-border-none);
1322
+ --salt-actionable-caution-bold-borderColor-disabled: var(--salt-palette-interact-border-none);
1323
+ --salt-actionable-caution-bold-borderColor-hover: var(--salt-palette-interact-border-none);
1324
+ --salt-actionable-caution-bold-borderColor: var(--salt-palette-interact-border-none);
1325
+ --salt-actionable-caution-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
1326
+ --salt-actionable-caution-bold-foreground-disabled: var(--salt-palette-warning-action-foreground-disabled);
1327
+ --salt-actionable-caution-bold-foreground-hover: var(--salt-palette-warning-action-foreground);
1328
+ --salt-actionable-caution-bold-foreground: var(--salt-palette-warning-action-foreground);
1329
+ --salt-actionable-caution-background-active: var(--salt-palette-warning-action-active);
1330
+ --salt-actionable-caution-background-disabled: var(--salt-palette-interact-border-none);
1331
+ --salt-actionable-caution-background-hover: var(--salt-palette-warning-action-hover);
1332
+ --salt-actionable-caution-background: var(--salt-palette-interact-border-none);
1333
+ --salt-actionable-caution-borderColor-active: var(--salt-palette-interact-border-none);
1334
+ --salt-actionable-caution-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1335
+ --salt-actionable-caution-borderColor-hover: var(--salt-palette-interact-border-none);
1336
+ --salt-actionable-caution-borderColor: var(--salt-palette-warning-border);
1337
+ --salt-actionable-caution-foreground-active: var(--salt-palette-interact-cta-foreground);
1338
+ --salt-actionable-caution-foreground-disabled: var(--salt-palette-warning-foreground-informative-disabled);
1339
+ --salt-actionable-caution-foreground-hover: var(--salt-palette-warning-action-foreground);
1340
+ --salt-actionable-caution-foreground: var(--salt-palette-warning-foreground-informative);
1341
+ --salt-actionable-caution-subtle-background-active: var(--salt-palette-warning-action-active);
1342
+ --salt-actionable-caution-subtle-background-disabled: var(--salt-palette-interact-border-none);
1343
+ --salt-actionable-caution-subtle-background-hover: var(--salt-palette-warning-action-hover);
1344
+ --salt-actionable-caution-subtle-background: var(--salt-palette-interact-border-none);
1345
+ --salt-actionable-caution-subtle-borderColor-active: var(--salt-palette-interact-border-none);
1346
+ --salt-actionable-caution-subtle-borderColor-disabled: var(--salt-palette-interact-border-none);
1347
+ --salt-actionable-caution-subtle-borderColor-hover: var(--salt-palette-interact-border-none);
1348
+ --salt-actionable-caution-subtle-borderColor: var(--salt-palette-interact-border-none);
1349
+ --salt-actionable-caution-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
1350
+ --salt-actionable-caution-subtle-foreground-disabled: var(--salt-palette-warning-foreground-informative-disabled);
1351
+ --salt-actionable-caution-subtle-foreground-hover: var(--salt-palette-warning-action-foreground);
1352
+ --salt-actionable-caution-subtle-foreground: var(--salt-palette-warning-foreground-informative);
1133
1353
  }
1134
1354
 
1135
1355
  /* css/characteristics/category.css */
@@ -1247,6 +1467,10 @@
1247
1467
  --salt-container-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
1248
1468
  --salt-container-secondary-borderColor: var(--salt-palette-neutral-secondary-border);
1249
1469
  --salt-container-secondary-borderColor-disabled: var(--salt-palette-neutral-secondary-border-disabled);
1470
+ --salt-container-tertiary-background: var(--salt-palette-neutral-tertiary-background);
1471
+ --salt-container-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
1472
+ --salt-container-tertiary-borderColor: var(--salt-palette-neutral-tertiary-border);
1473
+ --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-tertiary-border-disabled);
1250
1474
  }
1251
1475
 
1252
1476
  /* css/characteristics/draggable.css */
@@ -1348,6 +1572,7 @@
1348
1572
  --salt-overlayable-shadow-drag: var(--salt-shadow-400);
1349
1573
  --salt-overlayable-shadow-modal: var(--salt-shadow-500);
1350
1574
  --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
1575
+ --salt-overlayable-background-highlight: var(--salt-palette-neutral-highlight);
1351
1576
  --salt-overlayable-rangeSelection: var(--salt-palette-neutral-selection);
1352
1577
  }
1353
1578
 
@@ -1736,10 +1961,42 @@
1736
1961
  --salt-taggable-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1737
1962
  --salt-taggable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1738
1963
  --salt-taggable-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
1739
- --salt-container-tertiary-background: transparent;
1740
- --salt-container-tertiary-background-disabled: transparent;
1741
- --salt-container-tertiary-borderColor: transparent;
1742
- --salt-container-tertiary-borderColor-disabled: transparent;
1964
+ --salt-actionable-cta-background-active: var(--salt-actionable-accented-bold-background-active);
1965
+ --salt-actionable-cta-background-disabled: var(--salt-actionable-accented-bold-background-disabled);
1966
+ --salt-actionable-cta-background-hover: var(--salt-actionable-accented-bold-background-hover);
1967
+ --salt-actionable-cta-background: var(--salt-actionable-accented-bold-background);
1968
+ --salt-actionable-cta-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);
1969
+ --salt-actionable-cta-borderColor-disabled: var(--salt-actionable-accented-bold-borderColor-disabled);
1970
+ --salt-actionable-cta-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);
1971
+ --salt-actionable-cta-borderColor: var(--salt-actionable-accented-bold-borderColor);
1972
+ --salt-actionable-cta-foreground-active: var(--salt-actionable-accented-bold-foreground-active);
1973
+ --salt-actionable-cta-foreground-disabled: var(--salt-actionable-accented-bold-foreground-disabled);
1974
+ --salt-actionable-cta-foreground-hover: var(--salt-actionable-accented-bold-foreground-hover);
1975
+ --salt-actionable-cta-foreground: var(--salt-actionable-accented-bold-foreground);
1976
+ --salt-actionable-primary-background-active: var(--salt-actionable-bold-background-active);
1977
+ --salt-actionable-primary-background-disabled: var(--salt-actionable-bold-background-disabled);
1978
+ --salt-actionable-primary-background-hover: var(--salt-actionable-bold-background-hover);
1979
+ --salt-actionable-primary-background: var(--salt-actionable-bold-background);
1980
+ --salt-actionable-primary-borderColor-active: var(--salt-actionable-bold-borderColor-active);
1981
+ --salt-actionable-primary-borderColor-disabled: var(--salt-actionable-bold-borderColor-disabled);
1982
+ --salt-actionable-primary-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);
1983
+ --salt-actionable-primary-borderColor: var(--salt-actionable-bold-borderColor);
1984
+ --salt-actionable-primary-foreground-active: var(--salt-actionable-bold-foreground-active);
1985
+ --salt-actionable-primary-foreground-disabled: var(--salt-actionable-bold-foreground-disabled);
1986
+ --salt-actionable-primary-foreground-hover: var(--salt-actionable-bold-foreground-hover);
1987
+ --salt-actionable-primary-foreground: var(--salt-actionable-bold-foreground);
1988
+ --salt-actionable-secondary-background-active: var(--salt-actionable-subtle-background-active);
1989
+ --salt-actionable-secondary-background-disabled: var(--salt-actionable-subtle-background-disabled);
1990
+ --salt-actionable-secondary-background-hover: var(--salt-actionable-subtle-background-hover);
1991
+ --salt-actionable-secondary-background: var(--salt-actionable-subtle-background);
1992
+ --salt-actionable-secondary-borderColor-active: var(--salt-actionable-subtle-borderColor-active);
1993
+ --salt-actionable-secondary-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);
1994
+ --salt-actionable-secondary-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);
1995
+ --salt-actionable-secondary-borderColor: var(--salt-actionable-subtle-borderColor);
1996
+ --salt-actionable-secondary-foreground-active: var(--salt-actionable-subtle-foreground-active);
1997
+ --salt-actionable-secondary-foreground-disabled: var(--salt-actionable-subtle-foreground-disabled);
1998
+ --salt-actionable-secondary-foreground-hover: var(--salt-actionable-subtle-foreground-hover);
1999
+ --salt-actionable-secondary-foreground: var(--salt-actionable-subtle-foreground);
1743
2000
  }
1744
2001
  .salt-density-high {
1745
2002
  --salt-accent-fontSize: 8px;
@@ -1818,7 +2075,6 @@
1818
2075
  --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
1819
2076
  --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
1820
2077
  --salt-size-separator-strokeWidth: 1px;
1821
- --salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
1822
2078
  --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
1823
2079
  --salt-size-sharktooth-height: 5px;
1824
2080
  --salt-size-sharktooth-width: 10px;
@@ -1886,10 +2142,6 @@
1886
2142
  --salt-palette-measured-border: var(--salt-color-gray-90);
1887
2143
  --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
1888
2144
  --salt-palette-neutral-tertiary-background-readonly: transparent;
1889
- --salt-palette-neutral-tertiary-background: transparent;
1890
- --salt-palette-neutral-tertiary-background-disabled: transparent;
1891
- --salt-palette-neutral-tertiary-border: transparent;
1892
- --salt-palette-neutral-tertiary-border-disabled: transparent;
1893
2145
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1894
2146
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1895
2147
  --salt-palette-error-foreground: var(--salt-color-red-500);
@@ -1942,10 +2194,6 @@
1942
2194
  --salt-palette-measured-border: var(--salt-color-gray-90);
1943
2195
  --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
1944
2196
  --salt-palette-neutral-tertiary-background-readonly: transparent;
1945
- --salt-palette-neutral-tertiary-background: transparent;
1946
- --salt-palette-neutral-tertiary-background-disabled: transparent;
1947
- --salt-palette-neutral-tertiary-border: transparent;
1948
- --salt-palette-neutral-tertiary-border-disabled: transparent;
1949
2197
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1950
2198
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1951
2199
  --salt-palette-error-foreground: var(--salt-color-red-500);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "1.20.0",
3
+ "version": "1.22.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",