Pre-Christmas gifts!

This version was released on December 8, 2022

Following our exciting set of design token-related releases, we wanted to take an opportunity to focus on smaller (but much-needed) improvements and bug fixes. However, as it usually happenes, we sprinkled some nice features on top of the release as well. Well.. we actually did a lot of them as well. Without further ado, enjoy!

Introducing Color contrast grid

Last month, after we saw a great talk about documenting accessibility by Stéphanie Walter, we asked ourselves — how might we make it easier for designers to document the accessibility of their design systems? We're also big fans of this color contrast grid tool by EightShapes — as you may see, it was a big inspiration for this release.

Today, we're bringing a new way how Supernova can help with identifying and documenting color contrast for colors of your design system. With our new Color contrast grid variant, your designers can easily decide which colors is safe to combine and therefore create accessible experiences for as many people as possible.

The best part is that you can just connect your tokens and we automatically calculate all the contrasts in the documentation for you. When tokens change, the contrast grid updates automatically too.

Oftentimes, color palettes contain a lot of different shades of color. Our color grid is ready for it! In these cases, the first row and column become sticky, so you always see what is being compared. Try it in the example below.

Check our updated documentation to see how you can set up color contrast grids in your documentation.

Introducing block variant thumbnails

As many more variants found its way into our blocks over time (with more variants on the way), we felt the need to give you a quick visual thumnnail how the block will be represented in your deployed page. While it doesn't yet replace proper preview, it gives you a great idea about how your block will look like without the need to publish the page to see the result.

To enjoy the new preview, check out the variant selector we recently introduced. When hovering over a variant, you'll now see a description and image showing what it is all about:

Preview of block variant thumbnails and descriptions in token blocks

We have enhanced all existing variants with thumbnails so you can start using this feature right away!

Introducing VSCode extension profiling mode

We have been steadily improving reliability, performance and features of our VSCode extension for developing & testing of exporters, but today we are releasing very significant update worth mentioning separately: Profiling mode.

Until now, you could only run exporter in Production mode, basically exporting your code, assets and documentation locally, with basic information about what is happening:

This view however doesn't provide enough debugging information and it completely ignores one very significant part: performance.

Performance of builds is extremely important because, for example, each publish creates the documentation that gets shown to your users using the same engine as VSCode extension uses - and so slow build will affects your users repeatedly. Having performant extensions / blocks is therefore important to keep users happy.

With the new profiling option, you get several new superpowers:

• More precise error detection - the build will stop immediately after encountering issue, on a specific blueprint
• Network information / network call stack
• Performance measures for each separate page in case of documentation
• Performance measures for each injected blueprint - allowing you to very quickly see what part of code causes slowdowns

You can access the profiling option using the new button right next to existing Run Exporter:

After running exporter in profiling mode, you'll see lot more new information. In the example above, we can immediately see that the documentation page called Typography was built in approx. 70ms, while building its content and side menu took the most time. The error handling was also greatly improved in both production and profiling mode, so looking for errors should be much more precise now.

The extension update is available right now in VSCode store, we hope it will help you build the most amazing templates possible!

Improved doc publishing performance

"Eating our own dog food", as they say, we used the improvement to the VSCode extension to track sources of inefficiencies and significantly improved build times of the documentation. We have additionally tracked down inefficiencies in our build pipelines as well, and squashed them.

Combined, we see dramatic improvements in speed of publishing for both large and medium sized documentations, cutting the time to wait for publish by 1-3x:

But this journey only started for us - due to some new capabilities we built for ourselves, we are continuing on the optimizations and will report back as they come.

Introducing Bitbucket and GitLab hosted exporters

It is now possible to host your own exporters in your public and private repositories on Bitbucket and GitLab as well. You can add your custom exporters through the updated store window:

We know this will make lot of developers happy, so merry Christmas!

Introducing cookie consent

