Document theme properties' default values

[benface]

Describe the bug
I noticed that if I omit some keys from the theme object I pass to the ThemeProvider, such as breakpoints and fontSizes, some default values will be used, and I couldn’t find that documented anywhere so I don’t think it’s by design. The default values for these two keys are the same as in the base preset, but I can confirm that it’s not the whole base preset, as fonts and fontWeights behave as expected, for example. Could it have something to do with the fact that breakpoints and fontSizes are arrays? What’s especially strange is that I can’t find the default values in the theme returned by the useTheme hook; they only pop up when I try to use them (e.g. fontSize: 1, or any value set to an array will flip at 40em, then 52em, etc.).

To Reproduce

1. Leave out the breakpoints and fontSizes keys from your theme.
2. Render <div sx={{ fontSize: 1 }} />
3. Notice the rendered CSS is font-size: 14px.

Expected behavior
I would’ve expected the rendered CSS to be font-size: 1px, which is the case when the theme has a fontSizes key set to an empty array.

[lachlanjc]

This is on the list in #832! Relevant code here: https://github.com/system-ui/theme-ui/blob/develop/packages/css/src/index.ts#L76-L79

[benface]

Ah ha, thank you @lachlanjc. I see “remove default fontSizes and space values”; should breakpoints be added to that list?

[lachlanjc]

Hmm, I'm of two minds there. I think it makes sense for fontSize & space since those are visible. But having some default breakpoints doesn't seem so bad? Setting them up is a bit of a pain & there are real scenarios where you don't need to customize those. But could definitely be convinced otherwise.

[benface]

You’re right. As long as it’s documented, having some default breakpoints makes sense!

[lachlanjc]

I've changed my mind on this. I'm actually in favor of keeping these default values — I think a big part of the appeal of Tailwind & how easy it is to get started with Tailwind is their excellent defaults. While most users will continue to want to set their own theme, anything we can do to make getting started faster seems like a win. & as you said, it's still easy enough to reset these values to be empty. Will plan to make this clearer in documentation.

[benface]

Cool, that works too!

[hasparus]

🚀 Issue was released in v0.14.0 🚀

[hasparus]

🚀 Issue was released in v0.14.0 🚀