Filters

These filters are designed to work with the metadata Theemo attaches to a Token. Helpful to shape the platforms in Style Dictionary.

isComputedToken() / isNoComputedToken()

Checks whether a token contains a transform.

A computed token:

tokens.json

{
  "$value": {
    "value": "#ee00aa",
    "transforms": {
      "alpha": -10
    }
  },
  "$type": "color"
}

Usage:

config.js

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

export default {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      files: [
        {
          format: 'css/variables',
          destination: 'computed-tokens.css',
          filter: isComputedToken
        }
      ]
    }
  }
};

INFO

• API Docs: isComputedToken()
• API Docs: isNoComputedToken()

isConstrainedToken() / isNoConstrainedToken()

Checks whether a token contains a transform.

A constrained token:

tokens.json

{
  "$value": {
    "value": "#ff0088", 
    "features": { 
      "color-scheme": "light" 
    }
  },
  "$type": "color"
}

Usage:

config.js

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

export default {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      files: [
        {
          format: 'css/variables',
          destination: 'constrained-tokens.css',
          filter: isConstrainedToken
        }
      ]
    }
  }
};

INFO

• API Docs: isConstrainedToken()
• API Docs: isNoConstrainedToken()

isConstrainedByPlatform()

When platform constraints are added to a token with attribute/constraints, then you can use isConstrainedByPlatform() to filter for them.

Usage:

config.js

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

export default {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      constraints: {
        features: {
          'color-scheme': 'light'
        }
      },
      files: [
        {
          format: 'css/variables',
          destination: 'constrained-tokens.css',
          filter: isConstrainedByPlatform
        }
      ]
    }
  }
};

INFO

• API Docs

isCSSProperty() / isNoCSSProperty()

Checks whether a token can be formatted into a CSS @property. Use it in combination with the css/properties formatter.

Usage:

config.js

import StyleDictionary from 'style-dictionary';
import { isCSSProperty, cssPropertiesFormater } from '@theemo/style-dictionary';

StyleDictionary.registerFormat(cssPropertiesFormater);

export default {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      files: [
        {
          format: 'css/properties',
          destination: 'properties.css',
          filter: isCSSProperty
        }
      ]
    }
  }
};

INFO

• API Docs: isCSSProperty()
• API Docs: isNoCSSProperty()

isReferenceToken() / isNoReferenceToken()

Check wether a token references another value.

Usage:

config.js

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

export default {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      files: [
        {
          format: 'css/variables',
          destination: 'raw-tokens.css',
          filter: isNoReferenceToken
        }
      ]
    }
  }
};

INFO

• API Docs: isReferenceToken()
• API Docs: isNoReferenceToken()

matchesConstraints()

When you want to filter for any constraints (free from platform constraints), you can make yourself a filter for that.

Usage:

config.js

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

export default {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      files: [
        {
          format: 'css/variables',
          destination: 'raw-tokens.css',
          filter: (token) => matchesConstraints(token, {
            features: {
              'density': 'spacious'
            }
          })
        }
      ]
    }
  }
};

INFO

• API Docs