tokens2css

tokens2css transform your Design Tokens into CSS custom properties.

Usage

Add tokens2css in your project:

npm install tokens2css

Using cli

Your tokens must be into a CommonJs module or JSON:

//tokens.js
module.exports = {
  colors: {
    koromiko: "#fcb64d",
  }

Now run:

tokens2css ./tokens.js

Your output must be:

:root {
  --colors-koromiko: #fcb64d;
}

You can customize the output filename and wrapper element using:

tokens2css ./tokens.js --output styles/tokens.css --wrapper "#app"

Param	Description	Default
output	The name of output file	Same as input
wrapper	The CSS selector	:root

Using NodeJs

tokens2css function receive 2 params your object, and the selector of wrapper

const tokens2css = require("tokens2css");

const myTokens = {
  colors: {
    koromiko: "#fcb64d",
  },
};

const myCssTokens = tokens2css(myTokens, "#app"); // '--colors-koromiko: #fcb64d'

Alternatives

If you use a preprocessor like Sass or Stylus use token2css by erictooth.