@salt-ds/theme 0.0.0-snapshot-20240726102508 → 0.0.0-snapshot-20240726124318

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 (79) hide show
  1. package/CHANGELOG.md +1308 -0
  2. package/README.md +1 -0
  3. package/css/characteristics/accent-next.css +5 -0
  4. package/css/characteristics/accent.css +5 -0
  5. package/css/characteristics/actionable-next.css +41 -0
  6. package/css/characteristics/actionable.css +47 -0
  7. package/css/characteristics/category-next.css +22 -0
  8. package/css/characteristics/category.css +141 -0
  9. package/css/characteristics/container-next.css +16 -0
  10. package/css/characteristics/container.css +18 -0
  11. package/css/characteristics/content-next.css +14 -0
  12. package/css/characteristics/content.css +15 -0
  13. package/css/characteristics/draggable.css +10 -0
  14. package/css/characteristics/editable-next.css +19 -0
  15. package/css/characteristics/editable.css +33 -0
  16. package/css/characteristics/focused-next.css +3 -0
  17. package/css/characteristics/focused.css +21 -0
  18. package/css/characteristics/navigable-next.css +6 -0
  19. package/css/characteristics/navigable.css +21 -0
  20. package/css/characteristics/overlayable-next.css +4 -0
  21. package/css/characteristics/overlayable.css +12 -0
  22. package/css/characteristics/selectable-next.css +20 -0
  23. package/css/characteristics/selectable.css +31 -0
  24. package/css/characteristics/separable-next.css +5 -0
  25. package/css/characteristics/separable.css +7 -0
  26. package/css/characteristics/status-next.css +34 -0
  27. package/css/characteristics/status.css +34 -0
  28. package/css/characteristics/target-next.css +4 -0
  29. package/css/characteristics/target.css +10 -0
  30. package/css/characteristics/text-next.css +56 -0
  31. package/css/characteristics/text.css +226 -0
  32. package/css/characteristics/track-next.css +3 -0
  33. package/css/characteristics/track.css +8 -0
  34. package/css/deprecated/characteristics.css +186 -0
  35. package/css/deprecated/fade.css +8 -0
  36. package/css/deprecated/foundations.css +107 -0
  37. package/css/deprecated/palette.css +159 -0
  38. package/css/foundations/alpha-next.css +48 -0
  39. package/css/foundations/animation.css +155 -0
  40. package/css/foundations/color-next.css +148 -0
  41. package/css/foundations/color.css +297 -0
  42. package/css/foundations/curve-next.css +31 -0
  43. package/css/foundations/duration.css +6 -0
  44. package/css/foundations/fade.css +72 -0
  45. package/css/foundations/opacity.css +9 -0
  46. package/css/foundations/shadow.css +23 -0
  47. package/css/foundations/size.css +51 -0
  48. package/css/foundations/spacing.css +31 -0
  49. package/css/foundations/typography.css +12 -0
  50. package/css/foundations/zindex.css +14 -0
  51. package/css/global.css +10 -3
  52. package/css/palette/accent-next.css +63 -0
  53. package/css/palette/accent.css +11 -0
  54. package/css/palette/alpha-next.css +19 -0
  55. package/css/palette/background-next.css +16 -0
  56. package/css/palette/categorical.css +163 -0
  57. package/css/palette/corner-next.css +12 -0
  58. package/css/palette/error.css +17 -0
  59. package/css/palette/foreground-next.css +22 -0
  60. package/css/palette/info-next.css +10 -0
  61. package/css/palette/info.css +15 -0
  62. package/css/palette/interact.css +91 -0
  63. package/css/palette/navigate.css +17 -0
  64. package/css/palette/negative-next.css +10 -0
  65. package/css/palette/negative.css +7 -0
  66. package/css/palette/neutral-next.css +34 -0
  67. package/css/palette/neutral.css +51 -0
  68. package/css/palette/opacity.css +9 -0
  69. package/css/palette/positive-next.css +10 -0
  70. package/css/palette/positive.css +7 -0
  71. package/css/palette/success.css +17 -0
  72. package/css/palette/text-next.css +50 -0
  73. package/css/palette/text.css +24 -0
  74. package/css/palette/warning-next.css +10 -0
  75. package/css/palette/warning.css +17 -0
  76. package/css/theme-next.css +31 -954
  77. package/css/theme.css +55 -1954
  78. package/index.css +2 -1985
  79. package/package.json +4 -3
package/CHANGELOG.md ADDED
@@ -0,0 +1,1308 @@
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.