@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
@@ -88,14 +88,22 @@
88
88
  }
89
89
  ],
90
90
  "options": {
91
- "label": { "type": "string" },
91
+ "label": {
92
+ "type": "string"
93
+ },
92
94
  "variant": {
93
95
  "type": "string",
94
96
  "default": "neutral",
95
97
  "values": [
96
- { "value": "neutral" },
97
- { "value": "informative" },
98
- { "value": "negative" }
98
+ {
99
+ "value": "neutral"
100
+ },
101
+ {
102
+ "value": "informative"
103
+ },
104
+ {
105
+ "value": "negative"
106
+ }
99
107
  ]
100
108
  },
101
109
  "hasIcon": {
@@ -112,13 +120,24 @@
112
120
  "type": "string",
113
121
  "default": "top",
114
122
  "values": [
115
- { "value": "top" },
116
- { "value": "bottom" },
117
- { "value": "left" },
118
- { "value": "right" }
123
+ {
124
+ "value": "top"
125
+ },
126
+ {
127
+ "value": "bottom"
128
+ },
129
+ {
130
+ "value": "left"
131
+ },
132
+ {
133
+ "value": "right"
134
+ }
119
135
  ]
120
136
  },
121
- "shouldFlip": { "type": "boolean", "default": false },
137
+ "shouldFlip": {
138
+ "type": "boolean",
139
+ "default": false
140
+ },
122
141
  "offset": {
123
142
  "type": "number",
124
143
  "default": 4,
@@ -130,48 +149,9 @@
130
149
  "description": "units: pixels"
131
150
  }
132
151
  },
133
- "lifecycle": { "introduced": "1.0.0-draft" },
134
- "tokenBindings": [
135
- { "token": "component-height-75", "context": "Minimum height" },
136
- { "token": "tooltip-maximum-width", "context": "Maximum width" },
137
- { "token": "corner-radius-500", "context": "Rounding" },
138
- { "token": "tooltip-tip-width", "context": "Tip" },
139
- { "token": "tooltip-tip-height", "context": "Tip" },
140
- { "token": "tooltip-tip-corner-radius", "context": "Rounding (tip)" },
141
- {
142
- "token": "component-edge-to-text-75",
143
- "context": "Spacing (start/end edges)"
144
- },
145
- {
146
- "token": "component-top-to-text-75",
147
- "context": "Spacing (top/bottom edge to text)"
148
- },
149
- {
150
- "token": "component-bottom-to-text-75",
151
- "context": "Spacing (top/bottom edge to text)"
152
- },
153
- { "token": "spacing-75", "context": "Spacing (tip to source)" },
154
- { "token": "spacing-100", "context": "Container padding" },
155
- { "token": "default-font-family", "context": "Label" },
156
- { "token": "regular-font-weight", "context": "Label" },
157
- { "token": "default-font-style", "context": "Label" },
158
- { "token": "font-size-75", "context": "Label" },
159
- { "token": "line-height-100", "context": "Label" },
160
- { "token": "cjk-line-height-100", "context": "Label" },
161
- { "token": "gray-25", "context": "Text" },
162
- {
163
- "token": "neutral-background-color-default",
164
- "context": "Background (Neutral)"
165
- },
166
- {
167
- "token": "informative-background-color-default",
168
- "context": "Background (Informative)"
169
- },
170
- {
171
- "token": "negative-background-color-default",
172
- "context": "Background (Negative)"
173
- }
174
- ],
152
+ "lifecycle": {
153
+ "introduced": "1.0.0-draft"
154
+ },
175
155
  "accessibility": {
176
156
  "role": "tooltip",
177
157
  "focusable": false,
@@ -181,7 +161,11 @@
181
161
  "level": "AA",
182
162
  "title": "Content on Hover or Focus"
183
163
  },
184
- { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
164
+ {
165
+ "criterion": "4.1.2",
166
+ "level": "A",
167
+ "title": "Name, Role, Value"
168
+ }
185
169
  ]
186
170
  }
187
171
  }
@@ -140,29 +140,67 @@
140
140
  "type": "string",
141
141
  "default": "m",
142
142
  "values": [
143
- { "value": "s" },
144
- { "value": "m" },
145
- { "value": "l" },
146
- { "value": "xl" }
143
+ {
144
+ "value": "s"
145
+ },
146
+ {
147
+ "value": "m"
148
+ },
149
+ {
150
+ "value": "l"
151
+ },
152
+ {
153
+ "value": "xl"
154
+ }
147
155
  ]
148
156
  },
