# @biom3/design-tokens

> ![BIOM3-textured-logos-10](https://user-images.githubusercontent.com/1452237/205792502-2b1e7d79-6f0e-42dc-a455-dbcb5506cef1.png)

Latest version **0.4.8** (published 2025-08-12) · Apache-2.0 license · 0 weekly downloads

## Install

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

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.8 |
| Published | 2025-08-12 |
| First published | 2022-12-02 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 207.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | immutable-wilson, biome-team, platform-sa, tcurtin88 |

## Links

- npm: https://www.npmjs.com/package/@biom3/design-tokens
- Repository: https://github.com/immutable/biom3
- Homepage: https://github.com/immutable/biom3#readme
- Issues: https://github.com/immutable/biom3/issues
- npm.io page: https://npm.io/package/@biom3/design-tokens

## Dependencies (1)

- [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2

## Recent versions

- 0.4.8 (latest) — 2025-08-12
- 0.4.7 — 2025-02-25
- 0.4.6 — 2024-11-27
- 0.4.5 — 2024-11-17
- 0.4.4 — 2024-08-13
- 0.4.3 — 2024-08-12
- 0.4.2 — 2024-06-27
- 0.4.1 — 2024-06-27
- 0.4.0 — 2024-06-12
- 0.3.8 — 2024-06-04
- 0.3.7 — 2024-04-22
- 0.3.6 — 2024-03-18
- 0.3.5 — 2024-03-12
- 0.3.4 — 2024-03-01
- 0.3.3 — 2024-02-21
- … 37 more at https://npm.io/package/@biom3/design-tokens/versions

## README

![BIOM3-textured-logos-10](https://user-images.githubusercontent.com/1452237/205792502-2b1e7d79-6f0e-42dc-a455-dbcb5506cef1.png)

# @biom3/design-tokens

This package publishes via CICD to the public npm component: `@biom3/design-tokens`. To read more, see the theming & tokenisation [proposal document](https://immutable.atlassian.net/wiki/spaces/DS/pages/2031452551/Proposal+Theming+Tokenisation).

To see an overview of the entire design-tokens taxonomy, see this [document](https://immutable.atlassian.net/wiki/spaces/DS/pages/2032304280/Development+of+Design+Token+Taxonomy).

## What's inside?

Through this component we expose our complete library of BIOME design tokens. They are made available for use as both:

1. exported typescript consts, and
2. css variable definitions inside of importable css files

### Using the ts const design tokens:

To use the typescript design-tokens, simply import them from the root of the pacakge. For example:

```typescript
import { base } from '@biom3/design-tokens';
```

BIOME's default colour scheme is onLight. Therefore, when you import the `base`, or `onLightBase` design-tokens, you will get ONLY the onLight colors and gradients.

To use these design-token variables inside bespoke react typescript components:

```typescript
import {
  onDarkBase,
  onLightBase,
  smartPickTokenValue,
} from '@biom3/design-tokens';
const DemoComponent = () => (
  <div
    style={{
      fontSize: onLightBase.text.body.medium.regular.fontSize,
      color: smartPickTokenValue(onDarkBase, 'base.color.brand.1'),
    }}
  >
    test component text
  </div>
);
```

### Using the css-variable design-tokens:

All the BIOME design-tokens can be imported and used as simple css-variables, by importing css files from your App code. For example:

```typescript
import '@biom3/design-tokens/css/base-onLight.global.css'; // contains all "onLight" BASE design-tokens
// import "@biom3/design-tokens/css/base-onDark.global.css"; // contains all "onDark" BASE design-tokens
import '@biom3/design-tokens/css/text.global.css'; // contains all fonts (@font-face) imports
```

**\*@NOTE** All css-variable declarations are global styles scoped to the body selector, thus the base design-token files will overwrite each other, so you should only use 1 base design-token css file at a time. Choose the theme css file based on whether you are planning to display UI in "onDark" or "onLight" (or add your own!).

To see a complete listing of all available design-token css-variables, you can inspect the body element inside your browser's dev tools. For example:

![Screenshot 2022-12-07 at 11 32 00 am](https://user-images.githubusercontent.com/1452237/206057460-40555c71-5089-476d-a853-3ec48f8718b5.png)

Then, to use these css-variable design-tokens:

```css
/* some custom styles.css file: */
@import '@biom3/design-tokens/css/base-onDark.global.css';
@import '@biom3/design-tokens/css/text.global.css';

/* your bespoke item class styles */
.headingText {
  color: var(--base-color-brand-1);
}
```

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