@blocklet/pages-kit 0.6.98 → 0.6.100

package/lib/cjs/builtin/color-picker.js

@@ -157,6 +157,7 @@ function ColorItem({ color, sx = {}, ...props }) {
 const MuiThemeTab = ({ value, onChange, }) => {
     const { t } = (0, context_1.useLocaleContext)();
     const muiPalette = (0, color_1.useMuiColorPalette)();
+    const { getBackgroundColorStyle } = (0, color_1.useBackgroundColorStyle)();
     const mode = muiPalette?.theme?.palette?.mode;
     const isDark = mode === 'dark';
     const { groupedMuiColors } = muiPalette;
@@ -173,6 +174,9 @@ const MuiThemeTab = ({ value, onChange, }) => {
                                     selectedColor = 'rgba(0,0,0,0.7)';
                                 }
                             }
+                            else if (item.colorKey === 'auto') {
+                                selectedColor = 'rgba(0,0,0,0.7)';
+                            }
                             // 是否有另一种模式的颜色值
                             const hasAlternateColor = !!item.alternateColorValue;
                             return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: `${item.colorKey}${hasAlternateColor ? t('maker.configColorMuiThemeWithAlternateColor') : ''}`, sx: {
@@ -204,7 +208,7 @@ const MuiThemeTab = ({ value, onChange, }) => {
                                                 left: 0,
                                                 ...(item.colorValue === 'transparent'
                                                     ? { background: (0, style_1.getTransparentBackground)() }
-                                                    : { backgroundColor: item.colorValue }),
+                                                    : getBackgroundColorStyle(item.colorValue)),
                                             } }), hasAlternateColor && (0, jsx_runtime_1.jsx)(AlternateColorIndicator, { value: item.alternateColorValue }), value?.originalMuiKey === item.colorKey && ((0, jsx_runtime_1.jsx)("i", { className: "i-mdi:check", style: {
                                                 color: selectedColor,
                                                 fontSize: '1.2rem',
@@ -238,6 +242,7 @@ const ConfigColorDialog = function ConfigColorDialog({ ref, onSave, enableMuiPal
         defaultValue: 0,
     });
     const muiPalette = (0, color_1.useMuiColorPalette)();
+    const { getBackgroundColorStyle } = (0, color_1.useBackgroundColorStyle)();
     const mode = muiPalette?.theme?.palette?.mode;
     const isDark = mode === 'dark';
     // Create default tabs
@@ -275,7 +280,7 @@ const ConfigColorDialog = function ConfigColorDialog({ ref, onSave, enableMuiPal
             previewStyle.backgroundImage = state.value;
         }
         else {
-            previewStyle.backgroundColor = state.value;
+            Object.assign(previewStyle, getBackgroundColorStyle(state.value));
         }
     }
     else {

package/lib/cjs/contexts/color.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMuiColorPalette = useMuiColorPalette;
 exports.useColorConvert = useColorConvert;
+exports.useBackgroundColorStyle = useBackgroundColorStyle;
 const Theme_1 = require("@arcblock/ux/lib/Theme");
 const styles_1 = require("@mui/material/styles");
 const get_1 = __importDefault(require("lodash/get"));
@@ -30,10 +31,10 @@ function useMuiColorPalette() {
             // 特殊颜色组
             {
                 type: 'special',
-                keys: ['transparent'],
+                keys: ['transparent', 'auto'],
                 variants: null,
-                format: () => 'transparent',
-                accessor: () => ({ transparent: 'transparent' }),
+                format: (key) => key,
+                accessor: (key) => ({ [key]: key }),
             },
             // common 颜色
             {
@@ -191,3 +192,21 @@ function useColorConvert() {
         return (0, style_1.colorConvert)(color, theme);
     }, [theme, style_1.colorConvert]);
 }
+function useBackgroundColorStyle() {
+    const getBackgroundColor = (0, react_1.useCallback)((color = '') => {
+        if (color === 'auto') {
+            return (0, style_1.gradientFromPrimary)();
+        }
+        return color;
+    }, []);
+    const getBackgroundColorStyle = (0, react_1.useCallback)((color = '') => {
+        if (color === 'auto') {
+            return { backgroundImage: (0, style_1.gradientFromPrimary)() };
+        }
+        if ((0, style_1.isGradient)(color)) {
+            return { backgroundImage: color };
+        }
+        return { bgcolor: color };
+    }, []);
+    return { getBackgroundColorStyle, getBackgroundColor };
+}