Working with themes
If you’d like to use Tokens Studio to provide tokens for a theme:
- Make sure you've created a theme in Supernova
- Update mapping in Tokens Studio integration to update to theme
To update the mapping to write to a theme instead of base values for tokens, include a new key to your Tokens Studio provider settings called supernovaTheme:
[
{
"tokenSets": ["global", "light"],
"supernovaBrand": "Default",
"supernovaTheme": "Light"
}
]
In the example above, tokens from global and light sets will be written into Supernova brand called Default, theme called Light.
Handling base values and themes together
To write both base values of tokens and themes together, simply add another mapping combining everything we learned so far:
[
{
"tokenSets": ["global"],
"supernovaBrand": "Default",
"supernovaTheme": null
},
{
"tokenSets": ["global", "light"],
"supernovaBrand": "Default",
"supernovaTheme": "Light"
},
{
"tokenSets": ["global", "dark"],
"supernovaBrand": "Default",
"supernovaTheme": "Dark"
}
]
In the example above, we are defining multiple mappings at once.
- The first mapping will synchronize our base tokens from set global, without any themed overrides, and write them to brand Default.
- The second mapping will synchronize our base tokens from set global, apply any overrides from light set and write it into Supernova brand Default, under Light theme.
- The third mapping will synchronize our base tokens from set global, apply any overrides from light set and write it into Supernova brand Default, under Light theme.
Click Save to save the mapping in your settings and click Push to reflect changes to Supernova.
If there is no base value set for a token, but you import a theme value for that token, the theme value will also be used to create a base value for that token.You can define unlimited number of theme mappings in your provider settings.
Handling multiple brands
To write tokens to multiple brands, once again add a new mapping to your Supernova provider settings:
[
{
"tokenSets": ["global", "my-brand-a"],
"supernovaBrand": "Brand A"
},
{
"tokenSets": ["global", "my-brand-b"],
"supernovaBrand": "Brand B"
}
]
In the example above, we are synchronizing tokens with multiple Supernova brands at once:
- The first mapping will synchronize our base tokens from set global, apply any overrides from my-brand-a, and write them to brand Brand A. This assumes you have Brand A created in your design system.
- The second mapping will synchronize our base tokens from set global, apply any overrides from my-brand-b set and write them to Brand B. This assumes you have Brand B created in your design system.
Click Save to save the mapping in your settings and click Push to reflect changes to Supernova.
You can define unlimited number of brand mappings in your provider settings.
Working with Token Studio themes
If you are on the pro plan of Token Studio, you have access to themes. Themes are token sets combined together for easier manipulation. Supernova sync supports Token Studio out of the box. To make use of themes, modify your mapping with a new property called tokensTheme:
[
{
"tokensTheme": "My Theme",
"supernovaBrand": "Default"
}
]
You can either use tokenSets or tokensTheme, but you can't use both of them together. Internally, tokensTheme will get converted to tokenSets, so tokensTheme is effectively just a shortcut and you can achieve the same mapping with both approaches:
[
{
"tokensTheme": "My Theme",
"supernovaBrand": "Default"
}
]
[
{
"tokenSets": ["global", "light"],
"supernovaBrand": "Default"
}
]
Assuming My Theme is defined containing 2 sets, global and light, the result published into Supernova will be the same.