@chemx/starter-kit 26.9.12-118 → 26.9.12-272

package/cli/audit/reporter-banner.js

@@ -1,5 +1,6 @@
 import { resolveGradeColor } from './reporter-utils.js';
 import { getAsciiGradeLines } from './reporter-ascii.js';
+import { getChemicalXGradientColor, ANSI } from '../theme.js';
 
 const BANNER_ART = [
   ' ██████╗██╗  ██╗███████╗███╗   ███╗██╗ ██████╗ █████╗ ██╗         ██╗  ██╗',
@@ -18,7 +19,7 @@ export const getChemicalXAsciiBanner = (gradeOrReport = null) => {
     : gradeOrReport;
 
   const lines = [];
-  lines.push('                     \x1b[1m\x1b[37mThe Secret Sauce to \x1b[38;2;98;201;255mVibe Coding\x1b[0m');
+  lines.push(`                     ${ANSI.BOLD}${ANSI.GOLD}The Secret Sauce to Vibe Coding!${ANSI.RESET}`);
 
   const gColor = grade ? resolveGradeColor(grade) : '';
   const gradeLines = grade ? getAsciiGradeLines(grade, gColor, true) : [];
@@ -35,21 +36,8 @@ export const getChemicalXAsciiBanner = (gradeOrReport = null) => {
         continue;
       }
       const t = i / (MAX_BANNER_LEN - 1);
-      let r;
-      let g;
-      let b;
-      if (t < 0.5) {
-        const factor = t * 2;
-        r = Math.round(244 * (1 - factor) + 192 * factor);
-        g = Math.round(114 * (1 - factor) + 132 * factor);
-        b = Math.round(182 * (1 - factor) + 252 * factor);
-      } else {
-        const factor = (t - 0.5) * 2;
-        r = Math.round(192 * (1 - factor) + 129 * factor);
-        g = Math.round(132 * (1 - factor) + 140 * factor);
-        b = Math.round(252 * (1 - factor) + 248 * factor);
-      }
-      out += `\x1b[38;2;${r};${g};${b}m\x1b[1m${ch}\x1b[0m`;
+      const { ansi } = getChemicalXGradientColor(t);
+      out += `${ansi}${ANSI.BOLD}${ch}${ANSI.RESET}`;
     }
 
     if (isSideBySide && gradeLines.length > lineIdx) {

package/cli/audit/reporter-utils.js

@@ -1,4 +1,16 @@
-export const CYAN = '\x1b[38;2;98;201;255m';
+export {
+  CHEMX_COLORS,
+  CHEMX_RGB,
+  getChemicalXGradientColor,
+  formatChemicalXGradient
+} from '../theme.js';
+
+export const CYAN = '\x1b[38;2;56;189;248m';
+export const PINK = '\x1b[38;2;244;63;133m';
+export const PURPLE = '\x1b[38;2;168;85;247m';
+export const MINT = '\x1b[38;2;45;212;191m';
+export const LIME = '\x1b[38;2;163;230;53m';
+export const GOLD = '\x1b[38;2;251;191;36m';
 export const GREEN = '\x1b[32m';
 export const YELLOW = '\x1b[33m';
 export const RED = '\x1b[31m';

package/cli/badge.js

@@ -53,7 +53,7 @@ export const generateHtmlBadgeSnippet = (label, grade, discussionUrl = null) =>
   const targetHref = discussionUrl || 'https://chemicalx.xophz.com';
   const targetTitle = discussionUrl ? 'Verified Chemical X Audit Report on GitHub Discussions' : 'Verified by Chemical X Protocol';
 
-  return `<a href="${targetHref}" target="_blank" rel="noopener noreferrer" style="display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:9999px;font-family:monospace;font-size:11px;text-decoration:none;border:1px solid rgba(255,255,255,0.15);background:rgba(15,23,42,0.65);backdrop-filter:blur(8px);color:#e2e8f0;transition:all 0.2s ease;" title="${targetTitle}">
+  return `<a href="${targetHref}" target="_blank" rel="noopener noreferrer" style="display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:9999px;font-family:monospace;font-size:11px;text-decoration:none;border:1px solid rgba(56,189,248,0.35);background:rgba(9,13,22,0.85);backdrop-filter:blur(8px);color:#e2e8f0;transition:all 0.2s ease;" title="${targetTitle}">
   <span style="width:8px;height:8px;border-radius:50%;background:#a3e635;box-shadow:0 0 6px rgba(163,230,53,0.6);"></span>
   <span>${label}</span>
   <span style="padding:2px 7px;border-radius:9999px;font-weight:bold;font-size:10px;background:rgba(163,230,53,0.15);color:#a3e635;border:1px solid rgba(163,230,53,0.3);">${grade}</span>
@@ -155,7 +155,14 @@ export default ChemicalXBadge;
 export const generateSvgBadgeSnippet = (label, grade) => {
   const width = Math.max(280, label.length * 8 + 60);
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="28" viewBox="0 0 ${width} 28" fill="none">
-  <rect width="${width}" height="28" rx="14" fill="#090d16" stroke="#26354a" stroke-width="1"/>
+  <defs>
+    <linearGradient id="chemx-comic" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#f43f85"/>
+      <stop offset="50%" stop-color="#38bdf8"/>
+      <stop offset="100%" stop-color="#a3e635"/>
+    </linearGradient>
+  </defs>
+  <rect width="${width}" height="28" rx="14" fill="#090d16" stroke="url(#chemx-comic)" stroke-width="1.2"/>
   <circle cx="16" cy="14" r="4" fill="#a3e635"/>
   <text x="28" y="17" fill="#cbd5e1" font-family="monospace" font-size="11" font-weight="500">${label}</text>
   <rect x="${width - 44}" y="6" width="34" height="16" rx="8" fill="#a3e635" fill-opacity="0.18" stroke="#a3e635" stroke-opacity="0.4"/>

package/cli/index.js

@@ -109,7 +109,13 @@ export const runAudit = async (customDir = null, isCli = false) => {
       process.exit(0);
     }
 
-    const isInteractive = Boolean(process.stdin.isTTY && process.stdout.isTTY);
+    const isNonInteractive =
+      rawArgs.includes('--non-interactive') ||
+      rawArgs.includes('--no-interactive') ||
+      rawArgs.includes('--ci') ||
+      Boolean(process.env.CI) ||
+      Boolean(process.env.GIT_DIR);
+    const isInteractive = !isNonInteractive && Boolean(process.stdin.isTTY && process.stdout.isTTY);
 
     if (isInteractive && !isUnroll) {
       const handleReAudit = () => {

package/cli/installer-templates.js

@@ -44,7 +44,7 @@ fi
 
 if [ -n "\$AUDIT_BIN" ]; then
   printf "\\033[38;2;98;201;255m[Chemical X] Verifying architectural health (Min Grade: %s, Min Score: %s)...\\033[0m\\n" "\$MIN_GRADE" "\$MIN_SCORE"
-  if ! \$AUDIT_BIN audit --min-grade="\$MIN_GRADE" --min-score="\$MIN_SCORE" --prompt-on-fail; then
+  if ! \$AUDIT_BIN audit --min-grade="\$MIN_GRADE" --min-score="\$MIN_SCORE" --non-interactive < /dev/null; then
     printf "\\n\\033[1m\\033[31m[Chemical X] Commit Blocked: Codebase falls below required Grade %s (Score %s)\\033[0m\\n" "\$MIN_GRADE" "\$MIN_SCORE"
     printf "\\033[36m💡 Tip: Want crystalline drop-in templates? Run 'npm create chemx' or sponsor at https://github.com/sponsors/Chemical-X-Protocol\\033[0m\\n\\n"
     exit 1

package/cli/terminal.js

@@ -1,5 +1,6 @@
 import readline from "node:readline";
 import { spawnSync } from "node:child_process";
+import { formatChemicalXGradient, ANSI } from "./theme.js";
 
 export const openBrowser = (url) => {
   const platform = process.platform;
@@ -70,18 +71,18 @@ export const renderBanner = (title = "Chemical X Protocol: Molecular Architectur
         "--border-foreground=45",
         "--foreground=81",
         "--bold",
-        `  ${title}\n  Zero-Context-Rot Scaffolding & Engineering Directives`
+        `  ${title}\n  The Secret Sauce to Vibe Coding | Zero-Context-Rot Directives`
       ],
       { stdio: "inherit" }
     );
   } else {
     process.stdout.write(
-      "\n\x1b[38;2;98;201;255m=====================================================\x1b[0m\n"
+      `\n${formatChemicalXGradient("=====================================================")}\n`
     );
-    process.stdout.write(`\x1b[1m\x1b[38;2;98;201;255m  ${title}\x1b[0m\n`);
-    process.stdout.write("  Zero-Context-Rot Scaffolding & Engineering Directives\n");
+    process.stdout.write(`  ${formatChemicalXGradient(title)}\n`);
+    process.stdout.write(`  ${ANSI.BOLD}${ANSI.GOLD}The Secret Sauce to Vibe Coding!${ANSI.RESET} ${ANSI.DIM}| Zero-Context-Rot Directives${ANSI.RESET}\n`);
     process.stdout.write(
-      "\x1b[38;2;98;201;255m=====================================================\x1b[0m\n\n"
+      `${formatChemicalXGradient("=====================================================")}\n\n`
     );
   }
 };

package/cli/theme.d.ts

@@ -0,0 +1,41 @@
+export interface ChemxGradientColor {
+  readonly r: number;
+  readonly g: number;
+  readonly b: number;
+  readonly ansi: string;
+}
+
+export declare const CHEMX_COLORS: {
+  readonly blossomPink: string;
+  readonly powerPurple: string;
+  readonly bubblesCyan: string;
+  readonly chemicalMint: string;
+  readonly buttercupLime: string;
+  readonly vibeGold: string;
+  readonly goldenRibbon: string;
+  readonly midnightViolet: string;
+  readonly obsidian: string;
+  readonly slateBorder: string;
+};
+
+export declare const CHEMX_RGB: {
+  readonly blossomPink: readonly [number, number, number];
+  readonly bubblesCyan: readonly [number, number, number];
+  readonly buttercupLime: readonly [number, number, number];
+  readonly vibeGold: readonly [number, number, number];
+};
+
+export declare const ANSI: {
+  readonly PINK: string;
+  readonly PURPLE: string;
+  readonly CYAN: string;
+  readonly MINT: string;
+  readonly LIME: string;
+  readonly GOLD: string;
+  readonly BOLD: string;
+  readonly DIM: string;
+  readonly RESET: string;
+};
+
+export declare function getChemicalXGradientColor(t: number): ChemxGradientColor;
+export declare function formatChemicalXGradient(text: string): string;

package/cli/theme.js

@@ -0,0 +1,84 @@
+/**
+ * Chemical X Protocol: Official Comic Book Color Palette
+ * Codified from Hall of the Gods Chemical X Vol. 1 Comic Book Edition
+ *
+ * Blossom Pink (#f43f85) -> Bubbles Cyan (#38bdf8) -> Buttercup Lime (#a3e635)
+ * Golden Ribbon: (#fbbf24) | Midnight Violet Armor: (#181126)
+ */
+
+export const CHEMX_COLORS = Object.freeze({
+  blossomPink: '#f43f85',
+  powerPurple: '#a855f7',
+  bubblesCyan: '#38bdf8',
+  chemicalMint: '#2dd4bf',
+  buttercupLime: '#a3e635',
+  vibeGold: '#fbbf24',
+  goldenRibbon: '#f59e0b',
+  midnightViolet: '#181126',
+  obsidian: '#090d16',
+  slateBorder: '#26354a'
+});
+
+export const CHEMX_RGB = Object.freeze({
+  blossomPink: [244, 63, 133],
+  bubblesCyan: [56, 189, 248],
+  buttercupLime: [163, 230, 53],
+  vibeGold: [251, 191, 36]
+});
+
+export const ANSI = Object.freeze({
+  PINK: '\x1b[38;2;244;63;133m',
+  PURPLE: '\x1b[38;2;168;85;247m',
+  CYAN: '\x1b[38;2;56;189;248m',
+  MINT: '\x1b[38;2;45;212;191m',
+  LIME: '\x1b[38;2;163;230;53m',
+  GOLD: '\x1b[38;2;251;191;36m',
+  BOLD: '\x1b[1m',
+  DIM: '\x1b[2m',
+  RESET: '\x1b[0m'
+});
+
+export const getChemicalXGradientColor = (t) => {
+  const clamped = Math.max(0, Math.min(1, t));
+  let r = 0;
+  let g = 0;
+  let b = 0;
+
+  if (clamped < 0.45) {
+    const factor = clamped / 0.45;
+    r = Math.round(244 * (1 - factor) + 56 * factor);
+    g = Math.round(63 * (1 - factor) + 189 * factor);
+    b = Math.round(133 * (1 - factor) + 248 * factor);
+  } else {
+    const factor = (clamped - 0.45) / 0.55;
+    r = Math.round(56 * (1 - factor) + 163 * factor);
+    g = Math.round(189 * (1 - factor) + 230 * factor);
+    b = Math.round(248 * (1 - factor) + 53 * factor);
+  }
+
+  return {
+    r,
+    g,
+    b,
+    ansi: `\x1b[38;2;${r};${g};${b}m`
+  };
+};
+
+export const formatChemicalXGradient = (text) => {
+  if (!text) return '';
+  const len = text.length;
+  if (len === 1) return `${ANSI.PINK}${ANSI.BOLD}${text}${ANSI.RESET}`;
+
+  let out = '';
+  for (let i = 0; i < len; i++) {
+    const ch = text[i];
+    if (ch === ' ') {
+      out += ' ';
+      continue;
+    }
+    const t = i / (len - 1);
+    const { ansi } = getChemicalXGradientColor(t);
+    out += `${ansi}${ANSI.BOLD}${ch}${ANSI.RESET}`;
+  }
+  return out;
+};

package/docs/CHANGELOG.md

@@ -19,6 +19,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ## [2026-09-11]
 
 ### Added
+- Standardized the Chemical X color palette across the starter kit to match the official Hall of the Gods Chemical X Vol. 1 Comic Book cover:
+  - Created centralized palette module (`cli/theme.js`, `cli/theme.d.ts`) codifying Blossom Pink (`#f43f85`), Power Purple (`#a855f7`), Bubbles Cyan (`#38bdf8`), Chemical Mint (`#2dd4bf`), Buttercup Lime (`#a3e635`), Vibe Gold (`#fbbf24`), Golden Ribbon (`#f59e0b`), and Midnight Violet armor (`#181126`).
+  - Updated 24-bit TrueColor ASCII art banner (`getChemicalXAsciiBanner` in `cli/audit/reporter-banner.js`) with 3-phase gradient (Blossom Pink -> Bubbles Cyan -> Buttercup Lime) and golden ribbon motto styling (`The Secret Sauce to Vibe Coding!`).
+  - Upgraded terminal banner renderer (`renderBanner` in `cli/terminal.js`) with TrueColor gradient border and title formatting.
+  - Enhanced Verified Chemical X Footer Badge SVG asset generator (`generateSvgBadgeSnippet` in `cli/badge.js`) with embedded `<linearGradient id="chemx-comic">` border and updated HTML snippet.
+  - Aligned `m-chemx-badge` blueprint capsule styles (`_m-chemx-badge.scss`) with the official comic palette for hover glow and grade badges.
 - Expanded AST static analysis engine with Pillars 8 to 11 (`cli/audit/extended-visitors.js`): added automated rules and visitors for Accessibility & Semantic Integrity (`A11Y_CLICKABLE_NON_SEMANTIC`, `A11Y_IMAGE_MISSING_ALT`), Security & Content Safety (`SECURITY_RAW_HTML_INJECTION`, `SECURITY_HARDCODED_SECRET`), Testing Discipline (`TEST_FAKE_GREEN`, `TEST_MISSING_COLOCATED`), and Naming Conventions (`NAMING_BARE_BOOLEAN`, `NAMING_HANDLER_PREFIX`).
 - Implemented nested bullet tree path-chain formatter (`formatGroupedPromptViolations` in `cli/audit/prompts.js` and `renderGroupedViolationsTerminal` in `cli/audit/reporter-grouping.js`), clustering violations by rule and rendering folder hierarchy steps as indented bullet chains with `📁` folder emojis and ANSI severity colors (`📁 app/` -> `📁 components/` -> `📁 molecules/` -> leaf files with line hits) to eliminate boilerplate repetitions and slash AI prompt token consumption by up to 85%.
 - Consolidated monolith refactoring action directives across `buildHotspotsPrompt`, `buildGradeFPrompt`, `buildGradeDPrompt`, and `buildGradeCPrompt`, stating action requirements once per section.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chemx/starter-kit",
-  "version": "26.9.12-118",
+  "version": "26.9.12-272",
   "description": "Chemical X Protocol: Private drop-in architecture starter kit and capsule generator",
   "type": "module",
   "bin": {