@adobe/spectrum-design-data 2.0.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/components/accordion.json +49 -295
  2. package/components/action-bar.json +16 -119
  3. package/components/action-button.json +69 -302
  4. package/components/action-group.json +74 -20
  5. package/components/alert-banner.json +27 -47
  6. package/components/alert-dialog.json +37 -45
  7. package/components/avatar-group.json +28 -54
  8. package/components/avatar.json +92 -59
  9. package/components/badge.json +121 -370
  10. package/components/breadcrumbs.json +53 -159
  11. package/components/button-group.json +40 -13
  12. package/components/button.json +88 -231
  13. package/components/cards.json +31 -290
  14. package/components/checkbox-group.json +58 -13
  15. package/components/checkbox.json +53 -156
  16. package/components/close-button.json +47 -76
  17. package/components/coach-indicator.json +44 -31
  18. package/components/coach-mark.json +19 -43
  19. package/components/color-area.json +64 -26
  20. package/components/color-handle.json +35 -27
  21. package/components/color-loupe.json +6 -17
  22. package/components/color-slider.json +80 -35
  23. package/components/color-wheel.json +51 -25
  24. package/components/combo-box.json +94 -246
  25. package/components/contextual-help.json +106 -59
  26. package/components/date-picker.json +57 -185
  27. package/components/divider.json +25 -17
  28. package/components/drop-zone.json +24 -119
  29. package/components/field-label.json +45 -103
  30. package/components/help-text.json +29 -97
  31. package/components/illustrated-message.json +25 -74
  32. package/components/in-field-progress-circle.json +0 -54
  33. package/components/in-line-alert.json +39 -130
  34. package/components/link.json +40 -58
  35. package/components/list-view.json +30 -181
  36. package/components/menu.json +100 -340
  37. package/components/meter.json +52 -78
  38. package/components/number-field.json +72 -239
  39. package/components/opacity-checkerboard.json +0 -18
  40. package/components/picker.json +95 -275
  41. package/components/popover.json +88 -45
  42. package/components/progress-bar.json +63 -78
  43. package/components/progress-circle.json +36 -33
  44. package/components/radio-button.json +36 -145
  45. package/components/radio-group.json +74 -18
  46. package/components/rating.json +33 -48
  47. package/components/search-field.json +64 -133
  48. package/components/segmented-control.json +37 -86
  49. package/components/select-box.json +52 -100
  50. package/components/side-navigation.json +32 -164
  51. package/components/slider.json +90 -182
  52. package/components/standard-dialog.json +37 -43
  53. package/components/status-light.json +92 -134
  54. package/components/steplist.json +23 -113
  55. package/components/swatch-group.json +50 -22
  56. package/components/swatch.json +62 -70
  57. package/components/switch.json +51 -143
  58. package/components/table.json +51 -232
  59. package/components/tabs.json +29 -84
  60. package/components/tag-field.json +53 -85
  61. package/components/tag-group.json +36 -18
  62. package/components/tag.json +43 -206
  63. package/components/takeover-dialog.json +30 -20
  64. package/components/text-area.json +114 -247
  65. package/components/text-field.json +90 -261
  66. package/components/thumbnail.json +46 -44
  67. package/components/title.json +0 -18
  68. package/components/toast.json +27 -61
  69. package/components/tooltip.json +36 -52
  70. package/components/tree-view.json +79 -200
  71. package/package.json +2 -2
  72. package/tokens/color-aliases.tokens.json +33 -0
  73. package/tokens/color-component.tokens.json +1 -1212
  74. package/tokens/color-palette.tokens.json +0 -33
  75. package/tokens/layout-component.tokens.json +833 -24074
  76. package/tokens/layout.tokens.json +64 -597
  77. package/tokens/typography.tokens.json +559 -3318
@@ -148,30 +148,66 @@
148
148
  }
149
149
  ],
