@adobe/spectrum-design-data 1.0.3 → 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 (79) 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-aliases.tokens.json +9 -7
  73. package/tokens/color-component.tokens.json +1 -1202
  74. package/tokens/color-palette.tokens.json +0 -33
  75. package/tokens/icons.tokens.json +3 -1
  76. package/tokens/layout-component.tokens.json +1044 -22359
  77. package/tokens/layout.tokens.json +1287 -1292
  78. package/tokens/semantic-color-palette.tokens.json +12 -4
  79. package/tokens/typography.tokens.json +559 -3212
@@ -104,21 +104,42 @@
104
104
  }
105
105
  ],
106
106
  "options": {
107
- "label": { "type": "string" },
107
+ "label": {
108
+ "type": "string"
109
+ },
108
110
  "labelPosition": {
109
111
  "type": "string",
110
112
  "default": "top",
111
- "values": [{ "value": "top" }, { "value": "side" }]
113
+ "values": [
114
+ {
115
+ "value": "top"
116
+ },
117
+ {
118
+ "value": "side"
119
+ }
120
+ ]
121
+ },
122
+ "value": {
123
+ "type": "number",
124
+ "description": "from minValue to maxValue"
125
+ },
126
+ "minValue": {
127
+ "type": "number",
128
+ "default": 0
129
+ },
130
+ "maxValue": {
131
+ "type": "number",
132
+ "default": 100
112
133
  },
113
- "value": { "type": "number", "description": "from minValue to maxValue" },
114
- "minValue": { "type": "number", "default": 0 },
115
- "maxValue": { "type": "number", "default": 100 },
116
134
  "isRange": {
117
135
  "type": "boolean",
118
136
  "default": false,
119
137
  "description": "If true, the slider will allow selection of a range of values by displaying two handles."
120
138
  },
121
- "step": { "type": "number", "default": 1 },
139
+ "step": {
140
+ "type": "number",
141
+ "default": 1
142
+ },
122
143
  "valueFormat": {
123
144
  "type": "string",
124
145
  "description": "This will vary depending on implementation."
@@ -126,205 +147,92 @@
126
147
  "progressionScale": {
127
148
  "type": "string",
128
149
  "default": "linear",
129
- "values": [{ "value": "linear" }, { "value": "log" }]
130
- },
131
- "width": { "type": "number" },
132
- "hasFill": { "type": "boolean", "default": false },
133
- "fillStart": { "type": "number", "default": 0 },
134
- "hasGradient": { "type": "boolean", "default": false },
135
- "isEditable": { "type": "boolean", "default": false },
136
- "isDisabled": { "type": "boolean", "default": false }
137
- },
138
- "anatomy": [
139
- {
140
- "name": "text-field",
141
- "description": "Editable numeric value field."
142
- },
143
- { "name": "handle" },
144
- { "name": "track" },
145
- { "name": "control" }
146
- ],
147
- "states": [
148
- { "name": "hover", "trigger": "interaction" },
149
- { "name": "down", "trigger": "interaction" },
150
- { "name": "keyboard-focus", "trigger": "interaction" }
151
- ],
152
- "lifecycle": { "introduced": "1.0.0-draft" },
153
- "tokenBindings": [
154
- { "token": "field-default-width-small", "context": "Width (default)" },
155
- { "token": "field-default-width-medium", "context": "Width (default)" },
156
- { "token": "field-default-width-large", "context": "Width (default)" },
157
- {
158
- "token": "field-default-width-extra-large",
159
- "context": "Width (default)"
160
- },
161
- {
162
- "token": "component-size-difference-down",
163
- "context": "Component size (down)"
164
- },
165
- {
166
- "token": "component-size-width-ratio-down",
167
- "context": "Component size (down)"
168
- },
169
- {
170
- "token": "component-size-minimum-perspective-down",
171
- "context": "Component size (down)"
172
- },
173
- { "token": "slider-track-height-medium", "context": "Track (height)" },
174
- { "token": "slider-track-height-large", "context": "Track (height)" },
175
- { "token": "component-height-75", "context": "Height (slider control) " },
176
- { "token": "component-height-100", "context": "Height (slider control) " },
177
- { "token": "component-height-200", "context": "Height (slider control) " },
178
- { "token": "component-height-300", "context": "Height (slider control) " },
179
- { "token": "slider-handle-small", "context": "Handle (size)" },
180
- { "token": "slider-handle-medium", "context": "Handle (size)" },
181
- { "token": "slider-handle-large", "context": "Handle (size)" },
182
- { "token": "slider-handle-extra-large", "context": "Handle (size)" },
183
- {
184
- "token": "slider-handle-height-precision-small",
185
- "context": "Handle (size)"
186
- },
187
- {
188
- "token": "slider-handle-height-precision-medium",
189
- "context": "Handle (size)"
190
- },
191
- {
192
- "token": "slider-handle-height-precision-large",
193
- "context": "Handle (size)"
194
- },
195
- {
196
- "token": "slider-handle-height-precision-extra-large",
197
- "context": "Handle (size)"
198
- },
199
- { "token": "slider-handle-precision-width", "context": "Handle (size)" },
200
- { "token": "border-width-200", "context": "Handle (border)" },
201
- { "token": "focus-indicator-thickness", "context": "Focus ring" },
202
- { "token": "focus-indicator-gap", "context": "Focus ring" },
203
- {
204
- "token": "component-top-to-text-75",
205
- "context": "Spacing (top/bottom edge to label)"
206
- },
207
- {
208
- "token": "component-top-to-text-100",
209
- "context": "Spacing (top/bottom edge to label)"
210
- },
211
- {
212
- "token": "component-top-to-text-200",
213
- "context": "Spacing (top/bottom edge to label)"
214
- },
215
- {
216
- "token": "component-top-to-text-300",
217
- "context": "Spacing (top/bottom edge to label)"
218
- },
219
- {
220
- "token": "component-bottom-to-text-75",
221
- "context": "Spacing (top/bottom edge to label)"
222
- },
223
- {
224
- "token": "component-bottom-to-text-100",
225
- "context": "Spacing (top/bottom edge to label)"
226
- },
227
- {
228
- "token": "component-bottom-to-text-200",
229
- "context": "Spacing (top/bottom edge to label)"
230
- },
231
- {
232
- "token": "component-bottom-to-text-300",
233
- "context": "Spacing (top/bottom edge to label)"
234
- },
235
- {
236
- "token": "slider-control-to-field-label-small",
237
- "context": "Spacing (field label to slider control)"
238
- },
239
- {
240
- "token": "slider-control-to-field-label-medium",
241
- "context": "Spacing (field label to slider control)"
242
- },
243
- {
244
- "token": "slider-control-to-field-label-large",
245
- "context": "Spacing (field label to slider control)"
246
- },
247
- {
248
- "token": "slider-control-to-field-label-extra-large",
249
- "context": "Spacing (field label to slider control)"
250
- },
251
- {
252
- "token": "slider-control-to-field-label-editable-small",
253
- "context": "Spacing (field label to slider control)"
150
+ "values": [
151
+ {
152
+ "value": "linear"
153
+ },
154
+ {
155
+ "value": "log"
156
+ }
157
+ ]
158
+ },
159
+ "width": {
160
+ "type": "number"
161
+ },
162
+ "hasFill": {
163
+ "type": "boolean",
164
+ "default": false
254
165
  },
255
- {
256
- "token": "slider-control-to-field-label-editable-medium",
257
- "context": "Spacing (field label to slider control)"
166
+ "fillStart": {
167
+ "type": "number",
168
+ "default": 0
258
169
  },
259
- {
260
- "token": "slider-control-to-field-label-editable-large",
261
- "context": "Spacing (field label to slider control)"
262
- },
263
- {
264
- "token": "slider-control-to-field-label-editable-extra-large",
265
- "context": "Spacing (field label to slider control)"
170
+ "hasGradient": {
171
+ "type": "boolean",
172
+ "default": false
266
173
  },
267
- {
268
- "token": "slider-control-to-field-label-side-small",
269
- "context": "Spacing (field label to slider control)"
174
+ "isEditable": {
175
+ "type": "boolean",
176
+ "default": false
270
177
  },
178
+ "isDisabled": {
179
+ "type": "boolean",
180
+ "default": false
181
+ }
182
+ },
183
+ "anatomy": [
271
184
  {
272
- "token": "slider-control-to-field-label-side-medium",
273
- "context": "Spacing (field label to slider control)"
185
+ "name": "text-field",
186
+ "description": "Editable numeric value field."
274
187
  },
275
188
  {
276
- "token": "slider-control-to-field-label-side-large",
277
- "context": "Spacing (field label to slider control)"
189
+ "name": "handle"
278
190
  },
279
191
  {
280
- "token": "slider-control-to-field-label-side-extra-large",
281
- "context": "Spacing (field label to slider control)"
192
+ "name": "track"
282
193
  },
283
194
  {
284
- "token": "slider-control-to-text-field-small",
285
- "context": "Spacing (slider to field)"
286
- },
195
+ "name": "control"
196
+ }
197
+ ],
198
+ "states": [
287
199
  {
288
- "token": "slider-control-to-text-field-medium",
289
- "context": "Spacing (slider to field)"
200
+ "name": "hover",
201
+ "trigger": "interaction"
290
202
  },
291
203
  {
292
- "token": "slider-control-to-text-field-large",
293
- "context": "Spacing (slider to field)"
204
+ "name": "down",
205
+ "trigger": "interaction"
294
206
  },
295
207
  {
296
- "token": "slider-control-to-text-field-extra-large",
297
- "context": "Spacing (slider to field)"
298
- },
299
- { "token": "neutral-subdued-content-color-default", "context": "Value" },
300
- { "token": "gray-700", "context": "Track" },
301
- { "token": "accent-content-color-default", "context": "Track" },
302
- { "token": "gray-800", "context": "Handle" },
303
- { "token": "gray-900", "context": "Handle" },
304
- { "token": "gray-25", "context": "Handle" },
305
- { "token": "focus-indicator-color", "context": "Focus ring" },
306
- { "token": "disabled-content-color", "context": "Disabled" },
307
- { "token": "disabled-background-color", "context": "Disabled" },
308
- { "token": "disabled-border-color", "context": "Disabled" },
309
- { "token": "default-font-family", "context": "Label" },
310
- { "token": "regular-font-weight", "context": "Label" },
311
- { "token": "default-font-style", "context": "Label" },
312
- { "token": "font-size-75", "context": "Label" },
313
- { "token": "font-size-100", "context": "Label" },
314
- { "token": "font-size-200", "context": "Label" },
315
- { "token": "font-size-300", "context": "Label" },
316
- { "token": "line-height-100", "context": "Label" },
317
- { "token": "cjk-line-height-100", "context": "Label" }
208
+ "name": "keyboard-focus",
209
+ "trigger": "interaction"
210
+ }
318
211
  ],
212
+ "lifecycle": {
213
+ "introduced": "1.0.0-draft"
214
+ },
319
215
  "accessibility": {
320
216
  "role": "slider",
321
217
  "intents": ["choose"],
322
218
  "focusable": true,
323
219
  "keyboardIntents": ["increment", "decrement"],
324
220
  "wcag": [
325
- { "criterion": "1.3.1", "level": "A", "title": "Info and Relationships" },
326
- { "criterion": "2.1.1", "level": "A", "title": "Keyboard" },
327
- { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
221
+ {
222
+ "criterion": "1.3.1",
223
+ "level": "A",
224
+ "title": "Info and Relationships"
225
+ },
226
+ {
227
+ "criterion": "2.1.1",
228
+ "level": "A",
229
+ "title": "Keyboard"
230
+ },
231
+ {
232
+ "criterion": "4.1.2",
233
+ "level": "A",
234
+ "title": "Name, Role, Value"
235
+ }
328
236
  ]
329
237
  }
330
238
  }
@@ -84,8 +84,12 @@
84
84
  }
85
85
  ],
