@hashicorp/design-system-tokens 1.11.0 → 2.0.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 (19) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/devdot/css/helpers/color.css +1 -1
  3. package/dist/devdot/css/helpers/elevation.css +3 -3
  4. package/dist/devdot/css/helpers/focus-ring.css +1 -1
  5. package/dist/devdot/css/helpers/typography.css +1 -1
  6. package/dist/devdot/css/tokens.css +21 -19
  7. package/dist/docs/products/tokens.json +456 -408
  8. package/dist/marketing/css/helpers/color.css +1 -1
  9. package/dist/marketing/css/helpers/elevation.css +3 -3
  10. package/dist/marketing/css/helpers/focus-ring.css +1 -1
  11. package/dist/marketing/css/helpers/typography.css +1 -1
  12. package/dist/marketing/css/tokens.css +21 -19
  13. package/dist/marketing/tokens.json +614 -558
  14. package/dist/products/css/helpers/color.css +1 -1
  15. package/dist/products/css/helpers/elevation.css +3 -3
  16. package/dist/products/css/helpers/focus-ring.css +1 -1
  17. package/dist/products/css/helpers/typography.css +1 -1
  18. package/dist/products/css/tokens.css +21 -19
  19. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @hashicorp/design-system-tokens
2
2
 
3
+ ## 2.0.0
4
+
5
+ ### Major Changes
6
+
7
+ New tokens added for large and medium size `Tab` variants. The "medium" tokens replace the former equivalent tokens which were not differentiated by size.
8
+
9
+ - `--token-tabs-tab-height-medium` (**Replaces `--token-tabs-tab-height`**)
10
+ - `--token-tabs-tab-height-large` (**New**)
11
+ - `--token-tabs-tab-padding-horizontal-medium` (**Replaces `--token-tabs-tab-padding-horizontal`**)
12
+ - `--token-tabs-tab-padding-horizontal-large` (**New**)
13
+
14
+ <small class="doc-whats-new-changelog-metadata">[#1937](https://github.com/hashicorp/design-system/pull/1937)</small>
15
+
16
+ <div class="doc-whats-new-changelog-separator"></div>
17
+
3
18
  ## 1.11.0
4
19
 
5
20
  ### Minor Changes
package/dist/devdot/css/helpers/color.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 02 Feb 2024 21:05:58 GMT
3
+ * Generated on Thu, 08 Feb 2024 22:22:41 GMT
4
4
  */
5
5
 
6
6
  .hds-border-primary { border: 1px solid var(--token-color-border-primary); }
package/dist/devdot/css/helpers/elevation.css CHANGED
@@ -1,13 +1,13 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 02 Feb 2024 21:05:58 GMT
3
+ * Generated on Thu, 08 Feb 2024 22:22:41 GMT
4
4
  */
5
5
 
6
+ .hds-elevation-high { box-shadow: var(--token-elevation-high-box-shadow); }
7
+ .hds-elevation-higher { box-shadow: var(--token-elevation-higher-box-shadow); }
6
8
  .hds-elevation-inset { box-shadow: var(--token-elevation-inset-box-shadow); }
7
9
  .hds-elevation-low { box-shadow: var(--token-elevation-low-box-shadow); }
8
10
  .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
11
  .hds-elevation-overlay { box-shadow: var(--token-elevation-overlay-box-shadow); }
12
12
  .hds-surface-inset { box-shadow: var(--token-surface-inset-box-shadow); }
13
13
  .hds-surface-base { box-shadow: var(--token-surface-base-box-shadow); }
package/dist/devdot/css/helpers/focus-ring.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 02 Feb 2024 21:05:58 GMT
3
+ * Generated on Thu, 08 Feb 2024 22:22:41 GMT
4
4
  */
5
5
 
6
6
  .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,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 02 Feb 2024 21:05:58 GMT
3
+ * Generated on Thu, 08 Feb 2024 22:22:41 GMT
4
4
  */
5
5
 
6
6
  .hds-font-family-sans-display { font-family: var(--token-typography-font-stack-display); }
package/dist/devdot/css/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 02 Feb 2024 21:05:58 GMT
3
+ * Generated on Thu, 08 Feb 2024 22:22:41 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -180,11 +180,11 @@
180
180
  --token-color-waypoint-gradient-primary-stop: #62d4dc;
181
181
  --token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */
182
182
  --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;
183
185
  --token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a;
184
186
  --token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
185
187
  --token-elevation-mid-box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
186
- --token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
187
- --token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
188
188
  --token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
189
189
  --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a;
190
190
  --token-surface-base-box-shadow: 0 0 0 1px #656a7633;
@@ -195,20 +195,6 @@
195
195
  --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
196
196
  --token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff;
197
197
  --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578;
198
- --token-form-label-color: #0c0c0e;
199
- --token-form-legend-color: #0c0c0e;
200
- --token-form-helper-text-color: #656a76;
201
- --token-form-indicator-optional-color: #656a76;
202
- --token-form-error-color: #c00005;
203
- --token-form-error-icon-size: 14px;
204
- --token-form-checkbox-size: 16px;
205
- --token-form-checkbox-border-radius: 3px;
206
- --token-form-checkbox-border-width: 1px;
207
- --token-form-checkbox-background-image-size: 12px;
208
- --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! */
209
- --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! */
210
- --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! */
211
- --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! */
212
198
  --token-form-control-base-foreground-value-color: #0c0c0e;
213
199
  --token-form-control-base-foreground-placeholder-color: #656a76;
214
200
  --token-form-control-base-surface-color-default: #ffffff;
@@ -231,6 +217,20 @@
231
217
  --token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */
232
218
  --token-form-control-border-radius: 5px;
233
219
  --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
234
  --token-form-radio-size: 16px;
235
235
  --token-form-radio-border-width: 1px;
236
236
  --token-form-radio-background-image-size: 12px;
@@ -298,8 +298,10 @@
298
298
  --token-side-nav-color-surface-primary: #0c0c0e;
299
299
  --token-side-nav-color-surface-interactive-hover: #3b3d45;
300
300
  --token-side-nav-color-surface-interactive-active: #656a76;
301
- --token-tabs-tab-height: 36px;
302
- --token-tabs-tab-padding-horizontal: 12px;
301
+ --token-tabs-tab-height-medium: 36px;
302
+ --token-tabs-tab-height-large: 48px;
303
+ --token-tabs-tab-padding-horizontal-medium: 12px;
304
+ --token-tabs-tab-padding-horizontal-large: 20px;
303
305
  --token-tabs-tab-padding-vertical: 0px;
304
306
  --token-tabs-tab-border-radius: 5px;
305
307
  --token-tabs-tab-focus-inset: 6px;