@adobe/spectrum-tokens 13.10.1 → 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 +49 -150
  2. package/dist/json/drover.json +7 -0
  3. package/dist/json/variables.json +1591 -6
  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 +19 -3
  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,30 +0,0 @@
1
- {
2
- "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
3
- "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/avatar.json",
4
- "title": "Avatar",
5
- "description": "An avatar is a thumbnail representation of an entity, such as a user or an organization.",
6
- "meta": {
7
- "category": "navigation",
8
- "documentationUrl": "https://spectrum.adobe.com/page/avatar/"
9
- },
10
- "type": "object",
11
- "properties": {
12
- "size": {
13
- "type": "number",
14
- "enum": [50, 75, 100, 200, 300, 400, 500, 600, 700],
15
- "default": 100
16
- },
17
- "image": {
18
- "type": "string"
19
- },
20
- "isDisabled": {
21
- "type": "boolean",
22
- "default": false
23
- },
24
- "state": {
25
- "type": "string",
26
- "enum": ["default", "hover", "down", "keyboard focus"],
27
- "default": "default"
28
- }
29
- }
30
- }
@@ -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/badge.json",
4
- "title": "Badge",
5
- "description": "Similar to status lights, badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user''s attention.",
6
- "meta": {
7
- "category": "status",
8
- "documentationUrl": "https://spectrum.adobe.com/page/badge/"
9
- },
10
- "type": "object",
11
- "properties": {
12
- "label": {
13
- "type": "string",
14
- "description": "When the label is not defined, the badge appears as icon-only."
15
- },
16
- "icon": {
17
- "$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/workflow-icon.json"
18
- },
19
- "variant": {
20
- "type": "string",
21
- "enum": [
22
- "neutral",
23
- "info",
24
- "positive",
25
- "negative",
26
- "indigo",
27
- "yellow",
28
- "magenta",
29
- "fuchsia",
30
- "purple",
31
- "seafoam"
32
- ]
33
- },
34
- "fixed": {
35
- "type": "string",
36
- "enum": ["none", "top", "right", "bottom", "left"],
37
- "default": "none"
38
- },
39
- "isDisabled": {
40
- "type": "boolean",
41
- "default": false
42
- },
43
- "size": {
44
- "type": "string",
45
- "pattern": "^(x?s|m|x{0,3}l)$",
46
- "enum": ["s", "m", "l", "xl"],
47
- "default": "s"
48
- }
49
- }
50
- }
@@ -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/body.json",
4
- "title": "Body",
5
- "description": "Body is a typography component primarily used within Spectrum components and for blocks of text.",
6
- "meta": {
7
- "category": "typography",
8
- "documentationUrl": "https://spectrum.adobe.com/page/body/"
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
- "size": {
19
- "type": "string",
20
- "pattern": "^(x?s|m|x{0,3}l)$",
21
- "enum": ["xs", "s", "m", "l", "xl", "xxl", "xxxl"],
22
- "default": "m"
23
- }
24
- }
25
- }
@@ -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/bottom-navigation-android.json",
4
- "title": "Bottom navigation (Android)",
5
- "description": "Bottom navigation is a top-level navigation control for Android apps.",
6
- "meta": {
7
- "category": "navigation",
8
- "documentationUrl": "https://spectrum.adobe.com/page/bottom-navigation-android/"
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,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/breadcrumbs.json",
4
- "title": "Breadcrumbs",
5
- "description": "Breadcrumbs show hierarchy and navigational context for a user’s location within an app.",
6
- "meta": {
7
- "category": "navigation",
8
- "documentationUrl": "https://spectrum.adobe.com/page/breadcrumbs/"
9
- },
10
- "type": "object",
11
- "properties": {
12
- "state": {
13
- "type": "string",
14
- "enum": ["default", "hover", "down", "keyboard focus", "drag and drop"],
15
- "default": "default"
16
- }
17
- }
18
- }
@@ -1,28 +0,0 @@
1
- {
2
- "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
3
- "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/button-group.json",
4
- "title": "Button group",
5
- "description": "A button group is a grouping of buttons whose actions are related to each other.",
6
- "meta": {
7
- "category": "actions",
8
- "documentationUrl": "https://spectrum.adobe.com/page/button-group/"
9
- },
10
- "type": "object",
11
- "properties": {
12
- "orientation": {
13
- "type": "string",
14
- "default": "horizontal",
15
- "enum": ["horizontal", "vertical"]
16
- },
17
- "size": {
18
- "type": "string",
19
- "pattern": "^(x?s|m|x{0,3}l)$",
20
- "enum": ["s", "m", "l", "xl"],
21
- "default": "m"
22
- },
23
- "isDisabled": {
24
- "type": "boolean",
25
- "default": false
26
- }
27
- }
28
- }
@@ -1,60 +0,0 @@
1
- {
2
- "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
3
- "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/button.json",
4
- "title": "Button",
5
- "description": "Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.",
6
- "meta": {
7
- "category": "actions",
8
- "documentationUrl": "https://spectrum.adobe.com/page/button/"
9
- },
10
- "type": "object",
11
- "properties": {
12
- "label": {
13
- "type": "string"
14
- },
15
- "hideLabel": {
16
- "type": "boolean",
17
- "default": false
18
- },
19
- "icon": {
20
- "$ref": "https://opensource.adobe.com/spectrum-tokens/schemas/types/workflow-icon.json",
21
- "description": "Icon must be present if the label is not defined."
22
- },
23
- "variant": {
24
- "type": "string",
25
- "enum": ["accent", "negative", "primary", "secondary"],
26
- "default": "accent"
27
- },
28
- "staticColor": {
29
- "type": "string",
30
- "enum": ["white", "black"]
31
- },
32
- "style": {
33
- "type": "string",
34
- "default": "fill",
35
- "enum": ["fill", "outline"]
36
- },
37
- "size": {
38
- "type": "string",
39
- "enum": ["s", "m", "l", "xl"],
40
- "default": "m"
41
- },
42
- "justified": {
43
- "type": "boolean",
44
- "default": false
45
- },
46
- "isPending": {
47
- "type": "boolean",
48
- "default": false
49
- },
50
- "isDisabled": {
51
- "type": "boolean",
52
- "default": false
53
- },
54
- "state": {
55
- "type": "string",
56
- "enum": ["default", "hover", "down", "keyboard focus"],
57
- "default": "default"
58
- }
59
- }
60
- }
@@ -1,53 +0,0 @@
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
- }
@@ -1,52 +0,0 @@
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
- }
@@ -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/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
- }
@@ -1,21 +0,0 @@
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
- }
@@ -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/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
- }
@@ -1,21 +0,0 @@
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
- }
@@ -1,52 +0,0 @@
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
- }
@@ -1,47 +0,0 @@
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
- }