aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
88 lines • 2.28 kB
TypeScript
/**
* AuraGlass Contrast Utilities
* WCAG contrast calculation and color selection
*/
/**
* Convert hex color to RGB
*/
export declare function hexToRgb(hex: string): {
r: number;
g: number;
b: number;
} | null;
/**
* Convert RGB to hex
*/
export declare function rgbToHex(r: number, g: number, b: number): string;
/**
* Parse CSS color string to RGB
*/
export declare function parseColor(color: string): {
r: number;
g: number;
b: number;
} | null;
/**
* Calculate relative luminance (WCAG formula)
*/
export declare function getLuminance(r: number, g: number, b: number): number;
/**
* Calculate contrast ratio between two colors
*/
export declare function getContrastRatio(color1: {
r: number;
g: number;
b: number;
}, color2: {
r: number;
g: number;
b: number;
}): number;
/**
* Check if contrast meets WCAG requirements
*/
export type WCAGLevel = 'AA' | 'AAA';
export type TextSize = 'normal' | 'large';
export declare function meetsWCAG(ratio: number, level?: WCAGLevel, textSize?: TextSize): boolean;
/**
* Get appropriate text color for a background
*/
export declare function getTextColorForBackground(background: string, lightOption?: string, darkOption?: string): string;
/**
* Adjust color to meet contrast requirements
*/
export declare function adjustColorForContrast(foreground: string, background: string, targetRatio?: number): string;
/**
* Generate a color palette with proper contrast
*/
export declare function generateAccessiblePalette(baseColor: string, backgroundColor: string): {
primary: string;
secondary: string;
tertiary: string;
disabled: string;
};
/**
* Check contrast for all text elements in a container
*/
export declare function auditContrast(container: HTMLElement): {
passed: number;
failed: number;
warnings: Array<{
element: HTMLElement;
ratio: number;
required: number;
}>;
};
/**
* Apply contrast guard to element
*/
export declare function applyContrastGuard(element: HTMLElement): void;
/**
* Get WCAG compliance badge info
*/
export declare function getWCAGBadge(ratio: number): {
level: 'Fail' | 'AA' | 'AAA';
color: string;
description: string;
};
//# sourceMappingURL=contrast.d.ts.map