@apex-stack/core 0.3.1 → 0.4.0

package/dist/{add-2SBHPLEH.js → add-Z7JSLBOT.js}

@@ -70,10 +70,14 @@ var addCommand = defineCommand({
     log(`  ${color.green("+")} Added ${color.bold(`components/${entry.name}.alpine`)}`);
     log(`
   Use it:  ${color.cyan(`<${entry.name} />`)}  ${color.gray("in any page/component.")}`);
-    log(
-      `  ${color.gray("It inherits your theme via --ax-* tokens (see")} ${color.cyan("@apex-stack/theme")}${color.gray(").")}
-`
-    );
+    const appCss = ["app.css", "styles/app.css", "src/app.css"].map((p) => join(root, p)).find(existsSync);
+    const themed = appCss ? readFileSync(appCss, "utf8").includes("@theme") : false;
+    if (!themed) {
+      log(
+        `  ${color.gray("Tip: run")} ${color.cyan("apex theme")} ${color.gray("to set up Tailwind + the theme so it styles up (apps from")} ${color.cyan("apex new")} ${color.gray("already have it).")}`
+      );
+    }
+    log("");
   }
 });
 export {

package/dist/cli.js

@@ -134,6 +134,7 @@ var COMMANDS = [
   ["start", "Run a production server build"],
   ["make", "Generate a page, component, route, store, middleware\u2026"],
   ["add", "Add a themeable component (button, card, badge\u2026)"],
+  ["theme", "Write/update your theme tokens (colors, radius, fonts)"],
   ["upgrade", "Adopt new scaffold defaults (non-destructive)"],
   ["migrate", "Apply pending database migrations"],
   ["mcp", "Inspect the MCP server \u2014 list or call tools"]
@@ -150,7 +151,8 @@ var main = defineCommand2({
     build: () => import("./build-VHS6KZBK.js").then((m) => m.buildCommand),
     start: () => import("./start-3O3E43PT.js").then((m) => m.startCommand),
     make: () => import("./make-VAYO5GWA.js").then((m) => m.makeCommand),
-    add: () => import("./add-2SBHPLEH.js").then((m) => m.addCommand),
+    add: () => import("./add-Z7JSLBOT.js").then((m) => m.addCommand),
+    theme: () => import("./theme-UUOIV44V.js").then((m) => m.themeCommand),
     upgrade: () => import("./upgrade-WC5F5FKY.js").then((m) => m.upgradeCommand),
     migrate: () => import("./migrate-X6LIHMIE.js").then((m) => m.migrateCommand),
     mcp: () => import("./mcp-CH7L4GF3.js").then((m) => m.mcpCommand)

package/dist/theme-UUOIV44V.js

@@ -0,0 +1,163 @@
+import {
+  banner,
+  color
+} from "./chunk-QIXJSQLW.js";
+
+// src/commands/theme.ts
+import { existsSync, readFileSync, writeFileSync } from "fs";
+import { join, resolve } from "path";
+
+// ../theme/dist/index.js
+var SANS = 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"';
+var defaultTheme = {
+  radius: "0.25rem",
+  fonts: {
+    body: `"Instrument Sans", ${SANS}`,
+    title: `"Montserrat", ${SANS}`
+  },
+  colors: {
+    // Light
+    surface: "#ffffff",
+    "surface-alt": "#fafafa",
+    "on-surface": "#525252",
+    "on-surface-strong": "#171717",
+    primary: "#000000",
+    "on-primary": "#f5f5f5",
+    secondary: "#262626",
+    "on-secondary": "#ffffff",
+    outline: "#d4d4d4",
+    "outline-strong": "#262626",
+    // Dark
+    "surface-dark": "#0a0a0a",
+    "surface-dark-alt": "#171717",
+    "on-surface-dark": "#d4d4d4",
+    "on-surface-dark-strong": "#ffffff",
+    "primary-dark": "#ffffff",
+    "on-primary-dark": "#000000",
+    "secondary-dark": "#d4d4d4",
+    "on-secondary-dark": "#000000",
+    "outline-dark": "#404040",
+    "outline-dark-strong": "#d4d4d4",
+    // Shared (scheme-independent status colors)
+    info: "#0ea5e9",
+    "on-info": "#ffffff",
+    success: "#22c55e",
+    "on-success": "#ffffff",
+    warning: "#f59e0b",
+    "on-warning": "#ffffff",
+    danger: "#ef4444",
+    "on-danger": "#ffffff"
+  }
+};
+function defineTheme(input = {}) {
+  return {
+    radius: input.radius ?? defaultTheme.radius,
+    fonts: { ...defaultTheme.fonts, ...input.fonts ?? {} },
+    colors: { ...defaultTheme.colors, ...input.colors ?? {} }
+  };
+}
+var darkVariant = "@custom-variant dark (&:where(.dark, .dark *));";
+function renderThemeCss(theme = defaultTheme) {
+  const lines = [
+    `  --font-body: ${theme.fonts.body};`,
+    `  --font-title: ${theme.fonts.title};`
+  ];
+  for (const [key, value] of Object.entries(theme.colors)) {
+    lines.push(`  --color-${key}: ${value};`);
+  }
+  lines.push(`  --radius-radius: ${theme.radius};`);
+  return `@theme {
+${lines.join("\n")}
+}`;
+}
+var defaultThemeCss = `${darkVariant}
+
+${renderThemeCss(defaultTheme)}`;
+
+// src/commands/theme.ts
+import { defineCommand } from "citty";
+var START = "/* apex-theme:start */";
+var END = "/* apex-theme:end */";
+function findAppCss(root) {
+  return ["app.css", "styles/app.css", "src/app.css"].map((p) => join(root, p)).find(existsSync) ?? null;
+}
+function applyBlock(css, block) {
+  const re = new RegExp(
+    `${START.replace(/[/*]/g, "\\$&")}[\\s\\S]*?${END.replace(/[/*]/g, "\\$&")}`
+  );
+  if (re.test(css)) return css.replace(re, block);
+  if (/@import\s+['"]tailwindcss['"];?/.test(css)) {
+    return css.replace(/(@import\s+['"]tailwindcss['"];?\s*)/, `$1
+${block}
+`);
+  }
+  return `${block}
+
+${css}`;
+}
+var themeCommand = defineCommand({
+  meta: {
+    name: "theme",
+    description: "Write/update the theme tokens (colors, radius, fonts) in your CSS"
+  },
+  args: {
+    root: { type: "string", description: "Project root", default: "." },
+    out: { type: "string", description: "Target stylesheet (defaults to your app.css)" },
+    primary: { type: "string", description: "Primary color (light), e.g. #4f46e5" },
+    "primary-dark": { type: "string", description: "Primary color (dark)" },
+    secondary: { type: "string", description: "Secondary color (light)" },
+    radius: { type: "string", description: "Border radius, e.g. 0.5rem" },
+    "font-body": { type: "string", description: "Body font stack" },
+    "font-title": { type: "string", description: "Title font stack" }
+  },
+  run({ args }) {
+    const root = resolve(process.cwd(), String(args.root));
+    const log = console.log;
+    process.stdout.write(banner());
+    const colors = {};
+    if (args.primary) colors.primary = String(args.primary);
+    if (args["primary-dark"]) colors["primary-dark"] = String(args["primary-dark"]);
+    if (args.secondary) colors.secondary = String(args.secondary);
+    const input = {};
+    if (Object.keys(colors).length) input.colors = colors;
+    if (args.radius) input.radius = String(args.radius);
+    if (args["font-body"] || args["font-title"]) {
+      input.fonts = {};
+      if (args["font-body"]) input.fonts.body = String(args["font-body"]);
+      if (args["font-title"]) input.fonts.title = String(args["font-title"]);
+    }
+    const customized = Object.keys(input).length > 0;
+    const block = `${START}
+${customized ? `${darkVariant}
+
+${renderThemeCss(defineTheme(input))}` : defaultThemeCss}
+${END}`;
+    const target = args.out ? resolve(root, String(args.out)) : findAppCss(root);
+    if (!target) {
+      const created = join(root, "app.css");
+      writeFileSync(created, `@import 'tailwindcss';
+@source './**/*.alpine';
+
+${block}
+`);
+      log(`  ${color.green("+")} Created ${color.bold("app.css")} with Tailwind + the theme.`);
+    } else {
+      const before = readFileSync(target, "utf8");
+      writeFileSync(target, applyBlock(before, block));
+      const rel = target.replace(`${root}/`, "");
+      log(`  ${color.green("\u2713")} Updated theme tokens in ${color.bold(rel)}`);
+    }
+    if (customized) {
+      log(
+        `  ${color.gray("Applied:")} ${Object.entries({ ...colors, radius: args.radius }).filter(([, v]) => v).map(([k, v]) => `${k}=${v}`).join("  ")}`
+      );
+    }
+    log(
+      `  ${color.gray("Every component inherits it \u2014 restart the dev server if it is running.")}
+`
+    );
+  }
+});
+export {
+  themeCommand
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apex-stack/core",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "The full-stack meta-framework for Alpine.js — CLI and runtime",
   "type": "module",
   "license": "MIT",
@@ -48,7 +48,8 @@
     "vite": "^6.0.7",
     "zod": "^4.4.3",
     "@apex-stack/kit": "0.2.0",
-    "@apex-stack/vite": "0.1.6"
+    "@apex-stack/vite": "0.1.6",
+    "@apex-stack/theme": "0.3.0"
   },
   "peerDependencies": {
     "alpinejs": "^3.14.0"

package/templates/default/app.css

@@ -0,0 +1,42 @@
+@import "tailwindcss";
+@source './**/*.alpine';
+
+/* apex-theme:start */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji";
+  --font-title: "Montserrat", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji";
+  --color-surface: #ffffff;
+  --color-surface-alt: #fafafa;
+  --color-on-surface: #525252;
+  --color-on-surface-strong: #171717;
+  --color-primary: #000000;
+  --color-on-primary: #f5f5f5;
+  --color-secondary: #262626;
+  --color-on-secondary: #ffffff;
+  --color-outline: #d4d4d4;
+  --color-outline-strong: #262626;
+  --color-surface-dark: #0a0a0a;
+  --color-surface-dark-alt: #171717;
+  --color-on-surface-dark: #d4d4d4;
+  --color-on-surface-dark-strong: #ffffff;
+  --color-primary-dark: #ffffff;
+  --color-on-primary-dark: #000000;
+  --color-secondary-dark: #d4d4d4;
+  --color-on-secondary-dark: #000000;
+  --color-outline-dark: #404040;
+  --color-outline-dark-strong: #d4d4d4;
+  --color-info: #0ea5e9;
+  --color-on-info: #ffffff;
+  --color-success: #22c55e;
+  --color-on-success: #ffffff;
+  --color-warning: #f59e0b;
+  --color-on-warning: #ffffff;
+  --color-danger: #ef4444;
+  --color-on-danger: #ffffff;
+  --radius-radius: 0.25rem;
+}
+/* apex-theme:end */

package/templates/default/package.json

@@ -17,6 +17,8 @@
     "zod": "^4.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.6.0",
     "vitest": "^3.0.0"
   }