taro-uno-ui 0.9.0 → 1.0.0

package/src/theme/generated/tokens.scss

@@ -173,11 +173,47 @@ $spacing-container-xl: 1280px;
 $spacing-container-2xl: 1536px;
 
 // ==================== 字体令牌 ====================
-$typography-fontFamily-sans: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
-$typography-fontFamily-serif: Georgia, Cambria, Times New Roman, Times, serif;
-$typography-fontFamily-mono: Fira Code, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
-$typography-fontFamily-display: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
-$typography-fontFamily-body: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+$typography-fontFamily-sans:
+  Inter,
+  -apple-system,
+  BlinkMacSystemFont,
+  Segoe UI,
+  Roboto,
+  Helvetica Neue,
+  Arial,
+  sans-serif;
+$typography-fontFamily-serif:
+  Georgia,
+  Cambria,
+  Times New Roman,
+  Times,
+  serif;
+$typography-fontFamily-mono:
+  Fira Code,
+  Menlo,
+  Monaco,
+  Consolas,
+  Liberation Mono,
+  Courier New,
+  monospace;
+$typography-fontFamily-display:
+  Inter,
+  -apple-system,
+  BlinkMacSystemFont,
+  Segoe UI,
+  Roboto,
+  Helvetica Neue,
+  Arial,
+  sans-serif;
+$typography-fontFamily-body:
+  Inter,
+  -apple-system,
+  BlinkMacSystemFont,
+  Segoe UI,
+  Roboto,
+  Helvetica Neue,
+  Arial,
+  sans-serif;
 $typography-fontSize-3xs: 10px;
 $typography-fontSize-2xs: 12px;
 $typography-fontSize-xs: 14px;
@@ -252,23 +288,45 @@ $effects-borderRadius-modal: 12px;
 $effects-borderRadius-dropdown: 8px;
 $effects-boxShadow-none: none;
 $effects-boxShadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-$effects-boxShadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-$effects-boxShadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-$effects-boxShadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-$effects-boxShadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+$effects-boxShadow-sm:
+  0 1px 3px 0 rgba(0, 0, 0, 0.1),
+  0 1px 2px 0 rgba(0, 0, 0, 0.06);
+$effects-boxShadow-md:
+  0 4px 6px -1px rgba(0, 0, 0, 0.1),
+  0 2px 4px -1px rgba(0, 0, 0, 0.06);
+$effects-boxShadow-lg:
+  0 10px 15px -3px rgba(0, 0, 0, 0.1),
+  0 4px 6px -2px rgba(0, 0, 0, 0.05);
+$effects-boxShadow-xl:
+  0 20px 25px -5px rgba(0, 0, 0, 0.1),
+  0 10px 10px -5px rgba(0, 0, 0, 0.04);
 $effects-boxShadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 $effects-boxShadow-3xl: 0 35px 60px -15px rgba(0, 0, 0, 0.3);
 $effects-boxShadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
 $effects-boxShadow-colored: 0 10px 15px -3px rgba(14, 165, 233, 0.15);
 $effects-boxShadow-button-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-$effects-boxShadow-button-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-$effects-boxShadow-button-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-$effects-boxShadow-card-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-$effects-boxShadow-card-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-$effects-boxShadow-card-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+$effects-boxShadow-button-md:
+  0 4px 6px -1px rgba(0, 0, 0, 0.1),
+  0 2px 4px -1px rgba(0, 0, 0, 0.06);
+$effects-boxShadow-button-lg:
+  0 10px 15px -3px rgba(0, 0, 0, 0.1),
+  0 4px 6px -2px rgba(0, 0, 0, 0.05);
+$effects-boxShadow-card-sm:
+  0 1px 3px 0 rgba(0, 0, 0, 0.1),
+  0 1px 2px 0 rgba(0, 0, 0, 0.06);
+$effects-boxShadow-card-md:
+  0 4px 6px -1px rgba(0, 0, 0, 0.1),
+  0 2px 4px -1px rgba(0, 0, 0, 0.06);
+$effects-boxShadow-card-lg:
+  0 10px 15px -3px rgba(0, 0, 0, 0.1),
+  0 4px 6px -2px rgba(0, 0, 0, 0.05);
 $effects-boxShadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-$effects-boxShadow-tooltip: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-$effects-boxShadow-dropdown: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+$effects-boxShadow-tooltip:
