@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.
Files changed (4) hide show
  1. package/css/theme-next.css +89 -31
  2. package/css/theme.css +180 -134
  3. package/index.css +180 -134
  4. package/package.json +1 -1
package/css/theme.css CHANGED
@@ -1,23 +1,23 @@
1
1
  /* css/foundations/alpha.css */
2
2
  .salt-theme {
3
+ --salt-color-white-5a: rgba(var(--salt-color-white-rgb), 0.05);
3
4
  --salt-color-white-10a: rgba(var(--salt-color-white-rgb), 0.1);
5
+ --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
4
6
  --salt-color-white-20a: rgba(var(--salt-color-white-rgb), 0.2);
5
7
  --salt-color-white-30a: rgba(var(--salt-color-white-rgb), 0.3);
6
8
  --salt-color-white-40a: rgba(var(--salt-color-white-rgb), 0.4);
7
9
  --salt-color-white-50a: rgba(var(--salt-color-white-rgb), 0.5);
8
- --salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
9
- --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
10
+ --salt-color-white-65a: rgba(var(--salt-color-white-rgb), 0.65);
10
11
  --salt-color-white-80a: rgba(var(--salt-color-white-rgb), 0.8);
11
- --salt-color-white-90a: rgba(var(--salt-color-white-rgb), 0.9);
12
+ --salt-color-black-5a: rgba(var(--salt-color-black-rgb), 0.05);
12
13
  --salt-color-black-10a: rgba(var(--salt-color-black-rgb), 0.1);
14
+ --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
13
15
  --salt-color-black-20a: rgba(var(--salt-color-black-rgb), 0.2);
14
16
  --salt-color-black-30a: rgba(var(--salt-color-black-rgb), 0.3);
15
17
  --salt-color-black-40a: rgba(var(--salt-color-black-rgb), 0.4);
16
18
  --salt-color-black-50a: rgba(var(--salt-color-black-rgb), 0.5);
17
- --salt-color-black-60a: rgba(var(--salt-color-black-rgb), 0.6);
18
- --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
19
+ --salt-color-black-65a: rgba(var(--salt-color-black-rgb), 0.65);
19
20
  --salt-color-black-80a: rgba(var(--salt-color-black-rgb), 0.8);
20
- --salt-color-black-90a: rgba(var(--salt-color-black-rgb), 0.9);
21
21
  --salt-color-blue-30-40a: rgba(var(--salt-color-blue-30-rgb), 0.4);
22
22
  --salt-color-blue-100-40a: rgba(var(--salt-color-blue-100-rgb), 0.4);
23
23
  --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
@@ -195,6 +195,13 @@
195
195
  }
196
196
  }
197
197
 
198
+ /* css/foundations/borderStyle.css */
199
+ .salt-theme {
200
+ --salt-borderStyle-solid: solid;
201
+ --salt-borderStyle-dashed: dashed;
202
+ --salt-borderStyle-dotted: dotted;
203
+ }
204
+
198
205
  /* css/foundations/color.css */
199
206
  .salt-theme {
200
207
  --salt-color-white-rgb:
@@ -904,6 +911,20 @@
904
911
  --salt-color-forest-900: rgb(0, 51, 31);
905
912
  }
906
913
 
914
+ /* css/foundations/cursor.css */
915
+ .salt-theme {
916
+ --salt-cursor-active: pointer;
917
+ --salt-cursor-disabled: not-allowed;
918
+ --salt-cursor-drag-ew: ew-resize;
919
+ --salt-cursor-drag-ns: ns-resize;
920
+ --salt-cursor-grab: grab;
921
+ --salt-cursor-grab-active: grabbing;
922
+ --salt-cursor-hover: pointer;
923
+ --salt-cursor-pending: progress;
924
+ --salt-cursor-readonly: text;
925
+ --salt-cursor-text: text;
926
+ }
927
+
907
928
  /* css/foundations/curve.css */
908
929
  .salt-density-high {
909
930
  --salt-curve-0: 0;
@@ -978,49 +999,51 @@
978
999
  --salt-size-adornment: 6px;
979
1000
  --salt-size-bar: 2px;
980
1001
  --salt-size-base: 20px;
981
- --salt-size-border: 1px;
982
1002
  --salt-size-icon: 10px;
983
1003
  --salt-size-indicator: 2px;
984
1004
  --salt-size-selectable: 12px;
985
1005
  --salt-size-bar-strong: 4px;
986
- --salt-size-bar-small: 2px;
987
- --salt-size-border-strong: 2px;
988
1006
  }
