Describe the bug
When looking at the $themes.json the order of the token sets of a theme seem to be coming from the order in which the token set were activated or added to a theme. This doesn't match the order in $metadata.json.
We stumbled upon this because after converting the tokens to CSS through styledictionary tokens were overwritten only partially by our customertheme. Within Figma the ordering and overwriting of tokens worked as expected, this only affected the export to CSS.
We were able to fix it ad hoc by removing the customer theme token set from the theme, saving the theme, and re-adding the customer theme token set.
How a theme in the $themes.json was ordered like when pushed to gitlab:
defaulttheme.json
feature1.json
feature2.json
customertheme.json
feature3-AfterCustomerThemeWasCreated.json
This led to some tokens of defaulttheme, feature1 and feature2 being rightfully overwritten by customertheme after export/conversion to CSS, while tokens in feature3-AfterCustomerThemeWasCreated were not overwritten even though they were added to customertheme. After removing and readding customertheme from the theme the order looked like this:
defaulttheme.json
feature1.json
feature2.json
feature3-AfterCustomerThemeWasCreated.json
customertheme.json
Now for all tokens the values from customertheme were used, just like it was visible before in Figma.
In the plugin gui in Figma our token sets are ordered differently:
defaulttheme
Atoms/feature1
Atoms/feature2
Molecules/feature3-AfterCustomerThemeWasCreated
Themes/customertheme
To Reproduce
Steps to reproduce the behavior:
Create multiple token sets
Add several token sets to a theme
Create another token set, which is ordered higher than your last token set that was added to the theme
Push to gitlab
Compare order of token sets in $metadata.json and $themes.json
Expected behavior
To have the same order of the token sets in the exported theme as in the left sidebar of the plugin (which is also the same order in the theme tokenset selector).
Describe the bug When looking at the $themes.json the order of the token sets of a theme seem to be coming from the order in which the token set were activated or added to a theme. This doesn't match the order in $metadata.json.
We stumbled upon this because after converting the tokens to CSS through styledictionary tokens were overwritten only partially by our customertheme. Within Figma the ordering and overwriting of tokens worked as expected, this only affected the export to CSS. We were able to fix it ad hoc by removing the customer theme token set from the theme, saving the theme, and re-adding the customer theme token set.
How a theme in the $themes.json was ordered like when pushed to gitlab:
This led to some tokens of defaulttheme, feature1 and feature2 being rightfully overwritten by customertheme after export/conversion to CSS, while tokens in feature3-AfterCustomerThemeWasCreated were not overwritten even though they were added to customertheme. After removing and readding customertheme from the theme the order looked like this:
Now for all tokens the values from customertheme were used, just like it was visible before in Figma.
In the plugin gui in Figma our token sets are ordered differently:
To Reproduce Steps to reproduce the behavior:
Expected behavior To have the same order of the token sets in the exported theme as in the left sidebar of the plugin (which is also the same order in the theme tokenset selector).
initial thread on Slack https://tokens-studio.slack.com/archives/C02DLQXNY6Q/p1717768662160129