@hashicorp/design-system-tokens

Helios Design Tokens

2.2.2
latest
Source
npm

Version published: 3 weeks ago

Maintainers: 0

Created: 3 years ago

Source

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.

Keywords

FAQs

What is @hashicorp/design-system-tokens?

Is @hashicorp/design-system-tokens well maintained?

Package last updated on 13 Dec 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install