@blocklet/labels 2.3.5 → 2.3.6

package/dist/index.es.js

@@ -10,7 +10,7 @@ import { Tree } from "react-arborist";
 import { Icon } from "@iconify/react";
 import omit from "lodash/omit";
 import Select, { components } from "react-select";
-import { ClickAwayListener, Box as Box$1, Chip, IconButton, Button, getContrastRatio, alpha, ButtonBase, Popper, Autocomplete, InputBase, autocompleteClasses, TextField } from "@mui/material";
+import { ClickAwayListener, Box as Box$1, Chip, IconButton, Button, getContrastRatio, alpha, useTheme, ButtonBase, Popper, Autocomplete, InputBase, autocompleteClasses, TextField } from "@mui/material";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { useReactive, useLocalStorageState, useRequest, useSize, useDeepCompareLayoutEffect } from "ahooks";
 import { createContainer } from "unstated-next";
@@ -784,23 +784,39 @@ const useSessionContext = () => {
     }
   };
 };
-const getTextColor = (color) => {
-  return chroma(color).hex();
+const getTextColor = (color, mode) => {
+  const baseColor = chroma(color);
+  if (mode === "dark") {
+    return baseColor.luminance() > 0.5 ? baseColor.darken(3).hex() : baseColor.brighten(3).hex();
+  }
+  return baseColor.hex();
 };
-const getBorderColor = (color) => {
-  if (chroma(color).luminance() > 0.5) {
-    return chroma(color).darken(3).hex();
+const getBorderColor = (color, mode) => {
+  const baseColor = chroma(color);
+  if (mode === "dark") {
+    return baseColor.brighten(2).alpha(0.4).hex();
+  }
+  if (baseColor.luminance() > 0.5) {
+    return baseColor.darken(3).hex();
   }
-  return chroma(color).brighten(0.5).alpha(0.25).hex();
+  return baseColor.brighten(0.5).alpha(0.25).hex();
 };
-const getBackgroundColor = (color) => {
-  if (chroma(color).luminance() > 0.5) {
-    return chroma(color).darken(2.5).hex();
+const getBackgroundColor = (color, mode) => {
+  const baseColor = chroma(color);
+  if (mode === "dark") {
+    return baseColor.brighten(2).alpha(0.25).hex();
   }
-  return chroma(color).brighten(2.5).alpha(0.25).hex();
+  if (baseColor.luminance() > 0.5) {
+    return baseColor.darken(2.5).hex();
+  }
+  return baseColor.brighten(2.5).alpha(0.25).hex();
 };
-const getFilterStyle = (color) => {
-  if (chroma(color).luminance() > 0.5) {
+const getFilterStyle = (color, mode) => {
+  const baseColor = chroma(color);
+  if (mode === "dark") {
+    return "brightness(1.3) contrast(1.2)";
+  }
+  if (baseColor.luminance() > 0.5) {
     return "brightness(0.85) contrast(1.2)";
   }
   return "brightness(0.85) contrast(1.2)";
@@ -815,20 +831,21 @@ function LabelChip({
   renderName = (name) => name
 }) {
   const { getFullLabelName, getLabelName } = LabelsContainer.useContainer();
+  const theme = useTheme();
+  const { mode } = theme.palette;
   const mergedSx = [
     {
       height: 20,
       borderRadius: 0.5,
       fontSize: 12,
       fontWeight: 500,
-      color: `${getTextColor(label.data.color)} !important`,
-      bgcolor: `${getBackgroundColor(label.data.color)} !important`,
+      color: `${getTextColor(label.data.color, mode)} !important`,
+      bgcolor: `${getBackgroundColor(label.data.color, mode)} !important`,
       transition: "filter 0.2s",
-      borderColor: `${getBorderColor(label.data.color)} !important`,
-      // -webkit-text-fill-color
-      WebkitTextFillColor: `${getTextColor(label.data.color)} !important`,
+      borderColor: `${getBorderColor(label.data.color, mode)} !important`,
+      WebkitTextFillColor: `${getTextColor(label.data.color, mode)} !important`,
       ".MuiChip-deleteIcon": {
-        color: `${getTextColor(label.data.color)} !important`,
+        color: `${getTextColor(label.data.color, mode)} !important`,
         cursor: "pointer",
         transition: "transform 0.3s",
         "&:hover": {
@@ -842,7 +859,7 @@ function LabelChip({
       ...onClick && {
         cursor: "pointer",
         "&:hover": {
-          filter: getFilterStyle(label.data.color)
+          filter: getFilterStyle(label.data.color, mode)
         }
       }
     },
@@ -997,7 +1014,7 @@ function PopperComponent({
           fontSize: 13
         },
         [`& .${autocompleteClasses.listbox}`]: {
-          bgcolor: theme.palette.mode === "light" ? "#fff" : "#1c2128",
+          bgcolor: theme.palette.background.paper,
           padding: 1,
           [`& .${autocompleteClasses.option}`]: {
             minHeight: "auto"
@@ -1191,7 +1208,7 @@ function GithubLabelPicker({
             return null;
           }
           const label = option.data;
-          return /* @__PURE__ */ createElement(Box$1, { component: "li", ...props, key: label.id, sx: { "&.MuiAutocomplete-option": { p: 0 } } }, /* @__PURE__ */ jsx(
+          return /* @__PURE__ */ createElement(Box$1, { component: "li", ...props, key: label.id, sx: { "&.MuiAutocomplete-option": { p: "0 !important" } } }, /* @__PURE__ */ jsx(
             LabelChip,
             {
               label: option,
@@ -1225,17 +1242,17 @@ function GithubLabelPicker({
             sx: (theme) => ({
               padding: 1,
               width: "100%",
-              bgcolor: "#fff",
+              bgcolor: "background.paper",
               "& input": {
                 borderRadius: 1,
-                backgroundColor: theme.palette.mode === "light" ? "#fff" : "#0d1117",
+                backgroundColor: "background.paper",
                 padding: 1,
                 transition: theme.transitions.create(["border-color", "box-shadow"]),
-                border: `1px solid ${theme.palette.mode === "light" ? "#eaecef" : "#30363d"}`,
+                border: `1px solid ${theme.palette.divider}`,
                 fontSize: 14,
                 "&:focus": {
-                  boxShadow: `0px 0px 0px 3px ${theme.palette.mode === "light" ? alpha(theme.palette.primary.light, 0.4) : "rgb(12, 45, 107)"}`,
-                  borderColor: theme.palette.mode === "light" ? theme.palette.primary.light : "#388bfd"
+                  boxShadow: `0px 0px 0px 3px ${alpha(theme.palette.primary.light, 0.4)}`,
+                  borderColor: theme.palette.primary.light
                 }
               }
             })
@@ -1256,7 +1273,8 @@ function GithubLabelPicker({
             width: "100%",
             height: 36,
             px: 2,
-            borderTop: "1px solid #eee",
+            borderTop: "1px solid",
+            borderColor: "divider",
             fontSize: 14,
             color: "grey.600",
             cursor: "pointer",
@@ -1311,15 +1329,15 @@ function GithubLabelPicker({
         placement: "bottom-start",
         disablePortal,
         sx: (theme) => ({
-          border: `1px solid ${theme.palette.mode === "light" ? "#e1e4e8" : "#30363d"}`,
+          border: `1px solid ${theme.palette.divider}`,
           boxShadow: `0 8px 24px ${theme.palette.mode === "light" ? "rgba(149, 157, 165, 0.2)" : "rgb(1, 4, 9)"}`,
           borderRadius: 1,
           width: 360,
           overflow: "hidden",
           zIndex: theme.zIndex.modal,
           fontSize: 13,
-          color: theme.palette.mode === "light" ? "#24292e" : "#c9d1d9",
-          backgroundColor: theme.palette.mode === "light" ? "#fff" : "#1c2128"
+          color: "text.secondary",
+          backgroundColor: "background.paper"
         }),
         children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsxs(Box$1, { onClick: (e) => e.preventDefault(), children: [
           renderAutocomplete(),

package/dist/index.umd.js

@@ -771,23 +771,39 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     };
   };
-  const getTextColor = (color) => {
-    return chroma(color).hex();
+  const getTextColor = (color, mode) => {
+    const baseColor = chroma(color);
+    if (mode === "dark") {
+      return baseColor.luminance() > 0.5 ? baseColor.darken(3).hex() : baseColor.brighten(3).hex();
+    }
+    return baseColor.hex();
   };
-  const getBorderColor = (color) => {
-    if (chroma(color).luminance() > 0.5) {
-      return chroma(color).darken(3).hex();
+  const getBorderColor = (color, mode) => {
+    const baseColor = chroma(color);
+    if (mode === "dark") {
+      return baseColor.brighten(2).alpha(0.4).hex();
+    }
+    if (baseColor.luminance() > 0.5) {
+      return baseColor.darken(3).hex();
     }
-    return chroma(color).brighten(0.5).alpha(0.25).hex();
+    return baseColor.brighten(0.5).alpha(0.25).hex();
   };
-  const getBackgroundColor = (color) => {
-    if (chroma(color).luminance() > 0.5) {
-      return chroma(color).darken(2.5).hex();
+  const getBackgroundColor = (color, mode) => {
+    const baseColor = chroma(color);
+    if (mode === "dark") {
+      return baseColor.brighten(2).alpha(0.25).hex();
     }
-    return chroma(color).brighten(2.5).alpha(0.25).hex();
+    if (baseColor.luminance() > 0.5) {
+      return baseColor.darken(2.5).hex();
+    }
+    return baseColor.brighten(2.5).alpha(0.25).hex();
   };
-  const getFilterStyle = (color) => {
-    if (chroma(color).luminance() > 0.5) {
+  const getFilterStyle = (color, mode) => {
+    const baseColor = chroma(color);
+    if (mode === "dark") {
+      return "brightness(1.3) contrast(1.2)";
+    }
+    if (baseColor.luminance() > 0.5) {
       return "brightness(0.85) contrast(1.2)";
     }
     return "brightness(0.85) contrast(1.2)";
@@ -802,20 +818,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     renderName = (name) => name
   }) {
     const { getFullLabelName, getLabelName } = LabelsContainer.useContainer();
+    const theme = material.useTheme();
+    const { mode } = theme.palette;
     const mergedSx = [
       {
         height: 20,
         borderRadius: 0.5,
         fontSize: 12,
         fontWeight: 500,
-        color: `${getTextColor(label.data.color)} !important`,
-        bgcolor: `${getBackgroundColor(label.data.color)} !important`,
+        color: `${getTextColor(label.data.color, mode)} !important`,
+        bgcolor: `${getBackgroundColor(label.data.color, mode)} !important`,
         transition: "filter 0.2s",
-        borderColor: `${getBorderColor(label.data.color)} !important`,
-        // -webkit-text-fill-color
-        WebkitTextFillColor: `${getTextColor(label.data.color)} !important`,
+        borderColor: `${getBorderColor(label.data.color, mode)} !important`,
+        WebkitTextFillColor: `${getTextColor(label.data.color, mode)} !important`,
         ".MuiChip-deleteIcon": {
-          color: `${getTextColor(label.data.color)} !important`,
+          color: `${getTextColor(label.data.color, mode)} !important`,
           cursor: "pointer",
           transition: "transform 0.3s",
           "&:hover": {
@@ -829,7 +846,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         ...onClick && {
           cursor: "pointer",
           "&:hover": {
-            filter: getFilterStyle(label.data.color)
+            filter: getFilterStyle(label.data.color, mode)
           }
         }
       },
@@ -984,7 +1001,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             fontSize: 13
           },
           [`& .${material.autocompleteClasses.listbox}`]: {
-            bgcolor: theme.palette.mode === "light" ? "#fff" : "#1c2128",
+            bgcolor: theme.palette.background.paper,
             padding: 1,
             [`& .${material.autocompleteClasses.option}`]: {
               minHeight: "auto"
@@ -1178,7 +1195,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               return null;
             }
             const label = option.data;
-            return /* @__PURE__ */ react.createElement(material.Box, { component: "li", ...props, key: label.id, sx: { "&.MuiAutocomplete-option": { p: 0 } } }, /* @__PURE__ */ jsxRuntime.jsx(
+            return /* @__PURE__ */ react.createElement(material.Box, { component: "li", ...props, key: label.id, sx: { "&.MuiAutocomplete-option": { p: "0 !important" } } }, /* @__PURE__ */ jsxRuntime.jsx(
               LabelChip,
               {
                 label: option,
@@ -1212,17 +1229,17 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               sx: (theme) => ({
                 padding: 1,
                 width: "100%",
-                bgcolor: "#fff",
+                bgcolor: "background.paper",
                 "& input": {
                   borderRadius: 1,
-                  backgroundColor: theme.palette.mode === "light" ? "#fff" : "#0d1117",
+                  backgroundColor: "background.paper",
                   padding: 1,
                   transition: theme.transitions.create(["border-color", "box-shadow"]),
-                  border: `1px solid ${theme.palette.mode === "light" ? "#eaecef" : "#30363d"}`,
+                  border: `1px solid ${theme.palette.divider}`,
                   fontSize: 14,
                   "&:focus": {
-                    boxShadow: `0px 0px 0px 3px ${theme.palette.mode === "light" ? material.alpha(theme.palette.primary.light, 0.4) : "rgb(12, 45, 107)"}`,
-                    borderColor: theme.palette.mode === "light" ? theme.palette.primary.light : "#388bfd"
+                    boxShadow: `0px 0px 0px 3px ${material.alpha(theme.palette.primary.light, 0.4)}`,
+                    borderColor: theme.palette.primary.light
                   }
                 }
               })
@@ -1243,7 +1260,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               width: "100%",
               height: 36,
               px: 2,
-              borderTop: "1px solid #eee",
+              borderTop: "1px solid",
+              borderColor: "divider",
               fontSize: 14,
               color: "grey.600",
               cursor: "pointer",
@@ -1298,15 +1316,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           placement: "bottom-start",
           disablePortal,
           sx: (theme) => ({
-            border: `1px solid ${theme.palette.mode === "light" ? "#e1e4e8" : "#30363d"}`,
+            border: `1px solid ${theme.palette.divider}`,
             boxShadow: `0 8px 24px ${theme.palette.mode === "light" ? "rgba(149, 157, 165, 0.2)" : "rgb(1, 4, 9)"}`,
             borderRadius: 1,
             width: 360,
             overflow: "hidden",
             zIndex: theme.zIndex.modal,
             fontSize: 13,
-            color: theme.palette.mode === "light" ? "#24292e" : "#c9d1d9",
-            backgroundColor: theme.palette.mode === "light" ? "#fff" : "#1c2128"
+            color: "text.secondary",
+            backgroundColor: "background.paper"
           }),
           children: /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { onClick: (e) => e.preventDefault(), children: [
             renderAutocomplete(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/labels",
-  "version": "2.3.5",
+  "version": "2.3.6",
   "files": [
     "dist"
   ],
@@ -29,7 +29,7 @@
     "react-color": "^2.19.3",
     "react-select": "^5.8.1",
     "unstated-next": "^1.1.0",
-    "@blocklet/translation-input": "^2.3.5"
+    "@blocklet/translation-input": "^2.3.6"
   },
   "peerDependencies": {
     "@arcblock/did-connect": "^2.10.36",