@adobe/spectrum-design-data 0.8.0 → 0.10.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 (51) hide show
  1. package/components/list-view.json +40 -0
  2. package/components/menu.json +36 -1
  3. package/components/table.json +2 -1
  4. package/fields/alignment.json +1 -1
  5. package/fields/color-scheme.json +1 -1
  6. package/fields/colorFamily.json +2 -2
  7. package/fields/colorRole.json +1 -1
  8. package/fields/contrast.json +1 -1
  9. package/fields/density.json +1 -1
  10. package/fields/easing.json +1 -1
  11. package/fields/emphasis.json +16 -0
  12. package/fields/family.json +3 -3
  13. package/fields/from.json +1 -1
  14. package/fields/icon.json +15 -0
  15. package/fields/motionRole.json +1 -1
  16. package/fields/orientation.json +1 -1
  17. package/fields/position.json +1 -1
  18. package/fields/property.json +1 -1
  19. package/fields/qualifier.json +15 -0
  20. package/fields/role.json +15 -0
  21. package/fields/scale.json +1 -1
  22. package/fields/script.json +16 -0
  23. package/fields/shape.json +1 -1
  24. package/fields/size.json +1 -1
  25. package/fields/state.json +1 -1
  26. package/fields/style.json +2 -3
  27. package/fields/to.json +1 -1
  28. package/fields/weight.json +2 -3
  29. package/package.json +2 -2
  30. package/registry/anatomy-terms.json +33 -2
  31. package/registry/color-roles.json +30 -0
  32. package/registry/components.json +185 -0
  33. package/registry/icon-terms.json +90 -0
  34. package/registry/positions.json +18 -0
  35. package/registry/property-terms.json +80 -0
  36. package/registry/qualifiers.json +47 -0
  37. package/registry/roles.json +17 -0
  38. package/registry/scripts.json +12 -0
  39. package/registry/shapes.json +15 -0
  40. package/registry/sizes.json +7 -0
  41. package/registry/structures.json +10 -0
  42. package/registry/typography-emphasis.json +32 -0
  43. package/registry/typography-families.json +1 -6
  44. package/registry/variants.json +56 -0
  45. package/tokens/color-aliases.tokens.json +628 -251
  46. package/tokens/color-component.tokens.json +113 -38
  47. package/tokens/icons.tokens.json +205 -196
  48. package/tokens/layout-component.tokens.json +2799 -1162
  49. package/tokens/layout.tokens.json +523 -155
  50. package/tokens/semantic-color-palette.tokens.json +85 -35
  51. package/tokens/typography.tokens.json +888 -381
package/tokens/color-component.tokens.json CHANGED
@@ -58,7 +58,8 @@
58
58
  "name": {
59
59
  "component": "bar-panel",
60
60
  "property": "color",
61
- "anatomy": "gripper"
61
+ "anatomy": "gripper",
62
+ "legacyKey": "bar-panel-gripper-color"
62
63
  },
63
64
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
64
65
  "$ref": "8a182a6b-149b-41a6-b608-fc247bcc298f",