149
- "isDetached": { "type": "boolean", "default": false },
150
- "isEmphasized": { "type": "boolean", "default": false },
151
- "showDragIcon": { "type": "boolean", "default": false },
157
+ "isDetached": {
158
+ "type": "boolean",
159
+ "default": false
160
+ },
161
+ "isEmphasized": {
162
+ "type": "boolean",
163
+ "default": false
164
+ },
165
+ "showDragIcon": {
166
+ "type": "boolean",
167
+ "default": false
168
+ },
152
169
  "selectionMode": {
153
170
  "type": "string",
154
171
  "default": "multiple",
155
- "values": [{ "value": "single" }, { "value": "multiple" }]
172
+ "values": [
173
+ {
174
+ "value": "single"
175
+ },
176
+ {
177
+ "value": "multiple"
178
+ }
179
+ ]
156
180
  },
157
181
  "selectionStyle": {
158
182
  "type": "string",
159
183
  "default": "checkbox",
160
- "values": [{ "value": "checkbox" }, { "value": "highlight" }]
184
+ "values": [
185
+ {
186
+ "value": "checkbox"
187
+ },
188
+ {
189
+ "value": "highlight"
190
+ }
191
+ ]
161
192
  },
162
193
  "selectionBehavior": {
163
194
  "type": "string",
164
195
  "default": "toggle",
165
- "values": [{ "value": "toggle" }, { "value": "replace" }]
196
+ "values": [
197
+ {
198
+ "value": "toggle"
199
+ },
200
+ {
201
+ "value": "replace"
202
+ }
203
+ ]
166
204
  }
167
205
  },
168
206
  "anatomy": [
@@ -170,222 +208,63 @@
170
208
  "name": "action-area",
171
209
  "description": "Trailing area containing item actions."
172
210
  },
173
- { "name": "row" },
211
+ {
212
+ "name": "row"
213
+ },
174
214
  {
175
215
  "name": "disclosure-indicator",
176
216
  "description": "Visual affordance showing a tree view item's expand/collapse state."
177
217
  }
178
218
  ],
