Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @patternfly/react-tokens with all npm packages installed. Try it out:

var reactTokens = require("@patternfly/react-tokens")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@patternfly/react-tokens v4.9.15

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



yarn add @patternfly/react-tokens


npm install --save @patternfly/react-tokens


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

Import tokens


import global_BackgroundColor_100 from '@patternfly/react-tokens/dist/js/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 in var().
import global_BackgroundColor_100 from '@patternfly/react-tokens/dist/js/global_-background-color_100'; === '--pf-global--BackgroundColor--100'; // true
global_BackgroundColor_100.value === '#fff'; // true
global_BackgroundColor_100.var === 'var(--pf-global--BackgroundColor--100)'; // true
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free