@arcblock/ux 2.13.11 → 2.13.13

package/lib/ActivityIndicator/index.js

@@ -3,8 +3,7 @@ import { useEffect, useState } from 'react';
 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.
@@ -25,6 +24,9 @@ export default function ActivityIndicator({
   ...rest
 }) {
   const [index, setIndex] = useState(0);
+  const {
+    palette
+  } = useTheme();
   useEffect(() => {
     const timer = setInterval(() => {
       setIndex((index + 1) % messages.length);
@@ -61,8 +63,8 @@ export default function ActivityIndicator({
           duration: 1.5
         }), /*#__PURE__*/_jsx(Orbit, {
           size: 100,
-          orbitColor: colors.grey[900],
-          atomColor: colors.grey[900]
+          orbitColor: palette.grey[900],
+          atomColor: palette.grey[900]
         })]
       })]
     })
@@ -92,7 +94,9 @@ 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/lib/Address/did-address.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import '@fontsource/ubuntu-mono/400.css';
 import { Check as CheckIcon } from '@mui/icons-material';
 import { Box, Tooltip } from '@mui/material';
-import { green } from '@mui/material/colors';
 import copy from 'copy-to-clipboard';
 import noop from 'lodash/noop';
 import CopyIcon from '@arcblock/icons/lib/Copy';