989
1007
  .salt-density-medium {
990
1008
  --salt-size-adornment: 8px;
991
1009
  --salt-size-bar: 4px;
992
1010
  --salt-size-base: 28px;
993
- --salt-size-border: 1px;
994
1011
  --salt-size-icon: 12px;
995
1012
  --salt-size-indicator: 3px;
996
1013
  --salt-size-selectable: 14px;
997
1014
  --salt-size-bar-strong: 8px;
998
- --salt-size-bar-small: 2px;
999
- --salt-size-border-strong: 2px;
1000
1015
  }
1001
1016
  .salt-density-low {
1002
1017
  --salt-size-adornment: 10px;
1003
1018
  --salt-size-bar: 6px;
1004
1019
  --salt-size-base: 36px;
1005
- --salt-size-border: 1px;
1006
1020
  --salt-size-icon: 14px;
1007
1021
  --salt-size-indicator: 4px;
1008
1022
  --salt-size-selectable: 16px;
1009
1023
  --salt-size-bar-strong: 12px;
1010
- --salt-size-bar-small: 2px;
1011
- --salt-size-border-strong: 2px;
1012
1024
  }
1013
1025
  .salt-density-touch {
1014
1026
  --salt-size-adornment: 12px;
1015
1027
  --salt-size-bar: 8px;
1016
1028
  --salt-size-base: 44px;
1017
- --salt-size-border: 1px;
1018
1029
  --salt-size-icon: 16px;
1019
1030
  --salt-size-indicator: 5px;
1020
1031
  --salt-size-selectable: 18px;
1021
1032
  --salt-size-bar-strong: 16px;
1022
- --salt-size-bar-small: 2px;
1023
- --salt-size-border-strong: 2px;
1033
+ }
1034
+ .salt-density-touch,
1035
+ .salt-density-low,
1036
+ .salt-density-medium,
1037
+ .salt-density-high {
1038
+ --salt-size-fixed-100: 1px;
1039
+ --salt-size-fixed-200: 2px;
1040
+ --salt-size-fixed-300: 3px;
1041
+ --salt-size-fixed-400: 4px;
1042
+ --salt-size-fixed-500: 5px;
1043
+ --salt-size-fixed-600: 6px;
1044
+ --salt-size-fixed-700: 7px;
1045
+ --salt-size-fixed-800: 8px;
1046
+ --salt-size-fixed-900: 9px;
1024
1047
  }
1025
1048
 
1026
1049
  /* css/foundations/spacing.css */
@@ -1060,6 +1083,15 @@
1060
1083
  --salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
1061
1084
  --salt-spacing-900: calc(9 * var(--salt-spacing-100));
1062
1085
  --salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
1086
+ --salt-spacing-fixed-100: 1px;
1087
+ --salt-spacing-fixed-200: 2px;
1088
+ --salt-spacing-fixed-300: 3px;
1089
+ --salt-spacing-fixed-400: 4px;
1090
+ --salt-spacing-fixed-500: 5px;
1091
+ --salt-spacing-fixed-600: 6px;
1092
+ --salt-spacing-fixed-700: 7px;
1093
+ --salt-spacing-fixed-800: 8px;
1094
+ --salt-spacing-fixed-900: 9px;
1063
1095
  }
1064
1096
 
1065
1097
  /* css/foundations/typography.css */
@@ -1095,45 +1127,45 @@
1095
1127
 
1096
1128
  /* css/palette/alpha.css */
