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

Comparing version 1.2.4 to 1.3.0

cjs/index.js

@@ -90,11 +90,33 @@ "use strict";
   };
+  var styleMain = (0, _objectSpread2["default"])({
+    '--sketch-background': 'rgb(255, 255, 255)',
+    '--sketch-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px',
+    '--sketch-swatch-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px inset',
+    '--sketch-alpha-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px inset, rgb(0 0 0 / 25%) 0px 0px 4px inset',
+    '--sketch-swatch-border-top': '1px solid rgb(238, 238, 238)',
+    background: 'var(--sketch-background)',
+    borderRadius: 4,
+    boxShadow: 'var(--sketch-box-shadow)',
+    width: width
+  }, style);
+  var styleAlpha = {
+    borderRadius: 2,
+    background: (0, _colorConvert.hsvaToRgbaString)(hsva),
+    boxShadow: 'var(--sketch-alpha-box-shadow)'
+  };
+  var styleSwatch = {
+    borderTop: 'var(--sketch-swatch-border-top)',
+    paddingTop: 10,
+    paddingLeft: 10
+  };
+  var styleSwatchRect = {
+    marginRight: 10,
+    marginBottom: 10,
+    borderRadius: 3,
+    boxShadow: 'var(--sketch-swatch-box-shadow)'
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), {}, {
     className: "".concat(prefixCls, " ").concat(className || ''),
     ref: ref,
-    style: (0, _objectSpread2["default"])({
-      background: 'rgb(255, 255, 255)',
-      borderRadius: 4,
-      boxShadow: 'rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px',
-      width: width
-    }, style),
+    style: styleMain,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -164,7 +186,3 @@ style: {
           innerProps: {
-            style: {
-              borderRadius: 2,
-              background: (0, _colorConvert.hsvaToRgbaString)(hsva),
-              boxShadow: 'rgb(0 0 0 / 15%) 0px 0px 0px 1px inset, rgb(0 0 0 / 25%) 0px 0px 4px inset'
-            }
+            style: styleAlpha
           },
@@ -201,7 +219,3 @@ pointer: function pointer() {
     }), presetColors && presetColors.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorSwatch["default"], {
-      style: {
-        borderTop: '1px solid rgb(238, 238, 238)',
-        paddingTop: 10,
-        paddingLeft: 10
-      },
+      style: styleSwatch,
       colors: presetColors,
@@ -213,11 +227,3 @@ color: (0, _colorConvert.hsvaToHex)(hsva),
       rectProps: {
-        style: {
-          marginRight: 10,
-          marginBottom: 10,
-          borderRadius: 3,
-          boxShadow: 'rgb(0 0 0 / 15%) 0px 0px 0px 1px inset'
-          // display: 'flex',
-          // alignItems: 'center',
-          // justifyContent: 'center',
-        }
+        style: styleSwatchRect
       }
@@ -227,3 +233,2 @@ })]
 });
-
 Sketch.displayName = 'Sketch';
@@ -230,0 +235,0 @@ var _default = Sketch;

esm/index.js

@@ -70,11 +70,33 @@ import _extends from "@babel/runtime/helpers/extends";
   }));
+  var styleMain = _extends({
+    '--sketch-background': 'rgb(255, 255, 255)',
+    '--sketch-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px',
+    '--sketch-swatch-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px inset',
+    '--sketch-alpha-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px inset, rgb(0 0 0 / 25%) 0px 0px 4px inset',
+    '--sketch-swatch-border-top': '1px solid rgb(238, 238, 238)',
+    background: 'var(--sketch-background)',
+    borderRadius: 4,
+    boxShadow: 'var(--sketch-box-shadow)',
+    width
+  }, style);
+  var styleAlpha = {
+    borderRadius: 2,
+    background: hsvaToRgbaString(hsva),
+    boxShadow: 'var(--sketch-alpha-box-shadow)'
+  };
+  var styleSwatch = {
+    borderTop: 'var(--sketch-swatch-border-top)',
+    paddingTop: 10,
+    paddingLeft: 10
+  };
+  var styleSwatchRect = {
+    marginRight: 10,
+    marginBottom: 10,
+    borderRadius: 3,
+    boxShadow: 'var(--sketch-swatch-box-shadow)'
+  };
   return /*#__PURE__*/_jsxs("div", _extends({}, other, {
     className: prefixCls + " " + (className || ''),
     ref: ref,
-    style: _extends({
-      background: 'rgb(255, 255, 255)',
-      borderRadius: 4,
-      boxShadow: 'rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px',
-      width
-    }, style),
+    style: styleMain,
     children: [/*#__PURE__*/_jsxs("div", {
@@ -142,7 +164,3 @@ style: {
           innerProps: {
-            style: {
-              borderRadius: 2,
-              background: hsvaToRgbaString(hsva),
-              boxShadow: 'rgb(0 0 0 / 15%) 0px 0px 0px 1px inset, rgb(0 0 0 / 25%) 0px 0px 4px inset'
-            }
+            style: styleAlpha
           },
@@ -173,7 +191,3 @@ pointer: () => /*#__PURE__*/_jsx(Fragment, {})
     }), presetColors && presetColors.length > 0 && /*#__PURE__*/_jsx(Swatch, {
-      style: {
-        borderTop: '1px solid rgb(238, 238, 238)',
-        paddingTop: 10,
-        paddingLeft: 10
-      },
+      style: styleSwatch,
       colors: presetColors,
@@ -183,11 +197,3 @@ color: hsvaToHex(hsva),
       rectProps: {
-        style: {
-          marginRight: 10,
-          marginBottom: 10,
-          borderRadius: 3,
-          boxShadow: 'rgb(0 0 0 / 15%) 0px 0px 0px 1px inset'
-          // display: 'flex',
-          // alignItems: 'center',
-          // justifyContent: 'center',
-        }
+        style: styleSwatchRect
       }
@@ -197,4 +203,3 @@ })]
 });
-
 Sketch.displayName = 'Sketch';
 export default Sketch;

package.json

 {
   "name": "@uiw/react-color-sketch",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "Color Sketch component for React.",
@@ -38,9 +38,9 @@ "homepage": "https://uiwjs.github.io/react-color/#/sketch",
   "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-rgba": "1.2.4",
-    "@uiw/react-color-hue": "1.2.4",
-    "@uiw/react-color-saturation": "1.2.4",
-    "@uiw/react-color-swatch": "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-rgba": "1.3.0",
+    "@uiw/react-color-hue": "1.3.0",
+    "@uiw/react-color-saturation": "1.3.0",
+    "@uiw/react-color-swatch": "1.3.0"
   },
@@ -47,0 +47,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

25565

increased by2.94%

Lines of code

655

increased by2.02%

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-rgba@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-rgba@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-rgba@1.3.0

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

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

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