# @maggioli-design-system/design-tokens

> This is the Design Token library of Maggioli Design System, here you'll find all the visual data used around the libraries.

Latest version **14.1.0** (published 2026-06-08) · ISC license · 0 weekly downloads

## Install

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

Provides the command `magma-design-tokens`.

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; has provenance; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 14.1.0 |
| Published | 2026-06-08 |
| First published | 2021-04-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 0 |
| Author | Vittorio Vittori |
| Maintainers | vitto, moodysmiles, nicola.tamburini.maggioli |
| Keywords | amazon, data-driven, design-token, json, platform-agnostic, style-dictionary |

## Links

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

## Dependencies (10)

- [arg](https://npm.io/package/arg.md) 5.0.2
- [chalk](https://npm.io/package/chalk.md) 5.4.1
- [hsluv](https://npm.io/package/hsluv.md) 1.0.1
- [apca-w3](https://npm.io/package/apca-w3.md) 0.1.9
- [hex-rgb](https://npm.io/package/hex-rgb.md) 4.3.0
- [chroma-js](https://npm.io/package/chroma-js.md) 3.1.2
- [lilconfig](https://npm.io/package/lilconfig.md) 3.1.3
- [colorjs.io](https://npm.io/package/colorjs.io.md) 0.5.2
- [handlebars](https://npm.io/package/handlebars.md) 4.7.9
- [style-dictionary](https://npm.io/package/style-dictionary.md) 3.9.0

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 14.1.0 (latest) — 2026-06-08
- 14.0.0 — 2026-06-08
- 13.7.2 — 2026-04-20
- 13.7.1 — 2025-06-03
- 13.7.0 — 2025-03-05
- 13.6.1 — 2025-02-26
- 13.6.0 — 2025-02-25
- 13.5.0 — 2024-11-25
- 13.4.0 — 2024-11-14
- 13.3.1 — 2024-10-23
- 13.3.0 — 2024-10-18
- 13.2.0 — 2024-09-05
- 13.0.0 — 2024-08-23
- 12.0.1 — 2024-01-10
- 12.0.0 — 2023-12-20
- … 45 more at https://npm.io/package/@maggioli-design-system/design-tokens/versions

## README

# @maggioli-design-system/design-tokens

Generates design tokens for colors and other type of agnostic tokens targeted on specific plaforms, like web, Dart, Android or iOS formats.

This library is based on [Adobe Leonardo][adobe-leonardo] and [Amazon Style Dictionary][style-dictionary].

# Compatibility

Use the version of this package matching the major version of [`@maggioli-design-system/magma`](https://www.npmjs.com/package/@maggioli-design-system/magma) you are using:

| magma | design-tokens | styles |
| :--- | :--- | :--- |
| `1.x` (before Magma 2) | `13.x` (latest `13.7.2`) | `15.x` (latest `15.11.1`) |
| `2.x` and later | `>= 14` | `>= 16` |

# Installation

Install the component via `npm` by running the following command:

```bash
npm i @maggioli-design-system/design-tokens
```

This package works also with yarn:

```bash
yarn add @maggioli-design-system/design-tokens
```

# Generate Custom Palette

you can generate custom palettes via cli command, it takes a configuration file to create palettes

## Usage

```bash
npx magma-design-tokens
```

## Options

| Option                       | Alias | Description                                                                     |
| :--------------------------- | :---- | :------------------------------------------------------------------------------ |
| `--config [configFile]`      | `-c`  | Path to configuration file if not respect default naming                        |
| `--outDir [dirPath]`         | `-d`  | Path destination for generated palettes                                         |
| `--generate [platform]`      | `-g`  | Output format for palette, choose one or more between `css`, `tailwind`, `dart` |
| `--export-tokens`            | `-t`  | export palette as JSON design tokens format                                     |
| `--outTokensDir [tokensDir]` |       | Directory path for JSON tokens, required if `--export-tokens` is presents       |

## Configuration file

You can include configuration in a configuration file or a field in `package.json` named `magma-design-tokens`

### Naming convention

Naming standard for configuration file:

- `.magma-design-tokensrc.json`
- `.magma-design-tokensrc.js`
- `.magma-design-tokensrc.cjs`
- `.magma-design-tokensrc.mjs`
- `.config/magma-design-tokensrc`
- `.config/magma-design-tokensrc.json`
- `.config/magma-design-tokensrc.js`
- `.config/magma-design-tokensrc.cjs`
- `.config/magma-design-tokensrc.mjs`
- `magma-design-tokens.config.js`
- `magma-design-tokens.config.cjs`
- .`magma-design-tokens.config.mjs`

If you change configuration file name you need to set with `--config` option

### Configuration

Basic config

```json
{
  "colors": [
    { "color": "#94a3b8", "name": "tone.porcelain" },
    { "color": "#EA3464", "name": "label.amaranth" }
  ]
}
```

You can export different color in different output file defining export field

```json
{
  "colors": [
    { "color": "#94a3b8", "name": "tone.porcelain", "export": ["tones"] },
    { "color": "#EA3464", "name": "label.amaranth", "export": ["label"] }
  ]
}
```

You can choose the ratio with which to generate the color scale with `ratios` field

```json
{
  "colors": [
    { "color": "#94a3b8", "name": "tone.porcelain", "ratios": "tone" },
    { "color": "#EA3464", "name": "label.amaranth", "ratios": "v1" }
  ]
}
```

NOTE: there are four different ratios as follow value contrast

```json
{
  "v1": [
      1.05, 1.1, 1.17, 1.24, 1.32, 1.41, 1.51, 1.65, 1.9, 2.25, 2.7, 3.3,
      4, 4.8, 5.75, 7, 8.5, 10.3, 12.45, 15
    ],
  "v2": [1.09, 1.22, 1.42, 1.82, 2.57, 3.71, 5.13, 6.71, 8.75, 10.29],
  "default": [1.09, 1.22, 1.42, 1.82, 3.29, 5.13, 6.71, 8.45, 10.29, 17.22],
  "tone": [1.05, 1.1, 1.24, 1.47, 2.54, 4.83, 7.56, 10.31, 14.68, 16]
}
```

### Cli example

- takes `./color.js` as configuration file
```bash
npx design-tokens --config ./color.js
```

- export palette only on css format
```bash
npx design-tokens --generate css
```

- export palette on css and tailwind format
```bash
npx design-tokens --generate 'css, tailwind'
```



[adobe-leonardo]: https://leonardocolor.io/
[style-dictionary]: https://amzn.github.io/style-dictionary/

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