@adobe/spectrum-design-data 0.7.1 → 0.9.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 (65) hide show
  1. package/components/action-bar.json +10 -0
  2. package/components/alert-banner.json +6 -0
  3. package/components/breadcrumbs.json +6 -0
  4. package/components/coach-mark.json +6 -0
  5. package/components/field-label.json +6 -0
  6. package/components/list-view.json +40 -0
  7. package/components/menu.json +45 -0
  8. package/components/number-field.json +6 -0
  9. package/components/side-navigation.json +6 -0
  10. package/components/slider.json +6 -0
  11. package/components/status-light.json +18 -0
  12. package/components/steplist.json +6 -0
  13. package/components/table.json +19 -0
  14. package/components/tag.json +10 -0
  15. package/components/tree-view.json +6 -0
  16. package/fields/alignment.json +1 -1
  17. package/fields/color-scheme.json +3 -2
  18. package/fields/colorFamily.json +3 -2
  19. package/fields/colorRole.json +16 -0
  20. package/fields/contrast.json +3 -2
  21. package/fields/density.json +1 -1
  22. package/fields/easing.json +1 -1
  23. package/fields/emphasis.json +16 -0
  24. package/fields/family.json +4 -3
  25. package/fields/from.json +16 -0
  26. package/fields/icon.json +15 -0
  27. package/fields/motionRole.json +1 -1
  28. package/fields/orientation.json +1 -1
  29. package/fields/position.json +1 -1
  30. package/fields/property.json +1 -1
  31. package/fields/qualifier.json +15 -0
  32. package/fields/role.json +15 -0
  33. package/fields/scale.json +3 -2
  34. package/fields/scaleIndex.json +2 -1
  35. package/fields/script.json +16 -0
  36. package/fields/shape.json +1 -1
  37. package/fields/size.json +1 -1
  38. package/fields/state.json +1 -1
  39. package/fields/structure.json +2 -1
  40. package/fields/style.json +1 -1
  41. package/fields/to.json +16 -0
  42. package/fields/weight.json +1 -1
  43. package/package.json +2 -2
  44. package/registry/anatomy-terms.json +98 -2
  45. package/registry/color-roles.json +47 -0
  46. package/registry/components.json +195 -0
  47. package/registry/icon-terms.json +90 -0
  48. package/registry/positions.json +38 -0
  49. package/registry/property-terms.json +90 -0
  50. package/registry/qualifiers.json +47 -0
  51. package/registry/roles.json +17 -0
  52. package/registry/scripts.json +12 -0
  53. package/registry/shapes.json +15 -0
  54. package/registry/sizes.json +7 -0
  55. package/registry/structures.json +10 -0
  56. package/registry/typography-emphasis.json +32 -0
  57. package/registry/typography-families.json +1 -6
  58. package/registry/variants.json +49 -0
  59. package/tokens/color-aliases.tokens.json +775 -349
  60. package/tokens/color-component.tokens.json +124 -44
  61. package/tokens/icons.tokens.json +943 -563
  62. package/tokens/layout-component.tokens.json +3625 -1585
  63. package/tokens/layout.tokens.json +508 -157
  64. package/tokens/semantic-color-palette.tokens.json +85 -35
  65. package/tokens/typography.tokens.json +894 -384
