@rhds/tokens

Red Hat Design Tokens

Design Tokens for Red Hat's Digital Design System.

🚚 Installation

npm i @rhds/tokens

🎭 Usage

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

Global CSS

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

<link rel="stylesheet" href="/url/to/@rhds/tokens/css/global.css">
<style>
  :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--rh-font-family-heading);
  }
</style>

Shadow Root Reset

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

import { resetStyles } from '@rhds/tokens/css/reset.css.js';
import style from './rh-jazz-hands.css';

@customElement('rh-jazz-hands')
export class RhJazzHands extends LitElement {
  static readonly styles = [resetStyles, style];
}

JavaScript Objects

Import tokens as JavaScript objects:

import { ColorBlue300 } from '@rhds/tokens';

html`<span style="color: ${ColorBlue300}">I'm blue</span>`;

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

Editor Snippets

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

color: var(--rh-color-brand, #e00);

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

Load snippets in VSCode: Search for Red Hat Design System in the VSCode marketplace.

Load snippets in neovim via LuaSnip:

require 'luasnip.loaders.from_vscode'.lazy_load { paths = {
  -- Path to the built project, perhaps in your `node_modules`
  "~/Developer/redhat-ux/red-hat-design-tokens"
} }

vim-hexokinase

Vim users can load the vim-hexokinase plugin to display colour swatches next to their encoded values in their editor. Use the following config (lua syntax, for neovim users) to configure hexokinase to display colour values next to colour aliases like {color.brand.red}

vim.g.Hexokinase_optInPatterns = {
  'full_hex', 'triple_hex',
  'rgb', 'rgba',
  'hsl', 'hsla',
  'colour_names',
}

vim.g.Hexokinase_ftOptOutPatterns = {
  json = { 'colour_names' },
  yaml = { 'colour_names' },
}

vim.g.Hexokinase_palettes = {
  -- replace with path to the built tokens package on your drive
  vim.fn.expand('~/Developer/redhat-ux/red-hat-design-tokens/editor/hexokinase.json')
}

🏆 Contributing

See CONTRIBUTING.md