gatsby-plugin-theme-ui
- fix(gatsby-plugin-theme-ui): Stop using JSX in gatsby-browser.js and gatsby-ssr.js (@hasparus)
- Piotr Monwid-Olechnowicz (@hasparus)
🎉 This release contains work from a new contributor! 🎉
Thank you, kamatte (@kamatte-me), for all your work!
@theme-ui/components
- fix: Donut component's
viewBox
svg property #2209 (@kamatte-me)
- fix: Donut component's
- kamatte (@kamatte-me)
- Lachlan Campbell (@lachlanjc)
- Piotr Monwid-Olechnowicz (@hasparus)
@theme-ui/editor
,@theme-ui/match-media
,theme-ui
- Piotr Monwid-Olechnowicz (@hasparus)
@theme-ui/color-modes
,@theme-ui/components
,@theme-ui/core
,@theme-ui/editor
,gatsby-plugin-theme-ui
,gatsby-theme-style-guide
,gatsby-theme-ui-layout
,@theme-ui/match-media
,@theme-ui/mdx
,@theme-ui/parse-props
,@theme-ui/sidenav
,@theme-ui/style-guide
,@theme-ui/theme-provider
,theme-ui
- fix: change react and react-dom peer dependency to >16 (@hasparus)
- Piotr Monwid-Olechnowicz (@hasparus)
@theme-ui/components
- fix(components): add missing forwardRef and fix Switch props (@hasparus)
- Piotr Monwid-Olechnowicz (@hasparus)
🎉 This release contains work from new contributors! 🎉
Thanks for all your work!
❤️ Brage (@braaar)
❤️ peterlits zo (@PeterlitsZo)
❤️ Ryan Turner (@rtturner)
❤️ Cannon Lock (@CannonLock)
- feat(examples/next): Add new deps, fully use TSX, rebuild #2068 (@lachlanjc)
@theme-ui/components
,@theme-ui/css
,gatsby-plugin-theme-ui
,@theme-ui/mdx
,@theme-ui/sidenav
,@theme-ui/theme-provider
,theme-ui
- Remove @emotion/styled usage #2043 (@atanasster @hasparus @lachlanjc)
@theme-ui/tailwind
- feat(tailwind): Upgrade Tailwind theme conversion for v3.0 #2082 (@lachlanjc)
@theme-ui/custom-properties
- feat(custom-properties): Warn in development on invalid theme keys #2080 (@lachlanjc)
@theme-ui/color-modes
- feat(color-modes): Warn when theme color keys have leading/trailing whitespace #2099 (@lachlanjc)
theme-ui
- feat(theme-ui): Add sx prop to BaseStyles component #2081 (@lachlanjc)
- fix(docs): make layout more consistent #2168 (@hasparus)
- feat(docs): Add custom content for sketchy preset demo #1236 (@atanasster @hasparus @lachlanjc)
- fix(docs): Update recommendations in Keyframes doc #2079 (@lachlanjc)
- docs: add dependencies to "getting started" #2075 (@braaar)
@theme-ui/color-modes
gatsby-plugin-theme-ui
@theme-ui/style-guide
@theme-ui/components
- fix(components): Update IconButton type definition to include size prop #2121 (@rtturner)
- components: Fix visual collapsing bug with Switch component #2067 (@lachlanjc)
@theme-ui/sidenav
- fix(sidenav): Build with latest theme-ui version #2084 (@lachlanjc)
- Make change non-breaking #2075 (@lachlanjc)
- Remove sx prop #2075 (@lachlanjc)
- sidenav: Fix props leaking to DOM on Pagination component #2075 (@lachlanjc)
- docs(sx-prop): add more detail for responsive values. #2116 (@PeterlitsZo @lachlanjc)
- docs(jsx-pragma): Add section on using with vite #2119 (@PeterlitsZo @lachlanjc)
- docs: Clarify usage of theme prop in MDX Layout docs #2100 (@CannonLock)
- docs(jsx): add some more detail to #with-swc section in jsx-pragma docs #2094 (@hasparus @lachlanjc)
- e2e: Upgrade dependencies #2098 (@lachlanjc)
- Set up CodeSandbox CI #2085 (@lachlanjc)
- examples: Remove CodeSandbox starter example #2086 (@lachlanjc)
- docs: Document default theme values #2087 (@lachlanjc)
@theme-ui/sidenav
- sidenav: Fix props leaking to DOM on Pagination component #2057 (@lachlanjc)
- Finish editing note #2079 (@lachlanjc)
- Atanas Stoyanov (@atanasster)
- Brage (@braaar)
- Cannon Lock (@CannonLock)
- Lachlan Campbell (@lachlanjc)
- Lennart (@LekoArts)
- peterlits zo (@PeterlitsZo)
- Piotr Monwid-Olechnowicz (@hasparus)
- Ryan Turner (@rtturner)
@theme-ui/css
- css: Make background a theme-aware property #2056 (@lachlanjc)
- @dependabot[bot]
- Akash (@appsparkler)
- Lachlan Campbell (@lachlanjc)
- Piotr Monwid-Olechnowicz (@hasparus)
🎉 This release contains work from new contributors! 🎉
Thanks for all your work!
❤️ Simen A. W. Olsen (@cobraz)
❤️ Akash (@appsparkler)
❤️ Greg Poole (@gpoole)
Move Emotion and MDX packages to peerDeps (#1867)
BREAKING CHANGE: @emotion/react
and @mdx-js/react
were moved to peerDependencies of theme-ui
, @theme-ui/mdx
and @theme-ui/sidenav
and must be installed separately. This is a revert of change from Theme UI v0.3, and it's meant to help solve version clashes and context mismatch bugs on user side. Connected issues: #1793, #1531, #1530, #1388, #1345, #1130.
@theme-ui/color-modes
,@theme-ui/components
,@theme-ui/core
,@theme-ui/css
,gatsby-plugin-theme-ui
,@theme-ui/mdx
,@theme-ui/parse-props
,@theme-ui/sidenav
,@theme-ui/theme-provider
,theme-ui
- fix(docs): Set text color on Demo page JSON code #2024 (@appsparkler)
@theme-ui/core
- fix: add missing deepmerge dependency (@hasparus)
- Try out CodeQL (@lachlanjc)
@theme-ui/core
,theme-ui
- docs: Write migration notes for v0.13 (@hasparus)
gatsby-plugin-theme-ui
- Bump peerDependency in
gatsby-plugin-theme-ui
(@hasparus)
- Bump peerDependency in
- docs: Add 3 new projects to Resources page #2044 (@lachlanjc)
- docs: Add indivorg/theme to resources #2040 (@cobraz)
- docs: Add next-theme-ui #2041 (@cobraz)
- docs(pragma): add SWC instructions for Next.js #2020 (@gpoole)
- Akash (@appsparkler)
- Greg Poole (@gpoole)
- Lachlan Campbell (@lachlanjc)
- Piotr Monwid-Olechnowicz (@hasparus)
- Simen A. W. Olsen (@cobraz)
- Add .md to .eslintignore (@hasparus)
@theme-ui/prism
- docs: use the @theme-ui/components Select in /demo page (@hasparus)
- Piotr Monwid-Olechnowicz (@hasparus)
🎉 This release contains work from a new contributor! 🎉
Thank you, William Pei (@draekien), for all your work!
@theme-ui/color-modes
,@theme-ui/css
- Use media query value when useColorSchemeMediaQuery is set to 'system' #1981 (@julianbenegas @draekien)
@theme-ui/color-modes
,@theme-ui/color
,@theme-ui/components
,@theme-ui/core
,@theme-ui/css
,@theme-ui/custom-properties
,@theme-ui/editor
,gatsby-plugin-theme-ui
,gatsby-theme-style-guide
,gatsby-theme-ui-layout
,@theme-ui/match-media
,@theme-ui/mdx
,@theme-ui/parse-props
,@theme-ui/preset-base
,@theme-ui/preset-bootstrap
,@theme-ui/preset-bulma
,@theme-ui/preset-dark
,@theme-ui/preset-deep
,@theme-ui/preset-funk
,@theme-ui/preset-future
,@theme-ui/preset-polaris
,@theme-ui/preset-roboto
,@theme-ui/preset-sketchy
,@theme-ui/preset-swiss
,@theme-ui/preset-system
,@theme-ui/preset-tailwind
,@theme-ui/preset-tosh
,@theme-ui/presets
,@theme-ui/prism
,@theme-ui/sidenav
,@theme-ui/style-guide
,@theme-ui/tailwind
,@theme-ui/theme-provider
,theme-ui
,@theme-ui/typography
- docs(components): Include form control color names #1982 (@lachlanjc)
- @dependabot[bot]
- Julian Benegas (@julianbenegas)
- Lachlan Campbell (@lachlanjc)
- Lennart (@LekoArts)
- Piotr Monwid-Olechnowicz (@hasparus)
- William Pei (@draekien)
@theme-ui/components
- Patch GridProps #1933 (@aaronadamsCA)
- Aaron Adams (@aaronadamsCA)
🎉 This release contains work from a new contributor! 🎉
Thank you, Matt Gleich (@gleich), for all your work!
@theme-ui/color-modes
,@theme-ui/color
,@theme-ui/components
,@theme-ui/core
,@theme-ui/css
,@theme-ui/custom-properties
,@theme-ui/editor
,gatsby-plugin-theme-ui
,gatsby-theme-style-guide
,gatsby-theme-ui-layout
,@theme-ui/match-media
,@theme-ui/mdx
,@theme-ui/parse-props
,@theme-ui/preset-base
,@theme-ui/preset-bootstrap
,@theme-ui/preset-bulma
,@theme-ui/preset-dark
,@theme-ui/preset-deep
,@theme-ui/preset-funk
,@theme-ui/preset-future
,@theme-ui/preset-polaris
,@theme-ui/preset-roboto
,@theme-ui/preset-sketchy
,@theme-ui/preset-swiss
,@theme-ui/preset-system
,@theme-ui/preset-tailwind
,@theme-ui/preset-tosh
,@theme-ui/presets
,@theme-ui/prism
,@theme-ui/sidenav
,@theme-ui/style-guide
,@theme-ui/tachyons
,@theme-ui/tailwind
,@theme-ui/theme-provider
,theme-ui
,@theme-ui/typography
- Merge remote-tracking branch 'origin/stable' into develop (@hasparus)
- docs(examples/next): showcase automatic runtime pragma comment in document.js #1923 (@hasparus)
- docs(examples/next): use TS, variants and improve contrast #1923 (@hasparus)
- docs: correct location of
initialColorModeName: 'light'
#1922 (@gleich)
🎉 This release contains work from new contributors! 🎉
Thanks for all your work!
❤️ Torne Wuff (@tornewuff)
❤️ Jordie Bodlay (@jordie23)
Fixed a long-standing bug with color modes in nested providers (#1456)
Added @theme-ui/css/utils with TypeScript CIF functions and fix preset types (#1862)
- Added TypeScript
Constrained identity functions
makeTheme
,makeStyles
andmakeColorsScale
which can be imported from @theme-ui/css/utils. - Used aformentioned functions to properly define types of presets. Exported themes are now assignable to Theme but their types narrowly describe their exact values.
@theme-ui/color
,@theme-ui/css
,@theme-ui/preset-base
,@theme-ui/preset-bootstrap
,@theme-ui/preset-bulma
,@theme-ui/preset-dark
,@theme-ui/preset-deep
,@theme-ui/preset-funk
,@theme-ui/preset-future
,@theme-ui/preset-polaris
,@theme-ui/preset-roboto
,@theme-ui/preset-sketchy
,@theme-ui/preset-swiss
,@theme-ui/preset-system
,@theme-ui/preset-tailwind
,@theme-ui/preset-tosh
,@theme-ui/presets
- Add @theme-ui/css/utils with TypeScript CIF functions and fix preset types #1862 (@tornewuff @hasparus)
@theme-ui/color-modes
,@theme-ui/core
,@theme-ui/editor
,@theme-ui/theme-provider
,theme-ui
- Update global-styles.mdx #1858 (@jordie23)
@theme-ui/core
,@theme-ui/css
@theme-ui/color-modes
,@theme-ui/components
,@theme-ui/core
,@theme-ui/editor
,gatsby-theme-style-guide
,gatsby-theme-ui-layout
,@theme-ui/match-media
,@theme-ui/mdx
,@theme-ui/parse-props
,@theme-ui/sidenav
,@theme-ui/style-guide
,@theme-ui/theme-provider
,theme-ui
- Remove dependabot from the changelog (@hasparus)
- docs: add
@theme-ui/css
to sidebar and packages page #1877 (@hasparus) - docs: change intro code snippets to TypeScript #1877 (@hasparus)
@theme-ui/css
@theme-ui/core
,@theme-ui/css
theme-ui
@theme-ui/prism
- Update snapshots #1768 (@lachlanjc)
- Jordie Bodlay (@jordie23)
- Lachlan Campbell (@lachlanjc)
- Piotr Monwid-Olechnowicz (@hasparus)
- Torne Wuff (@tornewuff)
🎉 This release contains work from a new contributor! 🎉
Thank you, Vlad Shcherbin (@vladshcherbin), for all your work!
Allow easy styling autofilled of Inputs (#1811)
Background color of autofilled inputs will now default to
theme.colors.background
. It can be changed by setting
autofillBackgroundColor
prop.
- Fix typo #1835 (@vladshcherbin)
@theme-ui/color-modes
,@theme-ui/components
,@theme-ui/editor
,theme-ui
@theme-ui/color
,@theme-ui/css
@theme-ui/color
,@theme-ui/components
,@theme-ui/css
,@theme-ui/custom-properties
,@theme-ui/editor
,gatsby-theme-style-guide
,@theme-ui/preset-bootstrap
,@theme-ui/preset-bulma
,@theme-ui/preset-dark
,@theme-ui/preset-deep
,@theme-ui/preset-funk
,@theme-ui/preset-future
,@theme-ui/preset-polaris
,@theme-ui/preset-roboto
,@theme-ui/preset-sketchy
,@theme-ui/preset-swiss
,@theme-ui/preset-system
,@theme-ui/preset-tailwind
,@theme-ui/style-guide
- Add missing meta repository to published packages #1807 (@aaronadamsCA)
- Add missing repository metadata to published packages #1779 (@aaronadamsCA)
- Docs: update JSX pragma guide with automatic runtime section #1718 (@flo-sch @hasparus)
- docs: fix DocSearch not loading in SSR (@hasparus)
- Docs: Move homepage to root path #1783 (@lachlanjc)
@theme-ui/components
- docs(components): fix Paragraph default variant #1795 (@bernharduw)
- Aaron Adams (@aaronadamsCA)
- Bernhard Gschwantner (@bernharduw)
- Florent SCHILDKNECHT (@flo-sch)
- Lachlan Campbell (@lachlanjc)
- Piotr Monwid-Olechnowicz (@hasparus)
- Vlad Shcherbin (@vladshcherbin)
@theme-ui/components
- fix: Allow overriding Paragraph margins via theme #1775 (@bernharduw)
- Bernhard Gschwantner (@bernharduw)
modernize Babel config (#1721)
Theme UI packages became lighter! Built source code is now 9.5 kB (34%) smaller.
The trade-off is, Babel config has changed and it no longer supports Internet Explorer 11. If you need to support legacy browsers, you can transpile node_modules (e.g. with next-transpile-modules).
- See build raport with size comparison for each package
- Inspect updated Babel config
- Visit Bundlephobia
@theme-ui/preset-base
,@theme-ui/preset-bootstrap
,@theme-ui/sidenav
,@theme-ui/typography
@theme-ui/components
- fix(components): set Select's bgColor to "background" - fixes dark mode (@hasparus)
- style DocSearch #1714 (@atanasster @hasparus)
- Atanas Stoyanov (@atanasster)
- Piotr Monwid-Olechnowicz (@hasparus)
@theme-ui/theme-provider
- fix(theme-provider): set body margin to 0 (@hasparus)
@theme-ui/theme-provider
- Merge branch 'develop' into stable (@hasparus)
- Piotr Monwid-Olechnowicz (@hasparus)
@theme-ui/color-modes
- fix(color-modes): stop showing current color mode as initial mode in rawColors.modes (@hasparus)
@theme-ui/color-modes
,@theme-ui/color
,@theme-ui/components
,@theme-ui/core
,@theme-ui/css
,@theme-ui/custom-properties
,@theme-ui/editor
,gatsby-plugin-theme-ui
,gatsby-theme-code-recipes
,gatsby-theme-style-guide
,gatsby-theme-ui-layout
,@theme-ui/match-media
,@theme-ui/mdx
,@theme-ui/parse-props
,@theme-ui/preset-base
,@theme-ui/preset-bootstrap
,@theme-ui/preset-bulma
,@theme-ui/preset-dark
,@theme-ui/preset-deep
,@theme-ui/preset-funk
,@theme-ui/preset-future
,@theme-ui/preset-polaris
,@theme-ui/preset-roboto
,@theme-ui/preset-sketchy
,@theme-ui/preset-swiss
,@theme-ui/preset-system
,@theme-ui/preset-tailwind
,@theme-ui/preset-tosh
,@theme-ui/presets
,@theme-ui/prism
,@theme-ui/sidenav
,@theme-ui/style-guide
,@theme-ui/tachyons
,@theme-ui/tailwind
,@theme-ui/theme-provider
,theme-ui
,@theme-ui/typography
- Merge branch 'stable' into develop (@hasparus)
- Piotr Monwid-Olechnowicz (@hasparus)
@theme-ui/color-modes
@theme-ui/color-modes
,@theme-ui/css
,@theme-ui/custom-properties
,theme-ui
- fix(color-modes): merge rawColors from nested theme providers (@hasparus)
- Reverted
cache-provider
PR as it significantly complicates SSR setup and breaks apps without explicit Emotion SSR config. system-ui#1717 (comment).
- @Zolwiastyl
- Piotr Monwid-Olechnowicz (@hasparus)
-
BREAKING:
theme.config.useRootStyles
now defaults totrue
following deprecation ofuseBodyStyles
. Styles fromtheme.styles.root
are now added to<html>
element by default. -
Moved theme configuration options to
config
object in theme.- Deprecations:
useRootStyles
,useCustomProperties
,useColorSchemeMediaQuery
,useBorderBox
, anduseLocalStorage
options on the theme object are now scoped under aconfig
object on the theme, and the root-level options, now deprecated, will be removed in a future release.
(e.g. you should be setting
theme.config.useBorderBox
instead oftheme.useBorderBox
)- ⚠ All config options should be migrated at once. If Theme UI sees
theme.config
exists, it won't look for options on thetheme
.
- Deprecations:
-
Removed APIs, previously deprecated in 0.6.0
theme.useBodyStyles
⟶theme.config.useRootStyles
Styled
⟶Themed
@theme-ui/color-modes
,@theme-ui/css
,gatsby-plugin-theme-ui
- (REVERTED in v0.8.1)
@theme-ui/core
,@theme-ui/sidenav
- Wrap top level ThemeProvider in CacheProvider #1717 (@hasparus @Zolwiastyl)
- Improve Switch component documentation #1687 (@flo-sch)
- Describe Preconstruct in Contributing.md #1715 (@hasparus)
🎉 v0.8.0 contains work from a new contributor! 🎉
Thank you, @Zolwiastyl, for all your work!
- @Zolwiastyl
- Florent SCHILDKNECHT (@flo-sch)
- Francis Champagne (@fcisio)
- Lachlan Campbell (@lachlanjc)
- Piotr Monwid-Olechnowicz (@hasparus)
@theme-ui/css
- Add 6 border logical color properties to scales #1668 (@lachlanjc)
- docs: useColorSchemeMediaQuery defaults to true (@hasparus)
- Lachlan Campbell (@lachlanjc)
- Piotr Monwid-Olechnowicz (@hasparus)
- Add new links to Resources page #1670 (@lachlanjc)
- Add link to JSX Pragma page on Getting Started doc (@lachlanjc)
@theme-ui/css
- Add 2 missing CSS column properties to scales #1669 (@lachlanjc)
- Add text-decoration-color to scales #1667 (@lachlanjc)
- Lachlan Campbell (@lachlanjc)
🎉 This release contains work from a new contributor! 🎉
❤️ David Dios (@dios-david)
Thanks for all your work!
@theme-ui/css
- Adding
scroll-margin
props #1664 (@dios-david)
- Adding
@theme-ui/editor
- chore(deps): bump reakit from 1.3.5 to 1.3.7 #1644 (@dependabot-preview[bot] @lachlanjc)
- David Dios (@dios-david)
- Kenny (@kenny-f)
- Lachlan Campbell (@lachlanjc)
🎉 This release contains work from a new contributor! 🎉
Thank you, Jonathan Van Buren (@vanbujm), for all your work!
gatsby-plugin-theme-ui
@theme-ui/components
- chore(deps): bump ssri from 6.0.1 to 6.0.2 in /examples/next #1661 (@dependabot[bot])
- chore(deps): [security] bump ssri from 6.0.1 to 6.0.2 #1660 (@dependabot-preview[bot])
- Have
breakpoints
accept custom media queries #1653 @carolinmaisenbacher
gatsby-plugin-theme-ui
,gatsby-theme-code-recipes
,gatsby-theme-style-guide
,gatsby-theme-ui-layout
- all packages -Build packages with Preconstruct 2 #1423 (@alexanderchan @hasparus)
-
Reexported
jsx
ascreateElement
to fix babel JSX pragma crash. Issue #1603, PR #1604 by @ethanwu10.The following code doesn't crash anymore.
<div {...{}} key="1" />
changes relative to 0.3, not the latest 0.6 prerelease
-
Styled
components dict was renamed toThemed
to avoid confusion withstyled
components constructors from@emotion/styled
and similar libraries. -
theme.useRootStyles
configuration option (false by default). Set it totrue
to addstyles.root
tohtml
instead ofbody
.theme.useBodyStyles
configuration option still defaults totrue
, but it's going in to be deprecated in favor oftheme.useRootStyles
in the future.
-
New scale:
transitions
supportingtransition
CSS property. Issue #1079, PR #1272 -
Objects in nested scales can now have a
__default
key. PR #951Given the theme
const theme = { colors: { primary: { __default: '#00f', light: '#33f', } } }
color: 'primary'
resolves tocolor: '#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.
- If you didn't install Emotion separately, this update shouldn't affect you.
- If your other dependencies depend on Emotion 10, and have no published versions for Emotion 11, you can use Yarn resolutions or Webpack's resolve.alias to enforce a version.
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
.- You can no longer read raw color values from
theme.colors
when reading theme fromuseThemeUI
or insidesx
. .colors
object contains Custom CSS Properties now.- If you need to pass original value somewhere where CSS Properties (e.g.
WebGL Canvas) won't work use
.rawColors
.
- You can no longer read raw color values from
-
Default color mode name is no longer
"default"
— it's nowundefined
, what represents the lack of color mode set by user or detected from preferences. -
useColorSchemeMediaQuery
defaults totrue
. Issue #624, PR #1373How 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. UseThemeProvider
from @theme-ui/core for local theme overrides instead.)
Styled
will be removed in v0.7. UseThemed
instead.useBodyStyles
will be removed in v0.7. UseuseRootStyles
instead.
Theme UI is now written in TypeScript, and the emitted types differ from
@types/theme-ui
.
-
false
in now accepted in responsive tuple types. PR #1499 -
Known colors (primary, text, background, accent, secondary) in
ColorMode
can now be nested scales.The following no longer typechecks, as
colors.primary
can be an object.sx={{ color: theme => theme.colors?.primary?.toUpperCase() }}
But the following code still works.
sx={{ color: theme => theme.colors?.primary }}
If
colors.primary
is an object,colors.primary.__default
is used. -
false
values are skipped before passing style objects to Emotion. Issue #1297, PR #1460.The following syntax is now supported
sx={{ color: isActive && blue }}
-
"as" prop on Themed.X components now properly opts out of typechecking
- TypeScript users, don't use
ComponentProps<typeof Themed['div']>
, importThemedComponent
and useThemedComponent<'div'>
instead.
- TypeScript users, don't use
-
Theme UI 0.6 depends on
csstype
v3 instead ofcsstype
v2. -
Renamed types
- Anything copied from
styled-system
types was renamed or removed. SxProps
was renamed toSxProp
.SxStyleProp
, an alias forThemeUIStyleObject
was removed. UseThemeUIStyleObject
instead.
- Anything copied from
Refer to the changelog for a full list of changes.
-
Make the rename of
Styled
toThemed
non-breaking. Add a deprecation warning onStyled
until a future release. PR #1461 -
Paragraph component's hardcoded responsive style has been removed (issue #1476)
-
Fix issue where css custom vars are only added to body if modes is in the colors declaration of the theme.
-
BREAKING: Move theme configuration options to
config
object in theme.
-
Breaking TypeScript: Known colors (primary, text, background, accent, secondary) in
ColorMode
can now be nested scales.The following no longer typechecks, as
colors.primary
can be an object.sx={{ color: theme => theme.colors?.primary?.toUpperCase() }}
But the following code still works.
sx={{ color: theme => theme.colors?.primary }}
If
colors.primary
is an object,colors.primary.__default
is used. -
Add
theme.useRootStyles
configuration option (false by default). Set it totrue
to addstyles.root
tohtml
instead ofbody
.theme.useBodyStyles
configuration option still defaults totrue
, but it's going in to be deprecated in favor oftheme.useRootStyles
in the future. - Accept `false` in responsive tuple types. PR #1499
-
Skip
false
values before passing style objects to Emotion. Issue #1297, PR #1460.
-
BREAKING: Default
useColorSchemeMediaQuery
totrue
. Issue #624, PR #1373How to migrate? Add
useColorSchemeMediaQuery: false
to your theme if you don't have this property. Read more in the docs. -
Option for
gatsby-plugin-theme-ui
to disable body script (injectColorFlashScript
, defaulting totrue
). Issue #1369, PR #1370 -
Bump versions
@mdx-js/mdx
and@mdx-js/react
to^1.6.22
, gatsby-plugin-mdx to^1.6.0
. PR #1351 -
Fix: "as" prop on Themed.X components now properly opts out of typechecking
- TypeScript users, don't use
ComponentProps<typeof Themed['div']>
, importThemedComponent<'div'>
instead.
- TypeScript users, don't use
-
@theme-ui/prism
: Support multiple highlight wrappers in a single code block. PR #1393
-
Support a default key for object in scales. PR #951
Given the theme
const theme = { colors: { primary: { __default: '#00f', light: '#33f', } } }
color: 'primary'
resolves tocolor: '#00f'
.
- Extract objects with nested variant props. Issue #1357
- Add ability for MDX styling, and fix mdx table align styles. Issue #654
- Remove recursive default values from CSS custom properties. PR #1327
- Render extra Embed props onto
iframe
tag instead of wrappingdiv
. Issue #966, PR #1122
- Remove recursive default values from CSS custom properties. PR #1327
- Switches from lodash.kebabCase to alternative package (param-case) per official Lodash documentation. PR #1304
- Rebuilds Prism preset with latest upstream theme changes. PR #1304
- Fix: Preserve order of variant expansion props. PR #1326 (bug introduced in 0.5.0-alpha.1)
- BREAKING: Rename
Styled
component toThemed
. PR #1323 - BREAKING: Make Text component use
span
instead ofdiv
- breaking TypeScript: Renamed and removed types. PR #1308
SxProps
toSxProp
.SxStyleProp
, an alias forThemeUIStyleObject
removed. UseThemeUIStyleObject
instead.
- Fix: Add
sx
props types to all props acceptingclassName
. PR #1308 - Fix WithPoorAsProp to work with ComponentProps utility type. PR #1308
- Add Paragraph component. PR #1298
- Bump React peerDependency to
"^16.14.0 || ^17.0.0"
. - Support automatic JSX runtime. Issue #1160, PR #1237
- Bump React peerDependency to
"^16.14.0 || ^17.0.0"
. - Apply variant styles before responsive styles. Issues #1030, and #720, PR #1273
- BREAKING: Upgrade to Emotion 11, and
csstype
3. PR #1261- We are now depending on
@emotion/react@11
instead of@emotion/core@10
sx
prop types are still global, and we opt in for Emotioncss
prop types (This will change in the future.)- Refer to Emotion 11 release notes for more information.
- We are now depending on
- Fix color CSS Custom Properties recursive reference
- Add transitions scale. Issue #1079, PR #1272
- Use correct version of @theme-ui/components in theme-ui package. (Locked dependencies on other Theme UI packages)
- Add documentation on CSS keyframes #1269
-
Add configuration option for printing color mode. PR #1267, issue #1144.
{ initialColorModeName: "dark", printColorModeName: "light" }
- Add
arrow
prop to Select to allow passing custom arrow icon. Issues #1177 #1151, PR #1232 - Fix: Field component uses
id
if passed. PR #1252 - Fix circular import in Switch.js
- Fix Button not respecting hidden prop. Issue #1254
- Add
minWidth: min-content
on Checkbox and Radio. PR #1256
- Fix support for rgb/hsl color values
-
Add Switch component #1035
<Label> <Switch /> Enable email alerts? </Label>
-
Pass
size
prop down to IconButton in Close component. PR #1242<Close size={24} />
- Convert Gatsby example to TypeScript and stop using removed components. Issue #1227, PR #1229
- Make ThemeProvider
theme
prop required
- Removes overriding property on editor combobox #687
- Add
@theme-ui/preset-sketchy
- Add support for highlighting lines #895
@theme-ui/sidenav
: move React to peerDependencies #978
- Pass
size
prop to ColorRow component #941
- Accept SetStateAction and generic parameter #1174
- Fix broken base-preset link on
theming
page
- Fix peer dependencies. Issue #725, PR #836
- Add theme colors support to columnRuleColor and caretColor #1085
- Support scrollPadding variations in sx props. Issue #1214
- Support Webpack 5. (Uses default export from package.json instead of named export) #1141
- Add
primary
as default variant forBadge
component #1109 - Add
primary
as default variant forAlert
component #1102 - Add
theme.text.default
variant forText
component #870
- Fix example logo on Avatar & Image component docs #1233
- Fix theme editor output in docs #1182
- Adjusts media query sort logic #600
- Fixes link to Gatsby Plugin page in
getting-started
page. Issue #602, PR #603
- Split theme-ui package into
@theme-ui/core
,@theme-ui/mdx
, and@theme-ui/color-modes
- Removes
context.components
(still available through MDX context) - Adds separate
ColorModeProvider
component - Removes support for
theme.initialColorMode
- useinitialColorModeName
instead - Removes layout components (
Layout
,Header
,Main
,Footer
) - useBox
andFlex
instead - Updates CSS custom properties implementation for color modes
- When using
useColorSchemeMediaQuery
flag, it will initialize the mode tolight
when@media (prefers-color-scheme: light)
is enabled - Global color mode styles are automatically added to the body without needing
to render the
ColorMode
component - Adds global typographic styles, set
useBodyStyles: false
to disable - Removes
ThemeStateProvider
- Fix issue where
<del>
tag was incorrectly specified asdelete
- The
@theme-ui/editor
API has changed significantly. See the README.md for more information. @theme-ui/components
: on Grid component, allow customcolumns
definitions via strings #541@theme-ui/gatsby-theme-style-guide
: add docs on shadowing #558- Adds
@theme-ui/preset-polaris
#567 - Adjusts default font stack in presets #568
@theme-ui/color
: addtransparentize
function #370@theme-ui/style-guide
: move context dependencies to peer dependencies #521
- Fix for issues when
localStorage
is not available #514 @theme-ui/match-media
: add option for default index in hook #460@theme-ui/editor
: Update Reakit #517
@theme-ui/editor
: fix color picker #498
@theme-ui/components
: fix NavLink base styles #497
@theme-ui/components
: add more components #458@theme-ui/color
: addalpha
utility #441@theme-ui/match-media
: Add default breakpoint index argument for SSR
@theme-ui/editor
add components for editingsx
styles
@theme-ui/editor
addStylesForm
component
- Fix environment check #415
- Update dependencies
- Add
@theme-ui/match-media
package #375 - Add
@theme-ui/components
package #411
- Fix prop forwarding in styled HOC #377
- Add missing key #406
- Add support for functional themes #400
- Fix Reakit for ColorPicker test #357
- Simplify color mode API and disable
prefers-color-scheme
media query behavior by default #246 - Add BaseStyles component #369
- Updated UI in chrome extension
- Fix typo in tailwind preset #346
- Fix state bug in chrome extension
- Move React to peer dependencies
- Updated
@theme-ui/editor
package - New Customize page
- Pass outer context through RootProvider #340
- Update dependencies
- Added new
ColorPicker
component to@theme-ui/editor
#327 - Added warning for conflicting versions of Emotion #297
- Added color utility package #331
- Update dependencies
- Added
gatsby-theme-ui-blog
package #311 - Added
gatsby-theme-code-recipe
package #313 - Updated styles in
gatsby-theme-style-guide
#315
- Adds
gatsby-theme-style-guide
package #301 - Fix for
jsx
create element function #302
gatsby-plugin-theme-ui
remove JSX syntax from gatsby-ssr in Gatsby plugin #299@theme-ui/typography
fix for CSS font-family keywords #285@theme-ui/preset-tailwind
add button and input variants #291
- Add support for FOUC fix in Next.js #277
- Update dependencies
- Add accordion sidenav #279
- Maintain raw color values in Theme UI context when
useCustomProperties
is enabled #274
- Updates for tailwind preset #272
- Update dependencies
- Add tosh preset #264
- Bad lerna publish
- Fix for CSS custom properties when using nested color objects #259
- Add warning when
initialColorMode
matches a color mode name #245 - Fix for forwarding refs #261
- Fix peer dependency version #263
- Add
@theme-ui/custom-properties
package #235
- Adds preset packages #210
- Add base colors to prism presets #249
- Add key to element in gatsby-plugin-theme-ui #248
- Add metadata to packages #244
- Update docs
- Update dependencies
- Add presets to
@theme-ui/prism
#231 - Fix array merging #230
- Fix for color mode in context #226
- Fix for unsupported Prism languages #218
- Update dependencies
- Update docs
- Update dependencies
- Forward all props to functional components #197
- Update dependencies
- Only pass
css
prop through when needed injsx
#182
- Fix bad publish
- Adds Chrome extension package #136
- Fix keys in tailwind preset #171
- Add optional support for CSS custom properties #166
@theme-ui/sidenav
initial publish@theme-ui/prism
adddisplay: inline-block
to keep empty lines
@theme-ui/prism
pass outer className to element #163
- Adjust color mode initialization from media query #157
- Fix publish
- Adjust microbundle setup for @theme-ui/prism
- Add @theme-ui/prism package
- Add
key
prop to element in gatsby-plugin-theme-ui #145 - Update docs
- Rename
gatsby-plugin-theme-ui
#137 - Update docs
- Replaced
lodash.merge
withdeepmerge
- Updated to use smaller Styled System v5 packages
- Removed layout and flexbox style props from
Box
and layout components - Renamed
css
prop in experimental custom pragma tosx
to avoid collisions with Emotion and other libraries - Refactored
ThemeProvider
- Removed
toStyle
API from Typography.js package - Renamed Typography.js package to
@theme-ui/typography
- Removed
@emotion/styled
dependency - layout components are no longer created withstyled
so passing non-HTML attributes to the component will result in React rendering those props to the DOM - Removed legacy
ColorModeProvider
andComponentProvider
exports