@hashicorp/design-system-tokens 2.2.1 → 2.2.2
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 +10 -0
- package/dist/cloud-email/helpers/color.css +1 -2
- package/dist/cloud-email/helpers/elevation.css +3 -4
- package/dist/cloud-email/helpers/focus-ring.css +1 -2
- package/dist/cloud-email/helpers/typography.css +1 -2
- package/dist/cloud-email/tokens.scss +3 -4
- package/dist/devdot/css/helpers/color.css +1 -2
- package/dist/devdot/css/helpers/elevation.css +3 -4
- package/dist/devdot/css/helpers/focus-ring.css +1 -2
- package/dist/devdot/css/helpers/typography.css +1 -2
- package/dist/devdot/css/tokens.css +45 -22
- package/dist/docs/products/tokens.json +1000 -478
- package/dist/marketing/css/helpers/color.css +1 -2
- package/dist/marketing/css/helpers/elevation.css +3 -4
- package/dist/marketing/css/helpers/focus-ring.css +1 -2
- package/dist/marketing/css/helpers/typography.css +1 -2
- package/dist/marketing/css/tokens.css +45 -22
- package/dist/marketing/tokens.json +1287 -685
- package/dist/products/css/helpers/color.css +1 -2
- package/dist/products/css/helpers/elevation.css +3 -4
- package/dist/products/css/helpers/focus-ring.css +1 -2
- package/dist/products/css/helpers/typography.css +1 -2
- package/dist/products/css/tokens.css +45 -22
- package/package.json +14 -11
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Do not edit directly
|
|
3
|
-
* Generated on Tue, 27 Aug 2024 16:41:13 GMT
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
4
3
|
*/
|
|
5
4
|
|
|
6
|
-
.hds-elevation-high { box-shadow: var(--token-elevation-high-box-shadow); }
|
|
7
|
-
.hds-elevation-higher { box-shadow: var(--token-elevation-higher-box-shadow); }
|
|
8
5
|
.hds-elevation-inset { box-shadow: var(--token-elevation-inset-box-shadow); }
|
|
9
6
|
.hds-elevation-low { box-shadow: var(--token-elevation-low-box-shadow); }
|
|
10
7
|
.hds-elevation-mid { box-shadow: var(--token-elevation-mid-box-shadow); }
|
|
8
|
+
.hds-elevation-high { box-shadow: var(--token-elevation-high-box-shadow); }
|
|
9
|
+
.hds-elevation-higher { box-shadow: var(--token-elevation-higher-box-shadow); }
|
|
11
10
|
.hds-elevation-overlay { box-shadow: var(--token-elevation-overlay-box-shadow); }
|
|
12
11
|
.hds-surface-inset { box-shadow: var(--token-surface-inset-box-shadow); }
|
|
13
12
|
.hds-surface-base { box-shadow: var(--token-surface-base-box-shadow); }
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Do not edit directly
|
|
3
|
-
* Generated on Tue, 27 Aug 2024 16:41:13 GMT
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
4
3
|
*/
|
|
5
4
|
|
|
6
5
|
:root {
|
|
@@ -178,11 +177,11 @@
|
|
|
178
177
|
--token-color-waypoint-gradient-primary-stop: #62d4dc;
|
|
179
178
|
--token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */
|
|
180
179
|
--token-color-waypoint-gradient-faint-stop: #e0fcff;
|
|
181
|
-
--token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
|
|
182
|
-
--token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
|
|
183
180
|
--token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a;
|
|
184
181
|
--token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
|
|
185
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;
|
|
186
185
|
--token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
|
|
187
186
|
--token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a;
|
|
188
187
|
--token-surface-base-box-shadow: 0 0 0 1px #656a7633;
|
|
@@ -193,6 +192,47 @@
|
|
|
193
192
|
--token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
|
|
194
193
|
--token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff;
|
|
195
194
|
--token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578;
|
|
195
|
+
--token-app-header-height: 60px;
|
|
196
|
+
--token-app-header-home-link-size: 36px;
|
|
197
|
+
--token-app-header-logo-size: 28px;
|
|
198
|
+
--token-app-side-nav-wrapper-border-width: 1px;
|
|
199
|
+
--token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200);
|
|
200
|
+
--token-app-side-nav-wrapper-padding-horizontal: 16px;
|
|
201
|
+
--token-app-side-nav-wrapper-padding-vertical: 16px;
|
|
202
|
+
--token-app-side-nav-wrapper-padding-horizontal-minimized: 8px;
|
|
203
|
+
--token-app-side-nav-wrapper-padding-vertical-minimized: 22px;
|
|
204
|
+
--token-app-side-nav-toggle-button-border-radius: 5px;
|
|
205
|
+
--token-app-side-nav-header-home-link-padding: 4px;
|
|
206
|
+
--token-app-side-nav-header-home-link-logo-size: 48px;
|
|
207
|
+
--token-app-side-nav-header-home-link-logo-size-minimized: 32px;
|
|
208
|
+
--token-app-side-nav-header-actions-spacing: 8px;
|
|
209
|
+
--token-app-side-nav-body-list-margin-vertical: 24px;
|
|
210
|
+
--token-app-side-nav-body-list-item-height: 36px;
|
|
211
|
+
--token-app-side-nav-body-list-item-padding-horizontal: 8px;
|
|
212
|
+
--token-app-side-nav-body-list-item-padding-vertical: 4px;
|
|
213
|
+
--token-app-side-nav-body-list-item-spacing-vertical: 2px;
|
|
214
|
+
--token-app-side-nav-body-list-item-content-spacing-horizontal: 8px;
|
|
215
|
+
--token-app-side-nav-body-list-item-border-radius: 5px;
|
|
216
|
+
--token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary);
|
|
217
|
+
--token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary);
|
|
218
|
+
--token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint);
|
|
219
|
+
--token-app-side-nav-color-surface-primary: var(--token-color-surface-faint);
|
|
220
|
+
--token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover);
|
|
221
|
+
--token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300);
|
|
222
|
+
--token-form-label-color: #0c0c0e;
|
|
223
|
+
--token-form-legend-color: #0c0c0e;
|
|
224
|
+
--token-form-helper-text-color: #656a76;
|
|
225
|
+
--token-form-indicator-optional-color: #656a76;
|
|
226
|
+
--token-form-error-color: #c00005;
|
|
227
|
+
--token-form-error-icon-size: 14px;
|
|
228
|
+
--token-form-checkbox-size: 16px;
|
|
229
|
+
--token-form-checkbox-border-radius: 3px;
|
|
230
|
+
--token-form-checkbox-border-width: 1px;
|
|
231
|
+
--token-form-checkbox-background-image-size: 12px;
|
|
232
|
+
--token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
|
|
233
|
+
--token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
|
|
234
|
+
--token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
|
|
235
|
+
--token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
|
|
196
236
|
--token-form-control-base-foreground-value-color: #0c0c0e;
|
|
197
237
|
--token-form-control-base-foreground-placeholder-color: #656a76;
|
|
198
238
|
--token-form-control-base-surface-color-default: #ffffff;
|
|
@@ -215,20 +255,6 @@
|
|
|
215
255
|
--token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */
|
|
216
256
|
--token-form-control-border-radius: 5px;
|
|
217
257
|
--token-form-control-border-width: 1px;
|
|
218
|
-
--token-form-label-color: #0c0c0e;
|
|
219
|
-
--token-form-legend-color: #0c0c0e;
|
|
220
|
-
--token-form-helper-text-color: #656a76;
|
|
221
|
-
--token-form-indicator-optional-color: #656a76;
|
|
222
|
-
--token-form-error-color: #c00005;
|
|
223
|
-
--token-form-error-icon-size: 14px;
|
|
224
|
-
--token-form-checkbox-size: 16px;
|
|
225
|
-
--token-form-checkbox-border-radius: 3px;
|
|
226
|
-
--token-form-checkbox-border-width: 1px;
|
|
227
|
-
--token-form-checkbox-background-image-size: 12px;
|
|
228
|
-
--token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
|
|
229
|
-
--token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
|
|
230
|
-
--token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
|
|
231
|
-
--token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
|
|
232
258
|
--token-form-radio-size: 16px;
|
|
233
259
|
--token-form-radio-border-width: 1px;
|
|
234
260
|
--token-form-radio-background-image-size: 12px;
|
|
@@ -264,9 +290,6 @@
|
|
|
264
290
|
--token-form-toggle-transition-duration: 0.2s;
|
|
265
291
|
--token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15);
|
|
266
292
|
--token-form-toggle-thumb-size: 16px;
|
|
267
|
-
--token-app-header-height: 60px;
|
|
268
|
-
--token-app-header-home-link-size: 36px;
|
|
269
|
-
--token-app-header-logo-size: 28px;
|
|
270
293
|
--token-pagination-nav-control-height: 36px;
|
|
271
294
|
--token-pagination-nav-control-padding-horizontal: 12px;
|
|
272
295
|
--token-pagination-nav-control-focus-inset: 4px;
|
|
@@ -294,7 +317,7 @@
|
|
|
294
317
|
--token-side-nav-body-list-item-content-spacing-horizontal: 8px;
|
|
295
318
|
--token-side-nav-body-list-item-border-radius: 5px;
|
|
296
319
|
--token-side-nav-color-foreground-primary: #dedfe3;
|
|
297
|
-
--token-side-nav-color-foreground-strong: #
|
|
320
|
+
--token-side-nav-color-foreground-strong: #ffffff;
|
|
298
321
|
--token-side-nav-color-foreground-faint: #8c909c;
|
|
299
322
|
--token-side-nav-color-surface-primary: #0c0c0e;
|
|
300
323
|
--token-side-nav-color-surface-interactive-hover: #3b3d45;
|