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

Comparing version 0.6.0-alpha.1 to 0.6.0-alpha.2

dist/index.esm.js

@@ -28,4 +28,4 @@ import React from 'react';
 
-var toVarValue = function toVarValue(key, value) {
-  return "var(" + toVarName(key) + ", " + value + ")";
+var toVarValue = function toVarValue(key) {
+  return "var(" + toVarName(key) + ")";
 };
@@ -36,7 +36,2 @@
 };
-
-var numberScales = {
-  fontWeights: true,
-  lineHeights: true
-};
 var reservedKeys = {
@@ -48,11 +43,4 @@ useCustomProperties: true,
   useLocalStorage: true
-};
-
-var toPixel = function toPixel(key, value) {
-  if (typeof value !== 'number') return value;
-  if (numberScales[key]) return value;
-  return value + 'px';
 }; // convert theme values to custom properties
 
-
 var toCustomProperties = function toCustomProperties(obj, parent, themeKey) {
@@ -66,3 +54,3 @@ var next = Array.isArray(obj) ? [] : {};
     if (value && typeof value === 'object') {
-      next[key] = toCustomProperties(value, name, key);
+      next[key] = toCustomProperties(value, name);
       continue;
@@ -76,4 +64,3 @@ }
 
-    var val = toPixel(themeKey || key, value);
-    next[key] = toVarValue(name, val);
+    next[key] = toVarValue(name);
   }
@@ -134,3 +121,3 @@
   var colorToVarValue = function colorToVarValue(color) {
-    return toVarValue("colors-" + color, get(theme, "colors." + color));
+    return toVarValue("colors-" + color);
   };
@@ -137,0 +124,0 @@

dist/index.js

@@ -30,4 +30,4 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var toVarValue = function toVarValue(key, value) {
-  return "var(" + toVarName(key) + ", " + value + ")";
+var toVarValue = function toVarValue(key) {
+  return "var(" + toVarName(key) + ")";
 };
@@ -38,7 +38,2 @@
 };
-
-var numberScales = {
-  fontWeights: true,
-  lineHeights: true
-};
 var reservedKeys = {
@@ -50,11 +45,4 @@ useCustomProperties: true,
   useLocalStorage: true
-};
-
-var toPixel = function toPixel(key, value) {
-  if (typeof value !== 'number') return value;
-  if (numberScales[key]) return value;
-  return value + 'px';
 }; // convert theme values to custom properties
 
-
 var toCustomProperties = function toCustomProperties(obj, parent, themeKey) {
@@ -68,3 +56,3 @@ var next = Array.isArray(obj) ? [] : {};
     if (value && typeof value === 'object') {
-      next[key] = toCustomProperties(value, name, key);
+      next[key] = toCustomProperties(value, name);
       continue;
@@ -78,4 +66,3 @@ }
 
-    var val = toPixel(themeKey || key, value);
-    next[key] = toVarValue(name, val);
+    next[key] = toVarValue(name);
   }
@@ -136,3 +123,3 @@
   var colorToVarValue = function colorToVarValue(color) {
-    return toVarValue("colors-" + color, css.get(theme, "colors." + color));
+    return toVarValue("colors-" + color);
   };
@@ -139,0 +126,0 @@

dist/index.modern.js

@@ -26,10 +26,5 @@ import React from 'react';
 
-const toVarValue = (key, value) => `var(${toVarName(key)}, ${value})`;
+const toVarValue = key => `var(${toVarName(key)})`;
 
 const join = (...args) => args.filter(Boolean).join('-');
-
-const numberScales = {
-  fontWeights: true,
-  lineHeights: true
-};
 const reservedKeys = {
@@ -41,11 +36,4 @@ useCustomProperties: true,
   useLocalStorage: true
-};
-
-const toPixel = (key, value) => {
-  if (typeof value !== 'number') return value;
-  if (numberScales[key]) return value;
-  return value + 'px';
 }; // convert theme values to custom properties
 
-
 const toCustomProperties = (obj, parent, themeKey) => {
@@ -59,3 +47,3 @@ const next = Array.isArray(obj) ? [] : {};
     if (value && typeof value === 'object') {
-      next[key] = toCustomProperties(value, name, key);
+      next[key] = toCustomProperties(value, name);
       continue;
@@ -69,4 +57,3 @@ }
 
-    const val = toPixel(themeKey || key, value);
-    next[key] = toVarValue(name, val);
+    next[key] = toVarValue(name);
   }
