Harden CMS security and theme contrast

src/components/theme-vars.tsx

@@ -1,5 +1,6 @@
 import { siteSettings } from "@/lib/services/site-settings";
 import { FONTS } from "@/lib/theme-presets";
+import { readableColor } from "@/lib/theme-contrast";
 
 // 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
@@ -78,12 +79,43 @@ export async function ThemeVars() {
   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 safeBackground = safe(background, "#f8fafc");
+  const safeSurface = safe(surface, "#ffffff");
+  const publicBackgrounds = [safeBackground, safeSurface];
+  const readableText = readableColor(safe(text, "#0f172a"), publicBackgrounds);
+  const readableMuted = readableColor(safe(textMuted, "#64748b"), publicBackgrounds);
+  const readablePrimary = readableColor(safe(primary, "#f59e0b"), publicBackgrounds);
+  const readableAccent = readableColor(safe(accent, "#10b981"), publicBackgrounds);
+  const readableLink = readableColor(safe(linkColor, "#eeb425"), publicBackgrounds);
+  const readableLinkHover = readableColor(safe(linkHover, "#cf9d15"), publicBackgrounds);
+  const readableButtonText = readableColor(
+    safe(buttonText, "#1e293b"),
+    [safe(buttonColor, "#f59e0b")],
+  );
+  const readableSecondaryText = readableColor(
+    safe(buttonSecondaryText, "#ffffff"),
+    [safe(buttonSecondary, "#22c55e")],
+  );
+  const readableDangerText = readableColor(
+    safe(buttonDangerText, "#ffffff"),
+    [safe(buttonDanger, "#ef4444")],
+  );
+  const readableNavbarText = readableColor(
+    safe(navbarText, "#1e293b"),
+    [safe(navbar, "#ffffff")],
+  );
+  const readablePrimaryForeground = readableColor(
+    safe(buttonText, "#1e293b"),
+    [safe(primary, "#f59e0b")],
+  );
+  const readableAccentForeground = readableColor("#ffffff", [safe(accent, "#10b981")]);
+
   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-background:${safeBackground};
+--color-surface:${safeSurface};
 --color-dropdown:${safe(dropdown, "#ffffff")};
 --color-navbar:${safe(navbar, "#ffffff")};
 --color-navbar-text:${safe(navbarText, "#1e293b")};
@@ -107,6 +139,18 @@ export async function ThemeVars() {
 --border-color:${safe(borderColor, "#eeb425")};
 --gradient-from:${safe(gradientFrom, "#f59e0b")};
 --gradient-to:${safe(gradientTo, "#10b981")};
+--color-text-readable:${readableText};
+--color-text-muted-readable:${readableMuted};
+--color-primary-readable:${readablePrimary};
+--color-accent-readable:${readableAccent};
+--color-primary-foreground-readable:${readablePrimaryForeground};
+--color-accent-foreground-readable:${readableAccentForeground};
+--color-navbar-text-readable:${readableNavbarText};
+--button-text-color-readable:${readableButtonText};
+--button-secondary-text-color-readable:${readableSecondaryText};
+--button-danger-text-color-readable:${readableDangerText};
+--link-color-readable:${readableLink};
+--link-hover-color-readable:${readableLinkHover};
 --border-radius:${px(borderRadius, "12")}px;
 --font-family:${font.stack};
 --size-heading-h1:${px(h1, "30")}px;