fix: Make sure theme is resolved

Author: Andrey Okonetchnikov

src/mixins.js

@@ -1,14 +1,16 @@
 import { transparentize } from '@theme-ui/color'
 
+// Check if it's a props object or the theme
+// theme-ui provides theme as an argument where styled-system uses props.theme
+function getTheme(theme = {}) {
+  return theme['theme'] || theme
+}
 /**
  * Mixin to generate consistent box-shadow rule for focus rings and selections
  */
-export const focusBoxShadow = color => (t = {}) => {
-  // Check if it's a props object or the theme
-  // theme-ui provides theme as an argument where styled-system uses props.theme
-  let theme = t.theme || t
+export const focusBoxShadow = color => (theme = {}) => {
   return {
-    boxShadow: `0 0 0 0.2em ${transparentize(color, 0.75)(theme)}`
+    boxShadow: `0 0 0 0.2em ${transparentize(color, 0.75)(getTheme(theme))}`
   }
 }
 
@@ -23,17 +25,18 @@ export const focusBoxShadow = color => (t = {}) => {
  *   }
  * `
  */
-export const focusRingStyles = (color, disabled = false) => (theme = {}) => {
+export const focusRingStyles = (color, disabled = false) => theme => {
+  const themeColor = transparentize(color, 0)(getTheme(theme)) // This serves as a getter from theme
   if (disabled) {
     return {
       outline: 'none'
     }
   }
   return {
     outline: 'none',
-    borderColor: transparentize(color, 0)(theme), // This serves as a getter from theme
+    borderColor: themeColor,
     transition: 'box-shadow .25s',
-    ...focusBoxShadow(color)(theme)
+    ...focusBoxShadow(themeColor)(theme)
   }
 }
 
@@ -46,17 +49,18 @@ export const focusRingStyles = (color, disabled = false) => (theme = {}) => {
  *   ${focusRing('red')}
  * `
  */
-export const focusRing = (color, disabled = false, hover = false) => (theme = {}) => {
+export const focusRing = (color, disabled = false, hover = false) => theme => {
+  const styles = focusRingStyles(color, disabled)(getTheme(theme))
   const baseStyles = {
     '.js-focus-visible &:focus:not(.focus-visible)': {
       outline: 0
     },
-    '&.focus-visible': focusRingStyles(color, disabled)(theme)
+    '&.focus-visible': styles
   }
   if (hover) {
     return {
       ...baseStyles,
-      '&:hover:not(:disabled)': focusRingStyles(color, disabled)(theme)
+      '&:hover:not(:disabled)': styles
     }
   }
   return baseStyles

src/mixins.md

@@ -6,7 +6,7 @@ Creates consistent `:focus` styles for any element.
 
 ```javascript
 import 'focus-visible' // :focus-visible polyfill
-import styled from 'styled-components'
+import styled, { ThemeProvider } from 'styled-components'
 import { focusRing, WithSelector } from './'
 
 const Button = styled('button')`
@@ -16,18 +16,24 @@ const Button = styled('button')`
   :hover {
     background: red;
   }
-  ${focusRing('red')}
+  ${focusRing('primary')}
 `
 
-;<>
+;<ThemeProvider
+  theme={{
+    colors: {
+      primary: '#fc0'
+    }
+  }}
+>
   <Button>Button</Button>{' '}
   <WithSelector selector=":hover">
     <Button>Focused</Button>
   </WithSelector>
   <WithSelector selector=".focus-visible">
     <Button>Focused</Button>
   </WithSelector>
-</>
+</ThemeProvider>
 ```
 
 ### `focusBoxShadow`