package/tokens/color-component.tokens.json CHANGED
@@ -57,7 +57,9 @@
57
57
  {
58
58
  "name": {
59
59
  "component": "bar-panel",
60
- "property": "gripper-color"
60
+ "property": "color",
61
+ "anatomy": "gripper",
62
+ "legacyKey": "bar-panel-gripper-color"
61
63
  },
62
64
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
63
65
  "$ref": "8a182a6b-149b-41a6-b608-fc247bcc298f",
@@ -66,7 +68,10 @@
66
68
  {
67
69
  "name": {
68
70
  "component": "bar-panel",
69
- "property": "gripper-color-drag"
71
+ "anatomy": "gripper",
72
+ "qualifier": "drag",
73
+ "property": "color",
74
+ "legacyKey": "bar-panel-gripper-color-drag"
70
75
  },
71
76
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
72
77
  "$ref": "f417fb5b-c7cc-41c2-a870-f6cd9a280c22",
@@ -75,7 +80,8 @@
75
80
  {
76
81
  "name": {
77
82
  "component": "card",
78
- "property": "background-loading-color"
83
+ "property": "background-loading-color",
84
+ "legacyKey": "card-background-loading-color"
79
85
  },
80
86
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
81
87
  "$ref": "16d156d1-4af9-4878-9984-643a2c08aff8",
@@ -84,7 +90,9 @@
84
90
  {
85
91
  "name": {
86
92
  "component": "card",
87
- "property": "background-well-color"
93
+ "anatomy": "well",
94
+ "property": "background-color",
95
+ "legacyKey": "card-background-well-color"
88
96
  },
89
97
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
90
98
  "$ref": "16d156d1-4af9-4878-9984-643a2c08aff8",
@@ -93,8 +101,9 @@
93
101
  {
94
102
  "name": {
95
103
  "component": "card",
96
- "property": "selection-background-color",
97
- "colorScheme": "light"
104
+ "property": "background-color",
105
+ "colorScheme": "light",
106
+ "anatomy": "selection"
98
107
  },
99
108
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
100
109
  "$ref": "b24431ee-5c72-4a73-8733-746c6f5d77c0",
@@ -105,8 +114,9 @@
105
114
  {
106
115
  "name": {
107
116
  "component": "card",
108
- "property": "selection-background-color",
109
- "colorScheme": "dark"
117
+ "property": "background-color",
118
+ "colorScheme": "dark",
119
+ "anatomy": "selection"
110
120
  },
111
121
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
112
122
  "$ref": "199e19a5-bf7d-4933-8425-d7d5881e4cf5",
@@ -117,8 +127,9 @@
117
127
  {
118
128
  "name": {
119
129
  "component": "card",
120
- "property": "selection-background-color",
121
- "colorScheme": "wireframe"
130
+ "property": "background-color",
131
+ "colorScheme": "wireframe",
132
+ "anatomy": "selection"
122
133
  },
123
134
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
124
135
  "$ref": "199e19a5-bf7d-4933-8425-d7d5881e4cf5",
@@ -129,7 +140,10 @@
129
140
  {
130
141
  "name": {
131
142
  "component": "card",
132
- "property": "selection-background-color-opacity"
143
+ "anatomy": "selection",
144
+ "object": "background",
145
+ "property": "opacity",
146
+ "legacyKey": "card-selection-background-color-opacity"
133
147
  },
134
148
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/opacity.json",
135
149
  "value": "0.95",
@@ -147,7 +161,9 @@
147
161
  {
148
162
  "name": {
149
163
  "component": "coach-mark",
150
- "property": "pagination-color"
164
+ "anatomy": "pagination",
165
+ "property": "color",
166
+ "legacyKey": "coach-mark-pagination-color"
151
167
  },
152
168
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
153
169
  "$ref": "b49953b7-ef80-4e57-b1e7-546279b36bb4",
@@ -174,7 +190,9 @@
174
190
  {
175
191
  "name": {
176
192
  "component": "color-handle",
177
- "property": "drop-shadow-color"
193
+ "property": "color",
194
+ "structure": "drop-shadow",
195
+ "legacyKey": "color-handle-drop-shadow-color"
178
196
  },
179
197
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
180
198
  "$ref": "be45ace6-9227-41d1-80be-0c58c3f8b3cb",
@@ -186,7 +204,9 @@
186
204
  {
187
205
  "name": {
188
206
  "component": "color-handle",
189
- "property": "inner-border-color"
207
+ "position": "inner",
208
+ "property": "border-color",
209
+ "legacyKey": "color-handle-inner-border-color"
190
210
  },
191
211
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
192
212
  "$ref": "28dea8b0-4e9a-46f9-babb-c8910e6ae783",
@@ -195,7 +215,9 @@
195
215
  {
196
216
  "name": {
197
217
  "component": "color-handle",
198
- "property": "inner-border-opacity"
218
+ "position": "inner",
219
+ "property": "border-opacity",
220
+ "legacyKey": "color-handle-inner-border-opacity"
199
221
  },
200
222
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/opacity.json",
201
223
  "value": "0.42",
@@ -204,7 +226,9 @@
204
226
  {
205
227
  "name": {
206
228
  "component": "color-handle",
207
- "property": "outer-border-color"
229
+ "position": "outer",
230
+ "property": "border-color",
231
+ "legacyKey": "color-handle-outer-border-color"
208
232
  },
209
233
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
210
234
  "$ref": "28dea8b0-4e9a-46f9-babb-c8910e6ae783",
@@ -213,7 +237,9 @@
213
237
  {
214
238
  "name": {
215
239
  "component": "color-handle",
216
- "property": "outer-border-opacity"
240
+ "position": "outer",
241
+ "property": "border-opacity",
242
+ "legacyKey": "color-handle-outer-border-opacity"
217
243
  },
218
244
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
219
245
  "$ref": "72b473c6-ec9b-4830-a0f8-48b80070e7b8",
@@ -222,7 +248,9 @@
222
248
  {
223
249
  "name": {
224
250
  "component": "color-loupe",
225
- "property": "drop-shadow-blur"
251
+ "property": "blur",
252
+ "structure": "drop-shadow",
253
+ "legacyKey": "color-loupe-drop-shadow-blur"
226
254
  },
227
255
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
228
256
  "$ref": "f3487a86-3aea-4527-8b5c-287c0bddad6c",
@@ -232,7 +260,9 @@
232
260
  {
233
261
  "name": {
234
262
  "component": "color-loupe",
235
- "property": "drop-shadow-color"
263
+ "property": "color",
264
+ "structure": "drop-shadow",
265
+ "legacyKey": "color-loupe-drop-shadow-color"
236
266
  },
237
267
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
238
268
  "$ref": "e475981f-97af-479c-859b-7619dd87c448",
@@ -244,7 +274,9 @@
244
274
  {
245
275
  "name": {
246
276
  "component": "color-loupe",
247
- "property": "drop-shadow-y"
277
+ "property": "y",
278
+ "structure": "drop-shadow",
279
+ "legacyKey": "color-loupe-drop-shadow-y"
248
280
  },
249
281
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
250
282
  "$ref": "45f313a5-1749-4b95-b5e3-20944adbea84",
@@ -254,7 +286,9 @@
254
286
  {
255
287
  "name": {
256
288
  "component": "color-loupe",
257
- "property": "inner-border"
289
+ "position": "inner",
290
+ "property": "border-color",
291
+ "legacyKey": "color-loupe-inner-border"
258
292
  },
259
293
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
260
294
  "$ref": "a84ecad8-8005-4ce4-add6-7f83f7e05ba0",
@@ -263,7 +297,9 @@
263
297
  {
264
298
  "name": {
265
299
  "component": "color-loupe",
266
- "property": "outer-border"
300
+ "position": "outer",
301
+ "property": "border-color",
302
+ "legacyKey": "color-loupe-outer-border"
267
303
  },
268
304
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
269
305
  "$ref": "9b799da8-2130-417e-b7ee-5e1154a89837",
@@ -317,7 +353,9 @@
317
353
  {
318
354
  "name": {
319
355
  "component": "drop-zone",
320
- "property": "background-color-opacity"
356
+ "object": "background",
357
+ "property": "opacity",
358
+ "legacyKey": "drop-zone-background-color-opacity"
321
359
  },
322
360
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/opacity.json",
323
361
  "value": "0.1",
@@ -326,7 +364,10 @@
326
364
  {
327
365
  "name": {
328
366
  "component": "drop-zone",
329
- "property": "background-color-opacity-filled"
367
+ "object": "background",
368
+ "property": "opacity",
369
+ "state": "filled",
370
+ "legacyKey": "drop-zone-background-color-opacity-filled"
330
371
  },
331
372
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/opacity.json",
332
373
  "value": "0.3",
@@ -335,7 +376,9 @@
335
376
  {
336
377
  "name": {
337
378
  "component": "floating-action-button",
338
- "property": "drop-shadow-color"
379
+ "property": "color",
380
+ "structure": "drop-shadow",
381
+ "legacyKey": "floating-action-button-drop-shadow-color"
339
382
  },
340
383
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
341
384
  "$ref": "16a871e1-d9df-42bb-8889-99059d70e82e",
@@ -355,7 +398,9 @@
355
398
  },
356
399
  {
357
400
  "name": {
358
- "component": "menu-item",
401
+ "component": "menu",
402
+ "anatomy": "menu-item",
403
+ "legacyKey": "menu-item-background-color-default",
359
404
  "property": "background-color",
360
405
  "state": "default",
361
406
  "colorScheme": "light"
@@ -368,7 +413,9 @@
368
413
  },
369
414
  {
370
415
  "name": {
371
- "component": "menu-item",
416
+ "component": "menu",
417
+ "anatomy": "menu-item",
418
+ "legacyKey": "menu-item-background-color-default",
372
419
  "property": "background-color",
373
420
  "state": "default",
374
421
  "colorScheme": "dark"
@@ -381,7 +428,9 @@
381
428
  },
382
429
  {
383
430
  "name": {
384
- "component": "menu-item",
431
+ "component": "menu",
432
+ "anatomy": "menu-item",
433
+ "legacyKey": "menu-item-background-color-default",
385
434
  "property": "background-color",
386
435
  "state": "default",
387
436
  "colorScheme": "wireframe"
@@ -394,7 +443,9 @@
394
443
  },
395
444
  {
396
445
  "name": {
397
- "component": "menu-item",
446
+ "component": "menu",
447
+ "anatomy": "menu-item",
448
+ "legacyKey": "menu-item-background-color-disabled",
398
449
  "property": "background-color",
399
450
  "state": "disabled",
400
451
  "colorScheme": "light"
@@ -407,7 +458,9 @@
407
458
  },
408
459
  {
409
460
  "name": {
410
- "component": "menu-item",
461
+ "component": "menu",
462
+ "anatomy": "menu-item",
463
+ "legacyKey": "menu-item-background-color-disabled",
411
464
  "property": "background-color",
412
465
  "state": "disabled",
413
466
  "colorScheme": "dark"
@@ -420,7 +473,9 @@
420
473
  },
421
474
  {
422
475
  "name": {
423
- "component": "menu-item",
476
+ "component": "menu",
477
+ "anatomy": "menu-item",
478
+ "legacyKey": "menu-item-background-color-disabled",
424
479
  "property": "background-color",
425
480
  "state": "disabled",
426
481
  "colorScheme": "wireframe"
@@ -433,7 +488,9 @@
433
488
  },
434
489
  {
435
490
  "name": {
436
- "component": "menu-item",
491
+ "component": "menu",
492
+ "anatomy": "menu-item",
493
+ "legacyKey": "menu-item-background-color-down",
437
494
  "property": "background-color",
438
495
  "state": "down",
439
496
  "colorScheme": "light"
@@ -446,7 +503,9 @@
446
503
  },
447
504
  {
448
505
  "name": {
449
- "component": "menu-item",
506
+ "component": "menu",
507
+ "anatomy": "menu-item",
508
+ "legacyKey": "menu-item-background-color-down",
450
509
  "property": "background-color",
451
510
  "state": "down",
452
511
  "colorScheme": "dark"
@@ -459,7 +518,9 @@
459
518
  },
460
519
  {
461
520
  "name": {
462
- "component": "menu-item",
521
+ "component": "menu",
522
+ "anatomy": "menu-item",
523
+ "legacyKey": "menu-item-background-color-down",
463
524
  "property": "background-color",
464
525
  "state": "down",
465
526
  "colorScheme": "wireframe"
@@ -472,7 +533,9 @@
472
533
  },
473
534
  {
474
535
  "name": {
475
- "component": "menu-item",
536
+ "component": "menu",
537
+ "anatomy": "menu-item",
538
+ "legacyKey": "menu-item-background-color-hover",
476
539
  "property": "background-color",
477
540
  "state": "hover",
478
541
  "colorScheme": "light"
@@ -485,7 +548,9 @@
485
548
  },
486
549
  {
487
550
  "name": {
488
- "component": "menu-item",
551
+ "component": "menu",
552
+ "anatomy": "menu-item",
553
+ "legacyKey": "menu-item-background-color-hover",
489
554
  "property": "background-color",
490
555
  "state": "hover",
491
556
  "colorScheme": "dark"
@@ -498,7 +563,9 @@
498
563
  },
499
564
  {
500
565
  "name": {
501
- "component": "menu-item",
566
+ "component": "menu",
567
+ "anatomy": "menu-item",
568
+ "legacyKey": "menu-item-background-color-hover",
502
569
  "property": "background-color",
503
570
  "state": "hover",
504
571
  "colorScheme": "wireframe"
@@ -511,7 +578,9 @@
511
578
  },
512
579
  {
513
580
  "name": {
514
- "component": "menu-item",
581
+ "component": "menu",
582
+ "anatomy": "menu-item",
583
+ "legacyKey": "menu-item-background-color-keyboard-focus",
515
584
  "property": "background-color",
516
585
  "state": "keyboard-focus",
517
586
  "colorScheme": "light"
@@ -524,7 +593,9 @@
524
593
  },
525
594
  {
526
595
  "name": {
527
- "component": "menu-item",
596
+ "component": "menu",
597
+ "anatomy": "menu-item",
598
+ "legacyKey": "menu-item-background-color-keyboard-focus",
528
599
  "property": "background-color",
529
600
  "state": "keyboard-focus",
530
601
  "colorScheme": "dark"
@@ -537,7 +608,9 @@
537
608
  },
538
609
  {
539
610
  "name": {
540
- "component": "menu-item",
611
+ "component": "menu",
612
+ "anatomy": "menu-item",
613
+ "legacyKey": "menu-item-background-color-keyboard-focus",
541
614
  "property": "background-color",
542
615
  "state": "keyboard-focus",
543
616
  "colorScheme": "wireframe"
@@ -587,7 +660,8 @@
587
660
  {
588
661
  "name": {
589
662
  "component": "opacity-checkerboard",
590
- "property": "square-light"
663
+ "property": "square-light",
664
+ "legacyKey": "opacity-checkerboard-square-light"
591
665
  },
592
666
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
593
667
  "$ref": "9b799da8-2130-417e-b7ee-5e1154a89837",
@@ -698,7 +772,8 @@
698
772
  "name": {
699
773
  "component": "stack-item",
700
774
  "property": "background-color",
701
- "state": "key-focus"
775
+ "state": "key-focus",
776
+ "legacyKey": "stack-item-background-color-key-focus"
702
777
  },
703
778
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
704
779
  "$ref": "16d156d1-4af9-4878-9984-643a2c08aff8",
@@ -752,7 +827,9 @@
752
827
  {
753
828
  "name": {
754
829
  "component": "standard-panel",
755
- "property": "gripper-color"
830
+ "property": "color",
831
+ "anatomy": "gripper",
832
+ "legacyKey": "standard-panel-gripper-color"
756
833
  },
757
834
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
758
835
  "$ref": "60077744-c665-4c80-8f88-dff31a10219e",
@@ -761,7 +838,10 @@
761
838
  {
762
839
  "name": {
763
840
  "component": "standard-panel",
764
- "property": "gripper-color-drag"
841
+ "anatomy": "gripper",
842
+ "qualifier": "drag",
843
+ "property": "color",
844
+ "legacyKey": "standard-panel-gripper-color-drag"
765
845
  },
766
846
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
767
847
  "$ref": "f417fb5b-c7cc-41c2-a870-f6cd9a280c22",