@arcblock/ux 2.13.12 → 2.13.13

package/src/Tabs/index.tsx

@@ -1,6 +1,5 @@
 import { Tabs as MuiTabs, Tab as MuiTab, type TabsProps as MuiTabsProps } from '@mui/material';
 
-import { temp as colors } from '../Colors';
 import { styled } from '../Theme';
 
 const PREFIX = 'index';
@@ -47,7 +46,7 @@ function CardTabs({ tabs, current, onChange, ...rest }: CardTabsProps) {
         },
         '.MuiTabs-flexContainer': {
           borderRadius: '100vw',
-          backgroundColor: colors.backgroundsBgComponent,
+          backgroundColor: 'grey.200',
           padding: 0.5,
           display: 'inline-flex',
           columnGap: 0.25,
@@ -60,15 +59,15 @@ function CardTabs({ tabs, current, onChange, ...rest }: CardTabsProps) {
           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': {
@@ -115,7 +114,7 @@ function LineTabs({ tabs, current, onChange, ...rest }: LineTabsProps) {
                   zIndex: -1,
                   width: '100%',
                   height: '1px',
-                  backgroundColor: colors.strokeBorderStrong,
+                  backgroundColor: 'grey.300',
                 },
               }
             : {},
@@ -131,18 +130,18 @@ function LineTabs({ tabs, current, onChange, ...rest }: LineTabsProps) {
           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/src/Theme/theme-provider.tsx

@@ -1,26 +1,95 @@
 import PropTypes from 'prop-types';
-import { ThemeProvider as MuiThemeProvider, Theme } from '@mui/material/styles';
+import { GlobalStyles } from '@mui/material';
+import { ThemeProvider as MuiThemeProvider, Theme, 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 }: { className?: string }) {
+  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 (
+      <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;
+}
+
 export interface ThemeProviderProps {
   children?: React.ReactNode;
   theme: Theme;
   injectFirst?: boolean;
+  /** 指定一个类名，DarkSchemeStyles 只会作用于带有该类的元素及其后代 */
+  darkSchemeClass?: string;
 }
 
 /**
  * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
  */
-export default function ThemeProvider({ children, theme, injectFirst }: ThemeProviderProps) {
+export default function ThemeProvider({ children, theme, injectFirst, darkSchemeClass }: ThemeProviderProps) {
   return (
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
     <StyledEngineProvider injectFirst={injectFirst}>
       <MuiThemeProvider theme={theme}>
         <CssBaseline />
+        <DarkSchemeStyles className={darkSchemeClass} />
         {children}
       </MuiThemeProvider>
     </StyledEngineProvider>
@@ -31,10 +100,12 @@ ThemeProvider.propTypes = {
   children: PropTypes.any,
   theme: PropTypes.any,
   injectFirst: PropTypes.bool,
+  darkSchemeClass: PropTypes.string,
 };
 
 ThemeProvider.defaultProps = {
   children: null,
   theme: defaultTheme,
   injectFirst: true,
+  darkSchemeClass: '',
 };

package/src/Theme/theme.ts

@@ -1,12 +1,13 @@
 /* eslint-disable no-shadow */
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
-import type { PaletteMode } from '@mui/material';
+import type { PaletteMode, Theme } from '@mui/material';
 import { createTheme as _createTheme, responsiveFontSizes, type ThemeOptions } 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 { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS, BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
 
-import { cleanedObj } from '../Util';
+import { cleanedObj, deepmergeAll } from '../Util';
 
 // 默认只加载最基本的 roboto latin 字体
 import '@fontsource/roboto/latin-400.css';
@@ -71,6 +72,29 @@ export function loadFonts(fonts: string[]) {
   });
 }
 
+// 获取默认主题偏好
+export function getDefaultThemePrefer(): PaletteMode {
+  const prefer = window.blocklet?.theme?.prefer;
+
+  if (prefer === 'system') {
+    // 本地缓存
+    const localPrefer = localStorage.getItem(BLOCKLET_THEME_PREFER_KEY) as PaletteMode;
+    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: PaletteMode = 'light') {
   if (mode === 'dark') {
@@ -84,20 +108,36 @@ export interface UserThemeOptions extends ThemeOptions {
   disableBlockletTheme?: boolean;
 }
 
-// 主要处理 mode 和 overrides
-const normalizeUserThemeOptions = ({ mode = 'light', palette, components, overrides, ...rest }: UserThemeOptions) => {
-  return {
-    mode,
-    palette: {
-      ...palette,
-      mode,
-    },
+// 用于获取 Blocklet Theme 配置，便于用户创建自定义主题
+export type ThemeConfig = Pick<Theme, 'palette'>;
+export function lazyThemeConfig(mode: PaletteMode) {
+  const fields = ['palette'];
+  let config: ThemeConfig | null = null;
+
+  return () => {
+    if (config) return config;
+
+    config = deepmerge(
+      pick(createDefaultThemeOptions(mode), fields),
+      pick(window.blocklet?.theme?.[mode] ?? {}, fields)
+    ) as ThemeConfig;
+
+    return config;
+  };
+}
+
+// 主要处理 overrides
+const normalizeUserThemeOptions = ({ palette, components, overrides, ...rest }: UserThemeOptions) => {
+  const result: UserThemeOptions = {
+    palette,
     components: {
       ...overrides,
       ...components,
     },
     ...rest,
   };
+
+  return result;
 };
 
 const defaultUserThemeOptions: UserThemeOptions = {
@@ -128,21 +168,32 @@ const defaultUserThemeOptions: UserThemeOptions = {
 };
 
 // https://material-ui.com/customization/default-theme/
-export const create = (...args: UserThemeOptions[]) => {
-  const userThemeOptions = args.reduce(
-    (acc, curr) => deepmerge(acc, normalizeUserThemeOptions(curr)),
+export const create = (...args: Array<UserThemeOptions | ((config: ThemeConfig) => UserThemeOptions)>) => {
+  const defaultPrefer = getDefaultThemePrefer();
+  const getThemeConfig = lazyThemeConfig(defaultPrefer);
+  const userThemeOptions = args.reduce<UserThemeOptions>(
+    (acc, curr) =>
+      deepmerge(acc, normalizeUserThemeOptions(typeof curr === 'function' ? curr(getThemeConfig()) : curr)),
     normalizeUserThemeOptions(defaultUserThemeOptions)
   );
-  const { mode, disableBlockletTheme } = userThemeOptions;
-  const blockletThemeOptions = window.blocklet?.theme?.[mode] ?? {};
-  const defaultThemeOptions = createDefaultThemeOptions(mode);
+  const prefer = userThemeOptions.mode || userThemeOptions.palette?.mode || defaultPrefer;
+  const blockletThemeOptions = window.blocklet?.theme?.[prefer] ?? {};
+  const defaultThemeOptions = createDefaultThemeOptions(prefer);
+  const { disableBlockletTheme } = userThemeOptions;
 
   // 合并配置
-  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) as ThemeOptions[]
+  );
 
   // 创建主题
   const theme = _createTheme(mergedThemeOptions);

package/src/UserCard/Container/card.tsx

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

package/src/UserCard/Container/dialog.tsx

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

package/src/Util/index.ts

@@ -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, { type DeepmergeOptions } from '@mui/utils/deepmerge';
 import { DID_PREFIX, BLOCKLET_SERVICE_PATH_PREFIX } from './constant';
 import type { $TSFixMe, Locale } from '../type';
 
@@ -538,3 +539,27 @@ export const lazyRetry = (fn: () => Promise<any>) =>
 export const cleanedObj = (obj: object) => {
   return omitBy(obj, isNil);
 };
+
+/**
+ * 依次对数组中的对象进行深度合并
+ * @param objects - 需要合并的对象数组
+ * @param options - deepmerge 的配置选项
+ * @returns 合并后的对象
+ */
+export function deepmergeAll<T>(objects: T[], options?: DeepmergeOptions): T {
+  if (!Array.isArray(objects)) {
+    throw new Error('First argument should be an array');
+  }
+
+  if (objects.length === 0) {
+    return {} as T;
+  }
+
+  if (objects.length === 1) {
+    return objects[0];
+  }
+
+  return objects.reduce((acc, obj) => {
+    return deepmerge(acc, obj, options);
+  });
+}

package/src/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: {