/** * ZUI Color System * Color tokens derived from ZeppOS 3.0 design specifications * * The color system is colorful and full of warmth, designed to make users * feel light, relaxed, and evoke pleasant emotions. */ import type { ThemeColors } from '../core/types'; /** * Convert hex color to number (for ZeppOS widgets) * @param hex - Hex color string (e.g., '#FFFFFF') */ export declare function hexToNumber(hex: string): number; /** * Convert number to hex color string * @param num - Color number */ export declare function numberToHex(num: number): string; /** * Convert hex to RGB components * @param hex - Hex color string */ export declare function hexToRgb(hex: string): { r: number; g: number; b: number; }; /** * Convert RGB to hex color string * @param r - Red component (0-255) * @param g - Green component (0-255) * @param b - Blue component (0-255) */ export declare function rgbToHex(r: number, g: number, b: number): string; /** * Parse color string to hex (supports rgba) * @param color - Color string */ export declare function parseColor(color: string): string; /** * Apply brightness adjustment (for pressed/disabled states) * @param hex - Hex color string * @param factor - Brightness factor (0-1) */ export declare function adjustBrightness(hex: string, factor: number): string; /** * Calculate alpha value from color (for rgba support) * @param color - Color string */ export declare function getAlpha(color: string): number; /** * Apply alpha to a hex color * @param hex - Hex color string * @param alpha - Alpha value (0-1) */ export declare function withAlpha(hex: string, alpha: number): string; /** * Calculate contrast ratio between two colors (WCAG) * @param color1 - First color * @param color2 - Second color */ export declare function getContrastRatio(color1: string, color2: string): number; /** * System colors for key content, alerts, controls, and graphics */ export declare const systemColors: { readonly blue: "#0986D4"; readonly green: "#2DC84D"; readonly red: "#FA5151"; readonly orange: "#FF9500"; readonly yellow: "#FFCC00"; readonly purple: "#AF52DE"; readonly pink: "#FF2D55"; readonly teal: "#5AC8FA"; readonly cyan: "#34C759"; }; /** * Text colors for various text levels */ export declare const textColors: { readonly title: "#FFFFFF"; readonly subtitle: "rgba(255, 255, 255, 0.72)"; readonly body: "rgba(255, 255, 255, 0.60)"; readonly caption: "rgba(255, 255, 255, 0.44)"; readonly disabled: "rgba(255, 255, 255, 0.28)"; }; /** * Background colors for surfaces */ export declare const backgroundColors: { readonly primary: "#000000"; readonly elevated: "#1C1C1E"; readonly secondary: "#2C2C2E"; readonly tertiary: "#3A3A3C"; readonly overlay: "rgba(0, 0, 0, 0.6)"; }; /** * Interactive state modifiers * Pressed state: 28.6% brightness reduction (multiply by 0.714) * Disabled state: 50% brightness reduction (multiply by 0.5) */ export declare const stateModifiers: { readonly pressed: 0.714; readonly disabled: 0.5; }; /** * Health feature colors */ export declare const healthColors: { readonly heartRate: { readonly relaxed: "#94D15E"; readonly warmUp: "#FFCC00"; readonly fatBurn: "#FF9500"; readonly cardio: "#FF6B00"; readonly peak: "#FA5151"; }; readonly sleep: { readonly awake: "#666666"; readonly rem: "#7B68EE"; readonly light: "#4FC3F7"; readonly deep: "#0D47A1"; }; readonly stress: { readonly relaxed: "#94D15E"; readonly normal: "#FFCC00"; readonly medium: "#FF9500"; readonly high: "#FA5151"; }; readonly vo2max: { readonly excellent: "#2DC84D"; readonly good: "#94D15E"; readonly fair: "#FFCC00"; readonly poor: "#FF9500"; readonly veryPoor: "#FA5151"; }; readonly trainingLoad: { readonly recovery: "#4FC3F7"; readonly productive: "#2DC84D"; readonly maintaining: "#FFCC00"; readonly overReaching: "#FF9500"; readonly detraining: "#FA5151"; }; }; /** * Auxiliary colors for charts and data visualization */ export declare const auxiliaryColors: readonly ["#5AC8FA", "#4CD964", "#FF9500", "#FF3B30", "#AF52DE", "#FF2D55", "#5856D6", "#34C759"]; /** * Default color theme */ export declare const defaultColors: ThemeColors; /** * Get color by path (e.g., 'primary.blue', 'text.title') */ export declare function getColor(path: string, colors?: ThemeColors): string; /** * Get pressed state color */ export declare function getPressedColor(color: string): string; /** * Get disabled state color */ export declare function getDisabledColor(color: string): string; /** * Check if color meets accessibility contrast requirements * @param foreground - Foreground color * @param background - Background color * @param level - AA (4.5:1) or AAA (7:1) */ export declare function meetsContrastRequirement(foreground: string, background: string, level?: 'AA' | 'AAA'): boolean; //# sourceMappingURL=colors.d.ts.map