@arcblock/ux 2.13.12 → 2.13.13

package/lib/Switch/index.js

@@ -23,7 +23,7 @@ const IOSSwitch = styled(props => /*#__PURE__*/_jsx(MuiSwitch, {
       transform: 'translateX(16px)',
       color: '#fff',
       '& + .MuiSwitch-track': {
-        backgroundColor: theme.palette.mode === 'dark' ? '#2ECA45' : '#65C466',
+        backgroundColor: theme.palette.primary.main,
         opacity: 1,
         border: 0
       },
@@ -32,7 +32,7 @@ const IOSSwitch = styled(props => /*#__PURE__*/_jsx(MuiSwitch, {
       }
     },
     '&.Mui-focusVisible .MuiSwitch-thumb': {
-      color: '#33cf4d',
+      color: theme.palette.primary.main,
       border: '6px solid #fff'
     },
     '&.Mui-disabled .MuiSwitch-thumb': {
@@ -49,7 +49,7 @@ const IOSSwitch = styled(props => /*#__PURE__*/_jsx(MuiSwitch, {
   },
   '& .MuiSwitch-track': {
     borderRadius: 26 / 2,
-    backgroundColor: theme.palette.mode === 'light' ? '#E9E9EA' : '#39393D',
+    backgroundColor: theme.palette.grey[200],
     opacity: 1,
     transition: theme.transitions.create(['background-color'], {
       duration: 500

package/lib/Tabs/index.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Tabs as MuiTabs, Tab as MuiTab } from '@mui/material';
-import { temp as colors } from '../Colors';
 import { styled } from '../Theme';
 const PREFIX = 'index';
 const classes = {
@@ -42,7 +41,7 @@ function CardTabs({
       },
       '.MuiTabs-flexContainer': {
         borderRadius: '100vw',
-        backgroundColor: colors.backgroundsBgComponent,
+        backgroundColor: 'grey.200',
         padding: 0.5,
         display: 'inline-flex',
         columnGap: 0.25,
@@ -55,15 +54,15 @@ function CardTabs({
         minHeight: 'auto',
         lineHeight: 1,
         py: 1,
-        color: colors.foregroundsFgSubtile,
+        color: 'text.secondary',
         fontSize: '13px',
         fontWeight: 'normal',
         textTransform: 'capitalize',
         transition: 'background-color 0.2s ease',
         '&.Mui-selected, &:hover': {
           backgroundColor: 'white',
-          borderColor: colors.lineBorderBase,
-          color: colors.foregroundsFgBase
+          borderColor: 'grey.100',
+          color: 'grey.A700'
         }
       },
       '.MuiTabs-indicator': {
@@ -107,7 +106,7 @@ function LineTabs({
           zIndex: -1,
           width: '100%',
           height: '1px',
-          backgroundColor: colors.strokeBorderStrong
+          backgroundColor: 'grey.300'
         }
       } : {},
       '.MuiTabs-flexContainer': {
@@ -122,18 +121,18 @@ function LineTabs({
         lineHeight: 1,
         py: 1,
         px: 0,
-        color: colors.foregroundsFgSubtile,
+        color: 'text.secondary',
         fontSize: '14px',
         fontWeight: 500,
         textTransform: 'capitalize',
         minWidth: 'auto',
         '&.Mui-selected, &:hover': {
-          color: colors.foregroundsFgBase
+          color: 'primary.main'
         }
       },
       '.MuiTabs-indicator': {
         height: '1px',
-        backgroundColor: colors.foregroundsFgBase
+        backgroundColor: 'primary.main'
       },
       ...rest.sx
     },

package/lib/Theme/theme-provider.d.ts

@@ -4,21 +4,25 @@ export interface ThemeProviderProps {
     children?: React.ReactNode;
     theme: Theme;
     injectFirst?: boolean;
+    /** 指定一个类名，DarkSchemeStyles 只会作用于带有该类的元素及其后代 */
+    darkSchemeClass?: string;
 }
 /**
  * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
  */
-declare function ThemeProvider({ children, theme, injectFirst }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function ThemeProvider({ children, theme, injectFirst, darkSchemeClass }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ThemeProvider {
     var propTypes: {
         children: PropTypes.Requireable<any>;
         theme: PropTypes.Requireable<any>;
         injectFirst: PropTypes.Requireable<boolean>;
+        darkSchemeClass: PropTypes.Requireable<string>;
     };
     var defaultProps: {
         children: null;
         theme: Theme;
         injectFirst: boolean;
+        darkSchemeClass: string;
     };
 }
 export default ThemeProvider;

package/lib/Theme/theme-provider.js

@@ -1,17 +1,68 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
-import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { GlobalStyles } from '@mui/material';
+import { ThemeProvider as MuiThemeProvider, useTheme } from '@mui/material/styles';
 import StyledEngineProvider from '@mui/material/StyledEngineProvider';
 import CssBaseline from '@mui/material/CssBaseline';
 import { createTheme } from './theme';
 const defaultTheme = createTheme();
+function DarkSchemeStyles({
+  className
+}) {
+  const theme = useTheme();
+  if (theme.palette.mode === 'dark') {
+    const trackColor = 'transparent';
+    const thumbColor = theme.palette.grey[300];
+
+    // 处理作用域选择器
+    const prefix = (className || '').trim().split(/\s+/).filter(Boolean).map(c => c.startsWith('.') ? c : `.${c}`).join(' ');
+    const webkitScrollbar = prefix ? `${prefix}::-webkit-scrollbar, ${prefix} *::-webkit-scrollbar` : '*::-webkit-scrollbar';
+    const webkitTrack = prefix ? `${prefix}::-webkit-scrollbar-track, ${prefix} *::-webkit-scrollbar-track` : '*::-webkit-scrollbar-track';
+    const webkitThumb = prefix ? `${prefix}::-webkit-scrollbar-thumb, ${prefix} *::-webkit-scrollbar-thumb` : '*::-webkit-scrollbar-thumb';
+    const firefoxSelector = prefix ? `${prefix}, ${prefix} *` : '*';
+    return /*#__PURE__*/_jsx(GlobalStyles, {
+      styles: {
+        // Chrome, Safari, Edge
+        '@supports selector(::-webkit-scrollbar)': {
+          [webkitScrollbar]: {
+            width: '12px',
+            height: '12px'
+          },
+          [webkitTrack]: {
+            background: trackColor
+          },
+          [webkitThumb]: {
+            background: thumbColor,
+            borderRadius: '6px',
+            border: '2px solid',
+            borderColor: trackColor,
+            backgroundClip: 'padding-box',
+            '&:hover': {
+              background: theme.palette.grey[400],
+              backgroundClip: 'padding-box'
+            }
+          }
+        },
+        // Firefox
+        '@supports not selector(::-webkit-scrollbar)': {
+          [firefoxSelector]: {
+            scrollbarWidth: 'auto',
+            scrollbarColor: `${thumbColor} ${trackColor}`
+          }
+        }
+      }
+    });
+  }
+  return null;
+}
 /**
  * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
  */
 export default function ThemeProvider({
   children,
   theme,
-  injectFirst
+  injectFirst,
+  darkSchemeClass
 }) {
   return (
     /*#__PURE__*/
@@ -20,7 +71,9 @@ export default function ThemeProvider({
       injectFirst: injectFirst,
       children: /*#__PURE__*/_jsxs(MuiThemeProvider, {
         theme: theme,
-        children: [/*#__PURE__*/_jsx(CssBaseline, {}), children]
+        children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(DarkSchemeStyles, {
+          className: darkSchemeClass
+        }), children]
       })
     })
   );
@@ -28,10 +81,12 @@ export default function ThemeProvider({
 ThemeProvider.propTypes = {
   children: PropTypes.any,
   theme: PropTypes.any,
-  injectFirst: PropTypes.bool
+  injectFirst: PropTypes.bool,
+  darkSchemeClass: PropTypes.string
 };
 ThemeProvider.defaultProps = {
   children: null,
   theme: defaultTheme,
-  injectFirst: true
+  injectFirst: true,
+  darkSchemeClass: ''
 };

package/lib/Theme/theme.d.ts

@@ -1,4 +1,4 @@
-import type { PaletteMode } from '@mui/material';
+import type { PaletteMode, Theme } from '@mui/material';
 import { type ThemeOptions } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
 import '@fontsource/roboto/latin-400.css';
@@ -11,10 +11,13 @@ export declare function collectFontFamilies(obj?: {
     fontFamily?: string;
 }, fontSet?: Set<string>): Set<string>;
 export declare function loadFonts(fonts: string[]): Promise<boolean>;
+export declare function getDefaultThemePrefer(): PaletteMode;
 export declare function createDefaultThemeOptions(mode?: PaletteMode): ThemeOptions;
 export interface UserThemeOptions extends ThemeOptions {
     disableBlockletTheme?: boolean;
 }
-export declare const create: (...args: UserThemeOptions[]) => import("@mui/material").Theme;
-export declare const createTheme: (...args: UserThemeOptions[]) => import("@mui/material").Theme;
+export type ThemeConfig = Pick<Theme, 'palette'>;
+export declare function lazyThemeConfig(mode: PaletteMode): () => ThemeConfig;
+export declare const create: (...args: Array<UserThemeOptions | ((config: ThemeConfig) => UserThemeOptions)>) => Theme;
+export declare const createTheme: (...args: Array<UserThemeOptions | ((config: ThemeConfig) => UserThemeOptions)>) => Theme;
 export { deepmerge };

package/lib/Theme/theme.js

@@ -3,9 +3,10 @@
 
 import { createTheme as _createTheme, responsiveFontSizes } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
+import pick from 'lodash/pick';
 import webfontloader from 'webfontloader';
-import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS } from '@blocklet/theme';
-import { cleanedObj } from '../Util';
+import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS, BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
+import { cleanedObj, deepmergeAll } from '../Util';
 
 // 默认只加载最基本的 roboto latin 字体
 import '@fontsource/roboto/latin-400.css';
@@ -61,6 +62,27 @@ export function loadFonts(fonts) {
   });
 }
 
+// 获取默认主题偏好
+export function getDefaultThemePrefer() {
+  const prefer = window.blocklet?.theme?.prefer;
+  if (prefer === 'system') {
+    // 本地缓存
+    const localPrefer = localStorage.getItem(BLOCKLET_THEME_PREFER_KEY);
+    if (localPrefer && (localPrefer === 'light' || localPrefer === 'dark')) {
+      return localPrefer;
+    }
+
+    // 跟随系统
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  if (prefer === 'light' || prefer === 'dark') {
+    return prefer;
+  }
+
+  // 未设置偏好
+  return 'light';
+}
+
 // 创建默认主题配置
 export function createDefaultThemeOptions(mode = 'light') {
   if (mode === 'dark') {
@@ -68,26 +90,35 @@ export function createDefaultThemeOptions(mode = 'light') {
   }
   return BLOCKLET_THEME_LIGHT;
 }
-// 主要处理 mode 和 overrides
+
+// 用于获取 Blocklet Theme 配置，便于用户创建自定义主题
+
+export function lazyThemeConfig(mode) {
+  const fields = ['palette'];
+  let config = null;
+  return () => {
+    if (config) return config;
+    config = deepmerge(pick(createDefaultThemeOptions(mode), fields), pick(window.blocklet?.theme?.[mode] ?? {}, fields));
+    return config;
+  };
+}
+
+// 主要处理 overrides
 const normalizeUserThemeOptions = ({
-  mode = 'light',
   palette,
   components,
   overrides,
   ...rest
 }) => {
-  return {
-    mode,
-    palette: {
-      ...palette,
-      mode
-    },
+  const result = {
+    palette,
     components: {
       ...overrides,
       ...components
     },
     ...rest
   };
+  return result;
 };
 const defaultUserThemeOptions = {
   themeName: 'ArcBlock',
@@ -118,20 +149,25 @@ const defaultUserThemeOptions = {
 
 // https://material-ui.com/customization/default-theme/
 export const create = (...args) => {
-  const userThemeOptions = args.reduce((acc, curr) => deepmerge(acc, normalizeUserThemeOptions(curr)), normalizeUserThemeOptions(defaultUserThemeOptions));
+  const defaultPrefer = getDefaultThemePrefer();
+  const getThemeConfig = lazyThemeConfig(defaultPrefer);
+  const userThemeOptions = args.reduce((acc, curr) => deepmerge(acc, normalizeUserThemeOptions(typeof curr === 'function' ? curr(getThemeConfig()) : curr)), normalizeUserThemeOptions(defaultUserThemeOptions));
+  const prefer = userThemeOptions.mode || userThemeOptions.palette?.mode || defaultPrefer;
+  const blockletThemeOptions = window.blocklet?.theme?.[prefer] ?? {};
+  const defaultThemeOptions = createDefaultThemeOptions(prefer);
   const {
-    mode,
     disableBlockletTheme
   } = userThemeOptions;
-  const blockletThemeOptions = window.blocklet?.theme?.[mode] ?? {};
-  const defaultThemeOptions = createDefaultThemeOptions(mode);
 
   // 合并配置
-  let mergedThemeOptions = defaultThemeOptions;
-  if (!disableBlockletTheme) {
-    mergedThemeOptions = deepmerge(defaultThemeOptions, cleanedObj(blockletThemeOptions));
-  }
-  mergedThemeOptions = deepmerge(mergedThemeOptions, cleanedObj(userThemeOptions));
+  const mergedThemeOptions = deepmergeAll([defaultThemeOptions, !disableBlockletTheme && cleanedObj(blockletThemeOptions), cleanedObj(userThemeOptions),
+  // 确保 mode 跟 prefer 一致
+  {
+    mode: prefer,
+    palette: {
+      mode: prefer
+    }
+  }].filter(Boolean));
 
   // 创建主题
   const theme = _createTheme(mergedThemeOptions);

package/lib/UserCard/Container/card.js

@@ -16,7 +16,7 @@ function CardContainer({
   const commonStyles = {
     minWidth: 320,
     p: 2,
-    borderRadius: 2,
+    borderRadius: 1,
     ...(cardType === CardType.Detailed ? {
       border: '1px solid',
       borderColor: 'divider'

package/lib/UserCard/Container/dialog.js

@@ -17,7 +17,7 @@ function DialogContainer({
       backgroundColor: theme.palette.background.paper,
       border: '1px solid',
       borderColor: 'divider',
-      borderRadius: 2,
+      borderRadius: 1,
       maxWidth: 500,
       minWidth: 320,
       display: 'flex'

package/lib/Util/index.d.ts

@@ -1,3 +1,4 @@
+import { type DeepmergeOptions } from '@mui/utils/deepmerge';
 import type { $TSFixMe, Locale } from '../type';
 declare let dateTool: $TSFixMe | null;
 /** 是否常见二段式顶级域名 */
@@ -92,4 +93,11 @@ export declare const getTranslation: (translations: TranslationsObject, locale:
 }) => string;
 export declare const lazyRetry: (fn: () => Promise<any>) => import("react").LazyExoticComponent<import("react").ComponentType<any>>;
 export declare const cleanedObj: (obj: object) => import("lodash").Dictionary<any>;
+/**
+ * 依次对数组中的对象进行深度合并
+ * @param objects - 需要合并的对象数组
+ * @param options - deepmerge 的配置选项
+ * @returns 合并后的对象
+ */
+export declare function deepmergeAll<T>(objects: T[], options?: DeepmergeOptions): T;
 export {};

package/lib/Util/index.js

@@ -5,6 +5,7 @@ import { getDIDMotifInfo, colors } from '@arcblock/did-motif';
 import isNil from 'lodash/isNil';
 import omitBy from 'lodash/omitBy';
 import pRetry from 'p-retry';
+import deepmerge from '@mui/utils/deepmerge';
 import { DID_PREFIX, BLOCKLET_SERVICE_PATH_PREFIX } from './constant';
 let dateTool = null;
 const IP_V4_REGEX = /^(\d{1,3}\.){3}\d{1,3}(:\d+)?$/;
@@ -426,4 +427,25 @@ export const lazyRetry = fn => /*#__PURE__*/lazy(() => pRetry(async () => {
 }));
 export const cleanedObj = obj => {
   return omitBy(obj, isNil);
-};
+};
+
+/**
+ * 依次对数组中的对象进行深度合并
+ * @param objects - 需要合并的对象数组
+ * @param options - deepmerge 的配置选项
+ * @returns 合并后的对象
+ */
+export function deepmergeAll(objects, options) {
+  if (!Array.isArray(objects)) {
+    throw new Error('First argument should be an array');
+  }
+  if (objects.length === 0) {
+    return {};
+  }
+  if (objects.length === 1) {
+    return objects[0];
+  }
+  return objects.reduce((acc, obj) => {
+    return deepmerge(acc, obj, options);
+  });
+}

package/lib/type.d.ts

@@ -25,7 +25,11 @@ export type Blocklet = {
   version: string;
   mode: string;
   tenantMode: 'single' | 'multiple';
-  theme: Record<PaletteMode, Theme>;
+  theme: {
+    prefer?: PaletteMode | 'system';
+    light: Theme;
+    dark: Theme;
+  };
   navigation: $TSFixMe[];
   preferences: Record<string, any>;
   languages: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.12",
+  "version": "2.13.13",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -40,6 +40,7 @@
     "@babel/cli": "^7.19.3",
     "@babel/core": "^7.19.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-typescript": "^7.24.7",
     "@babel/preset-env": "^7.19.3",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.24.7",
@@ -70,14 +71,14 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "898e576675cefb8c4738d87f4198271943efec76",
+  "gitHead": "b098f3a884e8b34a1926479507b674d40ea58298",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.12",
-    "@arcblock/nft-display": "^2.13.12",
-    "@arcblock/react-hooks": "^2.13.12",
+    "@arcblock/icons": "^2.13.13",
+    "@arcblock/nft-display": "^2.13.13",
+    "@arcblock/react-hooks": "^2.13.13",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.12",
+    "@blocklet/theme": "^2.13.13",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

package/src/ActivityIndicator/index.jsx

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import { green, blue } from '@mui/material/colors';
 
 import Logo from '../Logo';
-import colors from '../Colors';
-import { styled } from '../Theme';
+import { styled, useTheme } from '../Theme';
 
 /**
  * ActivityIndicator is used when we want to tell the user the request they made on the UI will take time.
@@ -21,6 +20,7 @@ import { styled } from '../Theme';
  */
 export default function ActivityIndicator({ messages, interval, ...rest }) {
   const [index, setIndex] = useState(0);
+  const { palette } = useTheme();
 
   useEffect(() => {
     const timer = setInterval(() => {
@@ -42,7 +42,7 @@ export default function ActivityIndicator({ messages, interval, ...rest }) {
           <Logo style={{ transform: 'scale(0.6)' }} showText={false} />
           <Orbit size={56} orbitColor={green[500]} atomColor={green[500]} duration={1} />
           <Orbit size={80} orbitColor={blue[800]} atomColor={blue[800]} duration={1.5} />
-          <Orbit size={100} orbitColor={colors.grey[900]} atomColor={colors.grey[900]} />
+          <Orbit size={100} orbitColor={palette.grey[900]} atomColor={palette.grey[900]} />
         </div>
       </div>
     </Div>
@@ -75,7 +75,7 @@ const Div = styled('div')`
   }
 
   .pm-loader-text {
-    color: ${colors.grey[900]};
+    color: ${({ theme }) => theme.palette.grey[900]};
     font-size: 14px;
     text-align: center;
     position: relative;

package/src/Address/did-address.tsx

@@ -116,7 +116,7 @@ const DidAddress = forwardRef<HTMLDidAddressElement, IDidAddressProps>((props, r
       <span className="did-address-copy-wrapper" title={copied ? '' : translations[locale].copy}>
         {copied ? (
           <Tooltip title={translations[locale].copied} placement="bottom" arrow open={copied}>
-            <CheckIcon className="did-address-copy" style={{ color: green[500] }} />
+            <CheckIcon className="did-address-copy" sx={{ color: 'success.main' }} />
           </Tooltip>
         ) : (
           /* title prop 直接加在 icon 上不生效 */
@@ -184,7 +184,7 @@ const Root = styled<any>(Box, { shouldForwardProp: (prop) => prop !== 'inline' }
   }
 
   .did-address-text {
-    color: #666;
+    color: ${({ theme }) => theme.palette.text.secondary};
   }
   /* truncate string with ellipsis */
   .did-address-truncate {
@@ -204,16 +204,16 @@ const Root = styled<any>(Box, { shouldForwardProp: (prop) => prop !== 'inline' }
   .did-address-copy {
     flex: 0 0 auto;
     font-size: 1em;
-    color: #999;
+    color: ${({ theme }) => theme.palette.text.secondary};
     cursor: pointer;
   }
 
   /* link */
   a {
-    color: #666;
+    color: ${({ theme }) => theme.palette.text.secondary};
   }
   &:hover a {
-    color: #222;
+    color: ${({ theme }) => theme.palette.text.primary};
     text-decoration: underline;
   }
 `;

package/src/BlockletV2/blocklet.tsx

@@ -105,7 +105,7 @@ export default function BlockletStore(props: IBlockletStore) {
       variant="outlined"
       onClick={handleMainClick}
       {...rest}
-      sx={{ p: { xs: 2, md: 3 }, borderRadius: 2, ...rest.sx }}>
+      sx={{ p: { xs: 2, md: 3 }, borderRadius: 1, ...rest.sx }}>
       <Stack flex={1} direction="row" gap={1} alignItems="center" overflow="hidden" sx={{ '& > *': { flexShrink: 0 } }}>
         <Avatar src={cover} did={did} size={48} variant="rounded" style={{ borderRadius: '8px', overflow: 'hidden' }} />
         <Typography

package/src/CloseButton/index.tsx

@@ -4,7 +4,6 @@ import { Icon } from '@iconify/react';
 import CloseRoundedIcon from '@iconify-icons/material-symbols/close-rounded';
 import noop from 'lodash/noop';
 
-import { temp as colors } from '../Colors';
 import { mergeSx } from '../Util/style';
 
 export default function CloseButton({
@@ -23,7 +22,7 @@ export default function CloseButton({
         {
           fontSize: 0,
           cursor: 'pointer',
-          color: colors.foregroundsFgSubtile,
+          color: 'text.secondary',
           transition: 'transform 0.25s ease-in-out 0s',
           transformOrigin: 'center',
           '&:hover': {

package/src/Colors/index.ts

@@ -1,9 +1,4 @@
-import { BLOCKLET_THEME_LIGHT } from '@blocklet/theme';
-import type { Theme } from '@mui/material';
-
-// @compatibility
-const colors = BLOCKLET_THEME_LIGHT.palette as Theme['palette'];
-
-export default colors;
+// eslint-disable-next-line no-restricted-exports
+export { default } from './themes/default';
 export { default as temp } from './themes/temp';
 export { default as didConnectColors } from './themes/did-connect';

package/src/Colors/themes/default.ts

@@ -1,54 +1,8 @@
+import { BLOCKLET_THEME_LIGHT, type Theme } from '@blocklet/theme';
+
 /**
- * 默认 colors, ABT 系列
- *
- * - colors object 结构是在 mui theme#palette object 基础上调整后的结构
- * - 色值在 mui default theme 基础上将 figma 中常用的 colors 进行覆盖
- * - 扩展一些常用色值 (如 DID 系列)
- * - figma: https://www.figma.com/file/1qHyMF137EXOQpSFVByszG/UX-Library?node-id=295%3A1518
+ * @deprecated 请使用 MUI theme 对象替代
  */
-const colors = {
-  common: {
-    black: '#000',
-    white: '#fff',
-  },
-  primary: { main: '#3773F2', contrastText: '#fff' }, // override
-  secondary: { main: '#16CED1', contrastText: '#fff' }, // override
-  error: { main: '#F16E6E', contrastText: '#fff' }, // override
-  warning: { main: '#DE9E37', contrastText: '#fff' }, // override
-  info: { main: '#0775F8', contrastText: '#fff' }, // override
-  success: { main: '#34BE74', contrastText: '#fff' }, // override
-  grey: {
-    50: '#fafafa',
-    100: '#f5f5f5',
-    200: '#eeeeee',
-    300: '#e0e0e0',
-    400: '#bdbdbd',
-    500: '#9e9e9e',
-    600: '#757575',
-    700: '#616161',
-    800: '#424242',
-    900: '#212121',
-    A100: '#d5d5d5',
-    A200: '#aaaaaa',
-    A400: '#303030',
-    A700: '#616161',
-  },
-  text: {
-    primary: 'rgba(0, 0, 0, 0.87)',
-    secondary: 'rgba(0, 0, 0, 0.54)',
-    disabled: 'rgba(0, 0, 0, 0.38)',
-    hint: 'rgba(0, 0, 0, 0.38)',
-  },
-  divider: 'rgba(0, 0, 0, 0.12)',
-  background: {
-    default: '#fff',
-  },
-  // 扩展色值, 适用于 did 相关的组件, 如果某些产品整体风格是 did 系列, 可以扩展出一个 did 系列的 theme
-  did: {
-    primary: '#4598FA',
-    secondary: '#49C3AD',
-  },
-  // TODO: 等设计规范稳定后, 考虑扩展 trade 相关的常用颜色 (send/receive/exchange/transfer)
-};
+const colors = BLOCKLET_THEME_LIGHT.palette as Theme['palette'];
 
 export default colors;