@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
@@ -60,20 +60,36 @@
60
60
  }
61
61
  ],
62
62
  "options": {
63
- "title": { "type": "string" },
64
- "description": { "type": "string" },
63
+ "title": {
64
+ "type": "string"
65
+ },
66
+ "description": {
67
+ "type": "string"
68
+ },
65
69
  "variant": {
66
70
  "type": "string",
67
71
  "default": "confirmation",
68
72
  "values": [
69
- { "value": "confirmation" },
70
- { "value": "information" },
71
- { "value": "warning" },
72
- { "value": "destructive" },
73
- { "value": "error" }
73
+ {
74
+ "value": "confirmation"
75
+ },
76
+ {
77
+ "value": "information"
78
+ },
79
+ {
80
+ "value": "warning"
81
+ },
82
+ {
83
+ "value": "destructive"
84
+ },
85
+ {
86
+ "value": "error"
87
+ }
74
88
  ]
75
89
  },
76
- "primaryActionLabel": { "type": "string" },
90
+ "primaryActionLabel": {
91
+ "type": "string"
92
+ },
77
93
  "secondaryActionLabel": {
78
94
  "type": "string",
79
95
  "description": "If undefined, this button does not appear."
@@ -84,40 +100,14 @@
84
100
  "description": "If undefined, this button does not appear."
85
101
  }
86
102
  },
87
- "lifecycle": { "introduced": "1.0.0-draft" },
103
+ "lifecycle": {
104
+ "introduced": "1.0.0-draft"
105
+ },
88
106
  "tokenBindings": [
89
- { "token": "heading-sans-serif-font-family", "context": "Title" },
90
- { "token": "heading-sans-serif-font-weight", "context": "Title" },
91
- { "token": "heading-sans-serif-font-style", "context": "Title" },
92
- { "token": "alert-dialog-title-font-size", "context": "Title" },
93
- { "token": "heading-line-height", "context": "Title" },
94
- { "token": "heading-color", "context": "Title" },
95
- { "token": "body-sans-serif-font-family", "context": "Description" },
96
- { "token": "body-sans-serif-font-weight", "context": "Description" },
97
- { "token": "body-sans-serif-font-style", "context": "Description" },
98
- { "token": "alert-dialog-description-font-size", "context": "Description" },
99
- { "token": "line-height-200", "context": "Description" },
100
- { "token": "body-color", "context": "Description" },
101
- { "token": "alert-dialog-maximum-width", "context": "Maximum width" },
102
- { "token": "alert-dialog-minimum-width", "context": "Minimum width" },
103
- { "token": "corner-radius-extra-large-default", "context": "Rounding" },
104
- { "token": "spacing-500", "context": "Spacing (edge to content)" },
105
- { "token": "spacing-400", "context": "Spacing (edge to content)" },
106
107
  {
107
108
  "token": "alert-dialog-top-to-alert-icon",
108
109
  "context": "Icon asset (error and warning variants)"
109
- },
110
- { "token": "spacing-300", "context": "Spacing (title to description)" },
111
- {
112
- "token": "workflow-icon-size-100",
113
- "context": "Icon (error and warning variants)"
114
- },
115
- { "token": "spacing-100", "context": "Minimum spacing (title to icon)" },
116
- { "token": "background-layer-2-color", "context": "Background" },
117
- { "token": "overlay-color", "context": "Overlay" },
118
- { "token": "overlay-opacity", "context": "Overlay" },
119
- { "token": "notice-visual-color", "context": "Icon (warning variant)" },
120
- { "token": "negative-visual-color", "context": "Icon (error variant)" }
110
+ }
121
111
  ],
122
112
  "accessibility": {
123
113
  "role": "dialog",
@@ -125,8 +115,16 @@
125
115
  "focusable": false,
126
116
  "keyboardIntents": ["dismiss"],
127
117
  "wcag": [
128
- { "criterion": "2.4.3", "level": "A", "title": "Focus Order" },
129
- { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
118
+ {
119
+ "criterion": "2.4.3",
120
+ "level": "A",
121
+ "title": "Focus Order"
122
+ },
123
+ {
124
+ "criterion": "4.1.2",
125
+ "level": "A",
126
+ "title": "Name, Role, Value"
127
+ }
130
128
  ]
131
129
  }
132
130
  }
@@ -48,61 +48,35 @@
48
48
  "type": "number",
