Utopia has recently released two new plugins to npm:
utopia-core-scss. I wrote about the SCSS library last week, so now it’s time to dig into
Utopia Core is a calculation library for type, space & clamp. As Utopia has grown, a number of people in the web community have generously created library-specific generators including Tailwind & StyleX!
To make it simpler to create future generators, we’ve published this library to handle the maths, so you can focus on the implementation details specific to your language/library. A WordPress theme.json generator is in the pipeline on the back of this work, so watch this space.
We’re in the process of refactoring Utopia.fyi & our Figma plugins to use this library too, so there’s a standardised set of calculations happening across all our tooling.
CSS generator updates
On the back of that refactor, we’ve been able to ship some long-awaited updates to the CSS generators.
Firstly, if you’re using the new SCSS plugin, you can copy the SCSS config and paste it into your project.
Next, there’s a new toggle for
rem/px for the space & clamp generators. Depending on the design, you may wish to disconnect your spacing from browser zoom settings that affect
rem values. Note, this isn’t available for text generators for accessibility reasons.
We’ve updated the generators to use
vi instead of
vw units. This relates to the inline axis, rather than width, and respects the
Finally, if you’re using container queries, you can calculate your type scales relative to the container, rather than the viewport. I’ve personally been using this on a recent project and look forward to blogging about it soon.
We’re aware that Utopia isn’t ‘open source’ right now, in that it doesn’t have a public GitHub repository. This has historically been purely a time-driven decision. James and I work on Utopia when we can and much as we’d like to give more to the project, we simply haven’t had the time & headspace to manage the administration of a truly open source library.
Posted on in Web