New Data Model

Introducing the biggest change to our data model yet: W3C compatible design tokens!

This version was released on August 26, 2023.

We've been hard at work to bring some exciting new updates. We went through the most significant change to our data model yet to bring you W3C-compatible design tokens. Read on to learn more about this new change.

New W3C data model!

Our data model now matches the W3C design token format, which means better integration with your favorite tools. Previously, importing from Tokens Studio was somewhat limited. Not any more! Your tokens now import precisely as expected.

Now you can use 23 different token types, instead of just our original 11, so managing your design system will become even easier.

We also updated the navigation so that you can switch between token types more easily:

Limitations and changes

All of your tokens have been automatically migrated, and they should be unchanged in most cases. However, certain tokens might have changed slightly.

Dimension tokens

Dimension tokens containing negative values will be given a new value of 0, as most dimension values can no longer be negative. However, there are couple of exceptions that can have negative values, so they won't be changed. They are:

  • Generic dimension
  • Letter spacing
  • Paragraph spacing
  • Z-index

Measure tokens

Measure tokens with no specified type were converted like this:

  • Measure used as width in a border → Border width
  • Measure used as blur in a shadow → Radius
  • Measure used as spread in a shadow → Radius
  • Measure used as size in a typography → Font size
  • Measure used as line height in typography → Line height
  • Measure used as paragraph spacing in typography → Paragraph spacing
  • Measure used as paragraph indent in typography → Paragraph indent
  • Measure used as letter spacing in typography → Letter spacing
  • One measure used in multiple of these was converted to separate tokens in their relevant categories
  • Measure not referenced at all → Dimension with px unit

Other token types

A few other tokens were also converted:

  • Text → Product copy
  • Other → Generic string
  • Radius → Border radius

Documentation blocks

Converting all of your tokens to this new model might mean that some of your documentation blocks containing embed tokens (which are a different type now) can appear empty. Don't worry — you can resolve this issue by hovering above the token block in your editor and selecting the proper matching token type. Once you do that, your previous tokens will appear back in the block right away.

We advise double checking your token blocks in your documentation pages to make sure everything is appearing correctly. If anything is unclear or you think it’s not working correctly please feel free to get in touch with our team at support@supernova.io.

General improvements and fixes

  • We have noticed an increased usage of our Grid block variant for displaying tokens along with themes, so we've made improvements to the way token values are displayed in this combination. Now, each theme value is prominently shown alongside the token value preview — so there is no doubt in what the actual value for specific theme is.
  • Fixed issues where overriden home label wasn't correct in mobile version.

That's it for this release, and we'll be back with more soon. Thanks for your support and partnership!