Skip to content

Commit 306d3c0

Browse files
hasparushasparus
authored
Merge pull request #2360 from system-ui/1921-rename-themeprovider
Deprecate/rename ThemeProvider to ThemeUIProvider
2 parents 4d15cdb + 141f1c6 commit 306d3c0

File tree

46 files changed

+380
-341
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+380
-341
lines changed

‎examples/gatsby/src/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ReactNode } from 'react'
2-
import { ThemeProvider } from 'theme-ui'
2+
import { ThemeUIProvider } from 'theme-ui'
33
import { Themed, useThemedStylesWithMdx } from '@theme-ui/mdx'
44
import { MDXProvider, useMDXComponents } from '@mdx-js/react'
55
import theme from './theme'
@@ -8,10 +8,10 @@ export const WrapRootElement = ({ element }: { element: ReactNode }) => {
88
const components = useThemedStylesWithMdx(useMDXComponents())
99

1010
return (
11-
<ThemeProvider theme={theme}>
11+
<ThemeUIProvider theme={theme}>
1212
<MDXProvider components={components}>
1313
<Themed.root>{element}</Themed.root>
1414
</MDXProvider>
15-
</ThemeProvider>
15+
</ThemeUIProvider>
1616
)
1717
}

‎examples/next/pages/_app.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/** @jsxImportSource theme-ui */
2-
import { ThemeProvider } from 'theme-ui'
2+
import { ThemeUIProvider } from 'theme-ui'
33

