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

Comparing version 1.2.4 to 1.3.0

cjs/index.js

@@ -54,2 +54,15 @@ "use strict";
   };
+  var styleWrapper = (0, _objectSpread2["default"])({
+    '--github-border': '1px solid rgba(0, 0, 0, 0.2)',
+    '--github-background-color': '#fff',
+    '--github-box-shadow': 'rgb(0 0 0 / 15%) 0px 3px 12px',
+    '--github-arrow-border-color': 'rgba(0, 0, 0, 0.15)',
+    width: 200,
+    borderRadius: 4,
+    background: 'var(--github-background-color)',
+    boxShadow: 'var(--github-box-shadow)',
+    border: 'var(--github-border)',
+    position: 'relative',
+    padding: 5
+  }, style);
   var rStyle = {
@@ -63,5 +76,5 @@ borderStyle: 'solid',
     arrBrStyl.borderWidth = '0 8px 8px';
-    arrBrStyl.borderColor = 'transparent transparent rgba(0, 0, 0, 0.15)';
+    arrBrStyl.borderColor = 'transparent transparent var(--github-arrow-border-color)';
     arrStyl.borderWidth = '0 7px 7px';
-    arrStyl.borderColor = 'transparent transparent #fff';
+    arrStyl.borderColor = 'transparent transparent var(--github-background-color)';
   }
