bdsg-cli 0.1.0

package/src/commands/init.ts

@@ -0,0 +1,132 @@
+import {
+	generatePalette,
+	generateShadows,
+	generateSpacingScale,
+	generateTypographyScale,
+} from "bdsg";
+import chalk from "chalk";
+import { Command } from "commander";
+import inquirer from "inquirer";
+import ora from "ora";
+import { writeTokensToFile } from "../utils/files.js";
+
+export const initCommand = new Command("init")
+	.description("Initialize a new design system")
+	.option("-o, --output <dir>", "Output directory", "./tokens")
+	.action(async (options) => {
+		console.log(chalk.bold("\n BDSG - Design System Generator\n"));
+
+		const answers = await inquirer.prompt([
+			{
+				type: "input",
+				name: "projectName",
+				message: "Project name:",
+				default: "my-design-system",
+			},
+			{
+				type: "input",
+				name: "primaryColor",
+				message: "Primary color (hex):",
+				default: "#3B82F6",
+				validate: (input: string) => {
+					if (/^#[0-9A-Fa-f]{6}$/.test(input)) return true;
+					return "Please enter a valid hex color (e.g., #3B82F6)";
+				},
+			},
+			{
+				type: "list",
+				name: "typographyRatio",
+				message: "Typography scale ratio:",
+				choices: [
+					{ name: "Minor Second (1.067)", value: "minor-second" },
+					{ name: "Major Second (1.125)", value: "major-second" },
+					{ name: "Minor Third (1.2)", value: "minor-third" },
+					{ name: "Major Third (1.25)", value: "major-third" },
+					{ name: "Perfect Fourth (1.333)", value: "perfect-fourth" },
+					{ name: "Perfect Fifth (1.5)", value: "perfect-fifth" },
+					{ name: "Golden Ratio (1.618)", value: "golden-ratio" },
+				],
+				default: "perfect-fourth",
+			},
+			{
+				type: "list",
+				name: "spacingMethod",
+				message: "Spacing method:",
+				choices: [
+					{ name: "Fibonacci (natural progression)", value: "fibonacci" },
+					{ name: "Linear (consistent increments)", value: "linear" },
+					{ name: "T-shirt sizes (semantic)", value: "t-shirt" },
+				],
+				default: "fibonacci",
+			},
+			{
+				type: "list",
+				name: "shadowStyle",
+				message: "Shadow style:",
+				choices: [
+					{ name: "Material Design", value: "material" },
+					{ name: "Soft", value: "soft" },
+					{ name: "Hard", value: "hard" },
+				],
+				default: "material",
+			},
+			{
+				type: "list",
+				name: "outputFormat",
+				message: "Output format:",
+				choices: [
+					{ name: "CSS Variables", value: "css" },
+					{ name: "JSON Tokens", value: "json" },
+					{ name: "Tailwind v4 (@theme)", value: "tailwind-v4" },
+					{ name: "Shadcn/ui (with dark mode)", value: "shadcn" },
+				],
+				default: "css",
+			},
+		]);
+
+		const spinner = ora("Generating design tokens...").start();
+
+		try {
+			// Generate tokens using bdsg
+			const palette = generatePalette(answers.primaryColor, "primary");
+			const typography = generateTypographyScale({
+				ratio: answers.typographyRatio,
+			});
+			const spacing = generateSpacingScale({
+				method: answers.spacingMethod,
+			});
+			const shadows = generateShadows({
+				style: answers.shadowStyle,
+			});
+
+			// Write to files
+			await writeTokensToFile({
+				palette,
+				typography,
+				spacing,
+				shadows,
+				format: answers.outputFormat,
+				outputDir: options.output,
+			});
+
+			spinner.succeed(chalk.green("Design tokens generated!"));
+
+			console.log(chalk.dim("\nFiles created:"));
+			if (answers.outputFormat === "shadcn") {
+				console.log(chalk.dim(`  ${options.output}/globals.css`));
+			} else if (answers.outputFormat === "tailwind-v4") {
+				console.log(chalk.dim(`  ${options.output}/theme.css`));
+			} else {
+				const ext = answers.outputFormat === "json" ? "json" : "css";
+				console.log(chalk.dim(`  ${options.output}/colors.${ext}`));
+				console.log(chalk.dim(`  ${options.output}/typography.${ext}`));
+				console.log(chalk.dim(`  ${options.output}/spacing.${ext}`));
+				console.log(chalk.dim(`  ${options.output}/shadows.${ext}`));
+			}
+			console.log();
+		} catch (error) {
+			spinner.fail(chalk.red("Failed to generate tokens"));
+			console.error(error);
+			process.exit(1);
+		}
+	});

package/src/commands/validate.ts

@@ -0,0 +1,89 @@
+import { adjustColorForContrast, calculateContrast, meetsWCAG } from "bdsg";
+import chalk from "chalk";
+import { Command } from "commander";
+
+export const validateCommand = new Command("validate")
+	.description("Validate WCAG contrast between colors")
+	.argument("<foreground>", "Foreground color in hex format")
+	.argument("<background>", "Background color in hex format")
+	.option("-l, --level <level>", "Target WCAG level (AA, AAA)", "AA")
+	.option("-s, --size <size>", "Text size (normal, large)", "normal")
+	.action((foreground, background, options) => {
+		console.log(chalk.bold("\n Contrast Analysis\n"));
+
+		// Calculate contrast
+		const ratio = calculateContrast(foreground, background);
+
+		// Check each combination
+		const AANormal = meetsWCAG(ratio, "AA", "normal");
+		const AALarge = meetsWCAG(ratio, "AA", "large");
+		const AAANormal = meetsWCAG(ratio, "AAA", "normal");
+		const AAALarge = meetsWCAG(ratio, "AAA", "large");
+
+		// Display colors
+		console.log(chalk.dim("Colors"));
+		console.log(chalk.dim("──────────────────"));
+		console.log(`  Foreground: ${chalk.hex(foreground)(foreground)}`);
+		console.log(`  Background: ${chalk.hex(background)("████")} ${background}`);
+		console.log(`  Ratio:      ${chalk.bold(ratio.toFixed(2))}:1`);
+		console.log();
+
+		// WCAG Results
+		console.log(chalk.dim("WCAG Results"));
+		console.log(chalk.dim("──────────────────"));
+
+		const passSymbol = chalk.green("✓ Pass");
+		const failSymbol = chalk.red("✗ Fail");
+
+		console.log(
+			`  AA Normal Text:  ${AANormal ? passSymbol : failSymbol} (needs 4.5:1)`,
+		);
+		console.log(
+			`  AA Large Text:   ${AALarge ? passSymbol : failSymbol} (needs 3.0:1)`,
+		);
+		console.log(
+			`  AAA Normal Text: ${AAANormal ? passSymbol : failSymbol} (needs 7.0:1)`,
+		);
+		console.log(
+			`  AAA Large Text:  ${AAALarge ? passSymbol : failSymbol} (needs 4.5:1)`,
+		);
+		console.log();
+
+		// Suggest fix if failing target level
+		const targetLevel = options.level as "AA" | "AAA";
+		const textSize = options.size as "normal" | "large";
+		const targetMet = meetsWCAG(ratio, targetLevel, textSize);
+
+		if (!targetMet) {
+			console.log(chalk.dim("Suggestion"));
+			console.log(chalk.dim("──────────────────"));
+
+			try {
+				const adjusted = adjustColorForContrast(
+					foreground,
+					background,
+					targetLevel,
+					textSize,
+				);
+
+				if (adjusted.adjusted !== foreground) {
+					console.log(`  For ${targetLevel} ${textSize} text compliance:`);
+					console.log(
+						`  Try: ${chalk.hex(adjusted.adjusted)(adjusted.adjusted)} (ratio: ${adjusted.ratio.toFixed(2)}:1)`,
+					);
+					console.log(`  Strategy: ${adjusted.strategy}`);
+				} else {
+					console.log(chalk.yellow("  Could not find a suitable adjustment."));
+				}
+			} catch {
+				console.log(chalk.yellow("  Could not calculate adjustment."));
+			}
+			console.log();
+		} else {
+			console.log(
+				chalk.green(
+					`✓ Colors meet ${targetLevel} ${textSize} text requirements!\n`,
+				),
+			);
+		}
+	});

package/src/index.ts

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+import { Command } from "commander";
+import { generateCommand } from "./commands/generate.js";
+import { initCommand } from "./commands/init.js";
+import { validateCommand } from "./commands/validate.js";
+
+const program = new Command();
+
+program
+	.name("bdsg")
+	.description("Design system generation CLI")
+	.version("0.1.0");
+
+program.addCommand(initCommand);
+program.addCommand(generateCommand);
+program.addCommand(validateCommand);
+
+program.parse();

package/src/utils/files.ts

@@ -0,0 +1,249 @@
+import { mkdir, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import type {
+	ColorPalette,
+	ShadowScale,
+	SpacingScale,
+	TypographyScale,
+} from "bdsg";
+
+interface TokensToWrite {
+	palette: ColorPalette;
+	typography: TypographyScale;
+	spacing: SpacingScale;
+	shadows: ShadowScale;
+	format: "css" | "json" | "tailwind-v4" | "shadcn";
+	outputDir: string;
+}
+
+export async function writeTokensToFile(tokens: TokensToWrite): Promise<void> {
+	await mkdir(tokens.outputDir, { recursive: true });
+
+	if (tokens.format === "json") {
+		await writeJsonTokens(tokens);
+	} else if (tokens.format === "tailwind-v4") {
+		await writeTailwindV4Tokens(tokens);
+	} else if (tokens.format === "shadcn") {
+		await writeShadcnTokens(tokens);
+	} else {
+		await writeCssTokens(tokens);
+	}
+}
+
+async function writeCssTokens(tokens: TokensToWrite): Promise<void> {
+	// Colors CSS
+	const colorsContent = generateColorsCss(tokens.palette);
+	await writeFile(join(tokens.outputDir, "colors.css"), colorsContent);
+
+	// Typography CSS
+	await writeFile(
+		join(tokens.outputDir, "typography.css"),
+		tokens.typography.cssVariables,
+	);
+
+	// Spacing CSS
+	await writeFile(
+		join(tokens.outputDir, "spacing.css"),
+		tokens.spacing.cssVariables,
+	);
+
+	// Shadows CSS
+	await writeFile(
+		join(tokens.outputDir, "shadows.css"),
+		tokens.shadows.cssVariables,
+	);
+}
+
+async function writeJsonTokens(tokens: TokensToWrite): Promise<void> {
+	// Colors JSON
+	const colors: Record<string, string> = {};
+	for (const [shade, data] of Object.entries(tokens.palette.shades)) {
+		colors[`primary-${shade}`] = data.value;
+	}
+	await writeFile(
+		join(tokens.outputDir, "colors.json"),
+		JSON.stringify({ colors }, null, 2),
+	);
+
+	// Typography JSON
+	const typography: Record<string, unknown> = {};
+	for (const token of tokens.typography.tokens) {
+		typography[token.name] = {
+			fontSize: token.fontSize,
+			lineHeight: token.lineHeight,
+			letterSpacing: token.letterSpacing,
+		};
+	}
+	await writeFile(
+		join(tokens.outputDir, "typography.json"),
+		JSON.stringify({ typography }, null, 2),
+	);
+
+	// Spacing JSON
+	const spacing: Record<string, unknown> = {};
+	for (const token of tokens.spacing.tokens) {
+		spacing[token.name] = {
+			value: token.formatted,
+			px: token.value,
+		};
+	}
+	await writeFile(
+		join(tokens.outputDir, "spacing.json"),
+		JSON.stringify({ spacing }, null, 2),
+	);
+
+	// Shadows JSON
+	const shadows: Record<string, string> = {};
+	for (const token of tokens.shadows.tokens) {
+		shadows[token.name] = token.value;
+	}
+	await writeFile(
+		join(tokens.outputDir, "shadows.json"),
+		JSON.stringify({ shadows }, null, 2),
+	);
+}
+
+async function writeTailwindV4Tokens(tokens: TokensToWrite): Promise<void> {
+	let content = '@import "tailwindcss";\n\n@theme {\n';
+
+	// Colors
+	for (const [shade, data] of Object.entries(tokens.palette.shades)) {
+		content += `  --color-primary-${shade}: ${data.value};\n`;
+	}
+	content += "\n";
+
+	// Typography
+	for (const token of tokens.typography.tokens) {
+		const remValue = token.fontSize / 16;
+		content += `  --font-size-${token.name}: ${remValue}rem;\n`;
+	}
+	content += "\n";
+
+	// Spacing
+	for (const token of tokens.spacing.tokens) {
+		content += `  --spacing-${token.name}: ${token.formatted};\n`;
+	}
+	content += "\n";
+
+	// Shadows
+	for (const token of tokens.shadows.tokens) {
+		content += `  --shadow-${token.name}: ${token.value};\n`;
+	}
+
+	content += "}\n";
+
+	await writeFile(join(tokens.outputDir, "theme.css"), content);
+}
+
+function generateColorsCss(palette: ColorPalette): string {
+	let css = ":root {\n";
+	for (const [shade, data] of Object.entries(palette.shades)) {
+		css += `  --color-primary-${shade}: ${data.value};\n`;
+	}
+	css += "}\n";
+	return css;
+}
+
+async function writeShadcnTokens(tokens: TokensToWrite): Promise<void> {
+	const shades = tokens.palette.shades;
+
+	// Light mode tokens (using palette shades)
+	const lightTokens = {
+		background: "#ffffff",
+		foreground: shades[900].value,
+		card: "#ffffff",
+		"card-foreground": shades[900].value,
+		popover: "#ffffff",
+		"popover-foreground": shades[900].value,
+		primary: shades[500].value,
+		"primary-foreground": shades[50].value,
+		secondary: shades[100].value,
+		"secondary-foreground": shades[900].value,
+		muted: shades[100].value,
+		"muted-foreground": shades[500].value,
+		accent: shades[100].value,
+		"accent-foreground": shades[900].value,
+		destructive: "#ef4444",
+		border: shades[200].value,
+		input: shades[200].value,
+		ring: shades[500].value,
+	};
+
+	// Dark mode tokens (inverted)
+	const darkTokens = {
+		background: shades[900].value,
+		foreground: shades[50].value,
+		card: shades[800].value,
+		"card-foreground": shades[50].value,
+		popover: shades[800].value,
+		"popover-foreground": shades[50].value,
+		primary: shades[400].value,
+		"primary-foreground": shades[900].value,
+		secondary: shades[700].value,
+		"secondary-foreground": shades[50].value,
+		muted: shades[700].value,
+		"muted-foreground": shades[400].value,
+		accent: shades[700].value,
+		"accent-foreground": shades[50].value,
+		destructive: "#dc2626",
+		border: shades[700].value,
+		input: shades[700].value,
+		ring: shades[400].value,
+	};
+
+	let content = '@import "tailwindcss";\n\n';
+
+	// @theme block for Tailwind v4 mapping
+	content += "@custom-variant dark (&:is(.dark *));\n\n";
+	content += "@theme inline {\n";
+	content += "  --color-background: var(--background);\n";
+	content += "  --color-foreground: var(--foreground);\n";
+	content += "  --color-card: var(--card);\n";
+	content += "  --color-card-foreground: var(--card-foreground);\n";
+	content += "  --color-popover: var(--popover);\n";
+	content += "  --color-popover-foreground: var(--popover-foreground);\n";
+	content += "  --color-primary: var(--primary);\n";
+	content += "  --color-primary-foreground: var(--primary-foreground);\n";
+	content += "  --color-secondary: var(--secondary);\n";
+	content += "  --color-secondary-foreground: var(--secondary-foreground);\n";
+	content += "  --color-muted: var(--muted);\n";
+	content += "  --color-muted-foreground: var(--muted-foreground);\n";
+	content += "  --color-accent: var(--accent);\n";
+	content += "  --color-accent-foreground: var(--accent-foreground);\n";
+	content += "  --color-destructive: var(--destructive);\n";
+	content += "  --color-border: var(--border);\n";
+	content += "  --color-input: var(--input);\n";
+	content += "  --color-ring: var(--ring);\n";
+	content += "  --radius-sm: calc(var(--radius) - 4px);\n";
+	content += "  --radius-md: calc(var(--radius) - 2px);\n";
+	content += "  --radius-lg: var(--radius);\n";
+	content += "  --radius-xl: calc(var(--radius) + 4px);\n";
+	content += "}\n\n";
+
+	// :root with light mode tokens
+	content += ":root {\n";
+	content += "  --radius: 0.625rem;\n";
+	for (const [name, value] of Object.entries(lightTokens)) {
+		content += `  --${name}: ${value};\n`;
+	}
+	content += "}\n\n";
+
+	// .dark with dark mode tokens
+	content += ".dark {\n";
+	for (const [name, value] of Object.entries(darkTokens)) {
+		content += `  --${name}: ${value};\n`;
+	}
+	content += "}\n\n";
+
+	// Base layer
+	content += "@layer base {\n";
+	content += "  * {\n";
+	content += "    @apply border-border outline-ring/50;\n";
+	content += "  }\n";
+	content += "  body {\n";
+	content += "    @apply bg-background text-foreground;\n";
+	content += "  }\n";
+	content += "}\n";
+
+	await writeFile(join(tokens.outputDir, "globals.css"), content);
+}

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+	"extends": "@bdsg/config/tsconfig.base.json",
+	"compilerOptions": {
+		"declaration": true,
+		"declarationMap": true,
+		"sourceMap": true,
+		"outDir": "dist",
+		"composite": true,
+		"rootDir": "src"
+	},
+	"include": ["src"]
+}