bearnie 0.2.0 → 0.3.0

package/README.md

@@ -63,7 +63,7 @@ This will:
 - Install `clsx`, `tailwind-merge`, and `tailwindcss` dependencies
 - Add the `@/*` path alias to `tsconfig.json`
 - Wire `@tailwindcss/vite` into your Astro config (simple configs only — you get a hint otherwise)
-- Install the theme variables to `src/styles/bearnie.css`
+- Ask for a base color and an accent color (see Themes below) and install the result to `src/styles/bearnie.css`
 
 Projects created with `create-bearnie` already include `bearnie.json` and can skip init.
 
@@ -162,6 +162,23 @@ Any new npm dependencies the updated components need are installed automatically
 - `-y, --yes` - Skip confirmation prompt
 - `--cwd <path>` - Set the working directory
 
+## Themes
+
+Themes combine a **base color** (the grays used for backgrounds, text, and borders) with an **accent color** (buttons, focus rings, active states), both from Tailwind's official palette:
+
+- **Bases:** `neutral` (default), `slate`, `gray`, `zinc`, `stone`, `mauve`, `olive`, `mist`, `taupe`
+- **Accents:** neutral default, `red`, `rose`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`
+
+Every combination is a registry entry: `styles-blue` (neutral base, blue accent), `styles-slate` (slate base, neutral accent), `styles-slate-blue`, and so on. They all install the same `bearnie.css` file, so every component works with every theme.
+
+`init` and `create-bearnie` ask for base and accent. Switch later with:
+
+```bash
+npx bearnie add styles-slate-blue --overwrite
+```
+
+Switching records the theme in `bearnie.json`, so `diff` and `update` compare your CSS against the right palette.
+
 ## Package Managers
 
 The CLI detects your package manager from the lockfile (`package-lock.json`, `pnpm-lock.yaml`, `yarn.lock`, `bun.lock`) and uses it for all dependency installs. No configuration needed.

package/dist/index.js

@@ -23,8 +23,20 @@ var DEFAULT_CONFIG = {
   utilsDir: "src/utils",
   stylesDir: "src/styles",
   tailwindConfig: "tailwind.config.mjs",
-  typescript: true
+  typescript: true,
+  theme: "default"
 };
+function themeEntryName(theme) {
+  return theme === "default" ? "styles" : `styles-${theme}`;
+}
+function composeThemeName(base, accent) {
+  if (base === "neutral") return accent;
+  if (accent === "default") return base;
+  return `${base}-${accent}`;
+}
+function isThemeEntry(name) {
+  return name === "styles" || name.startsWith("styles-");
+}
 var CONFIG_FILE = "bearnie.json";
 async function getProjectConfig(cwd) {
   const configPath = path.join(cwd, CONFIG_FILE);
@@ -377,6 +389,14 @@ async function init(options) {
     print.newline();
     console.log(`  ${chalk2.bold("Where should things go?")}`);
     print.newline();
+    let themeBases = ["neutral"];
+    let themeAccents = ["default"];
+    try {
+      const index = await getRegistryIndex();
+      if (index.themeBases?.length) themeBases = index.themeBases;
+      if (index.themeAccents?.length) themeAccents = index.themeAccents;
+    } catch {
+    }
     const responses = await prompts([
       {
         type: "text",
@@ -389,11 +409,37 @@ async function init(options) {
         name: "utilsDir",
         message: "Utilities directory",
         initial: DEFAULT_CONFIG.utilsDir
-      }
+      },
+      ...themeBases.length > 1 ? [
+        {
+          type: "select",
+          name: "themeBase",
+          message: "Base color (grays and surfaces)",
+          choices: themeBases.map((name) => ({
+            title: name,
+            value: name
+          })),
+          initial: 0
+        }
+      ] : [],
+      ...themeAccents.length > 1 ? [
+        {
+          type: "select",
+          name: "themeAccent",
+          message: "Accent color (buttons, focus rings)",
+          choices: themeAccents.map((name) => ({
+            title: name === "default" ? "default (neutral)" : name,
+            value: name
+          })),
+          initial: 0
+        }
+      ] : []
     ]);
+    const { themeBase, themeAccent, ...dirs } = responses;
     config = {
       ...config,
-      ...responses
+      ...dirs,
+      theme: composeThemeName(themeBase ?? "neutral", themeAccent ?? "default")
     };
   }
   const spinner = ora({
@@ -469,7 +515,7 @@ export function cn(...inputs: ClassValue[]) {
     );
   }
   try {
-    const stylesEntry = await getComponent("styles");
+    const stylesEntry = await getComponent(themeEntryName(config.theme));
     let stylesWritten = false;
     for (const file of stylesEntry.files) {
       const stylesPath = path4.join(cwd, config.stylesDir, file.name);
@@ -480,12 +526,17 @@ export function cn(...inputs: ClassValue[]) {
       }
     }
     if (stylesWritten) {
+      const themeLabel = config.theme === "default" ? "" : ` (${config.theme} theme)`;
       print.step(
-        `${brand.success("\u2713")} Added theme variables to ${chalk2.cyan(`${config.stylesDir}/bearnie.css`)}`
+        `${brand.success("\u2713")} Added theme variables to ${chalk2.cyan(`${config.stylesDir}/bearnie.css`)}${themeLabel}`
       );
       manualSteps.push(
         `Import the styles in your global CSS: ${chalk2.cyan(`@import "./bearnie.css";`)} (after ${chalk2.cyan(`@import "tailwindcss";`)})`
       );
+    } else if (config.theme !== "default") {
+      manualSteps.push(
+        `bearnie.css already exists \u2014 switch to the ${config.theme} theme with ${chalk2.cyan(`npx bearnie add ${themeEntryName(config.theme)} --overwrite`)}`
+      );
     }
   } catch {
     manualSteps.push(`Add theme variables: ${chalk2.cyan("npx bearnie add styles")}`);
@@ -513,6 +564,7 @@ async function add(components, options) {
   console.log(`  ${messages.addStart()}`);
   print.newline();
   let config = await getProjectConfig(cwd);
+  const hadConfig = config !== null;
   if (!config) {
     print.warning(
       `Project not initialized. Run ${chalk3.cyan("npx bearnie init")} first.`
@@ -566,8 +618,11 @@ async function add(components, options) {
     }
     selectedComponents = selected;
   } else {
-    const availableNames = registryIndex.components.map((c) => c.name);
-    const invalid = components.filter((c) => !availableNames.includes(c));
+    const availableNames = new Set(registryIndex.components.map((c) => c.name));
+    for (const theme of registryIndex.themes ?? []) {
+      availableNames.add(theme === "default" ? "styles" : `styles-${theme}`);
+    }
+    const invalid = components.filter((c) => !availableNames.has(c));
     if (invalid.length > 0) {
       print.error(messages.unknownComponent(invalid));
       print.hint(`Run ${chalk3.cyan("npx bearnie list")} to see what's available.`);