1097
1129
  .salt-theme[data-mode=light] {
1098
- --salt-palette-alpha-highest: var(--salt-color-white-90a);
1099
- --salt-palette-alpha-higher: var(--salt-color-white-80a);
1100
- --salt-palette-alpha-high: var(--salt-color-white-70a);
1101
- --salt-palette-alpha-mediumHigh: var(--salt-color-white-60a);
1102
- --salt-palette-alpha-medium: var(--salt-color-white-50a);
1103
- --salt-palette-alpha-mediumLow: var(--salt-color-white-40a);
1104
- --salt-palette-alpha-low: var(--salt-color-white-30a);
1105
- --salt-palette-alpha-lower: var(--salt-color-white-20a);
1106
- --salt-palette-alpha-lowest: var(--salt-color-white-10a);
1107
- --salt-palette-alpha-contrast-highest: var(--salt-color-black-90a);
1108
- --salt-palette-alpha-contrast-higher: var(--salt-color-black-80a);
1109
- --salt-palette-alpha-contrast-high: var(--salt-color-black-70a);
1110
- --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-black-60a);
1111
- --salt-palette-alpha-contrast-medium: var(--salt-color-black-50a);
1112
- --salt-palette-alpha-contrast-mediumLow: var(--salt-color-black-40a);
1113
- --salt-palette-alpha-contrast-low: var(--salt-color-black-30a);
1114
- --salt-palette-alpha-contrast-lower: var(--salt-color-black-20a);
1115
- --salt-palette-alpha-contrast-lowest: var(--salt-color-black-10a);
1130
+ --salt-palette-alpha-highest: var(--salt-color-white-80a);
1131
+ --salt-palette-alpha-higher: var(--salt-color-white-65a);
1132
+ --salt-palette-alpha-high: var(--salt-color-white-50a);
1133
+ --salt-palette-alpha-mediumHigh: var(--salt-color-white-40a);
1134
+ --salt-palette-alpha-medium: var(--salt-color-white-30a);
1135
+ --salt-palette-alpha-mediumLow: var(--salt-color-white-20a);
1136
+ --salt-palette-alpha-low: var(--salt-color-white-15a);
1137
+ --salt-palette-alpha-lower: var(--salt-color-white-10a);
1138
+ --salt-palette-alpha-lowest: var(--salt-color-white-5a);
1139
+ --salt-palette-alpha-contrast-highest: var(--salt-color-black-80a);
1140
+ --salt-palette-alpha-contrast-higher: var(--salt-color-black-65a);
1141
+ --salt-palette-alpha-contrast-high: var(--salt-color-black-50a);
1142
+ --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-black-40a);
1143
+ --salt-palette-alpha-contrast-medium: var(--salt-color-black-30a);
1144
+ --salt-palette-alpha-contrast-mediumLow: var(--salt-color-black-20a);
1145
+ --salt-palette-alpha-contrast-low: var(--salt-color-black-15a);
1146
+ --salt-palette-alpha-contrast-lower: var(--salt-color-black-10a);
1147
+ --salt-palette-alpha-contrast-lowest: var(--salt-color-black-5a);
1116
1148
  --salt-palette-alpha-none: transparent;
1117
1149
  }
1118
1150
  .salt-theme[data-mode=dark] {
1119
- --salt-palette-alpha-highest: var(--salt-color-black-90a);
1120
- --salt-palette-alpha-higher: var(--salt-color-black-80a);
1121
- --salt-palette-alpha-high: var(--salt-color-black-70a);
1122
- --salt-palette-alpha-mediumHigh: var(--salt-color-black-60a);
1123
- --salt-palette-alpha-medium: var(--salt-color-black-50a);
1124
- --salt-palette-alpha-mediumLow: var(--salt-color-black-40a);
1125
- --salt-palette-alpha-low: var(--salt-color-black-30a);
1126
- --salt-palette-alpha-lower: var(--salt-color-black-20a);
1127
- --salt-palette-alpha-lowest: var(--salt-color-black-10a);
1128
- --salt-palette-alpha-contrast-highest: var(--salt-color-white-90a);
1129
- --salt-palette-alpha-contrast-higher: var(--salt-color-white-80a);
1130
- --salt-palette-alpha-contrast-high: var(--salt-color-white-70a);
1131
- --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-white-60a);
1132
- --salt-palette-alpha-contrast-medium: var(--salt-color-white-50a);
1133
- --salt-palette-alpha-contrast-mediumLow: var(--salt-color-white-40a);
1134
- --salt-palette-alpha-contrast-low: var(--salt-color-white-30a);
1135
- --salt-palette-alpha-contrast-lower: var(--salt-color-white-20a);
1136
- --salt-palette-alpha-contrast-lowest: var(--salt-color-white-10a);
1151
+ --salt-palette-alpha-highest: var(--salt-color-black-80a);
1152
+ --salt-palette-alpha-higher: var(--salt-color-black-65a);
1153
+ --salt-palette-alpha-high: var(--salt-color-black-50a);
1154
+ --salt-palette-alpha-mediumHigh: var(--salt-color-black-40a);
1155
+ --salt-palette-alpha-medium: var(--salt-color-black-30a);
1156
+ --salt-palette-alpha-mediumLow: var(--salt-color-black-20a);
1157
+ --salt-palette-alpha-low: var(--salt-color-black-15a);
1158
+ --salt-palette-alpha-lower: var(--salt-color-black-10a);
1159
+ --salt-palette-alpha-lowest: var(--salt-color-black-5a);
1160
+ --salt-palette-alpha-contrast-highest: var(--salt-color-white-80a);
1161
+ --salt-palette-alpha-contrast-higher: var(--salt-color-white-65a);
1162
+ --salt-palette-alpha-contrast-high: var(--salt-color-white-50a);
1163
+ --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-white-40a);
1164
+ --salt-palette-alpha-contrast-medium: var(--salt-color-white-30a);
1165
+ --salt-palette-alpha-contrast-mediumLow: var(--salt-color-white-20a);
1166
+ --salt-palette-alpha-contrast-low: var(--salt-color-white-15a);
1167
+ --salt-palette-alpha-contrast-lower: var(--salt-color-white-10a);
1168
+ --salt-palette-alpha-contrast-lowest: var(--salt-color-white-5a);
1137
1169
  --salt-palette-alpha-none: transparent;
