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