triiiceratops 0.4.0 → 0.6.0

package/dist/src/lib/theme/themeManager.d.ts

@@ -0,0 +1,39 @@
+import { ThemeConfig, DaisyUITheme } from './types';
+/**
+ * Check if a string is a valid built-in DaisyUI theme name
+ */
+export declare function isBuiltInTheme(theme: string): theme is DaisyUITheme;
+/**
+ * Apply a built-in theme to an element by setting data-theme attribute
+ */
+export declare function applyBuiltInTheme(element: HTMLElement, theme: DaisyUITheme): void;
+/**
+ * Apply custom theme configuration as CSS custom properties on an element.
+ * These override the base theme's values.
+ */
+export declare function applyThemeConfig(element: HTMLElement, config: ThemeConfig): void;
+/**
+ * Clear all custom theme CSS variables from an element
+ */
+export declare function clearThemeConfig(element: HTMLElement): void;
+/**
+ * Parse a theme config from a JSON string (for HTML attribute usage)
+ */
+export declare function parseThemeConfig(json: string): ThemeConfig | null;
+/**
+ * Apply theme to an element.
+ *
+ * @param element - The HTML element to apply the theme to
+ * @param theme - Built-in theme name (defaults to light/dark based on prefers-color-scheme)
+ * @param config - Optional custom theme configuration to override the base theme
+ * @param prefersDark - Whether the user prefers dark mode (from media query)
+ */
+export declare function applyTheme(element: HTMLElement, theme: DaisyUITheme | undefined, config: ThemeConfig | undefined): void;
+/**
+ * Get all CSS variable names that can be customized
+ */
+export declare function getThemeCssVariables(): string[];
+/**
+ * Get all customizable theme property names
+ */
+export declare function getThemePropertyNames(): (keyof ThemeConfig)[];

package/dist/src/lib/theme/types.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Built-in DaisyUI theme names
+ */
+export type DaisyUITheme = 'light' | 'dark' | 'cupcake' | 'bumblebee' | 'emerald' | 'corporate' | 'synthwave' | 'retro' | 'cyberpunk' | 'valentine' | 'halloween' | 'garden' | 'forest' | 'aqua' | 'lofi' | 'pastel' | 'fantasy' | 'wireframe' | 'black' | 'luxury' | 'dracula' | 'cmyk' | 'autumn' | 'business' | 'acid' | 'lemonade' | 'night' | 'coffee' | 'winter' | 'dim' | 'nord' | 'sunset' | 'caramellatte' | 'abyss' | 'silk';
+/**
+ * List of all built-in DaisyUI themes for runtime validation
+ */
+export declare const DAISYUI_THEMES: DaisyUITheme[];
+/**
+ * Custom theme configuration with friendly property names.
+ * All color values accept hex (#rrggbb), rgb(r,g,b), or oklch() strings.
+ * This is used to override the base theme's values.
+ */
+export interface ThemeConfig {
+    /** Primary brand color (hex, rgb, or oklch) */
+    primary?: string;
+    /** Text color for content on primary background */
+    primaryContent?: string;
+    /** Secondary brand color (hex, rgb, or oklch) */
+    secondary?: string;
+    /** Text color for content on secondary background */
+    secondaryContent?: string;
+    /** Accent brand color (hex, rgb, or oklch) */
+    accent?: string;
+    /** Text color for content on accent background */
+    accentContent?: string;
+    /** Neutral dark color (hex, rgb, or oklch) */
+    neutral?: string;
+    /** Text color for content on neutral background */
+    neutralContent?: string;
+    /** Main background color (base-100) */
+    base100?: string;
+    /** Slightly darker background (base-200) */
+    base200?: string;
+    /** Even darker background (base-300) */
+    base300?: string;
+    /** Default text color on base backgrounds */
+    baseContent?: string;
+    /** Info state color */
+    info?: string;
+    /** Text color for content on info background */
+    infoContent?: string;
+    /** Success state color */
+    success?: string;
+    /** Text color for content on success background */
+    successContent?: string;
+    /** Warning state color */
+    warning?: string;
+    /** Text color for content on warning background */
+    warningContent?: string;
+    /** Error state color */
+    error?: string;
+    /** Text color for content on error background */
+    errorContent?: string;
+    /** Border radius for large components like cards, modals (e.g., '1rem') */
+    radiusBox?: string;
+    /** Border radius for medium components like inputs, buttons (e.g., '0.5rem') */
+    radiusField?: string;
+    /** Border radius for small components like checkboxes, toggles (e.g., '0.25rem') */
+    radiusSelector?: string;
+    /** Base size for small components like checkboxes (e.g., '0.25rem') */
+    sizeSelector?: string;
+    /** Base size for form fields (e.g., '0.25rem') */
+    sizeField?: string;
+    /** Border width for components (e.g., '1px') */
+    border?: string;
+    /** Enable depth effect for components (0 or 1) */
+    depth?: 0 | 1;
+    /** Enable noise background effect for components (0 or 1) */
+    noise?: 0 | 1;
+    /** Color scheme hint for browser-provided UI elements */
+    colorScheme?: 'light' | 'dark';
+}