curls/dist/cjs/ThemeProvider.js

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

'use strict'

exports.__esModule = true
exports.ThemeProvider = exports.useCurls = exports.CurlsConsumer = exports.CurlsContext = exports.defaultTheme = exports.defaultColors = void 0

var _core = require('@emotion/core')

var _react = _interopRequireWildcard(require('react'))

var _core2 = require('@style-hooks/core')

var _array = _interopRequireDefault(require('empty/array'))

var _object = _interopRequireDefault(require('empty/object'))

var _utils = require('./utils')

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : {default: obj}
}

function _interopRequireWildcard(obj) {
  if (obj && obj.__esModule) {
    return obj
  } else {
    var newObj = {}
    if (obj != null) {
      for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
          var desc =
            Object.defineProperty && Object.getOwnPropertyDescriptor
              ? Object.getOwnPropertyDescriptor(obj, key)
              : {}
          if (desc.get || desc.set) {
            Object.defineProperty(newObj, key, desc)
          } else {
            newObj[key] = obj[key]
          }
        }
      }
    }
    newObj.default = obj
    return newObj
  }
}

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)
}

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)',
}
exports.defaultColors = defaultColors
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',
}
exports.defaultTheme = defaultTheme
const createTheme = (0, _core2.fastMemoize)(
  'createCurlsTheme',
  theme => _extends({}, defaultTheme, theme),
  WeakMap
)

const CurlsContext = _react.default.createContext({}),
  CurlsConsumer = CurlsContext.Consumer,
  useCurls = () => (0, _react.useContext)(CurlsContext)

exports.useCurls = useCurls
exports.CurlsConsumer = CurlsConsumer
exports.CurlsContext = CurlsContext

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

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

const ThemeProvider = ({theme = _object.default, globalStyles, children}) =>
  (0, _core.jsx)(
    _core2.ThemeProvider,
    {
      theme: createTheme(theme),
    },
    (0, _core.jsx)(CurlsProvider, {
      globalStyles: globalStyles,
      children: children,
    })
  )

exports.ThemeProvider = ThemeProvider

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

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