# design-tokens-to-scss

> Generate scss palette and variables directly from design tokens.

Latest version **1.0.9** (published 2022-12-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install design-tokens-to-scss
pnpm add design-tokens-to-scss
yarn add design-tokens-to-scss
bun add design-tokens-to-scss
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2022-12-29 |
| First published | 2022-12-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Szymon Walczak |
| Maintainers | wheelbox |
| Keywords | design tokens, scss, css |

## Links

- npm: https://www.npmjs.com/package/design-tokens-to-scss
- npm.io page: https://npm.io/package/design-tokens-to-scss

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.9 (latest) — 2022-12-29
- 1.0.8 — 2022-12-29
- 1.0.7 — 2022-12-29
- 1.0.6 — 2022-12-28
- 1.0.5 — 2022-12-28
- 1.0.4 — 2022-12-28
- 1.0.3 — 2022-12-28
- 1.0.2 — 2022-12-28
- 1.0.1 — 2022-12-28
- 1.0.0 — 2022-12-28

## README

# designTokens2SCSS

## Overview

This package provides a method to generate scss palette and variables directly from the design tokens direactory. The design tokens files should be JSON files containing descriptions of colors, sizes, etc., as in the exapmles

```
/* tokens/dark/color/background.json */
{
  "100": { "value": "#cacbcc33" },
  "200": { "value": "#cacbcc77" },
  "300": { "value": "#cacbccaa" },
  "400": { "value": "#cacbccdd" }
}
```

```
/* size/base.json */
{
  "100": { "value": "1rem" },
  "200": { "value": "1.5rem" },
  "300": { "value": "2rem" }
}
```

It provides the method `processTokens`.

## Config

The `processTokens` method requires an config object containg the tokens source path, the target path and content array of elements to generate: 'palette' and 'variables':

```
/* config object */
{
  "source": "./tokens",
  "target": "./target",
  "content": ["palette", "variables"]
}
```

Defaut value for content is `["palette", "variables"]`.

## Tokens

An example of tokens can be found in the package `tokens` directory.

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