Theemo

Appearance

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:

token
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"
}