@hashicorp/design-system-tokens 0.4.5 → 0.5.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/README.md +27 -2
- package/devdot/css/helpers/elevation.css +14 -14
- package/devdot/css/helpers/focus-ring.css +1 -1
- package/devdot/css/helpers/typography.css +1 -1
- package/devdot/css/tokens.css +134 -143
- package/docs/devdot/tokens.json +1714 -1849
- package/docs/products/tokens.json +1703 -1861
- package/package.json +1 -1
- package/products/css/helpers/elevation.css +14 -14
- package/products/css/helpers/focus-ring.css +1 -1
- package/products/css/helpers/typography.css +1 -1
- package/products/css/tokens.css +133 -143
package/README.md
CHANGED
|
@@ -4,9 +4,34 @@ A package containing the design tokens of the HashiCorp Design System.
|
|
|
4
4
|
|
|
5
5
|
[](https://badge.fury.io/js/%40hashicorp%2Fdesign-system-tokens)
|
|
6
6
|
|
|
7
|
-
##
|
|
7
|
+
## Compatibility
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
Any platform/framework that can process CSS files and can use CSS custom properties ("variables") or use CSS helper classes.
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
yarn add @hashicorp/design-system-tokens
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Then import one of those files in your app's style file (`app.scss` or similar):
|
|
18
|
+
|
|
19
|
+
```js
|
|
20
|
+
// to use design tokens as CSS variables
|
|
21
|
+
//
|
|
22
|
+
~/products/css/tokens.css // for products applications
|
|
23
|
+
~/devdot/css/tokens.css // for devdot platform
|
|
24
|
+
|
|
25
|
+
// to use the CSS helper classes
|
|
26
|
+
//
|
|
27
|
+
~/[products|devdot]/css/helpers/elevation.css // for elevation styles
|
|
28
|
+
~/[products|devdot]/css/helpers/typography.css // for typographic styles
|
|
29
|
+
~/[products|devdot]/css/helpers/focus-ring.css // for focus-ring style
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Usage
|
|
33
|
+
|
|
34
|
+
See the dedicated page on the components website: https://design-system-components-hashicorp.vercel.app/foundations/tokens
|
|
10
35
|
|
|
11
36
|
## Contributing
|
|
12
37
|
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 22 Feb 2022 21:05:19 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
.hds-elevation-inset { box-shadow:
|
|
7
|
-
.hds-elevation-low { box-shadow:
|
|
8
|
-
.hds-elevation-mid { box-shadow:
|
|
9
|
-
.hds-elevation-high { box-shadow:
|
|
10
|
-
.hds-elevation-higher { box-shadow:
|
|
11
|
-
.hds-elevation-overlay { box-shadow:
|
|
12
|
-
.hds-surface-inset { box-shadow:
|
|
13
|
-
.hds-surface-base { box-shadow:
|
|
14
|
-
.hds-surface-low { box-shadow:
|
|
15
|
-
.hds-surface-mid { box-shadow:
|
|
16
|
-
.hds-surface-high { box-shadow:
|
|
17
|
-
.hds-surface-higher { box-shadow:
|
|
18
|
-
.hds-surface-overlay { box-shadow:
|
|
6
|
+
.hds-elevation-inset { box-shadow: var(--token-elevation-inset-box-shadow); }
|
|
7
|
+
.hds-elevation-low { box-shadow: var(--token-elevation-low-box-shadow); }
|
|
8
|
+
.hds-elevation-mid { box-shadow: var(--token-elevation-mid-box-shadow); }
|
|
9
|
+
.hds-elevation-high { box-shadow: var(--token-elevation-high-box-shadow); }
|
|
10
|
+
.hds-elevation-higher { box-shadow: var(--token-elevation-higher-box-shadow); }
|
|
11
|
+
.hds-elevation-overlay { box-shadow: var(--token-elevation-overlay-box-shadow); }
|
|
12
|
+
.hds-surface-inset { box-shadow: var(--token-surface-inset-box-shadow); }
|
|
13
|
+
.hds-surface-base { box-shadow: var(--token-surface-base-box-shadow); }
|
|
14
|
+
.hds-surface-low { box-shadow: var(--token-surface-low-box-shadow); }
|
|
15
|
+
.hds-surface-mid { box-shadow: var(--token-surface-mid-box-shadow); }
|
|
16
|
+
.hds-surface-high { box-shadow: var(--token-surface-high-box-shadow); }
|
|
17
|
+
.hds-surface-higher { box-shadow: var(--token-surface-higher-box-shadow); }
|
|
18
|
+
.hds-surface-overlay { box-shadow: var(--token-surface-overlay-box-shadow); }
|
package/devdot/css/tokens.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Fri, 04 Mar 2022 17:12:28 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -46,74 +46,121 @@
|
|
|
46
46
|
--token-color-palette-alpha-300: #3b3d4566;
|
|
47
47
|
--token-color-palette-alpha-200: #656a7633;
|
|
48
48
|
--token-color-palette-alpha-100: #656a761a;
|
|
49
|
-
--token-color-action-foreground-primary: #1060ff;
|
|
50
|
-
--token-color-action-foreground-on-faint: #0c56e9;
|
|
51
|
-
--token-color-action-foreground-high-contrast: #1c345f;
|
|
52
|
-
--token-color-action-background-primary: #1060ff;
|
|
53
|
-
--token-color-action-background-hover: #0c56e9;
|
|
54
|
-
--token-color-action-background-active: #0046d1;
|
|
55
|
-
--token-color-action-background-faint: #f2f8ff;
|
|
56
|
-
--token-color-action-border-primary: #1060ff;
|
|
57
|
-
--token-color-action-border-on-primary: #0c56e9;
|
|
58
|
-
--token-color-action-border-on-hover: #0046d1;
|
|
59
|
-
--token-color-action-border-on-faint: #cce3fe;
|
|
60
|
-
--token-color-highlight-foreground-primary: #a737ff;
|
|
61
|
-
--token-color-highlight-foreground-on-faint: #911ced;
|
|
62
|
-
--token-color-highlight-foreground-high-contrast: #42215b;
|
|
63
|
-
--token-color-highlight-background-primary: #a737ff;
|
|
64
|
-
--token-color-highlight-background-hover: #911ced;
|
|
65
|
-
--token-color-highlight-background-active: #7b00db;
|
|
66
|
-
--token-color-highlight-background-faint: #f9f2ff;
|
|
67
|
-
--token-color-highlight-border-primary: #a737ff;
|
|
68
|
-
--token-color-highlight-border-on-primary: #911ced;
|
|
69
|
-
--token-color-highlight-border-on-hover: #7b00db;
|
|
70
|
-
--token-color-highlight-border-on-faint: #ead2fe;
|
|
71
|
-
--token-color-success-foreground-primary: #008a22;
|
|
72
|
-
--token-color-success-foreground-on-faint: #00781e;
|
|
73
|
-
--token-color-success-foreground-high-contrast: #054220;
|
|
74
|
-
--token-color-success-background-primary: #008a22;
|
|
75
|
-
--token-color-success-background-hover: #00781e;
|
|
76
|
-
--token-color-success-background-active: #006619;
|
|
77
|
-
--token-color-success-background-faint: #f2fbf6;
|
|
78
|
-
--token-color-success-border-primary: #008a22;
|
|
79
|
-
--token-color-success-border-on-primary: #00781e;
|
|
80
|
-
--token-color-success-border-on-hover: #006619;
|
|
81
|
-
--token-color-success-border-on-faint: #cceeda;
|
|
82
|
-
--token-color-warning-foreground-primary: #bb5a00;
|
|
83
|
-
--token-color-warning-foreground-on-faint: #9e4b00;
|
|
84
|
-
--token-color-warning-foreground-high-contrast: #542800;
|
|
85
|
-
--token-color-warning-background-primary: #bb5a00;
|
|
86
|
-
--token-color-warning-background-hover: #9e4b00;
|
|
87
|
-
--token-color-warning-background-active: #803d00;
|
|
88
|
-
--token-color-warning-background-faint: #fff9e8;
|
|
89
|
-
--token-color-warning-border-primary: #bb5a00;
|
|
90
|
-
--token-color-warning-border-on-primary: #9e4b00;
|
|
91
|
-
--token-color-warning-border-on-hover: #803d00;
|
|
92
|
-
--token-color-warning-border-on-faint: #fbeabf;
|
|
93
|
-
--token-color-critical-foreground-primary: #e52228;
|
|
94
|
-
--token-color-critical-foreground-on-faint: #c00005;
|
|
95
|
-
--token-color-critical-foreground-high-contrast: #51130a;
|
|
96
|
-
--token-color-critical-background-primary: #e52228;
|
|
97
|
-
--token-color-critical-background-hover: #c00005;
|
|
98
|
-
--token-color-critical-background-active: #940004;
|
|
99
|
-
--token-color-critical-background-faint: #fff5f5;
|
|
100
|
-
--token-color-critical-border-primary: #e52228;
|
|
101
|
-
--token-color-critical-border-on-primary: #c00005;
|
|
102
|
-
--token-color-critical-border-on-hover: #940004;
|
|
103
|
-
--token-color-critical-border-on-faint: #fbd4d4;
|
|
104
|
-
--token-color-
|
|
105
|
-
--token-color-
|
|
106
|
-
--token-color-
|
|
107
|
-
--token-color-
|
|
108
|
-
--token-color-
|
|
109
|
-
--token-color-
|
|
110
|
-
--token-color-
|
|
111
|
-
--token-color-
|
|
112
|
-
--token-color-
|
|
49
|
+
--token-color-action-foreground-primary: #1060ff; /* deprecated: replace with 'color-foreground-action' */
|
|
50
|
+
--token-color-action-foreground-on-faint: #0c56e9; /* deprecated: please speak with the HDS team to decide which color to use as alternative' */
|
|
51
|
+
--token-color-action-foreground-high-contrast: #1c345f; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
52
|
+
--token-color-action-background-primary: #1060ff; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
53
|
+
--token-color-action-background-hover: #0c56e9; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
54
|
+
--token-color-action-background-active: #0046d1; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
55
|
+
--token-color-action-background-faint: #f2f8ff; /* deprecated: replace with 'color-background-action' */
|
|
56
|
+
--token-color-action-border-primary: #1060ff; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
57
|
+
--token-color-action-border-on-primary: #0c56e9; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
58
|
+
--token-color-action-border-on-hover: #0046d1; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
59
|
+
--token-color-action-border-on-faint: #cce3fe; /* deprecated: replace with 'color-border-action' */
|
|
60
|
+
--token-color-highlight-foreground-primary: #a737ff; /* deprecated: replace with 'color-foreground-highlight' */
|
|
61
|
+
--token-color-highlight-foreground-on-faint: #911ced; /* deprecated: replace with 'color-foreground-highlight-on-surface' */
|
|
62
|
+
--token-color-highlight-foreground-high-contrast: #42215b; /* deprecated: replace with 'color-highlight-high-contrast' */
|
|
63
|
+
--token-color-highlight-background-primary: #a737ff; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
64
|
+
--token-color-highlight-background-hover: #911ced; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
65
|
+
--token-color-highlight-background-active: #7b00db; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
66
|
+
--token-color-highlight-background-faint: #f9f2ff; /* deprecated: replace with 'color-background-highlight' */
|
|
67
|
+
--token-color-highlight-border-primary: #a737ff; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
68
|
+
--token-color-highlight-border-on-primary: #911ced; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
69
|
+
--token-color-highlight-border-on-hover: #7b00db; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
70
|
+
--token-color-highlight-border-on-faint: #ead2fe; /* deprecated: replace with 'color-border-highlight' */
|
|
71
|
+
--token-color-success-foreground-primary: #008a22; /* deprecated: replace with 'color-foreground-success' */
|
|
72
|
+
--token-color-success-foreground-on-faint: #00781e; /* deprecated: replace with 'color-foreground-success-on-surface' */
|
|
73
|
+
--token-color-success-foreground-high-contrast: #054220; /* deprecated: replace with 'color-foreground-success-high-contrast' */
|
|
74
|
+
--token-color-success-background-primary: #008a22; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
75
|
+
--token-color-success-background-hover: #00781e; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
76
|
+
--token-color-success-background-active: #006619; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
77
|
+
--token-color-success-background-faint: #f2fbf6; /* deprecated: replace with 'color-background-success' */
|
|
78
|
+
--token-color-success-border-primary: #008a22; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
79
|
+
--token-color-success-border-on-primary: #00781e; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
80
|
+
--token-color-success-border-on-hover: #006619; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
81
|
+
--token-color-success-border-on-faint: #cceeda; /* deprecated: replace with 'color-border-success' */
|
|
82
|
+
--token-color-warning-foreground-primary: #bb5a00; /* deprecated: replace with 'color-foreground-warning' */
|
|
83
|
+
--token-color-warning-foreground-on-faint: #9e4b00; /* deprecated: replace with 'color-foreground-warning-on-surface' */
|
|
84
|
+
--token-color-warning-foreground-high-contrast: #542800; /* deprecated: replace with 'color-foreground-warning-high-contrast' */
|
|
85
|
+
--token-color-warning-background-primary: #bb5a00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
86
|
+
--token-color-warning-background-hover: #9e4b00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
87
|
+
--token-color-warning-background-active: #803d00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
88
|
+
--token-color-warning-background-faint: #fff9e8; /* deprecated: replace with 'color-background-warning' */
|
|
89
|
+
--token-color-warning-border-primary: #bb5a00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
90
|
+
--token-color-warning-border-on-primary: #9e4b00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
91
|
+
--token-color-warning-border-on-hover: #803d00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
92
|
+
--token-color-warning-border-on-faint: #fbeabf; /* deprecated: replace with 'color-border-warning' */
|
|
93
|
+
--token-color-critical-foreground-primary: #e52228; /* deprecated: replace with 'color-foreground-critical' */
|
|
94
|
+
--token-color-critical-foreground-on-faint: #c00005; /* deprecated: replace with 'color-foreground-critical-on-surface' */
|
|
95
|
+
--token-color-critical-foreground-high-contrast: #51130a; /* deprecated: replace with 'color-foreground-critical-high-contrast' */
|
|
96
|
+
--token-color-critical-background-primary: #e52228; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
97
|
+
--token-color-critical-background-hover: #c00005; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
98
|
+
--token-color-critical-background-active: #940004; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
99
|
+
--token-color-critical-background-faint: #fff5f5; /* deprecated: replace with 'color-background-critical' */
|
|
100
|
+
--token-color-critical-border-primary: #e52228; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
101
|
+
--token-color-critical-border-on-primary: #c00005; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
102
|
+
--token-color-critical-border-on-hover: #940004; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
|
|
103
|
+
--token-color-critical-border-on-faint: #fbd4d4; /* deprecated: replace with 'color-border-critical' */
|
|
104
|
+
--token-color-border-primary: #656a7633;
|
|
105
|
+
--token-color-border-faint: #656a761a;
|
|
106
|
+
--token-color-border-strong: #3b3d4566;
|
|
107
|
+
--token-color-border-action: #cce3fe;
|
|
108
|
+
--token-color-border-highlight: #ead2fe;
|
|
109
|
+
--token-color-border-success: #cceeda;
|
|
110
|
+
--token-color-border-warning: #fbeabf;
|
|
111
|
+
--token-color-border-critical: #fbd4d4;
|
|
112
|
+
--token-color-focus-action-internal: #0c56e9;
|
|
113
|
+
--token-color-focus-action-external: #5990ff; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */
|
|
114
|
+
--token-color-focus-critical-internal: #c00005;
|
|
115
|
+
--token-color-focus-critical-external: #dd7578; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */
|
|
116
|
+
--token-color-foreground-strong: #0c0c0e;
|
|
117
|
+
--token-color-foreground-primary: #3b3d45;
|
|
118
|
+
--token-color-foreground-faint: #656a76;
|
|
119
|
+
--token-color-foreground-high-contrast: #ffffff;
|
|
120
|
+
--token-color-foreground-disabled: #8c909c;
|
|
121
|
+
--token-color-foreground-action: #1060ff;
|
|
122
|
+
--token-color-foreground-action-hover: #0c56e9;
|
|
123
|
+
--token-color-foreground-action-active: #0046d1;
|
|
124
|
+
--token-color-foreground-highlight: #a737ff;
|
|
125
|
+
--token-color-foreground-highlight-on-surface: #911ced;
|
|
126
|
+
--token-color-foreground-highlight-high-contrast: #42215b;
|
|
127
|
+
--token-color-foreground-success: #008a22;
|
|
128
|
+
--token-color-foreground-success-on-surface: #00781e;
|
|
129
|
+
--token-color-foreground-success-high-contrast: #054220;
|
|
130
|
+
--token-color-foreground-warning: #bb5a00;
|
|
131
|
+
--token-color-foreground-warning-on-surface: #9e4b00;
|
|
132
|
+
--token-color-foreground-warning-high-contrast: #542800;
|
|
133
|
+
--token-color-foreground-critical: #e52228;
|
|
134
|
+
--token-color-foreground-critical-on-surface: #c00005;
|
|
135
|
+
--token-color-foreground-critical-high-contrast: #51130a;
|
|
136
|
+
--token-color-foreground-action-visited: #a737ff; /* This extra color is unique for the DevDot platform (the 'visited' state of a link is not differentiated in the products applications). */
|
|
137
|
+
--token-color-neutral-foreground-primary: #0c0c0e; /* deprecated: replace with 'token-color-foreground-primary' */
|
|
138
|
+
--token-color-neutral-foreground-secondary: #3b3d45; /* deprecated: replace with 'token-color-foreground-secondary' */
|
|
139
|
+
--token-color-neutral-foreground-faint: #656a76; /* deprecated: replace with 'token-color-foreground-faint' */
|
|
140
|
+
--token-color-neutral-background-primary: #ffffff; /* deprecated: replace with 'token-color-background-primary' */
|
|
141
|
+
--token-color-neutral-background-secondary: #fafafa; /* deprecated: replace with 'token-color-background-secondary' */
|
|
142
|
+
--token-color-neutral-background-base: #ffffff; /* deprecated: replace with 'token-color-surface-primary' */
|
|
143
|
+
--token-color-neutral-border-primary: #656a7633; /* deprecated: replace with 'token-color-border-primary' */
|
|
144
|
+
--token-color-neutral-border-faint: #656a761a; /* deprecated: replace with 'token-color-border-faint' */
|
|
145
|
+
--token-color-neutral-border-strong: #3b3d4566; /* deprecated: replace with 'token-color-border-strong' */
|
|
146
|
+
--token-color-page-primary: #ffffff;
|
|
147
|
+
--token-color-page-faint: #fafafa;
|
|
148
|
+
--token-color-surface-primary: #ffffff;
|
|
149
|
+
--token-color-surface-faint: #fafafa;
|
|
150
|
+
--token-color-surface-strong: #f1f2f3;
|
|
151
|
+
--token-color-surface-interactive: #ffffff;
|
|
152
|
+
--token-color-surface-interactive-hover: #f1f2f3;
|
|
153
|
+
--token-color-surface-interactive-active: #dedfe3;
|
|
154
|
+
--token-color-surface-interactive-disabled: #fafafa;
|
|
155
|
+
--token-color-surface-action: #f2f8ff;
|
|
156
|
+
--token-color-surface-highlight: #f9f2ff;
|
|
157
|
+
--token-color-surface-success: #f2fbf6;
|
|
158
|
+
--token-color-surface-warning: #fff9e8;
|
|
159
|
+
--token-color-surface-critical: #fff5f5;
|
|
113
160
|
--token-color-hashicorp-brand: #000000;
|
|
114
161
|
--token-color-boundary-brand: #f24c53;
|
|
115
162
|
--token-color-boundary-foreground: #cf2d32;
|
|
116
|
-
--token-color-boundary-
|
|
163
|
+
--token-color-boundary-surface: #ffecec;
|
|
117
164
|
--token-color-boundary-border: #fbd7d8;
|
|
118
165
|
--token-color-boundary-gradient-primary-start: #f97076;
|
|
119
166
|
--token-color-boundary-gradient-primary-stop: #db363b;
|
|
@@ -121,7 +168,7 @@
|
|
|
121
168
|
--token-color-boundary-gradient-faint-stop: #ffecec;
|
|
122
169
|
--token-color-consul-brand: #e03875;
|
|
123
170
|
--token-color-consul-foreground: #d01c5b;
|
|
124
|
-
--token-color-consul-
|
|
171
|
+
--token-color-consul-surface: #ffe9f1;
|
|
125
172
|
--token-color-consul-border: #ffcede;
|
|
126
173
|
--token-color-consul-gradient-primary-start: #ff99be;
|
|
127
174
|
--token-color-consul-gradient-primary-stop: #da306e;
|
|
@@ -130,7 +177,7 @@
|
|
|
130
177
|
--token-color-hcp-brand: #000000;
|
|
131
178
|
--token-color-nomad-brand: #06d092;
|
|
132
179
|
--token-color-nomad-foreground: #008661;
|
|
133
|
-
--token-color-nomad-
|
|
180
|
+
--token-color-nomad-surface: #d3fdeb;
|
|
134
181
|
--token-color-nomad-border: #bff3dd;
|
|
135
182
|
--token-color-nomad-gradient-primary-start: #bff3dd;
|
|
136
183
|
--token-color-nomad-gradient-primary-stop: #60dea9;
|
|
@@ -138,7 +185,7 @@
|
|
|
138
185
|
--token-color-nomad-gradient-faint-stop: #d3fdeb;
|
|
139
186
|
--token-color-packer-brand: #02a8ef;
|
|
140
187
|
--token-color-packer-foreground: #007eb4;
|
|
141
|
-
--token-color-packer-
|
|
188
|
+
--token-color-packer-surface: #d4f2ff;
|
|
142
189
|
--token-color-packer-border: #b4e4ff;
|
|
143
190
|
--token-color-packer-gradient-primary-start: #b4e4ff;
|
|
144
191
|
--token-color-packer-gradient-primary-stop: #63d0ff;
|
|
@@ -146,7 +193,7 @@
|
|
|
146
193
|
--token-color-packer-gradient-faint-stop: #d4f2ff;
|
|
147
194
|
--token-color-terraform-brand: #7b42bc;
|
|
148
195
|
--token-color-terraform-foreground: #773cb4;
|
|
149
|
-
--token-color-terraform-
|
|
196
|
+
--token-color-terraform-surface: #f4ecff;
|
|
150
197
|
--token-color-terraform-border: #ebdbfc;
|
|
151
198
|
--token-color-terraform-gradient-primary-start: #bb8deb;
|
|
152
199
|
--token-color-terraform-gradient-primary-stop: #844fba;
|
|
@@ -154,7 +201,7 @@
|
|
|
154
201
|
--token-color-terraform-gradient-faint-stop: #f4ecff;
|
|
155
202
|
--token-color-vagrant-brand: #1868f2;
|
|
156
203
|
--token-color-vagrant-foreground: #1c61d8;
|
|
157
|
-
--token-color-vagrant-
|
|
204
|
+
--token-color-vagrant-surface: #d6ebff;
|
|
158
205
|
--token-color-vagrant-border: #c7dbfc;
|
|
159
206
|
--token-color-vagrant-gradient-primary-start: #c7dbfc;
|
|
160
207
|
--token-color-vagrant-gradient-primary-stop: #7dadff;
|
|
@@ -163,7 +210,7 @@
|
|
|
163
210
|
--token-color-vault-brand: #ffd814;
|
|
164
211
|
--token-color-vault-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */
|
|
165
212
|
--token-color-vault-foreground: #9a6f00;
|
|
166
|
-
--token-color-vault-
|
|
213
|
+
--token-color-vault-surface: #fff9cf;
|
|
167
214
|
--token-color-vault-border: #feec7b;
|
|
168
215
|
--token-color-vault-gradient-primary-start: #feec7b;
|
|
169
216
|
--token-color-vault-gradient-primary-stop: #ffe543;
|
|
@@ -171,82 +218,26 @@
|
|
|
171
218
|
--token-color-vault-gradient-faint-stop: #fff9cf;
|
|
172
219
|
--token-color-waypoint-brand: #14c6cb;
|
|
173
220
|
--token-color-waypoint-foreground: #008196;
|
|
174
|
-
--token-color-waypoint-
|
|
221
|
+
--token-color-waypoint-surface: #e0fcff;
|
|
175
222
|
--token-color-waypoint-border: #cbf1f3;
|
|
176
223
|
--token-color-waypoint-gradient-primary-start: #cbf1f3;
|
|
177
224
|
--token-color-waypoint-gradient-primary-stop: #62d4dc;
|
|
178
225
|
--token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */
|
|
179
226
|
--token-color-waypoint-gradient-faint-stop: #e0fcff;
|
|
180
|
-
--token-elevation-inset-shadow
|
|
181
|
-
--token-elevation-
|
|
182
|
-
--token-elevation-
|
|
183
|
-
--token-elevation-
|
|
184
|
-
--token-elevation-
|
|
185
|
-
--token-elevation-
|
|
186
|
-
--token-
|
|
187
|
-
--token-
|
|
188
|
-
--token-
|
|
189
|
-
--token-
|
|
190
|
-
--token-
|
|
191
|
-
--token-
|
|
192
|
-
--token-
|
|
193
|
-
--token-
|
|
194
|
-
--token-elevation-low-shadow-02-x: 0px;
|
|
195
|
-
--token-elevation-low-shadow-02-y: 2px;
|
|
196
|
-
--token-elevation-low-shadow-02-blur: 2px;
|
|
197
|
-
--token-elevation-low-shadow-02-spread: 0px;
|
|
198
|
-
--token-elevation-low-shadow-02-color: #656a760d;
|
|
199
|
-
--token-elevation-low-border-width: 1px;
|
|
200
|
-
--token-elevation-low-border-color: #656a7626;
|
|
201
|
-
--token-elevation-mid-shadow-01-x: 0px;
|
|
202
|
-
--token-elevation-mid-shadow-01-y: 2px;
|
|
203
|
-
--token-elevation-mid-shadow-01-blur: 3px;
|
|
204
|
-
--token-elevation-mid-shadow-01-spread: 0px;
|
|
205
|
-
--token-elevation-mid-shadow-01-color: #656a761a;
|
|
206
|
-
--token-elevation-mid-shadow-02-x: 0px;
|
|
207
|
-
--token-elevation-mid-shadow-02-y: 8px;
|
|
208
|
-
--token-elevation-mid-shadow-02-blur: 16px;
|
|
209
|
-
--token-elevation-mid-shadow-02-spread: -10px;
|
|
210
|
-
--token-elevation-mid-shadow-02-color: #656a7633;
|
|
211
|
-
--token-elevation-mid-border-width: 1px;
|
|
212
|
-
--token-elevation-mid-border-color: #656a7626;
|
|
213
|
-
--token-elevation-high-shadow-01-x: 0px;
|
|
214
|
-
--token-elevation-high-shadow-01-y: 2px;
|
|
215
|
-
--token-elevation-high-shadow-01-blur: 3px;
|
|
216
|
-
--token-elevation-high-shadow-01-spread: 0px;
|
|
217
|
-
--token-elevation-high-shadow-01-color: #656a7626;
|
|
218
|
-
--token-elevation-high-shadow-02-x: 0px;
|
|
219
|
-
--token-elevation-high-shadow-02-y: 16px;
|
|
220
|
-
--token-elevation-high-shadow-02-blur: 16px;
|
|
221
|
-
--token-elevation-high-shadow-02-spread: -10px;
|
|
222
|
-
--token-elevation-high-shadow-02-color: #656a7633;
|
|
223
|
-
--token-elevation-high-border-width: 1px;
|
|
224
|
-
--token-elevation-high-border-color: #656a7640;
|
|
225
|
-
--token-elevation-higher-shadow-01-x: 0px;
|
|
226
|
-
--token-elevation-higher-shadow-01-y: 2px;
|
|
227
|
-
--token-elevation-higher-shadow-01-blur: 3px;
|
|
228
|
-
--token-elevation-higher-shadow-01-spread: 0px;
|
|
229
|
-
--token-elevation-higher-shadow-01-color: #656a761a;
|
|
230
|
-
--token-elevation-higher-shadow-02-x: 0px;
|
|
231
|
-
--token-elevation-higher-shadow-02-y: 12px;
|
|
232
|
-
--token-elevation-higher-shadow-02-blur: 28px;
|
|
233
|
-
--token-elevation-higher-shadow-02-spread: 0px;
|
|
234
|
-
--token-elevation-higher-shadow-02-color: #656a7640;
|
|
235
|
-
--token-elevation-higher-border-width: 1px;
|
|
236
|
-
--token-elevation-higher-border-color: #656a7633;
|
|
237
|
-
--token-elevation-overlay-shadow-01-x: 0px;
|
|
238
|
-
--token-elevation-overlay-shadow-01-y: 2px;
|
|
239
|
-
--token-elevation-overlay-shadow-01-blur: 3px;
|
|
240
|
-
--token-elevation-overlay-shadow-01-spread: 0px;
|
|
241
|
-
--token-elevation-overlay-shadow-01-color: #3b3d4580;
|
|
242
|
-
--token-elevation-overlay-shadow-02-x: 0px;
|
|
243
|
-
--token-elevation-overlay-shadow-02-y: 12px;
|
|
244
|
-
--token-elevation-overlay-shadow-02-blur: 24px;
|
|
245
|
-
--token-elevation-overlay-shadow-02-spread: 0px;
|
|
246
|
-
--token-elevation-overlay-shadow-02-color: #3b3d4599;
|
|
247
|
-
--token-elevation-overlay-border-width: 1px;
|
|
248
|
-
--token-elevation-overlay-border-color: #3b3d4566;
|
|
249
|
-
--token-focus-ring-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 1px #5990ff;
|
|
227
|
+
--token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a;
|
|
228
|
+
--token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
|
|
229
|
+
--token-elevation-mid-box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
|
|
230
|
+
--token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
|
|
231
|
+
--token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
|
|
232
|
+
--token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4580, 0px 12px 24px 0px #3b3d4599;
|
|
233
|
+
--token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a;
|
|
234
|
+
--token-surface-base-box-shadow: 0 0 0 1px #656a7633;
|
|
235
|
+
--token-surface-low-box-shadow: 0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
|
|
236
|
+
--token-surface-mid-box-shadow: 0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
|
|
237
|
+
--token-surface-high-box-shadow: 0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
|
|
238
|
+
--token-surface-higher-box-shadow: 0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
|
|
239
|
+
--token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4566, 0px 2px 3px 0px #3b3d4580, 0px 12px 24px 0px #3b3d4599;
|
|
240
|
+
--token-focus-ring-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff;
|
|
250
241
|
--token-typography-font-stack-display: -apple-system, BlinkMacSystemFont, SF Pro Display, Segoe UI Display, Ubuntu, sans-serif;
|
|
251
242
|
--token-typography-font-stack-text: -apple-system, BlinkMacSystemFont, SF Pro Text, Segoe UI Text, Ubuntu, sans-serif;
|
|
252
243
|
--token-typography-font-stack-code: SF Mono, Consolas, Ubuntu Mono, monospace;
|