@xstyled/core - npm Package Compare versions

Comparing version 1.11.0 to 1.12.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [1.12.0](https://github.com/smooth-code/xstyled/compare/v1.11.0...v1.12.0) (2019-09-22)
+
+
+### Features
+
+* add color modes 🌚🌝 ([b81f028](https://github.com/smooth-code/xstyled/commit/b81f028))
+
+
+
+
+
 # [1.11.0](https://github.com/smooth-code/xstyled/compare/v1.10.1...v1.11.0) (2019-08-28)
@@ -8,0 +19,0 @@

dist/xstyled-core.cjs.js

@@ -5,3 +5,9 @@ 'use strict';
 
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
 var system = require('@xstyled/system');
+var _objectWithoutPropertiesLoose = _interopDefault(require('@babel/runtime/helpers/objectWithoutPropertiesLoose'));
+var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
+var React = _interopDefault(require('react'));
+var util = require('@xstyled/util');
 
@@ -172,4 +178,340 @@ function createBox() {
 
+/* eslint-disable no-underscore-dangle */
+
+var join = function join() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  return args.filter(Boolean).join('.');
+};
+
+var toVarName = function toVarName(key) {
+  return "--" + key.replace(/\./g, '-');
+};
+
+var toVarValue = function toVarValue(key, value) {
+  return "var(" + toVarName(key) + ", " + value + ")";
+};
+
+function toCustomPropertiesReferences(object, parent, theme) {
+  if (theme === void 0) {
+    theme = object;
+  }
+
+  var next = Array.isArray(object) ? [] : {};
+
+  for (var key in object) {
+    var value = object[key];
+    var name = join(parent, key);
+
+    if (util.obj(value)) {
+      next[key] = toCustomPropertiesReferences(value, name, theme);
+      continue;
+    }
+
+    if (util.string(value)) {
+      next[key] = toVarValue(name, value);
+      continue;
+    }
+
+    if (util.func(value)) {
+      next[key] = toVarValue(name, value({
+        theme: theme
+      }));
+      continue;
+    }
+  }
+
+  return next;
+}
+function toCustomPropertiesDeclarations(object, parent, theme, state) {
+  if (theme === void 0) {
+    theme = object;
+  }
+
+  if (state === void 0) {
+    state = {};
+  }
+
+  for (var key in object) {
+    var value = object[key];
+    var name = join(parent, key);
+
+    if (util.obj(value)) {
+      toCustomPropertiesDeclarations(value, name, theme, state);
+      continue;
+    }
+
+    if (util.string(value)) {
+      state[toVarName(name)] = value;
+      continue;
+    }
+
+    if (util.func(value)) {
+      state[toVarName(name)] = value({
+        theme: theme
+      });
+      continue;
+    }
+  }
+
+  return state;
+}
+
+var STORAGE_KEY = 'xstyled-color-mode';
+var storage = {
+  get: function get() {
+    return window.localStorage.getItem(STORAGE_KEY);
+  },
+  set: function set(value) {
+    return window.localStorage.setItem(STORAGE_KEY, value);
+  },
+  clear: function clear() {
+    return window.localStorage.removeItem(STORAGE_KEY);
+  }
+};
+var COLOR_MODE_CLASS_PREFIX = 'xstyled-color-mode-';
+
+var getColorModeClassName = function getColorModeClassName(mode) {
+  return "" + COLOR_MODE_CLASS_PREFIX + mode;
+};
+
+var XSTYLED_COLORS_PREFIX = 'xstyled-colors';
+var SYSTEM_MODES = ['light', 'dark'];
+
+function getModeTheme(theme, mode) {
+  return _extends({}, theme, {
+    colors: _extends({}, theme.colors, {}, theme.colors.modes[mode])
+  });
+}
+
+var getMediaQuery = function getMediaQuery(query) {
+  return "@media " + query;
+};
+
+var getColorModeQuery = function getColorModeQuery(mode) {
+  return "(prefers-color-scheme: " + mode + ")";
+};
+
+function detectSystemMode(mode) {
+  if (window.matchMedia === undefined) return null;
+  var query = getColorModeQuery(mode);
+  var mql = window.matchMedia(query);
+  return mql.matches && mql.media === query;
+}
+
+function hasColorModes(theme) {
+  return theme && theme.colors && theme.colors.modes;
+}
+
+function createColorStyles(theme, _temp) {
+  var _ref2;
+
+  var _ref = _temp === void 0 ? {} : _temp,
+      _ref$targetSelector = _ref.targetSelector,
+      targetSelector = _ref$targetSelector === void 0 ? 'body' : _ref$targetSelector;
+
+  if (!hasColorModes(theme)) return null;
+
+  var _theme$colors = theme.colors,
+      modes = _theme$colors.modes,
+      colors = _objectWithoutPropertiesLoose(_theme$colors, ["modes"]);
+
+  var styles = toCustomPropertiesDeclarations(colors, XSTYLED_COLORS_PREFIX, theme);
+
+  function getModePropertiesDeclarations(mode) {
+    var modeTheme = getModeTheme(theme, mode);
+
+    var _modeTheme$colors = modeTheme.colors,
+        modes = _modeTheme$colors.modes,
+        colors = _objectWithoutPropertiesLoose(_modeTheme$colors, ["modes"]);
+
+    return toCustomPropertiesDeclarations(_extends({}, colors, {}, modes[mode]), XSTYLED_COLORS_PREFIX, modeTheme);
+  }
+
+  if (theme.useColorSchemeMediaQuery !== false) {
+    SYSTEM_MODES.forEach(function (mode) {
+      if (modes[mode]) {
+        var mediaQuery = getMediaQuery(getColorModeQuery(mode));
+        styles[mediaQuery] = getModePropertiesDeclarations(mode);
+      }
+    });
+  }
+
+  Object.keys(modes).forEach(function (mode) {
+    var key = "&." + getColorModeClassName(mode);
+    styles[key] = getModePropertiesDeclarations(mode);
+  });
+  return _ref2 = {}, _ref2[targetSelector] = styles, _ref2;
+}
+
+function hasCustomPropertiesEnabled(theme) {
+  return theme && (theme.useCustomProperties === undefined || theme.useCustomProperties);
+}
+
+function hasMediaQueryEnabled(theme) {
+  return theme && (theme.useColorSchemeMediaQuery === undefined || theme.useColorSchemeMediaQuery);
+}
+
+function getInitialColorModeName(theme) {
+  return theme.initialColorModeName || 'default';
+}
+
+function getDefaultColorModeName(theme) {
+  return theme.defaultColorModeName || getInitialColorModeName(theme);
+}
+
+function getInitialMode(theme) {
+  var stored = storage.get();
+
+  if (stored) {
+    return stored;
+  }
+
+  if (hasMediaQueryEnabled(theme) && theme.colors && theme.colors.modes) {
+    var systemMode = SYSTEM_MODES.find(function (mode) {
+      if (!theme.colors.modes[mode]) return null;
+      return detectSystemMode(mode);
+    });
+    return systemMode || getDefaultColorModeName(theme);
+  }
+
+  return getDefaultColorModeName(theme);
+}
+
+function useColorModeState(theme, _temp2) {
+  var _ref3 = _temp2 === void 0 ? {} : _temp2,
+      _ref3$target = _ref3.target,
+      target = _ref3$target === void 0 ? document.body : _ref3$target;
+
+  var _React$useState = React.useState(function () {
+    return getInitialMode(theme);
+  }),
+      mode = _React$useState[0],
+      setMode = _React$useState[1]; // Add mode className
+
+
+  var customPropertiesEnabled = hasCustomPropertiesEnabled(theme);
+  var initialColorMode = getInitialColorModeName(theme);
+  React.useLayoutEffect(function () {
+    if (!customPropertiesEnabled) return undefined;
+    if (mode === initialColorMode) return undefined;
+    var className = getColorModeClassName(mode);
+    target.classList.add(className);
+    return function () {
+      target.classList.remove(className);
+    };
+  }, [customPropertiesEnabled, target, mode, initialColorMode]); // Store mode preference
+
+  var defaultColorMode = getDefaultColorModeName(theme);
+  React.useEffect(function () {
+    if (mode === defaultColorMode) {
+      storage.clear();
+      return;
+    }
+
+    storage.set(mode);
+  }, [defaultColorMode, mode]);
+  return [mode, setMode];
+}
+function useColorModeTheme(theme, mode) {
+  var customPropertiesTheme = React.useMemo(function () {
+    if (!hasCustomPropertiesEnabled(theme)) return null;
+    if (!hasColorModes(theme)) return theme;
+
+    var _theme$colors2 = theme.colors,
+        modes = _theme$colors2.modes,
+        colors = _objectWithoutPropertiesLoose(_theme$colors2, ["modes"]);
+
+    return _extends({}, theme, {
+      colors: _extends({}, toCustomPropertiesReferences(colors, XSTYLED_COLORS_PREFIX, theme), {
+        modes: modes
+      }),
+      __rawColors: theme.colors
+    });
+  }, [theme]);
+  var swapModeTheme = React.useMemo(function () {
+    if (hasCustomPropertiesEnabled(theme)) return null;
+    if (!hasColorModes(theme)) return theme;
+
+    if (mode === getInitialColorModeName(theme)) {
+      return theme;
+    }
+
+    return _extends({}, theme, {
+      colors: _extends({}, theme.colors, {}, theme.colors.modes[mode]),
+      __rawColors: theme.colors
+    });
+  }, [theme, mode]);
+  return customPropertiesTheme || swapModeTheme;
+}
+var ColorModeContext =
+/*#__PURE__*/
+React.createContext();
+function useColorMode() {
+  var colorModeState = React.useContext(ColorModeContext);
+
+  if (!colorModeState) {
+    throw new Error("[useColorMode] requires the ColorModeProvider component");
+  }
+
+  return colorModeState;
+}
+function createColorModeProvider(_ref4) {
+  var ThemeContext = _ref4.ThemeContext,
+      ThemeProvider = _ref4.ThemeProvider,
+      ColorModeStyle = _ref4.ColorModeStyle;
+
+  function ColorModeProvider(_ref5) {
+    var children = _ref5.children,
+        target = _ref5.target,
+        targetSelector = _ref5.targetSelector;
+    var theme = React.useContext(ThemeContext);
+    var colorState = useColorModeState(theme, {
+      target: target
+    });
+    var colorModeTheme = useColorModeTheme(theme, colorState[0]);
+    return React.createElement(React.Fragment, null, React.createElement(ColorModeStyle, {
+      targetSelector: targetSelector
+    }), React.createElement(ThemeProvider, {
+      theme: colorModeTheme
+    }, React.createElement(ColorModeContext.Provider, {
+      value: colorState
+    }, children)));
+  }
+
+  return ColorModeProvider;
+}
+
+function getInitScript(_temp3) {
+  var _ref6 = _temp3 === void 0 ? {} : _temp3,
+      _ref6$target = _ref6.target,
+      target = _ref6$target === void 0 ? 'document.body' : _ref6$target;
+
+  return "(function() { try {\n    var mode = localStorage.getItem('" + STORAGE_KEY + "');\n    if (mode) " + target + ".classList.add('" + COLOR_MODE_CLASS_PREFIX + "' + mode);\n  } catch (e) {} })();";
+}
+
+function getColorModeInitScriptElement(options) {
+  return React.createElement("script", {
+    key: "xstyled-color-mode-init",
+    dangerouslySetInnerHTML: {
+      __html: getInitScript(options)
+    }
+  });
+}
+function getColorModeInitScriptTag(options) {
+  return "<script>" + getInitScript(options) + "</script>";
+}
+
+exports.ColorModeContext = ColorModeContext;
 exports.createBox = createBox;
+exports.createColorModeProvider = createColorModeProvider;
+exports.createColorStyles = createColorStyles;
+exports.getColorModeInitScriptElement = getColorModeInitScriptElement;
+exports.getColorModeInitScriptTag = getColorModeInitScriptTag;
 exports.propGetters = propGetters;
 exports.transform = transform;
+exports.useColorMode = useColorMode;
+exports.useColorModeState = useColorModeState;
+exports.useColorModeTheme = useColorModeTheme;

dist/xstyled-core.es.js

 import { system, getColor, getBorderStyle, getShadow, getFont, getFontSize, getLineHeight, getFontWeight, getLetterSpacing, getTransition, getSpace, getBorder, getBorderWidth, getSize, getRadius, getZIndex } from '@xstyled/system';
+import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
+import _extends from '@babel/runtime/helpers/esm/extends';
+import React from 'react';
+import { obj, string, func } from '@xstyled/util';
 
@@ -167,2 +171,330 @@ function createBox() {
 
-export { createBox, propGetters, transform };
+/* eslint-disable no-underscore-dangle */
+
+var join = function join() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  return args.filter(Boolean).join('.');
+};
+
+var toVarName = function toVarName(key) {
+  return "--" + key.replace(/\./g, '-');
+};
+
+var toVarValue = function toVarValue(key, value) {
+  return "var(" + toVarName(key) + ", " + value + ")";
+};
+
+function toCustomPropertiesReferences(object, parent, theme) {
+  if (theme === void 0) {
+    theme = object;
+  }
+
+  var next = Array.isArray(object) ? [] : {};
+
+  for (var key in object) {
+    var value = object[key];
+    var name = join(parent, key);
+
+    if (obj(value)) {
+      next[key] = toCustomPropertiesReferences(value, name, theme);
+      continue;
+    }
+
+    if (string(value)) {
+      next[key] = toVarValue(name, value);
+      continue;
+    }
+
+    if (func(value)) {
+      next[key] = toVarValue(name, value({
+        theme: theme
+      }));
+      continue;
+    }
+  }
+
+  return next;
+}
+function toCustomPropertiesDeclarations(object, parent, theme, state) {
+  if (theme === void 0) {
+    theme = object;
+  }
+
+  if (state === void 0) {
+    state = {};
+  }
+
+  for (var key in object) {
+    var value = object[key];
+    var name = join(parent, key);
+
+    if (obj(value)) {
+      toCustomPropertiesDeclarations(value, name, theme, state);
+      continue;
+    }
+
+    if (string(value)) {
+      state[toVarName(name)] = value;
+      continue;
+    }
+
+    if (func(value)) {
+      state[toVarName(name)] = value({
+        theme: theme
+      });
+      continue;
+    }
+  }
+
+  return state;
+}
+
+var STORAGE_KEY = 'xstyled-color-mode';
+var storage = {
+  get: function get() {
+    return window.localStorage.getItem(STORAGE_KEY);
+  },
+  set: function set(value) {
+    return window.localStorage.setItem(STORAGE_KEY, value);
+  },
+  clear: function clear() {
+    return window.localStorage.removeItem(STORAGE_KEY);
+  }
+};
+var COLOR_MODE_CLASS_PREFIX = 'xstyled-color-mode-';
+
+var getColorModeClassName = function getColorModeClassName(mode) {
+  return "" + COLOR_MODE_CLASS_PREFIX + mode;
+};
+
+var XSTYLED_COLORS_PREFIX = 'xstyled-colors';
+var SYSTEM_MODES = ['light', 'dark'];
+
+function getModeTheme(theme, mode) {
+  return _extends({}, theme, {
+    colors: _extends({}, theme.colors, {}, theme.colors.modes[mode])
+  });
+}
+
+var getMediaQuery = function getMediaQuery(query) {
+  return "@media " + query;
+};
+
+var getColorModeQuery = function getColorModeQuery(mode) {
+  return "(prefers-color-scheme: " + mode + ")";
+};
+
+function detectSystemMode(mode) {
+  if (window.matchMedia === undefined) return null;
+  var query = getColorModeQuery(mode);
+  var mql = window.matchMedia(query);
+  return mql.matches && mql.media === query;
+}
+
+function hasColorModes(theme) {
+  return theme && theme.colors && theme.colors.modes;
+}
+
+function createColorStyles(theme, _temp) {
+  var _ref2;
+
+  var _ref = _temp === void 0 ? {} : _temp,
+      _ref$targetSelector = _ref.targetSelector,
+      targetSelector = _ref$targetSelector === void 0 ? 'body' : _ref$targetSelector;
+
+  if (!hasColorModes(theme)) return null;
+
+  var _theme$colors = theme.colors,
+      modes = _theme$colors.modes,
+      colors = _objectWithoutPropertiesLoose(_theme$colors, ["modes"]);
+
+  var styles = toCustomPropertiesDeclarations(colors, XSTYLED_COLORS_PREFIX, theme);
+
+  function getModePropertiesDeclarations(mode) {
+    var modeTheme = getModeTheme(theme, mode);
+
+    var _modeTheme$colors = modeTheme.colors,
+        modes = _modeTheme$colors.modes,
+        colors = _objectWithoutPropertiesLoose(_modeTheme$colors, ["modes"]);
+
+    return toCustomPropertiesDeclarations(_extends({}, colors, {}, modes[mode]), XSTYLED_COLORS_PREFIX, modeTheme);
+  }
+
+  if (theme.useColorSchemeMediaQuery !== false) {
+    SYSTEM_MODES.forEach(function (mode) {
+      if (modes[mode]) {
+        var mediaQuery = getMediaQuery(getColorModeQuery(mode));
+        styles[mediaQuery] = getModePropertiesDeclarations(mode);
+      }
+    });
+  }
+
+  Object.keys(modes).forEach(function (mode) {
+    var key = "&." + getColorModeClassName(mode);
+    styles[key] = getModePropertiesDeclarations(mode);
+  });
+  return _ref2 = {}, _ref2[targetSelector] = styles, _ref2;
+}
+
+function hasCustomPropertiesEnabled(theme) {
+  return theme && (theme.useCustomProperties === undefined || theme.useCustomProperties);
+}
+
+function hasMediaQueryEnabled(theme) {
+  return theme && (theme.useColorSchemeMediaQuery === undefined || theme.useColorSchemeMediaQuery);
+}
+
+function getInitialColorModeName(theme) {
+  return theme.initialColorModeName || 'default';
+}
+
+function getDefaultColorModeName(theme) {
+  return theme.defaultColorModeName || getInitialColorModeName(theme);
+}
+
+function getInitialMode(theme) {
+  var stored = storage.get();
+
+  if (stored) {
+    return stored;
+  }
+
+  if (hasMediaQueryEnabled(theme) && theme.colors && theme.colors.modes) {
+    var systemMode = SYSTEM_MODES.find(function (mode) {
+      if (!theme.colors.modes[mode]) return null;
+      return detectSystemMode(mode);
+    });
+    return systemMode || getDefaultColorModeName(theme);
+  }
+
+  return getDefaultColorModeName(theme);
+}
+
+function useColorModeState(theme, _temp2) {
+  var _ref3 = _temp2 === void 0 ? {} : _temp2,
+      _ref3$target = _ref3.target,
+      target = _ref3$target === void 0 ? document.body : _ref3$target;
+
+  var _React$useState = React.useState(function () {
+    return getInitialMode(theme);
+  }),
+      mode = _React$useState[0],
+      setMode = _React$useState[1]; // Add mode className
+
+
+  var customPropertiesEnabled = hasCustomPropertiesEnabled(theme);
+  var initialColorMode = getInitialColorModeName(theme);
+  React.useLayoutEffect(function () {
+    if (!customPropertiesEnabled) return undefined;
+    if (mode === initialColorMode) return undefined;
+    var className = getColorModeClassName(mode);
+    target.classList.add(className);
+    return function () {
+      target.classList.remove(className);
+    };
+  }, [customPropertiesEnabled, target, mode, initialColorMode]); // Store mode preference
+
+  var defaultColorMode = getDefaultColorModeName(theme);
+  React.useEffect(function () {
+    if (mode === defaultColorMode) {
+      storage.clear();
+      return;
+    }
+
+    storage.set(mode);
+  }, [defaultColorMode, mode]);
+  return [mode, setMode];
+}
+function useColorModeTheme(theme, mode) {
+  var customPropertiesTheme = React.useMemo(function () {
+    if (!hasCustomPropertiesEnabled(theme)) return null;
+    if (!hasColorModes(theme)) return theme;
+
+    var _theme$colors2 = theme.colors,
+        modes = _theme$colors2.modes,
+        colors = _objectWithoutPropertiesLoose(_theme$colors2, ["modes"]);
+
+    return _extends({}, theme, {
+      colors: _extends({}, toCustomPropertiesReferences(colors, XSTYLED_COLORS_PREFIX, theme), {
+        modes: modes
+      }),
+      __rawColors: theme.colors
+    });
+  }, [theme]);
+  var swapModeTheme = React.useMemo(function () {
+    if (hasCustomPropertiesEnabled(theme)) return null;
+    if (!hasColorModes(theme)) return theme;
+
+    if (mode === getInitialColorModeName(theme)) {
+      return theme;
+    }
+
+    return _extends({}, theme, {
+      colors: _extends({}, theme.colors, {}, theme.colors.modes[mode]),
+      __rawColors: theme.colors
+    });
+  }, [theme, mode]);
+  return customPropertiesTheme || swapModeTheme;
+}
+var ColorModeContext =
+/*#__PURE__*/
+React.createContext();
+function useColorMode() {
+  var colorModeState = React.useContext(ColorModeContext);
+
+  if (!colorModeState) {
+    throw new Error("[useColorMode] requires the ColorModeProvider component");
+  }
+
+  return colorModeState;
+}
+function createColorModeProvider(_ref4) {
+  var ThemeContext = _ref4.ThemeContext,
+      ThemeProvider = _ref4.ThemeProvider,
+      ColorModeStyle = _ref4.ColorModeStyle;
+
+  function ColorModeProvider(_ref5) {
+    var children = _ref5.children,
+        target = _ref5.target,
+        targetSelector = _ref5.targetSelector;
+    var theme = React.useContext(ThemeContext);
+    var colorState = useColorModeState(theme, {
+      target: target
+    });
+    var colorModeTheme = useColorModeTheme(theme, colorState[0]);
+    return React.createElement(React.Fragment, null, React.createElement(ColorModeStyle, {
+      targetSelector: targetSelector
+    }), React.createElement(ThemeProvider, {
+      theme: colorModeTheme
+    }, React.createElement(ColorModeContext.Provider, {
+      value: colorState
+    }, children)));
+  }
+
+  return ColorModeProvider;
+}
+
+function getInitScript(_temp3) {
+  var _ref6 = _temp3 === void 0 ? {} : _temp3,
+      _ref6$target = _ref6.target,
+      target = _ref6$target === void 0 ? 'document.body' : _ref6$target;
+
+  return "(function() { try {\n    var mode = localStorage.getItem('" + STORAGE_KEY + "');\n    if (mode) " + target + ".classList.add('" + COLOR_MODE_CLASS_PREFIX + "' + mode);\n  } catch (e) {} })();";
+}
+
+function getColorModeInitScriptElement(options) {
+  return React.createElement("script", {
+    key: "xstyled-color-mode-init",
+    dangerouslySetInnerHTML: {
+      __html: getInitScript(options)
+    }
+  });
+}
+function getColorModeInitScriptTag(options) {
+  return "<script>" + getInitScript(options) + "</script>";
+}
+
+export { ColorModeContext, createBox, createColorModeProvider, createColorStyles, getColorModeInitScriptElement, getColorModeInitScriptTag, propGetters, transform, useColorMode, useColorModeState, useColorModeTheme };

package.json

 {
   "name": "@xstyled/core",
   "description": "xstyled core utilities",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "sideEffects": false,
@@ -22,3 +22,3 @@ "main": "dist/xstyled-core.cjs.js",
   },
-  "gitHead": "1f63f4f2571c02c0378e6f0b495c456feea249e7"
+  "gitHead": "64f91b548274090297b56d6de288bce0ea821181"
 }

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

34466

increased by135.79%

Lines of code

867

increased by174.37%

No dependency changes