Integrate with Capsize

capsize is a library from seek-oss built for flipping the way we define typography in CSS to be more like how designers think about typography. Here’s a great talk from @michaeltaranto about the differences: https://www.youtube.com/watch?v=TGHbkTGVqoU

We’d like to integrate Chakra with Capsize so that we can provide this functionality out of the box.

Spawned from a Twitter discussion: https://twitter.com/markdalgleish/status/1282575411885404160

[jesstelford]

Update 2021-12-15: I’ve created a package chakra-capsize to integrate with capsize! See my comment below for details.

---

Love this!

I just integrated Capsize’s output into a new Chakra V1 site.

I ran Capsize 40 times; 10 font sizes (xs to 6xl) x 4 leading sizes (none, tight, base, loose), which gave me a very large object that I popped into the theme.

I then created a new <Text /> component which accepts a size & leading prop.

Here’s the result:

[michaeltaranto]

Launched capsize@v1 this week to npm. Might make it easier to play around with.