I released Theemo, the end-to-end design token workflow tool, in v1.0. Theemo is built to integrate with tools for design tokens and orchestrates the pipeline to pass tokens through all these tools, eg. from Figma into Style Dictionary into your product.
Theming: Building CSS and Packaging
With v1.0 the whole Theming part and the integration from Style Dictionary into your product received a major overhaul. Theemo assists you converting tokens into CSS by providing extensions for Style Dictionary.
Here is where Theemo shines as it continues this pipeline to your end users. Style Dictionary emits a couple of CSS files for you. Theemo takes them, applies necessary CSS directives and bundles them up as one file. Additionally metadata is written to the package.json describing the capabilities of your theme. The theme package is then ready to distribute it to a registry or use within your monorepo.
Integrations
The integrations continue on consuming these theme packages to host them in your product:
@theemo/viteloads installed themes and loads them into your product.@theemo/themeis an agnostic library that reads the themes bundled with vite and provides a manager to switch between those themes and toggles features within them. It is clever enough to adapt to the features a theme provides (which can differ).
Framework Adapters
Adapters for the first frameworks arrived, too. Basically, they integrate with the Theemos vite loader and wrap the ThemeManager from @theemo/theme to make it reactive for their respective framework.
Supported frameworks:
You can put the UI in as you like, Theemo handles the necessary logic for you.
This enables you to go push updates from Figma to your local dev environment in one NPM command, pretty cool!
Get Involved
Happy to receive feedback, help or contributions. Best place is to open up an issue over at Github or start a conversation in the Design Systems Slack, where you can find me as @gossi.
That’s it folks
– gossi