@adobe/spectrum-tokens 12.22.1 → 12.23.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 +15 -0
- package/README.md +4 -0
- package/dist/json/drover.json +3 -1
- package/dist/json/variables.json +25 -29
- package/package.json +1 -1
- package/schemas/components/action-bar.json +1 -1
- package/schemas/components/action-button.json +1 -1
- package/schemas/components/action-group.json +1 -1
- package/schemas/components/alert-banner.json +1 -1
- package/schemas/components/alert-dialog.json +1 -1
- package/schemas/components/avatar.json +1 -1
- package/schemas/components/badge.json +1 -1
- package/schemas/components/body.json +1 -1
- package/schemas/components/bottom-navigation-android.json +1 -1
- package/schemas/components/breadcrumbs.json +1 -1
- package/schemas/components/button-group.json +1 -1
- package/schemas/components/button.json +1 -1
- package/schemas/components/checkbox-group.json +1 -1
- package/schemas/components/checkbox.json +1 -1
- package/schemas/components/close-button.json +1 -1
- package/schemas/components/code.json +1 -1
- package/schemas/components/color-area.json +1 -1
- package/schemas/components/color-loupe.json +1 -1
- package/schemas/components/color-slider.json +1 -1
- package/schemas/components/color-wheel.json +1 -1
- package/schemas/components/combo-box.json +1 -1
- package/schemas/components/contextual-help.json +1 -1
- package/schemas/components/detail.json +1 -1
- package/schemas/components/divider.json +1 -1
- package/schemas/components/field-label.json +1 -1
- package/schemas/components/heading.json +1 -1
- package/schemas/components/help-text.json +1 -1
- package/schemas/components/in-line-alert.json +1 -1
- package/schemas/components/link.json +1 -1
- package/schemas/components/menu.json +1 -1
- package/schemas/components/meter.json +1 -1
- package/schemas/components/picker.json +1 -1
- package/schemas/components/popover.json +1 -1
- package/schemas/components/progress-bar.json +1 -1
- package/schemas/components/progress-circle.json +1 -1
- package/schemas/components/radio-group.json +1 -1
- package/schemas/components/rating.json +1 -1
- package/schemas/components/scroll-zoom-bar.json +1 -1
- package/schemas/components/side-navigation.json +1 -1
- package/schemas/components/slider.json +1 -1
- package/schemas/components/status-light.json +1 -1
- package/schemas/components/swatch-group.json +1 -1
- package/schemas/components/swatch.json +1 -1
- package/schemas/components/switch.json +1 -1
- package/schemas/components/tab-bar-ios.json +1 -1
- package/schemas/components/tabs.json +1 -1
- package/schemas/components/tag.json +1 -1
- package/schemas/components/text-area.json +1 -1
- package/schemas/components/text-field.json +1 -1
- package/schemas/components/toast.json +1 -1
- package/schemas/components/tooltip.json +1 -1
- package/schemas/components/tray.json +1 -1
- package/schemas/components/tree-view.json +1 -1
- package/schemas/token-types/alias.json +25 -0
- package/schemas/token-types/color-set.json +78 -0
- package/schemas/token-types/color.json +25 -0
- package/schemas/token-types/dimension.json +25 -0
- package/schemas/token-types/font-family.json +25 -0
- package/schemas/token-types/font-style.json +25 -0
- package/schemas/token-types/font-weight.json +25 -0
- package/schemas/token-types/multiplier.json +25 -0
- package/schemas/token-types/percent.json +25 -0
- package/schemas/token-types/scale-set.json +48 -0
- package/schemas/token-types/set.json +22 -0
- package/schemas/token-types/system-set.json +71 -0
- package/schemas/token-types/text-transform.json +25 -0
- package/schemas/token-types/token.json +27 -0
- package/src/color-aliases.json +376 -0
- package/src/color-component.json +47 -12
- package/src/color-palette.json +985 -0
- package/src/icons.json +175 -0
- package/src/layout-component.json +1394 -0
- package/src/layout.json +432 -0
- package/src/semantic-color-palette.json +98 -0
- package/src/typography.json +295 -0
- package/test/schemaValidators/alias.test.js +41 -0
- package/test/tokenSchemaValidator.test.js +97 -0
- /package/test/{schemaValidator.test.js → componentSchemaValidator.test.js} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @adobe/spectrum-tokens
|
|
2
2
|
|
|
3
|
+
## 12.23.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 0b732aa: Basic types added to tokens
|
|
8
|
+
Added testing for schema types
|
|
9
|
+
|
|
10
|
+
## Token Diff
|
|
11
|
+
|
|
12
|
+
_Tokens modified (3):_
|
|
13
|
+
|
|
14
|
+
- `color-handle-drop-shadow-color`: removed set specific definition
|
|
15
|
+
- `color-handle-outer-border-color`: removed set specific definition
|
|
16
|
+
- `picker-border-width`: added `express` value of 0
|
|
17
|
+
|
|
3
18
|
## 12.22.1
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -70,3 +70,7 @@ npm install --save @adobe/spectrum-tokens
|
|
|
70
70
|
```
|
|
71
71
|
|
|
72
72
|
If you need to use the older and more complete set of tokens side by side with the v12.x.x release while the development of this migration is ongoing, you can use the [`@adobe/spectrum-tokens-depreacated`](https://www.npmjs.com/package/@adobe/spectrum-tokens-deprecated) package, which is an archived release of `@adobe/spectrum-tokens@11.8.0`.
|
|
73
|
+
|
|
74
|
+
## Token Types and `$schema`
|
|
75
|
+
|
|
76
|
+
Tokens now have a `$schema` property that relates to a type defined in the `schemas/token-types/` directory. Even those these are being released as part of the regular releases, they shouldn't be considered formal API yet. There are planned adjustments with further data integration in design tools and workflows. Ideally, designers would be able to author new tokens and manage type across all the data.
|
package/dist/json/drover.json
CHANGED
|
@@ -94,6 +94,7 @@
|
|
|
94
94
|
"code-color": "rgb(34, 34, 34)",
|
|
95
95
|
"color-area-border-color": "rgb(0, 0, 0)",
|
|
96
96
|
"color-area-border-width": "1px",
|
|
97
|
+
"color-handle-drop-shadow-color": "rgba(0, 0, 0, 0.15)",
|
|
97
98
|
"color-handle-inner-border-color": "rgb(0, 0, 0)",
|
|
98
99
|
"color-handle-outer-border-color": "rgb(0, 0, 0)",
|
|
99
100
|
"color-loupe-drop-shadow-color": "rgba(0, 0, 0, 0.25)",
|
|
@@ -535,6 +536,7 @@
|
|
|
535
536
|
"code-color": "rgb(235, 235, 235)",
|
|
536
537
|
"color-area-border-color": "rgb(255, 255, 255)",
|
|
537
538
|
"color-area-border-width": "1px",
|
|
539
|
+
"color-handle-drop-shadow-color": "rgba(0, 0, 0, 0.5)",
|
|
538
540
|
"color-handle-inner-border-color": "rgb(0, 0, 0)",
|
|
539
541
|
"color-handle-outer-border-color": "rgb(0, 0, 0)",
|
|
540
542
|
"color-loupe-drop-shadow-color": "rgba(0, 0, 0, 0.25)",
|
|
@@ -976,6 +978,7 @@
|
|
|
976
978
|
"code-color": "rgb(235, 235, 235)",
|
|
977
979
|
"color-area-border-color": "rgb(255, 255, 255)",
|
|
978
980
|
"color-area-border-width": "1px",
|
|
981
|
+
"color-handle-drop-shadow-color": "rgba(0, 0, 0, 0.8)",
|
|
979
982
|
"color-handle-inner-border-color": "rgb(0, 0, 0)",
|
|
980
983
|
"color-handle-outer-border-color": "rgb(0, 0, 0)",
|
|
981
984
|
"color-loupe-drop-shadow-color": "rgba(0, 0, 0, 0.25)",
|
|
@@ -1509,7 +1512,6 @@
|
|
|
1509
1512
|
"color-handle-border-width": "2px",
|
|
1510
1513
|
"color-handle-inner-border-opacity": "0.42",
|
|
1511
1514
|
"color-handle-inner-border-width": "1px",
|
|
1512
|
-
"color-handle-outer-border-color": "rgb(0, 0, 0)",
|
|
1513
1515
|
"color-handle-outer-border-opacity": "0.42",
|
|
1514
1516
|
"color-handle-outer-border-width": "1px",
|
|
1515
1517
|
"color-handle-size": "16px",
|
package/dist/json/variables.json
CHANGED
|
@@ -7822,13 +7822,9 @@
|
|
|
7822
7822
|
"uuid": "72b473c6-ec9b-4830-a0f8-48b80070e7b8"
|
|
7823
7823
|
},
|
|
7824
7824
|
"color-handle-outer-border-color": {
|
|
7825
|
-
"
|
|
7826
|
-
|
|
7827
|
-
|
|
7828
|
-
"value": "rgb(0, 0, 0)",
|
|
7829
|
-
"uuid": "e4733356-090e-4bb7-b32d-ab9df30fb785"
|
|
7830
|
-
}
|
|
7831
|
-
}
|
|
7825
|
+
"ref": "{black}",
|
|
7826
|
+
"value": "rgb(0, 0, 0)",
|
|
7827
|
+
"uuid": "e4733356-090e-4bb7-b32d-ab9df30fb785"
|
|
7832
7828
|
},
|
|
7833
7829
|
"color-handle-outer-border-opacity": {
|
|
7834
7830
|
"ref": "{color-handle-inner-border-opacity}",
|
|
@@ -7836,30 +7832,26 @@
|
|
|
7836
7832
|
"uuid": "0a0eff89-7e7d-4b7f-bcfa-a85e33e5798a"
|
|
7837
7833
|
},
|
|
7838
7834
|
"color-handle-drop-shadow-color": {
|
|
7835
|
+
"ref": "{drop-shadow-color}",
|
|
7839
7836
|
"sets": {
|
|
7840
|
-
"
|
|
7841
|
-
"
|
|
7842
|
-
"
|
|
7843
|
-
|
|
7844
|
-
|
|
7845
|
-
|
|
7846
|
-
|
|
7847
|
-
|
|
7848
|
-
|
|
7849
|
-
|
|
7850
|
-
|
|
7851
|
-
|
|
7852
|
-
|
|
7853
|
-
|
|
7854
|
-
|
|
7855
|
-
"wireframe": {
|
|
7856
|
-
"value": "rgba(0, 0, 0, 0.15)",
|
|
7857
|
-
"uuid": "1deef94a-efba-4670-a1be-78ee021bdfe8"
|
|
7858
|
-
}
|
|
7859
|
-
},
|
|
7860
|
-
"uuid": "97dfaf7f-ac2d-4517-84cc-6f692f712fc5"
|
|
7837
|
+
"light": {
|
|
7838
|
+
"value": "rgba(0, 0, 0, 0.15)",
|
|
7839
|
+
"uuid": "be45ace6-9227-41d1-80be-0c58c3f8b3cb"
|
|
7840
|
+
},
|
|
7841
|
+
"dark": {
|
|
7842
|
+
"value": "rgba(0, 0, 0, 0.5)",
|
|
7843
|
+
"uuid": "4633ae77-5101-4c62-8253-6406df2613f1"
|
|
7844
|
+
},
|
|
7845
|
+
"darkest": {
|
|
7846
|
+
"value": "rgba(0, 0, 0, 0.8)",
|
|
7847
|
+
"uuid": "e54491a8-d3ca-4d67-bacb-74ac192a387f"
|
|
7848
|
+
},
|
|
7849
|
+
"wireframe": {
|
|
7850
|
+
"value": "rgba(0, 0, 0, 0.15)",
|
|
7851
|
+
"uuid": "1deef94a-efba-4670-a1be-78ee021bdfe8"
|
|
7861
7852
|
}
|
|
7862
|
-
}
|
|
7853
|
+
},
|
|
7854
|
+
"uuid": "97dfaf7f-ac2d-4517-84cc-6f692f712fc5"
|
|
7863
7855
|
},
|
|
7864
7856
|
"floating-action-button-drop-shadow-color": {
|
|
7865
7857
|
"ref": "{transparent-black-300}",
|
|
@@ -15450,6 +15442,10 @@
|
|
|
15450
15442
|
}
|
|
15451
15443
|
},
|
|
15452
15444
|
"uuid": "69c28762-f456-4641-b6ce-7cb295e3a27d"
|
|
15445
|
+
},
|
|
15446
|
+
"express": {
|
|
15447
|
+
"value": "0",
|
|
15448
|
+
"uuid": "45392d0b-b92e-4e60-8b82-4bcfef7877eb"
|
|
15453
15449
|
}
|
|
15454
15450
|
}
|
|
15455
15451
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/action-bar.json",
|
|
4
4
|
"title": "Action bar",
|
|
5
5
|
"description": "Action bars are used for single and bulk selection patterns, when a user needs to perform actions on either a single or multiple items at the same time.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/action-button.json",
|
|
4
4
|
"title": "Action button",
|
|
5
5
|
"description": "Action buttons allow users to perform an action or mark a selection. They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/action-group.json",
|
|
4
4
|
"title": "Action group",
|
|
5
5
|
"description": "An action group is a grouping of action buttons that are related to each other.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/alert-banner.json",
|
|
4
4
|
"title": "Alert banner",
|
|
5
5
|
"description": "Alert banners show pressing and high-signal messages, such as system alerts. They're meant to be noticed and prompt users to take action.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/alert-dialog.json",
|
|
4
4
|
"title": "Alert dialog",
|
|
5
5
|
"description": "Alert dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions until an action is selected.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/avatar.json",
|
|
4
4
|
"title": "Avatar",
|
|
5
5
|
"description": "An avatar is a thumbnail representation of an entity, such as a user or an organization.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/badge.json",
|
|
4
4
|
"title": "Badge",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/body.json",
|
|
4
4
|
"title": "Body",
|
|
5
5
|
"description": "Body is a typography component primarily used within Spectrum components and for blocks of text.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/bottom-navigation-android.json",
|
|
4
4
|
"title": "Bottom navigation (Android)",
|
|
5
5
|
"description": "Bottom navigation is a top-level navigation control for Android apps.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/breadcrumbs.json",
|
|
4
4
|
"title": "Breadcrumbs",
|
|
5
5
|
"description": "Breadcrumbs show hierarchy and navigational context for a user’s location within an app.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/button-group.json",
|
|
4
4
|
"title": "Button group",
|
|
5
5
|
"description": "A button group is a grouping of buttons whose actions are related to each other.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/button.json",
|
|
4
4
|
"title": "Button",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/checkbox-group.json",
|
|
4
4
|
"title": "Checkbox group",
|
|
5
5
|
"description": "A checkbox group is a grouping of checkboxes that are related to each other.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/checkbox.json",
|
|
4
4
|
"title": "Checkbox",
|
|
5
5
|
"description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/close-button.json",
|
|
4
4
|
"title": "Close button",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/code.json",
|
|
4
4
|
"title": "Code",
|
|
5
5
|
"description": "Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/color-area.json",
|
|
4
4
|
"title": "Color area",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/color-loupe.json",
|
|
4
4
|
"title": "Color loupe",
|
|
5
5
|
"description": "A color loupe shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/color-slider.json",
|
|
4
4
|
"title": "Color slider",
|
|
5
5
|
"description": "A color slider lets users visually change an individual channel of a color.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/color-wheel.json",
|
|
4
4
|
"title": "Color wheel",
|
|
5
5
|
"description": "A color wheel lets users visually change an individual channel of a color on a circular track.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/combo-box.json",
|
|
4
4
|
"title": "Combo box",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/contextual-help.json",
|
|
4
4
|
"title": "Contextual help",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/detail.json",
|
|
4
4
|
"title": "Detail",
|
|
5
5
|
"description": "Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/divider.json",
|
|
4
4
|
"title": "Divider",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/field-label.json",
|
|
4
4
|
"title": "Field label",
|
|
5
5
|
"description": "Field labels give context to the information that a user needs to input. They're commonly used in forms.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/heading.json",
|
|
4
4
|
"title": "Heading",
|
|
5
5
|
"description": "Heading is a typography component used to create various levels of hierarchies between text.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/help-text.json",
|
|
4
4
|
"title": "Help text",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/in-line-alert.json",
|
|
4
4
|
"title": "In-line alert",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/link.json",
|
|
4
4
|
"title": "Link",
|
|
5
5
|
"description": "Links allow users to navigate to a different location. They can be presented inside a paragraph or as standalone text.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/menu.json",
|
|
4
4
|
"title": "Menu",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/meter.json",
|
|
4
4
|
"title": "Meter",
|
|
5
5
|
"description": "Meters are visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/picker.json",
|
|
4
4
|
"title": "Picker",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/popover.json",
|
|
4
4
|
"title": "Popover",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/progress-bar.json",
|
|
4
4
|
"title": "Progress bar",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/progress-circle.json",
|
|
4
4
|
"title": "Progress circle",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/radio-group.json",
|
|
4
4
|
"title": "Radio Group",
|
|
5
5
|
"description": "A radio group is a grouping of radio buttons that are related to each other.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/rating.json",
|
|
4
4
|
"title": "Rating",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/scroll-zoom-bar.json",
|
|
4
4
|
"title": "Scroll-zoom bar",
|
|
5
5
|
"description": "Primarily for usage in timelines, a scroll-zoom bar lets a user scroll or zoom with the same control.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/side-navigation.json",
|
|
4
4
|
"title": "Side navigation",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/slider.json",
|
|
4
4
|
"title": "Slider",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/status-light.json",
|
|
4
4
|
"title": "Status light",
|
|
5
5
|
"description": "Status lights describe the condition of an entity. They can be used to convey semantic meaning, such as statuses and categories.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/swatch-group.json",
|
|
4
4
|
"title": "Swatch group",
|
|
5
5
|
"description": "A swatch group is a grouping of swatches that are related to each other.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/swatch.json",
|
|
4
4
|
"title": "Swatch",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/switch.json",
|
|
4
4
|
"title": "Switch",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/tab-bar-ios.json",
|
|
4
4
|
"title": "Tab bar (iOS)",
|
|
5
5
|
"description": "Tab bar is a top-level navigation control for iOS apps.",
|
|
6
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/tabs.json",
|
|
4
4
|
"title": "Tabs",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/tag.json",
|
|
4
4
|
"title": "Tag",
|
|
5
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
6
|
"meta": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
|
|
3
|
-
"$id": "https://opensource.adobe.com/spectrum-tokens/
|
|
3
|
+
"$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/text-area.json",
|
|
4
4
|
"title": "Text area",
|
|
5
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
6
|
"meta": {
|