Tokens This project takes input from the export-tokens package in the form of the tokens.json file and creates CSS and SCSS variables out of it.

It uses Style Dictionnary for converting json to CSS, and SCSS, so export could be done to any number of platform.

Out of the doc: Style Dictionary is a build system that allows you to define styles once, in a way for any platform or language to consume. Updating tokens Currently the source of truth for tokens is located in Figma, so you have to export variables from Figma and replace the ./tokens.json file with the output, and the build the tokens with pnpm nx build @bloom-kit/tokens. It will output new css and scss files for each brand.

How it works Take a look at the ./src/index.mjs file, which is roughly preparing the data to pass it onto ./src/token-builder.mjs which abstracts style dictionary.

It's also here that the layers (primitives, semantic, components), as well as themes for each brands are configured. The components package, appart from switching theme in the storybook code, should be completely theme/brand agnostic.