@@ -672,6 +727,19 @@ async function add(components, options) {
       print.hint(`${error}`);
     }
   }
+  if (hadConfig) {
+    const themeInstalled = selectedComponents.find(
+      (name) => isThemeEntry(name)
+    );
+    if (themeInstalled) {
+      const theme = themeInstalled === "styles" ? "default" : themeInstalled.replace(/^styles-/, "");
+      if (config.theme !== theme) {
+        config = { ...config, theme };
+        await saveProjectConfig(cwd, config);
+        print.step(`${brand.success("\u2713")} Theme set to ${chalk3.cyan(theme)} in bearnie.json`);
+      }
+    }
+  }
   const allDeps = [...npmDeps];
   const allDevDeps = [...npmDevDeps];
   if (allDeps.length > 0 || allDevDeps.length > 0) {
@@ -813,11 +881,14 @@ import { structuredPatch } from "diff";
 import fs6 from "fs-extra";
 async function getAllRegistryNames() {
   const index = await getRegistryIndex();
-  const names = index.components.map((c) => c.name);
+  const names = new Set(index.components.map((c) => c.name));
   for (const utility of index.utilities ?? []) {
-    names.push(utility.name);
+    names.add(utility.name);
+  }
+  for (const theme of index.themes ?? []) {
+    names.add(themeEntryName(theme));
   }
-  return names;
+  return [...names];
 }
 async function getEntryState(cwd, config, name) {
   const entry = await getComponent(name);
@@ -856,7 +927,8 @@ async function getInstalledEntries(cwd, config, names) {
       throw new Error(`Unknown components: ${unknown.join(", ")}`);
     }
   }
-  const targets = names?.length ? names : allNames;
+  const activeTheme = themeEntryName(config.theme ?? "default");
+  const targets = names?.length ? names : allNames.filter((name) => !isThemeEntry(name) || name === activeTheme);
   const installed = [];
   for (const name of targets) {
     const state = await getEntryState(cwd, config, name);

package/dist/utils/config.d.ts

@@ -4,8 +4,20 @@ export interface ProjectConfig {
     stylesDir: string;
     tailwindConfig: string;
     typescript: boolean;
+    /** Which color theme is installed ("default", "amber", ...). */
+    theme: string;
 }
 export declare const DEFAULT_CONFIG: ProjectConfig;
+/** Registry entry name for a theme: "default" -> styles, "amber" -> styles-amber. */
+export declare function themeEntryName(theme: string): string;
+/**
+ * Theme name from a base (gray scale) + accent (primary color) pair:
+ * neutral+default -> "default", neutral+blue -> "blue",
+ * slate+default -> "slate", slate+blue -> "slate-blue".
+ */
+export declare function composeThemeName(base: string, accent: string): string;
+/** True for the styles/styles-* entries, which all install the same CSS file. */
+export declare function isThemeEntry(name: string): boolean;
 export declare const CONFIG_FILE = "bearnie.json";
 export declare function getProjectConfig(cwd: string): Promise<ProjectConfig | null>;
 export declare function saveProjectConfig(cwd: string, config: ProjectConfig): Promise<void>;

package/dist/utils/installed.d.ts

@@ -17,7 +17,7 @@ export interface InstalledEntry {
     files: FileState[];
     hasChanges: boolean;
 }
-/** Every name in the registry: components, utilities, styles, barrel. */
+/** Every name in the registry: components, utilities, styles, themes, barrel. */
 export declare function getAllRegistryNames(): Promise<string[]>;
 /**
  * Compares one registry entry against the project. Returns null when the

package/dist/utils/registry.d.ts

@@ -28,6 +28,9 @@ export interface RegistryIndex {
         name: string;
         description: string;
     }[];
+    themes?: string[];
+    themeBases?: string[];
+    themeAccents?: string[];
 }
 export declare function getRegistryIndex(): Promise<RegistryIndex>;
 export declare function getComponent(name: string): Promise<RegistryComponent>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bearnie",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "CLI for installing Bearnie UI components",
   "type": "module",
   "license": "MIT",