@hashicorp/design-system-tokens 0.6.1 → 0.8.1

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 +25 -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 +3 -2
  5. package/dist/devdot/css/helpers/typography.css +1 -1
  6. package/dist/devdot/css/tokens.css +15 -78
  7. package/dist/docs/devdot/tokens.json +37 -1618
  8. package/dist/docs/products/tokens.json +37 -1618
  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 +3 -2
  12. package/dist/products/css/helpers/typography.css +1 -1
  13. package/dist/products/css/tokens.css +15 -78
  14. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @hashicorp/design-system-tokens
2
2
 
3
+ ## 0.8.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#327](https://github.com/hashicorp/design-system/pull/327) [`a46fc035`](https://github.com/hashicorp/design-system/commit/a46fc03570f51e8375b15571ddcb10e62ba446fb) Thanks [@didoo](https://github.com/didoo)! - removed deprecated design tokens for old semantic colors
8
+
9
+ ## 0.8.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#136](https://github.com/hashicorp/design-system/pull/136) [`c17f142c`](https://github.com/hashicorp/design-system/commit/c17f142c0c938b471b696820d1fa440f62f7315b) Thanks [@didoo](https://github.com/didoo)! - Updated the font-stack design tokens in “typography”
14
+
15
+ - removed `SF Pro Display/Text` in `Display/Text` (we can rely on `-apple-system + BlinkMacSystemFont`)
16
+ - replaced `Segoe UI Display/Text` with `Segoe UI` in `Display/Text`
17
+ - added `Helvetica, Arial` to the `sans` block in `Display/Text`
18
+ - added explicit emoji support for `Display/Text`
19
+ - replaced `SF Mono` with `ui-monospace` in Code
20
+ - added `Menlo` to `Code`
21
+
22
+ ## 0.7.0
23
+
24
+ ### Minor Changes
25
+
26
+ - [#98](https://github.com/hashicorp/design-system/pull/98) [`411cd9b9`](https://github.com/hashicorp/design-system/commit/411cd9b949e376d38eb1dc4d4af93ae17e6c686a) Thanks [@didoo](https://github.com/didoo)! - refactored “focus-ring” tokens and CSS helpers to support both “action” and “critical“ colors
27
+
3
28
  ## 0.6.1
4
29
 
5
30
  ### 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 Thu, 17 Mar 2022 08:19:13 GMT
3
+ * Generated on Wed, 30 Mar 2022 10:43:45 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 Tue, 22 Feb 2022 21:05:19 GMT
3
+ * Generated on Wed, 30 Mar 2022 10:43:45 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,7 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 22 Feb 2022 21:05:19 GMT
3
+ * Generated on Wed, 30 Mar 2022 10:43:45 GMT
4
4
  */
5
5
 
6
- .hds-focus-ring-box-shadow { box-shadow: var(--token-focus-ring-box-shadow); }
6
+ .hds-focus-ring-action-box-shadow { box-shadow: var(--token-focus-ring-action-box-shadow); }
7
+ .hds-focus-ring-critical-box-shadow { box-shadow: var(--token-focus-ring-critical-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 Tue, 22 Feb 2022 21:05:19 GMT
3
+ * Generated on Wed, 30 Mar 2022 10:43:45 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 Thu, 17 Mar 2022 08:19:13 GMT
3
+ * Generated on Mon, 30 May 2022 11:19:24 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -46,61 +46,6 @@
46
46
  --token-color-palette-alpha-300: #3b3d4566;
47
47
  --token-color-palette-alpha-200: #656a7633;
48
48
  --token-color-palette-alpha-100: #656a761a;
49
- --token-color-action-foreground-primary: #1060ff; /* deprecated: replace with 'color-foreground-action' */
50
- --token-color-action-foreground-on-faint: #0c56e9; /* deprecated: please speak with the HDS team to decide which color to use as alternative' */
51
- --token-color-action-foreground-high-contrast: #1c345f; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
52
- --token-color-action-background-primary: #1060ff; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
53
- --token-color-action-background-hover: #0c56e9; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
54
- --token-color-action-background-active: #0046d1; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
55
- --token-color-action-background-faint: #f2f8ff; /* deprecated: replace with 'color-surface-action' */
56
- --token-color-action-border-primary: #1060ff; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
57
- --token-color-action-border-on-primary: #0c56e9; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
58
- --token-color-action-border-on-hover: #0046d1; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
59
- --token-color-action-border-on-faint: #cce3fe; /* deprecated: replace with 'color-border-action' */
60
- --token-color-highlight-foreground-primary: #a737ff; /* deprecated: replace with 'color-foreground-highlight' */
61
- --token-color-highlight-foreground-on-faint: #911ced; /* deprecated: replace with 'color-foreground-highlight-on-surface' */
62
- --token-color-highlight-foreground-high-contrast: #42215b; /* deprecated: replace with 'color-highlight-high-contrast' */
63
- --token-color-highlight-background-primary: #a737ff; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
64
- --token-color-highlight-background-hover: #911ced; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
65
- --token-color-highlight-background-active: #7b00db; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
66
- --token-color-highlight-background-faint: #f9f2ff; /* deprecated: replace with 'color-surface-highlight' */
67
- --token-color-highlight-border-primary: #a737ff; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
68
- --token-color-highlight-border-on-primary: #911ced; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
69
- --token-color-highlight-border-on-hover: #7b00db; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
70
- --token-color-highlight-border-on-faint: #ead2fe; /* deprecated: replace with 'color-border-highlight' */
71
- --token-color-success-foreground-primary: #008a22; /* deprecated: replace with 'color-foreground-success' */
72
- --token-color-success-foreground-on-faint: #00781e; /* deprecated: replace with 'color-foreground-success-on-surface' */
73
- --token-color-success-foreground-high-contrast: #054220; /* deprecated: replace with 'color-foreground-success-high-contrast' */
74
- --token-color-success-background-primary: #008a22; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
75
- --token-color-success-background-hover: #00781e; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
76
- --token-color-success-background-active: #006619; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
77
- --token-color-success-background-faint: #f2fbf6; /* deprecated: replace with 'color-surface-success' */
78
- --token-color-success-border-primary: #008a22; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
79
- --token-color-success-border-on-primary: #00781e; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
80
- --token-color-success-border-on-hover: #006619; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
81
- --token-color-success-border-on-faint: #cceeda; /* deprecated: replace with 'color-border-success' */
82
- --token-color-warning-foreground-primary: #bb5a00; /* deprecated: replace with 'color-foreground-warning' */
83
- --token-color-warning-foreground-on-faint: #9e4b00; /* deprecated: replace with 'color-foreground-warning-on-surface' */
84
- --token-color-warning-foreground-high-contrast: #542800; /* deprecated: replace with 'color-foreground-warning-high-contrast' */
85
- --token-color-warning-background-primary: #bb5a00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
86
- --token-color-warning-background-hover: #9e4b00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
87
- --token-color-warning-background-active: #803d00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
88
- --token-color-warning-background-faint: #fff9e8; /* deprecated: replace with 'color-surface-warning' */
89
- --token-color-warning-border-primary: #bb5a00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
90
- --token-color-warning-border-on-primary: #9e4b00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
91
- --token-color-warning-border-on-hover: #803d00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
92
- --token-color-warning-border-on-faint: #fbeabf; /* deprecated: replace with 'color-border-warning' */
93
- --token-color-critical-foreground-primary: #e52228; /* deprecated: replace with 'color-foreground-critical' */
94
- --token-color-critical-foreground-on-faint: #c00005; /* deprecated: replace with 'color-foreground-critical-on-surface' */
95
- --token-color-critical-foreground-high-contrast: #51130a; /* deprecated: replace with 'color-foreground-critical-high-contrast' */
96
- --token-color-critical-background-primary: #e52228; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
97
- --token-color-critical-background-hover: #c00005; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
98
- --token-color-critical-background-active: #940004; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
99
- --token-color-critical-background-faint: #fff5f5; /* deprecated: replace with 'color-surface-critical' */
100
- --token-color-critical-border-primary: #e52228; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
101
- --token-color-critical-border-on-primary: #c00005; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
102
- --token-color-critical-border-on-hover: #940004; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
103
- --token-color-critical-border-on-faint: #fbd4d4; /* deprecated: replace with 'color-border-critical' */
104
49
  --token-color-border-primary: #656a7633;
105
50
  --token-color-border-faint: #656a761a;
106
51
  --token-color-border-strong: #3b3d4566;
@@ -135,15 +80,6 @@
135
80
  --token-color-foreground-critical-high-contrast: #51130a;
136
81
  --token-color-foreground-action-visited: #a737ff; /* This extra color is unique for the DevDot platform (the 'visited' state of a link is not differentiated in the products applications). */
137
82
  --token-color-foreground-action-visited-hover: #7b00db; /* This extra color is unique for the DevDot platform (the 'visited+hover' state of a link is not differentiated in the products applications). */
138
- --token-color-neutral-foreground-primary: #0c0c0e; /* deprecated: replace with 'token-color-foreground-strong' */
139
- --token-color-neutral-foreground-secondary: #3b3d45; /* deprecated: replace with 'token-color-foreground-primary' */
140
- --token-color-neutral-foreground-faint: #656a76; /* deprecated: replace with 'token-color-foreground-faint' */
141
- --token-color-neutral-background-primary: #ffffff; /* deprecated: replace with 'token-color-surface-primary' */
142
- --token-color-neutral-background-secondary: #fafafa; /* deprecated: replace with 'token-color-surface-faint' */
143
- --token-color-neutral-background-base: #ffffff; /* deprecated: replace with 'token-color-surface-primary' */
144
- --token-color-neutral-border-primary: #656a7633; /* deprecated: replace with 'token-color-border-primary' */
145
- --token-color-neutral-border-faint: #656a761a; /* deprecated: replace with 'token-color-border-faint' */
146
- --token-color-neutral-border-strong: #3b3d4566; /* deprecated: replace with 'token-color-border-strong' */
147
83
  --token-color-page-primary: #ffffff;
148
84
  --token-color-page-faint: #fafafa;
149
85
  --token-color-surface-primary: #ffffff;
@@ -238,41 +174,42 @@
238
174
  --token-surface-high-box-shadow: 0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
239
175
  --token-surface-higher-box-shadow: 0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
240
176
  --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4566, 0px 2px 3px 0px #3b3d4580, 0px 12px 24px 0px #3b3d4599;
241
- --token-focus-ring-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff;
242
- --token-typography-font-stack-display: -apple-system, BlinkMacSystemFont, SF Pro Display, Segoe UI Display, Ubuntu, sans-serif;
243
- --token-typography-font-stack-text: -apple-system, BlinkMacSystemFont, SF Pro Text, Segoe UI Text, Ubuntu, sans-serif;
244
- --token-typography-font-stack-code: SF Mono, Consolas, Ubuntu Mono, monospace;
177
+ --token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff;
178
+ --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578;
179
+ --token-typography-font-stack-display: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
180
+ --token-typography-font-stack-text: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
181
+ --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace;
245
182
  --token-typography-font-weight-regular: 400;
246
183
  --token-typography-font-weight-medium: 500;
247
184
  --token-typography-font-weight-semibold: 600;
248
185
  --token-typography-font-weight-bold: 700;
249
- --token-typography-display-500-font-family: -apple-system, BlinkMacSystemFont, SF Pro Display, Segoe UI Display, Ubuntu, sans-serif;
186
+ --token-typography-display-500-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
250
187
  --token-typography-display-500-font-size: 1.875rem; /* 30px/1.875rem */
251
188
  --token-typography-display-500-line-height: 1.2666; /* 38px */
252
- --token-typography-display-400-font-family: -apple-system, BlinkMacSystemFont, SF Pro Display, Segoe UI Display, Ubuntu, sans-serif;
189
+ --token-typography-display-400-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
253
190
  --token-typography-display-400-font-size: 1.5rem; /* 24px/1.5rem */
254
191
  --token-typography-display-400-line-height: 1.3333; /* 32px */
255
- --token-typography-display-300-font-family: -apple-system, BlinkMacSystemFont, SF Pro Text, Segoe UI Text, Ubuntu, sans-serif;
192
+ --token-typography-display-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
256
193
  --token-typography-display-300-font-size: 1.125rem; /* 18px/1.125rem */
257
194
  --token-typography-display-300-line-height: 1.3333; /* 24px */
258
195
  --token-typography-display-300-letter-spacing: -0.5px; /* this is `tracking` */
259
- --token-typography-display-200-font-family: -apple-system, BlinkMacSystemFont, SF Pro Display, Segoe UI Display, Ubuntu, sans-serif;
196
+ --token-typography-display-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
260
197
  --token-typography-display-200-font-size: 1rem; /* 16px/1rem */
261
198
  --token-typography-display-200-line-height: 1.5; /* 24px */
262
199
  --token-typography-display-200-letter-spacing: -0.5px; /* this is `tracking` */
263
- --token-typography-display-100-font-family: -apple-system, BlinkMacSystemFont, SF Pro Text, Segoe UI Text, Ubuntu, sans-serif;
200
+ --token-typography-display-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
264
201
  --token-typography-display-100-font-size: 0.8125rem; /* 13px/0.8125rem */
265
202
  --token-typography-display-100-line-height: 1.3846; /* 18px */
266
- --token-typography-body-300-font-family: -apple-system, BlinkMacSystemFont, SF Pro Text, Segoe UI Text, Ubuntu, sans-serif;
203
+ --token-typography-body-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
267
204
  --token-typography-body-300-font-size: 1rem; /* 16px/1rem */
268
205
  --token-typography-body-300-line-height: 1.5; /* 24px */
269
- --token-typography-body-200-font-family: -apple-system, BlinkMacSystemFont, SF Pro Text, Segoe UI Text, Ubuntu, sans-serif;
206
+ --token-typography-body-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
270
207
  --token-typography-body-200-font-size: 0.875rem; /* 14px/0.875rem */
271
208
  --token-typography-body-200-line-height: 1.4286; /* 20px */
272
- --token-typography-body-100-font-family: -apple-system, BlinkMacSystemFont, SF Pro Text, Segoe UI Text, Ubuntu, sans-serif;
209
+ --token-typography-body-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
273
210
  --token-typography-body-100-font-size: 0.8125rem; /* 13px/0.8125rem */
274
211
  --token-typography-body-100-line-height: 1.3846; /* 18px */
275
- --token-typography-code-100-font-family: SF Mono, Consolas, Ubuntu Mono, monospace;
212
+ --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace;
276
213
  --token-typography-code-100-font-size: 0.8125rem; /* 13px/0.8125rem */
277
214
  --token-typography-code-100-line-height: 1.23; /* 16px */
278
215
  }