/** * Extended Theme Type Definitions * * Provides semantic color token system with tier-gating support. * * @since v1.57.0 */ import type { Tier } from '../../core/types/auth.js'; /** * Background color tokens */ export interface BackgroundColors { /** Main application background */ primary: string; /** Card/panel backgrounds */ secondary: string; /** Nested element backgrounds */ tertiary: string; /** Modal/dropdown backgrounds */ elevated: string; /** Semi-transparent overlay for dimming */ overlay: string; } /** * Foreground (text) color tokens */ export interface ForegroundColors { /** Main text color */ primary: string; /** Subdued/secondary text */ secondary: string; /** Disabled/hint text */ tertiary: string; /** Text on colored backgrounds */ inverse: string; } /** * Accent color tokens */ export interface AccentColors { /** Brand/focus color */ primary: string; /** Hover state accent */ secondary: string; /** Subtle accent for borders/dividers */ muted: string; } /** * Status color tokens */ export interface StatusColors { /** Success state (green) */ success: string; /** Warning state (yellow/orange) */ warning: string; /** Error state (red) */ error: string; /** Info state (blue) */ info: string; } /** * Interactive element color tokens */ export interface InteractiveColors { /** Default state */ default: string; /** Hover state */ hover: string; /** Active/pressed state */ active: string; /** Disabled state */ disabled: string; } /** * Border color tokens */ export interface BorderColors { /** Default border */ default: string; /** Subtle/light border */ subtle: string; /** Strong/emphasis border */ strong: string; } /** * Semantic color token system * * Organized into logical groups for consistent theming. */ export interface SemanticColors { /** Background colors */ bg: BackgroundColors; /** Foreground (text) colors */ fg: ForegroundColors; /** Accent colors */ accent: AccentColors; /** Status indicator colors */ status: StatusColors; /** Interactive element colors */ interactive: InteractiveColors; /** Border colors */ border: BorderColors; } /** * Gradient definition for premium themes */ export interface GradientDefinition { /** Gradient type */ type: 'linear' | 'radial'; /** Color stops */ stops: string[]; /** Angle for linear gradients (degrees) */ angle?: number; } /** * Gradient set for premium themes */ export interface GradientSet { /** Primary gradient (headers, highlights) */ primary?: GradientDefinition; /** Secondary gradient (accents) */ secondary?: GradientDefinition; /** Background gradient */ background?: GradientDefinition; } /** * Animation settings for premium themes */ export interface AnimationSet { /** Enable gradient shimmer animations */ shimmer?: boolean; /** Enable color cycling */ colorCycle?: boolean; /** Animation speed multiplier (1.0 = normal) */ speed?: number; } /** * Theme type (light or dark) */ export type ThemeType = 'dark' | 'light'; /** * Theme category for organization */ export type ThemeCategory = 'default' | 'designer' | 'accessibility' | 'seasonal' | 'community'; /** * Complete extended theme definition */ export interface ExtendedTheme { /** Unique theme identifier (kebab-case) */ id: string; /** Display name */ name: string; /** Theme author */ author: string; /** Minimum tier required to use this theme */ minTier: Tier; /** Light or dark theme */ type: ThemeType; /** Theme category */ category: ThemeCategory; /** Optional description */ description?: string; /** Semantic color tokens */ colors: SemanticColors; /** Optional gradients (premium feature) */ gradients?: GradientSet; /** Optional animations (premium feature) */ animations?: AnimationSet; /** Optional version for community themes */ version?: string; } /** * Theme metadata for gallery display (without full color data) */ export interface ThemeMetadata { id: string; name: string; author: string; minTier: Tier; type: ThemeType; category: ThemeCategory; description?: string; /** Preview colors for gallery thumbnails */ previewColors?: { bg: string; fg: string; accent: string; }; } /** * User theme preferences (persisted) */ export interface ThemePreferences { /** Currently active theme ID */ activeTheme: string; /** Last used themes (for quick switching) */ recentThemes: string[]; /** User's custom themes */ customThemes: string[]; /** Auto dark/light mode (Max tier) */ autoDarkMode?: { enabled: boolean; lightTheme: string; darkTheme: string; /** Hour (0-23) to switch to light theme */ lightHour: number; /** Hour (0-23) to switch to dark theme */ darkHour: number; }; } /** * Theme context value provided to components */ export interface ExtendedThemeContextValue { /** Current theme */ theme: ExtendedTheme; /** Semantic colors (shorthand) */ colors: SemanticColors; /** Change theme by ID */ setTheme: (id: string) => void; /** Available themes (filtered by tier) */ availableThemes: ThemeMetadata[]; /** User's current tier */ userTier: Tier; /** Whether current theme has gradients */ hasGradients: boolean; /** Whether current theme has animations */ hasAnimations: boolean; } /** * Convert ExtendedTheme to legacy ThemeColors format * * Maintains backward compatibility with existing components. */ export declare function toLegacyColors(theme: ExtendedTheme): import('./types.js').ThemeColors; //# sourceMappingURL=theme-types.d.ts.map