@blocklet/ui-react 2.13.12 → 2.13.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.13.12",
+  "version": "2.13.14",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -34,9 +34,9 @@
   "dependencies": {
     "@abtnode/constant": "^1.16.42",
     "@abtnode/util": "^1.16.42",
-    "@arcblock/bridge": "^2.13.12",
-    "@arcblock/react-hooks": "^2.13.12",
-    "@arcblock/ws": "^1.20.1",
+    "@arcblock/bridge": "^2.13.14",
+    "@arcblock/react-hooks": "^2.13.14",
+    "@arcblock/ws": "^1.20.2",
     "@blocklet/constant": "^1.16.42",
     "@blocklet/did-space-react": "^1.0.48",
     "@iconify-icons/logos": "^1.2.36",
@@ -94,5 +94,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "898e576675cefb8c4738d87f4198271943efec76"
+  "gitHead": "b9f48199169b641a2d3277806501471a56dd496d"
 }

package/src/ComponentInstaller/index.jsx

@@ -1,5 +1,4 @@
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
-import { temp as colors } from '@arcblock/ux/lib/Colors';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import SessionPermission from '@arcblock/ux/lib/SessionPermission';
@@ -86,14 +85,15 @@ function ComponentInstaller({
                     top: 20,
                     right: 20,
                     zIndex: 3000,
-                    borderRadius: 3,
+                    borderRadius: 1.5,
                     width: 400,
                     maxWidth: '90vw',
-                    borderColor: colors.lineStep,
+                    borderColor: 'divider',
                     border: '0 !important',
                     fontSize: '14px',
                     textAlign: 'left',
-                    boxShadow: `0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6}`,
+                    boxShadow: ({ palette }) =>
+                      `0px 8px 16px 0px ${palette.grey[100]}, 0px 0px 0px 1px ${palette.grey[100]}`,
                   }}>
                   {!definedInBlockletYML ? (
                     <Box sx={{ display: 'flex', flexDirection: 'column' }}>
@@ -117,7 +117,7 @@ function ComponentInstaller({
                           </IconButton>
                         ) : null}
                       </Box>
-                      <Box sx={{ width: '100%', height: '1px', backgroundColor: colors.gray6 }} />
+                      <Box sx={{ width: '100%', height: '1px', backgroundColor: 'grey.100' }} />
                       <Box sx={{ padding: '20px 24px', marginTop: 0 }}>
                         {t('componentInstallerNoDefinedInBlockletYML')}: {did}
                       </Box>
@@ -144,7 +144,7 @@ function ComponentInstaller({
                           </IconButton>
                         ) : null}
                       </Box>
-                      <Box sx={{ width: '100%', height: '1px', backgroundColor: colors.gray6 }} />
+                      <Box sx={{ width: '100%', height: '1px', backgroundColor: 'grey.100' }} />
                       <Box sx={{ maxHeight: '70vh', overflowY: 'auto' }}>
                         {optComponents.map((optionalComponent, index) => {
                           return (
@@ -161,7 +161,7 @@ function ComponentInstaller({
                       </Box>
                       {hasPermission ? null : (
                         <>
-                          <Box sx={{ width: '100%', height: '1px', backgroundColor: colors.gray6 }} />
+                          <Box sx={{ width: '100%', height: '1px', backgroundColor: 'grey.100' }} />
                           <Box sx={{ padding: '20px 24px' }}>
                             <Box sx={{ opacity: 1 }}>{t('componentInstallerSuggestions')}</Box>
                           </Box>

package/src/ComponentInstaller/installer-item.jsx

@@ -1,9 +1,9 @@
-import { temp as colors } from '@arcblock/ux/lib/Colors';
 import { Icon } from '@iconify/react';
-import { Box, Button } from '@mui/material';
+import { Box, Button, useTheme } from '@mui/material';
 import PropTypes from 'prop-types';
 
 export default function InstallerItem({ optionalComponent, index, installStatus, hasPermission, t }) {
+  const { palette } = useTheme();
   const handleInstall = () => {
     // 这里是安全的
     window.open(optionalComponent?.installUrl, '_blank');
@@ -23,7 +23,7 @@ export default function InstallerItem({ optionalComponent, index, installStatus,
 
   return (
     <Box>
-      {index === 0 ? null : <Box sx={{ width: '100%', height: '1px', backgroundColor: colors.gray6 }} />}
+      {index === 0 ? null : <Box sx={{ width: '100%', height: '1px', backgroundColor: 'grey.100' }} />}
       <Box
         sx={{
           padding: '20px 24px',
@@ -73,7 +73,7 @@ export default function InstallerItem({ optionalComponent, index, installStatus,
                 className="link-icon"
                 icon="fluent:open-20-filled"
                 style={{
-                  color: colors.primaryBase,
+                  color: palette.primary.main,
                   fontSize: 16,
                   transform: 'translate(6px, 3px)',
                   transition: 'all 0.3s',
@@ -93,8 +93,8 @@ export default function InstallerItem({ optionalComponent, index, installStatus,
                   <Button
                     key="status"
                     disabled
-                    sx={{ color: '#333' }}
-                    startIcon={<Icon icon="line-md:loading-loop" style={{ color: '#333', fontSize: 16 }} />}
+                    sx={{ color: 'text.primary' }}
+                    startIcon={<Icon icon="line-md:loading-loop" style={{ color: 'text.primary', fontSize: 16 }} />}
                     variant="contained">
                     {installStatus}
                   </Button>

package/src/Dashboard/index.jsx

@@ -12,7 +12,7 @@ import { mapRecursive, flatRecursive, matchPaths } from '../utils';
 import { publicPath, formatBlockletInfo, getLocalizedNavigation, filterNavByRole } from '../blocklets';
 import HeaderAddons from '../common/header-addons';
 import { useWalletHiddenTopbar } from '../common/wallet-hidden-topbar';
-import useMobile from '../hooks/use-mobile';
+import useBlockletLogo from '../hooks/use-blocklet-logo';
 
 /**
  * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
@@ -33,7 +33,6 @@ function Dashboard({
   const user = sessionCtx?.session?.user;
   const userRole = user?.role;
   const { locale } = useLocaleContext() || {};
-  const isMobile = useMobile();
   const formattedBlocklet = useMemo(() => {
     const blocklet = Object.assign({}, window.blocklet, meta);
     try {
@@ -86,6 +85,9 @@ function Dashboard({
   }, [formattedBlocklet, locale, userRole]);
 
   const allLinks = typeof links === 'function' ? links(localizedNav) : [...localizedNav, ...links];
+  const appLogo = useBlockletLogo({
+    meta,
+  });
 
   // 页面初始化时, 如果当前用户没有权限访问任何导航菜单 (比如登录时未提供 VC 导致无权限), 则跳转到 fallbackUrl
   // 未认证 (user 为空) 时不做处理, 这种情况的页面跳转逻辑一般由应用自行处理
@@ -113,7 +115,7 @@ function Dashboard({
   if (!formattedBlocklet.appName) {
     return null;
   }
-  const { appLogo, appLogoRect, appName } = formattedBlocklet;
+  const { appName } = formattedBlocklet;
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const _headerAddons = (
     <HeaderAddons
@@ -134,7 +136,7 @@ function Dashboard({
       {...rest}
       headerProps={{
         homeLink: publicPath,
-        logo: <img src={isMobile ? appLogo : appLogoRect || appLogo} alt="logo" />,
+        logo: <img src={appLogo} alt="logo" />,
         addons: _headerAddons,
         ...rest.headerProps,
       }}

package/src/Footer/index.jsx

@@ -4,7 +4,6 @@ import { styled, useTheme, deepmerge, ThemeProvider } from '@arcblock/ux/lib/The
 import { withErrorBoundary } from 'react-error-boundary';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
-import { temp as colors } from '@arcblock/ux/lib/Colors';
 import omit from 'lodash/omit';
 
 import InternalFooter from './internal-footer';
@@ -12,6 +11,7 @@ import { mapRecursive } from '../utils';
 import { formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
 import { BlockletMetaProps } from '../types';
 import withHideWhenEmbed from '../libs/with-hide-when-embed';
+import useBlockletLogo from '../hooks/use-blocklet-logo';
 
 /**
  * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
@@ -30,12 +30,16 @@ function Footer({ meta, theme: themeOverrides, ...rest }) {
   }, [meta]);
 
   const mergeTheme = useMemo(() => deepmerge(parentTheme, themeOverrides), [parentTheme, themeOverrides]);
+  const appLogo = useBlockletLogo({
+    meta,
+    theme: themeOverrides,
+  });
 
   if (!formattedBlocklet.appName) {
     return null;
   }
 
-  const { appLogo, appLogoRect, appName, appDescription, description, copyright } = formattedBlocklet;
+  const { appName, appDescription, description, copyright } = formattedBlocklet;
   const $bgColor = mergeTheme.palette.background.default;
 
   const localized = {
@@ -48,7 +52,7 @@ function Footer({ meta, theme: themeOverrides, ...rest }) {
     brand: {
       name: appName,
       description: appDescription || description,
-      logo: appLogoRect || appLogo,
+      logo: appLogo,
     },
     navigation: mapRecursive(
       localized.footerNav,
@@ -83,8 +87,8 @@ Footer.defaultProps = {
 };
 
 const StyledInternalFooter = styled(InternalFooter)`
-  ${({ $bordered }) => `border-top: 1px solid ${$bordered ? colors.strokeSep : '#eee'};`}
-  color: ${(props) => props.theme.palette.grey[600]};
+  ${({ $bordered, theme }) => `border-top: 1px solid ${$bordered && theme.palette.divider};`}
+  color: ${({ theme }) => theme.palette.grey[400]};
   ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
 `;
 

package/src/Footer/links.jsx

@@ -167,7 +167,7 @@ Links.defaultProps = {
 
 const Root = styled('div')`
   overflow: hidden;
-  color: ${({ theme }) => theme.palette.grey[500]};
+  color: ${({ theme }) => theme.palette.grey[400]};
   .footer-links-inner {
     display: flex;
     justify-content: space-between;

package/src/Footer/social-media.jsx

@@ -1,9 +1,8 @@
 import PropTypes from 'prop-types';
-import { useTheme, styled } from '@arcblock/ux/lib/Theme';
+import { styled } from '@arcblock/ux/lib/Theme';
 import Icon from '../Icon';
 
 export default function SocialMedia({ items, ...rest }) {
-  const theme = useTheme();
   if (!items?.length) {
     return null;
   }
@@ -18,12 +17,7 @@ export default function SocialMedia({ items, ...rest }) {
             target="_blank"
             aria-label={`Social media icon${item.title ? ` for ${item.title}` : ''}`}
             rel="noreferrer">
-            <Icon
-              icon={item.icon || item.title}
-              sx={{ bgcolor: theme.palette.grey[600], color: '#fff' }}
-              size={24}
-              component="span"
-            />
+            <Icon icon={item.icon || item.title} size={24} component="span" />
           </a>
         );
       })}
@@ -52,7 +46,7 @@ const Root = styled('div')`
   justify-content: center;
   gap: 20px;
   a {
-    color: ${(props) => props.theme.palette.grey[500]};
+    color: ${(props) => props.theme.palette.grey[400]};
     text-decoration: none;
     transition: color 0.2s ease-in-out;
     &:hover {

package/src/Header/index.tsx

@@ -6,7 +6,6 @@ import { styled, useTheme, deepmerge, ThemeProvider } from '@arcblock/ux/lib/The
 import { ResponsiveHeader } from '@arcblock/ux/lib/Header';
 import NavMenu, { Products } from '@arcblock/ux/lib/NavMenu';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { temp as colors } from '@arcblock/ux/lib/Colors';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import omit from 'lodash/omit';
 import isFinite from 'lodash/isFinite';
@@ -20,7 +19,7 @@ import HeaderAddons from '../common/header-addons';
 import { useWalletHiddenTopbar } from '../common/wallet-hidden-topbar';
 import { BlockletMetaProps, SessionManagerProps } from '../@types';
 import withHideWhenEmbed from '../libs/with-hide-when-embed';
-import useMobile from '../hooks/use-mobile';
+import useBlockletLogo from '../hooks/use-blocklet-logo';
 
 const translations = {
   en: {
@@ -128,13 +127,15 @@ function Header({
       return blocklet;
     }
   }, [meta]);
-  const isMobileDevice = useMobile();
   const mergeTheme = useMemo(() => deepmerge(parentTheme, themeOverrides), [parentTheme, themeOverrides]);
+  const appLogo = useBlockletLogo({
+    meta,
+    theme: themeOverrides,
+  });
 
   if (!formattedBlocklet.appName) {
     return null;
   }
-  const { appLogo, appLogoRect } = formattedBlocklet;
   const navigation = getLocalizedNavigation(formattedBlocklet?.navigation?.header, locale);
   const parsedNavigation = parseNavigation(navigation);
   const { navItems, activeId } = parsedNavigation;
@@ -169,7 +170,7 @@ function Header({
       <StyledUxHeader
         // @ts-ignore
         homeLink={homeLink}
-        logo={<img src={isMobileDevice ? appLogo : appLogoRect || appLogo} alt="logo" />}
+        logo={<img src={appLogo} alt="logo" />}
         addons={headerAddons}
         {...omit(rest, ['bordered'])}
         $bordered={rest?.bordered}
@@ -205,7 +206,7 @@ const StyledUxHeader = styled(ResponsiveHeader)<StyledUxHeaderProps>`
   .header-logo {
     min-width: 44px;
   }
-  ${({ $bordered }) => ($bordered ? `border-bottom: 1px solid ${colors.strokeSep};` : '')}
+  ${({ $bordered, theme }) => ($bordered ? `border-bottom: 1px solid ${theme.palette.divider};` : '')}
   ${(props) => props.theme.breakpoints.down('md')} {
     .header-logo {
       min-width: 32px;

package/src/Notifications/hooks/use-title.tsx

@@ -1,8 +1,7 @@
 /* eslint-disable react/prop-types */
 import React, { MouseEvent } from 'react';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import { temp as colors } from '@arcblock/ux/lib/Colors';
-import Link from '@mui/material/Link';
+import { useTheme, Link } from '@mui/material';
 import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
 import { joinURL, withQuery } from 'ufo';
 import isEmpty from 'lodash/isEmpty';
@@ -62,13 +61,16 @@ interface CustomMouseEvent extends MouseEvent<HTMLAnchorElement> {
  * UserLink component for rendering a user's name as a profile link
  * Memoized to prevent unnecessary re-renders
  */
-function UserLink({ user, color = colors.textBase }: UserLinkProps) {
+function UserLink({ user, color }: UserLinkProps) {
+  const { palette } = useTheme();
   const profileLink = withQuery(joinURL(WELLKNOWN_SERVICE_PATH_PREFIX, 'user'), { did: user.did });
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const _color = color || palette.text.primary;
 
   return (
     <Link
       href={profileLink}
-      color={color}
+      color={_color}
       fontWeight={600}
       target="_blank"
       sx={{ textDecoration: 'none', '&:hover': { cursor: 'pointer' } }}
@@ -115,9 +117,10 @@ interface ActivityTitleProps {
  * @returns {React.ReactNode} Formatted title with linked usernames
  */
 export default function useActivityTitle({ activity, users, actors, extra = {}, mountPoint = '' }: ActivityTitleProps) {
+  const { palette } = useTheme();
   const { type, target } = activity || {};
   const { type: targetType } = target || {};
-  const { linkColor = colors.textBase } = extra || {};
+  const { linkColor = palette.text.primary } = extra || {};
 
   // Create a map of users by their DID for efficient lookup
   const usersMap = useCreation(() => {

package/src/UserCenter/components/config-profile.tsx

@@ -3,7 +3,6 @@ import { useMemoizedFn, useReactive } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { temp as colors } from '@arcblock/ux/lib/Colors';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import ArrowDownwardIcon from '@arcblock/icons/lib/ArrowDown';
 
@@ -73,11 +72,11 @@ export default function ConfigProfile({ user, onSave }: { user: User; onSave: (t
             minWidth: 300,
             '&:hover': {
               'fieldset.MuiOutlinedInput-notchedOutline': {
-                borderColor: colors.dividerColor,
+                borderColor: 'divider',
               },
             },
             fieldset: {
-              borderColor: colors.dividerColor,
+              borderColor: 'divider',
             },
           }}>
           {(window.blocklet.languages || languages).map((x: { name: string; code: string }) => (

package/src/UserCenter/components/editable-field.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { Box, TextField, Typography, Tooltip, TooltipProps } from '@mui/material';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import { temp as colors } from '@arcblock/ux/lib/Colors';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import VerifiedIcon from '@mui/icons-material/Verified';
@@ -31,21 +30,23 @@ interface EditableFieldProps {
   renderValue?: (value: string) => React.ReactNode;
 }
 
+/** only for sx */
 export const commonInputStyle = {
   '.MuiOutlinedInput-root': {
     '&:hover': {
       fieldset: {
-        borderColor: colors.dividerColor,
+        borderColor: 'divider',
       },
     },
     '&.Mui-focused': {
       fieldset: {
-        borderColor: colors.dividerColor,
+        borderColor: 'divider',
       },
     },
   },
 };
 
+/** only for sx */
 export const inputFieldStyle = {
   width: '100%',
   '& .MuiFormHelperText-root': {
@@ -55,7 +56,7 @@ export const inputFieldStyle = {
     margin: 0,
   },
   fieldset: {
-    borderColor: colors.dividerColor,
+    borderColor: 'divider',
   },
 };
 
@@ -245,7 +246,7 @@ function EditableField({
   return (
     <Box sx={{ width: '100%' }} style={style}>
       {label && (
-        <Typography variant="subtitle1" gutterBottom sx={{ mb: 0.5, fontSize: '12px', color: '#4B5563' }}>
+        <Typography variant="subtitle1" gutterBottom sx={{ mb: 0.5, fontSize: '12px', color: 'text.primary' }}>
           {label}
         </Typography>
       )}

package/src/UserCenter/components/nft.tsx

@@ -1,7 +1,6 @@
 import { Box, Pagination, Skeleton, Typography } from '@mui/material';
 import { useCreation, useMemoizedFn, useReactive, useRequest } from 'ahooks';
 import axios from 'axios';
-import { temp as colors } from '@arcblock/ux/lib/Colors';
 import NFTDisplay from '@arcblock/ux/lib/NFTDisplay';
 import Empty from '@arcblock/ux/lib/Empty';
 import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
@@ -65,7 +64,7 @@ export default function Nft({ user }: { user: User }) {
   const content = useCreation(() => {
     if (loading) {
       const skeletonItems = ['skeleton-1', 'skeleton-2', 'skeleton-3', 'skeleton-4', 'skeleton-5'].map((id) => (
-        <Skeleton key={id} variant="rectangular" width="15%" height={166} sx={{ borderRadius: 2, flexShrink: 0 }} />
+        <Skeleton key={id} variant="rectangular" width="15%" height={166} sx={{ borderRadius: 1, flexShrink: 0 }} />
       ));
 
       return (
@@ -81,7 +80,7 @@ export default function Nft({ user }: { user: User }) {
       <>
         <Typography
           sx={{
-            color: colors.foregroundsFgBase,
+            color: 'grey.A700',
             fontWeight: 600,
             mb: 2.5,
           }}>
@@ -124,5 +123,5 @@ export default function Nft({ user }: { user: User }) {
     );
   }, [loading, dataPage, paging.page, paging.size, handlePageChange]);
 
-  return <Box sx={{ border: `1px solid ${colors.dividerColor}`, borderRadius: 2, p: 2, mb: 5 }}>{content}</Box>;
+  return <Box sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 1, p: 2, mb: 5 }}>{content}</Box>;
 }

package/src/UserCenter/components/notification.tsx

@@ -5,7 +5,6 @@ import { Icon } from '@iconify/react';
 import AddRoundedIcon from '@iconify-icons/material-symbols/add-rounded';
 import Switch from '@arcblock/ux/lib/Switch';
 import Button from '@arcblock/ux/lib/Button';
-import { temp as colors } from '@arcblock/ux/lib/Colors';
 import Toast from '@arcblock/ux/lib/Toast';
 import { getWalletDid } from '@arcblock/ux/lib/SessionUser/libs/utils';
 import { translate } from '@arcblock/ux/lib/Locale/util';
@@ -269,15 +268,13 @@ export default function Notification({ user }: { user: User }) {
           variant="outlined"
           size="small"
           sx={{
-            color: colors.foregroundsFgBase,
-            borderColor: colors.strokeBorderBase,
-            backgroundColor: colors.buttonsButtonNeutral,
+            color: 'text.primary',
+            borderColor: 'divider',
             '&:hover': {
-              borderColor: colors.strokeBorderBase,
-              backgroundColor: colors.buttonsButtonNeutralHover,
+              borderColor: 'divider',
             },
             py: 0.5,
-            borderRadius: 2,
+            borderRadius: 1,
           }}
           startIcon={<Icon icon={AddRoundedIcon} />}
           onClick={() => {

package/src/UserCenter/components/passport.tsx

@@ -2,7 +2,6 @@ import { Box } from '@mui/material';
 import type { BoxProps } from '@mui/material';
 import Empty from '@arcblock/ux/lib/Empty';
 import { useTheme } from '@arcblock/ux/lib/Theme';
-import { temp as colors } from '@arcblock/ux/lib/Colors';
 import PassportItem from '@arcblock/ux/lib/Passport';
 import { PASSPORT_STATUS } from '@arcblock/ux/lib/Util/constant';
 import { useCreation, useMemoizedFn } from 'ahooks';
@@ -47,10 +46,7 @@ export default function Passport({ user, ...rest }: { user: User } & BoxProps) {
   }, [user?.passports]);
 
   const currentRole = useCreation(() => passports?.find((item) => item.name === user.role), [passports, user?.role]);
-
-  const activeColor = useCreation(() => {
-    return theme?.palette?.primary?.main || colors.textBase;
-  }, [theme?.palette?.primary?.main]);
+  const activeColor = theme.palette.primary.main;
 
   if (passports.length === 0) {
     return (
@@ -90,11 +86,11 @@ export default function Passport({ user, ...rest }: { user: User } & BoxProps) {
             '.passport-item__display': {
               width: 166,
               height: 166,
-              borderRadius: 2,
+              borderRadius: 1,
               px: 2,
               display: 'flex',
               justifyContent: 'center',
-              backgroundColor: colors.backgroundsBgComponent,
+              backgroundColor: 'grey.50',
               boxShadow:
                 currentRole && currentRole.role === x.role
                   ? `0px 2px 4px 0px ${activeColor}, 0px 1px 2px -1px ${activeColor}, 0px 0px 0px 1px ${activeColor} !important`

package/src/UserCenter/components/settings.tsx

@@ -6,7 +6,6 @@ import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { mergeSx } from '@arcblock/ux/lib/Util/style';
 
-import colors from '@arcblock/ux/lib/Colors/themes/temp';
 import { translations } from '../libs/locales';
 import Notification from './notification';
 import Privacy from './privacy';
@@ -118,8 +117,9 @@ export default function Settings({
           key={tab.value}
           sx={mergeSx(
             {
-              border: `1px solid ${colors.dividerColor}`,
-              borderRadius: 2,
+              border: '1px solid',
+              borderColor: 'divider',
+              borderRadius: 1,
               p: 2,
               '&:last-child': {
                 mb: 5,
@@ -129,7 +129,7 @@ export default function Settings({
           )}>
           <Typography
             sx={{
-              color: colors.foregroundsFgBase,
+              color: 'text.primary',
               fontWeight: 600,
             }}>
             {tab.label}

package/src/UserCenter/components/status-dialog/index.tsx

@@ -18,7 +18,6 @@ import dayjs from 'dayjs';
 import CloseIcon from '@mui/icons-material/Close';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useMemoizedFn } from 'ahooks';
-import { temp as colors } from '@arcblock/ux/lib/Colors';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import ArrowDownwardIcon from '@arcblock/icons/lib/ArrowDown';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
@@ -33,11 +32,11 @@ const selectStyle = {
   borderRadius: '8px',
   '&:hover': {
     'fieldset.MuiOutlinedInput-notchedOutline': {
-      borderColor: colors.dividerColor,
+      borderColor: 'divider',
     },
   },
   'fieldset.MuiOutlinedInput-notchedOutline': {
-    borderColor: colors.dividerColor,
+    borderColor: 'divider',
     borderRadius: '8px',
   },
   '.MuiSelect-select': {
@@ -113,7 +112,7 @@ export default function StatusDialog({ open, onClose, data, selected, onSelect,
           borderRadius: '8px',
         },
       }}>
-      <DialogTitle sx={{ borderBottom: `1px solid ${colors.dividerColor}` }}>
+      <DialogTitle sx={{ borderBottom: '1px solid', borderColor: 'divider' }}>
         <Typography variant="body1" sx={{ fontSize: '16px !important', mb: 0 }}>
           {t('profile.setStatus')}
         </Typography>
@@ -244,7 +243,7 @@ export default function StatusDialog({ open, onClose, data, selected, onSelect,
           </Box>
         )}
       </DialogContent>
-      <DialogActions sx={{ p: '16px 24px', borderTop: `1px solid ${colors.dividerColor}` }}>
+      <DialogActions sx={{ p: '16px 24px', borderTop: '1px solid', borderColor: 'divider' }}>
         {selected?.value && !changed ? (
           <Button
             sx={{ ...defaultButtonStyle, minWidth: '54px' }}

package/src/UserCenter/components/status-selector/duration-menu.tsx

@@ -1,6 +1,4 @@
-import { Menu, Typography } from '@mui/material';
-import styled from '@emotion/styled';
-import { temp as colors } from '@arcblock/ux/lib/Colors';
+import { Menu, styled, Typography } from '@mui/material';
 import { useState } from 'react';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { useMemoizedFn } from 'ahooks';
@@ -82,6 +80,6 @@ export const MenuDiv = styled(Menu)`
     min-width: 160px;
   }
   .selected {
-    background-color: ${colors.backgroundsBgSubtitle};
+    background-color: ${({ theme }) => theme.palette.grey[50]};
   }
 `;

package/src/UserCenter/components/status-selector/menu-item.tsx

@@ -1,8 +1,6 @@
-import { ListItemIcon, MenuItem, Menu } from '@mui/material';
+import { ListItemIcon, MenuItem, Menu, styled } from '@mui/material';
 import { SvgIconProps } from '@mui/material/SvgIcon';
 import React from 'react';
-import styled from '@emotion/styled';
-import { temp as colors } from '@arcblock/ux/lib/Colors';
 import { UserMetadata } from '../../../@types';
 
 interface StatusMenuItemProps {
@@ -35,7 +33,7 @@ export const StyledMenu = styled(Menu)`
     min-width: 160px;
   }
   .selected {
-    background-color: ${colors.backgroundsBgSubtitle};
+    background-color: ${({ theme }) => theme.palette.grey[50]};
   }
 `;