150
150
  "options": {
151
- "label": { "type": "string" },
151
+ "label": {
152
+ "type": "string"
153
+ },
152
154
  "size": {
153
155
  "type": "string",
154
156
  "default": "m",
155
157
  "values": [
156
- { "value": "s" },
157
- { "value": "m" },
158
- { "value": "l" },
159
- { "value": "xl" }
158
+ {
159
+ "value": "s"
160
+ },
161
+ {
162
+ "value": "m"
163
+ },
164
+ {
165
+ "value": "l"
166
+ },
167
+ {
168
+ "value": "xl"
169
+ }
160
170
  ]
161
171
  },
162
172
  "labelPosition": {
163
173
  "type": "string",
164
174
  "default": "top",
165
- "values": [{ "value": "top" }, { "value": "side" }]
175
+ "values": [
176
+ {
177
+ "value": "top"
178
+ },
179
+ {
180
+ "value": "side"
181
+ }
182
+ ]
183
+ },
184
+ "hideLabel": {
185
+ "type": "boolean",
186
+ "default": false
187
+ },
188
+ "isDisabled": {
189
+ "type": "boolean",
190
+ "default": false
191
+ },
192
+ "isError": {
193
+ "type": "boolean",
194
+ "default": false
195
+ },
196
+ "isRequired": {
197
+ "type": "boolean",
198
+ "default": false
166
199
  },
167
- "hideLabel": { "type": "boolean", "default": false },
168
- "isDisabled": { "type": "boolean", "default": false },
169
- "isError": { "type": "boolean", "default": false },
170
- "isRequired": { "type": "boolean", "default": false },
171
200
  "necessityIndicator": {
172
201
  "type": "string",
173
202
  "default": "icon",
174
- "values": [{ "value": "text" }, { "value": "icon" }]
203
+ "values": [
204
+ {
205
+ "value": "text"
206
+ },
207
+ {
208
+ "value": "icon"
209
+ }
210
+ ]
175
211
  },
176
212
  "hideStepper": {
177
213
  "type": "boolean",
@@ -186,246 +222,43 @@
186
222
  }
187
223
  ],
