egutierrez
953f598b9b
Componentes React reutilizables: card, dialog, tabs, select, alert, badge, button, input, label, skeleton, tooltip, progress_bar, page_header, form_field, settings_page, crud_page, analytics_page, dashboard_layout. Charts: area, bar, line, sparkline, kpi_card, chart_container. Hooks Wails: use_wails_query, use_wails_mutation, use_wails_stream, use_wails_event, use_animated_canvas. Funciones core: cn, format_compact, chart_colors, get_series_color, wails_cache, theme_config_to_colors. Tipos: chart_series, wails_ipc, theme_config, component_variants. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
112 lines
2.8 KiB
TypeScript
112 lines
2.8 KiB
TypeScript
interface ThemeColors {
|
|
background: string
|
|
foreground: string
|
|
card: string
|
|
cardForeground: string
|
|
popover: string
|
|
popoverForeground: string
|
|
primary: string
|
|
primaryForeground: string
|
|
secondary: string
|
|
secondaryForeground: string
|
|
muted: string
|
|
mutedForeground: string
|
|
accent: string
|
|
accentForeground: string
|
|
destructive: string
|
|
destructiveForeground: string
|
|
success: string
|
|
successForeground: string
|
|
warning: string
|
|
warningForeground: string
|
|
info: string
|
|
infoForeground: string
|
|
surface: string
|
|
surfaceHover: string
|
|
overlay: string
|
|
border: string
|
|
input: string
|
|
ring: string
|
|
chart1: string
|
|
chart2: string
|
|
chart3: string
|
|
chart4: string
|
|
chart5: string
|
|
sidebar: string
|
|
sidebarForeground: string
|
|
sidebarPrimary: string
|
|
sidebarPrimaryForeground: string
|
|
sidebarAccent: string
|
|
sidebarAccentForeground: string
|
|
sidebarBorder: string
|
|
sidebarRing: string
|
|
}
|
|
|
|
interface Theme {
|
|
name: string
|
|
label: string
|
|
colors: ThemeColors
|
|
}
|
|
|
|
const cssVarMap: Record<keyof ThemeColors, string> = {
|
|
background: '--background',
|
|
foreground: '--foreground',
|
|
card: '--card',
|
|
cardForeground: '--card-foreground',
|
|
popover: '--popover',
|
|
popoverForeground: '--popover-foreground',
|
|
primary: '--primary',
|
|
primaryForeground: '--primary-foreground',
|
|
secondary: '--secondary',
|
|
secondaryForeground: '--secondary-foreground',
|
|
muted: '--muted',
|
|
mutedForeground: '--muted-foreground',
|
|
accent: '--accent',
|
|
accentForeground: '--accent-foreground',
|
|
destructive: '--destructive',
|
|
destructiveForeground: '--destructive-foreground',
|
|
success: '--success',
|
|
successForeground: '--success-foreground',
|
|
warning: '--warning',
|
|
warningForeground: '--warning-foreground',
|
|
info: '--info',
|
|
infoForeground: '--info-foreground',
|
|
surface: '--surface',
|
|
surfaceHover: '--surface-hover',
|
|
overlay: '--overlay',
|
|
border: '--border',
|
|
input: '--input',
|
|
ring: '--ring',
|
|
chart1: '--chart-1',
|
|
chart2: '--chart-2',
|
|
chart3: '--chart-3',
|
|
chart4: '--chart-4',
|
|
chart5: '--chart-5',
|
|
sidebar: '--sidebar',
|
|
sidebarForeground: '--sidebar-foreground',
|
|
sidebarPrimary: '--sidebar-primary',
|
|
sidebarPrimaryForeground: '--sidebar-primary-foreground',
|
|
sidebarAccent: '--sidebar-accent',
|
|
sidebarAccentForeground: '--sidebar-accent-foreground',
|
|
sidebarBorder: '--sidebar-border',
|
|
sidebarRing: '--sidebar-ring',
|
|
}
|
|
|
|
export function applyTheme(theme: Theme): void {
|
|
const root = document.documentElement
|
|
const colors = theme.colors
|
|
|
|
Object.entries(cssVarMap).forEach(([key, cssVar]) => {
|
|
const value = colors[key as keyof ThemeColors]
|
|
root.style.setProperty(cssVar, value)
|
|
})
|
|
|
|
if (theme.name === 'dark' || theme.name === 'midnight' || theme.name === 'sunset') {
|
|
root.classList.add('dark')
|
|
} else {
|
|
root.classList.remove('dark')
|
|
}
|
|
}
|
|
|
|
export type { Theme, ThemeColors }
|