# @maxio-com/design-tokens

> Design Tokens definition

Latest version **4.2.3** (published 2026-08-24) · MIT license · 0 weekly downloads

## Install

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

## Health

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

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.2.3 |
| Published | 2026-08-24 |
| First published | 2022-12-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 55.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | engineering@maxio.com |
| Maintainers | maxio-publisher |

## Links

- npm: https://www.npmjs.com/package/@maxio-com/design-tokens
- npm.io page: https://npm.io/package/@maxio-com/design-tokens

## Recent versions

- 4.2.3 (latest) — 2026-08-24
- 3.2.0-alpha.0 (next) — 2024-02-13
- 4.2.2 — 2026-07-27
- 4.2.1 — 2026-05-29
- 4.2.0 — 2025-11-14
- 4.1.11 — 2025-09-25
- 4.1.10 — 2025-09-11
- 4.1.9 — 2025-09-10
- 4.1.8 — 2025-08-14
- 4.1.7 — 2025-07-01
- 4.1.6 — 2025-06-05
- 4.1.5 — 2025-06-02
- 4.1.4 — 2025-05-13
- 4.1.3 — 2025-04-14
- 4.1.2 — 2025-02-25
- … 29 more at https://npm.io/package/@maxio-com/design-tokens/versions

## README

# Design Tokens

Maxio UI Design Tokens

This package is used to store and maintain design tokens for Maxio UI.
Tokens exists in the form of CSS variables and are used to maintain a consistent design system across all Maxio UI components (used directly within our [Design System](https://github.com/maxio-com/ui-components)).

JavaScript variables are used only to refer to the CSS Variables with main purpose to fuel the Tailwind Theme - you should prefer using the CSS variables directly in any other case.

The source of truth is located in Figma/Notion and is exported to this package.
Learn more about the **Design Tokens** [here](https://www.notion.so/maxioevolution/Design-tokens-7e2081d708d6485396e3237cbb8028c7).

## Installation

Design tokens are distributed as an npm package. You can install them using npm, yarn, or pnpm:

```bash
pnpm install @maxio-com/design-tokens
```

To use the design tokens in your project, you can import the CSS file into your project:

```css
@import '@maxio-com/design-tokens/variables.css';
```

To leverage the Tailwind Theme, you can import the config file into your project:

```ts
import { tailwindTheme } from '@maxio-com/design-tokens';

// your tailwind config
export default {
  ...
  theme: tailwindTheme,
  ...
};
```

## Backward compatibility

All the changes in the design tokens should [be backward compatible](https://www.notion.so/maxioevolution/Design-System-backwards-compatibility-deprecation-policy-5afbb6acca36446ba4009f19743449cf). This means that if you change a token, you should not break any existing components that use that token. Existing components should continue to work as expected. If you need to make a breaking change, you should create a new token and deprecate the old one.

After the deprecation period, and making sure migration has been done, you can remove the old token.

## Dark mode

Semantic tokens are composed in a way that they can be used in both light and dark mode. This means that you can use the same tokens for both light and dark mode, and the tokens will automatically adjust to the mode.

We use data attribute (`[data-maxio-mode="dark"]`) to toggle dark mode. It allows to control the dark mode per component, and it also allows to control the dark mode globally.

```css
.my-component {
  background-color: var(--maxio-color-bg-primary);
  color: var(--maxio-color-text-primary);
}
```

```html
<!-- regular component -->
<div class="my-component">...</div>

<!-- dark mode -->
<div class="my-component" data-maxio-mode="dark">...</div>
```

You can nest modes (to achieve custom solutions), just use `data-maxio-mode="dark/light"` in your component tree.

## FAQ

### How do I use these tokens?

You can use these tokens by importing the CSS file into your project. You can then use the tokens in your CSS or JavaScript files.

### How do I update these tokens?

You can update these tokens by modifying the CSS file in this package and submitting a PR. For more information, refer to the [How to Update Semantic Tokens](https://www.notion.so/maxioevolution/How-to-update-semantic-tokens-b5186ada4c434e5aaf1d671ef5664025?pvs=4) documentation.

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