diff --git a/website/docs/getting-started/for-engineers.md b/website/docs/getting-started/for-engineers.md index 188c52fd9d..585c9f4b8f 100644 --- a/website/docs/getting-started/for-engineers.md +++ b/website/docs/getting-started/for-engineers.md @@ -239,8 +239,14 @@ Import design tokens as CSS variables by adding one of the following lines to th // for product applications (Ember apps) @import "@hashicorp/design-system-tokens/dist/products/css/tokens.css"; +// for Cloud UI email templating +@import "@hashicorp/design-system-tokens/dist/cloud-email/tokens.css"; + // for HashiCorp developer platform @import "~@hashicorp/design-system-tokens/dist/devdot/css/tokens.css"; + +// for HashiCorp web/marketing websites +@import '@hashicorp/design-system-tokens/dist/marketing/css/tokens.css'; ``` ### 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 @import "@hashicorp/design-system-tokens/dist/products/css/helpers/typography.css"; @import "@hashicorp/design-system-tokens/dist/products/css/helpers/focus-ring.css"; +// for Cloud UI email templating +@import "@hashicorp/design-system-tokens/dist/cloud-email/helpers/colors.css"; +@import "@hashicorp/design-system-tokens/dist/cloud-email/helpers/elevation.css"; +@import "@hashicorp/design-system-tokens/dist/cloud-email/helpers/typography.css"; +@import "@hashicorp/design-system-tokens/dist/cloud-email/helpers/focus-ring.css"; + // for HashiCorp developer platform @import "~@hashicorp/design-system-tokens/dist/devdot/css/helpers/colors.css"; @import "~@hashicorp/design-system-tokens/dist/devdot/css/helpers/elevation.css"; @import "~@hashicorp/design-system-tokens/dist/devdot/css/helpers/typography.css"; @import "~@hashicorp/design-system-tokens/dist/devdot/css/helpers/focus-ring.css"; + +// for HashiCorp web/marketing websites +@import "@hashicorp/design-system-tokens/dist/marketing/css/helpers/color.css"; +@import "@hashicorp/design-system-tokens/dist/marketing/css/helpers/elevation.css"; +@import "@hashicorp/design-system-tokens/dist/marketing/css/helpers/focus-ring.css"; +@import "@hashicorp/design-system-tokens/dist/marketing/css/helpers/typography.css"; ``` For more examples and guidelines read [the tokens documentation](/foundations/tokens).