@adobe/spectrum-design-data 2.0.0 → 2.1.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 (76) 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 +38 -40
  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 +33 -262
  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 +96 -242
  25. package/components/contextual-help.json +106 -59
  26. package/components/date-picker.json +59 -171
  27. package/components/divider.json +25 -17
  28. package/components/drop-zone.json +28 -105
  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 +31 -176
  36. package/components/menu.json +105 -339
  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 +53 -216
  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 +86 -197
  71. package/package.json +2 -2
  72. package/tokens/color-component.tokens.json +1 -1212
  73. package/tokens/color-palette.tokens.json +0 -33
  74. package/tokens/layout-component.tokens.json +833 -24074
  75. package/tokens/layout.tokens.json +0 -597
  76. package/tokens/typography.tokens.json +559 -3318
@@ -136,297 +136,164 @@
136
136
  }
137
137
  ],
138
138
  "options": {
139
- "label": { "type": "string" },
139
+ "label": {
140
+ "type": "string"
141
+ },
140
142
  "labelPosition": {
141
143
  "type": "string",
142
144
  "default": "top",
143
- "values": [{ "value": "top" }, { "value": "side" }]
145
+ "values": [
146
+ {
147
+ "value": "top"
148
+ },
149
+ {
150
+ "value": "side"
151
+ }
152
+ ]
153
+ },
154
+ "hideLabel": {
155
+ "type": "boolean",
156
+ "default": false
157
+ },
158
+ "value": {
159
+ "type": "string",
160
+ "description": "from minValue to maxValue"
161
+ },
162
+ "width": {
163
+ "type": "number"
144
164
  },
145
- "hideLabel": { "type": "boolean", "default": false },
146
- "value": { "type": "string", "description": "from minValue to maxValue" },
147
- "width": { "type": "number" },
148
165
  "size": {
149
166
  "type": "string",
150
167
  "default": "m",
151
168
  "values": [
152
- { "value": "s" },
153
- { "value": "m" },
154
- { "value": "l" },
155
- { "value": "xl" }
169
+ {
170
+ "value": "s"
171
+ },
172
+ {
173
+ "value": "m"
174
+ },
175
+ {
176
+ "value": "l"
177
+ },
178
+ {
179
+ "value": "xl"
180
+ }
156
181
  ]
157
182
  },
158
183
  "necessityIndicator": {
159
184
  "type": "string",
160
185
  "default": "icon",
161
- "values": [{ "value": "text" }, { "value": "icon" }]
162
- },
163
- "isRequired": { "type": "boolean", "default": false },
164
- "hasCharacterCount": { "type": "boolean", "default": false },
165
- "showValidIcon": { "type": "boolean", "default": false },
166
- "isError": { "type": "boolean", "default": false },
167
- "isDisabled": { "type": "boolean", "default": false },
168
- "hideDragIcon": { "type": "boolean", "default": false },
169
- "height": {
170
- "type": "number",
171
- "description": "If undefined, height is dynamic and grows with input text."
172
- },
173
- "helpText": { "type": "string" },
174
- "errorMessage": { "type": "string" },
175
- "inputType": {
176
- "type": "string",
177
- "default": "text",
178
186
  "values": [
179
- { "value": "text" },
180
- { "value": "url" },
181
- { "value": "phone" },
182
- { "value": "email" },
183
- { "value": "password" }
187
+ {
188
+ "value": "text"
189
+ },
190
+ {
191
+ "value": "icon"
192
+ }
184
193
  ]
185
- }
186
- },
187
- "states": [
188
- { "name": "hover", "trigger": "interaction" },
189
- { "name": "focus-+-hover", "trigger": "prop" },
190
- { "name": "focus-+-not-hover", "trigger": "prop" },
191
- { "name": "keyboard-focus", "trigger": "interaction" }
192
- ],
193
- "lifecycle": { "introduced": "1.0.0-draft" },
194
- "tokenBindings": [
195
- { "token": "field-default-width-small", "context": "Width (default)" },
196
- { "token": "field-default-width-medium", "context": "Width (default)" },
197
- { "token": "field-default-width-large", "context": "Width (default)" },
198
- {
199
- "token": "field-default-width-extra-large",
200
- "context": "Width (default)"
201
194
  },
202
- { "token": "text-area-minimum-width", "context": "Width (minimum)" },
203
- { "token": "text-area-minimum-height", "context": "Height" },
204
- { "token": "corner-radius-medium-size-small", "context": "Rounding" },
205
- { "token": "corner-radius-medium-size-medium", "context": "Rounding" },
206
- { "token": "corner-radius-medium-size-large", "context": "Rounding" },
207
- { "token": "corner-radius-medium-size-extra-large", "context": "Rounding" },
208
- {
209
- "token": "component-edge-to-text-75",
210
- "context": "Spacing (start/end edge to value)"
195
+ "isRequired": {
196
+ "type": "boolean",
197
+ "default": false
211
198
  },
212
- {
213
- "token": "component-edge-to-text-100",
214
- "context": "Spacing (start/end edge to value)"
215
- },
216
- {
217
- "token": "component-edge-to-text-200",
218
- "context": "Spacing (start/end edge to value)"
199
+ "hasCharacterCount": {
200
+ "type": "boolean",
201
+ "default": false
219
202
  },
220
- {
221
- "token": "component-edge-to-text-300",
222
- "context": "Spacing (start/end edge to value)"
203
+ "showValidIcon": {
204
+ "type": "boolean",
205
+ "default": false
223
206
  },
224
- { "token": "workflow-icon-size-75", "context": "Prefix min-width" },
225
- { "token": "workflow-icon-size-100", "context": "Prefix min-width" },
226
- { "token": "workflow-icon-size-200", "context": "Prefix min-width" },
227
- { "token": "workflow-icon-size-300", "context": "Prefix min-width" },
228
- {
229
- "token": "text-to-visual-75",
230
- "context": "Spacing (prefix to value/placeholder)"
207
+ "isError": {
208
+ "type": "boolean",
209
+ "default": false
231
210
  },
232
- {
233
- "token": "text-to-visual-100",
234
- "context": "Spacing (prefix to value/placeholder)"
211
+ "isDisabled": {
212
+ "type": "boolean",
213
+ "default": false
235
214
  },
236
- {
237
- "token": "text-to-visual-200",
238
- "context": "Spacing (prefix to value/placeholder)"
239
- },
240
- {
241
- "token": "text-to-visual-300",
242
- "context": "Spacing (prefix to value/placeholder)"
243
- },
244
- { "token": "border-width-200", "context": "Border" },
245
- { "token": "focus-indicator-thickness", "context": "Focus indicator" },
246
- {
247
- "token": "field-label-to-component",
248
- "context": "Spacing (field label to text area)"
249
- },
250
- {
251
- "token": "spacing-200",
252
- "context": "Spacing (character count to field label)"
253
- },
254
- {
255
- "token": "side-label-character-count-to-field",
256
- "context": "Spacing (side label, field to character count)"
257
- },
258
- {
259
- "token": "help-text-to-component",
260
- "context": "Spacing (text area to help text)"
261
- },
262
- {
263
- "token": "component-top-to-workflow-icon-75",
264
- "context": "Spacing (top/bottom edge to alert icon)"
265
- },
266
- {
267
- "token": "component-top-to-workflow-icon-100",
268
- "context": "Spacing (top/bottom edge to alert icon)"
269
- },
270
- {
271
- "token": "component-top-to-workflow-icon-200",
272
- "context": "Spacing (top/bottom edge to alert icon)"
273
- },
274
- {
275
- "token": "component-top-to-workflow-icon-300",
276
- "context": "Spacing (top/bottom edge to alert icon)"
277
- },
278
- {
279
- "token": "field-edge-to-alert-icon-small",
280
- "context": "Spacing (alert icon to end edge)"
281
- },
282
- {
283
- "token": "field-edge-to-alert-icon-medium",
284
- "context": "Spacing (alert icon to end edge)"
285
- },
286
- {
287
- "token": "field-edge-to-alert-icon-large",
288
- "context": "Spacing (alert icon to end edge)"
215
+ "hideDragIcon": {
216
+ "type": "boolean",
217
+ "default": false
289
218
  },
290
- {
291
- "token": "field-edge-to-alert-icon-extra-large",
292
- "context": "Spacing (alert icon to end edge)"
293
- },
294
- { "token": "checkmark-icon-size-75", "context": "Checkmark UI icon asset" },
295
- {
296
- "token": "checkmark-icon-size-100",
297
- "context": "Checkmark UI icon asset"
298
- },
299
- {
300
- "token": "checkmark-icon-size-200",
301
- "context": "Checkmark UI icon asset"
302
- },
303
- {
304
- "token": "checkmark-icon-size-300",
305
- "context": "Checkmark UI icon asset"
306
- },
307
- {
308
- "token": "field-top-to-validation-icon-small",
309
- "context": "Spacing (top/bottom edge to validation icon)"
310
- },
311
- {
312
- "token": "field-top-to-validation-icon-medium",
313
- "context": "Spacing (top/bottom edge to validation icon)"
314
- },
315
- {
316
- "token": "field-top-to-validation-icon-large",
317
- "context": "Spacing (top/bottom edge to validation icon)"
318
- },
319
- {
320
- "token": "field-top-to-validation-icon-extra-large",
321
- "context": "Spacing (top/bottom edge to validation icon)"
322
- },
323
- {
324
- "token": "field-edge-to-validation-icon-small",
325
- "context": "Spacing (validation icon to end edge)"
326
- },
327
- {
328
- "token": "field-edge-to-validation-icon-medium",
329
- "context": "Spacing (validation icon to end edge)"
330
- },
331
- {
332
- "token": "field-edge-to-validation-icon-large",
333
- "context": "Spacing (validation icon to end edge)"
334
- },
335
- {
336
- "token": "field-edge-to-validation-icon-extra-large",
337
- "context": "Spacing (validation icon to end edge)"
338
- },
339
- { "token": "gray-25", "context": "Background and border" },
340
- { "token": "gray-300", "context": "Background and border" },
341
- { "token": "gray-400", "context": "Background and border" },
342
- { "token": "gray-900", "context": "Background and border" },
343
- { "token": "gray-800", "context": "Background and border" },
344
- {
345
- "token": "neutral-subdued-content-color-default",
346
- "context": "Background and border"
347
- },
348
- { "token": "negative-border-color-default", "context": "Border (error)" },
349
- { "token": "negative-border-color-hover", "context": "Border (error)" },
350
- {
351
- "token": "negative-border-color-focus-hover",
352
- "context": "Border (error)"
353
- },
354
- { "token": "negative-border-color-focus", "context": "Border (error)" },
355
- { "token": "negative-border-color-key-focus", "context": "Border (error)" },
356
- { "token": "neutral-content-color-default", "context": "Value" },
357
- { "token": "neutral-content-color-hover", "context": "Value" },
358
- { "token": "neutral-content-color-focus-hover", "context": "Value" },
359
- { "token": "neutral-content-color-focus", "context": "Value" },
360
- { "token": "neutral-content-color-key-focus", "context": "Value" },
361
- { "token": "negative-visual-color", "context": "Alert icon" },
362
- { "token": "positive-visual-color", "context": "Positive icon" },
363
- { "token": "disabled-border-color", "context": "Disabled" },
364
- { "token": "disabled-content-color", "context": "Disabled" },
365
- { "token": "focus-indicator-color", "context": "Focus ring" },
366
- { "token": "gray-600", "context": "Leading icon" },
367
- { "token": "default-font-family", "context": "Label" },
368
- { "token": "regular-font-weight", "context": "Label" },
369
- { "token": "default-font-style", "context": "Label" },
370
- { "token": "component-s-regular", "context": "Label" },
371
- { "token": "component-m-regular", "context": "Label" },
372
- { "token": "component-l-regular", "context": "Label" },
373
- { "token": "component-xl-regular", "context": "Label" },
374
- { "token": "line-height-font-size-75", "context": "Label" },
375
- { "token": "line-height-font-size-100", "context": "Label" },
376
- { "token": "line-height-font-size-200", "context": "Label" },
377
- { "token": "line-height-font-size-300", "context": "Label" },
378
- { "token": "cjk-line-height-100", "context": "Label" },
379
- { "token": "medium-font-weight", "context": "Prefix" },
380
- { "token": "component-s-medium", "context": "Prefix" },
381
- { "token": "component-m-medium", "context": "Prefix" },
382
- { "token": "component-l-medium", "context": "Prefix" },
383
- { "token": "component-xl-medium", "context": "Prefix" },
384
- {
385
- "token": "component-top-to-text-50",
386
- "context": "Spacing (top/bottom edge to text)"
387
- },
388
- {
389
- "token": "component-top-to-text-100",
390
- "context": "Spacing (top/bottom edge to text)"
219
+ "height": {
220
+ "type": "number",
221
+ "description": "If undefined, height is dynamic and grows with input text."
391
222
  },
392
- {
393
- "token": "field-label-top-to-asterisk-large",
394
- "context": "Spacing (top/bottom edge to required)"
223
+ "helpText": {
224
+ "type": "string"
395
225
  },
396
- {
397
- "token": "field-label-top-to-asterisk-extra-large",
398
- "context": "Spacing (top/bottom edge to required)"
226
+ "errorMessage": {
227
+ "type": "string"
399
228
  },
229
+ "inputType": {
230
+ "type": "string",
231
+ "default": "text",
232
+ "values": [
233
+ {
234
+ "value": "text"
235
+ },
236
+ {
237
+ "value": "url"
238
+ },
239
+ {
240
+ "value": "phone"
241
+ },
242
+ {
243
+ "value": "email"
244
+ },
245
+ {
246
+ "value": "password"
247
+ }
248
+ ]
249
+ }
250
+ },
251
+ "states": [
400
252
  {
401
- "token": "component-top-to-text-300",
402
- "context": "Leading icon (top/bottom edge to leading icon)"
253
+ "name": "hover",
254
+ "trigger": "interaction"
403
255
  },
404
256
  {
405
- "token": "component-top-to-workflow-icon-300",
406
- "context": "Leading icon (top/bottom edge to leading icon)"
257
+ "name": "focus-+-hover",
258
+ "trigger": "prop"
407
259
  },
408
260
  {
409
- "token": "component-padding-vertical-200",
410
- "context": "S2 Spacing (top/bottom edge to text: inline)"
261
+ "name": "focus-+-not-hover",
262
+ "trigger": "prop"
411
263
  },
412
264
  {
413
- "token": "component-padding-vertical-300",
414
- "context": "S2 Spacing (top/bottom edge to text: inline)"
265
+ "name": "keyboard-focus",
266
+ "trigger": "interaction"
415
267
  }
416
268
  ],
269
+ "lifecycle": {
270
+ "introduced": "1.0.0-draft"
271
+ },
417
272
  "accessibility": {
418
273
  "role": "textbox",
419
274
  "intents": ["input"],
420
275
  "focusable": true,
421
276
  "wcag": [
422
- { "criterion": "1.3.1", "level": "A", "title": "Info and Relationships" },
277
+ {
278
+ "criterion": "1.3.1",
279
+ "level": "A",
280
+ "title": "Info and Relationships"
281
+ },
423
282
  {
424
283
  "criterion": "1.3.5",
425
284
  "level": "AA",
426
285
  "title": "Identify Input Purpose"
427
286
  },
428
- { "criterion": "2.1.1", "level": "A", "title": "Keyboard" },
429
- { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
287
+ {
288
+ "criterion": "2.1.1",
289
+ "level": "A",
290
+ "title": "Keyboard"
291
+ },
292
+ {
293
+ "criterion": "4.1.2",
294
+ "level": "A",
295
+ "title": "Name, Role, Value"
296
+ }
430
297
  ]
431
298
  }
432
299
  }