@adobe/spectrum-tokens 13.10.1 → 13.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/CHANGELOG.md +84 -150
  2. package/dist/json/drover.json +9 -2
  3. package/dist/json/variables.json +1595 -18
  4. package/package.json +1 -1
  5. package/schemas/token-types/token.json +3 -0
  6. package/schemas/token-types/typography.json +32 -0
  7. package/src/color-aliases.json +1 -1
  8. package/src/color-palette.json +1 -1
  9. package/src/icons.json +1 -1
  10. package/src/layout-component.json +23 -17
  11. package/src/layout.json +75 -0
  12. package/src/semantic-color-palette.json +1 -1
  13. package/src/typography.json +167 -2
  14. package/schemas/component.json +0 -29
  15. package/schemas/components/action-bar.json +0 -18
  16. package/schemas/components/action-button.json +0 -62
  17. package/schemas/components/action-group.json +0 -69
  18. package/schemas/components/alert-banner.json +0 -29
  19. package/schemas/components/alert-dialog.json +0 -42
  20. package/schemas/components/avatar.json +0 -30
  21. package/schemas/components/badge.json +0 -50
  22. package/schemas/components/body.json +0 -25
  23. package/schemas/components/bottom-navigation-android.json +0 -37
  24. package/schemas/components/breadcrumbs.json +0 -18
  25. package/schemas/components/button-group.json +0 -28
  26. package/schemas/components/button.json +0 -60
  27. package/schemas/components/checkbox-group.json +0 -53
  28. package/schemas/components/checkbox.json +0 -52
  29. package/schemas/components/close-button.json +0 -35
  30. package/schemas/components/code.json +0 -21
  31. package/schemas/components/color-area.json +0 -64
  32. package/schemas/components/color-loupe.json +0 -21
  33. package/schemas/components/color-slider.json +0 -52
  34. package/schemas/components/color-wheel.json +0 -47
  35. package/schemas/components/combo-box.json +0 -84
  36. package/schemas/components/contextual-help.json +0 -64
  37. package/schemas/components/detail.json +0 -26
  38. package/schemas/components/divider.json +0 -23
  39. package/schemas/components/field-label.json +0 -39
  40. package/schemas/components/heading.json +0 -29
  41. package/schemas/components/help-text.json +0 -35
  42. package/schemas/components/in-line-alert.json +0 -25
  43. package/schemas/components/link.json +0 -32
  44. package/schemas/components/menu.json +0 -65
  45. package/schemas/components/meter.json +0 -37
  46. package/schemas/components/picker.json +0 -85
  47. package/schemas/components/popover.json +0 -65
  48. package/schemas/components/progress-bar.json +0 -50
  49. package/schemas/components/progress-circle.json +0 -41
  50. package/schemas/components/radio-group.json +0 -62
  51. package/schemas/components/rating.json +0 -31
  52. package/schemas/components/scroll-zoom-bar.json +0 -44
  53. package/schemas/components/side-navigation.json +0 -18
  54. package/schemas/components/slider.json +0 -74
  55. package/schemas/components/status-light.json +0 -44
  56. package/schemas/components/swatch-group.json +0 -38
  57. package/schemas/components/swatch.json +0 -45
  58. package/schemas/components/switch.json +0 -42
  59. package/schemas/components/tab-bar-ios.json +0 -37
  60. package/schemas/components/tabs.json +0 -32
  61. package/schemas/components/tag.json +0 -41
  62. package/schemas/components/text-area.json +0 -98
  63. package/schemas/components/text-field.json +0 -86
  64. package/schemas/components/toast.json +0 -29
  65. package/schemas/components/tooltip.json +0 -50
  66. package/schemas/components/tray.json +0 -17
  67. package/schemas/components/tree-view.json +0 -50
  68. package/schemas/types/component-size.json +0 -8
  69. package/schemas/types/hex-color.json +0 -8
  70. package/schemas/types/typography-classification.json +0 -9
  71. package/schemas/types/typography-script.json +0 -9
  72. package/schemas/types/workflow-icon.json +0 -901
  73. package/test/componentSchemaValidator.test.js +0 -74
  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
- }