@salt-ds/theme 1.29.0 → 1.31.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
@@ -29,24 +29,24 @@
29
29
 
30
30
  /* css/foundations/alpha.css */
31
31
  .salt-theme {
32
+ --salt-color-white-5a: rgba(var(--salt-color-white-rgb), 0.05);
32
33
  --salt-color-white-10a: rgba(var(--salt-color-white-rgb), 0.1);
34
+ --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
33
35
  --salt-color-white-20a: rgba(var(--salt-color-white-rgb), 0.2);
34
36
  --salt-color-white-30a: rgba(var(--salt-color-white-rgb), 0.3);
35
37
  --salt-color-white-40a: rgba(var(--salt-color-white-rgb), 0.4);
36
38
  --salt-color-white-50a: rgba(var(--salt-color-white-rgb), 0.5);
37
- --salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
38
- --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
39
+ --salt-color-white-65a: rgba(var(--salt-color-white-rgb), 0.65);
39
40
  --salt-color-white-80a: rgba(var(--salt-color-white-rgb), 0.8);
40
- --salt-color-white-90a: rgba(var(--salt-color-white-rgb), 0.9);
41
+ --salt-color-black-5a: rgba(var(--salt-color-black-rgb), 0.05);
41
42
  --salt-color-black-10a: rgba(var(--salt-color-black-rgb), 0.1);
43
+ --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
42
44
  --salt-color-black-20a: rgba(var(--salt-color-black-rgb), 0.2);
43
45
  --salt-color-black-30a: rgba(var(--salt-color-black-rgb), 0.3);
44
46
  --salt-color-black-40a: rgba(var(--salt-color-black-rgb), 0.4);
45
47
  --salt-color-black-50a: rgba(var(--salt-color-black-rgb), 0.5);
46
- --salt-color-black-60a: rgba(var(--salt-color-black-rgb), 0.6);
47
- --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
48
+ --salt-color-black-65a: rgba(var(--salt-color-black-rgb), 0.65);
48
49
  --salt-color-black-80a: rgba(var(--salt-color-black-rgb), 0.8);
49
- --salt-color-black-90a: rgba(var(--salt-color-black-rgb), 0.9);
50
50
  --salt-color-blue-30-40a: rgba(var(--salt-color-blue-30-rgb), 0.4);
51
51
  --salt-color-blue-100-40a: rgba(var(--salt-color-blue-100-rgb), 0.4);
52
52
  --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
@@ -224,6 +224,13 @@
224
224
  }
225
225
  }
226
226
 
227
+ /* css/foundations/borderStyle.css */
228
+ .salt-theme {
229
+ --salt-borderStyle-solid: solid;
230
+ --salt-borderStyle-dashed: dashed;
231
+ --salt-borderStyle-dotted: dotted;
232
+ }
233
+
227
234
  /* css/foundations/color.css */
228
235
  .salt-theme {
229
236
  --salt-color-white-rgb:
@@ -933,6 +940,20 @@
933
940
  --salt-color-forest-900: rgb(0, 51, 31);
934
941
  }
935
942
 
943
+ /* css/foundations/cursor.css */
944
+ .salt-theme {
945
+ --salt-cursor-active: pointer;
946
+ --salt-cursor-disabled: not-allowed;
947
+ --salt-cursor-drag-ew: ew-resize;
948
+ --salt-cursor-drag-ns: ns-resize;
949
+ --salt-cursor-grab: grab;
950
+ --salt-cursor-grab-active: grabbing;
951
+ --salt-cursor-hover: pointer;
952
+ --salt-cursor-pending: progress;
953
+ --salt-cursor-readonly: text;
954
+ --salt-cursor-text: text;
955
+ }
956
+
936
957
  /* css/foundations/curve.css */
937
958
  .salt-density-high {
938
959
  --salt-curve-0: 0;
@@ -1007,49 +1028,51 @@
1007
1028
  --salt-size-adornment: 6px;
1008
1029
  --salt-size-bar: 2px;
1009
1030
  --salt-size-base: 20px;
1010
- --salt-size-border: 1px;
1011
1031
  --salt-size-icon: 10px;
1012
1032
  --salt-size-indicator: 2px;
1013
1033
  --salt-size-selectable: 12px;
1014
1034
  --salt-size-bar-strong: 4px;
1015
- --salt-size-bar-small: 2px;
1016
- --salt-size-border-strong: 2px;
1017
1035
  }