1138
1170
  }
1139
1171
 
@@ -1325,7 +1357,6 @@
1325
1357
 
1326
1358
  /* css/palette/interact.css */
1327
1359
  .salt-theme[data-mode=light] {
1328
- --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
1329
1360
  --salt-palette-interact-background-hover: var(--salt-color-blue-10);
1330
1361
  --salt-palette-interact-background-active: var(--salt-color-blue-30);
1331
1362
  --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-40a);
@@ -1366,7 +1397,6 @@
1366
1397
  }
1367
1398
  .salt-theme[data-mode=dark] {
1368
1399
  --salt-palette-interact-background-active: var(--salt-color-blue-700);
1369
- --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
1370
1400
  --salt-palette-interact-background-hover: var(--salt-color-blue-800);
1371
1401
  --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-700-40a);
1372
1402
  --salt-palette-interact-border: var(--salt-color-gray-90);
@@ -1577,9 +1607,6 @@
1577
1607
 
1578
1608
  /* css/characteristics/actionable.css */
1579
1609
  .salt-theme {
1580
- --salt-actionable-cursor-hover: pointer;
1581
- --salt-actionable-cursor-active: pointer;
1582
- --salt-actionable-cursor-disabled: not-allowed;
1583
1610
  --salt-actionable-accented-bold-background-active: var(--salt-palette-interact-cta-background-active);
1584
1611
  --salt-actionable-accented-bold-background-disabled: var(--salt-palette-interact-cta-background-disabled);
1585
1612
  --salt-actionable-accented-bold-background-hover: var(--salt-palette-interact-cta-background-hover);
@@ -1868,7 +1895,6 @@
1868
1895
 
1869
1896
  /* css/characteristics/container.css */
1870
1897
  .salt-theme {
1871
- --salt-container-borderStyle: solid;
1872
1898
  --salt-container-primary-background: var(--salt-palette-neutral-primary-background);
1873
1899
  --salt-container-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
1874
1900
  --salt-container-primary-borderColor: var(--salt-palette-neutral-border);
@@ -1881,42 +1907,18 @@
1881
1907
  --salt-container-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
1882
1908
  --salt-container-tertiary-borderColor: var(--salt-palette-neutral-border);
1883
1909
  --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
1884
- --salt-container-ghost-background: var(--salt-palette-alpha-low);
1885
- --salt-container-ghost-borderColor: var(--salt-palette-alpha-contrast-low);
1886
- }
1887
-
1888
- /* css/characteristics/draggable.css */
1889
- .salt-theme {
1890
- --salt-draggable-horizontal-cursor-hover: row-resize;
1891
- --salt-draggable-horizontal-cursor-active: row-resize;
1892
- --salt-draggable-vertical-cursor-hover: col-resize;
1893
- --salt-draggable-vertical-cursor-active: col-resize;
1894
- --salt-draggable-grab-cursor-hover: grab;
1895
- --salt-draggable-grab-cursor-active: grabbing;
1910
+ --salt-container-ghost-background: var(--salt-palette-alpha-medium);
1911
+ --salt-container-ghost-borderColor: var(--salt-palette-alpha-contrast-medium);
1896
1912
  }
1897
1913
 
1898
1914
  /* css/characteristics/target.css */
1899
1915
  .salt-theme {
1900
1916
  --salt-target-background-hover: var(--salt-palette-interact-background-hover);
1901
1917
  --salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);
1902
- --salt-target-borderStyle: dashed;
1903
- --salt-target-borderStyle-hover: solid;
1904
- --salt-target-borderStyle-disabled: dashed;
1905
- --salt-target-cursor-disabled: not-allowed;
1906
1918
  }