+  0 10px 15px -3px rgba(0, 0, 0, 0.1),
+  0 4px 6px -2px rgba(0, 0, 0, 0.05);
+$effects-boxShadow-dropdown:
+  0 10px 15px -3px rgba(0, 0, 0, 0.1),
+  0 4px 6px -2px rgba(0, 0, 0, 0.05);
 $effects-animation-duration-75: 75ms;
 $effects-animation-duration-100: 100ms;
 $effects-animation-duration-150: 150ms;
@@ -296,8 +354,14 @@ $effects-animation-delay-300: 300ms;
 $effects-animation-delay-500: 500ms;
 $effects-transition-none: none;
 $effects-transition-all: all 150ms ease-in-out;
-$effects-transition-common: color 150ms ease-in-out, background-color 150ms ease-in-out, border-color 150ms ease-in-out;
-$effects-transition-colors: color 150ms ease-in-out, background-color 150ms ease-in-out, border-color 150ms ease-in-out;
+$effects-transition-common:
+  color 150ms ease-in-out,
+  background-color 150ms ease-in-out,
+  border-color 150ms ease-in-out;
+$effects-transition-colors:
+  color 150ms ease-in-out,
+  background-color 150ms ease-in-out,
+  border-color 150ms ease-in-out;
 $effects-transition-opacity: opacity 150ms ease-in-out;
 $effects-transition-shadow: box-shadow 150ms ease-in-out;
 $effects-transition-transform: transform 150ms ease-in-out;

package/src/theme/index.ts

@@ -19,50 +19,29 @@ export type {
   ThemeTypography,
   ThemeBorderRadius,
   ThemeShadow,
-  ThemeAnimation
+  ThemeAnimation,
 } from './types';
 
 // 导出默认主题配置
 export { defaultTheme, darkTheme } from './defaults';
 
 // 导出工具函数
-export {
-  default as themeUtils,
-  ColorUtils,
-  ResponsiveUtils,
-  ThemeValidator,
-  ThemePresets
-} from './utils';
+export { default as themeUtils, ColorUtils, ResponsiveUtils, ThemeValidator, ThemePresets } from './utils';
 
 // 导出CSS变量系统
-export {
-  default as CSSVariableGenerator,
-  createCSSVariables,
-  generateCSSVariablesString
-} from './variables';
-export type {
-  CSSVariables,
-  VariableInheritance,
-  VariableGroup
-} from './variables';
+export { default as CSSVariableGenerator, createCSSVariables, generateCSSVariablesString } from './variables';
+export type { CSSVariables, VariableInheritance, VariableGroup } from './variables';
 
 // 导出样式工具
-export {
-  default as createStyleUtils,
-  generateStyles,
-  createStyles,
-  styleUtils
-} from './styles';
-export type {
-  StyleUtils as StyleUtilsType
-} from './styles';
+export { default as createStyleUtils, generateStyles, createStyles, styleUtils } from './styles';
+export type { StyleUtils as StyleUtilsType } from './styles';
 
 // 导出设计令牌系统
 export {
   default as DesignTokenGenerator,
   createDesignTokens,
   generateDesignTokenCSS,
-  generateDarkThemeCSS
+  generateDarkThemeCSS,
 } from './design-tokens';
 export type { DesignTokens } from './design-tokens';
 
@@ -117,4 +96,4 @@ export default {
   themeTools,
   defaultTheme,
   darkTheme,
-};
+};

package/src/theme/responsive.tsx

