Plugin for Style-Dictionary

This repository is based on e.uid's design system offline class This plugin converts design tokens into esm, cjs, css and scss variables.

Install

$ npm i sd-theme-transformer -D
# or with yarn
$ yarn add sd-theme-transformer -D

Usage

Normalize your design token with Token Transformer before using it.

npx token-transformer data/input.json data/global.json global

Creating single theme file

// build-theme.js
const styleDictionary = require('style-dictionary')
const { makeThemeConfig } = require('sd-theme-transformer')

const SD = styleDictionary.extend(
  makeThemeConfig({ source: 'data/global.json' })
)

SD.buildAllPlatforms()

Output:

/* theme/css/global.css */
:root {
    --colors-white: #ffffff;
}

// theme/js/cjs/global.js
module.exports = {
    "colors": {
        "white": "#ffffff"
    }
}

// theme/js/esm/global.js
export const colors_white = "#ffffff";

// theme/scss/global.scss
$colors_white: #ffffff;

Creating each theme file

Create an object for each theme, assuming that various customizations will be made in the configuration file.

// build-theme.js
const styleDictionary = require('style-dictionary');
const { makeThemeConfig } = require('sd-theme-transformer');

['data/global.json', 'data/dark.json', 'data/light.json'].forEach((source) => {
    const SD = styleDictionary.extend(makeThemeConfig({ source }));
    SD.buildAllPlatforms()
});

Options

| Attribute | Description | Type | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | | source | source attribute of style-dictionary. | string | | buildPath | platform.buildPath attribute of style-dictionary.Default value: 'theme/' | string |

License

Apache 2.0