86
86
  "options": {
87
- "title": { "type": "string" },
88
- "description": { "type": "string" },
87
+ "title": {
88
+ "type": "string"
89
+ },
90
+ "description": {
91
+ "type": "string"
92
+ },
89
93
  "hideImage": {
90
94
  "type": "boolean",
91
95
  "default": false,
@@ -94,14 +98,29 @@
94
98
  "size": {
95
99
  "type": "string",
96
100
  "default": "m",
97
- "values": [{ "value": "s" }, { "value": "m" }, { "value": "l" }]
101
+ "values": [
102
+ {
103
+ "value": "s"
104
+ },
105
+ {
106
+ "value": "m"
107
+ },
108
+ {
109
+ "value": "l"
110
+ }
111
+ ]
112
+ },
113
+ "hideCloseButton": {
114
+ "type": "boolean",
115
+ "default": false
98
116
  },
99
- "hideCloseButton": { "type": "boolean", "default": false },
100
117
  "footerContent": {
101
118
  "type": "string",
102
119
  "description": "Optional footer content to display in the dialog footer like a checkbox."
103
120
  },
104
- "primaryActionLabel": { "type": "string" },
121
+ "primaryActionLabel": {
122
+ "type": "string"
123
+ },
105
124
  "secondaryActionLabel": {
106
125
  "type": "string",
107
126
  "description": "If undefined, this button does not appear."
@@ -112,50 +131,25 @@
112
131
  "description": "If undefined, this button does not appear."
113
132
  }
114
133
  },
115
- "lifecycle": { "introduced": "1.0.0-draft" },
116
- "tokenBindings": [
117
- {
118
- "token": "standard-dialog-maximum-width-small",
119
- "context": "Maximum width"
120
- },
121
- {
122
- "token": "standard-dialog-maximum-width-medium",
123
- "context": "Maximum width"
124
- },
125
- {
126
- "token": "standard-dialog-maximum-width-large",
127
- "context": "Maximum width"
128
- },
129
- { "token": "standard-dialog-minimum-width", "context": "Minimum width" },
130
- { "token": "corner-radius-extra-large-default", "context": "Rounding" },
131
- { "token": "spacing-500", "context": "Spacing (edge to content)" },
132
- { "token": "spacing-400", "context": "Spacing (edge to content)" },
133
- { "token": "spacing-300", "context": "Spacing (title to description)" },
134
- { "token": "spacing-200", "context": "Spacing (edge to close button)" },
135
- { "token": "background-layer-2-color", "context": "Background" },
136
- { "token": "overlay-color", "context": "Overlay" },
137
- { "token": "overlay-opacity", "context": "Overlay" },
138
- { "token": "title-sans-serif-font-family", "context": "Title" },
139
- { "token": "title-sans-serif-font-weight", "context": "Title" },
140
- { "token": "title-sans-serif-font-style", "context": "Title" },
141
- { "token": "standard-dialog-title-font-size", "context": "Title" },
142
- { "token": "title-line-height", "context": "Title" },
143
- { "token": "heading-color", "context": "Title" },
144
- { "token": "body-sans-serif-font-family", "context": "Description" },
145
- { "token": "body-sans-serif-font-weight", "context": "Description" },
146
- { "token": "body-sans-serif-font-style", "context": "Description" },
147
- { "token": "standard-dialog-body-font-size", "context": "Description" },
148
- { "token": "line-height-200", "context": "Description" },
149
- { "token": "body-color", "context": "Description" }
150
- ],
134
+ "lifecycle": {
135
+ "introduced": "1.0.0-draft"
136
+ },
151
137
  "accessibility": {
152
138
  "role": "dialog",
153
139
  "intents": ["dismiss"],
154
140
  "focusable": false,
155
141
  "keyboardIntents": ["dismiss"],
156
142
  "wcag": [
157
- { "criterion": "2.4.3", "level": "A", "title": "Focus Order" },
158
- { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
143
+ {
144
+ "criterion": "2.4.3",
145
+ "level": "A",
146
+ "title": "Focus Order"
147
+ },
148
+ {
149
+ "criterion": "4.1.2",
150
+ "level": "A",
151
+ "title": "Name, Role, Value"
152
+ }
159
153
  ]
160
154
  }
161
155
  }