theme-ui - npm Package Compare versions

Comparing version 0.1.7 to 0.2.0-alpha.0

dist/index.esm.js

 import { MDXProvider } from '@mdx-js/react';
-import React, { createContext, useContext, useState, useEffect, useLayoutEffect } from 'react';
-import merge from 'lodash.merge';
-import { jsx, Global, ThemeContext } from '@emotion/core';
-import styled from '@emotion/styled';
-import { space, color, layout, flexbox } from 'styled-system';
+import deepmerge from 'deepmerge';
+import isPropValid from '@emotion/is-prop-valid';
+import React, { forwardRef, useContext, createContext, useState, useEffect, useLayoutEffect } from 'react';
+import { jsx, ThemeContext, Global } from '@emotion/core';
 import css, { css as css$1, get } from '@styled-system/css';
 export { css, get } from '@styled-system/css';
 
+var getCSS = function getCSS(props) {
+  return function (theme) {
+    if (!props.sx && !props.css) { return undefined; }
+    var styles = css(props.sx)(theme);
+    var raw = typeof props.css === 'function' ? props.css(theme) : props.css;
+    return [styles, raw];
+  };
+};
+
+var parseProps = function parseProps(props) {
+  if (!props) { return null; }
+  var next = {};
+
+  for (var key in props) {
+    if (key === 'sx') { continue; }
+    next[key] = props[key];
+  }
+
+  next.css = getCSS(props);
+  return next;
+};
+
+var jsx$1 = function jsx$$1(type, props) {
+  var arguments$1 = arguments;
+
+  for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    children[_key - 2] = arguments$1[_key];
+  }
+
+  return jsx.apply(undefined, [type, parseProps(props)].concat(children));
+};
+
+function _typeof(obj) {
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function (obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function (obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
+}
+
 function _defineProperty(obj, key, value) {
@@ -118,14 +163,63 @@ if (key in obj) {
 
-var jsx$1 = function jsx$$1(type, props) {
+var canUseSymbol = typeof Symbol === 'function' && Symbol["for"];
+var REACT_ELEMENT = canUseSymbol ? Symbol["for"]('react.element') : 0xeac7;
+var FORWARD_REF = canUseSymbol ? Symbol["for"]('react.forward_ref') : 0xeac7;
+
+var isMergeableObject = function isMergeableObject(n) {
+  return !!n && _typeof(n) === 'object' && n.$$typeof !== REACT_ELEMENT && n.$$typeof !== FORWARD_REF;
+};
+
+var merge = function merge(a, b) {
+  return deepmerge(a, b, {
+    isMergeableObject: isMergeableObject
+  });
+};
+
+merge.all = function () {
   var arguments$1 = arguments;
 
-  for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-    children[_key - 2] = arguments$1[_key];
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments$1[_key];
   }
 
-  return jsx.apply(undefined, [type, props ? _objectSpread({}, props, {
-    css: props.css ? css(props.css) : undefined
-  }) : null].concat(children));
+  return deepmerge.all(args, {
+    isMergeableObject: isMergeableObject
+  });
 };
 
+var styled = function styled(tag) {
+  return function () {
+    var arguments$1 = arguments;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments$1[_key];
+    }
+
+    var Styled = forwardRef(function (_ref, ref) {
+      var as = _ref.as,
+          props = _objectWithoutProperties(_ref, ["as"]);
+
+      var theme = useContext(ThemeContext);
+      var nextProps = {};
+      var styles = {};
+      args.forEach(function (arg) {
+        var style = typeof arg === 'function' ? arg(_objectSpread({
+          theme: theme
+        }, props)) : arg;
+        Object.assign(styles, style);
+      });
+
+      for (var key in props) {
+        if (!isPropValid(key)) { continue; }
+        nextProps[key] = props[key];
+      }
+
+      return jsx$1(as || tag, _objectSpread({}, nextProps, {
+        css: styles
+      }));
+    });
+    return Styled;
+  };
+};
+
 var themed = function themed(key) {
@@ -151,8 +245,16 @@ return function (props) {
 
-var Styled = styled('div')(themed('div'), space);
+var Styled = styled('div')(themed('div'));
 var components = {};
 tags.forEach(function (tag) {
-  components[tag] = styled(alias(tag))(themed(tag), space);
+  components[tag] = styled(alias(tag))(themed(tag));
   Styled[tag] = components[tag];
 });
+var createComponents = function createComponents() {
+  var components = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var next = {};
+  Object.keys(components).forEach(function (key) {
+    next[key] = styled(components[key])(themed(key));
+  });
+  return next;
+};
 
@@ -246,20 +348,34 @@ var Context = createContext({
 
-var createComponents = function createComponents() {
-  var components = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var next = {};
-  Object.keys(components).forEach(function (key) {
-    next[key] = styled(components[key])(themed(key));
+var applyColorMode = function applyColorMode(theme, mode) {
+  if (!mode) { return theme; }
+  var modes = get(theme, 'colors.modes', {});
+  return merge.all({}, theme, {
+    colors: get(modes, mode, {})
   });
-  return next;
 };
 
-var ThemeProvider = function ThemeProvider(_ref) {
-  var theme = _ref.theme,
-      components = _ref.components,
-      props = _objectWithoutProperties(_ref, ["theme", "components"]);
+var BaseProvider = function BaseProvider(_ref) {
+  var context = _ref.context,
+      components$$1 = _ref.components,
+      children = _ref.children;
+  var theme = applyColorMode(context.theme, context.colorMode);
+  return jsx$1(ThemeContext.Provider, {
+    value: theme
+  }, jsx$1(MDXProvider, {
+    components: components$$1
+  }, jsx$1(Context.Provider, {
+    value: context,
+    children: children
+  })));
+};
 
+var RootProvider = function RootProvider(_ref2) {
+  var _ref2$theme = _ref2.theme,
+      theme = _ref2$theme === void 0 ? {} : _ref2$theme,
+      components$$1 = _ref2.components,
+      children = _ref2.children;
+  // components are provided in the default Context
   var outer = useThemeUI();
-  var initialColorMode = outer.colorMode || (theme ? theme.initialColorMode : undefined);
 
-  var _useColorState = useColorState(initialColorMode),
+  var _useColorState = useColorState(theme.initialColorMode),
       _useColorState2 = _slicedToArray(_useColorState, 2),
@@ -269,35 +385,44 @@ colorMode = _useColorState2[0],
 
-  var context = merge({}, {
+  var context = {
     colorMode: colorMode,
-    setColorMode: setColorMode
-  }, outer, {
-    theme: theme,
-    components: createComponents(components)
+    setColorMode: setColorMode,
+    components: _objectSpread({}, outer.components, createComponents(components$$1)),
+    theme: theme
+  };
+  return jsx$1(BaseProvider, {
+    context: context,
+    components: context.components,
+    children: children
   });
+};
 
-  if (context.colorMode) {
-    var modes = get(context.theme, 'colors.modes', {});
-    context.theme = merge({}, context.theme, {
-      colors: get(modes, context.colorMode, context.theme.colors)
-    });
+var NestedProvider = function NestedProvider(_ref3) {
+  var theme = _ref3.theme,
+      components$$1 = _ref3.components,
+      children = _ref3.children;
+  var outer = useThemeUI();
+  var context = merge.all({}, outer, {
+    theme: theme
+  });
+  return jsx$1(BaseProvider, {
+    context: context,
+    components: createComponents(components$$1),
+    children: children
+  });
+};
+
+var ThemeProvider = function ThemeProvider(props) {
+  var outer = useThemeUI();
+
+  if (outer.colorMode) {
+    return jsx$1(NestedProvider, props);
   }
 
-  return jsx$1(ThemeContext.Provider, {
-    value: context.theme
-  }, jsx$1(MDXProvider, {
-    components: context.components
-  }, jsx$1(Context.Provider, {
-    value: context,
-    children: props.children
-  })));
+  return jsx$1(RootProvider, props);
 };
 
-var cssProp = function cssProp(props) {
-  return css(props.css)(props.theme);
-};
-
 var Box = styled('div')(css({
   boxSizing: 'border-box',
   minWidth: 0
-}), space, color, layout, flexbox, cssProp);
+}));
 var Flex = styled(Box)({
@@ -309,3 +434,3 @@ display: 'flex'
   return jsx$1(Box, _objectSpread({}, props, {
-    css: {
+    sx: {
       minHeight: '100vh',
@@ -322,3 +447,3 @@ display: 'flex',
   }, props, {
-    css: {
+    sx: {
       display: 'flex',
@@ -333,3 +458,3 @@ variant: 'styles.Header'
   }, props, {
-    css: {
+    sx: {
       flex: '1 1 auto',
@@ -342,3 +467,3 @@ variant: 'styles.Main'
   return jsx$1(Box, _objectSpread({}, props, {
-    css: {
+    sx: {
       width: '100%',
@@ -357,3 +482,3 @@ minWidth: 0,
   }, props, {
-    css: {
+    sx: {
       display: 'flex',
@@ -365,3 +490,3 @@ variant: 'styles.Footer'
 
-export { jsx$1 as jsx, ThemeProvider, Context, useThemeUI, ColorMode, useColorMode, Styled, components, Box, Flex, Layout, Header, Main, Container, Footer, ThemeProvider as ColorModeProvider, ThemeProvider as ComponentProvider };
+export { jsx$1 as jsx, ThemeProvider, Context, useThemeUI, ColorMode, useColorMode, Styled, components, Box, Flex, Layout, Header, Main, Container, Footer };
 //# sourceMappingURL=index.esm.js.map

dist/index.js

 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var react = require('@mdx-js/react');
+var deepmerge = _interopDefault(require('deepmerge'));
+var isPropValid = _interopDefault(require('@emotion/is-prop-valid'));
 var React = require('react');
 var React__default = _interopDefault(React);
-var merge = _interopDefault(require('lodash.merge'));
 var core = require('@emotion/core');
-var styled = _interopDefault(require('@emotion/styled'));
-var styledSystem = require('styled-system');
 var css = require('@styled-system/css');
 var css__default = _interopDefault(css);
 
+var getCSS = function getCSS(props) {
+  return function (theme) {
+    if (!props.sx && !props.css) { return undefined; }
+    var styles = css__default(props.sx)(theme);
+    var raw = typeof props.css === 'function' ? props.css(theme) : props.css;
+    return [styles, raw];
+  };
+};
+
+var parseProps = function parseProps(props) {
+  if (!props) { return null; }
+  var next = {};
+
+  for (var key in props) {
+    if (key === 'sx') { continue; }
+    next[key] = props[key];
+  }
+
+  next.css = getCSS(props);
+  return next;
+};
+
+var jsx = function jsx(type, props) {
+  var arguments$1 = arguments;
+
+  for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    children[_key - 2] = arguments$1[_key];
+  }
+
+  return core.jsx.apply(undefined, [type, parseProps(props)].concat(children));
+};
+
+function _typeof(obj) {
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function (obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function (obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
+}
+
 function _defineProperty(obj, key, value) {
@@ -121,14 +166,63 @@ if (key in obj) {
 
-var jsx = function jsx(type, props) {
+var canUseSymbol = typeof Symbol === 'function' && Symbol["for"];
+var REACT_ELEMENT = canUseSymbol ? Symbol["for"]('react.element') : 0xeac7;
+var FORWARD_REF = canUseSymbol ? Symbol["for"]('react.forward_ref') : 0xeac7;
+
+var isMergeableObject = function isMergeableObject(n) {
+  return !!n && _typeof(n) === 'object' && n.$$typeof !== REACT_ELEMENT && n.$$typeof !== FORWARD_REF;
+};
+
+var merge = function merge(a, b) {
+  return deepmerge(a, b, {
+    isMergeableObject: isMergeableObject
+  });
+};
+
+merge.all = function () {
   var arguments$1 = arguments;
 
-  for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-    children[_key - 2] = arguments$1[_key];
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments$1[_key];
   }
 
-  return core.jsx.apply(undefined, [type, props ? _objectSpread({}, props, {
-    css: props.css ? css__default(props.css) : undefined
-  }) : null].concat(children));
+  return deepmerge.all(args, {
+    isMergeableObject: isMergeableObject
+  });
 };
 
+var styled = function styled(tag) {
+  return function () {
+    var arguments$1 = arguments;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments$1[_key];
+    }
+
+    var Styled = React.forwardRef(function (_ref, ref) {
+      var as = _ref.as,
+          props = _objectWithoutProperties(_ref, ["as"]);
+
+      var theme = React.useContext(core.ThemeContext);
+      var nextProps = {};
+      var styles = {};
+      args.forEach(function (arg) {
+        var style = typeof arg === 'function' ? arg(_objectSpread({
+          theme: theme
+        }, props)) : arg;
+        Object.assign(styles, style);
+      });
+
+      for (var key in props) {
+        if (!isPropValid(key)) { continue; }
+        nextProps[key] = props[key];
+      }
+
+      return jsx(as || tag, _objectSpread({}, nextProps, {
+        css: styles
+      }));
+    });
+    return Styled;
+  };
+};
+
 var themed = function themed(key) {
@@ -154,8 +248,16 @@ return function (props) {
 
-var Styled = styled('div')(themed('div'), styledSystem.space);
+var Styled = styled('div')(themed('div'));
 var components = {};
 tags.forEach(function (tag) {
-  components[tag] = styled(alias(tag))(themed(tag), styledSystem.space);
+  components[tag] = styled(alias(tag))(themed(tag));
   Styled[tag] = components[tag];
 });
+var createComponents = function createComponents() {
+  var components = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var next = {};
+  Object.keys(components).forEach(function (key) {
+    next[key] = styled(components[key])(themed(key));
+  });
+  return next;
+};
 
@@ -249,20 +351,34 @@ var Context = React.createContext({
 
-var createComponents = function createComponents() {
-  var components = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var next = {};
-  Object.keys(components).forEach(function (key) {
-    next[key] = styled(components[key])(themed(key));
+var applyColorMode = function applyColorMode(theme, mode) {
+  if (!mode) { return theme; }
+  var modes = css.get(theme, 'colors.modes', {});
+  return merge.all({}, theme, {
+    colors: css.get(modes, mode, {})
   });
-  return next;
 };
 
-var ThemeProvider = function ThemeProvider(_ref) {
-  var theme = _ref.theme,
-      components = _ref.components,
-      props = _objectWithoutProperties(_ref, ["theme", "components"]);
+var BaseProvider = function BaseProvider(_ref) {
+  var context = _ref.context,
+      components$$1 = _ref.components,
+      children = _ref.children;
+  var theme = applyColorMode(context.theme, context.colorMode);
+  return jsx(core.ThemeContext.Provider, {
+    value: theme
+  }, jsx(react.MDXProvider, {
+    components: components$$1
+  }, jsx(Context.Provider, {
+    value: context,
+    children: children
+  })));
+};
 
+var RootProvider = function RootProvider(_ref2) {
+  var _ref2$theme = _ref2.theme,
+      theme = _ref2$theme === void 0 ? {} : _ref2$theme,
+      components$$1 = _ref2.components,
+      children = _ref2.children;
+  // components are provided in the default Context
   var outer = useThemeUI();
-  var initialColorMode = outer.colorMode || (theme ? theme.initialColorMode : undefined);
 
-  var _useColorState = useColorState(initialColorMode),
+  var _useColorState = useColorState(theme.initialColorMode),
       _useColorState2 = _slicedToArray(_useColorState, 2),
@@ -272,35 +388,44 @@ colorMode = _useColorState2[0],
 
-  var context = merge({}, {
+  var context = {
     colorMode: colorMode,
-    setColorMode: setColorMode
-  }, outer, {
-    theme: theme,
-    components: createComponents(components)
+    setColorMode: setColorMode,
+    components: _objectSpread({}, outer.components, createComponents(components$$1)),
+    theme: theme
+  };
+  return jsx(BaseProvider, {
+    context: context,
+    components: context.components,
+    children: children
   });
+};
 
-  if (context.colorMode) {
-    var modes = css.get(context.theme, 'colors.modes', {});
-    context.theme = merge({}, context.theme, {
-      colors: css.get(modes, context.colorMode, context.theme.colors)
-    });
+var NestedProvider = function NestedProvider(_ref3) {
+  var theme = _ref3.theme,
+      components$$1 = _ref3.components,
+      children = _ref3.children;
+  var outer = useThemeUI();
+  var context = merge.all({}, outer, {
+    theme: theme
+  });
+  return jsx(BaseProvider, {
+    context: context,
+    components: createComponents(components$$1),
+    children: children
+  });
+};
+
+var ThemeProvider = function ThemeProvider(props) {
+  var outer = useThemeUI();
+
+  if (outer.colorMode) {
+    return jsx(NestedProvider, props);
   }
 
-  return jsx(core.ThemeContext.Provider, {
-    value: context.theme
-  }, jsx(react.MDXProvider, {
-    components: context.components
-  }, jsx(Context.Provider, {
-    value: context,
-    children: props.children
-  })));
+  return jsx(RootProvider, props);
 };
 
-var cssProp = function cssProp(props) {
-  return css__default(props.css)(props.theme);
-};
-
 var Box = styled('div')(css__default({
   boxSizing: 'border-box',
   minWidth: 0
-}), styledSystem.space, styledSystem.color, styledSystem.layout, styledSystem.flexbox, cssProp);
+}));
 var Flex = styled(Box)({
@@ -312,3 +437,3 @@ display: 'flex'
   return jsx(Box, _objectSpread({}, props, {
-    css: {
+    sx: {
       minHeight: '100vh',
@@ -325,3 +450,3 @@ display: 'flex',
   }, props, {
-    css: {
+    sx: {
       display: 'flex',
@@ -336,3 +461,3 @@ variant: 'styles.Header'
   }, props, {
-    css: {
+    sx: {
       flex: '1 1 auto',
@@ -345,3 +470,3 @@ variant: 'styles.Main'
   return jsx(Box, _objectSpread({}, props, {
-    css: {
+    sx: {
       width: '100%',
@@ -360,3 +485,3 @@ minWidth: 0,
   }, props, {
-    css: {
+    sx: {
       display: 'flex',
@@ -385,4 +510,2 @@ variant: 'styles.Footer'
 exports.Footer = Footer;
-exports.ColorModeProvider = ThemeProvider;
-exports.ComponentProvider = ThemeProvider;
 //# sourceMappingURL=index.js.map

dist/index.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mdx-js/react'), require('react'), require('lodash.merge'), require('@emotion/core'), require('@emotion/styled'), require('styled-system'), require('@styled-system/css')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@mdx-js/react', 'react', 'lodash.merge', '@emotion/core', '@emotion/styled', 'styled-system', '@styled-system/css'], factory) :
-  (factory((global.themeUi = {}),global.react,global.react,global.merge,global.core,global.styled,global.styledSystem,global.css));
-}(this, (function (exports,react,React,merge,core,styled,styledSystem,css) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mdx-js/react'), require('deepmerge'), require('@emotion/is-prop-valid'), require('react'), require('@emotion/core'), require('@styled-system/css')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@mdx-js/react', 'deepmerge', '@emotion/is-prop-valid', 'react', '@emotion/core', '@styled-system/css'], factory) :
+  (factory((global.themeUi = {}),global.react,global.deepmerge,global.isPropValid,global.react,global.core,global.css));
+}(this, (function (exports,react,deepmerge,isPropValid,React,core,css) {
+  deepmerge = deepmerge && deepmerge.hasOwnProperty('default') ? deepmerge['default'] : deepmerge;
+  isPropValid = isPropValid && isPropValid.hasOwnProperty('default') ? isPropValid['default'] : isPropValid;
   var React__default = 'default' in React ? React['default'] : React;
-  merge = merge && merge.hasOwnProperty('default') ? merge['default'] : merge;
-  styled = styled && styled.hasOwnProperty('default') ? styled['default'] : styled;
   var css__default = 'default' in css ? css['default'] : css;
 
+  var getCSS = function getCSS(props) {
+    return function (theme) {
+      if (!props.sx && !props.css) { return undefined; }
+      var styles = css__default(props.sx)(theme);
+      var raw = typeof props.css === 'function' ? props.css(theme) : props.css;
+      return [styles, raw];
+    };
+  };
+
+  var parseProps = function parseProps(props) {
+    if (!props) { return null; }
+    var next = {};
+
+    for (var key in props) {
+      if (key === 'sx') { continue; }
+      next[key] = props[key];
+    }
+
+    next.css = getCSS(props);
+    return next;
+  };
+
+  var jsx = function jsx(type, props) {
+    var arguments$1 = arguments;
+
+    for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+      children[_key - 2] = arguments$1[_key];
+    }
+
+    return core.jsx.apply(undefined, [type, parseProps(props)].concat(children));
+  };
+
+  function _typeof(obj) {
+    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+      _typeof = function (obj) {
+        return typeof obj;
+      };
+    } else {
+      _typeof = function (obj) {
+        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+      };
+    }
+
+    return _typeof(obj);
+  }
+
   function _defineProperty(obj, key, value) {
@@ -119,14 +165,63 @@ if (key in obj) {
 
-  var jsx = function jsx(type, props) {
+  var canUseSymbol = typeof Symbol === 'function' && Symbol["for"];
+  var REACT_ELEMENT = canUseSymbol ? Symbol["for"]('react.element') : 0xeac7;
+  var FORWARD_REF = canUseSymbol ? Symbol["for"]('react.forward_ref') : 0xeac7;
+
+  var isMergeableObject = function isMergeableObject(n) {
+    return !!n && _typeof(n) === 'object' && n.$$typeof !== REACT_ELEMENT && n.$$typeof !== FORWARD_REF;
+  };
+
+  var merge = function merge(a, b) {
+    return deepmerge(a, b, {
+      isMergeableObject: isMergeableObject
+    });
+  };
+
+  merge.all = function () {
     var arguments$1 = arguments;
 
-    for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-      children[_key - 2] = arguments$1[_key];
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments$1[_key];
     }
 
-    return core.jsx.apply(undefined, [type, props ? _objectSpread({}, props, {
-      css: props.css ? css__default(props.css) : undefined
-    }) : null].concat(children));
+    return deepmerge.all(args, {
+      isMergeableObject: isMergeableObject
+    });
   };
 
+  var styled = function styled(tag) {
+    return function () {
+      var arguments$1 = arguments;
+
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments$1[_key];
+      }
+
+      var Styled = React.forwardRef(function (_ref, ref) {
+        var as = _ref.as,
+            props = _objectWithoutProperties(_ref, ["as"]);
+
+        var theme = React.useContext(core.ThemeContext);
+        var nextProps = {};
+        var styles = {};
+        args.forEach(function (arg) {
+          var style = typeof arg === 'function' ? arg(_objectSpread({
+            theme: theme
+          }, props)) : arg;
+          Object.assign(styles, style);
+        });
+
+        for (var key in props) {
+          if (!isPropValid(key)) { continue; }
+          nextProps[key] = props[key];
+        }
+
+        return jsx(as || tag, _objectSpread({}, nextProps, {
+          css: styles
+        }));
+      });
+      return Styled;
+    };
+  };
+
   var themed = function themed(key) {
@@ -152,8 +247,16 @@ return function (props) {
 
-  var Styled = styled('div')(themed('div'), styledSystem.space);
+  var Styled = styled('div')(themed('div'));
   var components = {};
   tags.forEach(function (tag) {
-    components[tag] = styled(alias(tag))(themed(tag), styledSystem.space);
+    components[tag] = styled(alias(tag))(themed(tag));
     Styled[tag] = components[tag];
   });
+  var createComponents = function createComponents() {
+    var components = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var next = {};
+    Object.keys(components).forEach(function (key) {
+      next[key] = styled(components[key])(themed(key));
+    });
+    return next;
+  };
 
@@ -247,20 +350,34 @@ var Context = React.createContext({
 
-  var createComponents = function createComponents() {
-    var components = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var next = {};
-    Object.keys(components).forEach(function (key) {
-      next[key] = styled(components[key])(themed(key));
+  var applyColorMode = function applyColorMode(theme, mode) {
+    if (!mode) { return theme; }
+    var modes = css.get(theme, 'colors.modes', {});
+    return merge.all({}, theme, {
+      colors: css.get(modes, mode, {})
     });
-    return next;
   };
 
-  var ThemeProvider = function ThemeProvider(_ref) {
-    var theme = _ref.theme,
-        components = _ref.components,
-        props = _objectWithoutProperties(_ref, ["theme", "components"]);
+  var BaseProvider = function BaseProvider(_ref) {
+    var context = _ref.context,
+        components$$1 = _ref.components,
+        children = _ref.children;
+    var theme = applyColorMode(context.theme, context.colorMode);
+    return jsx(core.ThemeContext.Provider, {
+      value: theme
+    }, jsx(react.MDXProvider, {
+      components: components$$1
+    }, jsx(Context.Provider, {
+      value: context,
+      children: children
+    })));
+  };
 
+  var RootProvider = function RootProvider(_ref2) {
+    var _ref2$theme = _ref2.theme,
+        theme = _ref2$theme === void 0 ? {} : _ref2$theme,
+        components$$1 = _ref2.components,
+        children = _ref2.children;
+    // components are provided in the default Context
     var outer = useThemeUI();
-    var initialColorMode = outer.colorMode || (theme ? theme.initialColorMode : undefined);
 
-    var _useColorState = useColorState(initialColorMode),
+    var _useColorState = useColorState(theme.initialColorMode),
         _useColorState2 = _slicedToArray(_useColorState, 2),
@@ -270,35 +387,44 @@ colorMode = _useColorState2[0],
 
-    var context = merge({}, {
+    var context = {
       colorMode: colorMode,
-      setColorMode: setColorMode
-    }, outer, {
-      theme: theme,
-      components: createComponents(components)
+      setColorMode: setColorMode,
+      components: _objectSpread({}, outer.components, createComponents(components$$1)),
+      theme: theme
+    };
+    return jsx(BaseProvider, {
+      context: context,
+      components: context.components,
+      children: children
     });
+  };
 
-    if (context.colorMode) {
-      var modes = css.get(context.theme, 'colors.modes', {});
-      context.theme = merge({}, context.theme, {
-        colors: css.get(modes, context.colorMode, context.theme.colors)
-      });
+  var NestedProvider = function NestedProvider(_ref3) {
+    var theme = _ref3.theme,
+        components$$1 = _ref3.components,
+        children = _ref3.children;
+    var outer = useThemeUI();
+    var context = merge.all({}, outer, {
+      theme: theme
+    });
+    return jsx(BaseProvider, {
+      context: context,
+      components: createComponents(components$$1),
+      children: children
+    });
+  };
+
+  var ThemeProvider = function ThemeProvider(props) {
+    var outer = useThemeUI();
+
+    if (outer.colorMode) {
+      return jsx(NestedProvider, props);
     }
 
-    return jsx(core.ThemeContext.Provider, {
-      value: context.theme
-    }, jsx(react.MDXProvider, {
-      components: context.components
-    }, jsx(Context.Provider, {
-      value: context,
-      children: props.children
-    })));
+    return jsx(RootProvider, props);
   };
 
-  var cssProp = function cssProp(props) {
-    return css__default(props.css)(props.theme);
-  };
-
   var Box = styled('div')(css__default({
     boxSizing: 'border-box',
     minWidth: 0
-  }), styledSystem.space, styledSystem.color, styledSystem.layout, styledSystem.flexbox, cssProp);
+  }));
   var Flex = styled(Box)({
@@ -310,3 +436,3 @@ display: 'flex'
     return jsx(Box, _objectSpread({}, props, {
-      css: {
+      sx: {
         minHeight: '100vh',
@@ -323,3 +449,3 @@ display: 'flex',
     }, props, {
-      css: {
+      sx: {
         display: 'flex',
@@ -334,3 +460,3 @@ variant: 'styles.Header'
     }, props, {
-      css: {
+      sx: {
         flex: '1 1 auto',
@@ -343,3 +469,3 @@ variant: 'styles.Main'
     return jsx(Box, _objectSpread({}, props, {
-      css: {
+      sx: {
         width: '100%',
@@ -358,3 +484,3 @@ minWidth: 0,
     }, props, {
-      css: {
+      sx: {
         display: 'flex',
@@ -383,6 +509,4 @@ variant: 'styles.Footer'
   exports.Footer = Footer;
-  exports.ColorModeProvider = ThemeProvider;
-  exports.ComponentProvider = ThemeProvider;
 
 })));
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "theme-ui",
-  "version": "0.1.7",
+  "version": "0.2.0-alpha.0",
   "description": "Build consistent, themeable React UIs based on design system constraints and design tokens",
@@ -16,17 +16,15 @@ "main": "dist/index.js",
     "@emotion/core": "^10.0.0",
-    "@emotion/styled": "^10.0.0",
     "@mdx-js/react": "^1.0.0"
   },
   "dependencies": {
+    "@emotion/is-prop-valid": "^0.8.1",
     "@styled-system/css": "^5.0.5",
-    "lodash.merge": "^4.6.0",
-    "react": "^16.8.0",
-    "styled-system": "^5.0.5"
+    "deepmerge": "^3.2.0",
+    "react": "^16.8.0"
   },
   "devDependencies": {
     "@emotion/core": "^10.0.0",
-    "@emotion/styled": "^10.0.0",
     "@mdx-js/react": "^1.0.0"
   },
-  "gitHead": "e7aecff15597150925b6c5f2def98d6d84a78db9"
+  "gitHead": "42a0f53e59d053daf2f897392d8f0019e2428712"
 }

README.md

@@ -47,3 +47,3 @@ <img src='https://raw.githubusercontent.com/system-ui/theme-ui/master/packages/docs/static/icon.png' width='64' heigh='64' />
 ```sh
-npm i theme-ui @emotion/core @emotion/styled @mdx-js/react
+npm i theme-ui @emotion/core @mdx-js/react
 ```
@@ -50,0 +50,0 @@

src/color-modes.js

 import React, { useState, useEffect, useLayoutEffect } from 'react'
-import merge from 'lodash.merge'
 import { css } from '@styled-system/css'
@@ -4,0 +3,0 @@ import { Global } from '@emotion/core'

src/components.js

@@ -1,3 +0,2 @@
-import styled from '@emotion/styled'
-import { space } from 'styled-system'
+import styled from './styled'
 import themed from './themed'
@@ -49,3 +48,3 @@
 
-export const Styled = styled('div')(themed('div'), space)
+export const Styled = styled('div')(themed('div'))
 
@@ -55,4 +54,12 @@ export const components = {}
 tags.forEach(tag => {
-  components[tag] = styled(alias(tag))(themed(tag), space)
+  components[tag] = styled(alias(tag))(themed(tag))
   Styled[tag] = components[tag]
 })
+
+export const createComponents = (components = {}) => {
+  const next = {}
+  Object.keys(components).forEach(key => {
+    next[key] = styled(components[key])(themed(key))
+  })
+  return next
+}

src/index.js

 export { css, get } from '@styled-system/css'
 export { jsx } from './jsx'
-export { ThemeProvider } from './core'
+export { ThemeProvider } from './provider'
 export { Context, useThemeUI } from './context'
@@ -8,7 +8,1 @@ export { ColorMode, useColorMode } from './color-modes'
 export { Box, Flex, Layout, Header, Main, Container, Footer } from './layout'
-
-// DEPRECATED
-export {
-  ThemeProvider as ColorModeProvider,
-  ThemeProvider as ComponentProvider,
-} from './core'

src/jsx.js

 import { jsx as emotion } from '@emotion/core'
 import css from '@styled-system/css'
 
+const getCSS = props => theme => {
+  if (!props.sx && !props.css) return undefined
+  const styles = css(props.sx)(theme)
+  const raw = typeof props.css === 'function' ? props.css(theme) : props.css
+  return [styles, raw]
+}
+
+const parseProps = props => {
+  if (!props) return null
+  const next = {}
+  for (let key in props) {
+    if (key === 'sx') continue
+    next[key] = props[key]
+  }
+  next.css = getCSS(props)
+  return next
+}
+
 export const jsx = (type, props, ...children) =>
-  emotion.apply(undefined, [
-    type,
-    props
-      ? {
-          ...props,
-          css: props.css ? css(props.css) : undefined,
-        }
-      : null,
-    ...children,
-  ])
+  emotion.apply(undefined, [type, parseProps(props), ...children])
 
 export default jsx

src/layout.js

 import jsx from './jsx'
-import styled from '@emotion/styled'
-import { space, color, layout, flexbox } from 'styled-system'
+import styled from './styled'
 import css from '@styled-system/css'
 
-// fallback for missing emotion pragma or for use in MDX
-const cssProp = props => css(props.css)(props.theme)
-
 export const Box = styled('div')(
@@ -13,8 +9,3 @@ css({
     minWidth: 0,
-  }),
-  space,
-  color,
-  layout,
-  flexbox,
-  cssProp
+  })
 )
@@ -30,3 +21,3 @@
     ...props,
-    css: {
+    sx: {
       minHeight: '100vh',
@@ -43,3 +34,3 @@ display: 'flex',
     ...props,
-    css: {
+    sx: {
       display: 'flex',
@@ -54,3 +45,3 @@ variant: 'styles.Header',
     ...props,
-    css: {
+    sx: {
       flex: '1 1 auto',
@@ -64,3 +55,3 @@ variant: 'styles.Main',
     ...props,
-    css: {
+    sx: {
       width: '100%',
@@ -79,3 +70,3 @@ minWidth: 0,
     ...props,
-    css: {
+    sx: {
       display: 'flex',
@@ -82,0 +73,0 @@ variant: 'styles.Footer',

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

112644

increased by28.63%

Dependency count

6

decreased by-14.29%

Dev dependency count

2

decreased by-33.33%

Number of package files

20

increased by11.11%

Lines of code

1603

increased by29.38%

Dependency changes

• + Added@emotion/is-prop-valid@^0.8.1

• + Addeddeepmerge@^3.2.0

• + Addeddeepmerge@3.3.0(transitive)

• - Removedlodash.merge@^4.6.0

• - Removedstyled-system@^5.0.5

• - Removed@emotion/styled@10.3.0(transitive)

• - Removed@emotion/styled-base@10.3.0(transitive)

• - Removed@styled-system/background@5.1.2(transitive)

• - Removed@styled-system/border@5.1.5(transitive)

• - Removed@styled-system/color@5.1.2(transitive)

• - Removed@styled-system/core@5.1.2(transitive)

• - Removed@styled-system/flexbox@5.1.2(transitive)

• - Removed@styled-system/grid@5.1.2(transitive)

• - Removed@styled-system/layout@5.1.2(transitive)

• - Removed@styled-system/position@5.1.2(transitive)

• - Removed@styled-system/shadow@5.1.2(transitive)

• - Removed@styled-system/space@5.1.2(transitive)

• - Removed@styled-system/typography@5.1.2(transitive)

• - Removed@styled-system/variant@5.1.5(transitive)

• - Removedlodash.merge@4.6.2(transitive)

• - Removedstyled-system@5.1.5(transitive)