@blocklet/payment-react 1.18.37 → 1.18.39

package/es/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/es/theme/index.js

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createTheme, Box, CssBaseline } from "@mui/material";
+import { create as createBlockletTheme, deepmerge } from "@arcblock/ux/lib/Theme";
+import { deepmergeAll } from "@arcblock/ux/lib/Util";
 import { ThemeProvider, useTheme } from "@mui/material/styles";
-import { create } from "@arcblock/ux/lib/Theme";
-import cloneDeep from "lodash/cloneDeep";
-import merge from "lodash/merge";
-import { Box, CssBaseline } from "@mui/material";
-import { typography } from "./typography.js";
+import { useMemo } from "react";
 import "./index.css";
-export { typography };
+import "./types";
+import { typography } from "./typography.js";
 PaymentThemeProvider.defaultProps = {
   theme: {}
 };
@@ -16,267 +16,291 @@ export function PaymentThemeProvider({
 }) {
   const { sx: themeSX = {}, ...restTheme } = customTheme || {};
   const parentTheme = 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 = useMemo(() => {
+    const blockletTheme = parentTheme.themeName === "ArcBlock" ? parentTheme : createBlockletTheme();
+    const { mode } = blockletTheme.palette;
+    let paymentThemeOptions = 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"
           },
-          colorPrimary: {
-            backgroundColor: "#fff"
-          }
-        }
-      },
-      MuiToggleButton: {
-        styleOverrides: {
-          root: {
-            textTransform: "none"
-          }
-        }
-      },
-      MuiTab: {
-        styleOverrides: {
-          root: {
-            textTransform: "none",
-            fontSize: "0.875rem"
+          warning: {
+            text: mode === "dark" ? "#f59e0b" : "#b45309",
+            background: mode === "dark" ? "#451a03" : "#fef4c7",
+            border: mode === "dark" ? "#78350f" : "#fde68a"
+          },
+          info: {
+            text: mode === "dark" ? "#3b82f6" : "#1d4ed8",
+            background: mode === "dark" ? "#172554" : "#dbeafe",
+            border: mode === "dark" ? "#1e3a8a" : "#bfdbfe"
           }
         }
       },
-      MuiTooltip: {
-        defaultProps: {
-          enterTouchDelay: 3e3,
-          leaveTouchDelay: 100
-        },
-        styleOverrides: {
-          tooltip: {
-            fontSize: "0.875rem"
+      typography
+    });
+    const {
+      palette,
+      shape: { borderRadius },
+      shadows
+    } = paymentThemeOptions;
+    paymentThemeOptions = deepmergeAll([
+      paymentThemeOptions,
+      {
+        palette: {
+          text: {
+            lighter: palette.grey[400],
+            link: palette.secondary.main
           }
         }
       },
-      MuiPopover: {
-        styleOverrides: {
-          root: {
-            zIndex: 1200
+      {
+        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}`
+                }
+              }
+            }
           },
-          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))"
+          MuiButton: {
+            defaultProps: {
+              size: "small"
+            },
+            styleOverrides: {
+              root: {
+                fontSize: "0.875rem",
+                fontWeight: 500,
+                textTransform: "none",
+                boxShadow: "none"
+              },
+              sizeSmall: {
+                height: 32
+              },
+              outlinedPrimary: {
+                borderColor: palette.grey[100],
+                "&:hover": {
+                  borderColor: palette.grey[100]
+                }
+              }
+            }
           },
-          ".base-label": {
-            color: "var(--foregrounds-fg-base, #010714)",
-            fontSize: "16px",
-            fontWeight: "500",
-            lineHeight: "24px"
+          MuiIconButton: {
+            defaultProps: {
+              size: "small"
+            },
+            styleOverrides: {
+              root: {
+                textTransform: "none"
+              },
+              colorPrimary: {
+                backgroundColor: palette.background.default
+              }
+            }
           },
-          ".base-dialog": {
-            ".MuiPaper-root>.MuiDialogContent-root": {
-              paddingTop: "0"
+          MuiToggleButton: {
+            styleOverrides: {
+              root: {
+                textTransform: "none"
+              }
             }
           },
-          a: {
-            textDecoration: "none !important"
-          }
-        }
-      },
-      // MuiButtonBase: {
-      //    styleOverrides: {
-      //    }
-      // },
-      MuiRadio: {
-        styleOverrides: {
-          root: {
-            color: "var(--stroke-border-base, #EFF1F5)",
-            "&:hover": {
-              background: "none"
+          MuiTab: {
+            styleOverrides: {
+              root: {
+                textTransform: "none",
+                fontSize: "0.875rem"
+              }
+            }
+          },
+          MuiTooltip: {
+            defaultProps: {
+              enterTouchDelay: 3e3,
+              leaveTouchDelay: 100
             },
-            "&.Mui-checked": {
-              color: "var(--foregrounds-fg-interactive, #0086FF)"
+            styleOverrides: {
+              tooltip: {
+                fontSize: "0.875rem"
+              }
             }
-          }
-        }
-      },
-      MuiCheckbox: {
-        styleOverrides: {
-          root: {
-            color: "var(--backgrounds-bg-interactive, #0086FF)",
-            "&.Mui-checked": {
-              color: "var(--foregrounds-fg-interactive, #0086FF)"
+          },
+          MuiPopover: {
+            styleOverrides: {
+              root: {
+                zIndex: 1200
+              },
+              paper: {
+                border: `1px solid ${palette.divider}`,
+                boxShadow: shadows[2]
+              }
             }
-          }
-        }
-      },
-      MuiDivider: {
-        styleOverrides: {
-          root: {
-            borderColor: "var(--stroke-border-base, #EFF1F5)"
-          }
-        }
-      },
-      MuiInputBase: {
-        defaultProps: {
-          size: "small"
-        },
-        styleOverrides: {
-          root: () => ({
-            fontSize: "0.875rem",
-            backgroundColor: "var(--backgrounds-bg-field, #F9FAFB)"
-          })
-        }
-      },
-      MuiInputLabel: {
-        defaultProps: {
-          size: "small"
-        },
-        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)"
-            },
-            "&.MuiChip-filledSecondary": {
-              color: "var(--tags-tag-purple-text, #8118EB)",
-              backgroundColor: " var(--tags-tag-purple-bg, #EFE9FF)",
-              borderColor: "var(--tags-tag-purple-border, #E1D6FF)"
-            },
-            "&.MuiChip-filledError": {
-              color: "var(--tags-tag-red-text, #E40031)",
-              backgroundColor: "var(--tags-tag-red-bg, #FFE2E6)",
-              borderColor: "var(--tags-tag-red-border, #FFC8D3)"
+          },
+          MuiCssBaseline: {
+            styleOverrides: {
+              ".base-card": {
+                padding: "20px",
+                borderRadius: 1.5 * borderRadius,
+                // 12px
+                background: palette.background.default,
+                border: `1px solid ${palette.divider}`,
+                boxShadow: shadows[1]
+              },
+              ".base-label": {
+                color: palette.grey.A700,
+                fontSize: "16px",
+                fontWeight: "500",
+                lineHeight: "24px"
+              },
+              ".base-dialog": {
+                ".MuiPaper-root>.MuiDialogContent-root": {
+                  paddingTop: "0"
+                }
+              },
+              a: {
+                textDecoration: "none !important"
+              }
+            }
+          },
+          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"
             },
-            "&.MuiChip-filledWarning": {
-              color: "var(--tags-tag-orange-text, #D24000)",
-              backgroundColor: "var(--tags-tag-orange-bg, #FFF4BC)",
-              borderColor: "var(--tags-tag-orange-border, #FFE467)"
+            styleOverrides: {
+              root: {
+                fontSize: "0.875rem",
+                backgroundColor: palette.grey[50]
+              }
+            }
+          },
+          MuiInputLabel: {
+            defaultProps: {
+              size: "small"
             },
-            "&.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)"
+            styleOverrides: {
+              root: {
+                fontSize: "0.875rem"
+              }
             }
-          }
-        }
-      },
-      MuiDialog: {
-        styleOverrides: {
-          root: {
-            zIndex: 1200
-          }
-        }
-      }
-    }
-  };
-  const mergeTheme = create(
-    merge(
-      cloneDeep({
-        ...parentTheme,
-        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"
+          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
+                }
+              }
+            }
           },
-          error: {
-            main: rootStyle.getPropertyValue("--foregrounds-fg-danger").trim() || "#FF003B"
+          MuiDialog: {
+            styleOverrides: {
+              root: {
+                zIndex: 1200
+              }
+            }
           }
-        },
-        ...themeOverrides
-      }),
+        }
+      },
       restTheme
-    )
-  );
+    ]);
+    return createTheme(paymentThemeOptions);
+  }, [parentTheme, restTheme]);
   return /* @__PURE__ */ jsxs(ThemeProvider, { theme: mergeTheme, children: [
     /* @__PURE__ */ jsx(CssBaseline, {}),
     /* @__PURE__ */ jsx(Box, { sx: { height: "100%", ...themeSX }, children })
   ] });
 }
+export { typography };

package/es/theme/types.d.ts

@@ -0,0 +1,76 @@
+import '@blocklet/theme';
+import '@mui/material/styles';
+declare module '@mui/material/styles' {
+    interface Palette {
+        chip: {
+            success: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            default: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            secondary: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            error: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            warning: {
+                text: string;
+                background: string;
+                border: string;
+            };
+            info: {
+                text: string;
+                background: string;
+                border: string;
+            };
+        };
+    }
+    interface PaletteOptions {
+        chip?: {
+            success?: {
+                text?: string;
+                background?: string;
+                border?: string;
+            };
+            default?: {
+                text?: string;
+                background?: string;
+                border?: string;
+            };
+            secondary?: {
+                text?: string;
+                background?: string;
+                border?: string;
+            };
+            error?: {
+                text?: string;
+                background?: string;
+                border?: string;
+            };
+            warning?: {
+                text?: string;
+                background?: string;
+                border?: string;
+            };
+            info?: {
+                text?: string;
+                background?: string;
+                border?: string;
+            };
+        };
+    }
+    interface TypeText {
+        lighter?: string;
+        link?: string;
+    }
+}

package/es/theme/types.js

@@ -0,0 +1,2 @@
+import "@blocklet/theme";
+import "@mui/material/styles";

package/es/theme/typography.js

@@ -45,9 +45,5 @@ export const typography = {
   body1: {
     fontSize: "0.875rem",
     lineHeight: 1.75
-  },
-  fontWeightLight: 300,
-  fontWeightRegular: 400,
-  fontWeightMedium: 500,
-  fontWeightBold: 700
+  }
 };