@@ -91,35 +91,44 @@ export function ResponsiveProvider({ children }: { children: React.ReactNode })
   const isDesktop = screenSize.width >= breakpoints.lg;
 
   // 断点匹配检查
-  const matches = useCallback((breakpoint: keyof typeof breakpoints) => {
-    return screenSize.width >= breakpoints[breakpoint];
-  }, [screenSize.width]);
+  const matches = useCallback(
+    (breakpoint: keyof typeof breakpoints) => {
+      return screenSize.width >= breakpoints[breakpoint];
+    },
+    [screenSize.width],
+  );
 
-  const matchesMinWidth = useCallback((width: number) => {
-    return screenSize.width >= width;
-  }, [screenSize.width]);
+  const matchesMinWidth = useCallback(
+    (width: number) => {
+      return screenSize.width >= width;
+    },
+    [screenSize.width],
+  );
 
-  const matchesMaxWidth = useCallback((width: number) => {
-    return screenSize.width <= width;
-  }, [screenSize.width]);
+  const matchesMaxWidth = useCallback(
+    (width: number) => {
+      return screenSize.width <= width;
+    },
+    [screenSize.width],
+  );
 
   // 获取响应式值
-  const getResponsiveValue = useCallback(<T,>(
-    values: Partial<Record<string, T>>,
-    defaultValue: T
-  ): T => {
-    const currentIndex = breakpointOrder.indexOf(currentBreakpoint as typeof breakpointOrder[number]);
-    
-    // 从当前断点开始，向上查找第一个匹配的值
-    for (let i = currentIndex; i >= 0; i--) {
-      const breakpoint = breakpointOrder[i];
-      if (values[breakpoint as keyof typeof values] !== undefined) {
-        return values[breakpoint as keyof typeof values] as T;
+  const getResponsiveValue = useCallback(
+    <T,>(values: Partial<Record<string, T>>, defaultValue: T): T => {
+      const currentIndex = breakpointOrder.indexOf(currentBreakpoint as (typeof breakpointOrder)[number]);
+
+      // 从当前断点开始，向上查找第一个匹配的值
+      for (let i = currentIndex; i >= 0; i--) {
+        const breakpoint = breakpointOrder[i];
+        if (values[breakpoint as keyof typeof values] !== undefined) {
+          return values[breakpoint as keyof typeof values] as T;
+        }
       }
-    }
-    
-    return defaultValue;
-  }, [currentBreakpoint]);
+
+      return defaultValue;
+    },
+    [currentBreakpoint],
+  );
 
   const contextValue: ResponsiveContextType = {
     screenSize,
@@ -133,11 +142,7 @@ export function ResponsiveProvider({ children }: { children: React.ReactNode })
     getResponsiveValue,
   };
 
-  return (
-    <ResponsiveContext.Provider value={contextValue}>
-      {children}
-    </ResponsiveContext.Provider>
-  );
+  return <ResponsiveContext.Provider value={contextValue}>{children}</ResponsiveContext.Provider>;
 }
 
 /**
@@ -154,10 +159,7 @@ export function useResponsive() {
 /**
  * 响应式值 Hook
  */
-export function useResponsiveValue<T>(
-  values: Partial<Record<string, T>>,
-  defaultValue: T
-): T {
+export function useResponsiveValue<T>(values: Partial<Record<string, T>>, defaultValue: T): T {
   const { getResponsiveValue } = useResponsive();
   return getResponsiveValue(values, defaultValue);
 }
@@ -190,4 +192,4 @@ export function useDeviceType() {
   };
 }
 
-export default ResponsiveProvider;
+export default ResponsiveProvider;

package/src/theme/styles.ts

@@ -397,7 +397,7 @@ export const styleUtils = (theme?: ThemeConfig): StyleUtils => {
     const { defaultTheme } = require('./defaults');
     _defaultStyleUtils = createStyleUtils(defaultTheme);
   }