1907
1919
 
1908
1920
  /* css/characteristics/editable.css */
1909
1921
  .salt-theme {
1910
- --salt-editable-cursor-hover: text;
1911
- --salt-editable-cursor-active: text;
1912
- --salt-editable-cursor-disabled: not-allowed;
1913
- --salt-editable-cursor-readonly: text;
1914
- --salt-editable-borderStyle: solid;
1915
- --salt-editable-borderStyle-hover: solid;
1916
- --salt-editable-borderStyle-active: solid;
1917
- --salt-editable-borderStyle-disabled: solid;
1918
- --salt-editable-borderStyle-readonly: solid;
1919
- --salt-editable-borderWidth-active: 2px;
1920
1922
  --salt-editable-borderColor: var(--salt-palette-interact-border);
1921
1923
  --salt-editable-borderColor-active: var(--salt-palette-interact-border-active);
1922
1924
  --salt-editable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
@@ -1938,8 +1940,8 @@
1938
1940
  /* css/characteristics/focused.css */
1939
1941
  .salt-theme {
1940
1942
  --salt-focused-outlineColor: var(--salt-palette-interact-outline);
1941
- --salt-focused-outlineStyle: dotted;
1942
- --salt-focused-outlineWidth: 2px;
1943
+ --salt-focused-outlineStyle: var(--salt-borderStyle-dotted);
1944
+ --salt-focused-outlineWidth: var(--salt-size-fixed-200);
1943
1945
  --salt-focused-outlineInset: 0;
1944
1946
  --salt-focused-outlineOffset: 0;
1945
1947
  --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
@@ -1958,16 +1960,11 @@
1958
1960
 
1959
1961
  /* css/characteristics/navigable.css */
1960
1962
  .salt-theme {
1961
- --salt-navigable-cursor-active: pointer;
1962
- --salt-navigable-cursor-hover: pointer;
1963
- --salt-navigable-cursor-disabled: not-allowed;
1964
- --salt-navigable-cursor-edit: text;
1965
- --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
1966
- --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
1967
- --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
1968
- --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
1969
1963
  --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
1970
- --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
1964
+ --salt-navigable-accent-indicator-active: var(--salt-palette-navigate-indicator-active);
1965
+ --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
1966
+ --salt-navigable-accent-background-active: var(--salt-palette-alpha-none);
1967
+ --salt-navigable-accent-borderColor-active: var(--salt-palette-interact-border-active);
1971
1968
  }
1972
1969
 
1973
1970
  /* css/characteristics/overlayable.css */
@@ -1979,22 +1976,13 @@
1979
1976
  --salt-overlayable-shadow-popout: var(--salt-shadow-400);
1980
1977
  --salt-overlayable-shadow-drag: var(--salt-shadow-400);
1981
1978
  --salt-overlayable-shadow-modal: var(--salt-shadow-500);
1982
- --salt-overlayable-background: var(--salt-palette-alpha-high);
1983
- --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-low);
1984
- --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-lower);
1979
+ --salt-overlayable-background: var(--salt-palette-alpha-higher);
1980
+ --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-medium);
1981
+ --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-mediumLow);
1985
1982
  }
1986
1983
 
1987
1984
  /* css/characteristics/selectable.css */
