/** * Theme Generator * Generates a complete theme configuration based on input primary color, background color, and text color. * Supports both light and dark modes. * * ## Core Features * 1. **Color Space Conversion**: HEX ↔ RGB ↔ HSL conversions * 2. **Color Adjustment and Generation**: Adjust brightness and saturation based on HSL color space * 3. **Complete Theme Configuration**: Generates a complete theme configuration object including * primary colors, text colors, background colors, border colors, fill colors, status colors, * decorative colors, shadows, etc. * * ## Design Principles * ### Light Mode * - Background: 95-99% lightness * - Border: 80-90% lightness * - Text: 15-25% lightness * * ### Dark Mode * - Background: 0-10% lightness * - Border: Uses transparency to enhance layering * - Text: 85-95% lightness * - Status colors and decorative colors: Use preset optimized values * * ## Generation Rules * - **Primary Color**: Generated from input primary color, automatically adjusts brightness in dark mode for readability * - **Background Color System**: Generated based on bgBase, maintains consistent hue * - **Text Color System**: Generated based on textBase, uses transparency to achieve different levels * - **Border Color System**: Generated based on bgBase, increases saturation to enhance visibility * - **Fill Color System**: Dark mode uses text color + transparency, light mode uses background color * - **Status Colors/Decorative Colors/Shadows**: Dark mode uses preset optimized values, light mode uses configuration file */ /** * Generates complete theme configuration * * Generates a complete theme configuration object based on input primary color, background color, * text color, and mode (light/dark). The theme configuration includes: primary colors, text colors, * background colors, border colors, fill colors, status colors, decorative colors, shadows, etc. * * @param {Object} props - Theme generation parameters * @param {string} props.primaryHex - Primary color HEX value (required) * @param {string} [props.bgBaseHex] - Background base color HEX value, uses default if not provided (light: #ffffff, dark: #000000) * @param {string} [props.textBaseHex] - Text base color HEX value, uses default if not provided (light: #1a1a1a, dark: #E7E7ED) * @param {boolean} [props.darkMode=false] - Whether it is dark mode * @returns {Object | null} Complete theme configuration object, returns null if parameters are invalid */ interface GenerateThemeProps { /** Primary color HEX value */ primaryHex: string; /** Background base color HEX value */ bgBaseHex?: string; /** Text base color HEX value */ textBaseHex?: string; /** Whether it is dark mode */ darkMode: boolean; } declare const generateTheme: (config: GenerateThemeProps) => { borderRadiusXS: number; borderRadiusSM: number; borderRadius: number; borderRadiusLG: number; borderRadiusXL: number; borderRadiusFull: number; wireframe: boolean; colorPrimary: any; colorPrimaryHover: any; colorPrimaryActive: any; colorPrimaryBg: any; colorPrimaryBgHover: any; colorPrimaryBorder: any; colorPrimaryBorderHover: any; colorPrimaryText: any; colorPrimaryTextHover: any; colorPrimaryTextActive: any; colorTextOnPrimary: string; colorTextBase: string; colorText: string; colorTextSecondary: string; colorTextTertiary: string; colorTextQuaternary: string; colorTextWhite: string; colorBgBase: string; colorBgContainer: any; colorBgElevated: any; colorBgLayout: string; colorBgSpotlight: string; colorBgMask: string; colorBorder: any; colorBorderSecondary: any; colorFill: string; colorFillSecondary: string; colorFillTertiary: string; colorFillQuaternary: string; colorFillDisable: any; colorLink: any; colorInfo: string; colorInfoHover: string; colorInfoText: string; colorInfoBg: string; colorInfoBgHover: string; colorInfoBorder: string; colorInfoBorderHover: string; colorSuccess: string; colorSuccessHover: string; colorSuccessBg: string; colorSuccessBgHover: string; colorSuccessBorder: string; colorSuccessBorderHover: string; colorWarning: string; colorWarningHover: string; colorWarningBg: string; colorWarningBgHover: string; colorWarningBorder: string; colorWarningBorderHover: string; colorError: string; colorErrorHover: string; colorErrorBg: string; colorErrorBgHover: string; colorErrorBorder: string; colorErrorBorderHover: string; colorPurple: string; colorPurpleHover: string; colorPurpleBg: string; colorPink: string; colorPinkHover: string; colorPinkBg: string; colorYellow: string; colorYellowHover: string; colorYellowBg: string; colorOrange: string; colorOrangeHover: string; colorOrangeBg: string; colorTeal: string; colorTealHover: string; colorTealBg: string; colorBlue: string; colorBlueHover: string; colorBlueBg: string; colorMauve: string; colorMauveHover: string; colorMauveBg: string; colorSlate: string; colorSlateHover: string; colorSlateBg: string; colorLavender: string; colorLavenderHover: string; colorLavenderBg: string; boxShadow: string; boxShadowSecondary: string; boxShadowTertiary: string; boxShadowTertiaryLeft: string; boxShadowInput: string; }; export default generateTheme;