@hashicorp/design-system-tokens 0.4.3 → 0.4.7
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/devdot/css/helpers/elevation.css +14 -14
- package/devdot/css/helpers/focus-ring.css +6 -0
- package/devdot/css/helpers/typography.css +1 -1
- package/devdot/css/tokens.css +15 -70
- package/docs/devdot/tokens.json +120 -1369
- package/docs/products/tokens.json +120 -1369
- package/package.json +1 -1
- package/products/css/helpers/elevation.css +14 -14
- package/products/css/helpers/focus-ring.css +6 -0
- package/products/css/helpers/typography.css +1 -1
- package/products/css/tokens.css +15 -70
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 03 Feb 2022 15:12:12 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 Thu, 03 Feb 2022 15:19:35 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -177,75 +177,20 @@
|
|
|
177
177
|
--token-color-waypoint-gradient-primary-stop: #62d4dc;
|
|
178
178
|
--token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */
|
|
179
179
|
--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;
|
|
180
|
+
--token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a;
|
|
181
|
+
--token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
|
|
182
|
+
--token-elevation-mid-box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
|
|
183
|
+
--token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
|
|
184
|
+
--token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
|
|
185
|
+
--token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4580, 0px 12px 24px 0px #3b3d4599;
|
|
186
|
+
--token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a;
|
|
187
|
+
--token-surface-base-box-shadow: 0 0 0 1px #656a7633;
|
|
188
|
+
--token-surface-low-box-shadow: 0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
|
|
189
|
+
--token-surface-mid-box-shadow: 0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
|
|
190
|
+
--token-surface-high-box-shadow: 0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
|
|
191
|
+
--token-surface-higher-box-shadow: 0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
|
|
192
|
+
--token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4566, 0px 2px 3px 0px #3b3d4580, 0px 12px 24px 0px #3b3d4599;
|
|
193
|
+
--token-focus-ring-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff;
|
|
249
194
|
--token-typography-font-stack-display: -apple-system, BlinkMacSystemFont, SF Pro Display, Segoe UI Display, Ubuntu, sans-serif;
|
|
250
195
|
--token-typography-font-stack-text: -apple-system, BlinkMacSystemFont, SF Pro Text, Segoe UI Text, Ubuntu, sans-serif;
|
|
251
196
|
--token-typography-font-stack-code: SF Mono, Consolas, Ubuntu Mono, monospace;
|