create-lumen 1.1.3 → 1.2.0-beta.1

package/src/injector.js

@@ -2,7 +2,25 @@ import { promises as fsp } from "fs";
 import path from "path";
 import { copyDirRecursive, writeFileRecursive } from "@/utils/fs.js";
 
-export async function injectArchitecture(projectPath, templatesDir, architecture, language) {
+// Narrow a template tree copy to the selected language: .tsx/.ts for ts,
+// .jsx/.js for js (keeps the opposite language's files out of the project).
+function langFileFilter(language) {
+  return (name) => {
+    if (language === "ts") {
+      if (name.endsWith(".jsx")) return false;
+      if (name.endsWith(".js")) return false;
+      return true;
+    }
+    if (language === "js") {
+      if (name.endsWith(".tsx")) return false;
+      if (name.endsWith(".ts")) return false;
+      return true;
+    }
+    return true;
+  };
+}
+
+export async function injectArchitecture(projectPath, templatesDir, architecture, language, cssFramework) {
   const ext = language === "ts" ? "tsx" : "jsx";
   const srcDir = path.join(templatesDir, "architectures", architecture, "src");
 
@@ -11,17 +29,13 @@ export async function injectArchitecture(projectPath, templatesDir, architecture
   const defaultAppJsx = path.join(projectPath, "src", "App.jsx");
   try { await fsp.rm(defaultAppTsx, { force: true }); } catch {}
   try { await fsp.rm(defaultAppJsx, { force: true }); } catch {}
+  // Remove Vite's default index.css (framework CSS lives in src/styles/,
+  // copied below — never at the src/ root).
+  try { await fsp.rm(path.join(projectPath, "src", "index.css"), { force: true }); } catch {}
+  try { await fsp.rm(path.join(projectPath, "src", "App.css"), { force: true }); } catch {}
 
   // Copy the architecture tree into the project's src/
-  await copyDirRecursive(srcDir, path.join(projectPath, "src"), (name) => {
-    // Skip files that don't match the language
-    if (language === "ts" && name.endsWith(".jsx")) return false;
-    if (language === "js" && name.endsWith(".tsx")) return false;
-    // Skip .ts files when JS, skip .js when TS (for non-component files)
-    if (language === "ts" && name.endsWith(".js") && !name.endsWith(".config.js")) return false;
-    if (language === "js" && name.endsWith(".ts") && !name.endsWith(".config.ts")) return false;
-    return true;
-  });
+  await copyDirRecursive(srcDir, path.join(projectPath, "src"), langFileFilter(language));
 
   // Copy the architecture's main.tsx/main.jsx to src/main.{ext}
   const mainSrc = path.join(
@@ -41,6 +55,31 @@ export async function injectArchitecture(projectPath, templatesDir, architecture
   const oppositeExt = language === "ts" ? "jsx" : "tsx";
   const oppositeMain = path.join(projectPath, "src", `main.${oppositeExt}`);
   try { await fsp.rm(oppositeMain, { force: true }); } catch {}
+
+  // Apply the chosen CSS framework's component styling on top of the base
+  // (only where the base ships framework-agnostic inline markup). Runs here,
+  // before conditional overlays, so icons/router can still override the files
+  // they own.
+  if (cssFramework === "tailwind" || cssFramework === "bootstrap") {
+    const variantSrc = path.join(
+      templatesDir,
+      "css",
+      "component-styles",
+      cssFramework,
+      architecture,
+      "src"
+    );
+    try {
+      await fsp.access(variantSrc);
+      await copyDirRecursive(
+        variantSrc,
+        path.join(projectPath, "src"),
+        langFileFilter(language)
+      );
+    } catch {
+      // no component-styles for this arch/framework
+    }
+  }
 }
 
 export async function injectFormatter(projectPath, templatesDir, responses) {
@@ -72,6 +111,7 @@ export async function injectFormatter(projectPath, templatesDir, responses) {
       pkg.scripts["format:check"] = "prettier --check .";
     } else if (responses.formatter === "oxfmt") {
       pkg.scripts.format = "oxfmt .";
+      pkg.scripts["format:check"] = "oxfmt --check .";
     }
     await fsp.writeFile(pkgPath, JSON.stringify(pkg, null, 2) + "\n", "utf8");
   } catch {}
@@ -105,11 +145,14 @@ async function wireEslintPrettier(projectPath, language) {
 
     let result = lines.join("\n");
 
-    // Append ...prettier as the LAST element of the eslint config.
+    // Append prettier as the LAST element of the eslint config.
+    // eslint-config-prettier exports a flat-config object (not an iterable),
+    // so it must be passed by reference, not spread — passing `...prettier`
+    // breaks under ESLint's jiti-based TS config loading.
     // The JS template exports an array (`export default [...]`); the TS
     // template uses a function call (`export default tseslint.config(...)`).
     const pushLast = (_, head, tail) =>
-      head.replace(/,\s*$/, "") + ",\n  ...prettier," + tail;
+      head.replace(/,\s*$/, "") + ",\n  prettier," + tail;
     if (result.includes("tseslint.config(")) {
       result = result.replace(
         /(export default tseslint\.config\([\s\S]*?)(\n\s*\);)/,
@@ -149,20 +192,22 @@ export async function injectConditionals(projectPath, templatesDir, responses, a
 
   // 2. Router (overwrites App.tsx with routed version)
   if (responses.router) {
-    await injectOverlay(
+    await injectOverlayVariant(
       projectPath,
       templatesDir,
-      `conditional/router/${architecture}`,
+      `router/${architecture}`,
+      responses.cssFramework,
       language
     );
   }
 
   // 3. Icons (overwrites home page)
   if (responses.iconLibrary && responses.iconLibrary !== "none") {
-    await injectOverlay(
+    await injectOverlayVariant(
       projectPath,
       templatesDir,
-      `conditional/icons/${responses.iconLibrary}/${architecture}`,
+      `icons/${responses.iconLibrary}/${architecture}`,
+      responses.cssFramework,
       language
     );
   }
@@ -202,19 +247,70 @@ export async function injectConditionals(projectPath, templatesDir, responses, a
   if (architecture === "feature-based") {
     await injectCreateFeatureScript(projectPath, templatesDir, language);
   }
+
+  // A .gitkeep only keeps a folder alive when that folder holds nothing else;
+  // once an overlay writes real files into it the placeholder is redundant.
+  await pruneRedundantGitkeeps(projectPath);
+}
+
+// Remove .gitkeep placeholders from src/ directories that now contain real
+// files (e.g. component-based `services/.gitkeep` after the axios/fetch client
+// overlay lands). A folder with nothing but its placeholder keeps it.
+async function pruneRedundantGitkeeps(projectPath) {
+  const walk = async (dir) => {
+    let entries;
+    try {
+      entries = await fsp.readdir(dir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      if (entry.isDirectory()) {
+        await walk(path.join(dir, entry.name));
+      }
+    }
+    if (entries.some((e) => e.name === ".gitkeep")) {
+      const hasRealFiles = entries.some((e) => e.isFile() && e.name !== ".gitkeep");
+      if (hasRealFiles) {
+        await fsp.rm(path.join(dir, ".gitkeep"), { force: true });
+      }
+    }
+  };
+  await walk(path.join(projectPath, "src"));
+}
+
+// Overlays that ship presentational components (router, icons) carry optional
+// tailwind/bootstrap subfolders. Copy the root version first — it holds the
+// framework-agnostic skeleton (routed App, route tables) plus the inline
+// markup defaults used for cssFramework "none" — then overlay the framework's
+// subfolder so its markup-specific files (transitive layouts, home pages)
+// win; `copyDirRecursive` overwrites on name collision.
+async function injectOverlayVariant(projectPath, templatesDir, rel, cssFramework, language) {
+  const base = `conditional/${rel}`;
+  await injectOverlay(projectPath, templatesDir, base, language);
+  const variant =
+    cssFramework === "tailwind" || cssFramework === "bootstrap"
+      ? cssFramework
+      : "";
+  if (variant) {
+    await injectOverlay(
+      projectPath,
+      templatesDir,
+      `${base}/${variant}`,
+      language
+    );
+  }
 }
 
 async function injectOverlay(projectPath, templatesDir, overlayPath, language) {
   const srcDir = path.join(templatesDir, overlayPath, "src");
   try {
     await fsp.access(srcDir);
-    await copyDirRecursive(srcDir, path.join(projectPath, "src"), (name) => {
-      if (language === "ts" && name.endsWith(".jsx")) return false;
-      if (language === "js" && name.endsWith(".tsx")) return false;
-      if (language === "ts" && name.endsWith(".js") && !name.endsWith(".config.js")) return false;
-      if (language === "js" && name.endsWith(".ts") && !name.endsWith(".config.ts")) return false;
-      return true;
-    });
+    await copyDirRecursive(
+      srcDir,
+      path.join(projectPath, "src"),
+      langFileFilter(language)
+    );
   } catch {
     // overlay src dir doesn't exist
   }
@@ -247,11 +343,18 @@ async function injectTesting(projectPath, templatesDir, framework, language, arc
       await fsp.access(jestSetupSrc);
       await fsp.copyFile(jestSetupSrc, path.join(projectPath, `jest.setup.${configExt}`));
     } catch {}
+
+    // Unified Babel transform config for Jest (env + react + typescript presets).
+    const babelSrc = path.join(testingDir, "babel.config.cjs");
+    try {
+      await fsp.access(babelSrc);
+      await fsp.copyFile(babelSrc, path.join(projectPath, "babel.config.cjs"));
+    } catch {}
   }
 
-  // Copy test file
+  // Copy test file (architecture-scoped so the App import path resolves)
   const testExt = language === "ts" ? "tsx" : "jsx";
-  const testSrc = path.join(testingDir, `src/__tests__/App.test.${testExt}`);
+  const testSrc = path.join(testingDir, architecture, `src/__tests__/App.test.${testExt}`);
   try {
     await fsp.access(testSrc);
     const testDest = path.join(projectPath, "src", "__tests__", `App.test.${testExt}`);
@@ -321,11 +424,11 @@ async function injectCreateFeatureScript(projectPath, templatesDir, language) {
     if (language === "js") {
       // Replace .ts extensions with .js in the initialFiles
       content = content
-        .replace(/interfaces\/index\.ts/g, "interfaces/index.js")
         .replace(/services\/index\.ts/g, "services/index.js")
         .replace(/store\/index\.ts/g, "store/index.js")
         .replace(/hooks\/index\.ts/g, "hooks/index.js")
-        .replace(/pages\/index\.ts/g, "pages/index.js");
+        .replace(/pages\/index\.ts/g, "pages/index.js")
+        .replace(/types\/index\.ts/g, "types/index.js");
     }
 
     await writeFileRecursive(scriptDest, content);
@@ -362,7 +465,7 @@ async function updateMainWithProvider(projectPath, stateType, architecture, ext)
       if (!content.includes("StoreProvider")) {
         content = content.replace(
           /import App from ['"]\.\/App['"]\n?/,
-          "import App from './App'\nimport { StoreProvider } from './context/StoreProvider'\n"
+          "import App from './App'\nimport { StoreProvider } from './providers/StoreProvider'\n"
         );
         content = content.replace(
           /<App \/>/,

package/src/main.js

@@ -15,6 +15,7 @@ import { getUserInputs, onCancel } from "@/prompts.js";
 import { runBaseInstall, runGitInit, runViteCreate } from "@/scaffold.js";
 import { installAllDeps } from "@/dependencies.js";
 import { generateReadme } from "@/readme.js";
+import { runProjectFormat } from "@/format.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -110,7 +111,8 @@ export async function main(options = {}) {
       projectPath,
       TEMPLATES_DIR,
       responses.architecture,
-      responses.language
+      responses.language,
+      responses.cssFramework
     );
     archSpin.stop(chalk.green("Architecture scaffolding complete."));
   } catch (err) {
@@ -174,6 +176,7 @@ export async function main(options = {}) {
       templatesDir: TEMPLATES_DIR,
       language: responses.language,
       cssFramework: responses.cssFramework,
+      architecture: responses.architecture,
       ext: responses.language === "ts" ? "tsx" : "jsx",
       pkg,
     });
@@ -215,6 +218,19 @@ export async function main(options = {}) {
     }
   }
 
+  // 13.5 Format the freshly generated project so it is canonical on init
+  if (responses.formatter && responses.formatter !== "none") {
+    const fmtPassSpin = spinner();
+    fmtPassSpin.start(`Formatting project with ${responses.formatter}...`);
+    try {
+      await runProjectFormat(projectPath, responses);
+      fmtPassSpin.stop(chalk.green("Project formatted."));
+    } catch (err) {
+      fmtPassSpin.stop(chalk.red("Failed to format project."));
+      throw err;
+    }
+  }
+
   log.step(chalk.green("\nProject setup complete!"));
   log.message(
     chalk.gray(

package/src/readme.js

@@ -77,36 +77,79 @@ function buildScripts(responses) {
 
   if (responses.formatter === "prettier" || responses.formatter === "oxfmt") {
     rows.push("| `npm run format` | Format code |");
+    rows.push("| `npm run format:check` | Verify code is formatted |");
+  }
+
+  if (responses.language === "ts") {
+    rows.push("| `npm run typecheck` | Type-check the project (tsc -b) |");
   }
 
   return rows.join("\n");
 }
 
-function buildProjectStructure(architecture) {
-  if (architecture === "feature-based") {
+function buildProjectStructure(responses) {
+  if (responses.architecture === "feature-based") {
+    const shared = [];
+    if (responses.apiClient === "fetch") {
+      shared.push("api/      # HTTP client (fetch) — not an external dependency");
+    } else if (responses.apiClient === "axios") {
+      shared.push("lib/      # Third-party library init (axios client)");
+    }
+    shared.push(
+      "components/ # Shared UI components",
+      "hooks/    # Shared custom hooks",
+      "layouts/  # High-level layout wrappers",
+      "stores/   # Global state stores",
+      `styles/   # ${responses.cssFramework === "none" ? "main.css (reset) + themes.css (CSS variables)" : "globals.css (framework directives) + themes.css"}`,
+      "types/    # Global type definitions",
+      "utils/    # Pure utility functions"
+    );
+    const appChildren = [
+      "App.tsx",
+      "contexts/   # React context objects (createContext)",
+      "providers/  # Provider components (ThemeProvider, ...)",
+      "hooks/      # Hooks that read the contexts (useTheme, ...)"
+    ];
     return `src/
-├── app/          # App shell and providers
-├── components/   # Shared UI components
-├── config/       # Constants and configuration
-├── features/     # Feature modules (pages, hooks, api)
-├── hooks/        # Shared custom hooks
-├── stores/       # Global state stores
-├── types/        # TypeScript type definitions
-└── utils/        # Utility functions`;
+├── app/          # App shell and global providers
+${nestedTree(appChildren)}
+├── features/     # Feature modules (pages, hooks, api, types)
+│   └── home/     # Example feature (components, services, types, store)
+└── shared/       # Reusable, business-agnostic resources
+${nestedTree(shared)}`;
   }
 
+  const rows = ["components/   # Reusable UI components (common, form)"];
+  if (responses.apiClient !== "none") {
+    rows.push("config/       # API configuration (axios/fetch)");
+  }
+  rows.push(
+    "hooks/        # Shared custom hooks",
+    "layouts/      # Page layout wrappers",
+    "pages/        # Page-level components",
+    "providers/    # Provider components (createContext in appcontext.{ts,js}, Provider in AppProvider.{tsx,jsx})"
+  );
+  if (responses.router) {
+    rows.push("router/       # Centralized data router (guards/, index)");
+  }
+  rows.push(
+    "services/     # API service layer",
+    "store/        # State store",
+    `styles/       # ${responses.cssFramework === "none" ? "main.css (reset) + themes.css (CSS variables)" : "globals.css (framework directives) + themes.css"}`,
+    "types/        # TypeScript type definitions",
+    "utils/        # Utility functions"
+  );
   return `src/
-├── components/   # Reusable UI components (common, form, layout)
-├── config/       # Constants and route definitions
-├── context/      # React context providers
-├── hooks/        # Shared custom hooks
-├── layouts/      # Page layout wrappers
-├── pages/        # Page-level components
-├── routes/       # Route definitions
-├── services/     # API service layer
-├── store/        # State store
-├── styles/       # Global styles
-└── utils/        # Utility functions`;
+${nestedTree(rows, "")}`;
+}
+
+function nestedTree(rows, indent = "    ") {
+  return rows
+    .map((label, i) => {
+      const isLast = i === rows.length - 1;
+      return `${indent}${isLast ? "└── " : "├── "}${label}`;
+    })
+    .join("\n");
 }
 
 function buildLicense() {
@@ -152,7 +195,7 @@ function buildDescription(projectName, responses) {
 function buildReadme(projectName, responses) {
   const builtWith = buildBuiltWith(responses);
   const scripts = buildScripts(responses);
-  const structure = buildProjectStructure(responses.architecture);
+  const structure = buildProjectStructure(responses);
 
   return `${buildDescription(projectName, responses)}
 

package/templates/architectures/component-based/main.tsx

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./styles/globals.css";
 
-ReactDOM.createRoot(document.getElementById("root")).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>

package/templates/architectures/component-based/src/App.jsx

@@ -1,11 +1,13 @@
-import React from "react";
+import { AppProvider } from "@/providers/AppProvider";
 import { MainLayout } from "@/layouts/MainLayout";
 import { HomePage } from "@/pages/Home/Home";
 
 export default function App() {
   return (
-    <MainLayout>
-      <HomePage />
-    </MainLayout>
+    <AppProvider>
+      <MainLayout>
+        <HomePage />
+      </MainLayout>
+    </AppProvider>
   );
 }

package/templates/architectures/component-based/src/App.tsx

@@ -1,11 +1,13 @@
-import React from "react";
+import { AppProvider } from "@/providers/AppProvider";
 import { MainLayout } from "@/layouts/MainLayout";
 import { HomePage } from "@/pages/Home/Home";
 
 export default function App() {
   return (
-    <MainLayout>
-      <HomePage />
-    </MainLayout>
+    <AppProvider>
+      <MainLayout>
+        <HomePage />
+      </MainLayout>
+    </AppProvider>
   );
 }

package/templates/architectures/component-based/src/components/common/Button.jsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export function Button({
   variant = "primary",
   children,
@@ -7,8 +5,11 @@ export function Button({
   ...props
 }) {
   const styles = {
-    primary: { backgroundColor: "#2563eb", color: "white" },
-    secondary: { backgroundColor: "#e5e7eb", color: "#1f2937" },
+    primary: { backgroundColor: "var(--color-primary)", color: "white" },
+    secondary: {
+      backgroundColor: "var(--color-border)",
+      color: "var(--color-fg)",
+    },
   };
 
   return (

package/templates/architectures/component-based/src/components/common/Button.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "primary" | "secondary";
   children: React.ReactNode;
@@ -12,8 +10,11 @@ export function Button({
   ...props
 }: ButtonProps) {
   const styles = {
-    primary: { backgroundColor: "#2563eb", color: "white" },
-    secondary: { backgroundColor: "#e5e7eb", color: "#1f2937" },
+    primary: { backgroundColor: "var(--color-primary)", color: "white" },
+    secondary: {
+      backgroundColor: "var(--color-border)",
+      color: "var(--color-fg)",
+    },
   };
 
   return (

package/templates/architectures/component-based/src/hooks/useApp.js

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { AppContext } from "@/providers/appcontext";
+
+export function useApp() {
+  const ctx = useContext(AppContext);
+  if (!ctx) {
+    throw new Error("useApp must be used within an AppProvider");
+  }
+  return ctx;
+}

package/templates/architectures/component-based/src/hooks/useApp.ts

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { AppContext, type AppContextValue } from "@/providers/appcontext";
+
+export function useApp(): AppContextValue {
+  const ctx = useContext(AppContext);
+  if (!ctx) {
+    throw new Error("useApp must be used within an AppProvider");
+  }
+  return ctx;
+}

package/templates/architectures/component-based/src/hooks/useLocalStorage.ts

@@ -1,17 +1,17 @@
 import { useState, useCallback } from "react";
 
-export function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = useState(() => {
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  const [storedValue, setStoredValue] = useState<T>(() => {
     try {
       const item = window.localStorage.getItem(key);
-      return item ? JSON.parse(item) : initialValue;
+      return item ? (JSON.parse(item) as T) : initialValue;
     } catch {
       return initialValue;
     }
   });
 
   const setValue = useCallback(
-    (value) => {
+    (value: T | ((prev: T) => T)) => {
       try {
         const valueToStore =
           value instanceof Function ? value(storedValue) : value;
@@ -24,5 +24,5 @@ export function useLocalStorage(key, initialValue) {
     [key, storedValue]
   );
 
-  return [storedValue, setValue];
+  return [storedValue, setValue] as const;
 }

package/templates/architectures/component-based/src/layouts/MainLayout.jsx

@@ -1,25 +1,31 @@
-import React from "react";
-
 export function MainLayout({ children }) {
   return (
     <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
       <header
         style={{
           padding: "16px 24px",
-          borderBottom: "1px solid #e5e7eb",
+          borderBottom: "1px solid var(--color-border)",
         }}
       >
         <h2 style={{ fontSize: "1.25rem", fontWeight: 600 }}>Lumen</h2>
       </header>
-      <main style={{ flex: 1, padding: "24px", display: "flex", alignItems: "center", justifyContent: "center" }}>
+      <main
+        style={{
+          flex: 1,
+          padding: "24px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
         {children}
       </main>
       <footer
         style={{
           padding: "16px 24px",
-          borderTop: "1px solid #e5e7eb",
+          borderTop: "1px solid var(--color-border)",
           textAlign: "center",
-          color: "#6b7280",
+          color: "var(--color-muted)",
         }}
       >
         <p>Built with Lumen</p>

package/templates/architectures/component-based/src/layouts/MainLayout.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 interface MainLayoutProps {
   children: React.ReactNode;
 }
@@ -10,20 +8,28 @@ export function MainLayout({ children }: MainLayoutProps) {
       <header
         style={{
           padding: "16px 24px",
-          borderBottom: "1px solid #e5e7eb",
+          borderBottom: "1px solid var(--color-border)",
         }}
       >
         <h2 style={{ fontSize: "1.25rem", fontWeight: 600 }}>Lumen</h2>
       </header>
-      <main style={{ flex: 1, padding: "24px", display: "flex", alignItems: "center", justifyContent: "center" }}>
+      <main
+        style={{
+          flex: 1,
+          padding: "24px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
         {children}
       </main>
       <footer
         style={{
           padding: "16px 24px",
-          borderTop: "1px solid #e5e7eb",
+          borderTop: "1px solid var(--color-border)",
           textAlign: "center",
-          color: "#6b7280",
+          color: "var(--color-muted)",
         }}
       >
         <p>Built with Lumen</p>

package/templates/architectures/component-based/src/pages/Home/Home.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Button } from "@/components/common";
 
 export function HomePage() {
@@ -7,7 +6,12 @@ export function HomePage() {
       <h1 style={{ fontSize: "2.25rem", fontWeight: 700, marginBottom: "1rem" }}>
         Welcome to Lumen
       </h1>
-      <p style={{ color: "#6b7280", marginBottom: "2rem" }}>
+      <p
+        style={{
+          color: "var(--color-muted)",
+          marginBottom: "2rem",
+        }}
+      >
         Your React + Vite project is ready. Start building!
       </p>
       <Button>Get Started</Button>

package/templates/architectures/component-based/src/pages/Home/Home.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Button } from "@/components/common";
 
 export function HomePage() {
@@ -7,7 +6,12 @@ export function HomePage() {
       <h1 style={{ fontSize: "2.25rem", fontWeight: 700, marginBottom: "1rem" }}>
         Welcome to Lumen
       </h1>
-      <p style={{ color: "#6b7280", marginBottom: "2rem" }}>
+      <p
+        style={{
+          color: "var(--color-muted)",
+          marginBottom: "2rem",
+        }}
+      >
         Your React + Vite project is ready. Start building!
       </p>
       <Button>Get Started</Button>