@blocklet/pages-kit 0.7.20 → 0.7.22

package/lib/cjs/contexts/color.js

@@ -11,6 +11,7 @@ const styles_1 = require("@mui/material/styles");
 const get_1 = __importDefault(require("lodash/get"));
 const react_1 = require("react");
 const style_1 = require("../utils/style");
+const grey25 = { light: '#F8FAFC', dark: 'rgba(255, 255, 255, 0.05)' }; // 扩展 grey25 颜色
 /**
  * Hook 用于获取和操作 MUI 主题色
  */
@@ -31,7 +32,7 @@ function useMuiColorPalette() {
             // 特殊颜色组
             {
                 type: 'special',
-                keys: ['transparent', 'auto'],
+                keys: ['transparent', 'auto', 'grey25'],
                 variants: null,
                 format: (key) => key,
                 accessor: (key) => ({ [key]: key }),
@@ -120,7 +121,15 @@ function useMuiColorPalette() {
                     const alternateColorValue = (0, get_1.default)(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 });
                         }
                     }
@@ -193,20 +202,18 @@ function useColorConvert() {
     }, [theme, style_1.colorConvert]);
 }
 function useBackgroundColorStyle() {
-    const getBackgroundColor = (0, react_1.useCallback)((color = '') => {
-        if (color === 'auto') {
-            return (0, style_1.gradientFromPrimary)();
-        }
-        return color;
-    }, []);
+    const theme = (0, styles_1.useTheme)();
     const getBackgroundColorStyle = (0, react_1.useCallback)((color = '') => {
         if (color === 'auto') {
             return { backgroundImage: (0, style_1.gradientFromPrimary)() };
         }
+        if (color === 'grey25') {
+            return { bgcolor: grey25[theme.palette.mode] };
+        }
         if ((0, style_1.isGradient)(color)) {
             return { backgroundImage: color };
         }
         return { bgcolor: color };
-    }, []);
-    return { getBackgroundColorStyle, getBackgroundColor };
+    }, [theme]);
+    return { getBackgroundColorStyle };
 }