@hashicorp/design-system-tokens

design-system-tokens

A package containing the design tokens of the Helios Design System.

Compatibility

Any platform/framework that can process CSS files and can use CSS custom properties ("variables") or use CSS helper classes.

Installation

pnpm add @hashicorp/design-system-tokens

Then import one of those files in your app's style file (app.scss or similar):

// to use design tokens as CSS variables
//
~/dist/products/css/tokens.css  // for product applications
~/dist/devdot/css/tokens.css    // for devdot platform
~/dist/marketing/css/tokens.css // for marketing websites

// to use the CSS helper classes
//
~/dist/[products|devdot|marketing]/css/helpers/colors.css     // for color styles
~/dist/[products|devdot|marketing]/css/helpers/elevation.css  // for elevation styles
~/dist/[products|devdot|marketing]/css/helpers/typography.css // for typographic styles
~/dist/[products|devdot|marketing]/css/helpers/focus-ring.css // for focus-ring style

Usage

See the dedicated page on the components website: https://helios.hashicorp.design/foundations/tokens

Contributing

See the Contributing guide for details.

License

This project is licensed under the Mozilla Public License 2.0.

Versioning

We use SemVer for versioning.