44
import Header from '../components/Header'
55
import { theme } from '../lib/theme'
@@ -11,7 +11,7 @@ import type { AppProps } from 'next/app'
1111
*/
1212
export default function MyApp({ Component, pageProps }: AppProps) {
1313
return (
14-
<ThemeProvider theme={theme}>
14+
<ThemeUIProvider theme={theme}>
1515
<main
1616
sx={{
1717
border: '1px solid',
@@ -25,6 +25,6 @@ export default function MyApp({ Component, pageProps }: AppProps) {
2525
<Header />
2626
<Component {...pageProps} />
2727
</main>
28-
</ThemeProvider>
28+
</ThemeUIProvider>
2929
)
3030
}

‎examples/prism/src/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react'
2-
import { ThemeProvider, Themed } from 'theme-ui'
2+
import { ThemeUIProvider, Themed } from 'theme-ui'
33
import theme from './theme'
44

55
export const WrapRootElement = ({ element }) => (
6-
<ThemeProvider theme={theme}>
6+
<ThemeUIProvider theme={theme}>
77
<Themed.root>{element}</Themed.root>
8-
</ThemeProvider>
8+
</ThemeUIProvider>
99
)

‎examples/prism/src/pages/index.mdx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ export default Layout
44

55
# Hello
66

7-
This is an example of using [Prismjs][] with [Theme UI][].
8-
This page is written in [MDX][] and styled with Theme UI.
7+
This is an example of using [Prismjs][] with [Theme UI][]. This page is written
8+
in [MDX][] and styled with Theme UI.
99

1010
```jsx
11-
import { ThemeProvider } from 'theme-ui'
11+
import { ThemeUIProvider } from 'theme-ui'
1212
import theme from './theme'
1313

1414
export default (props) => (
15-
<ThemeProvider theme={theme}>{props.children}</ThemeProvider>
15+
<ThemeUIProvider theme={theme}>{props.children}</ThemeUIProvider>
1616
)
1717
```
1818

‎examples/typography/src/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { ReactNode } from 'react'
2-
import { ThemeProvider } from 'theme-ui'
2+
import { ThemeUIProvider } from 'theme-ui'
33

44
import theme from './theme'
55

66
export const WrapRootElement = ({ element }: { element: ReactNode }) => (
7-
<ThemeProvider theme={theme}>{element}</ThemeProvider>
7+
<ThemeUIProvider theme={theme}>{element}</ThemeUIProvider>
88
)

‎packages/color/test/index.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
import { jsx } from '@theme-ui/core'
77
import { Theme, ThemeUICSSObject } from '@theme-ui/css'
8-
import { ThemeProvider } from '@theme-ui/theme-provider'
8+
import { ThemeUIProvider } from '@theme-ui/theme-provider'
99
import { render } from '@theme-ui/test-utils'
1010
import { matchers } from '@emotion/jest'
1111

@@ -259,10 +259,10 @@ test('alphaRgbaCustomProps', () => {
259259
expect(n).toBe('rgba(255,0,0,0.25)')
260260
})
261261

262-
describe('colors inside ThemeProvider', () => {
262+
describe('colors inside ThemeUIProvider', () => {
263263
test('__default color is darkened', () => {
264264
const tree = render(
265-
<ThemeProvider
265+
<ThemeUIProvider
266266
theme={{
267267
colors: {
268268
primary: {
@@ -273,7 +273,7 @@ describe('colors inside ThemeProvider', () => {
273273
}}
274274
>
275275
<button sx={{ color: darken('primary', 0.1) }}>Click me</button>
276-
</ThemeProvider>
276+
</ThemeUIProvider>
277277
)
278278

279279
expect(tree.getByRole('button')).toHaveStyleRule('color', '#09c')
@@ -292,7 +292,7 @@ describe('colors inside ThemeProvider', () => {
292292
type MyTheme = typeof theme & { rawColors: typeof theme.colors }
293293

294294
const tree = render(
295-
<ThemeProvider theme={theme}>
295+
<ThemeUIProvider theme={theme}>
296296
<button
297297
sx={{
298298
color: (theme) => {
@@ -306,7 +306,7 @@ describe('colors inside ThemeProvider', () => {
306306
>
307307
Click me
308308
</button>
309-
</ThemeProvider>
309+
</ThemeUIProvider>
310310
)
311311

312312
expect(tree.getByRole('button')).toHaveStyleRule('color', '#80d1f2')
@@ -325,7 +325,7 @@ describe('colors inside ThemeProvider', () => {
325325
type MyTheme = typeof theme & { rawColors: typeof theme.colors }
326326

327327
const tree = render(
328-
<ThemeProvider theme={theme}>
328+
<ThemeUIProvider theme={theme}>
329329
<button
330330
sx={{
331331
color: (theme) => lighten(theme.rawColors?.blue, 0.1)(theme),
@@ -341,7 +341,7 @@ describe('colors inside ThemeProvider', () => {
341341
>
342342
Hello
343343
</p>
344-
</ThemeProvider>
344+
</ThemeUIProvider>
345345
)
346346

347347
expect(tree.getByRole('button')).toHaveStyleRule('color', '#33f')

‎packages/components/test/Box.spec.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
import React from 'react'
66
import { renderJSON, render, waitFor } from '@theme-ui/test-utils'
77

8-
import { ThemeProvider } from 'theme-ui'
8+
import { ThemeUIProvider } from 'theme-ui'
99

1010
import { Box } from '..'
1111

@@ -53,9 +53,9 @@ describe('Box', () => {
5353

5454
test('renders with variant prop', () => {
5555
const json = renderJSON(
56-
<ThemeProvider theme={theme}>
56+
<ThemeUIProvider theme={theme}>
5757
<Box variant="boxes.beep" />
58-
</ThemeProvider>
58+
</ThemeUIProvider>
5959
)
6060
expect(json).toHaveStyleRule('background-color', 'highlight')
6161
expect(json).toHaveStyleRule('padding', '32px')
@@ -82,13 +82,13 @@ describe('Box', () => {
8282

8383
test('renders with __themeKey variant', () => {
8484
const json = renderJSON(
85-
<ThemeProvider theme={theme}>
85+
<ThemeUIProvider theme={theme}>
8686
<Box
8787
// @ts-expect-error
8888
__themeKey="boxes"
8989
variant="beep"
9090
/>
91-
</ThemeProvider>
91+
</ThemeUIProvider>
9292
)
9393
expect(json).toHaveStyleRule('background-color', 'highlight')
9494
expect(json).toHaveStyleRule('padding', '32px')
@@ -98,9 +98,9 @@ describe('Box', () => {
9898
test('accepts ref', async () => {
9999
let ref: HTMLElement | null = null
100100
render(
101-
<ThemeProvider theme={theme}>
101+
<ThemeUIProvider theme={theme}>
102102
<Box ref={(r) => (ref = r)} />
103-
</ThemeProvider>
103+
</ThemeUIProvider>
104104
)
105105
await waitFor(() => {
106106
expect(ref).toBeTruthy()

‎packages/components/test/Button.spec.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
import React from 'react'
66
import { renderJSON } from '@theme-ui/test-utils'
7-
import { ThemeProvider } from 'theme-ui'
7+
import { ThemeUIProvider } from 'theme-ui'
88

99
import { Button } from '..'
1010

@@ -13,17 +13,17 @@ import { theme } from './__test-utils__'
1313
describe('Button', () => {
1414
test('renders', () => {
1515
const json = renderJSON(
16-
<ThemeProvider theme={theme}>
16+
<ThemeUIProvider theme={theme}>
1717
<Button />
18-
</ThemeProvider>
18+
</ThemeUIProvider>
1919
)
2020
expect(json).toMatchSnapshot()
2121
})
2222
test('hidden', () => {
2323
const json = renderJSON(
24-
<ThemeProvider theme={theme}>
24+
<ThemeUIProvider theme={theme}>
2525
<Button hidden />
26-
</ThemeProvider>
26+
</ThemeUIProvider>
2727
)
2828
expect(json).toMatchSnapshot()
2929
})

‎packages/components/test/Flex.spec.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44

55
import React from 'react'
66
import { render } from '@theme-ui/test-utils'
7-
import { Flex, ThemeProvider } from 'theme-ui'
7+
import { Flex, ThemeUIProvider } from 'theme-ui'
88

99
test('accepts ref', async () => {
1010
let ref: HTMLElement | null = null
1111

1212
render(
13-
<ThemeProvider theme={{}}>
13+
<ThemeUIProvider theme={{}}>
1414
<Flex ref={(r) => (ref = r)} />
15-
</ThemeProvider>
15+
</ThemeUIProvider>
1616
)
1717

1818
expect(ref).toBeInstanceOf(HTMLDivElement)

‎packages/components/test/Grid.spec.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
import React from 'react'
66
import { renderJSON } from '@theme-ui/test-utils'
7-
import { ThemeProvider } from 'theme-ui'
7+
import { ThemeUIProvider } from 'theme-ui'
88

99
import { Grid } from '..'
1010

@@ -13,10 +13,10 @@ import { theme } from './__test-utils__'
1313
describe('Grid', () => {
1414
test('renders', () => {
1515
const json = renderJSON(
16-
<ThemeProvider theme={theme}>
16+
<ThemeUIProvider theme={theme}>
1717
<Grid />
1818
<Grid width="1fr" repeat="fit" />
19-
</ThemeProvider>
19+
</ThemeUIProvider>
2020
)
2121
expect(json).toMatchSnapshot()
2222
})

0 commit comments

Comments
 (0)