design-tokens-to-scss

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.