tokens-to-styles

A simple JavaScript library for converting design tokens into CSS variables exported through the :root pseudo-class.

Installation

You can install tokens-to-styles using npm install command:

npm install tokens-to-styles
Copy

Usage

const { TokensConverter } = require('tokens-to-styles');

const tokens = {
  colors: {
    primary: '#000',
    secondary: '#fff',
  },
  fontSizes: {
    small: '12px',
    medium: '16px',
    large: '20px',
  },
};

const tokensConverter = new TokensConverter();
const css = tokensConverter.toCssVariables(tokens);
console.log(css);
Copy

This will output the following CSS:

:root {
  /* colors */
  --colors-primary: #000;
  --colors-secondary: #fff;

  /* ------------------------- */

  /* fontSizes */
  --fontSizes-small: 12px;
  --fontSizes-medium: 16px;
  --fontSizes-large: 20px;
}
Copy

How it works

The tokens-to-styles library takes a JavaScript object representing design tokens and converts it into a CSS module with variables exported through the :root pseudo-class. This allows for easy integration of design tokens into your stylesheets.

API

You can check our API documentation here.