1018
1036
  .salt-density-medium {
1019
1037
  --salt-size-adornment: 8px;
1020
1038
  --salt-size-bar: 4px;
1021
1039
  --salt-size-base: 28px;
1022
- --salt-size-border: 1px;
1023
1040
  --salt-size-icon: 12px;
1024
1041
  --salt-size-indicator: 3px;
1025
1042
  --salt-size-selectable: 14px;
1026
1043
  --salt-size-bar-strong: 8px;
1027
- --salt-size-bar-small: 2px;
1028
- --salt-size-border-strong: 2px;
1029
1044
  }
1030
1045
  .salt-density-low {
1031
1046
  --salt-size-adornment: 10px;
1032
1047
  --salt-size-bar: 6px;
1033
1048
  --salt-size-base: 36px;
1034
- --salt-size-border: 1px;
1035
1049
  --salt-size-icon: 14px;
1036
1050
  --salt-size-indicator: 4px;
1037
1051
  --salt-size-selectable: 16px;
1038
1052
  --salt-size-bar-strong: 12px;
1039
- --salt-size-bar-small: 2px;
1040
- --salt-size-border-strong: 2px;
1041
1053
  }
1042
1054
  .salt-density-touch {
1043
1055
  --salt-size-adornment: 12px;
1044
1056
  --salt-size-bar: 8px;
1045
1057
  --salt-size-base: 44px;
1046
- --salt-size-border: 1px;
1047
1058
  --salt-size-icon: 16px;
1048
1059
  --salt-size-indicator: 5px;
1049
1060
  --salt-size-selectable: 18px;
1050
1061
  --salt-size-bar-strong: 16px;
1051
- --salt-size-bar-small: 2px;
1052
- --salt-size-border-strong: 2px;
1062
+ }
1063
+ .salt-density-touch,
1064
+ .salt-density-low,
1065
+ .salt-density-medium,
1066
+ .salt-density-high {
1067
+ --salt-size-fixed-100: 1px;
1068
+ --salt-size-fixed-200: 2px;
1069
+ --salt-size-fixed-300: 3px;
1070
+ --salt-size-fixed-400: 4px;
1071
+ --salt-size-fixed-500: 5px;
1072
+ --salt-size-fixed-600: 6px;
1073
+ --salt-size-fixed-700: 7px;
1074
+ --salt-size-fixed-800: 8px;
1075
+ --salt-size-fixed-900: 9px;
1053
1076
  }
1054
1077
 
1055
1078
  /* css/foundations/spacing.css */
@@ -1089,6 +1112,15 @@
1089
1112
  --salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
1090
1113
  --salt-spacing-900: calc(9 * var(--salt-spacing-100));
1091
1114
  --salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
1115
+ --salt-spacing-fixed-100: 1px;
1116
+ --salt-spacing-fixed-200: 2px;
1117
+ --salt-spacing-fixed-300: 3px;
1118
+ --salt-spacing-fixed-400: 4px;
1119
+ --salt-spacing-fixed-500: 5px;
1120
+ --salt-spacing-fixed-600: 6px;
1121
+ --salt-spacing-fixed-700: 7px;
1122
+ --salt-spacing-fixed-800: 8px;
1123
+ --salt-spacing-fixed-900: 9px;
1092
1124
  }
1093
1125
 
1094
1126
  /* css/foundations/typography.css */
@@ -1124,45 +1156,45 @@
1124
1156
 
1125
1157
  /* css/palette/alpha.css */
