@hashicorp/design-system-tokens 2.2.1 → 2.3.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.
Files changed (25) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/RELEASE.md +40 -0
  3. package/dist/cloud-email/helpers/color.css +1 -2
  4. package/dist/cloud-email/helpers/elevation.css +3 -4
  5. package/dist/cloud-email/helpers/focus-ring.css +1 -2
  6. package/dist/cloud-email/helpers/typography.css +1 -2
  7. package/dist/cloud-email/tokens.scss +7 -4
  8. package/dist/devdot/css/helpers/color.css +1 -2
  9. package/dist/devdot/css/helpers/elevation.css +3 -4
  10. package/dist/devdot/css/helpers/focus-ring.css +1 -2
  11. package/dist/devdot/css/helpers/typography.css +1 -2
  12. package/dist/devdot/css/tokens.css +49 -22
  13. package/dist/docs/products/tokens.json +1076 -478
  14. package/dist/marketing/css/helpers/color.css +1 -2
  15. package/dist/marketing/css/helpers/elevation.css +3 -4
  16. package/dist/marketing/css/helpers/focus-ring.css +1 -2
  17. package/dist/marketing/css/helpers/typography.css +1 -2
  18. package/dist/marketing/css/tokens.css +49 -22
  19. package/dist/marketing/tokens.json +1318 -628
  20. package/dist/products/css/helpers/color.css +1 -2
  21. package/dist/products/css/helpers/elevation.css +3 -4
  22. package/dist/products/css/helpers/focus-ring.css +1 -2
  23. package/dist/products/css/helpers/typography.css +1 -2
  24. package/dist/products/css/tokens.css +49 -22
  25. package/package.json +17 -15
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @hashicorp/design-system-tokens
2
2
 
