@blocklet/ui-react 2.13.11 → 2.13.13

package/lib/ComponentInstaller/index.js

@@ -1,6 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 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";
@@ -80,14 +79,14 @@ function ComponentInstaller({
                 top: 20,
                 right: 20,
                 zIndex: 3e3,
-                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]}`
               },
               children: !definedInBlockletYML ? /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column" }, children: [
                 /* @__PURE__ */ jsxs(
@@ -109,7 +108,7 @@ function ComponentInstaller({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx(Box, { sx: { width: "100%", height: "1px", backgroundColor: colors.gray6 } }),
+                /* @__PURE__ */ jsx(Box, { sx: { width: "100%", height: "1px", backgroundColor: "grey.100" } }),
                 /* @__PURE__ */ jsxs(Box, { sx: { padding: "20px 24px", marginTop: 0 }, children: [
                   t("componentInstallerNoDefinedInBlockletYML"),
                   ": ",
@@ -135,7 +134,7 @@ function ComponentInstaller({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx(Box, { sx: { width: "100%", height: "1px", backgroundColor: colors.gray6 } }),
+                /* @__PURE__ */ jsx(Box, { sx: { width: "100%", height: "1px", backgroundColor: "grey.100" } }),
                 /* @__PURE__ */ jsx(Box, { sx: { maxHeight: "70vh", overflowY: "auto" }, children: optComponents.map((optionalComponent, index) => {
                   return /* @__PURE__ */ jsx(
                     InstallerItem,
@@ -150,7 +149,7 @@ function ComponentInstaller({
                   );
                 }) }),
                 hasPermission ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(Box, { sx: { width: "100%", height: "1px", backgroundColor: colors.gray6 } }),
+                  /* @__PURE__ */ jsx(Box, { sx: { width: "100%", height: "1px", backgroundColor: "grey.100" } }),
                   /* @__PURE__ */ jsx(Box, { sx: { padding: "20px 24px" }, children: /* @__PURE__ */ jsx(Box, { sx: { opacity: 1 }, children: t("componentInstallerSuggestions") }) })
                 ] })
               ] })

package/lib/ComponentInstaller/installer-item.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-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");
   };
@@ -16,7 +16,7 @@ export default function InstallerItem({ optionalComponent, index, installStatus,
   const installStatusDone = installStatus === "stopped" || installStatus === "running";
   const size = 60;
   return /* @__PURE__ */ jsxs(Box, { children: [
-    index === 0 ? null : /* @__PURE__ */ jsx(Box, { sx: { width: "100%", height: "1px", backgroundColor: colors.gray6 } }),
+    index === 0 ? null : /* @__PURE__ */ jsx(Box, { sx: { width: "100%", height: "1px", backgroundColor: "grey.100" } }),
     /* @__PURE__ */ jsxs(
       Box,
       {
@@ -83,7 +83,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"
@@ -101,8 +101,8 @@ export default function InstallerItem({ optionalComponent, index, installStatus,
                   Button,
                   {
                     disabled: true,
-                    sx: { color: "#333" },
-                    startIcon: /* @__PURE__ */ jsx(Icon, { icon: "line-md:loading-loop", style: { color: "#333", fontSize: 16 } }),
+                    sx: { color: "text.primary" },
+                    startIcon: /* @__PURE__ */ jsx(Icon, { icon: "line-md:loading-loop", style: { color: "text.primary", fontSize: 16 } }),
                     variant: "contained",
                     children: installStatus
                   },

package/lib/Dashboard/index.js

@@ -11,7 +11,7 @@ import { mapRecursive, flatRecursive, matchPaths } from "../utils.js";
 import { publicPath, formatBlockletInfo, getLocalizedNavigation, filterNavByRole } from "../blocklets.js";
 import HeaderAddons from "../common/header-addons.js";
 import { useWalletHiddenTopbar } from "../common/wallet-hidden-topbar.js";
-import useMobile from "../hooks/use-mobile.js";
+import useBlockletLogo from "../hooks/use-blocklet-logo.js";
 function Dashboard({
   meta,
   fallbackUrl,
@@ -27,7 +27,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 {
@@ -71,6 +70,9 @@ function Dashboard({
     return { localizedNav: localizedNav2, flattened: flattened2, matchedIndex: matchedIndex2 };
   }, [formattedBlocklet, locale, userRole]);
   const allLinks = typeof links === "function" ? links(localizedNav) : [...localizedNav, ...links];
+  const appLogo = useBlockletLogo({
+    meta
+  });
   useLayoutEffect(() => {
     if (!!user && !flattened?.length && fallbackUrl) {
       window.location.href = fallbackUrl;
@@ -87,7 +89,7 @@ function Dashboard({
   if (!formattedBlocklet.appName) {
     return null;
   }
-  const { appLogo, appLogoRect, appName } = formattedBlocklet;
+  const { appName } = formattedBlocklet;
   const _headerAddons = /* @__PURE__ */ jsx(
     HeaderAddons,
     {
@@ -108,7 +110,7 @@ function Dashboard({
       ...rest,
       headerProps: {
         homeLink: publicPath,
-        logo: /* @__PURE__ */ jsx("img", { src: isMobile ? appLogo : appLogoRect || appLogo, alt: "logo" }),
+        logo: /* @__PURE__ */ jsx("img", { src: appLogo, alt: "logo" }),
         addons: _headerAddons,
         ...rest.headerProps
       }

package/lib/Footer/index.js

@@ -5,13 +5,13 @@ 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.js";
 import { mapRecursive } from "../utils.js";
 import { formatBlockletInfo, getLocalizedNavigation } from "../blocklets.js";
 import { BlockletMetaProps } from "../types.js";
 import withHideWhenEmbed from "../libs/with-hide-when-embed.js";
+import useBlockletLogo from "../hooks/use-blocklet-logo.js";
 function Footer({ meta, theme: themeOverrides, ...rest }) {
   const { locale } = useLocaleContext() || {};
   const parentTheme = useTheme();
@@ -25,10 +25,14 @@ 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 = {
     footerNav: getLocalizedNavigation(formattedBlocklet?.navigation?.footer, locale) || [],
@@ -39,7 +43,7 @@ function Footer({ meta, theme: themeOverrides, ...rest }) {
     brand: {
       name: appName,
       description: appDescription || description,
-      logo: appLogoRect || appLogo
+      logo: appLogo
     },
     navigation: mapRecursive(
       localized.footerNav,
@@ -66,8 +70,8 @@ Footer.defaultProps = {
   theme: null
 };
 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};`}
 `;
 export default withErrorBoundary(withHideWhenEmbed(Footer), {

package/lib/Footer/links.js

@@ -128,7 +128,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/lib/Footer/social-media.js

@@ -1,9 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import PropTypes from "prop-types";
-import { useTheme, styled } from "@arcblock/ux/lib/Theme";
+import { styled } from "@arcblock/ux/lib/Theme";
 import Icon from "../Icon/index.js";
 export default function SocialMedia({ items, ...rest }) {
-  const theme = useTheme();
   if (!items?.length) {
     return null;
   }
@@ -15,15 +14,7 @@ export default function SocialMedia({ items, ...rest }) {
         target: "_blank",
         "aria-label": `Social media icon${item.title ? ` for ${item.title}` : ""}`,
         rel: "noreferrer",
-        children: /* @__PURE__ */ jsx(
-          Icon,
-          {
-            icon: item.icon || item.title,
-            sx: { bgcolor: theme.palette.grey[600], color: "#fff" },
-            size: 24,
-            component: "span"
-          }
-        )
+        children: /* @__PURE__ */ jsx(Icon, { icon: item.icon || item.title, size: 24, component: "span" })
       },
       i
     );
@@ -48,7 +39,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/lib/Header/index.js

@@ -7,7 +7,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";
@@ -18,7 +17,7 @@ import { publicPath, formatBlockletInfo, getLocalizedNavigation } from "../block
 import HeaderAddons from "../common/header-addons.js";
 import { useWalletHiddenTopbar } from "../common/wallet-hidden-topbar.js";
 import withHideWhenEmbed from "../libs/with-hide-when-embed.js";
-import useMobile from "../hooks/use-mobile.js";
+import useBlockletLogo from "../hooks/use-blocklet-logo.js";
 const translations = {
   en: {
     products: "Products"
@@ -89,12 +88,14 @@ 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;
@@ -123,7 +124,7 @@ function Header({
     StyledUxHeader,
     {
       homeLink,
-      logo: /* @__PURE__ */ jsx("img", { src: isMobileDevice ? appLogo : appLogoRect || appLogo, alt: "logo" }),
+      logo: /* @__PURE__ */ jsx("img", { src: appLogo, alt: "logo" }),
       addons: headerAddons,
       ...omit(rest, ["bordered"]),
       $bordered: rest?.bordered,
@@ -152,7 +153,7 @@ const StyledUxHeader = styled(ResponsiveHeader)`
   .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/lib/Notifications/hooks/use-title.js

