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.

tokens.get('type.baseFontSize');

API helper methods

The helper methods make getting values much more simple.

• tokens.fontSize() or tokens.fs() - Get font-size values
• tokens.color() - Get color palette values
• tokens.brand() - Get brand palette values

tokens.fontSize()

tokens.fontSize('heading1');

tokens.color()

tokens.color('grey1');

tokens.brand()

tokens.color('pink');

Formats

The main structure of the package is written in Typescript for better usage in Typescript projects.

License

Media query is freely distributable under the terms of the MIT license.