1988
1985
  .salt-theme {
1989
- --salt-selectable-cursor-hover: pointer;
1990
- --salt-selectable-cursor-selected: pointer;
1991
- --salt-selectable-cursor-blurSelected: pointer;
1992
- --salt-selectable-cursor-disabled: not-allowed;
1993
- --salt-selectable-cursor-readonly: not-allowed;
1994
- --salt-selectable-borderStyle: solid;
1995
- --salt-selectable-borderStyle-hover: solid;
1996
- --salt-selectable-borderStyle-selected: solid;
1997
- --salt-selectable-borderStyle-blurSelected: solid;
1998
1986
  --salt-selectable-borderColor: var(--salt-palette-interact-border);
1999
1987
  --salt-selectable-borderColor-hover: var(--salt-palette-interact-border-hover);
2000
1988
  --salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
@@ -2009,30 +1997,35 @@
2009
1997
  --salt-selectable-background: var(--salt-palette-alpha-none);
2010
1998
  --salt-selectable-background-hover: var(--salt-palette-interact-background-hover);
2011
1999
  --salt-selectable-background-selected: var(--salt-palette-interact-background-active);
2012
- --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
2013
2000
  --salt-selectable-background-disabled: var(--salt-palette-alpha-none);
2014
2001
  --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
2015
2002
  }
2016
2003
 
2004
+ /* css/characteristics/sentiment.css */
2005
+ .salt-theme {
2006
+ --salt-sentiment-negative-foreground-informative: var(--salt-palette-negative-foreground);
2007
+ --salt-sentiment-positive-foreground-informative: var(--salt-palette-positive-foreground);
2008
+ --salt-sentiment-negative-foreground-decorative: var(--salt-palette-negative-foreground);
2009
+ --salt-sentiment-positive-foreground-decorative: var(--salt-palette-positive-foreground);
2010
+ --salt-sentiment-neutral-track: var(--salt-palette-neutral-border);
2011
+ --salt-sentiment-neutral-track-disabled: var(--salt-palette-neutral-border-disabled);
2012
+ }
2013
+
2017
2014
  /* css/characteristics/separable.css */
2018
2015
  .salt-theme {
2019
- --salt-separable-borderStyle: solid;
2020
- --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumLow);
2021
- --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-low);
2022
- --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-contrast-lower);
2016
+ --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumHigh);
2017
+ --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-medium);
2018
+ --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-contrast-mediumLow);
2023
2019
  --salt-separable-foreground: var(--salt-palette-neutral-primary-foreground);
2024
2020
  --salt-separable-foreground-hover: var(--salt-palette-neutral-primary-foreground);
2025
2021
  --salt-separable-foreground-active: var(--salt-palette-interact-cta-foreground);
2026
2022
  --salt-separable-background: var(--salt-palette-alpha-none);
2027
- --salt-separable-background-hover: var(--salt-palette-alpha-weak);
2023
+ --salt-separable-background-hover: var(--salt-palette-alpha-contrast-mediumLow);
2028
2024
  --salt-separable-background-active: var(--salt-palette-accent);
2029
2025
  }
2030
2026
 
2031
2027
  /* css/characteristics/status.css */
2032
2028
  .salt-theme {
2033
- --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
2034
- --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
2035
- --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
2036
2029
  --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
2037
2030
  --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
2038
2031
  --salt-status-warning-foreground-decorative: var(--salt-palette-warning-foreground-decorative);
@@ -2233,25 +2226,26 @@
2233
2226
  --salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
2234
2227
  }
2235
2228
 
2236
- /* css/characteristics/track.css */
2237
- .salt-theme {
2238
- --salt-track-borderStyle: solid;
2239
- --salt-track-borderStyle-active: solid;
2240
- --salt-track-borderStyle-complete: solid;
2241
- --salt-track-borderStyle-incomplete: dotted;
2242
- --salt-track-borderColor: var(--salt-palette-neutral-border);
2243
- --salt-track-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
2244
- }
2245
-
2246
2229
  /* css/deprecated/characteristics.css */