3
+ ## 2.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ Added global tokens for border radius
8
+
9
+ <small class="doc-whats-new-changelog-metadata">[#2595](https://github.com/hashicorp/design-system/pull/2595)</small>
10
+
11
+ <div class="doc-whats-new-changelog-separator"></div>
12
+
13
+ ## 2.2.2
14
+
15
+ ### Patch Changes
16
+
17
+ Upgraded `style-dictionary` to `4.2.0`
18
+
19
+ <small class="doc-whats-new-changelog-metadata">[#2560](https://github.com/hashicorp/design-system/pull/2560)</small>
20
+
21
+ <div class="doc-whats-new-changelog-separator"></div>
22
+
3
23
  ## 2.2.1
4
24
 
5
25
  ### Patch Changes
package/RELEASE.md ADDED
@@ -0,0 +1,40 @@
1
+ # How to release
2
+
3
+ Whenever there is an update to the design tokens in Figma (e.g. a new color is added), these changes need to be transfered also to the code. This means updating the "source" token files, and re-generate "output" CSS/Sass/JS/JSON files and once these changes have been approved, release them as package to the npm registry.
4
+
5
+ Please see the instructions in the [CONTRIBUTING](CONTRIBUTING.md) file for more details about how to setup the project and make changes to the code for these packages.
6
+
7
+ ## Bump and release
8
+
9
+ Follow the instructions for Changesets in the root [README](../../README.md).
10
+
11
+ 🚨 **DON'T FORGET**:
12
+
13
+ You need to communicate to the product teams that are consuming the design tokens!
14
+
15
+ ## Using a local NPM registry for testing
16
+
17
+ To test the release of packages without actually polluting the real/production npm registry, you can setup a local private registry using [Verdaccio](https://verdaccio.org/docs/what-is-verdaccio), an open source solution, very easy to setup and use.
18
+
19
+ You can follow [the instructions here](https://verdaccio.org/docs/installation), but essentially here is what you have to:
20
+
21
+ * install the package: `npm install -g verdaccio` - this will install it globally
22
+ * launch the service: `verdaccio` - this will serve a web frontend to the registry at the URL [http://localhost:4873/](http://localhost:4873/)
23
+ * add a user to the registry: `npm adduser --registry http://localhost:4873` - this will ask you for a username/password/email, I suggest you use test/test/test@test.com because is only a local instance. This will also authenticate you with the registry so you don't need to login when you publish.
24
+
25
+ Now you need to add this entry in the `package.json` file of the bundle you want to publish on your local registry:
26
+
27
+ ```json
28
+ "publishConfig": {
29
+ "registry": "http://localhost:4873"
30
+ },
31
+ ```
32
+
33
+ This will make sure the package is published on Verdaccio. Once the package is published, the web page will be available at at [http://localhost:4873/](http://localhost:4873/). It will show you all the packages' details, and if needed you can download the tarballs to check their content.
34
+
35
+ Once you've completed testing the package locally:
36
+
37
+ 1. remove verdaccio via `npm uninstall -g verdaccio`
38
+ 2. remove the files it created with `rm -fr ~/.local/share/verdaccio && rm -fr .config/verdaccio`
39
+
40
+ This same command can be used to cleanup the entire data storage of Verdaccio and start from scratch (no need to reinstall, only cleanup the data).
package/dist/cloud-email/helpers/color.css CHANGED
@@ -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
  .hds-border-primary { border: 1px solid #656a7633; }
package/dist/cloud-email/helpers/elevation.css CHANGED
@@ -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: 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); }
8
5
  .hds-elevation-inset { box-shadow: inset 0px 1px 2px 1px #656a761a); }
9
6
  .hds-elevation-low { box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d); }
10
7
  .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); }
11
10
  .hds-elevation-overlay { box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559); }
12
11
  .hds-surface-inset { box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; }
13
12
  .hds-surface-base { box-shadow: 0 0 0 1px #656a7633; }
package/dist/cloud-email/helpers/focus-ring.css CHANGED
@@ -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
  .hds-focus-ring-action-box-shadow { box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; }
package/dist/cloud-email/helpers/typography.css CHANGED
@@ -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
  .hds-font-family-sans-display { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; }
package/dist/cloud-email/tokens.scss CHANGED
@@ -1,7 +1,10 @@
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
 
4
+ $token-border-radius-x-small: 3px;
5
+ $token-border-radius-small: 5px;
6
+ $token-border-radius-medium: 6px;
7
+ $token-border-radius-large: 8px;
5
8
  $token-color-palette-blue-500: #1c345f;
6
9
  $token-color-palette-blue-400: #0046d1;
7
10
  $token-color-palette-blue-300: #0c56e9;
@@ -176,11 +179,11 @@ $token-color-waypoint-gradient-primary-start: #cbf1f3;
176
179
  $token-color-waypoint-gradient-primary-stop: #62d4dc;
177
180
  $token-color-waypoint-gradient-faint-start: #f6feff; // this is the 'waypoint-50' value at 25% opacity on white
178
181
  $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;
181
182
  $token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a;
182
183
  $token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
183
184
  $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;
184
187
  $token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
185
188
  $token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a;
186
189
  $token-surface-base-box-shadow: 0 0 0 1px #656a7633;
package/dist/devdot/css/helpers/color.css CHANGED
@@ -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
  .hds-border-primary { border: 1px solid var(--token-color-border-primary); }
package/dist/devdot/css/helpers/elevation.css CHANGED
@@ -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); }
package/dist/devdot/css/helpers/focus-ring.css CHANGED
@@ -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
  .hds-focus-ring-action-box-shadow { box-shadow: var(--token-focus-ring-action-box-shadow); }
package/dist/devdot/css/helpers/typography.css CHANGED
@@ -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
  .hds-font-family-sans-display { font-family: var(--token-typography-font-stack-display); }
package/dist/devdot/css/tokens.css CHANGED
@@ -1,9 +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
5
  :root {
6
+ --token-border-radius-x-small: 3px;
7
+ --token-border-radius-small: 5px;
8
+ --token-border-radius-medium: 6px;
9
+ --token-border-radius-large: 8px;
7
10
  --token-color-palette-blue-500: #1c345f;
8
11
  --token-color-palette-blue-400: #0046d1;
9
12
  --token-color-palette-blue-300: #0c56e9;
@@ -180,11 +183,11 @@
180
183
  --token-color-waypoint-gradient-primary-stop: #62d4dc;
181
184
  --token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */
182
185
  --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;
185
186
  --token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a;
186
187
  --token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
187
188
  --token-elevation-mid-box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
189
+ --token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
190
+ --token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
188
191
  --token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
189
192
  --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a;
190
193
  --token-surface-base-box-shadow: 0 0 0 1px #656a7633;
@@ -195,6 +198,47 @@
195
198
  --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
196
199
  --token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff;
197
200
  --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578;
201
+ --token-app-header-height: 60px;
202
+ --token-app-header-home-link-size: 36px;
203
+ --token-app-header-logo-size: 28px;
204
+ --token-app-side-nav-wrapper-border-width: 1px;
205
+ --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200);
206
+ --token-app-side-nav-wrapper-padding-horizontal: 16px;
207
+ --token-app-side-nav-wrapper-padding-vertical: 16px;
208
+ --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px;
209
+ --token-app-side-nav-wrapper-padding-vertical-minimized: 22px;
210
+ --token-app-side-nav-toggle-button-border-radius: 5px;
211
+ --token-app-side-nav-header-home-link-padding: 4px;
212
+ --token-app-side-nav-header-home-link-logo-size: 48px;
213
+ --token-app-side-nav-header-home-link-logo-size-minimized: 32px;
214
+ --token-app-side-nav-header-actions-spacing: 8px;
215
+ --token-app-side-nav-body-list-margin-vertical: 24px;
216
+ --token-app-side-nav-body-list-item-height: 36px;
217
+ --token-app-side-nav-body-list-item-padding-horizontal: 8px;
218
+ --token-app-side-nav-body-list-item-padding-vertical: 4px;
219
+ --token-app-side-nav-body-list-item-spacing-vertical: 2px;
220
+ --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px;
221
+ --token-app-side-nav-body-list-item-border-radius: 5px;
222
+ --token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary);
223
+ --token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary);
224
+ --token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint);
225
+ --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint);
226
+ --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover);
227
+ --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300);
228
+ --token-form-label-color: #0c0c0e;
229
+ --token-form-legend-color: #0c0c0e;
230
+ --token-form-helper-text-color: #656a76;
231
+ --token-form-indicator-optional-color: #656a76;
232
+ --token-form-error-color: #c00005;
233
+ --token-form-error-icon-size: 14px;
234
+ --token-form-checkbox-size: 16px;
235
+ --token-form-checkbox-border-radius: 3px;
236
+ --token-form-checkbox-border-width: 1px;
237
+ --token-form-checkbox-background-image-size: 12px;
238
+ --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! */
239
+ --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! */
240
+ --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! */
241
+ --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! */
198
242
  --token-form-control-base-foreground-value-color: #0c0c0e;
