Developers

How to install tokens

Run the following git command to install RHDS tokens:

Usage

We use style-dictionary to transform our tokens into multiple formats and helpers.

Import global CSS

Apply defaults to the document root by importing the global stylesheet:

Reset the shadowroot

Reset a component's styles (preventing inheritance) by adding resetStyles to its static Constructible Style Sheet list:

Import tokens as JavaScript objects

Note

We strongly recommend using CSS variables (and accompanying snippets), instead of importing tokens as JavaScript objects.

Import tokens as JavaScript objects:

Or tree-shakable imports:

Plugins

Using editor snippets

Editor snippets complete prefixes like --rh-color-brand to their CSS custom properties, complete with fallback.

They also provide reverse lookup. For example, if you want to choose between all the tokens with the value #e00, you can do so by completing the prefix e00.

Load snippets in VSCode

Download the VSIX bundle that’s linked at the bottom of our “Release v1.0.0” page.

Load snippets in Neovim

Use LuaSnip to load snippets in Neovim:

Stylelint plugin

Install the stylelint plugin to automatically correct token values in your files.

See the Stylelint Plugin README for more info.

11ty plugin

The experimental 11ty plugin lets you display token values in an 11ty site.

vim-hexokinase

Vim users can load the vim-hexokinase plugin to display color swatches next to their encoded values in their editor.

Use the following config (lua syntax, for Neovim users) to configure hexokinase to display color values next to color aliases like {color.brand.red}.

Designers

To get started using our design system as a designer, go to the Designers page.