# @vitality-ds/tokens

> Design Tokens for Vitality

Latest version **6.0.3** (published 2026-08-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vitality-ds/tokens
pnpm add @vitality-ds/tokens
yarn add @vitality-ds/tokens
bun add @vitality-ds/tokens
```

## Health

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

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

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 6.0.3 |
| Published | 2026-08-13 |
| First published | 2022-06-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 617 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | lucas.arundell, geniesolutionsadmin, xanderangell, adrianaheesh, xiaochi-li, mag-ken-sully |

## Links

- npm: https://www.npmjs.com/package/@vitality-ds/tokens
- npm.io page: https://npm.io/package/@vitality-ds/tokens

## Dependencies (2)

- [colord](https://npm.io/package/colord.md) ^2.9.2
- [clean-webpack-plugin](https://npm.io/package/clean-webpack-plugin.md) ^4.0.0

## Recent versions

- 6.0.3 (latest) — 2026-08-13
- 6.0.0-alpha.3 (alpha) — 2026-06-26
- 6.0.2 — 2026-08-10
- 6.0.1 — 2026-08-05
- 6.0.0 — 2026-06-30
- 6.0.0-alpha.2 — 2026-06-26
- 5.7.0 — 2026-05-25
- 5.7.0-alpha.12 — 2026-05-18
- 5.7.0-alpha.11 — 2026-05-17
- 5.7.0-alpha.10 — 2026-05-17
- 5.7.0-alpha.9 — 2026-05-17
- 5.7.0-alpha.8 — 2026-04-30
- 5.7.0-alpha.3 — 2026-04-27
- 5.6.3 — 2026-03-12
- 5.7.0-alpha.1 — 2026-02-26
- … 141 more at https://npm.io/package/@vitality-ds/tokens/versions

## README

# Vitality Tokens

Design Tokens for the Vitality Design System. 

This package is mostly useful when you need to create styling or tooling that is aligned to Vitality, but cannot leverage the core Vitality React library. 

If you're developing a React app, use the core Vitality React library.

If you're creating something like a custom bootstrap theme, a Figma plugin, use these tokens.

Read a bit more about Design Tokens concept here:
https://spectrum.adobe.com/page/design-tokens/
https://css-tricks.com/what-are-design-tokens/

# Using the tokens in your project

## 1. Install library
The library is deployed to `npm` and installed via an npm package. [See it here](https://www.npmjs.com/package/@vitality-ds/tokens).

```bash
yarn add @vitality-ds/tokens

```

## 2. Transform tokens into the data you need

### JavaScript:
**Use case:** I need to create style definitions in JavaScript that utilise values from the Vitality Tokens.

**Solution:** import the Vitality Tokens JavaScript and "transform" the tokens into the format you need.

**Example:**

```js
/*
 * In @vitality-ds/tokens
 * Example data from FontWeights Tokens in package
 */
const FontWeights: { [x: string]: FontWeightToken } = {
    regular: {
        name: 'regular',
        description: 'Regular font weight used with the default text.',
        data: { weightAsString: 'Regular', weight: 400 },
    },
    // ...
};
```

```js
import { FontWeights } from '@vitality-ds/tokens';

// Take each font weight and transform them to an object
const fontWeights = () => {
  const output = {};
  FontWeights.map(({ name, value, unit }) => (output[name] = `${value}${unit}`));
  return output;
};

// Sample Output:
const fontWeights: {
    regular: 400,
    // ...
}
```

### SCSS:
**Use case:** I have a project that uses SCSS and I need access to Vitality's tokens.

**Solution:** Write a script to convert the raw token data and convert SCSS vars for your project

```js
import { ColorScales } from '@vitality-ds/tokens';
/*
 * Example script taking raw color data and interpolating SCSS var strings. 
 * In reality, some more tooling would be required to create SCSS vars that 
 * can be consumed in SCSS.
 */
ColorScales.map(color => {
    const { name, hsl } = color.light.blue.blue12;
    return `$vitality-color-${name}: ${toHsl(hsl)}`
});
```

```scss
article {
    background-color: $vitality-color-blue12;
}
```


# Developing / Contributing to the tokens
## Install
1. Install dependencies

```bash
npm install
```

2. Build the tokens

```bash
npm run build
```

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