From c9d034d3e05fca860cea3cf377c12e39277280b9 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Fri, 27 Sep 2024 15:01:03 +0100 Subject: [PATCH] =?UTF-8?q?added=20entries=20for=20=E2=80=9CCloud=20UI=20e?= =?UTF-8?q?mail=20templating=E2=80=9D=20and=20=E2=80=9CHashiCorp=20web/mar?= =?UTF-8?q?keting=20websites=E2=80=9D=20to=20the=20explanation=20of=20how?= =?UTF-8?q?=20to=20consume=20the=20HDS=20design=20tokens=20in=20the=20?= =?UTF-8?q?=E2=80=9CGetting=20started=20for=20engineers=E2=80=9D=20documen?= =?UTF-8?q?tation=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- website/docs/getting-started/for-engineers.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) 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).