@chakra-ui/theme-tools - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

CHANGELOG.md

 # Change Log
 
+## 1.2.1
+
+### Patch Changes
+
+- [`09577b088`](https://github.com/chakra-ui/chakra-ui/commit/09577b088272075f6f183bbb34d5639ac5e68cc0)
+  [#4708](https://github.com/chakra-ui/chakra-ui/pull/4708) Thanks
+  [@hiroppy](https://github.com/hiroppy)! - Replace `tinycolor2` with
+  `@ctrl/tinycolor` to get better tree-shaking benefits
+
 ## 1.2.0
@@ -4,0 +13,0 @@

dist/cjs/color.js

@@ -8,8 +8,6 @@ "use strict";
 
-var _tinycolor = _interopRequireDefault(require("tinycolor2"));
+var _tinycolor = require("@ctrl/tinycolor");
 
 var _utils = require("@chakra-ui/utils");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /**
@@ -23,3 +21,6 @@ * Get the color raw value from theme
   var hex = (0, _utils.memoizedGet)(theme, "colors." + color, color);
-  var isValid = (0, _tinycolor["default"])(hex).isValid();
+
+  var _TinyColor = new _tinycolor.TinyColor(hex),
+      isValid = _TinyColor.isValid;
+
   return isValid ? hex : fallback;
@@ -38,3 +39,3 @@ };
     var hex = getColor(theme, color);
-    var isDark = (0, _tinycolor["default"])(hex).isDark();
+    var isDark = new _tinycolor.TinyColor(hex).isDark();
     return isDark ? "dark" : "light";
@@ -81,3 +82,3 @@ };
     var raw = getColor(theme, color);
-    return (0, _tinycolor["default"])(raw).setAlpha(opacity).toRgbString();
+    return new _tinycolor.TinyColor(raw).setAlpha(opacity).toRgbString();
   };
@@ -97,3 +98,3 @@ };
     var raw = getColor(theme, color);
-    return _tinycolor["default"].mix(raw, "#fff", amount).toHexString();
+    return new _tinycolor.TinyColor(raw).mix("#fff", amount).toHexString();
   };
@@ -113,3 +114,3 @@ };
     var raw = getColor(theme, color);
-    return _tinycolor["default"].mix(raw, "#000", amount).toHexString();
+    return new _tinycolor.TinyColor(raw).mix("#000", amount).toHexString();
   };
@@ -129,3 +130,3 @@ };
     var raw = getColor(theme, color);
-    return (0, _tinycolor["default"])(raw).darken(amount).toHexString();
+    return new _tinycolor.TinyColor(raw).darken(amount).toHexString();
   };
@@ -144,3 +145,3 @@ };
   return function (theme) {
-    return (0, _tinycolor["default"])(getColor(theme, color)).lighten(amount).toHexString();
+    return new _tinycolor.TinyColor(getColor(theme, color)).lighten(amount).toHexString();
   };
@@ -161,3 +162,3 @@ };
   return function (theme) {
-    return _tinycolor["default"].readability(getColor(theme, bg), getColor(theme, fg));
+    return (0, _tinycolor.readability)(getColor(theme, bg), getColor(theme, fg));
   };
@@ -178,3 +179,3 @@ };
   return function (theme) {
-    return _tinycolor["default"].isReadable(getColor(theme, bgColor), getColor(theme, textColor), options);
+    return (0, _tinycolor.isReadable)(getColor(theme, bgColor), getColor(theme, textColor), options);
   };
@@ -187,3 +188,3 @@ };
   return function (theme) {
-    return (0, _tinycolor["default"])(getColor(theme, color)).complement().toHexString();
+    return new _tinycolor.TinyColor(getColor(theme, color)).complement().toHexString();
   };
@@ -210,3 +211,3 @@ };
 function randomColor(opts) {
-  var fallback = _tinycolor["default"].random().toHexString();
+  var fallback = (0, _tinycolor.random)().toHexString();
 
@@ -213,0 +214,0 @@ if (!opts || (0, _utils.isEmptyObject)(opts)) {

dist/esm/color.js

@@ -1,2 +0,2 @@
-import Color from "tinycolor2";
+import { TinyColor, readability, isReadable, random } from "@ctrl/tinycolor";
 import { memoizedGet as get, isEmptyObject } from "@chakra-ui/utils";
@@ -12,3 +12,5 @@ /**
   var hex = get(theme, "colors." + color, color);
-  var isValid = Color(hex).isValid();
+  var {
+    isValid
+  } = new TinyColor(hex);
   return isValid ? hex : fallback;
@@ -23,3 +25,3 @@ };
   var hex = getColor(theme, color);
-  var isDark = Color(hex).isDark();
+  var isDark = new TinyColor(hex).isDark();
   return isDark ? "dark" : "light";
@@ -47,3 +49,3 @@ };
   var raw = getColor(theme, color);
-  return Color(raw).setAlpha(opacity).toRgbString();
+  return new TinyColor(raw).setAlpha(opacity).toRgbString();
 };
@@ -58,3 +60,3 @@ /**
   var raw = getColor(theme, color);
-  return Color.mix(raw, "#fff", amount).toHexString();
+  return new TinyColor(raw).mix("#fff", amount).toHexString();
 };
@@ -69,3 +71,3 @@ /**
   var raw = getColor(theme, color);
-  return Color.mix(raw, "#000", amount).toHexString();
+  return new TinyColor(raw).mix("#000", amount).toHexString();
 };
@@ -80,3 +82,3 @@ /**
   var raw = getColor(theme, color);
-  return Color(raw).darken(amount).toHexString();
+  return new TinyColor(raw).darken(amount).toHexString();
 };
@@ -89,3 +91,3 @@ /**
 
-export var lighten = (color, amount) => theme => Color(getColor(theme, color)).lighten(amount).toHexString();
+export var lighten = (color, amount) => theme => new TinyColor(getColor(theme, color)).lighten(amount).toHexString();
 /**
@@ -99,3 +101,3 @@ * Checks the contract ratio of between 2 colors,
 
-export var contrast = (fg, bg) => theme => Color.readability(getColor(theme, bg), getColor(theme, fg));
+export var contrast = (fg, bg) => theme => readability(getColor(theme, bg), getColor(theme, fg));
 /**
@@ -109,4 +111,4 @@ * Checks if a color meets the Web Content Accessibility
 
-export var isAccessible = (textColor, bgColor, options) => theme => Color.isReadable(getColor(theme, bgColor), getColor(theme, textColor), options);
-export var complementary = color => theme => Color(getColor(theme, color)).complement().toHexString();
+export var isAccessible = (textColor, bgColor, options) => theme => isReadable(getColor(theme, bgColor), getColor(theme, textColor), options);
+export var complementary = color => theme => new TinyColor(getColor(theme, color)).complement().toHexString();
 export function generateStripe(size, color) {
@@ -127,3 +129,3 @@ if (size === void 0) {
 export function randomColor(opts) {
-  var fallback = Color.random().toHexString();
+  var fallback = random().toHexString();
 
@@ -130,0 +132,0 @@ if (!opts || isEmptyObject(opts)) {

dist/types/color.d.ts

@@ -1,2 +0,2 @@
-import Color from "tinycolor2";
+import { WCAG2Parms } from "@ctrl/tinycolor";
 import { Dict } from "@chakra-ui/utils";
@@ -70,3 +70,3 @@ /**
  */
-export declare const isAccessible: (textColor: string, bgColor: string, options?: Color.WCAG2Options | undefined) => (theme: Dict) => boolean;
+export declare const isAccessible: (textColor: string, bgColor: string, options?: WCAG2Parms | undefined) => (theme: Dict) => boolean;
 export declare const complementary: (color: string) => (theme: Dict) => string;
@@ -73,0 +73,0 @@ export declare function generateStripe(size?: string, color?: string): {

package.json

 {
   "name": "@chakra-ui/theme-tools",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Set of helpers that makes theming and styling easier",
@@ -55,4 +55,3 @@ "keywords": [
     "@chakra-ui/utils": "1.8.2",
-    "@types/tinycolor2": "1.4.2",
-    "tinycolor2": "1.4.2"
+    "@ctrl/tinycolor": "^3.4.0"
   },
@@ -59,0 +58,0 @@ "peerDependencies": {

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

117031

increased by0.48%

Dependency count

3

decreased by-25%

Lines of code

1154

increased by0.17%

Dependency changes

• + Added@ctrl/tinycolor@^3.4.0

• + Added@ctrl/tinycolor@3.6.1(transitive)

• - Removed@types/tinycolor2@1.4.2

• - Removedtinycolor2@1.4.2

• - Removed@types/tinycolor2@1.4.2(transitive)

• - Removedtinycolor2@1.4.2(transitive)