@@ -239,8 +239,14 @@ Import design tokens as CSS variables by adding one of the following lines to th
239
239
// for product applications (Ember apps)
240
240
@import "@hashicorp/design-system-tokens/dist/products/css/tokens.css";
241
241
242
+ // for Cloud UI email templating
243
+ @import "@hashicorp/design-system-tokens/dist/cloud-email/tokens.css";
244
+
242
245
// for HashiCorp developer platform
243
246
@import "~@hashicorp/design-system-tokens/dist/devdot/css/tokens.css";
247
+
248
+ // for HashiCorp web/marketing websites
249
+ @import ' @hashicorp /design-system-tokens /dist /marketing /css /tokens .css ' ;
244
250
```
245
251
246
252
### Import styles as CSS helper classes
@@ -254,11 +260,23 @@ Import CSS helper classes by adding any of the following lines to the main Sass
254
260
@import "@hashicorp/design-system-tokens/dist/products/css/helpers/typography.css";
255
261
@import "@hashicorp/design-system-tokens/dist/products/css/helpers/focus-ring.css";
256
262
263
+ // for Cloud UI email templating
264
+ @import "@hashicorp/design-system-tokens/dist/cloud-email/helpers/colors.css";
265
+ @import "@hashicorp/design-system-tokens/dist/cloud-email/helpers/elevation.css";
266
+ @import "@hashicorp/design-system-tokens/dist/cloud-email/helpers/typography.css";
267
+ @import "@hashicorp/design-system-tokens/dist/cloud-email/helpers/focus-ring.css";
268
+
257
269
// for HashiCorp developer platform
258
270
@import "~@hashicorp/design-system-tokens/dist/devdot/css/helpers/colors.css";
259
271
@import "~@hashicorp/design-system-tokens/dist/devdot/css/helpers/elevation.css";
260
272
@import "~@hashicorp/design-system-tokens/dist/devdot/css/helpers/typography.css";
261
273
@import "~@hashicorp/design-system-tokens/dist/devdot/css/helpers/focus-ring.css";
274
+
275
+ // for HashiCorp web/marketing websites
276
+ @import "@hashicorp/design-system-tokens/dist/marketing/css/helpers/color.css";
277
+ @import "@hashicorp/design-system-tokens/dist/marketing/css/helpers/elevation.css";
278
+ @import "@hashicorp/design-system-tokens/dist/marketing/css/helpers/focus-ring.css";
279
+ @import "@hashicorp/design-system-tokens/dist/marketing/css/helpers/typography.css";
262
280
```
263
281
264
282
For more examples and guidelines read [the tokens documentation](/foundations/tokens).
0 commit comments