@blocklet/pages-kit 0.7.21 → 0.7.23

package/lib/cjs/utils/common.js

@@ -13,7 +13,7 @@ exports.isBrowserEnv = isBrowserEnv;
  */
 function isMuiColorKey(value) {
     // special case
-    if (value === 'transparent' || value === 'divider' || value === 'auto') {
+    if (value === 'transparent' || value === 'divider' || value === 'auto' || value === 'grey25') {
         return true;
     }
     return /^(primary|secondary|error|warning|info|success|grey|background|text|action|common)\.[a-zA-Z0-9]+$/.test(value);

package/lib/esm/contexts/color.js

@@ -3,6 +3,7 @@ import { useTheme } from '@mui/material/styles';
 import get from 'lodash/get';
 import { useCallback, useMemo } from 'react';
 import { isMuiColorKey, colorConvert, gradientFromPrimary, isGradient } from '../utils/style';
+const grey25 = { light: '#F8FAFC', dark: 'rgba(255, 255, 255, 0.05)' }; // 扩展 grey25 颜色
 /**
  * Hook 用于获取和操作 MUI 主题色
  */
@@ -23,7 +24,7 @@ export function useMuiColorPalette() {
             // 特殊颜色组
             {
                 type: 'special',
-                keys: ['transparent', 'auto'],
+                keys: ['transparent', 'auto', 'grey25'],
                 variants: null,
                 format: (key) => key,
                 accessor: (key) => ({ [key]: key }),
@@ -112,7 +113,15 @@ export function useMuiColorPalette() {
                     const alternateColorValue = get(alternateTheme, `palette.${colorKey}`, '');
                     if (paletteObj && typeof paletteObj === 'object') {
                         const colorValue = String(paletteObj[variant ?? key] || '');
-                        if (colorValue) {
+                        if (key === 'grey25') {
+                            colors.push({
+                                colorKey,
+                                colorValue: grey25[theme.palette.mode],
+                                group: config.type,
+                                alternateColorValue: grey25[alternateTheme.palette.mode],
+                            });
+                        }
+                        else if (colorValue) {
                             colors.push({ colorKey, colorValue, group: config.type, alternateColorValue });
                         }
                     }
@@ -185,20 +194,18 @@ export function useColorConvert() {
     }, [theme, colorConvert]);
 }
 export function useBackgroundColorStyle() {
-    const getBackgroundColor = useCallback((color = '') => {
-        if (color === 'auto') {
-            return gradientFromPrimary();
-        }
-        return color;
-    }, []);
+    const theme = useTheme();
     const getBackgroundColorStyle = useCallback((color = '') => {
         if (color === 'auto') {
             return { backgroundImage: gradientFromPrimary() };
         }
+        if (color === 'grey25') {
+            return { bgcolor: grey25[theme.palette.mode] };
+        }
         if (isGradient(color)) {
             return { backgroundImage: color };
         }
         return { bgcolor: color };
-    }, []);
-    return { getBackgroundColorStyle, getBackgroundColor };
+    }, [theme]);
+    return { getBackgroundColorStyle };
 }