@adobe/spectrum-component-api-schemas 0.0.0-schema-20240613154750
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/CHANGELOG.md +7 -0
- package/LICENSE +201 -0
- package/dist/v1/schemas/component.json +29 -0
- package/dist/v1/schemas/components/action-bar.json +18 -0
- package/dist/v1/schemas/components/action-button.json +62 -0
- package/dist/v1/schemas/components/action-group.json +69 -0
- package/dist/v1/schemas/components/alert-banner.json +29 -0
- package/dist/v1/schemas/components/alert-dialog.json +42 -0
- package/dist/v1/schemas/components/avatar.json +30 -0
- package/dist/v1/schemas/components/badge.json +50 -0
- package/dist/v1/schemas/components/body.json +25 -0
- package/dist/v1/schemas/components/bottom-navigation-android.json +37 -0
- package/dist/v1/schemas/components/breadcrumbs.json +18 -0
- package/dist/v1/schemas/components/button-group.json +28 -0
- package/dist/v1/schemas/components/button.json +60 -0
- package/dist/v1/schemas/components/checkbox-group.json +53 -0
- package/dist/v1/schemas/components/checkbox.json +52 -0
- package/dist/v1/schemas/components/close-button.json +35 -0
- package/dist/v1/schemas/components/code.json +21 -0
- package/dist/v1/schemas/components/color-area.json +64 -0
- package/dist/v1/schemas/components/color-loupe.json +21 -0
- package/dist/v1/schemas/components/color-slider.json +52 -0
- package/dist/v1/schemas/components/color-wheel.json +47 -0
- package/dist/v1/schemas/components/combo-box.json +84 -0
- package/dist/v1/schemas/components/contextual-help.json +64 -0
- package/dist/v1/schemas/components/detail.json +26 -0
- package/dist/v1/schemas/components/divider.json +23 -0
- package/dist/v1/schemas/components/field-label.json +39 -0
- package/dist/v1/schemas/components/heading.json +29 -0
- package/dist/v1/schemas/components/help-text.json +35 -0
- package/dist/v1/schemas/components/in-line-alert.json +25 -0
- package/dist/v1/schemas/components/link.json +32 -0
- package/dist/v1/schemas/components/menu.json +65 -0
- package/dist/v1/schemas/components/meter.json +37 -0
- package/dist/v1/schemas/components/picker.json +85 -0
- package/dist/v1/schemas/components/popover.json +65 -0
- package/dist/v1/schemas/components/progress-bar.json +50 -0
- package/dist/v1/schemas/components/progress-circle.json +41 -0
- package/dist/v1/schemas/components/radio-group.json +62 -0
- package/dist/v1/schemas/components/rating.json +31 -0
- package/dist/v1/schemas/components/scroll-zoom-bar.json +44 -0
- package/dist/v1/schemas/components/side-navigation.json +18 -0
- package/dist/v1/schemas/components/slider.json +74 -0
- package/dist/v1/schemas/components/status-light.json +44 -0
- package/dist/v1/schemas/components/swatch-group.json +38 -0
- package/dist/v1/schemas/components/swatch.json +45 -0
- package/dist/v1/schemas/components/switch.json +42 -0
- package/dist/v1/schemas/components/tab-bar-ios.json +37 -0
- package/dist/v1/schemas/components/tabs.json +32 -0
- package/dist/v1/schemas/components/tag.json +41 -0
- package/dist/v1/schemas/components/text-area.json +98 -0
- package/dist/v1/schemas/components/text-field.json +86 -0
- package/dist/v1/schemas/components/toast.json +29 -0
- package/dist/v1/schemas/components/tooltip.json +50 -0
- package/dist/v1/schemas/components/tray.json +17 -0
- package/dist/v1/schemas/components/tree-view.json +50 -0
- package/dist/v1/schemas/types/component-size.json +8 -0
- package/dist/v1/schemas/types/hex-color.json +8 -0
- package/dist/v1/schemas/types/typography-classification.json +9 -0
- package/dist/v1/schemas/types/typography-script.json +9 -0
- package/dist/v1/schemas/types/workflow-icon.json +901 -0
- package/index.js +52 -0
- package/moon.yml +59 -0
- package/package.json +26 -0
- package/schemas/component.json +29 -0
- package/schemas/components/action-bar.json +18 -0
- package/schemas/components/action-button.json +62 -0
- package/schemas/components/action-group.json +69 -0
- package/schemas/components/alert-banner.json +29 -0
- package/schemas/components/alert-dialog.json +42 -0
- package/schemas/components/avatar.json +30 -0
- package/schemas/components/badge.json +50 -0
- package/schemas/components/body.json +25 -0
- package/schemas/components/bottom-navigation-android.json +37 -0
- package/schemas/components/breadcrumbs.json +18 -0
- package/schemas/components/button-group.json +28 -0
- package/schemas/components/button.json +60 -0
- package/schemas/components/checkbox-group.json +53 -0
- package/schemas/components/checkbox.json +52 -0
- package/schemas/components/close-button.json +35 -0
- package/schemas/components/code.json +21 -0
- package/schemas/components/color-area.json +64 -0
- package/schemas/components/color-loupe.json +21 -0
- package/schemas/components/color-slider.json +52 -0
- package/schemas/components/color-wheel.json +47 -0
- package/schemas/components/combo-box.json +84 -0
- package/schemas/components/contextual-help.json +64 -0
- package/schemas/components/detail.json +26 -0
- package/schemas/components/divider.json +23 -0
- package/schemas/components/field-label.json +39 -0
- package/schemas/components/heading.json +29 -0
- package/schemas/components/help-text.json +35 -0
- package/schemas/components/in-line-alert.json +25 -0
- package/schemas/components/link.json +32 -0
- package/schemas/components/menu.json +65 -0
- package/schemas/components/meter.json +37 -0
- package/schemas/components/picker.json +85 -0
- package/schemas/components/popover.json +65 -0
- package/schemas/components/progress-bar.json +50 -0
- package/schemas/components/progress-circle.json +41 -0
- package/schemas/components/radio-group.json +62 -0
- package/schemas/components/rating.json +31 -0
- package/schemas/components/scroll-zoom-bar.json +44 -0
- package/schemas/components/side-navigation.json +18 -0
- package/schemas/components/slider.json +74 -0
- package/schemas/components/status-light.json +44 -0
- package/schemas/components/swatch-group.json +38 -0
- package/schemas/components/swatch.json +45 -0
- package/schemas/components/switch.json +42 -0
- package/schemas/components/tab-bar-ios.json +37 -0
- package/schemas/components/tabs.json +32 -0
- package/schemas/components/tag.json +41 -0
- package/schemas/components/text-area.json +98 -0
- package/schemas/components/text-field.json +86 -0
- package/schemas/components/toast.json +29 -0
- package/schemas/components/tooltip.json +50 -0
- package/schemas/components/tray.json +17 -0
- package/schemas/components/tree-view.json +50 -0
- package/schemas/types/component-size.json +8 -0
- package/schemas/types/hex-color.json +8 -0
- package/schemas/types/typography-classification.json +9 -0
- package/schemas/types/typography-script.json +9 -0
- package/schemas/types/workflow-icon.json +901 -0
- package/test/componentSchemaValidator.test.js +74 -0
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/button.json",
|
|
4
|
+
"title": "Button",
|
|
5
|
+
"description": "Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.",
|
|
6
|
+
"meta": {
|
|
7
|
+
"category": "actions",
|
|
8
|
+
"documentationUrl": "https://spectrum.adobe.com/page/button/"
|
|
9
|
+
},
|
|
10
|
+
"type": "object",
|
|
11
|
+
"properties": {
|
|
12
|
+
"label": {
|
|
13
|
+
"type": "string"
|
|
14
|
+
},
|
|
15
|
+
"hideLabel": {
|
|
16
|
+
"type": "boolean",
|
|
17
|
+
"default": false
|
|
18
|
+
},
|
|
19
|
+
"icon": {
|
|
20
|
+
"$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/workflow-icon.json",
|
|
21
|
+
"description": "Icon must be present if the label is not defined."
|
|
22
|
+
},
|
|
23
|
+
"variant": {
|
|
24
|
+
"type": "string",
|
|
25
|
+
"enum": ["accent", "negative", "primary", "secondary"],
|
|
26
|
+
"default": "accent"
|
|
27
|
+
},
|
|
28
|
+
"staticColor": {
|
|
29
|
+
"type": "string",
|
|
30
|
+
"enum": ["white", "black"]
|
|
31
|
+
},
|
|
32
|
+
"style": {
|
|
33
|
+
"type": "string",
|
|
34
|
+
"default": "fill",
|
|
35
|
+
"enum": ["fill", "outline"]
|
|
36
|
+
},
|
|
37
|
+
"size": {
|
|
38
|
+
"type": "string",
|
|
39
|
+
"enum": ["s", "m", "l", "xl"],
|
|
40
|
+
"default": "m"
|
|
41
|
+
},
|
|
42
|
+
"justified": {
|
|
43
|
+
"type": "boolean",
|
|
44
|
+
"default": false
|
|
45
|
+
},
|
|
46
|
+
"isPending": {
|
|
47
|
+
"type": "boolean",
|
|
48
|
+
"default": false
|
|
49
|
+
},
|
|
50
|
+
"isDisabled": {
|
|
51
|
+
"type": "boolean",
|
|
52
|
+
"default": false
|
|
53
|
+
},
|
|
54
|
+
"state": {
|
|
55
|
+
"type": "string",
|
|
56
|
+
"enum": ["default", "hover", "down", "keyboard focus"],
|
|
57
|
+
"default": "default"
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/checkbox-group.json",
|
|
4
|
+
"title": "Checkbox group",
|
|
5
|
+
"description": "A checkbox group is a grouping of checkboxes that are related to each other.",
|
|
6
|
+
"meta": {
|
|
7
|
+
"category": "inputs",
|
|
8
|
+
"documentationUrl": "https://spectrum.adobe.com/page/checkbox-group/"
|
|
9
|
+
},
|
|
10
|
+
"type": "object",
|
|
11
|
+
"properties": {
|
|
12
|
+
"label": {
|
|
13
|
+
"type": "string"
|
|
14
|
+
},
|
|
15
|
+
"labelPosition": {
|
|
16
|
+
"type": "string",
|
|
17
|
+
"enum": ["top", "side"],
|
|
18
|
+
"default": "top"
|
|
19
|
+
},
|
|
20
|
+
"necessityIndicator": {
|
|
21
|
+
"type": "string",
|
|
22
|
+
"enum": ["text", "icon"],
|
|
23
|
+
"default": "icon"
|
|
24
|
+
},
|
|
25
|
+
"isRequired": {
|
|
26
|
+
"type": "boolean",
|
|
27
|
+
"default": false
|
|
28
|
+
},
|
|
29
|
+
"orientation": {
|
|
30
|
+
"type": "string",
|
|
31
|
+
"enum": ["horizontal", "vertical"],
|
|
32
|
+
"default": "vertical"
|
|
33
|
+
},
|
|
34
|
+
"isError": {
|
|
35
|
+
"type": "boolean",
|
|
36
|
+
"default": false
|
|
37
|
+
},
|
|
38
|
+
"isDisabled": {
|
|
39
|
+
"type": "boolean",
|
|
40
|
+
"default": false
|
|
41
|
+
},
|
|
42
|
+
"isReadOnly": {
|
|
43
|
+
"type": "boolean",
|
|
44
|
+
"default": false
|
|
45
|
+
},
|
|
46
|
+
"description": {
|
|
47
|
+
"type": "string"
|
|
48
|
+
},
|
|
49
|
+
"errorMessage": {
|
|
50
|
+
"type": "string"
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/checkbox.json",
|
|
4
|
+
"title": "Checkbox",
|
|
5
|
+
"description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
|
|
6
|
+
"meta": {
|
|
7
|
+
"category": "inputs",
|
|
8
|
+
"documentationUrl": "https://spectrum.adobe.com/page/checkbox/"
|
|
9
|
+
},
|
|
10
|
+
"type": "object",
|
|
11
|
+
"properties": {
|
|
12
|
+
"label": {
|
|
13
|
+
"type": "string",
|
|
14
|
+
"description": "When the label is not defined, the checkbox appears as a standalone checkbox."
|
|
15
|
+
},
|
|
16
|
+
"isSelected": {
|
|
17
|
+
"type": "boolean",
|
|
18
|
+
"default": false
|
|
19
|
+
},
|
|
20
|
+
"isIndeterminate": {
|
|
21
|
+
"type": "boolean",
|
|
22
|
+
"default": false,
|
|
23
|
+
"description": "When a checkbox is indeterminate, it overrides the selection state."
|
|
24
|
+
},
|
|
25
|
+
"size": {
|
|
26
|
+
"type": "string",
|
|
27
|
+
"enum": ["s", "m", "l", "xl"],
|
|
28
|
+
"default": "m"
|
|
29
|
+
},
|
|
30
|
+
"isEmphasized": {
|
|
31
|
+
"type": "boolean",
|
|
32
|
+
"default": false
|
|
33
|
+
},
|
|
34
|
+
"isDisabled": {
|
|
35
|
+
"type": "boolean",
|
|
36
|
+
"default": false
|
|
37
|
+
},
|
|
38
|
+
"isError": {
|
|
39
|
+
"type": "boolean",
|
|
40
|
+
"default": false
|
|
41
|
+
},
|
|
42
|
+
"isReadOnly": {
|
|
43
|
+
"type": "boolean",
|
|
44
|
+
"default": false
|
|
45
|
+
},
|
|
46
|
+
"state": {
|
|
47
|
+
"type": "string",
|
|
48
|
+
"enum": ["default", "hover", "down", "keyboard focus"],
|
|
49
|
+
"default": "default"
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/close-button.json",
|
|
4
|
+
"title": "Close button",
|
|
5
|
+
"description": "The close button is used inside of other components, like a toast or an action bar, for closing or dismissing its parent component.",
|
|
6
|
+
"meta": {
|
|
7
|
+
"category": "actions",
|
|
8
|
+
"documentationUrl": "https://spectrum.adobe.com/page/close-button/"
|
|
9
|
+
},
|
|
10
|
+
"type": "object",
|
|
11
|
+
"properties": {
|
|
12
|
+
"size": {
|
|
13
|
+
"type": "string",
|
|
14
|
+
"enum": ["s", "m", "l", "xl"],
|
|
15
|
+
"default": "m"
|
|
16
|
+
},
|
|
17
|
+
"iconSize": {
|
|
18
|
+
"type": "string"
|
|
19
|
+
},
|
|
20
|
+
"staticColor": {
|
|
21
|
+
"type": "string",
|
|
22
|
+
"enum": ["white", "black"],
|
|
23
|
+
"default": null
|
|
24
|
+
},
|
|
25
|
+
"isDisabled": {
|
|
26
|
+
"type": "boolean",
|
|
27
|
+
"default": false
|
|
28
|
+
},
|
|
29
|
+
"state": {
|
|
30
|
+
"type": "string",
|
|
31
|
+
"enum": ["default", "hover", "down", "keyboard focus"],
|
|
32
|
+
"default": "default"
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/code.json",
|
|
4
|
+
"title": "Code",
|
|
5
|
+
"description": "Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text.",
|
|
6
|
+
"meta": {
|
|
7
|
+
"category": "typography",
|
|
8
|
+
"documentationUrl": "https://spectrum.adobe.com/page/code/"
|
|
9
|
+
},
|
|
10
|
+
"type": "object",
|
|
11
|
+
"properties": {
|
|
12
|
+
"script": {
|
|
13
|
+
"$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/typography-script.json"
|
|
14
|
+
},
|
|
15
|
+
"size": {
|
|
16
|
+
"type": "string",
|
|
17
|
+
"enum": ["xs", "s", "m", "l", "xl"],
|
|
18
|
+
"default": "m"
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/color-area.json",
|
|
4
|
+
"title": "Color area",
|
|
5
|
+
"description": "A color area allows users to visually select two properties of a color simultaneously. It's commonly used together with a color slider or color wheel.",
|
|
6
|
+
"meta": {
|
|
7
|
+
"category": "inputs",
|
|
8
|
+
"documentationUrl": "https://spectrum.adobe.com/page/color-area/"
|
|
9
|
+
},
|
|
10
|
+
"type": "object",
|
|
11
|
+
"properties": {
|
|
12
|
+
"background": {
|
|
13
|
+
"type": "string",
|
|
14
|
+
"description": "This will vary depending on implementation."
|
|
15
|
+
},
|
|
16
|
+
"x-value": {
|
|
17
|
+
"type": "number",
|
|
18
|
+
"description": "Number (from x-minValue to x-maxValue)"
|
|
19
|
+
},
|
|
20
|
+
"x-minValue": {
|
|
21
|
+
"type": "number",
|
|
22
|
+
"default": 0
|
|
23
|
+
},
|
|
24
|
+
"x-maxValue": {
|
|
25
|
+
"type": "number",
|
|
26
|
+
"default": 100
|
|
27
|
+
},
|
|
28
|
+
"y-value": {
|
|
29
|
+
"type": "number",
|
|
30
|
+
"description": "Number (from y-minValue to y-maxValue)"
|
|
31
|
+
},
|
|
32
|
+
"y-minValue": {
|
|
33
|
+
"type": "number",
|
|
34
|
+
"default": 0
|
|
35
|
+
},
|
|
36
|
+
"y-maxValue": {
|
|
37
|
+
"type": "number",
|
|
38
|
+
"default": 100
|
|
39
|
+
},
|
|
40
|
+
"step": {
|
|
41
|
+
"type": "number",
|
|
42
|
+
"default": 1
|
|
43
|
+
},
|
|
44
|
+
"width": {
|
|
45
|
+
"type": "number",
|
|
46
|
+
"default": 192,
|
|
47
|
+
"description": "units: px"
|
|
48
|
+
},
|
|
49
|
+
"height": {
|
|
50
|
+
"type": "number",
|
|
51
|
+
"default": 192,
|
|
52
|
+
"description": "units: px"
|
|
53
|
+
},
|
|
54
|
+
"isDisabled": {
|
|
55
|
+
"type": "boolean",
|
|
56
|
+
"default": false
|
|
57
|
+
},
|
|
58
|
+
"state": {
|
|
59
|
+
"type": "string",
|
|
60
|
+
"enum": ["default", "hover", "down", "keyboard focus"],
|
|
61
|
+
"default": "default"
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/color-loupe.json",
|
|
4
|
+
"title": "Color loupe",
|
|
5
|
+
"description": "A color loupe shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.",
|
|
6
|
+
"meta": {
|
|
7
|
+
"category": "feedback",
|
|
8
|
+
"documentationUrl": "https://spectrum.adobe.com/page/color-loupe/"
|
|
9
|
+
},
|
|
10
|
+
"type": "object",
|
|
11
|
+
"properties": {
|
|
12
|
+
"value": {
|
|
13
|
+
"$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/hex-color.json"
|
|
14
|
+
},
|
|
15
|
+
"state": {
|
|
16
|
+
"type": "string",
|
|
17
|
+
"enum": ["default"],
|
|
18
|
+
"default": "default"
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/color-slider.json",
|
|
4
|
+
"title": "Color slider",
|
|
5
|
+
"description": "A color slider lets users visually change an individual channel of a color.",
|
|
6
|
+
"meta": {
|
|
7
|
+
"category": "inputs",
|
|
8
|
+
"documentationUrl": "https://spectrum.adobe.com/page/color-slider/"
|
|
9
|
+
},
|
|
10
|
+
"type": "object",
|
|
11
|
+
"properties": {
|
|
12
|
+
"background": {
|
|
13
|
+
"type": "string",
|
|
14
|
+
"description": "This will vary depending on implementation."
|
|
15
|
+
},
|
|
16
|
+
"value": {
|
|
17
|
+
"type": "number",
|
|
18
|
+
"description": "Number (from minValue to maxValue)"
|
|
19
|
+
},
|
|
20
|
+
"minValue": {
|
|
21
|
+
"type": "number",
|
|
22
|
+
"default": 0
|
|
23
|
+
},
|
|
24
|
+
"maxValue": {
|
|
25
|
+
"type": "number",
|
|
26
|
+
"default": 100
|
|
27
|
+
},
|
|
28
|
+
"step": {
|
|
29
|
+
"type": "number",
|
|
30
|
+
"default": 1
|
|
31
|
+
},
|
|
32
|
+
"orientation": {
|
|
33
|
+
"type": "string",
|
|
34
|
+
"enum": ["horizontal", "vertical"],
|
|
35
|
+
"default": "horizontal"
|
|
36
|
+
},
|
|
37
|
+
"length": {
|
|
38
|
+
"type": "number",
|
|
39
|
+
"default": 192,
|
|
40
|
+
"description": "units: px"
|
|
41
|
+
},
|
|
42
|
+
"isDisabled": {
|
|
43
|
+
"type": "boolean",
|
|
44
|
+
"default": false
|
|
45
|
+
},
|
|
46
|
+
"state": {
|
|
47
|
+
"type": "string",
|
|
48
|
+
"enum": ["default", "hover", "down", "keyboard focus"],
|
|
49
|
+
"default": "default"
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/color-wheel.json",
|
|
4
|
+
"title": "Color wheel",
|
|
5
|
+
"description": "A color wheel lets users visually change an individual channel of a color on a circular track.",
|
|
6
|
+
"meta": {
|
|
7
|
+
"category": "inputs",
|
|
8
|
+
"documentationUrl": "https://spectrum.adobe.com/page/color-wheel/"
|
|
9
|
+
},
|
|
10
|
+
"type": "object",
|
|
11
|
+
"properties": {
|
|
12
|
+
"background": {
|
|
13
|
+
"type": "string",
|
|
14
|
+
"description": "This will vary depending on implementation."
|
|
15
|
+
},
|
|
16
|
+
"value": {
|
|
17
|
+
"type": "number",
|
|
18
|
+
"description": "Number (from minValue to maxValue)"
|
|
19
|
+
},
|
|
20
|
+
"minValue": {
|
|
21
|
+
"type": "number",
|
|
22
|
+
"default": 0
|
|
23
|
+
},
|
|
24
|
+
"maxValue": {
|
|
25
|
+
"type": "number",
|
|
26
|
+
"default": 360
|
|
27
|
+
},
|
|
28
|
+
"step": {
|
|
29
|
+
"type": "number",
|
|
30
|
+
"default": 1
|
|
31
|
+
},
|
|
32
|
+
"size": {
|
|
33
|
+
"type": "number",
|
|
34
|
+
"default": 192,
|
|
35
|
+
"description": "units: px"
|
|
36
|
+
},
|
|
37
|
+
"isDisabled": {
|
|
38
|
+
"type": "boolean",
|
|
39
|
+
"default": false
|
|
40
|
+
},
|
|
41
|
+
"state": {
|
|
42
|
+
"type": "string",
|
|
43
|
+
"enum": ["default", "hover", "down", "keyboard focus"],
|
|
44
|
+
"default": "default"
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/combo-box.json",
|
|
4
|
+
"title": "Combo box",
|
|
5
|
+
"description": "Combo boxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.",
|
|
6
|
+
"meta": {
|
|
7
|
+
"category": "inputs",
|
|
8
|
+
"documentationUrl": "https://spectrum.adobe.com/page/combo-box/"
|
|
9
|
+
},
|
|
10
|
+
"type": "object",
|
|
11
|
+
"properties": {
|
|
12
|
+
"label": {
|
|
13
|
+
"type": "string"
|
|
14
|
+
},
|
|
15
|
+
"labelPosition": {
|
|
16
|
+
"type": "string",
|
|
17
|
+
"enum": ["top", "side"],
|
|
18
|
+
"default": "top"
|
|
19
|
+
},
|
|
20
|
+
"value": {
|
|
21
|
+
"type": "string"
|
|
22
|
+
},
|
|
23
|
+
"width": {
|
|
24
|
+
"type": "number"
|
|
25
|
+
},
|
|
26
|
+
"size": {
|
|
27
|
+
"type": "string",
|
|
28
|
+
"enum": ["s", "m", "l", "xl"],
|
|
29
|
+
"default": "m"
|
|
30
|
+
},
|
|
31
|
+
"isQuiet": {
|
|
32
|
+
"type": "boolean",
|
|
33
|
+
"default": false
|
|
34
|
+
},
|
|
35
|
+
"isRequired": {
|
|
36
|
+
"type": "boolean",
|
|
37
|
+
"default": false
|
|
38
|
+
},
|
|
39
|
+
"necessityIndicator": {
|
|
40
|
+
"type": "string",
|
|
41
|
+
"enum": ["text", "icon"],
|
|
42
|
+
"default": "icon"
|
|
43
|
+
},
|
|
44
|
+
"hasAutocomplete": {
|
|
45
|
+
"type": "boolean",
|
|
46
|
+
"default": false
|
|
47
|
+
},
|
|
48
|
+
"menuTrigger": {
|
|
49
|
+
"type": "string",
|
|
50
|
+
"enum": ["input", "focus", "manual"],
|
|
51
|
+
"default": "input"
|
|
52
|
+
},
|
|
53
|
+
"isError": {
|
|
54
|
+
"type": "boolean",
|
|
55
|
+
"default": false
|
|
56
|
+
},
|
|
57
|
+
"isDisabled": {
|
|
58
|
+
"type": "boolean",
|
|
59
|
+
"default": false
|
|
60
|
+
},
|
|
61
|
+
"isReadOnly": {
|
|
62
|
+
"type": "boolean",
|
|
63
|
+
"default": false
|
|
64
|
+
},
|
|
65
|
+
"description": {
|
|
66
|
+
"type": "string"
|
|
67
|
+
},
|
|
68
|
+
"errorMessage": {
|
|
69
|
+
"type": "string"
|
|
70
|
+
},
|
|
71
|
+
"state": {
|
|
72
|
+
"type": "string",
|
|
73
|
+
"enum": [
|
|
74
|
+
"default",
|
|
75
|
+
"hover (text area)",
|
|
76
|
+
"hover (button area)",
|
|
77
|
+
"focus + hover",
|
|
78
|
+
"focus + not hover",
|
|
79
|
+
"keyboard focus"
|
|
80
|
+
],
|
|
81
|
+
"default": "default"
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/contextual-help.json",
|
|
4
|
+
"title": "Contextual help",
|
|
5
|
+
"description": "Contextual help shows a user extra information about the state of either an adjacent component or an entire view. It explains a high-level topic about an experience and can point users to more information elsewhere.",
|
|
6
|
+
"meta": {
|
|
7
|
+
"category": "feedback",
|
|
8
|
+
"documentationUrl": "https://spectrum.adobe.com/page/contextual-help/"
|
|
9
|
+
},
|
|
10
|
+
"type": "object",
|
|
11
|
+
"properties": {
|
|
12
|
+
"icon": {
|
|
13
|
+
"type": "string",
|
|
14
|
+
"enum": ["info", "help"],
|
|
15
|
+
"default": "info"
|
|
16
|
+
},
|
|
17
|
+
"popoverPlacement": {
|
|
18
|
+
"type": "string",
|
|
19
|
+
"enum": [
|
|
20
|
+
"top",
|
|
21
|
+
"top left",
|
|
22
|
+
"top right",
|
|
23
|
+
"top start",
|
|
24
|
+
"top end",
|
|
25
|
+
"bottom",
|
|
26
|
+
"bottom left",
|
|
27
|
+
"bottom right",
|
|
28
|
+
"bottom start",
|
|
29
|
+
"bottom end",
|
|
30
|
+
"left",
|
|
31
|
+
"left top",
|
|
32
|
+
"left bottom",
|
|
33
|
+
"start",
|
|
34
|
+
"start top",
|
|
35
|
+
"start bottom",
|
|
36
|
+
"right",
|
|
37
|
+
"right top",
|
|
38
|
+
"right bottom",
|
|
39
|
+
"end",
|
|
40
|
+
"end top",
|
|
41
|
+
"end bottom"
|
|
42
|
+
],
|
|
43
|
+
"default": "bottom start"
|
|
44
|
+
},
|
|
45
|
+
"popoverOffset": {
|
|
46
|
+
"type": "number",
|
|
47
|
+
"default": 6,
|
|
48
|
+
"description": "6 px (desktop) or 8 px (mobile)"
|
|
49
|
+
},
|
|
50
|
+
"popoverCrossOffset": {
|
|
51
|
+
"type": "number",
|
|
52
|
+
"default": 0
|
|
53
|
+
},
|
|
54
|
+
"containerPadding": {
|
|
55
|
+
"type": "number",
|
|
56
|
+
"default": 8
|
|
57
|
+
},
|
|
58
|
+
"state": {
|
|
59
|
+
"type": "string",
|
|
60
|
+
"enum": ["default", "down", "open", "keyboard focus"],
|
|
61
|
+
"default": "default"
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/detail.json",
|
|
4
|
+
"title": "Detail",
|
|
5
|
+
"description": "Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text.",
|
|
6
|
+
"meta": {
|
|
7
|
+
"category": "typography",
|
|
8
|
+
"documentationUrl": "https://spectrum.adobe.com/page/detail/"
|
|
9
|
+
},
|
|
10
|
+
"type": "object",
|
|
11
|
+
"properties": {
|
|
12
|
+
"script": {
|
|
13
|
+
"$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/typography-script.json"
|
|
14
|
+
},
|
|
15
|
+
"weight": {
|
|
16
|
+
"type": "string",
|
|
17
|
+
"enum": ["light", "default"],
|
|
18
|
+
"default": "default"
|
|
19
|
+
},
|
|
20
|
+
"size": {
|
|
21
|
+
"type": "string",
|
|
22
|
+
"enum": ["s", "m", "l", "xl"],
|
|
23
|
+
"default": "m"
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/divider.json",
|
|
4
|
+
"title": "Divider",
|
|
5
|
+
"description": "Dividers bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to establish rhythm and hierarchy.",
|
|
6
|
+
"meta": {
|
|
7
|
+
"category": "containers",
|
|
8
|
+
"documentationUrl": "https://spectrum.adobe.com/page/divider/"
|
|
9
|
+
},
|
|
10
|
+
"type": "object",
|
|
11
|
+
"properties": {
|
|
12
|
+
"size": {
|
|
13
|
+
"type": "string",
|
|
14
|
+
"enum": ["s", "m", "l"],
|
|
15
|
+
"default": "small"
|
|
16
|
+
},
|
|
17
|
+
"orientation": {
|
|
18
|
+
"type": "string",
|
|
19
|
+
"enum": ["horizontal", "vertical"],
|
|
20
|
+
"default": "horizontal"
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/field-label.json",
|
|
4
|
+
"title": "Field label",
|
|
5
|
+
"description": "Field labels give context to the information that a user needs to input. They're commonly used in forms.",
|
|
6
|
+
"meta": {
|
|
7
|
+
"category": "inputs",
|
|
8
|
+
"documentationUrl": "https://spectrum.adobe.com/page/field-label/"
|
|
9
|
+
},
|
|
10
|
+
"type": "object",
|
|
11
|
+
"properties": {
|
|
12
|
+
"label": {
|
|
13
|
+
"type": "string"
|
|
14
|
+
},
|
|
15
|
+
"labelPosition": {
|
|
16
|
+
"type": "string",
|
|
17
|
+
"enum": ["top", "side"],
|
|
18
|
+
"default": "top"
|
|
19
|
+
},
|
|
20
|
+
"size": {
|
|
21
|
+
"type": "string",
|
|
22
|
+
"enum": ["s", "m", "l", "xl"],
|
|
23
|
+
"default": "m"
|
|
24
|
+
},
|
|
25
|
+
"necessityIndicator": {
|
|
26
|
+
"type": "string",
|
|
27
|
+
"enum": ["text", "icon"],
|
|
28
|
+
"default": "icon"
|
|
29
|
+
},
|
|
30
|
+
"isRequired": {
|
|
31
|
+
"type": "boolean",
|
|
32
|
+
"default": false
|
|
33
|
+
},
|
|
34
|
+
"isDisabled": {
|
|
35
|
+
"type": "boolean",
|
|
36
|
+
"default": false
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|