1.0.4 • Published 1 year ago
sd-theme-transformer v1.0.4
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 |