179
219
  "states": [
180
- { "name": "default", "description": "Resting base state." },
181
- { "name": "hover", "trigger": "interaction" },
182
- { "name": "down", "trigger": "interaction" },
183
- { "name": "keyboard-focus", "trigger": "interaction" },
184
- { "name": "selected", "trigger": "interaction" },
185
- { "name": "selected-default", "trigger": "interaction" },
186
- { "name": "selected-hover", "trigger": "interaction" }
187
- ],
188
- "lifecycle": { "introduced": "1.0.0-draft" },
189
- "tokenBindings": [
190
- { "token": "workflow-icon-size-100", "context": "Icon" },
191
- { "token": "tree-view-minimum-height", "context": "Height (minimum)" },
192
- { "token": "tree-view-minimum-width", "context": "Width (minimum)" },
193
- { "token": "corner-radius-medium-default", "context": "Rounding" },
194
- {
195
- "token": "tree-view-disclosure-indicator-height",
196
- "context": "Spacing (disclosure indicator)"
197
- },
198
- {
199
- "token": "tree-view-disclosure-indicator-width",
200
- "context": "Spacing (disclosure indicator)"
201
- },
202
- {
203
- "token": "tree-view-edge-to-checkbox",
204
- "context": "Spacing (edge to checkbox, checkbox)"
205
- },
206
- {
207
- "token": "tree-view-edge-to-drag-handle",
208
- "context": "Spacing (edge to drag handle, drag handle)"
209
- },
210
- {
211
- "token": "tree-view-drag-handle-to-checkbox",
212
- "context": "Spacing (drag handle to checkbox, drag handle + checkbox)"
213
- },
214
- {
215
- "token": "text-to-visual-100",
216
- "context": "Spacing (context area to label)"
217
- },
218
- {
219
- "token": "component-edge-to-text-100",
220
- "context": "Spacing (label to edge)"
221
- },
222
- {
223
- "token": "tree-view-label-to-action-area",
224
- "context": "Spacing (label to action area)"
225
- },
226
- {
227
- "token": "tree-view-end-edge-to-action-area",
228
- "context": "Spacing (edge to action area, action button 1 + action button 2)"
229
- },
230
- {
231
- "token": "tree-view-level-increment",
232
- "context": "Spacing (indentation)"
233
- },
234
- { "token": "vertical-align-items", "context": "Spacing (vertical)" },
235
- {
236
- "token": "stack-item-minimum-padding-vertical",
237
- "context": "Spacing (vertical)"
238
- },
239
- {
240
- "token": "border-width-100",
241
- "context": "Border width (selected, highlight)"
242
- },
243
- { "token": "focus-indicator-thickness", "context": "Focus " },
244
- { "token": "focus-indicator-gap", "context": "Focus (drag handle)" },
245
- { "token": "component-height-200", "context": "Height" },
246
- {
247
- "token": "stack-item-item-to-item",
248
- "context": "Spacing (vertically, between tree view items)"
249
- },
250
- {
251
- "token": "tree-view-item-to-header",
252
- "context": "Spacing (vertically, between tree view item and tree view header)"
253
- },
254
- {
255
- "token": "tree-view-header-to-item",
256
- "context": "Spacing (vertically, between tree view item and tree view header)"
257
- },
258
220
  {
259
- "token": "stack-item-header-to-item",
260
- "context": "Spacing (vertically, between tree view item and tree view header)"
221
+ "name": "default",
222
+ "description": "Resting base state."
261
223
  },
262
224
  {
263
- "token": "stack-item-background-color-hover",
264
- "context": "Background (not selected)"
225
+ "name": "hover",
226
+ "trigger": "interaction"
265
227
  },
266
228
  {
267
- "token": "stack-item-background-color-down",
268
- "context": "Background (not selected)"
229
+ "name": "down",
230
+ "trigger": "interaction"
269
231
  },
270
232
  {
271
- "token": "stack-item-background-color-key-focus",
272
- "context": "Background (not selected)"
233
+ "name": "keyboard-focus",
234
+ "trigger": "interaction"
273
235
  },
274
236
  {
275
- "token": "tree-view-selected-row-background-default",
276
- "context": "Background (selected, checkbox)"
237
+ "name": "selected",
238
+ "trigger": "interaction"
277
239
  },
278
240
  {
279
- "token": "tree-view-selected-row-background-hover",
280
- "context": "Background (selected, checkbox)"
241
+ "name": "selected-default",
242
+ "trigger": "interaction"
281
243
  },
282
244
  {
283
- "token": "stack-item-selected-background-color-default",
284
- "context": "Background (selected, checkbox)"
285
- },
286
- {
287
- "token": "stack-item-selected-background-color-hover",
288
- "context": "Background (selected, checkbox)"
289
- },
290
- {
291
- "token": "stack-item-selected-background-color-down",
292
- "context": "Background (selected, checkbox)"
293
- },
294
- {
295
- "token": "stack-item-selected-background-color-key-focus",
296
- "context": "Background (selected, checkbox)"
297
- },
298
- {
299
- "token": "tree-view-selected-row-background-color-emphasized",
300
- "context": "Background (selected, emphasized)"
301
- },
302
- {
303
- "token": "tree-view-selected-row-background-opacity-emphasized-hover",
304
- "context": "Background (selected, emphasized)"
305
- },
306
- {
307
- "token": "stack-item-selected-background-color-highlight",
308
- "context": "Background (selected + highlight)"
309
- },
310
- {
311
- "token": "stack-item-selected-background-opacity-highlight-hover",
312
- "context": "Background (selected + highlight)"
313
- },
314
- {
315
- "token": "accent-content-color-selected",
316
- "context": "Border (selected + highlight)"
317
- },
318
- {
319
- "token": "neutral-subdued-content-color-default",
320
- "context": "Label and icon (non-selected)"
321
- },
322
- {
323
- "token": "neutral-subdued-content-color-hover",
324
- "context": "Label and icon (non-selected)"
325
- },
326
- {
327
- "token": "neutral-subdued-content-color-down",
328
- "context": "Label and icon (non-selected)"
329
- },
330
- {
331
- "token": "neutral-subdued-content-color-key-focus",
332
- "context": "Label and icon (non-selected)"
333
- },
334
- {
335
- "token": "neutral-content-color-default",
336
- "context": "Label and icon (selected, checkbox and highlight)"
337
- },
338
- {
339
- "token": "neutral-content-color-hover",
340
- "context": "Label and icon (selected, checkbox and highlight)"
341
- },
342
- {
343
- "token": "neutral-content-color-down",
344
- "context": "Label and icon (selected, checkbox and highlight)"
345
- },
346
- {
347
- "token": "neutral-content-color-key-focus",
348
- "context": "Label and icon (selected, checkbox and highlight)"
349
- },
350
- {
351
- "token": "disabled-content-color",
352
- "context": "Label and icon (disabled)"
353
- },
354
- { "token": "focus-indicator-color", "context": "Focus indicator" },
355
- { "token": "default-font-family", "context": "Text (tree view item)" },
356
- { "token": "regular-font-weight", "context": "Text (tree view item)" },
357
- { "token": "default-font-style", "context": "Text (tree view item)" },
358
- { "token": "font-size-100", "context": "Text (tree view item)" },
359
- { "token": "line-height-100", "context": "Text (tree view item)" },
360
- { "token": "cjk-line-height-100", "context": "Text (tree view item)" },
361
- { "token": "bold-font-weight", "context": "Text (tree view title)" },
362
- { "token": "thumbnail-size-75", "context": "Size" },
363
- { "token": "thumbnail-size-300", "context": "Size" },
364
- { "token": "thumbnail-size-1000", "context": "Size" },
365
- { "token": "thumbnail-corner-radius", "context": "Rounding (default)" },
366
- { "token": "spacing-75", "context": "Opacity checkerboard (layer)" },
367
- { "token": "corner-radius-0", "context": "Rounding (layer)" },
368
- { "token": "thumbnail-border-color", "context": "Border (default)" },
369
- { "token": "thumbnail-border-opacity", "context": "Border (default)" },
370
- { "token": "gray-500", "context": "Border (layer)" },
371
- {
372
- "token": "opacity-checkerboard-square-light",
373
- "context": "Checkerboard colors "
374
- },
375
- {
376
- "token": "opacity-checkerboard-square-dark",
377
- "context": "Checkerboard colors "
378
- },
379
- { "token": "thumbnail-opacity-disabled", "context": "Disabled" }
245
+ "name": "selected-hover",
246
+ "trigger": "interaction"
247
+ }
380
248
  ],
