@breakaway/react-tokens
v10.0.1 react patternfly
@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 invar()
.
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