199
243
  --token-form-control-base-foreground-placeholder-color: #656a76;
200
244
  --token-form-control-base-surface-color-default: #ffffff;
@@ -217,20 +261,6 @@
217
261
  --token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */
218
262
  --token-form-control-border-radius: 5px;
219
263
  --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! */
234
264
  --token-form-radio-size: 16px;
235
265
  --token-form-radio-border-width: 1px;
236
266
  --token-form-radio-background-image-size: 12px;
@@ -266,9 +296,6 @@
266
296
  --token-form-toggle-transition-duration: 0.2s;
267
297
  --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15);
268
298
  --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
299
  --token-pagination-nav-control-height: 36px;
273
300
  --token-pagination-nav-control-padding-horizontal: 12px;
274
301
  --token-pagination-nav-control-focus-inset: 4px;
@@ -296,7 +323,7 @@
296
323
  --token-side-nav-body-list-item-content-spacing-horizontal: 8px;
297
324
  --token-side-nav-body-list-item-border-radius: 5px;
298
325
  --token-side-nav-color-foreground-primary: #dedfe3;
299
- --token-side-nav-color-foreground-strong: #fff;
326
+ --token-side-nav-color-foreground-strong: #ffffff;
300
327
  --token-side-nav-color-foreground-faint: #8c909c;
301
328
  --token-side-nav-color-surface-primary: #0c0c0e;
302
329
  --token-side-nav-color-surface-interactive-hover: #3b3d45;