Multi brand example

[julzmon]

I'm having a hard time figuring out how to write a build script similar to the Style Dictionary multi-brand example but also split the themes for each of the brands.

I have the following token directories:
tokens/brand/brand1/{tokens}
tokens/brand/brand2/{tokens}
tokens/primitives/{tokens}

My expected output is:

dist/brand1/{primitives.css, light-theme.css, dark-theme.css}
dist/brand2/{primitives.css, light-theme.css, dark-theme.css}

Any help would be greatly appreciated!

[drwpow]

(Seems GitHub has an error now converting to discussion; will keep as issue)

Option 1

Terrazzo (and the DTCG format) may require a bit of a mindset shift from Style Dictionary. Terrazzo is more generally oriented around 1 CSS output where you use Mode selectors to control your brands. And in your tokens you have different brand values set with $extensions.mode[brand]. Then you end up with 1 CSS file like:

[data-brand="brand1"] {
  --color-blue-500: …;
  /* brand 1 tokens */
}

[data-brand="brand2"] {
  --color-blue-500: …;
  /* brand 1 tokens */
}

This often saves you work from having to generate all this yourself.

Option 2

But if you wanted to have a “multiple inputs, multiple outputs” situation, you could have multiple terrazzo.config.mjs files (terrazzo.brand1.mjs, terrazzo.brand2.mjs), then run tz build -c terrazzo.brand1.mjs, tz build -c terrazzo.brand2.mjs, etc (ideally in parallel). That way the pipelines will be separate from one another and not get mixed up (if you tried to have 1 config, multiple CSS plugins, they’d conflict and wouldn’t generate everything properly).

---

Hopefully this helps! And gives you a few ways forward