@breakaway/react-tokens

This library provides access to the design tokens of PatternFly 4 from JavaScript

Usage no npm install needed!

<script type="module">
  import breakawayReactTokens from 'https://cdn.skypack.dev/@breakaway/react-tokens';
</script>

README

@breakaway/react-tokens

Installation

yarn add @breakaway/react-tokens

or

npm install --save @breakaway/react-tokens

Usage

All Tokens and their corresponding values can be viewed on the PatternFly React Tokens page.

Import tokens

import { global_BackgroundColor_100 } from '@breakaway/react-tokens';

Each token as three properties

  • name: The CSS custom property name.
  • value: The default value for the custom property.
  • var: The property name wrapped in var().
import { global_BackgroundColor_100 } from '@breakaway/react-tokens';

global_BackgroundColor_100.name === '--pf-global--BackgroundColor--100'; //true
global_BackgroundColor_100.value === '#fff'; // true
global_BackgroundColor_100.var === 'var(--pf-global--BackgroundColor--100)'; //true