Skip to content

Commit 8325240

Browse files
didooalex-ju
didoo
and
alex-ju
authored
Design tokens pipeline - Upgrade StyleDictionary to version 4.2.0 (#2560)
Co-authored-by: Alex <alex-ju@users.noreply.github.com>
1 parent 4e372fb commit 8325240

33 files changed

+3741
-3177
lines changed

‎.changeset/silly-taxis-reply.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@hashicorp/design-system-tokens": patch
3+
---
4+
5+
Upgraded `style-dictionary` to `4.2.0`

‎packages/tokens/dist/cloud-email/helpers/color.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/**
2-
* Do not edit directly
3-
* Generated on Fri, 20 Sep 2024 19:02:21 GMT
2+
* Do not edit directly, this file was auto-generated.
43
*/
54

65
.hds-border-primary { border: 1px solid #656a7633; }

‎packages/tokens/dist/cloud-email/helpers/elevation.css

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
/**
2-
* Do not edit directly
3-
* Generated on Fri, 20 Sep 2024 19:02:21 GMT
2+
* Do not edit directly, this file was auto-generated.
43
*/
54

6-
.hds-elevation-high { box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633); }
7-
.hds-elevation-higher { box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640); }
85
.hds-elevation-inset { box-shadow: inset 0px 1px 2px 1px #656a761a); }
96
.hds-elevation-low { box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d); }
107
.hds-elevation-mid { box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633); }
8+
.hds-elevation-high { box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633); }
9+
.hds-elevation-higher { box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640); }
1110
.hds-elevation-overlay { box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559); }
1211
.hds-surface-inset { box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; }
1312
.hds-surface-base { box-shadow: 0 0 0 1px #656a7633; }

‎packages/tokens/dist/cloud-email/helpers/focus-ring.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/**
2-
* Do not edit directly
3-
* Generated on Fri, 20 Sep 2024 19:02:21 GMT
2+
* Do not edit directly, this file was auto-generated.
43
*/
54

65
.hds-focus-ring-action-box-shadow { box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; }

‎packages/tokens/dist/cloud-email/helpers/typography.css

+1-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/tokens/dist/cloud-email/tokens.scss

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11

2-
// Do not edit directly
3-
// Generated on Fri, 20 Sep 2024 19:02:21 GMT
2+
// Do not edit directly, this file was auto-generated.
43

54
$token-color-palette-blue-500: #1c345f;
65
$token-color-palette-blue-400: #0046d1;
@@ -176,11 +175,11 @@ $token-color-waypoint-gradient-primary-start: #cbf1f3;
176175
$token-color-waypoint-gradient-primary-stop: #62d4dc;
177176
$token-color-waypoint-gradient-faint-start: #f6feff; // this is the 'waypoint-50' value at 25% opacity on white
178177
$token-color-waypoint-gradient-faint-stop: #e0fcff;
179-
$token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
180-
$token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
181178
$token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a;
182179
$token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
183180
$token-elevation-mid-box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
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;
184183
$token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
185184
$token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a;
186185
$token-surface-base-box-shadow: 0 0 0 1px #656a7633;

‎packages/tokens/dist/devdot/css/helpers/color.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/**
2-
* Do not edit directly
3-
* Generated on Fri, 20 Sep 2024 19:02:21 GMT
2+
* Do not edit directly, this file was auto-generated.
43
*/
54

65
.hds-border-primary { border: 1px solid var(--token-color-border-primary); }

‎packages/tokens/dist/devdot/css/helpers/elevation.css

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
/**
2-
* Do not edit directly
3-
* Generated on Fri, 20 Sep 2024 19:02:21 GMT
2+
* Do not edit directly, this file was auto-generated.
43
*/
54

6-
.hds-elevation-high { box-shadow: var(--token-elevation-high-box-shadow); }
7-
.hds-elevation-higher { box-shadow: var(--token-elevation-higher-box-shadow); }
85
.hds-elevation-inset { box-shadow: var(--token-elevation-inset-box-shadow); }
96
.hds-elevation-low { box-shadow: var(--token-elevation-low-box-shadow); }
107
.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); }
1110
.hds-elevation-overlay { box-shadow: var(--token-elevation-overlay-box-shadow); }
1211
.hds-surface-inset { box-shadow: var(--token-surface-inset-box-shadow); }
1312
.hds-surface-base { box-shadow: var(--token-surface-base-box-shadow); }

