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

Comparing version 0.6.0-alpha.6 to 0.6.0-alpha.7

dist/index.esm.js

 import React from 'react';
 import { useThemeUI, jsx, Context, merge } from '@theme-ui/core';
-import { css, get } from '@theme-ui/css';
+import { __internalGetUseRootStyles, css, get } from '@theme-ui/css';
 import { ThemeContext, Global } from '@emotion/react';
@@ -24,4 +24,8 @@
 
+var stripKeyDefault = function stripKeyDefault(key) {
+  return key.replace('-__default', '');
+};
+
 var toVarName = function toVarName(key) {
-  return "--theme-ui-" + key;
+  return "--theme-ui-" + stripKeyDefault(key);
 };
@@ -95,5 +99,7 @@
   return vars;
-}; // create body styles for color modes
+}; // create root styles for color modes
 
 var createColorStyles = function createColorStyles(theme) {
+  var _css2;
+
   if (theme === void 0) {
@@ -103,11 +109,13 @@ theme = {};
 
-  if (!theme.colors || theme.useBodyStyles === false) return {};
+  var use = __internalGetUseRootStyles(theme);
 
+  if (!theme.colors || use.rootStyles === false) return {};
+
   if (theme.useCustomProperties === false || !theme.colors.modes) {
-    return css({
-      body: {
-        color: 'text',
-        bg: 'background'
-      }
-    })(theme);
+    var _css;
+
+    return css((_css = {}, _css[use.scope] = {
+      color: 'text',
+      bg: 'background'
+    }, _css))(theme);
   }
@@ -135,8 +143,6 @@
 
-  return css({
-    body: _extends({}, styles, {
-      color: colorToVarValue('text'),
-      bg: colorToVarValue('background')
-    })
-  })(theme);
+  return css((_css2 = {}, _css2[use.scope] = _extends({}, styles, {
+    color: colorToVarValue('text'),
+    bg: colorToVarValue('background')
+  }), _css2))(theme);
 };
@@ -191,2 +197,3 @@
     var stored = theme.useLocalStorage !== false && storage.get();
+    document.documentElement.classList.remove('theme-ui-' + stored);
     document.body.classList.remove('theme-ui-' + stored);
@@ -274,3 +281,3 @@
 };
