# @leafygreen-ui/tokens

> leafyGreen UI Kit Tokens

Latest version **4.2.3** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @leafygreen-ui/tokens
pnpm add @leafygreen-ui/tokens
yarn add @leafygreen-ui/tokens
bun add @leafygreen-ui/tokens
```

## Health

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

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.2.3 |
| Published | 2026-10-02 |
| First published | 2020-08-13 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 273.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 274 |
| Maintainers | thesonofthomp, shaneeza, stephl3, aitchpgm, hnevins, _tsck |

## Links

- npm: https://www.npmjs.com/package/@leafygreen-ui/tokens
- Repository: https://github.com/mongodb/leafygreen-ui
- Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/tokens
- Issues: https://jira.mongodb.org/projects/PD/summary
- npm.io page: https://npm.io/package/@leafygreen-ui/tokens

## Dependencies (3)

- [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.1
- [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.1
- [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.3

## Recent versions

- 4.2.3 (latest) — 2026-10-02
- 3.2.5-wizard-beta.0 (wizard-beta) — 2025-10-10
- 4.2.2 — 2026-01-21
- 4.2.1 — 2025-12-22
- 4.2.0 — 2025-12-17
- 4.1.0 — 2025-11-24
- 4.0.0 — 2025-10-31
- 3.2.4 — 2025-09-10
- 3.2.3 — 2025-09-03
- 3.2.2 — 2025-08-28
- 3.2.1 — 2025-08-04
- 3.2.0 — 2025-07-28
- 3.1.2 — 2025-07-03
- 3.1.1 — 2025-06-30
- 3.1.1-next.0 — 2025-06-23
- … 57 more at https://npm.io/package/@leafygreen-ui/tokens/versions

## README

# Tokens

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/tokens.svg)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/tokens
```

### Yarn

```shell
yarn add @leafygreen-ui/tokens
```

### NPM

```shell
npm install @leafygreen-ui/tokens
```

## Example

```js
import { spacing, fontFamilies, breakpoints, transitionDuration } from '@leafygreen-ui/tokens';

const spacingExample = () => <span style={{ margin: spacing[1] }}>Hello World</span>;
const fontFamiliesExample = () => <span style={{ font-family: fontFamilies.default }}>Hello World</span>;
const mq = facepaint(
  breakpoints.map(bp => `@media (min-width: ${bp}px)`),
  { literal: true },
);
const transitionDurationExample = <span style={{ transition: transitionDuration.default }}>Hello World</span>;
```

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