Theemo / @theemo/style-dictionary / colorTransform
Variable: colorTransform
ts
const colorTransform: Transform;
Defined in: transforms/color-transforms.ts:106
Apply color transformations. Either during build time - or - at runtime using CSS color functions.
Examples
Usage:
js
import StyleDictionary from 'style-dictionary';
import { colorTransform } from '@theemo/style-dictionary';
StyleDictionary.registerTransform(colorTransform);
export default {
source: ['tokens/**/*.json'],
platforms: {
css: {
options: {
useCSSColorTransform: true
},
transforms: ['color/transforms']
}
}
};
Calculate during build time.
Computing this formula:
json
{
"$value": {
"value": "#f00",
"transforms": {
"hue": 180
}
},
"$type": "color"
}
to:
json
{
"$value": "#ff0800",
"$type": "color"
}
When using useCSSColorTransform
the output looks like this:
json
{
"$value": "hsl(from red calc(h + 180) s l)",
"$type": "color"
}