@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.
- package/components/accordion.json +49 -295
- package/components/action-bar.json +16 -119
- package/components/action-button.json +69 -302
- package/components/action-group.json +74 -20
- package/components/alert-banner.json +27 -47
- package/components/alert-dialog.json +37 -45
- package/components/avatar-group.json +28 -54
- package/components/avatar.json +92 -59
- package/components/badge.json +121 -370
- package/components/breadcrumbs.json +53 -159
- package/components/button-group.json +40 -13
- package/components/button.json +88 -231
- package/components/cards.json +31 -290
- package/components/checkbox-group.json +58 -13
- package/components/checkbox.json +53 -156
- package/components/close-button.json +47 -76
- package/components/coach-indicator.json +44 -31
- package/components/coach-mark.json +19 -43
- package/components/color-area.json +64 -26
- package/components/color-handle.json +35 -27
- package/components/color-loupe.json +6 -17
- package/components/color-slider.json +80 -35
- package/components/color-wheel.json +51 -25
- package/components/combo-box.json +94 -246
- package/components/contextual-help.json +106 -59
- package/components/date-picker.json +57 -185
- package/components/divider.json +25 -17
- package/components/drop-zone.json +24 -119
- package/components/field-label.json +45 -103
- package/components/help-text.json +29 -97
- package/components/illustrated-message.json +25 -74
- package/components/in-field-progress-circle.json +0 -54
- package/components/in-line-alert.json +39 -130
- package/components/link.json +40 -58
- package/components/list-view.json +30 -181
- package/components/menu.json +100 -340
- package/components/meter.json +52 -78
- package/components/number-field.json +72 -239
- package/components/opacity-checkerboard.json +0 -18
- package/components/picker.json +95 -275
- package/components/popover.json +88 -45
- package/components/progress-bar.json +63 -78
- package/components/progress-circle.json +36 -33
- package/components/radio-button.json +36 -145
- package/components/radio-group.json +74 -18
- package/components/rating.json +33 -48
- package/components/search-field.json +64 -133
- package/components/segmented-control.json +37 -86
- package/components/select-box.json +52 -100
- package/components/side-navigation.json +32 -164
- package/components/slider.json +90 -182
- package/components/standard-dialog.json +37 -43
- package/components/status-light.json +92 -134
- package/components/steplist.json +23 -113
- package/components/swatch-group.json +50 -22
- package/components/swatch.json +62 -70
- package/components/switch.json +51 -143
- package/components/table.json +51 -232
- package/components/tabs.json +29 -84
- package/components/tag-field.json +53 -85
- package/components/tag-group.json +36 -18
- package/components/tag.json +43 -206
- package/components/takeover-dialog.json +30 -20
- package/components/text-area.json +114 -247
- package/components/text-field.json +90 -261
- package/components/thumbnail.json +46 -44
- package/components/title.json +0 -18
- package/components/toast.json +27 -61
- package/components/tooltip.json +36 -52
- package/components/tree-view.json +79 -200
- package/package.json +2 -2
- package/tokens/color-aliases.tokens.json +33 -0
- package/tokens/color-component.tokens.json +1 -1212
- package/tokens/color-palette.tokens.json +0 -33
- package/tokens/layout-component.tokens.json +833 -24074
- package/tokens/layout.tokens.json +64 -597
- package/tokens/typography.tokens.json +559 -3318
|
@@ -136,297 +136,164 @@
|
|
|
136
136
|
}
|
|
137
137
|
],
|
|
138
138
|
"options": {
|
|
139
|
-
"label": {
|
|
139
|
+
"label": {
|
|
140
|
+
"type": "string"
|
|
141
|
+
},
|
|
140
142
|
"labelPosition": {
|
|
141
143
|
"type": "string",
|
|
142
144
|
"default": "top",
|
|
143
|
-
"values": [
|
|
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
|
-
{
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
{
|
|
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
|
-
{
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
{
|
|
183
|
-
|
|
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
|
-
|
|
203
|
-
|
|
204
|
-
|
|
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
|
-
"
|
|
214
|
-
"
|
|
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
|
-
"
|
|
222
|
-
"
|
|
203
|
+
"showValidIcon": {
|
|
204
|
+
"type": "boolean",
|
|
205
|
+
"default": false
|
|
223
206
|
},
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
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
|
-
"
|
|
234
|
-
"
|
|
211
|
+
"isDisabled": {
|
|
212
|
+
"type": "boolean",
|
|
213
|
+
"default": false
|
|
235
214
|
},
|
|
236
|
-
{
|
|
237
|
-
"
|
|
238
|
-
"
|
|
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
|
-
"
|
|
292
|
-
"
|
|
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
|
-
"
|
|
394
|
-
"context": "Spacing (top/bottom edge to required)"
|
|
223
|
+
"helpText": {
|
|
224
|
+
"type": "string"
|
|
395
225
|
},
|
|
396
|
-
{
|
|
397
|
-
"
|
|
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
|
-
"
|
|
402
|
-
"
|
|
253
|
+
"name": "hover",
|
|
254
|
+
"trigger": "interaction"
|
|
403
255
|
},
|
|
404
256
|
{
|
|
405
|
-
"
|
|
406
|
-
"
|
|
257
|
+
"name": "focus-+-hover",
|
|
258
|
+
"trigger": "prop"
|
|
407
259
|
},
|
|
408
260
|
{
|
|
409
|
-
"
|
|
410
|
-
"
|
|
261
|
+
"name": "focus-+-not-hover",
|
|
262
|
+
"trigger": "prop"
|
|
411
263
|
},
|
|
412
264
|
{
|
|
413
|
-
"
|
|
414
|
-
"
|
|
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
|
-
{
|
|
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
|
-
{
|
|
429
|
-
|
|
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
|
}
|