1126
1158
  .salt-theme[data-mode=light] {
1127
- --salt-palette-alpha-highest: var(--salt-color-white-90a);
1128
- --salt-palette-alpha-higher: var(--salt-color-white-80a);
1129
- --salt-palette-alpha-high: var(--salt-color-white-70a);
1130
- --salt-palette-alpha-mediumHigh: var(--salt-color-white-60a);
1131
- --salt-palette-alpha-medium: var(--salt-color-white-50a);
1132
- --salt-palette-alpha-mediumLow: var(--salt-color-white-40a);
1133
- --salt-palette-alpha-low: var(--salt-color-white-30a);
1134
- --salt-palette-alpha-lower: var(--salt-color-white-20a);
1135
- --salt-palette-alpha-lowest: var(--salt-color-white-10a);
1136
- --salt-palette-alpha-contrast-highest: var(--salt-color-black-90a);
1137
- --salt-palette-alpha-contrast-higher: var(--salt-color-black-80a);
1138
- --salt-palette-alpha-contrast-high: var(--salt-color-black-70a);
1139
- --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-black-60a);
1140
- --salt-palette-alpha-contrast-medium: var(--salt-color-black-50a);
1141
- --salt-palette-alpha-contrast-mediumLow: var(--salt-color-black-40a);
1142
- --salt-palette-alpha-contrast-low: var(--salt-color-black-30a);
1143
- --salt-palette-alpha-contrast-lower: var(--salt-color-black-20a);
1144
- --salt-palette-alpha-contrast-lowest: var(--salt-color-black-10a);
1159
+ --salt-palette-alpha-highest: var(--salt-color-white-80a);
1160
+ --salt-palette-alpha-higher: var(--salt-color-white-65a);
1161
+ --salt-palette-alpha-high: var(--salt-color-white-50a);
1162
+ --salt-palette-alpha-mediumHigh: var(--salt-color-white-40a);
1163
+ --salt-palette-alpha-medium: var(--salt-color-white-30a);
1164
+ --salt-palette-alpha-mediumLow: var(--salt-color-white-20a);
1165
+ --salt-palette-alpha-low: var(--salt-color-white-15a);
1166
+ --salt-palette-alpha-lower: var(--salt-color-white-10a);
1167
+ --salt-palette-alpha-lowest: var(--salt-color-white-5a);
1168
+ --salt-palette-alpha-contrast-highest: var(--salt-color-black-80a);
1169
+ --salt-palette-alpha-contrast-higher: var(--salt-color-black-65a);
1170
+ --salt-palette-alpha-contrast-high: var(--salt-color-black-50a);
1171
+ --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-black-40a);
1172
+ --salt-palette-alpha-contrast-medium: var(--salt-color-black-30a);
1173
+ --salt-palette-alpha-contrast-mediumLow: var(--salt-color-black-20a);
1174
+ --salt-palette-alpha-contrast-low: var(--salt-color-black-15a);
1175
+ --salt-palette-alpha-contrast-lower: var(--salt-color-black-10a);
1176
+ --salt-palette-alpha-contrast-lowest: var(--salt-color-black-5a);
1145
1177
  --salt-palette-alpha-none: transparent;
1146
1178
  }
1147
1179
  .salt-theme[data-mode=dark] {
1148
- --salt-palette-alpha-highest: var(--salt-color-black-90a);
1149
- --salt-palette-alpha-higher: var(--salt-color-black-80a);
1150
- --salt-palette-alpha-high: var(--salt-color-black-70a);
1151
- --salt-palette-alpha-mediumHigh: var(--salt-color-black-60a);
1152
- --salt-palette-alpha-medium: var(--salt-color-black-50a);
1153
- --salt-palette-alpha-mediumLow: var(--salt-color-black-40a);
1154
- --salt-palette-alpha-low: var(--salt-color-black-30a);
1155
- --salt-palette-alpha-lower: var(--salt-color-black-20a);
1156
- --salt-palette-alpha-lowest: var(--salt-color-black-10a);
1157
- --salt-palette-alpha-contrast-highest: var(--salt-color-white-90a);
1158
- --salt-palette-alpha-contrast-higher: var(--salt-color-white-80a);
1159
- --salt-palette-alpha-contrast-high: var(--salt-color-white-70a);
1160
- --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-white-60a);
1161
- --salt-palette-alpha-contrast-medium: var(--salt-color-white-50a);
1162
- --salt-palette-alpha-contrast-mediumLow: var(--salt-color-white-40a);
1163
- --salt-palette-alpha-contrast-low: var(--salt-color-white-30a);
1164
- --salt-palette-alpha-contrast-lower: var(--salt-color-white-20a);
1165
- --salt-palette-alpha-contrast-lowest: var(--salt-color-white-10a);
1180
+ --salt-palette-alpha-highest: var(--salt-color-black-80a);
1181
+ --salt-palette-alpha-higher: var(--salt-color-black-65a);
1182
+ --salt-palette-alpha-high: var(--salt-color-black-50a);
1183
+ --salt-palette-alpha-mediumHigh: var(--salt-color-black-40a);
1184
+ --salt-palette-alpha-medium: var(--salt-color-black-30a);
1185
+ --salt-palette-alpha-mediumLow: var(--salt-color-black-20a);
1186
+ --salt-palette-alpha-low: var(--salt-color-black-15a);
1187
+ --salt-palette-alpha-lower: var(--salt-color-black-10a);
1188
+ --salt-palette-alpha-lowest: var(--salt-color-black-5a);
1189
+ --salt-palette-alpha-contrast-highest: var(--salt-color-white-80a);
1190
+ --salt-palette-alpha-contrast-higher: var(--salt-color-white-65a);
1191
+ --salt-palette-alpha-contrast-high: var(--salt-color-white-50a);
1192
+ --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-white-40a);
1193
+ --salt-palette-alpha-contrast-medium: var(--salt-color-white-30a);
1194
+ --salt-palette-alpha-contrast-mediumLow: var(--salt-color-white-20a);
1195
+ --salt-palette-alpha-contrast-low: var(--salt-color-white-15a);
1196
+ --salt-palette-alpha-contrast-lower: var(--salt-color-white-10a);
1197
+ --salt-palette-alpha-contrast-lowest: var(--salt-color-white-5a);
1166
1198
  --salt-palette-alpha-none: transparent;