@@ -81,6 +94,6 @@ if (placement === GithubPlacement.TopRight) {
   if (/^B/.test(placement)) {
-    arrBrStyl.borderWidth = '8px 8px 0 ';
-    arrBrStyl.borderColor = 'rgba(0, 0, 0, 0.15) transparent transparent';
-    arrStyl.borderWidth = '7px 7px 0px';
-    arrStyl.borderColor = '#fff transparent transparent';
+    arrBrStyl.borderWidth = '8px 8px 0';
+    arrBrStyl.borderColor = 'var(--github-arrow-border-color) transparent transparent';
+    arrStyl.borderWidth = '7px 7px 0';
+    arrStyl.borderColor = 'var(--github-background-color) transparent transparent';
     if (placement === GithubPlacement.BottonRight) {
@@ -116,6 +129,6 @@ arrBrStyl.top = '100%';
   if (/^L/.test(placement)) {
-    arrBrStyl.borderWidth = '8px 8px 8px 0px';
-    arrBrStyl.borderColor = 'transparent rgba(0, 0, 0, 0.15) transparent transparent';
-    arrStyl.borderWidth = '7px 7px 7px 0px';
-    arrStyl.borderColor = 'transparent #fff transparent transparent';
+    arrBrStyl.borderWidth = '8px 8px 8px 0';
+    arrBrStyl.borderColor = 'transparent var(--github-arrow-border-color) transparent transparent';
+    arrStyl.borderWidth = '7px 7px 7px 0';
+    arrStyl.borderColor = 'transparent var(--github-background-color) transparent transparent';
     arrBrStyl.left = -8;
@@ -125,6 +138,6 @@ arrStyl.left = -7;
   if (/^R/.test(placement)) {
-    arrBrStyl.borderWidth = '8px 0px 8px 8px';
-    arrBrStyl.borderColor = 'transparent transparent transparent rgba(0, 0, 0, 0.15)';
-    arrStyl.borderWidth = '7px 0px 7px 7px';
-    arrStyl.borderColor = 'transparent transparent transparent #fff';
+    arrBrStyl.borderWidth = '8px 0 8px 8px';
+    arrBrStyl.borderColor = 'transparent transparent transparent var(--github-arrow-border-color)';
+    arrStyl.borderWidth = '7px 0 7px 7px';
+    arrStyl.borderColor = 'transparent transparent transparent var(--github-background-color)';
     arrBrStyl.right = -8;
@@ -165,11 +178,3 @@ arrStyl.right = -7;
     onChange: handleChange,
-    style: (0, _objectSpread2["default"])({
-      width: 200,
-      borderRadius: 4,
-      background: '#fff',
-      boxShadow: 'rgb(0 0 0 / 15%) 0px 3px 12px',
-      border: '1px solid rgba(0, 0, 0, 0.2)',
-      position: 'relative',
-      padding: 5
-    }, style),
+    style: styleWrapper,
     rectProps: {
@@ -176,0 +181,0 @@ style: {

esm/index.js

@@ -42,2 +42,15 @@ import _extends from "@babel/runtime/helpers/extends";
   var handleChange = hsv => onChange && onChange(handleColor(hsv));
+  var styleWrapper = _extends({
+    '--github-border': '1px solid rgba(0, 0, 0, 0.2)',
+    '--github-background-color': '#fff',
+    '--github-box-shadow': 'rgb(0 0 0 / 15%) 0px 3px 12px',
+    '--github-arrow-border-color': 'rgba(0, 0, 0, 0.15)',
+    width: 200,
+    borderRadius: 4,
+    background: 'var(--github-background-color)',
+    boxShadow: 'var(--github-box-shadow)',
+    border: 'var(--github-border)',
+    position: 'relative',
+    padding: 5
+  }, style);
   var rStyle = {
@@ -51,5 +64,5 @@ borderStyle: 'solid',
     arrBrStyl.borderWidth = '0 8px 8px';
-    arrBrStyl.borderColor = 'transparent transparent rgba(0, 0, 0, 0.15)';
+    arrBrStyl.borderColor = 'transparent transparent var(--github-arrow-border-color)';
     arrStyl.borderWidth = '0 7px 7px';
-    arrStyl.borderColor = 'transparent transparent #fff';
+    arrStyl.borderColor = 'transparent transparent var(--github-background-color)';
   }
@@ -69,6 +82,6 @@ if (placement === GithubPlacement.TopRight) {
   if (/^B/.test(placement)) {
-    arrBrStyl.borderWidth = '8px 8px 0 ';
-    arrBrStyl.borderColor = 'rgba(0, 0, 0, 0.15) transparent transparent';
-    arrStyl.borderWidth = '7px 7px 0px';
-    arrStyl.borderColor = '#fff transparent transparent';
+    arrBrStyl.borderWidth = '8px 8px 0';
+    arrBrStyl.borderColor = 'var(--github-arrow-border-color) transparent transparent';
+    arrStyl.borderWidth = '7px 7px 0';
+    arrStyl.borderColor = 'var(--github-background-color) transparent transparent';
     if (placement === GithubPlacement.BottonRight) {
@@ -104,6 +117,6 @@ arrBrStyl.top = '100%';
   if (/^L/.test(placement)) {
-    arrBrStyl.borderWidth = '8px 8px 8px 0px';
-    arrBrStyl.borderColor = 'transparent rgba(0, 0, 0, 0.15) transparent transparent';
-    arrStyl.borderWidth = '7px 7px 7px 0px';
-    arrStyl.borderColor = 'transparent #fff transparent transparent';
+    arrBrStyl.borderWidth = '8px 8px 8px 0';
+    arrBrStyl.borderColor = 'transparent var(--github-arrow-border-color) transparent transparent';
+    arrStyl.borderWidth = '7px 7px 7px 0';
+    arrStyl.borderColor = 'transparent var(--github-background-color) transparent transparent';
     arrBrStyl.left = -8;
@@ -113,6 +126,6 @@ arrStyl.left = -7;
   if (/^R/.test(placement)) {
-    arrBrStyl.borderWidth = '8px 0px 8px 8px';
-    arrBrStyl.borderColor = 'transparent transparent transparent rgba(0, 0, 0, 0.15)';
-    arrStyl.borderWidth = '7px 0px 7px 7px';
-    arrStyl.borderColor = 'transparent transparent transparent #fff';
+    arrBrStyl.borderWidth = '8px 0 8px 8px';
+    arrBrStyl.borderColor = 'transparent transparent transparent var(--github-arrow-border-color)';
+    arrStyl.borderWidth = '7px 0 7px 7px';
+    arrStyl.borderColor = 'transparent transparent transparent var(--github-background-color)';
     arrBrStyl.right = -8;
@@ -155,11 +168,3 @@ arrStyl.right = -7;
     onChange: handleChange,
-    style: _extends({
-      width: 200,
-      borderRadius: 4,
-      background: '#fff',
-      boxShadow: 'rgb(0 0 0 / 15%) 0px 3px 12px',
-      border: '1px solid rgba(0, 0, 0, 0.2)',
-      position: 'relative',
-      padding: 5
-    }, style),
+    style: styleWrapper,
     rectProps: {
@@ -166,0 +171,0 @@ style: {

package.json

 {
   "name": "@uiw/react-color-github",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "Color Github Picker",
@@ -39,4 +39,4 @@ "author": "Kenny Wong <[e-mail]>",
   "dependencies": {
-    "@uiw/color-convert": "1.2.4",
-    "@uiw/react-color-swatch": "1.2.4"
+    "@uiw/color-convert": "1.3.0",
+    "@uiw/react-color-swatch": "1.3.0"
   },
@@ -43,0 +43,0 @@ "devDependencies": {

README.md

@@ -18,3 +18,4 @@ React Color Github
 
-```js
+```jsx mdx:preview
+import React, { useState } from 'react';
 import Github from '@uiw/react-color-github';
@@ -25,10 +26,17 @@
   return (
-    <Github
-      color={hex}
-      onChange={(color) => {
-        setHex(color.hex);
-      }}
-    />
+    <>
+      <Github
+        color={hex}
+        style={{
+          '--github-background-color': '#d1eff9'
+        }}
+        onChange={(color) => {
+          setHex(color.hex);
+        }}
+      />
+      <div style={{ width: 120, height: 50, backgroundColor: hex }} />
+    </>
   );
 }
+export default Demo;
 ```
@@ -35,0 +43,0 @@

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

30452

increased by4.96%

Lines of code

788

increased by1.94%

Number of lines in readme file

77

increased by11.59%

Dependency changes

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

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

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

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

• Updated@uiw/color-convert@1.3.0

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