@@ -67,7 +68,10 @@
67
68
  {
68
69
  "name": {
69
70
  "component": "bar-panel",
70
- "property": "gripper-color-drag"
71
+ "anatomy": "gripper",
72
+ "qualifier": "drag",
73
+ "property": "color",
74
+ "legacyKey": "bar-panel-gripper-color-drag"
71
75
  },
72
76
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
73
77
  "$ref": "f417fb5b-c7cc-41c2-a870-f6cd9a280c22",
@@ -76,7 +80,8 @@
76
80
  {
77
81
  "name": {
78
82
  "component": "card",
79
- "property": "background-loading-color"
83
+ "property": "background-loading-color",
84
+ "legacyKey": "card-background-loading-color"
80
85
  },
81
86
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
82
87
  "$ref": "16d156d1-4af9-4878-9984-643a2c08aff8",
@@ -85,7 +90,9 @@
85
90
  {
86
91
  "name": {
87
92
  "component": "card",
88
- "property": "background-well-color"
93
+ "anatomy": "well",
94
+ "property": "background-color",
95
+ "legacyKey": "card-background-well-color"
89
96
  },
90
97
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
91
98
  "$ref": "16d156d1-4af9-4878-9984-643a2c08aff8",
@@ -133,7 +140,10 @@
133
140
  {
134
141
  "name": {
135
142
  "component": "card",
136
- "property": "selection-background-color-opacity"
143
+ "anatomy": "selection",
144
+ "object": "background",
145
+ "property": "opacity",
146
+ "legacyKey": "card-selection-background-color-opacity"
137
147
  },
138
148
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/opacity.json",
139
149
  "value": "0.95",
@@ -151,7 +161,9 @@
151
161
  {
152
162
  "name": {
153
163
  "component": "coach-mark",
154
- "property": "pagination-color"
164
+ "anatomy": "pagination",
165
+ "property": "color",
166
+ "legacyKey": "coach-mark-pagination-color"
155
167
  },
156
168
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
157
169
  "$ref": "b49953b7-ef80-4e57-b1e7-546279b36bb4",
@@ -178,7 +190,9 @@
178
190
  {
179
191
  "name": {
180
192
  "component": "color-handle",
181
- "property": "drop-shadow-color"
193
+ "property": "color",
194
+ "structure": "drop-shadow",
195
+ "legacyKey": "color-handle-drop-shadow-color"
182
196
  },
183
197
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
184
198
  "$ref": "be45ace6-9227-41d1-80be-0c58c3f8b3cb",
@@ -190,7 +204,9 @@
190
204
  {
191
205
  "name": {
192
206
  "component": "color-handle",
193
- "property": "inner-border-color"
207
+ "position": "inner",
208
+ "property": "border-color",
209
+ "legacyKey": "color-handle-inner-border-color"
194
210
  },
195
211
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
196
212
  "$ref": "28dea8b0-4e9a-46f9-babb-c8910e6ae783",
@@ -199,7 +215,9 @@
199
215
  {
200
216
  "name": {
201
217
  "component": "color-handle",
202
- "property": "inner-border-opacity"
218
+ "position": "inner",
219
+ "property": "border-opacity",
220
+ "legacyKey": "color-handle-inner-border-opacity"
203
221
  },
204
222
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/opacity.json",
205
223
  "value": "0.42",
@@ -208,7 +226,9 @@
208
226
  {
209
227
  "name": {
210
228
  "component": "color-handle",
211
- "property": "outer-border-color"
229
+ "position": "outer",
230
+ "property": "border-color",
231
+ "legacyKey": "color-handle-outer-border-color"
212
232
  },
213
233
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
214
234
  "$ref": "28dea8b0-4e9a-46f9-babb-c8910e6ae783",
@@ -217,7 +237,9 @@
217
237
  {
218
238
  "name": {
219
239
  "component": "color-handle",
220
- "property": "outer-border-opacity"
240
+ "position": "outer",
241
+ "property": "border-opacity",
242
+ "legacyKey": "color-handle-outer-border-opacity"
221
243
  },
222
244
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
223
245
  "$ref": "72b473c6-ec9b-4830-a0f8-48b80070e7b8",
@@ -226,7 +248,9 @@
226
248
  {
227
249
  "name": {
228
250
  "component": "color-loupe",
229
- "property": "drop-shadow-blur"
251
+ "property": "blur",
252
+ "structure": "drop-shadow",
253
+ "legacyKey": "color-loupe-drop-shadow-blur"
230
254
  },
231
255
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
232
256
  "$ref": "f3487a86-3aea-4527-8b5c-287c0bddad6c",
@@ -236,7 +260,9 @@
236
260
  {
237
261
  "name": {
238
262
  "component": "color-loupe",
239
- "property": "drop-shadow-color"
263
+ "property": "color",
264
+ "structure": "drop-shadow",
265
+ "legacyKey": "color-loupe-drop-shadow-color"
240
266
  },
241
267
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
242
268
  "$ref": "e475981f-97af-479c-859b-7619dd87c448",
@@ -248,7 +274,9 @@
248
274
  {
249
275
  "name": {
250
276
  "component": "color-loupe",
251
- "property": "drop-shadow-y"
277
+ "property": "y",
278
+ "structure": "drop-shadow",
279
+ "legacyKey": "color-loupe-drop-shadow-y"
252
280
  },
253
281
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
254
282
  "$ref": "45f313a5-1749-4b95-b5e3-20944adbea84",
@@ -258,7 +286,9 @@
258
286
  {
259
287
  "name": {
260
288
  "component": "color-loupe",
261
- "property": "inner-border"
289
+ "position": "inner",
290
+ "property": "border-color",
291
+ "legacyKey": "color-loupe-inner-border"
262
292
  },
263
293
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
264
294
  "$ref": "a84ecad8-8005-4ce4-add6-7f83f7e05ba0",
@@ -267,7 +297,9 @@
267
297
  {
268
298
  "name": {
269
299
  "component": "color-loupe",
270
- "property": "outer-border"
300
+ "position": "outer",
301
+ "property": "border-color",
302
+ "legacyKey": "color-loupe-outer-border"
271
303
  },
272
304
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
273
305
  "$ref": "9b799da8-2130-417e-b7ee-5e1154a89837",
@@ -321,7 +353,9 @@
321
353
  {
322
354
  "name": {
323
355
  "component": "drop-zone",
324
- "property": "background-color-opacity"
356
+ "object": "background",
357
+ "property": "opacity",
358
+ "legacyKey": "drop-zone-background-color-opacity"
325
359
  },
326
360
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/opacity.json",
327
361
  "value": "0.1",
@@ -330,7 +364,10 @@
330
364
  {
331
365
  "name": {
332
366
  "component": "drop-zone",
333
- "property": "background-color-opacity-filled"
367
+ "object": "background",
368
+ "property": "opacity",
369
+ "state": "filled",
370
+ "legacyKey": "drop-zone-background-color-opacity-filled"
334
371
  },
335
372
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/opacity.json",
336
373
  "value": "0.3",
@@ -339,7 +376,9 @@
339
376
  {
340
377
  "name": {
341
378
  "component": "floating-action-button",
342
- "property": "drop-shadow-color"
379
+ "property": "color",
380
+ "structure": "drop-shadow",
381
+ "legacyKey": "floating-action-button-drop-shadow-color"
343
382
  },
344
383
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
345
384
  "$ref": "16a871e1-d9df-42bb-8889-99059d70e82e",
@@ -359,7 +398,9 @@
359
398
  },
360
399
  {
361
400
  "name": {
362
- "component": "menu-item",
401
+ "component": "menu",
402
+ "anatomy": "menu-item",
403
+ "legacyKey": "menu-item-background-color-default",
363
404
  "property": "background-color",
364
405
  "state": "default",
365
406
  "colorScheme": "light"
@@ -372,7 +413,9 @@
372
413
  },
373
414
  {
374
415
  "name": {
375
- "component": "menu-item",
416
+ "component": "menu",
417
+ "anatomy": "menu-item",
418
+ "legacyKey": "menu-item-background-color-default",
376
419
  "property": "background-color",
377
420
  "state": "default",
378
421
  "colorScheme": "dark"
@@ -385,7 +428,9 @@
385
428
  },
386
429
  {
387
430
  "name": {
388
- "component": "menu-item",
431
+ "component": "menu",
432
+ "anatomy": "menu-item",
433
+ "legacyKey": "menu-item-background-color-default",
389
434
  "property": "background-color",
390
435
  "state": "default",
391
436
  "colorScheme": "wireframe"
@@ -398,7 +443,9 @@
398
443
  },
399
444
  {
400
445
  "name": {
401
- "component": "menu-item",
446
+ "component": "menu",
447
+ "anatomy": "menu-item",
448
+ "legacyKey": "menu-item-background-color-disabled",
402
449
  "property": "background-color",
403
450
  "state": "disabled",
404
451
  "colorScheme": "light"
@@ -411,7 +458,9 @@
411
458
  },
412
459
  {
413
460
  "name": {
414
- "component": "menu-item",
461
+ "component": "menu",
462
+ "anatomy": "menu-item",
463
+ "legacyKey": "menu-item-background-color-disabled",
415
464
  "property": "background-color",
416
465
  "state": "disabled",
417
466
  "colorScheme": "dark"
@@ -424,7 +473,9 @@
424
473
  },
425
474
  {
426
475
  "name": {
427
- "component": "menu-item",
476
+ "component": "menu",
477
+ "anatomy": "menu-item",
478
+ "legacyKey": "menu-item-background-color-disabled",
428
479
  "property": "background-color",
429
480
  "state": "disabled",
430
481
  "colorScheme": "wireframe"
@@ -437,7 +488,9 @@
437
488
  },
438
489
  {
439
490
  "name": {
440
- "component": "menu-item",
491
+ "component": "menu",
492
+ "anatomy": "menu-item",
493
+ "legacyKey": "menu-item-background-color-down",
441
494
  "property": "background-color",
442
495
  "state": "down",
443
496
  "colorScheme": "light"
@@ -450,7 +503,9 @@
450
503
  },
451
504
  {
452
505
  "name": {
453
- "component": "menu-item",
506
+ "component": "menu",
507
+ "anatomy": "menu-item",
508
+ "legacyKey": "menu-item-background-color-down",
454
509
  "property": "background-color",
455
510
  "state": "down",
456
511
  "colorScheme": "dark"
@@ -463,7 +518,9 @@
463
518
  },
464
519
  {
465
520
  "name": {
466
- "component": "menu-item",
521
+ "component": "menu",
522
+ "anatomy": "menu-item",
523
+ "legacyKey": "menu-item-background-color-down",
467
524
  "property": "background-color",
468
525
  "state": "down",
469
526
  "colorScheme": "wireframe"
@@ -476,7 +533,9 @@
476
533
  },
477
534
  {
478
535
  "name": {
479
- "component": "menu-item",
536
+ "component": "menu",
537
+ "anatomy": "menu-item",
538
+ "legacyKey": "menu-item-background-color-hover",
480
539
  "property": "background-color",
481
540
  "state": "hover",
482
541
  "colorScheme": "light"
@@ -489,7 +548,9 @@
489
548
  },
490
549
  {
491
550
  "name": {
492
- "component": "menu-item",
551
+ "component": "menu",
552
+ "anatomy": "menu-item",
553
+ "legacyKey": "menu-item-background-color-hover",
493
554
  "property": "background-color",
494
555
  "state": "hover",
495
556
  "colorScheme": "dark"
@@ -502,7 +563,9 @@
502
563
  },
503
564
  {
504
565
  "name": {
505
- "component": "menu-item",
566
+ "component": "menu",
567
+ "anatomy": "menu-item",
568
+ "legacyKey": "menu-item-background-color-hover",
506
569
  "property": "background-color",
507
570
  "state": "hover",
508
571
  "colorScheme": "wireframe"
@@ -515,7 +578,9 @@
515
578
  },
516
579
  {
517
580
  "name": {
518
- "component": "menu-item",
581
+ "component": "menu",
582
+ "anatomy": "menu-item",
583
+ "legacyKey": "menu-item-background-color-keyboard-focus",
519
584
  "property": "background-color",
520
585
  "state": "keyboard-focus",
521
586
  "colorScheme": "light"
@@ -528,7 +593,9 @@
528
593
  },
529
594
  {
530
595
  "name": {
531
- "component": "menu-item",
596
+ "component": "menu",
597
+ "anatomy": "menu-item",
598
+ "legacyKey": "menu-item-background-color-keyboard-focus",
532
599
  "property": "background-color",
533
600
  "state": "keyboard-focus",
534
601
  "colorScheme": "dark"
@@ -541,7 +608,9 @@
541
608
  },
542
609
  {
543
610
  "name": {
544
- "component": "menu-item",
611
+ "component": "menu",
612
+ "anatomy": "menu-item",
613
+ "legacyKey": "menu-item-background-color-keyboard-focus",
545
614
  "property": "background-color",
546
615
  "state": "keyboard-focus",
547
616
  "colorScheme": "wireframe"
@@ -591,7 +660,8 @@
591
660
  {
592
661
  "name": {
593
662
  "component": "opacity-checkerboard",
594
- "property": "square-light"
663
+ "property": "square-light",
664
+ "legacyKey": "opacity-checkerboard-square-light"
595
665
  },
596
666
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
597
667
  "$ref": "9b799da8-2130-417e-b7ee-5e1154a89837",
@@ -702,7 +772,8 @@
702
772
  "name": {
703
773
  "component": "stack-item",
704
774
  "property": "background-color",
705
- "state": "key-focus"
775
+ "state": "key-focus",
776
+ "legacyKey": "stack-item-background-color-key-focus"
706
777
  },
707
778
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
708
779
  "$ref": "16d156d1-4af9-4878-9984-643a2c08aff8",
@@ -757,7 +828,8 @@
757
828
  "name": {
758
829
  "component": "standard-panel",
759
830
  "property": "color",
760
- "anatomy": "gripper"
831
+ "anatomy": "gripper",
832
+ "legacyKey": "standard-panel-gripper-color"
761
833
  },
762
834
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
763
835
  "$ref": "60077744-c665-4c80-8f88-dff31a10219e",
@@ -766,7 +838,10 @@
766
838
  {
767
839
  "name": {
768
840
  "component": "standard-panel",
769
- "property": "gripper-color-drag"
841
+ "anatomy": "gripper",
842
+ "qualifier": "drag",
843
+ "property": "color",
844
+ "legacyKey": "standard-panel-gripper-color-drag"
770
845
  },
771
846
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
772
847
  "$ref": "f417fb5b-c7cc-41c2-a870-f6cd9a280c22",