tokens2css

1.0.5 • Public • Published

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.

Package Sidebar

Install

npm i tokens2css

Weekly Downloads

1

Version

1.0.5

License

MIT

Unpacked Size

23.2 kB

Total Files

8

Last publish

Collaborators

  • camilopaez