How to use @theme-ui/core - 10 common examples

}) => {
  const outer = useThemeUI()

  if (typeof outer.setColorMode === 'function') {
    return jsx(CoreProvider, { theme },
      jsx(MDXProvider, {
        components,
        children
      })
    )
  }

  return jsx(CoreProvider, { theme },
    jsx(ColorModeProvider, null,
      jsx(BodyStyles, { theme }),
      jsx(MDXProvider, {
        components,
        children
      })
    )
  )
}

const theme = React.useContext(ThemeContext)
    let nextProps = shouldForwardProps ? props : {}
    let styles = {}
    args.forEach(arg => {
      const style = typeof arg === 'function' ? arg({ theme, ...props }) : arg
      Object.assign(styles, style)
    })

    if (!shouldForwardProps) {
      for (let key in props) {
        if (!isPropValid(key)) continue
        nextProps[key] = props[key]
      }
    }

    return jsx(as || tag, {
      ...nextProps,
      ref,
      css: styles,
    })
  })
  return Styled

export const BaseStyles = props =>
  jsx('div', {
    ...props,
    sx: {
      fontFamily: 'body',
      lineHeight: 'body',
      fontWeight: 'body',
      variant: 'styles',
    },
  })

components,
  children
}) => {
  const outer = useThemeUI()

  if (typeof outer.setColorMode === 'function') {
    return jsx(CoreProvider, { theme },
      jsx(MDXProvider, {
        components,
        children
      })
    )
  }

  return jsx(CoreProvider, { theme },
    jsx(ColorModeProvider, null,
      jsx(BodyStyles, { theme }),
      jsx(MDXProvider, {
        components,
        children
      })
    )
  )
}

if (theme.useCustomProperties !== false) {
    theme.rawColors = {...theme.colors}
    theme.colors = toCustomProperties(theme.colors, 'colors')
  }

  const context = {
    ...outer,
    theme,
    colorMode,
    setColorMode,
  }

  return jsx(EmotionContext.Provider, { value: theme },
    jsx(Context.Provider, { value: context },
      jsx(BodyStyles, { key: 'color-mode' }),
      children
    )
  )
}

const BodyStyles = () =>
  jsx(Global, {
    styles: theme => createColorStyles(theme)
  })

const [colorMode, setColorMode] = useColorModeState(outer.theme)
  const theme = applyColorMode(outer.theme || {}, colorMode)

  if (theme.useCustomProperties !== false) {
    theme.rawColors = {...theme.colors}
    theme.colors = toCustomProperties(theme.colors, 'colors')
  }

  const context = {
    ...outer,
    theme,
    colorMode,
    setColorMode,
  }

  return jsx(EmotionContext.Provider, { value: theme },
    jsx(Context.Provider, { value: context },
      jsx(BodyStyles, { key: 'color-mode' }),
      children
    )
  )
}

const theme = applyColorMode(outer.theme || {}, colorMode)

  if (theme.useCustomProperties !== false) {
    theme.rawColors = {...theme.colors}
    theme.colors = toCustomProperties(theme.colors, 'colors')
  }

  const context = {
    ...outer,
    theme,
    colorMode,
    setColorMode,
  }

  return jsx(EmotionContext.Provider, { value: theme },
    jsx(Context.Provider, { value: context },
      jsx(BodyStyles, { key: 'color-mode' }),
      children
    )
  )
}

export const ThemeProvider = ({
  theme,
  components,
  children
}) => {
  const outer = useThemeUI()

  if (typeof outer.setColorMode === 'function') {
    return jsx(CoreProvider, { theme },
      jsx(MDXProvider, {
        components,
        children
      })
    )
  }

  return jsx(CoreProvider, { theme },
    jsx(ColorModeProvider, null,
      jsx(BodyStyles, { theme }),
      jsx(MDXProvider, {
        components,
        children
      })
    )
  )

const applyColorMode = (theme, mode) => {
  if (!mode) return theme
  const modes = get(theme, 'colors.modes', {})
  return merge.all({}, theme, {
    colors: get(modes, mode, {}),
  })
}