Skip to content

Tokens build

Jump to bottom
JC Franco edited this page May 1, 2025 · 4 revisions

tags: [tokens, build, style-dictionary, sd-transforms]

This page describes the structure of the design tokens build comprising of style-dictionary, @tokens-studio/sd-transforms and tokens source via Tokens Studio plugin for Figma.

Structure

  • calcite-design-tokens/
    • src
      • build
      • config
      • tokens
      • types
    • test

build

Custom tooling to generate the tokens build. These are based on style-dictionary and @tokens-studio/sd-transforms, so most of the information needed can be acquired via those sites (see Additional resources below), with the exception of:

  • overrides – provides hooks to override built-in or 3rd-party utilities (e.g., preprocessors, transforms) if needed (e.g., preserve test snapshots for phased updates or to mitigate breaking changes)
  • shared – updated via preprocessors to store metadata prior to token merging for future reference
  • utils – custom utils (e.g., enums, dictionary manipulation, token type lookup)

config

The configuration for each design tokens platform (e.g., css, sass, es6) output (breakpoints, core, semantic).

Notes

  • The color configs (light/dark) are used as reference for other build utils (e.g., formats)
  • The docs and js outputs are considered internal and not supported from a public perspective

tokens

Source of truth for all design tokens.

These files are updated via the Tokens Studio Figma plugin, so do not manually update these files. Any changes need to come from the plugin.

types

This contains custom types from the build and extensions of style-dictionary.

test

Contains snapshot tests for the tokens build output.

For more details, see the tokens testing guide.

Additional resources

Notes

  • Use the provided APIs as much as possible

Home

Tokens

Clone this wiki locally