@adobe/spectrum-tokens 13.0.0-beta.5 → 13.0.0-beta.51
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/CHANGELOG.md +2387 -0
- package/README.md +4 -0
- package/dist/json/drover.json +998 -253
- package/dist/json/variables.json +16916 -6373
- package/index.js +60 -0
- package/moon.yml +3 -2
- package/package.json +12 -8
- package/schemas/components/action-bar.json +1 -1
- package/schemas/components/action-button.json +1 -1
- package/schemas/components/action-group.json +1 -1
- package/schemas/components/alert-banner.json +1 -1
- package/schemas/components/alert-dialog.json +1 -1
- package/schemas/components/avatar.json +1 -1
- package/schemas/components/badge.json +1 -1
- package/schemas/components/body.json +1 -1
- package/schemas/components/bottom-navigation-android.json +1 -1
- package/schemas/components/breadcrumbs.json +1 -1
- package/schemas/components/button-group.json +1 -1
- package/schemas/components/button.json +1 -1
- package/schemas/components/checkbox-group.json +1 -1
- package/schemas/components/checkbox.json +1 -1
- package/schemas/components/close-button.json +1 -1
- package/schemas/components/code.json +1 -1
- package/schemas/components/color-area.json +1 -1
- package/schemas/components/color-loupe.json +1 -1
- package/schemas/components/color-slider.json +1 -1
- package/schemas/components/color-wheel.json +1 -1
- package/schemas/components/combo-box.json +1 -1
- package/schemas/components/contextual-help.json +1 -1
- package/schemas/components/detail.json +1 -1
- package/schemas/components/divider.json +1 -1
- package/schemas/components/field-label.json +1 -1
- package/schemas/components/heading.json +1 -1
- package/schemas/components/help-text.json +1 -1
- package/schemas/components/in-line-alert.json +1 -1
- package/schemas/components/link.json +1 -1
- package/schemas/components/menu.json +1 -1
- package/schemas/components/meter.json +1 -1
- package/schemas/components/picker.json +1 -1
- package/schemas/components/popover.json +1 -1
- package/schemas/components/progress-bar.json +1 -1
- package/schemas/components/progress-circle.json +1 -1
- package/schemas/components/radio-group.json +1 -1
- package/schemas/components/rating.json +1 -1
- package/schemas/components/scroll-zoom-bar.json +1 -1
- package/schemas/components/side-navigation.json +1 -1
- package/schemas/components/slider.json +1 -1
- package/schemas/components/status-light.json +1 -1
- package/schemas/components/swatch-group.json +1 -1
- package/schemas/components/swatch.json +1 -1
- package/schemas/components/switch.json +1 -1
- package/schemas/components/tab-bar-ios.json +1 -1
- package/schemas/components/tabs.json +1 -1
- package/schemas/components/tag.json +1 -1
- package/schemas/components/text-area.json +1 -1
- package/schemas/components/text-field.json +1 -1
- package/schemas/components/toast.json +1 -1
- package/schemas/components/tooltip.json +1 -1
- package/schemas/components/tray.json +1 -1
- package/schemas/components/tree-view.json +1 -1
- package/schemas/token-types/alias.json +26 -0
- package/schemas/token-types/color-set.json +70 -0
- package/schemas/token-types/color.json +26 -0
- package/schemas/token-types/dimension.json +26 -0
- package/schemas/token-types/font-family.json +26 -0
- package/schemas/token-types/font-size.json +26 -0
- package/schemas/token-types/font-style.json +26 -0
- package/schemas/token-types/font-weight.json +26 -0
- package/schemas/token-types/gradient-stop.json +27 -0
- package/schemas/token-types/multiplier.json +26 -0
- package/schemas/token-types/opacity.json +26 -0
- package/schemas/token-types/scale-set.json +61 -0
- package/schemas/token-types/set.json +22 -0
- package/schemas/token-types/system-set.json +83 -0
- package/schemas/token-types/text-align.json +27 -0
- package/schemas/token-types/text-transform.json +26 -0
- package/schemas/token-types/token.json +39 -0
- package/src/color-aliases.json +1002 -86
- package/src/color-component.json +246 -22
- package/src/color-palette.json +2757 -512
- package/src/icons.json +988 -16
- package/src/layout-component.json +5727 -781
- package/src/layout.json +901 -170
- package/src/semantic-color-palette.json +205 -1
- package/src/typography.json +583 -89
- package/tasks/addIds.js +5 -8
- package/tasks/addPrivate.js +22 -0
- package/tasks/buildManifest.js +1 -1
- package/tasks/buildSpectrumTokens.js +1 -1
- package/tasks/deprecateExpress.js +1 -1
- package/tasks/diff.js +19 -5
- package/tasks/lib/augmentExpressTokens.js +1 -1
- package/test/checkComponentProps.js +29 -0
- package/test/checkId.test.js +24 -38
- package/test/checkManifest.test.js +1 -1
- package/test/checkPrivate.js +22 -0
- package/test/checkSetsUnique.js +54 -0
- package/test/checkUniqueTokenNames.js +32 -0
- package/test/componentSchemaValidator.test.js +74 -0
- package/test/deprecateExpress.test.js +1 -1
- package/test/drover.test.js +1 -1
- package/test/schemaValidator.test.js +1 -1
- package/test/schemaValidators/alias.test.js +41 -0
- package/test/tokenSchemaValidator.test.js +97 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,2392 @@
|
|
|
1
1
|
# @adobe/spectrum-tokens
|
|
2
2
|
|
|
3
|
+
## 13.0.0-beta.51
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#441](https://github.com/adobe/spectrum-tokens/pull/441) [`89949e4`](https://github.com/adobe/spectrum-tokens/commit/89949e4d0008baacec05359a83620fa45e35cf5e) Thanks [@GarthDB](https://github.com/GarthDB)! - Change takeover dialog dimensions to use percentages which were previously converted to ems by mistake.
|
|
8
|
+
|
|
9
|
+
## Token Diff
|
|
10
|
+
|
|
11
|
+
**Updated Tokens (2):**
|
|
12
|
+
|
|
13
|
+
- `takeover-dialog-height`: `1.00em` -> `1.00%`
|
|
14
|
+
- `takeover-dialog-width`: `1.00em` -> `1.00%`
|
|
15
|
+
|
|
16
|
+
## 13.0.0-beta.50
|
|
17
|
+
|
|
18
|
+
### Minor Changes
|
|
19
|
+
|
|
20
|
+
- [#425](https://github.com/adobe/spectrum-tokens/pull/425) [`91f4536`](https://github.com/adobe/spectrum-tokens/commit/91f4536a416cf6c9e5b0b423bf3ead3233e808fc) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - Adding S2 tokens for number field and takeover dialog components.
|
|
21
|
+
|
|
22
|
+
## Token Diff
|
|
23
|
+
|
|
24
|
+
_Tokens added (16):_
|
|
25
|
+
|
|
26
|
+
- `in-field-stepper-to-end-extra-large`
|
|
27
|
+
- `in-field-stepper-to-end-large`
|
|
28
|
+
- `in-field-stepper-to-end-medium`
|
|
29
|
+
- `in-field-stepper-to-end-small`
|
|
30
|
+
- `number-field-minimum-width-multiplier`
|
|
31
|
+
- `number-field-visual-to-in-field-stepper-extra-large`
|
|
32
|
+
- `number-field-visual-to-in-field-stepper-large`
|
|
33
|
+
- `number-field-visual-to-in-field-stepper-medium`
|
|
34
|
+
- `number-field-visual-to-in-field-stepper-small`
|
|
35
|
+
- `number-field-with-stepper-minimum-width-extra-large`
|
|
36
|
+
- `number-field-with-stepper-minimum-width-large`
|
|
37
|
+
- `number-field-with-stepper-minimum-width-medium`
|
|
38
|
+
- `number-field-with-stepper-minimum-width-small`
|
|
39
|
+
- `takeover-dialog-height`
|
|
40
|
+
- `takeover-dialog-width`
|
|
41
|
+
- `window-to-edge`
|
|
42
|
+
|
|
43
|
+
## 13.0.0-beta.49
|
|
44
|
+
|
|
45
|
+
### Minor Changes
|
|
46
|
+
|
|
47
|
+
- [#418](https://github.com/adobe/spectrum-tokens/pull/418) [`45ed87b`](https://github.com/adobe/spectrum-tokens/commit/45ed87b43af53370f74fc46c545b4c13005f381c) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - ## Design Motivation
|
|
48
|
+
|
|
49
|
+
Made the following changes to component typography tokens for both mobile and desktop.
|
|
50
|
+
|
|
51
|
+
## Token Diff
|
|
52
|
+
|
|
53
|
+
_Tokens added (2):_
|
|
54
|
+
|
|
55
|
+
- `heading-cjk-size-xxxxl`
|
|
56
|
+
- `heading-size-xxxxl`
|
|
57
|
+
|
|
58
|
+
_Tokens changed (7):_
|
|
59
|
+
|
|
60
|
+
- `heading-sans-serif-font-weight`: `bold-font-weight` -> `extra-bold-font-weight`
|
|
61
|
+
- `heading-cjk-heavy-font-weight`: `black-font-weight` -> `extra-bold-font-weight`
|
|
62
|
+
- `heading-sans-serif-emphasized-font-weight`: `bold-font-weight` -> `extra-bold-font-weight`
|
|
63
|
+
- `heading-size-s`: `font-size-300` -> `font-size-400`
|
|
64
|
+
- `heading-size-xs`: `font-size-200` -> `font-size-300`
|
|
65
|
+
- `heading-cjk-size-xxxl`: `font-size-1300` -> `font-size-1200`
|
|
66
|
+
- `heading-cjk-size-xxl`: `font-size-900` -> `font-size-1000`
|
|
67
|
+
|
|
68
|
+
- [#422](https://github.com/adobe/spectrum-tokens/pull/422) [`4673d13`](https://github.com/adobe/spectrum-tokens/commit/4673d1383602d81484ae346dd278a28a26f5d91b) Thanks [@GarthDB](https://github.com/GarthDB)! - Added tokens for s2 detail typography
|
|
69
|
+
|
|
70
|
+
_New tokens (6)_
|
|
71
|
+
|
|
72
|
+
- `detail-cjk-size-xs`
|
|
73
|
+
- `detail-cjk-size-s`
|
|
74
|
+
- `detail-cjk-size-m`
|
|
75
|
+
- `detail-cjk-size-l`
|
|
76
|
+
- `detail-cjk-size-xl`
|
|
77
|
+
- `detail-size-xs`
|
|
78
|
+
|
|
79
|
+
_Updated token values (13)_
|
|
80
|
+
|
|
81
|
+
- `detail-sans-serif-font-weight`: `bold-font-weight` -> `medium-font-weight`
|
|
82
|
+
- `detail-serif-font-weight`: `bold-font-weight` -> `medium-font-weight`
|
|
83
|
+
- `detail-cjk-font-weight`: `extra-bold-font-weight` -> `bold-font-weight`
|
|
84
|
+
- `detail-cjk-strong-font-weight`: `black-font-weight` -> `extra-bold-font-weight`
|
|
85
|
+
- `detail-sans-serif-emphasized-font-weight`: `bold-font-weight` -> `regular-font-weight`
|
|
86
|
+
- `detail-serif-emphasized-font-weight`: `bold-font-weight` -> `medium-font-weight`
|
|
87
|
+
- `detail-cjk-emphasized-font-weight`: `black-font-weight` -> `extra-bold-font-weight`
|
|
88
|
+
- `detail-cjk-strong-emphasized-font-weight`: `black-font-weight` -> `extra-bold-font-weight`
|
|
89
|
+
- `detail-size-xl`: `font-size-200` -> `font-size-300`
|
|
90
|
+
- `detail-size-l`: `font-size-100` -> `font-size-200`
|
|
91
|
+
- `detail-size-m`: `font-size-75` -> `font-size-100`
|
|
92
|
+
- `detail-size-s`: `font-size-50` -> `font-size-75`
|
|
93
|
+
- `detail-color`: `gray-900` -> `gray-600`
|
|
94
|
+
|
|
95
|
+
## 13.0.0-beta.48
|
|
96
|
+
|
|
97
|
+
### Minor Changes
|
|
98
|
+
|
|
99
|
+
- [#415](https://github.com/adobe/spectrum-tokens/pull/415) [`caca973`](https://github.com/adobe/spectrum-tokens/commit/caca973300d34fc688fb828633b1da2ba8284990) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - 1. New typography tokens:
|
|
100
|
+
|
|
101
|
+
- Letter spacing, text-align, cjk
|
|
102
|
+
|
|
103
|
+
1. New gradient stop tokens
|
|
104
|
+
1. New component tokens for bar panel, rating, segmented control, slider, select box
|
|
105
|
+
1. New static color tokens
|
|
106
|
+
|
|
107
|
+
_Tokens added (51):_
|
|
108
|
+
|
|
109
|
+
- `letter-spacing`
|
|
110
|
+
- `text-align-start`
|
|
111
|
+
- `text-align-center`
|
|
112
|
+
- `text-align-end`
|
|
113
|
+
- `body-size-xxs`
|
|
114
|
+
- `body-cjk-size-xxxl`
|
|
115
|
+
- `body-cjk-size-xxl`
|
|
116
|
+
- `body-cjk-size-xl`
|
|
117
|
+
- `body-cjk-size-l`
|
|
118
|
+
- `body-cjk-size-m`
|
|
119
|
+
- `body-cjk-size-s`
|
|
120
|
+
- `body-cjk-size-xs`
|
|
121
|
+
- `body-cjk-size-xxs`
|
|
122
|
+
- `gradient-stop-1-genai`
|
|
123
|
+
- `gradient-stop-2-genai`
|
|
124
|
+
- `gradient-stop-3-genai`
|
|
125
|
+
- `gradient-stop-1-premium`
|
|
126
|
+
- `gradient-stop-2-premium`
|
|
127
|
+
- `gradient-stop-3-premium`
|
|
128
|
+
- `bar-panel-width`
|
|
129
|
+
- `bar-panel-minimum-width`
|
|
130
|
+
- `bar-panel-maximum-width`
|
|
131
|
+
- `bar-panel-spacing-extra-spacious`
|
|
132
|
+
- `rating-top-to-content-area-small`
|
|
133
|
+
- `rating-bottom-to-content-area-small`
|
|
134
|
+
- `rating-edge-to-content-area-small`
|
|
135
|
+
- `rating-top-to-content-area-medium`
|
|
136
|
+
- `rating-bottom-to-content-area-medium`
|
|
137
|
+
- `rating-edge-to-content-area-medium`
|
|
138
|
+
- `rating-width-small`
|
|
139
|
+
- `rating-height-small`
|
|
140
|
+
- `rating-width-medium`
|
|
141
|
+
- `rating-height-medium`
|
|
142
|
+
- `segmented-control-selection-border-width`
|
|
143
|
+
- `slider-handle-precision-width`
|
|
144
|
+
- `slider-track-height-medium`
|
|
145
|
+
- `slider-track-height-large`
|
|
146
|
+
- `segmented-control-item-height`
|
|
147
|
+
- `static-blue-900`
|
|
148
|
+
- `static-blue-1000`
|
|
149
|
+
- `static-fuchsia-900`
|
|
150
|
+
- `static-fuchsia-1000`
|
|
151
|
+
- `static-indigo-900`
|
|
152
|
+
- `static-indigo-1000`
|
|
153
|
+
- `static-magenta-900`
|
|
154
|
+
- `static-magenta-1000`
|
|
155
|
+
- `static-red-900`
|
|
156
|
+
- `static-red-1000`
|
|
157
|
+
- `bar-panel-gripper-color`
|
|
158
|
+
- `bar-panel-gripper-color-drag`
|
|
159
|
+
- `select-box-selected-border-color`
|
|
160
|
+
|
|
161
|
+
_Token values updated (9):_
|
|
162
|
+
|
|
163
|
+
- `font-size-1200`
|
|
164
|
+
- `desktop`: `50px` -> `51px`
|
|
165
|
+
- `font-size-1300`
|
|
166
|
+
- `desktop`: `60px` -> `58px`
|
|
167
|
+
- `cjk-letter-spacing`: `0.05em` -> `letter-spacing`
|
|
168
|
+
- `body-cjk-strong-font-weight`: `black-font-weight` -> `extra-bold-font-weight`
|
|
169
|
+
- `body-cjk-strong-emphasized-font-weight`: `black-font-weight` -> `extra-bold-font-weight`
|
|
170
|
+
- `slider-control-to-field-label-small`
|
|
171
|
+
- `desktop`: `5px` -> `-4px`
|
|
172
|
+
- `mobile`: `6px` -> `-8px`
|
|
173
|
+
- `slider-control-to-field-label-medium`
|
|
174
|
+
- `desktop`: `8px` -> `-12px`
|
|
175
|
+
- `mobile`: `10px` -> `-16px`
|
|
176
|
+
- `slider-control-to-field-label-large`
|
|
177
|
+
- `desktop`: `11px` -> `-16px`
|
|
178
|
+
- `mobile`: `14px` -> `-20px`
|
|
179
|
+
- `slider-control-to-field-label-extra-large`
|
|
180
|
+
- `desktop`: `14px` -> `-20px`
|
|
181
|
+
- `mobile`: `17px` -> `-28px`
|
|
182
|
+
|
|
183
|
+
## 13.0.0-beta.47
|
|
184
|
+
|
|
185
|
+
### Minor Changes
|
|
186
|
+
|
|
187
|
+
- [`75a573b`](https://github.com/adobe/spectrum-tokens/commit/75a573bcbb7b71ecdf5f246682755de24dae5afc) Thanks [@GarthDB](https://github.com/GarthDB)! - S2 subtle and visual colors update
|
|
188
|
+
Updated S2 Table tokens
|
|
189
|
+
|
|
190
|
+
<details><summary>Tokens added (42):</summary>
|
|
191
|
+
|
|
192
|
+
- `illustrated-message-maximum-width`
|
|
193
|
+
- `side-focus-indicator`
|
|
194
|
+
- `table-row-bottom-to-text-extra-large`
|
|
195
|
+
- `table-row-bottom-to-text-extra-large-regular`
|
|
196
|
+
- `table-row-bottom-to-text-large`
|
|
197
|
+
- `table-row-bottom-to-text-large-regular`
|
|
198
|
+
- `table-row-bottom-to-text-medium`
|
|
199
|
+
- `table-row-bottom-to-text-medium-regular`
|
|
200
|
+
- `table-row-bottom-to-text-small`
|
|
201
|
+
- `table-row-bottom-to-text-small-regular`
|
|
202
|
+
- `table-row-checkbox-to-top-extra-large`
|
|
203
|
+
- `table-row-checkbox-to-top-extra-large-regular`
|
|
204
|
+
- `table-row-checkbox-to-top-large`
|
|
205
|
+
- `table-row-checkbox-to-top-large-regular`
|
|
206
|
+
- `table-row-checkbox-to-top-medium`
|
|
207
|
+
- `table-row-checkbox-to-top-medium-regular`
|
|
208
|
+
- `table-row-checkbox-to-top-small`
|
|
209
|
+
- `table-row-checkbox-to-top-small-regular`
|
|
210
|
+
- `table-row-height-extra-large`
|
|
211
|
+
- `table-row-height-extra-large-regular`
|
|
212
|
+
- `table-row-height-large`
|
|
213
|
+
- `table-row-height-large-regular`
|
|
214
|
+
- `table-row-height-medium`
|
|
215
|
+
- `table-row-height-medium-regular`
|
|
216
|
+
- `table-row-height-small`
|
|
217
|
+
- `table-row-height-small-regular`
|
|
218
|
+
- `table-row-top-to-text-extra-large`
|
|
219
|
+
- `table-row-top-to-text-extra-large-regular`
|
|
220
|
+
- `table-row-top-to-text-large`
|
|
221
|
+
- `table-row-top-to-text-large-regular`
|
|
222
|
+
- `table-row-top-to-text-medium`
|
|
223
|
+
- `table-row-top-to-text-medium-regular`
|
|
224
|
+
- `table-row-top-to-text-small`
|
|
225
|
+
- `table-row-top-to-text-small-regular`
|
|
226
|
+
- `table-thumbnail-to-top-minimum-extra-large`
|
|
227
|
+
- `table-thumbnail-to-top-minimum-extra-large-regular`
|
|
228
|
+
- `table-thumbnail-to-top-minimum-large`
|
|
229
|
+
- `table-thumbnail-to-top-minimum-large-regular`
|
|
230
|
+
- `table-thumbnail-to-top-minimum-medium`
|
|
231
|
+
- `table-thumbnail-to-top-minimum-medium-regular`
|
|
232
|
+
- `table-thumbnail-to-top-minimum-small`
|
|
233
|
+
- `table-thumbnail-to-top-minimum-small-regular`
|
|
234
|
+
|
|
235
|
+
</details>
|
|
236
|
+
|
|
237
|
+
<details><summary>Tokens updated (101):</summary>
|
|
238
|
+
|
|
239
|
+
- `informative-subtle-background-color-default`
|
|
240
|
+
- light: `blue-200` -> `informative-color-200`
|
|
241
|
+
- dark: `blue-200` -> `informative-color-300`
|
|
242
|
+
- `positive-subtle-background-color-default`
|
|
243
|
+
- light: `green-200` -> `positive-color-200`
|
|
244
|
+
- dark: `green-200` -> `positive-color-300`
|
|
245
|
+
- `notice-subtle-background-color-default`
|
|
246
|
+
- light: `orange-200` -> `notice-color-200`
|
|
247
|
+
- dark: `orange-200` -> `notice-color-300`
|
|
248
|
+
- `negative-subtle-background-color-default`
|
|
249
|
+
- light: `red-200` -> `negative-color-200`
|
|
250
|
+
- dark: `red-200` -> `negative-color-300`
|
|
251
|
+
- `table-column-header-row-top-to-text-medium`
|
|
252
|
+
- desktop: `7px` -> `6px`
|
|
253
|
+
- `table-row-height-small-regular`
|
|
254
|
+
- desktop: `32px` -> `table-row-height-small`
|
|
255
|
+
- mobile: `40px` -> `table-row-height-small`
|
|
256
|
+
- `table-row-height-medium-regular`
|
|
257
|
+
- desktop: `40px` -> `table-row-height-medium`
|
|
258
|
+
- mobile: `50px` -> `table-row-height-medium`
|
|
259
|
+
- `table-row-height-large-regular`
|
|
260
|
+
- desktop: `48px` -> `table-row-height-large`
|
|
261
|
+
- mobile: `60px` -> `table-row-height-large`
|
|
262
|
+
- `table-row-height-extra-large-regular`
|
|
263
|
+
- desktop: `56px` -> `table-row-height-extra-large`
|
|
264
|
+
- mobile: `70px` -> `table-row-height-extra-large`
|
|
265
|
+
- `table-row-top-to-text-small-regular`
|
|
266
|
+
- desktop: `8px` -> `table-row-top-to-text-small`
|
|
267
|
+
- mobile: `10px` -> `table-row-top-to-text-small`
|
|
268
|
+
- `table-row-top-to-text-medium-regular`
|
|
269
|
+
- desktop: `11px` -> `table-row-top-to-text-medium`
|
|
270
|
+
- mobile: `14px` -> `table-row-top-to-text-medium`
|
|
271
|
+
- `table-row-top-to-text-large-regular`
|
|
272
|
+
- desktop: `14px` -> `table-row-top-to-text-large`
|
|
273
|
+
- mobile: `18px` -> `table-row-top-to-text-large`
|
|
274
|
+
- `table-row-top-to-text-extra-large-regular`
|
|
275
|
+
- desktop: `17px` -> `table-row-top-to-text-extra-large`
|
|
276
|
+
- mobile: `21px` -> `table-row-top-to-text-extra-large`
|
|
277
|
+
- `table-row-bottom-to-text-small-regular`
|
|
278
|
+
- desktop: `9px` -> `table-row-bottom-to-text-small`
|
|
279
|
+
- mobile: `11px` -> `table-row-bottom-to-text-small`
|
|
280
|
+
- `table-row-bottom-to-text-medium-regular`
|
|
281
|
+
- desktop: `12px` -> `table-row-bottom-to-text-medium`
|
|
282
|
+
- mobile: `15px` -> `table-row-bottom-to-text-medium`
|
|
283
|
+
- `table-row-bottom-to-text-large-regular`
|
|
284
|
+
- desktop: `14px` -> `table-row-bottom-to-text-large`
|
|
285
|
+
- mobile: `18px` -> `table-row-bottom-to-text-large`
|
|
286
|
+
- `table-row-bottom-to-text-extra-large-regular`
|
|
287
|
+
- desktop: `17px` -> `table-row-bottom-to-text-extra-large`
|
|
288
|
+
- mobile: `22px` -> `table-row-bottom-to-text-extra-large`
|
|
289
|
+
- `table-row-top-to-text-medium-spacious`
|
|
290
|
+
- mobile: `18px` -> `16px`
|
|
291
|
+
- `table-header-row-checkbox-to-top-medium`
|
|
292
|
+
- desktop: `9px` -> `8px`
|
|
293
|
+
- mobile: `13px` -> `11px`
|
|
294
|
+
- `table-row-checkbox-to-top-small-regular`
|
|
295
|
+
- desktop: `10px` -> `table-row-checkbox-to-top-small`
|
|
296
|
+
- mobile: `14px` -> `table-row-checkbox-to-top-small`
|
|
297
|
+
- `table-row-checkbox-to-top-medium-compact`
|
|
298
|
+
- desktop: `9px` -> `8px`
|
|
299
|
+
- mobile: `13px` -> `11px`
|
|
300
|
+
- `table-row-checkbox-to-top-medium-regular`
|
|
301
|
+
- desktop: `13px` -> `table-row-checkbox-to-top-medium`
|
|
302
|
+
- mobile: `18px` -> `table-row-checkbox-to-top-medium`
|
|
303
|
+
- `table-row-checkbox-to-top-medium-spacious`
|
|
304
|
+
- desktop: `17px` -> `16px`
|
|
305
|
+
- mobile: `23px` -> `21px`
|
|
306
|
+
- `table-row-checkbox-to-top-large-regular`
|
|
307
|
+
- desktop: `16px` -> `table-row-checkbox-to-top-large`
|
|
308
|
+
- mobile: `22px` -> `table-row-checkbox-to-top-large`
|
|
309
|
+
- `table-row-checkbox-to-top-extra-large-regular`
|
|
310
|
+
- desktop: `19px` -> `table-row-checkbox-to-top-extra-large`
|
|
311
|
+
- mobile: `26px` -> `table-row-checkbox-to-top-extra-large`
|
|
312
|
+
- `table-thumbnail-to-top-minimum-small-regular`
|
|
313
|
+
- desktop: `5px` -> `table-thumbnail-to-top-minimum-small`
|
|
314
|
+
- mobile: `6px` -> `table-thumbnail-to-top-minimum-small`
|
|
315
|
+
- `table-thumbnail-to-top-minimum-medium-regular`
|
|
316
|
+
- desktop: `7px` -> `table-thumbnail-to-top-minimum-medium`
|
|
317
|
+
- mobile: `9px` -> `table-thumbnail-to-top-minimum-medium`
|
|
318
|
+
- `table-thumbnail-to-top-minimum-large-regular`
|
|
319
|
+
- desktop: `8px` -> `table-thumbnail-to-top-minimum-large`
|
|
320
|
+
- mobile: `10px` -> `table-thumbnail-to-top-minimum-large`
|
|
321
|
+
- `table-thumbnail-to-top-minimum-extra-large-regular`
|
|
322
|
+
- desktop: `8px` -> `table-thumbnail-to-top-minimum-extra-large`
|
|
323
|
+
- mobile: `10px` -> `table-thumbnail-to-top-minimum-extra-large`
|
|
324
|
+
- `blue-800`
|
|
325
|
+
- dark: `rgb(69, 110, 254)` -> `rgb(64, 105, 253)`
|
|
326
|
+
- `red-800`
|
|
327
|
+
- dark: `rgb(230, 54, 35)` -> `rgb(223, 52, 34)`
|
|
328
|
+
- `orange-800`
|
|
329
|
+
- dark: `rgb(205, 86, 0)` -> `rgb(199, 82, 0)`
|
|
330
|
+
- `yellow-800`
|
|
331
|
+
- dark: `rgb(169, 110, 0)` -> `rgb(164, 106, 0)`
|
|
332
|
+
- `chartreuse-800`
|
|
333
|
+
- dark: `rgb(109, 131, 0)` -> `rgb(106, 127, 0)`
|
|
334
|
+
- `celery-800`
|
|
335
|
+
- dark: `rgb(69, 138, 19)` -> `rgb(66, 134, 18)`
|
|
336
|
+
- `green-800`
|
|
337
|
+
- dark: `rgb(6, 140, 82)` -> `rgb(6, 136, 80)`
|
|
338
|
+
- `seafoam-800`
|
|
339
|
+
- dark: `rgb(8, 138, 116)` -> `rgb(8, 134, 112)`
|
|
340
|
+
- `cyan-800`
|
|
341
|
+
- dark: `rgb(15, 128, 194)` -> `rgb(13, 125, 186)`
|
|
342
|
+
- `indigo-800`
|
|
343
|
+
- dark: `rgb(119, 97, 252)` -> `rgb(116, 91, 252)`
|
|
344
|
+
- `purple-800`
|
|
345
|
+
- dark: `rgb(161, 84, 229)` -> `rgb(157, 78, 228)`
|
|
346
|
+
- `fuchsia-800`
|
|
347
|
+
- dark: `rgb(192, 64, 212)` -> `rgb(186, 60, 206)`
|
|
348
|
+
- `magenta-800`
|
|
349
|
+
- dark: `rgb(231, 41, 105)` -> `rgb(224, 38, 101)`
|
|
350
|
+
- `pink-800`
|
|
351
|
+
- dark: `rgb(220, 47, 156)` -> `rgb(213, 45, 151)`
|
|
352
|
+
- `turquoise-800`
|
|
353
|
+
- dark: `rgb(9, 135, 147)` -> `rgb(9, 131, 142)`
|
|
354
|
+
- `brown-800`
|
|
355
|
+
- dark: `rgb(148, 118, 73)` -> `rgb(143, 114, 69)`
|
|
356
|
+
- `silver-800`
|
|
357
|
+
- dark: `rgb(123, 123, 123)` -> `rgb(118, 118, 118)`
|
|
358
|
+
- `cinnamon-800`
|
|
359
|
+
- dark: `rgb(179, 103, 64)` -> `rgb(176, 98, 59)`
|
|
360
|
+
- `accent-background-color-default`
|
|
361
|
+
- dark: `accent-color-700` -> `accent-color-800`
|
|
362
|
+
- `accent-background-color-hover`
|
|
363
|
+
- dark: `accent-color-600` -> `accent-color-700`
|
|
364
|
+
- `accent-background-color-down`
|
|
365
|
+
- dark: `accent-color-600` -> `accent-color-700`
|
|
366
|
+
- `accent-background-color-key-focus`
|
|
367
|
+
- dark: `accent-color-600` -> `accent-color-700`
|
|
368
|
+
- `informative-background-color-default`
|
|
369
|
+
- dark: `informative-color-700` -> `informative-color-800`
|
|
370
|
+
- `informative-background-color-hover`
|
|
371
|
+
- dark: `informative-color-600` -> `informative-color-700`
|
|
372
|
+
- `informative-background-color-down`
|
|
373
|
+
- dark: `informative-color-600` -> `informative-color-700`
|
|
374
|
+
- `informative-background-color-key-focus`
|
|
375
|
+
- dark: `informative-color-600` -> `informative-color-700`
|
|
376
|
+
- `negative-background-color-default`
|
|
377
|
+
- dark: `negative-color-700` -> `negative-color-800`
|
|
378
|
+
- `negative-background-color-hover`
|
|
379
|
+
- dark: `negative-color-600` -> `negative-color-700`
|
|
380
|
+
- `negative-background-color-down`
|
|
381
|
+
- dark: `negative-color-600` -> `negative-color-700`
|
|
382
|
+
- `negative-background-color-key-focus`
|
|
383
|
+
- dark: `negative-color-600` -> `negative-color-700`
|
|
384
|
+
- `positive-background-color-default`
|
|
385
|
+
- dark: `positive-color-700` -> `positive-color-800`
|
|
386
|
+
- `positive-background-color-hover`
|
|
387
|
+
- dark: `positive-color-600` -> `positive-color-700`
|
|
388
|
+
- `positive-background-color-down`
|
|
389
|
+
- dark: `positive-color-600` -> `positive-color-700`
|
|
390
|
+
- `positive-background-color-key-focus`
|
|
391
|
+
- dark: `positive-color-600` -> `positive-color-700`
|
|
392
|
+
- `red-background-color-default`
|
|
393
|
+
- dark: `red-700` -> `red-800`
|
|
394
|
+
- `green-background-color-default`
|
|
395
|
+
- dark: `green-700` -> `green-800`
|
|
396
|
+
- `seafoam-background-color-default`
|
|
397
|
+
- dark: `seafoam-700` -> `seafoam-800`
|
|
398
|
+
- `cyan-background-color-default`
|
|
399
|
+
- dark: `cyan-700` -> `cyan-800`
|
|
400
|
+
- `blue-background-color-default`
|
|
401
|
+
- dark: `blue-700` -> `blue-800`
|
|
402
|
+
- `indigo-background-color-default`
|
|
403
|
+
- dark: `indigo-700` -> `indigo-800`
|
|
404
|
+
- `purple-background-color-default`
|
|
405
|
+
- dark: `purple-700` -> `purple-800`
|
|
406
|
+
- `fuchsia-background-color-default`
|
|
407
|
+
- dark: `fuchsia-700` -> `fuchsia-800`
|
|
408
|
+
- `magenta-background-color-default`
|
|
409
|
+
- dark: `magenta-700` -> `magenta-800`
|
|
410
|
+
- `negative-visual-color`
|
|
411
|
+
- dark: `negative-color-700` -> `negative-color-900`
|
|
412
|
+
- `notice-visual-color`
|
|
413
|
+
- light: `notice-color-700` -> `notice-color-800`
|
|
414
|
+
- `positive-visual-color`
|
|
415
|
+
- light: `positive-color-700` -> `positive-color-800`
|
|
416
|
+
- dark: `positive-color-800` -> `positive-color-900`
|
|
417
|
+
- `brown-background-color-default`
|
|
418
|
+
- dark: `brown-700` -> `brown-800`
|
|
419
|
+
- `cinnamon-background-color-default`
|
|
420
|
+
- dark: `cinnamon-700` -> `cinnamon-800`
|
|
421
|
+
- `pink-background-color-default`
|
|
422
|
+
- dark: `pink-700` -> `pink-800`
|
|
423
|
+
- `silver-background-color-default`
|
|
424
|
+
- dark: `silver-700` -> `silver-800`
|
|
425
|
+
- `turquoise-background-color-default`
|
|
426
|
+
- dark: `turquoise-700` -> `turquoise-800`
|
|
427
|
+
- `neutral-subtle-background-color-default`
|
|
428
|
+
- light: `gray-100` -> `gray-100`
|
|
429
|
+
- dark: `gray-100` -> `gray-300`
|
|
430
|
+
- `accent-subtle-background-color-default`
|
|
431
|
+
- light: `rgba(0, 0, 0, 0.2)` -> `accent-color-200`
|
|
432
|
+
- dark: `rgba(0, 0, 0, 0.6)` -> `accent-color-300`
|
|
433
|
+
- `gray-subtle-background-color-default`
|
|
434
|
+
- light: `rgba(0, 0, 0, 0.2)` -> `gray-100`
|
|
435
|
+
- dark: `rgba(0, 0, 0, 0.6)` -> `gray-300`
|
|
436
|
+
- `blue-subtle-background-color-default`
|
|
437
|
+
- light: `rgba(0, 0, 0, 0.2)` -> `blue-200`
|
|
438
|
+
- dark: `rgba(0, 0, 0, 0.6)` -> `blue-300`
|
|
439
|
+
- `green-subtle-background-color-default`
|
|
440
|
+
- light: `rgba(0, 0, 0, 0.2)` -> `green-200`
|
|
441
|
+
- dark: `rgba(0, 0, 0, 0.6)` -> `green-300`
|
|
442
|
+
- `orange-subtle-background-color-default`
|
|
443
|
+
- light: `rgba(0, 0, 0, 0.2)` -> `orange-200`
|
|
444
|
+
- dark: `rgba(0, 0, 0, 0.6)` -> `orange-300`
|
|
445
|
+
- `red-subtle-background-color-default`
|
|
446
|
+
- light: `rgba(0, 0, 0, 0.2)` -> `red-200`
|
|
447
|
+
- dark: `rgba(0, 0, 0, 0.6)` -> `red-300`
|
|
448
|
+
- `brown-subtle-background-color-default`
|
|
449
|
+
- light: `rgba(0, 0, 0, 0.2)` -> `brown-200`
|
|
450
|
+
- dark: `rgba(0, 0, 0, 0.6)` -> `brown-300`
|
|
451
|
+
- `cinnamon-subtle-background-color-default`
|
|
452
|
+
- light: `rgba(0, 0, 0, 0.2)` -> `cinnamon-200`
|
|
453
|
+
- dark: `rgba(0, 0, 0, 0.6)` -> `cinnamon-300`
|
|
454
|
+
- `celery-subtle-background-color-default`
|
|
455
|
+
- light: `rgba(0, 0, 0, 0.2)` -> `celery-200`
|
|
456
|
+
- dark: `rgba(0, 0, 0, 0.6)` -> `celery-300`
|
|
457
|
+
- `chartreuse-subtle-background-color-default`
|
|
458
|
+
- light: `rgba(0, 0, 0, 0.2)` -> `chartreuse-200`
|
|
459
|
+
- dark: `rgba(0, 0, 0, 0.6)` -> `chartreuse-300`
|
|
460
|
+
- `cyan-subtle-background-color-default`
|
|
461
|
+
- light: `rgba(0, 0, 0, 0.2)` -> `cyan-200`
|
|
462
|
+
- dark: `rgba(0, 0, 0, 0.6)` -> `cyan-300`
|
|
463
|
+
- `fuchsia-subtle-background-color-default`
|
|
464
|
+
- light: `rgba(0, 0, 0, 0.2)` -> `fuchsia-200`
|
|
465
|
+
- dark: `rgba(0, 0, 0, 0.6)` -> `fuchsia-300`
|
|
466
|
+
- `indigo-subtle-background-color-default`
|
|
467
|
+
- light: `rgba(0, 0, 0, 0.2)` -> `indigo-200`
|
|
468
|
+
- dark: `rgba(0, 0, 0, 0.6)` -> `indigo-300`
|
|
469
|
+
- `magenta-subtle-background-color-default`
|
|
470
|
+
- light: `rgba(0, 0, 0, 0.2)` -> `magenta-200`
|
|
471
|
+
- dark: `rgba(0, 0, 0, 0.6)` -> `magenta-300`
|
|
472
|
+
- `pink-subtle-background-color-default`
|
|
473
|
+
- light: `rgba(0, 0, 0, 0.2)` -> `pink-200`
|
|
474
|
+
- dark: `rgba(0, 0, 0, 0.6)` -> `pink-300`
|
|
475
|
+
- `purple-subtle-background-color-default`
|
|
476
|
+
- light: `rgba(0, 0, 0, 0.2)` -> `purple-200`
|
|
477
|
+
- dark: `rgba(0, 0, 0, 0.6)` -> `purple-300`
|
|
478
|
+
- `seafoam-subtle-background-color-default`
|
|
479
|
+
- light: `rgba(0, 0, 0, 0.2)` -> `seafoam-200`
|
|
480
|
+
- dark: `rgba(0, 0, 0, 0.6)` -> `seafoam-300`
|
|
481
|
+
- `silver-subtle-background-color-default`
|
|
482
|
+
- light: `rgba(0, 0, 0, 0.2)` -> `silver-200`
|
|
483
|
+
- dark: `rgba(0, 0, 0, 0.6)` -> `silver-300`
|
|
484
|
+
- `turquoise-subtle-background-color-default`
|
|
485
|
+
- light: `rgba(0, 0, 0, 0.2)` -> `turquoise-200`
|
|
486
|
+
- dark: `rgba(0, 0, 0, 0.6)` -> `turquoise-300`
|
|
487
|
+
- `yellow-subtle-background-color-default`
|
|
488
|
+
- light: `rgba(0, 0, 0, 0.2)` -> `yellow-200`
|
|
489
|
+
- dark: `rgba(0, 0, 0, 0.6)` -> `yellow-300`
|
|
490
|
+
|
|
491
|
+
</details>
|
|
492
|
+
|
|
493
|
+
## 13.0.0-beta.46
|
|
494
|
+
|
|
495
|
+
### Minor Changes
|
|
496
|
+
|
|
497
|
+
- [#396](https://github.com/adobe/spectrum-tokens/pull/396) [`4fcfe5b`](https://github.com/adobe/spectrum-tokens/commit/4fcfe5bd83214a7ca3644646bbf0f38802a20f43) Thanks [@larz0](https://github.com/larz0)! - Added brand new tokens for the S2 Standard Panel:
|
|
498
|
+
|
|
499
|
+
## Design Motivation
|
|
500
|
+
|
|
501
|
+
Added tokens needed for the new S2 standard panel component.
|
|
502
|
+
|
|
503
|
+
## Token Diff
|
|
504
|
+
|
|
505
|
+
_Tokens Added (12):_
|
|
506
|
+
|
|
507
|
+
- `standard-panel-width`
|
|
508
|
+
- `standard-panel-minimum-width`
|
|
509
|
+
- `standard-panel-maximum-width`
|
|
510
|
+
- `standard-panel-top-to-close-button-compact`
|
|
511
|
+
- `standard-panel-top-to-close-button-regular`
|
|
512
|
+
- `standard-panel-top-to-close-button-spacious`
|
|
513
|
+
- `standard-panel-edge-to-close-button-compact`
|
|
514
|
+
- `standard-panel-edge-to-close-button-regular`
|
|
515
|
+
- `standard-panel-edge-to-close-button-spacious`
|
|
516
|
+
- `standard-panel-title-font-size`
|
|
517
|
+
- `standard-panel-gripper-color`
|
|
518
|
+
- `standard-panel-gripper-color-drag`
|
|
519
|
+
|
|
520
|
+
## 13.0.0-beta.45
|
|
521
|
+
|
|
522
|
+
### Minor Changes
|
|
523
|
+
|
|
524
|
+
- [#390](https://github.com/adobe/spectrum-tokens/pull/390) [`cc9c304`](https://github.com/adobe/spectrum-tokens/commit/cc9c3048893058c3f01d6f1ce4688d8ab3716397) Thanks [@lynnhao](https://github.com/lynnhao)! - Updated code tokens for S2
|
|
525
|
+
|
|
526
|
+
## Design Motivation
|
|
527
|
+
|
|
528
|
+
These code token updates include some fixes to CJK font-weights to match the Latin font-weights when possible. We added CJK size tokens for consistency with other typography style tokens. Note that the new CJK size tokens currently point to the default code font-size tokens since Source Code Pro handles Latin and CJK sizing comparably.
|
|
529
|
+
|
|
530
|
+
## Token Diff
|
|
531
|
+
|
|
532
|
+
_Tokens added (5):_
|
|
533
|
+
|
|
534
|
+
- `code-cjk-size-l`
|
|
535
|
+
- `code-cjk-size-m`
|
|
536
|
+
- `code-cjk-size-s`
|
|
537
|
+
- `code-cjk-size-xl`
|
|
538
|
+
- `code-cjk-size-xs`
|
|
539
|
+
|
|
540
|
+
_Token values updated (2):_
|
|
541
|
+
|
|
542
|
+
- `code-cjk-strong-emphasized-font-weight`
|
|
543
|
+
- `code-cjk-strong-font-weight`
|
|
544
|
+
|
|
545
|
+
## 13.0.0-beta.44
|
|
546
|
+
|
|
547
|
+
### Minor Changes
|
|
548
|
+
|
|
549
|
+
- [#388](https://github.com/adobe/spectrum-tokens/pull/388) [`58425e6`](https://github.com/adobe/spectrum-tokens/commit/58425e67b2d4cbd716205d4d502cc823245811fe) Thanks [@lynnhao](https://github.com/lynnhao)! - Updated avatar and avatar group tokens
|
|
550
|
+
|
|
551
|
+
## Description
|
|
552
|
+
|
|
553
|
+
- Updated avatar size tokens, including all sizes from `75` to `700`
|
|
554
|
+
- Added new avatar size tokens, from `800` to `1500`
|
|
555
|
+
- Added new avatar border thickness and color tokens
|
|
556
|
+
- Added avatar group size tokens, from `50` to `500`
|
|
557
|
+
- Added avatar group spacing tokens, from `50` to `500`
|
|
558
|
+
|
|
559
|
+
## Motivation and context
|
|
560
|
+
|
|
561
|
+
- Avatar: added new sizes and updated existing sizes to better match other components and work across a variety of use cases.
|
|
562
|
+
- ⚠️ Important note: Accepting updates from this release will update the avatar sizes. The largest change in size is 8px. In some cases, you may want to relink to a new size. View the migration guide below to find the closest recommended size:
|
|
563
|
+
|
|
564
|
+
| Former avatar size | Available avatar size |
|
|
565
|
+
| :----------------- | :--------------------------------------- |
|
|
566
|
+
| size 50 (16 x 16) | size 50 (16 x 16) |
|
|
567
|
+
| size 75 (18 x 18) | size 50 (16 x 16) or size 75 (20 x 20) |
|
|
568
|
+
| size 100 (20 x 20) | size 75 (20 x 20) |
|
|
569
|
+
| size 200 (22 x 22) | size 75 (20 x 20) or size 100 (24 x 24) |
|
|
570
|
+
| size 300 (26 x 26) | size 100 (24 x 24) or size 200 (28 x 28) |
|
|
571
|
+
| size 400 (28 x 28) | size 200 (28 x 28) |
|
|
572
|
+
| size 500 (32 x 32) | size 300 (32 x 32) |
|
|
573
|
+
| size 600 (36 x 36) | size 400 (36 x 36) |
|
|
574
|
+
| size 700 (40 x 40) | size 500 (40 x 40) |
|
|
575
|
+
| -- | size 600 (44 x 44) |
|
|
576
|
+
| -- | size 700 (48 x 48) |
|
|
577
|
+
| -- | size 800 (52 x 52) |
|
|
578
|
+
| -- | size 900 (56 x 56) |
|
|
579
|
+
| -- | size 1000 (64 x 64) |
|
|
580
|
+
| -- | size 1100 (72 x 72) |
|
|
581
|
+
| -- | size 1200 (80 x 80) |
|
|
582
|
+
| -- | size 1300 (88 x 88) |
|
|
583
|
+
| -- | size 1400 (96 x 96) |
|
|
584
|
+
| -- | size 1500 (104 x 104) |
|
|
585
|
+
|
|
586
|
+
## Token Diff
|
|
587
|
+
|
|
588
|
+
_Tokens added (24):_
|
|
589
|
+
|
|
590
|
+
- `avatar-border-color`
|
|
591
|
+
- `avatar-border-width`
|
|
592
|
+
- `avatar-group-size-100`
|
|
593
|
+
- `avatar-group-size-200`
|
|
594
|
+
- `avatar-group-size-300`
|
|
595
|
+
- `avatar-group-size-400`
|
|
596
|
+
- `avatar-group-size-50`
|
|
597
|
+
- `avatar-group-size-500`
|
|
598
|
+
- `avatar-group-size-75`
|
|
599
|
+
- `avatar-size-1000`
|
|
600
|
+
- `avatar-size-1100`
|
|
601
|
+
- `avatar-size-1200`
|
|
602
|
+
- `avatar-size-1300`
|
|
603
|
+
- `avatar-size-1400`
|
|
604
|
+
- `avatar-size-1500`
|
|
605
|
+
- `avatar-size-800`
|
|
606
|
+
- `avatar-size-900`
|
|
607
|
+
- `avatar-to-avatar-100`
|
|
608
|
+
- `avatar-to-avatar-200`
|
|
609
|
+
- `avatar-to-avatar-300`
|
|
610
|
+
- `avatar-to-avatar-400`
|
|
611
|
+
- `avatar-to-avatar-50`
|
|
612
|
+
- `avatar-to-avatar-500`
|
|
613
|
+
- `avatar-to-avatar-75`
|
|
614
|
+
|
|
615
|
+
_Token values updated (8):_
|
|
616
|
+
|
|
617
|
+
- `avatar-size-100`
|
|
618
|
+
- `avatar-size-200`
|
|
619
|
+
- `avatar-size-300`
|
|
620
|
+
- `avatar-size-400`
|
|
621
|
+
- `avatar-size-500`
|
|
622
|
+
- `avatar-size-600`
|
|
623
|
+
- `avatar-size-700`
|
|
624
|
+
- `avatar-size-75`
|
|
625
|
+
|
|
626
|
+
## 13.0.0-beta.43
|
|
627
|
+
|
|
628
|
+
### Minor Changes
|
|
629
|
+
|
|
630
|
+
- [#384](https://github.com/adobe/spectrum-tokens/pull/384) [`681b4b0`](https://github.com/adobe/spectrum-tokens/commit/681b4b0094d31bae4c9b1b095fa59d6448c26cab) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - Added dragged drop shadow tokens that point to new 300 global drop shadow tokens
|
|
631
|
+
|
|
632
|
+
## Design Motivation
|
|
633
|
+
|
|
634
|
+
These are new foundational drop shadow tokens that represent a higher elevation when items are dragged. The more prominent shadow also brings more visual focus to the dragged item. They will be used in the standard panel "dragged" state, as well as in future component updates, to be determined.
|
|
635
|
+
|
|
636
|
+
## Token Diff
|
|
637
|
+
|
|
638
|
+
_Tokens added (8):_
|
|
639
|
+
|
|
640
|
+
- `drop-shadow-blur-300`
|
|
641
|
+
- `drop-shadow-color-300`
|
|
642
|
+
- `drop-shadow-dragged-blur`
|
|
643
|
+
- `drop-shadow-dragged-color`
|
|
644
|
+
- `drop-shadow-dragged-x`
|
|
645
|
+
- `drop-shadow-dragged-y`
|
|
646
|
+
- `drop-shadow-x-300`
|
|
647
|
+
- `drop-shadow-y-300`
|
|
648
|
+
|
|
649
|
+
## 13.0.0-beta.42
|
|
650
|
+
|
|
651
|
+
### Minor Changes
|
|
652
|
+
|
|
653
|
+
- [#382](https://github.com/adobe/spectrum-tokens/pull/382) [`2af3850`](https://github.com/adobe/spectrum-tokens/commit/2af3850a554812fd9c1b3e6fd902a746c9ac42c7) Thanks [@nabuhasan](https://github.com/nabuhasan)! - Updated S2 swatch tokens and added swatch-group tokens in S2 Color and S2 Non-color data sets, respectively.
|
|
654
|
+
|
|
655
|
+
## Design Motivation
|
|
656
|
+
|
|
657
|
+
Swatch and swatch group components are being formalized as Spectrum 2 components. These tokens define the design data needed for implementation. Changes include updated corner rounding, colors and spacing for spacious density.
|
|
658
|
+
|
|
659
|
+
For more information, [view Jira ticket](https://jira.corp.adobe.com/browse/SDS-13497).
|
|
660
|
+
|
|
661
|
+
## Token Diff
|
|
662
|
+
|
|
663
|
+
_Tokens added (3):_
|
|
664
|
+
|
|
665
|
+
- `swatch-group-spacing-spacious`
|
|
666
|
+
- `swatch-group-border-opacity`
|
|
667
|
+
- `swatch-group-border-color`
|
|
668
|
+
|
|
669
|
+
_Tokens values updated (3):_
|
|
670
|
+
|
|
671
|
+
- `swatch-border-color`: `gray-900` -> `gray-1000`
|
|
672
|
+
- `swatch-border-opacity`: `0.51` -> `0.42`
|
|
673
|
+
- `swatch-disabled-icon-border-opacity`: `0.51` -> `0.42`
|
|
674
|
+
|
|
675
|
+
## 13.0.0-beta.41
|
|
676
|
+
|
|
677
|
+
### Minor Changes
|
|
678
|
+
|
|
679
|
+
- [#375](https://github.com/adobe/spectrum-tokens/pull/375) [`6e3be6d`](https://github.com/adobe/spectrum-tokens/commit/6e3be6d8a458efa1752a8dd1360f03fa83f84c37) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - - [Updated thumbnail size tokens and added new tokens](https://github.com/adobe/spectrum-tokens-studio-data/pull/144)
|
|
680
|
+
|
|
681
|
+
- [Updated S2 Action bar tokens](https://github.com/adobe/spectrum-tokens-studio-data/pull/149)
|
|
682
|
+
|
|
683
|
+
## Design Motivation
|
|
684
|
+
|
|
685
|
+
Thumbnail: updated sizes in order for opacity checkerboards to translate better in implementation.
|
|
686
|
+
|
|
687
|
+
⚠️ Important note: Accepting updates from this release will update the thumbnail sizes. The change in size is no more than 4 px. In some cases, you may want to relink to a new size. View the migration guide below to find the closest recommended size:
|
|
688
|
+
|
|
689
|
+
| Former thumbnail size | Available thumbnail size |
|
|
690
|
+
| :-------------------- | :--------------------------------------- |
|
|
691
|
+
| size 50 (16 x 16) | size 50 (16 x 16) |
|
|
692
|
+
| size 75 (18 x 18) | size 75 (20 x 20) |
|
|
693
|
+
| size 100 (20 x 20) | size 75 (20 x 20) |
|
|
694
|
+
| size 200 (22 x 22) | size 100 (24 x 24) |
|
|
695
|
+
| size 300 (26 x 26) | size 200 (28 x 28) |
|
|
696
|
+
| size 400 (28 x 28) | size 200 (28 x 28) |
|
|
697
|
+
| size 500 (32 x 32) | size 300 (32 x 32) |
|
|
698
|
+
| size 600 (36 x 36) | size 400 (36 x 36) |
|
|
699
|
+
| size 700 (40 x 40) | size 500 (40 x 40) |
|
|
700
|
+
| size 800 (44 x 44) | size 600 (44 x 44) |
|
|
701
|
+
| size 900 (50 x 50) | size 700 (48 x 48) or size 800 (52 x 52) |
|
|
702
|
+
| size 1000 (56 x 56) | size 900 (56 x 56) |
|
|
703
|
+
| -- | size 1000 (64 x 64) |
|
|
704
|
+
|
|
705
|
+
Action bar: Updated S2 action bar (non-color) in respective desktop and mobile layout sets.
|
|
706
|
+
|
|
707
|
+
## Token Diff
|
|
708
|
+
|
|
709
|
+
_Tokens added (8):_
|
|
710
|
+
|
|
711
|
+
- `action-bar-top-to-content-area`
|
|
712
|
+
- `action-bar-bottom-to-content-area`
|
|
713
|
+
- `action-bar-edge-to-content-area`
|
|
714
|
+
- `action-bar-close-button-to-counter`
|
|
715
|
+
- `action-bar-counter-font-size`
|
|
716
|
+
- `thumbnail-opacity-checkerboard-square-size`
|
|
717
|
+
- `thumbnail-corner-radius`
|
|
718
|
+
- `text-to-control-50`
|
|
719
|
+
|
|
720
|
+
_Tokens updated (2):_
|
|
721
|
+
|
|
722
|
+
- `action-bar-height`
|
|
723
|
+
- `action-bar-top-to-item-counter`
|
|
724
|
+
|
|
725
|
+
_Token values updated (11):_
|
|
726
|
+
|
|
727
|
+
- `thumbnail-size-75`
|
|
728
|
+
- `desktop`: `18px` -> `20px`
|
|
729
|
+
- `mobile`: `22px` -> `24px`
|
|
730
|
+
- `thumbnail-size-100`
|
|
731
|
+
- `desktop`: `20px` -> `24px`
|
|
732
|
+
- `mobile`: `26px` -> `28px`
|
|
733
|
+
- `thumbnail-size-200`
|
|
734
|
+
- `desktop`: `22px` -> `28px`
|
|
735
|
+
- `mobile`: `28px` -> `32px`
|
|
736
|
+
- `thumbnail-size-300`
|
|
737
|
+
- `desktop`: `26px` -> `32px`
|
|
738
|
+
- `mobile`: `32px` -> `36px`
|
|
739
|
+
- `thumbnail-size-400`
|
|
740
|
+
- `desktop`: `28px` -> `36px`
|
|
741
|
+
- `mobile`: `36px` -> `40px`
|
|
742
|
+
- `thumbnail-size-500`
|
|
743
|
+
- `desktop`: `32px` -> `40px`
|
|
744
|
+
- `mobile`: `40px` -> `44px`
|
|
745
|
+
- `thumbnail-size-600`
|
|
746
|
+
- `desktop`: `36px` -> `44px`
|
|
747
|
+
- `mobile`: `46px` -> `48px`
|
|
748
|
+
- `thumbnail-size-700`
|
|
749
|
+
- `desktop`: `40px` -> `48px`
|
|
750
|
+
- `mobile`: `50px` -> `52px`
|
|
751
|
+
- `thumbnail-size-800`
|
|
752
|
+
- `desktop`: `44px` -> `52px`
|
|
753
|
+
- `mobile`: `55px` -> `56px`
|
|
754
|
+
- `thumbnail-size-900`
|
|
755
|
+
- `desktop`: `50px` -> `56px`
|
|
756
|
+
- `mobile`: `62px` -> `64px`
|
|
757
|
+
- `thumbnail-size-1000`
|
|
758
|
+
- `desktop`: `56px` -> `64px`
|
|
759
|
+
- `mobile`: `70px` -> `72px`
|
|
760
|
+
|
|
761
|
+
## 13.0.0-beta.40
|
|
762
|
+
|
|
763
|
+
### Minor Changes
|
|
764
|
+
|
|
765
|
+
- [#373](https://github.com/adobe/spectrum-tokens/pull/373) [`e04bddf`](https://github.com/adobe/spectrum-tokens/commit/e04bddf65549c87cd314b54966fe066ae649b7f7) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - - Updated S2 accordion tokens (non-color) in respective desktop and mobile layout sets
|
|
766
|
+
|
|
767
|
+
- Added S2 meter tokens, including both color and non-color.
|
|
768
|
+
|
|
769
|
+
## Design Motivation
|
|
770
|
+
|
|
771
|
+
- Accordion component is being formalized as a Spectrum 2 component. These net-new tokens define the design data needed for implementation. Introducing content-area-edge-to-content tokens enhances inclusivity for various design patterns. For more information, [view Jira ticket](https://jira.corp.adobe.com/browse/SDS-13435).
|
|
772
|
+
- Meter component is being formalized as a Spectrum 2 component. These net-new tokens define the design data needed for implementation. Introducing static tokens enables us to standardize the use of tokens across various components with indicators and tracks. This includes progress bars, progress circles, and potentially sliders in the future. For more information, [view Jira ticket](https://jira.corp.adobe.com/browse/SDS-13414).
|
|
773
|
+
|
|
774
|
+
## Token Diff
|
|
775
|
+
|
|
776
|
+
_Tokens added (18):_
|
|
777
|
+
|
|
778
|
+
- `accordion-content-area-edge-to-content-extra-large`
|
|
779
|
+
- `accordion-content-area-edge-to-content-large`
|
|
780
|
+
- `accordion-content-area-edge-to-content-medium`
|
|
781
|
+
- `accordion-content-area-edge-to-content-small`
|
|
782
|
+
- `accordion-disclosure-indicator-to-text-extra-large`
|
|
783
|
+
- `accordion-disclosure-indicator-to-text-large`
|
|
784
|
+
- `accordion-disclosure-indicator-to-text-medium`
|
|
785
|
+
- `accordion-disclosure-indicator-to-text-small`
|
|
786
|
+
- `accordion-item-to-divider`
|
|
787
|
+
- `meter-thickness-extra-large`
|
|
788
|
+
- `meter-thickness-medium`
|
|
789
|
+
- `static-black-text-color`
|
|
790
|
+
- `static-black-track-color`
|
|
791
|
+
- `static-black-track-indicator-color`
|
|
792
|
+
- `static-white-text-color`
|
|
793
|
+
- `static-white-track-color`
|
|
794
|
+
- `static-white-track-indicator-color`
|
|
795
|
+
- `track-color`
|
|
796
|
+
|
|
797
|
+
_Newly deprecated tokens (2):_
|
|
798
|
+
|
|
799
|
+
- `accordion-edge-to-disclosure-indicator`
|
|
800
|
+
- `accordion-disclosure-indicator-to-text`
|
|
801
|
+
|
|
802
|
+
_Tokens updated (1):_
|
|
803
|
+
|
|
804
|
+
- `meter-thickness-large`
|
|
805
|
+
|
|
806
|
+
## 13.0.0-beta.39
|
|
807
|
+
|
|
808
|
+
### Minor Changes
|
|
809
|
+
|
|
810
|
+
- [#364](https://github.com/adobe/spectrum-tokens/pull/364) [`f96ffca`](https://github.com/adobe/spectrum-tokens/commit/f96ffca4990547f8ddc8341d141e0edc65b872d9) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - Added coach-indicator s2 tokens
|
|
811
|
+
|
|
812
|
+
## Token Diff
|
|
813
|
+
|
|
814
|
+
_Tokens added (8):_
|
|
815
|
+
|
|
816
|
+
- `coach-indicator-collapsed-gap`
|
|
817
|
+
- `coach-indicator-collapsed-ring-rounding-increment`
|
|
818
|
+
- `coach-indicator-collapsed-ring-thickness`
|
|
819
|
+
- `coach-indicator-color`
|
|
820
|
+
- `coach-indicator-expanded-gap`
|
|
821
|
+
- `coach-indicator-expanded-ring-rounding-increment`
|
|
822
|
+
- `coach-indicator-expanded-ring-thickness`
|
|
823
|
+
- `coach-indicator-opacity`
|
|
824
|
+
|
|
825
|
+
## 13.0.0-beta.38
|
|
826
|
+
|
|
827
|
+
### Minor Changes
|
|
828
|
+
|
|
829
|
+
- [#360](https://github.com/adobe/spectrum-tokens/pull/360) [`f73a0b4`](https://github.com/adobe/spectrum-tokens/commit/f73a0b40464f1c73f2d9e8f6cf97da926e392ac7) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - - Fixed token type from Sizing to Font size for contextual-help-body-size and `contextual-help-title-size`
|
|
830
|
+
|
|
831
|
+
- Renamed tokens by deprecating previous ones and creating new ones, with font in the token name
|
|
832
|
+
Updated value of `contextual-help-title-font-size`
|
|
833
|
+
|
|
834
|
+
Marked the the following tokens in Tokens Studio for deprecation:
|
|
835
|
+
|
|
836
|
+
- `negative-subdued-background-color-default` ( --> points to `negative-subtle-background-color-default`)
|
|
837
|
+
- `negative-subdued-background-color-hover`
|
|
838
|
+
- `negative-subdued-background-color-down`
|
|
839
|
+
- `negative-subdued-background-color-key-focus`
|
|
840
|
+
|
|
841
|
+
## Design motivation
|
|
842
|
+
|
|
843
|
+
- The updated type sorts them correctly in the Tokens Studio data
|
|
844
|
+
- The updated value reflects the latest design for Spectrum 2, using the new title style instead of heading
|
|
845
|
+
- The negative-subdued tokens were deprecated because the tag "error" variant has been deprecated and are no longer needed in the system. A new "subtle" token has been added for the in-line alert use case.
|
|
846
|
+
|
|
847
|
+
## Token diff
|
|
848
|
+
|
|
849
|
+
_Tokens added (2):_
|
|
850
|
+
|
|
851
|
+
- `contextual-help-body-font-size`
|
|
852
|
+
- `contextual-help-title-font-size`
|
|
853
|
+
|
|
854
|
+
_Newly deprecated Tokens (6):_
|
|
855
|
+
|
|
856
|
+
- `contextual-help-body-size`
|
|
857
|
+
- `contextual-help-title-size`
|
|
858
|
+
- `negative-subdued-background-color-default`
|
|
859
|
+
- `negative-subdued-background-color-hover`
|
|
860
|
+
- `negative-subdued-background-color-down`
|
|
861
|
+
- `negative-subdued-background-color-key-focus`
|
|
862
|
+
|
|
863
|
+
## 13.0.0-beta.37
|
|
864
|
+
|
|
865
|
+
### Minor Changes
|
|
866
|
+
|
|
867
|
+
- [#355](https://github.com/adobe/spectrum-tokens/pull/355) [`783a200`](https://github.com/adobe/spectrum-tokens/commit/783a200983efa8e1f2cc31fd40ac3ed7298bb312) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - Updated tokens according to updated token spec for Spectrum 2, including new and deprecated tokens
|
|
868
|
+
|
|
869
|
+
## Design Motivation
|
|
870
|
+
|
|
871
|
+
### Change 1: Updated terminology to align with t-shirt sizes
|
|
872
|
+
|
|
873
|
+
Previously in S1, the breadcrumb variants were default, compact, and multiline. However, in S2, we have aligned breadcrumb to t-shirt sizes, resulting in the following changes:
|
|
874
|
+
|
|
875
|
+
- Breadcrumbs (default) -> Breadcrumbs (L)
|
|
876
|
+
- Breadcrumbs (compact) -> Breadcrumbs (M)
|
|
877
|
+
- Breadcrumbs (multiline) -> Breadcrumbs (multiline)
|
|
878
|
+
|
|
879
|
+
### Change 2: Updated truncated menu button sizes and spacing
|
|
880
|
+
|
|
881
|
+
Other structural changes
|
|
882
|
+
|
|
883
|
+
- In S1 all variants used M sized action button – now we use S, M, L sized action buttons for respective sizes.
|
|
884
|
+
- In S1 all variants had same spacing 8px around chevron, now we use different spacings for all the three variants
|
|
885
|
+
|
|
886
|
+
## Token Diff
|
|
887
|
+
|
|
888
|
+
_Tokens added (11):_
|
|
889
|
+
|
|
890
|
+
- `breadcrumbs-separator-to-bottom-text-multiline`
|
|
891
|
+
- `breadcrumbs-start-edge-to-text-large`
|
|
892
|
+
- `breadcrumbs-start-edge-to-text-medium`
|
|
893
|
+
- `breadcrumbs-start-edge-to-text-multiline`
|
|
894
|
+
- `breadcrumbs-top-to-separator-large`
|
|
895
|
+
- `breadcrumbs-top-to-separator-medium`
|
|
896
|
+
- `breadcrumbs-top-to-separator-multiline`
|
|
897
|
+
- `breadcrumbs-truncated-menu-to-separator`
|
|
898
|
+
- `breadcrumbs-text-to-separator-large`
|
|
899
|
+
- `breadcrumbs-text-to-separator-medium`
|
|
900
|
+
- `breadcrumbs-text-to-separator-multiline`
|
|
901
|
+
|
|
902
|
+
_Newly deprecated tokens (13):_
|
|
903
|
+
|
|
904
|
+
- `breadcrumbs-height`
|
|
905
|
+
- `breadcrumbs-height-compact`
|
|
906
|
+
- `breadcrumbs-top-to-text`
|
|
907
|
+
- `breadcrumbs-top-to-text-compact`
|
|
908
|
+
- `breadcrumbs-bottom-to-text`
|
|
909
|
+
- `breadcrumbs-bottom-to-text-compact`
|
|
910
|
+
- `breadcrumbs-start-edge-to-text`
|
|
911
|
+
- `breadcrumbs-top-to-separator-icon`
|
|
912
|
+
- `breadcrumbs-top-to-separator-icon-compact`
|
|
913
|
+
- `breadcrumbs-top-to-separator-icon-multiline`
|
|
914
|
+
- `breadcrumbs-separator-icon-to-bottom-text-multiline`
|
|
915
|
+
- `breadcrumbs-truncated-menu-to-separator-icon`
|
|
916
|
+
- `breadcrumbs-top-to-truncated-menu-compact`
|
|
917
|
+
|
|
918
|
+
_Token values updated (20):_
|
|
919
|
+
|
|
920
|
+
- `breadcrumbs-top-to-separator-icon-multiline`
|
|
921
|
+
- `breadcrumbs-top-to-text-multiline`
|
|
922
|
+
- `breadcrumbs-bottom-to-text-multiline`
|
|
923
|
+
- `breadcrumbs-height-multiline`
|
|
924
|
+
- `breadcrumbs-top-to-separator-icon-multiline`
|
|
925
|
+
- `breadcrumbs-top-to-text-multiline`
|
|
926
|
+
- `breadcrumbs-height`
|
|
927
|
+
- `breadcrumbs-height-compact`
|
|
928
|
+
- `breadcrumbs-truncated-menu-to-separator-icon`
|
|
929
|
+
- `breadcrumbs-truncated-menu-to-bottom-text`
|
|
930
|
+
- `breadcrumbs-bottom-to-text`
|
|
931
|
+
- `breadcrumbs-bottom-to-text-compact`
|
|
932
|
+
- `breadcrumbs-separator-icon-to-bottom-text-multiline`
|
|
933
|
+
- `breadcrumbs-start-edge-to-text`
|
|
934
|
+
- `breadcrumbs-top-to-separator-icon`
|
|
935
|
+
- `breadcrumbs-top-to-separator-icon-compact`
|
|
936
|
+
- `breadcrumbs-top-to-text`
|
|
937
|
+
- `breadcrumbs-top-to-text-compact`
|
|
938
|
+
- `breadcrumbs-top-to-truncated-menu`
|
|
939
|
+
- `breadcrumbs-top-to-truncated-menu-compact`
|
|
940
|
+
|
|
941
|
+
## 13.0.0-beta.36
|
|
942
|
+
|
|
943
|
+
### Minor Changes
|
|
944
|
+
|
|
945
|
+
- [#342](https://github.com/adobe/spectrum-tokens/pull/342) [`9da9532`](https://github.com/adobe/spectrum-tokens/commit/9da9532f1915070d289f7cce6f4e562c2565f889) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - Newly defined S2 Icon colors by the Icons team were incorporated into our system. This includes updates to existing colors and new color additions. More details on icon colors can be found [in this document](https://paper.dropbox.com/doc/S2-Icon-colors-May-update--CPQCbAN3uvmfSCYV5UekAgYkAg-BqbGyRAAL87Ehoqm9WrCB) and [this Figma file](https://www.figma.com/design/KRqwJWgLuW4R7HwFUzKWiB/S2-Icon-color?node-id=0%3A1&t=jRZwm9gOH4dyLwL7-1).
|
|
946
|
+
|
|
947
|
+
## Design motivation
|
|
948
|
+
|
|
949
|
+
Icons team defined new S2 color tokens needed for their iconography assets.
|
|
950
|
+
|
|
951
|
+
## Token diff
|
|
952
|
+
|
|
953
|
+
_Tokens added (78):_
|
|
954
|
+
|
|
955
|
+
- `icon-color-blue-background`
|
|
956
|
+
- `icon-color-blue-primary-down`
|
|
957
|
+
- `icon-color-blue-primary-hover`
|
|
958
|
+
- `icon-color-brown-background`
|
|
959
|
+
- `icon-color-brown-primary-default`
|
|
960
|
+
- `icon-color-brown-primary-down`
|
|
961
|
+
- `icon-color-brown-primary-hover`
|
|
962
|
+
- `icon-color-celery-background`
|
|
963
|
+
- `icon-color-celery-primary-default`
|
|
964
|
+
- `icon-color-celery-primary-down`
|
|
965
|
+
- `icon-color-celery-primary-hover`
|
|
966
|
+
- `icon-color-chartreuse-background`
|
|
967
|
+
- `icon-color-chartreuse-primary-default`
|
|
968
|
+
- `icon-color-chartreuse-primary-down`
|
|
969
|
+
- `icon-color-chartreuse-primary-hover`
|
|
970
|
+
- `icon-color-cinnamon-background`
|
|
971
|
+
- `icon-color-cinnamon-primary-default`
|
|
972
|
+
- `icon-color-cinnamon-primary-down`
|
|
973
|
+
- `icon-color-cinnamon-primary-hover`
|
|
974
|
+
- `icon-color-cyan-background`
|
|
975
|
+
- `icon-color-cyan-primary-default`
|
|
976
|
+
- `icon-color-cyan-primary-down`
|
|
977
|
+
- `icon-color-cyan-primary-hover`
|
|
978
|
+
- `icon-color-disabled-primary`
|
|
979
|
+
- `icon-color-emphasized-background`
|
|
980
|
+
- `icon-color-fuchsia-background`
|
|
981
|
+
- `icon-color-fuchsia-primary-default`
|
|
982
|
+
- `icon-color-fuchsia-primary-down`
|
|
983
|
+
- `icon-color-fuchsia-primary-hover`
|
|
984
|
+
- `icon-color-green-background`
|
|
985
|
+
- `icon-color-green-primary-down`
|
|
986
|
+
- `icon-color-green-primary-hover`
|
|
987
|
+
- `icon-color-indigo-background`
|
|
988
|
+
- `icon-color-indigo-primary-default`
|
|
989
|
+
- `icon-color-indigo-primary-down`
|
|
990
|
+
- `icon-color-indigo-primary-hover`
|
|
991
|
+
- `icon-color-informative`
|
|
992
|
+
- `icon-color-inverse-background`
|
|
993
|
+
- `icon-color-magenta-background`
|
|
994
|
+
- `icon-color-magenta-primary-default`
|
|
995
|
+
- `icon-color-magenta-primary-down`
|
|
996
|
+
- `icon-color-magenta-primary-hover`
|
|
997
|
+
- `icon-color-negative`
|
|
998
|
+
- `icon-color-neutral`
|
|
999
|
+
- `icon-color-notice`
|
|
1000
|
+
- `icon-color-orange-background`
|
|
1001
|
+
- `icon-color-orange-primary-default`
|
|
1002
|
+
- `icon-color-orange-primary-down`
|
|
1003
|
+
- `icon-color-orange-primary-hover`
|
|
1004
|
+
- `icon-color-pink-background`
|
|
1005
|
+
- `icon-color-pink-primary-default`
|
|
1006
|
+
- `icon-color-pink-primary-down`
|
|
1007
|
+
- `icon-color-pink-primary-hover`
|
|
1008
|
+
- `icon-color-positive`
|
|
1009
|
+
- `icon-color-primary-down`
|
|
1010
|
+
- `icon-color-primary-hover`
|
|
1011
|
+
- `icon-color-purple-background`
|
|
1012
|
+
- `icon-color-purple-primary-default`
|
|
1013
|
+
- `icon-color-purple-primary-down`
|
|
1014
|
+
- `icon-color-purple-primary-hover`
|
|
1015
|
+
- `icon-color-red-background`
|
|
1016
|
+
- `icon-color-red-primary-down`
|
|
1017
|
+
- `icon-color-red-primary-hover`
|
|
1018
|
+
- `icon-color-seafoam-background`
|
|
1019
|
+
- `icon-color-seafoam-primary-default`
|
|
1020
|
+
- `icon-color-seafoam-primary-down`
|
|
1021
|
+
- `icon-color-seafoam-primary-hover`
|
|
1022
|
+
- `icon-color-silver-background`
|
|
1023
|
+
- `icon-color-silver-primary-default`
|
|
1024
|
+
- `icon-color-silver-primary-down`
|
|
1025
|
+
- `icon-color-silver-primary-hover`
|
|
1026
|
+
- `icon-color-turquoise-background`
|
|
1027
|
+
- `icon-color-turquoise-primary-default`
|
|
1028
|
+
- `icon-color-turquoise-primary-down`
|
|
1029
|
+
- `icon-color-turquoise-primary-hover`
|
|
1030
|
+
- `icon-color-yellow-background`
|
|
1031
|
+
- `icon-color-yellow-primary-down`
|
|
1032
|
+
- `icon-color-yellow-primary-hover`
|
|
1033
|
+
|
|
1034
|
+
## 13.0.0-beta.35
|
|
1035
|
+
|
|
1036
|
+
### Minor Changes
|
|
1037
|
+
|
|
1038
|
+
- [#337](https://github.com/adobe/spectrum-tokens/pull/337) [`df2ab7e`](https://github.com/adobe/spectrum-tokens/commit/df2ab7ed77d385593342a3ced7bfded94bd8af8e) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - Updated illustrated message and drop zone tokens
|
|
1039
|
+
|
|
1040
|
+
## Design Motivation
|
|
1041
|
+
|
|
1042
|
+
- The previous tokens had the incorrect types. By fixing the type, they can reference the updated tokens that are replacing them.
|
|
1043
|
+
- Illustrated message now has three sizes (S, M, L) in Spectrum 2 to cover a wider range of use cases
|
|
1044
|
+
- Component font size tokens now specify font in the token name
|
|
1045
|
+
|
|
1046
|
+
## Token Diff
|
|
1047
|
+
|
|
1048
|
+
_Tokens added (12):_
|
|
1049
|
+
|
|
1050
|
+
- `drop-zone-body-font-size`
|
|
1051
|
+
- `drop-zone-cjk-title-font-size`
|
|
1052
|
+
- `drop-zone-title-font-size`
|
|
1053
|
+
- `illustrated-message-large-body-font-size`
|
|
1054
|
+
- `illustrated-message-large-cjk-title-font-size`
|
|
1055
|
+
- `illustrated-message-large-title-font-size`
|
|
1056
|
+
- `illustrated-message-medium-body-font-size`
|
|
1057
|
+
- `illustrated-message-medium-cjk-title-font-size`
|
|
1058
|
+
- `illustrated-message-medium-title-font-size`
|
|
1059
|
+
- `illustrated-message-small-body-font-size`
|
|
1060
|
+
- `illustrated-message-small-cjk-title-font-size`
|
|
1061
|
+
- `illustrated-message-small-title-font-size`
|
|
1062
|
+
|
|
1063
|
+
_Newly deprecated tokens (6):_
|
|
1064
|
+
|
|
1065
|
+
- `drop-zone-body-size`
|
|
1066
|
+
- `drop-zone-cjk-title-size`
|
|
1067
|
+
- `drop-zone-title-size`
|
|
1068
|
+
- `illustrated-message-body-size`
|
|
1069
|
+
- `illustrated-message-cjk-title-size`
|
|
1070
|
+
- `illustrated-message-title-size`
|
|
1071
|
+
|
|
1072
|
+
_Token value updated (1):_
|
|
1073
|
+
|
|
1074
|
+
- `drop-zone-border-dash-gap`
|
|
1075
|
+
|
|
1076
|
+
## 13.0.0-beta.34
|
|
1077
|
+
|
|
1078
|
+
### Minor Changes
|
|
1079
|
+
|
|
1080
|
+
- [#334](https://github.com/adobe/spectrum-tokens/pull/334) [`4d28593`](https://github.com/adobe/spectrum-tokens/commit/4d28593c9d34414d72d78a1cc6c480d9ffdf82ce) Thanks [@nabuhasan](https://github.com/nabuhasan)! - S2 Popover tokens update
|
|
1081
|
+
|
|
1082
|
+
## Token Diff
|
|
1083
|
+
|
|
1084
|
+
_Tokens added (3):_
|
|
1085
|
+
|
|
1086
|
+
- `popover-border-color`
|
|
1087
|
+
- `popover-border-opacity`
|
|
1088
|
+
- `popover-edge-to-content-area`
|
|
1089
|
+
|
|
1090
|
+
_Newly deprecated token (1):_
|
|
1091
|
+
|
|
1092
|
+
- `popover-top-to-content-area`
|
|
1093
|
+
|
|
1094
|
+
## 13.0.0-beta.33
|
|
1095
|
+
|
|
1096
|
+
### Minor Changes
|
|
1097
|
+
|
|
1098
|
+
- [#331](https://github.com/adobe/spectrum-tokens/pull/331) [`0bbfedb`](https://github.com/adobe/spectrum-tokens/commit/0bbfedb9dbb63fdd5b20e91f65b3f958a833313b) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - S2 Menu token updates
|
|
1099
|
+
|
|
1100
|
+
## Token Diff
|
|
1101
|
+
|
|
1102
|
+
_Tokens added (23):_
|
|
1103
|
+
|
|
1104
|
+
- `link-out-icon-size-100`
|
|
1105
|
+
- `link-out-icon-size-200`
|
|
1106
|
+
- `link-out-icon-size-75`
|
|
1107
|
+
- `menu-item-background-color-default`
|
|
1108
|
+
- `menu-item-background-color-disabled`
|
|
1109
|
+
- `menu-item-background-color-down`
|
|
1110
|
+
- `menu-item-background-color-hover`
|
|
1111
|
+
- `menu-item-background-color-keyboard-focus`
|
|
1112
|
+
- `menu-item-background-opacity`
|
|
1113
|
+
- `menu-item-label-to-description`
|
|
1114
|
+
- `menu-item-label-to-description-extra-large`
|
|
1115
|
+
- `menu-item-label-to-description-large`
|
|
1116
|
+
- `menu-item-label-to-description-medium`
|
|
1117
|
+
- `menu-item-label-to-description-small`
|
|
1118
|
+
- `menu-item-top-to-thumbnail-extra-large`
|
|
1119
|
+
- `menu-item-top-to-thumbnail-large`
|
|
1120
|
+
- `menu-item-top-to-thumbnail-medium`
|
|
1121
|
+
- `menu-item-top-to-thumbnail-small`
|
|
1122
|
+
- `menu-section-header-to-description-extra-large`
|
|
1123
|
+
- `menu-section-header-to-description-large`
|
|
1124
|
+
- `menu-section-header-to-description-medium`
|
|
1125
|
+
- `menu-section-header-to-description-small`
|
|
1126
|
+
- `text-to-visual-400`
|
|
1127
|
+
|
|
1128
|
+
_Token values updated (1):_
|
|
1129
|
+
|
|
1130
|
+
- `menu-item-section-divider-height`
|
|
1131
|
+
|
|
1132
|
+
## 13.0.0-beta.32
|
|
1133
|
+
|
|
1134
|
+
### Minor Changes
|
|
1135
|
+
|
|
1136
|
+
- [#325](https://github.com/adobe/spectrum-tokens/pull/325) [`095248e`](https://github.com/adobe/spectrum-tokens/commit/095248e26bdd1c8b65a61f3793646bb44093c38b) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - Added semantic aliases used by in-line alert.
|
|
1137
|
+
|
|
1138
|
+
## Token Diff
|
|
1139
|
+
|
|
1140
|
+
_Tokens added (5):_
|
|
1141
|
+
|
|
1142
|
+
- `informative-subtle-background-color-default`
|
|
1143
|
+
- `negative-subtle-background-color-default`
|
|
1144
|
+
- `neutral-subtle-background-color-default`
|
|
1145
|
+
- `notice-subtle-background-color-default`
|
|
1146
|
+
- `positive-subtle-background-color-default`
|
|
1147
|
+
|
|
1148
|
+
## 13.0.0-beta.31
|
|
1149
|
+
|
|
1150
|
+
### Minor Changes
|
|
1151
|
+
|
|
1152
|
+
- [#327](https://github.com/adobe/spectrum-tokens/pull/327) [`3caa31d`](https://github.com/adobe/spectrum-tokens/commit/3caa31d014a3d49496422c38a93c3c7645da0373) Thanks [@GarthDB](https://github.com/GarthDB)! - Added `private` metadata to global tokens.
|
|
1153
|
+
|
|
1154
|
+
## 13.0.0-beta.30
|
|
1155
|
+
|
|
1156
|
+
### Minor Changes
|
|
1157
|
+
|
|
1158
|
+
- [#321](https://github.com/adobe/spectrum-tokens/pull/321) [`e392c49`](https://github.com/adobe/spectrum-tokens/commit/e392c497a4d474c9619a882ad9ab4948441712e0) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - Added new Standard dialog, status light, and updated alert-banner-top-to-workflow-icon tokens
|
|
1159
|
+
|
|
1160
|
+
## Token Diff
|
|
1161
|
+
|
|
1162
|
+
_Tokens added (10):_
|
|
1163
|
+
|
|
1164
|
+
- `standard-dialog-body-font-size`
|
|
1165
|
+
- `standard-dialog-maximum-width-large`
|
|
1166
|
+
- `standard-dialog-maximum-width-medium`
|
|
1167
|
+
- `standard-dialog-maximum-width-small`
|
|
1168
|
+
- `standard-dialog-minimum-width`
|
|
1169
|
+
- `standard-dialog-title-font-size`
|
|
1170
|
+
- `status-light-text-to-visual-100`
|
|
1171
|
+
- `status-light-text-to-visual-200`
|
|
1172
|
+
- `status-light-text-to-visual-300`
|
|
1173
|
+
- `status-light-text-to-visual-75`
|
|
1174
|
+
|
|
1175
|
+
_Token values updated (10):_
|
|
1176
|
+
|
|
1177
|
+
- `alert-banner-to-top-workflow-icon`
|
|
1178
|
+
- `alert-banner-top-to-workflow-icon`
|
|
1179
|
+
- `status-light-dot-size-extra-large`
|
|
1180
|
+
- `status-light-dot-size-large`
|
|
1181
|
+
- `status-light-dot-size-medium`
|
|
1182
|
+
- `status-light-top-to-dot-extra-large`
|
|
1183
|
+
- `status-light-top-to-dot-large`
|
|
1184
|
+
- `status-light-top-to-dot-medium`
|
|
1185
|
+
- `status-light-top-to-dot-small`
|
|
1186
|
+
- `status-light-dot-size-small`
|
|
1187
|
+
|
|
1188
|
+
## 13.0.0-beta.29
|
|
1189
|
+
|
|
1190
|
+
### Minor Changes
|
|
1191
|
+
|
|
1192
|
+
- [#319](https://github.com/adobe/spectrum-tokens/pull/319) [`5f962fc`](https://github.com/adobe/spectrum-tokens/commit/5f962fc864c516213db58bece2c47a74c68cc985) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - Updated values for component pill edge to visual only tokens for both desktop and mobile.
|
|
1193
|
+
|
|
1194
|
+
These values are updated based on the new workflow icon size.
|
|
1195
|
+
|
|
1196
|
+
## Token Diff
|
|
1197
|
+
|
|
1198
|
+
_Token values updated (4):_
|
|
1199
|
+
|
|
1200
|
+
- `component-pill-edge-to-visual-only-100`
|
|
1201
|
+
- `component-pill-edge-to-visual-only-200`
|
|
1202
|
+
- `component-pill-edge-to-visual-only-300`
|
|
1203
|
+
- `component-pill-edge-to-visual-only-75`
|
|
1204
|
+
|
|
1205
|
+
- [#316](https://github.com/adobe/spectrum-tokens/pull/316) [`664ab0b`](https://github.com/adobe/spectrum-tokens/commit/664ab0bba68b9f4752599ed73c98b5d339414478) Thanks [@mrcjhicks](https://github.com/mrcjhicks)! - S2 Color loupe tokens update (color-only)
|
|
1206
|
+
|
|
1207
|
+
## Token Diff
|
|
1208
|
+
|
|
1209
|
+
_Newly deprecated tokens (2):_
|
|
1210
|
+
|
|
1211
|
+
- `color-loupe-drop-shadow-color`
|
|
1212
|
+
- `drop-shadow-color`
|
|
1213
|
+
|
|
1214
|
+
## 13.0.0-beta.28
|
|
1215
|
+
|
|
1216
|
+
### Patch Changes
|
|
1217
|
+
|
|
1218
|
+
- 1150331: Removed duplicate tokens from src files.
|
|
1219
|
+
|
|
1220
|
+
## 13.0.0-beta.27
|
|
1221
|
+
|
|
1222
|
+
### Minor Changes
|
|
1223
|
+
|
|
1224
|
+
- 3236495: Updated coach mark tokens for both desktop and mobile
|
|
1225
|
+
|
|
1226
|
+
## Token Diff
|
|
1227
|
+
|
|
1228
|
+
_Tokens added (6):_
|
|
1229
|
+
|
|
1230
|
+
- `coach-mark-body-font-size`
|
|
1231
|
+
- `coach-mark-pagination-body-font-size`
|
|
1232
|
+
- `coach-mark-title-font-size`
|
|
1233
|
+
|
|
1234
|
+
_Newly deprecated tokens (3):_
|
|
1235
|
+
|
|
1236
|
+
- `coach-mark-body-size`
|
|
1237
|
+
- `coach-mark-pagination-body-size`
|
|
1238
|
+
- `coach-mark-title-size`
|
|
1239
|
+
|
|
1240
|
+
## 13.0.0-beta.26
|
|
1241
|
+
|
|
1242
|
+
### Minor Changes
|
|
1243
|
+
|
|
1244
|
+
- b59fa8f: Updated alert dialog tokens
|
|
1245
|
+
|
|
1246
|
+
## Token Diff
|
|
1247
|
+
|
|
1248
|
+
_Tokens added (4):_
|
|
1249
|
+
|
|
1250
|
+
- `alert-dialog-description-font-size`
|
|
1251
|
+
- `alert-dialog-description-size`
|
|
1252
|
+
- `alert-dialog-title-font-size`
|
|
1253
|
+
- `alert-dialog-title-size`
|
|
1254
|
+
|
|
1255
|
+
_Newly deprecated tokens (2):_
|
|
1256
|
+
|
|
1257
|
+
- `alert-dialog-description-size`
|
|
1258
|
+
- `alert-dialog-title-size`
|
|
1259
|
+
|
|
1260
|
+
## 13.0.0-beta.25
|
|
1261
|
+
|
|
1262
|
+
### Minor Changes
|
|
1263
|
+
|
|
1264
|
+
- e79ddd6: S2 Combo box, In-field button and In-field progress circle updates
|
|
1265
|
+
|
|
1266
|
+
## Motivation and context
|
|
1267
|
+
|
|
1268
|
+
These changes occurred as a result of scaling things for S2 design language and experiences.
|
|
1269
|
+
|
|
1270
|
+
## Token Diff
|
|
1271
|
+
|
|
1272
|
+
_Tokens added (15):_
|
|
1273
|
+
|
|
1274
|
+
- `combo-box-visual-to-field-button`
|
|
1275
|
+
- `combo-box-visual-to-field-button-extra-large`
|
|
1276
|
+
- `combo-box-visual-to-field-button-large`
|
|
1277
|
+
- `combo-box-visual-to-field-button-medium`
|
|
1278
|
+
- `combo-box-visual-to-field-button-quiet`
|
|
1279
|
+
- `combo-box-visual-to-field-button-small`
|
|
1280
|
+
- `in-field-button-edge-to-fill-extra-large`
|
|
1281
|
+
- `in-field-button-edge-to-fill-large`
|
|
1282
|
+
- `in-field-button-edge-to-fill-medium`
|
|
1283
|
+
- `in-field-button-edge-to-fill-small`
|
|
1284
|
+
- `in-field-progress-circle-edge-to-fill`
|
|
1285
|
+
- `in-field-progress-circle-size-100`
|
|
1286
|
+
- `in-field-progress-circle-size-200`
|
|
1287
|
+
- `in-field-progress-circle-size-300`
|
|
1288
|
+
- `in-field-progress-circle-size-75`
|
|
1289
|
+
|
|
1290
|
+
_Newly deprecated tokens (6):_
|
|
1291
|
+
|
|
1292
|
+
- `combo-box-quiet-minimum-width-multiplier`
|
|
1293
|
+
- `combo-box-visual-to-field-button-small`
|
|
1294
|
+
- `combo-box-visual-to-field-button-medium`
|
|
1295
|
+
- `combo-box-visual-to-field-button-large`
|
|
1296
|
+
- `combo-box-visual-to-field-button-extra-large`
|
|
1297
|
+
- `in-field-button-edge-to-fill`
|
|
1298
|
+
|
|
1299
|
+
- e79ddd6: S2 Color loupe tokens update
|
|
1300
|
+
|
|
1301
|
+
## Design Motivation
|
|
1302
|
+
|
|
1303
|
+
These changes occurred as a result of scaling things for S2 design language and experiences.
|
|
1304
|
+
|
|
1305
|
+
## Token Diff
|
|
1306
|
+
|
|
1307
|
+
_Newly deprecated tokens (2):_
|
|
1308
|
+
|
|
1309
|
+
- `color-loupe-drop-shadow-blur`
|
|
1310
|
+
- `color-loupe-drop-shadow-y`
|
|
1311
|
+
|
|
1312
|
+
## 13.0.0-beta.24
|
|
1313
|
+
|
|
1314
|
+
### Major Changes
|
|
1315
|
+
|
|
1316
|
+
- 1c8f7ab: Renamed previous drop shadow tokens from S1 and pointed them to the new `100` S2 drop shadow tokens
|
|
1317
|
+
Added new drop shadow tokens, `100`, `200`, `emphasized-default`, `emphasized-hover`, `elevated`.
|
|
1318
|
+
|
|
1319
|
+
## Design Motivation
|
|
1320
|
+
|
|
1321
|
+
These tokens reflect the updates to drop tokens foundations in Spectrum 2, allowing more options and flexibility of usage in containers
|
|
1322
|
+
|
|
1323
|
+
## Token Diff
|
|
1324
|
+
|
|
1325
|
+
_Tokens added (24):_
|
|
1326
|
+
|
|
1327
|
+
- `drop-shadow-blur`
|
|
1328
|
+
- `drop-shadow-blur-100`
|
|
1329
|
+
- `drop-shadow-blur-200`
|
|
1330
|
+
- `drop-shadow-color`
|
|
1331
|
+
- `drop-shadow-color-100`
|
|
1332
|
+
- `drop-shadow-color-200`
|
|
1333
|
+
- `drop-shadow-elevated-blur`
|
|
1334
|
+
- `drop-shadow-elevated-color`
|
|
1335
|
+
- `drop-shadow-elevated-x`
|
|
1336
|
+
- `drop-shadow-elevated-y`
|
|
1337
|
+
- `drop-shadow-emphasized-default-blur`
|
|
1338
|
+
- `drop-shadow-emphasized-default-color`
|
|
1339
|
+
- `drop-shadow-emphasized-default-x`
|
|
1340
|
+
- `drop-shadow-emphasized-default-y`
|
|
1341
|
+
- `drop-shadow-emphasized-hover-blur`
|
|
1342
|
+
- `drop-shadow-emphasized-hover-color`
|
|
1343
|
+
- `drop-shadow-emphasized-hover-x`
|
|
1344
|
+
- `drop-shadow-emphasized-hover-y`
|
|
1345
|
+
- `drop-shadow-x`
|
|
1346
|
+
- `drop-shadow-x-100`
|
|
1347
|
+
- `drop-shadow-x-200`
|
|
1348
|
+
- `drop-shadow-y`
|
|
1349
|
+
- `drop-shadow-y-100`
|
|
1350
|
+
- `drop-shadow-y-200`
|
|
1351
|
+
|
|
1352
|
+
_Tokens deleted (2):_
|
|
1353
|
+
|
|
1354
|
+
- `drop-shadow-blur`
|
|
1355
|
+
- `drop-shadow-y`
|
|
1356
|
+
|
|
1357
|
+
_Token values updated (2):_
|
|
1358
|
+
|
|
1359
|
+
- `color-handle-drop-shadow-color`
|
|
1360
|
+
- `drop-shadow-color`
|
|
1361
|
+
|
|
1362
|
+
### Minor Changes
|
|
1363
|
+
|
|
1364
|
+
- 3230aba: Updated and added S2 drop shadow tokens
|
|
1365
|
+
|
|
1366
|
+
## Design Motivation
|
|
1367
|
+
|
|
1368
|
+
These changes occurred as a result of scaling things for S2 design language and experiences.
|
|
1369
|
+
|
|
1370
|
+
## Token Diff
|
|
1371
|
+
|
|
1372
|
+
_Tokens added (7):_
|
|
1373
|
+
|
|
1374
|
+
- `field-default-width-extra-large`
|
|
1375
|
+
- `field-default-width-large`
|
|
1376
|
+
- `field-default-width-medium`
|
|
1377
|
+
- `field-default-width-small`
|
|
1378
|
+
- `tag-minimum-width-large`
|
|
1379
|
+
- `tag-minimum-width-medium`
|
|
1380
|
+
- `tag-minimum-width-small`
|
|
1381
|
+
|
|
1382
|
+
_Token values updated (4):_
|
|
1383
|
+
|
|
1384
|
+
- `field-top-to-progress-circle-extra-large`
|
|
1385
|
+
- `field-top-to-progress-circle-large`
|
|
1386
|
+
- `field-top-to-progress-circle-medium`
|
|
1387
|
+
- `field-top-to-progress-circle-small`
|
|
1388
|
+
|
|
1389
|
+
_Newly Deprecated Tokens (4):_
|
|
1390
|
+
|
|
1391
|
+
- `field-width-extra-large`
|
|
1392
|
+
- `field-width-large`
|
|
1393
|
+
- `field-width-medium`
|
|
1394
|
+
- `field-width-small`
|
|
1395
|
+
|
|
1396
|
+
## 13.0.0-beta.23
|
|
1397
|
+
|
|
1398
|
+
### Patch Changes
|
|
1399
|
+
|
|
1400
|
+
- 936f608: Fixed misnamed accordion token.
|
|
1401
|
+
|
|
1402
|
+
## Token Diff
|
|
1403
|
+
|
|
1404
|
+
_Tokens added (1):_
|
|
1405
|
+
|
|
1406
|
+
- `accordion-top-to-text-spacious-small`
|
|
1407
|
+
|
|
1408
|
+
_Newly deprecated token (1):_
|
|
1409
|
+
|
|
1410
|
+
- `accordion-small-top-to-text-spacious`
|
|
1411
|
+
|
|
1412
|
+
## 13.0.0-beta.22
|
|
1413
|
+
|
|
1414
|
+
### Minor Changes
|
|
1415
|
+
|
|
1416
|
+
- c42448c: Updated and added alert dialog tokens for both desktop and mobile.
|
|
1417
|
+
|
|
1418
|
+
## Design Motivation
|
|
1419
|
+
|
|
1420
|
+
Title text in alert dialog is now using the new Title typography token. Also updated the size for description text, and added a new token for top to alert icon.
|
|
1421
|
+
|
|
1422
|
+
Title is a new typography style for Spectrum 2, and has a default `title-color` token.
|
|
1423
|
+
|
|
1424
|
+
## Token Diff
|
|
1425
|
+
|
|
1426
|
+
_Tokens added (2):_
|
|
1427
|
+
|
|
1428
|
+
- `alert-banner-top-to-alert-icon`
|
|
1429
|
+
- `title-color`
|
|
1430
|
+
|
|
1431
|
+
_Token values updated (2):_
|
|
1432
|
+
|
|
1433
|
+
- `alert-dialog-description-size`
|
|
1434
|
+
- `alert-dialog-title-size`
|
|
1435
|
+
|
|
1436
|
+
- 46a801c: Added tokens for S2 title color
|
|
1437
|
+
|
|
1438
|
+
## 13.0.0-beta.21
|
|
1439
|
+
|
|
1440
|
+
### Minor Changes
|
|
1441
|
+
|
|
1442
|
+
- d71bea1: S2 Opacity checkerboard non-color token updates
|
|
1443
|
+
|
|
1444
|
+
## Design Motivation
|
|
1445
|
+
|
|
1446
|
+
These changes occurred as a result of scaling things for S2 design language and experiences.
|
|
1447
|
+
|
|
1448
|
+
## Token Diff
|
|
1449
|
+
|
|
1450
|
+
_Tokens added (2):_
|
|
1451
|
+
|
|
1452
|
+
- `opacity-checkerboard-square-size-medium`
|
|
1453
|
+
- `opacity-checkerboard-square-size-small`
|
|
1454
|
+
|
|
1455
|
+
_Newly deprecated token (1):_
|
|
1456
|
+
|
|
1457
|
+
- `opacity-checkerboard-square-size`
|
|
1458
|
+
|
|
1459
|
+
## 13.0.0-beta.20
|
|
1460
|
+
|
|
1461
|
+
### Minor Changes
|
|
1462
|
+
|
|
1463
|
+
- fb61f17: Added Title typography tokens
|
|
1464
|
+
|
|
1465
|
+
## Design Motivation
|
|
1466
|
+
|
|
1467
|
+
Adding new typography styles for Title. While the Heading style is for the loudest, most broad message, there are still going to be other important items in your information hierarchy. The Title style is for text that’s communicating other need-to-know concepts. It’s often set in Bold weight, and it has a range of font sizes that can be paired with Body and Detail sizes to create visual balance. File names, cards, user names, panels, and other high-signal concepts in interfaces use the Title style.
|
|
1468
|
+
|
|
1469
|
+
## Token Diff
|
|
1470
|
+
|
|
1471
|
+
_Tokens added (45):_
|
|
1472
|
+
|
|
1473
|
+
- `title-cjk-emphasized-font-style`
|
|
1474
|
+
- `title-cjk-emphasized-font-weight`
|
|
1475
|
+
- `title-cjk-font-family`
|
|
1476
|
+
- `title-cjk-font-style`
|
|
1477
|
+
- `title-cjk-font-weight`
|
|
1478
|
+
- `title-cjk-line-height`
|
|
1479
|
+
- `title-cjk-size-l`
|
|
1480
|
+
- `title-cjk-size-m`
|
|
1481
|
+
- `title-cjk-size-s`
|
|
1482
|
+
- `title-cjk-size-xl`
|
|
1483
|
+
- `title-cjk-size-xs`
|
|
1484
|
+
- `title-cjk-size-xxl`
|
|
1485
|
+
- `title-cjk-size-xxxl`
|
|
1486
|
+
- `title-cjk-strong-emphasized-font-style`
|
|
1487
|
+
- `title-cjk-strong-emphasized-font-weight`
|
|
1488
|
+
- `title-cjk-strong-font-style`
|
|
1489
|
+
- `title-cjk-strong-font-weight`
|
|
1490
|
+
- `title-line-height`
|
|
1491
|
+
- `title-margin-bottom-multiplier`
|
|
1492
|
+
- `title-margin-top-multiplier`
|
|
1493
|
+
- `title-sans-serif-emphasized-font-style`
|
|
1494
|
+
- `title-sans-serif-emphasized-font-weight`
|
|
1495
|
+
- `title-sans-serif-font-family`
|
|
1496
|
+
- `title-sans-serif-font-style`
|
|
1497
|
+
- `title-sans-serif-font-weight`
|
|
1498
|
+
- `title-sans-serif-strong-emphasized-font-style`
|
|
1499
|
+
- `title-sans-serif-strong-emphasized-font-weight`
|
|
1500
|
+
- `title-sans-serif-strong-font-style`
|
|
1501
|
+
- `title-sans-serif-strong-font-weight`
|
|
1502
|
+
- `title-serif-emphasized-font-style`
|
|
1503
|
+
- `title-serif-emphasized-font-weight`
|
|
1504
|
+
- `title-serif-font-family`
|
|
1505
|
+
- `title-serif-font-style`
|
|
1506
|
+
- `title-serif-font-weight`
|
|
1507
|
+
- `title-serif-strong-emphasized-font-style`
|
|
1508
|
+
- `title-serif-strong-emphasized-font-weight`
|
|
1509
|
+
- `title-serif-strong-font-style`
|
|
1510
|
+
- `title-serif-strong-font-weight`
|
|
1511
|
+
- `title-size-l`
|
|
1512
|
+
- `title-size-m`
|
|
1513
|
+
- `title-size-s`
|
|
1514
|
+
- `title-size-xl`
|
|
1515
|
+
- `title-size-xs`
|
|
1516
|
+
- `title-size-xxl`
|
|
1517
|
+
- `title-size-xxxl`
|
|
1518
|
+
|
|
1519
|
+
## 13.0.0-beta.19
|
|
1520
|
+
|
|
1521
|
+
### Minor Changes
|
|
1522
|
+
|
|
1523
|
+
- 723d3b0: Updated, added, and deprecated tokens for text field and text area.
|
|
1524
|
+
|
|
1525
|
+
## Design Motivation
|
|
1526
|
+
|
|
1527
|
+
Updating text field and text area for Spectrum 2.
|
|
1528
|
+
|
|
1529
|
+
## Token Diff
|
|
1530
|
+
|
|
1531
|
+
_Tokens added (4):_
|
|
1532
|
+
|
|
1533
|
+
- `field-width-small`
|
|
1534
|
+
- `field-width-medium`
|
|
1535
|
+
- `field-width-large`
|
|
1536
|
+
- `field-width-extra-large`
|
|
1537
|
+
|
|
1538
|
+
_Updated token values (4):_
|
|
1539
|
+
|
|
1540
|
+
- `side-label-character-count-top-margin-small`
|
|
1541
|
+
- `side-label-character-count-top-margin-medium`
|
|
1542
|
+
- `side-label-character-count-top-margin-large`
|
|
1543
|
+
- `side-label-character-count-top-margin-extra-large`
|
|
1544
|
+
|
|
1545
|
+
_Newly deprecated tokens (8):_
|
|
1546
|
+
|
|
1547
|
+
- `field-width`
|
|
1548
|
+
- `field-edge-to-text-quiet`
|
|
1549
|
+
- `field-edge-to-border-quiet`
|
|
1550
|
+
- `field-edge-to-alert-icon-quiet`
|
|
1551
|
+
- `field-edge-to-validation-icon-quiet`
|
|
1552
|
+
- `field-label-to-component-quiet-small`
|
|
1553
|
+
- `field-label-to-component-quiet-medium`
|
|
1554
|
+
- `field-label-to-component-quiet-large`
|
|
1555
|
+
- `field-label-to-component-quiet-extra-large`
|
|
1556
|
+
- `character-count-to-field-quiet-small`
|
|
1557
|
+
- `character-count-to-field-quiet-medium`
|
|
1558
|
+
- `character-count-to-field-quiet-large`
|
|
1559
|
+
- `character-count-to-field-quiet-extra-large`
|
|
1560
|
+
|
|
1561
|
+
- 66b1edf: Updated color of color-area-border-color token from gray.900 to gray.1000 in both light and dark sets.
|
|
1562
|
+
|
|
1563
|
+
## Design motivation
|
|
1564
|
+
|
|
1565
|
+
These changes occurred as a result of scaling things for S2 design language and experiences.
|
|
1566
|
+
|
|
1567
|
+
## Token Diff
|
|
1568
|
+
|
|
1569
|
+
_Token value updated (1):_
|
|
1570
|
+
|
|
1571
|
+
- `color-area-border-color`
|
|
1572
|
+
|
|
1573
|
+
- 7b5f18b: Update alert banner for Spectrum 2
|
|
1574
|
+
|
|
1575
|
+
## Design Motivation
|
|
1576
|
+
|
|
1577
|
+
These changes occurred as a result of scaling things for S2 design language and experiences.
|
|
1578
|
+
|
|
1579
|
+
## Token Diff
|
|
1580
|
+
|
|
1581
|
+
_Token values updated (5):_
|
|
1582
|
+
|
|
1583
|
+
- `alert-banner-bottom-to-text`
|
|
1584
|
+
- `alert-banner-minimum-height`
|
|
1585
|
+
- `alert-banner-top-to-text`
|
|
1586
|
+
- `alert-banner-top-to-workflow-icon`
|
|
1587
|
+
- `search-field-minimum-width-multiplier`
|
|
1588
|
+
|
|
1589
|
+
- 4a84fdd: Spectrum 2 Toast Tokens
|
|
1590
|
+
|
|
1591
|
+
## Design motivation
|
|
1592
|
+
|
|
1593
|
+
Updated the `color-area-border-rounding` token type from spacing to borderRadius and adjusted value referenced, desktop and mobile scale.
|
|
1594
|
+
|
|
1595
|
+
These changes occurred as a result of scaling things for S2 design language and experiences.
|
|
1596
|
+
|
|
1597
|
+
## Token Diff
|
|
1598
|
+
|
|
1599
|
+
_Token values updated (5):_
|
|
1600
|
+
|
|
1601
|
+
- `toast-height`
|
|
1602
|
+
- `toast-top-to-workflow-icon`
|
|
1603
|
+
- `toast-top-to-text`
|
|
1604
|
+
- `toast-bottom-to-text`
|
|
1605
|
+
- `color-area-border-rounding`
|
|
1606
|
+
|
|
1607
|
+
## 13.0.0-beta.18
|
|
1608
|
+
|
|
1609
|
+
### Minor Changes
|
|
1610
|
+
|
|
1611
|
+
- 940bd78: Updated background aliases in dark theme; added new non-semantic colors
|
|
1612
|
+
|
|
1613
|
+
## Design Motivation
|
|
1614
|
+
|
|
1615
|
+
The existing background colors were updated for better consistency across semantic and non-semantic variants of the Badge component. The colors also introduce some general improved contrast in dark theme across other components using these aliases.
|
|
1616
|
+
The new non-semantic visual and background colors were added because new hues were introduced. These colors will be used in status light and badge components, respectively.
|
|
1617
|
+
|
|
1618
|
+
## Token Diff
|
|
1619
|
+
|
|
1620
|
+
_Tokens added (10):_
|
|
1621
|
+
|
|
1622
|
+
- `brown-background-color-default`
|
|
1623
|
+
- `brown-visual-color`
|
|
1624
|
+
- `cinnamon-background-color-default`
|
|
1625
|
+
- `cinnamon-visual-color`
|
|
1626
|
+
- `pink-background-color-default`
|
|
1627
|
+
- `pink-visual-color`
|
|
1628
|
+
- `silver-background-color-default`
|
|
1629
|
+
- `silver-visual-color`
|
|
1630
|
+
- `turquoise-background-color-default`
|
|
1631
|
+
- `turquoise-visual-color`
|
|
1632
|
+
|
|
1633
|
+
_Token values updated (27):_
|
|
1634
|
+
|
|
1635
|
+
- `accent-background-color-default`
|
|
1636
|
+
- `accent-background-color-down`
|
|
1637
|
+
- `accent-background-color-hover`
|
|
1638
|
+
- `accent-background-color-key-focus`
|
|
1639
|
+
- `celery-background-color-default`
|
|
1640
|
+
- `chartreuse-background-color-default`
|
|
1641
|
+
- `gray-background-color-default`
|
|
1642
|
+
- `informative-background-color-default`
|
|
1643
|
+
- `informative-background-color-down`
|
|
1644
|
+
- `informative-background-color-hover`
|
|
1645
|
+
- `informative-background-color-key-focus`
|
|
1646
|
+
- `negative-background-color-default`
|
|
1647
|
+
- `negative-background-color-down`
|
|
1648
|
+
- `negative-background-color-hover`
|
|
1649
|
+
- `negative-background-color-key-focus`
|
|
1650
|
+
- `neutral-subdued-background-color-default`
|
|
1651
|
+
- `neutral-subdued-background-color-down`
|
|
1652
|
+
- `neutral-subdued-background-color-hover`
|
|
1653
|
+
- `neutral-subdued-background-color-key-focus`
|
|
1654
|
+
- `notice-background-color-default`
|
|
1655
|
+
- `orange-background-color-default`
|
|
1656
|
+
- `positive-background-color-default`
|
|
1657
|
+
- `positive-background-color-down`
|
|
1658
|
+
- `positive-background-color-hover`
|
|
1659
|
+
- `positive-background-color-key-focus`
|
|
1660
|
+
- `table-selected-row-background-color`
|
|
1661
|
+
- `yellow-background-color-default`
|
|
1662
|
+
|
|
1663
|
+
## 13.0.0-beta.17
|
|
1664
|
+
|
|
1665
|
+
### Minor Changes
|
|
1666
|
+
|
|
1667
|
+
- 9072ae7: `color-slider-border-color` token was updated to reference `gray-1000` instead of `gray-90`0 in both light and dark themes.
|
|
1668
|
+
- 912e307: Updated `color-slider-border-rounding` token to use 7px instead of 4px in desktop only.
|
|
1669
|
+
This token value update is the same value used by alias token: `corner-radius-medium-size-small`.
|
|
1670
|
+
|
|
1671
|
+
## Design Motivation
|
|
1672
|
+
|
|
1673
|
+
S2 color slider design changes.
|
|
1674
|
+
|
|
1675
|
+
## Token Diff
|
|
1676
|
+
|
|
1677
|
+
_Token values updated (2):_
|
|
1678
|
+
|
|
1679
|
+
- `color-slider-border-color`
|
|
1680
|
+
- `color-slider-border-rounding`
|
|
1681
|
+
|
|
1682
|
+
## 13.0.0-beta.16
|
|
1683
|
+
|
|
1684
|
+
### Minor Changes
|
|
1685
|
+
|
|
1686
|
+
- 80a3fec: New non-color tokens for S2 tag component added to both desktop and mobile layout.component sets.
|
|
1687
|
+
|
|
1688
|
+
## Design Motivation
|
|
1689
|
+
|
|
1690
|
+
New values for tag component for S2.
|
|
1691
|
+
|
|
1692
|
+
## Token Diff
|
|
1693
|
+
|
|
1694
|
+
_Tokens added (9):_
|
|
1695
|
+
|
|
1696
|
+
- `tag-edge-to-clear-icon-large`
|
|
1697
|
+
- `tag-edge-to-clear-icon-medium`
|
|
1698
|
+
- `tag-edge-to-clear-icon-small`
|
|
1699
|
+
- `tag-label-clear-icon-large`
|
|
1700
|
+
- `tag-label-to-clear-icon-large`
|
|
1701
|
+
- `tag-label-to-clear-icon-medium`
|
|
1702
|
+
- `tag-label-to-clear-icon-small`
|
|
1703
|
+
- `tag-maximum-width-multiplier`
|
|
1704
|
+
- `tag-minimum-width-multiplier`
|
|
1705
|
+
|
|
1706
|
+
## 13.0.0-beta.15
|
|
1707
|
+
|
|
1708
|
+
### Minor Changes
|
|
1709
|
+
|
|
1710
|
+
- c7c1d81: Added new semantic color aliases to Tokens Studio, in the S2 color tokens, alias sets for both light and dark themes.
|
|
1711
|
+
- 4b78009: Updated values and added new tokens for Switch.
|
|
1712
|
+
|
|
1713
|
+
## Design Motivation
|
|
1714
|
+
|
|
1715
|
+
New negative-subdued background tokens were needed for negative and not selected tag components.
|
|
1716
|
+
|
|
1717
|
+
Added new tokens: `switch-handle-size-_` and `switch-handle-selected-size-_` for both desktop and mobile.
|
|
1718
|
+
Update token values on: `switch-control-width-_` and `switch-control-height-_` for both desktop and mobile.
|
|
1719
|
+
|
|
1720
|
+
The design for Switch in S2 has changed and now has a border when it's not selected. New handle sizes are added and control sizes have been updated.
|
|
1721
|
+
|
|
1722
|
+
## Token Diff
|
|
1723
|
+
|
|
1724
|
+
_Tokens added (12):_
|
|
1725
|
+
|
|
1726
|
+
- `negative-subdued-background-color-default`
|
|
1727
|
+
- `negative-subdued-background-color-down`
|
|
1728
|
+
- `negative-subdued-background-color-hover`
|
|
1729
|
+
- `negative-subdued-background-color-key-focus`
|
|
1730
|
+
- `switch-handle-selected-size-extra-large`
|
|
1731
|
+
- `switch-handle-selected-size-large`
|
|
1732
|
+
- `switch-handle-selected-size-medium`
|
|
1733
|
+
- `switch-handle-selected-size-small`
|
|
1734
|
+
- `switch-handle-size-extra-large`
|
|
1735
|
+
- `switch-handle-size-large`
|
|
1736
|
+
- `switch-handle-size-medium`
|
|
1737
|
+
- `switch-handle-size-small`
|
|
1738
|
+
|
|
1739
|
+
_Token values updated (8):_
|
|
1740
|
+
|
|
1741
|
+
- `switch-control-height-extra-large`
|
|
1742
|
+
- `switch-control-height-large`
|
|
1743
|
+
- `switch-control-height-medium`
|
|
1744
|
+
- `switch-control-height-small`
|
|
1745
|
+
- `switch-control-width-extra-large`
|
|
1746
|
+
- `switch-control-width-large`
|
|
1747
|
+
- `switch-control-width-medium`
|
|
1748
|
+
- `switch-control-width-small`
|
|
1749
|
+
|
|
1750
|
+
## 13.0.0-beta.14
|
|
1751
|
+
|
|
1752
|
+
### Minor Changes
|
|
1753
|
+
|
|
1754
|
+
- f004b0c: The tokens listed in the diff below had identical values between sets and so were merged to single values to simplify the data.
|
|
1755
|
+
|
|
1756
|
+
## Token Diff
|
|
1757
|
+
|
|
1758
|
+
_Tokens values updated (46):_
|
|
1759
|
+
|
|
1760
|
+
- `accordion-disclosure-indicator-to-text`
|
|
1761
|
+
- `accordion-edge-to-disclosure-indicator`
|
|
1762
|
+
- `accordion-edge-to-text`
|
|
1763
|
+
- `accordion-focus-indicator-gap`
|
|
1764
|
+
- `accordion-top-to-text-compact-medium`
|
|
1765
|
+
- `accordion-top-to-text-compact-small`
|
|
1766
|
+
- `action-button-edge-to-hold-icon-extra-small`
|
|
1767
|
+
- `action-button-edge-to-hold-icon-small`
|
|
1768
|
+
- `asterisk-icon-size-75`
|
|
1769
|
+
- `background-base-color`
|
|
1770
|
+
- `background-layer-1-color`
|
|
1771
|
+
- `color-area-border-rounding`
|
|
1772
|
+
- `corner-radius-0`
|
|
1773
|
+
- `corner-radius-100`
|
|
1774
|
+
- `corner-radius-1000`
|
|
1775
|
+
- `corner-radius-200`
|
|
1776
|
+
- `corner-radius-300`
|
|
1777
|
+
- `corner-radius-400`
|
|
1778
|
+
- `corner-radius-500`
|
|
1779
|
+
- `corner-radius-600`
|
|
1780
|
+
- `corner-radius-700`
|
|
1781
|
+
- `corner-radius-75`
|
|
1782
|
+
- `corner-radius-800`
|
|
1783
|
+
- `corner-radius-extra-large-default`
|
|
1784
|
+
- `corner-radius-full`
|
|
1785
|
+
- `corner-radius-large-default`
|
|
1786
|
+
- `corner-radius-medium-default`
|
|
1787
|
+
- `corner-radius-medium-size-extra-large`
|
|
1788
|
+
- `corner-radius-medium-size-extra-small`
|
|
1789
|
+
- `corner-radius-medium-size-large`
|
|
1790
|
+
- `corner-radius-medium-size-medium`
|
|
1791
|
+
- `corner-radius-medium-size-small`
|
|
1792
|
+
- `corner-radius-none`
|
|
1793
|
+
- `corner-radius-small-default`
|
|
1794
|
+
- `corner-radius-small-size-extra-large`
|
|
1795
|
+
- `corner-radius-small-size-large`
|
|
1796
|
+
- `corner-radius-small-size-medium`
|
|
1797
|
+
- `corner-radius-small-size-small`
|
|
1798
|
+
- `drop-shadow-x`
|
|
1799
|
+
- `field-label-top-margin-extra-large`
|
|
1800
|
+
- `field-label-top-margin-large`
|
|
1801
|
+
- `field-label-top-margin-medium`
|
|
1802
|
+
- `field-label-top-margin-small`
|
|
1803
|
+
- `gray-background-color-default`
|
|
1804
|
+
- `status-light-dot-size-small`
|
|
1805
|
+
- `table-edge-to-content`
|
|
1806
|
+
|
|
1807
|
+
## 13.0.0-beta.13
|
|
1808
|
+
|
|
1809
|
+
### Minor Changes
|
|
1810
|
+
|
|
1811
|
+
- ef600c4: ## Design Motivation
|
|
1812
|
+
|
|
1813
|
+
- The updated tooltip component in Spectrum 2 has a larger, slightly rounded tip
|
|
1814
|
+
- Added tokens for horizontal and vertical orientation
|
|
1815
|
+
|
|
1816
|
+
## Tokens Diff
|
|
1817
|
+
|
|
1818
|
+
_Tokens added (3):_
|
|
1819
|
+
|
|
1820
|
+
- `divider-horizontal-minimum-width`
|
|
1821
|
+
- `divider-vertical-minimum-height`
|
|
1822
|
+
- `tooltip-tip-corner-radius`
|
|
1823
|
+
|
|
1824
|
+
_Token values updated (2):_
|
|
1825
|
+
|
|
1826
|
+
- `tooltip-tip-height`
|
|
1827
|
+
- `tooltip-tip-width`
|
|
1828
|
+
|
|
1829
|
+
## 13.0.0-beta.12
|
|
1830
|
+
|
|
1831
|
+
### Minor Changes
|
|
1832
|
+
|
|
1833
|
+
- c87d743: Updates to spacing tokens for the S2 field label component include:
|
|
1834
|
+
|
|
1835
|
+
Token: field-label-top-to-asterisk-[medium, large, extra-large]. Only value for extra-large token required updating in the desktop scale. All other sizes presented accurate values.
|
|
1836
|
+
|
|
1837
|
+
Token: field-label-top-margin-[medium, large, extra-large]. All values were updated to reflect 0px for both desktop and mobile scales
|
|
1838
|
+
|
|
1839
|
+
## Design Motivation
|
|
1840
|
+
|
|
1841
|
+
These changes occurred as a result of updates to the field label component for S2.
|
|
1842
|
+
|
|
1843
|
+
## Token Diff
|
|
1844
|
+
|
|
1845
|
+
_Token values updated (4):_
|
|
1846
|
+
|
|
1847
|
+
- `field-label-top-margin-extra-large`
|
|
1848
|
+
- `field-label-top-margin-large`
|
|
1849
|
+
- `field-label-top-margin-medium`
|
|
1850
|
+
- `field-label-top-to-asterisk-extra-large`
|
|
1851
|
+
|
|
1852
|
+
## Schema Diff
|
|
1853
|
+
|
|
1854
|
+
Adds missing schema information for `corner-radius-1000`. Also added `schemas/token-types/multiplier.json` to the `scale-set` schema.
|
|
1855
|
+
|
|
1856
|
+
## 13.0.0-beta.11
|
|
1857
|
+
|
|
1858
|
+
### Minor Changes
|
|
1859
|
+
|
|
1860
|
+
- 3c6303a: Updated text-to-visual-300 mobile value from 11px to 10px.
|
|
1861
|
+
|
|
1862
|
+
## Design Motivation
|
|
1863
|
+
|
|
1864
|
+
To better follow our logarithmic scale rounding principle.
|
|
1865
|
+
|
|
1866
|
+
## Token Diff
|
|
1867
|
+
|
|
1868
|
+
_Token values updated (1):_
|
|
1869
|
+
|
|
1870
|
+
- `text-to-visual-300`
|
|
1871
|
+
|
|
1872
|
+
- 6579966: existing corner-radius tokens, adding net-new global corner radius tokens, and introducing new alias names that point to these global values.
|
|
1873
|
+
|
|
1874
|
+
## Design Motivation
|
|
1875
|
+
|
|
1876
|
+
More on Spectrum 2 rounding: https://s2.spectrum.corp.adobe.com/page/object-styles/#rounding
|
|
1877
|
+
|
|
1878
|
+
In Spectrum 2, rounding also applies to the different t-shirt sized components and varies based on a Major Second logarithmic scale, rounded to whole numbers to avoid using half-pixels. This allows for components to retain a consistent and identifiable shape at all sizes. Because of this there are now component size specific tokens like corner-radius-small-size-medium or corner-radius-medium-size-extra-large to help us keep track of the nuance within t-shirt sizes.
|
|
1879
|
+
|
|
1880
|
+
## Token Diff
|
|
1881
|
+
|
|
1882
|
+
_Tokens added (23):_
|
|
1883
|
+
|
|
1884
|
+
- `corner-radius-0`
|
|
1885
|
+
- `corner-radius-300`
|
|
1886
|
+
- `corner-radius-400`
|
|
1887
|
+
- `corner-radius-500`
|
|
1888
|
+
- `corner-radius-600`
|
|
1889
|
+
- `corner-radius-700`
|
|
1890
|
+
- `corner-radius-800`
|
|
1891
|
+
- `corner-radius-1000`
|
|
1892
|
+
- `corner-radius-extra-large-default`
|
|
1893
|
+
- `corner-radius-full`
|
|
1894
|
+
- `corner-radius-large-default`
|
|
1895
|
+
- `corner-radius-medium-default`
|
|
1896
|
+
- `corner-radius-medium-size-extra-small`
|
|
1897
|
+
- `corner-radius-medium-size-small`
|
|
1898
|
+
- `corner-radius-medium-size-medium`
|
|
1899
|
+
- `corner-radius-medium-size-large`
|
|
1900
|
+
- `corner-radius-medium-size-extra-large`
|
|
1901
|
+
- `corner-radius-none`
|
|
1902
|
+
- `corner-radius-small-default`
|
|
1903
|
+
- `corner-radius-small-size-small`
|
|
1904
|
+
- `corner-radius-small-size-medium`
|
|
1905
|
+
- `corner-radius-small-size-large`
|
|
1906
|
+
- `corner-radius-small-size-extra-large`
|
|
1907
|
+
|
|
1908
|
+
_Token values updated (3):_
|
|
1909
|
+
|
|
1910
|
+
- `corner-radius-75`
|
|
1911
|
+
- `corner-radius-100`
|
|
1912
|
+
- `corner-radius-200`
|
|
1913
|
+
|
|
1914
|
+
## 13.0.0-beta.10
|
|
1915
|
+
|
|
1916
|
+
### Minor Changes
|
|
1917
|
+
|
|
1918
|
+
- 23d9085: Updated desktop and mobile values for component-edge-to-visual-only tokens.
|
|
1919
|
+
|
|
1920
|
+
Spacing changed due to new workflow icon sizes.
|
|
1921
|
+
|
|
1922
|
+
## Token Diff
|
|
1923
|
+
|
|
1924
|
+
_Token values updated (5):_
|
|
1925
|
+
|
|
1926
|
+
- `component-edge-to-visual-only-100`
|
|
1927
|
+
- `component-edge-to-visual-only-200`
|
|
1928
|
+
- `component-edge-to-visual-only-300`
|
|
1929
|
+
- `component-edge-to-visual-only-50`
|
|
1930
|
+
- `component-edge-to-visual-only-75`
|
|
1931
|
+
|
|
1932
|
+
- c5430b7: Updated help-text-top-to-workflow-icon-_ token values to point to component-top-to-workflow-icon-_ tokens
|
|
1933
|
+
|
|
1934
|
+
## Token Diff
|
|
1935
|
+
|
|
1936
|
+
_Newly deprecated tokens (4):_
|
|
1937
|
+
|
|
1938
|
+
- `help-text-top-to-workflow-icon-extra-large`: use `component-edge-to-visual-only-300`
|
|
1939
|
+
- `help-text-top-to-workflow-icon-large`: use `component-edge-to-visual-only-200`
|
|
1940
|
+
- `help-text-top-to-workflow-icon-medium`: use `component-edge-to-visual-only-100`
|
|
1941
|
+
- `help-text-top-to-workflow-icon-small`: use `component-edge-to-visual-only-75`
|
|
1942
|
+
|
|
1943
|
+
## 13.0.0-beta.9
|
|
1944
|
+
|
|
1945
|
+
### Minor Changes
|
|
1946
|
+
|
|
1947
|
+
- cf09c84: Updated workflow-icon-size-50, 75, 100, 200, 300 with Spectrum 2 values in mobile and desktop.
|
|
1948
|
+
Updated component-top-to-workflow and text-to-visual padding.
|
|
1949
|
+
Added 3 new non-color tokens for S2 component downstates in Tokens Studio.
|
|
1950
|
+
|
|
1951
|
+
## Design Motivation
|
|
1952
|
+
|
|
1953
|
+
Spectrum 2 icons have a different workflow icon sizing with base sizes 20 px (desktop), 24 px (mobile).
|
|
1954
|
+
|
|
1955
|
+
Updated padding values due to new workflow icon sizes in S2.
|
|
1956
|
+
|
|
1957
|
+
These tokens are used to calculate the perspective transform in CSS to achieve the effect of a component scaling down for down states in Spectrum 2. This is not applicable to all components.
|
|
1958
|
+
|
|
1959
|
+
## Tokens Diff
|
|
1960
|
+
|
|
1961
|
+
_Tokens added (3):_
|
|
1962
|
+
|
|
1963
|
+
- `component-size-difference-down`
|
|
1964
|
+
- `component-size-minimum-perspective-down`
|
|
1965
|
+
- `component-size-width-ratio-down`
|
|
1966
|
+
|
|
1967
|
+
_Token values updated (15):_
|
|
1968
|
+
|
|
1969
|
+
- `component-top-to-workflow-icon-100`
|
|
1970
|
+
- `component-top-to-workflow-icon-200`
|
|
1971
|
+
- `component-top-to-workflow-icon-300`
|
|
1972
|
+
- `component-top-to-workflow-icon-50`
|
|
1973
|
+
- `component-top-to-workflow-icon-75`
|
|
1974
|
+
- `text-to-visual-100`
|
|
1975
|
+
- `text-to-visual-200`
|
|
1976
|
+
- `text-to-visual-300`
|
|
1977
|
+
- `text-to-visual-50`
|
|
1978
|
+
- `text-to-visual-75`
|
|
1979
|
+
- `workflow-icon-size-100`
|
|
1980
|
+
- `workflow-icon-size-200`
|
|
1981
|
+
- `workflow-icon-size-300`
|
|
1982
|
+
- `workflow-icon-size-50`
|
|
1983
|
+
- `workflow-icon-size-75`
|
|
1984
|
+
|
|
1985
|
+
## 13.0.0-beta.8
|
|
1986
|
+
|
|
1987
|
+
### Minor Changes
|
|
1988
|
+
|
|
1989
|
+
- 507f3c2: Added new and updating existing background layer tokens to S2 set in Tokens Studio and S2/Variables. Also reordered token organization to reflect proper usage based on [S2 guidelines](https://s2.spectrum.corp.adobe.com/page/background-layers/#editing-contexts).
|
|
1990
|
+
|
|
1991
|
+
## Design Motivation
|
|
1992
|
+
|
|
1993
|
+
In Spectrum 2, background layers are used differently depending on the primary context of the page. We now have a full set of tokens to help users distinguish between primary purposes, editing vs browsing.
|
|
1994
|
+
|
|
1995
|
+
## Token Diff
|
|
1996
|
+
|
|
1997
|
+
_Tokens added (2):_
|
|
1998
|
+
|
|
1999
|
+
- `background-elevated-color`
|
|
2000
|
+
- `background-pasteboard-color`
|
|
2001
|
+
|
|
2002
|
+
_Token values updated (1):_
|
|
2003
|
+
|
|
2004
|
+
- `background-base-color`
|
|
2005
|
+
|
|
2006
|
+
## 13.0.0-beta.7
|
|
2007
|
+
|
|
2008
|
+
### Minor Changes
|
|
2009
|
+
|
|
2010
|
+
- 4853f76: Added schema to all tokens and fixed values that didn't meet schema requirements
|
|
2011
|
+
|
|
2012
|
+
## Token Diff
|
|
2013
|
+
|
|
2014
|
+
_Token values updated (328):_
|
|
2015
|
+
|
|
2016
|
+
- `accent-background-color-default`
|
|
2017
|
+
- `accent-background-color-down`
|
|
2018
|
+
- `accent-background-color-hover`
|
|
2019
|
+
- `accent-background-color-key-focus`
|
|
2020
|
+
- `accent-color-100`
|
|
2021
|
+
- `accent-color-1000`
|
|
2022
|
+
- `accent-color-1100`
|
|
2023
|
+
- `accent-color-1200`
|
|
2024
|
+
- `accent-color-1300`
|
|
2025
|
+
- `accent-color-1400`
|
|
2026
|
+
- `accent-color-200`
|
|
2027
|
+
- `accent-color-300`
|
|
2028
|
+
- `accent-color-400`
|
|
2029
|
+
- `accent-color-500`
|
|
2030
|
+
- `accent-color-600`
|
|
2031
|
+
- `accent-color-700`
|
|
2032
|
+
- `accent-color-800`
|
|
2033
|
+
- `accent-color-900`
|
|
2034
|
+
- `accent-content-color-default`
|
|
2035
|
+
- `accent-content-color-down`
|
|
2036
|
+
- `accent-content-color-hover`
|
|
2037
|
+
- `accent-content-color-key-focus`
|
|
2038
|
+
- `accent-content-color-selected`
|
|
2039
|
+
- `accent-visual-color`
|
|
2040
|
+
- `blue-100`
|
|
2041
|
+
- `blue-1000`
|
|
2042
|
+
- `blue-1100`
|
|
2043
|
+
- `blue-1200`
|
|
2044
|
+
- `blue-1300`
|
|
2045
|
+
- `blue-1400`
|
|
2046
|
+
- `blue-200`
|
|
2047
|
+
- `blue-300`
|
|
2048
|
+
- `blue-400`
|
|
2049
|
+
- `blue-500`
|
|
2050
|
+
- `blue-600`
|
|
2051
|
+
- `blue-700`
|
|
2052
|
+
- `blue-800`
|
|
2053
|
+
- `blue-900`
|
|
2054
|
+
- `blue-background-color-default`
|
|
2055
|
+
- `blue-visual-color`
|
|
2056
|
+
- `celery-100`
|
|
2057
|
+
- `celery-1000`
|
|
2058
|
+
- `celery-1100`
|
|
2059
|
+
- `celery-1200`
|
|
2060
|
+
- `celery-1300`
|
|
2061
|
+
- `celery-1400`
|
|
2062
|
+
- `celery-200`
|
|
2063
|
+
- `celery-300`
|
|
2064
|
+
- `celery-400`
|
|
2065
|
+
- `celery-500`
|
|
2066
|
+
- `celery-600`
|
|
2067
|
+
- `celery-700`
|
|
2068
|
+
- `celery-800`
|
|
2069
|
+
- `celery-900`
|
|
2070
|
+
- `celery-background-color-default`
|
|
2071
|
+
- `celery-visual-color`
|
|
2072
|
+
- `chartreuse-100`
|
|
2073
|
+
- `chartreuse-1000`
|
|
2074
|
+
- `chartreuse-1100`
|
|
2075
|
+
- `chartreuse-1200`
|
|
2076
|
+
- `chartreuse-1300`
|
|
2077
|
+
- `chartreuse-1400`
|
|
2078
|
+
- `chartreuse-200`
|
|
2079
|
+
- `chartreuse-300`
|
|
2080
|
+
- `chartreuse-400`
|
|
2081
|
+
- `chartreuse-500`
|
|
2082
|
+
- `chartreuse-600`
|
|
2083
|
+
- `chartreuse-700`
|
|
2084
|
+
- `chartreuse-800`
|
|
2085
|
+
- `chartreuse-900`
|
|
2086
|
+
- `chartreuse-background-color-default`
|
|
2087
|
+
- `chartreuse-visual-color`
|
|
2088
|
+
- `contextual-help-body-size`
|
|
2089
|
+
- `cyan-100`
|
|
2090
|
+
- `cyan-1000`
|
|
2091
|
+
- `cyan-1100`
|
|
2092
|
+
- `cyan-1200`
|
|
2093
|
+
- `cyan-1300`
|
|
2094
|
+
- `cyan-1400`
|
|
2095
|
+
- `cyan-200`
|
|
2096
|
+
- `cyan-300`
|
|
2097
|
+
- `cyan-400`
|
|
2098
|
+
- `cyan-500`
|
|
2099
|
+
- `cyan-600`
|
|
2100
|
+
- `cyan-700`
|
|
2101
|
+
- `cyan-800`
|
|
2102
|
+
- `cyan-900`
|
|
2103
|
+
- `cyan-background-color-default`
|
|
2104
|
+
- `cyan-visual-color`
|
|
2105
|
+
- `drop-zone-background-color`
|
|
2106
|
+
- `focus-indicator-color`
|
|
2107
|
+
- `fuchsia-100`
|
|
2108
|
+
- `fuchsia-1000`
|
|
2109
|
+
- `fuchsia-1100`
|
|
2110
|
+
- `fuchsia-1200`
|
|
2111
|
+
- `fuchsia-1300`
|
|
2112
|
+
- `fuchsia-1400`
|
|
2113
|
+
- `fuchsia-200`
|
|
2114
|
+
- `fuchsia-300`
|
|
2115
|
+
- `fuchsia-400`
|
|
2116
|
+
- `fuchsia-500`
|
|
2117
|
+
- `fuchsia-600`
|
|
2118
|
+
- `fuchsia-700`
|
|
2119
|
+
- `fuchsia-800`
|
|
2120
|
+
- `fuchsia-900`
|
|
2121
|
+
- `fuchsia-background-color-default`
|
|
2122
|
+
- `fuchsia-visual-color`
|
|
2123
|
+
- `green-100`
|
|
2124
|
+
- `green-1000`
|
|
2125
|
+
- `green-1100`
|
|
2126
|
+
- `green-1200`
|
|
2127
|
+
- `green-1300`
|
|
2128
|
+
- `green-1400`
|
|
2129
|
+
- `green-200`
|
|
2130
|
+
- `green-300`
|
|
2131
|
+
- `green-400`
|
|
2132
|
+
- `green-500`
|
|
2133
|
+
- `green-600`
|
|
2134
|
+
- `green-700`
|
|
2135
|
+
- `green-800`
|
|
2136
|
+
- `green-900`
|
|
2137
|
+
- `green-background-color-default`
|
|
2138
|
+
- `green-visual-color`
|
|
2139
|
+
- `icon-color-blue-primary-default`
|
|
2140
|
+
- `icon-color-green-primary-default`
|
|
2141
|
+
- `icon-color-red-primary-default`
|
|
2142
|
+
- `icon-color-yellow-primary-default`
|
|
2143
|
+
- `indigo-100`
|
|
2144
|
+
- `indigo-1000`
|
|
2145
|
+
- `indigo-1100`
|
|
2146
|
+
- `indigo-1200`
|
|
2147
|
+
- `indigo-1300`
|
|
2148
|
+
- `indigo-1400`
|
|
2149
|
+
- `indigo-200`
|
|
2150
|
+
- `indigo-300`
|
|
2151
|
+
- `indigo-400`
|
|
2152
|
+
- `indigo-500`
|
|
2153
|
+
- `indigo-600`
|
|
2154
|
+
- `indigo-700`
|
|
2155
|
+
- `indigo-800`
|
|
2156
|
+
- `indigo-900`
|
|
2157
|
+
- `indigo-background-color-default`
|
|
2158
|
+
- `indigo-visual-color`
|
|
2159
|
+
- `informative-background-color-default`
|
|
2160
|
+
- `informative-background-color-down`
|
|
2161
|
+
- `informative-background-color-hover`
|
|
2162
|
+
- `informative-background-color-key-focus`
|
|
2163
|
+
- `informative-color-100`
|
|
2164
|
+
- `informative-color-1000`
|
|
2165
|
+
- `informative-color-1100`
|
|
2166
|
+
- `informative-color-1200`
|
|
2167
|
+
- `informative-color-1300`
|
|
2168
|
+
- `informative-color-1400`
|
|
2169
|
+
- `informative-color-200`
|
|
2170
|
+
- `informative-color-300`
|
|
2171
|
+
- `informative-color-400`
|
|
2172
|
+
- `informative-color-500`
|
|
2173
|
+
- `informative-color-600`
|
|
2174
|
+
- `informative-color-700`
|
|
2175
|
+
- `informative-color-800`
|
|
2176
|
+
- `informative-color-900`
|
|
2177
|
+
- `informative-visual-color`
|
|
2178
|
+
- `magenta-100`
|
|
2179
|
+
- `magenta-1000`
|
|
2180
|
+
- `magenta-1100`
|
|
2181
|
+
- `magenta-1200`
|
|
2182
|
+
- `magenta-1300`
|
|
2183
|
+
- `magenta-1400`
|
|
2184
|
+
- `magenta-200`
|
|
2185
|
+
- `magenta-300`
|
|
2186
|
+
- `magenta-400`
|
|
2187
|
+
- `magenta-500`
|
|
2188
|
+
- `magenta-600`
|
|
2189
|
+
- `magenta-700`
|
|
2190
|
+
- `magenta-800`
|
|
2191
|
+
- `magenta-900`
|
|
2192
|
+
- `magenta-background-color-default`
|
|
2193
|
+
- `magenta-visual-color`
|
|
2194
|
+
- `navigational-indicator-top-to-back-icon-extra-large`
|
|
2195
|
+
- `navigational-indicator-top-to-back-icon-large`
|
|
2196
|
+
- `navigational-indicator-top-to-back-icon-medium`
|
|
2197
|
+
- `navigational-indicator-top-to-back-icon-small`
|
|
2198
|
+
- `negative-background-color-default`
|
|
2199
|
+
- `negative-background-color-down`
|
|
2200
|
+
- `negative-background-color-hover`
|
|
2201
|
+
- `negative-background-color-key-focus`
|
|
2202
|
+
- `negative-border-color-default`
|
|
2203
|
+
- `negative-border-color-down`
|
|
2204
|
+
- `negative-border-color-focus`
|
|
2205
|
+
- `negative-border-color-focus-hover`
|
|
2206
|
+
- `negative-border-color-hover`
|
|
2207
|
+
- `negative-border-color-key-focus`
|
|
2208
|
+
- `negative-color-100`
|
|
2209
|
+
- `negative-color-1000`
|
|
2210
|
+
- `negative-color-1100`
|
|
2211
|
+
- `negative-color-1200`
|
|
2212
|
+
- `negative-color-1300`
|
|
2213
|
+
- `negative-color-1400`
|
|
2214
|
+
- `negative-color-200`
|
|
2215
|
+
- `negative-color-300`
|
|
2216
|
+
- `negative-color-400`
|
|
2217
|
+
- `negative-color-500`
|
|
2218
|
+
- `negative-color-600`
|
|
2219
|
+
- `negative-color-700`
|
|
2220
|
+
- `negative-color-800`
|
|
2221
|
+
- `negative-color-900`
|
|
2222
|
+
- `negative-content-color-default`
|
|
2223
|
+
- `negative-content-color-down`
|
|
2224
|
+
- `negative-content-color-hover`
|
|
2225
|
+
- `negative-content-color-key-focus`
|
|
2226
|
+
- `negative-visual-color`
|
|
2227
|
+
- `notice-background-color-default`
|
|
2228
|
+
- `notice-color-100`
|
|
2229
|
+
- `notice-color-1000`
|
|
2230
|
+
- `notice-color-1100`
|
|
2231
|
+
- `notice-color-1200`
|
|
2232
|
+
- `notice-color-1300`
|
|
2233
|
+
- `notice-color-1400`
|
|
2234
|
+
- `notice-color-200`
|
|
2235
|
+
- `notice-color-300`
|
|
2236
|
+
- `notice-color-400`
|
|
2237
|
+
- `notice-color-500`
|
|
2238
|
+
- `notice-color-600`
|
|
2239
|
+
- `notice-color-700`
|
|
2240
|
+
- `notice-color-800`
|
|
2241
|
+
- `notice-color-900`
|
|
2242
|
+
- `notice-visual-color`
|
|
2243
|
+
- `orange-100`
|
|
2244
|
+
- `orange-1000`
|
|
2245
|
+
- `orange-1100`
|
|
2246
|
+
- `orange-1200`
|
|
2247
|
+
- `orange-1300`
|
|
2248
|
+
- `orange-1400`
|
|
2249
|
+
- `orange-200`
|
|
2250
|
+
- `orange-300`
|
|
2251
|
+
- `orange-400`
|
|
2252
|
+
- `orange-500`
|
|
2253
|
+
- `orange-600`
|
|
2254
|
+
- `orange-700`
|
|
2255
|
+
- `orange-800`
|
|
2256
|
+
- `orange-900`
|
|
2257
|
+
- `orange-background-color-default`
|
|
2258
|
+
- `orange-visual-color`
|
|
2259
|
+
- `positive-background-color-default`
|
|
2260
|
+
- `positive-background-color-down`
|
|
2261
|
+
- `positive-background-color-hover`
|
|
2262
|
+
- `positive-background-color-key-focus`
|
|
2263
|
+
- `positive-color-100`
|
|
2264
|
+
- `positive-color-1000`
|
|
2265
|
+
- `positive-color-1100`
|
|
2266
|
+
- `positive-color-1200`
|
|
2267
|
+
- `positive-color-1300`
|
|
2268
|
+
- `positive-color-1400`
|
|
2269
|
+
- `positive-color-200`
|
|
2270
|
+
- `positive-color-300`
|
|
2271
|
+
- `positive-color-400`
|
|
2272
|
+
- `positive-color-500`
|
|
2273
|
+
- `positive-color-600`
|
|
2274
|
+
- `positive-color-700`
|
|
2275
|
+
- `positive-color-800`
|
|
2276
|
+
- `positive-color-900`
|
|
2277
|
+
- `positive-visual-color`
|
|
2278
|
+
- `purple-100`
|
|
2279
|
+
- `purple-1000`
|
|
2280
|
+
- `purple-1100`
|
|
2281
|
+
- `purple-1200`
|
|
2282
|
+
- `purple-1300`
|
|
2283
|
+
- `purple-1400`
|
|
2284
|
+
- `purple-200`
|
|
2285
|
+
- `purple-300`
|
|
2286
|
+
- `purple-400`
|
|
2287
|
+
- `purple-500`
|
|
2288
|
+
- `purple-600`
|
|
2289
|
+
- `purple-700`
|
|
2290
|
+
- `purple-800`
|
|
2291
|
+
- `purple-900`
|
|
2292
|
+
- `purple-background-color-default`
|
|
2293
|
+
- `purple-visual-color`
|
|
2294
|
+
- `red-100`
|
|
2295
|
+
- `red-1000`
|
|
2296
|
+
- `red-1100`
|
|
2297
|
+
- `red-1200`
|
|
2298
|
+
- `red-1300`
|
|
2299
|
+
- `red-1400`
|
|
2300
|
+
- `red-200`
|
|
2301
|
+
- `red-300`
|
|
2302
|
+
- `red-400`
|
|
2303
|
+
- `red-500`
|
|
2304
|
+
- `red-600`
|
|
2305
|
+
- `red-700`
|
|
2306
|
+
- `red-800`
|
|
2307
|
+
- `red-900`
|
|
2308
|
+
- `red-background-color-default`
|
|
2309
|
+
- `red-visual-color`
|
|
2310
|
+
- `seafoam-100`
|
|
2311
|
+
- `seafoam-1000`
|
|
2312
|
+
- `seafoam-1100`
|
|
2313
|
+
- `seafoam-1200`
|
|
2314
|
+
- `seafoam-1300`
|
|
2315
|
+
- `seafoam-1400`
|
|
2316
|
+
- `seafoam-200`
|
|
2317
|
+
- `seafoam-300`
|
|
2318
|
+
- `seafoam-400`
|
|
2319
|
+
- `seafoam-500`
|
|
2320
|
+
- `seafoam-600`
|
|
2321
|
+
- `seafoam-700`
|
|
2322
|
+
- `seafoam-800`
|
|
2323
|
+
- `seafoam-900`
|
|
2324
|
+
- `seafoam-background-color-default`
|
|
2325
|
+
- `seafoam-visual-color`
|
|
2326
|
+
- `side-navigation-item-to-header`
|
|
2327
|
+
- `table-selected-row-background-color`
|
|
2328
|
+
- `yellow-100`
|
|
2329
|
+
- `yellow-1000`
|
|
2330
|
+
- `yellow-1100`
|
|
2331
|
+
- `yellow-1200`
|
|
2332
|
+
- `yellow-1300`
|
|
2333
|
+
- `yellow-1400`
|
|
2334
|
+
- `yellow-200`
|
|
2335
|
+
- `yellow-300`
|
|
2336
|
+
- `yellow-400`
|
|
2337
|
+
- `yellow-500`
|
|
2338
|
+
- `yellow-600`
|
|
2339
|
+
- `yellow-700`
|
|
2340
|
+
- `yellow-800`
|
|
2341
|
+
- `yellow-900`
|
|
2342
|
+
- `yellow-background-color-default`
|
|
2343
|
+
- `yellow-visual-color`
|
|
2344
|
+
|
|
2345
|
+
## 13.0.0-beta.6
|
|
2346
|
+
|
|
2347
|
+
### Minor Changes
|
|
2348
|
+
|
|
2349
|
+
- 6d1c661: Added new Spectrum 2 color tokens for both light and dark themes:
|
|
2350
|
+
|
|
2351
|
+
Cinnamon 100 to 1600
|
|
2352
|
+
|
|
2353
|
+
## Design Motivation
|
|
2354
|
+
|
|
2355
|
+
This is the last new color that is a part of the new color set needed from Premiere Pro. The additional color will also help when creating new data vis color palettes for Spectrum 2.
|
|
2356
|
+
|
|
2357
|
+
## Token Diff
|
|
2358
|
+
|
|
2359
|
+
_Tokens added (17):_
|
|
2360
|
+
|
|
2361
|
+
- `cinnamon-100`
|
|
2362
|
+
- `cinnamon-200`
|
|
2363
|
+
- `cinnamon-300`
|
|
2364
|
+
- `cinnamon-400`
|
|
2365
|
+
- `cinnamon-500`
|
|
2366
|
+
- `cinnamon-600`
|
|
2367
|
+
- `cinnamon-700`
|
|
2368
|
+
- `cinnamon-800`
|
|
2369
|
+
- `cinnamon-900`
|
|
2370
|
+
- `cinnamon-1000`
|
|
2371
|
+
- `cinnamon-1100`
|
|
2372
|
+
- `cinnamon-1200`
|
|
2373
|
+
- `cinnamon-1300`
|
|
2374
|
+
- `cinnamon-1400`
|
|
2375
|
+
- `cinnamon-1500`
|
|
2376
|
+
- `cinnamon-1600`
|
|
2377
|
+
|
|
2378
|
+
- 91d7e95: Fixed bug in the light theme value for notice-background-color-default, from notice-color-800 to notice-color-600
|
|
2379
|
+
|
|
2380
|
+
## Design Motivation
|
|
2381
|
+
|
|
2382
|
+
While updating the badge component in Figma, we noticed a bug where notice-background-color-default in S2 was entered incorrectly for light theme, and should instead match the value for S1
|
|
2383
|
+
|
|
2384
|
+
## Token Diff
|
|
2385
|
+
|
|
2386
|
+
_Token values updated (1):_
|
|
2387
|
+
|
|
2388
|
+
- `notice-background-color-default`: `light`: `notice-color-800` -> `notice-color-600`
|
|
2389
|
+
|
|
3
2390
|
## 13.0.0-beta.5
|
|
4
2391
|
|
|
5
2392
|
### Major Changes
|