1167
1199
  }
1168
1200
 
@@ -1354,7 +1386,6 @@
1354
1386
 
1355
1387
  /* css/palette/interact.css */
1356
1388
  .salt-theme[data-mode=light] {
1357
- --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
1358
1389
  --salt-palette-interact-background-hover: var(--salt-color-blue-10);
1359
1390
  --salt-palette-interact-background-active: var(--salt-color-blue-30);
1360
1391
  --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-40a);
@@ -1395,7 +1426,6 @@
1395
1426
  }
1396
1427
  .salt-theme[data-mode=dark] {
1397
1428
  --salt-palette-interact-background-active: var(--salt-color-blue-700);
1398
- --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
1399
1429
  --salt-palette-interact-background-hover: var(--salt-color-blue-800);
1400
1430
  --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-700-40a);
1401
1431
  --salt-palette-interact-border: var(--salt-color-gray-90);
@@ -1606,9 +1636,6 @@
1606
1636
 
1607
1637
  /* css/characteristics/actionable.css */
1608
1638
  .salt-theme {
1609
- --salt-actionable-cursor-hover: pointer;
1610
- --salt-actionable-cursor-active: pointer;
1611
- --salt-actionable-cursor-disabled: not-allowed;
1612
1639
  --salt-actionable-accented-bold-background-active: var(--salt-palette-interact-cta-background-active);
1613
1640
  --salt-actionable-accented-bold-background-disabled: var(--salt-palette-interact-cta-background-disabled);
1614
1641
  --salt-actionable-accented-bold-background-hover: var(--salt-palette-interact-cta-background-hover);
@@ -1897,7 +1924,6 @@
1897
1924
 
1898
1925
  /* css/characteristics/container.css */
1899
1926
  .salt-theme {
1900
- --salt-container-borderStyle: solid;
1901
1927
  --salt-container-primary-background: var(--salt-palette-neutral-primary-background);
1902
1928
  --salt-container-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
1903
1929
  --salt-container-primary-borderColor: var(--salt-palette-neutral-border);
@@ -1910,42 +1936,18 @@
1910
1936
  --salt-container-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
1911
1937
  --salt-container-tertiary-borderColor: var(--salt-palette-neutral-border);
1912
1938
  --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
1913
- --salt-container-ghost-background: var(--salt-palette-alpha-low);
1914
- --salt-container-ghost-borderColor: var(--salt-palette-alpha-contrast-low);
1915
- }
1916
-
1917
- /* css/characteristics/draggable.css */
1918
- .salt-theme {
1919
- --salt-draggable-horizontal-cursor-hover: row-resize;
1920
- --salt-draggable-horizontal-cursor-active: row-resize;
1921
- --salt-draggable-vertical-cursor-hover: col-resize;
1922
- --salt-draggable-vertical-cursor-active: col-resize;
1923
- --salt-draggable-grab-cursor-hover: grab;
1924
- --salt-draggable-grab-cursor-active: grabbing;
1939
+ --salt-container-ghost-background: var(--salt-palette-alpha-medium);
1940
+ --salt-container-ghost-borderColor: var(--salt-palette-alpha-contrast-medium);
1925
1941
  }
1926
1942
 
1927
1943
  /* css/characteristics/target.css */
1928
1944
  .salt-theme {
1929
1945
  --salt-target-background-hover: var(--salt-palette-interact-background-hover);
1930
1946
  --salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);
1931
- --salt-target-borderStyle: dashed;
1932
- --salt-target-borderStyle-hover: solid;
1933
- --salt-target-borderStyle-disabled: dashed;
1934
- --salt-target-cursor-disabled: not-allowed;
1935
1947
  }
