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 |