@blocklet/payment-react 1.18.37 → 1.18.38

package/src/theme/index.tsx

@@ -1,15 +1,14 @@
-import { type Theme, 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 React from 'react';
+import { createTheme, Box, CssBaseline, ThemeOptions, type Palette } from '@mui/material';
+import type { Shape } from '@mui/system';
+import { create as createBlockletTheme, deepmerge } from '@arcblock/ux/lib/Theme';
+import { deepmergeAll } from '@arcblock/ux/lib/Util';
+import { Shadows, ThemeProvider, useTheme } from '@mui/material/styles';
+import React, { useMemo } 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';
 
 PaymentThemeProvider.defaultProps = {
   theme: {},
@@ -25,269 +24,294 @@ export function PaymentThemeProvider({
   // Add defaultProps for customTheme
   const { sx: themeSX = {}, ...restTheme } = customTheme || {};
   const parentTheme = useTheme();
-  const rootStyle = getComputedStyle(document.documentElement);
 
-  const themeOverrides: Partial<Theme> = {
-    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',
-          },
-          containedPrimary: {
-            backgroundColor: 'var(--buttons-button-inverted, #010714)',
-            color: 'var(--foregrounds-fg-on-color, #fff)',
-            '&:hover': {
-              backgroundColor: 'var(--buttons-button-inverted-hover, #1f2937)',
-            },
+  const mergeTheme = useMemo(() => {
+    const blockletTheme = parentTheme.themeName === 'ArcBlock' ? parentTheme : createBlockletTheme();
+    const { mode } = blockletTheme.palette;
+
+    // payment 在 blockletTheme 上扩展自己的配置
+    let paymentThemeOptions: ThemeOptions = deepmerge(blockletTheme, {
+      palette: {
+        chip: {
+          success: {
+            text: mode === 'dark' ? '#10b981' : '#047857',
+            background: mode === 'dark' ? '#022c22' : '#d1fae5',
+            border: mode === 'dark' ? '#064e3b' : '#a7f3d0',
           },
-          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)',
-            },
+          default: {
+            text: mode === 'dark' ? '#adb1b8' : '#4b5563',
+            background: mode === 'dark' ? '#2e3035' : '#f3f4f6',
+            border: mode === 'dark' ? '#3c3f44' : '#e5e7eb',
           },
-          sizeSmall: {
-            height: 32,
+          secondary: {
+            text: mode === 'dark' ? '#8b5cf6' : '#6d28d9',
+            background: mode === 'dark' ? '#2e1064' : '#ede9fe',
+            border: mode === 'dark' ? '#3c3f44' : '#ddd6fe',
           },
-        },
-      },
-      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',
+          warning: {
+            text: mode === 'dark' ? '#f59e0b' : '#b45309',
+            background: mode === 'dark' ? '#451a03' : '#fef4c7',
+            border: mode === 'dark' ? '#78350f' : '#fde68a',
           },
-        },
-      },
-      MuiToggleButton: {
-        styleOverrides: {
-          root: {
-            textTransform: 'none',
+          info: {
+            text: mode === 'dark' ? '#3b82f6' : '#1d4ed8',
+            background: mode === 'dark' ? '#172554' : '#dbeafe',
+            border: mode === 'dark' ? '#1e3a8a' : '#bfdbfe',
           },
         },
       },
-      MuiTab: {
-        styleOverrides: {
-          root: {
-            textTransform: 'none',
-            fontSize: '0.875rem',
+      typography,
+    });
+
+    const {
+      palette,
+      shape: { borderRadius },
+      shadows,
+    } = paymentThemeOptions as { palette: Palette; shape: Shape; shadows: Shadows };
+
+    // 继续扩展
+    paymentThemeOptions = deepmergeAll([
+      paymentThemeOptions,
+      {
+        palette: {
+          text: {
+            lighter: palette.grey[400],
+            link: palette.secondary.main,
           },
         },
       },
-      MuiTooltip: {
-        defaultProps: {
-          enterTouchDelay: 3000,
-          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,
+          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],
+                },
+              },
+            },
           },
-          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))',
+          MuiIconButton: {
+            defaultProps: {
+              size: 'small',
+            },
+            styleOverrides: {
+              root: {
+                textTransform: 'none',
+              },
+              colorPrimary: {
+                backgroundColor: palette.background.default,
+              },
+            },
           },
-          '.base-label': {
-            color: 'var(--foregrounds-fg-base, #010714)',
-            fontSize: '16px',
-            fontWeight: '500',
-            lineHeight: '24px',
+          MuiToggleButton: {
+            styleOverrides: {
+              root: {
+                textTransform: 'none',
+              },
+            },
           },
-          '.base-dialog': {
-            '.MuiPaper-root>.MuiDialogContent-root': {
-              paddingTop: '0',
+          MuiTab: {
+            styleOverrides: {
+              root: {
+                textTransform: 'none',
+                fontSize: '0.875rem',
+              },
             },
           },
-          a: {
-            textDecoration: 'none !important',
+          MuiTooltip: {
+            defaultProps: {
+              enterTouchDelay: 3000,
+              leaveTouchDelay: 100,
+            },
+            styleOverrides: {
+              tooltip: {
+                fontSize: '0.875rem',
+              },
+            },
           },
-        },
-      },
-      // MuiButtonBase: {
-      //    styleOverrides: {
-
-      //    }
-      // },
-      MuiRadio: {
-        styleOverrides: {
-          root: {
-            color: 'var(--stroke-border-base, #EFF1F5)',
-            '&:hover': {
-              background: 'none',
+          MuiPopover: {
+            styleOverrides: {
+              root: {
+                zIndex: 1200,
+              },
+              paper: {
+                border: `1px solid ${palette.divider}`,
+                boxShadow: shadows[2],
+              },
             },
-            '&.Mui-checked': {
-              color: 'var(--foregrounds-fg-interactive, #0086FF)',
+          },
+          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',
+              },
             },
           },
-        },
-      },
-      MuiCheckbox: {
-        styleOverrides: {
-          root: {
-            color: 'var(--backgrounds-bg-interactive, #0086FF)',
-            '&.Mui-checked': {
-              color: 'var(--foregrounds-fg-interactive, #0086FF)',
+          MuiRadio: {
+            styleOverrides: {
+              root: {
+                color: palette.grey[200],
+                '&:hover': {
+                  background: 'none',
+                },
+                '&.Mui-checked': {
+                  color: palette.primary.main,
+                },
+              },
             },
           },
-        },
-      },
-      MuiDivider: {
-        styleOverrides: {
-          root: {
-            borderColor: 'var(--stroke-border-base, #EFF1F5)',
+          MuiCheckbox: {
+            styleOverrides: {
+              root: {
+                color: palette.primary.main,
+                '&.Mui-checked': {
+                  color: palette.primary.main,
+                },
+              },
+            },
           },
-        },
-      },
-      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)',
+          MuiDivider: {
+            styleOverrides: {
+              root: {
+                borderColor: palette.grey[100],
+              },
             },
-            '&.MuiChip-filledDefault': {
-              color: 'var(--tags-tag-neutral-text, #007C52)',
-              backgroundColor: 'var(--tags-tag-neutral-bg, #B7FEE3)',
-              borderColor: 'var(--tags-tag-neutral-border, #E5E7EB)',
+          },
+          MuiInputBase: {
+            defaultProps: {
+              size: 'small',
             },
-            '&.MuiChip-filledSecondary': {
-              color: 'var(--tags-tag-purple-text, #8118EB)',
-              backgroundColor: ' var(--tags-tag-purple-bg, #EFE9FF)',
-              borderColor: 'var(--tags-tag-purple-border, #E1D6FF)',
+            styleOverrides: {
+              root: {
+                fontSize: '0.875rem',
+                backgroundColor: palette.grey[50],
+              },
             },
-            '&.MuiChip-filledError': {
-              color: 'var(--tags-tag-red-text, #E40031)',
-              backgroundColor: 'var(--tags-tag-red-bg, #FFE2E6)',
-              borderColor: 'var(--tags-tag-red-border, #FFC8D3)',
+          },
+          MuiInputLabel: {
+            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',
+              },
             },
-            '&.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)',
+          },
+          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,
+          MuiDialog: {
+            styleOverrides: {
+              root: {
+                zIndex: 1200,
+              },
+            },
           },
         },
       },
-    },
-  };
+      restTheme,
+    ]);
 
-  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',
-          },
-          error: {
-            main: rootStyle.getPropertyValue('--foregrounds-fg-danger').trim() || '#FF003B',
-          },
-        },
-        ...themeOverrides,
-      }),
-      restTheme
-    )
-  );
+    return createTheme(paymentThemeOptions);
+  }, [parentTheme, restTheme]);
 
   return (
     <ThemeProvider theme={mergeTheme}>
@@ -296,3 +320,5 @@ export function PaymentThemeProvider({
     </ThemeProvider>
   );
 }
+
+export { typography };

package/src/theme/types.ts

@@ -0,0 +1,78 @@
+// Extend MUI Theme Types
+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/src/theme/typography.ts

@@ -48,9 +48,4 @@ export const typography: TypographyOptions = {
     fontSize: '0.875rem',
     lineHeight: 1.75,
   },
-
-  fontWeightLight: 300,
-  fontWeightRegular: 400,
-  fontWeightMedium: 500,
-  fontWeightBold: 700,
 };

package/src/types/index.ts

@@ -40,6 +40,7 @@ export type CheckoutFormData = {
 export type PaymentThemeOptions = ThemeOptions & {
   sx?: SxProps;
 };
+
 export type CheckoutProps = Partial<CheckoutCallbacks> & {
   id: string;
   extraParams?: Record<string, any>;