@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,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
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/heading.json",
|
|
4
|
+
"title": "Heading",
|
|
5
|
+
"description": "Heading is a typography component used to create various levels of hierarchies between text.",
|
|
6
|
+
"meta": {
|
|
7
|
+
"category": "typography",
|
|
8
|
+
"documentationUrl": "https://spectrum.adobe.com/page/heading/"
|
|
9
|
+
},
|
|
10
|
+
"type": "object",
|
|
11
|
+
"properties": {
|
|
12
|
+
"script": {
|
|
13
|
+
"$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/typography-script.json"
|
|
14
|
+
},
|
|
15
|
+
"classification": {
|
|
16
|
+
"$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/typography-classification.json"
|
|
17
|
+
},
|
|
18
|
+
"weight": {
|
|
19
|
+
"type": "string",
|
|
20
|
+
"enum": ["light", "default", "heavy"],
|
|
21
|
+
"default": "default"
|
|
22
|
+
},
|
|
23
|
+
"size": {
|
|
24
|
+
"type": "string",
|
|
25
|
+
"enum": ["xs", "s", "m", "l", "xl", "xxl", "xxxl"],
|
|
26
|
+
"default": "m"
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -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/help-text.json",
|
|
4
|
+
"title": "Help text",
|
|
5
|
+
"description": "Help text provides either an informative description or an error message that gives more context about what a user needs to input. It’s commonly used in forms.",
|
|
6
|
+
"meta": {
|
|
7
|
+
"category": "inputs",
|
|
8
|
+
"documentationUrl": "https://spectrum.adobe.com/page/help-text/"
|
|
9
|
+
},
|
|
10
|
+
"type": "object",
|
|
11
|
+
"properties": {
|
|
12
|
+
"text": {
|
|
13
|
+
"type": "string"
|
|
14
|
+
},
|
|
15
|
+
"variant": {
|
|
16
|
+
"type": "string",
|
|
17
|
+
"enum": ["neutral"],
|
|
18
|
+
"default": "neutral"
|
|
19
|
+
},
|
|
20
|
+
"hideIcon": {
|
|
21
|
+
"type": "boolean",
|
|
22
|
+
"default": false,
|
|
23
|
+
"description": "Only applicable if variant is negative."
|
|
24
|
+
},
|
|
25
|
+
"size": {
|
|
26
|
+
"type": "string",
|
|
27
|
+
"enum": ["s", "m", "l", "xl"],
|
|
28
|
+
"default": "m"
|
|
29
|
+
},
|
|
30
|
+
"isDisabled": {
|
|
31
|
+
"type": "boolean",
|
|
32
|
+
"default": false
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|