@blocklet/pages-kit 0.6.98 → 0.6.100

package/lib/esm/utils/common.js

@@ -8,7 +8,7 @@ export const isBrowserEnv = () => {
  */
 export 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/esm/utils/style.js

@@ -38,7 +38,7 @@ export function isColorString(color) {
     if (typeof color !== 'string') {
         return false;
     }
-    if (isGradient(color)) {
+    if (isGradient(color) || color === 'auto') {
         return true;
     }
     const currentColor = tinycolor(color);
@@ -128,6 +128,19 @@ export function parseColor(color = '') {
     }
     return color;
 }
+export const gradientFromPrimary = (opts = {}) => (theme) => {
+    const { angle = '135deg', hueShift = 35 } = opts;
+    // 取 primary.main -> HSL（tinycolor 的 s/l 为 0~1）
+    const base = tinycolor(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 = tinycolor({ h: h1, s: base.s, l: base.l, a: alpha }).toHslString(); // hsla(h, s%, l%, a)
+    const c2 = tinycolor({ h: h2, s: base.s, l: base.l, a: alpha }).toHslString();
+    return `linear-gradient(${angle}, ${c1} 0%, ${c2} 100%)`;
+};
 /**
  * 转换颜色
  * @param color - 颜色字符串

package/lib/types/contexts/color.d.ts

@@ -23,4 +23,17 @@ export declare function useMuiColorPalette(): {
  * React Hook，用于实时转换颜色值（包括MUI主题色键）
  */
 export declare function useColorConvert(): (color?: string) => string;
+export declare function useBackgroundColorStyle(): {
+    getBackgroundColorStyle: (color?: string) => {
+        backgroundImage: (theme: import("@mui/material/styles").Theme) => string;
+        bgcolor?: undefined;
+    } | {
+        backgroundImage: string;
+        bgcolor?: undefined;
+    } | {
+        bgcolor: string;
+        backgroundImage?: undefined;
+    };
+    getBackgroundColor: (color?: string) => string | ((theme: import("@mui/material/styles").Theme) => string);
+};
 export {};