@theme-ui/color-modes - npm Package Compare versions

Comparing version 0.4.0-rc.1 to 0.4.0-rc.3

dist/index.esm.js

 import React from 'react';
-import { jsx, useThemeUI, merge, Context } from '@theme-ui/core';
-import { Global, ThemeContext } from '@emotion/core';
+import { useThemeUI, jsx, Context, merge } from '@theme-ui/core';
 import { css, get } from '@theme-ui/css';
+import { ThemeContext, Global } from '@emotion/core';
 
-var toVarName = function (key) { return ("--theme-ui-" + key); };
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-var toVarValue = function (key, value) { return ("var(" + (toVarName(key)) + ", " + value + ")"); };
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
 
-var join = function () {
-  var args = [], len = arguments.length;
-  while ( len-- ) args[ len ] = arguments[ len ];
+    return target;
+  };
 
-  return args.filter(Boolean).join('-');
+  return _extends.apply(this, arguments);
+}
+
+var toVarName = function toVarName(key) {
+  return "--theme-ui-" + key;
 };
 
+var toVarValue = function toVarValue(key, value) {
+  return "var(" + toVarName(key) + ", " + value + ")";
+};
+
+var join = function join() {
+  return [].slice.call(arguments).filter(Boolean).join('-');
+};
+
 var numberScales = {
@@ -28,5 +47,5 @@ fontWeights: true,
 
-var toPixel = function (key, value) {
-  if (typeof value !== 'number') { return value; }
-  if (numberScales[key]) { return value; }
+var toPixel = function toPixel(key, value) {
+  if (typeof value !== 'number') return value;
+  if (numberScales[key]) return value;
   return value + 'px';
@@ -36,3 +55,3 @@ }; // convert theme values to custom properties
 
-var toCustomProperties = function (obj, parent, themeKey) {
+var toCustomProperties = function toCustomProperties(obj, parent, themeKey) {
   var next = Array.isArray(obj) ? [] : {};
@@ -60,7 +79,7 @@
 };
-var objectToVars = function (parent, obj) {
+var objectToVars = function objectToVars(parent, obj) {
   var vars = {};
 
   for (var key in obj) {
-    if (key === 'modes') { continue; }
+    if (key === 'modes') continue;
     var name = join(parent, key);
@@ -70,4 +89,3 @@ var value = obj[key];
     if (value && typeof value === 'object') {
-      vars = Object.assign({}, vars,
-        objectToVars(name, value));
+      vars = _extends({}, vars, objectToVars(name, value));
     } else {
@@ -81,6 +99,8 @@ vars[toVarName(name)] = value;
 
-var createColorStyles = function (theme) {
-  if ( theme === void 0 ) theme = {};
+var createColorStyles = function createColorStyles(theme) {
+  if (theme === void 0) {
+    theme = {};
+  }
 
-  if (!theme.colors || theme.useBodyStyles === false) { return {}; }
+  if (!theme.colors || theme.useBodyStyles === false) return {};
 
@@ -96,4 +116,5 @@ if (theme.useCustomProperties === false || !theme.colors.modes) {
 
-  var colors = theme.rawColors || theme.colors;
-  var modes = colors.modes;
+  var _theme = theme,
+      colors = _theme.colors;
+  var modes = colors.modes || {};
   var styles = objectToVars('colors', colors);
@@ -105,5 +126,6 @@ Object.keys(modes).forEach(function (mode) {
   return css({
-    body: Object.assign({}, styles,
-      {color: 'text',
-      bg: 'background'})
+    body: _extends({}, styles, {
+      color: 'text',
+      bg: 'background'
+    })
   })(theme);
@@ -114,3 +136,3 @@ };
 var storage = {
-  get: function (init) {
+  get: function get(init) {
     try {
@@ -122,3 +144,3 @@ return window.localStorage.getItem(STORAGE_KEY) || init;
   },
-  set: function (value) {
+  set: function set(value) {
     try {
@@ -132,21 +154,28 @@ window.localStorage.setItem(STORAGE_KEY, value);
 
-var getMediaQuery = function () {
+var getMediaQuery = function getMediaQuery() {
   var darkQuery = '(prefers-color-scheme: dark)';
   var lightQuery = '(prefers-color-scheme: light)';
-  var darkMQL = window.matchMedia ? window.matchMedia(darkQuery) : {};
-  var lightMQL = window.matchMedia ? window.matchMedia(lightQuery) : {};
+  var darkMQL = window.matchMedia ? window.matchMedia(darkQuery) : {
+    media: false
+  };
+  var lightMQL = window.matchMedia ? window.matchMedia(lightQuery) : {
+    media: false
+  };
   var dark = darkMQL.media === darkQuery && darkMQL.matches;
-  if (dark) { return 'dark'; }
+  if (dark) return 'dark';
   var light = lightMQL.media === lightQuery && lightMQL.matches;
-  if (light) { return 'light'; }
+  if (light) return 'light';
   return 'default';
 };
 
-var useColorModeState = function (theme) {
-  if ( theme === void 0 ) theme = {};
+var useColorModeState = function useColorModeState(theme) {
+  if (theme === void 0) {
+    theme = {};
+  }
 
-  var ref = React.useState(theme.initialColorModeName || 'default');
-  var mode = ref[0];
-  var setMode = ref[1]; // initialize state
+  var _React$useState = React.useState(theme.initialColorModeName || 'default'),
+      mode = _React$useState[0],
+      setMode = _React$useState[1]; // initialize state
 
+
   React.useEffect(function () {
@@ -162,7 +191,7 @@ var stored = theme.useLocalStorage !== false && storage.get();
 
-    if (!stored || stored === mode) { return; }
+    if (!stored || stored === mode) return;
     setMode(stored);
   }, []);
   React.useEffect(function () {
-    if (!mode || theme.useLocalStorage === false) { return; }
+    if (!mode || theme.useLocalStorage === false) return;
     storage.set(mode);
@@ -172,3 +201,3 @@ }, [mode]);
   if (process.env.NODE_ENV !== 'production') {
-    if (theme.colors && theme.colors.modes && Object.keys(theme.colors.modes).indexOf(theme.initialColorModeName) > -1) {
+    if (theme.colors && theme.colors.modes && theme.initialColorModeName && Object.keys(theme.colors.modes).indexOf(theme.initialColorModeName) > -1) {
       console.warn('The `initialColorModeName` value should be a unique name' + ' and cannot reference a key in `theme.colors.modes`.');
@@ -181,6 +210,6 @@ }
 
-var useColorMode = function () {
-  var ref = useThemeUI();
-  var colorMode = ref.colorMode;
-  var setColorMode = ref.setColorMode;
+var useColorMode = function useColorMode() {
+  var _useThemeUI = useThemeUI(),
+      colorMode = _useThemeUI.colorMode,
+      setColorMode = _useThemeUI.setColorMode;
 
@@ -194,4 +223,4 @@ if (typeof setColorMode !== 'function') {
 
-var applyColorMode = function (theme, mode) {
-  if (!mode) { return theme; }
+var applyColorMode = function applyColorMode(theme, mode) {
+  if (!mode) return theme;
   var modes = get(theme, 'colors.modes', {});
@@ -203,16 +232,22 @@ return merge.all({}, theme, {
 
-var BodyStyles = function () { return jsx(Global, {
-  styles: function (theme) { return createColorStyles(theme); }
-}); };
+var BodyStyles = function BodyStyles() {
+  return jsx(Global, {
+    styles: function styles(theme) {
+      return createColorStyles(theme);
+    }
+  });
+};
 
-var ColorModeProvider = function (ref) {
-  var children = ref.children;
+var ColorModeProvider = function ColorModeProvider(_ref) {
+  var children = _ref.children;
+  var outer = useThemeUI();
 
-  var outer = useThemeUI();
-  var ref$1 = useColorModeState(outer.theme);
-  var colorMode = ref$1[0];
-  var setColorMode = ref$1[1];
+  var _useColorModeState = useColorModeState(outer.theme),
+      colorMode = _useColorModeState[0],
+      setColorMode = _useColorModeState[1];
+
   var theme = applyColorMode(outer.theme || {}, colorMode);
-  var emotionTheme = Object.assign({}, theme);
 
+  var emotionTheme = _extends({}, theme);
+
   if (theme.useCustomProperties !== false) {
@@ -222,6 +257,8 @@ emotionTheme.colors = toCustomProperties(emotionTheme.colors, 'colors');
 
-  var context = Object.assign({}, outer,
-    {theme: theme,
+  var context = _extends({}, outer, {
+    theme: theme,
     colorMode: colorMode,
-    setColorMode: setColorMode});
+    setColorMode: setColorMode
+  });
+
   return jsx(ThemeContext.Provider, {
@@ -236,10 +273,12 @@ value: emotionTheme
 var noflash = "(function() { try {\n  var mode = localStorage.getItem('theme-ui-color-mode');\n  if (!mode) return\n  document.body.classList.add('theme-ui-' + mode);\n} catch (e) {} })();";
-var InitializeColorMode = function () { return jsx('script', {
-  key: 'theme-ui-no-flash',
-  dangerouslySetInnerHTML: {
-    __html: noflash
-  }
-}); };
+var InitializeColorMode = function InitializeColorMode() {
+  return jsx('script', {
+    key: 'theme-ui-no-flash',
+    dangerouslySetInnerHTML: {
+      __html: noflash
+    }
+  });
+};
 
-export { useColorMode, ColorModeProvider, InitializeColorMode };
+export { ColorModeProvider, InitializeColorMode, useColorMode };
 //# sourceMappingURL=index.esm.js.map

dist/index.js

@@ -5,16 +5,35 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 var core = require('@theme-ui/core');
+var css = require('@theme-ui/css');
 var core$1 = require('@emotion/core');
-var css = require('@theme-ui/css');
 
-var toVarName = function (key) { return ("--theme-ui-" + key); };
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-var toVarValue = function (key, value) { return ("var(" + (toVarName(key)) + ", " + value + ")"); };
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
 
-var join = function () {
-  var args = [], len = arguments.length;
-  while ( len-- ) args[ len ] = arguments[ len ];
+    return target;
+  };
 
-  return args.filter(Boolean).join('-');
+  return _extends.apply(this, arguments);
+}
+
+var toVarName = function toVarName(key) {
+  return "--theme-ui-" + key;
 };
 
+var toVarValue = function toVarValue(key, value) {
+  return "var(" + toVarName(key) + ", " + value + ")";
+};
+
+var join = function join() {
+  return [].slice.call(arguments).filter(Boolean).join('-');
+};
+
 var numberScales = {
@@ -31,5 +50,5 @@ fontWeights: true,
 
-var toPixel = function (key, value) {
-  if (typeof value !== 'number') { return value; }
-  if (numberScales[key]) { return value; }
+var toPixel = function toPixel(key, value) {
+  if (typeof value !== 'number') return value;
+  if (numberScales[key]) return value;
   return value + 'px';
@@ -39,3 +58,3 @@ }; // convert theme values to custom properties
 
-var toCustomProperties = function (obj, parent, themeKey) {
+var toCustomProperties = function toCustomProperties(obj, parent, themeKey) {
   var next = Array.isArray(obj) ? [] : {};
@@ -63,7 +82,7 @@
 };
-var objectToVars = function (parent, obj) {
+var objectToVars = function objectToVars(parent, obj) {
   var vars = {};
 
   for (var key in obj) {
-    if (key === 'modes') { continue; }
+    if (key === 'modes') continue;
     var name = join(parent, key);
@@ -73,4 +92,3 @@ var value = obj[key];
     if (value && typeof value === 'object') {
-      vars = Object.assign({}, vars,
-        objectToVars(name, value));
+      vars = _extends({}, vars, objectToVars(name, value));
     } else {
@@ -84,6 +102,8 @@ vars[toVarName(name)] = value;
 
-var createColorStyles = function (theme) {
-  if ( theme === void 0 ) theme = {};
+var createColorStyles = function createColorStyles(theme) {
+  if (theme === void 0) {
+    theme = {};
+  }
 
-  if (!theme.colors || theme.useBodyStyles === false) { return {}; }
+  if (!theme.colors || theme.useBodyStyles === false) return {};
 
@@ -99,4 +119,5 @@ if (theme.useCustomProperties === false || !theme.colors.modes) {
 
-  var colors = theme.rawColors || theme.colors;
-  var modes = colors.modes;
+  var _theme = theme,
+      colors = _theme.colors;
+  var modes = colors.modes || {};
   var styles = objectToVars('colors', colors);
@@ -108,5 +129,6 @@ Object.keys(modes).forEach(function (mode) {
   return css.css({
-    body: Object.assign({}, styles,
-      {color: 'text',
-      bg: 'background'})
+    body: _extends({}, styles, {
+      color: 'text',
+      bg: 'background'
+    })
   })(theme);
@@ -117,3 +139,3 @@ };
 var storage = {
-  get: function (init) {
+  get: function get(init) {
     try {
@@ -125,3 +147,3 @@ return window.localStorage.getItem(STORAGE_KEY) || init;
   },
-  set: function (value) {
+  set: function set(value) {
     try {
@@ -135,21 +157,28 @@ window.localStorage.setItem(STORAGE_KEY, value);
 
-var getMediaQuery = function () {
+var getMediaQuery = function getMediaQuery() {
   var darkQuery = '(prefers-color-scheme: dark)';
   var lightQuery = '(prefers-color-scheme: light)';
-  var darkMQL = window.matchMedia ? window.matchMedia(darkQuery) : {};
-  var lightMQL = window.matchMedia ? window.matchMedia(lightQuery) : {};
+  var darkMQL = window.matchMedia ? window.matchMedia(darkQuery) : {
+    media: false
+  };
+  var lightMQL = window.matchMedia ? window.matchMedia(lightQuery) : {
+    media: false
+  };
   var dark = darkMQL.media === darkQuery && darkMQL.matches;
-  if (dark) { return 'dark'; }
+  if (dark) return 'dark';
   var light = lightMQL.media === lightQuery && lightMQL.matches;
-  if (light) { return 'light'; }
+  if (light) return 'light';
   return 'default';
 };
 
-var useColorModeState = function (theme) {
-  if ( theme === void 0 ) theme = {};
+var useColorModeState = function useColorModeState(theme) {
+  if (theme === void 0) {
+    theme = {};
+  }
 
-  var ref = React.useState(theme.initialColorModeName || 'default');
-  var mode = ref[0];
-  var setMode = ref[1]; // initialize state
+  var _React$useState = React.useState(theme.initialColorModeName || 'default'),
+      mode = _React$useState[0],
+      setMode = _React$useState[1]; // initialize state
 
+
   React.useEffect(function () {
@@ -165,7 +194,7 @@ var stored = theme.useLocalStorage !== false && storage.get();
 
-    if (!stored || stored === mode) { return; }
+    if (!stored || stored === mode) return;
     setMode(stored);
   }, []);
   React.useEffect(function () {
-    if (!mode || theme.useLocalStorage === false) { return; }
+    if (!mode || theme.useLocalStorage === false) return;
     storage.set(mode);
@@ -175,3 +204,3 @@ }, [mode]);
   if (process.env.NODE_ENV !== 'production') {
-    if (theme.colors && theme.colors.modes && Object.keys(theme.colors.modes).indexOf(theme.initialColorModeName) > -1) {
+    if (theme.colors && theme.colors.modes && theme.initialColorModeName && Object.keys(theme.colors.modes).indexOf(theme.initialColorModeName) > -1) {
       console.warn('The `initialColorModeName` value should be a unique name' + ' and cannot reference a key in `theme.colors.modes`.');
@@ -184,6 +213,6 @@ }
 
-var useColorMode = function () {
-  var ref = core.useThemeUI();
-  var colorMode = ref.colorMode;
-  var setColorMode = ref.setColorMode;
+var useColorMode = function useColorMode() {
+  var _useThemeUI = core.useThemeUI(),
+      colorMode = _useThemeUI.colorMode,
+      setColorMode = _useThemeUI.setColorMode;
 
@@ -197,4 +226,4 @@ if (typeof setColorMode !== 'function') {
 
-var applyColorMode = function (theme, mode) {
-  if (!mode) { return theme; }
+var applyColorMode = function applyColorMode(theme, mode) {
+  if (!mode) return theme;
   var modes = css.get(theme, 'colors.modes', {});
@@ -206,16 +235,22 @@ return core.merge.all({}, theme, {
 
-var BodyStyles = function () { return core.jsx(core$1.Global, {
-  styles: function (theme) { return createColorStyles(theme); }
-}); };
+var BodyStyles = function BodyStyles() {
+  return core.jsx(core$1.Global, {
+    styles: function styles(theme) {
+      return createColorStyles(theme);
+    }
+  });
+};
 
-var ColorModeProvider = function (ref) {
-  var children = ref.children;
+var ColorModeProvider = function ColorModeProvider(_ref) {
+  var children = _ref.children;
+  var outer = core.useThemeUI();
 
-  var outer = core.useThemeUI();
-  var ref$1 = useColorModeState(outer.theme);
-  var colorMode = ref$1[0];
-  var setColorMode = ref$1[1];
+  var _useColorModeState = useColorModeState(outer.theme),
+      colorMode = _useColorModeState[0],
+      setColorMode = _useColorModeState[1];
+
   var theme = applyColorMode(outer.theme || {}, colorMode);
-  var emotionTheme = Object.assign({}, theme);
 
+  var emotionTheme = _extends({}, theme);
+
   if (theme.useCustomProperties !== false) {
@@ -225,6 +260,8 @@ emotionTheme.colors = toCustomProperties(emotionTheme.colors, 'colors');
 
-  var context = Object.assign({}, outer,
-    {theme: theme,
+  var context = _extends({}, outer, {
+    theme: theme,
     colorMode: colorMode,
-    setColorMode: setColorMode});
+    setColorMode: setColorMode
+  });
+
   return core.jsx(core$1.ThemeContext.Provider, {
@@ -239,12 +276,14 @@ value: emotionTheme
 var noflash = "(function() { try {\n  var mode = localStorage.getItem('theme-ui-color-mode');\n  if (!mode) return\n  document.body.classList.add('theme-ui-' + mode);\n} catch (e) {} })();";
-var InitializeColorMode = function () { return core.jsx('script', {
-  key: 'theme-ui-no-flash',
-  dangerouslySetInnerHTML: {
-    __html: noflash
-  }
-}); };
+var InitializeColorMode = function InitializeColorMode() {
+  return core.jsx('script', {
+    key: 'theme-ui-no-flash',
+    dangerouslySetInnerHTML: {
+      __html: noflash
+    }
+  });
+};
 
-exports.useColorMode = useColorMode;
 exports.ColorModeProvider = ColorModeProvider;
 exports.InitializeColorMode = InitializeColorMode;
+exports.useColorMode = useColorMode;
 //# sourceMappingURL=index.js.map

dist/index.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@theme-ui/core'), require('@emotion/core'), require('@theme-ui/css')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '@theme-ui/core', '@emotion/core', '@theme-ui/css'], factory) :
-  (factory((global.colorModes = {}),global.react,global.core,global.core$1,global.css));
-}(this, (function (exports,React,core,core$1,css) {
-  React = React && React.hasOwnProperty('default') ? React['default'] : React;
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@theme-ui/core'), require('@theme-ui/css'), require('@emotion/core')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@theme-ui/core', '@theme-ui/css', '@emotion/core'], factory) :
+  (global = global || self, factory(global.colorModes = {}, global.react, global.core, global.css, global.core$1));
+}(this, (function (exports, React, core, css, core$1) {
+  React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
 
-  var toVarName = function (key) { return ("--theme-ui-" + key); };
+  function _extends() {
+    _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
 
-  var toVarValue = function (key, value) { return ("var(" + (toVarName(key)) + ", " + value + ")"); };
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
 
-  var join = function () {
-    var args = [], len = arguments.length;
-    while ( len-- ) args[ len ] = arguments[ len ];
+      return target;
+    };
 
-    return args.filter(Boolean).join('-');
+    return _extends.apply(this, arguments);
+  }
+
+  var toVarName = function toVarName(key) {
+    return "--theme-ui-" + key;
   };
 
+  var toVarValue = function toVarValue(key, value) {
+    return "var(" + toVarName(key) + ", " + value + ")";
+  };
+
+  var join = function join() {
+    return [].slice.call(arguments).filter(Boolean).join('-');
+  };
+
   var numberScales = {
@@ -30,5 +49,5 @@ fontWeights: true,
 
-  var toPixel = function (key, value) {
-    if (typeof value !== 'number') { return value; }
-    if (numberScales[key]) { return value; }
+  var toPixel = function toPixel(key, value) {
+    if (typeof value !== 'number') return value;
+    if (numberScales[key]) return value;
     return value + 'px';
@@ -38,3 +57,3 @@ }; // convert theme values to custom properties
 
-  var toCustomProperties = function (obj, parent, themeKey) {
+  var toCustomProperties = function toCustomProperties(obj, parent, themeKey) {
     var next = Array.isArray(obj) ? [] : {};
@@ -62,7 +81,7 @@
   };
-  var objectToVars = function (parent, obj) {
+  var objectToVars = function objectToVars(parent, obj) {
     var vars = {};
 
     for (var key in obj) {
-      if (key === 'modes') { continue; }
+      if (key === 'modes') continue;
       var name = join(parent, key);
@@ -72,4 +91,3 @@ var value = obj[key];
       if (value && typeof value === 'object') {
-        vars = Object.assign({}, vars,
-          objectToVars(name, value));
+        vars = _extends({}, vars, objectToVars(name, value));
       } else {
@@ -83,6 +101,8 @@ vars[toVarName(name)] = value;
 
-  var createColorStyles = function (theme) {
-    if ( theme === void 0 ) theme = {};
+  var createColorStyles = function createColorStyles(theme) {
+    if (theme === void 0) {
+      theme = {};
+    }
 
-    if (!theme.colors || theme.useBodyStyles === false) { return {}; }
+    if (!theme.colors || theme.useBodyStyles === false) return {};
 
@@ -98,4 +118,5 @@ if (theme.useCustomProperties === false || !theme.colors.modes) {
 
-    var colors = theme.rawColors || theme.colors;
-    var modes = colors.modes;
+    var _theme = theme,
+        colors = _theme.colors;
+    var modes = colors.modes || {};
     var styles = objectToVars('colors', colors);
@@ -107,5 +128,6 @@ Object.keys(modes).forEach(function (mode) {
     return css.css({
-      body: Object.assign({}, styles,
-        {color: 'text',
-        bg: 'background'})
+      body: _extends({}, styles, {
+        color: 'text',
+        bg: 'background'
+      })
     })(theme);
@@ -116,3 +138,3 @@ };
   var storage = {
-    get: function (init) {
+    get: function get(init) {
       try {
@@ -124,3 +146,3 @@ return window.localStorage.getItem(STORAGE_KEY) || init;
     },
-    set: function (value) {
+    set: function set(value) {
       try {
@@ -134,21 +156,28 @@ window.localStorage.setItem(STORAGE_KEY, value);
 
-  var getMediaQuery = function () {
+  var getMediaQuery = function getMediaQuery() {
     var darkQuery = '(prefers-color-scheme: dark)';
     var lightQuery = '(prefers-color-scheme: light)';
-    var darkMQL = window.matchMedia ? window.matchMedia(darkQuery) : {};
-    var lightMQL = window.matchMedia ? window.matchMedia(lightQuery) : {};
+    var darkMQL = window.matchMedia ? window.matchMedia(darkQuery) : {
+      media: false
+    };
+    var lightMQL = window.matchMedia ? window.matchMedia(lightQuery) : {
+      media: false
+    };
     var dark = darkMQL.media === darkQuery && darkMQL.matches;
-    if (dark) { return 'dark'; }
+    if (dark) return 'dark';
     var light = lightMQL.media === lightQuery && lightMQL.matches;
-    if (light) { return 'light'; }
+    if (light) return 'light';
     return 'default';
   };
 
-  var useColorModeState = function (theme) {
-    if ( theme === void 0 ) theme = {};
+  var useColorModeState = function useColorModeState(theme) {
+    if (theme === void 0) {
+      theme = {};
+    }
 
-    var ref = React.useState(theme.initialColorModeName || 'default');
-    var mode = ref[0];
-    var setMode = ref[1]; // initialize state
+    var _React$useState = React.useState(theme.initialColorModeName || 'default'),
+        mode = _React$useState[0],
+        setMode = _React$useState[1]; // initialize state
 
+
     React.useEffect(function () {
@@ -164,7 +193,7 @@ var stored = theme.useLocalStorage !== false && storage.get();
 
-      if (!stored || stored === mode) { return; }
+      if (!stored || stored === mode) return;
       setMode(stored);
     }, []);
     React.useEffect(function () {
-      if (!mode || theme.useLocalStorage === false) { return; }
+      if (!mode || theme.useLocalStorage === false) return;
       storage.set(mode);
@@ -174,3 +203,3 @@ }, [mode]);
     if (process.env.NODE_ENV !== 'production') {
-      if (theme.colors && theme.colors.modes && Object.keys(theme.colors.modes).indexOf(theme.initialColorModeName) > -1) {
+      if (theme.colors && theme.colors.modes && theme.initialColorModeName && Object.keys(theme.colors.modes).indexOf(theme.initialColorModeName) > -1) {
         console.warn('The `initialColorModeName` value should be a unique name' + ' and cannot reference a key in `theme.colors.modes`.');
@@ -183,6 +212,6 @@ }
 
-  var useColorMode = function () {
-    var ref = core.useThemeUI();
-    var colorMode = ref.colorMode;
-    var setColorMode = ref.setColorMode;
+  var useColorMode = function useColorMode() {
+    var _useThemeUI = core.useThemeUI(),
+        colorMode = _useThemeUI.colorMode,
+        setColorMode = _useThemeUI.setColorMode;
 
@@ -196,4 +225,4 @@ if (typeof setColorMode !== 'function') {
 
-  var applyColorMode = function (theme, mode) {
-    if (!mode) { return theme; }
+  var applyColorMode = function applyColorMode(theme, mode) {
+    if (!mode) return theme;
     var modes = css.get(theme, 'colors.modes', {});
@@ -205,16 +234,22 @@ return core.merge.all({}, theme, {
 
-  var BodyStyles = function () { return core.jsx(core$1.Global, {
-    styles: function (theme) { return createColorStyles(theme); }
-  }); };
+  var BodyStyles = function BodyStyles() {
+    return core.jsx(core$1.Global, {
+      styles: function styles(theme) {
+        return createColorStyles(theme);
+      }
+    });
+  };
 
-  var ColorModeProvider = function (ref) {
-    var children = ref.children;
+  var ColorModeProvider = function ColorModeProvider(_ref) {
+    var children = _ref.children;
+    var outer = core.useThemeUI();
 
-    var outer = core.useThemeUI();
-    var ref$1 = useColorModeState(outer.theme);
-    var colorMode = ref$1[0];
-    var setColorMode = ref$1[1];
+    var _useColorModeState = useColorModeState(outer.theme),
+        colorMode = _useColorModeState[0],
+        setColorMode = _useColorModeState[1];
+
     var theme = applyColorMode(outer.theme || {}, colorMode);
-    var emotionTheme = Object.assign({}, theme);
 
+    var emotionTheme = _extends({}, theme);
+
     if (theme.useCustomProperties !== false) {
@@ -224,6 +259,8 @@ emotionTheme.colors = toCustomProperties(emotionTheme.colors, 'colors');
 
-    var context = Object.assign({}, outer,
-      {theme: theme,
+    var context = _extends({}, outer, {
+      theme: theme,
       colorMode: colorMode,
-      setColorMode: setColorMode});
+      setColorMode: setColorMode
+    });
+
     return core.jsx(core$1.ThemeContext.Provider, {
@@ -238,14 +275,16 @@ value: emotionTheme
   var noflash = "(function() { try {\n  var mode = localStorage.getItem('theme-ui-color-mode');\n  if (!mode) return\n  document.body.classList.add('theme-ui-' + mode);\n} catch (e) {} })();";
-  var InitializeColorMode = function () { return core.jsx('script', {
-    key: 'theme-ui-no-flash',
-    dangerouslySetInnerHTML: {
-      __html: noflash
-    }
-  }); };
+  var InitializeColorMode = function InitializeColorMode() {
+    return core.jsx('script', {
+      key: 'theme-ui-no-flash',
+      dangerouslySetInnerHTML: {
+        __html: noflash
+      }
+    });
+  };
 
-  exports.useColorMode = useColorMode;
   exports.ColorModeProvider = ColorModeProvider;
   exports.InitializeColorMode = InitializeColorMode;
+  exports.useColorMode = useColorMode;
 
 })));
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "@theme-ui/color-modes",
-  "version": "0.4.0-rc.1",
+  "version": "0.4.0-rc.3",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "source": "src/index.tsx",
   "sideEffects": false,
   "scripts": {
     "prepare": "microbundle --no-compress",
-    "watch": "microbundle watch --no-compress"
+    "watch": "microbundle watch --no-compress",
+    "typecheck": "tsc --noEmit"
   },
@@ -19,4 +22,4 @@ "repository": "system-ui/theme-ui",
     "@emotion/core": "^10.0.0",
-    "@theme-ui/core": "^0.4.0-rc.1",
-    "@theme-ui/css": "^0.4.0-rc.1",
+    "@theme-ui/core": "^0.4.0-rc.3",
+    "@theme-ui/css": "^0.4.0-rc.3",
     "deepmerge": "^4.2.2"
@@ -30,3 +33,3 @@ },
   },
-  "gitHead": "66281f5681031ae26f80fbaef007e0b28ba07142"
+  "gitHead": "2c3fea31b3e8fd892968bef49bd6407d8999a848"
 }

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

115008

increased by35.05%

Number of package files

20

increased by42.86%

Lines of code

1785

increased by23.61%

Number of low supply chain risk alerts

5

decreased by-37.5%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@theme-ui/core@^0.4.0-rc.3

• Updated@theme-ui/css@^0.4.0-rc.3