blume 0.3.0 → 0.5.0

package/src/theme/icons.ts

@@ -1,184 +1,174 @@
 /**
- * Curated inline SVG icon set (Lucide-style, MIT). Stored as inner SVG markup
- * so icons render as zero-JS inline SVG. The set is intentionally small to keep
- * payloads bounded; more icons can be added as components need them.
+ * Icon resolution backed by the open Iconify icon sets — Font Awesome (free),
+ * Lucide, and Tabler — the three libraries Mintlify exposes. Resolution runs at
+ * **build time, server-side**, and returns ready-to-inline SVG, so icons stay
+ * zero-JS and fully self-contained (no runtime CDN fetch, unlike Mintlify).
+ *
+ * Because the Iconify set data is large, this module must only be imported from
+ * server contexts (`.astro` frontmatter, the CLI). Client scripts use the tiny
+ * hand-inlined set in `./chrome-icons.ts` instead.
+ *
+ * Coverage vs Mintlify: full parity for every Font Awesome *free* name, Lucide,
+ * and Tabler. Font Awesome Pro styles (`light`/`thin`/`duotone`/`sharp-solid`)
+ * aren't in the open data, so they fall back to `solid`.
  */
-export const icons: Record<string, string> = {
-  "arrow-left": '<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>',
-  "arrow-right": '<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>',
-  "arrow-up": '<path d="m5 12 7-7 7 7"/><path d="M12 19V5"/>',
-  "arrow-up-right": '<path d="M7 7h10v10"/><path d="M7 17 17 7"/>',
-  "badge-alert":
-    '<path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.78 4.78 4 4 0 0 1-6.74 0 4 4 0 0 1-4.78-4.78 4 4 0 0 1 0-6.75Z"/><path d="M12 8v4"/><path d="M12 16h.01"/>',
-  ban: '<circle cx="12" cy="12" r="10"/><path d="m4.93 4.93 14.14 14.14"/>',
-  "book-open":
-    '<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>',
-  "book-open-cover":
-    '<path d="M12 7v14"/><path d="M3 18a2 2 0 0 1 2-2h7V5H5a2 2 0 0 0-2 2Z"/><path d="M21 18a2 2 0 0 0-2-2h-7V5h7a2 2 0 0 1 2 2Z"/>',
-  "brand-x": '<path d="m4 4 11.7 16H20L8.3 4Z"/><path d="M4 20 20 4"/>',
-  check: '<path d="M20 6 9 17l-5-5"/>',
-  "chevron-down": '<path d="m6 9 6 6 6-6"/>',
-  "chevron-right": '<path d="m9 18 6-6-6-6"/>',
-  "circle-check": '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>',
-  "circle-x":
-    '<circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/>',
-  clock: '<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>',
-  copy: '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
-  download:
-    '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/><path d="M12 15V3"/>',
-  "external-link":
-    '<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>',
-  file: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/>',
-  flag: '<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><path d="M4 22V15"/>',
-  folder:
-    '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>',
-  gear: '<path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/>',
-  github:
-    '<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.3-.8 2.1-.36.16-.78.24-1.2.24-1.4 0-2.4-.7-3-2-.3-.6-.8-.9-1.2-.9-.4 0-.8.2-.8.5 0 .5.7.8 1 1.2.7 1.5 2 2.4 4 2.4.43 0 .84-.04 1.2-.13V22"/>',
-  globe:
-    '<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>',
-  info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
-  js: '<path d="M8 8v7a2 2 0 1 1-4 0"/><path d="M16 15a2 2 0 1 0 2-2 2 2 0 1 1 2-2"/><path d="M20 8v.01"/>',
-  key: '<path d="M21 2 11.4 11.6"/><circle cx="7.5" cy="16.5" r="5.5"/><path d="m15 7 2 2"/><path d="m12 10 2 2"/>',
-  leaf: '<path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/>',
-  lightbulb:
-    '<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>',
-  link: '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>',
-  linkedin:
-    '<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/>',
-  lock: '<rect width="18" height="11" x="3" y="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
-  menu: '<line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/>',
-  "message-circle": '<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>',
-  moon: '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>',
-  "panel-left":
-    '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/>',
-  "panel-left-close":
-    '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="m16 15-3-3 3-3"/>',
-  "panel-right":
-    '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/>',
-  "panel-right-close":
-    '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m8 9 3 3-3 3"/>',
-  paperclip:
-    '<path d="m16 6-8.41 8.41a2 2 0 0 0 2.83 2.83L18.83 8.83a4 4 0 0 0-5.66-5.66L4.76 11.59a6 6 0 0 0 8.49 8.49L21.66 11.66"/>',
-  "puzzle-piece":
-    '<path d="M15.39 4.39a2.1 2.1 0 0 0-2.97 0L12 4.82l-.42-.43a2.1 2.1 0 1 0-2.97 2.97l.43.42L7.6 9.22H4.75A1.75 1.75 0 0 0 3 10.97v8.28C3 20.22 3.78 21 4.75 21h8.28c.97 0 1.75-.78 1.75-1.75V16.4l1.44-1.44.42.43a2.1 2.1 0 1 0 2.97-2.97l-.43-.42.43-.42a2.1 2.1 0 1 0-2.97-2.97l-.42.43-1.44-1.44.61-.61a2.1 2.1 0 0 0 0-2.97Z"/>',
-  python:
-    '<path d="M12 2h4a4 4 0 0 1 4 4v3H8a4 4 0 0 0-4 4v1"/><path d="M12 22H8a4 4 0 0 1-4-4v-3h12a4 4 0 0 0 4-4v-1"/><path d="M9 6h.01"/><path d="M15 18h.01"/>',
-  rocket:
-    '<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>',
-  rss: '<path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/>',
-  search: '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
-  sparkles:
-    '<path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3Z"/><path d="M5 3v4"/><path d="M3 5h4"/><path d="M19 17v4"/><path d="M17 19h4"/>',
-  star: '<path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01Z"/>',
-  sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>',
-  "text-align-start":
-    '<path d="M4 6h16"/><path d="M4 10h10"/><path d="M4 14h16"/><path d="M4 18h10"/>',
-  "thumbs-down":
-    '<path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"/>',
-  "thumbs-up":
-    '<path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/>',
-  "triangle-alert":
-    '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
-  x: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
+import { createRequire } from "node:module";
+
+import type { IconifyJSON } from "@iconify/types";
+import { getIconData, iconToSVG } from "@iconify/utils";
+
+// Load the icon-set JSON with a CJS `require` rather than an `import ... with
+// { type: "json" }`: the bundled Node CLI drops the import attribute (Bun.build
+// strips it when externalizing) and then rejects the module, whereas `require`
+// of a JSON file needs no attribute and works under both Node and Bun.
+const requireJson = createRequire(import.meta.url);
+const loadSet = (pkg: string): IconifyJSON => requireJson(pkg) as IconifyJSON;
+
+const SETS: Record<string, IconifyJSON> = {
+  "fa6-brands": loadSet("@iconify-json/fa6-brands/icons.json"),
+  "fa6-regular": loadSet("@iconify-json/fa6-regular/icons.json"),
+  "fa6-solid": loadSet("@iconify-json/fa6-solid/icons.json"),
+  lucide: loadSet("@iconify-json/lucide/icons.json"),
+  tabler: loadSet("@iconify-json/tabler/icons.json"),
+};
+
+/** Blume's default library when a project sets no `icons.library`. */
+const DEFAULT_SET = "lucide";
+
+/** `icons.library` config value → Iconify set. */
+const LIBRARY_SETS: Record<string, string> = {
+  fa: "fa6-solid",
+  "font-awesome": "fa6-solid",
+  fontawesome: "fa6-solid",
+  lucide: "lucide",
+  tabler: "tabler",
+};
+
+/**
+ * Mintlify Font Awesome `iconType` → Iconify set. The Pro-only styles
+ * (`light`/`thin`/`duotone`/`sharp-solid`) aren't in the free data, so they map
+ * to `solid` rather than render nothing.
+ */
+const ICON_TYPE_SETS: Record<string, string> = {
+  brands: "fa6-brands",
+  duotone: "fa6-solid",
+  light: "fa6-solid",
+  regular: "fa6-regular",
+  "sharp-solid": "fa6-solid",
+  solid: "fa6-solid",
+  thin: "fa6-solid",
 };
 
-const iconAliases: Record<string, string> = {
-  "alien-8bit": "sparkles",
-  "arrow-up-right-from-square": "external-link",
-  "book-open-reader": "book-open",
-  "circle-info": "info",
-  close: "x",
-  "external-link-alt": "external-link",
-  "fa-github": "github",
-  "fa-linkedin": "linkedin",
-  "fa-x-twitter": "brand-x",
-  "file-lines": "file",
-  javascript: "js",
-  "panel-left-open": "panel-left",
-  "panel-right-open": "panel-right",
-  times: "x",
-  "x-twitter": "brand-x",
+/** Explicit `prefix:name` prefixes (Iconify prefixes + common FA aliases). */
+const PREFIX_SETS: Record<string, string> = {
+  ...LIBRARY_SETS,
+  fa: "fa6-solid",
+  "fa-brands": "fa6-brands",
+  "fa-regular": "fa6-regular",
+  "fa-solid": "fa6-solid",
+  "fa6-brands": "fa6-brands",
+  "fa6-regular": "fa6-regular",
+  "fa6-solid": "fa6-solid",
+  fab: "fa6-brands",
+  far: "fa6-regular",
+  fas: "fa6-solid",
+  ti: "tabler",
 };
 
-const libraryPrefixes = [
-  "fa-brands",
-  "fa-duotone",
-  "fa-light",
-  "fa-regular",
-  "fa-sharp-solid",
-  "fa-solid",
-  "fa-thin",
-  "fa",
-  "fab",
-  "fad",
-  "fal",
-  "far",
-  "fas",
-  "fat",
-  "lucide",
-  "tabler",
-  "ti",
-];
-
-const normalizedIconName = (name: string): string =>
+export interface ResolvedIcon {
+  /** Inner SVG markup (self-styled: carries its own fill/stroke). */
+  body: string;
+  /** The resolved icon name. */
+  name: string;
+  /** The icon's viewBox, which varies per library (24×24, 512-height, …). */
+  viewBox: string;
+}
+
+export interface ResolveIconOptions {
+  /** Font Awesome style selector (`solid`, `regular`, `brands`, …). */
+  iconType?: string;
+  /** Default library for a bare name (`fontawesome` | `lucide` | `tabler`). */
+  library?: string;
+}
+
+const normalize = (name: string): string =>
   name
     .trim()
     .toLowerCase()
     .replaceAll(/[\s_]+/gu, "-");
 
-const isString = (value: string | null | undefined): value is string =>
-  typeof value === "string";
-
-const withoutLibraryPrefix = (name: string): string => {
-  let normalized = normalizedIconName(name).replaceAll(/^icon-/gu, "");
-  let changed = true;
-  while (changed) {
-    changed = false;
-    for (const prefix of libraryPrefixes) {
-      if (normalized.startsWith(`${prefix}-`)) {
-        normalized = normalized.slice(prefix.length + 1);
-        changed = true;
-      }
-      if (normalized.startsWith(`${prefix}:`)) {
-        normalized = normalized.slice(prefix.length + 1);
-        changed = true;
-      }
+/** Which set a bare name resolves against, given library/iconType hints. */
+const setFor = (options: ResolveIconOptions): string => {
+  if (options.iconType) {
+    const set = ICON_TYPE_SETS[normalize(options.iconType)];
+    if (set) {
+      return set;
     }
   }
-  return normalized;
+  if (options.library) {
+    const set = LIBRARY_SETS[normalize(options.library)];
+    if (set) {
+      return set;
+    }
+  }
+  return DEFAULT_SET;
 };
 
-export interface ResolvedIcon {
-  name: string;
-  markup: string;
-}
+const fromSet = (setName: string, iconName: string): ResolvedIcon | null => {
+  const set = SETS[setName];
+  const data = set && getIconData(set, iconName);
+  if (!data) {
+    return null;
+  }
+  const { attributes, body } = iconToSVG(data, { height: "auto" });
+  return { body, name: iconName, viewBox: attributes.viewBox };
+};
+
+// Font Awesome splits brands into their own set, so a bare `github` under a
+// solid/regular default still resolves.
+const fromFaSet = (setName: string, name: string): ResolvedIcon | null =>
+  fromSet(setName, name) ?? fromSet("fa6-brands", name);
 
-/** Resolve common Mintlify Font Awesome/Lucide/Tabler names to Blume icons. */
+const resolveInSet = (setName: string, name: string): ResolvedIcon | null =>
+  setName.startsWith("fa6-")
+    ? fromFaSet(setName, name)
+    : fromSet(setName, name);
+
+/**
+ * Resolve an icon name to inline SVG. Honors an explicit `prefix:name`
+ * (`lucide:rocket`, `fa6-brands:github`), then `iconType`, then the configured
+ * `library`, falling back to Lucide.
+ */
 export const resolveIcon = (
   name: string,
-  iconType?: string
+  options: ResolveIconOptions = {}
 ): ResolvedIcon | null => {
-  const normalized = normalizedIconName(name);
-  const stripped = withoutLibraryPrefix(name);
-  const type = iconType ? normalizedIconName(iconType) : null;
-  const candidates = [
-    normalized,
-    stripped,
-    type ? `${type}-${stripped}` : null,
-    iconAliases[normalized],
-    iconAliases[stripped],
-  ].filter(isString);
-
-  for (const candidate of candidates) {
-    const markup = icons[candidate];
-    if (markup) {
-      return { markup, name: candidate };
+  const normalized = normalize(name);
+  const colon = normalized.indexOf(":");
+  if (colon > 0) {
+    const setName = PREFIX_SETS[normalized.slice(0, colon)];
+    if (setName) {
+      return resolveInSet(setName, normalized.slice(colon + 1));
     }
   }
-  return null;
+  return resolveInSet(setFor(options), normalized);
 };
 
-/** Whether a name resolves to a known built-in icon. */
-export const hasIcon = (name: string, iconType?: string): boolean =>
-  resolveIcon(name, iconType) !== null;
+/**
+ * Whether a name resolves to a known icon. Without a library hint this checks
+ * every bundled set, so a valid Font Awesome/Tabler name isn't flagged as a typo
+ * just because the project's default library is Lucide.
+ */
+export const hasIcon = (
+  name: string,
+  options: ResolveIconOptions = {}
+): boolean => {
+  if (resolveIcon(name, options)) {
+    return true;
+  }
+  const normalized = normalize(name);
+  const bare = normalized.includes(":")
+    ? normalized.slice(normalized.indexOf(":") + 1)
+    : normalized;
+  return Object.values(SETS).some((set) => getIconData(set, bare) !== null);
+};

package/src/theme/palette.ts

@@ -1,8 +1,10 @@
 import type { ResolvedConfig } from "../core/schema.ts";
 
+const FALLBACK_ACCENT = "oklch(0.62 0.16 250)";
+
 /** Named accent presets mapped to OKLCH values. */
 const ACCENTS: Record<string, string> = {
-  blue: "oklch(0.62 0.16 250)",
+  blue: FALLBACK_ACCENT,
   green: "oklch(0.6 0.16 150)",
   orange: "oklch(0.68 0.17 50)",
   pink: "oklch(0.65 0.2 350)",
@@ -11,6 +13,19 @@ const ACCENTS: Record<string, string> = {
   teal: "oklch(0.6 0.12 195)",
 };
 
+// Characters valid in a CSS color value (hex, rgb/hsl/oklch functions, named
+// colors). Anything else — notably `;`, `{`, `}` — could break out of the
+// declaration and inject rules, so such a value is rejected.
+const CSS_COLOR = /^[\w\s#%.,()/+-]+$/u;
+
+/** Pass a raw color through only if it can't break out of a CSS declaration. */
+const safeColor = (value: string, fallback: string): string =>
+  CSS_COLOR.test(value.trim()) ? value.trim() : fallback;
+
+/** Like {@link safeColor} but drops an unsafe/absent value to `null`. */
+const safeColorOrNull = (value: string | undefined): string | null =>
+  value && CSS_COLOR.test(value.trim()) ? value.trim() : null;
+
 const RADII: Record<ResolvedConfig["theme"]["radius"], string> = {
   lg: "0.75rem",
   md: "0.5rem",
@@ -66,7 +81,7 @@ const themeRootCss = (
       "--blume-action-foreground",
       options.action ? "oklch(1 0 0)" : null
     ),
-    ...cssToken("--blume-background", theme.background),
+    ...cssToken("--blume-background", safeColorOrNull(theme.background)),
     ...cssToken(
       "--blume-background-image",
       theme.backgroundImage ? backgroundImageCss(theme.backgroundImage) : null
@@ -83,7 +98,7 @@ const themeDarkCss = (
 ): string => {
   const tokens = [
     ...cssToken("--blume-accent", accentDark),
-    ...cssToken("--blume-background", theme.backgroundDark),
+    ...cssToken("--blume-background", safeColorOrNull(theme.backgroundDark)),
     ...cssToken(
       "--blume-background-image",
       theme.backgroundImageDark
@@ -106,7 +121,7 @@ ${tokens.join("\n")}
  * arbitrary colors without a config change.
  */
 export const resolveAccent = (theme: ResolvedConfig["theme"]): string =>
-  ACCENTS[theme.accent] ?? theme.accent;
+  ACCENTS[theme.accent] ?? safeColor(theme.accent, FALLBACK_ACCENT);
 
 /** Resolve the configured radius preset to a CSS length. */
 export const resolveRadius = (theme: ResolvedConfig["theme"]): string =>
@@ -118,11 +133,15 @@ export const resolveRadius = (theme: ResolvedConfig["theme"]): string =>
  * arbitrary colors without a config change.
  */
 export const buildThemeCss = (theme: ResolvedConfig["theme"]): string => {
-  const accent = ACCENTS[theme.accent] ?? theme.accent;
+  const accent =
+    ACCENTS[theme.accent] ?? safeColor(theme.accent, FALLBACK_ACCENT);
   const accentDark = theme.accentDark
-    ? (ACCENTS[theme.accentDark] ?? theme.accentDark)
+    ? (ACCENTS[theme.accentDark] ??
+      safeColor(theme.accentDark, FALLBACK_ACCENT))
+    : null;
+  const action = theme.action
+    ? (ACCENTS[theme.action] ?? safeColor(theme.action, FALLBACK_ACCENT))
     : null;
-  const action = theme.action ? (ACCENTS[theme.action] ?? theme.action) : null;
   const backgroundDecoration = backgroundDecorationCss(
     theme.backgroundDecoration
   );