@shopify/polaris-tokens
TypeScript icon, indicating that this package has built-in type declarations

9.1.0 • Public • Published

npm version

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.

Readme

Keywords

none

Package Sidebar

Install

npm i @shopify/polaris-tokens

Weekly Downloads

84,568

Version

9.1.0

License

SEE LICENSE IN LICENSE.md

Unpacked Size

911 kB

Total Files

108

Last publish

Collaborators

  • jaimie.rockburn
  • blittle
  • shopify-admin
  • maryharte
  • crisfmb
  • pmoloney89
  • netlohan
  • st999999
  • justin-irl
  • megswim
  • wcandillon
  • nathanpjf
  • shopify-dep
  • goodforonefare
  • lemonmade
  • vsumner
  • wizardlyhel
  • antoine.grant
  • tsov
  • andyw8-shopify
  • henrytao
  • hannachen
  • vividviolet
  • bpscott