@adobe/design-data-spec 0.4.0 → 0.6.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.
- package/components/accordion.json +431 -1
- package/components/action-bar.json +183 -1
- package/components/action-button.json +407 -1
- package/components/action-group.json +15 -1
- package/components/alert-banner.json +79 -1
- package/components/alert-dialog.json +107 -1
- package/components/avatar-group.json +115 -1
- package/components/avatar.json +131 -1
- package/components/badge.json +430 -1
- package/components/breadcrumbs.json +175 -1
- package/components/button-group.json +11 -1
- package/components/button.json +466 -8
- package/components/cards.json +483 -1
- package/components/checkbox-group.json +2 -1
- package/components/checkbox.json +243 -1
- package/components/close-button.json +123 -1
- package/components/coach-indicator.json +39 -1
- package/components/coach-mark.json +103 -1
- package/components/color-area.json +39 -1
- package/components/color-handle.json +51 -1
- package/components/color-loupe.json +55 -1
- package/components/color-slider.json +43 -1
- package/components/color-wheel.json +35 -1
- package/components/combo-box.json +387 -1
- package/components/contextual-help.json +83 -1
- package/components/date-picker.json +279 -1
- package/components/divider.json +47 -1
- package/components/drop-zone.json +167 -1
- package/components/field-label.json +147 -1
- package/components/help-text.json +147 -1
- package/components/illustrated-message.json +107 -1
- package/components/in-field-progress-circle.json +55 -1
- package/components/in-line-alert.json +155 -1
- package/components/link.json +91 -1
- package/components/list-view.json +263 -1
- package/components/menu.json +467 -1
- package/components/meter.json +115 -1
- package/components/number-field.json +399 -1
- package/components/opacity-checkerboard.json +19 -1
- package/components/picker.json +431 -1
- package/components/popover.json +51 -1
- package/components/progress-bar.json +115 -1
- package/components/progress-circle.json +55 -1
- package/components/radio-button.json +243 -1
- package/components/radio-group.json +2 -1
- package/components/rating.json +99 -1
- package/components/search-field.json +235 -1
- package/components/segmented-control.json +135 -1
- package/components/select-box.json +187 -1
- package/components/side-navigation.json +223 -1
- package/components/slider.json +279 -1
- package/components/standard-dialog.json +99 -1
- package/components/status-light.json +219 -1
- package/components/steplist.json +215 -1
- package/components/swatch-group.json +15 -1
- package/components/swatch.json +136 -2
- package/components/switch.json +251 -1
- package/components/table.json +271 -1
- package/components/tabs.json +151 -1
- package/components/tag-field.json +151 -1
- package/components/tag-group.json +19 -1
- package/components/tag.json +323 -1
- package/components/takeover-dialog.json +35 -1
- package/components/text-area.json +383 -1
- package/components/text-field.json +411 -1
- package/components/thumbnail.json +83 -1
- package/components/title.json +39 -0
- package/components/toast.json +99 -1
- package/components/tooltip.json +87 -1
- package/components/tree-view.json +279 -1
- package/conformance/invalid/SPEC-027/dataset.json +25 -0
- package/conformance/invalid/SPEC-027/expected-errors.json +10 -0
- package/conformance/valid/token-bindings.json +27 -0
- package/package.json +1 -1
- package/rules/rules.yaml +9 -0
- package/schemas/component.schema.json +22 -0
- package/schemas/token.schema.json +27 -0
- package/spec/agent-surface.md +39 -9
- package/spec/component-format.md +41 -16
- package/spec/token-format.md +18 -0
- package/src/validate.js +27 -3
package/components/tooltip.json
CHANGED
|
@@ -50,5 +50,91 @@
|
|
|
50
50
|
},
|
|
51
51
|
"lifecycle": {
|
|
52
52
|
"introduced": "1.0.0-draft"
|
|
53
|
-
}
|
|
53
|
+
},
|
|
54
|
+
"tokenBindings": [
|
|
55
|
+
{
|
|
56
|
+
"token": "component-height-75",
|
|
57
|
+
"context": "Minimum height"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"token": "tooltip-maximum-width",
|
|
61
|
+
"context": "Maximum width"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"token": "corner-radius-500",
|
|
65
|
+
"context": "Rounding"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"token": "tooltip-tip-width",
|
|
69
|
+
"context": "Tip"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"token": "tooltip-tip-height",
|
|
73
|
+
"context": "Tip"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"token": "tooltip-tip-corner-radius",
|
|
77
|
+
"context": "Rounding (tip)"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"token": "component-edge-to-text-75",
|
|
81
|
+
"context": "Spacing (start/end edges)"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"token": "component-top-to-text-75",
|
|
85
|
+
"context": "Spacing (top/bottom edge to text)"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"token": "component-bottom-to-text-75",
|
|
89
|
+
"context": "Spacing (top/bottom edge to text)"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"token": "spacing-75",
|
|
93
|
+
"context": "Spacing (tip to source)"
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"token": "spacing-100",
|
|
97
|
+
"context": "Container padding"
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"token": "default-font-family",
|
|
101
|
+
"context": "Label"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"token": "regular-font-weight",
|
|
105
|
+
"context": "Label"
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"token": "default-font-style",
|
|
109
|
+
"context": "Label"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"token": "font-size-75",
|
|
113
|
+
"context": "Label"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"token": "line-height-100",
|
|
117
|
+
"context": "Label"
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"token": "cjk-line-height-100",
|
|
121
|
+
"context": "Label"
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"token": "gray-25",
|
|
125
|
+
"context": "Text"
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"token": "neutral-background-color-default",
|
|
129
|
+
"context": "Background (Neutral)"
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"token": "informative-background-color-default",
|
|
133
|
+
"context": "Background (Informative)"
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"token": "negative-background-color-default",
|
|
137
|
+
"context": "Background (Negative)"
|
|
138
|
+
}
|
|
139
|
+
]
|
|
54
140
|
}
|
|
@@ -59,5 +59,283 @@
|
|
|
59
59
|
],
|
|
60
60
|
"lifecycle": {
|
|
61
61
|
"introduced": "1.0.0-draft"
|
|
62
|
-
}
|
|
62
|
+
},
|
|
63
|
+
"tokenBindings": [
|
|
64
|
+
{
|
|
65
|
+
"token": "workflow-icon-size-100",
|
|
66
|
+
"context": "Icon"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"token": "tree-view-minimum-height",
|
|
70
|
+
"context": "Height (minimum)"
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"token": "tree-view-minimum-width",
|
|
74
|
+
"context": "Width (minimum)"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"token": "corner-radius-medium-default",
|
|
78
|
+
"context": "Rounding"
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"token": "tree-view-disclosure-indicator-height",
|
|
82
|
+
"context": "Spacing (disclosure indicator)"
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"token": "tree-view-disclosure-indicator-width",
|
|
86
|
+
"context": "Spacing (disclosure indicator)"
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"token": "tree-view-edge-to-checkbox",
|
|
90
|
+
"context": "Spacing (edge to checkbox, checkbox)"
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"token": "tree-view-edge-to-drag-handle",
|
|
94
|
+
"context": "Spacing (edge to drag handle, drag handle)"
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"token": "tree-view-drag-handle-to-checkbox",
|
|
98
|
+
"context": "Spacing (drag handle to checkbox, drag handle + checkbox)"
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
"token": "text-to-visual-100",
|
|
102
|
+
"context": "Spacing (context area to label)"
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"token": "component-edge-to-text-100",
|
|
106
|
+
"context": "Spacing (label to edge)"
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"token": "tree-view-label-to-action-area",
|
|
110
|
+
"context": "Spacing (label to action area)"
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"token": "tree-view-end-edge-to-action-area",
|
|
114
|
+
"context": "Spacing (edge to action area, action button 1 + action button 2)"
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"token": "tree-view-level-increment",
|
|
118
|
+
"context": "Spacing (indentation)"
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"token": "vertical-align-items",
|
|
122
|
+
"context": "Spacing (vertical)"
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
"token": "stack-item-minimum-padding-vertical",
|
|
126
|
+
"context": "Spacing (vertical)"
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
"token": "border-width-100",
|
|
130
|
+
"context": "Border width (selected, highlight)"
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"token": "focus-indicator-thickness",
|
|
134
|
+
"context": "Focus "
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"token": "focus-indicator-gap",
|
|
138
|
+
"context": "Focus (drag handle)"
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"token": "component-height-200",
|
|
142
|
+
"context": "Height"
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
"token": "stack-item-minimum-vertical-padding",
|
|
146
|
+
"context": "Spacing (vertical)"
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"token": "stack-item-item-to-item",
|
|
150
|
+
"context": "Spacing (vertically, between tree view items)"
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"token": "tree-view-item-to-header",
|
|
154
|
+
"context": "Spacing (vertically, between tree view item and tree view header)"
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
"token": "tree-view-header-to-item",
|
|
158
|
+
"context": "Spacing (vertically, between tree view item and tree view header)"
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
"token": "stack-item-header-to-item",
|
|
162
|
+
"context": "Spacing (vertically, between tree view item and tree view header)"
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
"token": "stack-item-background-color-hover",
|
|
166
|
+
"context": "Background (not selected)"
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
"token": "stack-item-background-color-down",
|
|
170
|
+
"context": "Background (not selected)"
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
"token": "stack-item-background-color-key-focus",
|
|
174
|
+
"context": "Background (not selected)"
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
"token": "tree-view-selected-row-background-default",
|
|
178
|
+
"context": "Background (selected, checkbox)"
|
|
179
|
+
},
|
|
180
|
+
{
|
|
181
|
+
"token": "tree-view-selected-row-background-hover",
|
|
182
|
+
"context": "Background (selected, checkbox)"
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
"token": "stack-item-selected-background-color-default",
|
|
186
|
+
"context": "Background (selected, checkbox)"
|
|
187
|
+
},
|
|
188
|
+
{
|
|
189
|
+
"token": "stack-item-selected-background-color-hover",
|
|
190
|
+
"context": "Background (selected, checkbox)"
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
"token": "stack-item-selected-background-color-down",
|
|
194
|
+
"context": "Background (selected, checkbox)"
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
"token": "stack-item-selected-background-color-key-focus",
|
|
198
|
+
"context": "Background (selected, checkbox)"
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
"token": "tree-view-selected-row-background-color-emphasized",
|
|
202
|
+
"context": "Background (selected, emphasized)"
|
|
203
|
+
},
|
|
204
|
+
{
|
|
205
|
+
"token": "tree-view-selected-row-background-opacity-emphasized-hover",
|
|
206
|
+
"context": "Background (selected, emphasized)"
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
"token": "stack-item-selected-background-color-highlight",
|
|
210
|
+
"context": "Background (selected + highlight)"
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
"token": "stack-item-selected-background-opacity-highlight-hover",
|
|
214
|
+
"context": "Background (selected + highlight)"
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
"token": "accent-content-color-selected",
|
|
218
|
+
"context": "Border (selected + highlight)"
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
"token": "neutral-subdued-content-color-default",
|
|
222
|
+
"context": "Label and icon (non-selected)"
|
|
223
|
+
},
|
|
224
|
+
{
|
|
225
|
+
"token": "neutral-subdued-content-color-hover",
|
|
226
|
+
"context": "Label and icon (non-selected)"
|
|
227
|
+
},
|
|
228
|
+
{
|
|
229
|
+
"token": "neutral-subdued-content-color-down",
|
|
230
|
+
"context": "Label and icon (non-selected)"
|
|
231
|
+
},
|
|
232
|
+
{
|
|
233
|
+
"token": "neutral-subdued-content-color-key-focus",
|
|
234
|
+
"context": "Label and icon (non-selected)"
|
|
235
|
+
},
|
|
236
|
+
{
|
|
237
|
+
"token": "neutral-content-color-default",
|
|
238
|
+
"context": "Label and icon (selected, checkbox and highlight)"
|
|
239
|
+
},
|
|
240
|
+
{
|
|
241
|
+
"token": "neutral-content-color-hover",
|
|
242
|
+
"context": "Label and icon (selected, checkbox and highlight)"
|
|
243
|
+
},
|
|
244
|
+
{
|
|
245
|
+
"token": "neutral-content-color-down",
|
|
246
|
+
"context": "Label and icon (selected, checkbox and highlight)"
|
|
247
|
+
},
|
|
248
|
+
{
|
|
249
|
+
"token": "neutral-content-color-key-focus",
|
|
250
|
+
"context": "Label and icon (selected, checkbox and highlight)"
|
|
251
|
+
},
|
|
252
|
+
{
|
|
253
|
+
"token": "disabled-content-color",
|
|
254
|
+
"context": "Label and icon (disabled)"
|
|
255
|
+
},
|
|
256
|
+
{
|
|
257
|
+
"token": "focus-indicator-color",
|
|
258
|
+
"context": "Focus indicator"
|
|
259
|
+
},
|
|
260
|
+
{
|
|
261
|
+
"token": "title-content-color",
|
|
262
|
+
"context": "Label and icon"
|
|
263
|
+
},
|
|
264
|
+
{
|
|
265
|
+
"token": "default-font-family",
|
|
266
|
+
"context": "Text (tree view item)"
|
|
267
|
+
},
|
|
268
|
+
{
|
|
269
|
+
"token": "regular-font-weight",
|
|
270
|
+
"context": "Text (tree view item)"
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
"token": "default-font-style",
|
|
274
|
+
"context": "Text (tree view item)"
|
|
275
|
+
},
|
|
276
|
+
{
|
|
277
|
+
"token": "font-size-100",
|
|
278
|
+
"context": "Text (tree view item)"
|
|
279
|
+
},
|
|
280
|
+
{
|
|
281
|
+
"token": "line-height-100",
|
|
282
|
+
"context": "Text (tree view item)"
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
"token": "cjk-line-height-100",
|
|
286
|
+
"context": "Text (tree view item)"
|
|
287
|
+
},
|
|
288
|
+
{
|
|
289
|
+
"token": "bold-font-weight",
|
|
290
|
+
"context": "Text (tree view title)"
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
"token": "thumbnail-size-75",
|
|
294
|
+
"context": "Size"
|
|
295
|
+
},
|
|
296
|
+
{
|
|
297
|
+
"token": "thumbnail-size-300",
|
|
298
|
+
"context": "Size"
|
|
299
|
+
},
|
|
300
|
+
{
|
|
301
|
+
"token": "thumbnail-size-1000",
|
|
302
|
+
"context": "Size"
|
|
303
|
+
},
|
|
304
|
+
{
|
|
305
|
+
"token": "thumbnail-corner-radius",
|
|
306
|
+
"context": "Rounding (default)"
|
|
307
|
+
},
|
|
308
|
+
{
|
|
309
|
+
"token": "spacing-75",
|
|
310
|
+
"context": "Opacity checkerboard (layer)"
|
|
311
|
+
},
|
|
312
|
+
{
|
|
313
|
+
"token": "corner-radius-0",
|
|
314
|
+
"context": "Rounding (layer)"
|
|
315
|
+
},
|
|
316
|
+
{
|
|
317
|
+
"token": "thumbnail-border-color",
|
|
318
|
+
"context": "Border (default)"
|
|
319
|
+
},
|
|
320
|
+
{
|
|
321
|
+
"token": "thumbnail-border-opacity",
|
|
322
|
+
"context": "Border (default)"
|
|
323
|
+
},
|
|
324
|
+
{
|
|
325
|
+
"token": "gray-500",
|
|
326
|
+
"context": "Border (layer)"
|
|
327
|
+
},
|
|
328
|
+
{
|
|
329
|
+
"token": "opacity-checkerboard-square-light",
|
|
330
|
+
"context": "Checkerboard colors "
|
|
331
|
+
},
|
|
332
|
+
{
|
|
333
|
+
"token": "opacity-checkerboard-square-dark",
|
|
334
|
+
"context": "Checkerboard colors "
|
|
335
|
+
},
|
|
336
|
+
{
|
|
337
|
+
"token": "thumbnail-opacity-disabled",
|
|
338
|
+
"context": "Disabled"
|
|
339
|
+
}
|
|
340
|
+
]
|
|
63
341
|
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"tokens": [
|
|
3
|
+
{
|
|
4
|
+
"name": { "property": "background-color" },
|
|
5
|
+
"value": "#0265dc"
|
|
6
|
+
}
|
|
7
|
+
],
|
|
8
|
+
"components": [
|
|
9
|
+
{
|
|
10
|
+
"$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/button.json",
|
|
11
|
+
"name": "button",
|
|
12
|
+
"displayName": "Button",
|
|
13
|
+
"meta": {
|
|
14
|
+
"category": "actions",
|
|
15
|
+
"documentationUrl": "https://spectrum.adobe.com/page/button/"
|
|
16
|
+
},
|
|
17
|
+
"tokenBindings": [
|
|
18
|
+
{
|
|
19
|
+
"token": "nonexistent-token-that-does-not-exist",
|
|
20
|
+
"context": "Background"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
]
|
|
25
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{
|
|
2
|
+
"tokens": [
|
|
3
|
+
{
|
|
4
|
+
"name": "button-background-color-accent",
|
|
5
|
+
"value": "#0265dc"
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
"name": "component-height-100",
|
|
9
|
+
"value": "32px"
|
|
10
|
+
}
|
|
11
|
+
],
|
|
12
|
+
"components": [
|
|
13
|
+
{
|
|
14
|
+
"$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/button.json",
|
|
15
|
+
"name": "button",
|
|
16
|
+
"displayName": "Button",
|
|
17
|
+
"meta": {
|
|
18
|
+
"category": "actions",
|
|
19
|
+
"documentationUrl": "https://spectrum.adobe.com/page/button/"
|
|
20
|
+
},
|
|
21
|
+
"tokenBindings": [
|
|
22
|
+
{ "token": "button-background-color-accent", "context": "Background" },
|
|
23
|
+
{ "token": "component-height-100", "context": "Sizing (height)" }
|
|
24
|
+
]
|
|
25
|
+
}
|
|
26
|
+
]
|
|
27
|
+
}
|
package/package.json
CHANGED
package/rules/rules.yaml
CHANGED
|
@@ -235,3 +235,12 @@ rules:
|
|
|
235
235
|
message: "Component '{component}' has custom state '{state}' with no description"
|
|
236
236
|
spec_ref: spec/state-model.md#canonical-state-vocabulary
|
|
237
237
|
introduced_in: "1.0.0-draft"
|
|
238
|
+
|
|
239
|
+
- id: SPEC-027
|
|
240
|
+
name: token-binding-token-exists
|
|
241
|
+
severity: error
|
|
242
|
+
category: reference-integrity
|
|
243
|
+
assert: Each tokenBindings[].token value in a component declaration MUST match the name of a declared token in the dataset.
|
|
244
|
+
message: "Component '{component}' tokenBindings references unknown token '{token}'"
|
|
245
|
+
spec_ref: spec/component-format.md#token-bindings
|
|
246
|
+
introduced_in: "1.0.0-draft"
|
|
@@ -63,6 +63,11 @@
|
|
|
63
63
|
},
|
|
64
64
|
"lifecycle": {
|
|
65
65
|
"$ref": "#/$defs/lifecycle"
|
|
66
|
+
},
|
|
67
|
+
"tokenBindings": {
|
|
68
|
+
"type": "array",
|
|
69
|
+
"items": { "$ref": "#/$defs/tokenBinding" },
|
|
70
|
+
"description": "Tokens this component uses, including foundation/structure tokens not scoped to the component in their name-object. See spec/component-format.md#token-bindings (Phase 6.7)."
|
|
66
71
|
}
|
|
67
72
|
},
|
|
68
73
|
"additionalProperties": false,
|
|
@@ -233,6 +238,23 @@
|
|
|
233
238
|
},
|
|
234
239
|
"additionalProperties": false
|
|
235
240
|
},
|
|
241
|
+
"tokenBinding": {
|
|
242
|
+
"type": "object",
|
|
243
|
+
"required": ["token"],
|
|
244
|
+
"description": "A single token usage binding on a component declaration.",
|
|
245
|
+
"properties": {
|
|
246
|
+
"token": {
|
|
247
|
+
"type": "string",
|
|
248
|
+
"minLength": 1,
|
|
249
|
+
"description": "Token name string. MUST resolve to a known token in the dataset (rule SPEC-027)."
|
|
250
|
+
},
|
|
251
|
+
"context": {
|
|
252
|
+
"type": "string",
|
|
253
|
+
"description": "Human-readable label for how this token is used in the component (maps to Figma Token Group label)."
|
|
254
|
+
}
|
|
255
|
+
},
|
|
256
|
+
"additionalProperties": false
|
|
257
|
+
},
|
|
236
258
|
"lifecycle": {
|
|
237
259
|
"type": "object",
|
|
238
260
|
"description": "Version lifecycle metadata, mirroring the token lifecycle pattern.",
|
|
@@ -171,6 +171,11 @@
|
|
|
171
171
|
"description": {
|
|
172
172
|
"type": "string",
|
|
173
173
|
"description": "Plain text describing the token's purpose (aligns with DTCG $description)."
|
|
174
|
+
},
|
|
175
|
+
"componentBindings": {
|
|
176
|
+
"type": "array",
|
|
177
|
+
"items": { "$ref": "#/$defs/componentBinding" },
|
|
178
|
+
"description": "Reverse index: components that declare this token in their tokenBindings. Optional and derivable from component files."
|
|
174
179
|
}
|
|
175
180
|
},
|
|
176
181
|
"additionalProperties": false
|
|
@@ -240,6 +245,28 @@
|
|
|
240
245
|
"description": {
|
|
241
246
|
"type": "string",
|
|
242
247
|
"description": "Plain text describing the token's purpose (aligns with DTCG $description)."
|
|
248
|
+
},
|
|
249
|
+
"componentBindings": {
|
|
250
|
+
"type": "array",
|
|
251
|
+
"items": { "$ref": "#/$defs/componentBinding" },
|
|
252
|
+
"description": "Reverse index: components that declare this token in their tokenBindings. Optional and derivable from component files."
|
|
253
|
+
}
|
|
254
|
+
},
|
|
255
|
+
"additionalProperties": false
|
|
256
|
+
},
|
|
257
|
+
"componentBinding": {
|
|
258
|
+
"type": "object",
|
|
259
|
+
"required": ["component"],
|
|
260
|
+
"description": "A single component usage binding on a token — the reverse of tokenBindings on the component.",
|
|
261
|
+
"properties": {
|
|
262
|
+
"component": {
|
|
263
|
+
"type": "string",
|
|
264
|
+
"minLength": 1,
|
|
265
|
+
"description": "Component name (kebab-case). MUST match a declared component name."
|
|
266
|
+
},
|
|
267
|
+
"context": {
|
|
268
|
+
"type": "string",
|
|
269
|
+
"description": "Human-readable label for how this token is used in the component."
|
|
243
270
|
}
|
|
244
271
|
},
|
|
245
272
|
"additionalProperties": false
|
package/spec/agent-surface.md
CHANGED
|
@@ -25,15 +25,15 @@ The surface targets three consumer shapes:
|
|
|
25
25
|
|
|
26
26
|
**NORMATIVE:** A conforming implementation MUST expose the following operations. Transport-specific naming (CLI subcommand vs MCP tool name vs skill action) MAY differ; the semantics MUST NOT.
|
|
27
27
|
|
|
28
|
-
| Operation | Reads | Returns
|
|
29
|
-
| -------------------- | ------------------------------------------------------ |
|
|
30
|
-
| `resolve_token` | property + dimension context | winning token (literal or resolved alias) with file/UUID/specificity
|
|
31
|
-
| `query_tokens` | filter expression (see [Query](query.md)) | matching token list
|
|
32
|
-
| `validate_usage` | candidate token document or fragment | `ValidationReport` (Layer 1 + Layer 2 diagnostics)
|
|
33
|
-
| `describe_component` | component identifier | component contract (anatomy, options, states); see [#832](https://github.com/adobe/spectrum-design-data/discussions/832) | (Phase 6 contract) |
|
|
34
|
-
| `suggest_token` | natural-language intent + optional property hint | ranked candidate tokens with rationale (RECOMMENDED, not NORMATIVE in v1)
|
|
35
|
-
| `get_guidance` | token UUID, component identifier, or anatomy reference | attached document blocks (Phase 9 / RFC-D); falls back to empty list pre-RFC-D
|
|
36
|
-
| `diff_datasets` | two dataset roots | `DiffReport` per [Diff](diff.md)
|
|
28
|
+
| Operation | Reads | Returns | Backed by |
|
|
29
|
+
| -------------------- | ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
|
|
30
|
+
| `resolve_token` | property + dimension context | winning token (literal or resolved alias) with file/UUID/specificity | `cascade::resolve` |
|
|
31
|
+
| `query_tokens` | filter expression (see [Query](query.md)) | matching token list | `query::filter` |
|
|
32
|
+
| `validate_usage` | candidate token document or fragment | `ValidationReport` (Layer 1 + Layer 2 diagnostics) | `validate::validate_*` |
|
|
33
|
+
| `describe_component` | component identifier | component contract (anatomy, options, states, tokenBindings); see [#832](https://github.com/adobe/spectrum-design-data/discussions/832) and [Phase 6.7](#describe_component-return-shape) | (Phase 6 contract) |
|
|
34
|
+
| `suggest_token` | natural-language intent + optional property hint | ranked candidate tokens with rationale (RECOMMENDED, not NORMATIVE in v1) | registry + query |
|
|
35
|
+
| `get_guidance` | token UUID, component identifier, or anatomy reference | attached document blocks (Phase 9 / RFC-D); falls back to empty list pre-RFC-D | document blocks |
|
|
36
|
+
| `diff_datasets` | two dataset roots | `DiffReport` per [Diff](diff.md) | `diff::semantic_diff` |
|
|
37
37
|
|
|
38
38
|
**NORMATIVE:** `validate_usage`, `resolve_token`, `query_tokens`, and `diff_datasets` MUST be implemented in a conforming agent surface. `suggest_token` and `get_guidance` are RECOMMENDED. `describe_component` becomes NORMATIVE once [#832](https://github.com/adobe/spectrum-design-data/discussions/832) reaches implemented status.
|
|
39
39
|
|
|
@@ -82,6 +82,36 @@ A reference Claude Code Agent Skill is RECOMMENDED at `tools/design-data-agent-m
|
|
|
82
82
|
|
|
83
83
|
**RECOMMENDED:** The skill SHOULD shell out to the CLI rather than embedding tool calls, so its description (the only persistent context cost) stays small and the heavy lifting happens out-of-band.
|
|
84
84
|
|
|
85
|
+
## `describe_component` return shape
|
|
86
|
+
|
|
87
|
+
The `describe_component` tool returns the component declaration object as stored in the dataset, extended with `tokenBindings` when Phase 6.7 data is present. A conforming implementation MUST include `tokenBindings` in the response when the component declaration contains that field.
|
|
88
|
+
|
|
89
|
+
```json
|
|
90
|
+
{
|
|
91
|
+
"name": "button",
|
|
92
|
+
"displayName": "Button",
|
|
93
|
+
"meta": { "category": "actions", "documentationUrl": "https://spectrum.adobe.com/page/button/" },
|
|
94
|
+
"options": {
|
|
95
|
+
"variant": { "type": "string", "enum": ["accent", "negative", "primary", "secondary"], "default": "accent" }
|
|
96
|
+
},
|
|
97
|
+
"anatomy": [
|
|
98
|
+
{ "name": "icon", "description": "Leading icon." },
|
|
99
|
+
{ "name": "label", "description": "Button text.", "required": true }
|
|
100
|
+
],
|
|
101
|
+
"states": [
|
|
102
|
+
{ "name": "hover", "trigger": "interaction", "precedence": 50 },
|
|
103
|
+
{ "name": "focus", "trigger": "interaction", "precedence": 60, "layered": true },
|
|
104
|
+
{ "name": "disabled", "trigger": "prop", "precedence": 100 }
|
|
105
|
+
],
|
|
106
|
+
"tokenBindings": [
|
|
107
|
+
{ "token": "component-height-100", "context": "Minimum height" },
|
|
108
|
+
{ "token": "corner-radius-full", "context": "Rounding" }
|
|
109
|
+
]
|
|
110
|
+
}
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
`tokenBindings` enables agents to retrieve a complete picture of a component's token usage — including shared structure and foundation tokens that do not carry the component name in their name-object — without issuing a second `query_tokens` call.
|
|
114
|
+
|
|
85
115
|
## Conformance
|
|
86
116
|
|
|
87
117
|
**NORMATIVE:** An agent surface implementation that claims conformance MUST:
|