Simo
5a4b6f27e9
Grew /admin/theme from colours-only to a full theme editor, all applied live via website_settings + ThemeVars: - Typography: body font (10 web-safe + Google options; Google fonts load via an injected <link>) and H1/H2/H3 sizes (globals.css now reads --size-heading-* vars). - Buttons & links: secondary/danger button colours + link/link-hover. - Custom CSS: a raw textarea injected after the theme variables (staff- trusted), for anything the controls don't cover. - Presets: 6 → 13 (added Galaxy, Royal, Cyberpunk, Neon, Coffee, Arctic, Christmas). ThemeVars now injects all the new vars + the font link. Verified live (prod, amx_test): saved font=mono / H1=44px / custom CSS → the public home reflected --font-family "Courier New", --size-heading-h1 44px and the injected rule; reverted the test settings. tsc 0, vitest 49/49, next build 0.
104 lines
3.5 KiB
TypeScript
104 lines
3.5 KiB
TypeScript
import { siteSettings } from "@/lib/services/site-settings";
|
|
import { FONTS } from "@/lib/theme-presets";
|
|
|
|
// Injects the DB-driven CSS custom properties into :root, exactly like
|
|
// AtomCMS's app.blade.php. Falls back to the atom defaults when no DB. Covers
|
|
// colours, typography, buttons, links + an optional raw custom-CSS block.
|
|
export async function ThemeVars() {
|
|
const g = (k: string, d: string) => siteSettings.get(k, d);
|
|
const [
|
|
primary,
|
|
background,
|
|
surface,
|
|
dropdown,
|
|
navbar,
|
|
navbarText,
|
|
text,
|
|
textMuted,
|
|
accent,
|
|
buttonColor,
|
|
buttonText,
|
|
buttonSecondary,
|
|
buttonDanger,
|
|
linkColor,
|
|
linkHover,
|
|
borderColor,
|
|
borderRadius,
|
|
fontKey,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
customCss,
|
|
] = await Promise.all([
|
|
g("color_primary", "#f59e0b"),
|
|
g("color_background", "#f8fafc"),
|
|
g("color_surface", "#ffffff"),
|
|
g("color_dropdown", "#ffffff"),
|
|
g("color_navbar", "#ffffff"),
|
|
g("color_navbar_text", "#1e293b"),
|
|
g("color_text", "#0f172a"),
|
|
g("color_text_muted", "#64748b"),
|
|
g("color_accent", "#10b981"),
|
|
g("button_primary_color", "#f59e0b"),
|
|
g("button_text_color", "#1e293b"),
|
|
g("button_secondary_color", "#22c55e"),
|
|
g("button_danger_color", "#ef4444"),
|
|
g("link_color", "#eeb425"),
|
|
g("link_hover_color", "#cf9d15"),
|
|
g("border_color", "#eeb425"),
|
|
g("border_radius", "12"),
|
|
g("font_family", "nunito"),
|
|
g("size_heading_h1", "30"),
|
|
g("size_heading_h2", "22"),
|
|
g("size_heading_h3", "18"),
|
|
g("custom_css", ""),
|
|
]);
|
|
|
|
// Only hex/keyword color values are admin-controlled — sanitize defensively.
|
|
const safe = (v: string | null, d: string) => (v && /^[#a-zA-Z0-9(),.\s%-]+$/.test(v) ? v : d);
|
|
const px = (v: string | null, d: string) => (/^\d{1,3}$/.test(v ?? "") ? (v as string) : d);
|
|
|
|
const font = FONTS[fontKey ?? "nunito"] ?? FONTS.nunito;
|
|
|
|
const css = `:root{
|
|
--color-primary:${safe(primary, "#f59e0b")};
|
|
--color-background:${safe(background, "#f8fafc")};
|
|
--color-surface:${safe(surface, "#ffffff")};
|
|
--color-dropdown:${safe(dropdown, "#ffffff")};
|
|
--color-navbar:${safe(navbar, "#ffffff")};
|
|
--color-navbar-text:${safe(navbarText, "#1e293b")};
|
|
--color-text:${safe(text, "#0f172a")};
|
|
--color-text-muted:${safe(textMuted, "#64748b")};
|
|
--color-accent:${safe(accent, "#10b981")};
|
|
--button-color:${safe(buttonColor, "#f59e0b")};
|
|
--button-text-color:${safe(buttonText, "#1e293b")};
|
|
--button-secondary-color:${safe(buttonSecondary, "#22c55e")};
|
|
--button-danger-color:${safe(buttonDanger, "#ef4444")};
|
|
--link-color:${safe(linkColor, "#eeb425")};
|
|
--link-hover-color:${safe(linkHover, "#cf9d15")};
|
|
--border-color:${safe(borderColor, "#eeb425")};
|
|
--border-radius:${px(borderRadius, "12")}px;
|
|
--font-family:${font.stack};
|
|
--size-heading-h1:${px(h1, "30")}px;
|
|
--size-heading-h2:${px(h2, "22")}px;
|
|
--size-heading-h3:${px(h3, "18")}px;
|
|
}`;
|
|
|
|
const googleHref = font.google
|
|
? `https://fonts.googleapis.com/css2?family=${font.google}&display=swap`
|
|
: null;
|
|
|
|
return (
|
|
<>
|
|
{googleHref ? <link rel="stylesheet" href={googleHref} /> : null}
|
|
{/* biome-ignore lint/security/noDangerouslySetInnerHtml: server-built CSS from sanitized admin settings */}
|
|
<style dangerouslySetInnerHTML={{ __html: css }} />
|
|
{customCss && customCss.trim() ? (
|
|
// Staff-authored custom CSS (housekeeping → Theme). Trusted input.
|
|
// biome-ignore lint/security/noDangerouslySetInnerHtml: staff-authored theme CSS
|
|
<style dangerouslySetInnerHTML={{ __html: customCss }} />
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|