@@ -89,8 +88,8 @@ const DidAddress = /*#__PURE__*/forwardRef((props, ref) => {
         open: copied,
         children: /*#__PURE__*/_jsx(CheckIcon, {
           className: "did-address-copy",
-          style: {
-            color: green[500]
+          sx: {
+            color: 'success.main'
           }
         })
       }) :
@@ -168,7 +167,9 @@ const Root = styled(Box, {
   }
 
   .did-address-text {
-    color: #666;
+    color: ${({
+  theme
+}) => theme.palette.text.secondary};
   }
   /* truncate string with ellipsis */
   .did-address-truncate {
@@ -188,16 +189,22 @@ const Root = styled(Box, {
   .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/lib/BlockletV2/blocklet.js

@@ -73,7 +73,7 @@ export default function BlockletStore(props) {
         xs: 2,
         md: 3
       },
-      borderRadius: 2,
+      borderRadius: 1,
       ...rest.sx
     },
     children: [/*#__PURE__*/_jsxs(Stack, {

package/lib/CloseButton/index.js

@@ -3,7 +3,6 @@ import { Box } from '@mui/material';
 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({
   onClose = noop,
@@ -15,7 +14,7 @@ export default function CloseButton({
     sx: mergeSx({
       fontSize: 0,
       cursor: 'pointer',
-      color: colors.foregroundsFgSubtile,
+      color: 'text.secondary',
       transition: 'transform 0.25s ease-in-out 0s',
       transformOrigin: 'center',
       '&:hover': {

package/lib/Colors/index.d.ts

@@ -1,5 +1,3 @@
-import type { Theme } from '@mui/material';
-declare const colors: Theme["palette"];
-export default colors;
+export { default } from './themes/default';
 export { default as temp } from './themes/temp';
 export { default as didConnectColors } from './themes/did-connect';

package/lib/Colors/index.js

@@ -1,6 +1,4 @@
-import { BLOCKLET_THEME_LIGHT } from '@blocklet/theme';
-// @compatibility
-const colors = BLOCKLET_THEME_LIGHT.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/lib/Colors/themes/default.d.ts

@@ -1,69 +1,6 @@
+import { 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 对象替代
  */
-declare const colors: {
-    common: {
-        black: string;
-        white: string;
-    };
-    primary: {
-        main: string;
-        contrastText: string;
-    };
-    secondary: {
-        main: string;
-        contrastText: string;
-    };
-    error: {
-        main: string;
-        contrastText: string;
-    };
-    warning: {
-        main: string;
-        contrastText: string;
-    };
-    info: {
-        main: string;
-        contrastText: string;
-    };
-    success: {
-        main: string;
-        contrastText: string;
-    };
-    grey: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        A100: string;
-        A200: string;
-        A400: string;
-        A700: string;
-    };
-    text: {
-        primary: string;
-        secondary: string;
-        disabled: string;
-        hint: string;
-    };
-    divider: string;
-    background: {
-        default: string;
-    };
-    did: {
-        primary: string;
-        secondary: string;
-    };
-};
+declare const colors: Theme["palette"];
 export default colors;

package/lib/Colors/themes/default.js

@@ -1,77 +1,7 @@
+import { BLOCKLET_THEME_LIGHT } 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;
 export default colors;

package/lib/Colors/themes/did-connect.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated 请使用 MUI theme 对象替代
+ */
 declare const colors: {
     background: {
         overlay: string;
@@ -10,7 +13,7 @@ declare const colors: {
     text: {
         primary: string;
         secondary: string;
-        disable: string;
+        disabled: string;
         hint: string;
     };
     state: {
@@ -23,36 +26,38 @@ declare const colors: {
         main: string;
         light: string;
         dark: string;
+        contrastText: string;
     };
     secondary: {
         main: string;
         light: string;
         dark: string;
+        contrastText: string;
     };
     error: {
         main: string;
         light: string;
         dark: string;
+        contrastText: string;
     };
     warning: {
         main: string;
         light: string;
         dark: string;
+        contrastText: string;
     };
     info: {
         main: string;
         light: string;
         dark: string;
+        contrastText: string;
     };
     success: {
         main: string;
         light: string;
         dark: string;
+        contrastText: string;
     };
-    divider: {
-        main: string;
-        light: string;
-        dark: string;
-    };
+    divider: string;
 };
 export default colors;

package/lib/Colors/themes/did-connect.js

@@ -1,3 +1,6 @@
+/**
+ * @deprecated 请使用 MUI theme 对象替代
+ */
 const colors = {
   background: {
     overlay: 'rgba(15, 23, 42, 0.5)',
@@ -10,7 +13,7 @@ const colors = {
   text: {
     primary: '#18181B',
     secondary: '#71717B',
-    disable: '#D4D4D8',
+    disabled: '#D4D4D8',
     hint: '#D4D4D8'
   },
   state: {
@@ -22,37 +25,39 @@ const colors = {
   primary: {
     main: '#2B7FFF',
     light: '#51A2FF',
-    dark: '#155DFC'
+    dark: '#155DFC',
+    contrastText: '#fff'
   },
   secondary: {
     main: '#615FFF',
     light: '#7C86FF',
-    dark: '#4F39F6'
+    dark: '#4F39F6',
+    contrastText: '#fff'
   },
   error: {
     main: '#FB2C36',
     light: '#FF6467',
-    dark: '#E7000B'
+    dark: '#E7000B',
+    contrastText: '#fff'
   },
   warning: {
     main: '#FF6900',
     light: '#FF8904',
-    dark: '#F54900'
+    dark: '#F54900',
+    contrastText: '#fff'
   },
   info: {
     main: '#2B7FFF',
     light: '#51A2FF',
-    dark: '#155DFC'
+    dark: '#155DFC',
+    contrastText: '#fff'
   },
   success: {
     main: '#00C950',
     light: '#05DF72',
-    dark: '#00A63E'
+    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/lib/Colors/themes/temp.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated 请使用 MUI theme 对象替代
+ */
 declare const colors: {
     textMuted: string;
     textSubtitle: string;

package/lib/Colors/themes/temp.js

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

package/lib/Config/config-provider.d.ts

@@ -1,18 +1,17 @@
 import { ReactNode } from 'react';
 import { type PaletteMode } from '@mui/material';
-import type { ThemeOptions } from '@mui/material/styles';
 import { LocaleProviderProps } from '../Locale/context';
 import { ThemeProviderProps } from '../Theme/theme-provider';
+import { type UserThemeOptions, type ThemeConfig } from '../Theme';
 export interface ConfigContextType {
     mode: PaletteMode;
-    themeOptions: ThemeOptions;
+    themeOptions: UserThemeOptions;
     toggleMode: () => void;
 }
-export declare function isThemeRecord(theme: ThemeOptions | Record<PaletteMode, ThemeOptions>): theme is Record<PaletteMode, ThemeOptions>;
 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>;
 }
@@ -25,7 +24,7 @@ export declare namespace ConfigProvider {
 }
 export declare function useConfig(): {
     mode: PaletteMode;
-    themeOptions: ThemeOptions;
+    themeOptions: UserThemeOptions;
     toggleMode: () => void;
     locale: import("../type").Locale;
     changeLocale: (locale: import("../type").Locale) => void;

package/lib/Config/config-provider.js

@@ -1,16 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo, useState, useCallback, useEffect } from 'react';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import { BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
 import set from 'lodash/set';
 import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { LocaleProvider, useLocaleContext } from '../Locale/context';
 import ThemeProvider from '../Theme/theme-provider';
-import { createTheme, useTheme } from '../Theme';
+import { createTheme, getDefaultThemePrefer, lazyThemeConfig, useTheme } from '../Theme';
 const ConfigContext = /*#__PURE__*/createContext({});
-const preferThemeModeKey = 'blocklet_theme_prefer';
-export function isThemeRecord(theme) {
-  return 'light' in theme || 'dark' in theme;
-}
 /**
  * 集中化配置
  */
@@ -28,33 +24,18 @@ export function ConfigProvider({
   languages,
   onLoadingTranslation
 }) {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const [mode, setMode] = useState(() => {
     if (prefer) {
       return prefer;
     }
-
-    // 未启用暗色主题
-    if (['1', 'true'].includes(window.blocklet?.USE_DARK_THEME) === false) {
-      return 'light';
-    }
-
-    // 本地缓存
-    const localPrefer = localStorage.getItem(preferThemeModeKey);
-    if (localPrefer && (localPrefer === 'light' || localPrefer === 'dark')) {
-      return localPrefer;
-    }
-
-    // 系统偏好
-    return prefersDarkMode ? 'dark' : 'light';
+    return getDefaultThemePrefer();
   });
   const _themeOptions = useMemo(() => {
     let result = {};
+    const getThemeConfig = lazyThemeConfig(mode);
     if (themeOptions) {
-      if (isThemeRecord(themeOptions)) {
-        result = themeOptions[mode] ? {
-          ...themeOptions[mode]
-        } : {};
+      if (typeof themeOptions === 'function') {
+        result = themeOptions(getThemeConfig());
       } else {
         result = {
           ...themeOptions
@@ -74,7 +55,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(() => ({
     mode,

package/lib/Config/theme-mode-toggle.js

@@ -16,7 +16,6 @@ export default function ThemeModeToggle() {
   }
   return /*#__PURE__*/_jsx(IconButton, {
     onClick: toggleMode,
-    color: "inherit",
     children: mode === 'light' ? /*#__PURE__*/_jsx(LightModeOutlinedIcon, {}) : /*#__PURE__*/_jsx(Brightness2OutlinedIcon, {})
   });
 }

package/lib/DID/index.js

@@ -9,7 +9,6 @@ import { useCreation, useMemoizedFn } from 'ahooks';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import Address from '../Address';
 import Avatar from '../Avatar';
-import { temp as colors } from '../Colors';
 import { DID_PREFIX } from '../Util/constant';
 import { translate } from '../Locale/util';
 import { getDIDColor, isEthereumDid } from '../Util';
@@ -191,7 +190,7 @@ export const DID = /*#__PURE__*/forwardRef((props, ref) => {
             flexShrink: 0,
             cursor: 'pointer',
             ml: 0.5,
-            color: 'grey.500'
+            color: 'text.secondary'
           }
         }) : null, rest.append]
       }),
@@ -248,7 +247,7 @@ export function DIDDialog({
         target: "_blank",
         rel: "noreferrer",
         sx: {
-          color: colors.foregroundsFgInteractive,
+          color: 'secondary.main',
           textDecoration: 'none',
           '&:hover': {
             textDecoration: 'underline'
@@ -335,7 +334,7 @@ export function DIDDialog({
       }), /*#__PURE__*/_jsx(Typography, {
         variant: "body2",
         sx: {
-          color: colors.textSubtitle,
+          color: 'text.secondary',
           fontSize: '12px',
           mt: 1
         },

package/lib/Datatable/CustomToolbar.js

@@ -329,6 +329,9 @@ 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;