188
224
  "states": [
189
- { "name": "hover", "trigger": "interaction" },
190
- { "name": "focus-+-hover", "trigger": "prop" },
191
- { "name": "focus-+-not-hover", "trigger": "prop" }
192
- ],
193
- "lifecycle": { "introduced": "1.0.0-draft" },
194
- "tokenBindings": [
195
- {
196
- "token": "field-label-to-component",
197
- "context": "Spacing (field label to number field)"
198
- },
199
- {
200
- "token": "in-field-stepper-to-end-small",
201
- "context": "Spacing (in-field-stepper to edge)"
202
- },
203
- {
204
- "token": "in-field-stepper-to-end-medium",
205
- "context": "Spacing (in-field-stepper to edge)"
206
- },
207
- {
208
- "token": "in-field-stepper-to-end-large",
209
- "context": "Spacing (in-field-stepper to edge)"
210
- },
211
- {
212
- "token": "in-field-stepper-to-end-extra-large",
213
- "context": "Spacing (in-field-stepper to edge)"
214
- },
215
- {
216
- "token": "help-text-to-component",
217
- "context": "Spacing (number field to help text)"
218
- },
219
- { "token": "field-default-width-small", "context": "Width (default)" },
220
- { "token": "field-default-width-medium", "context": "Width (default)" },
221
- { "token": "field-default-width-large", "context": "Width (default)" },
222
- {
223
- "token": "field-default-width-extra-large",
224
- "context": "Width (default)"
225
- },
226
- {
227
- "token": "number-field-minimum-width-multiplier",
228
- "context": "Width (minimum)"
229
- },
230
- {
231
- "token": "number-field-with-stepper-minimum-width-small",
232
- "context": "Width (minimum)"
233
- },
234
- {
235
- "token": "number-field-with-stepper-minimum-width-medium",
236
- "context": "Width (minimum)"
237
- },
238
- {
239
- "token": "number-field-with-stepper-minimum-width-large",
240
- "context": "Width (minimum)"
241
- },
242
- {
243
- "token": "number-field-with-stepper-minimum-width-extra-large",
244
- "context": "Width (minimum)"
245
- },
246
- { "token": "component-height-75", "context": "Height" },
247
- { "token": "component-height-100", "context": "Height" },
248
- { "token": "component-height-200", "context": "Height" },
249
- { "token": "component-height-300", "context": "Height" },
250
- { "token": "corner-radius-medium-size-small", "context": "Rounding" },
251
- { "token": "corner-radius-medium-size-medium", "context": "Rounding" },
252
- { "token": "corner-radius-medium-size-large", "context": "Rounding" },
253
- { "token": "corner-radius-medium-size-extra-large", "context": "Rounding" },
254
- {
255
- "token": "component-edge-to-text-75",
256
- "context": "Spacing (start/end edge to value)"
257
- },
258
- {
259
- "token": "component-edge-to-text-100",
260
- "context": "Spacing (start/end edge to value)"
261
- },
262
- {
263
- "token": "component-edge-to-text-200",
264
- "context": "Spacing (start/end edge to value)"
265
- },
266
- {
267
- "token": "component-edge-to-text-300",
268
- "context": "Spacing (start/end edge to value)"
269
- },
270
- {
271
- "token": "component-top-to-text-75",
272
- "context": "Spacing (top/bottom edge to label)"
273
- },
274
225
  {
275
- "token": "component-top-to-text-100",
276
- "context": "Spacing (top/bottom edge to label)"
226
+ "name": "hover",
227
+ "trigger": "interaction"
277
228
  },
278
229
  {
279
- "token": "component-top-to-text-200",
280
- "context": "Spacing (top/bottom edge to label)"
230
+ "name": "focus-+-hover",
231
+ "trigger": "prop"
281
232
  },
282
233
  {
283
- "token": "component-top-to-text-300",
284
- "context": "Spacing (top/bottom edge to label)"
285
- },
286
- {
287
- "token": "text-to-visual-75",
288
- "context": "Spacing (minimum, text to stepper)"
289
- },
290
- {
291
- "token": "text-to-visual-100",
292
- "context": "Spacing (minimum, text to stepper)"
293
- },
294
- {
295
- "token": "text-to-visual-200",
296
- "context": "Spacing (minimum, text to stepper)"
297
- },
298
- {
299
- "token": "text-to-visual-300",
300
- "context": "Spacing (minimum, text to stepper)"
301
- },
302
- { "token": "border-width-200", "context": "Border" },
303
- { "token": "focus-indicator-thickness", "context": "Focus indicator" },
304
- { "token": "focus-indicator-gap", "context": "Focus indicator" },
305
- {
306
- "token": "spacing-200",
307
- "context": "Spacing (minimum, field label to field)"
308
- },
309
- { "token": "workflow-icon-size-75", "context": "Prefix min-width" },
310
- { "token": "workflow-icon-size-100", "context": "Prefix min-width" },
311
- { "token": "workflow-icon-size-200", "context": "Prefix min-width" },
312
- { "token": "workflow-icon-size-300", "context": "Prefix min-width" },
313
- {
314
- "token": "component-top-to-workflow-icon-75",
315
- "context": "Spacing (top/bottom edge to alert icon)"
316
- },
317
- {
318
- "token": "component-top-to-workflow-icon-100",
319
- "context": "Spacing (top/bottom edge to alert icon)"
320
- },
321
- {
322
- "token": "component-top-to-workflow-icon-200",
323
- "context": "Spacing (top/bottom edge to alert icon)"
324
- },
325
- {
326
- "token": "component-top-to-workflow-icon-300",
327
- "context": "Spacing (top/bottom edge to alert icon)"
328
- },
329
- {
330
- "token": "number-field-visual-to-in-field-stepper-small",
331
- "context": "Spacing (minimum, alert icon to in-field button)"
332
- },
333
- {
334
- "token": "number-field-visual-to-in-field-stepper-medium",
335
- "context": "Spacing (minimum, alert icon to in-field button)"
336
- },
337
- {
338
- "token": "number-field-visual-to-in-field-stepper-large",
339
- "context": "Spacing (minimum, alert icon to in-field button)"
340
- },
341
- {
342
- "token": "number-field-visual-to-in-field-stepper-extra-large",
343
- "context": "Spacing (minimum, alert icon to in-field button)"
344
- },
345
- {
346
- "token": "field-edge-to-alert-icon-small",
347
- "context": "Spacing (alert icon to end edge)"
348
- },
349
- {
350
- "token": "field-edge-to-alert-icon-medium",
351
- "context": "Spacing (alert icon to end edge)"
352
- },
353
- {
354
- "token": "field-edge-to-alert-icon-large",
355
- "context": "Spacing (alert icon to end edge)"
356
- },
357
- {
358
- "token": "field-edge-to-alert-icon-extra-large",
359
- "context": "Spacing (alert icon to end edge)"
360
- },
361
- { "token": "gray-25", "context": "Background and border" },
362
- { "token": "gray-300", "context": "Background and border" },
363
- { "token": "gray-400", "context": "Background and border" },
364
- { "token": "gray-900", "context": "Background and border" },
365
- { "token": "gray-800", "context": "Background and border" },
366
- { "token": "negative-border-color-default", "context": "Border (error)" },
367
- { "token": "negative-border-color-hover", "context": "Border (error)" },
368
- {
369
- "token": "negative-border-color-focus-hover",
370
- "context": "Border (error)"
371
- },
372
- { "token": "negative-border-color-focus", "context": "Border (error)" },
373
- { "token": "negative-border-color-key-focus", "context": "Border (error)" },
374
- { "token": "neutral-content-color-default", "context": "Value" },
375
- { "token": "neutral-content-color-hover", "context": "Value" },
376
- { "token": "neutral-content-color-focus-hover", "context": "Value" },
377
- { "token": "neutral-content-color-focus", "context": "Value" },
378
- { "token": "neutral-content-color-key-focus", "context": "Value" },
379
- { "token": "negative-visual-color", "context": "Alert icon" },
380
- { "token": "disabled-content-color", "context": "Disabled" },
381
- { "token": "disabled-border-color", "context": "Disabled" },
382
- { "token": "disabled-background-color", "context": "Disabled" },
383
- { "token": "focus-indicator-color", "context": "Focus ring" },
384
- { "token": "gray-600", "context": "Leading icon" },
385
- { "token": "default-font-family", "context": "Value" },
386
- { "token": "regular-font-weight", "context": "Value" },
387
- { "token": "default-font-style", "context": "Value" },
388
- { "token": "component-s-regular", "context": "Value" },
389
- { "token": "component-m-regular", "context": "Value" },
390
- { "token": "component-l-regular", "context": "Value" },
391
- { "token": "component-xl-regular", "context": "Value" },
392
- { "token": "line-height-font-size-75", "context": "Value" },
393
- { "token": "line-height-font-size-100", "context": "Value" },
394
- { "token": "line-height-font-size-200", "context": "Value" },
395
- { "token": "line-height-font-size-300", "context": "Value" },
396
- { "token": "cjk-line-height-100", "context": "Value" },
397
- { "token": "medium-font-weight", "context": "Prefix" },
398
- { "token": "component-s-medium", "context": "Prefix" },
399
- { "token": "component-m-medium", "context": "Prefix" },
400
- { "token": "component-l-medium", "context": "Prefix" },
401
- { "token": "component-xl-medium", "context": "Prefix" },
402
- {
403
- "token": "component-padding-vertical-200",
404
- "context": "Spacing (top/bottom edge to text)"
405
- },
406
- {
407
- "token": "component-padding-vertical-300",
408
- "context": "Spacing (top/bottom edge to text)"
409
- },
410
- {
411
- "token": "component-top-to-text-50",
412
- "context": "Spacing (top/bottom edge to text)"
413
- },
414
- {
415
- "token": "component-top-to-workflow-icon-300",
416
- "context": "Leading icon (top/bottom edge to leading icon)"
417
- },
418
- { "token": "positive-visual-color", "context": "Positive icon" }
234
+ "name": "focus-+-not-hover",
235
+ "trigger": "prop"
236
+ }
419
237
  ],
