@blocklet/payment-react 1.18.37 → 1.18.38

package/lib/theme/index.css

@@ -1,20 +1,26 @@
 :root {
   /* Light Theme */
   /* Color */
+  /* background.default */
   --backgrounds-bg-base: #ffffff;
   --backgrounds-bg-base-hover: #f9fafb;
   --backgrounds-bg-base-pressed: #f3f4f6;
+  /* grey.100 */
   --backgrounds-bg-component: #f1f3f5;
   --backgrounds-bg-component-hover: #e5e7eb;
+  /* grey.100 */
   --backgrounds-bg-disabled: #f3f4f6;
+  /* grey.50 */
   --backgrounds-bg-field: #f9fafb;
   --backgrounds-bg-field-hover: #f3f4f6;
   --backgrounds-bg-glass: #ffffffb8;
+  /* grey.100 */
   --backgrounds-bg-highlight: #eff6ff;
   --backgrounds-bg-highlight-hover: #dbeafe;
   --backgrounds-bg-interactive: #3b82f6;
   --backgrounds-bg-interactive-hover: #2563eb;
   --backgrounds-bg-overlay: #03071266;
+  /* grey.50 */
   --backgrounds-bg-subtle: #f9fafb;
   --backgrounds-bg-subtle-hover: #f3f4f6;
   --backgrounds-bg-subtle-pressed: #e5e7eb;
@@ -32,15 +38,21 @@
   --buttons-button-transparent: #ffffff00;
   --buttons-button-transparent-hover: #f3f4f6;
   --buttons-button-transparent-pressed: #e5e7eb;
+  /* grey.A700 */
   --foregrounds-fg-base: #030712;
   --foregrounds-fg-danger: #e11d48;
   --foregrounds-fg-disabled: #d1d5db;
+  /* text.link */
   --foregrounds-fg-interactive: #3b82f6;
   --foregrounds-fg-interactive-hover: #2563eb;
+  /* text.lighter */
   --foregrounds-fg-muted: #9ca3af;
+  /* primary.contrastText */
   --foregrounds-fg-on-color: #ffffff;
   --foregrounds-fg-on-inverted: #ffffff;
   --foregrounds-fg-subtle: #4b5563;
+  /* grey.200 */
+  --foregrounds-fg-border: #e0e0e0;
   --others-spacer: #ffffff00;
   --shadows-card-hover-1: #03071214;
   --shadows-card-hover-2: #03071214;
@@ -75,47 +87,72 @@
   --shadows-switch-handle-7: #03071214;
   --shadows-tooltip-1: #03071214;
   --shadows-tooltip-2: #03071214;
+  /* grey.100 */
   --stroke-border-base: #eff1f5;
   --stroke-border-error: #e11d48;
+  /* secondary.main */
   --stroke-border-interactive: #3b82f6;
   --stroke-border-loud: #030712;
   --stroke-border-strong: #d1d5db;
+  /* grey.200 */
   --stroke-sep: #eff1f5;
+  /* chip.info.background */
   --tags-tag-blue-bg: #dbeafe;
   --tags-tag-blue-bg-hover: #bfdbfe;
+  /* chip.info.border */
   --tags-tag-blue-border: #bfdbfe;
   --tags-tag-blue-icon: #2563eb;
+  /* chip.info.text */
   --tags-tag-blue-text: #1d4ed8;
+  /* chip.success.background */
   --tags-tag-green-bg: #d1fae5;
   --tags-tag-green-bg-hover: #a7f3d0;
+  /* chip.success.border */
   --tags-tag-green-border: #a7f3d0;
   --tags-tag-green-icon: #059669;
+  /* chip.success.text */
   --tags-tag-green-text: #047857;
+  /* chip.default.background */
   --tags-tag-neutral-bg: #f3f4f6;
   --tags-tag-neutral-bg-hover: #e5e7eb;
+  /* chip.default.border */
   --tags-tag-neutral-border: #e5e7eb;
   --tags-tag-neutral-icon: #6b7280;
+  /* chip.default.text */
   --tags-tag-neutral-text: #4b5563;
+  /* chip.warning.background */
   --tags-tag-orange-bg: #fef4c7;
   --tags-tag-orange-bg-hover: #fde68a;
+  /* chip.warning.border */
   --tags-tag-orange-border: #fde68a;
   --tags-tag-orange-icon: #d97706;
+  /* chip.warning.text */
   --tags-tag-orange-text: #b45309;
+  /* chip.secondary.background */
   --tags-tag-purple-bg: #ede9fe;
   --tags-tag-purple-bg-hover: #ddd6fe;
+  /* chip.secondary.border */
   --tags-tag-purple-border: #ddd6fe;
   --tags-tag-purple-icon: #7c3aed;
+  /* chip.secondary.text */
   --tags-tag-purple-text: #6d28d9;
+  /* chip.error.background */
   --tags-tag-red-bg: #ffe4e6;
   --tags-tag-red-bg-hover: #fecdd3;
+  /* chip.error.border */
   --tags-tag-red-border: #fecdd3;
   --tags-tag-red-icon: #e11d48;
+  /* chip.error.text */
   --tags-tag-red-text: #be123c;
   /* Number */
+  /* borderRadius: 0.5 */
   --radius-s: 0.25rem;
+  /* borderRadius: 1 */
   --radius-m: 0.5rem;
+  /* borderRadius: 1.5 */
   --radius-l: 0.75rem;
   --radius-round: 624.9375rem;
+  /* grey.200 */
   --stroke-button-secondary-border: #e5e7eb;
 }
 [data-theme='dark'] {

package/lib/theme/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { typography } from './typography';
 import './index.css';
-import type { PaymentThemeOptions } from '../types';
-export { typography };
+import './types';
+import { typography } from './typography';
+import { type PaymentThemeOptions } from '../types';
 export declare function PaymentThemeProvider({ children, theme: customTheme, }: {
     children: React.ReactNode;
     theme?: PaymentThemeOptions;
@@ -12,3 +12,4 @@ export declare namespace PaymentThemeProvider {
         theme: {};
     };
 }
+export { typography };

package/lib/theme/index.js

@@ -11,14 +11,14 @@ Object.defineProperty(exports, "typography", {
   }
 });
 var _jsxRuntime = require("react/jsx-runtime");
-var _styles = require("@mui/material/styles");
-var _Theme = require("@arcblock/ux/lib/Theme");
-var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-var _merge = _interopRequireDefault(require("lodash/merge"));
 var _material = require("@mui/material");
-var _typography = require("./typography");
+var _Theme = require("@arcblock/ux/lib/Theme");
+var _Util = require("@arcblock/ux/lib/Util");
+var _styles = require("@mui/material/styles");
+var _react = require("react");
 require("./index.css");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+require("./types");
+var _typography = require("./typography");
 PaymentThemeProvider.defaultProps = {
   theme: {}
 };
@@ -31,262 +31,287 @@ function PaymentThemeProvider({
     ...restTheme
   } = customTheme || {};
   const parentTheme = (0, _styles.useTheme)();
-  const rootStyle = getComputedStyle(document.documentElement);
-  const themeOverrides = {
-    shape: {
-      borderRadius: 8
-    },
-    components: {
-      MuiOutlinedInput: {
-        styleOverrides: {
-          root: {
-            borderRadius: "var(--radius-m, 8px)",
-            backgroundColor: "var(--backgrounds-bg-field)",
-            "&.Mui-disabled": {
-              backgroundColor: "var(--backgrounds-bg-disabled)"
-            },
-            ".MuiOutlinedInput-notchedOutline": {
-              borderColor: "var(--stroke-border-base, #EFF1F5)"
-            },
-            ".MuiInputBase-input": {
-              fontSize: "14px",
-              minHeight: "1.65em",
-              lineHeight: "1.65em"
-            },
-            "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-              borderWidth: "1px"
-            }
-          }
-        }
-      },
-      MuiButton: {
-        defaultProps: {
-          size: "small"
-        },
-        styleOverrides: {
-          root: {
-            fontSize: "0.875rem",
-            fontWeight: 500,
-            textTransform: "none",
-            boxShadow: "none"
+  const mergeTheme = (0, _react.useMemo)(() => {
+    const blockletTheme = parentTheme.themeName === "ArcBlock" ? parentTheme : (0, _Theme.create)();
+    const {
+      mode
+    } = blockletTheme.palette;
+    let paymentThemeOptions = (0, _Theme.deepmerge)(blockletTheme, {
+      palette: {
+        chip: {
+          success: {
+            text: mode === "dark" ? "#10b981" : "#047857",
+            background: mode === "dark" ? "#022c22" : "#d1fae5",
+            border: mode === "dark" ? "#064e3b" : "#a7f3d0"
           },
-          containedPrimary: {
-            backgroundColor: "var(--buttons-button-inverted, #010714)",
-            color: "var(--foregrounds-fg-on-color, #fff)",
-            "&:hover": {
-              backgroundColor: "var(--buttons-button-inverted-hover, #1f2937)"
-            }
+          default: {
+            text: mode === "dark" ? "#adb1b8" : "#4b5563",
+            background: mode === "dark" ? "#2e3035" : "#f3f4f6",
+            border: mode === "dark" ? "#3c3f44" : "#e5e7eb"
           },
-          outlinedPrimary: {
-            color: "var(--foregrounds-fg-base, #010714)",
-            borderColor: "var(--stroke-button-secondary-border, #E5E7EB)",
-            "&:hover": {
-              backgroundColor: "var(--buttons-button-neutral-hover, #F3F4F6)",
-              borderColor: "var(--stroke-button-secondary-border, #E5E7EB)"
-            }
+          secondary: {
+            text: mode === "dark" ? "#8b5cf6" : "#6d28d9",
+            background: mode === "dark" ? "#2e1064" : "#ede9fe",
+            border: mode === "dark" ? "#3c3f44" : "#ddd6fe"
           },
-          sizeSmall: {
-            height: 32
-          }
-        }
-      },
-      MuiIconButton: {
-        defaultProps: {
-          size: "small"
-        },
-        styleOverrides: {
-          root: {
-            textTransform: "none"
+          error: {
+            text: mode === "dark" ? "#ff6369" : "#be123c",
+            background: mode === "dark" ? "#4c0519" : "#ffe4e6",
+            border: mode === "dark" ? "#881337" : "#fecdd3"
+          },
+          warning: {
+            text: mode === "dark" ? "#f59e0b" : "#b45309",
+            background: mode === "dark" ? "#451a03" : "#fef4c7",
+            border: mode === "dark" ? "#78350f" : "#fde68a"
           },
-          colorPrimary: {
-            backgroundColor: "#fff"
+          info: {
+            text: mode === "dark" ? "#3b82f6" : "#1d4ed8",
+            background: mode === "dark" ? "#172554" : "#dbeafe",
+            border: mode === "dark" ? "#1e3a8a" : "#bfdbfe"
           }
         }
       },
-      MuiToggleButton: {
-        styleOverrides: {
-          root: {
-            textTransform: "none"
-          }
-        }
+      typography: _typography.typography
+    });
+    const {
+      palette,
+      shape: {
+        borderRadius
       },
-      MuiTab: {
-        styleOverrides: {
-          root: {
-            textTransform: "none",
-            fontSize: "0.875rem"
-          }
+      shadows
+    } = paymentThemeOptions;
+    paymentThemeOptions = (0, _Util.deepmergeAll)([paymentThemeOptions, {
+      palette: {
+        text: {
+          lighter: palette.grey[400],
+          link: palette.secondary.main
         }
-      },
-      MuiTooltip: {
-        defaultProps: {
-          enterTouchDelay: 3e3,
-          leaveTouchDelay: 100
-        },
-        styleOverrides: {
-          tooltip: {
-            fontSize: "0.875rem"
+      }
+    }, {
+      components: {
+        MuiOutlinedInput: {
+          styleOverrides: {
+            root: {
+              borderRadius,
+              backgroundColor: palette.grey[50],
+              "&.Mui-disabled": {
+                backgroundColor: palette.grey[100]
+              },
+              ".MuiOutlinedInput-notchedOutline": {
+                borderColor: palette.grey[100]
+              },
+              ".MuiInputBase-input": {
+                fontSize: "14px",
+                minHeight: "1.65em",
+                lineHeight: "1.65em"
+              },
+              "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                borderWidth: "1px"
+              },
+              "&.MuiInputBase-root:hover .MuiOutlinedInput-notchedOutline": {
+                borderColor: `${palette.primary.main}`
+              }
+            }
           }
-        }
-      },
-      MuiPopover: {
-        styleOverrides: {
-          root: {
-            zIndex: 1200
-          },
-          paper: ({
-            theme
-          }) => ({
-            border: `1px solid ${theme.palette.divider}`,
-            boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
-          })
-        }
-      },
-      MuiCssBaseline: {
-        styleOverrides: {
-          ".base-card": {
-            padding: "20px",
-            borderRadius: "var(--radius-l)",
-            background: "var(--backgrounds-bg-base)",
-            boxShadow: "0px 0px 0px 1px var(--shadows-card-rest-1, rgba(2, 7, 19, 0.08)), 0px 1px 2px -1px var(--shadows-card-rest-2, rgba(2, 7, 19, 0.08)), 0px 2px 4px 0px var(--shadows-card-rest-3, rgba(2, 7, 19, 0.04))"
-          },
-          ".base-label": {
-            color: "var(--foregrounds-fg-base, #010714)",
-            fontSize: "16px",
-            fontWeight: "500",
-            lineHeight: "24px"
+        },
+        MuiButton: {
+          defaultProps: {
+            size: "small"
           },
-          ".base-dialog": {
-            ".MuiPaper-root>.MuiDialogContent-root": {
-              paddingTop: "0"
+          styleOverrides: {
+            root: {
+              fontSize: "0.875rem",
+              fontWeight: 500,
+              textTransform: "none",
+              boxShadow: "none"
+            },
+            sizeSmall: {
+              height: 32
+            },
+            outlinedPrimary: {
+              borderColor: palette.grey[100],
+              "&:hover": {
+                borderColor: palette.grey[100]
+              }
             }
-          },
-          a: {
-            textDecoration: "none !important"
           }
-        }
-      },
-      // MuiButtonBase: {
-      //    styleOverrides: {
-      //    }
-      // },
-      MuiRadio: {
-        styleOverrides: {
-          root: {
-            color: "var(--stroke-border-base, #EFF1F5)",
-            "&:hover": {
-              background: "none"
+        },
+        MuiIconButton: {
+          defaultProps: {
+            size: "small"
+          },
+          styleOverrides: {
+            root: {
+              textTransform: "none"
             },
-            "&.Mui-checked": {
-              color: "var(--foregrounds-fg-interactive, #0086FF)"
+            colorPrimary: {
+              backgroundColor: palette.background.default
             }
           }
-        }
-      },
-      MuiCheckbox: {
-        styleOverrides: {
-          root: {
-            color: "var(--backgrounds-bg-interactive, #0086FF)",
-            "&.Mui-checked": {
-              color: "var(--foregrounds-fg-interactive, #0086FF)"
+        },
+        MuiToggleButton: {
+          styleOverrides: {
+            root: {
+              textTransform: "none"
             }
           }
-        }
-      },
-      MuiDivider: {
-        styleOverrides: {
-          root: {
-            borderColor: "var(--stroke-border-base, #EFF1F5)"
+        },
+        MuiTab: {
+          styleOverrides: {
+            root: {
+              textTransform: "none",
+              fontSize: "0.875rem"
+            }
           }
-        }
-      },
-      MuiInputBase: {
-        defaultProps: {
-          size: "small"
         },
-        styleOverrides: {
-          root: () => ({
-            fontSize: "0.875rem",
-            backgroundColor: "var(--backgrounds-bg-field, #F9FAFB)"
-          })
-        }
-      },
-      MuiInputLabel: {
-        defaultProps: {
-          size: "small"
+        MuiTooltip: {
+          defaultProps: {
+            enterTouchDelay: 3e3,
+            leaveTouchDelay: 100
+          },
+          styleOverrides: {
+            tooltip: {
+              fontSize: "0.875rem"
+            }
+          }
         },
-        styleOverrides: {
-          root: () => ({
-            fontSize: "0.875rem"
-          })
-        }
-      },
-      MuiChip: {
-        styleOverrides: {
-          root: {
-            borderRadius: "var(--radius-S, 4px)",
-            border: "1px solid transparent",
-            "&.MuiChip-filledSuccess": {
-              color: "var(--tags-tag-green-text, #007C52)",
-              backgroundColor: "var(--tags-tag-green-bg, #B7FEE3)",
-              borderColor: "var(--tags-tag-green-border, #63F9CB)"
-            },
-            "&.MuiChip-filledDefault": {
-              color: "var(--tags-tag-neutral-text, #007C52)",
-              backgroundColor: "var(--tags-tag-neutral-bg, #B7FEE3)",
-              borderColor: "var(--tags-tag-neutral-border, #E5E7EB)"
+        MuiPopover: {
+          styleOverrides: {
+            root: {
+              zIndex: 1200
             },
-            "&.MuiChip-filledSecondary": {
-              color: "var(--tags-tag-purple-text, #8118EB)",
-              backgroundColor: " var(--tags-tag-purple-bg, #EFE9FF)",
-              borderColor: "var(--tags-tag-purple-border, #E1D6FF)"
+            paper: {
+              border: `1px solid ${palette.divider}`,
+              boxShadow: shadows[2]
+            }
+          }
+        },
+        MuiCssBaseline: {
+          styleOverrides: {
+            ".base-card": {
+              padding: "20px",
+              borderRadius: 1.5 * borderRadius,
+              // 12px
+              background: palette.background.default,
+              border: `1px solid ${palette.divider}`,
+              boxShadow: shadows[1]
             },
-            "&.MuiChip-filledError": {
-              color: "var(--tags-tag-red-text, #E40031)",
-              backgroundColor: "var(--tags-tag-red-bg, #FFE2E6)",
-              borderColor: "var(--tags-tag-red-border, #FFC8D3)"
+            ".base-label": {
+              color: palette.grey.A700,
+              fontSize: "16px",
+              fontWeight: "500",
+              lineHeight: "24px"
             },
-            "&.MuiChip-filledWarning": {
-              color: "var(--tags-tag-orange-text, #D24000)",
-              backgroundColor: "var(--tags-tag-orange-bg, #FFF4BC)",
-              borderColor: "var(--tags-tag-orange-border, #FFE467)"
+            ".base-dialog": {
+              ".MuiPaper-root>.MuiDialogContent-root": {
+                paddingTop: "0"
+              }
             },
-            "&.MuiChip-filledPrimary,&.MuiChip-filledInfo": {
-              color: "var(--tags-tag-blue-text, #0051E9)",
-              backgroundColor: "var(--tags-tag-blue-bg, #D2ECFF)",
-              borderColor: "var(--tags-tag-blue-border, #AFDDFF)"
+            a: {
+              textDecoration: "none !important"
             }
           }
-        }
-      },
-      MuiDialog: {
-        styleOverrides: {
-          root: {
-            zIndex: 1200
+        },
+        MuiRadio: {
+          styleOverrides: {
+            root: {
+              color: palette.grey[200],
+              "&:hover": {
+                background: "none"
+              },
+              "&.Mui-checked": {
+                color: palette.primary.main
+              }
+            }
+          }
+        },
+        MuiCheckbox: {
+          styleOverrides: {
+            root: {
+              color: palette.primary.main,
+              "&.Mui-checked": {
+                color: palette.primary.main
+              }
+            }
+          }
+        },
+        MuiDivider: {
+          styleOverrides: {
+            root: {
+              borderColor: palette.grey[100]
+            }
+          }
+        },
+        MuiInputBase: {
+          defaultProps: {
+            size: "small"
+          },
+          styleOverrides: {
+            root: {
+              fontSize: "0.875rem",
+              backgroundColor: palette.grey[50]
+            }
+          }
+        },
+        MuiInputLabel: {
+          defaultProps: {
+            size: "small"
+          },
+          styleOverrides: {
+            root: {
+              fontSize: "0.875rem"
+            }
+          }
+        },
+        MuiChip: {
+          styleOverrides: {
+            root: {
+              borderRadius: borderRadius * 0.5,
+              border: "1px solid transparent",
+              "&.MuiChip-filledSuccess": {
+                color: palette.chip.success.text,
+                backgroundColor: palette.chip.success.background,
+                borderColor: palette.chip.success.border
+              },
+              "&.MuiChip-filledDefault": {
+                color: palette.chip.default.text,
+                backgroundColor: palette.chip.default.background,
+                borderColor: palette.chip.default.border
+              },
+              "&.MuiChip-filledSecondary": {
+                color: palette.chip.secondary.text,
+                backgroundColor: palette.chip.secondary.background,
+                borderColor: palette.chip.secondary.border
+              },
+              "&.MuiChip-filledError": {
+                color: palette.chip.error.text,
+                backgroundColor: palette.chip.error.background,
+                borderColor: palette.chip.error.border
+              },
+              "&.MuiChip-filledWarning": {
+                color: palette.chip.warning.text,
+                backgroundColor: palette.chip.warning.background,
+                borderColor: palette.chip.warning.border
+              },
+              "&.MuiChip-filledPrimary,&.MuiChip-filledInfo": {
+                color: palette.chip.info.text,
+                backgroundColor: palette.chip.info.background,
+                borderColor: palette.chip.info.border
+              }
+            }
+          }
+        },
+        MuiDialog: {
+          styleOverrides: {
+            root: {
+              zIndex: 1200
+            }
           }
         }
       }
-    }
-  };
-  const mergeTheme = (0, _Theme.create)((0, _merge.default)((0, _cloneDeep.default)({
-    ...parentTheme,
-    typography: _typography.typography,
-    palette: {
-      primary: {
-        main: rootStyle.getPropertyValue("--foregrounds-fg-base").trim() || "#030712"
-      },
-      text: {
-        primary: rootStyle.getPropertyValue("--foregrounds-fg-base").trim() || "#030712",
-        secondary: rootStyle.getPropertyValue("--foregrounds-fg-subtle").trim() || "#4b5563",
-        lighter: rootStyle.getPropertyValue("--foregrounds-fg-muted").trim() || "#9ca3af",
-        link: rootStyle.getPropertyValue("--foregrounds-fg-interactive").trim() || "#0086FF"
-      },
-      error: {
-        main: rootStyle.getPropertyValue("--foregrounds-fg-danger").trim() || "#FF003B"
-      }
-    },
-    ...themeOverrides
-  }), restTheme));
+    }, restTheme]);
+    return (0, _material.createTheme)(paymentThemeOptions);
+  }, [parentTheme, restTheme]);
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_styles.ThemeProvider, {
     theme: mergeTheme,
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CssBaseline, {}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {