co-mono/packages/coding-agent/test/test-theme-colors.ts

import fs from "fs";
import { initTheme, theme } from "../src/modes/interactive/theme/theme.js";

// --- Color utilities ---

function hexToRgb(hex: string): [number, number, number] {
	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
	return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : [0, 0, 0];
}

function rgbToHex(r: number, g: number, b: number): string {
	return (
		"#" +
		[r, g, b]
			.map((x) =>
				Math.round(Math.max(0, Math.min(255, x)))
					.toString(16)
					.padStart(2, "0"),
			)
			.join("")
	);
}

function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
	r /= 255;
	g /= 255;
	b /= 255;
	const max = Math.max(r, g, b),
		min = Math.min(r, g, b);
	let h = 0,
		s = 0;
	const l = (max + min) / 2;
	if (max !== min) {
		const d = max - min;
		s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
		switch (max) {
			case r:
				h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
				break;
			case g:
				h = ((b - r) / d + 2) / 6;
				break;
			case b:
				h = ((r - g) / d + 4) / 6;
				break;
		}
	}
	return [h, s, l];
}

function hslToRgb(h: number, s: number, l: number): [number, number, number] {
	let r: number, g: number, b: number;
	if (s === 0) {
		r = g = b = l;
	} else {
		const hue2rgb = (p: number, q: number, t: number) => {
			if (t < 0) t += 1;
			if (t > 1) t -= 1;
			if (t < 1 / 6) return p + (q - p) * 6 * t;
			if (t < 1 / 2) return q;
			if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
			return p;
		};
		const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
		const p = 2 * l - q;
		r = hue2rgb(p, q, h + 1 / 3);
		g = hue2rgb(p, q, h);
		b = hue2rgb(p, q, h - 1 / 3);
	}
	return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}

function getLuminance(r: number, g: number, b: number): number {
	const lin = (c: number) => {
		c = c / 255;
		return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
	};
	return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
}

function getContrast(rgb: [number, number, number], bgLum: number): number {
	const fgLum = getLuminance(...rgb);
	const lighter = Math.max(fgLum, bgLum);
	const darker = Math.min(fgLum, bgLum);
	return (lighter + 0.05) / (darker + 0.05);
}

function adjustColorToContrast(hex: string, targetContrast: number, againstWhite: boolean): string {
	const rgb = hexToRgb(hex);
	const [h, s] = rgbToHsl(...rgb);
	const bgLum = againstWhite ? 1.0 : 0.0;

	let lo = againstWhite ? 0 : 0.5;
	let hi = againstWhite ? 0.5 : 1.0;

	for (let i = 0; i < 50; i++) {
		const mid = (lo + hi) / 2;
		const testRgb = hslToRgb(h, s, mid);
		const contrast = getContrast(testRgb, bgLum);

		if (againstWhite) {
			if (contrast < targetContrast) hi = mid;
			else lo = mid;
		} else {
			if (contrast < targetContrast) lo = mid;
			else hi = mid;
		}
	}

	const finalL = againstWhite ? lo : hi;
	return rgbToHex(...hslToRgb(h, s, finalL));
}

function fgAnsi(hex: string): string {
	const rgb = hexToRgb(hex);
	return `\x1b[38;2;${rgb[0]};${rgb[1]};${rgb[2]}m`;
}

const reset = "\x1b[0m";

// --- Commands ---

function cmdContrast(targetContrast: number): void {
	const baseColors = {
		teal: "#5f8787",
		blue: "#5f87af",
		green: "#87af87",
		yellow: "#d7af5f",
		red: "#af5f5f",
	};

	console.log(`\n=== Colors adjusted to ${targetContrast}:1 contrast ===\n`);

	console.log("For LIGHT theme (vs white):");
	for (const [name, hex] of Object.entries(baseColors)) {
		const adjusted = adjustColorToContrast(hex, targetContrast, true);
		const rgb = hexToRgb(adjusted);
		const contrast = getContrast(rgb, 1.0);
		console.log(`  ${name.padEnd(8)} ${fgAnsi(adjusted)}Sample${reset}  ${adjusted}  (${contrast.toFixed(2)}:1)`);
	}

	console.log("\nFor DARK theme (vs black):");
	for (const [name, hex] of Object.entries(baseColors)) {
		const adjusted = adjustColorToContrast(hex, targetContrast, false);
		const rgb = hexToRgb(adjusted);
		const contrast = getContrast(rgb, 0.0);
		console.log(`  ${name.padEnd(8)} ${fgAnsi(adjusted)}Sample${reset}  ${adjusted}  (${contrast.toFixed(2)}:1)`);
	}
}

