@adobe/spectrum-tokens 13.0.0-beta.46 → 13.0.0-beta.48

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 CHANGED
@@ -1,5 +1,403 @@
1
1
  # @adobe/spectrum-tokens
2
2
 
3
+ ## 13.0.0-beta.48
4
+
5
+ ### Minor Changes
6
+
7
+ - [#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:
8
+
9
+ - Letter spacing, text-align, cjk
10
+
11
+ 1. New gradient stop tokens
12
+ 1. New component tokens for bar panel, rating, segmented control, slider, select box
13
+ 1. New static color tokens
14
+
15
+ _Tokens added (51):_
16
+
17
+ - `letter-spacing`
18
+ - `text-align-start`
19
+ - `text-align-center`
20
+ - `text-align-end`
21
+ - `body-size-xxs`
22
+ - `body-cjk-size-xxxl`
23
+ - `body-cjk-size-xxl`
24
+ - `body-cjk-size-xl`
25
+ - `body-cjk-size-l`
26
+ - `body-cjk-size-m`
27
+ - `body-cjk-size-s`
28
+ - `body-cjk-size-xs`
29
+ - `body-cjk-size-xxs`
30
+ - `gradient-stop-1-genai`
31
+ - `gradient-stop-2-genai`
32
+ - `gradient-stop-3-genai`
33
+ - `gradient-stop-1-premium`
34
+ - `gradient-stop-2-premium`
35
+ - `gradient-stop-3-premium`
36
+ - `bar-panel-width`
37
+ - `bar-panel-minimum-width`
38
+ - `bar-panel-maximum-width`
39
+ - `bar-panel-spacing-extra-spacious`
40
+ - `rating-top-to-content-area-small`
41
+ - `rating-bottom-to-content-area-small`
42
+ - `rating-edge-to-content-area-small`
43
+ - `rating-top-to-content-area-medium`
44
+ - `rating-bottom-to-content-area-medium`
45
+ - `rating-edge-to-content-area-medium`
46
+ - `rating-width-small`
47
+ - `rating-height-small`
48
+ - `rating-width-medium`
49
+ - `rating-height-medium`
50
+ - `segmented-control-selection-border-width`
51
+ - `slider-handle-precision-width`
52
+ - `slider-track-height-medium`
53
+ - `slider-track-height-large`
54
+ - `segmented-control-item-height`
55
+ - `static-blue-900`
56
+ - `static-blue-1000`
57
+ - `static-fuchsia-900`
58
+ - `static-fuchsia-1000`
59
+ - `static-indigo-900`
60
+ - `static-indigo-1000`
61
+ - `static-magenta-900`
62
+ - `static-magenta-1000`
63
+ - `static-red-900`
64
+ - `static-red-1000`
65
+ - `bar-panel-gripper-color`
66
+ - `bar-panel-gripper-color-drag`
67
+ - `select-box-selected-border-color`
68
+
69
+ _Token values updated (9):_
70
+
71
+ - `font-size-1200`
72
+ - `desktop`: `50px` -> `51px`
73
+ - `font-size-1300`
74
+ - `desktop`: `60px` -> `58px`
75
+ - `cjk-letter-spacing`: `0.05em` -> `letter-spacing`
76
+ - `body-cjk-strong-font-weight`: `black-font-weight` -> `extra-bold-font-weight`
77
+ - `body-cjk-strong-emphasized-font-weight`: `black-font-weight` -> `extra-bold-font-weight`
78
+ - `slider-control-to-field-label-small`
79
+ - `desktop`: `5px` -> `-4px`
80
+ - `mobile`: `6px` -> `-8px`
81
+ - `slider-control-to-field-label-medium`
82
+ - `desktop`: `8px` -> `-12px`
83
+ - `mobile`: `10px` -> `-16px`
84
+ - `slider-control-to-field-label-large`
85
+ - `desktop`: `11px` -> `-16px`
86
+ - `mobile`: `14px` -> `-20px`
87
+ - `slider-control-to-field-label-extra-large`
88
+ - `desktop`: `14px` -> `-20px`
89
+ - `mobile`: `17px` -> `-28px`
90
+
91
+ ## 13.0.0-beta.47
92
+
93
+ ### Minor Changes
94
+
95
+ - [`75a573b`](https://github.com/adobe/spectrum-tokens/commit/75a573bcbb7b71ecdf5f246682755de24dae5afc) Thanks [@GarthDB](https://github.com/GarthDB)! - S2 subtle and visual colors update
96
+ Updated S2 Table tokens
97
+
98
+ <details><summary>Tokens added (42):</summary>
99
+
100
+ - `illustrated-message-maximum-width`
101
+ - `side-focus-indicator`
102
+ - `table-row-bottom-to-text-extra-large`
103
+ - `table-row-bottom-to-text-extra-large-regular`
104
+ - `table-row-bottom-to-text-large`
105
+ - `table-row-bottom-to-text-large-regular`
106
+ - `table-row-bottom-to-text-medium`
107
+ - `table-row-bottom-to-text-medium-regular`
108
+ - `table-row-bottom-to-text-small`
109
+ - `table-row-bottom-to-text-small-regular`
110
+ - `table-row-checkbox-to-top-extra-large`
111
+ - `table-row-checkbox-to-top-extra-large-regular`
112
+ - `table-row-checkbox-to-top-large`
113
+ - `table-row-checkbox-to-top-large-regular`
114
+ - `table-row-checkbox-to-top-medium`
115
+ - `table-row-checkbox-to-top-medium-regular`
116
+ - `table-row-checkbox-to-top-small`
117
+ - `table-row-checkbox-to-top-small-regular`
118
+ - `table-row-height-extra-large`
119
+ - `table-row-height-extra-large-regular`
120
+ - `table-row-height-large`
121
+ - `table-row-height-large-regular`
122
+ - `table-row-height-medium`
123
+ - `table-row-height-medium-regular`
124
+ - `table-row-height-small`
125
+ - `table-row-height-small-regular`
126
+ - `table-row-top-to-text-extra-large`
127
+ - `table-row-top-to-text-extra-large-regular`
128
+ - `table-row-top-to-text-large`
129
+ - `table-row-top-to-text-large-regular`
130
+ - `table-row-top-to-text-medium`
131
+ - `table-row-top-to-text-medium-regular`
132
+ - `table-row-top-to-text-small`
133
+ - `table-row-top-to-text-small-regular`
134
+ - `table-thumbnail-to-top-minimum-extra-large`
135
+ - `table-thumbnail-to-top-minimum-extra-large-regular`
136
+ - `table-thumbnail-to-top-minimum-large`
137
+ - `table-thumbnail-to-top-minimum-large-regular`
138
+ - `table-thumbnail-to-top-minimum-medium`
139
+ - `table-thumbnail-to-top-minimum-medium-regular`
140
+ - `table-thumbnail-to-top-minimum-small`
141
+ - `table-thumbnail-to-top-minimum-small-regular`
142
+
143
+ </details>
144
+
145
+ <details><summary>Tokens updated (101):</summary>
146
+
147
+ - `informative-subtle-background-color-default`
148
+ - light: `blue-200` -> `informative-color-200`
149
+ - dark: `blue-200` -> `informative-color-300`
150
+ - `positive-subtle-background-color-default`
151
+ - light: `green-200` -> `positive-color-200`
152
+ - dark: `green-200` -> `positive-color-300`
153
+ - `notice-subtle-background-color-default`
154
+ - light: `orange-200` -> `notice-color-200`
155
+ - dark: `orange-200` -> `notice-color-300`
156
+ - `negative-subtle-background-color-default`
157
+ - light: `red-200` -> `negative-color-200`
158
+ - dark: `red-200` -> `negative-color-300`
159
+ - `table-column-header-row-top-to-text-medium`
160
+ - desktop: `7px` -> `6px`
161
+ - `table-row-height-small-regular`
162
+ - desktop: `32px` -> `table-row-height-small`
163
+ - mobile: `40px` -> `table-row-height-small`
164
+ - `table-row-height-medium-regular`
165
+ - desktop: `40px` -> `table-row-height-medium`
166
+ - mobile: `50px` -> `table-row-height-medium`
167
+ - `table-row-height-large-regular`
168
+ - desktop: `48px` -> `table-row-height-large`
169
+ - mobile: `60px` -> `table-row-height-large`
170
+ - `table-row-height-extra-large-regular`
171
+ - desktop: `56px` -> `table-row-height-extra-large`
172
+ - mobile: `70px` -> `table-row-height-extra-large`
173
+ - `table-row-top-to-text-small-regular`
174
+ - desktop: `8px` -> `table-row-top-to-text-small`
175
+ - mobile: `10px` -> `table-row-top-to-text-small`
176
+ - `table-row-top-to-text-medium-regular`
177
+ - desktop: `11px` -> `table-row-top-to-text-medium`
178
+ - mobile: `14px` -> `table-row-top-to-text-medium`
179
+ - `table-row-top-to-text-large-regular`
180
+ - desktop: `14px` -> `table-row-top-to-text-large`
181
+ - mobile: `18px` -> `table-row-top-to-text-large`
182
+ - `table-row-top-to-text-extra-large-regular`
183
+ - desktop: `17px` -> `table-row-top-to-text-extra-large`
184
+ - mobile: `21px` -> `table-row-top-to-text-extra-large`
185
+ - `table-row-bottom-to-text-small-regular`
186
+ - desktop: `9px` -> `table-row-bottom-to-text-small`
187
+ - mobile: `11px` -> `table-row-bottom-to-text-small`
188
+ - `table-row-bottom-to-text-medium-regular`
189
+ - desktop: `12px` -> `table-row-bottom-to-text-medium`
190
+ - mobile: `15px` -> `table-row-bottom-to-text-medium`
191
+ - `table-row-bottom-to-text-large-regular`
192
+ - desktop: `14px` -> `table-row-bottom-to-text-large`
193
+ - mobile: `18px` -> `table-row-bottom-to-text-large`
194
+ - `table-row-bottom-to-text-extra-large-regular`
195
+ - desktop: `17px` -> `table-row-bottom-to-text-extra-large`
196
+ - mobile: `22px` -> `table-row-bottom-to-text-extra-large`
197
+ - `table-row-top-to-text-medium-spacious`
198
+ - mobile: `18px` -> `16px`
199
+ - `table-header-row-checkbox-to-top-medium`
200
+ - desktop: `9px` -> `8px`
201
+ - mobile: `13px` -> `11px`
202
+ - `table-row-checkbox-to-top-small-regular`
203
+ - desktop: `10px` -> `table-row-checkbox-to-top-small`
204
+ - mobile: `14px` -> `table-row-checkbox-to-top-small`
205
+ - `table-row-checkbox-to-top-medium-compact`
206
+ - desktop: `9px` -> `8px`
207
+ - mobile: `13px` -> `11px`
208
+ - `table-row-checkbox-to-top-medium-regular`
209
+ - desktop: `13px` -> `table-row-checkbox-to-top-medium`
210
+ - mobile: `18px` -> `table-row-checkbox-to-top-medium`
211
+ - `table-row-checkbox-to-top-medium-spacious`
212
+ - desktop: `17px` -> `16px`
213
+ - mobile: `23px` -> `21px`
214
+ - `table-row-checkbox-to-top-large-regular`
215
+ - desktop: `16px` -> `table-row-checkbox-to-top-large`
216
+ - mobile: `22px` -> `table-row-checkbox-to-top-large`
217
+ - `table-row-checkbox-to-top-extra-large-regular`
218
+ - desktop: `19px` -> `table-row-checkbox-to-top-extra-large`
219
+ - mobile: `26px` -> `table-row-checkbox-to-top-extra-large`
220
+ - `table-thumbnail-to-top-minimum-small-regular`
221
+ - desktop: `5px` -> `table-thumbnail-to-top-minimum-small`
222
+ - mobile: `6px` -> `table-thumbnail-to-top-minimum-small`
223
+ - `table-thumbnail-to-top-minimum-medium-regular`
224
+ - desktop: `7px` -> `table-thumbnail-to-top-minimum-medium`
225
+ - mobile: `9px` -> `table-thumbnail-to-top-minimum-medium`
226
+ - `table-thumbnail-to-top-minimum-large-regular`
227
+ - desktop: `8px` -> `table-thumbnail-to-top-minimum-large`
228
+ - mobile: `10px` -> `table-thumbnail-to-top-minimum-large`
229
+ - `table-thumbnail-to-top-minimum-extra-large-regular`
230
+ - desktop: `8px` -> `table-thumbnail-to-top-minimum-extra-large`
231
+ - mobile: `10px` -> `table-thumbnail-to-top-minimum-extra-large`
232
+ - `blue-800`
233
+ - dark: `rgb(69, 110, 254)` -> `rgb(64, 105, 253)`
234
+ - `red-800`
235
+ - dark: `rgb(230, 54, 35)` -> `rgb(223, 52, 34)`
236
+ - `orange-800`
237
+ - dark: `rgb(205, 86, 0)` -> `rgb(199, 82, 0)`
238
+ - `yellow-800`
239
+ - dark: `rgb(169, 110, 0)` -> `rgb(164, 106, 0)`
240
+ - `chartreuse-800`
241
+ - dark: `rgb(109, 131, 0)` -> `rgb(106, 127, 0)`
242
+ - `celery-800`
243
+ - dark: `rgb(69, 138, 19)` -> `rgb(66, 134, 18)`
244
+ - `green-800`
245
+ - dark: `rgb(6, 140, 82)` -> `rgb(6, 136, 80)`
246
+ - `seafoam-800`
247
+ - dark: `rgb(8, 138, 116)` -> `rgb(8, 134, 112)`
248
+ - `cyan-800`
249
+ - dark: `rgb(15, 128, 194)` -> `rgb(13, 125, 186)`
250
+ - `indigo-800`
251
+ - dark: `rgb(119, 97, 252)` -> `rgb(116, 91, 252)`
252
+ - `purple-800`
253
+ - dark: `rgb(161, 84, 229)` -> `rgb(157, 78, 228)`
254
+ - `fuchsia-800`
255
+ - dark: `rgb(192, 64, 212)` -> `rgb(186, 60, 206)`
256
+ - `magenta-800`
257
+ - dark: `rgb(231, 41, 105)` -> `rgb(224, 38, 101)`
258
+ - `pink-800`
259
+ - dark: `rgb(220, 47, 156)` -> `rgb(213, 45, 151)`
260
+ - `turquoise-800`
261
+ - dark: `rgb(9, 135, 147)` -> `rgb(9, 131, 142)`
262
+ - `brown-800`
263
+ - dark: `rgb(148, 118, 73)` -> `rgb(143, 114, 69)`
264
+ - `silver-800`
265
+ - dark: `rgb(123, 123, 123)` -> `rgb(118, 118, 118)`
266
+ - `cinnamon-800`
267
+ - dark: `rgb(179, 103, 64)` -> `rgb(176, 98, 59)`
268
+ - `accent-background-color-default`
269
+ - dark: `accent-color-700` -> `accent-color-800`
270
+ - `accent-background-color-hover`
271
+ - dark: `accent-color-600` -> `accent-color-700`
272
+ - `accent-background-color-down`
273
+ - dark: `accent-color-600` -> `accent-color-700`
274
+ - `accent-background-color-key-focus`
275
+ - dark: `accent-color-600` -> `accent-color-700`
276
+ - `informative-background-color-default`
277
+ - dark: `informative-color-700` -> `informative-color-800`
278
+ - `informative-background-color-hover`
279
+ - dark: `informative-color-600` -> `informative-color-700`
280
+ - `informative-background-color-down`
281
+ - dark: `informative-color-600` -> `informative-color-700`
282
+ - `informative-background-color-key-focus`
283
+ - dark: `informative-color-600` -> `informative-color-700`
284
+ - `negative-background-color-default`
285
+ - dark: `negative-color-700` -> `negative-color-800`
286
+ - `negative-background-color-hover`
287
+ - dark: `negative-color-600` -> `negative-color-700`
288
+ - `negative-background-color-down`
289
+ - dark: `negative-color-600` -> `negative-color-700`
290
+ - `negative-background-color-key-focus`
291
+ - dark: `negative-color-600` -> `negative-color-700`
292
+ - `positive-background-color-default`
293
+ - dark: `positive-color-700` -> `positive-color-800`
294
+ - `positive-background-color-hover`
295
+ - dark: `positive-color-600` -> `positive-color-700`
296
+ - `positive-background-color-down`
297
+ - dark: `positive-color-600` -> `positive-color-700`
298
+ - `positive-background-color-key-focus`
299
+ - dark: `positive-color-600` -> `positive-color-700`
300
+ - `red-background-color-default`
301
+ - dark: `red-700` -> `red-800`
302
+ - `green-background-color-default`
303
+ - dark: `green-700` -> `green-800`
304
+ - `seafoam-background-color-default`
305
+ - dark: `seafoam-700` -> `seafoam-800`
306
+ - `cyan-background-color-default`
307
+ - dark: `cyan-700` -> `cyan-800`
308
+ - `blue-background-color-default`
309
+ - dark: `blue-700` -> `blue-800`
310
+ - `indigo-background-color-default`
311
+ - dark: `indigo-700` -> `indigo-800`
312
+ - `purple-background-color-default`
313
+ - dark: `purple-700` -> `purple-800`
314
+ - `fuchsia-background-color-default`
315
+ - dark: `fuchsia-700` -> `fuchsia-800`
316
+ - `magenta-background-color-default`
317
+ - dark: `magenta-700` -> `magenta-800`
318
+ - `negative-visual-color`
319
+ - dark: `negative-color-700` -> `negative-color-900`
320
+ - `notice-visual-color`
321
+ - light: `notice-color-700` -> `notice-color-800`
322
+ - `positive-visual-color`
323
+ - light: `positive-color-700` -> `positive-color-800`
324
+ - dark: `positive-color-800` -> `positive-color-900`
325
+ - `brown-background-color-default`
326
+ - dark: `brown-700` -> `brown-800`
327
+ - `cinnamon-background-color-default`
328
+ - dark: `cinnamon-700` -> `cinnamon-800`
329
+ - `pink-background-color-default`
330
+ - dark: `pink-700` -> `pink-800`
331
+ - `silver-background-color-default`
332
+ - dark: `silver-700` -> `silver-800`
333
+ - `turquoise-background-color-default`
334
+ - dark: `turquoise-700` -> `turquoise-800`
335
+ - `neutral-subtle-background-color-default`
336
+ - light: `gray-100` -> `gray-100`
337
+ - dark: `gray-100` -> `gray-300`
338
+ - `accent-subtle-background-color-default`
339
+ - light: `rgba(0, 0, 0, 0.2)` -> `accent-color-200`
340
+ - dark: `rgba(0, 0, 0, 0.6)` -> `accent-color-300`
341
+ - `gray-subtle-background-color-default`
342
+ - light: `rgba(0, 0, 0, 0.2)` -> `gray-100`
343
+ - dark: `rgba(0, 0, 0, 0.6)` -> `gray-300`
344
+ - `blue-subtle-background-color-default`
345
+ - light: `rgba(0, 0, 0, 0.2)` -> `blue-200`
346
+ - dark: `rgba(0, 0, 0, 0.6)` -> `blue-300`
347
+ - `green-subtle-background-color-default`
348
+ - light: `rgba(0, 0, 0, 0.2)` -> `green-200`
349
+ - dark: `rgba(0, 0, 0, 0.6)` -> `green-300`
350
+ - `orange-subtle-background-color-default`
351
+ - light: `rgba(0, 0, 0, 0.2)` -> `orange-200`
352
+ - dark: `rgba(0, 0, 0, 0.6)` -> `orange-300`
353
+ - `red-subtle-background-color-default`
354
+ - light: `rgba(0, 0, 0, 0.2)` -> `red-200`
355
+ - dark: `rgba(0, 0, 0, 0.6)` -> `red-300`
356
+ - `brown-subtle-background-color-default`
357
+ - light: `rgba(0, 0, 0, 0.2)` -> `brown-200`
358
+ - dark: `rgba(0, 0, 0, 0.6)` -> `brown-300`
359
+ - `cinnamon-subtle-background-color-default`
360
+ - light: `rgba(0, 0, 0, 0.2)` -> `cinnamon-200`
361
+ - dark: `rgba(0, 0, 0, 0.6)` -> `cinnamon-300`
362
+ - `celery-subtle-background-color-default`
363
+ - light: `rgba(0, 0, 0, 0.2)` -> `celery-200`
364
+ - dark: `rgba(0, 0, 0, 0.6)` -> `celery-300`
365
+ - `chartreuse-subtle-background-color-default`
366
+ - light: `rgba(0, 0, 0, 0.2)` -> `chartreuse-200`
367
+ - dark: `rgba(0, 0, 0, 0.6)` -> `chartreuse-300`
368
+ - `cyan-subtle-background-color-default`
369
+ - light: `rgba(0, 0, 0, 0.2)` -> `cyan-200`
370
+ - dark: `rgba(0, 0, 0, 0.6)` -> `cyan-300`
371
+ - `fuchsia-subtle-background-color-default`
372
+ - light: `rgba(0, 0, 0, 0.2)` -> `fuchsia-200`
373
+ - dark: `rgba(0, 0, 0, 0.6)` -> `fuchsia-300`
374
+ - `indigo-subtle-background-color-default`
375
+ - light: `rgba(0, 0, 0, 0.2)` -> `indigo-200`
376
+ - dark: `rgba(0, 0, 0, 0.6)` -> `indigo-300`
377
+ - `magenta-subtle-background-color-default`
378
+ - light: `rgba(0, 0, 0, 0.2)` -> `magenta-200`
379
+ - dark: `rgba(0, 0, 0, 0.6)` -> `magenta-300`
380
+ - `pink-subtle-background-color-default`
381
+ - light: `rgba(0, 0, 0, 0.2)` -> `pink-200`
382
+ - dark: `rgba(0, 0, 0, 0.6)` -> `pink-300`
383
+ - `purple-subtle-background-color-default`
384
+ - light: `rgba(0, 0, 0, 0.2)` -> `purple-200`
385
+ - dark: `rgba(0, 0, 0, 0.6)` -> `purple-300`
386
+ - `seafoam-subtle-background-color-default`
387
+ - light: `rgba(0, 0, 0, 0.2)` -> `seafoam-200`
388
+ - dark: `rgba(0, 0, 0, 0.6)` -> `seafoam-300`
389
+ - `silver-subtle-background-color-default`
390
+ - light: `rgba(0, 0, 0, 0.2)` -> `silver-200`
391
+ - dark: `rgba(0, 0, 0, 0.6)` -> `silver-300`
392
+ - `turquoise-subtle-background-color-default`
393
+ - light: `rgba(0, 0, 0, 0.2)` -> `turquoise-200`
394
+ - dark: `rgba(0, 0, 0, 0.6)` -> `turquoise-300`
395
+ - `yellow-subtle-background-color-default`
396
+ - light: `rgba(0, 0, 0, 0.2)` -> `yellow-200`
397
+ - dark: `rgba(0, 0, 0, 0.6)` -> `yellow-300`
398
+
399
+ </details>
400
+
3
401
  ## 13.0.0-beta.46
4
402
 
5
403
  ### Minor Changes