@hashicorp/design-system-tokens 0.8.1 → 1.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 (14) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/devdot/css/helpers/color.css +1 -1
  3. package/dist/devdot/css/helpers/elevation.css +1 -1
  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 +63 -1
  7. package/dist/docs/devdot/tokens.json +1360 -0
  8. package/dist/docs/products/tokens.json +1360 -0
  9. package/dist/products/css/helpers/color.css +1 -1
  10. package/dist/products/css/helpers/elevation.css +1 -1
  11. package/dist/products/css/helpers/focus-ring.css +1 -1
  12. package/dist/products/css/helpers/typography.css +1 -1
  13. package/dist/products/css/tokens.css +63 -1
  14. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @hashicorp/design-system-tokens
2
2
 
3
+ ## 1.0.0
4
+
5
+ ### Major Changes
6
+
7
+ This release signifies the first major release of the HashiCorp Design System. Moving forward we expect to respect [SemVer](https://semver.org/) as we make additional changes to the design system.
8
+
9
+ ### Minor Changes
10
+
11
+ - added specific design tokens for the `form controls` components
12
+
3
13
  ## 0.8.1
4
14
 
5
15
  ### Patch Changes
package/dist/devdot/css/helpers/color.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 30 Mar 2022 10:43:45 GMT
3
+ * Generated on Sat, 16 Jul 2022 14:15:33 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,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 30 Mar 2022 10:43:45 GMT
3
+ * Generated on Sat, 16 Jul 2022 14:15:33 GMT
4
4
  */
5
5
 
6
6
  .hds-elevation-inset { box-shadow: var(--token-elevation-inset-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 Wed, 30 Mar 2022 10:43:45 GMT
3
+ * Generated on Sat, 16 Jul 2022 14:15:33 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 Wed, 30 Mar 2022 10:43:45 GMT
3
+ * Generated on Sat, 16 Jul 2022 14:15:33 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 Mon, 30 May 2022 11:19:24 GMT
3
+ * Generated on Tue, 19 Jul 2022 13:53:00 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -176,6 +176,68 @@
176
176
  --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4566, 0px 2px 3px 0px #3b3d4580, 0px 12px 24px 0px #3b3d4599;
177
177
  --token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff;
178
178
  --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578;
179
+ --token-form-label-color: #0c0c0e;
180
+ --token-form-legend-color: #0c0c0e;
181
+ --token-form-helper-text-color: #656a76;
182
+ --token-form-indicator-optional-color: #656a76;
183
+ --token-form-error-color: #c00005;
184
+ --token-form-error-icon-size: 14px;
185
+ --token-form-checkbox-size: 16px;
186
+ --token-form-checkbox-border-radius: 3px;
187
+ --token-form-checkbox-border-width: 1px;
188
+ --token-form-checkbox-background-image-size: 12px;
189
+ --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! */
190
+ --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! */
191
+ --token-form-control-base-foreground-value-color: #0c0c0e;
192
+ --token-form-control-base-foreground-placeholder-color: #656a76;
193
+ --token-form-control-base-surface-color-default: #ffffff;
194
+ --token-form-control-base-surface-color-hover: #f1f2f3;
195
+ --token-form-control-base-border-color-default: #8c909c;
196
+ --token-form-control-base-border-color-hover: #656a76;
197
+ --token-form-control-checked-foreground-color: #ffffff;
198
+ --token-form-control-checked-surface-color-default: #1060ff;
199
+ --token-form-control-checked-surface-color-hover: #0c56e9;
200
+ --token-form-control-checked-border-color-default: #0c56e9;
201
+ --token-form-control-checked-border-color-hover: #0046d1;
202
+ --token-form-control-invalid-border-color-default: #c00005;
203
+ --token-form-control-invalid-border-color-hover: #940004;
204
+ --token-form-control-readonly-foreground-color: #3b3d45;
205
+ --token-form-control-readonly-surface-color: #f1f2f3;
206
+ --token-form-control-readonly-border-color: #656a761a;
207
+ --token-form-control-disabled-foreground-color: #8c909c;
208
+ --token-form-control-disabled-surface-color: #fafafa;
209
+ --token-form-control-disabled-border-color: #656a7633;
210
+ --token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */
211
+ --token-form-control-border-radius: 5px;
212
+ --token-form-control-border-width: 1px;
213
+ --token-form-radio-size: 16px;
214
+ --token-form-radio-border-width: 1px;
215
+ --token-form-radio-background-image-size: 12px;
216
+ --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */
217
+ --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */
218
+ --token-form-select-background-image-size: 16px;
219
+ --token-form-select-background-image-position-right-x: 7px;
220
+ --token-form-select-background-image-position-top-y: 9px;
221
+ --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */
222
+ --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */
223
+ --token-form-text-input-background-image-size: 16px;
224
+ --token-form-text-input-background-image-position-x: 7px;
225
+ --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */
226
+ --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */
227
+ --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */
228
+ --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */
229
+ --token-form-toggle-width: 32px;
230
+ --token-form-toggle-height: 16px;
231
+ --token-form-toggle-base-surface-color-default: #f1f2f3; /* the toggle has a different base surface color, compared to the other controls */
232
+ --token-form-toggle-border-radius: 3px;
233
+ --token-form-toggle-border-width: 1px;
234
+ --token-form-toggle-background-image-size: 12px;
235
+ --token-form-toggle-background-image-position-x: 2px;
236
+ --token-form-toggle-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! */
237
+ --token-form-toggle-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! */
238
+ --token-form-toggle-transition-duration: 0.2s;
239
+ --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15);
240
+ --token-form-toggle-thumb-size: 16px;
179
241
  --token-typography-font-stack-display: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
180
242
  --token-typography-font-stack-text: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
181
243
  --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace;