# @esri/calcite-design-tokens

> Esri's Calcite Design System Tokens

Latest version **4.2.0** (published 2026-10-20) · SEE LICENSE.md license · 0 weekly downloads

## Install

```sh
npm install @esri/calcite-design-tokens
pnpm add @esri/calcite-design-tokens
yarn add @esri/calcite-design-tokens
bun add @esri/calcite-design-tokens
```

## Health

**Score 75/100 (B)** — status: active.

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.2.0 |
| Published | 2026-10-20 |
| First published | 2023-05-04 |
| Weekly downloads | 0 |
| License | SEE LICENSE.md |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 374 |
| Author | Esri |
| Maintainers | noahmulfinger, ssylvia, paulcpederson, patrickarlt, odoe, tomwayson, benstoltz, dbouwman, driskull, katelynseitz, rlibed, ajturner, kellyhutchins, mjuniper, john4818, haoliang, macandcheese, jcfranco, richgwozdz, rweber.esri, vivzhang, juliannemarik, drspacemanphd, allieraney, kit12303, benelan, joerodriguez-136, prev8048, rbcosby, davidspriggs, gowin, vannizhang, aputterman, brittneyjb, dcdev-npm, kri14029, gr_e |
| Keywords | Calcite, Calcite Design System, design tokens, tokens |

## Links

- npm: https://www.npmjs.com/package/@esri/calcite-design-tokens
- Repository: https://github.com/Esri/calcite-design-system
- Issues: https://github.com/Esri/calcite-design-system/issues
- npm.io page: https://npm.io/package/@esri/calcite-design-tokens

## Recent versions

- 4.2.0 (latest) — 2026-10-20
- 4.2.1-next.0 (next) — 2026-10-21
- 2.2.1-hotfix.0 (hotfix) — 2024-05-14
- 2.0.0-rc.0 (rc) — 2023-11-26
- 1.0.0-beta.2 (beta) — 2023-05-10
- 4.2.0-next.4 — 2026-10-14
- 4.2.0-next.3 — 2026-10-13
- 4.2.0-next.2 — 2026-10-13
- 4.2.0-next.1 — 2026-09-29
- 4.2.0-next.0 — 2026-09-22
- 4.1.1-next.10 — 2026-09-17
- 4.1.1-next.9 — 2026-09-16
- 4.1.1-next.8 — 2026-09-10
- 4.1.1-next.7 — 2026-08-18
- 4.1.1-next.6 — 2026-08-11
- … 145 more at https://npm.io/package/@esri/calcite-design-tokens/versions

## README

# Calcite Design Tokens

## Getting Started

Install the design tokens module:

```bash
pnpm add @esri/calcite-design-tokens
```

Reference tokens in your CSS:

```css
@import "@esri/calcite-design-tokens/dist/css/index.css";

:root {
  --my-custom-token: var(--calcite-color-brand);
}
```

## Importing tokens

These are the key published asset files generated by the token transformer:

| Name                   | Contents                                                                                               | CSS                                                  | SCSS                                                   |
| ---------------------- | ------------------------------------------------------------------------------------------------------ | ---------------------------------------------------- | ------------------------------------------------------ |
| semantic               | base semantic tokens, including border, corner-radius, font, opacity, shadow, size, space, and z-index | @esri/calcite-design-tokens/dist/css/semantic.css    | @esri/calcite-design-tokens/dist/scss/semantic.scss    |
| light **(deprecated)** | semantic color tokens - light-mode                                                                     | @esri/calcite-design-tokens/dist/css/light.css       | @esri/calcite-design-tokens/dist/scss/light.scss       |
| dark **(deprecated)**  | semantic color tokens - dark-mode                                                                      | @esri/calcite-design-tokens/dist/css/dark.css        | @esri/calcite-design-tokens/dist/scss/dark.scss        |
| light-dark             | semantic color tokens - light-dark-mode                                                                | @esri/calcite-design-tokens/dist/css/light-dark.css  | @esri/calcite-design-tokens/dist/scss/light-dark.scss  |
| classes/mixins         | semantic typography classes                                                                            | @esri/calcite-design-tokens/dist/css/classes.css     | @esri/calcite-design-tokens/dist/scss/mixins.scss      |
| index                  | base semantic tokens including color and typography                                                    | @esri/calcite-design-tokens/dist/css/index.css       | @esri/calcite-design-tokens/dist/scss/index.scss       |
| breakpoints            | semantic breakpoint tokens                                                                             | @esri/calcite-design-tokens/dist/css/breakpoints.css | @esri/calcite-design-tokens/dist/scss/breakpoints.scss |

## License

COPYRIGHT Esri - <https://js.arcgis.com/5.0/LICENSE.txt>

All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions.

This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice.

See use restrictions at <http://www.esri.com/legal/pdfs/mla_e204_e300/english>

For additional information, refer to [Calcite's licensing](https://developers.arcgis.com/calcite-design-system/resources/licensing) and contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA

email: <contracts@esri.com>

## Third-party notices

See [THIRD-PARTY-NOTICES.md](./THIRD-PARTY-NOTICES.md).

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