2247
2230
  .salt-theme {
2231
+ --salt-container-borderStyle: solid;
2248
2232
  --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
2249
2233
  --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
2234
+ --salt-editable-borderStyle: solid;
2235
+ --salt-editable-borderStyle-hover: solid;
2236
+ --salt-editable-borderStyle-active: solid;
2237
+ --salt-editable-borderStyle-disabled: solid;
2238
+ --salt-editable-borderStyle-readonly: solid;
2239
+ --salt-editable-cursor-hover: text;
2240
+ --salt-editable-cursor-active: text;
2241
+ --salt-editable-cursor-disabled: not-allowed;
2242
+ --salt-editable-cursor-readonly: text;
2250
2243
  --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
2251
2244
  --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
2252
2245
  --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
2253
2246
  --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
2254
2247
  --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
2248
+ --salt-editable-borderWidth-active: 2px;
2255
2249
  --salt-measured-borderStyle: solid;
2256
2250
  --salt-measured-borderStyle-active: solid;
2257
2251
  --salt-measured-borderStyle-complete: solid;
@@ -2277,8 +2271,18 @@
2277
2271
  --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
2278
2272
  --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
2279
2273
  --salt-overlayable-rangeSelection: var(--salt-overlayable-background-rangeSelection);
2274
+ --salt-selectable-borderStyle: solid;
2275
+ --salt-selectable-borderStyle-hover: solid;
2276
+ --salt-selectable-borderStyle-selected: solid;
2277
+ --salt-selectable-borderStyle-blurSelected: solid;
2278
+ --salt-selectable-cursor-hover: pointer;
2279
+ --salt-selectable-cursor-selected: pointer;
2280
+ --salt-selectable-cursor-blurSelected: pointer;
2281
+ --salt-selectable-cursor-disabled: not-allowed;
2282
+ --salt-selectable-cursor-readonly: not-allowed;
2280
2283
  --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
2281
2284
  --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
2285
+ --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
2282
2286
  --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
2283
2287
  --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
2284
2288
  --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
@@ -2309,6 +2313,9 @@
2309
2313
  --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
2310
2314
  --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
2311
2315
  --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
2316
+ --salt-separable-borderStyle: solid;
2317
+ --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
2318
+ --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
2312
2319
  --salt-status-info-background-emphasize: var(--salt-status-info-background);
2313
2320
  --salt-status-success-background-emphasize: var(--salt-status-success-background);
2314
2321
  --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
@@ -2317,6 +2324,7 @@
2317
2324
  --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
2318
2325
  --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
2319
2326
  --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
2327
+ --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
2320
2328
  --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
2321
2329
  --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
2322
2330
  --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
@@ -2328,12 +2336,25 @@
2328
2336
  --salt-status-error-foreground: var(--salt-palette-error-foreground);
2329
2337
  --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
2330
2338
  --salt-status-success-foreground: var(--salt-palette-success-foreground);
2339
+ --salt-draggable-horizontal-cursor-hover: row-resize;
2340
+ --salt-draggable-horizontal-cursor-active: row-resize;
2341
+ --salt-draggable-vertical-cursor-hover: col-resize;
2342
+ --salt-draggable-vertical-cursor-active: col-resize;
2343
+ --salt-draggable-grab-cursor-hover: grab;
2344
+ --salt-draggable-grab-cursor-active: grabbing;
2345
+ --salt-actionable-cursor-hover: pointer;
2346
+ --salt-actionable-cursor-active: pointer;
2347
+ --salt-actionable-cursor-disabled: not-allowed;
2331
2348
  --salt-actionable-letterSpacing: 0.6px;
2332
2349
  --salt-actionable-textTransform: uppercase;
2333
2350
  --salt-actionable-textAlign: center;
2334
2351
  --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
2335
2352
  --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
2336
2353
  --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
2354
+ --salt-target-cursor-disabled: not-allowed;
2355
+ --salt-target-borderStyle: dashed;
2356
+ --salt-target-borderStyle-hover: solid;
2357
+ --salt-target-borderStyle-disabled: dashed;
2337
2358
  --salt-text-background-selected: var(--salt-content-foreground-highlight);
2338
2359
  --salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover);
2339
2360
  --salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active);
@@ -2347,6 +2368,10 @@
2347
2368
  --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
2348
2369
  --salt-text-textDecoration: var(--salt-typography-textDecoration-none);
2349
2370
  --salt-text-textTransform: none;
2371
+ --salt-navigable-cursor-active: pointer;
2372
+ --salt-navigable-cursor-hover: pointer;
2373
+ --salt-navigable-cursor-disabled: not-allowed;
2374
+ --salt-navigable-cursor-edit: text;
2350
2375
  --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);
2351
2376
  --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);
2352
2377
  --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);
@@ -2356,13 +2381,21 @@
2356
2381
  --salt-navigable-tertiary-background: var(--salt-palette-navigate-tertiary-background);
2357
2382
  --salt-navigable-tertiary-background-hover: var(--salt-palette-navigate-tertiary-background-hover);
2358
2383
  --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
2384
+ --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
2359
2385
  --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
2360
- --salt-navigable-background-hover: var(--salt-palette-navigate-background-hover);
2361
2386
  --salt-navigable-textDecoration: var(--salt-typography-textDecoration-underline);
