refactor(theme): move CSS custom property defaults to :root

packages/react-ui/.prettierignore

@@ -1,2 +1,3 @@
 # Auto-generated file, do not format
 src/cssUtils.scss
+src/openui-defaults.scss

packages/react-ui/cp-css.js

@@ -66,6 +66,11 @@ function copyCssFiles() {
   const cssUtilsSrc = fs.readFileSync(path.join(dirname, "src", "cssUtils.scss"), "utf8");
   fs.writeFileSync(path.join(distDir, "cssUtils.scss"), cssUtilsSrc);
 
+  const defaultsCssPath = path.join(dirname, "dist", "openui-defaults.css");
+  if (fs.existsSync(defaultsCssPath)) {
+    fs.copyFileSync(defaultsCssPath, path.join(distDir, "openui-defaults.css"));
+  }
+
   // Fix .scss imports in compiled JS to point to .css files instead
   fixScssImportsInJs(path.join(dirname, "dist"));
 }

packages/react-ui/package.json

@@ -14,6 +14,9 @@
     "./components.css": {
       "default": "./dist/components/index.css"
     },
+    "./defaults.css": {
+      "default": "./dist/styles/openui-defaults.css"
+    },
     "./styles/*": {
       "default": "./dist/styles/*"
     },

packages/react-ui/src/components/index.scss

@@ -1,3 +1,5 @@
+@use "../openui-defaults.scss";
+
 @forward "./Accordion/accordion.scss";
 @forward "./BottomTray/bottomTray.scss";
 @forward "./Button/button.scss";

packages/react-ui/src/scripts/generate-css-utils.ts

@@ -1,7 +1,7 @@
 import * as fs from "node:fs";
 import * as path from "node:path";
 import { fileURLToPath } from "node:url";
-import { defaultLightTheme } from "../components/ThemeProvider/defaultTheme.js";
+import { defaultDarkTheme, defaultLightTheme } from "../components/ThemeProvider/defaultTheme.js";
 import { camelToKebab } from "../components/ThemeProvider/utils.js";
 
 const __filename = fileURLToPath(import.meta.url);
@@ -29,14 +29,14 @@ const entries = Object.entries(defaultLightTheme).filter(
   ([, value]) => typeof value === "string",
 ) as [string, string][];
 
-for (const [key, value] of entries) {
+for (const [key] of entries) {
   if (sectionHeaders[key]) {
     if (lines.length > 3) lines.push("");
     lines.push(sectionHeaders[key]);
     lines.push("");
   }
   const kebab = camelToKebab(key);
-  lines.push(`$${kebab}: var(--openui-${kebab}, ${value});`);
+  lines.push(`$${kebab}: var(--openui-${kebab});`);
 }
 
 // $chat-container-bg is an SCSS-level alias, not a CSS variable
@@ -116,3 +116,50 @@ lines.push("");
 const outputPath = path.resolve(__dirname, "../cssUtils.scss");
 fs.writeFileSync(outputPath, lines.join("\n"));
 console.info(`Generated cssUtils.scss at ${outputPath}`);
+
+// ─── Generate openui-defaults.scss with :root custom property defaults ───────
+const defaultsLines: string[] = [];
+defaultsLines.push(
+  "// Auto-generated by src/scripts/generate-css-utils.ts — do not edit manually.",
+);
+defaultsLines.push("");
+defaultsLines.push(":root {");
+
+for (const [key, value] of entries) {
+  if (sectionHeaders[key]) {
+    if (defaultsLines.length > 3) defaultsLines.push("");
+    defaultsLines.push(`  ${sectionHeaders[key]}`);
+    defaultsLines.push("");
+  }
+  const kebab = camelToKebab(key);
+  defaultsLines.push(`  --openui-${kebab}: ${value};`);
+}
+
+defaultsLines.push("}");
+defaultsLines.push("");
+
+// ─── Dark mode defaults via prefers-color-scheme ─────────────────────────────
+const darkEntries = Object.entries(defaultDarkTheme).filter(
+  ([, value]) => typeof value === "string",
+) as [string, string][];
+
+defaultsLines.push("@media (prefers-color-scheme: dark) {");
+defaultsLines.push("  :root {");
+
+for (const [key, value] of darkEntries) {
+  if (sectionHeaders[key]) {
+    defaultsLines.push("");
+    defaultsLines.push(`    ${sectionHeaders[key]}`);
+    defaultsLines.push("");
+  }
+  const kebab = camelToKebab(key);
+  defaultsLines.push(`    --openui-${kebab}: ${value};`);
+}
+
+defaultsLines.push("  }");
+defaultsLines.push("}");
+defaultsLines.push("");
+
+const defaultsOutputPath = path.resolve(__dirname, "../openui-defaults.scss");
+fs.writeFileSync(defaultsOutputPath, defaultsLines.join("\n"));
+console.info(`Generated openui-defaults.scss at ${defaultsOutputPath}`);

packages/react-ui/src/scripts/scss-import.js

@@ -9,7 +9,7 @@ const dirname = path.dirname(new URL(import.meta.url).pathname);
 function generateScssIndex() {
   // Go up one directory to reach src, then into components
   const srcDir = path.join(dirname, "..", "components");
-  let indexScssContent = "";
+  let indexScssContent = '@use "../openui-defaults.scss";\n\n';
 
   // Read all component directories
   // this produces an array of all the component directories