aura-glass/dist/tokens/themeTokens.d.ts

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

import AURA_GLASS from "./glass";
import { COLORS, TYPOGRAPHY, SPACING, BORDER_RADIUS, BOX_SHADOW, Z_INDEX, BREAKPOINTS, ANIMATION } from "./designConstants";
export interface ThemeTokens {
    colors: {
        glass: {
            surface: string;
            border: string;
            text: string;
            textSecondary: string;
            shadow: string;
        };
        semantic: typeof COLORS.semantic;
        neutral: typeof COLORS.neutral;
        components: {
            button: {
                primary: string;
                secondary: string;
                danger: string;
                success: string;
                warning: string;
            };
            input: {
                background: string;
                border: string;
                focus: string;
                error: string;
            };
            card: {
                background: string;
                border: string;
                shadow: string;
            };
        };
    };
    typography: typeof TYPOGRAPHY & {
        glass: {
            heading: {
                fontSize: string;
                fontWeight: number;
                lineHeight: number;
                color: string;
            };
            body: {
                fontSize: string;
                fontWeight: number;
                lineHeight: number;
                color: string;
            };
            caption: {
                fontSize: string;
                fontWeight: number;
                lineHeight: number;
                color: string;
            };
        };
    };
    spacing: typeof SPACING & {
        glass: {
            container: string;
            component: string;
            element: string;
        };
    };
    layout: {
        borderRadius: typeof BORDER_RADIUS;
        boxShadow: typeof BOX_SHADOW;
        zIndex: typeof Z_INDEX;
        breakpoints: typeof BREAKPOINTS;
    };
    animation: typeof ANIMATION & {
        glass: {
            appear: {
                duration: string;
                easing: string;
            };
            hover: {
                duration: string;
                easing: string;
                scale: number;
            };
            focus: {
                duration: string;
                easing: string;
            };
        };
    };
    glass: typeof AURA_GLASS;
    components: {
        button: {
            size: {
                sm: {
                    height: string;
                    padding: string;
                    fontSize: string;
                };
                md: {
                    height: string;
                    padding: string;
                    fontSize: string;
                };
                lg: {
                    height: string;
                    padding: string;
                    fontSize: string;
                };
            };
            variant: {
                primary: {
                    background: string;
                    color: string;
                    hover: {
                        background: string;
                        shadow: string;
                    };
                    active: {
                        background: string;
                        shadow: string;
                    };
                };
                secondary: {
                    background: string;
                    color: string;
                    border: string;
                    hover: {
                        background: string;
                        border: string;
                    };
                    active: {
                        background: string;
                        border: string;
                    };
                };
            };
        };
        input: {
            size: {
                sm: {
                    height: string;
                    padding: string;
                    fontSize: string;
                };
                md: {
                    height: string;
                    padding: string;
                    fontSize: string;
                };
                lg: {
                    height: string;
                    padding: string;
                    fontSize: string;
                };
            };
            state: {
                default: {
                    border: string;
                    background: string;
                };
                focus: {
                    border: string;
                    background: string;
                    shadow: string;
                };
                error: {
                    border: string;
                    background: string;
                };
                disabled: {
                    border: string;
                    background: string;
                    opacity: number;
                };
            };
        };
        card: {
            variant: {
                default: {
                    background: string;
                    border: string;
                    shadow: string;
                    hover: {
                        shadow: string;
                        transform: string;
                    };
                };
                elevated: {
                    background: string;
                    border: string;
                    shadow: string;
                    hover: {
                        shadow: string;
                        transform: string;
                    };
                };
                outlined: {
                    background: string;
                    border: string;
                    shadow: string;
                    hover: {
                        border: string;
                        shadow: string;
                    };
                };
            };
        };
    };
}
export declare const lightTheme: ThemeTokens;
export declare const darkTheme: ThemeTokens;
export declare const glassTheme: ThemeTokens;
export declare const themeUtils: {
    get: (theme: ThemeTokens, path: string) => any;
    merge: (baseTheme: ThemeTokens, overrides: Partial<ThemeTokens>) => ThemeTokens;
    create: (overrides: Partial<ThemeTokens>) => ThemeTokens;
};
export { lightTheme as light, darkTheme as dark, glassTheme as glass };
export default glassTheme;
//# sourceMappingURL=themeTokens.d.ts.map