2362
2387
  --salt-navigable-textDecoration-hover: var(--salt-typography-textDecoration-none);
2363
2388
  --salt-navigable-textDecoration-selected: var(--salt-typography-textDecoration-underline);
2389
+ --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
2390
+ --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
2391
+ --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
2392
+ --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
2364
2393
  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
2365
2394
  --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
2395
+ --salt-track-borderStyle: solid;
2396
+ --salt-track-borderStyle-active: solid;
2397
+ --salt-track-borderStyle-complete: solid;
2398
+ --salt-track-borderStyle-incomplete: dotted;
2366
2399
  --salt-track-borderWidth: 2px;
2367
2400
  --salt-track-borderWidth-active: 2px;
2368
2401
  --salt-track-borderWidth-complete: 2px;
@@ -2371,6 +2404,8 @@
2371
2404
  --salt-track-textAlign: center;
2372
2405
  --salt-track-background: var(--salt-palette-track-background);
2373
2406
  --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
2407
+ --salt-track-borderColor: var(--salt-palette-neutral-border);
2408
+ --salt-track-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
2374
2409
  --salt-taggable-cursor-hover: pointer;
2375
2410
  --salt-taggable-cursor-active: pointer;
2376
2411
  --salt-taggable-cursor-disabled: not-allowed;
@@ -2550,6 +2585,12 @@
2550
2585
  --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
2551
2586
  --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
2552
2587
  --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
2588
+ --salt-color-black-60a: rgba(var(--salt-color-black-rgb), 0.6);
2589
+ --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
2590
+ --salt-color-black-90a: rgba(var(--salt-color-black-rgb), 0.9);
2591
+ --salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
2592
+ --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
2593
+ --salt-color-white-90a: rgba(var(--salt-color-white-rgb), 0.9);
2553
2594
  }
2554
2595
  .salt-theme[data-mode=light] {
2555
2596
  --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
@@ -2585,6 +2626,9 @@
2585
2626
  --salt-size-sharktooth-height: 5px;
2586
2627
  --salt-size-sharktooth-width: 10px;
2587
2628
  --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
2629
+ --salt-size-border: 1px;
2630
+ --salt-size-bar-small: 2px;
2631
+ --salt-size-border-strong: 2px;
2588
2632
  --salt-zIndex-docked: 1050;
2589
2633
  }
2590
2634
  .salt-density-high {
@@ -2634,11 +2678,11 @@
2634
2678
  --salt-palette-opacity-primary-border: var(--salt-opacity-45);
2635
2679
  --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
2636
2680
  --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
2637
- --salt-palette-alpha: var(--salt-palette-alpha-contrast-low);
2638
- --salt-palette-alpha-strong: var(--salt-palette-alpha-contrast-mediumLow);
2639
- --salt-palette-alpha-weak: var(--salt-palette-alpha-contrast-lower);
2640
- --salt-palette-alpha-weaker: var(--salt-palette-alpha-contrast-lowest);
2641
- --salt-palette-alpha-backdrop: var(--salt-palette-alpha-high);
2681
+ --salt-palette-alpha: var(--salt-palette-alpha-contrast-medium);
2682
+ --salt-palette-alpha-strong: var(--salt-palette-alpha-contrast-mediumHigh);
2683
+ --salt-palette-alpha-weak: var(--salt-palette-alpha-contrast-mediumLow);
2684
+ --salt-palette-alpha-weaker: var(--salt-palette-alpha-contrast-lower);
2685
+ --salt-palette-alpha-backdrop: var(--salt-palette-alpha-higher);
2642
2686
  }
2643
2687
  .salt-theme[data-mode=light] {
2644
2688
  --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
@@ -2650,6 +2694,7 @@
2650
2694
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
2651
2695
  --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
2652
2696
  --salt-palette-interact-background: transparent;
2697
+ --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
2653
2698
  --salt-palette-interact-background-disabled: transparent;
2654
2699
  --salt-palette-interact-border-none: transparent;
2655
2700
  --salt-palette-interact-secondary-background: transparent;
@@ -2725,6 +2770,7 @@
2725
2770
  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
2726
2771
  --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
2727
2772
  --salt-palette-interact-background: transparent;
2773
+ --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
2728
2774
  --salt-palette-interact-background-disabled: transparent;
2729
2775
  --salt-palette-interact-border-none: transparent;
2730
2776
  --salt-palette-interact-secondary-background: transparent;