@@ -123,3 +110,3 @@
 
-  const colorToVarValue = color => toVarValue(`colors-${color}`, get(theme, `colors.${color}`));
+  const colorToVarValue = color => toVarValue(`colors-${color}`);
 
@@ -126,0 +113,0 @@ return css({

dist/index.umd.js

@@ -30,4 +30,4 @@ (function (global, factory) {
 
-  var toVarValue = function toVarValue(key, value) {
-    return "var(" + toVarName(key) + ", " + value + ")";
+  var toVarValue = function toVarValue(key) {
+    return "var(" + toVarName(key) + ")";
   };
@@ -38,7 +38,2 @@
   };
-
-  var numberScales = {
-    fontWeights: true,
-    lineHeights: true
-  };
   var reservedKeys = {
@@ -50,11 +45,4 @@ useCustomProperties: true,
     useLocalStorage: true
-  };
-
-  var toPixel = function toPixel(key, value) {
-    if (typeof value !== 'number') return value;
-    if (numberScales[key]) return value;
-    return value + 'px';
   }; // convert theme values to custom properties
 
-
   var toCustomProperties = function toCustomProperties(obj, parent, themeKey) {
@@ -68,3 +56,3 @@ var next = Array.isArray(obj) ? [] : {};
       if (value && typeof value === 'object') {
-        next[key] = toCustomProperties(value, name, key);
+        next[key] = toCustomProperties(value, name);
         continue;
@@ -78,4 +66,3 @@ }
 
-      var val = toPixel(themeKey || key, value);
-      next[key] = toVarValue(name, val);
+      next[key] = toVarValue(name);
     }
@@ -136,3 +123,3 @@
     var colorToVarValue = function colorToVarValue(color) {
-      return toVarValue("colors-" + color, css.get(theme, "colors." + color));
+      return toVarValue("colors-" + color);
     };
@@ -139,0 +126,0 @@

package.json

 {
   "name": "@theme-ui/color-modes",
-  "version": "0.6.0-alpha.1",
+  "version": "0.6.0-alpha.2",
   "main": "dist/index.js",
@@ -32,3 +32,3 @@ "module": "dist/index.esm.js",
   },
-  "gitHead": "920aa42e068634fce0482873cd165ec7a6e48449"
+  "gitHead": "1caf75921214f10e297e29b3a9cfdab3d6b19b1d"
 }

src/custom-properties.ts

 import { css, get, Theme } from '@theme-ui/css'
 
 const toVarName = (key: string) => `--theme-ui-${key}`
-const toVarValue = (key: string, value: string | number) =>
-  `var(${toVarName(key)}, ${value})`
+const toVarValue = (key: string) => `var(${toVarName(key)})`
 
@@ -21,8 +20,2 @@ const join = (...args: (string | undefined)[]) => args.filter(Boolean).join('-')
 
-const toPixel = (key: string, value: string | number) => {
-  if (typeof value !== 'number') return value
-  if (numberScales[key as keyof typeof numberScales]) return value
-  return value + 'px'
-}
-
 // convert theme values to custom properties
@@ -47,4 +40,3 @@ export const toCustomProperties = (
     }
-    const val = toPixel(themeKey || key, value)
-    next[key] = toVarValue(name, val)
+    next[key] = toVarValue(name)
   }
@@ -88,3 +80,3 @@
 
-  Object.keys(modes).forEach(mode => {
+  Object.keys(modes).forEach((mode) => {
     const key = `&.theme-ui-${mode}`
@@ -101,3 +93,3 @@ styles[key] = objectToVars('colors', modes[mode])
   }
-  const colorToVarValue = (color: string) => toVarValue(`colors-${color}`, get(theme, `colors.${color}`));
+  const colorToVarValue = (color: string) => toVarValue(`colors-${color}`)
 
@@ -104,0 +96,0 @@ return css({

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

Worsened metrics

Total package byte prevSize

121635

decreased by-4.04%

Lines of code

1935

decreased by-2.37%

No dependency changes