curls/dist/es/ThemeProvider.js

💪 Responsive, expressive UI primitives for React written with Style Hooks and Emotion

import {jsx as ___EmotionJSX} from '@emotion/core'

function _extends() {
  _extends =
    Object.assign ||
    function(target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i]
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key]
          }
        }
      }
      return target
    }
  return _extends.apply(this, arguments)
}

import React, {useMemo, useContext} from 'react'
import {css, Global} from '@emotion/core'
import {
  ThemeProvider as ThemeProvider_,
  useStylesContext,
  fastMemoize,
} from '@style-hooks/core'
import emptyArr from 'empty/array'
import emptyObj from 'empty/object'
import {unit} from './utils'
export const defaultColors = {
  blue: '#22A2DC',
  green: '#5ce585',
  red: '#dc2247',
  yellow: '#e3c651',
  lightestGrey: '#eaedef',
  lightGrey: '#bbc5ca',
  grey: '#778c95',
  darkGrey: '#364045',
  darkestGrey: '#1e2427',
  black: '#001617',
  white: '#f8f9f9',
  translucent: 'rgba(0,0,0,0.4)',
  translucentDark: 'rgba(0,0,0,0.7)',
  translucentLight: 'rgba(0,0,0,0.16)',
  translucentWhite: 'rgba(255,255,255,0.6)',
}
export const defaultTheme = {
  baseRem: 100,
  breakpoints: {
    phone: 'only screen and (min-width: 0em)',
    // 0px
    tablet: 'only screen and (min-width: 35em)',
    // 560px
    desktop: 'only screen and (min-width: 80em)', // 1280px
  },
  breakpointsDelimiter: '@',
  colors: defaultColors,
  locals: {},
  mediaQueries: {},
  spacingScale: [0, 1 / 4, 1 / 2, 1, 2, 3, 4, 8, 16],
  spacingUnit: 'rem',
  sizeUnit: 'px',
}
const createTheme = fastMemoize(
  'createCurlsTheme',
  theme => _extends({}, defaultTheme, theme),
  WeakMap
)
export const CurlsContext = React.createContext({}),
  CurlsConsumer = CurlsContext.Consumer,
  useCurls = () => useContext(CurlsContext)

const CurlsProvider = ({globalStyles = emptyArr, children}) => {
  function _ref(theme) {
    return replaceTheme(createTheme(theme))
  }

  const {theme, setTheme, replaceTheme} = useStylesContext(),
    styles = useMemo(() => {
      const s = [
        /*#__PURE__*/
        css('html{font-size:', unit(theme.baseRem, '%'), ';}'),
      ]
      s.push.apply(s, globalStyles)
      return s
    }, [theme.baseRem, globalStyles]),
    context = useMemo(
      () => ({
        theme,
        setTheme,
        replaceTheme: _ref,
      }),
      [theme, setTheme, replaceTheme]
    )
  return ___EmotionJSX(
    CurlsContext.Provider,
    {
      value: context,
    },
    ___EmotionJSX(Global, {
      styles: styles,
    }),
    children
  )
}

export const ThemeProvider = ({theme = emptyObj, globalStyles, children}) =>
  ___EmotionJSX(
    ThemeProvider_,
    {
      theme: createTheme(theme),
    },
    ___EmotionJSX(CurlsProvider, {
      globalStyles: globalStyles,
      children: children,
    })
  )

if (process.env.NODE_ENV !== 'production') {
  const PropTypes = require('prop-types')

  ThemeProvider.displayName = 'ThemeProvider'
  ThemeProvider.propTypes = {
    theme: PropTypes.object,
  }
}