Style Dictionary

Style Dictionary is great to turn your tokens into CSS and thanks to its open architecture Theemo offers extensions to generate the right formats.

Style Dictionary can generate tokens for multiple platforms (CSS, Android, iOS) but they can also be used to generate tokens for the same platform but under different constraints.

Find them here:

• CSS @property Tokens
• CSS Custom Properties & Color Scheme Tokens
• CSS Color Transforms
• Constrained Tokens

And see the full example to see all of them in action.

Constrained Tokens

For converting tokens with multiple values (Theemo calls them constrained values) two practices have been established for Style Dictionary: Multiple files (one for each constraint) or single file tokens (with multiple values).

Here is a comparison:

Criteria	Multi File	Single File
Knowledge	Knowledge is with the file itself (filename?)	Knowledge stays with the token
Reading	You see all tokens for one constraint	You see all constrained values for one token
Authoring	Better at changing values for one constraint	Better changing on a token-by-token basis
Building	Not all conversion of token into CSS are possible (knowledge is somewhere else)	All knowledge is available, every conversion is possible

For most of the time multi vs. single file is a choice of personal flavor and technology can greatly assisst here (using Figma, PenPot or Token Studio). When it comes to token conversion into platform (eg CSS) values, the single file approach shows its advantage, as all the knowledge needed to transform a token already is present on the token.

Theemo supports the idea of constrained values and the provided extensions bring this support into Style Dictionary.

Register Theemo Extensions

To use all provided extension, register them all at once in the config for Style Dictionary (which by default is config.js). Without any constraints being used, the configuration for Style Dictionary is fairly small and straight forward:

config.js

import StyleDictionary from 'style-dictionary';
import { registerTheemo } from '@theemo/style-dictionary';

registerTheemo(StyleDictionary);

export default {
  source: ['tokens/**/*.json'],
  platforms: {
    base: {
      transformGroup: 'theemo',
      buildPath: 'dist/',
      files: [
        {
          format: 'css/variables',
          destination: 'theemo.css',
        }
      ]
    }
  }
};

With registerTheemo() you have access to the following:

• Preprocessors
  • theemo/token (Style Dictionary >= v4)
• Parsers
  • W3C Parser (Style Dictionary < v4)
• Formats
  • css/properties
• Transforms
  • attribute/constraints
  • value/resolve-constraint
  • color/transforms
  • color/css/light-dark
• Transform Groups
  • theemo