1936
1948
 
1937
1949
  /* css/characteristics/editable.css */
1938
1950
  .salt-theme {
1939
- --salt-editable-cursor-hover: text;
1940
- --salt-editable-cursor-active: text;
1941
- --salt-editable-cursor-disabled: not-allowed;
1942
- --salt-editable-cursor-readonly: text;
1943
- --salt-editable-borderStyle: solid;
1944
- --salt-editable-borderStyle-hover: solid;
1945
- --salt-editable-borderStyle-active: solid;
1946
- --salt-editable-borderStyle-disabled: solid;
1947
- --salt-editable-borderStyle-readonly: solid;
1948
- --salt-editable-borderWidth-active: 2px;
1949
1951
  --salt-editable-borderColor: var(--salt-palette-interact-border);
1950
1952
  --salt-editable-borderColor-active: var(--salt-palette-interact-border-active);
1951
1953
  --salt-editable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
@@ -1967,8 +1969,8 @@
1967
1969
  /* css/characteristics/focused.css */
1968
1970
  .salt-theme {
1969
1971
  --salt-focused-outlineColor: var(--salt-palette-interact-outline);
1970
- --salt-focused-outlineStyle: dotted;
1971
- --salt-focused-outlineWidth: 2px;
1972
+ --salt-focused-outlineStyle: var(--salt-borderStyle-dotted);
1973
+ --salt-focused-outlineWidth: var(--salt-size-fixed-200);
1972
1974
  --salt-focused-outlineInset: 0;
1973
1975
  --salt-focused-outlineOffset: 0;
1974
1976
  --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
@@ -1987,16 +1989,11 @@
1987
1989
 
1988
1990
  /* css/characteristics/navigable.css */
1989
1991
  .salt-theme {
1990
- --salt-navigable-cursor-active: pointer;
1991
- --salt-navigable-cursor-hover: pointer;
1992
- --salt-navigable-cursor-disabled: not-allowed;
1993
- --salt-navigable-cursor-edit: text;
1994
- --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
1995
- --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
1996
- --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
1997
- --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
1998
1992
  --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
1999
- --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
1993
+ --salt-navigable-accent-indicator-active: var(--salt-palette-navigate-indicator-active);
1994
+ --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
1995
+ --salt-navigable-accent-background-active: var(--salt-palette-alpha-none);
1996
+ --salt-navigable-accent-borderColor-active: var(--salt-palette-interact-border-active);
2000
1997
  }
2001
1998
 
2002
1999
  /* css/characteristics/overlayable.css */
@@ -2008,22 +2005,13 @@
2008
2005
  --salt-overlayable-shadow-popout: var(--salt-shadow-400);
2009
2006
  --salt-overlayable-shadow-drag: var(--salt-shadow-400);
2010
2007
  --salt-overlayable-shadow-modal: var(--salt-shadow-500);
2011
- --salt-overlayable-background: var(--salt-palette-alpha-high);
2012
- --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-low);
2013
- --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-lower);
2008
+ --salt-overlayable-background: var(--salt-palette-alpha-higher);
2009
+ --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-medium);
2010
+ --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-mediumLow);
2014
2011
  }
2015
2012
 
2016
2013
  /* css/characteristics/selectable.css */
2017
2014
  .salt-theme {
2018
- --salt-selectable-cursor-hover: pointer;
2019
- --salt-selectable-cursor-selected: pointer;
2020
- --salt-selectable-cursor-blurSelected: pointer;
2021
- --salt-selectable-cursor-disabled: not-allowed;
2022
- --salt-selectable-cursor-readonly: not-allowed;
2023
- --salt-selectable-borderStyle: solid;
2024
- --salt-selectable-borderStyle-hover: solid;
2025
- --salt-selectable-borderStyle-selected: solid;
2026
- --salt-selectable-borderStyle-blurSelected: solid;
2027
2015
  --salt-selectable-borderColor: var(--salt-palette-interact-border);
2028
2016
  --salt-selectable-borderColor-hover: var(--salt-palette-interact-border-hover);
2029
2017
  --salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
@@ -2038,30 +2026,35 @@
2038
2026
  --salt-selectable-background: var(--salt-palette-alpha-none);
2039
2027
  --salt-selectable-background-hover: var(--salt-palette-interact-background-hover);
2040
2028
  --salt-selectable-background-selected: var(--salt-palette-interact-background-active);
2041
- --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
2042
2029
  --salt-selectable-background-disabled: var(--salt-palette-alpha-none);
2043
2030
  --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
2044
2031
  }
