@hashicorp/design-system-tokens
v2.2.2
Published
Helios Design Tokens
Downloads
26,025
Maintainers
Readme
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
yarn 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.