theme-ui - npm Package Compare versions

Comparing version 0.2.6 to 0.2.9

dist/index.esm.js

@@ -70,16 +70,20 @@ import { MDXProvider } from '@mdx-js/react';
 
-function _objectSpread(target) {
+function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-    var ownKeys = Object.keys(source);
+    if (i % 2) {
+      var source = arguments[i] != null ? arguments[i] : {};
+      var ownKeys = Object.keys(source);
 
-    if (typeof Object.getOwnPropertySymbols === 'function') {
-      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-      }));
+      if (typeof Object.getOwnPropertySymbols === 'function') {
+        ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
+          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+      }
+
+      ownKeys.forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i]));
     }
-
-    ownKeys.forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    });
   }
@@ -206,3 +210,3 @@
       args.forEach(function (arg) {
-        var style = typeof arg === 'function' ? arg(_objectSpread({
+        var style = typeof arg === 'function' ? arg(_objectSpread2({
           theme: theme
@@ -218,3 +222,3 @@ }, props)) : arg;
 
-      return jsx$1(as || tag, _objectSpread({}, nextProps, {
+      return jsx$1(as || tag, _objectSpread2({}, nextProps, {
         css: styles
@@ -325,3 +329,3 @@ }));
     var colors = modes[mode];
-    styles["&.theme-ui-".concat(mode)] = {
+    styles["&.theme-ui-".concat(mode)] = theme.useCustomProperties ? colors : {
       color: colors.text,
@@ -332,3 +336,3 @@ bg: colors.background
   return css$1({
-    body: _objectSpread({}, styles, {
+    body: _objectSpread2({}, styles, {
       color: 'text',
@@ -346,2 +350,20 @@ bg: 'background'
 
+var colorModesToCSSProperties = function colorModesToCSSProperties(modes) {
+  return Object.keys(modes).reduce(function (parsedModes, modeKey) {
+    var colors = modes[modeKey];
+    return _objectSpread2({}, parsedModes, _defineProperty({}, modeKey, Object.keys(colors).reduce(function (parsedColors, colorKey) {
+      return _objectSpread2({}, parsedColors, _defineProperty({}, "--theme-ui-".concat(colorKey), colors[colorKey]));
+    }, {})));
+  }, {});
+};
+
+var applyCSSProperties = function applyCSSProperties(theme) {
+  var colors = theme.colors;
+  return _objectSpread2({}, theme, {
+    colors: Object.keys(colors).reduce(function (parsedColors, key) {
+      return _objectSpread2({}, parsedColors, _defineProperty({}, key, key === 'modes' ? colorModesToCSSProperties(colors[key]) : "var(--theme-ui-".concat(key, ", ").concat(colors[key], ")")));
+    }, {})
+  });
+};
+
 var applyColorMode = function applyColorMode(theme, mode) {
@@ -361,3 +383,3 @@ if (!mode) { return theme; }
   return jsx$1(ThemeContext.Provider, {
-    value: theme
+    value: theme.useCustomProperties ? applyCSSProperties(theme) : theme
   }, jsx$1(MDXProvider, {
@@ -388,3 +410,3 @@ components: components$$1
     setColorMode: setColorMode,
-    components: _objectSpread({}, outer.components, createComponents(components$$1)),
+    components: _objectSpread2({}, outer.components, {}, createComponents(components$$1)),
     theme: theme
@@ -433,3 +455,3 @@ };
 var Layout = function Layout(props) {
-  return jsx$1(Box, _objectSpread({}, props, {
+  return jsx$1(Box, _objectSpread2({}, props, {
     sx: {
@@ -444,3 +466,3 @@ minHeight: '100vh',
 var Header = function Header(props) {
-  return jsx$1(Box, _objectSpread({
+  return jsx$1(Box, _objectSpread2({
     as: 'header'
@@ -455,3 +477,3 @@ }, props, {
 var Main = function Main(props) {
-  return jsx$1(Box, _objectSpread({
+  return jsx$1(Box, _objectSpread2({
     as: 'main'
@@ -466,3 +488,3 @@ }, props, {
 var Container = function Container(props) {
-  return jsx$1(Box, _objectSpread({}, props, {
+  return jsx$1(Box, _objectSpread2({}, props, {
     sx: {
@@ -479,3 +501,3 @@ width: '100%',
 var Footer = function Footer(props) {
-  return jsx$1(Box, _objectSpread({
+  return jsx$1(Box, _objectSpread2({
     as: 'footer'
@@ -482,0 +504,0 @@ }, props, {

dist/index.js

@@ -73,16 +73,20 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-function _objectSpread(target) {
+function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-    var ownKeys = Object.keys(source);
+    if (i % 2) {
+      var source = arguments[i] != null ? arguments[i] : {};
+      var ownKeys = Object.keys(source);
 
-    if (typeof Object.getOwnPropertySymbols === 'function') {
-      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-      }));
+      if (typeof Object.getOwnPropertySymbols === 'function') {
+        ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
+          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+      }
+
+      ownKeys.forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i]));
     }
-
-    ownKeys.forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    });
   }
@@ -209,3 +213,3 @@
       args.forEach(function (arg) {
-        var style = typeof arg === 'function' ? arg(_objectSpread({
+        var style = typeof arg === 'function' ? arg(_objectSpread2({
           theme: theme
@@ -221,3 +225,3 @@ }, props)) : arg;
 
-      return jsx(as || tag, _objectSpread({}, nextProps, {
+      return jsx(as || tag, _objectSpread2({}, nextProps, {
         css: styles
@@ -328,3 +332,3 @@ }));
     var colors = modes[mode];
-    styles["&.theme-ui-".concat(mode)] = {
+    styles["&.theme-ui-".concat(mode)] = theme.useCustomProperties ? colors : {
       color: colors.text,
@@ -335,3 +339,3 @@ bg: colors.background
   return css.css({
-    body: _objectSpread({}, styles, {
+    body: _objectSpread2({}, styles, {
       color: 'text',
@@ -349,2 +353,20 @@ bg: 'background'
 
+var colorModesToCSSProperties = function colorModesToCSSProperties(modes) {
+  return Object.keys(modes).reduce(function (parsedModes, modeKey) {
+    var colors = modes[modeKey];
+    return _objectSpread2({}, parsedModes, _defineProperty({}, modeKey, Object.keys(colors).reduce(function (parsedColors, colorKey) {
+      return _objectSpread2({}, parsedColors, _defineProperty({}, "--theme-ui-".concat(colorKey), colors[colorKey]));
+    }, {})));
+  }, {});
+};
+
+var applyCSSProperties = function applyCSSProperties(theme) {
+  var colors = theme.colors;
+  return _objectSpread2({}, theme, {
+    colors: Object.keys(colors).reduce(function (parsedColors, key) {
+      return _objectSpread2({}, parsedColors, _defineProperty({}, key, key === 'modes' ? colorModesToCSSProperties(colors[key]) : "var(--theme-ui-".concat(key, ", ").concat(colors[key], ")")));
+    }, {})
+  });
+};
+
 var applyColorMode = function applyColorMode(theme, mode) {
@@ -364,3 +386,3 @@ if (!mode) { return theme; }
   return jsx(core.ThemeContext.Provider, {
-    value: theme
+    value: theme.useCustomProperties ? applyCSSProperties(theme) : theme
   }, jsx(react.MDXProvider, {
@@ -391,3 +413,3 @@ components: components$$1
     setColorMode: setColorMode,
-    components: _objectSpread({}, outer.components, createComponents(components$$1)),
+    components: _objectSpread2({}, outer.components, {}, createComponents(components$$1)),
     theme: theme
@@ -436,3 +458,3 @@ };
 var Layout = function Layout(props) {
-  return jsx(Box, _objectSpread({}, props, {
+  return jsx(Box, _objectSpread2({}, props, {
     sx: {
@@ -447,3 +469,3 @@ minHeight: '100vh',
 var Header = function Header(props) {
-  return jsx(Box, _objectSpread({
+  return jsx(Box, _objectSpread2({
     as: 'header'
@@ -458,3 +480,3 @@ }, props, {
 var Main = function Main(props) {
-  return jsx(Box, _objectSpread({
+  return jsx(Box, _objectSpread2({
     as: 'main'
@@ -469,3 +491,3 @@ }, props, {
 var Container = function Container(props) {
-  return jsx(Box, _objectSpread({}, props, {
+  return jsx(Box, _objectSpread2({}, props, {
     sx: {
@@ -482,3 +504,3 @@ width: '100%',
 var Footer = function Footer(props) {
-  return jsx(Box, _objectSpread({
+  return jsx(Box, _objectSpread2({
     as: 'footer'
@@ -485,0 +507,0 @@ }, props, {

dist/index.umd.js

@@ -72,16 +72,20 @@ (function (global, factory) {
 
-  function _objectSpread(target) {
+  function _objectSpread2(target) {
     for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
-      var ownKeys = Object.keys(source);
+      if (i % 2) {
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
 
-      if (typeof Object.getOwnPropertySymbols === 'function') {
-        ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
-          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-        }));
+        if (typeof Object.getOwnPropertySymbols === 'function') {
+          ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+          }));
+        }
+
+        ownKeys.forEach(function (key) {
+          _defineProperty(target, key, source[key]);
+        });
+      } else {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i]));
       }
-
-      ownKeys.forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
     }
@@ -208,3 +212,3 @@
         args.forEach(function (arg) {
-          var style = typeof arg === 'function' ? arg(_objectSpread({
+          var style = typeof arg === 'function' ? arg(_objectSpread2({
             theme: theme
@@ -220,3 +224,3 @@ }, props)) : arg;
 
-        return jsx(as || tag, _objectSpread({}, nextProps, {
+        return jsx(as || tag, _objectSpread2({}, nextProps, {
           css: styles
@@ -327,3 +331,3 @@ }));
       var colors = modes[mode];
-      styles["&.theme-ui-".concat(mode)] = {
+      styles["&.theme-ui-".concat(mode)] = theme.useCustomProperties ? colors : {
         color: colors.text,
@@ -334,3 +338,3 @@ bg: colors.background
     return css.css({
-      body: _objectSpread({}, styles, {
+      body: _objectSpread2({}, styles, {
         color: 'text',
@@ -348,2 +352,20 @@ bg: 'background'
 
+  var colorModesToCSSProperties = function colorModesToCSSProperties(modes) {
+    return Object.keys(modes).reduce(function (parsedModes, modeKey) {
+      var colors = modes[modeKey];
+      return _objectSpread2({}, parsedModes, _defineProperty({}, modeKey, Object.keys(colors).reduce(function (parsedColors, colorKey) {
+        return _objectSpread2({}, parsedColors, _defineProperty({}, "--theme-ui-".concat(colorKey), colors[colorKey]));
+      }, {})));
+    }, {});
+  };
+
+  var applyCSSProperties = function applyCSSProperties(theme) {
+    var colors = theme.colors;
+    return _objectSpread2({}, theme, {
+      colors: Object.keys(colors).reduce(function (parsedColors, key) {
+        return _objectSpread2({}, parsedColors, _defineProperty({}, key, key === 'modes' ? colorModesToCSSProperties(colors[key]) : "var(--theme-ui-".concat(key, ", ").concat(colors[key], ")")));
+      }, {})
+    });
+  };
+
   var applyColorMode = function applyColorMode(theme, mode) {
@@ -363,3 +385,3 @@ if (!mode) { return theme; }
     return jsx(core.ThemeContext.Provider, {
-      value: theme
+      value: theme.useCustomProperties ? applyCSSProperties(theme) : theme
     }, jsx(react.MDXProvider, {
@@ -390,3 +412,3 @@ components: components$$1
       setColorMode: setColorMode,
-      components: _objectSpread({}, outer.components, createComponents(components$$1)),
+      components: _objectSpread2({}, outer.components, {}, createComponents(components$$1)),
       theme: theme
@@ -435,3 +457,3 @@ };
   var Layout = function Layout(props) {
-    return jsx(Box, _objectSpread({}, props, {
+    return jsx(Box, _objectSpread2({}, props, {
       sx: {
@@ -446,3 +468,3 @@ minHeight: '100vh',
   var Header = function Header(props) {
-    return jsx(Box, _objectSpread({
+    return jsx(Box, _objectSpread2({
       as: 'header'
@@ -457,3 +479,3 @@ }, props, {
   var Main = function Main(props) {
-    return jsx(Box, _objectSpread({
+    return jsx(Box, _objectSpread2({
       as: 'main'
@@ -468,3 +490,3 @@ }, props, {
   var Container = function Container(props) {
-    return jsx(Box, _objectSpread({}, props, {
+    return jsx(Box, _objectSpread2({}, props, {
       sx: {
@@ -481,3 +503,3 @@ width: '100%',
   var Footer = function Footer(props) {
-    return jsx(Box, _objectSpread({
+    return jsx(Box, _objectSpread2({
       as: 'footer'
@@ -484,0 +506,0 @@ }, props, {

package.json

 {
   "name": "theme-ui",
-  "version": "0.2.6",
+  "version": "0.2.9",
   "description": "Build consistent, themeable React UIs based on design system constraints and design tokens",
@@ -28,3 +28,3 @@ "main": "dist/index.js",
   },
-  "gitHead": "795b398a5d8508891a8f81b579d9c5b221a5f34f"
+  "gitHead": "2266e8bd3cad8c1dfc1ba45cc5fe09c3bfaac6f2"
 }

src/color-modes.js

@@ -57,6 +57,5 @@ import React, { useState, useEffect } from 'react'
     const colors = modes[mode]
-    styles[`&.theme-ui-${mode}`] = {
-      color: colors.text,
-      bg: colors.background,
-    }
+    styles[`&.theme-ui-${mode}`] = theme.useCustomProperties
+      ? colors
+      : { color: colors.text, bg: colors.background }
   })
@@ -63,0 +62,0 @@

src/provider.js

@@ -10,2 +10,35 @@ import { ThemeContext as EmotionContext } from '@emotion/core'
 
+const colorModesToCSSProperties = modes => {
+  return Object.keys(modes).reduce((parsedModes, modeKey) => {
+    const colors = modes[modeKey]
+    return {
+      ...parsedModes,
+      [modeKey]: Object.keys(colors).reduce(
+        (parsedColors, colorKey) => ({
+          ...parsedColors,
+          [`--theme-ui-${colorKey}`]: colors[colorKey],
+        }),
+        {}
+      ),
+    }
+  }, {})
+}
+
+const applyCSSProperties = theme => {
+  const { colors } = theme
+  return {
+    ...theme,
+    colors: Object.keys(colors).reduce(
+      (parsedColors, key) => ({
+        ...parsedColors,
+        [key]:
+          key === 'modes'
+            ? colorModesToCSSProperties(colors[key])
+            : `var(--theme-ui-${key}, ${colors[key]})`,
+      }),
+      {}
+    ),
+  }
+}
+
 const applyColorMode = (theme, mode) => {
@@ -23,3 +56,3 @@ if (!mode) return theme
     EmotionContext.Provider,
-    { value: theme },
+    { value: theme.useCustomProperties ? applyCSSProperties(theme) : theme },
     jsx(
@@ -26,0 +59,0 @@ MDXProvider,

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

120680

increased by8.88%

Lines of code

1682

increased by5.65%

No dependency changes