Themes & markdown

This version was released on November 16, 2022

Following on our latest design tokens improvements, we're introducing themes. This really changes the game when managing your design tokens and lets you do things that previously weren't possible. We're also adding rich text markdown support and various other smaller improvements and bugfixes, let us know what you think.

Introducing: Themes

You can now add and edit themes! Themes are value-overrides for your tokens. Until this point, you could only define tokens with a single value.

Starting today, that is no longer true! You can now define unlimited number of themes, with each theme representing a specific view of your design system.

Themes have various purposes, but the main one is obvious: Different color schemes for your design system, such as light and dark mode.

Themes are created in the same way as properties, so you will feel right at home:

Manual theme editing

You can manipulate themes exactly as you would the default values. Simply click into any empty value to override the token for selected theme.

Themed values have one significant difference compared to the base token values - they are optional. If the theme doesn't contain the value, the base value is taken instead. If the theme value is applied for specific token, override is taken instead, depending on context you are showing the data with.

Importing themes from Figma

We are extremely excited to also announce that you can now import themes from Figma automatically. Simply link to your theme file, and if it contains tokens of same definitions (but with different values), the system will recognize this and properly resolve the relationships between the base values and its themes.

When linking a new data source, you will now have new options how to link your styles to Supernova. Simply assign source to a specific theme and all tokens from the newly linked file will be associated with that theme.

Write with markdown

It can now also create different types of blocks and apply rich text styles by writing inline markdown! We have prepared a cheat sheet for you, which should greatly improve the speed with which you write your documentation:

• # at the beginning of a block turns it into the Heading 1 block.
• ## at the beginning of a block turns it into the Heading 2 block.
• ### at the beginning of a block turns it into the Heading 3 block.
• - , + or * at the beginning of a block turns it into the Bullet list block.
• 1. at the beginning of a block turns it into the Numbered list block.
• Any other number is viable for further items in the list, but 1. is required to start it.
• | , > or “ at the beginning of a block turns it into the Quote block.
• ``` at the beginning of a block turns it into the Code block

It is also possible to apply different styles directly by:

• **word** and __word__ applies the bold style to the word.
• _word_ applies the italics style to the word.
• ~word~ applies the strikethrough style to the word.
• `word` applies the inline code to the word.

Improvements

• Pulsar was updated to the new version, which resolved the issue related to the Javascript, which resulted in the Unexpected token `.` error when trying to pull the update the exporter.
• Pasting multiple paragraphs from an HTML context into Docs preserves new lines in the original text and creates them as new text blocks.
• Token blocks in Docs now give you an option to filter out properties.
• Tokens are no longer deleted when their corresponding Figma file is removed; they remain in the Supernova with their latest values.
• Token blocks in Docs now have a tooltip on the properties button.

Bugfixes

• Billed now on the Subscription page now updates the price properly upon switching between monthly and annual plan on this tab.
• Email informing you about the failed payment now contains the proper link to fix the payment.
• Edited token values no longer have to be confirmed by Enter in order to be saved.
• Validation for empty token names now works properly.
• Fixed an issue that caused some fonts to not be detected properly.
• Token Group context menu button now shows properly on the whole up on row hover.
• All Copy buttons now work properly all across Supernova.
• Assigning some token as alias no longer makes Supernova blink for a split second.
• Rewiever role downloading an asset does no longer receive 403 error.
• Reviewer role can no longer attempt to resize the width of the property tabs.
• Deleting a token with dependencies refreshes the tokens page properly now.
• Supernova managed token now maintains its assigned Figma group even after making changes in the Figma design and refreshing it.

That's it for this release, but we'll be back with more soon. As always, if you'd like to see something new, fixed, or improved, join our Discord community — we're always there. You can also request a feature on our Feature Request Portal. Thank you for your support!