Extend design tokens from Style Dictionary for themable design systems

Extend design tokens from Style Dictionary for themable design systems

In most cases, your Design System is themable — but how do you organize it? In my previous post, I explained how to handle Light and Dark themes. In this post, I want to describe how to add new themes and extend design tokens from the base theme. But why is this important?

I love having all my design tokens organized in a single file. That’s why I use tokens.json.

For different themes—for example, Dark Mode—I reuse about 95% of the Light (default) theme. However, there are some differences, such as colors or other adjustments. If I need to change something, it’s inconvenient to update multiple files manually.

That’s why I extend the light theme instead of duplicating values. Here’s how I did it: https://github.com/artursopelnik/style-dictionary-extend-design-tokens

The node script build.ts generates design tokens (JSON files) based on their reference and the object to be extended. It uses the Lodash library to merge data and JSON5 to read and write JSON5 files.

How to Extend Design Tokens

To extend design tokens efficiently, follow these steps:

  1. Create a Base Theme: Define your default theme tokens in tokens.json.
  2. Extend Instead of Duplicating: Use a merging strategy (like Lodash’s merge function) to extend the base theme rather than duplicating values.
  3. Automate with a Build Script: Utilize build.ts to generate new tokens dynamically.
  4. Leverage Style Dictionary: Configure Style Dictionary to output the final token files.

Scroll to Top