@rapharacing/tokens NPM

Rapha Tokens

Design tokens are atomic pieces that store visual design attributes. They help us make our UI more consistent and consistent and support custom themes. We use them instead of static values like HEX codes for color or sizing units.

Installation

Run Yarn to add the package to your project:

yarn add @rapharacing/tokens

or do so with npm:

npm i @rapharacing/tokens --save

How to use

To access tokens we neeed to import the file like so

import tokens from '@rapharacing/tokens';

Or use named exports such as

import { dim, mq } from '@rapharacing/tokens';

const Grid = styled.div`
	background: ${tokens.color('grey1')};
	display: grid;
	grid-template-rows: 2fr;
	grid-template-columns: repeat(6, 1fr);
	grid-column-gap: ${dim(2)};
	margin: 0 ${dim(2)};

	${mq.md`
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: ${dim(2)};
    margin: 0 ${dim(2)};
  `}
`;

Basic API methods

`tokens.get()` - Get a token value

The tokens.get() function can be used to get any value from the design-system. Use object dot notation to find the value you need from your design system object.