49
49
  "default": 100,
50
50
  "values": [
51
- { "value": 50 },
52
- { "value": 75 },
53
- { "value": 100 },
54
- { "value": 200 },
55
- { "value": 300 },
56
- { "value": 400 },
57
- { "value": 500 }
51
+ {
52
+ "value": 50
53
+ },
54
+ {
55
+ "value": 75
56
+ },
57
+ {
58
+ "value": 100
59
+ },
60
+ {
61
+ "value": 200
62
+ },
63
+ {
64
+ "value": 300
65
+ },
66
+ {
67
+ "value": 400
68
+ },
69
+ {
70
+ "value": 500
71
+ }
58
72
  ]
59
73
  }
60
74
  },
61
- "lifecycle": { "introduced": "1.0.0-draft" },
62
- "tokenBindings": [
63
- { "token": "avatar-group-size-50", "context": "Size" },
64
- { "token": "avatar-group-size-75", "context": "Size" },
65
- { "token": "avatar-group-size-100", "context": "Size" },
66
- { "token": "avatar-group-size-200", "context": "Size" },
67
- { "token": "avatar-group-size-300", "context": "Size" },
68
- { "token": "avatar-group-size-400", "context": "Size" },
69
- { "token": "avatar-group-size-500", "context": "Size" },
70
- { "token": "spacing-100", "context": "Spacing (avatar group to label)" },
71
- { "token": "avatar-to-avatar-50", "context": "Spacing (avatar to avatar)" },
72
- { "token": "avatar-to-avatar-75", "context": "Spacing (avatar to avatar)" },
73
- {
74
- "token": "avatar-to-avatar-100",
75
- "context": "Spacing (avatar to avatar)"
76
- },
77
- {
78
- "token": "avatar-to-avatar-200",
79
- "context": "Spacing (avatar to avatar)"
80
- },
81
- {
82
- "token": "avatar-to-avatar-300",
83
- "context": "Spacing (avatar to avatar)"
84
- },
85
- {
86
- "token": "avatar-to-avatar-400",
87
- "context": "Spacing (avatar to avatar)"
88
- },
89
- {
90
- "token": "avatar-to-avatar-500",
91
- "context": "Spacing (avatar to avatar)"
92
- },
93
- { "token": "default-font-family", "context": "Layout" },
94
- { "token": "regular-font-weight", "context": "Layout" },
95
- { "token": "default-font-style", "context": "Layout" },
96
- { "token": "font-size-50", "context": "Layout" },
97
- { "token": "font-size-75", "context": "Layout" },
98
- { "token": "font-size-100", "context": "Layout" },
99
- { "token": "font-size-200", "context": "Layout" },
100
- { "token": "font-size-300", "context": "Layout" },
101
- { "token": "font-size-400", "context": "Layout" },
102
- { "token": "font-size-500", "context": "Layout" },
103
- { "token": "font-size-600", "context": "Layout" },
104
- { "token": "line-height-100", "context": "Layout" },
105
- { "token": "cjk-line-height-100", "context": "Layout" }
106
- ],
107
- "accessibility": { "role": "group", "focusable": false }
75
+ "lifecycle": {
76
+ "introduced": "1.0.0-draft"
77
+ },
78
+ "accessibility": {
79
+ "role": "group",
80
+ "focusable": false
81
+ }
108
82
  }
@@ -56,74 +56,107 @@
56
56
  "type": "number",
57
57
  "default": 500,
58
58
  "values": [
59
- { "value": 50 },
60
- { "value": 75 },
61
- { "value": 100 },
62
- { "value": 200 },
63
- { "value": 300 },
64
- { "value": 400 },
65
- { "value": 500 },
66
- { "value": 600 },
67
- { "value": 700 },
68
- { "value": 800 },
69
- { "value": 900 },
70
- { "value": 1000 },
71
- { "value": 1100 },
72
- { "value": 1200 },
73
- { "value": 1300 },
74
- { "value": 1400 },
75
- { "value": 1500 }
59
+ {
60
+ "value": 50
61
+ },
62
+ {
63
+ "value": 75
64
+ },
65
+ {
66
+ "value": 100
67
+ },
68
+ {
69
+ "value": 200
70
+ },
71
+ {
72
+ "value": 300
73
+ },
74
+ {
75
+ "value": 400
76
+ },
77
+ {
78
+ "value": 500
79
+ },
80
+ {
81
+ "value": 600
82
+ },
83
+ {
84
+ "value": 700
85
+ },
86
+ {
87
+ "value": 800
88
+ },
89
+ {
90
+ "value": 900
91
+ },
92
+ {
93
+ "value": 1000
94
+ },
95
+ {
96
+ "value": 1100
97
+ },
98
+ {
99
+ "value": 1200
100
+ },
101
+ {
102
+ "value": 1300
103
+ },
104
+ {
105
+ "value": 1400
106
+ },
107
+ {
108
+ "value": 1500
109
+ }
76
110
  ]
