create-lumen 1.1.4 → 1.2.0-beta.1

package/README.md

@@ -87,36 +87,40 @@ Feature-based (example):
 
 ```
 src/
-├── app
+├── app               # App shell and global providers
 │   ├── App.tsx
+│   ├── contexts
+│   │   └── themecontext.ts   # createContext + ThemeContextValue
 │   ├── providers
-│   │   └── ThemeProvider.tsx
-│   └── router.tsx
-├── components
-│   └── ui
-├── config
-│   └── constants.ts
-├── features
-│   └── logout
+│   │   └── ThemeProvider.tsx # Provider component
+│   ├── hooks
+│   │   └── useTheme.ts       # Hook that reads ThemeContext
+│   └── router        # Data router (per feature area)
+│       ├── guards    # AuthGuard, RoleGuard
+│       ├── routes    # home.routes, auth.routes
+│       └── index.tsx # createBrowserRouter init
+├── features           # Feature modules (business logic owned per feature)
+│   └── home
 │       ├── components
-│       ├── interfaces
+│       ├── hooks
+│       ├── index.ts    # public feature barrel
 │       ├── layouts
 │       ├── pages
 │       ├── services
-│       └── store
-├── hooks
-│   ├── index.ts
-│   └── useLocalStorage.ts
-├── index.css
-├── lib
-├── main.tsx
-├── stores
-├── styles
-│   └── globals.css
-├── test
-│   └── setup.ts
-├── types
-└── utils
+│       ├── store
+│       └── types
+└── shared             # Reusable, business-agnostic resources
+    ├── api/lib        # fetch client → api/; axios init → lib/axios/ (per choice)
+    ├── components
+    │   └── ui
+    ├── hooks
+    ├── layouts
+    ├── stores
+    ├── styles
+    │   ├── globals.css      # Tailwind/Bootstrap directives (or main.css for vanilla)
+    │   └── themes.css       # Theme tokens (Tailwind @theme / Bootstrap data-bs-theme / CSS vars)
+    ├── types
+    └── utils
 ```
 
 Component-based (example):
@@ -126,28 +130,32 @@ src/
 ├── App.tsx
 ├── components
 │   ├── common
-│   ├── form
-│   └── layout
-├── config
-│   ├── constants.ts
-│   └── routes.ts
-├── context
+│   └── form
+├── config             # API config (when an axios/fetch client is chosen)
 ├── hooks
-├── index.css
 ├── layouts
 ├── main.tsx
 ├── pages
-├── routes
+├── providers          # Provider components (createContext + Provider in separate files inside providers/)
+│   ├── appcontext.ts      # createContext + AppContextValue
+│   └── AppProvider.tsx    # Provider component
+├── hooks
+│   └── useApp.ts           # Hook that reads AppContext
+├── router             # Centralized data router
+│   ├── guards         # AuthGuard, GuestGuard
+│   └── index.tsx      # Single source of truth for all routes
 ├── services
 ├── store
 ├── styles
