@theme-ui/components
Advanced tools
Changelog
v0.6.0
changes relative to 0.3, not the latest 0.6 prerelease
Styled
components dict was renamed to Themed
to avoid
confusion with styled
components constructors from @emotion/styled
and
similar libraries.
theme.useRootStyles
configuration option (false by default). Set it to
true
to add styles.root
to html
instead of body
.
theme.useBodyStyles
configuration option still defaults to true
, but
it's going in to be deprecated in favor of theme.useRootStyles
in the
future.New scale: transitions
supporting transition
CSS property. Issue
#1079, PR
#1272
Objects in nested scales can now have a __default
key. PR
#951
Given the theme
const theme = {
colors: {
primary: {
__default: '#00f',
light: '#33f',
}
}
}
color: 'primary'
resolves to color: '#00f'
.
Configuration option for printing color mode. PR #1267, issue #1144. No more wasted ink.
{
initialColorModeName: "dark",
printColorModeName: "light"
}
A new component, Paragraph was added in PR #1298
Theme UI 0.6 depends on Emotion 11, and isn't compatible with Emotion 10 anymore.
Refer to Emotion 11 release notes for more information.
Color mode flash on first render is gone, but to achieve this we had to bring
back theme.rawColors
.
theme.colors
when reading
theme from useThemeUI
or inside sx
..colors
object contains Custom CSS Properties now..rawColors
.Default color mode name is no longer "default"
— it's now undefined
, what
represents the lack of color mode set by user or detected from preferences.
useColorSchemeMediaQuery
defaults to true
. Issue
#624, PR
#1373
How to migrate? Add useColorSchemeMediaQuery: false
to your theme if you
don't have this property.
Read more in the docs.
We no longer export internal React context named as Context
😅 It wasn't and
it's still not public API, but if you used it and you really need it, you
can grab it as __ThemeUIContext
. (But please don't do this. Use
ThemeProvider
from @theme-ui/core for local theme overrides instead.)
Styled
will be removed in v0.7. Use Themed
instead.useBodyStyles
will be removed in v0.7. Use useRootStyles
instead.