@uiw/react-color-chrome - npm Package Compare versions

Comparing version 1.2.4 to 1.3.0

cjs/Arrow.js

@@ -19,3 +19,3 @@ "use strict";
   var handleMouseEnter = (0, _react.useCallback)(function () {
-    btn.current.style['backgroundColor'] = '#e8e8e8';
+    btn.current.style['backgroundColor'] = 'var(--chrome-arrow-background-color)';
   }, []);
@@ -45,3 +45,3 @@ var handleMouseLeave = (0, _react.useCallback)(function () {
         d: "M373.888 576h276.224c9.322667 0 14.293333 11.178667 9.173333 18.773333l-1.258666 1.557334-138.112 146.858666a10.709333 10.709333 0 0 1-14.293334 1.365334l-1.536-1.365334-138.112-146.858666c-6.592-6.997333-2.666667-18.645333 5.973334-20.16l1.941333-0.170667h276.224-276.224z m146.026667-295.189333l138.112 146.858666c7.04 7.509333 2.069333 20.330667-7.914667 20.330667H373.888c-9.984 0-14.976-12.821333-7.914667-20.330667l138.112-146.858666a10.730667 10.730667 0 0 1 15.829334 0z",
-        fill: "#333"
+        fill: "var(--chrome-arrow-fill)"
       })
@@ -48,0 +48,0 @@ })

cjs/index.js

@@ -75,11 +75,20 @@ "use strict";
   };
+  var wrapperStyle = (0, _objectSpread2["default"])({
+    '--chrome-arrow-fill': '#333',
+    '--chrome-arrow-background-color': '#e8e8e8',
+    borderRadius: 0,
+    flexDirection: 'column',
+    width: 230,
+    padding: 0
+  }, style);
+  var alphaStyle = {
+    '--chrome-alpha-box-shadow': 'rgb(0 0 0 / 25%) 0px 0px 1px inset',
+    borderRadius: '50%',
+    background: (0, _colorConvert.hsvaToRgbaString)(hsva),
+    boxShadow: 'var(--chrome-alpha-box-shadow)'
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorGithub["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     ref: ref,
     color: hsva,
-    style: (0, _objectSpread2["default"])({
-      borderRadius: 0,
-      flexDirection: 'column',
-      width: 230,
-      padding: 0
-    }, style),
+    style: wrapperStyle,
     colors: undefined,
@@ -122,7 +131,3 @@ className: [prefixCls, className].filter(Boolean).join(' '),
           innerProps: {
-            style: {
-              borderRadius: '50%',
-              background: (0, _colorConvert.hsvaToRgbaString)(hsva),
-              boxShadow: 'rgb(0 0 0 / 25%) 0px 0px 1px inset'
-            }
+            style: alphaStyle
           },
@@ -129,0 +134,0 @@ pointer: function pointer() {

esm/Arrow.js

@@ -13,3 +13,3 @@ import _extends from "@babel/runtime/helpers/extends";
   var handleMouseEnter = useCallback(() => {
-    btn.current.style['backgroundColor'] = '#e8e8e8';
+    btn.current.style['backgroundColor'] = 'var(--chrome-arrow-background-color)';
   }, []);
@@ -39,3 +39,3 @@ var handleMouseLeave = useCallback(() => {
         d: "M373.888 576h276.224c9.322667 0 14.293333 11.178667 9.173333 18.773333l-1.258666 1.557334-138.112 146.858666a10.709333 10.709333 0 0 1-14.293334 1.365334l-1.536-1.365334-138.112-146.858666c-6.592-6.997333-2.666667-18.645333 5.973334-20.16l1.941333-0.170667h276.224-276.224z m146.026667-295.189333l138.112 146.858666c7.04 7.509333 2.069333 20.330667-7.914667 20.330667H373.888c-9.984 0-14.976-12.821333-7.914667-20.330667l138.112-146.858666a10.730667 10.730667 0 0 1 15.829334 0z",
-        fill: "#333"
+        fill: "var(--chrome-arrow-fill)"
       })
@@ -42,0 +42,0 @@ })

esm/index.js

@@ -61,11 +61,20 @@ import _extends from "@babel/runtime/helpers/extends";
   };
