@blocklet/pages-kit 0.6.99 → 0.6.100

package/lib/cjs/utils/common.js

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

package/lib/cjs/utils/style.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isMuiColorKey = void 0;
+exports.isMuiColorKey = exports.gradientFromPrimary = void 0;
 exports.isGradient = isGradient;
 exports.isColorString = isColorString;
 exports.getSafeGradient = getSafeGradient;
@@ -51,7 +51,7 @@ function isColorString(color) {
     if (typeof color !== 'string') {
         return false;
     }
-    if (isGradient(color)) {
+    if (isGradient(color) || color === 'auto') {
         return true;
     }
     const currentColor = (0, tinycolor2_1.default)(color);
@@ -141,6 +141,20 @@ function parseColor(color = '') {
     }
     return color;
 }
+const gradientFromPrimary = (opts = {}) => (theme) => {
+    const { angle = '135deg', hueShift = 35 } = opts;
+    // 取 primary.main -> HSL（tinycolor 的 s/l 为 0~1）
+    const base = (0, tinycolor2_1.default)(theme.palette.primary.main).toHsl();
+    const clampHue = (h) => ((h % 360) + 360) % 360;
+    const h1 = clampHue(base.h);
+    const h2 = clampHue(base.h - hueShift);
+    const alpha = theme.palette.mode === 'light' ? 0.12 : 0.24;
+    // 生成两端色（只改 H，S/L 不变；统一用目标 alpha）
+    const c1 = (0, tinycolor2_1.default)({ h: h1, s: base.s, l: base.l, a: alpha }).toHslString(); // hsla(h, s%, l%, a)
+    const c2 = (0, tinycolor2_1.default)({ h: h2, s: base.s, l: base.l, a: alpha }).toHslString();
+    return `linear-gradient(${angle}, ${c1} 0%, ${c2} 100%)`;
+};
+exports.gradientFromPrimary = gradientFromPrimary;
 /**
  * 转换颜色
  * @param color - 颜色字符串

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

@@ -5,7 +5,7 @@ import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, ButtonG
 import { useBoolean, useLocalStorageState, useReactive } from 'ahooks';
 import { Suspense, lazy, useCallback, useImperativeHandle, useRef } from 'react';
 import tinycolor from 'tinycolor2';
-import { useMuiColorPalette } from '../contexts/color';
+import { useBackgroundColorStyle, useMuiColorPalette } from '../contexts/color';
 import { isColorString, isGradient, getSafeGradient, getTransparentBackground } from '../utils/style';
 const ColorPickerLib = lazy(() => import('react-best-gradient-color-picker'));
 const HEIGHT = 400;
@@ -123,6 +123,7 @@ export function ColorItem({ color, sx = {}, ...props }) {
 const MuiThemeTab = ({ value, onChange, }) => {
     const { t } = useLocaleContext();
     const muiPalette = useMuiColorPalette();
+    const { getBackgroundColorStyle } = useBackgroundColorStyle();
     const mode = muiPalette?.theme?.palette?.mode;
     const isDark = mode === 'dark';
     const { groupedMuiColors } = muiPalette;
@@ -139,6 +140,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 (_jsx(Tooltip, { title: `${item.colorKey}${hasAlternateColor ? t('maker.configColorMuiThemeWithAlternateColor') : ''}`, sx: {
@@ -170,7 +174,7 @@ const MuiThemeTab = ({ value, onChange, }) => {
                                                 left: 0,
                                                 ...(item.colorValue === 'transparent'
                                                     ? { background: getTransparentBackground() }
-                                                    : { backgroundColor: item.colorValue }),
+                                                    : getBackgroundColorStyle(item.colorValue)),
                                             } }), hasAlternateColor && _jsx(AlternateColorIndicator, { value: item.alternateColorValue }), value?.originalMuiKey === item.colorKey && (_jsx("i", { className: "i-mdi:check", style: {
                                                 color: selectedColor,
                                                 fontSize: '1.2rem',
@@ -204,6 +208,7 @@ export const ConfigColorDialog = function ConfigColorDialog({ ref, onSave, enabl
         defaultValue: 0,
     });
     const muiPalette = useMuiColorPalette();
+    const { getBackgroundColorStyle } = useBackgroundColorStyle();
     const mode = muiPalette?.theme?.palette?.mode;
     const isDark = mode === 'dark';
     // Create default tabs
@@ -241,7 +246,7 @@ export const ConfigColorDialog = function ConfigColorDialog({ ref, onSave, enabl
             previewStyle.backgroundImage = state.value;
         }
         else {
-            previewStyle.backgroundColor = state.value;
+            Object.assign(previewStyle, getBackgroundColorStyle(state.value));
         }
     }
     else {

package/lib/esm/contexts/color.js

@@ -2,7 +2,7 @@ import { createTheme } from '@arcblock/ux/lib/Theme';
 import { useTheme } from '@mui/material/styles';
 import get from 'lodash/get';
 import { useCallback, useMemo } from 'react';
-import { isMuiColorKey, colorConvert } from '../utils/style';
+import { isMuiColorKey, colorConvert, gradientFromPrimary, isGradient } from '../utils/style';
 /**
  * Hook 用于获取和操作 MUI 主题色
  */
@@ -23,10 +23,10 @@ export function useMuiColorPalette() {
             // 特殊颜色组
             {
                 type: 'special',
-                keys: ['transparent'],
+                keys: ['transparent', 'auto'],
                 variants: null,
-                format: () => 'transparent',
-                accessor: () => ({ transparent: 'transparent' }),
+                format: (key) => key,
+                accessor: (key) => ({ [key]: key }),
             },
             // common 颜色
             {
@@ -184,3 +184,21 @@ export function useColorConvert() {
         return colorConvert(color, theme);
     }, [theme, colorConvert]);
 }
+export function useBackgroundColorStyle() {
+    const getBackgroundColor = useCallback((color = '') => {
+        if (color === 'auto') {
+            return gradientFromPrimary();
+        }
+        return color;
+    }, []);
+    const getBackgroundColorStyle = useCallback((color = '') => {
+        if (color === 'auto') {
+            return { backgroundImage: gradientFromPrimary() };
+        }
+        if (isGradient(color)) {
+            return { backgroundImage: color };
+        }
+        return { bgcolor: color };
+    }, []);
+    return { getBackgroundColorStyle, getBackgroundColor };
+}