@@ -1,8 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React 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";
@@ -40,13 +39,15 @@ const ACTIVITY_DESCRIPTIONS = {
   ] }),
   assign: () => /* @__PURE__ */ jsx(Fragment, { children: "assigned you a task" })
 };
-function UserLink({ user, color = colors.textBase }) {
+function UserLink({ user, color }) {
+  const { palette } = useTheme();
   const profileLink = withQuery(joinURL(WELLKNOWN_SERVICE_PATH_PREFIX, "user"), { did: user.did });
+  const _color = color || palette.text.primary;
   return /* @__PURE__ */ jsx(
     Link,
     {
       href: profileLink,
-      color,
+      color: _color,
       fontWeight: 600,
       target: "_blank",
       sx: { textDecoration: "none", "&:hover": { cursor: "pointer" } },
@@ -59,9 +60,10 @@ function UserLink({ user, color = colors.textBase }) {
 }
 UserLink.displayName = "UserLink";
 export default function useActivityTitle({ activity, users, actors, extra = {}, mountPoint = "" }) {
+  const { palette } = useTheme();
   const { type, target } = activity || {};
   const { type: targetType } = target || {};
-  const { linkColor = colors.textBase } = extra || {};
+  const { linkColor = palette.text.primary } = extra || {};
   const usersMap = useCreation(() => {
     if (!Array.isArray(users))
       return /* @__PURE__ */ new Map();

package/lib/UserCenter/components/config-profile.js

@@ -4,7 +4,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";
 import ArrowDownwardIcon from "@arcblock/icons/lib/ArrowDown";
 import { translations } from "../libs/locales.js";
 import { client } from "../../libs/client.js";
@@ -74,11 +73,11 @@ export default function ConfigProfile({ user, onSave }) {
                 minWidth: 300,
                 "&:hover": {
                   "fieldset.MuiOutlinedInput-notchedOutline": {
-                    borderColor: colors.dividerColor
+                    borderColor: "divider"
                   }
                 },
                 fieldset: {
-                  borderColor: colors.dividerColor
+                  borderColor: "divider"
                 }
               },
               children: (window.blocklet.languages || languages).map((x) => /* @__PURE__ */ jsx(MenuItem, { value: x.code, children: x.name }, x.code))

package/lib/UserCenter/components/editable-field.d.ts

@@ -22,6 +22,7 @@ interface EditableFieldProps {
     hidePreview?: boolean;
     renderValue?: (value: string) => React.ReactNode;
 }
+/** only for sx */
 export declare const commonInputStyle: {
     '.MuiOutlinedInput-root': {
         '&:hover': {
@@ -36,6 +37,7 @@ export declare const commonInputStyle: {
         };
     };
 };
+/** only for sx */
 export declare const inputFieldStyle: {
     width: string;
     '& .MuiFormHelperText-root': {

package/lib/UserCenter/components/editable-field.js

@@ -2,7 +2,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Box, TextField, Typography, Tooltip } 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";
@@ -12,12 +11,12 @@ export const commonInputStyle = {
   ".MuiOutlinedInput-root": {
     "&:hover": {
       fieldset: {
-        borderColor: colors.dividerColor
+        borderColor: "divider"
       }
     },
     "&.Mui-focused": {
       fieldset: {
-        borderColor: colors.dividerColor
+        borderColor: "divider"
       }
     }
   }
@@ -31,7 +30,7 @@ export const inputFieldStyle = {
     margin: 0
   },
   fieldset: {
-    borderColor: colors.dividerColor
+    borderColor: "divider"
   }
 };
 function EditableField({
@@ -218,7 +217,7 @@ function EditableField({
     ) : null;
   }
   return /* @__PURE__ */ jsxs(Box, { sx: { width: "100%" }, style, children: [
-    label && /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", gutterBottom: true, sx: { mb: 0.5, fontSize: "12px", color: "#4B5563" }, children: label }),
+    label && /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", gutterBottom: true, sx: { mb: 0.5, fontSize: "12px", color: "text.primary" }, children: label }),
     content
   ] });
 }

package/lib/UserCenter/components/nft.js

@@ -2,7 +2,6 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 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";
@@ -41,7 +40,7 @@ export default function Nft({ user }) {
   };
   const content = useCreation(() => {
     if (loading) {
-      const skeletonItems = ["skeleton-1", "skeleton-2", "skeleton-3", "skeleton-4", "skeleton-5"].map((id) => /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "15%", height: 166, sx: { borderRadius: 2, flexShrink: 0 } }, id));
+      const skeletonItems = ["skeleton-1", "skeleton-2", "skeleton-3", "skeleton-4", "skeleton-5"].map((id) => /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "15%", height: 166, sx: { borderRadius: 1, flexShrink: 0 } }, id));
       return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [
         /* @__PURE__ */ jsx(Skeleton, { width: "20%" }),
         /* @__PURE__ */ jsx(Box, { display: "flex", flexDirection: "row", gap: 2, flexWrap: "nowrap", children: skeletonItems })
@@ -52,7 +51,7 @@ export default function Nft({ user }) {
         Typography,
         {
           sx: {
-            color: colors.foregroundsFgBase,
+            color: "grey.A700",
             fontWeight: 600,
             mb: 2.5
           },
@@ -90,5 +89,5 @@ export default function Nft({ user }) {
       ) : null
     ] });
   }, [loading, dataPage, paging.page, paging.size, handlePageChange]);
-  return /* @__PURE__ */ jsx(Box, { sx: { border: `1px solid ${colors.dividerColor}`, borderRadius: 2, p: 2, mb: 5 }, children: content });
+  return /* @__PURE__ */ jsx(Box, { sx: { border: "1px solid", borderColor: "divider", borderRadius: 1, p: 2, mb: 5 }, children: content });
 }

package/lib/UserCenter/components/notification.js

@@ -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";
@@ -232,15 +231,13 @@ export default function Notification({ 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: /* @__PURE__ */ jsx(Icon, { icon: AddRoundedIcon }),
           onClick: () => {

package/lib/UserCenter/components/passport.js

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import { Box } 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";
@@ -42,9 +41,7 @@ export default function Passport({ user, ...rest }) {
     );
   }, [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 /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Empty, { children: t("noPassport") }) });
   }
@@ -79,11 +76,11 @@ export default function Passport({ user, ...rest }) {
             ".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` : "unset"
             },
             ".passport-item__body": {

package/lib/UserCenter/components/settings.js

@@ -5,7 +5,6 @@ import { useCreation, useMemoizedFn } from "ahooks";
 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.js";
 import Notification from "./notification.js";
 import Privacy from "./privacy.js";
@@ -108,8 +107,9 @@ export default function Settings({
           id: tab.value,
           sx: mergeSx(
             {
-              border: `1px solid ${colors.dividerColor}`,
-              borderRadius: 2,
+              border: "1px solid",
+              borderColor: "divider",
+              borderRadius: 1,
               p: 2,
               "&:last-child": {
                 mb: 5
@@ -122,7 +122,7 @@ export default function Settings({
               Typography,
               {
                 sx: {
-                  color: colors.foregroundsFgBase,
+                  color: "text.primary",
                   fontWeight: 600
                 },
                 children: tab.label

package/lib/UserCenter/components/status-dialog/index.js

@@ -19,7 +19,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";
 import ArrowDownwardIcon from "@arcblock/icons/lib/ArrowDown";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { DurationEnum } from "../../../@types/index.js";
@@ -31,11 +30,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": {
@@ -95,7 +94,7 @@ export default function StatusDialog({ open, onClose, data, selected, onSelect,
         }
       },
       children: [
-        /* @__PURE__ */ jsxs(DialogTitle, { sx: { borderBottom: `1px solid ${colors.dividerColor}` }, children: [
+        /* @__PURE__ */ jsxs(DialogTitle, { sx: { borderBottom: "1px solid", borderColor: "divider" }, children: [
           /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { fontSize: "16px !important", mb: 0 }, children: t("profile.setStatus") }),
           /* @__PURE__ */ jsx(
             IconButton,
@@ -203,7 +202,7 @@ export default function StatusDialog({ open, onClose, data, selected, onSelect,
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsx(DialogActions, { sx: { p: "16px 24px", borderTop: `1px solid ${colors.dividerColor}` }, children: selected?.value && !changed ? /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(DialogActions, { sx: { p: "16px 24px", borderTop: "1px solid", borderColor: "divider" }, children: selected?.value && !changed ? /* @__PURE__ */ jsx(
           Button,
           {
             sx: { ...defaultButtonStyle, minWidth: "54px" },

package/lib/UserCenter/components/status-selector/duration-menu.d.ts

@@ -4,6 +4,4 @@ interface StatusDurationMenuProps extends BaseStatusProps {
 }
 declare function DurationMenu({ data, selected, onSelect }: StatusDurationMenuProps): import("react").JSX.Element;
 export default DurationMenu;
-export declare const MenuDiv: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & {
-    theme?: import("@emotion/react").Theme;
-}, {}, {}>;
+export declare const MenuDiv: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/lib/UserCenter/components/status-selector/duration-menu.js

@@ -1,7 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-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";
@@ -70,6 +68,6 @@ export const MenuDiv = styled(Menu)`
     min-width: 160px;
   }
   .selected {
-    background-color: ${colors.backgroundsBgSubtitle};
+    background-color: ${({ theme }) => theme.palette.grey[50]};
   }
 `;

package/lib/UserCenter/components/status-selector/menu-item.d.ts

@@ -8,9 +8,7 @@ interface StatusMenuItemProps {
     children: React.ReactNode;
 }
 export default function StatusMenuItem({ icon, selected, onClick, children }: StatusMenuItemProps): JSX.Element;
-export declare const StyledMenu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & {
-    theme?: import("@emotion/react").Theme;
-}, {}, {}>;
+export declare const StyledMenu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export interface StatusItem {
     id: string;
     name: string;

package/lib/UserCenter/components/status-selector/menu-item.js

@@ -1,8 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ListItemIcon, MenuItem, Menu } from "@mui/material";
+import { ListItemIcon, MenuItem, Menu, styled } from "@mui/material";
 import React from "react";
-import styled from "@emotion/styled";
-import { temp as colors } from "@arcblock/ux/lib/Colors";
 export default function StatusMenuItem({ icon, selected, onClick, children }) {
   return /* @__PURE__ */ jsxs(MenuItem, { onClick, className: selected ? "selected" : "", children: [
     icon && /* @__PURE__ */ jsx(ListItemIcon, { style: { minWidth: "24px" }, children: React.createElement(icon, {
@@ -19,6 +17,6 @@ export const StyledMenu = styled(Menu)`
     min-width: 160px;
   }
   .selected {
-    background-color: ${colors.backgroundsBgSubtitle};
+    background-color: ${({ theme }) => theme.palette.grey[50]};
   }
 `;