2045
2032
 
2033
+ /* css/characteristics/sentiment.css */
2034
+ .salt-theme {
2035
+ --salt-sentiment-negative-foreground-informative: var(--salt-palette-negative-foreground);
2036
+ --salt-sentiment-positive-foreground-informative: var(--salt-palette-positive-foreground);
2037
+ --salt-sentiment-negative-foreground-decorative: var(--salt-palette-negative-foreground);
2038
+ --salt-sentiment-positive-foreground-decorative: var(--salt-palette-positive-foreground);
2039
+ --salt-sentiment-neutral-track: var(--salt-palette-neutral-border);
2040
+ --salt-sentiment-neutral-track-disabled: var(--salt-palette-neutral-border-disabled);
2041
+ }
2042
+
2046
2043
  /* css/characteristics/separable.css */
2047
2044
  .salt-theme {
2048
- --salt-separable-borderStyle: solid;
2049
- --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumLow);
2050
- --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-low);
2051
- --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-contrast-lower);
2045
+ --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumHigh);
2046
+ --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-medium);
2047
+ --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-contrast-mediumLow);
2052
2048
  --salt-separable-foreground: var(--salt-palette-neutral-primary-foreground);
2053
2049
  --salt-separable-foreground-hover: var(--salt-palette-neutral-primary-foreground);
2054
2050
  --salt-separable-foreground-active: var(--salt-palette-interact-cta-foreground);
2055
2051
  --salt-separable-background: var(--salt-palette-alpha-none);
2056
- --salt-separable-background-hover: var(--salt-palette-alpha-weak);
2052
+ --salt-separable-background-hover: var(--salt-palette-alpha-contrast-mediumLow);
2057
2053
  --salt-separable-background-active: var(--salt-palette-accent);
2058
2054
  }
2059
2055
 
2060
2056
  /* css/characteristics/status.css */
2061
2057
  .salt-theme {
2062
- --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
2063
- --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
2064
- --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
2065
2058
  --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
2066
2059
  --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
2067
2060
  --salt-status-warning-foreground-decorative: var(--salt-palette-warning-foreground-decorative);
@@ -2262,25 +2255,26 @@
2262
2255
  --salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
2263
2256
  }
2264
2257
 
2265
- /* css/characteristics/track.css */
2266
- .salt-theme {
2267
- --salt-track-borderStyle: solid;
2268
- --salt-track-borderStyle-active: solid;
2269
- --salt-track-borderStyle-complete: solid;
2270
- --salt-track-borderStyle-incomplete: dotted;
2271
- --salt-track-borderColor: var(--salt-palette-neutral-border);
2272
- --salt-track-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
2273
- }
2274
-
2275
2258
  /* css/deprecated/characteristics.css */
