Polaris Tokens

Design tokens for Polaris, Shopify’s design system.

Design tokens originated at Salesforce, and the best way to describe them is to simply quote their documentation:

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development – Salesforce UX

Installation

npm install @shopify/polaris-tokens

Usage

Javascript

Accessing all of the available token groups

// Token values only
import {tokens} from '@shopify/polaris-tokens';

console.log(tokens.color['color-bg']); // 'rgba(...)'

// Tokens with metadata
import {metadata} from '@shopify/polaris-tokens';

console.log(metadata.color['color-bg'].value); // 'rgba(...)'
console.log(metadata.color['color-bg'].description); // 'For use as a background color, in components such as Page and Frame backgrounds.'

CSS

Importing all of the css variables. CSS variables are prefixed with --p to signal that these variables are Polaris variables.

import '@shopify/polaris-tokens/css/styles.css';

div {
  background: var(--p-color-bg-surface);
}

JSON

Accessing a specific token group file via the dist folder

const spacing = require('@shopify/polaris-tokens/json/spacing.json');

Contributing

Pull requests are welcome. See the contribution guidelines for more information.

Licenses

• Source code is under a custom license based on MIT. The license restricts Polaris usage to applications that integrate or interoperate with Shopify software or services, with additional restrictions for external, stand-alone applications.