extendThemes()

This commit is contained in:
Chris Wanstrath 2026-01-16 08:30:41 -08:00
parent 1e013287cf
commit 50054b014f
2 changed files with 14 additions and 22 deletions

View File

@ -1,5 +1,6 @@
{ {
"lockfileVersion": 1, "lockfileVersion": 1,
"configVersion": 0,
"workspaces": { "workspaces": {
"": { "": {
"name": "forge", "name": "forge",

View File

@ -4,26 +4,13 @@ import { type TagDef, UnitlessProps, NonStyleKeys } from './types'
export const styles: Record<string, Record<string, string>> = {} export const styles: Record<string, Record<string, string>> = {}
const themes: Record<string, Record<string, any>> = {} const themes: Record<string, Record<string, any>> = {}
// Type registry for theme variables (will be auto-populated)
let registeredThemeKeys: Set<string> = new Set()
// Clear all registered styles
export function clearStyles() { export function clearStyles() {
for (const key in styles) delete styles[key] for (const key in styles) delete styles[key]
for (const key in themes) delete themes[key] for (const key in themes) delete themes[key]
registeredThemeKeys.clear()
} }
// Register a theme with CSS custom properties export function createTheme<const T extends Record<string, string | number>>(name: string, values: T): T {
export function createTheme<const T extends Record<string, string | number>>( themes[name] = values as Record<string, string | number>
name: string,
values: T
): T {
themes[name] = values as Record<string, string>
// track for runtime validation
Object.keys(values).forEach(key => registeredThemeKeys.add(key))
return values return values
} }
@ -52,16 +39,20 @@ export function createThemedVar<T extends Record<string, any>>(_themes: T) {
} }
} }
// Simplified API: register multiple themes and get typed themeVar in one call
type Theme = Record<string, string | number> type Theme = Record<string, string | number>
export function createThemes<T extends Record<string, Theme>>(themes: T) {
const registeredThemes = {} as T
for (const [name, values] of Object.entries(themes)) { export function createThemes<T extends Record<string, Theme>>(themeDefs: T) {
(registeredThemes as any)[name] = createTheme(name, values) for (const [name, values] of Object.entries(themeDefs))
} createTheme(name, values)
return createThemedVar(registeredThemes) return (name: keyof T[keyof T]) => `var(--theme-${name as string})`
}
export function extendThemes(overrides: Record<string, Theme>) {
for (const [name, values] of Object.entries(overrides))
themes[name] = { ...themes[name], ...values }
return (name: string) => `var(--theme-${name})`
} }
// Generic themeVar (untyped fallback) // Generic themeVar (untyped fallback)