@shopify/polaris-tokens v9.1.0
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
Polaris design tokens are available on npm as the @shopify/polaris-tokens
package.
The recommended way to use and install design tokens may vary depending on your project, the most common are documented below.
Using npm:
npm install @shopify/polaris-tokens --save
Using yarn:
yarn add @shopify/polaris-tokens
Usage
Find all available tokens in the design tokens documentation.
JavaScript
In JavaScript, design token names are formatted in lower camelCase.
const tokens = require('@shopify/polaris-tokens');
console.log(tokens.colorBlueLighter); // rgb(235, 245, 250)
In JSON, design token names are formatted in kebab-case.
const tokens = require('@shopify/polaris-tokens/dist/index.json');
console.log(tokens['color-blue-lighter']); // rgb(235, 245, 250)
Sass
Sass variables and map keys are formatted in kebab-case.
// Using variables
@import '~@shopify/polaris-tokens/dist/index';
a {
color: $color-blue-text;
}
// Using the map of all tokens
@import '~@shopify/polaris-tokens/dist/index.map';
a {
color: map-get($polaris-index-map, 'color-blue-text');
}
// Using the map for a specific type of tokens (here: spacing)
@import '~@shopify/polaris-tokens/dist/spacing.map';
a {
color: map-get($polaris-spacing-map, 'spacing-loose');
}
Sass, with CSS Custom Properties
Custom properties are formatted in kebab-case.
// Omit .css at the end of the file
@import '~@shopify/polaris-tokens/dist/colors.custom-properties';
a {
color: var(--color-blue-text);
}
Contributing
The purpose of this repository is to see the core design elements of the Polaris design system evolve and improve over time with the needs of developers, designers and partners in mind.
We gratefully accept impromptu contributions to the documentation, typo and bug fixes, and expect design token requests and changes to be discussed before a pull request.
Code of conduct
We have a code of conduct, please follow it in all your interactions with the project.
Contributing guide
Read the contributing guide to learn how to propose changes and understand our development process.
License
The polaris-tokens project is available under the MIT license.
18 hours ago
2 days ago
2 days ago
1 day ago
1 day ago
1 day ago
1 day ago
2 days ago
1 day ago
1 day ago
1 day ago
1 day ago
5 days ago
5 days ago
5 days ago
5 days ago
5 days ago
5 days ago
5 days ago
5 days ago
4 days ago
6 days ago
6 days ago
6 days ago
6 days ago
6 days ago
6 days ago
6 days ago
6 days ago
7 days ago
7 days ago
7 days ago
7 days ago
7 days ago
7 days ago
7 days ago
7 days ago
7 days ago
7 days ago
7 days ago
7 days ago
7 days ago
7 days ago
7 days ago
7 days ago
7 days ago
9 days ago
8 days ago
8 days ago
9 days ago
8 days ago
9 days ago
8 days ago
12 days ago
11 days ago
12 days ago
12 days ago
12 days ago
12 days ago
11 days ago
12 days ago
13 days ago
13 days ago
14 days ago
14 days ago
13 days ago
13 days ago
14 days ago
13 days ago
14 days ago
15 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
7 months ago
8 months ago
6 months ago
8 months ago
10 months ago
8 months ago
6 months ago
6 months ago
6 months ago
5 months ago
10 months ago
10 months ago
5 months ago
9 months ago
6 months ago
8 months ago
8 months ago
8 months ago
7 months ago
5 months ago
10 months ago
8 months ago
8 months ago
9 months ago
8 months ago
8 months ago
10 months ago
10 months ago
8 months ago
6 months ago
6 months ago
5 months ago
6 months ago
6 months ago
8 months ago
7 months ago
8 months ago
9 months ago
7 months ago
5 months ago
8 months ago
10 months ago
6 months ago
6 months ago
5 months ago
6 months ago
8 months ago
6 months ago
10 months ago
9 months ago
8 months ago
8 months ago
6 months ago
8 months ago
8 months ago
8 months ago
8 months ago
5 months ago
9 months ago
10 months ago
8 months ago
5 months ago
9 months ago
6 months ago
5 months ago
10 months ago
7 months ago
8 months ago
8 months ago
6 months ago
7 months ago
10 months ago
5 months ago
6 months ago
8 months ago
6 months ago
6 months ago
8 months ago
7 months ago
5 months ago
6 months ago
5 months ago
8 months ago
8 months ago
5 months ago
8 months ago
7 months ago
6 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
5 months ago
6 months ago
9 months ago
8 months ago
6 months ago
8 months ago
6 months ago
10 months ago
8 months ago
8 months ago
6 months ago
7 months ago
6 months ago
8 months ago
6 months ago
10 months ago
8 months ago
6 months ago
10 months ago
8 months ago
7 months ago
10 months ago
6 months ago
7 months ago
6 months ago
8 months ago
8 months ago
10 months ago
9 months ago
6 months ago
10 months ago
6 months ago
5 months ago
8 months ago
10 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
6 months ago
5 months ago
5 months ago
6 months ago
8 months ago
10 months ago
5 months ago
8 months ago
8 months ago
10 months ago
6 months ago
7 months ago
6 months ago
6 months ago
8 months ago
6 months ago
8 months ago
10 months ago
6 months ago
8 months ago
7 months ago
6 months ago
10 months ago
10 months ago
5 months ago
5 months ago
8 months ago
10 months ago
8 months ago
8 months ago
9 months ago
5 months ago
8 months ago
9 months ago
7 months ago
5 months ago
8 months ago
8 months ago
5 months ago
10 months ago
8 months ago
10 months ago
5 months ago
6 months ago
8 months ago
8 months ago
10 months ago
5 months ago
8 months ago
5 months ago
5 months ago
6 months ago
5 months ago
8 months ago
7 months ago
6 months ago
5 months ago
9 months ago
6 months ago
8 months ago
5 months ago
6 months ago
5 months ago
6 months ago
8 months ago
10 months ago
8 months ago
8 months ago
8 months ago
10 months ago
10 months ago
6 months ago
6 months ago
8 months ago
10 months ago
6 months ago
9 months ago
6 months ago
10 months ago
6 months ago
6 months ago
9 months ago
10 months ago
8 months ago
8 months ago
7 months ago
8 months ago
6 months ago
5 months ago
7 months ago
10 months ago
7 months ago
6 months ago
10 months ago
8 months ago
5 months ago
8 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
12 months ago
11 months ago
12 months ago
11 months ago
12 months ago
12 months ago
11 months ago
1 year ago
11 months ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
1 year ago
11 months ago
1 year ago
12 months ago
12 months ago
1 year ago
12 months ago
11 months ago
12 months ago
1 year ago
11 months ago
12 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
11 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
12 months ago
11 months ago
12 months ago
11 months ago
12 months ago
1 year ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
12 months ago
11 months ago
1 year ago
12 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
11 months ago
12 months ago
11 months ago
12 months ago
1 year ago
11 months ago
1 year ago
1 year ago
11 months ago
12 months ago
12 months ago
1 year ago
11 months ago
12 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago