Rename ThemeProvider to ThemeUIProvider

Author: lachlanjc

packages/theme-provider/src/index.tsx

@@ -37,7 +37,8 @@ const RootStyles = () =>
     },
   })
 
-interface ThemeProviderProps extends Pick<CoreThemeProviderProps, 'theme'> {
+export interface ThemeProviderProps
+  extends Pick<CoreThemeProviderProps, 'theme'> {
   children?: React.ReactNode
 }
 

packages/theme-ui/src/index.ts

@@ -4,6 +4,9 @@ import {
   type ThemeUIStyleObject,
 } from '@theme-ui/core'
 import React from 'react'
+import BaseThemeProvider, {
+  type ThemeProviderProps,
+} from '@theme-ui/theme-provider'
 export {
   __ThemeUIContext,
   merge,
@@ -28,10 +31,21 @@ export type {
   StylePropertyValue,
 } from '@theme-ui/core'
 export { useColorMode, InitializeColorMode } from '@theme-ui/color-modes'
-export { ThemeProvider } from '@theme-ui/theme-provider'
 export * from '@theme-ui/components'
 export { css, get } from '@theme-ui/css'
 
+/** @deprecated This export has been renamed ThemeUIProvider */
+export function ThemeProvider(
+  props: ThemeProviderProps
+): typeof BaseThemeProvider {
+  console.warn(
+    '[theme-ui] The export <ThemeProvider> is deprecated; it’s now called ThemeUIProvider to reduce confusion. Please update your imports.'
+  )
+  return React.createElement(BaseThemeProvider, props)
+}
+
+export { BaseThemeProvider as ThemeUIProvider }
+
 export const BaseStyles = (
   props: Record<string, unknown> & { sx?: ThemeUIStyleObject }
 ): JSX.Element =>

packages/theme-ui/test/index.tsx

@@ -8,7 +8,8 @@ import mockConsole from 'jest-mock-console'
 import { fireEvent, render, renderJSON } from '@theme-ui/test-utils'
 
 import {
-  ThemeProvider,
+  ThemeProvider as DeprecatedThemeProvider,
+  ThemeUIProvider as ThemeProvider,
   jsx,
   BaseStyles,
   Theme,
@@ -50,6 +51,17 @@ test('warns when multiple versions of emotion are installed', () => {
   restore()
 })
 
+test('warns deprecated ThemeProvider', () => {
+  const restore = mockConsole()
+  render(
+    <DeprecatedThemeProvider>
+      <div />
+    </DeprecatedThemeProvider>
+  )
+  expect(console.warn).toHaveBeenCalled()
+  restore()
+})
+
 test('functional themes receive outer theme', () => {
   const outer: Theme = {
     config: {