238
+ "lifecycle": {
239
+ "introduced": "1.0.0-draft"
240
+ },
420
241
  "accessibility": {
421
242
  "role": "spinbutton",
422
243
  "intents": ["choose", "input"],
423
244
  "focusable": true,
424
245
  "keyboardIntents": ["increment", "decrement"],
425
246
  "wcag": [
426
- { "criterion": "1.3.1", "level": "A", "title": "Info and Relationships" },
427
- { "criterion": "2.1.1", "level": "A", "title": "Keyboard" },
428
- { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
247
+ {
248
+ "criterion": "1.3.1",
249
+ "level": "A",
250
+ "title": "Info and Relationships"
251
+ },
252
+ {
253
+ "criterion": "2.1.1",
254
+ "level": "A",
255
+ "title": "Keyboard"
256
+ },
257
+ {
258
+ "criterion": "4.1.2",
259
+ "level": "A",
260
+ "title": "Name, Role, Value"
261
+ }
429
262
  ]
430
263
  }
431
264
  }
@@ -45,24 +45,6 @@
45
45
  "lifecycle": {
46
46
  "introduced": "1.0.0-draft"
47
47
  },
48
- "tokenBindings": [
49
- {
50
- "token": "opacity-checkerboard-square-size-small",
51
- "context": "Square size"
52
- },
53
- {
54
- "token": "opacity-checkerboard-square-size-medium",
55
- "context": "Square size"
56
- },
57
- {
58
- "token": "opacity-checkerboard-square-light",
59
- "context": "Square"
60
- },
61
- {
62
- "token": "opacity-checkerboard-square-dark",
63
- "context": "Square"
64
- }
65
- ],
66
48
  "accessibility": {
67
49
  "focusable": false
68
50
  }