@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
@@ -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,213 +208,56 @@
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
- {
259
- "token": "stack-item-header-to-item",
260
- "context": "Spacing (vertically, between tree view item and tree view header)"
261
- },
262
- {
263
- "token": "stack-item-background-color-hover",
264
- "context": "Background (not selected)"
265
- },
266
- {
267
- "token": "stack-item-background-color-down",
268
- "context": "Background (not selected)"
269
- },
270
- {
271
- "token": "stack-item-background-color-key-focus",
272
- "context": "Background (not selected)"
273
- },
274
- {
275
- "token": "tree-view-selected-row-background-default",
276
- "context": "Background (selected, checkbox)"
277
- },
278
- {
279
- "token": "tree-view-selected-row-background-hover",
280
- "context": "Background (selected, checkbox)"
281
- },
282
- {
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
220
  {
303
- "token": "tree-view-selected-row-background-opacity-emphasized-hover",
304
- "context": "Background (selected, emphasized)"
221
+ "name": "default",
222
+ "description": "Resting base state."
305
223
  },
306
224
  {
307
- "token": "stack-item-selected-background-color-highlight",
308
- "context": "Background (selected + highlight)"
225
+ "name": "hover",
226
+ "trigger": "interaction"
309
227
  },
310
228
  {
311
- "token": "stack-item-selected-background-opacity-highlight-hover",
312
- "context": "Background (selected + highlight)"
229
+ "name": "down",
230
+ "trigger": "interaction"
313
231
  },
314
232
  {
315
- "token": "accent-content-color-selected",
316
- "context": "Border (selected + highlight)"
233
+ "name": "keyboard-focus",
234
+ "trigger": "interaction"
317
235
  },
318
236
  {
319
- "token": "neutral-subdued-content-color-default",
320
- "context": "Label and icon (non-selected)"
237
+ "name": "selected",
238
+ "trigger": "interaction"
321
239
  },
322
240
  {
323
- "token": "neutral-subdued-content-color-hover",
324
- "context": "Label and icon (non-selected)"
241
+ "name": "selected-default",
242
+ "trigger": "interaction"
325
243
  },
326
244
  {
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)" },
245
+ "name": "selected-hover",
246
+ "trigger": "interaction"
247
+ }
248
+ ],
249
+ "lifecycle": {
250
+ "introduced": "1.0.0-draft"
251
+ },
252
+ "tokenBindings": [
371
253
  {
372
- "token": "opacity-checkerboard-square-light",
373
- "context": "Checkerboard colors "
254
+ "token": "tree-view-edge-to-drag-handle",
255
+ "context": "Spacing (edge to drag handle, drag handle)"
374
256
  },
375
257
  {
376
- "token": "opacity-checkerboard-square-dark",
377
- "context": "Checkerboard colors "
378
- },
379
- { "token": "thumbnail-opacity-disabled", "context": "Disabled" }
258
+ "token": "tree-view-drag-handle-to-checkbox",
259
+ "context": "Spacing (drag handle to checkbox, drag handle + checkbox)"
260
+ }
380
261
  ],
381
262
  "accessibility": {
382
263
  "role": "tree",
@@ -384,8 +265,16 @@
384
265
  "focusable": true,
385
266
  "keyboardIntents": ["navigate-items", "expand", "collapse", "activate"],
386
267
  "wcag": [
387
- { "criterion": "2.1.1", "level": "A", "title": "Keyboard" },
388
- { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
268
+ {
269
+ "criterion": "2.1.1",
270
+ "level": "A",
271
+ "title": "Keyboard"
272
+ },
273
+ {
274
+ "criterion": "4.1.2",
275
+ "level": "A",
276
+ "title": "Name, Role, Value"
277
+ }
389
278
  ]
390
279
  }
391
280
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adobe/spectrum-design-data",
3
- "version": "1.0.3",
3
+ "version": "2.1.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.0"
66
66
  },
67
67
  "scripts": {}
68
68
  }
@@ -1438,13 +1438,15 @@
1438
1438
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
1439
1439
  "$ref": "5c0f0543-7e9b-43d6-9fea-c771b9b524c6",
1440
1440
  "uuid": "be45ace6-9227-41d1-80be-0c58c3f8b3cb",
1441
- "deprecated": "unknown",
1442
- "deprecated_comment": "Replaced with drop-shadow-color-100",
1443
- "replaced_by": [
1444
- "5c0f0543-7e9b-43d6-9fea-c771b9b524c6",
1445
- "8d7e0eb7-c3c7-485e-896c-d5d5107e3b8f",
1446
- "4110e60c-efd6-421d-9c5c-0356cfff8697"
1447
- ]
1441
+ "lifecycle": {
1442
+ "deprecatedIn": "13.0.0-beta.29",
1443
+ "deprecatedComment": "Replaced with drop-shadow-color-100",
1444
+ "replacedBy": [
1445
+ "5c0f0543-7e9b-43d6-9fea-c771b9b524c6",
1446
+ "8d7e0eb7-c3c7-485e-896c-d5d5107e3b8f",
1447
+ "4110e60c-efd6-421d-9c5c-0356cfff8697"
1448
+ ]
1449
+ }
1448
1450
  },
1449
1451
  {
1450
1452
  "name": {