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

Comparing version 0.4.0-rc.13 to 0.4.0-rc.14

dist/index.esm.js

@@ -128,6 +128,10 @@ import React from 'react';
 
+  var colorToVarValue = function colorToVarValue(color) {
+    return toVarValue("colors-" + color, get(theme, "colors." + color));
+  };
+
   return css({
     body: _extends({}, styles, {
-      color: 'text',
-      bg: 'background'
+      color: colorToVarValue('text'),
+      bg: colorToVarValue('background')
     })
@@ -229,5 +233,6 @@ })(theme);
 
-var BodyStyles = function BodyStyles() {
+var BodyStyles = function BodyStyles(_ref) {
+  var theme = _ref.theme;
   return jsx(Global, {
-    styles: function styles(theme) {
+    styles: function styles() {
       return createColorStyles(theme);
@@ -238,4 +243,4 @@ }
 
-var ColorModeProvider = function ColorModeProvider(_ref) {
-  var children = _ref.children;
+var ColorModeProvider = function ColorModeProvider(_ref2) {
+  var children = _ref2.children;
   var outer = useThemeUI();
@@ -266,3 +271,4 @@
   }, jsx(BodyStyles, {
-    key: 'color-mode'
+    key: 'color-mode',
+    theme: theme
   }), children));
@@ -269,0 +275,0 @@ };

dist/index.js

@@ -130,6 +130,10 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+  var colorToVarValue = function colorToVarValue(color) {
+    return toVarValue("colors-" + color, css.get(theme, "colors." + color));
+  };
+
   return css.css({
     body: _extends({}, styles, {
-      color: 'text',
-      bg: 'background'
+      color: colorToVarValue('text'),
+      bg: colorToVarValue('background')
     })
@@ -231,5 +235,6 @@ })(theme);
 
-var BodyStyles = function BodyStyles() {
+var BodyStyles = function BodyStyles(_ref) {
+  var theme = _ref.theme;
   return core.jsx(core$1.Global, {
-    styles: function styles(theme) {
+    styles: function styles() {
       return createColorStyles(theme);
@@ -240,4 +245,4 @@ }
 
-var ColorModeProvider = function ColorModeProvider(_ref) {
-  var children = _ref.children;
+var ColorModeProvider = function ColorModeProvider(_ref2) {
+  var children = _ref2.children;
   var outer = core.useThemeUI();
@@ -268,3 +273,4 @@
   }, core.jsx(BodyStyles, {
-    key: 'color-mode'
+    key: 'color-mode',
+    theme: theme
   }), children));
@@ -271,0 +277,0 @@ };

dist/index.modern.js

@@ -119,6 +119,8 @@ import React from 'react';
 
+  const colorToVarValue = color => toVarValue(`colors-${color}`, get(theme, `colors.${color}`));
+
   return css({
     body: _extends({}, styles, {
-      color: 'text',
-      bg: 'background'
+      color: colorToVarValue('text'),
+      bg: colorToVarValue('background')
     })
@@ -214,4 +216,8 @@ })(theme);
 
-const BodyStyles = () => jsx(Global, {
-  styles: theme => createColorStyles(theme)
+const BodyStyles = ({
+  theme
+}) => jsx(Global, {
+  styles: () => {
+    return createColorStyles(theme);
+  }
 });
@@ -243,3 +249,4 @@
   }, jsx(BodyStyles, {
-    key: 'color-mode'
+    key: 'color-mode',
+    theme
   }), children));
@@ -246,0 +253,0 @@ };

dist/index.umd.js

@@ -130,6 +130,10 @@ (function (global, factory) {
 
+    var colorToVarValue = function colorToVarValue(color) {
+      return toVarValue("colors-" + color, css.get(theme, "colors." + color));
+    };
+
     return css.css({
       body: _extends({}, styles, {
-        color: 'text',
-        bg: 'background'
+        color: colorToVarValue('text'),
+        bg: colorToVarValue('background')
       })
@@ -231,5 +235,6 @@ })(theme);
 
-  var BodyStyles = function BodyStyles() {
+  var BodyStyles = function BodyStyles(_ref) {
+    var theme = _ref.theme;
     return core.jsx(core$1.Global, {
-      styles: function styles(theme) {
+      styles: function styles() {
         return createColorStyles(theme);
@@ -240,4 +245,4 @@ }
 
-  var ColorModeProvider = function ColorModeProvider(_ref) {
-    var children = _ref.children;
+  var ColorModeProvider = function ColorModeProvider(_ref2) {
+    var children = _ref2.children;
     var outer = core.useThemeUI();
@@ -268,3 +273,4 @@
     }, core.jsx(BodyStyles, {
-      key: 'color-mode'
+      key: 'color-mode',
+      theme: theme
     }), children));
@@ -271,0 +277,0 @@ };

package.json

 {
   "name": "@theme-ui/color-modes",
-  "version": "0.4.0-rc.13",
+  "version": "0.4.0-rc.14",
   "main": "dist/index.js",
@@ -32,3 +32,3 @@ "module": "dist/index.esm.js",
   },
-  "gitHead": "77155d2d7615ea50bec8e206625ad0b33d618de0"
+  "gitHead": "6cfddd24ba128a56263bb5297584c946978baaf0"
 }

src/custom-properties.ts

@@ -1,2 +0,2 @@
-import { css, Theme, ColorModesScale, ColorMode } from '@theme-ui/css'
+import { css, get, Theme } from '@theme-ui/css'
 
@@ -90,3 +90,2 @@ const toVarName = (key: string) => `--theme-ui-${key}`
   })
-
   if (printColorModeName) {
@@ -100,2 +99,3 @@ const mode =
   }
+  const colorToVarValue = (color: string) => toVarValue(`colors-${color}`, get(theme, `colors.${color}`));
 
@@ -105,6 +105,6 @@ return css({
       ...styles,
-      color: 'text',
-      bg: 'background',
+      color: colorToVarValue('text'),
+      bg: colorToVarValue('background'),
     },
   })(theme)
 }

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

126729

increased by2.2%

Lines of code

1982

increased by1.23%

No dependency changes