Theme tokens

Expand your design system with themes.

 

Themes are sets of overrides for token values in your design system, like Dark Mode for example. You can create themes in Supernova, and add theme values to tokens.


Create a theme

Themes: Create theme
  1. In the Tokens table, click the + button in the top right corner of the table.
  2. From the context menu, select New theme.
  3. Enter your theme name in the dialog. Each theme must have a unique name in your design system.
  4. Enter a description for your theme — what it's used for, for example.
  5. Enter the name you want to use for your theme in code generation.
  6. Still in the dialog, select a data source file for your theme. You can select more than one data source, or you can choose to select no data sources for this theme (and add one later if desired).
  7. Click Create theme to finish.

Edit a theme

Themes: Edit theme
  1. In the theme column header, click ••• to open the context menu.
  2. Select Edit from the menu.
  3. Make any necessary edits in the dialog, and click Save.

Edit theme tokens

Themes: Edit theme token

You can edit theme tokens created in Supernova directly in your design system.

  1. In the tokens table, click on the token you want to delete to open the Token detail drawer.
  2. Open the Themes section of the drawer to edit.
  3. Enter or select the new value.
  4. Click Save to finish.

Delete a theme

Themes: Delete theme
  1. In the theme column header, click ••• to open the context menu.
  2. Select Delete from the menu.
  3. In the dialog, type DELETE to confirm.
  4. Click Delete theme to permanently delete the theme.

Import theme tokens

Theme tokens can be imported to Supernova using the Figma Variables plugin. Read more about importing Figma variables.


Resolving multiple themes

When multiple themes are applied to tokens, they will be resolved recursively — the same way as Figma variable modes.

Sometimes you may need to reorder applied themes in Supernova to get the desired result in token block or pipeline.

Applied modes in Figma and themes in Supernova.

Applied modes in Figma and themes in Supernova.

Applying multiple themes - diagram