polaris-tokensdeprecated

Design Tokens for the Polaris Design System

Usage no npm install needed!

<script type="module">
  import polarisTokens from 'https://cdn.skypack.dev/polaris-tokens';
</script>

README

polaris-tokens

Design tokens for Polaris, Shopify’s design system.

Usage

yarn add polaris-tokens --dev

JavaScript

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

Sass

@import 'node_modules/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

  1. dev clone polaris-tokens
  2. dev up
  3. 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

Dev workflow

dev server