@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.
Files changed (74) hide show
  1. package/CHANGELOG.md +73 -149
  2. package/dist/json/drover.json +10 -3
  3. package/dist/json/variables.json +1596 -11
  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 +21 -5
  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,41 +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-circle.json",
4
- "title": "Progress circle",
5
- "description": "Progress circles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or indeterminate progress.",
6
- "meta": {
7
- "category": "status",
8
- "documentationUrl": "https://spectrum.adobe.com/page/progress-circle/"
9
- },
10
- "type": "object",
11
- "properties": {
12
- "variant": {
13
- "type": "string",
14
- "enum": ["default", "over background"],
15
- "default": "default"
16
- },
17
- "value": {
18
- "type": "number",
19
- "description": "Not applicable when indeterminate."
20
- },
21
- "minValue": {
22
- "type": "number",
23
- "default": 0,
24
- "description": "Not applicable when indeterminate."
25
- },
26
- "maxValue": {
27
- "type": "number",
28
- "default": 1,
29
- "description": "Not applicable when indeterminate."
30
- },
31
- "size": {
32
- "type": "string",
33
- "enum": ["s", "m", "l"],
34
- "default": "m"
35
- },
36
- "isIndeterminate": {
37
- "type": "boolean",
38
- "default": false
39
- }
40
- }
41
- }
@@ -1,62 +0,0 @@
1
- {
2
- "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
3
- "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/radio-group.json",
4
- "title": "Radio Group",
5
- "description": "A radio group is a grouping of radio buttons that are related to each other.",
6
- "meta": {
7
- "category": "inputs",
8
- "documentationUrl": "https://spectrum.adobe.com/page/radio-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
- "orientation": {
21
- "type": "string",
22
- "enum": ["horizontal", "vertical"],
23
- "default": "vertical"
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
- "necessityIndicator": {
35
- "type": "string",
36
- "enum": ["text", "icon"],
37
- "default": "icon"
38
- },
39
- "isRequired": {
40
- "type": "boolean",
41
- "default": false
42
- },
43
- "isError": {
44
- "type": "boolean",
45
- "default": false
46
- },
47
- "isDisabled": {
48
- "type": "boolean",
49
- "default": false
50
- },
51
- "isReadOnly": {
52
- "type": "boolean",
53
- "default": false
54
- },
55
- "errorMessage": {
56
- "type": "string"
57
- },
58
- "description": {
59
- "type": "string"
60
- }
61
- }
62
- }
@@ -1,31 +0,0 @@
1
- {
2
- "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
3
- "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/rating.json",
4
- "title": "Rating",
5
- "description": "The rating component lets users apply a rating to an item or experience, such as an image, a forum post, an item for sale in a marketplace, and more.",
6
- "meta": {
7
- "category": "inputs",
8
- "documentationUrl": "https://spectrum.adobe.com/page/rating/"
9
- },
10
- "type": "object",
11
- "properties": {
12
- "value": {
13
- "type": "integer",
14
- "minimum": 0,
15
- "maximum": 5
16
- },
17
- "isEmphasized": {
18
- "type": "boolean",
19
- "default": false
20
- },
21
- "isDisabled": {
22
- "type": "boolean",
23
- "default": false
24
- },
25
- "state": {
26
- "type": "string",
27
- "enum": ["default", "hover", "down", "keyboard focus"],
28
- "default": "default"
29
- }
30
- }
31
- }
@@ -1,44 +0,0 @@
1
- {
2
- "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
3
- "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/scroll-zoom-bar.json",
4
- "title": "Scroll-zoom bar",
5
- "description": "Primarily for usage in timelines, a scroll-zoom bar lets a user scroll or zoom with the same control.",
6
- "meta": {
7
- "category": "navigation",
8
- "documentationUrl": "https://spectrum.adobe.com/page/scroll-zoom-bar/"
9
- },
10
- "type": "object",
11
- "properties": {
12
- "size": {
13
- "type": "string",
14
- "enum": ["s", "m", "l"],
15
- "default": "m"
16
- },
17
- "orientation": {
18
- "type": "string",
19
- "enum": ["horizontal", "vertical"],
20
- "default": "horizontal"
21
- },
22
- "hideTrack": {
23
- "type": "boolean",
24
- "default": false
25
- },
26
- "hideHandles": {
27
- "type": "boolean",
28
- "default": false
29
- },
30
- "scaleDown": {
31
- "type": "boolean",
32
- "default": false
33
- },
34
- "isDetatched": {
35
- "type": "boolean",
36
- "default": false
37
- },
38
- "state": {
39
- "type": "string",
40
- "enum": ["default", "hover", "keyboard focus"],
41
- "default": "default"
42
- }
43
- }
44
- }
@@ -1,18 +0,0 @@
1
- {
2
- "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
3
- "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/side-navigation.json",
4
- "title": "Side navigation",
5
- "description": "Side navigation lets users navigate the entire content of a product or a section. These can be used for a single level or a multi-level navigation.",
6
- "meta": {
7
- "category": "navigation",
8
- "documentationUrl": "https://spectrum.adobe.com/page/side-navigation/"
9
- },
10
- "type": "object",
11
- "properties": {
12
- "state": {
13
- "type": "string",
14
- "enum": ["default", "hover", "down", "keyboard focus"],
15
- "default": "default"
16
- }
17
- }
18
- }
@@ -1,74 +0,0 @@
1
- {
2
- "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
3
- "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/slider.json",
4
- "title": "Slider",
5
- "description": "Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.",
6
- "meta": {
7
- "category": "inputs",
8
- "documentationUrl": "https://spectrum.adobe.com/page/slider/"
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
- "value": {
21
- "type": "number",
22
- "description": "from minValue to maxValue"
23
- },
24
- "minValue": {
25
- "type": "number",
26
- "default": 0
27
- },
28
- "maxValue": {
29
- "type": "number",
30
- "default": 100
31
- },
32
- "step": {
33
- "type": "number",
34
- "default": 1
35
- },
36
- "valueFormat": {
37
- "type": "string",
38
- "description": "This will vary depending on implementation."
39
- },
40
- "progressionScale": {
41
- "type": "string",
42
- "enum": ["linear", "log"],
43
- "default": "linear"
44
- },
45
- "width": {
46
- "type": "number"
47
- },
48
- "hasFill": {
49
- "type": "boolean",
50
- "default": false
51
- },
52
- "fillStart": {
53
- "type": "number",
54
- "default": 0
55
- },
56
- "hasGradient": {
57
- "type": "boolean",
58
- "default": false
59
- },
60
- "isEditable": {
61
- "type": "boolean",
62
- "default": false
63
- },
64
- "isDisabled": {
65
- "type": "boolean",
66
- "default": false
67
- },
68
- "state": {
69
- "type": "string",
70
- "enum": ["default", "hover", "down", "keyboard focus"],
71
- "default": "default"
72
- }
73
- }
74
- }
@@ -1,44 +0,0 @@
1
- {
2
- "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
3
- "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/status-light.json",
4
- "title": "Status light",
5
- "description": "Status lights describe the condition of an entity. They can be used to convey semantic meaning, such as statuses and categories.",
6
- "meta": {
7
- "category": "status",
8
- "documentationUrl": "https://spectrum.adobe.com/page/status-light/"
9
- },
10
- "type": "object",
11
- "properties": {
12
- "label": {
13
- "type": "string"
14
- },
15
- "variant": {
16
- "type": "string",
17
- "enum": [
18
- "informative",
19
- "neutral",
20
- "positive",
21
- "notice",
22
- "negative",
23
- "indigo",
24
- "celery",
25
- "chartreuse",
26
- "yellow",
27
- "magenta",
28
- "fuchsia",
29
- "purple",
30
- "seafoam"
31
- ],
32
- "default": "informative"
33
- },
34
- "size": {
35
- "type": "string",
36
- "enum": ["s", "m", "l", "xl"],
37
- "default": "m"
38
- },
39
- "isDisabled": {
40
- "type": "boolean",
41
- "default": false
42
- }
43
- }
44
- }
@@ -1,38 +0,0 @@
1
- {
2
- "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
3
- "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/swatch-group.json",
4
- "title": "Swatch group",
5
- "description": "A swatch group is a grouping of swatches that are related to each other.",
6
- "meta": {
7
- "category": "inputs",
8
- "documentationUrl": "https://spectrum.adobe.com/page/swatch-group/"
9
- },
10
- "type": "object",
11
- "properties": {
12
- "size": {
13
- "type": "string",
14
- "enum": ["xs", "s", "m", "l"],
15
- "default": "m"
16
- },
17
- "density": {
18
- "type": "string",
19
- "enum": ["compact", "regular", "spacious"],
20
- "default": "regular"
21
- },
22
- "enableSelection": {
23
- "type": "boolean",
24
- "default": false
25
- },
26
- "selectionMode": {
27
- "type": "string",
28
- "description": "Only applicable if selection is enabled.",
29
- "enum": ["single", "multiple"],
30
- "default": "single"
31
- },
32
- "allowsEmptySelection": {
33
- "type": "boolean",
34
- "default": false,
35
- "description": "Only applicable if selection is enabled."
36
- }
37
- }
38
- }
@@ -1,45 +0,0 @@
1
- {
2
- "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
3
- "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/swatch.json",
4
- "title": "Swatch",
5
- "description": "A swatch shows a small sample of a fill — such as a color, gradient, texture, or material — that is intended to be applied to an object.",
6
- "meta": {
7
- "category": "inputs",
8
- "documentationUrl": "https://spectrum.adobe.com/page/swatch/"
9
- },
10
- "type": "object",
11
- "properties": {
12
- "preview": {
13
- "type": "string",
14
- "description": "This will vary depending on implementation."
15
- },
16
- "size": {
17
- "type": "string",
18
- "enum": ["xs", "s", "m", "l"],
19
- "default": "m"
20
- },
21
- "shape": {
22
- "type": "string",
23
- "enum": ["square", "rectangle"],
24
- "default": "square"
25
- },
26
- "cornerRounding": {
27
- "type": "string",
28
- "enum": ["default", "full"],
29
- "default": "default"
30
- },
31
- "isSelected": {
32
- "type": "boolean",
33
- "default": false
34
- },
35
- "isDisabled": {
36
- "type": "boolean",
37
- "default": false
38
- },
39
- "state": {
40
- "type": "string",
41
- "enum": ["default", "hover", "down", "keyboard focus"],
42
- "default": "default"
43
- }
44
- }
45
- }
@@ -1,42 +0,0 @@
1
- {
2
- "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
3
- "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/switch.json",
4
- "title": "Switch",
5
- "description": "Switches allow users to turn an individual option on or off. They are usually used to activate or deactivate a specific setting.",
6
- "meta": {
7
- "category": "inputs",
8
- "documentationUrl": "https://spectrum.adobe.com/page/switch/"
9
- },
10
- "type": "object",
11
- "properties": {
12
- "label": {
13
- "type": "string"
14
- },
15
- "isSelected": {
16
- "type": "boolean",
17
- "default": false
18
- },
19
- "size": {
20
- "type": "string",
21
- "enum": ["s", "m", "l", "xl"],
22
- "default": "m"
23
- },
24
- "isEmphasized": {
25
- "type": "boolean",
26
- "default": false
27
- },
28
- "isDisabled": {
29
- "type": "boolean",
30
- "default": false
31
- },
32
- "isReadOnly": {
33
- "type": "boolean",
34
- "default": false
35
- },
36
- "state": {
37
- "type": "string",
38
- "enum": ["default", "hover", "down", "keyboard focus"],
39
- "default": "default"
40
- }
41
- }
42
- }
@@ -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/tab-bar-ios.json",
4
- "title": "Tab bar (iOS)",
5
- "description": "Tab bar is a top-level navigation control for iOS apps.",
6
- "meta": {
7
- "category": "navigation",
8
- "documentationUrl": "https://spectrum.adobe.com/page/tab-bar-ios/"
9
- },
10
- "type": "object",
11
- "properties": {
12
- "label": {
13
- "type": "string"
14
- },
15
- "labelPosition": {
16
- "type": "string",
17
- "enum": ["bottom", "side"],
18
- "default": "bottom"
19
- },
20
- "icon": {
21
- "$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/workflow-icon.json"
22
- },
23
- "background": {
24
- "type": "string",
25
- "enum": ["primary", "secondary"],
26
- "default": "primary"
27
- },
28
- "hasBadge": {
29
- "type": "boolean",
30
- "default": false
31
- },
32
- "isDisabled": {
33
- "type": "boolean",
34
- "default": false
35
- }
36
- }
37
- }
@@ -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/tabs.json",
4
- "title": "Tabs",
5
- "description": "Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.",
6
- "meta": {
7
- "category": "navigation",
8
- "documentationUrl": "https://spectrum.adobe.com/page/tabs/"
9
- },
10
- "type": "object",
11
- "properties": {
12
- "label": {
13
- "type": "string"
14
- },
15
- "icon": {
16
- "$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/workflow-icon.json"
17
- },
18
- "isSelected": {
19
- "type": "boolean",
20
- "default": false
21
- },
22
- "isDisabled": {
23
- "type": "boolean",
24
- "default": false
25
- },
26
- "state": {
27
- "type": "string",
28
- "enum": ["default", "hover", "down", "keyboard focus"],
29
- "default": "default"
30
- }
31
- }
32
- }
@@ -1,41 +0,0 @@
1
- {
2
- "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
3
- "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/tag.json",
4
- "title": "Tag",
5
- "description": "Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.",
6
- "meta": {
7
- "category": "navigation",
8
- "documentationUrl": "https://spectrum.adobe.com/page/tag/"
9
- },
10
- "type": "object",
11
- "properties": {
12
- "label": {
13
- "type": "string"
14
- },
15
- "hasAvatar": {
16
- "type": "boolean",
17
- "default": false
18
- },
19
- "isRemovable": {
20
- "type": "boolean",
21
- "default": false
22
- },
23
- "isError": {
24
- "type": "boolean",
25
- "default": false
26
- },
27
- "isDisabled": {
28
- "type": "boolean",
29
- "default": false
30
- },
31
- "isReadOnly": {
32
- "type": "boolean",
33
- "default": false
34
- },
35
- "state": {
36
- "type": "string",
37
- "enum": ["default", "hover", "down", "keyboard focus"],
38
- "default": "default"
39
- }
40
- }
41
- }
@@ -1,98 +0,0 @@
1
- {
2
- "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
3
- "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/text-area.json",
4
- "title": "Text area",
5
- "description": "A text area lets a user input a longer amount of text than a standard text field. It can include all of the standard validation options supported by the text field component.",
6
- "meta": {
7
- "category": "inputs",
8
- "documentationUrl": "https://spectrum.adobe.com/page/text-area/"
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
- "value": {
21
- "type": "string",
22
- "description": "from minValue to maxValue"
23
- },
24
- "width": {
25
- "type": "number"
26
- },
27
- "size": {
28
- "type": "string",
29
- "enum": ["s", "m", "l", "xl"],
30
- "default": "m"
31
- },
32
- "isQuiet": {
33
- "type": "boolean",
34
- "default": false
35
- },
36
- "necessityIndicator": {
37
- "type": "string",
38
- "enum": ["text", "icon"],
39
- "default": "icon"
40
- },
41
- "isRequired": {
42
- "type": "boolean",
43
- "default": false
44
- },
45
- "hasCharacterCount": {
46
- "type": "boolean",
47
- "default": false
48
- },
49
- "showValidIcon": {
50
- "type": "boolean",
51
- "default": false
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
- "hideDragIcon": {
66
- "type": "boolean",
67
- "default": false
68
- },
69
- "height": {
70
- "type": "number",
71
- "description": "If undefined, height is dynamic and grows with input text."
72
- },
73
- "description": {
74
- "type": "string",
75
- "default": null
76
- },
77
- "errorMessage": {
78
- "type": "string",
79
- "default": null
80
- },
81
- "inputType": {
82
- "type": "string",
83
- "enum": ["text", "url", "phone", "email", "password"],
84
- "default": "text"
85
- },
86
- "state": {
87
- "type": "string",
88
- "enum": [
89
- "default",
90
- "hover",
91
- "focus + hover",
92
- "focus + not hover",
93
- "keyboard focus"
94
- ],
95
- "default": "default"
96
- }
97
- }
98
- }