You can now enable cookies consent banner for your documentation! In order to do that, head to the documentation settings / analytics section, and turn it on. You can also customize some parts of it, like the description and title. Banner can also be styled using our customizable CSS to look however you want.

New cookie banner settings in Settings / Analytics section

After you've enabled the banner, republish the documentation and the banner will show up:

Introducing PAT for Azure & GitHub

We have significantly improved our Azure & GitHub integration and you can now connect with personal access tokens as well! This can be used in various way, but most importantly allows for additional use-cases with Azure and GitHub Enterprise offerings.

Starting today, all platforms can be authenticated with PATs and OAuth options, so you should no longer be limited whether you are using personal, team or enterprise offerings of all version providers.

Even better Figma Frames!

We have further improved the Figma Frames dialog. In addition to brand selectors and better structuring, we have now improved the way content is generated for component variants, to include much more readable names of that specific variant:

If you need to know what precise properties the component has and what the values map to, simply hover over the variant to reveal full name including the variant names. For most scenarios, this system produces much more readable output.

Search by value

The search was improved to also search by value in addition to names and descriptions of the token.

This can be used to easily filter ranges of tokens or just find the particular one which value you have just copied from Figma.

Improvements

• Documentation editor uses page IDs in the URL now, which means that you can now send out the link to the specific page! It also means that refreshing documentation editor will properly load the page you were previously at.
• Shortcut blocks can now use circular links and the limitation was removed.
• It is now possible to upload .woff2 and .eod files as resources!
• The search in frame and asset selector dialogs was improved to show groups.
• Build & hook dialogs were improved — they are now wider and their layout was updated.
• Markdown should now be more stable when importing over 10 markdown pages at once (including for those who have 50+ pages :)
• Shortcut blocks no longer generates link when they link to a hidden page.
• It is now possible to define which token properties are going to be exported in the specific token block.
• Asset block now shows only the first 50 embed assets in the editor; the rest of them are shortened in the editor. Published documentation contains all assets.
• Supernova displays user friendly message when the image in the Shortcut block fails to load.
• Cloud shows you a popup information when the import is started and you are informed about its progress.
• Brand selectors on content, data sources pages and in documentation blocks display the brand icon now, increasing visibility.
• Documentation blocks icons were updated to make sure they are all unique. And you can no longer confuse them (that is not a challenge!).
• Learn and Get In Touch buttons in the top menu were merged into one Learn button with relevant items.
• New --paragraphSpacingAfter CSS custom property that affects spacing after paragraphs

Bugfixes

• Shortcut blocks no longer cause documentation to not deploy when they contain link to non-existing page.
• Updating theme source no longer triggers the update of all sources.
• Creating new pages no longer causes the page to change positions for split second.
• Rich text editor bar works properly again.
• Clicking on the invite link now takes you to the proper welcome page.
• Block variant picker is no longer wrapping and shortening longer named variants into ....
• Data sources indicator is now brand-sensitive and no longer showing the status of the whole workspace and brands at once.
• Hitting Shift + Tab while having list items selected no longer changes their order.
• Scroll bar no longer appears in the initial onboarding screen.
• Dark theme now properly appears in all brands.
• View button is no longer missing in the successfull documentation deploy message.
• VIEW BUILDS text in the button after triggering hook is properly aligned now.
• Code formatting no longer results in the decreased performance when using Safari.
• Text highlighting in editor now works properly in Safari.
• Fixed a rare issue that could cause builds to get stuck In Progress state forever.
• Copying from the page title or the description no longer trims whitespaces.
• Onboarding menu is now always open after creating a new workspace.
• Admins are now able to edit workspace name properly again.
• Successful import no longer triggers a warning popup.
• Table block no longer shows you the "ghost" image button.
• Token name and value of almost-transparent tokens now has better legibility.
• Fixed case when hidden page displayed in mobile navigation
• Fixed custom.css browser caching
• Fixed missing social metadata for documentation main page URL

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!