+  var wrapperStyle = _extends({
+    '--chrome-arrow-fill': '#333',
+    '--chrome-arrow-background-color': '#e8e8e8',
+    borderRadius: 0,
+    flexDirection: 'column',
+    width: 230,
+    padding: 0
+  }, style);
+  var alphaStyle = {
+    '--chrome-alpha-box-shadow': 'rgb(0 0 0 / 25%) 0px 0px 1px inset',
+    borderRadius: '50%',
+    background: hsvaToRgbaString(hsva),
+    boxShadow: 'var(--chrome-alpha-box-shadow)'
+  };
   return /*#__PURE__*/_jsx(Github, _extends({
     ref: ref,
     color: hsva,
-    style: _extends({
-      borderRadius: 0,
-      flexDirection: 'column',
-      width: 230,
-      padding: 0
-    }, style),
+    style: wrapperStyle,
     colors: undefined,
@@ -108,7 +117,3 @@ className: [prefixCls, className].filter(Boolean).join(' '),
           innerProps: {
-            style: {
-              borderRadius: '50%',
-              background: hsvaToRgbaString(hsva),
-              boxShadow: 'rgb(0 0 0 / 25%) 0px 0px 1px inset'
-            }
+            style: alphaStyle
           },
@@ -115,0 +120,0 @@ pointer: () => /*#__PURE__*/_jsx(Fragment, {})

package.json

 {
   "name": "@uiw/react-color-chrome",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "Color Github Picker",
@@ -39,10 +39,10 @@ "author": "Kenny Wong <[e-mail]>",
   "dependencies": {
-    "@uiw/color-convert": "1.2.4",
-    "@uiw/react-color-alpha": "1.2.4",
-    "@uiw/react-color-editable-input": "1.2.4",
-    "@uiw/react-color-editable-input-hsla": "1.2.4",
-    "@uiw/react-color-editable-input-rgba": "1.2.4",
-    "@uiw/react-color-github": "1.2.4",
-    "@uiw/react-color-hue": "1.2.4",
-    "@uiw/react-color-saturation": "1.2.4"
+    "@uiw/color-convert": "1.3.0",
+    "@uiw/react-color-alpha": "1.3.0",
+    "@uiw/react-color-editable-input": "1.3.0",
+    "@uiw/react-color-editable-input-hsla": "1.3.0",
+    "@uiw/react-color-editable-input-rgba": "1.3.0",
+    "@uiw/react-color-github": "1.3.0",
+    "@uiw/react-color-hue": "1.3.0",
+    "@uiw/react-color-saturation": "1.3.0"
   },
@@ -49,0 +49,0 @@ "devDependencies": {

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

31910

increased by2.31%

Lines of code

793

increased by2.72%

Dependency changes

• + Added@uiw/color-convert@1.3.0(transitive)

• + Added@uiw/react-color-alpha@1.3.0(transitive)

• + Added@uiw/react-color-editable-input@1.3.0(transitive)

• + Added@uiw/react-color-editable-input-hsla@1.3.0(transitive)

• + Added@uiw/react-color-editable-input-rgba@1.3.0(transitive)

• + Added@uiw/react-color-github@1.3.0(transitive)

• + Added@uiw/react-color-hue@1.3.0(transitive)

• + Added@uiw/react-color-saturation@1.3.0(transitive)

• + Added@uiw/react-color-swatch@1.3.0(transitive)

• + Added@uiw/react-drag-event-interactive@1.3.0(transitive)

• - Removed@uiw/color-convert@1.2.4(transitive)

• - Removed@uiw/react-color-alpha@1.2.4(transitive)

• - Removed@uiw/react-color-editable-input@1.2.4(transitive)

• - Removed@uiw/react-color-editable-input-hsla@1.2.4(transitive)

• - Removed@uiw/react-color-editable-input-rgba@1.2.4(transitive)

• - Removed@uiw/react-color-github@1.2.4(transitive)

• - Removed@uiw/react-color-hue@1.2.4(transitive)

• - Removed@uiw/react-color-saturation@1.2.4(transitive)

• - Removed@uiw/react-color-swatch@1.2.4(transitive)

• - Removed@uiw/react-drag-event-interactive@1.2.4(transitive)

• Updated@uiw/color-convert@1.3.0

• Updated@uiw/react-color-alpha@1.3.0

• Updated@uiw/react-color-editable-input@1.3.0

• Updated@uiw/react-color-editable-input-hsla@1.3.0

• Updated@uiw/react-color-editable-input-rgba@1.3.0

• Updated@uiw/react-color-github@1.3.0

• Updated@uiw/react-color-hue@1.3.0

• Updated@uiw/react-color-saturation@1.3.0