resig.js
Version:
Universal reactive signal library with complete platform features: signals, animations, CRDTs, scheduling, DOM integration. Works identically across React, SolidJS, Svelte, Vue, and Qwik.
77 lines (76 loc) • 2.53 kB
TypeScript
/**
* Theme System
* Uses Signal<CSSVars> with functor map patterns for reactive theming
*/
import { Signal } from '../core/signal';
export interface CSSVar {
name: string;
value: string;
fallback?: string;
type?: 'color' | 'length' | 'number' | 'string' | 'custom';
}
export interface CSSVars {
[key: string]: CSSVar;
}
export interface Theme {
name: string;
displayName: string;
description?: string;
variables: CSSVars;
extends?: string;
media?: string;
}
export interface ThemeConfig {
defaultTheme: string;
persistKey?: string;
autoDetect?: boolean;
transitions?: {
duration: string;
easing: string;
properties: string[];
};
}
export interface ColorUtils {
lighten: (color: string, amount: number) => string;
darken: (color: string, amount: number) => string;
saturate: (color: string, amount: number) => string;
desaturate: (color: string, amount: number) => string;
alpha: (color: string, alpha: number) => string;
mix: (color1: string, color2: string, weight: number) => string;
}
export declare class ThemeManager {
private config;
private themes;
private currentTheme;
private computedVars;
private styleElement;
private colorUtils;
constructor(config: ThemeConfig);
private setupColorUtils;
private setupStyleElement;
private setupComputedVars;
private mapCSSVars;
private processColorVar;
private processLengthVar;
private processNumberVar;
private applyCSSVars;
private loadPersistedTheme;
private setupAutoDetection;
private hexToRgb;
private adjustHSL;
registerTheme(theme: Theme): void;
setTheme(themeName: string): void;
getCurrentTheme(): Signal<string>;
getCSSVars(): Signal<CSSVars>;
getThemes(): Theme[];
createThemedSignal<T>(mapping: Record<string, T>, fallback: T): Signal<T>;
createCSSVarSignal(varName: string): Signal<string>;
applyToElement(element: HTMLElement, vars?: string[]): () => void;
getColorUtils(): ColorUtils;
destroy(): void;
}
export declare const createThemeManager: (config: ThemeConfig) => ThemeManager;
export declare const createLightTheme: (overrides?: Partial<CSSVars>) => Theme;
export declare const createDarkTheme: (overrides?: Partial<CSSVars>) => Theme;
export declare const composeThemes: (base: Theme, ...overlays: Partial<Theme>[]) => Theme;
export declare const mapThemeColors: (theme: Theme, transform: (color: string) => string) => Theme;