‎packages/tokens/dist/devdot/css/helpers/focus-ring.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/**
2-
* Do not edit directly
3-
* Generated on Fri, 20 Sep 2024 19:02:21 GMT
2+
* Do not edit directly, this file was auto-generated.
43
*/
54

65
.hds-focus-ring-action-box-shadow { box-shadow: var(--token-focus-ring-action-box-shadow); }

‎packages/tokens/dist/devdot/css/helpers/typography.css

+1-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/tokens/dist/devdot/css/tokens.css

+45-46
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/**
2-
* Do not edit directly
3-
* Generated on Fri, 20 Sep 2024 19:02:21 GMT
2+
* Do not edit directly, this file was auto-generated.
43
*/
54

65
:root {
@@ -180,11 +179,11 @@
180179
--token-color-waypoint-gradient-primary-stop: #62d4dc;
181180
--token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */
182181
--token-color-waypoint-gradient-faint-stop: #e0fcff;
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;
185182
--token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a;
186183
--token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
187184
--token-elevation-mid-box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
185+
--token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
186+
--token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
188187
--token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
189188
--token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a;
190189
--token-surface-base-box-shadow: 0 0 0 1px #656a7633;
@@ -195,6 +194,47 @@
195194
--token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
196195
--token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff;
197196
--token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578;
197+
--token-app-header-height: 60px;
198+
--token-app-header-home-link-size: 36px;
199+
--token-app-header-logo-size: 28px;
200+
--token-app-side-nav-wrapper-border-width: 1px;
201+
--token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200);
202+
--token-app-side-nav-wrapper-padding-horizontal: 16px;
203+
--token-app-side-nav-wrapper-padding-vertical: 16px;
204+
--token-app-side-nav-wrapper-padding-horizontal-minimized: 8px;
205+
--token-app-side-nav-wrapper-padding-vertical-minimized: 22px;
206+
--token-app-side-nav-toggle-button-border-radius: 5px;
207+
--token-app-side-nav-header-home-link-padding: 4px;
208+
--token-app-side-nav-header-home-link-logo-size: 48px;
209+
--token-app-side-nav-header-home-link-logo-size-minimized: 32px;
210+
--token-app-side-nav-header-actions-spacing: 8px;
211+
--token-app-side-nav-body-list-margin-vertical: 24px;
212+
--token-app-side-nav-body-list-item-height: 36px;
213+
--token-app-side-nav-body-list-item-padding-horizontal: 8px;
214+
--token-app-side-nav-body-list-item-padding-vertical: 4px;
215+
--token-app-side-nav-body-list-item-spacing-vertical: 2px;
216+
--token-app-side-nav-body-list-item-content-spacing-horizontal: 8px;
217+
--token-app-side-nav-body-list-item-border-radius: 5px;
218+
--token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary);
219+
--token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary);
220+
--token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint);
221+
--token-app-side-nav-color-surface-primary: var(--token-color-surface-faint);
222+
--token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover);
223+
--token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300);
224+
--token-form-label-color: #0c0c0e;
225+
--token-form-legend-color: #0c0c0e;
226+
--token-form-helper-text-color: #656a76;
227+
--token-form-indicator-optional-color: #656a76;
228+
--token-form-error-color: #c00005;
229+
--token-form-error-icon-size: 14px;
230+
--token-form-checkbox-size: 16px;
231+
--token-form-checkbox-border-radius: 3px;
232+
--token-form-checkbox-border-width: 1px;
233+
--token-form-checkbox-background-image-size: 12px;
234+
--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! */
235+
--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! */
236+
--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! */
237+
--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! */
198238
--token-form-control-base-foreground-value-color: #0c0c0e;
199239
--token-form-control-base-foreground-placeholder-color: #656a76;
200240
--token-form-control-base-surface-color-default: #ffffff;
@@ -217,20 +257,6 @@
217257
--token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */
218258
--token-form-control-border-radius: 5px;
219259
--token-form-control-border-width: 1px;
220-
--token-form-label-color: #0c0c0e;
221-
--token-form-legend-color: #0c0c0e;
222-
--token-form-helper-text-color: #656a76;
223-
--token-form-indicator-optional-color: #656a76;
224-
--token-form-error-color: #c00005;
225-
--token-form-error-icon-size: 14px;
226-
--token-form-checkbox-size: 16px;
227-
--token-form-checkbox-border-radius: 3px;
228-
--token-form-checkbox-border-width: 1px;
229-
--token-form-checkbox-background-image-size: 12px;
230-
--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! */
231-
--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! */
232-
--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! */
233-
--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! */
234260
--token-form-radio-size: 16px;
235261
--token-form-radio-border-width: 1px;
236262
--token-form-radio-background-image-size: 12px;
@@ -266,33 +292,6 @@
266292
--token-form-toggle-transition-duration: 0.2s;
267293
--token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15);
268294
--token-form-toggle-thumb-size: 16px;
269-
--token-app-header-height: 60px;
270-
--token-app-header-home-link-size: 36px;
271-
--token-app-header-logo-size: 28px;
272-
--token-app-side-nav-wrapper-border-width: 1px;
273-
--token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200);
274-
--token-app-side-nav-wrapper-padding-horizontal: 16px;
275-
--token-app-side-nav-wrapper-padding-vertical: 16px;
276-
--token-app-side-nav-wrapper-padding-horizontal-minimized: 8px;
277-
--token-app-side-nav-wrapper-padding-vertical-minimized: 22px;
278-
--token-app-side-nav-toggle-button-border-radius: 5px;
279-
--token-app-side-nav-header-home-link-padding: 4px;
280-
--token-app-side-nav-header-home-link-logo-size: 48px;
281-
--token-app-side-nav-header-home-link-logo-size-minimized: 32px;
282-
--token-app-side-nav-header-actions-spacing: 8px;
283-
--token-app-side-nav-body-list-margin-vertical: 24px;
284-
--token-app-side-nav-body-list-item-height: 36px;
285-
--token-app-side-nav-body-list-item-padding-horizontal: 8px;
286-
--token-app-side-nav-body-list-item-padding-vertical: 4px;
287-
--token-app-side-nav-body-list-item-spacing-vertical: 2px;
288-
--token-app-side-nav-body-list-item-content-spacing-horizontal: 8px;
289-
--token-app-side-nav-body-list-item-border-radius: 5px;
290-
--token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary);
291-
--token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary);
292-
--token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint);
293-
--token-app-side-nav-color-surface-primary: var(--token-color-surface-faint);
294-
--token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover);
295-
--token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300);
296295
--token-pagination-nav-control-height: 36px;
297296
--token-pagination-nav-control-padding-horizontal: 12px;
298297
--token-pagination-nav-control-focus-inset: 4px;
@@ -320,7 +319,7 @@
320319
--token-side-nav-body-list-item-content-spacing-horizontal: 8px;
321320
--token-side-nav-body-list-item-border-radius: 5px;
322321
--token-side-nav-color-foreground-primary: #dedfe3;
323-
--token-side-nav-color-foreground-strong: #fff;
322+
--token-side-nav-color-foreground-strong: #ffffff;
324323
--token-side-nav-color-foreground-faint: #8c909c;
325324
--token-side-nav-color-surface-primary: #0c0c0e;
326325
--token-side-nav-color-surface-interactive-hover: #3b3d45;

0 commit comments

Comments
 (0)