2276
2259
  .salt-theme {
2260
+ --salt-container-borderStyle: solid;
2277
2261
  --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
2278
2262
  --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
2263
+ --salt-editable-borderStyle: solid;
2264
+ --salt-editable-borderStyle-hover: solid;
2265
+ --salt-editable-borderStyle-active: solid;
2266
+ --salt-editable-borderStyle-disabled: solid;
2267
+ --salt-editable-borderStyle-readonly: solid;
2268
+ --salt-editable-cursor-hover: text;
2269
+ --salt-editable-cursor-active: text;
2270
+ --salt-editable-cursor-disabled: not-allowed;
2271
+ --salt-editable-cursor-readonly: text;
2279
2272
  --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
2280
2273
  --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
2281
2274
  --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
2282
2275
  --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
2283
2276
  --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
2277
+ --salt-editable-borderWidth-active: 2px;
2284
2278
  --salt-measured-borderStyle: solid;
2285
2279
  --salt-measured-borderStyle-active: solid;
2286
2280
  --salt-measured-borderStyle-complete: solid;
@@ -2306,8 +2300,18 @@
2306
2300
  --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
2307
2301
  --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
2308
2302
  --salt-overlayable-rangeSelection: var(--salt-overlayable-background-rangeSelection);
2303
+ --salt-selectable-borderStyle: solid;
2304
+ --salt-selectable-borderStyle-hover: solid;
2305
+ --salt-selectable-borderStyle-selected: solid;
2306
+ --salt-selectable-borderStyle-blurSelected: solid;
2307
+ --salt-selectable-cursor-hover: pointer;
2308
+ --salt-selectable-cursor-selected: pointer;
2309
+ --salt-selectable-cursor-blurSelected: pointer;
2310
+ --salt-selectable-cursor-disabled: not-allowed;
2311
+ --salt-selectable-cursor-readonly: not-allowed;
2309
2312
  --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
2310
2313
  --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
2314
+ --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
2311
2315
  --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
2312
2316
  --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
2313
2317
  --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
@@ -2338,6 +2342,9 @@
2338
2342
  --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
2339
2343
  --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
2340
2344
  --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
2345
+ --salt-separable-borderStyle: solid;
2346
+ --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
2347
+ --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
2341
2348
  --salt-status-info-background-emphasize: var(--salt-status-info-background);
2342
2349
  --salt-status-success-background-emphasize: var(--salt-status-success-background);
2343
2350
  --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
@@ -2346,6 +2353,7 @@
2346
2353
  --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
2347
2354
  --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
2348
2355
  --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
2356
+ --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
2349
2357
  --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
2350
2358
  --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
2351
2359
  --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
@@ -2357,12 +2365,25 @@
2357
2365
  --salt-status-error-foreground: var(--salt-palette-error-foreground);
2358
2366
  --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
2359
2367
  --salt-status-success-foreground: var(--salt-palette-success-foreground);
2368
+ --salt-draggable-horizontal-cursor-hover: row-resize;
2369
+ --salt-draggable-horizontal-cursor-active: row-resize;
2370
+ --salt-draggable-vertical-cursor-hover: col-resize;
2371
+ --salt-draggable-vertical-cursor-active: col-resize;
2372
+ --salt-draggable-grab-cursor-hover: grab;
2373
+ --salt-draggable-grab-cursor-active: grabbing;
2374
+ --salt-actionable-cursor-hover: pointer;
2375
+ --salt-actionable-cursor-active: pointer;
2376
+ --salt-actionable-cursor-disabled: not-allowed;
2360
2377
  --salt-actionable-letterSpacing: 0.6px;
2361
2378
  --salt-actionable-textTransform: uppercase;
2362
2379
  --salt-actionable-textAlign: center;
2363
2380
  --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
2364
2381
  --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
2365
2382
  --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
2383
+ --salt-target-cursor-disabled: not-allowed;
2384
+ --salt-target-borderStyle: dashed;
2385
+ --salt-target-borderStyle-hover: solid;
2386
+ --salt-target-borderStyle-disabled: dashed;
2366
2387
  --salt-text-background-selected: var(--salt-content-foreground-highlight);
2367
2388
  --salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover);
2368
2389
  --salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active);
@@ -2376,6 +2397,10 @@
2376
2397
  --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
2377
2398
  --salt-text-textDecoration: var(--salt-typography-textDecoration-none);
2378
2399
  --salt-text-textTransform: none;
2400
+ --salt-navigable-cursor-active: pointer;
2401
+ --salt-navigable-cursor-hover: pointer;
2402
+ --salt-navigable-cursor-disabled: not-allowed;
2403
+ --salt-navigable-cursor-edit: text;
2379
2404
  --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);
2380
2405
  --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);
2381
2406
  --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);
@@ -2385,13 +2410,21 @@
2385
2410
  --salt-navigable-tertiary-background: var(--salt-palette-navigate-tertiary-background);
2386
2411
  --salt-navigable-tertiary-background-hover: var(--salt-palette-navigate-tertiary-background-hover);
2387
2412
  --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
2413
+ --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
2388
2414
  --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
2389
- --salt-navigable-background-hover: var(--salt-palette-navigate-background-hover);
2390
2415
  --salt-navigable-textDecoration: var(--salt-typography-textDecoration-underline);
2391
2416
  --salt-navigable-textDecoration-hover: var(--salt-typography-textDecoration-none);