+│   ├── globals.css      # Tailwind/Bootstrap directives (or main.css for vanilla)
+│   └── themes.css       # Theme tokens (Tailwind @theme / Bootstrap data-bs-theme / CSS vars)
 ├── test
 └── utils
 ```
 
 ## Roadmap
 
-See `docs/ROADMAP.md` for planned features and upcoming releases.
+Released versions live in [`docs/CHANGELOG.md`](./docs/CHANGELOG.md); planned work is tracked in [`docs/ROADMAP.md`](./docs/ROADMAP.md).
 
 ## Requirements
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-lumen",
-  "version": "1.1.4",
+  "version": "1.2.0-beta.1",
   "description": "Scaffold a React + Vite project with architecture choice: feature-based or component-based.",
   "type": "module",
   "bin": {

package/src/configure.js

@@ -19,7 +19,7 @@ export async function configureProject(projectPath, language, cssFramework) {
   }
 
   // Add scripts to package.json
-  await configurePackageJson(projectPath);
+  await configurePackageJson(projectPath, language);
 }
 
 async function configureTsconfig(projectPath) {
@@ -154,7 +154,7 @@ async function addPathAliasesToViteConfig(projectPath, ext) {
   }
 }
 
-async function configurePackageJson(projectPath) {
+async function configurePackageJson(projectPath, language) {
   const pkgPath = path.join(projectPath, "package.json");
   try {
     const content = await readFileContent(pkgPath);
@@ -166,6 +166,10 @@ async function configurePackageJson(projectPath) {
     pkg.scripts.build = "vite build";
     pkg.scripts.preview = "vite preview";
 
+    if (language === "ts") {
+      pkg.scripts.typecheck = "tsc -b";
+    }
+
     await fsp.writeFile(pkgPath, JSON.stringify(pkg, null, 2) + "\n", "utf8");
   } catch {
     // file doesn't exist, skip

package/src/css.js

@@ -1,4 +1,3 @@
-import fs from "fs";
 import { promises as fsp } from "fs";
 import path from "path";
 import { deleteIfExists } from "@/utils/fs.js";
@@ -8,23 +7,27 @@ export async function setupCssFramework({
   templatesDir,
   language,
   cssFramework,
+  architecture,
   ext,
   pkg,
 }) {
   process.chdir(projectPath);
   const cssDir = path.join(templatesDir, "css");
-  const indexCssPath = path.join(projectPath, "src", "index.css");
-  // Feature-based main.* imports ./styles/globals.css; component-based main.*
-  // imports ./index.css. The chosen framework's styles must land in the file
-  // the architecture actually imports.
-  const globalsCssPath = path.join(projectPath, "src", "styles", "globals.css");
+  // Feature-based main.* imports ./shared/styles/globals.css (or main.css when
+  // framework is "none"); component-based imports ./styles/globals.css (or
+  // main.css). The chosen framework's styles land in the file the architecture
+  // actually imports.
+  const stylesDir =
+    architecture === "feature-based"
+      ? path.join(projectPath, "src", "shared", "styles")
+      : path.join(projectPath, "src", "styles");
 
-  async function writeCss(content) {
-    await fsp.writeFile(indexCssPath, content, "utf8");
-    try {
-      await fsp.access(globalsCssPath);
-      await fsp.writeFile(globalsCssPath, content, "utf8");
-    } catch {}
+  // Vanilla CSS gets a stylesheet named main.css; tailwind/bootstrap keep
+  // globals.css (their idiomatic name — they inject framework directives).
+  const mainFileName = cssFramework === "none" ? "main.css" : "globals.css";
+
+  async function writeCss(content, fileName) {
+    await fsp.writeFile(path.join(stylesDir, fileName), content, "utf8");
   }
 
   if (cssFramework === "tailwind") {
@@ -36,14 +39,19 @@ export async function setupCssFramework({
     );
     await fsp.writeFile(viteConfigTarget, viteConfigContent, "utf8");
 
-    const indexCssContent = await fsp.readFile(
-      path.join(cssDir, "tailwind", "src", "index.css"),
+    const globalsContent = await fsp.readFile(
+      path.join(cssDir, "tailwind", "src", "globals.css"),
+      "utf8"
+    );
+    const themesContent = await fsp.readFile(
+      path.join(cssDir, "tailwind", "src", "themes.css"),
       "utf8"
     );
-    await writeCss(indexCssContent);
+    await writeCss(globalsContent, "globals.css");
+    await writeCss(themesContent, "themes.css");
   } else if (cssFramework === "bootstrap") {
     const mainFile = path.join(projectPath, "src", `main.${ext}`);
-    if (fs.existsSync(mainFile)) {
+    try {
       let mainContent = await fsp.readFile(mainFile, "utf8");
       if (
         !mainContent.includes("bootstrap/dist/css/bootstrap.min.css")
@@ -52,20 +60,59 @@ export async function setupCssFramework({
           "import 'bootstrap/dist/css/bootstrap.min.css';\n" + mainContent;
         await fsp.writeFile(mainFile, mainContent, "utf8");
       }
-    }
-    const indexCssContent = await fsp.readFile(
-      path.join(cssDir, "bootstrap", "src", "index.css"),
+    } catch {}
+
+    const globalsContent = await fsp.readFile(
+      path.join(cssDir, "bootstrap", "src", "globals.css"),
       "utf8"
     );
-    await writeCss(indexCssContent);
+    const themesContent = await fsp.readFile(
+      path.join(cssDir, "bootstrap", "src", "themes.css"),
+      "utf8"
+    );
+    await writeCss(globalsContent, "globals.css");
+    await writeCss(themesContent, "themes.css");
   } else {
-    const indexCssContent = await fsp.readFile(
-      path.join(cssDir, "none", "src", "index.css"),
+    const mainContent = await fsp.readFile(
+      path.join(cssDir, "none", "src", "main.css"),
+      "utf8"
+    );
+    const themesContent = await fsp.readFile(
+      path.join(cssDir, "none", "src", "themes.css"),
       "utf8"
     );
-    await writeCss(indexCssContent);
+    await writeCss(mainContent, "main.css");
+    await writeCss(themesContent, "themes.css");
   }
 
-  // Clean up Vite's default App.css
+  // Ensure main.{ext} imports the correct stylesheet name for this framework.
+  await syncMainCssImport(projectPath, ext, architecture, mainFileName);
+
+  // Ensure the styles dir exists (for the .gitkeep placeholder when no real
+  // file lives there yet — pruneRedundantGitkeeps removes it after overlays).
+  await fsp.mkdir(stylesDir, { recursive: true });
+
+  // Clean up Vite's default CSS files; src/index.css is the framework-agnostic
+  // leftover Vite scaffolds and is never imported in our generated projects.
   await deleteIfExists(path.join(projectPath, "src", "App.css"));
+  await deleteIfExists(path.join(projectPath, "src", "index.css"));
+}
+
+// Rewrite the CSS import in main.{ext} so it matches the file the framework
+// actually wrote (main.css for "none", globals.css for tailwind/bootstrap).
+async function syncMainCssImport(projectPath, ext, architecture, mainFileName) {
+  const mainPath = path.join(projectPath, "src", `main.${ext}`);
+  try {
+    let content = await fsp.readFile(mainPath, "utf8");
+    const expected =
+      architecture === "feature-based"
+        ? `./shared/styles/${mainFileName}`
+        : `./styles/${mainFileName}`;
+    const wrong =
+      architecture === "feature-based"
+        ? /import ['"]\.\/shared\/styles\/(globals|main)\.css['"]/
+        : /import ['"]\.\/styles\/(globals|main)\.css['"]/;
+    content = content.replace(wrong, `import '${expected}'`);
+    await fsp.writeFile(mainPath, content, "utf8");
+  } catch {}
 }

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) {
@@ -153,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
     );
   }
@@ -206,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
   }
@@ -332,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);
@@ -373,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

@@ -111,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) {
@@ -175,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,
     });

package/src/readme.js

@@ -80,34 +80,76 @@ function buildScripts(responses) {
     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() {
@@ -153,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/src/App.jsx

@@ -1,10 +1,13 @@
+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,10 +1,13 @@
+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

@@ -5,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 (