@salt-ds/theme 0.0.0-snapshot-20240726124318 → 0.0.0-snapshot-20240805085734
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/global.css +3 -10
- package/css/theme-next.css +1026 -31
- package/css/theme.css +2030 -55
- package/index.css +2061 -2
- package/package.json +3 -4
- package/CHANGELOG.md +0 -1308
- package/README.md +0 -1
- package/css/characteristics/accent-next.css +0 -5
- package/css/characteristics/accent.css +0 -5
- package/css/characteristics/actionable-next.css +0 -41
- package/css/characteristics/actionable.css +0 -47
- package/css/characteristics/category-next.css +0 -22
- package/css/characteristics/category.css +0 -141
- package/css/characteristics/container-next.css +0 -16
- package/css/characteristics/container.css +0 -18
- package/css/characteristics/content-next.css +0 -14
- package/css/characteristics/content.css +0 -15
- package/css/characteristics/draggable.css +0 -10
- package/css/characteristics/editable-next.css +0 -19
- package/css/characteristics/editable.css +0 -33
- package/css/characteristics/focused-next.css +0 -3
- package/css/characteristics/focused.css +0 -21
- package/css/characteristics/navigable-next.css +0 -6
- package/css/characteristics/navigable.css +0 -21
- package/css/characteristics/overlayable-next.css +0 -4
- package/css/characteristics/overlayable.css +0 -12
- package/css/characteristics/selectable-next.css +0 -20
- package/css/characteristics/selectable.css +0 -31
- package/css/characteristics/separable-next.css +0 -5
- package/css/characteristics/separable.css +0 -7
- package/css/characteristics/status-next.css +0 -34
- package/css/characteristics/status.css +0 -34
- package/css/characteristics/target-next.css +0 -4
- package/css/characteristics/target.css +0 -10
- package/css/characteristics/text-next.css +0 -56
- package/css/characteristics/text.css +0 -226
- package/css/characteristics/track-next.css +0 -3
- package/css/characteristics/track.css +0 -8
- package/css/deprecated/characteristics.css +0 -186
- package/css/deprecated/fade.css +0 -8
- package/css/deprecated/foundations.css +0 -107
- package/css/deprecated/palette.css +0 -159
- package/css/foundations/alpha-next.css +0 -48
- package/css/foundations/animation.css +0 -155
- package/css/foundations/color-next.css +0 -148
- package/css/foundations/color.css +0 -297
- package/css/foundations/curve-next.css +0 -31
- package/css/foundations/duration.css +0 -6
- package/css/foundations/fade.css +0 -72
- package/css/foundations/opacity.css +0 -9
- package/css/foundations/shadow.css +0 -23
- package/css/foundations/size.css +0 -51
- package/css/foundations/spacing.css +0 -31
- package/css/foundations/typography.css +0 -12
- package/css/foundations/zindex.css +0 -14
- package/css/palette/accent-next.css +0 -63
- package/css/palette/accent.css +0 -11
- package/css/palette/alpha-next.css +0 -19
- package/css/palette/background-next.css +0 -16
- package/css/palette/categorical.css +0 -163
- package/css/palette/corner-next.css +0 -12
- package/css/palette/error.css +0 -17
- package/css/palette/foreground-next.css +0 -22
- package/css/palette/info-next.css +0 -10
- package/css/palette/info.css +0 -15
- package/css/palette/interact.css +0 -91
- package/css/palette/navigate.css +0 -17
- package/css/palette/negative-next.css +0 -10
- package/css/palette/negative.css +0 -7
- package/css/palette/neutral-next.css +0 -34
- package/css/palette/neutral.css +0 -51
- package/css/palette/opacity.css +0 -9
- package/css/palette/positive-next.css +0 -10
- package/css/palette/positive.css +0 -7
- package/css/palette/success.css +0 -17
- package/css/palette/text-next.css +0 -50
- package/css/palette/text.css +0 -24
- package/css/palette/warning-next.css +0 -10
- package/css/palette/warning.css +0 -17
package/CHANGELOG.md
DELETED
|
@@ -1,1308 +0,0 @@
|
|
|
1
|
-
# @salt-ds/theme
|
|
2
|
-
|
|
3
|
-
## 0.0.0-snapshot-20240726124318
|
|
4
|
-
|
|
5
|
-
### Minor Changes
|
|
6
|
-
|
|
7
|
-
- fc66238: Added tertiary variables in theme next theme
|
|
8
|
-
|
|
9
|
-
```
|
|
10
|
-
--salt-container-tertiary-borderColor
|
|
11
|
-
--salt-container-tertiary-borderColor-disabled
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
Added tertiary variables in existing theme
|
|
15
|
-
|
|
16
|
-
```
|
|
17
|
-
--salt-container-tertiary-background
|
|
18
|
-
--salt-container-tertiary-background-disabled
|
|
19
|
-
--salt-container-tertiary-borderColor
|
|
20
|
-
--salt-container-tertiary-borderColor-disabled
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
Added gray 30 and 50 fade background in fade.css
|
|
24
|
-
|
|
25
|
-
```
|
|
26
|
-
--salt-color-gray-30-fade-background
|
|
27
|
-
--salt-color-gray-50-fade-background
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
Un-deprecated tertiary palette variables in characteristics.css and palette.css and added those to neutral.css
|
|
31
|
-
|
|
32
|
-
```
|
|
33
|
-
--salt-palette-neutral-tertiary-background
|
|
34
|
-
--salt-palette-neutral-tertiary-background-disabled
|
|
35
|
-
--salt-palette-neutral-tertiary-border
|
|
36
|
-
--salt-palette-neutral-tertiary-border-disabled
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
### Patch Changes
|
|
40
|
-
|
|
41
|
-
- 82846ca: Update build tooling
|
|
42
|
-
- 3c635db: Fixed `--salt-size-selectable` double defined in deprecated token list
|
|
43
|
-
|
|
44
|
-
## 1.20.0
|
|
45
|
-
|
|
46
|
-
### Minor Changes
|
|
47
|
-
|
|
48
|
-
- fc60301: Added status bold background and content bold foreground tokens
|
|
49
|
-
|
|
50
|
-
```
|
|
51
|
-
--salt-status-info-bold-background
|
|
52
|
-
--salt-status-error-bold-background
|
|
53
|
-
--salt-status-warning-bold-background
|
|
54
|
-
--salt-status-success-bold-background
|
|
55
|
-
|
|
56
|
-
--salt-content-bold-foreground
|
|
57
|
-
--salt-content-bold-foreground-disabled
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
### Patch Changes
|
|
61
|
-
|
|
62
|
-
- baa5aaa: Added `--salt-overlayable-rangeSelection` variable in theme next, pointing to the same underlying value as before.
|
|
63
|
-
|
|
64
|
-
Closes #3517.
|
|
65
|
-
|
|
66
|
-
## 1.19.0
|
|
67
|
-
|
|
68
|
-
### Minor Changes
|
|
69
|
-
|
|
70
|
-
- f89189d: Added theme tokens supporting action font switch.
|
|
71
|
-
|
|
72
|
-
```css
|
|
73
|
-
--salt-text-action-fontFamily: var(--salt-palette-text-fontFamily-action);
|
|
74
|
-
|
|
75
|
-
--salt-palette-text-fontFamily-action: var(
|
|
76
|
-
--salt-typography-fontFamily-openSans
|
|
77
|
-
);
|
|
78
|
-
--salt-palette-text-action-fontWeight: var(
|
|
79
|
-
--salt-typography-fontWeight-semiBold
|
|
80
|
-
);
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
Updated `--salt-text-action-fontWeight` to use `var(--salt-palette-text-action-fontWeight)`.
|
|
84
|
-
|
|
85
|
-
In theme next, palette layer tokens can be switched between Open Sans and Amplitude.
|
|
86
|
-
|
|
87
|
-
Closes #3528.
|
|
88
|
-
|
|
89
|
-
## 1.18.0
|
|
90
|
-
|
|
91
|
-
### Minor Changes
|
|
92
|
-
|
|
93
|
-
- d0b6912: Added display 4 text tokens, which have the same value as display 3.
|
|
94
|
-
|
|
95
|
-
In theme next, display sizes are remapped to reflect larger size than h1.
|
|
96
|
-
|
|
97
|
-
- 87791a1: Updated H1 font weight
|
|
98
|
-
|
|
99
|
-
| H1 | Before | New |
|
|
100
|
-
| ------- | ---------- | --------- |
|
|
101
|
-
| Default | Bold | Semi bold |
|
|
102
|
-
| Small | Medium | Regular |
|
|
103
|
-
| Strong | Extra bold | Bold |
|
|
104
|
-
|
|
105
|
-
Added font weight in palette layer for display, heading, body and notation.
|
|
106
|
-
|
|
107
|
-
```diff
|
|
108
|
-
+ --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
109
|
-
+ --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
110
|
-
+ --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
111
|
-
+ --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
112
|
-
+ --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
113
|
-
+ --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
114
|
-
+ --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular);
|
|
115
|
-
+ --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light);
|
|
116
|
-
+ --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
|
|
117
|
-
+ --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
|
|
118
|
-
+ --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
119
|
-
+ --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
Wired text characteristics font weight to newly added palette tokens.
|
|
123
|
-
|
|
124
|
-
In theme next, when Amplitude is used for heading, font weight will be adjusted accordingly.
|
|
125
|
-
|
|
126
|
-
- 400c730: - Added `--salt-opacity-45: 0.45`.
|
|
127
|
-
- Updated `--salt-palette-opacity-primary-border` from `var(--salt-opacity-40)` to `var(--salt-opacity-45)`.
|
|
128
|
-
- 416b7dd: Updated foundation color palette used in theme next due to color contrast concerns, below colors are impacted.
|
|
129
|
-
|
|
130
|
-
```
|
|
131
|
-
--salt-color-blue-200
|
|
132
|
-
--salt-color-blue-300
|
|
133
|
-
--salt-color-blue-400
|
|
134
|
-
--salt-color-blue-600
|
|
135
|
-
--salt-color-blue-700
|
|
136
|
-
--salt-color-blue-800
|
|
137
|
-
--salt-color-blue-900
|
|
138
|
-
--salt-color-green-200
|
|
139
|
-
--salt-color-green-300
|
|
140
|
-
--salt-color-green-400
|
|
141
|
-
--salt-color-green-600
|
|
142
|
-
--salt-color-green-700
|
|
143
|
-
--salt-color-green-800
|
|
144
|
-
--salt-color-green-900
|
|
145
|
-
--salt-color-teal-200
|
|
146
|
-
--salt-color-teal-300
|
|
147
|
-
--salt-color-teal-400
|
|
148
|
-
--salt-color-teal-600
|
|
149
|
-
--salt-color-teal-700
|
|
150
|
-
--salt-color-teal-800
|
|
151
|
-
--salt-color-teal-900
|
|
152
|
-
--salt-color-orange-200
|
|
153
|
-
--salt-color-orange-300
|
|
154
|
-
--salt-color-orange-400
|
|
155
|
-
--salt-color-orange-500
|
|
156
|
-
--salt-color-orange-600
|
|
157
|
-
--salt-color-orange-700
|
|
158
|
-
--salt-color-orange-800
|
|
159
|
-
--salt-color-red-300
|
|
160
|
-
--salt-color-red-400
|
|
161
|
-
--salt-color-red-600
|
|
162
|
-
--salt-color-red-700
|
|
163
|
-
--salt-color-red-800
|
|
164
|
-
--salt-color-red-900
|
|
165
|
-
--salt-color-purple-200
|
|
166
|
-
--salt-color-purple-300
|
|
167
|
-
--salt-color-purple-400
|
|
168
|
-
--salt-color-purple-600
|
|
169
|
-
--salt-color-purple-700
|
|
170
|
-
--salt-color-purple-800
|
|
171
|
-
--salt-color-purple-900
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
- 081c82b: Added 20 groups of categorical palette and category characteristics tokens, e.g., cat 1 tokens
|
|
175
|
-
|
|
176
|
-
Characteristics
|
|
177
|
-
|
|
178
|
-
- `--salt-category-1-subtle-foreground`
|
|
179
|
-
- `--salt-category-1-subtle-background`
|
|
180
|
-
- `--salt-category-1-subtle-borderColor`
|
|
181
|
-
- `--salt-category-1-bold-background`
|
|
182
|
-
- `--salt-category-1-bold-foreground`
|
|
183
|
-
|
|
184
|
-
Palette
|
|
185
|
-
|
|
186
|
-
- `--salt-palette-categorical-1`
|
|
187
|
-
- `--salt-palette-categorical-1-strong`
|
|
188
|
-
- `--salt-palette-categorical-1-weakest`
|
|
189
|
-
|
|
190
|
-
## 1.17.0
|
|
191
|
-
|
|
192
|
-
### Minor Changes
|
|
193
|
-
|
|
194
|
-
- 2199704e: Added categorical colors. Refer to [color page](https://www.saltdesignsystem.com/salt/foundations/color) for more detail. Closes #2523.
|
|
195
|
-
|
|
196
|
-
### Patch Changes
|
|
197
|
-
|
|
198
|
-
- 353e9171: Updated status tokens for theme next to match latest design
|
|
199
|
-
|
|
200
|
-
## 1.16.0
|
|
201
|
-
|
|
202
|
-
### Minor Changes
|
|
203
|
-
|
|
204
|
-
- 25e38e48: ## Characteristics
|
|
205
|
-
|
|
206
|
-
Added decorative and informative status foreground tokens. This ensures contrast requirements are met for both text and non-text elements.
|
|
207
|
-
|
|
208
|
-
```diff
|
|
209
|
-
+ --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
|
|
210
|
-
+ --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
|
|
211
|
-
+ --salt-status-warning-foreground-decorative: var(--salt-palette-warning-foreground-decorative);
|
|
212
|
-
+ --salt-status-success-foreground-decorative: var(--salt-palette-success-foreground-decorative);
|
|
213
|
-
+
|
|
214
|
-
+ --salt-status-info-foreground-informative: var(--salt-palette-info-foreground-informative);
|
|
215
|
-
+ --salt-status-error-foreground-informative: var(--salt-palette-error-foreground-informative);
|
|
216
|
-
+ --salt-status-warning-foreground-informative: var(--salt-palette-warning-foreground-informative);
|
|
217
|
-
+ --salt-status-success-foreground-informative: var(--salt-palette-success-foreground-informative);
|
|
218
|
-
```
|
|
219
|
-
|
|
220
|
-
Deprecated status foreground tokens.
|
|
221
|
-
|
|
222
|
-
| Name | Replacement |
|
|
223
|
-
| -------------------------------- | ------------------------------------------- |
|
|
224
|
-
| --salt-status-info-foreground | --salt-status-info-foreground-decorative |
|
|
225
|
-
| --salt-status-error-foreground | --salt-status-error-foreground-decorative |
|
|
226
|
-
| --salt-status-warning-foreground | --salt-status-warning-foreground-decorative |
|
|
227
|
-
| --salt-status-success-foreground | --salt-status-success-foreground-decorative |
|
|
228
|
-
|
|
229
|
-
## Palette
|
|
230
|
-
|
|
231
|
-
Added decorative and informative info, error, warning and success foreground tokens.
|
|
232
|
-
|
|
233
|
-
### Light
|
|
234
|
-
|
|
235
|
-
```diff
|
|
236
|
-
+ --salt-palette-info-foreground-decorative: var(--salt-color-blue-500);
|
|
237
|
-
+ --salt-palette-info-foreground-informative: var(--salt-color-blue-600);
|
|
238
|
-
+ --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
|
|
239
|
-
+ --salt-palette-error-foreground-informative: var(--salt-color-red-600);
|
|
240
|
-
+ --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700);
|
|
241
|
-
+ --salt-palette-warning-foreground-informative: var(--salt-color-orange-850);
|
|
242
|
-
+ --salt-palette-success-foreground-decorative: var(--salt-color-green-500);
|
|
243
|
-
+ --salt-palette-success-foreground-informative: var(--salt-color-green-600);
|
|
244
|
-
```
|
|
245
|
-
|
|
246
|
-
### Dark
|
|
247
|
-
|
|
248
|
-
```diff
|
|
249
|
-
+ --salt-palette-info-foreground-decorative: var(--salt-color-blue-100);
|
|
250
|
-
+ --salt-palette-info-foreground-informative: var(--salt-color-blue-200);
|
|
251
|
-
+ --salt-palette-error-foreground-decorative: var(--salt-color-red-400);
|
|
252
|
-
+ --salt-palette-error-foreground-informative: var(--salt-color-red-200);
|
|
253
|
-
+ --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500);
|
|
254
|
-
+ --salt-palette-warning-foreground-informative: var(--salt-color-orange-400);
|
|
255
|
-
+ --salt-palette-success-foreground-decorative: var(--salt-color-green-400);
|
|
256
|
-
+ --salt-palette-success-foreground-informative: var(--salt-color-green-200);
|
|
257
|
-
```
|
|
258
|
-
|
|
259
|
-
Updated info and error border tokens.
|
|
260
|
-
|
|
261
|
-
```diff
|
|
262
|
-
- --salt-palette-info-border: var(--salt-color-blue-500);
|
|
263
|
-
+ --salt-palette-info-border: var(--salt-color-blue-400);
|
|
264
|
-
- --salt-palette-error-border: var(--salt-color-red-500);
|
|
265
|
-
+ --salt-palette-error-border: var(--salt-color-red-400);
|
|
266
|
-
```
|
|
267
|
-
|
|
268
|
-
Deprecated status foreground tokens.
|
|
269
|
-
|
|
270
|
-
| Name | Replacement |
|
|
271
|
-
| --------------------------------- | -------------------------------------------- |
|
|
272
|
-
| --salt-palette-info-foreground | --salt-palette-info-foreground-decorative |
|
|
273
|
-
| --salt-palette-error-foreground | --salt-palette-error-foreground-decorative |
|
|
274
|
-
| --salt-palette-warning-foreground | --salt-palette-warning-foreground-decorative |
|
|
275
|
-
| --salt-palette-success-foreground | --salt-palette-success-foreground-decorative |
|
|
276
|
-
|
|
277
|
-
## Foundations
|
|
278
|
-
|
|
279
|
-
Added `--salt-color-orange-850`:
|
|
280
|
-
|
|
281
|
-
```diff
|
|
282
|
-
+ --salt-color-orange-850: rgb(194, 52, 7);
|
|
283
|
-
```
|
|
284
|
-
|
|
285
|
-
- eaab9d89: Switched to use new color palette in theme next when using `UNSTABLE_SaltProviderNext`.
|
|
286
|
-
|
|
287
|
-
Refer to [documentation](https://storybook.saltdesignsystem.com/?path=/docs/experimental-theme-next--docs) for more information.
|
|
288
|
-
|
|
289
|
-
Closes #3394
|
|
290
|
-
|
|
291
|
-
- 5ed8ed88: Added new `--salt-overlayable-rangeSelection` token, which points to new `--salt-palette-neutral-selection` and resolves to black@15% in light mode and white@15% in dark mode.
|
|
292
|
-
- e1d4aab8: Supports heading font switch when using `UNSTABLE_SaltProviderNext`.
|
|
293
|
-
|
|
294
|
-
Refer to [documentation](https://storybook.saltdesignsystem.com/?path=/docs/experimental-theme-next--docs) for more information.
|
|
295
|
-
|
|
296
|
-
## 1.15.0
|
|
297
|
-
|
|
298
|
-
### Minor Changes
|
|
299
|
-
|
|
300
|
-
- 3fa8b97c: Added new tokens
|
|
301
|
-
|
|
302
|
-
| Tier | Token | Value |
|
|
303
|
-
| ---------- | ---------------------------------------- | --------------------------------------- |
|
|
304
|
-
| Foundation | `--salt-typography-fontFamily-openSans` | "Open Sans" |
|
|
305
|
-
| Foundation | `--salt-typography-fontFamily-ptMono` | "PT Mono" |
|
|
306
|
-
| Palette | `--salt-palette-text-fontFamily` | `--salt-typography-fontFamily-openSans` |
|
|
307
|
-
| Palette | `--salt-palette-text-fontFamily-heading` | `--salt-typography-fontFamily-openSans` |
|
|
308
|
-
| Palette | `--salt-palette-text-fontFamily-code` | `--salt-typography-fontFamily-ptMono` |
|
|
309
|
-
|
|
310
|
-
Updated existing token value mapping to use new tokens
|
|
311
|
-
|
|
312
|
-
```diff
|
|
313
|
-
- --salt-text-fontFamily: var(--salt-typography-fontFamily);
|
|
314
|
-
+ --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
|
|
315
|
-
- --salt-text-notation-fontFamily: var(--salt-typography-fontFamily);
|
|
316
|
-
+ --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
|
|
317
|
-
- --salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
|
|
318
|
-
+ --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
319
|
-
- --salt-text-h2-fontFamily: var(--salt-typography-fontFamily);
|
|
320
|
-
+ --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
321
|
-
- --salt-text-h3-fontFamily: var(--salt-typography-fontFamily);
|
|
322
|
-
+ --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
323
|
-
- --salt-text-h4-fontFamily: var(--salt-typography-fontFamily);
|
|
324
|
-
+ --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
325
|
-
- --salt-text-label-fontFamily: var(--salt-typography-fontFamily);
|
|
326
|
-
+ --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
|
|
327
|
-
- --salt-text-display1-fontFamily: var(--salt-typography-fontFamily);
|
|
328
|
-
+ --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
329
|
-
- --salt-text-display2-fontFamily: var(--salt-typography-fontFamily);
|
|
330
|
-
+ --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
331
|
-
- --salt-text-display3-fontFamily: var(--salt-typography-fontFamily);
|
|
332
|
-
+ --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
|
|
333
|
-
- --salt-text-code-fontFamily: var(--salt-typography-fontFamily-code);
|
|
334
|
-
+ --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
|
|
335
|
-
```
|
|
336
|
-
|
|
337
|
-
Deprecated below tokens, use replacement token instead
|
|
338
|
-
|
|
339
|
-
```
|
|
340
|
-
--salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
|
|
341
|
-
--salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
|
|
342
|
-
```
|
|
343
|
-
|
|
344
|
-
- 3fa8b97c: Updated global theme css font family pointing to text chractertics instead of foundation value
|
|
345
|
-
|
|
346
|
-
```diff
|
|
347
|
-
- font-family: var(--salt-typography-fontFamily);
|
|
348
|
-
+ font-family: var(--salt-text-fontFamily);
|
|
349
|
-
```
|
|
350
|
-
|
|
351
|
-
## 1.14.0
|
|
352
|
-
|
|
353
|
-
### Minor Changes
|
|
354
|
-
|
|
355
|
-
- f6202615: Updated `--salt-size-indicator`.
|
|
356
|
-
|
|
357
|
-
| Density | Before (px) | After (px) |
|
|
358
|
-
| ------- | ----------- | ---------- |
|
|
359
|
-
| High | 1 | 2 |
|
|
360
|
-
| Medium | 2 | 3 |
|
|
361
|
-
| Low | 3 | 4 |
|
|
362
|
-
| Touch | 4 | 5 |
|
|
363
|
-
|
|
364
|
-
## 1.13.1
|
|
365
|
-
|
|
366
|
-
### Patch Changes
|
|
367
|
-
|
|
368
|
-
- 4f925b41: Fix `--salt-navigable-background-hover` referencing deprecated value `--salt-palette-navigate-primary-background-hover`, change to reference correct value `--salt-palette-navigate-background-hover`
|
|
369
|
-
|
|
370
|
-
## 1.13.0
|
|
371
|
-
|
|
372
|
-
### Minor Changes
|
|
373
|
-
|
|
374
|
-
- f27ecfa7: Added `theme-next.css` which includes experimental theme implementation. Refer to [documentation](https://storybook.saltdesignsystem.com/?path=/docs/experimental-theme-next--docs) for more information.
|
|
375
|
-
|
|
376
|
-
## 1.12.1
|
|
377
|
-
|
|
378
|
-
### Patch Changes
|
|
379
|
-
|
|
380
|
-
- 9d23fdce: Removed `box-sizing: border-box` from global.css. This was causing issues in applications that were built using `box-sizing: content-box`.
|
|
381
|
-
|
|
382
|
-
## 1.12.0
|
|
383
|
-
|
|
384
|
-
### Minor Changes
|
|
385
|
-
|
|
386
|
-
- a374c206: Added `--salt-color-gray-50-fade-border`.
|
|
387
|
-
|
|
388
|
-
```diff
|
|
389
|
-
+ --salt-color-gray-50-fade-border: rgba(206, 210, 217, var(--salt-palette-opacity-disabled));
|
|
390
|
-
```
|
|
391
|
-
|
|
392
|
-
Updated the values of `--salt-palette-neutral-primary-border`, `--salt-palette-neutral-primary-border-disabled`, `--salt-palette-neutral-secondary-border` and `--salt-palette-neutral-secondary-border-disabled`.
|
|
393
|
-
|
|
394
|
-
This will affect the border color of Card, InteractableCard, FileDropZone, ToggleButtonGroup, Overlay, CircularProgress, LinearProgress and SteppedTracker.
|
|
395
|
-
|
|
396
|
-
New values in light mode:
|
|
397
|
-
|
|
398
|
-
```diff
|
|
399
|
-
- --salt-palette-neutral-primary-border: var(--salt-color-gray-60);
|
|
400
|
-
- --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-60-fade-border);
|
|
401
|
-
+ --salt-palette-neutral-primary-border: var(--salt-color-gray-50);
|
|
402
|
-
+ --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-50-fade-border);
|
|
403
|
-
```
|
|
404
|
-
|
|
405
|
-
```diff
|
|
406
|
-
- --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
|
|
407
|
-
- --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
408
|
-
+ --salt-palette-neutral-secondary-border: var(--salt-color-gray-50);
|
|
409
|
-
+ --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-50-fade-border);
|
|
410
|
-
```
|
|
411
|
-
|
|
412
|
-
New values in dark mode:
|
|
413
|
-
|
|
414
|
-
```diff
|
|
415
|
-
- --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
|
|
416
|
-
- --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
|
|
417
|
-
+ --salt-palette-neutral-secondary-border: var(--salt-color-gray-300);
|
|
418
|
-
+ --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-300-fade-border);
|
|
419
|
-
```
|
|
420
|
-
|
|
421
|
-
## 1.11.1
|
|
422
|
-
|
|
423
|
-
### Patch Changes
|
|
424
|
-
|
|
425
|
-
- bef0d509: Undeprecated `--salt-track-borderColor`, which was incorrectly deprecated in feb80146.
|
|
426
|
-
|
|
427
|
-
## 1.11.0
|
|
428
|
-
|
|
429
|
-
### Minor Changes
|
|
430
|
-
|
|
431
|
-
- c6db7d56: Added `--salt-color-white-fade-backdrop` token with value `rgba(255, 255, 255, var(--salt-palette-opacity-backdrop))`
|
|
432
|
-
Updated `--salt-color-black-fade-backdrop` token to value `rgba(0, 0, 0, var(--salt-palette-opacity-backdrop))`
|
|
433
|
-
|
|
434
|
-
## 1.10.1
|
|
435
|
-
|
|
436
|
-
### Patch Changes
|
|
437
|
-
|
|
438
|
-
- dbc44243: Add --salt-text-background-selected back as a deprecated token after it was accidentally removed.
|
|
439
|
-
|
|
440
|
-
## 1.10.0
|
|
441
|
-
|
|
442
|
-
### Minor Changes
|
|
443
|
-
|
|
444
|
-
- feb80146: **_Theming and CSS updates_** Although these changes are not considered breaking. For teams customizing theme, the following tokens will be impacted. Update them as per suggestion. Deprecated tokens will be removed in the next major version.
|
|
445
|
-
|
|
446
|
-
### Characteristics
|
|
447
|
-
|
|
448
|
-
- New tokens added to `text` characteristics
|
|
449
|
-
|
|
450
|
-
```diff
|
|
451
|
-
+ --salt-text-notation-fontFamily: var(--salt-typography-fontFamily);
|
|
452
|
-
+ --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
|
|
453
|
-
+ --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
|
|
454
|
-
```
|
|
455
|
-
|
|
456
|
-
- Deprecated tokens in characteristics, use replacement tokens as listed. The change is motivated by several factors including:
|
|
457
|
-
- reduced number of tokens
|
|
458
|
-
- easier theming experience
|
|
459
|
-
- `text.css` updated to `content.css` as tokens are used for more than just texts i.e. icon
|
|
460
|
-
- consolidating tokens into `text.css` to ensure all text-related tokens are within the same file, aside from text colors, they sit within `content.css`
|
|
461
|
-
- tidying tokens: `container` no longer has a `tertiary` variant
|
|
462
|
-
|
|
463
|
-
#### `text-*` to `content`
|
|
464
|
-
|
|
465
|
-
```diff
|
|
466
|
-
- --salt-text-link-foreground-hover
|
|
467
|
-
- --salt-text-link-foreground-active
|
|
468
|
-
- --salt-text-link-foreground-visited
|
|
469
|
-
+ --salt-content-foreground-hover
|
|
470
|
-
+ --salt-content-foreground-active
|
|
471
|
-
+ --salt-content-foreground-visited
|
|
472
|
-
|
|
473
|
-
- --salt-text-primary-foreground
|
|
474
|
-
- --salt-text-primary-foreground-disabled
|
|
475
|
-
- --salt-text-secondary-foreground
|
|
476
|
-
- --salt-text-secondary-foreground-disabled
|
|
477
|
-
+ --salt-content-primary-foreground
|
|
478
|
-
+ --salt-content-primary-foreground-disabled
|
|
479
|
-
+ --salt-content-secondary-foreground
|
|
480
|
-
+ --salt-content-secondary-foreground-disabled
|
|
481
|
-
|
|
482
|
-
- --salt-text-background-selected
|
|
483
|
-
+ --salt-content-foreground-highlight
|
|
484
|
-
```
|
|
485
|
-
|
|
486
|
-
#### `actionable` to `text-action`
|
|
487
|
-
|
|
488
|
-
```diff
|
|
489
|
-
- --salt-actionable-primary-fontWeight
|
|
490
|
-
- --salt-actionable-secondary-fontWeight
|
|
491
|
-
- --salt-actionable-cta-fontWeight
|
|
492
|
-
+ --salt-text-action-fontWeight
|
|
493
|
-
|
|
494
|
-
- --salt-actionable-letterSpacing
|
|
495
|
-
+ --salt-text-action-letterSpacing
|
|
496
|
-
|
|
497
|
-
- --salt-actionable-textTransform
|
|
498
|
-
+ --salt-text-action-textTransform
|
|
499
|
-
|
|
500
|
-
- --salt-actionable-textAlign
|
|
501
|
-
+ --salt-text-action-textAlign
|
|
502
|
-
```
|
|
503
|
-
|
|
504
|
-
#### `selectable` to various others
|
|
505
|
-
|
|
506
|
-
```diff
|
|
507
|
-
|
|
508
|
-
- --salt-selectable-primary-foreground-selected
|
|
509
|
-
+ --salt-actionable-primary-foreground-active
|
|
510
|
-
|
|
511
|
-
- --salt-selectable-primary-foreground-selectedDisabled
|
|
512
|
-
+ --salt-color-white-fade-foreground
|
|
513
|
-
|
|
514
|
-
- --salt-selectable-primary-background
|
|
515
|
-
- --salt-selectable-primary-background-disabled
|
|
516
|
-
- --salt-selectable-primary-background-hover
|
|
517
|
-
- --salt-selectable-primary-background-selected
|
|
518
|
-
- --salt-selectable-primary-background-selectedDisabled
|
|
519
|
-
+ --salt-palette-interact-background
|
|
520
|
-
+ --salt-palette-interact-background-disabled
|
|
521
|
-
+ --salt-palette-interact-primary-background-hover
|
|
522
|
-
+ --salt-palette-interact-primary-background-active
|
|
523
|
-
+ --salt-palette-interact-primary-background-activeDisabled
|
|
524
|
-
|
|
525
|
-
- --salt-selectable-secondary-foreground-hover
|
|
526
|
-
- --salt-selectable-secondary-foreground-selected
|
|
527
|
-
- --salt-selectable-secondary-foreground-selectedDisabled
|
|
528
|
-
+ --salt-palette-interact-secondary-foreground-hover
|
|
529
|
-
+ --salt-palette-interact-secondary-foreground-active
|
|
530
|
-
+ --salt-palette-interact-secondary-foreground-activeDisabled
|
|
531
|
-
|
|
532
|
-
- --salt-selectable-secondary-background
|
|
533
|
-
- --salt-selectable-secondary-background-disabled
|
|
534
|
-
- --salt-selectable-secondary-background-hover
|
|
535
|
-
- --salt-selectable-secondary-background-selected
|
|
536
|
-
- --salt-selectable-secondary-background-selectedDisabled
|
|
537
|
-
+ --salt-palette-interact-background
|
|
538
|
-
+ --salt-palette-interact-background-disabled
|
|
539
|
-
+ --salt-palette-interact-secondary-background-hover
|
|
540
|
-
+ --salt-palette-interact-secondary-background-active
|
|
541
|
-
+ --salt-palette-interact-secondary-background-activeDisabled
|
|
542
|
-
|
|
543
|
-
```
|
|
544
|
-
|
|
545
|
-
#### `track` to various others
|
|
546
|
-
|
|
547
|
-
```diff
|
|
548
|
-
- --salt-track-borderWidth
|
|
549
|
-
- --salt-track-borderWidth-active
|
|
550
|
-
- --salt-track-borderWidth-complete
|
|
551
|
-
- --salt-track-borderWidth-incomplete
|
|
552
|
-
+ --salt-size-border-strong
|
|
553
|
-
```
|
|
554
|
-
|
|
555
|
-
#### Miscellaneous
|
|
556
|
-
|
|
557
|
-
```diff
|
|
558
|
-
- --salt-overlayable-shadow-borderRegion
|
|
559
|
-
+ --salt-overlayable-shadow-region
|
|
560
|
-
|
|
561
|
-
- --salt-text-link-textDecoration
|
|
562
|
-
- --salt-text-link-textDecoration-hover
|
|
563
|
-
- --salt-text-link-textDecoration-selected
|
|
564
|
-
+ --salt-navigable-textDecoration
|
|
565
|
-
+ --salt-navigable-textDecoration-hover
|
|
566
|
-
+ --salt-navigable-textDecoration-selected
|
|
567
|
-
|
|
568
|
-
- --salt-navigable-primary-background-hover
|
|
569
|
-
+ --salt-navigable-background-hover
|
|
570
|
-
|
|
571
|
-
- --salt-accent-fontWeight
|
|
572
|
-
- --salt-accent-fontSize
|
|
573
|
-
- --salt-accent-lineHeight
|
|
574
|
-
+ --salt-text-notation-fontWeight
|
|
575
|
-
+ --salt-text-notation-fontSize
|
|
576
|
-
+ --salt-text-notation-lineHeight: 10px; /* Value previously 11px in HD */
|
|
577
|
-
|
|
578
|
-
```
|
|
579
|
-
|
|
580
|
-
- Deprecated tokens with no direct replacement tokens, use values suggested in comments
|
|
581
|
-
|
|
582
|
-
```diff
|
|
583
|
-
- --salt-taggable-cursor-hover /* Use `pointer` */
|
|
584
|
-
- --salt-taggable-cursor-active /* Use `pointer` */
|
|
585
|
-
- --salt-taggable-cursor-disabled /* Use `not-allowed` */
|
|
586
|
-
|
|
587
|
-
- --salt-taggable-background /* Use rgb(197, 201, 208) in light mode, rgb(76, 80, 91) in dark mode */
|
|
588
|
-
- --salt-taggable-background-hover /* Use rgb(217, 221, 227) in light mode, rgb(97, 101, 110) in dark mode */
|
|
589
|
-
- --salt-taggable-background-active /* Use --salt-palette-interact-primary-background-active Use rgb(97, 101, 110) in light mode, rgb(180, 183, 190) in dark mode */
|
|
590
|
-
- --salt-taggable-background-disabled /* Use --salt-palette-interact-primary-background-disabled Use rgba(197, 201, 208, 0.4) in light mode, rgba(76, 80, 91, 0.4) in dark mode */
|
|
591
|
-
|
|
592
|
-
- --salt-taggable-foreground /* Use rgb(255, 255, 255) */
|
|
593
|
-
- --salt-taggable-foreground-hover /* Use rgb(255, 255, 255) */
|
|
594
|
-
- --salt-taggable-foreground-active /* Use rgb(22, 22, 22) */
|
|
595
|
-
- --salt-taggable-foreground-disabled /* Use rgba(255, 255, 255, 0.4) */
|
|
596
|
-
|
|
597
|
-
- --salt-navigable-primary-background /* Use `transparent` */
|
|
598
|
-
- --salt-navigable-primary-background-active /* Use `transparent` */
|
|
599
|
-
- --salt-navigable-secondary-background /* Use `transparent` */
|
|
600
|
-
- --salt-navigable-secondary-background-hover /* Use rgb(76, 80, 91) in light mode, rgb(47, 49, 54) in dark mode */
|
|
601
|
-
- --salt-navigable-secondary-background-active /* Use `transparent` */
|
|
602
|
-
- --salt-navigable-tertiary-background /* Use `transparent` */
|
|
603
|
-
- --salt-navigable-tertiary-background-hover /* Use rgb(234, 237, 239) in light mode, rgb(42, 44, 47) in dark mode */
|
|
604
|
-
- --salt-navigable-tertiary-background-active /* Use `transparent` */
|
|
605
|
-
|
|
606
|
-
- --salt-navigable-indicator-activeDisabled /* Use rgba(224, 101, 25, 0.4) in light mode, rgba(238, 133, 43, 0.4) in dark mode */
|
|
607
|
-
|
|
608
|
-
- --salt-accent-foreground-disabled /* Use rgba(255, 255, 255, 0.4) */
|
|
609
|
-
- --salt-accent-background-disabled /* Use rgba(38, 112, 169, 0.4) */
|
|
610
|
-
- --salt-accent-borderColor-disabled /* Use --salt-container-primary-borderColor-disabled */
|
|
611
|
-
|
|
612
|
-
- --salt-track-fontWeight /* Use --salt-typography-fontWeight-semiBold */
|
|
613
|
-
- --salt-track-textAlign /* Use `center` */
|
|
614
|
-
|
|
615
|
-
- --salt-track-background /* Use rgb(197, 201, 208) in light mode, rgb(76, 80, 91); in dark mode */
|
|
616
|
-
- --salt-track-background-disabled /* Use rgba(197, 201, 208,0.4) in light mode, rgba(76, 80, 91,0.4) in dark mode */
|
|
617
|
-
|
|
618
|
-
- --salt-track-borderColor-disabled /* Use rgba(132, 135, 142, 0.4) in both light and dark modes */
|
|
619
|
-
|
|
620
|
-
- --salt-selectable-cta-foreground-hover /* Use rgb(255, 255, 255) in both light and dark mode */
|
|
621
|
-
- --salt-selectable-cta-foreground-selected /* Use rgb(255, 255, 255) in both light and dark mode */
|
|
622
|
-
- --salt-selectable-cta-foreground-selectedDisabled /* Use rgba(255, 255, 255,0.4) in both light and dark mode */
|
|
623
|
-
|
|
624
|
-
- --salt-selectable-cta-background /* Use `transparent` */
|
|
625
|
-
- --salt-selectable-cta-background-disabled /* Use `transparent` */
|
|
626
|
-
- --salt-selectable-cta-background-hover /* Use rgb(203, 231, 249) in light mode, rgb(39, 60, 77) in dark mode */
|
|
627
|
-
- --salt-selectable-cta-background-selected /* Use rgb(164, 213, 244) in light mode, rgb(0, 71, 123) in dark mode */
|
|
628
|
-
- --salt-selectable-cta-background-selectedDisabled /* Use rgba(164, 213, 244,0.4) in light mode,rgba(0, 71, 123, 0.4) in dark mode */
|
|
629
|
-
- --salt-selectable-primary-foreground-hover /* Use rgb(38, 112, 169) in both light and dark mode */
|
|
630
|
-
|
|
631
|
-
- --salt-container-tertiary-background /* Use `transparent` */
|
|
632
|
-
- --salt-container-tertiary-background-disabled /* Use `transparent` */
|
|
633
|
-
- --salt-container-tertiary-borderColor /* Use `transparent` */
|
|
634
|
-
- --salt-container-tertiary-borderColor-disabled /* Use `transparent` */
|
|
635
|
-
```
|
|
636
|
-
|
|
637
|
-
### Foundations
|
|
638
|
-
|
|
639
|
-
- Updated `neutral` token value in `light` mode
|
|
640
|
-
|
|
641
|
-
```diff
|
|
642
|
-
- --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop)
|
|
643
|
-
+ --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop)
|
|
644
|
-
```
|
|
645
|
-
|
|
646
|
-
- Updated `size` token value for HD. Expect components using this token to have visual changes. This change would not affect `Icon` component as the smallest icon size remains as `12px`, like in UITK.
|
|
647
|
-
|
|
648
|
-
```diff
|
|
649
|
-
- --salt-size-icon: 12px;
|
|
650
|
-
+ --salt-size-icon: 10px;
|
|
651
|
-
```
|
|
652
|
-
|
|
653
|
-
- New tokens added
|
|
654
|
-
|
|
655
|
-
In `size.css` foundations,
|
|
656
|
-
|
|
657
|
-
```diff
|
|
658
|
-
+ --salt-size-bar-small: 2px; /* for all densities */
|
|
659
|
-
+ --salt-size-border-strong: 2px /* for all densities */
|
|
660
|
-
+ --salt-size-bar-strong
|
|
661
|
-
```
|
|
662
|
-
|
|
663
|
-
In `fade.css` foundations,
|
|
664
|
-
|
|
665
|
-
```diff
|
|
666
|
-
+ --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8))
|
|
667
|
-
+ --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8))
|
|
668
|
-
```
|
|
669
|
-
|
|
670
|
-
- Deprecated tokens in foundations, use replacement tokens as listed
|
|
671
|
-
|
|
672
|
-
```diff
|
|
673
|
-
- --salt-icon-size-base
|
|
674
|
-
- --salt-icon-size-status-adornment
|
|
675
|
-
+ --salt-size-icon
|
|
676
|
-
+ --salt-size-adornment
|
|
677
|
-
|
|
678
|
-
- --salt-shadow-1
|
|
679
|
-
- --salt-shadow-2
|
|
680
|
-
- --salt-shadow-3
|
|
681
|
-
- --salt-shadow-4
|
|
682
|
-
- --salt-shadow-5
|
|
683
|
-
+ --salt-shadow-100
|
|
684
|
-
+ --salt-shadow-200
|
|
685
|
-
+ --salt-shadow-300
|
|
686
|
-
+ --salt-shadow-400
|
|
687
|
-
+ --salt-shadow-500
|
|
688
|
-
|
|
689
|
-
- --salt-shadow-1-color
|
|
690
|
-
- --salt-shadow-2-color
|
|
691
|
-
- --salt-shadow-3-color
|
|
692
|
-
- --salt-shadow-4-color
|
|
693
|
-
- --salt-shadow-5-color
|
|
694
|
-
+ --salt-shadow-100-color
|
|
695
|
-
+ --salt-shadow-200-color
|
|
696
|
-
+ --salt-shadow-300-color
|
|
697
|
-
+ --salt-shadow-400-color
|
|
698
|
-
+ --salt-shadow-500-color
|
|
699
|
-
|
|
700
|
-
- --salt-palette-navigate-primary-background-hover (light mode)
|
|
701
|
-
+ --salt-palette-navigate-background-hover: var(--salt-color-black-fade-background-hover)
|
|
702
|
-
- --salt-palette-navigate-primary-background-hover (dark mode)
|
|
703
|
-
+ --salt-palette-navigate-background-hover: var(--salt-color-white-fade-background-hover)
|
|
704
|
-
```
|
|
705
|
-
|
|
706
|
-
- Deprecated tokens with no replacement tokens, use values suggested in comments
|
|
707
|
-
|
|
708
|
-
```diff
|
|
709
|
-
- --salt-shadow-0 /* Use `none` */
|
|
710
|
-
```
|
|
711
|
-
|
|
712
|
-
### Palette
|
|
713
|
-
|
|
714
|
-
- Deprecated tokens with no replacement tokens, use values suggested in comments
|
|
715
|
-
|
|
716
|
-
```diff
|
|
717
|
-
- --salt-palette-navigate-primary-background /* Use `transparent` */
|
|
718
|
-
- --salt-palette-navigate-primary-background-active /* Use `transparent` */
|
|
719
|
-
- --salt-palette-navigate-secondary-background /* Use `transparent` */
|
|
720
|
-
- --salt-palette-navigate-secondary-background-hover /* Use --salt-color-gray-30 in light mode, --salt-color-gray-600 in dark mode */
|
|
721
|
-
- --salt-palette-navigate-secondary-background-active /* Use `transparent` */
|
|
722
|
-
- --salt-palette-navigate-tertiary-background /* Use `transparent` */
|
|
723
|
-
- --salt-palette-navigate-tertiary-background-hover /* Use --salt-color-gray-20 in light mode, --salt-color-gray-700 in dark mode */
|
|
724
|
-
- --salt-palette-navigate-tertiary-background-active /* Use `transparent` */
|
|
725
|
-
|
|
726
|
-
- --salt-palette-navigate-indicator-activeDisabled /* Use --salt-color-orange-600-fade-border in light mode, --salt-color-orange-400-fade-border in dark mode */
|
|
727
|
-
|
|
728
|
-
- --salt-palette-neutral-tertiary-background /* Use `transparent` */
|
|
729
|
-
- --salt-palette-neutral-tertiary-background-disabled /* Use `transparent` */
|
|
730
|
-
- --salt-palette-neutral-tertiary-border /* Use `transparent` */
|
|
731
|
-
- --salt-palette-neutral-tertiary-border-disabled /* Use `transparent` */
|
|
732
|
-
|
|
733
|
-
- --salt-palette-track-border /* Use --salt-color-gray-90 */
|
|
734
|
-
- --salt-palette-track-border-disabled /* Use --salt-color-gray-90-fade-border */
|
|
735
|
-
|
|
736
|
-
- --salt-palette-track-background /* Use --salt-color-gray-60 in light mode, --salt-color-gray-300 in dark mode */
|
|
737
|
-
- --salt-palette-track-background-disabled /* Use --salt-color-gray-60-fade-border in light mode, --salt-color-gray-300-fade-border in dark mode */
|
|
738
|
-
|
|
739
|
-
- --salt-palette-interact-cta-foreground-activeDisabled /* Use --salt-color-white-fade-foreground */
|
|
740
|
-
- --salt-palette-interact-cta-background-activeDisabled /* Use --salt-color-blue-700-fade-background */
|
|
741
|
-
|
|
742
|
-
- --salt-palette-interact-primary-foreground-activeDisabled /* Use --salt-color-white-fade-foreground in light mode, --salt-color-gray-900-fade-foreground in dark mode */
|
|
743
|
-
- --salt-palette-interact-primary-background-activeDisabled /* Use --salt-color-gray-200-fade-background in light mode, --salt-color-gray-70-fade-background in dark mode */
|
|
744
|
-
|
|
745
|
-
- --salt-palette-interact-secondary-foreground-activeDisabled /* Use --salt-color-white-fade-foreground in light mode, --salt-color-gray-900-fade-foreground in dark mode */
|
|
746
|
-
- --salt-palette-interact-secondary-background-activeDisabled /* Use --salt-color-gray-200-fade-background in light mode, --salt-color-gray-70-fade-background in dark mode */
|
|
747
|
-
|
|
748
|
-
- --salt-palette-accent-foreground-disabled /* Use --salt-color-white-fade-foreground */
|
|
749
|
-
- --salt-palette-accent-background-disabled /* Use --salt-color-blue-500-fade-background */
|
|
750
|
-
- --salt-palette-accent-border-disabled /* Use --salt-color-blue-500-fade-border */
|
|
751
|
-
```
|
|
752
|
-
|
|
753
|
-
## 1.9.0
|
|
754
|
-
|
|
755
|
-
### Minor Changes
|
|
756
|
-
|
|
757
|
-
- 319140a6: New token added in `size.css` foundations:
|
|
758
|
-
|
|
759
|
-
```diff
|
|
760
|
-
+ --salt-size-bar-small
|
|
761
|
-
```
|
|
762
|
-
|
|
763
|
-
- 01f3a2b3: New token added in `size.css` foundations:
|
|
764
|
-
|
|
765
|
-
```diff
|
|
766
|
-
+ --salt-size-bar-strong
|
|
767
|
-
+ --salt-size-bar-small
|
|
768
|
-
```
|
|
769
|
-
|
|
770
|
-
## 1.8.0
|
|
771
|
-
|
|
772
|
-
### Minor Changes
|
|
773
|
-
|
|
774
|
-
- 7f03e39f: Added a new size token: `--salt-size-indicator`
|
|
775
|
-
|
|
776
|
-
### Patch Changes
|
|
777
|
-
|
|
778
|
-
- 7f03e39f: Deprecated the following size tokens:
|
|
779
|
-
|
|
780
|
-
| Name | Replacement |
|
|
781
|
-
| --------------------------------- | ----------------------------------------- |
|
|
782
|
-
| `--salt-size-basis-unit` | 4px |
|
|
783
|
-
| `--salt-size-adornmentGap` | `--salt-spacing-75` |
|
|
784
|
-
| `--salt-size-container-spacing` | `--salt-spacing-300` |
|
|
785
|
-
| `--salt-size-divider-strokeWidth` | `--salt-size-border` |
|
|
786
|
-
| `--salt-size-separator-height` | `--salt-size-base` |
|
|
787
|
-
| `--salt-size-stackable` | `--salt-size-base` + `--salt-spacing-100` |
|
|
788
|
-
| `--salt-size-unit` | `--salt-spacing-100` |
|
|
789
|
-
| `--salt-size-compact` | `--salt-size-adornment` |
|
|
790
|
-
| `--salt-size-accent` | `--salt-size-bar` |
|
|
791
|
-
| `--salt-size-sharktooth-height` | 5px |
|
|
792
|
-
| `--salt-size-sharktooth-width` | 10px |
|
|
793
|
-
|
|
794
|
-
- f1815504: Deprecated `--salt-zIndex-docked`. You can use `1050` directly if you need to.
|
|
795
|
-
|
|
796
|
-
## 1.7.1
|
|
797
|
-
|
|
798
|
-
### Patch Changes
|
|
799
|
-
|
|
800
|
-
- 2c6d86dd: Theme
|
|
801
|
-
|
|
802
|
-
- Added `both` fill-mode to `--salt-animation-slide-out-*` css animation vars
|
|
803
|
-
|
|
804
|
-
## 1.7.0
|
|
805
|
-
|
|
806
|
-
### Minor Changes
|
|
807
|
-
|
|
808
|
-
- 21a76576: Added a new selectable token: `--salt-selectable-borderColor-readonly`.
|
|
809
|
-
|
|
810
|
-
Changed the value of `--salt-palette-opacity-border-readonly`.
|
|
811
|
-
|
|
812
|
-
```diff
|
|
813
|
-
- --salt-palette-opacity-border-readonly: var(--salt-opacity-8);
|
|
814
|
-
+ --salt-palette-opacity-border-readonly: var(--salt-opacity-15);
|
|
815
|
-
```
|
|
816
|
-
|
|
817
|
-
- b2ec14d9: Changed opacity foundation to a new scaled system.
|
|
818
|
-
Deprecated tokens `--salt-opacity-1`, `--salt-opacity-2`, `--salt-opacity-3`, `--salt-opacity-4`.
|
|
819
|
-
|
|
820
|
-
| Foundation token (deprecated) | Value | Use instead |
|
|
821
|
-
| ----------------------------- | ----- | ----------------- |
|
|
822
|
-
| --salt-opacity-1 | 0.15 | --salt-opacity-15 |
|
|
823
|
-
| --salt-opacity-2 | 0.25 | --salt-opacity-25 |
|
|
824
|
-
| --salt-opacity-3 | 0.40 | --salt-opacity-40 |
|
|
825
|
-
| --salt-opacity-4 | 0.70 | --salt-opacity-70 |
|
|
826
|
-
|
|
827
|
-
```diff
|
|
828
|
-
- --salt-opacity-15: 0.15;
|
|
829
|
-
- --salt-opacity-25: 0.25;
|
|
830
|
-
- --salt-opacity-40: 0.40;
|
|
831
|
-
- --salt-opacity-70: 0.70;
|
|
832
|
-
+ --salt-opacity-0: 0.00;
|
|
833
|
-
+ --salt-opacity-8: 0.08;
|
|
834
|
-
+ --salt-opacity-15: 0.15;
|
|
835
|
-
+ --salt-opacity-25: 0.25;
|
|
836
|
-
+ --salt-opacity-40: 0.40;
|
|
837
|
-
+ --salt-opacity-70: 0.70;
|
|
838
|
-
```
|
|
839
|
-
|
|
840
|
-
Added `--salt-palette-opacity-disabled` to replace `--salt-palette-opacity-border`, `--salt-palette-opacity-background`, `--salt-palette-opacity-foreground`, `--salt-palette-opacity-fill`, `--salt-palette-opacity-stroke`
|
|
841
|
-
|
|
842
|
-
| Palette token (deprecated) | Value | Use instead | New value |
|
|
843
|
-
| --------------------------------- | ------ | ------------------------------- | --------- |
|
|
844
|
-
| --salt-palette-opacity-background | 0.40 | --salt-palette-opacity-disabled | 0.40 |
|
|
845
|
-
| --salt-palette-opacity-border | 0.40 | --salt-palette-opacity-disabled | 0.40 |
|
|
846
|
-
| --salt-palette-opacity-stroke | 0.40 | --salt-palette-opacity-disabled | 0.40 |
|
|
847
|
-
| --salt-palette-opacity-fill | 0.40 | --salt-palette-opacity-disabled | 0.40 |
|
|
848
|
-
| --salt-palette-opacity-foreground | 0.70\* | --salt-palette-opacity-disabled | 0.40 |
|
|
849
|
-
|
|
850
|
-
\* Usages of `--salt-palette-opacity-foreground` should now map to a value of 0.40 rather than 0.70
|
|
851
|
-
|
|
852
|
-
Mapped palette opacity tokens to new opacity values
|
|
853
|
-
|
|
854
|
-
| Palette token | Old value | New value |
|
|
855
|
-
| ------------------------------------------ | ---------------------- | ----------------------- |
|
|
856
|
-
| --salt-palette-opacity-background-readonly | --salt-opacity-1: 0.15 | --salt-opacity-0: 0.00 |
|
|
857
|
-
| --salt-palette-opacity-border-readonly | --salt-opacity-2: 0.25 | --salt-opacity-8: 0.08 |
|
|
858
|
-
| --salt-palette-opacity-backdrop | --salt-opacity-4: 0.70 | --salt-opacity-70: 0.70 |
|
|
859
|
-
| --salt-palette-opacity-primary-border | --salt-opacity-3: 0.40 | --salt-opacity-40: 0.40 |
|
|
860
|
-
| --salt-palette-opacity-secondary-border | --salt-opacity-2: 0.25 | --salt-opacity-25: 0.25 |
|
|
861
|
-
| --salt-palette-opacity-tertiary-border | --salt-opacity-1: 0.15 | --salt-opacity-15: 0.15 |
|
|
862
|
-
|
|
863
|
-
```diff
|
|
864
|
-
- --salt-palette-opacity-background: var(--salt-opacity-3);
|
|
865
|
-
- --salt-palette-opacity-border: var(--salt-opacity-3);
|
|
866
|
-
- --salt-palette-opacity-foreground: var(--salt-opacity-4);
|
|
867
|
-
- --salt-palette-opacity-fill: var(--salt-opacity-3);
|
|
868
|
-
- --salt-palette-opacity-stroke: var(--salt-opacity-3);
|
|
869
|
-
- --salt-palette-opacity-background-readonly: var(--salt-opacity-1);
|
|
870
|
-
- --salt-palette-opacity-border-readonly: var(--salt-opacity-2);
|
|
871
|
-
- --salt-palette-opacity-backdrop: var(--salt-opacity-4);
|
|
872
|
-
- --salt-palette-opacity-primary-border: var(--salt-opacity-3);
|
|
873
|
-
- --salt-palette-opacity-secondary-border: var(--salt-opacity-2);
|
|
874
|
-
- --salt-palette-opacity-tertiary-border: var(--salt-opacity-1);
|
|
875
|
-
+ --salt-palette-opacity-backdrop: var(--salt-opacity-70);
|
|
876
|
-
+ --salt-palette-opacity-background-readonly: var(--salt-opacity-0);
|
|
877
|
-
+ --salt-palette-opacity-border-readonly: var(--salt-opacity-8);
|
|
878
|
-
+ --salt-palette-opacity-primary-border: var(--salt-opacity-40);
|
|
879
|
-
+ --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
|
|
880
|
-
+ --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
|
|
881
|
-
+ --salt-palette-opacity-disabled: var(--salt-opacity-40);
|
|
882
|
-
```
|
|
883
|
-
|
|
884
|
-
### Patch Changes
|
|
885
|
-
|
|
886
|
-
- 1f0cb87d: Refactored the theme file structure for easier maintainability.
|
|
887
|
-
|
|
888
|
-
Added the missing deprecated token: `--salt-palette-warning-foreground-disabled`.
|
|
889
|
-
|
|
890
|
-
- 87556137: Changed `--salt-duration-instant` to 0ms
|
|
891
|
-
|
|
892
|
-
## 1.6.0
|
|
893
|
-
|
|
894
|
-
### Minor Changes
|
|
895
|
-
|
|
896
|
-
- c9981881: New token introduced in `selectable` characteristic, new palette tokens
|
|
897
|
-
|
|
898
|
-
```diff
|
|
899
|
-
+ --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
|
|
900
|
-
```
|
|
901
|
-
|
|
902
|
-
New value in light mode
|
|
903
|
-
|
|
904
|
-
```diff
|
|
905
|
-
+ --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-fade-background);
|
|
906
|
-
```
|
|
907
|
-
|
|
908
|
-
New value in dark mode
|
|
909
|
-
|
|
910
|
-
```diff
|
|
911
|
-
+ --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-700-fade-background);
|
|
912
|
-
```
|
|
913
|
-
|
|
914
|
-
- 71fc7474: Add new list components: ListNext, ListItemNext
|
|
915
|
-
|
|
916
|
-
```
|
|
917
|
-
<ListNext>
|
|
918
|
-
<ListItemNext value={Alaska}>
|
|
919
|
-
{Alaska}
|
|
920
|
-
</ListItemNext>
|
|
921
|
-
</ListNext>
|
|
922
|
-
|
|
923
|
-
```
|
|
924
|
-
|
|
925
|
-
- b52cc743: Deprecated the following tokens: Use hex value as replacement if needed.
|
|
926
|
-
|
|
927
|
-
```diff
|
|
928
|
-
- --salt-status-info-foreground-disabled: #2670A9B3
|
|
929
|
-
- --salt-status-success-foreground-disabled: #24874BB3
|
|
930
|
-
- --salt-status-warning-foreground-disabled: #EA7319B3
|
|
931
|
-
- --salt-status-error-foreground-disabled: #E32B16B3
|
|
932
|
-
- --salt-status-static-foreground-disabled: #61656E | #B4B7BE
|
|
933
|
-
- --salt-status-negative-foreground-disabled: #FF5942B3 | #A6150BB3
|
|
934
|
-
- --salt-status-positive-foreground-disabled: #3CAB60B3 | #0C5D2EB3
|
|
935
|
-
- --salt-status-info-borderColor-disabled: #2670A966
|
|
936
|
-
- --salt-status-success-borderColor-disabled: #24874B66
|
|
937
|
-
- --salt-status-warning-borderColor-disabled: #EA731966
|
|
938
|
-
- --salt-status-error-borderColor-disabled: #E32B1666
|
|
939
|
-
- --salt-palette-error-border-disabled: #E32B1666
|
|
940
|
-
- --salt-palette-warning-border-disabled: #EA731966
|
|
941
|
-
- --salt-palette-success-border-disabled: #24874B66
|
|
942
|
-
- --salt-palette-info-border-disabled: #2670A966
|
|
943
|
-
- --salt-palette-error-foreground-disabled: #E32B16B3
|
|
944
|
-
- --salt-palette-success-foreground-disabled: #24874BB3
|
|
945
|
-
- --salt-palette-info-foreground-disabled: #2670A9B3
|
|
946
|
-
```
|
|
947
|
-
|
|
948
|
-
Any components that have a validation state should not be able to simultaneously be disabled. Consider altering code if this is the case.
|
|
949
|
-
|
|
950
|
-
- 5227fd57: Added `--salt-selectable-cursor-readonly` token with `not-allowed` value
|
|
951
|
-
|
|
952
|
-
## 1.5.1
|
|
953
|
-
|
|
954
|
-
### Patch Changes
|
|
955
|
-
|
|
956
|
-
- 813daa28: Fixed the duration foundation token values having invalid values
|
|
957
|
-
|
|
958
|
-
## 1.5.0
|
|
959
|
-
|
|
960
|
-
### Minor Changes
|
|
961
|
-
|
|
962
|
-
- b6f304f9: Added size tokens
|
|
963
|
-
|
|
964
|
-
```diff
|
|
965
|
-
+ --salt-size-adornment
|
|
966
|
-
+ --salt-size-bar
|
|
967
|
-
+ --salt-size-selectable
|
|
968
|
-
+ --salt-size-icon
|
|
969
|
-
```
|
|
970
|
-
|
|
971
|
-
`--salt-size-base ` changed from a calculation on the basis unit to hardcoded values per density
|
|
972
|
-
`--salt-size-border` defined as 1px per density rather than set globally
|
|
973
|
-
|
|
974
|
-
- e8b146a5: Add new spacing tokens and a spacing foundation.
|
|
975
|
-
|
|
976
|
-
```css
|
|
977
|
-
--salt-spacing-25
|
|
978
|
-
--salt-spacing-50
|
|
979
|
-
--salt-spacing-75
|
|
980
|
-
--salt-spacing-100
|
|
981
|
-
--salt-spacing-150
|
|
982
|
-
--salt-spacing-200
|
|
983
|
-
--salt-spacing-250
|
|
984
|
-
--salt-spacing-300
|
|
985
|
-
--salt-spacing-350
|
|
986
|
-
--salt-spacing-400
|
|
987
|
-
```
|
|
988
|
-
|
|
989
|
-
### Patch Changes
|
|
990
|
-
|
|
991
|
-
- 1e9ef1a2: Fix duplicate Salt libraries being installed when multiple libraries are installed
|
|
992
|
-
|
|
993
|
-
## 1.4.0
|
|
994
|
-
|
|
995
|
-
### Minor Changes
|
|
996
|
-
|
|
997
|
-
- 8bcc9d04: Deprecated tertiary editable tokens: If needed, use `#00000066` as a replacement for `--salt-editable-tertiary-background-readonly`, and use `transparent` as a replacement for all remaining tokens
|
|
998
|
-
Deprecated `tertiary` variant in FormField
|
|
999
|
-
- bf66b578: Deprecated -emphasize tokens in status and palette; replaced with default tokens
|
|
1000
|
-
|
|
1001
|
-
`--salt-status-error-background-emphasize` replaced with `--salt-status-error-background`
|
|
1002
|
-
`--salt-status-info-background-emphasize` replaced with `--salt-status-info-background`
|
|
1003
|
-
`--salt-status-success-background-emphasize` replaced with `--salt-status-success-background`
|
|
1004
|
-
`--salt-status-warning-background-emphasize` replaced with `--salt-status-warning-background`
|
|
1005
|
-
|
|
1006
|
-
`--salt-palette-error-background-emphasize` replaced with `--salt-palette-error-background`
|
|
1007
|
-
`--salt-palette-info-background-emphasize` replaced with `--salt-palette-info-background`
|
|
1008
|
-
`--salt-palette-success-background-emphasize` replaced with `--salt-palette-success-background`
|
|
1009
|
-
`--salt-palette-warning-background-emphasize` replaced with `--salt-palette-warning-background`
|
|
1010
|
-
|
|
1011
|
-
- ea857f24: Deprecated `--salt-size-icon-base`, replaced with `--salt-icon-size-base`
|
|
1012
|
-
Added `--salt-icon-size-status-adornment`
|
|
1013
|
-
|
|
1014
|
-
## 1.3.0
|
|
1015
|
-
|
|
1016
|
-
### Minor Changes
|
|
1017
|
-
|
|
1018
|
-
- 6d2c3a32: Deprecate delay foundation; replace with duration
|
|
1019
|
-
- ea010ffa: New `--salt-size-container-spacing` and `--salt-size-adornmentGap` tokens
|
|
1020
|
-
|
|
1021
|
-
```diff
|
|
1022
|
-
+ --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
|
|
1023
|
-
+ --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
|
|
1024
|
-
```
|
|
1025
|
-
|
|
1026
|
-
- d8f8b305: Added `--salt-accent-foreground-disabled`
|
|
1027
|
-
|
|
1028
|
-
```diff
|
|
1029
|
-
+ --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled)
|
|
1030
|
-
+ --salt-palette-accent-foreground-disabled
|
|
1031
|
-
```
|
|
1032
|
-
|
|
1033
|
-
- 7a025091: Bug fix
|
|
1034
|
-
|
|
1035
|
-
```diff
|
|
1036
|
-
- --salt-palette-interact-foreground-disabled: var(--salt-color-90-fade-foreground);
|
|
1037
|
-
+ --salt-palette-interact-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
|
|
1038
|
-
```
|
|
1039
|
-
|
|
1040
|
-
- 91e7cbdf: Added `--salt-accent-borderColor-disabled`
|
|
1041
|
-
|
|
1042
|
-
```diff
|
|
1043
|
-
+ --salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled);
|
|
1044
|
-
+ --salt-palette-accent-border-disabled
|
|
1045
|
-
```
|
|
1046
|
-
|
|
1047
|
-
### Patch Changes
|
|
1048
|
-
|
|
1049
|
-
- 8d29c01f: New font family css variable for all text components which point to `--salt-typography-fontFamily`.
|
|
1050
|
-
|
|
1051
|
-
```
|
|
1052
|
-
--salt-text-display1-fontFamily
|
|
1053
|
-
--salt-text-display2-fontFamily
|
|
1054
|
-
--salt-text-display3-fontFamily
|
|
1055
|
-
--salt-text-h1-fontFamily
|
|
1056
|
-
--salt-text-h2-fontFamily
|
|
1057
|
-
--salt-text-h3-fontFamily
|
|
1058
|
-
--salt-text-h4-fontFamily
|
|
1059
|
-
--salt-text-label-fontFamily
|
|
1060
|
-
```
|
|
1061
|
-
|
|
1062
|
-
## 1.2.0
|
|
1063
|
-
|
|
1064
|
-
### Minor Changes
|
|
1065
|
-
|
|
1066
|
-
- 974c92da: - New characteristics introduced in `accent`, new palette token
|
|
1067
|
-
|
|
1068
|
-
```diff
|
|
1069
|
-
+ --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
|
|
1070
|
-
+ --salt-palette-accent-background-disabled
|
|
1071
|
-
```
|
|
1072
|
-
|
|
1073
|
-
- New characteristics introduced in `selectable`, new palette tokens
|
|
1074
|
-
|
|
1075
|
-
```diff
|
|
1076
|
-
+ --salt-selectable-foreground: var(--salt-palette-interact-foreground);
|
|
1077
|
-
+ --salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
|
|
1078
|
-
+ --salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);
|
|
1079
|
-
+ --salt-selectable-foreground-selected: var(--salt-palette-interact-foreground-active);
|
|
1080
|
-
+ --salt-selectable-foreground-selectedDisabled: var(--salt-palette-interact-foreground-activeDisabled);
|
|
1081
|
-
+ --salt-palette-interact-foreground-active
|
|
1082
|
-
+ --salt-palette-interact-foreground-activeDisabled
|
|
1083
|
-
+ --salt-palette-interact-foreground-hover
|
|
1084
|
-
```
|
|
1085
|
-
|
|
1086
|
-
Updated values in light mode
|
|
1087
|
-
|
|
1088
|
-
```diff
|
|
1089
|
-
- --salt-palette-interact-foreground: var(--salt-color-gray-900);
|
|
1090
|
-
+ --salt-palette-interact-foreground: var(--salt-color-gray-200);
|
|
1091
|
-
- --salt-palette-interact-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
|
|
1092
|
-
+ --salt-palette-interact-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
|
|
1093
|
-
- --salt-palette-interact-foreground-hover: var(--salt-color-gray-500);
|
|
1094
|
-
+ --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
|
|
1095
|
-
```
|
|
1096
|
-
|
|
1097
|
-
Updated values in dark mode
|
|
1098
|
-
|
|
1099
|
-
```diff
|
|
1100
|
-
- --salt-palette-interact-foreground: var(--salt-color-white);
|
|
1101
|
-
+ --salt-palette-interact-foreground: var(--salt-color-gray-90);
|
|
1102
|
-
- --salt-palette-interact-foreground-disabled: var(--salt-color-white-fade-foreground);
|
|
1103
|
-
+ --salt-palette-interact-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
|
|
1104
|
-
- --salt-palette-interact-foreground-hover: var(--salt-color-gray-500);
|
|
1105
|
-
+ --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
|
|
1106
|
-
```
|
|
1107
|
-
|
|
1108
|
-
- Deprecated the following `selectable` tokens, use `--salt-text-primary-foreground` and `--salt-text-primary-foreground-disabled` as replacements
|
|
1109
|
-
|
|
1110
|
-
```diff
|
|
1111
|
-
- --salt-selectable-cta-foreground
|
|
1112
|
-
- --salt-selectable-cta-foreground-disabled
|
|
1113
|
-
- --salt-selectable-primary-foreground
|
|
1114
|
-
- --salt-selectable-primary-foreground-disabled
|
|
1115
|
-
- --salt-selectable-secondary-foreground
|
|
1116
|
-
- --salt-selectable-secondary-foreground-disabled
|
|
1117
|
-
- --salt-selectable-foreground-partial
|
|
1118
|
-
- --salt-selectable-foreground-partialDisabled
|
|
1119
|
-
```
|
|
1120
|
-
|
|
1121
|
-
- `Measured` characteristic replaced with `Track`
|
|
1122
|
-
|
|
1123
|
-
Deprecated tokens prefixed by `--salt-measured-` and corresponding palette tokens
|
|
1124
|
-
New `--salt-track-` tokens and corresponding palette tokens
|
|
1125
|
-
|
|
1126
|
-
The following are a direct replacement mapping:
|
|
1127
|
-
|
|
1128
|
-
```diff
|
|
1129
|
-
- --salt-measured-borderStyle
|
|
1130
|
-
- --salt-measured-borderStyle-active
|
|
1131
|
-
- --salt-measured-borderStyle-complete
|
|
1132
|
-
- --salt-measured-borderStyle-incomplete
|
|
1133
|
-
+ --salt-track-borderStyle
|
|
1134
|
-
+ --salt-track-borderStyle-active
|
|
1135
|
-
+ --salt-track-borderStyle-complete
|
|
1136
|
-
+ --salt-track-borderStyle-incomplete
|
|
1137
|
-
- --salt-measured-borderWidth
|
|
1138
|
-
- --salt-measured-borderWidth-active
|
|
1139
|
-
- --salt-measured-borderWidth-complete
|
|
1140
|
-
- --salt-measured-borderWidth-incomplete
|
|
1141
|
-
+ --salt-track-borderWidth
|
|
1142
|
-
+ --salt-track-borderWidth-active
|
|
1143
|
-
+ --salt-track-borderWidth-complete
|
|
1144
|
-
+ --salt-track-borderWidth-incomplete
|
|
1145
|
-
- --salt-measured-fontWeight
|
|
1146
|
-
- --salt-measured-textAlign
|
|
1147
|
-
+ --salt-track-fontWeight
|
|
1148
|
-
+ --salt-track-textAlign
|
|
1149
|
-
- --salt-measured-background: var(--salt-palette-measured-background);
|
|
1150
|
-
- --salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
|
|
1151
|
-
- --salt-measured-borderColor: var(--salt-palette-measured-border);
|
|
1152
|
-
+ --salt-track-background: var(--salt-palette-track-background);
|
|
1153
|
-
+ --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
|
|
1154
|
-
+ --salt-track-borderColor: var(--salt-palette-track-border);
|
|
1155
|
-
+ --salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
|
|
1156
|
-
- --salt-palette-measured-background
|
|
1157
|
-
- --salt-palette-measured-background-disabled
|
|
1158
|
-
- --salt-palette-measured-border
|
|
1159
|
-
- --salt-palette-measured-border-disabled
|
|
1160
|
-
+ --salt-palette-track-background
|
|
1161
|
-
+ --salt-palette-track-background-disabled
|
|
1162
|
-
+ --salt-palette-track-border
|
|
1163
|
-
+ --salt-palette-track-border-disabled
|
|
1164
|
-
```
|
|
1165
|
-
|
|
1166
|
-
The following should be replaced with the corresponding `selectable` tokens:
|
|
1167
|
-
|
|
1168
|
-
```diff
|
|
1169
|
-
- --salt-measured-foreground: var(--salt-palette-measured-foreground);
|
|
1170
|
-
- --salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);
|
|
1171
|
-
- --salt-measured-foreground-hover: var(--salt-palette-measured-foreground-active);
|
|
1172
|
-
- --salt-measured-foreground-active: var(--salt-palette-measured-foreground-active);
|
|
1173
|
-
- --salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
|
|
1174
|
-
- --salt-measured-borderColor-disabled: var(--salt-palette-measured-border-disabled);
|
|
1175
|
-
```
|
|
1176
|
-
|
|
1177
|
-
The following should be replaced with the corresponding `accent` background tokens:
|
|
1178
|
-
|
|
1179
|
-
```diff
|
|
1180
|
-
- --salt-measured-fill: var(--salt-palette-measured-fill);
|
|
1181
|
-
- --salt-measured-fill-disabled: var(--salt-palette-measured-fill-disabled);
|
|
1182
|
-
```
|
|
1183
|
-
|
|
1184
|
-
- Usages of `measured` tokens in core and labs components updated to use appropriate characteristic replacement
|
|
1185
|
-
|
|
1186
|
-
- Deprecated the following tokens, use hex value as replacement if needed:
|
|
1187
|
-
|
|
1188
|
-
```diff
|
|
1189
|
-
- --salt-measured-foreground-undo: #2670a9
|
|
1190
|
-
- --salt-palette-measured-fill: #2670A9
|
|
1191
|
-
- --salt-palette-measured-fill-disabled: #2670A966
|
|
1192
|
-
- --salt-palette-measured-foreground-active: #2670A9
|
|
1193
|
-
- --salt-palette-measured-foreground-activeDisabled: #2670A966
|
|
1194
|
-
- --salt-palette-interact-foreground-partial: #155C93
|
|
1195
|
-
- --salt-palette-interact-foreground-partialDisabled: #155C93B3
|
|
1196
|
-
```
|
|
1197
|
-
|
|
1198
|
-
- d2b983de: New status tokens
|
|
1199
|
-
|
|
1200
|
-
```diff
|
|
1201
|
-
+ --salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
|
|
1202
|
-
+ --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
|
|
1203
|
-
+ --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
|
|
1204
|
-
+ --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
|
|
1205
|
-
+ --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
|
|
1206
|
-
+ --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
|
|
1207
|
-
+ --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
|
|
1208
|
-
|
|
1209
|
-
+ --salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
|
|
1210
|
-
+ --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
|
|
1211
|
-
+ --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
|
|
1212
|
-
+ --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
|
|
1213
|
-
|
|
1214
|
-
+ --salt-palette-info-border-disabled
|
|
1215
|
-
+ --salt-palette-info-foreground-disabled
|
|
1216
|
-
+ --salt-palette-warning-border-disabled
|
|
1217
|
-
+ --salt-palette-warning-foreground-disabled
|
|
1218
|
-
+ --salt-palette-error-border-disabled
|
|
1219
|
-
+ --salt-palette-error-foreground-disabled
|
|
1220
|
-
+ --salt-palette-success-foreground-disabled
|
|
1221
|
-
+ --salt-palette-success-border-disabled
|
|
1222
|
-
+ --salt-palette-negative-foreground-disabled
|
|
1223
|
-
+ --salt-palette-positive-foreground-disabled
|
|
1224
|
-
```
|
|
1225
|
-
|
|
1226
|
-
## 1.1.0
|
|
1227
|
-
|
|
1228
|
-
### Minor Changes
|
|
1229
|
-
|
|
1230
|
-
- d460fb7b: Deprecated `--salt-size-detail`; replaced with `--salt-size-compact`
|
|
1231
|
-
- 5ead0bbf: Deprecated `--salt-size-selection`; replaced with `--salt-size-selectable`
|
|
1232
|
-
- 2e0fdff0: Deprecated `--salt-size-graphic-small`, `--salt-size-graphic-medium`, `--salt-size-graphic-large`
|
|
1233
|
-
Deprecated `--salt-size-divider-height`, `--salt-size-divider-strokeWidth`, replaced with `--salt-size-separator-height`, `--salt-size-separator-strokeWidth`
|
|
1234
|
-
- 9d3dda91: Theme update: changed the value of `--salt-palette-warning-border` and `--salt-palette-warning-foreground` to `--salt-color-orange-700` in light mode to fix accessibility issues
|
|
1235
|
-
- 649d5394: Added a new opacity token for readonly backgrounds
|
|
1236
|
-
|
|
1237
|
-
```diff
|
|
1238
|
-
- --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-readonly));
|
|
1239
|
-
- --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-readonly));
|
|
1240
|
-
- --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-readonly));
|
|
1241
|
-
- --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-readonly));
|
|
1242
|
-
+ --salt-palette-opacity-background-readonly: var(--salt-opacity-1)
|
|
1243
|
-
+ --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
|
|
1244
|
-
+ --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
|
|
1245
|
-
+ --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
|
|
1246
|
-
+ --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly));
|
|
1247
|
-
```
|
|
1248
|
-
|
|
1249
|
-
- e33f5610: Theme update: changed the value of `--salt-palette-success-border` and `--salt-palette-success-foreground` to `--salt-color-green-400` in dark mode to fix accessibility issues
|
|
1250
|
-
- d975171f: Deprecated `--salt-size-brandBar`; replaced with `--salt-size-accent` with new density dependent values
|
|
1251
|
-
- 9cae606a: Deprecated differential characteristic; replaced tokens with below
|
|
1252
|
-
Moved differential tokens to status characteristic
|
|
1253
|
-
Added 'static' status variant
|
|
1254
|
-
|
|
1255
|
-
```diff
|
|
1256
|
-
- --salt-differential-positive-foreground
|
|
1257
|
-
- --salt-differential-negative-foreground
|
|
1258
|
-
+ --salt-status-positive-foreground
|
|
1259
|
-
+ --salt-status-negative-foreground
|
|
1260
|
-
+ --salt-status-static-foreground
|
|
1261
|
-
```
|
|
1262
|
-
|
|
1263
|
-
- 1f579da6: Added tokens for success, warning, and error backgrounds on selected state
|
|
1264
|
-
|
|
1265
|
-
```diff
|
|
1266
|
-
+ --salt-status-success-background-selected
|
|
1267
|
-
+ --salt-status-warning-background-selected
|
|
1268
|
-
+ --salt-status-error-background-selected
|
|
1269
|
-
+ --salt-palette-success-background-selected
|
|
1270
|
-
+ --salt-palette-warning-background-selected
|
|
1271
|
-
+ --salt-palette-error-background-selected
|
|
1272
|
-
```
|
|
1273
|
-
|
|
1274
|
-
### Patch Changes
|
|
1275
|
-
|
|
1276
|
-
- 8e9446bf: Fixed the shadow token value
|
|
1277
|
-
|
|
1278
|
-
```diff
|
|
1279
|
-
- --salt-shadow-5: 0 12px 40px 5px var(--salt-shadow-5-color);
|
|
1280
|
-
+ --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
|
|
1281
|
-
```
|
|
1282
|
-
|
|
1283
|
-
- 1ad02da3: Deprecated `--salt-overlayable-shadow-scroll-color`, use `--salt-shadow-1-color` instead
|
|
1284
|
-
|
|
1285
|
-
## 1.0.0
|
|
1286
|
-
|
|
1287
|
-
### Major Changes
|
|
1288
|
-
|
|
1289
|
-
- c1bc7479: Salt is the J.P. Morgan design system, an open-source solution for building exceptional products and digital experiences in financial services and other industries. It offers you well-documented, accessible components as well as comprehensive design templates, style libraries and assets.
|
|
1290
|
-
|
|
1291
|
-
With this initial release we're providing:
|
|
1292
|
-
|
|
1293
|
-
- AG Grid Theme
|
|
1294
|
-
- Border Layout
|
|
1295
|
-
- Button
|
|
1296
|
-
- Data Grid
|
|
1297
|
-
- Flex Layout
|
|
1298
|
-
- Flow Layout
|
|
1299
|
-
- Grid Layout
|
|
1300
|
-
- Icon
|
|
1301
|
-
- Link
|
|
1302
|
-
- Salt Provider
|
|
1303
|
-
- Stack Layout
|
|
1304
|
-
- Status Indicator
|
|
1305
|
-
- Text
|
|
1306
|
-
- Theme
|
|
1307
|
-
|
|
1308
|
-
And a number of other lab components.
|