249
+ "lifecycle": {
250
+ "introduced": "1.0.0-draft"
251
+ },
381
252
  "accessibility": {
382
253
  "role": "tree",
383
254
  "intents": ["navigate", "select", "expand"],
384
255
  "focusable": true,
385
256
  "keyboardIntents": ["navigate-items", "expand", "collapse", "activate"],
386
257
  "wcag": [
387
- { "criterion": "2.1.1", "level": "A", "title": "Keyboard" },
388
- { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
258
+ {
259
+ "criterion": "2.1.1",
260
+ "level": "A",
261
+ "title": "Keyboard"
262
+ },
263
+ {
264
+ "criterion": "4.1.2",
265
+ "level": "A",
266
+ "title": "Name, Role, Value"
267
+ }
389
268
  ]
390
269
  }
391
270
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adobe/spectrum-design-data",
3
- "version": "2.0.0",
3
+ "version": "2.2.0",
4
4
  "description": "Spectrum design tokens in cascade format — the canonical source of truth for @adobe/spectrum-tokens",
5
5
  "type": "module",
6
6
  "repository": {
@@ -62,7 +62,7 @@
62
62
  "devDependencies": {
63
63
  "ajv": "^8.12.0",
64
64
  "ajv-formats": "^3.0.1",
65
- "@adobe/design-data-spec": "3.1.0"
65
+ "@adobe/design-data-spec": "3.2.1"
66
66
  },
67
67
  "scripts": {}
68
68
  }
@@ -3369,6 +3369,39 @@
3369
3369
  "$ref": "e0eaa59c-81ad-4632-a61d-ab0bee53af4a",
3370
3370
  "uuid": "c2c538e0-6f8d-4586-953a-b98ef40c9eca"
3371
3371
  },
3372
+ {
3373
+ "name": {
3374
+ "colorRole": "neutral",
3375
+ "property": "content-color",
3376
+ "state": ["selected", "default"],
3377
+ "legacyKey": "neutral-content-color-selected-default"
3378
+ },
3379
+ "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
3380
+ "$ref": "f417fb5b-c7cc-41c2-a870-f6cd9a280c22",
3381
+ "uuid": "7289003d-78b6-4c61-aada-a3252a7a9bd2"
3382
+ },
3383
+ {
3384
+ "name": {
3385
+ "colorRole": "neutral",
3386
+ "property": "content-color",
3387
+ "state": ["selected", "hover"],
3388
+ "legacyKey": "neutral-content-color-selected-hover"
3389
+ },
3390
+ "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
3391
+ "$ref": "e0eaa59c-81ad-4632-a61d-ab0bee53af4a",
3392
+ "uuid": "018f02b1-2f01-4b48-8161-4a0e9d2eed09"
3393
+ },
3394
+ {
3395
+ "name": {
3396
+ "colorRole": "neutral",
3397
+ "property": "content-color",
3398
+ "state": ["selected", "keyboard-focus"],
3399
+ "legacyKey": "neutral-content-color-selected-key-focus"
3400
+ },
3401
+ "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
3402
+ "$ref": "e0eaa59c-81ad-4632-a61d-ab0bee53af4a",
3403
+ "uuid": "1b040ae6-315e-49a5-9363-62ba79b139ff"
3404
+ },
3372
3405
  {
3373
3406
  "name": {
3374
3407
  "colorRole": "neutral",