Overall system mixin strategy

Opening this to get consensus on how to proceed.

It feels to me like the overall design of what system props are available on which components is unintuitive — but it’s also possible I don’t have a good mental model of the overall strategy with regard to primitives.

Here’s some of the things that bit me in the past hour:

• Box has bg but Flex doesn’t
• Flex has top/bottom but not left/right
• Typography supports as aliased as element but nothing else does

A good first step I think would be to move the flex mixin into Box, and then have Flex just become Box with display: flex as default.

Additionally I’d be interested in what is required to support as universally on our primitive elements.

[dzucconi]

https://styled-system.com/guides/migrating/

Number values are no longer converted to strings with px units. Most CSS-in-JS libraries now handle this, but if you need to use string values with units, provide them in your theme object and in prop values.

[zephraph]

While I agree with the direction I firmly believe we shouldn’t do it on the current version of styled-systems.

We desperately need to upgrade. The latest version of styled-system has a drastically reduced set of helpers that makes concerted effort towards providing consistent props a relatively trivial matter.

I know it’s gonna be hell to upgrade, but we really should. Take a look at my WIP pr. I’ll try to get back around to that next week.