Merge branch 'master' of https://github.com/system-ui/theme-ui

system-ui · Oct 9, 2019 · bc05c0d · bc05c0d
2 parents f6e1633 + ece84d0
commit bc05c0d
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 8 deletions.
diff --git a/packages/theme-ui/src/provider.js b/packages/theme-ui/src/provider.js
@@ -39,9 +39,13 @@ const BaseProvider = ({ context, components, children }) => {
 const RootProvider = ({ theme: propsTheme = {}, components, children }) => {
   // components are provided in the default Context
   const outer = useThemeUI()
-  const [colorMode, setColorMode] = useColorState(outer.theme || propsTheme)
+  const propsThemeObject =
+    typeof propsTheme === 'function' ? propsTheme({}) : propsTheme
+  const [colorMode, setColorMode] = useColorState(
+    outer.theme || propsThemeObject
+  )
 
-  const theme = applyColorMode(outer.theme || propsTheme, colorMode)
+  const theme = applyColorMode(outer.theme || propsThemeObject, colorMode)
 
   const context = {
     ...outer,
@@ -65,7 +69,10 @@ const RootProvider = ({ theme: propsTheme = {}, components, children }) => {
 
 const NestedProvider = ({ theme, components, children }) => {
   const outer = useThemeUI()
-  const context = merge.all({}, outer, { theme })
+  const context =
+    typeof theme === 'function'
+      ? { ...outer, theme: theme(outer.theme) }
+      : merge.all({}, outer, { theme })
 
   return jsx(BaseProvider, {
     context,
@@ -93,10 +100,7 @@ export const ThemeProvider = props => {
   return jsx(RootProvider, props)
 }
 
-export const ThemeStateProvider = ({
-  theme,
-  children
-}) => {
+export const ThemeStateProvider = ({ theme, children }) => {
   const outer = useThemeUI()
   const [state, setTheme] = useReducer(mergeState, theme)
   const context = {
@@ -107,6 +111,6 @@ export const ThemeStateProvider = ({
 
   return jsx(Context.Provider, {
     value: context,
-    children
+    children,
   })
 }
diff --git a/packages/theme-ui/test/index.js b/packages/theme-ui/test/index.js
@@ -133,3 +133,57 @@ test('warns when multiple versions of emotion are installed', () => {
   )
   expect(console.warn).toBeCalled()
 })
+
+test('functional themes receive outer theme', () => {
+  const outer = {
+    colors: {
+      text: 'tomato',
+    },
+  }
+  const theme = jest.fn()
+  const json = renderJSON(
+    jsx(
+      ThemeProvider,
+      { theme: outer },
+      jsx(
+        ThemeProvider,
+        { theme },
+        jsx('div', {
+          sx: {
+            color: 'text',
+          },
+        })
+      )
+    )
+  )
+  expect(theme).toHaveBeenCalledWith(outer)
+  expect(json).toHaveStyleRule('color', 'text')
+})
+
+test('functional themes can be used at the top level', () => {
+  const theme = jest.fn(() => ({
+    useCustomProperties: false,
+    colors: {
+      primary: 'tomato',
+    },
+  }))
+  let json
+  expect(() => {
+    json = renderJSON(
+      jsx(
+        ThemeProvider,
+        { theme },
+        jsx(
+          'div',
+          {
+            sx: {
+              color: 'primary',
+            },
+          },
+          'hi'
+        )
+      )
+    )
+  }).not.toThrow()
+  expect(json).toHaveStyleRule('color', 'tomato')
+})