# @shopify/polaris-tokens

> [![npm version](https://img.shields.io/npm/v/@shopify/polaris-tokens.svg?style=flat)](https://www.npmjs.com/package/@shopify/polaris-tokens)

Latest version **9.4.2** (published 2025-03-17) · SEE LICENSE IN LICENSE.md license · 0 weekly downloads

## Install

```sh
npm install @shopify/polaris-tokens
pnpm add @shopify/polaris-tokens
yarn add @shopify/polaris-tokens
bun add @shopify/polaris-tokens
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; has provenance; high quality score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 9.4.2 |
| Published | 2025-03-17 |
| First published | 2018-03-16 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE.md |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=20.10.0 |
| Dependencies | 1 |
| Unpacked size | 871.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 6165 |
| Author | Shopify |
| Maintainers | shopify-admin, shopify-dep, mishsmelle, netlohan, pmoloney89, maryharte, jaimie.rockburn, jaykay101 |

## Links

- npm: https://www.npmjs.com/package/@shopify/polaris-tokens
- Repository: https://github.com/Shopify/polaris
- Homepage: https://polaris.shopify.com
- Issues: https://github.com/Shopify/polaris/issues
- npm.io page: https://npm.io/package/@shopify/polaris-tokens

## Dependencies (1)

- [deepmerge](https://npm.io/package/deepmerge.md) ^4.3.1

## Recent versions

- 9.4.2 (latest) — 2025-03-17
- 0.0.0-snapshot-20240920213827 (snapshot) — 2024-09-20
- 0.0.0-snapshot-release-20240214152052 (snapshot-release) — 2024-02-14
- 8.0.0-beta.1 (beta) — 2023-10-03
- 5.1.0-next.1 (next) — 2022-05-24
- 2.8.0-rc.0 (rc) — 2020-02-20
- 9.4.1 — 2025-02-18
- 0.0.0-snapshot-20240918203244 — 2024-09-18
- 9.4.0 — 2024-07-30
- 0.0.0-snapshot-20240730162901 — 2024-07-30
- 0.0.0-snapshot-20240729151723 — 2024-07-29
- 0.0.0-snapshot-20240729150322 — 2024-07-29
- 0.0.0-snapshot-20240725212805 — 2024-07-25
- 0.0.0-snapshot-20240725180026 — 2024-07-25
- 9.3.0 — 2024-07-16
- … 840 more at https://npm.io/package/@shopify/polaris-tokens/versions

## README

# [Polaris Tokens](https://polaris.shopify.com/tokens/getting-started-with-tokens)

[![npm version](https://img.shields.io/npm/v/@shopify/polaris-tokens.svg?style=flat)](https://www.npmjs.com/package/@shopify/polaris-tokens)

[Design tokens](https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421) for [Polaris](https://polaris.shopify.com), 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](https://www.lightningdesignsystem.com/design-tokens/)

## Installation

```bash
npm install @shopify/polaris-tokens
```

## Usage

#### Javascript

Accessing all of the available token groups

```js
// 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.

```js
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

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

## Contributing

Pull requests are welcome. See the [contribution guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md) for more information.

## Licenses

- Source code is under a [custom license](https://github.com/Shopify/polaris/blob/main/LICENSE.md) 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.

---
_Source: https://npm.io/package/@shopify/polaris-tokens · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._