@arcblock/ux 2.13.11 → 2.13.13

package/src/Colors/themes/did-connect.ts

@@ -1,3 +1,8 @@
+import type { Theme } from '@mui/material';
+
+/**
+ * @deprecated 请使用 MUI theme 对象替代
+ */
 const colors = {
   background: {
     overlay: 'rgba(15, 23, 42, 0.5)',
@@ -10,7 +15,7 @@ const colors = {
   text: {
     primary: '#18181B',
     secondary: '#71717B',
-    disable: '#D4D4D8',
+    disabled: '#D4D4D8',
     hint: '#D4D4D8',
   },
   state: {
@@ -23,37 +28,39 @@ const colors = {
     main: '#2B7FFF',
     light: '#51A2FF',
     dark: '#155DFC',
+    contrastText: '#fff',
   },
   secondary: {
     main: '#615FFF',
     light: '#7C86FF',
     dark: '#4F39F6',
+    contrastText: '#fff',
   },
   error: {
     main: '#FB2C36',
     light: '#FF6467',
     dark: '#E7000B',
+    contrastText: '#fff',
   },
   warning: {
     main: '#FF6900',
     light: '#FF8904',
     dark: '#F54900',
+    contrastText: '#fff',
   },
   info: {
     main: '#2B7FFF',
     light: '#51A2FF',
     dark: '#155DFC',
+    contrastText: '#fff',
   },
   success: {
     main: '#00C950',
     light: '#05DF72',
     dark: '#00A63E',
+    contrastText: '#fff',
   },
-  divider: {
-    main: 'rgba(18, 22, 24, 0.06)',
-    light: '#F4F4F5',
-    dark: '#D4D4D5',
-  },
+  divider: 'rgba(18, 22, 24, 0.06)',
 };
 
 export default colors;

package/src/Colors/themes/temp.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated 请使用 MUI theme 对象替代
+ */
 const colors = {
   textMuted: 'rgba(18, 22, 24, 0.36)',
   textSubtitle: 'rgba(18, 22, 24, 0.6)',

package/src/Config/config-provider.tsx

@@ -1,34 +1,33 @@
 import { createContext, useContext, ReactNode, useMemo, useState, useCallback, useEffect } from 'react';
-import { type PaletteMode } from '@mui/material';
-import type { ThemeOptions } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import { ThemeOptions, type PaletteMode } from '@mui/material';
+import { BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
 import set from 'lodash/set';
 import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { LocaleProvider, LocaleProviderProps, useLocaleContext } from '../Locale/context';
 import ThemeProvider, { ThemeProviderProps } from '../Theme/theme-provider';
-import { createTheme, useTheme } from '../Theme';
+import {
+  createTheme,
+  getDefaultThemePrefer,
+  lazyThemeConfig,
+  useTheme,
+  type UserThemeOptions,
+  type ThemeConfig,
+} from '../Theme';
 
 export interface ConfigContextType {
   mode: PaletteMode;
-  themeOptions: ThemeOptions;
+  themeOptions: UserThemeOptions;
   toggleMode: () => void;
 }
 
 const ConfigContext = createContext<ConfigContextType>({} as ConfigContextType);
-const preferThemeModeKey = 'blocklet_theme_prefer';
-
-export function isThemeRecord(
-  theme: ThemeOptions | Record<PaletteMode, ThemeOptions>
-): theme is Record<PaletteMode, ThemeOptions> {
-  return 'light' in theme || 'dark' in theme;
-}
 
 export interface ConfigProviderProps
   extends Omit<LocaleProviderProps, 'translations'>,
     Omit<ThemeProviderProps, 'theme'> {
   children: ReactNode;
   prefer?: PaletteMode;
-  theme?: ThemeOptions | Record<PaletteMode, ThemeOptions>;
+  theme?: UserThemeOptions | ((config: ThemeConfig) => UserThemeOptions);
   disableBlockletTheme?: boolean;
   translations?: Record<string, any>;
 }
@@ -50,33 +49,21 @@ export function ConfigProvider({
   languages,
   onLoadingTranslation,
 }: ConfigProviderProps) {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const [mode, setMode] = useState<PaletteMode>(() => {
     if (prefer) {
       return prefer;
     }
 
-    // 未启用暗色主题
-    if (['1', 'true'].includes(window.blocklet?.USE_DARK_THEME) === false) {
-      return 'light';
-    }
-
-    // 本地缓存
-    const localPrefer = localStorage.getItem(preferThemeModeKey) as PaletteMode;
-    if (localPrefer && (localPrefer === 'light' || localPrefer === 'dark')) {
-      return localPrefer;
-    }
-
-    // 系统偏好
-    return prefersDarkMode ? 'dark' : 'light';
+    return getDefaultThemePrefer();
   });
 
   const _themeOptions = useMemo(() => {
     let result: ThemeOptions = {};
+    const getThemeConfig = lazyThemeConfig(mode);
 
     if (themeOptions) {
-      if (isThemeRecord(themeOptions)) {
-        result = themeOptions[mode] ? { ...themeOptions[mode] } : {};
+      if (typeof themeOptions === 'function') {
+        result = themeOptions(getThemeConfig());
       } else {
         result = { ...themeOptions };
       }
@@ -95,7 +82,7 @@ export function ConfigProvider({
   const toggleMode = useCallback(() => {
     const newMode = mode === 'light' ? 'dark' : 'light';
     setMode(newMode);
-    localStorage.setItem(preferThemeModeKey, newMode);
+    localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
   }, [mode, setMode]);
 
   const config = useMemo(

package/src/Config/theme-mode-toggle.tsx

@@ -15,7 +15,7 @@ export default function ThemeModeToggle() {
   }
 
   return (
-    <IconButton onClick={toggleMode} color="inherit">
+    <IconButton onClick={toggleMode}>
       {mode === 'light' ? <LightModeOutlinedIcon /> : <Brightness2OutlinedIcon />}
     </IconButton>
   );

package/src/DID/index.tsx

@@ -9,7 +9,6 @@ import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 
 import Address, { IDidAddressWrapper } from '../Address';
 import Avatar from '../Avatar';
-import { temp as colors } from '../Colors';
 import { DID_PREFIX } from '../Util/constant';
 
 import { HTMLDidAddressElement } from '../Address/did-address';
@@ -222,7 +221,7 @@ export const DID = forwardRef<HTMLDIDElement, DIDProps>((props, ref) => {
                   flexShrink: 0,
                   cursor: 'pointer',
                   ml: 0.5,
-                  color: 'grey.500',
+                  color: 'text.secondary',
                 }}
               />
             ) : null}
@@ -290,7 +289,7 @@ export function DIDDialog({
           target="_blank"
           rel="noreferrer"
           sx={{
-            color: colors.foregroundsFgInteractive,
+            color: 'secondary.main',
             textDecoration: 'none',
             '&:hover': {
               textDecoration: 'underline',
@@ -371,7 +370,7 @@ export function DIDDialog({
         <Typography
           variant="body2"
           sx={{
-            color: colors.textSubtitle,
+            color: 'text.secondary',
             fontSize: '12px',
             mt: 1,
           }}>

package/src/Datatable/CustomToolbar.jsx

@@ -356,6 +356,7 @@ const Container = styled('div')`
   display: flex;
   align-items: center;
   height: 56px;
+  background-color: ${({ theme }) => theme.palette.background.default};
   .custom-toobar-title {
     position: relative;
     flex: 1;

package/src/Datatable/index.jsx

@@ -488,101 +488,138 @@ const alignCss = css`
   }
 `;
 
-const TableContainer = styled('div', { shouldForwardProp: (prop) => prop !== 'verticalKeyWidth' })`
-  &.datatable-hide-header {
-    thead.MuiTableHead-root {
-      display: none;
-    }
-  }
+const TableContainer = styled('div', { shouldForwardProp: (prop) => prop !== 'verticalKeyWidth' })(({
+  theme,
+  verticalKeyWidth,
+}) => {
+  const primaryTextColor = theme.palette.text.primary;
+  const defaultBgColor = theme.palette.background.default;
+  const hoverBgColor = theme.palette.action.hover;
+  const oddRowBgColor = theme.palette.grey[50];
+
+  const verticalKeyWidthStyle = verticalKeyWidth
+    ? `
+      ${theme.breakpoints.down('md')} {
+        [class*='MUIDataTable-responsiveBase'] {
+          tr:not([class*='responsiveSimple']) {
+            td.MuiTableCell-body {
+              > div {
+                &:first-of-type {
+                  width: ${verticalKeyWidth + (!/\D/.test(verticalKeyWidth) ? 'px' : '')};
+                }
+              }
+            }
+          }
+        }
+      }
+    `
+    : '';
 
-  td {
-    &.vertical-align-top {
-      align-items: flex-start;
-    }
-    &.vertical-align-center {
-      align-items: center;
+  return css`
+    &.datatable-hide-header {
+      thead.MuiTableHead-root {
+        display: none;
+      }
     }
-    &.vertical-align-bottom {
-      align-items: flex-end;
+
+    td {
+      &.vertical-align-top {
+        align-items: flex-start;
+      }
+      &.vertical-align-center {
+        align-items: center;
+      }
+      &.vertical-align-bottom {
+        align-items: flex-end;
+      }
     }
-  }
 
-  height: 100%;
-  > .MuiPaper-root {
-    display: flex;
-    flex-direction: column;
     height: 100%;
-    box-shadow: none;
-  }
-  ${(props) => props.theme.breakpoints.down('md')} {
-    td.MuiTableCell-body {
-      padding-right: 0;
+    > .MuiPaper-root {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      box-shadow: none;
+      background: none;
+      background-color: ${defaultBgColor};
     }
-    [class*='MUIDataTable-responsiveBase'] {
-      tr:not([class*='responsiveSimple']) {
-        td.MuiTableCell-body {
-          display: flex;
-          > div {
-            width: auto;
-            flex: 1;
-            &:first-of-type {
-              font-weight: bold;
-              font-size: 14px;
+    ${theme.breakpoints.down('md')} {
+      td.MuiTableCell-body {
+        padding-right: 0;
+      }
+      [class*='MUIDataTable-responsiveBase'] {
+        tr:not([class*='responsiveSimple']) {
+          td.MuiTableCell-body {
+            display: flex;
+            > div {
               width: auto;
-              flex: 0 0 auto;
-              padding-right: 16px;
-              &:empty {
-                padding-right: 0;
+              flex: 1;
+              &:first-of-type {
+                font-weight: bold;
+                font-size: 14px;
+                width: auto;
+                flex: 0 0 auto;
+                padding-right: 16px;
+                &:empty {
+                  padding-right: 0;
+                }
               }
             }
           }
         }
       }
     }
-  }
-  ${(props) => props.theme.breakpoints.up('md')} {
-    ${alignCss}
-  }
-  ${(props) => props.theme.breakpoints.up('sm')} {
-    [class*='responsiveSimple'] {
+    ${theme.breakpoints.up('md')} {
       ${alignCss}
     }
-  }
+    ${theme.breakpoints.up('sm')} {
+      [class*='responsiveSimple'] {
+        ${alignCss}
+      }
+    }
 
-  ${(inProps) => {
-    if (inProps.verticalKeyWidth) {
-      return `
-        ${inProps.theme.breakpoints.down('md')} {
-          [class*='MUIDataTable-responsiveBase'] {
-            tr:not([class*='responsiveSimple']) {
-              td.MuiTableCell-body {
-                > div {
-                  &:first-of-type {
-                    width: ${inProps.verticalKeyWidth + (!/\D/.test(inProps.verticalKeyWidth) ? 'px' : '')};
-                  }
-                }
-              }
-            }
-          }
-        }
-      `;
+    ${verticalKeyWidthStyle}
+
+    .MuiTableCell-head {
+      color: ${primaryTextColor};
+      background-color: ${defaultBgColor};
     }
 
-    return '';
-  }}
+    .MuiTableCell-root {
+      color: ${primaryTextColor};
+    }
 
-  &.datatable-stripped {
-    .MuiTableBody-root {
-      tr:nth-of-type(odd) {
-        background-color: ${(props) => props.theme.palette.action.hover};
+    .MuiTableRow-root {
+      background-color: ${defaultBgColor};
+      &:nth-of-type(even) {
+        background-color: ${defaultBgColor};
+      }
+      &:hover {
+        background-color: ${hoverBgColor};
+      }
+      &.MuiTableRow-footer {
+        background-color: ${defaultBgColor};
       }
     }
-  }
-`;
+
+    &.datatable-stripped {
+      .MuiTableRow-root:nth-of-type(odd) {
+        background-color: ${oddRowBgColor};
+        &:hover {
+          background-color: ${hoverBgColor};
+        }
+        &.MuiTableRow-footer {
+          background-color: ${defaultBgColor};
+        }
+      }
+    }
+  `;
+});
 
 const FooterContainer = styled('div')`
   display: flex;
   align-items: center;
+  background-color: ${(props) => props.theme.palette.background.default};
   .datatable-footer {
     position: relative;
     margin-left: auto;

package/src/Footer/index.tsx

@@ -77,7 +77,7 @@ const Container = styled('div', {
   position: relative;
   margin-top: 64px;
   padding: 24px 0 32px;
-  border-top: 1px solid ${(props) => (props.dark ? props.theme.palette.grey[900] : '#dee2e7')};
+  border-top: 1px solid ${(props) => props.theme.palette.divider};
   box-sizing: border-box;
   width: 100%;
 
@@ -92,7 +92,7 @@ const Container = styled('div', {
     flex-wrap: wrap;
 
     .footer-item {
-      color: ${({ theme, dark }) => (dark ? theme.palette.grey[500] : theme.palette.grey[900])};
+      color: ${(props) => props.theme.palette.text.hint};
       display: flex;
       align-items: center;
       flex-wrap: wrap;

package/src/Header/header.tsx

@@ -152,7 +152,7 @@ const Root = styled(Box)`
     }
     .header-brand-desc {
       margin-top: 4px;
-      color: #9397a1;
+      color: ${({ theme }) => theme.palette.text.hint};
     }
   }
   .header-brand-addon {

package/src/Header/responsive-header.tsx

@@ -102,6 +102,8 @@ function ResponsiveHeader({ menu, prepend, children, ...rest }: ResponsiveHeader
               top: 64,
               bottom: 0,
               boxShadow: 'none',
+              backgroundImage: 'none',
+              backgroundColor: theme.palette.background.paper,
             },
           }}>
           <MenuPanel>{_children}</MenuPanel>

package/src/Layout/dashboard/index.tsx

@@ -73,6 +73,7 @@ function Dashboard({
   fullWidth = false,
   dense = 'auto',
   footerProps = {},
+  sx,
   children,
   ...rest
 }: DashboardProps) {
@@ -98,7 +99,7 @@ function Dashboard({
   }, []);
 
   return (
-    <Wrapper {...rest} className={classes} sidebarWidth={sidebarWidth}>
+    <Wrapper sx={sx} {...rest} className={classes} sidebarWidth={sidebarWidth}>
       <Helmet title={title} key={title} />
 
       {headerVisible && (
@@ -164,7 +165,7 @@ function Dashboard({
           <Container className="dashboard-content" id="arc__dashboard-content" {...(fullWidth && { maxWidth: false })}>
             {children}
           </Container>
-          {footerVisible && <Footer {...footerProps} />}
+          {footerVisible && <Footer {...{ dark: theme.palette.mode === 'dark', ...footerProps }} />}
         </Box>
       </Box>
     </Wrapper>
@@ -180,6 +181,7 @@ const Wrapper = styled('div', {
     display: flex;
     flex-direction: column;
     height: 100vh;
+    background-color: ${({ theme }) => theme.palette.background.default};
   }
   .dashboard-body {
     overflow: hidden;
@@ -209,11 +211,13 @@ const Wrapper = styled('div', {
   }
   &.dashboard-dense {
     .dashboard-header {
-      border-bottom: 1px solid #eee;
+      border-bottom: 1px solid;
+      border-color: ${({ theme }) => theme.palette.divider};
     }
     .dashboard-sidebar {
       width: 256px;
-      border-right: 1px solid #eee;
+      border-right: 1px solid;
+      border-color: ${({ theme }) => theme.palette.divider};
     }
   }
   ${(props) => props.theme.breakpoints.up('md')} {

package/src/Layout/dashboard/sidebar.tsx

@@ -1,5 +1,4 @@
 import Typography from '@mui/material/Typography';
-import { teal } from '@mui/material/colors';
 import clsx from 'clsx';
 import { styled } from '../../Theme';
 import { NavLink } from './external-link';
@@ -87,7 +86,7 @@ const Root = styled('div')`
     &.layout-sidebar-link--active {
       color: ${(props) => props.theme.palette.primary.main};
       background: ${gradient};
-      border-left-color: ${teal.A700};
+      border-left-color: ${(props) => props.theme.palette.primary.main};
     }
   }
   .layout-sidebar-icon {

package/src/LoadingMask/index.tsx

@@ -1,7 +1,5 @@
 import { Box } from '@mui/material';
 
-import { temp as colors } from '../Colors';
-
 export interface LoadingMaskProps {
   size?: number;
   padding?: number;
@@ -49,7 +47,7 @@ export default function LoadingMask({
           height: finialSize,
           overflow: 'hidden',
           borderRadius: `${finialRadius}px`,
-          backgroundColor: colors.strokeBorderBase,
+          backgroundColor: 'grey.200',
           '&::before,&::after': {
             content: '""',
             position: 'absolute',
@@ -68,7 +66,8 @@ export default function LoadingMask({
             borderRadius: `${finialRadius - finialBorderWidth}px`,
           },
           '&::before': {
-            background: `conic-gradient(from 45deg, ${colors.foregroundsFgInteractiveTransparent} 0%, ${colors.foregroundsFgInteractiveTransparent} 50%, ${colors.foregroundsFgInteractive} 90%, ${colors.foregroundsFgInteractive} 100%)`,
+            background: ({ palette }) =>
+              `conic-gradient(from 45deg, transparent 0%, transparent 50%, ${palette.secondary.main} 90%, ${palette.secondary.main} 100%)`,
             transform: 'scale(100)',
             animation: `rotate ${finialDuration}s linear infinite`,
             '@keyframes rotate': {

package/src/Locale/selector.tsx

@@ -6,7 +6,6 @@ import CheckIcon from '@iconify-icons/material-symbols/check';
 import LanguageIcon from 'iconify-icons-material-symbols-400/language';
 import noop from 'lodash/noop';
 
-import { temp as colors } from '../Colors';
 import { LocaleContext } from './context';
 import { styled, useTheme } from '../Theme';
 import type { Locale } from '../type';
@@ -108,9 +107,9 @@ export default function LocaleSelector(props: LocaleSelectorProps) {
         <Box
           className="locales"
           sx={{
-            backgroundColor: 'background.default',
+            backgroundColor: 'background.paper',
             boxShadow: 2,
-            borderRadius: 2,
+            borderRadius: 1,
           }}>
           <ClickAwayListener onClickAway={onClose}>
             <MenuList>
@@ -138,7 +137,7 @@ export default function LocaleSelector(props: LocaleSelectorProps) {
                       icon={CheckIcon}
                       className={code === locale ? 'check-icon check-icon-visible' : 'check-icon'}
                       sx={{
-                        marginRight: 0.5,
+                        marginRight: 1,
                         visibility: code === locale ? 'visible' : 'hidden',
                       }}
                     />

package/src/NavMenu/nav-menu.tsx

@@ -7,6 +7,7 @@ import { useCreation, useMemoizedFn, useReactive, useSize, useThrottleFn } from
 import { NavMenuProvider, useNavMenuContext } from './nav-menu-context';
 import { NavMenuRoot, NavMenuItem, NavMenuSub, NavMenuSubList, NavMenuStyled } from './style';
 import { SubContainer } from './sub-container';
+import { useTheme } from '../Theme';
 
 // 过滤 children 中的 Item/Sub, 忽略其它类型的 element
 function filterItems(children: React.ReactNode) {
@@ -57,12 +58,16 @@ function NavMenu({
   mode = 'horizontal',
   children: _childs = null,
   activeId = null,
-  textColor = '#9397a1',
-  activeTextColor = '#25292f',
-  bgColor = '#fff',
+  textColor,
+  activeTextColor,
+  bgColor,
   onSelected,
   ...rest
 }: NavMenuProps) {
+  const theme = useTheme();
+  const $textColor = useCreation(() => theme.palette.grey[400], [theme]);
+  const $activeTextColor = useCreation(() => theme.palette.text.primary, [theme]);
+  const $bgColor = useCreation(() => theme.palette.background.default, [theme]);
   // eslint-disable-next-line no-param-reassign
   const children = filterItems(_childs);
   if (!items?.length && !children?.length) {
@@ -89,9 +94,9 @@ function NavMenu({
     return {
       ...currentState,
       mode,
-      textColor,
-      activeTextColor,
-      bgColor,
+      textColor: $textColor,
+      activeTextColor: $activeTextColor,
+      bgColor: $bgColor,
       activate,
       open,
       close,
@@ -101,9 +106,9 @@ function NavMenu({
     currentState.hiddenItemCount,
     currentState.openedIds,
     mode,
-    textColor,
-    activeTextColor,
-    bgColor,
+    $textColor,
+    $activeTextColor,
+    $bgColor,
     activate,
     open,
     close,
@@ -259,7 +264,7 @@ function NavMenu({
 
   return (
     <NavMenuProvider value={contextValue}>
-      <NavMenuStyled {...rest} className={classes} $textColor={textColor} $bgColor={bgColor}>
+      <NavMenuStyled {...rest} className={classes} $textColor={$textColor} $bgColor={$bgColor}>
         <NavMenuRoot className={clsx('navmenu-root', `navmenu-root--${mode}`)} ref={navMenuRef}>
           {items ? items.map((item, index) => renderItem(item, index)) : renderChildrenWithRef(children || [])}
           {currentState.hiddenItemCount > 0 && (

package/src/NavMenu/products.tsx

@@ -162,7 +162,7 @@ const Wrapper = styled(Box)`
   width: 80vw;
   max-width: 900px;
   padding: 8px;
-  background: #f7f9fc;
+  background: ${({ theme }) => theme.palette.grey[100]};
   border-radius: 8px;
 
   &.is-inline {