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

Comparing version 1.2.4 to 1.3.0

cjs/index.js

@@ -68,14 +68,18 @@ "use strict";
   }
+  var styleWrapper = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    '--alpha-background-color': '#fff',
+    '--alpha-pointer-background-color': 'rgb(248, 248, 248)',
+    '--alpha-pointer-box-shadow': 'rgb(0 0 0 / 37%) 0px 1px 4px 0px',
+    borderRadius: radius,
+    background: "url(".concat(BACKGROUND_IMG, ") left center"),
+    backgroundColor: 'var(--alpha-background-color)'
+  }, style), {}, {
+    position: 'relative'
+  }, {
+    width: width,
+    height: height
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), {}, {
     className: [prefixCls, "".concat(prefixCls, "-").concat(direction), className || ''].filter(Boolean).join(' '),
-    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-      borderRadius: radius,
-      background: "url(".concat(BACKGROUND_IMG, ") left center"),
-      backgroundColor: '#fff'
-    }, style), {}, {
-      position: 'relative'
-    }, {
-      width: width,
-      height: height
-    }),
+    style: styleWrapper,
     ref: ref,
@@ -82,0 +86,0 @@ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, bgProps), {}, {

cjs/Pointer.js

@@ -10,3 +10,2 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-var BOXSHADOW = 'rgb(0 0 0 / 37%) 0px 1px 4px 0px';
 var Pointer = function Pointer(_ref) {
@@ -22,2 +21,10 @@ var className = _ref.className,
   };
+  var stylePointer = {
+    width: 18,
+    height: 18,
+    transform: left ? 'translate(-9px, -1px)' : 'translate(-1px, -9px)',
+    boxShadow: 'var(--alpha-pointer-box-shadow)',
+    borderRadius: '50%',
+    backgroundColor: 'var(--alpha-pointer-background-color)'
+  };
   return (0, _react.useMemo)(function () {
@@ -29,10 +36,3 @@ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "".concat(prefixCls, "-fill"),
-        style: {
-          width: 18,
-          height: 18,
-          transform: left ? 'translate(-9px, -1px)' : 'translate(-1px, -9px)',
-          boxShadow: BOXSHADOW,
-          borderRadius: '50%',
-          backgroundColor: 'rgb(248, 248, 248)'
-        }
+        style: stylePointer
       })
@@ -39,0 +39,0 @@ });

esm/index.js

@@ -44,14 +44,18 @@ import _extends from "@babel/runtime/helpers/extends";
   }
+  var styleWrapper = _extends({
+    '--alpha-background-color': '#fff',
+    '--alpha-pointer-background-color': 'rgb(248, 248, 248)',
+    '--alpha-pointer-box-shadow': 'rgb(0 0 0 / 37%) 0px 1px 4px 0px',
+    borderRadius: radius,
+    background: "url(" + BACKGROUND_IMG + ") left center",
+    backgroundColor: 'var(--alpha-background-color)'
+  }, style, {
+    position: 'relative'
+  }, {
+    width,
+    height
+  });
   return /*#__PURE__*/_jsxs("div", _extends({}, other, {
     className: [prefixCls, prefixCls + "-" + direction, className || ''].filter(Boolean).join(' '),
-    style: _extends({
-      borderRadius: radius,
-      background: "url(" + BACKGROUND_IMG + ") left center",
-      backgroundColor: '#fff'
-    }, style, {
-      position: 'relative'
-    }, {
-      width,
-      height
-    }),
+    style: styleWrapper,
     ref: ref,
@@ -58,0 +62,0 @@ children: [/*#__PURE__*/_jsx("div", _extends({}, bgProps, {

esm/Pointer.js

 import React from 'react';
 import { useMemo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-var BOXSHADOW = 'rgb(0 0 0 / 37%) 0px 1px 4px 0px';
 export var Pointer = _ref => {
@@ -17,2 +16,10 @@ var {
   };
+  var stylePointer = {
+    width: 18,
+    height: 18,
+    transform: left ? 'translate(-9px, -1px)' : 'translate(-1px, -9px)',
+    boxShadow: 'var(--alpha-pointer-box-shadow)',
+    borderRadius: '50%',
+    backgroundColor: 'var(--alpha-pointer-background-color)'
+  };
   return useMemo(() => /*#__PURE__*/_jsx("div", {
@@ -23,12 +30,5 @@ className: prefixCls + "-pointer " + (className || ''),
       className: prefixCls + "-fill",
-      style: {
-        width: 18,
-        height: 18,
-        transform: left ? 'translate(-9px, -1px)' : 'translate(-1px, -9px)',
-        boxShadow: BOXSHADOW,
-        borderRadius: '50%',
-        backgroundColor: 'rgb(248, 248, 248)'
-      }
+      style: stylePointer
     })
   }), [className, left, top, prefixCls]);
 };

package.json

 {
   "name": "@uiw/react-color-alpha",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "Color alpha",
@@ -38,4 +38,4 @@ "author": "Kenny Wong <[e-mail]>",
   "dependencies": {
-    "@uiw/color-convert": "1.2.4",
-    "@uiw/react-drag-event-interactive": "1.2.4"
+    "@uiw/color-convert": "1.3.0",
+    "@uiw/react-drag-event-interactive": "1.3.0"
   },
@@ -42,0 +42,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

22129

increased by2.9%

Lines of code

472

increased by1.94%

Dependency changes

• + Added@uiw/color-convert@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-drag-event-interactive@1.2.4(transitive)

• Updated@uiw/color-convert@1.3.0

• Updated@uiw/react-drag-event-interactive@1.3.0