Package Exports

@shopify/polaris-tokens

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@shopify/polaris-tokens) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

polaris-tokens

Design tokens for Polaris, Shopify’s design system.

Usage

yarn add @shopify/polaris-tokens --dev

JavaScript

const tokens = require('@shopify/polaris-tokens');
console.log(tokens.colorBlueLighter) // rgb(235, 245, 250)

Sass

@import 'node_modules/@shopify/polaris-tokens/dist/index';
p {
  color: $color-blue-text;
}

Head to https://github.com/Shopify/polaris-tokens/releases/, where generated files are available.

Generate tokens

dev clone polaris-tokens
dev up
yarn dist

Tokens are generated under the dist/ folder:

colors.color-map.scss
colors.common.js
colors.custom-properties.css
colors.json
colors.map.scss
colors.scss
index.common.js
index.custom-properties.css
index.json
index.map.scss
index.scss
Polaris.ase
Polaris.clr
Polaris.sketchpalette
spacing.common.js
spacing.custom-properties.css
spacing.json
spacing.map.scss
spacing.scss
typography.common.js
typography.custom-properties.css
typography.json
typography.map.scss
typography.scss

Updating colors

Colors are stored in Invision’s DSM.

Fetch the latest version:

yarn getTokensFromInvision
yarn dist

Dev workflow

dev server