thiagog3/tokens-to-styles

# tokens-to-styles

[![Maintainability](https://api.codeclimate.com/v1/badges/063bc4e8997202b230d3/maintainability)](https://codeclimate.com/github/thiagog3/tokens-to-styles/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/063bc4e8997202b230d3/test_coverage)](https://codeclimate.com/github/thiagog3/tokens-to-styles/test_coverage)
<a href="https://www.npmjs.com/package/tokens-to-styles"><img src="https://img.shields.io/npm/v/tokens-to-styles.svg?style=flat-square" alt="npm version"/></a> <img src="https://img.shields.io/npm/dm/tokens-to-styles.svg?style=flat-square" alt="npm downloads"/>

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:

```bash
npm install tokens-to-styles
```

## Usage

```javascript
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);
```

This will output the following CSS:

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

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

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

## 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](https://tokens-to-styles.sciotta.com.br).