v0.15.0

🎉 This release contains work from new contributors! 🎉

Thanks for all your work!

❤️ Luke Watts (@thisislawatts)

❤️ Valto Savi (@pointlessrapunzel)

❤️ Brage Sekse Aarset (@braaar)

Release Notes

Pull out MDX to be opt-in (#2288)

Breaking: theme-ui no longer includes @theme-ui/mdx — MDX is now opt-in.

If your project is not using MDX or importing Themed, you shouldn't need to
change anything.

• MDXProvider is no longer included in Theme UI ThemeProvider, and has been
  removed in favour of an useThemedStylesWithMdx hook.

  • Migration: Use useThemedStylesWithMdx together with MDXProvider and useMDXComponents from @mdx-js/react.

    import {
      MDXProvider,
      useMDXComponents,
      Components as MDXComponents,
      MergeComponents as MergeMDXComponents,
    } from '@mdx-js/react'
    import { useThemedStylesWithMdx } from '@theme-ui/mdx'
    import { ThemeProvider, Theme } from 'theme-ui'
    
    interface MyProviderProps {
      theme: Theme
      components?: MDXComponents | MergeMDXComponents
      children: React.ReactNode
    }
    function MyProvider({ theme, components, children }: MyProviderProps) {
      const componentsWithStyles = useThemedStylesWithMdx(useMDXComponents(components))
    
      return (
        <ThemeProvider theme={theme}>
          <MDXProvider components={componentsWithStyles}>
            {children}
          </MDXProvider>
        </ThemeProvider>
      )
    }

• Themed components dict and other exports from @theme-ui/mdx are no longer reexported from theme-ui.

  • Migration: Import it from @theme-ui/mdx instead.

    -  import { Themed } from 'theme-ui'
    +  import { Themed } from '@theme-ui/mdx'

Remove @theme-ui/editor (#2292)

• Breaking: @theme-ui/editor was removed. Use CSS GUI instead.
  • /customize page in Theme UI docs has been removed. Use Components.ai Theme Builder or an alternative instead.

Drop support for React 16 + 17 (#2215)

Theme UI 0.15.0 drops support for React 16 and React 17. Your use case may still work, but we don't guarantee it.

@theme-ui/components: Increased right padding in Select component (#2058)

Select component default paddingRight style has increased to spaces[4] (32px by default), to avoid text flowing behind the chevron icon.

---

🚀 Enhancement

• Pull out MDX to be opt-in #2288 (@hasparus @beerose @lachlanjc hasparus@Piotrs-MacBook.local)
• Drop support for React 16 + 17 #2215 (@hasparus)
• refactor: setting padding-right to size 4 for dynamic value #2058 (@appsparkler)

🐛 Bug Fix

• Remove @theme-ui/editor #2292 (@hasparus)
• fix(mdx): add .sx props to Themed.X styles #2250 (@hasparus)

🏠 Internal

• docs(size-scales): Add reference of sizing scales in documentation #2327 (@cobraz @lachlanjc)
• docs: Update Contributing doc with pnpm info #2320 (@lachlanjc @hasparus)
• prism: Fix crash when className prop is missing #2322 (@lachlanjc)
• Docs: Group project templates by framework, add Remix #2276 (@lachlanjc)
• docs: re-order sidebar components into alphabetical order #2232 (@thisislawatts)
• docs: Specify MDX React version #2233 (@pointlessrapunzel)

Authors: 8

• Akash (@appsparkler)
• Aleksandra (@beerose)
• Brage Sekse Aarset (@braaar)
• Lachlan Campbell (@lachlanjc)
• Luke Watts (@thisislawatts)
• Piotr Monwid-Olechnowicz (@hasparus)
• Simen A. W. Olsen (@cobraz)
• Valto Savi (@pointlessrapunzel)