2392
2417
  --salt-navigable-textDecoration-selected: var(--salt-typography-textDecoration-underline);
2418
+ --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
2419
+ --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
2420
+ --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
2421
+ --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
2393
2422
  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
2394
2423
  --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
2424
+ --salt-track-borderStyle: solid;
2425
+ --salt-track-borderStyle-active: solid;
2426
+ --salt-track-borderStyle-complete: solid;
2427
+ --salt-track-borderStyle-incomplete: dotted;
2395
2428
  --salt-track-borderWidth: 2px;
2396
2429
  --salt-track-borderWidth-active: 2px;
2397
2430
  --salt-track-borderWidth-complete: 2px;
@@ -2400,6 +2433,8 @@
2400
2433
  --salt-track-textAlign: center;
2401
2434
  --salt-track-background: var(--salt-palette-track-background);
2402
2435
  --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
2436
+ --salt-track-borderColor: var(--salt-palette-neutral-border);
2437
+ --salt-track-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
2403
2438
  --salt-taggable-cursor-hover: pointer;
2404
2439
  --salt-taggable-cursor-active: pointer;
2405
2440
  --salt-taggable-cursor-disabled: not-allowed;
@@ -2579,6 +2614,12 @@
2579
2614
  --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
2580
2615
  --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
2581
2616
  --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
2617
+ --salt-color-black-60a: rgba(var(--salt-color-black-rgb), 0.6);
2618
+ --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
2619
+ --salt-color-black-90a: rgba(var(--salt-color-black-rgb), 0.9);
2620
+ --salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
2621
+ --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
2622
+ --salt-color-white-90a: rgba(var(--salt-color-white-rgb), 0.9);
2582
2623
  }
2583
2624
  .salt-theme[data-mode=light] {
2584
2625
  --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
@@ -2614,6 +2655,9 @@
2614
2655
  --salt-size-sharktooth-height: 5px;
2615
2656
  --salt-size-sharktooth-width: 10px;
2616
2657
  --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
2658
+ --salt-size-border: 1px;
2659
+ --salt-size-bar-small: 2px;
2660
+ --salt-size-border-strong: 2px;
2617
2661
  --salt-zIndex-docked: 1050;
2618
2662
  }
2619
2663
  .salt-density-high {
@@ -2663,11 +2707,11 @@
2663
2707
  --salt-palette-opacity-primary-border: var(--salt-opacity-45);
2664
2708
  --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
2665
2709
  --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
2666
- --salt-palette-alpha: var(--salt-palette-alpha-contrast-low);
2667
- --salt-palette-alpha-strong: var(--salt-palette-alpha-contrast-mediumLow);
2668
- --salt-palette-alpha-weak: var(--salt-palette-alpha-contrast-lower);
2669
- --salt-palette-alpha-weaker: var(--salt-palette-alpha-contrast-lowest);
2670
- --salt-palette-alpha-backdrop: var(--salt-palette-alpha-high);
2710
+ --salt-palette-alpha: var(--salt-palette-alpha-contrast-medium);
2711
+ --salt-palette-alpha-strong: var(--salt-palette-alpha-contrast-mediumHigh);
2712
+ --salt-palette-alpha-weak: var(--salt-palette-alpha-contrast-mediumLow);
2713
+ --salt-palette-alpha-weaker: var(--salt-palette-alpha-contrast-lower);
2714
+ --salt-palette-alpha-backdrop: var(--salt-palette-alpha-higher);
2671
2715
  }
2672
2716
  .salt-theme[data-mode=light] {
2673
2717
  --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
@@ -2679,6 +2723,7 @@
2679
2723
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
2680
2724
  --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
2681
2725
  --salt-palette-interact-background: transparent;
2726
+ --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
2682
2727
  --salt-palette-interact-background-disabled: transparent;
2683
2728
  --salt-palette-interact-border-none: transparent;
2684
2729
  --salt-palette-interact-secondary-background: transparent;
@@ -2754,6 +2799,7 @@
2754
2799
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
2755
2800
  --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
2756
2801
  --salt-palette-interact-background: transparent;
2802
+ --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
2757
2803
  --salt-palette-interact-background-disabled: transparent;
2758
2804
  --salt-palette-interact-border-none: transparent;
2759
2805
  --salt-palette-interact-secondary-background: transparent;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "1.29.0",
3
+ "version": "1.31.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",