@buddhacognitivelab/theme-glassmorphic
Version:
Enhanced glassmorphic theme package with dual-mode support, advanced glass effects, interactive UI components, and gesture-based interactions
110 lines (109 loc) • 3.39 kB
TypeScript
/**
* @fileoverview Phase 3: Gradient Infrastructure Implementation
* Comprehensive gradient system with dual-mode support and theme-aware gradients
*/
import { ColorPalette } from '../types/theme';
export interface GradientStop {
color: string;
position: number;
}
export interface GradientConfig {
type: 'linear' | 'radial' | 'conic';
direction?: string;
stops: GradientStop[];
}
export interface ThemeGradient {
light: GradientConfig;
dark: GradientConfig;
}
export interface GradientSystem {
backgrounds: {
primary: ThemeGradient;
secondary: ThemeGradient;
accent: ThemeGradient;
neutral: ThemeGradient;
hero: ThemeGradient;
subtle: ThemeGradient;
};
overlays: {
glass: ThemeGradient;
shadow: ThemeGradient;
highlight: ThemeGradient;
backdrop: ThemeGradient;
};
borders: {
primary: ThemeGradient;
secondary: ThemeGradient;
accent: ThemeGradient;
glass: ThemeGradient;
};
animations: {
flowing: ThemeGradient;
pulsing: ThemeGradient;
shifting: ThemeGradient;
shimmer: ThemeGradient;
};
themeTransitions: {
duration: string;
easing: string;
properties: string[];
};
}
export declare class GradientGenerator {
private palette;
private mode;
constructor(palette: ColorPalette, mode: 'light' | 'dark');
/**
* Creates a linear gradient with theme-aware colors
*/
createLinearGradient(direction: string, colors: string[], positions?: number[]): string;
/**
* Creates a radial gradient with theme-aware colors
*/
createRadialGradient(shape: string, colors: string[], positions?: number[]): string;
/**
* Creates theme-responsive gradient colors
*/
getThemeColors(baseColors: string[]): string[];
/**
* Creates animated gradient keyframes
*/
createAnimatedGradient(name: string, gradients: string[]): string;
}
/**
* Creates the complete gradient system for a theme
*/
export declare function createGradientSystem(palette: ColorPalette): GradientSystem;
/**
* Converts a gradient configuration to CSS string
*/
export declare function gradientToCSS(gradient: GradientConfig): string;
/**
* Gets the appropriate gradient for the current theme mode
*/
export declare function getThemeGradient(themeGradient: ThemeGradient, mode: 'light' | 'dark'): string;
/**
* Creates CSS custom properties for gradients
*/
export declare function createGradientCSSVariables(gradientSystem: GradientSystem, mode: 'light' | 'dark'): Record<string, string>;
/**
* Creates keyframe animations for gradient effects
*/
export declare function createGradientAnimations(gradientSystem: GradientSystem, mode: 'light' | 'dark'): string;
/**
* Utility functions for gradient manipulation
*/
export declare const gradientUtils: {
/**
* Interpolates between two gradients for smooth transitions
*/
interpolateGradients(from: GradientConfig, to: GradientConfig, progress: number): GradientConfig;
/**
* Creates a gradient with adjusted opacity
*/
adjustGradientOpacity(gradient: GradientConfig, opacity: number): GradientConfig;
/**
* Reverses the direction of a gradient
*/
reverseGradient(gradient: GradientConfig): GradientConfig;
};