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

null
  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

null
  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

null

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

null
  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.