Skip to content

Commit

Permalink
added entries for “Cloud UI email templating” and “HashiCorp web/mark…
Browse files Browse the repository at this point in the history
…eting websites” to the explanation of how to consume the HDS design tokens in the “Getting started for engineers” documentation page
  • Loading branch information
didoo committed Sep 27, 2024
1 parent 2f811d7 commit c9d034d
Showing 1 changed file with 18 additions and 0 deletions.
18 changes: 18 additions & 0 deletions website/docs/getting-started/for-engineers.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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).
Expand Down

0 comments on commit c9d034d

Please sign in to comment.