/** * Built-in theme presets for Arkite UI. * * Each preset defines CSS variable values (HSL format without the hsl() wrapper). * Apply by calling `applyTheme(preset)` or import the CSS directly. */ interface ThemeTokens { primary: string; 'primary-foreground': string; secondary: string; 'secondary-foreground': string; accent: string; 'accent-foreground': string; success: string; 'success-foreground': string; warning: string; 'warning-foreground': string; destructive: string; 'destructive-foreground': string; info: string; 'info-foreground': string; 'success-soft': string; 'success-soft-foreground': string; 'success-border': string; 'warning-soft': string; 'warning-soft-foreground': string; 'warning-border': string; 'destructive-soft': string; 'destructive-soft-foreground': string; 'destructive-border': string; 'info-soft': string; 'info-soft-foreground': string; 'info-border': string; background: string; foreground: string; muted: string; 'muted-foreground': string; card: string; 'card-foreground': string; border: string; input: string; ring: string; radius: string; } interface ThemePreset { name: string; light: ThemeTokens; dark: ThemeTokens; } declare const defaultTheme: ThemePreset; declare const neutralTheme: ThemePreset; declare const oceanTheme: ThemePreset; declare const forestTheme: ThemePreset; /** All built-in theme presets */ declare const themePresets: { readonly default: ThemePreset; readonly neutral: ThemePreset; readonly ocean: ThemePreset; readonly forest: ThemePreset; }; type ThemePresetName = keyof typeof themePresets; interface CreateThemeOptions { /** Theme name */ name?: string; /** Primary brand color (hex) */ primary: string; /** Accent color (hex). Defaults to a complementary color. */ accent?: string; /** Border radius. Defaults to "0.5rem". */ radius?: string; } /** * Create a complete theme from 1-2 input colors. * * @example * ```ts * import { createTheme, applyTheme } from '@arkite-ui/core' * * const myTheme = createTheme({ * primary: '#FF6B00', * accent: '#00B4D8', * }) * * applyTheme(myTheme) // applies to :root * ``` */ declare function createTheme(options: CreateThemeOptions): ThemePreset; /** * Apply a theme preset's CSS variables to a DOM element. * Applies light tokens to the element and dark tokens to `.dark` selector. * * @param theme - Theme preset to apply * @param element - Target element (defaults to document.documentElement) */ declare function applyTheme(theme: ThemePreset, element?: HTMLElement): void; /** * Apply dark mode tokens to an element. * * @param theme - Theme preset to apply * @param element - Target element (defaults to document.documentElement) */ declare function applyDarkTheme(theme: ThemePreset, element?: HTMLElement): void; /** * Generate a CSS string from a theme preset. * Useful for SSR or injecting into a