45 lines
2.8 KiB
TypeScript
45 lines
2.8 KiB
TypeScript
import { derivePublicForegrounds, readableColor } from "@/lib/theme-contrast";
|
|
import type { ThemePalette } from "@/lib/theme-presets";
|
|
|
|
const CSS_VARIABLES: Record<keyof ThemePalette, string> = {
|
|
color_primary: "color-primary", color_background: "color-background",
|
|
color_surface: "color-surface", color_dropdown: "color-dropdown",
|
|
color_navbar: "color-navbar", color_navbar_text: "color-navbar-text",
|
|
color_text: "color-text", color_text_muted: "color-text-muted",
|
|
color_accent: "color-accent", color_success: "color-success",
|
|
color_warning: "color-warning", color_error: "color-error", color_info: "color-info",
|
|
button_primary_color: "button-color", button_text_color: "button-text-color",
|
|
button_secondary_color: "button-secondary-color",
|
|
button_secondary_text_color: "button-secondary-text-color",
|
|
button_danger_color: "button-danger-color", button_danger_text_color: "button-danger-text-color",
|
|
button_outline_color: "button-outline-color", button_outline_text_color: "button-outline-text-color",
|
|
link_color: "link-color", link_hover_color: "link-hover-color",
|
|
border_color: "border-color", gradient_from: "gradient-from", gradient_to: "gradient-to",
|
|
};
|
|
|
|
export function themePaletteCss(selector: string, palette: ThemePalette): string {
|
|
const semantic = derivePublicForegrounds(palette);
|
|
const declarations = Object.entries(CSS_VARIABLES).map(
|
|
([key, cssName]) => `--${cssName}:${palette[key as keyof ThemePalette]};`,
|
|
);
|
|
declarations.push(
|
|
`--color-text-readable:${readableColor(palette.color_text, [palette.color_background, palette.color_surface])};`,
|
|
`--color-text-muted-readable:${readableColor(palette.color_text_muted, [palette.color_background, palette.color_surface])};`,
|
|
`--color-primary-readable:${readableColor(palette.color_primary, [palette.color_background, palette.color_surface])};`,
|
|
`--color-accent-readable:${readableColor(palette.color_accent, [palette.color_background, palette.color_surface])};`,
|
|
`--color-navbar-text-readable:${semantic.byName.navbar};`,
|
|
`--button-text-color-readable:${semantic.byName["button-primary"]};`,
|
|
`--button-secondary-text-color-readable:${semantic.byName["button-secondary"]};`,
|
|
`--button-danger-text-color-readable:${semantic.byName["button-danger"]};`,
|
|
`--button-outline-text-color-readable:${semantic.byName["button-outline"]};`,
|
|
`--link-color-readable:${semantic.byName.link};`,
|
|
`--link-hover-color-readable:${semantic.byName["link-hover"]};`,
|
|
`--color-surface-text-readable:${semantic.byName.surface};`,
|
|
`--color-dropdown-text-readable:${semantic.byName.dropdown};`,
|
|
`--color-pill-text-readable:${semantic.byName.pill};`,
|
|
`--color-badge-text-readable:${semantic.byName.badge};`,
|
|
`--color-overlay-text-readable:${semantic.byName.overlay};`,
|
|
);
|
|
return `${selector}{${declarations.join("")}}`;
|
|
}
|