@adobe/spectrum-tokens 13.10.0 → 13.11.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/CHANGELOG.md +73 -149
- package/dist/json/drover.json +10 -3
- package/dist/json/variables.json +1596 -11
- package/package.json +1 -1
- package/schemas/token-types/token.json +3 -0
- package/schemas/token-types/typography.json +32 -0
- package/src/color-aliases.json +1 -1
- package/src/color-palette.json +1 -1
- package/src/icons.json +1 -1
- package/src/layout-component.json +21 -5
- package/src/layout.json +75 -0
- package/src/semantic-color-palette.json +1 -1
- package/src/typography.json +167 -2
- package/schemas/component.json +0 -29
- package/schemas/components/action-bar.json +0 -18
- package/schemas/components/action-button.json +0 -62
- package/schemas/components/action-group.json +0 -69
- package/schemas/components/alert-banner.json +0 -29
- package/schemas/components/alert-dialog.json +0 -42
- package/schemas/components/avatar.json +0 -30
- package/schemas/components/badge.json +0 -50
- package/schemas/components/body.json +0 -25
- package/schemas/components/bottom-navigation-android.json +0 -37
- package/schemas/components/breadcrumbs.json +0 -18
- package/schemas/components/button-group.json +0 -28
- package/schemas/components/button.json +0 -60
- package/schemas/components/checkbox-group.json +0 -53
- package/schemas/components/checkbox.json +0 -52
- package/schemas/components/close-button.json +0 -35
- package/schemas/components/code.json +0 -21
- package/schemas/components/color-area.json +0 -64
- package/schemas/components/color-loupe.json +0 -21
- package/schemas/components/color-slider.json +0 -52
- package/schemas/components/color-wheel.json +0 -47
- package/schemas/components/combo-box.json +0 -84
- package/schemas/components/contextual-help.json +0 -64
- package/schemas/components/detail.json +0 -26
- package/schemas/components/divider.json +0 -23
- package/schemas/components/field-label.json +0 -39
- package/schemas/components/heading.json +0 -29
- package/schemas/components/help-text.json +0 -35
- package/schemas/components/in-line-alert.json +0 -25
- package/schemas/components/link.json +0 -32
- package/schemas/components/menu.json +0 -65
- package/schemas/components/meter.json +0 -37
- package/schemas/components/picker.json +0 -85
- package/schemas/components/popover.json +0 -65
- package/schemas/components/progress-bar.json +0 -50
- package/schemas/components/progress-circle.json +0 -41
- package/schemas/components/radio-group.json +0 -62
- package/schemas/components/rating.json +0 -31
- package/schemas/components/scroll-zoom-bar.json +0 -44
- package/schemas/components/side-navigation.json +0 -18
- package/schemas/components/slider.json +0 -74
- package/schemas/components/status-light.json +0 -44
- package/schemas/components/swatch-group.json +0 -38
- package/schemas/components/swatch.json +0 -45
- package/schemas/components/switch.json +0 -42
- package/schemas/components/tab-bar-ios.json +0 -37
- package/schemas/components/tabs.json +0 -32
- package/schemas/components/tag.json +0 -41
- package/schemas/components/text-area.json +0 -98
- package/schemas/components/text-field.json +0 -86
- package/schemas/components/toast.json +0 -29
- package/schemas/components/tooltip.json +0 -50
- package/schemas/components/tray.json +0 -17
- package/schemas/components/tree-view.json +0 -50
- package/schemas/types/component-size.json +0 -8
- package/schemas/types/hex-color.json +0 -8
- package/schemas/types/typography-classification.json +0 -9
- package/schemas/types/typography-script.json +0 -9
- package/schemas/types/workflow-icon.json +0 -901
- package/test/componentSchemaValidator.test.js +0 -74
- package/test/schemaValidator.test.js +0 -74
|
@@ -1,84 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1,64 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1,26 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1,39 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1,29 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1,35 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/in-line-alert.json",
|
|
4
|
-
"title": "In-line alert",
|
|
5
|
-
"description": "In-line alerts display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to aggregate feedback related to multiple fields.",
|
|
6
|
-
"meta": {
|
|
7
|
-
"category": "feedback",
|
|
8
|
-
"documentationUrl": "https://spectrum.adobe.com/page/in-line-alert/"
|
|
9
|
-
},
|
|
10
|
-
"type": "object",
|
|
11
|
-
"properties": {
|
|
12
|
-
"variant": {
|
|
13
|
-
"type": "string",
|
|
14
|
-
"enum": [
|
|
15
|
-
"neutral",
|
|
16
|
-
"informative",
|
|
17
|
-
"positive",
|
|
18
|
-
"notice",
|
|
19
|
-
"negative",
|
|
20
|
-
"neutral"
|
|
21
|
-
],
|
|
22
|
-
"default": "neutral"
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/link.json",
|
|
4
|
-
"title": "Link",
|
|
5
|
-
"description": "Links allow users to navigate to a different location. They can be presented inside a paragraph or as standalone text.",
|
|
6
|
-
"meta": {
|
|
7
|
-
"category": "actions",
|
|
8
|
-
"documentationUrl": "https://spectrum.adobe.com/page/link/"
|
|
9
|
-
},
|
|
10
|
-
"type": "object",
|
|
11
|
-
"properties": {
|
|
12
|
-
"variant": {
|
|
13
|
-
"type": "string",
|
|
14
|
-
"enum": ["primary", "secondary"],
|
|
15
|
-
"default": "primary"
|
|
16
|
-
},
|
|
17
|
-
"isQuiet": {
|
|
18
|
-
"type": "boolean",
|
|
19
|
-
"default": false
|
|
20
|
-
},
|
|
21
|
-
"staticColor": {
|
|
22
|
-
"type": "string",
|
|
23
|
-
"enum": ["white", "black"],
|
|
24
|
-
"default": null
|
|
25
|
-
},
|
|
26
|
-
"state": {
|
|
27
|
-
"type": "string",
|
|
28
|
-
"enum": ["default", "hover", "down", "keyboard focus"],
|
|
29
|
-
"default": "default"
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/menu.json",
|
|
4
|
-
"title": "Menu",
|
|
5
|
-
"description": "Menus help users take actions, choose from a list of options, configure settings, and more. They can be placed in a transient container, like a popover or tray.",
|
|
6
|
-
"meta": {
|
|
7
|
-
"category": "actions",
|
|
8
|
-
"documentationUrl": "https://spectrum.adobe.com/page/menu/"
|
|
9
|
-
},
|
|
10
|
-
"type": "object",
|
|
11
|
-
"properties": {
|
|
12
|
-
"container": {
|
|
13
|
-
"type": "string",
|
|
14
|
-
"enum": ["popover", "tray"],
|
|
15
|
-
"default": null
|
|
16
|
-
},
|
|
17
|
-
"label": {
|
|
18
|
-
"type": "string"
|
|
19
|
-
},
|
|
20
|
-
"icon": {
|
|
21
|
-
"$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/workflow-icon.json",
|
|
22
|
-
"description": "Icon must be present if the label is not defined."
|
|
23
|
-
},
|
|
24
|
-
"description": {
|
|
25
|
-
"type": "string"
|
|
26
|
-
},
|
|
27
|
-
"value": {
|
|
28
|
-
"type": "string"
|
|
29
|
-
},
|
|
30
|
-
"size": {
|
|
31
|
-
"type": "string",
|
|
32
|
-
"enum": ["s", "m", "l", "xl"],
|
|
33
|
-
"default": "m"
|
|
34
|
-
},
|
|
35
|
-
"selectionMode": {
|
|
36
|
-
"type": "string",
|
|
37
|
-
"enum": ["single", "multiple"],
|
|
38
|
-
"default": null
|
|
39
|
-
},
|
|
40
|
-
"selectionStyle": {
|
|
41
|
-
"type": "string",
|
|
42
|
-
"enum": ["checkbox", "switch"]
|
|
43
|
-
},
|
|
44
|
-
"sectionHeader": {
|
|
45
|
-
"type": "string"
|
|
46
|
-
},
|
|
47
|
-
"isCollapsible": {
|
|
48
|
-
"type": "boolean",
|
|
49
|
-
"default": false
|
|
50
|
-
},
|
|
51
|
-
"isUnavailable": {
|
|
52
|
-
"type": "boolean",
|
|
53
|
-
"default": false
|
|
54
|
-
},
|
|
55
|
-
"isDisabled": {
|
|
56
|
-
"type": "boolean",
|
|
57
|
-
"default": false
|
|
58
|
-
},
|
|
59
|
-
"state": {
|
|
60
|
-
"type": "string",
|
|
61
|
-
"enum": ["default", "hover", "down", "keyboard focus"],
|
|
62
|
-
"default": "default"
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/meter.json",
|
|
4
|
-
"title": "Meter",
|
|
5
|
-
"description": "Meters are visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions.",
|
|
6
|
-
"meta": {
|
|
7
|
-
"category": "status",
|
|
8
|
-
"documentationUrl": "https://spectrum.adobe.com/page/meter/"
|
|
9
|
-
},
|
|
10
|
-
"type": "object",
|
|
11
|
-
"properties": {
|
|
12
|
-
"variant": {
|
|
13
|
-
"type": "string",
|
|
14
|
-
"enum": ["informative", "positive", "notice", "negative"],
|
|
15
|
-
"default": "informative"
|
|
16
|
-
},
|
|
17
|
-
"label": {
|
|
18
|
-
"type": "string"
|
|
19
|
-
},
|
|
20
|
-
"valueLable": {
|
|
21
|
-
"type": "string"
|
|
22
|
-
},
|
|
23
|
-
"width": {
|
|
24
|
-
"type": "number"
|
|
25
|
-
},
|
|
26
|
-
"size": {
|
|
27
|
-
"type": "string",
|
|
28
|
-
"enum": ["small", "large"],
|
|
29
|
-
"default": "large"
|
|
30
|
-
},
|
|
31
|
-
"value": {
|
|
32
|
-
"type": "number",
|
|
33
|
-
"minimum": 0,
|
|
34
|
-
"maximum": 1
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/picker.json",
|
|
4
|
-
"title": "Picker",
|
|
5
|
-
"description": "Pickers (sometimes known as \"dropdowns\" or \"selects\") allow users to choose from a list of options in a limited space. The list of options can change based on the context.",
|
|
6
|
-
"meta": {
|
|
7
|
-
"category": "inputs",
|
|
8
|
-
"documentationUrl": "https://spectrum.adobe.com/page/picker/"
|
|
9
|
-
},
|
|
10
|
-
"type": "object",
|
|
11
|
-
"properties": {
|
|
12
|
-
"label": {
|
|
13
|
-
"type": "string"
|
|
14
|
-
},
|
|
15
|
-
"labelPosition": {
|
|
16
|
-
"type": "string",
|
|
17
|
-
"default": "top",
|
|
18
|
-
"enum": ["top", "side"]
|
|
19
|
-
},
|
|
20
|
-
"placeholder": {
|
|
21
|
-
"type": "string"
|
|
22
|
-
},
|
|
23
|
-
"value": {
|
|
24
|
-
"type": "string"
|
|
25
|
-
},
|
|
26
|
-
"width": {
|
|
27
|
-
"type": "number",
|
|
28
|
-
"description": "Not applicable to quiet picker."
|
|
29
|
-
},
|
|
30
|
-
"size": {
|
|
31
|
-
"type": "string",
|
|
32
|
-
"enum": ["s", "m", "l", "xl"],
|
|
33
|
-
"default": "m"
|
|
34
|
-
},
|
|
35
|
-
"isQuiet": {
|
|
36
|
-
"type": "boolean",
|
|
37
|
-
"default": false
|
|
38
|
-
},
|
|
39
|
-
"necessityIndicator": {
|
|
40
|
-
"type": "string",
|
|
41
|
-
"enum": ["text", "icon"],
|
|
42
|
-
"default": "icon"
|
|
43
|
-
},
|
|
44
|
-
"isRequired": {
|
|
45
|
-
"type": "boolean",
|
|
46
|
-
"default": false
|
|
47
|
-
},
|
|
48
|
-
"menuContainer": {
|
|
49
|
-
"type": "string",
|
|
50
|
-
"enum": ["popover", "tray"],
|
|
51
|
-
"default": "popover"
|
|
52
|
-
},
|
|
53
|
-
"isDisabled": {
|
|
54
|
-
"type": "boolean",
|
|
55
|
-
"default": false
|
|
56
|
-
},
|
|
57
|
-
"isError": {
|
|
58
|
-
"type": "boolean",
|
|
59
|
-
"default": false
|
|
60
|
-
},
|
|
61
|
-
"isReadOnly": {
|
|
62
|
-
"type": "boolean",
|
|
63
|
-
"default": false
|
|
64
|
-
},
|
|
65
|
-
"description": {
|
|
66
|
-
"type": "string",
|
|
67
|
-
"default": null
|
|
68
|
-
},
|
|
69
|
-
"errorMessage": {
|
|
70
|
-
"type": "string",
|
|
71
|
-
"default": null
|
|
72
|
-
},
|
|
73
|
-
"state": {
|
|
74
|
-
"type": "string",
|
|
75
|
-
"enum": [
|
|
76
|
-
"default",
|
|
77
|
-
"hover",
|
|
78
|
-
"focus + hover",
|
|
79
|
-
"focus + not hover",
|
|
80
|
-
"keyboard focus"
|
|
81
|
-
],
|
|
82
|
-
"default": "default"
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/popover.json",
|
|
4
|
-
"title": "Popover",
|
|
5
|
-
"description": "Popovers are containers used to display transient content such as menus, options, additional actions, and more. They visually stand out through stroke and drop shadow and float on top of the interface.",
|
|
6
|
-
"meta": {
|
|
7
|
-
"category": "containers",
|
|
8
|
-
"documentationUrl": "https://spectrum.adobe.com/page/popover/"
|
|
9
|
-
},
|
|
10
|
-
"type": "object",
|
|
11
|
-
"properties": {
|
|
12
|
-
"width": {
|
|
13
|
-
"type": "integer"
|
|
14
|
-
},
|
|
15
|
-
"height": {
|
|
16
|
-
"type": "number"
|
|
17
|
-
},
|
|
18
|
-
"showTip": {
|
|
19
|
-
"type": "boolean",
|
|
20
|
-
"default": false
|
|
21
|
-
},
|
|
22
|
-
"placement": {
|
|
23
|
-
"type": "string",
|
|
24
|
-
"enum": [
|
|
25
|
-
"top",
|
|
26
|
-
"top left",
|
|
27
|
-
"top right",
|
|
28
|
-
"top start",
|
|
29
|
-
"top end",
|
|
30
|
-
"bottom",
|
|
31
|
-
"bottom left",
|
|
32
|
-
"bottom right",
|
|
33
|
-
"bottom start",
|
|
34
|
-
"bottom end",
|
|
35
|
-
"left",
|
|
36
|
-
"left top",
|
|
37
|
-
"left bottom",
|
|
38
|
-
"start",
|
|
39
|
-
"start top",
|
|
40
|
-
"start bottom",
|
|
41
|
-
"right",
|
|
42
|
-
"right top",
|
|
43
|
-
"right bottom",
|
|
44
|
-
"end",
|
|
45
|
-
"end top",
|
|
46
|
-
"end bottom"
|
|
47
|
-
],
|
|
48
|
-
"default": "bottom"
|
|
49
|
-
},
|
|
50
|
-
"offset": {
|
|
51
|
-
"type": "number",
|
|
52
|
-
"default": 6,
|
|
53
|
-
"description": "default: 6 px (desktop) or 8 px (mobile)"
|
|
54
|
-
},
|
|
55
|
-
"crossOffset": {
|
|
56
|
-
"type": "number",
|
|
57
|
-
"default": 0
|
|
58
|
-
},
|
|
59
|
-
"containerPadding": {
|
|
60
|
-
"type": "number",
|
|
61
|
-
"default": 8,
|
|
62
|
-
"description": "pixel measurement"
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/progress-bar.json",
|
|
4
|
-
"title": "Progress bar",
|
|
5
|
-
"description": "Progress bars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. They can represent either determinate or indeterminate progress.",
|
|
6
|
-
"meta": {
|
|
7
|
-
"category": "status",
|
|
8
|
-
"documentationUrl": "https://spectrum.adobe.com/page/progress-bar/"
|
|
9
|
-
},
|
|
10
|
-
"type": "object",
|
|
11
|
-
"properties": {
|
|
12
|
-
"variant": {
|
|
13
|
-
"type": "string",
|
|
14
|
-
"enum": ["default", "over background"],
|
|
15
|
-
"default": "default"
|
|
16
|
-
},
|
|
17
|
-
"label": {
|
|
18
|
-
"type": "string"
|
|
19
|
-
},
|
|
20
|
-
"value": {
|
|
21
|
-
"type": "number",
|
|
22
|
-
"description": "Not applicable when indeterminate."
|
|
23
|
-
},
|
|
24
|
-
"minValue": {
|
|
25
|
-
"type": "number",
|
|
26
|
-
"default": 0,
|
|
27
|
-
"description": "Not applicable when indeterminate."
|
|
28
|
-
},
|
|
29
|
-
"maxValue": {
|
|
30
|
-
"type": "number",
|
|
31
|
-
"default": 1,
|
|
32
|
-
"description": "Not applicable when indeterminate."
|
|
33
|
-
},
|
|
34
|
-
"valueLabel": {
|
|
35
|
-
"type": "string"
|
|
36
|
-
},
|
|
37
|
-
"width": {
|
|
38
|
-
"type": "number"
|
|
39
|
-
},
|
|
40
|
-
"size": {
|
|
41
|
-
"type": "string",
|
|
42
|
-
"enum": ["s", "m", "l", "xl"],
|
|
43
|
-
"default": "m"
|
|
44
|
-
},
|
|
45
|
-
"isIndeterminate": {
|
|
46
|
-
"type": "boolean",
|
|
47
|
-
"default": false
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
}
|