77
111
  },
78
112
  "image": {
79
113
  "type": "string",
80
114
  "default": "user image",
81
115
  "values": [
82
- { "value": "user image" },
83
- { "value": "gradient image" },
84
- { "value": "gradient" },
85
- { "value": "guest image" },
86
- { "value": "initials" }
116
+ {
117
+ "value": "user image"
118
+ },
119
+ {
120
+ "value": "gradient image"
121
+ },
122
+ {
123
+ "value": "gradient"
124
+ },
125
+ {
126
+ "value": "guest image"
127
+ },
128
+ {
129
+ "value": "initials"
130
+ }
87
131
  ]
88
132
  },
89
- "isDisabled": { "type": "boolean", "default": false },
90
- "showStroke": { "type": "boolean", "default": false }
133
+ "isDisabled": {
134
+ "type": "boolean",
135
+ "default": false
136
+ },
137
+ "showStroke": {
138
+ "type": "boolean",
139
+ "default": false
140
+ }
91
141
  },
92
142
  "states": [
93
- { "name": "down", "trigger": "interaction" },
94
- { "name": "keyboard-focus", "trigger": "interaction" },
95
- { "name": "disabled", "trigger": "prop" }
96
- ],
97
- "lifecycle": { "introduced": "1.0.0-draft" },
98
- "tokenBindings": [
99
- { "token": "avatar-size-50", "context": "Size" },
100
- { "token": "avatar-size-75", "context": "Size" },
101
- { "token": "avatar-size-100", "context": "Size" },
102
- { "token": "avatar-size-200", "context": "Size" },
103
- { "token": "avatar-size-300", "context": "Size" },
104
- { "token": "avatar-size-400", "context": "Size" },
105
- { "token": "avatar-size-500", "context": "Size" },
106
- { "token": "avatar-size-600", "context": "Size" },
107
- { "token": "avatar-size-700", "context": "Size" },
108
- { "token": "avatar-size-800", "context": "Size" },
109
- { "token": "avatar-size-900", "context": "Size" },
110
- { "token": "avatar-size-1000", "context": "Size" },
111
- { "token": "avatar-size-1100", "context": "Size" },
112
- { "token": "avatar-size-1200", "context": "Size" },
113
- { "token": "avatar-size-1300", "context": "Size" },
114
- { "token": "avatar-size-1400", "context": "Size" },
115
- { "token": "avatar-size-1500", "context": "Size" },
116
- { "token": "avatar-border-width", "context": "Border" },
117
- { "token": "focus-indicator-thickness", "context": "Focus indicator" },
118
- { "token": "focus-indicator-gap", "context": "Focus indicator" },
119
- { "token": "gradient-stop-1-avatar", "context": "0% " },
120
- { "token": "gradient-stop-2-avatar", "context": "66% " },
121
- { "token": "gradient-stop-3-avatar", "context": "100% " },
122
- { "token": "default-font-family", "context": "Text (List view item)" },
123
- { "token": "extra-bold-font-weight", "context": "Text (List view item)" },
124
- { "token": "default-font-style", "context": "Text (List view item)" },
125
- { "token": "font-size-100", "context": "Text (List view item)" },
126
- { "token": "line-height-100", "context": "Text (List view item)" }
143
+ {
144
+ "name": "down",
145
+ "trigger": "interaction"
146
+ },
147
+ {
148
+ "name": "keyboard-focus",
149
+ "trigger": "interaction"
150
+ },
151
+ {
152
+ "name": "disabled",
153
+ "trigger": "prop"
154
+ }
127
155
  ],
128
- "accessibility": { "focusable": false }
156
+ "lifecycle": {
157
+ "introduced": "1.0.0-draft"
158
+ },
159
+ "accessibility": {
160
+ "focusable": false
161
+ }
129
162
  }