Document theme properties' default values
See original GitHub issueDescribe 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
- Leave out the
breakpoints
andfontSizes
keys from your theme. - Render
<div sx={{ fontSize: 1 }} />
- 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.
Issue Analytics
- State:
- Created 2 years ago
- Comments:8 (5 by maintainers)
Top GitHub Comments
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.
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