How can I deal with token collisions for sets

[saerts]

My goal is to have a single variables.scss file having tokens like ($light-primary-10 & $dark-primary-10).
I then consume them in my Angular Material themes.
That's working fine ...

So I have one SET of core values (all tokens = light version)
and a SET of dark color tokens, same naming/category.

Then I have a 2 themes, light (only showing core) and dark.

So If I select a frame in my Figma and change the theme, I can see my design change to the colours... Great.

When I push to GitHub, I have 2 token files _core & dark.json.

Then I try format them with " style-dictionary build", over the complete folder with the 2 json files.
-> Collision detected at: Secondary.60! Original value: #e68c00, New value: #e68c00

Ok, I understand. but if I rename the styles with prefix 'dark', and Light, I get 2 different keys and the sync of the themes doesn't exist anymore, because they don't have the same name...

So I'm confused and tired to be honest...Do I need to change a setting in TS or in my style-dictionary config file, I've no clue anymore :)

[six7]

Just ignore those messages, they're just warnings. And in your case it's expected, as you want those names to collide. You could fix it by not enabling both sets in style dictionary and just have one active. In my case I'm fine with ignoring as I sometimes just want to override specific tokens, otherwise keep what was in the other set.

[saerts]

I fixed it indeed in style dictionary, and in my angular material theme file I use the variables like so
@use "web/brand-3/tokens-brand-3" as light;
@use "web/brand-3-dark/tokens-brand-3-dark" as dark;