@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
@@ -93,7 +93,14 @@
93
93
  "type": "string",
94
94
  "default": "m",
95
95
  "description": "Controls the overall size of the breadcrumb component.",
96
- "values": [{ "value": "m" }, { "value": "l" }]
96
+ "values": [
97
+ {
98
+ "value": "m"
99
+ },
100
+ {
101
+ "value": "l"
102
+ }
103
+ ]
97
104
  },
98
105
  "items": {
99
106
  "type": "array",
@@ -114,7 +121,10 @@
114
121
  "description": "Indicates if the breadcrumb item represents the current page.",
115
122
  "default": false
116
123
  },
117
- "isDisabled": { "type": "boolean", "default": false }
124
+ "isDisabled": {
125
+ "type": "boolean",
126
+ "default": false
127
+ }
118
128
  },
119
129
  "required": ["label"]
120
130
  }
@@ -123,7 +133,14 @@
123
133
  "type": "string",
124
134
  "default": "chevron",
125
135
  "description": "The separator icon used between breadcrumb items.",
126
- "values": [{ "value": "chevron" }, { "value": "none" }]
136
+ "values": [
137
+ {
138
+ "value": "chevron"
139
+ },
140
+ {
141
+ "value": "none"
142
+ }
143
+ ]
127
144
  },
128
145
  "isTruncated": {
129
146
  "type": "boolean",
@@ -134,10 +151,18 @@
134
151
  "type": "string",
135
152
  "description": "Overrides the size of the breadcrumb items when isMultiline is true.",
136
153
  "values": [
137
- { "value": "s" },
138
- { "value": "m" },
139
- { "value": "l" },
140
- { "value": "xl" }
154
+ {
155
+ "value": "s"
156
+ },
157
+ {
158
+ "value": "m"
159
+ },
160
+ {
161
+ "value": "l"
162
+ },
163
+ {
164
+ "value": "xl"
165
+ }
141
166
  ]
142
167
  }
143
168
  },
@@ -148,172 +173,41 @@
148
173
  }
149
174
  ],
150
175
  "states": [
151
- { "name": "hover", "trigger": "interaction" },
152
- { "name": "down", "trigger": "interaction" },
153
- { "name": "keyboard-focus", "trigger": "interaction" },
154
- { "name": "drag-and-drop", "trigger": "prop" }
155
- ],
156
- "lifecycle": { "introduced": "1.0.0-draft" },
157
- "tokenBindings": [
158
- { "token": "component-height-200", "context": "Height" },
159
- {
160
- "token": "breadcrumbs-text-to-separator-large",
161
- "context": "Spacing (breadcrumb item/title to separator icon)"
162
- },
163
- {
164
- "token": "breadcrumbs-start-edge-to-text-large",
165
- "context": "Spacing (start and end edge to text)"
166
- },
167
- {
168
- "token": "breadcrumbs-end-edge-to-text",
169
- "context": "Spacing (start and end edge to text)"
170
- },
171
- {
172
- "token": "component-top-to-text-200",
173
- "context": "Spacing (top and bottom edge to text)"
174
- },
175
- {
176
- "token": "component-bottom-to-text-200",
177
- "context": "Spacing (top and bottom edge to text)"
178
- },
179
- {
180
- "token": "breadcrumbs-top-to-truncated-menu",
181
- "context": "Spacing (top and bottom edge to truncated menu button)"
182
- },
183
- {
184
- "token": "breadcrumbs-top-to-separator-large",
185
- "context": "Spacing (top and bottom edge to separator icon)"
186
- },
187
- {
188
- "token": "breadcrumbs-truncated-menu-to-separator",
189
- "context": "Spacing (truncated menu button to separator icon)"
190
- },
191
- {
192
- "token": "breadcrumbs-start-edge-to-truncated-menu",
193
- "context": "Spacing (start edge to truncated menu button)"
194
- },
195
- {
196
- "token": "text-underline-thickness",
197
- "context": "Breadcrumb item (hover, down, focus states)"
198
- },
199
- {
200
- "token": "text-underline-gap",
201
- "context": "Breadcrumb item (hover, down, focus states)"
202
- },
203
- { "token": "focus-indicator-thickness", "context": "Focus indicator" },
204
- { "token": "focus-indicator-gap", "context": "Focus indicator" },
205
- {
206
- "token": "default-font-family",
207
- "context": "Text (breadcrumb item and title)"
208
- },
209
- {
210
- "token": "regular-font-weight",
211
- "context": "Text (breadcrumb item and title)"
212
- },
213
- {
214
- "token": "default-font-style",
215
- "context": "Text (breadcrumb item and title)"
216
- },
217
- { "token": "font-size-200", "context": "Text (breadcrumb item and title)" },
218
- {
219
- "token": "line-height-100",
220
- "context": "Text (breadcrumb item and title)"
221
- },
222
- {
223
- "token": "bold-font-weight",
224
- "context": "Text (breadcrumb item and title)"
225
- },
226
- {
227
- "token": "neutral-subdued-content-color-default",
228
- "context": "Breadcrumb item and title"
229
- },
230
- {
231
- "token": "neutral-content-color-default",
232
- "context": "Breadcrumb item and title"
233
- },
234
- {
235
- "token": "disabled-content-color",
236
- "context": "Breadcrumb item (disabled)"
237
- },
238
- { "token": "focus-indicator-color", "context": "Focus indicator" },
239
- { "token": "component-height-100", "context": "Height (medium)" },
240
- {
241
- "token": "breadcrumbs-text-to-separator-medium",
242
- "context": "Spacing (breadcrumb item/title to separator icon, medium)"
243
- },
244
- {
245
- "token": "breadcrumbs-start-edge-to-text-medium",
246
- "context": "Spacing (start and end edge to text, medium)"
247
- },
248
176
  {
249
- "token": "component-top-to-text-100",
250
- "context": "Spacing (top and bottom edge to text, medium)"
177
+ "name": "hover",
178
+ "trigger": "interaction"
251
179
  },
252
180
  {
253
- "token": "component-bottom-to-text-100",
254
- "context": "Spacing (top and bottom edge to text, medium)"
181
+ "name": "down",
182
+ "trigger": "interaction"
255
183
  },
256
184
  {
257
- "token": "breadcrumbs-top-to-separator-medium",
258
- "context": "Spacing (top and bottom edge to separator icon, medium)"
185
+ "name": "keyboard-focus",
186
+ "trigger": "interaction"
259
187
  },
260
188
  {
261
- "token": "font-size-100",
262
- "context": "Text (breadcrumb item and title, medium)"
263
- },
264
- { "token": "breadcrumbs-height-multiline", "context": "Height" },
265
- {
266
- "token": "breadcrumbs-text-to-separator-multiline",
267
- "context": "Spacing (breadcrumb item/title to separator icon, multiline)"
268
- },
269
- {
270
- "token": "breadcrumbs-start-edge-to-text-multiline",
271
- "context": "Spacing (start and end edge to text, multiline)"
272
- },
273
- {
274
- "token": "breadcrumbs-top-to-text-multiline",
275
- "context": "Spacing (top and bottom edge to text, multiline)"
276
- },
277
- {
278
- "token": "breadcrumbs-bottom-to-text-multiline",
279
- "context": "Spacing (top and bottom edge to text, multiline)"
280
- },
281
- {
282
- "token": "breadcrumbs-top-to-separator-multiline",
283
- "context": "Spacing (top edge to separator icon, multiline)"
284
- },
285
- {
286
- "token": "breadcrumbs-separator-to-bottom-text-multiline",
287
- "context": "Spacing (separator icon to bottom text, multiline)"
288
- },
289
- {
290
- "token": "breadcrumbs-truncated-menu-to-bottom-text",
291
- "context": "Spacing (truncated menu button to bottom text, multiline)"
292
- },
293
- {
294
- "token": "breadcrumbs-top-text-to-bottom-text",
295
- "context": "Spacing (top text to bottom text)"
296
- },
297
- {
298
- "token": "font-size-75",
299
- "context": "Text (breadcrumb item and title, multiline)"
300
- },
301
- {
302
- "token": "extra-bold-font-weight",
303
- "context": "Text (breadcrumb item and title, multiline)"
304
- },
305
- {
306
- "token": "heading-size-l",
307
- "context": "Text (breadcrumb item and title, multiline)"
189
+ "name": "drag-and-drop",
190
+ "trigger": "prop"
308
191
  }
309
192
  ],
