@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
297 lines • 8.37 kB
TypeScript
import { Organization } from '@frank-auth/client';
import { Theme } from '../config';
import { OrganizationBranding } from '../provider/types';
export interface UseThemeReturn {
theme: Theme;
mode: 'light' | 'dark' | 'system';
effectiveMode: 'light' | 'dark';
isSystemMode: boolean;
isCustomized: boolean;
cssVariables: Record<string, string>;
generateCSS: () => string;
setTheme: (theme: Partial<Theme>) => void;
setMode: (mode: 'light' | 'dark' | 'system') => void;
resetTheme: () => void;
organizationBranding?: OrganizationBranding;
applyBranding: (branding: OrganizationBranding) => void;
applyOrganizationBranding: (organization: Organization) => void;
isCustomBranded: boolean;
colors: Theme['colors'];
primaryColor: string;
secondaryColor: string;
backgroundColor: string;
foregroundColor: string;
typography: Theme['typography'];
fontFamily: string[];
spacing: Theme['spacing'];
borderRadius: Theme['borderRadius'];
shadows: Theme['shadows'];
getColorValue: (colorName: string, shade?: string) => string;
getFontSize: (size: string) => string;
getSpacing: (size: string) => string;
getBorderRadius: (size: string) => string;
getShadow: (size: string) => string;
toggleMode: () => void;
setLightMode: () => void;
setDarkMode: () => void;
setSystemMode: () => void;
applyPreset: (preset: ThemePreset) => void;
availablePresets: ThemePreset[];
}
export type ThemePreset = 'blue' | 'purple' | 'green' | 'orange' | 'pink' | 'red' | 'gray';
/**
* Enhanced theme hook providing comprehensive theme management capabilities
*
* @example Basic theme usage
* ```tsx
* import { useTheme } from '@frank-auth/react';
*
* function ThemeManager() {
* const {
* mode,
* effectiveMode,
* toggleMode,
* primaryColor,
* setLightMode,
* setDarkMode,
* applyPreset
* } = useTheme();
*
* return (
* <div>
* <p>Current mode: {mode} (effective: {effectiveMode})</p>
* <p>Primary color: {primaryColor}</p>
*
* <button onClick={toggleMode}>Toggle Mode</button>
* <button onClick={setLightMode}>Light Mode</button>
* <button onClick={setDarkMode}>Dark Mode</button>
*
* <select onChange={(e) => applyPreset(e.target.value as any)}>
* <option value="blue">Blue</option>
* <option value="purple">Purple</option>
* <option value="green">Green</option>
* </select>
* </div>
* );
* }
* ```
*
* @example Organization branding
* ```tsx
* function BrandedTheme() {
* const { applyOrganizationBranding, isCustomBranded } = useTheme();
* const { activeOrganization } = useAuth();
*
* useEffect(() => {
* if (activeOrganization) {
* applyOrganizationBranding(activeOrganization);
* }
* }, [activeOrganization, applyOrganizationBranding]);
*
* return (
* <div>
* {isCustomBranded ? (
* <p>Custom organization branding applied</p>
* ) : (
* <p>Using default theme</p>
* )}
* </div>
* );
* }
* ```
*
* @example CSS utilities
* ```tsx
* function StyledComponent() {
* const {
* getColorValue,
* getFontSize,
* getSpacing,
* cssVariables
* } = useTheme();
*
* const customStyles = {
* backgroundColor: getColorValue('primary', '100'),
* fontSize: getFontSize('lg'),
* padding: getSpacing('md'),
* };
*
* return (
* <div style={customStyles}>
* <p>Themed component with utility functions</p>
* <p>CSS Variables available: {Object.keys(cssVariables).length}</p>
* </div>
* );
* }
* ```
*/
export declare function useTheme(): UseThemeReturn;
/**
* Hook for color management and utilities
*/
export declare function useThemeColors(): {
colors: import('../types').ThemeColors;
primaryColor: string;
secondaryColor: string;
backgroundColor: string;
foregroundColor: string;
getColorValue: (colorName: string, shade?: string) => string;
setPrimaryColor: (color: string) => void;
setSecondaryColor: (color: string) => void;
getPrimaryShade: (shade: string) => string;
getSecondaryShade: (shade: string) => string;
getSuccessColor: () => string;
getWarningColor: () => string;
getDangerColor: () => string;
getInfoColor: () => string;
};
/**
* Hook for typography management
*/
export declare function useThemeTypography(): {
typography: import('../types').Typography;
fontFamily: string[];
getFontSize: (size: string) => string;
setFontFamily: (fonts: string[]) => void;
fontSizes: {
xs: [string, {
lineHeight: string;
letterSpacing?: string;
}];
sm: [string, {
lineHeight: string;
letterSpacing?: string;
}];
base: [string, {
lineHeight: string;
letterSpacing?: string;
}];
lg: [string, {
lineHeight: string;
letterSpacing?: string;
}];
xl: [string, {
lineHeight: string;
letterSpacing?: string;
}];
'2xl': [string, {
lineHeight: string;
letterSpacing?: string;
}];
'3xl': [string, {
lineHeight: string;
letterSpacing?: string;
}];
'4xl': [string, {
lineHeight: string;
letterSpacing?: string;
}];
'5xl': [string, {
lineHeight: string;
letterSpacing?: string;
}];
'6xl': [string, {
lineHeight: string;
letterSpacing?: string;
}];
'7xl': [string, {
lineHeight: string;
letterSpacing?: string;
}];
'8xl': [string, {
lineHeight: string;
letterSpacing?: string;
}];
'9xl': [string, {
lineHeight: string;
letterSpacing?: string;
}];
};
fontWeights: {
thin: string;
extralight: string;
light: string;
normal: string;
medium: string;
semibold: string;
bold: string;
extrabold: string;
black: string;
};
lineHeights: {
none: string;
tight: string;
snug: string;
normal: string;
relaxed: string;
loose: string;
};
letterSpacing: {
tighter: string;
tight: string;
normal: string;
wide: string;
wider: string;
widest: string;
};
getSmallSize: () => string;
getBaseSize: () => string;
getLargeSize: () => string;
getXLSize: () => string;
};
/**
* Hook for spacing and layout utilities
*/
export declare function useThemeLayout(): {
spacing: import('../types').Spacing;
borderRadius: import('../types').BorderRadius;
shadows: import('../types').Shadows;
getSpacing: (size: string) => string;
getBorderRadius: (size: string) => string;
getShadow: (size: string) => string;
getSmallSpacing: () => string;
getMediumSpacing: () => string;
getLargeSpacing: () => string;
getSmallRadius: () => string;
getMediumRadius: () => string;
getLargeRadius: () => string;
getFullRadius: () => string;
getSmallShadow: () => string;
getMediumShadow: () => string;
getLargeShadow: () => string;
};
/**
* Hook for CSS-in-JS styling with theme values
*/
export declare function useThemeStyles(): {
cssVariables: Record<string, string>;
generateCSS: () => string;
createStyles: (stylesFn: (theme: any) => any) => any;
getThemeValue: (path: string) => string;
cardStyles: {
backgroundColor: string;
color: string;
borderRadius: string;
boxShadow: string;
padding: string;
};
buttonStyles: {
backgroundColor: string;
color: string;
borderRadius: string;
padding: string;
fontSize: string;
fontWeight: string;
border: string;
cursor: string;
};
inputStyles: {
backgroundColor: string;
color: string;
border: string;
borderRadius: string;
padding: string;
fontSize: string;
};
};
//# sourceMappingURL=use-theme.d.ts.map