-  return theme ? createStyleUtils(theme) : (_defaultStyleUtils!);
+  return theme ? createStyleUtils(theme) : _defaultStyleUtils!;
 };
 
 export default createStyleUtils;

package/src/theme/useThemeUtils.ts

@@ -193,11 +193,11 @@ function getDefaultSpacing(spacingKey: string): string {
     '48': '12rem',
     '56': '14rem',
     '64': '16rem',
-    'xs': '0.5rem',
-    'sm': '0.75rem',
-    'md': '1rem',
-    'lg': '1.5rem',
-    'xl': '2rem',
+    xs: '0.5rem',
+    sm: '0.75rem',
+    md: '1rem',
+    lg: '1.5rem',
+    xl: '2rem',
     '2xl': '3rem',
     '3xl': '4rem',
     '4xl': '6rem',
@@ -209,11 +209,11 @@ function getDefaultSpacing(spacingKey: string): string {
 
 function getDefaultFontSize(sizeKey: string): string {
   const defaultFontSizes: Record<string, string> = {
-    'xs': '0.75rem',
-    'sm': '0.875rem',
-    'base': '1rem',
-    'lg': '1.125rem',
-    'xl': '1.25rem',
+    xs: '0.75rem',
+    sm: '0.875rem',
+    base: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem',
     '2xl': '1.5rem',
     '3xl': '1.875rem',
     '4xl': '2.25rem',
@@ -229,12 +229,12 @@ function getDefaultFontSize(sizeKey: string): string {
 
 function getDefaultLineHeight(lineHeightKey: string): string {
   const defaultLineHeights: Record<string, string> = {
-    'none': '1',
-    'tight': '1.25',
-    'snug': '1.375',
-    'normal': '1.5',
-    'relaxed': '1.625',
-    'loose': '2',
+    none: '1',
+    tight: '1.25',
+    snug: '1.375',
+    normal: '1.5',
+    relaxed: '1.625',
+    loose: '2',
   };
 
   return defaultLineHeights[lineHeightKey] || '1.5';
@@ -242,14 +242,14 @@ function getDefaultLineHeight(lineHeightKey: string): string {
 
 function getDefaultBorderRadius(radiusKey: string): string {
   const defaultBorderRadius: Record<string, string> = {
-    'none': '0',
-    'sm': '0.125rem',
-    'md': '0.375rem',
-    'lg': '0.5rem',
-    'xl': '0.75rem',
+    none: '0',
+    sm: '0.125rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    xl: '0.75rem',
     '2xl': '1rem',
     '3xl': '1.5rem',
-    'full': '9999px',
+    full: '9999px',
   };
 
   return defaultBorderRadius[radiusKey] || '0.375rem';
@@ -257,13 +257,13 @@ function getDefaultBorderRadius(radiusKey: string): string {
 
 function getDefaultShadow(shadowKey: string): string {
   const defaultShadows: Record<string, string> = {
-    'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
-    'md': '0 4px 6px -1px rgb(0 0 0 / 0.1)',
-    'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1)',
-    'xl': '0 20px 25px -5px rgb(0 0 0 / 0.1)',
+    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+    md: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
+    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1)',
+    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1)',
     '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
-    'inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
-    'none': 'none',
+    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+    none: 'none',
   };
 
   return defaultShadows[shadowKey] || 'none';
@@ -271,9 +271,9 @@ function getDefaultShadow(shadowKey: string): string {
 
 function getDefaultTransition(transitionKey: string): string {
   const defaultTransitions: Record<string, string> = {
-    'fast': '150ms ease-in-out',
-    'normal': '300ms ease-in-out',
-    'slow': '500ms ease-in-out',
+    fast: '150ms ease-in-out',
+    normal: '300ms ease-in-out',
+    slow: '500ms ease-in-out',
   };
 
   return defaultTransitions[transitionKey] || '300ms ease-in-out';
@@ -287,13 +287,13 @@ function getDefaultZIndex(zIndexKey: string): number {
     '30': 30,
     '40': 40,
     '50': 50,
-    'modal': 1000,
-    'popover': 1010,
-    'tooltip': 1020,
-    'notification': 1030,
-    'header': 1040,
-    'footer': 1050,
-    'overlay': 1060,
+    modal: 1000,
+    popover: 1010,
+    tooltip: 1020,
+    notification: 1030,
+    header: 1040,
+    footer: 1050,
+    overlay: 1060,
   };
 
   return defaultZIndex[zIndexKey] || 1;
@@ -301,11 +301,11 @@ function getDefaultZIndex(zIndexKey: string): number {
 
 function getDefaultBreakpoint(breakpointKey: string): string {
   const defaultBreakpoints: Record<string, string> = {
-    'xs': '0',
-    'sm': '640px',
-    'md': '768px',
-    'lg': '1024px',
-    'xl': '1280px',
+    xs: '0',
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
     '2xl': '1536px',
   };
 

package/src/theme/utils.ts

@@ -78,9 +78,9 @@ export class ColorUtils {
     const hue2rgb = (p: number, q: number, t: number): number => {
       if (t < 0) t += 1;
       if (t > 1) t -= 1;
-      if (t < 1/6) return p + (q - p) * 6 * t;
-      if (t < 1/2) return q;
-      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
       return p;
     };
 
@@ -91,9 +91,9 @@ export class ColorUtils {
     } else {
       const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
       const p = 2 * l - q;
-      r = hue2rgb(p, q, h + 1/3);
+      r = hue2rgb(p, q, h + 1 / 3);
       g = hue2rgb(p, q, h);
-      b = hue2rgb(p, q, h - 1/3);
+      b = hue2rgb(p, q, h - 1 / 3);
     }
 
     return this.rgbToHex(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255));
@@ -142,20 +142,20 @@ export class ColorUtils {
   static generateGradient(color1: string, color2: string, steps: number): string[] {
     const rgb1 = this.hexToRgb(color1);
     const rgb2 = this.hexToRgb(color2);
-    
+
     if (!rgb1 || !rgb2) return [];
 
     const gradient: string[] = [];
-    
+
     for (let i = 0; i < steps; i++) {
       const ratio = i / (steps - 1);
       const r = Math.round(rgb1.r + (rgb2.r - rgb1.r) * ratio);
       const g = Math.round(rgb1.g + (rgb2.g - rgb1.g) * ratio);
       const b = Math.round(rgb1.b + (rgb2.b - rgb1.b) * ratio);
-      
+
       gradient.push(this.rgbToHex(r, g, b));
     }
-    
+
     return gradient;
   }
 
@@ -165,11 +165,11 @@ export class ColorUtils {
   static getContrastRatio(color1: string, color2: string): number {
     const rgb1 = this.hexToRgb(color1);
     const rgb2 = this.hexToRgb(color2);
-    
+
     if (!rgb1 || !rgb2) return 0;
 
     const getLuminance = (r: number, g: number, b: number): number => {
-      const [rs, gs, bs] = [r, g, b].map(c => {
+      const [rs, gs, bs] = [r, g, b].map((c) => {
         c = c / 255;
         return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
       });
@@ -178,10 +178,10 @@ export class ColorUtils {
 
     const lum1 = getLuminance(rgb1.r, rgb1.g, rgb1.b);
     const lum2 = getLuminance(rgb2.r, rgb2.g, rgb2.b);
-    
+
     const brightest = Math.max(lum1, lum2);
     const darkest = Math.min(lum1, lum2);
-    
+
     return (brightest + 0.05) / (darkest + 0.05);
   }
 
@@ -190,7 +190,7 @@ export class ColorUtils {
    */
   static meetsWCAGStandard(color1: string, color2: string, level: 'AA' | 'AAA' = 'AA'): boolean {
     const ratio = this.getContrastRatio(color1, color2);
-    
+
     if (level === 'AA') {
       return ratio >= 4.5;
     } else {
@@ -208,7 +208,7 @@ export class ResponsiveUtils {
     if (typeof window === 'undefined') {
       return { width: 0, height: 0 };
     }
-    
+
     return {
       width: window.innerWidth,
       height: window.innerHeight,
@@ -220,16 +220,15 @@ export class ResponsiveUtils {
    */
   static getCurrentBreakpoint(breakpoints: Record<string, number>): string {
     const width = this.getScreenSize().width;
-    
-    const breakpointEntries = Object.entries(breakpoints)
-      .sort(([, a], [, b]) => b - a);
-    
+
+    const breakpointEntries = Object.entries(breakpoints).sort(([, a], [, b]) => b - a);
+
     for (const [name, value] of breakpointEntries) {
       if (width >= value) {
         return name;
       }
     }
-    
+
     return breakpointEntries[breakpointEntries.length - 1]?.[0] || 'md';
   }
 
@@ -238,10 +237,8 @@ export class ResponsiveUtils {
    */
   static isMobile(): boolean {
     if (typeof window === 'undefined') return false;
-    
-    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-      navigator.userAgent
-    );
+
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
   }
 
   /**
@@ -249,7 +246,7 @@ export class ResponsiveUtils {
    */
   static isTablet(): boolean {
     if (typeof window === 'undefined') return false;
-    
+
     const width = this.getScreenSize().width;
     return width >= 768 && width <= 1024;
   }
@@ -259,7 +256,7 @@ export class ResponsiveUtils {
    */
   static isDesktop(): boolean {
     if (typeof window === 'undefined') return false;
-    
+
     const width = this.getScreenSize().width;
     return width > 1024;
   }
@@ -319,7 +316,8 @@ export class ThemeValidator {
    * 检查是否为有效的颜色值
    */
   static isValidColor(color: string): boolean {
-    const colorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$|^rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*[\d.]+\s*\)$|^hsl\(\s*\d+\s*,\s*[\d.]+\s*,\s*[\d.]+\s*\)$|^hsla\(\s*\d+\s*,\s*[\d.]+\s*,\s*[\d.]+\s*,\s*[\d.]+\s*\)$|[a-zA-Z]+$/;
+    const colorRegex =
+      /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$|^rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*[\d.]+\s*\)$|^hsl\(\s*\d+\s*,\s*[\d.]+\s*,\s*[\d.]+\s*\)$|^hsla\(\s*\d+\s*,\s*[\d.]+\s*,\s*[\d.]+\s*,\s*[\d.]+\s*\)$|[a-zA-Z]+$/;
     return colorRegex.test(color);
   }
 
@@ -340,7 +338,9 @@ export class ThemeValidator {
     // 检查次要文本的对比度
     const secondaryTextContrast = ColorUtils.getContrastRatio(theme.colors.textSecondary, theme.colors.background);
     if (secondaryTextContrast < 3) {
-      issues.push(`Secondary text contrast ratio is too low: ${secondaryTextContrast.toFixed(2)} (should be at least 3)`);
+      issues.push(
+        `Secondary text contrast ratio is too low: ${secondaryTextContrast.toFixed(2)} (should be at least 3)`,
+      );
       score -= 10;
     }
 
@@ -377,7 +377,7 @@ export class PerformanceMonitor {
    */
   static getStats(name: string): { count: number; average: number; min: number; max: number } {
     const values = this.metrics.get(name) || [];
-    
+
     if (values.length === 0) {
       return { count: 0, average: 0, min: 0, max: 0 };
     }
@@ -407,11 +407,11 @@ export class PerformanceMonitor {
    */
   static getReport(): Record<string, any> {
     const report: Record<string, any> = {};
-    
+
     this.metrics.forEach((_, name) => {
       report[name] = this.getStats(name);
     });
-    
+
     return report;
   }
 }
@@ -498,4 +498,4 @@ export const themeUtils = {
   presets: ThemePresets,
 };
 
-export default themeUtils;
+export default themeUtils;