@blocklet/theme 2.13.43 → 2.13.44

package/dist/es/index.js

@@ -127,6 +127,114 @@ var require_cjs = __commonJS({
   }
 });
 
+// node_modules/@mui/utils/esm/formatMuiErrorMessage/formatMuiErrorMessage.js
+function formatMuiErrorMessage(code, ...args) {
+  const url = new URL(`https://mui.com/production-error/?code=${code}`);
+  args.forEach((arg) => url.searchParams.append("args[]", arg));
+  return `Minified MUI error #${code}; visit ${url} for the full message.`;
+}
+
+// node_modules/@mui/utils/esm/clamp/clamp.js
+function clamp(val, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
+  return Math.max(min, Math.min(val, max));
+}
+var clamp_default = clamp;
+
+// node_modules/@mui/system/esm/colorManipulator/colorManipulator.js
+function clampWrapper(value, min = 0, max = 1) {
+  if (process.env.NODE_ENV !== "production") {
+    if (value < min || value > max) {
+      console.error(`MUI: The value provided ${value} is out of range [${min}, ${max}].`);
+    }
+  }
+  return clamp_default(value, min, max);
+}
+function hexToRgb(color) {
+  color = color.slice(1);
+  const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, "g");
+  let colors = color.match(re);
+  if (colors && colors[0].length === 1) {
+    colors = colors.map((n) => n + n);
+  }
+  if (process.env.NODE_ENV !== "production") {
+    if (color.length !== color.trim().length) {
+      console.error(`MUI: The color: "${color}" is invalid. Make sure the color input doesn't contain leading/trailing space.`);
+    }
+  }
+  return colors ? `rgb${colors.length === 4 ? "a" : ""}(${colors.map((n, index) => {
+    return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1e3) / 1e3;
+  }).join(", ")})` : "";
+}
+function decomposeColor(color) {
+  if (color.type) {
+    return color;
+  }
+  if (color.charAt(0) === "#") {
+    return decomposeColor(hexToRgb(color));
+  }
+  const marker = color.indexOf("(");
+  const type = color.substring(0, marker);
+  if (!["rgb", "rgba", "hsl", "hsla", "color"].includes(type)) {
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color}\` color.
+The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` : formatMuiErrorMessage(9, color));
+  }
+  let values = color.substring(marker + 1, color.length - 1);
+  let colorSpace;
+  if (type === "color") {
+    values = values.split(" ");
+    colorSpace = values.shift();
+    if (values.length === 4 && values[3].charAt(0) === "/") {
+      values[3] = values[3].slice(1);
+    }
+    if (!["srgb", "display-p3", "a98-rgb", "prophoto-rgb", "rec-2020"].includes(colorSpace)) {
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.
+The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.` : formatMuiErrorMessage(10, colorSpace));
+    }
+  } else {
+    values = values.split(",");
+  }
+  values = values.map((value) => parseFloat(value));
+  return {
+    type,
+    values,
+    colorSpace
+  };
+}
+function recomposeColor(color) {
+  const {
+    type,
+    colorSpace
+  } = color;
+  let {
+    values
+  } = color;
+  if (type.includes("rgb")) {
+    values = values.map((n, i) => i < 3 ? parseInt(n, 10) : n);
+  } else if (type.includes("hsl")) {
+    values[1] = `${values[1]}%`;
+    values[2] = `${values[2]}%`;
+  }
+  if (type.includes("color")) {
+    values = `${colorSpace} ${values.join(" ")}`;
+  } else {
+    values = `${values.join(", ")}`;
+  }
+  return `${type}(${values})`;
+}
+function alpha(color, value) {
+  color = decomposeColor(color);
+  value = clampWrapper(value);
+  if (color.type === "rgb" || color.type === "hsl") {
+    color.type += "a";
+  }
+  if (color.type === "color") {
+    color.values[3] = `/${value}`;
+  } else {
+    color.values[3] = value;
+  }
+  return recomposeColor(color);
+}
+
 // src/util.ts
 var import_deepmerge = __toESM(require_cjs());
 var merge = (x, y) => {
@@ -139,97 +247,6 @@ var merge = (x, y) => {
 // src/blocklet.ts
 var BLOCKLET_THEME_PREFER_KEY = "blocklet_theme_prefer";
 var DEFAULT_FONTS = ["Roboto", "Helvetica", "Arial", "sans-serif"];
-var paletteLight = {
-  mode: "light",
-  primary: {
-    main: "#00bba7",
-    contrastText: "#fff",
-    light: "#00d5be",
-    dark: "#009689"
-  },
-  secondary: {
-    main: "#00b8db",
-    contrastText: "#fff",
-    light: "#00d3f3",
-    dark: "#0092bb"
-  },
-  error: {
-    main: "#fb2c36",
-    contrastText: "#fff",
-    light: "#ff6467",
-    dark: "#e7000b"
-  },
-  warning: {
-    main: "#ff6900",
-    contrastText: "#fff",
-    light: "#ff8904",
-    dark: "#f54900"
-  },
-  info: {
-    main: "#2b7fff",
-    contrastText: "#fff",
-    light: "#51a2ff",
-    dark: "#155dfc"
-  },
-  success: {
-    main: "#00c950",
-    contrastText: "#fff",
-    light: "#05df72",
-    dark: "#00a63e"
-  },
-  grey: {
-    "50": "#fafafa",
-    "100": "#f4f4f5",
-    "200": "#e4e4e7",
-    "300": "#d4d4d8",
-    "400": "#9f9fa9",
-    "500": "#71717b",
-    "600": "#52525c",
-    "700": "#3f3f47",
-    "800": "#27272a",
-    "900": "#18181b",
-    A100: "#09090b",
-    A200: "#09090b",
-    A400: "#09090b",
-    A700: "#09090b"
-  },
-  text: {
-    primary: "#18181b",
-    secondary: "#71717b",
-    disabled: "#d4d4d8",
-    hint: "#d4d4d8",
-    contrast: "#fff"
-  },
-  divider: "#ececef",
-  background: {
-    default: "#fff",
-    paper: "#fff"
-  },
-  common: {
-    black: "#000",
-    white: "#fff"
-  },
-  action: {
-    active: "rgba(24, 24, 27, 0.54)",
-    hover: "rgba(24, 24, 27, 0.04)",
-    hoverOpacity: 0.04,
-    selected: "rgba(24, 24, 27, 0.08)",
-    selectedOpacity: 0.08,
-    disabled: "rgba(24, 24, 27, 0.26)",
-    disabledBackground: "rgba(24, 24, 27, 0.12)",
-    disabledOpacity: 0.38,
-    focus: "rgba(24, 24, 27, 0.12)",
-    focusOpacity: 0.12,
-    activatedOpacity: 0.12
-  },
-  // @extends palette
-  storeSecondary: { main: "#EBFEFF", contrastText: "#fff" },
-  // 适用于 did 相关的组件, 如果某些产品整体风格是 did 系列, 可以扩展出一个 did 系列的 theme
-  did: {
-    primary: "#4598FA",
-    secondary: "#49C3AD"
-  }
-};
 var shadows = [
   "none",
   "0px 1px 2px 0px rgba(24,24,27,0.06),0px 1px 3px 0px rgba(24,24,27,0.03)",
@@ -258,7 +275,97 @@ var shadows = [
   "0px 12px 48px 0px rgba(24,24,27,0.29),0px 11.5px 26px 0px rgba(24,24,27,0.145)"
 ];
 var BLOCKLET_THEME_LIGHT = {
-  palette: paletteLight,
+  palette: {
+    mode: "light",
+    primary: {
+      main: "#00bba7",
+      contrastText: "#fff",
+      light: "#00d5be",
+      dark: "#009689"
+    },
+    secondary: {
+      main: "#00b8db",
+      contrastText: "#fff",
+      light: "#00d3f3",
+      dark: "#0092bb"
+    },
+    error: {
+      main: "#fb2c36",
+      contrastText: "#fff",
+      light: "#ff6467",
+      dark: "#e7000b"
+    },
+    warning: {
+      main: "#ff6900",
+      contrastText: "#fff",
+      light: "#ff8904",
+      dark: "#f54900"
+    },
+    info: {
+      main: "#2b7fff",
+      contrastText: "#fff",
+      light: "#51a2ff",
+      dark: "#155dfc"
+    },
+    success: {
+      main: "#00c950",
+      contrastText: "#fff",
+      light: "#05df72",
+      dark: "#00a63e"
+    },
+    grey: {
+      "50": "#fafafa",
+      "100": "#f4f4f5",
+      "200": "#e4e4e7",
+      "300": "#d4d4d8",
+      "400": "#9f9fa9",
+      "500": "#71717b",
+      "600": "#52525c",
+      "700": "#3f3f47",
+      "800": "#27272a",
+      "900": "#18181b",
+      A100: "#09090b",
+      A200: "#09090b",
+      A400: "#09090b",
+      A700: "#09090b"
+    },
+    text: {
+      primary: "#18181b",
+      secondary: "#71717b",
+      disabled: "#d4d4d8",
+      hint: "#d4d4d8",
+      contrast: "#fff"
+    },
+    divider: "#ececef",
+    background: {
+      default: "#fff",
+      paper: "#fff"
+    },
+    common: {
+      black: "#000",
+      white: "#fff"
+    },
+    action: {
+      active: "rgba(24, 24, 27, 0.54)",
+      hover: "rgba(24, 24, 27, 0.04)",
+      hoverOpacity: 0.04,
+      selected: "rgba(24, 24, 27, 0.08)",
+      selectedOpacity: 0.08,
+      disabled: "rgba(24, 24, 27, 0.26)",
+      disabledBackground: "rgba(24, 24, 27, 0.12)",
+      disabledOpacity: 0.38,
+      focus: "rgba(24, 24, 27, 0.12)",
+      focusOpacity: 0.12,
+      activatedOpacity: 0.12
+    },
+    // @extends palette
+    storeSecondary: { main: "#EBFEFF", contrastText: "#fff" },
+    // 适用于 did 相关的组件, 如果某些产品整体风格是 did 系列, 可以扩展出一个 did 系列的 theme
+    did: {
+      primary: "#4598FA",
+      secondary: "#49C3AD"
+    }
+  },
   shape: {
     borderRadius: 8
   },
@@ -272,13 +379,13 @@ var BLOCKLET_THEME_LIGHT = {
     allVariants: {
       textTransform: "none"
     },
-    // @extends-start
+    // @deprecated 兼容旧代码，应使用 theme.palette.text 中的色值
     color: {
       // layout/sidebar.js -> Icon/image 加载图片时 color 会影响加载路径
       // 或者如果可以的话直接删掉 typography#color, 文本颜色建议使用 theme.palette.text 中的色值?
       // layout 组件建议重构, sidebar 中建议使用 icon 替换 img (#366)
-      main: paletteLight.grey[900],
-      gray: paletteLight.grey[500]
+      main: "#18181b",
+      gray: "#71717b"
     },
     h1: {
       fontSize: "1.875rem",
@@ -417,13 +524,13 @@ var BLOCKLET_THEME_LIGHT = {
           paddingLeft: 0,
           paddingRight: "30px"
         },
-        head: {
+        head: ({ theme }) => ({
           textTransform: "uppercase",
-          color: paletteLight.grey[900]
-        },
-        body: {
-          color: paletteLight.grey[900]
-        }
+          color: theme.palette.grey[900]
+        }),
+        body: ({ theme }) => ({
+          color: theme.palette.grey[900]
+        })
       }
     },
     MuiTableRow: {
@@ -440,20 +547,20 @@ var BLOCKLET_THEME_LIGHT = {
     },
     MuiTooltip: {
       styleOverrides: {
-        tooltip: {
-          backgroundColor: paletteLight.grey[500],
-          color: paletteLight.text.contrast
-        },
-        arrow: {
-          color: paletteLight.grey[500]
-        }
+        tooltip: ({ theme }) => ({
+          backgroundColor: theme.palette.grey[500],
+          color: theme.palette.text.contrast
+        }),
+        arrow: ({ theme }) => ({
+          color: theme.palette.grey[500]
+        })
       }
     },
     MuiPaper: {
       styleOverrides: {
-        root: {
-          backgroundImage: "none"
-        }
+        root: ({ theme }) => ({
+          boxShadow: `inset 0 0 0 1px ${theme.palette.action.hover}`
+        })
       }
     },
     MuiAlert: {
@@ -478,92 +585,91 @@ var BLOCKLET_THEME_LIGHT = {
     }
   }
 };
-var paletteDark = {
-  mode: "dark",
-  common: {
-    black: "#000",
-    white: "#fff"
-  },
-  primary: {
-    main: "#00d5be",
-    contrastText: "#f4f4f5",
-    light: "#4ce3d0",
-    dark: "#00a89a"
-  },
-  secondary: {
-    main: "#00d3f3",
-    contrastText: "#f4f4f5",
-    light: "#51e1ff",
-    dark: "#00a2c0"
-  },
-  error: {
-    main: "#ff6467",
-    contrastText: "#f4f4f5",
-    light: "#ff9598",
-    dark: "#e7000b"
-  },
-  warning: {
-    main: "#ff8904",
-    contrastText: "#f4f4f5",
-    light: "#ffa644",
-    dark: "#f54900"
-  },
-  info: {
-    main: "#51a2ff",
-    contrastText: "#f4f4f5",
-    light: "#83c3ff",
-    dark: "#1570e5"
-  },
-  success: {
-    main: "#05df72",
-    contrastText: "#f4f4f5",
-    light: "#56e799",
-    dark: "#00b24a"
-  },
-  grey: {
-    "50": "#18181b",
-    "100": "#27272a",
-    "200": "#3f3f47",
-    "300": "#52525c",
-    "400": "#71717b",
-    "500": "#9f9fa9",
-    "600": "#d4d4d8",
-    "700": "#e4e4e7",
-    "800": "#f4f4f5",
-    "900": "#fafafa",
-    A100: "#f8f8fa",
-    A200: "#f8f8fa",
-    A400: "#f8f8fa",
-    A700: "#f8f8fa"
-  },
-  text: {
-    primary: "#ffffff",
-    secondary: "#A1a1aa",
-    disabled: "#52525c",
-    hint: "#71717b",
-    contrast: "#18181b"
-  },
-  divider: "#27272A",
-  background: {
-    default: "#121212",
-    paper: "#18181b"
-  },
-  action: {
-    active: "rgba(255, 255, 255, 0.54)",
-    hover: "rgba(255, 255, 255, 0.08)",
-    hoverOpacity: 0.08,
-    selected: "rgba(255, 255, 255, 0.16)",
-    selectedOpacity: 0.16,
-    disabled: "rgba(255, 255, 255, 0.26)",
-    disabledBackground: "rgba(255, 255, 255, 0.12)",
-    disabledOpacity: 0.38,
-    focus: "rgba(255, 255, 255, 0.12)",
-    focusOpacity: 0.12,
-    activatedOpacity: 0.24
-  }
-};
 var BLOCKLET_THEME_DARK = merge(BLOCKLET_THEME_LIGHT, {
-  palette: paletteDark,
+  palette: {
+    mode: "dark",
+    common: {
+      black: "#000",
+      white: "#fff"
+    },
+    primary: {
+      main: "#00d5be",
+      contrastText: "#f4f4f5",
+      light: "#4ce3d0",
+      dark: "#00a89a"
+    },
+    secondary: {
+      main: "#00d3f3",
+      contrastText: "#f4f4f5",
+      light: "#51e1ff",
+      dark: "#00a2c0"
+    },
+    error: {
+      main: "#ff6467",
+      contrastText: "#f4f4f5",
+      light: "#ff9598",
+      dark: "#e7000b"
+    },
+    warning: {
+      main: "#ff8904",
+      contrastText: "#f4f4f5",
+      light: "#ffa644",
+      dark: "#f54900"
+    },
+    info: {
+      main: "#51a2ff",
+      contrastText: "#f4f4f5",
+      light: "#83c3ff",
+      dark: "#1570e5"
+    },
+    success: {
+      main: "#05df72",
+      contrastText: "#f4f4f5",
+      light: "#56e799",
+      dark: "#00b24a"
+    },
+    grey: {
+      "50": "#18181b",
+      "100": "#27272a",
+      "200": "#3f3f47",
+      "300": "#52525c",
+      "400": "#71717b",
+      "500": "#9f9fa9",
+      "600": "#d4d4d8",
+      "700": "#e4e4e7",
+      "800": "#f4f4f5",
+      "900": "#fafafa",
+      A100: "#f8f8fa",
+      A200: "#f8f8fa",
+      A400: "#f8f8fa",
+      A700: "#f8f8fa"
+    },
+    text: {
+      primary: "#ffffff",
+      secondary: "#A1a1aa",
+      disabled: "#52525c",
+      hint: "#71717b",
+      contrast: "#18181b"
+    },
+    divider: "#27272A",
+    background: {
+      default: "#121212",
+      paper: "#18181b"
+    },
+    action: {
+      active: "rgba(255, 255, 255, 0.54)",
+      hover: "rgba(255, 255, 255, 0.08)",
+      hoverOpacity: 0.08,
+      selected: "rgba(255, 255, 255, 0.16)",
+      selectedOpacity: 0.16,
+      disabled: "rgba(255, 255, 255, 0.26)",
+      disabledBackground: "rgba(255, 255, 255, 0.12)",
+      disabledOpacity: 0.38,
+      focus: "rgba(255, 255, 255, 0.12)",
+      focusOpacity: 0.12,
+      activatedOpacity: 0.24
+    }
+  },
   typography: {
     /** @deprecated */
     color: {
@@ -575,13 +681,13 @@ var BLOCKLET_THEME_DARK = merge(BLOCKLET_THEME_LIGHT, {
   components: {
     MuiTableCell: {
       styleOverrides: {
-        head: {
+        head: ({ theme }) => ({
           textTransform: "uppercase",
-          color: paletteDark.grey[300]
-        },
-        body: {
-          color: paletteDark.grey[300]
-        }
+          color: theme.palette.grey[300]
+        }),
+        body: ({ theme }) => ({
+          color: theme.palette.grey[300]
+        })
       }
     },
     MuiTableRow: {
@@ -595,64 +701,65 @@ var BLOCKLET_THEME_DARK = merge(BLOCKLET_THEME_LIGHT, {
     },
     MuiTooltip: {
       styleOverrides: {
-        tooltip: {
-          backgroundColor: paletteDark.grey[500],
-          color: paletteDark.text.contrast
-        },
-        arrow: {
-          color: paletteDark.grey[500]
-        }
+        tooltip: ({ theme }) => ({
+          backgroundColor: theme.palette.grey[500],
+          color: theme.palette.text.contrast
+        }),
+        arrow: ({ theme }) => ({
+          color: theme.palette.grey[500]
+        })
       }
     },
     MuiPaper: {
       styleOverrides: {
-        root: {
-          boxShadow: shadows[2]
-        }
+        // 暗色模式下，Paper 使用内阴影营造边框效果
+        root: ({ theme }) => ({
+          boxShadow: `inset 0 0 0 1px ${theme.palette.action.hover}`
+        })
       }
     },
     MuiAlert: {
       styleOverrides: {
-        standardError: {
-          backgroundColor: "rgba(255, 100, 103, 0.25)",
-          color: paletteDark.warning.light,
+        standardError: ({ theme }) => ({
+          backgroundColor: alpha(theme.palette.error.main, 0.25),
+          color: theme.palette.warning.light,
           "& .MuiAlert-icon": {
-            color: paletteDark.warning.light
+            color: theme.palette.warning.light
           }
-        },
-        standardInfo: {
-          backgroundColor: "rgba(81, 162, 255, 0.25)",
-          color: paletteDark.info.light,
+        }),
+        standardInfo: ({ theme }) => ({
+          backgroundColor: alpha(theme.palette.info.main, 0.25),
+          color: theme.palette.info.light,
           "& .MuiAlert-icon": {
-            color: paletteDark.info.light
+            color: theme.palette.info.light
           }
-        },
-        standardWarning: {
-          backgroundColor: "rgba(255, 137, 4, 0.25)",
-          color: paletteDark.warning.light,
+        }),
+        standardWarning: ({ theme }) => ({
+          backgroundColor: alpha(theme.palette.warning.main, 0.25),
+          color: theme.palette.warning.light,
           "& .MuiAlert-icon": {
-            color: paletteDark.warning.light
+            color: theme.palette.warning.light
           }
-        },
-        standardSuccess: {
-          backgroundColor: "rgba(5, 223, 114, 0.25)",
-          color: paletteDark.success.light,
+        }),
+        standardSuccess: ({ theme }) => ({
+          backgroundColor: alpha(theme.palette.success.main, 0.25),
+          color: theme.palette.success.light,
           "& .MuiAlert-icon": {
-            color: paletteDark.success.light
+            color: theme.palette.success.light
           }
-        }
+        })
       }
     },
     MuiSwitch: {
       styleOverrides: {
-        switchBase: {
+        switchBase: ({ theme }) => ({
           "&:not(.Mui-checked)": {
             "& + .MuiSwitch-track": {
-              backgroundColor: paletteDark.grey["200"],
+              backgroundColor: theme.palette.grey["200"],
               opacity: 1
             },
             "& > .MuiSwitch-thumb": {
-              backgroundColor: paletteDark.grey["700"]
+              backgroundColor: theme.palette.grey["700"]
             }
           },
           "&.Mui-disabled": {
@@ -660,24 +767,24 @@ var BLOCKLET_THEME_DARK = merge(BLOCKLET_THEME_LIGHT, {
               opacity: 0.3
             },
             "&:not(.Mui-checked) > .MuiSwitch-thumb": {
-              backgroundColor: paletteDark.grey["300"]
+              backgroundColor: theme.palette.grey["300"]
             }
           }
-        }
+        })
       }
     }
   }
 });
 
 // src/did-connect.ts
-var paletteLight2 = {
+var paletteLight = {
   divider: "rgba(18, 22, 24, 0.06)",
   action: {
     hover: "#FAFAFA",
     selected: "#F4F4F5"
   }
 };
-var paletteDark2 = {
+var paletteDark = {
   divider: "rgba(255, 255, 255, 0.06)",
   action: {
     hover: "rgba(255, 255, 255, 0.08)",
@@ -685,10 +792,10 @@ var paletteDark2 = {
   }
 };
 var DID_CONNECT_THEME_LIGHT = merge(BLOCKLET_THEME_LIGHT, {
-  palette: paletteLight2
+  palette: paletteLight
 });
 var DID_CONNECT_THEME_DARK = merge(BLOCKLET_THEME_DARK, {
-  palette: paletteDark2
+  palette: paletteDark
 });
 export {
   BLOCKLET_THEME_DARK,