193
+ "lifecycle": {
194
+ "introduced": "1.0.0-draft"
195
+ },
310
196
  "accessibility": {
311
197
  "intents": ["navigate"],
312
198
  "focusable": true,
313
199
  "keyboardIntents": ["navigate-items", "activate"],
314
200
  "wcag": [
315
- { "criterion": "2.1.1", "level": "A", "title": "Keyboard" },
316
- { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
201
+ {
202
+ "criterion": "2.1.1",
203
+ "level": "A",
204
+ "title": "Keyboard"
205
+ },
206
+ {
207
+ "criterion": "4.1.2",
208
+ "level": "A",
209
+ "title": "Name, Role, Value"
210
+ }
317
211
  ]
318
212
  }
319
213
  }
@@ -59,37 +59,64 @@
59
59
  "orientation": {
60
60
  "type": "string",
61
61
  "default": "horizontal",
62
- "values": [{ "value": "horizontal" }, { "value": "vertical" }]
62
+ "values": [
63
+ {
64
+ "value": "horizontal"
65
+ },
66
+ {
67
+ "value": "vertical"
68
+ }
69
+ ]
63
70
  },
64
71
  "size": {
65
72
  "type": "string",
66
73
  "pattern": "^(x?s|m|x{0,3}l)$",
67
74
  "default": "m",
68
75
  "values": [
69
- { "value": "s" },
70
- { "value": "m" },
71
- { "value": "l" },
72
- { "value": "xl" }
76
+ {
77
+ "value": "s"
78
+ },
79
+ {
80
+ "value": "m"
81
+ },
82
+ {
83
+ "value": "l"
84
+ },
85
+ {
86
+ "value": "xl"
87
+ }
73
88
  ]
74
89
  },
75
90
  "overflowMode": {
76
91
  "type": "string",
77
92
  "default": "wrap",
78
- "values": [{ "value": "wrap" }, { "value": "collapse" }]
93
+ "values": [
94
+ {
95
+ "value": "wrap"
96
+ },
97
+ {
98
+ "value": "collapse"
99
+ }
100
+ ]
79
101
  },
80
- "isDisabled": { "type": "boolean", "default": false }
102
+ "isDisabled": {
103
+ "type": "boolean",
104
+ "default": false
105
+ }
106
+ },
107
+ "lifecycle": {
108
+ "introduced": "1.0.0-draft"
81
109
  },
82
- "lifecycle": { "introduced": "1.0.0-draft" },
83
- "tokenBindings": [
84
- { "token": "spacing-100", "context": "Spacing (horizontal)" },
85
- { "token": "spacing-200", "context": "Spacing (horizontal)" }
86
- ],
87
110
  "accessibility": {
88
111
  "role": "group",
89
112
  "intents": ["trigger"],
90
113
  "focusable": false,
91
114
  "wcag": [
92
- { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
115
+ {
116
+ "criterion": "4.1.2",
117
+ "level": "A",
118
+ "title": "Name, Role, Value"
119
+ }
93
120
  ]
94
121
  }
95
122
  }