@patternfly/react-tokens
Installation
yarn add @patternfly/react-tokens
or
npm install --save @patternfly/react-tokens
Usage
All Tokens and their corresponding values can be viewed on the PatternFly React Tokens page.
Import tokens
Examples
import global_BackgroundColor_100 from '@patternfly/react-tokens/dist/esm/global_-background-color_100';
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 '@patternfly/react-tokens/dist/esm/global_-background-color_100';
global_BackgroundColor_100.name === '--pf-v5-global--BackgroundColor--100'; // true
global_BackgroundColor_100.value === '#fff'; // true
global_BackgroundColor_100.var === 'var(--pf-v5-global--BackgroundColor--100)'; // true
global_BackgroundColor_100.name === '--pf-v5-global--BackgroundColor--100'; // true
global_BackgroundColor_100.value === '#fff'; // true
global_BackgroundColor_100.var === 'var(--pf-v5-global--BackgroundColor--100)'; // true