-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 noflash = "(function() { try {\n  var mode = localStorage.getItem('theme-ui-color-mode');\n  if (!mode) return\n  document.documentElement.classList.add('theme-ui-' + mode);\n  document.body.classList.add('theme-ui-' + mode);\n} catch (e) {} })();";
 var InitializeColorMode = function InitializeColorMode() {
@@ -277,0 +284,0 @@ return jsx('script', {

dist/index.js

@@ -28,4 +28,8 @@ var React = require('react');
 
+var stripKeyDefault = function stripKeyDefault(key) {
+  return key.replace('-__default', '');
+};
+
 var toVarName = function toVarName(key) {
-  return "--theme-ui-" + key;
+  return "--theme-ui-" + stripKeyDefault(key);
 };
@@ -99,5 +103,7 @@
   return vars;
-}; // create body styles for color modes
+}; // create root styles for color modes
 
 var createColorStyles = function createColorStyles(theme) {
+  var _css2;
+
   if (theme === void 0) {
@@ -107,11 +113,13 @@ theme = {};
 
-  if (!theme.colors || theme.useBodyStyles === false) return {};
+  var use = css.__internalGetUseRootStyles(theme);
 
+  if (!theme.colors || use.rootStyles === false) return {};
+
   if (theme.useCustomProperties === false || !theme.colors.modes) {
-    return css.css({
-      body: {
-        color: 'text',
-        bg: 'background'
-      }
-    })(theme);
+    var _css;
+
+    return css.css((_css = {}, _css[use.scope] = {
+      color: 'text',
+      bg: 'background'
+    }, _css))(theme);
   }
@@ -139,8 +147,6 @@
 
-  return css.css({
-    body: _extends({}, styles, {
-      color: colorToVarValue('text'),
-      bg: colorToVarValue('background')
-    })
-  })(theme);
+  return css.css((_css2 = {}, _css2[use.scope] = _extends({}, styles, {
+    color: colorToVarValue('text'),
+    bg: colorToVarValue('background')
+  }), _css2))(theme);
 };
@@ -195,2 +201,3 @@
     var stored = theme.useLocalStorage !== false && storage.get();
+    document.documentElement.classList.remove('theme-ui-' + stored);
     document.body.classList.remove('theme-ui-' + stored);
@@ -278,3 +285,3 @@
 };
-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 noflash = "(function() { try {\n  var mode = localStorage.getItem('theme-ui-color-mode');\n  if (!mode) return\n  document.documentElement.classList.add('theme-ui-' + mode);\n  document.body.classList.add('theme-ui-' + mode);\n} catch (e) {} })();";
 var InitializeColorMode = function InitializeColorMode() {
@@ -281,0 +288,0 @@ return core.jsx('script', {

dist/index.modern.js

 import React from 'react';
 import { useThemeUI, jsx, Context, merge } from '@theme-ui/core';
-import { css, get } from '@theme-ui/css';
+import { __internalGetUseRootStyles, css, get } from '@theme-ui/css';
 import { ThemeContext, Global } from '@emotion/react';
@@ -24,4 +24,6 @@
 
-const toVarName = key => `--theme-ui-${key}`;
+const stripKeyDefault = key => key.replace('-__default', '');
 
+const toVarName = key => `--theme-ui-${stripKeyDefault(key)}`;
+
 const toVarValue = (key, value) => `var(${toVarName(key)}, ${value})`;
@@ -89,10 +91,12 @@
   return vars;
-}; // create body styles for color modes
+}; // create root styles for color modes
 
 const createColorStyles = (theme = {}) => {
-  if (!theme.colors || theme.useBodyStyles === false) return {};
+  const use = __internalGetUseRootStyles(theme);
 
+  if (!theme.colors || use.rootStyles === false) return {};
+
   if (theme.useCustomProperties === false || !theme.colors.modes) {
     return css({
-      body: {
+      [use.scope]: {
         color: 'text',
@@ -124,3 +128,3 @@ bg: 'background'
   return css({
-    body: _extends({}, styles, {
+    [use.scope]: _extends({}, styles, {
       color: colorToVarValue('text'),
@@ -172,2 +176,3 @@ bg: colorToVarValue('background')
     const stored = theme.useLocalStorage !== false && storage.get();
+    document.documentElement.classList.remove('theme-ui-' + stored);
     document.body.classList.remove('theme-ui-' + stored);
@@ -255,2 +260,3 @@
   if (!mode) return
+  document.documentElement.classList.add('theme-ui-' + mode);
   document.body.classList.add('theme-ui-' + mode);
@@ -257,0 +263,0 @@ } catch (e) {} })();`;

dist/index.umd.js

@@ -28,4 +28,8 @@ (function (global, factory) {
 
+  var stripKeyDefault = function stripKeyDefault(key) {
+    return key.replace('-__default', '');
+  };
+
   var toVarName = function toVarName(key) {
-    return "--theme-ui-" + key;
+    return "--theme-ui-" + stripKeyDefault(key);
   };
@@ -99,5 +103,7 @@
     return vars;
-  }; // create body styles for color modes
+  }; // create root styles for color modes
 
   var createColorStyles = function createColorStyles(theme) {
+    var _css2;
+
     if (theme === void 0) {
@@ -107,11 +113,13 @@ theme = {};
 
-    if (!theme.colors || theme.useBodyStyles === false) return {};
+    var use = css.__internalGetUseRootStyles(theme);
 
+    if (!theme.colors || use.rootStyles === false) return {};
+
     if (theme.useCustomProperties === false || !theme.colors.modes) {
-      return css.css({
-        body: {
-          color: 'text',
-          bg: 'background'
-        }
-      })(theme);
+      var _css;
+
+      return css.css((_css = {}, _css[use.scope] = {
+        color: 'text',
+        bg: 'background'
+      }, _css))(theme);
     }
@@ -139,8 +147,6 @@
 
-    return css.css({
-      body: _extends({}, styles, {
-        color: colorToVarValue('text'),
-        bg: colorToVarValue('background')
-      })
-    })(theme);
+    return css.css((_css2 = {}, _css2[use.scope] = _extends({}, styles, {
+      color: colorToVarValue('text'),
+      bg: colorToVarValue('background')
+    }), _css2))(theme);
   };
@@ -195,2 +201,3 @@
       var stored = theme.useLocalStorage !== false && storage.get();
+      document.documentElement.classList.remove('theme-ui-' + stored);
       document.body.classList.remove('theme-ui-' + stored);
@@ -278,3 +285,3 @@
   };
-  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 noflash = "(function() { try {\n  var mode = localStorage.getItem('theme-ui-color-mode');\n  if (!mode) return\n  document.documentElement.classList.add('theme-ui-' + mode);\n  document.body.classList.add('theme-ui-' + mode);\n} catch (e) {} })();";
   var InitializeColorMode = function InitializeColorMode() {
@@ -281,0 +288,0 @@ return core.jsx('script', {

package.json

 {
   "name": "@theme-ui/color-modes",
-  "version": "0.6.0-alpha.6",
+  "version": "0.6.0-alpha.7",
   "main": "dist/index.js",
@@ -22,4 +22,4 @@ "module": "dist/index.esm.js",
     "@emotion/react": "^11.1.1",
-    "@theme-ui/core": "0.6.0-alpha.6",
-    "@theme-ui/css": "0.6.0-alpha.6",
+    "@theme-ui/core": "0.6.0-alpha.7",
+    "@theme-ui/css": "0.6.0-alpha.7",
     "deepmerge": "^4.2.2"
@@ -33,3 +33,3 @@ },
   },
-  "gitHead": "6d4b231dc59d56409804ad7f1b883239ad1e746b"
+  "gitHead": "3f031141f8509487fe77542e32a3240f277ce3b4"
 }

src/custom-properties.ts

@@ -1,4 +0,5 @@
-import { css, get, Theme } from '@theme-ui/css'
+import { css, get, Theme, __internalGetUseRootStyles } from '@theme-ui/css'
 
-const toVarName = (key: string) => `--theme-ui-${key}`
+const stripKeyDefault = (key: string) => key.replace('-__default', '')
+const toVarName = (key: string) => `--theme-ui-${stripKeyDefault(key)}`
 const toVarValue = (key: string, value: string | number) =>
@@ -71,8 +72,9 @@ `var(${toVarName(key)}, ${value})`
 
-// create body styles for color modes
+// create root styles for color modes
 export const createColorStyles = (theme: Theme = {}) => {
-  if (!theme.colors || theme.useBodyStyles === false) return {}
+  const use = __internalGetUseRootStyles(theme)
+  if (!theme.colors || use.rootStyles === false) return {}
   if (theme.useCustomProperties === false || !theme.colors.modes) {
     return css({
-      body: {
+      [use.scope]: {
         color: 'text',
@@ -103,3 +105,3 @@ bg: 'background',
   return css({
-    body: {
+    [use.scope]: {
       ...styles,
@@ -106,0 +108,0 @@ color: colorToVarValue('text'),

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

132239

increased by6.38%

Lines of code

2118

increased by7.19%

Dependency changes

• + Added@theme-ui/core@0.6.0-alpha.7(transitive)

• + Added@theme-ui/css@0.6.0-alpha.7(transitive)

• + Added@theme-ui/parse-props@0.6.0-alpha.7(transitive)

• - Removed@theme-ui/core@0.6.0-alpha.6(transitive)

• - Removed@theme-ui/css@0.6.0-alpha.6(transitive)

• - Removed@theme-ui/parse-props@0.6.0-alpha.6(transitive)

• Updated@theme-ui/core@0.6.0-alpha.7

• Updated@theme-ui/css@0.6.0-alpha.7