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

Comparing version 0.6.0-canary.1544.5359f8a1e408a4dfeb74a9ae39688270286e534a.0 to 0.6.0-canary.1544.8486957e8f9c294d49d8e43485143e2186217b1e.0

dist/index.d.ts

 import React, { Dispatch, SetStateAction } from 'react';
 declare module '@theme-ui/core' {
-    interface ContextValue {
+    interface ThemeUIContextValue {
         colorMode?: string;
@@ -5,0 +5,0 @@ setColorMode?: (colorMode: SetStateAction<string>) => void;

dist/index.esm.js

@@ -24,12 +24,8 @@ import React from 'react';
 
-var stripKeyDefault = function stripKeyDefault(key) {
-  return key.replace('-__default', '');
-};
-
 var toVarName = function toVarName(key) {
-  return "--theme-ui-" + stripKeyDefault(key);
+  return "--theme-ui-" + key.replace('-__default', '');
 };
 
-var toVarValue = function toVarValue(key, value) {
-  return "var(" + toVarName(key) + ", " + value + ")";
+var toVarValue = function toVarValue(key) {
+  return "var(" + toVarName(key) + ")";
 };
@@ -40,7 +36,2 @@
 };
-
-var numberScales = {
-  fontWeights: true,
-  lineHeights: true
-};
 var reservedKeys = {
@@ -54,9 +45,3 @@ useCustomProperties: 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) {
@@ -70,3 +55,3 @@ var next = Array.isArray(obj) ? [] : {};
     if (value && typeof value === 'object') {
-      next[key] = toCustomProperties(value, name, key);
+      next[key] = toCustomProperties(value, name);
       continue;
@@ -79,5 +64,3 @@ }
     }
-
-    var val = toPixel(themeKey || key, value);
-    next[key] = toVarValue(name, val);
+    next[key] = toVarValue(name);
   }
@@ -116,3 +99,3 @@
 
-  if (theme.useCustomProperties === false || !theme.colors.modes) {
+  if (theme.useCustomProperties === false) {
     var _css;
@@ -143,3 +126,3 @@
   var colorToVarValue = function colorToVarValue(color) {
-    return toVarValue("colors-" + color, get(theme, "colors." + color));
+    return toVarValue("colors-" + color);
   };
@@ -266,2 +249,3 @@
     emotionTheme.colors = toCustomProperties(emotionTheme.colors, 'colors');
+    emotionTheme.rawColors = theme.colors;
   }
@@ -268,0 +252,0 @@

dist/index.js

@@ -28,12 +28,8 @@ var React = require('react');
 
-var stripKeyDefault = function stripKeyDefault(key) {
-  return key.replace('-__default', '');
-};
-
 var toVarName = function toVarName(key) {
-  return "--theme-ui-" + stripKeyDefault(key);
+  return "--theme-ui-" + key.replace('-__default', '');
 };
 
-var toVarValue = function toVarValue(key, value) {
-  return "var(" + toVarName(key) + ", " + value + ")";
+var toVarValue = function toVarValue(key) {
+  return "var(" + toVarName(key) + ")";
 };
@@ -44,7 +40,2 @@
 };
-
-var numberScales = {
-  fontWeights: true,
-  lineHeights: true
-};
 var reservedKeys = {
@@ -58,9 +49,3 @@ useCustomProperties: 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) {
@@ -74,3 +59,3 @@ var next = Array.isArray(obj) ? [] : {};
     if (value && typeof value === 'object') {
-      next[key] = toCustomProperties(value, name, key);
+      next[key] = toCustomProperties(value, name);
       continue;
@@ -83,5 +68,3 @@ }
     }
-
-    var val = toPixel(themeKey || key, value);
-    next[key] = toVarValue(name, val);
+    next[key] = toVarValue(name);
   }
@@ -120,3 +103,3 @@
 
-  if (theme.useCustomProperties === false || !theme.colors.modes) {
+  if (theme.useCustomProperties === false) {
     var _css;
@@ -147,3 +130,3 @@
   var colorToVarValue = function colorToVarValue(color) {
-    return toVarValue("colors-" + color, css.get(theme, "colors." + color));
+    return toVarValue("colors-" + color);
   };
@@ -270,2 +253,3 @@
     emotionTheme.colors = toCustomProperties(emotionTheme.colors, 'colors');
+    emotionTheme.rawColors = theme.colors;
   }
@@ -272,0 +256,0 @@

dist/index.modern.js

@@ -24,14 +24,7 @@ import React from 'react';
 
-const stripKeyDefault = key => key.replace('-__default', '');
+const toVarName = key => `--theme-ui-${key.replace('-__default', '')}`;
 
-const toVarName = key => `--theme-ui-${stripKeyDefault(key)}`;
+const toVarValue = key => `var(${toVarName(key)})`;
 
-const toVarValue = (key, value) => `var(${toVarName(key)}, ${value})`;
-
 const join = (...args) => args.filter(Boolean).join('-');
-
-const numberScales = {
-  fontWeights: true,
-  lineHeights: true
-};
 const reservedKeys = {
@@ -45,9 +38,3 @@ useCustomProperties: 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) => {
@@ -61,3 +48,3 @@ const next = Array.isArray(obj) ? [] : {};
     if (value && typeof value === 'object') {
-      next[key] = toCustomProperties(value, name, key);
+      next[key] = toCustomProperties(value, name);
       continue;
@@ -70,5 +57,3 @@ }
     }
-
-    const val = toPixel(themeKey || key, value);
-    next[key] = toVarValue(name, val);
+    next[key] = toVarValue(name);
   }
@@ -101,3 +86,3 @@
 
-  if (theme.useCustomProperties === false || !theme.colors.modes) {
+  if (theme.useCustomProperties === false) {
     return css({
@@ -128,3 +113,3 @@ [use.scope]: {
 
-  const colorToVarValue = color => toVarValue(`colors-${color}`, get(theme, `colors.${color}`));
+  const colorToVarValue = color => toVarValue(`colors-${color}`);
 
@@ -242,2 +227,3 @@ return css({
     emotionTheme.colors = toCustomProperties(emotionTheme.colors, 'colors');
+    emotionTheme.rawColors = theme.colors;
   }
@@ -244,0 +230,0 @@

dist/index.umd.js

@@ -28,12 +28,8 @@ (function (global, factory) {
 
-  var stripKeyDefault = function stripKeyDefault(key) {
-    return key.replace('-__default', '');
-  };
-
   var toVarName = function toVarName(key) {
-    return "--theme-ui-" + stripKeyDefault(key);
+    return "--theme-ui-" + key.replace('-__default', '');
   };
 
-  var toVarValue = function toVarValue(key, value) {
-    return "var(" + toVarName(key) + ", " + value + ")";
+  var toVarValue = function toVarValue(key) {
+    return "var(" + toVarName(key) + ")";
   };
@@ -44,7 +40,2 @@
   };
-
-  var numberScales = {
-    fontWeights: true,
-    lineHeights: true
-  };
   var reservedKeys = {
@@ -58,9 +49,3 @@ useCustomProperties: 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) {
@@ -74,3 +59,3 @@ var next = Array.isArray(obj) ? [] : {};
       if (value && typeof value === 'object') {
-        next[key] = toCustomProperties(value, name, key);
+        next[key] = toCustomProperties(value, name);
         continue;
@@ -83,5 +68,3 @@ }
       }
-
-      var val = toPixel(themeKey || key, value);
-      next[key] = toVarValue(name, val);
+      next[key] = toVarValue(name);
     }
@@ -120,3 +103,3 @@
 
-    if (theme.useCustomProperties === false || !theme.colors.modes) {
+    if (theme.useCustomProperties === false) {
       var _css;
@@ -147,3 +130,3 @@
     var colorToVarValue = function colorToVarValue(color) {
-      return toVarValue("colors-" + color, css.get(theme, "colors." + color));
+      return toVarValue("colors-" + color);
     };
@@ -270,2 +253,3 @@
       emotionTheme.colors = toCustomProperties(emotionTheme.colors, 'colors');
+      emotionTheme.rawColors = theme.colors;
     }
@@ -272,0 +256,0 @@

package.json

 {
   "name": "@theme-ui/color-modes",
-  "version": "0.6.0-canary.1544.5359f8a1e408a4dfeb74a9ae39688270286e534a.0",
+  "version": "0.6.0-canary.1544.8486957e8f9c294d49d8e43485143e2186217b1e.0",
   "main": "dist/index.js",
@@ -22,4 +22,4 @@ "module": "dist/index.esm.js",
     "@emotion/react": "^11.1.1",
-    "@theme-ui/core": "0.6.0-canary.1544.5359f8a1e408a4dfeb74a9ae39688270286e534a.0",
-    "@theme-ui/css": "0.6.0-canary.1544.5359f8a1e408a4dfeb74a9ae39688270286e534a.0",
+    "@theme-ui/core": "0.6.0-canary.1544.8486957e8f9c294d49d8e43485143e2186217b1e.0",
+    "@theme-ui/css": "0.6.0-canary.1544.8486957e8f9c294d49d8e43485143e2186217b1e.0",
     "deepmerge": "^4.2.2"
@@ -33,3 +33,3 @@ },
   },
-  "gitHead": "5359f8a1e408a4dfeb74a9ae39688270286e534a"
+  "gitHead": "8486957e8f9c294d49d8e43485143e2186217b1e"
 }

src/custom-properties.ts

 import { css, get, Theme, __internalGetUseRootStyles } from '@theme-ui/css'
 
-const stripKeyDefault = (key: string) => key.replace('-__default', '')
-const toVarName = (key: string) => `--theme-ui-${stripKeyDefault(key)}`
-const toVarValue = (key: string, value: string | number) =>
-  `var(${toVarName(key)}, ${value})`
+const toVarName = (key: string) => `--theme-ui-${key.replace('-__default', '')}`
+const toVarValue = (key: string) => `var(${toVarName(key)})`
 
@@ -48,3 +46,3 @@ const join = (...args: (string | undefined)[]) => args.filter(Boolean).join('-')
     const val = toPixel(themeKey || key, value)
-    next[key] = toVarValue(name, val)
+    next[key] = toVarValue(name)
   }
@@ -77,3 +75,3 @@
   if (!theme.colors || use.rootStyles === false) return {}
-  if (theme.useCustomProperties === false || !theme.colors.modes) {
+  if (theme.useCustomProperties === false) {
     return css({
@@ -102,4 +100,3 @@ [use.scope]: {
   }
-  const colorToVarValue = (color: string) =>
-    toVarValue(`colors-${color}`, get(theme, `colors.${color}`))
+  const colorToVarValue = (color: string) => toVarValue(`colors-${color}`)
 
@@ -106,0 +103,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

Improved metrics

Lines of code

2120

increased by0.09%

Worsened metrics

Total package byte prevSize

129127

decreased by-2.46%

Dependency changes

• + Added@theme-ui/core@0.6.0-canary.1544.8486957e8f9c294d49d8e43485143e2186217b1e.0(transitive)

• + Added@theme-ui/css@0.6.0-canary.1544.8486957e8f9c294d49d8e43485143e2186217b1e.0(transitive)

• + Added@theme-ui/parse-props@0.6.0-canary.1544.8486957e8f9c294d49d8e43485143e2186217b1e.0(transitive)

• - Removed@theme-ui/core@0.6.0-canary.1544.5359f8a1e408a4dfeb74a9ae39688270286e534a.0(transitive)

• - Removed@theme-ui/css@0.6.0-canary.1544.5359f8a1e408a4dfeb74a9ae39688270286e534a.0(transitive)

• - Removed@theme-ui/parse-props@0.6.0-canary.1544.5359f8a1e408a4dfeb74a9ae39688270286e534a.0(transitive)

• Updated@theme-ui/core@0.6.0-canary.1544.8486957e8f9c294d49d8e43485143e2186217b1e.0

• Updated@theme-ui/css@0.6.0-canary.1544.8486957e8f9c294d49d8e43485143e2186217b1e.0