function cmdTest(filePath: string): void {
	if (!fs.existsSync(filePath)) {
		console.error(`File not found: ${filePath}`);
		process.exit(1);
	}

	const data = JSON.parse(fs.readFileSync(filePath, "utf-8"));
	const vars = data.vars || data;

	console.log(`\n=== Testing ${filePath} ===\n`);

	for (const [name, hex] of Object.entries(vars as Record<string, string>)) {
		if (!hex.startsWith("#")) continue;
		const rgb = hexToRgb(hex);
		const vsWhite = getContrast(rgb, 1.0);
		const vsBlack = getContrast(rgb, 0.0);
		const passW = vsWhite >= 4.5 ? "AA" : vsWhite >= 3.0 ? "AA-lg" : "FAIL";
		const passB = vsBlack >= 4.5 ? "AA" : vsBlack >= 3.0 ? "AA-lg" : "FAIL";
		console.log(
			`${name.padEnd(14)} ${fgAnsi(hex)}Sample text${reset}  ${hex}  white: ${vsWhite.toFixed(2)}:1 ${passW.padEnd(5)}  black: ${vsBlack.toFixed(2)}:1 ${passB}`,
		);
	}
}

function cmdTheme(themeName: string): void {
	process.env.COLORTERM = "truecolor";
	initTheme(themeName);

	const parseAnsiRgb = (ansi: string): [number, number, number] | null => {
		const match = ansi.match(/38;2;(\d+);(\d+);(\d+)/);
		return match ? [parseInt(match[1], 10), parseInt(match[2], 10), parseInt(match[3], 10)] : null;
	};

	const getContrastVsWhite = (colorName: string): string => {
		const ansi = theme.getFgAnsi(colorName as Parameters<typeof theme.getFgAnsi>[0]);
		const rgb = parseAnsiRgb(ansi);
		if (!rgb) return "(default)";
		const ratio = getContrast(rgb, 1.0);
		const pass = ratio >= 4.5 ? "AA" : ratio >= 3.0 ? "AA-lg" : "FAIL";
		return `${ratio.toFixed(2)}:1 ${pass}`;
	};

	const getContrastVsBlack = (colorName: string): string => {
		const ansi = theme.getFgAnsi(colorName as Parameters<typeof theme.getFgAnsi>[0]);
		const rgb = parseAnsiRgb(ansi);
		if (!rgb) return "(default)";
		const ratio = getContrast(rgb, 0.0);
		const pass = ratio >= 4.5 ? "AA" : ratio >= 3.0 ? "AA-lg" : "FAIL";
		return `${ratio.toFixed(2)}:1 ${pass}`;
	};

	const logColor = (name: string): void => {
		const sample = theme.fg(name as Parameters<typeof theme.fg>[0], "Sample text");
		const cw = getContrastVsWhite(name);
		const cb = getContrastVsBlack(name);
		console.log(`${name.padEnd(20)} ${sample}  white: ${cw.padEnd(12)} black: ${cb}`);
	};

	console.log(`\n=== ${themeName} theme (WCAG AA = 4.5:1) ===`);

	console.log("\n--- Core UI ---");
	["accent", "border", "borderAccent", "borderMuted", "success", "error", "warning", "muted", "dim"].forEach(logColor);

	console.log("\n--- Markdown ---");
	["mdHeading", "mdLink", "mdCode", "mdCodeBlock", "mdCodeBlockBorder", "mdQuote", "mdListBullet"].forEach(logColor);

	console.log("\n--- Diff ---");
	["toolDiffAdded", "toolDiffRemoved", "toolDiffContext"].forEach(logColor);

	console.log("\n--- Thinking ---");
	["thinkingOff", "thinkingMinimal", "thinkingLow", "thinkingMedium", "thinkingHigh"].forEach(logColor);

	console.log("\n--- Backgrounds ---");
	console.log("userMessageBg:", theme.bg("userMessageBg", " Sample "));
	console.log("toolPendingBg:", theme.bg("toolPendingBg", " Sample "));
	console.log("toolSuccessBg:", theme.bg("toolSuccessBg", " Sample "));
	console.log("toolErrorBg:", theme.bg("toolErrorBg", " Sample "));
	console.log();
}

// --- Main ---

const [cmd, arg] = process.argv.slice(2);

if (cmd === "contrast") {
	cmdContrast(parseFloat(arg) || 4.5);
} else if (cmd === "test") {
	cmdTest(arg);
} else if (cmd === "light" || cmd === "dark") {
	cmdTheme(cmd);
} else {
	console.log("Usage:");
	console.log("  npx tsx test-theme-colors.ts light|dark     Test built-in theme");
	console.log("  npx tsx test-theme-colors.ts contrast 4.5   Compute colors at ratio");
	console.log("  npx tsx test-theme-colors.ts test file.json Test any JSON file");
}