@cloudflare/kumo 1.0.0

package/scripts/theme-generator/generate-css.ts

@@ -0,0 +1,250 @@
+/**
+ * CSS Generator for Kumo Themes
+ *
+ * Generates theme CSS files from the centralized config.
+ * Outputs:
+ * - theme-kumo.css: Base theme with all tokens
+ * - theme-fedramp.css: Override layer for fedramp theme
+ * - (future themes as needed)
+ */
+
+import { THEME_CONFIG, AVAILABLE_THEMES } from "./config.js";
+import type { ThemeConfig, GeneratorOptions, TokenRenameMap } from "./types.js";
+
+/**
+ * Header comment for generated CSS files
+ */
+const GENERATED_FILE_HEADER = `/**
+ * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+ *
+ * This file is generated by the theme generator.
+ * To modify tokens, edit: scripts/theme-generator/config.ts
+ * Then run: pnpm codegen:themes
+ */
+
+`;
+
+/**
+ * Generate a light-dark() CSS function call
+ */
+function lightDark(light: string, dark: string): string {
+  return `light-dark(\n    ${light},\n    ${dark}\n  )`;
+}
+
+/**
+ * Generate the base kumo theme CSS
+ * This contains all tokens with their kumo theme values
+ */
+export function generateKumoThemeCSS(
+  config: ThemeConfig,
+  useNewNames = false,
+): string {
+  const lines: string[] = [GENERATED_FILE_HEADER];
+
+  // Text color tokens
+  lines.push("@theme {");
+
+  for (const [tokenName, def] of Object.entries(config.text)) {
+    const name = useNewNames ? def.newName : tokenName;
+    const kumoColors = def.theme.kumo;
+
+    lines.push(
+      `  --text-color-${name}: ${lightDark(kumoColors.light, kumoColors.dark)};`,
+    );
+    lines.push("");
+  }
+
+  lines.push("}");
+  lines.push("");
+
+  // Color tokens (bg, border, ring, etc.)
+  lines.push("@theme {");
+
+  for (const [tokenName, def] of Object.entries(config.color)) {
+    const name = useNewNames ? def.newName : tokenName;
+    const kumoColors = def.theme.kumo;
+
+    lines.push(
+      `  --color-${name}: ${lightDark(kumoColors.light, kumoColors.dark)};`,
+    );
+    lines.push("");
+  }
+
+  lines.push("}");
+
+  // Typography tokens (font sizes and line heights)
+  if (config.typography && Object.keys(config.typography).length > 0) {
+    lines.push("");
+    lines.push("@theme {");
+    lines.push("  /* Typography - text sizes and line heights */");
+
+    for (const [tokenName, def] of Object.entries(config.typography)) {
+      const name = useNewNames && def.newName ? def.newName : tokenName;
+      const value = def.theme.kumo;
+
+      lines.push(`  --text-${name}: ${value};`);
+    }
+
+    lines.push("}");
+  }
+
+  return lines.join("\n");
+}
+
+/**
+ * Generate a theme override CSS file
+ * Only includes tokens that differ from the base kumo theme
+ */
+export function generateThemeOverrideCSS(
+  config: ThemeConfig,
+  themeName: string,
+  useNewNames = false,
+): string {
+  if (themeName === "kumo") {
+    throw new Error("Use generateKumoThemeCSS for the base kumo theme");
+  }
+
+  const overrides: string[] = [];
+
+  // Collect text token overrides
+  for (const [tokenName, def] of Object.entries(config.text)) {
+    const themeColors = def.theme[themeName];
+    if (themeColors) {
+      const name = useNewNames ? def.newName : tokenName;
+      overrides.push(
+        `    --text-color-${name}: ${lightDark(themeColors.light, themeColors.dark)};`,
+      );
+    }
+  }
+
+  // Collect color token overrides
+  for (const [tokenName, def] of Object.entries(config.color)) {
+    const themeColors = def.theme[themeName];
+    if (themeColors) {
+      const name = useNewNames ? def.newName : tokenName;
+      overrides.push(
+        `    --color-${name}: ${lightDark(themeColors.light, themeColors.dark)};`,
+      );
+    }
+  }
+
+  // Collect typography token overrides
+  if (config.typography) {
+    for (const [tokenName, def] of Object.entries(config.typography)) {
+      const themeValue = def.theme[themeName];
+      if (themeValue) {
+        const name = useNewNames && def.newName ? def.newName : tokenName;
+        overrides.push(`    --text-${name}: ${themeValue};`);
+      }
+    }
+  }
+
+  if (overrides.length === 0) {
+    return `${GENERATED_FILE_HEADER}/* No overrides for ${themeName} theme */\n`;
+  }
+
+  return `${GENERATED_FILE_HEADER}@layer base {
+  [data-theme="${themeName}"] {
+${overrides.join("\n")}
+  }
+}
+`;
+}
+
+/**
+ * Get a mapping of old token names to new names
+ * Useful for running codemods during migration
+ */
+export function getTokenRenameMap(config: ThemeConfig): TokenRenameMap {
+  const textMap: Record<string, string> = {};
+  const colorMap: Record<string, string> = {};
+
+  for (const [tokenName, def] of Object.entries(config.text)) {
+    textMap[tokenName] = def.newName;
+  }
+
+  for (const [tokenName, def] of Object.entries(config.color)) {
+    colorMap[tokenName] = def.newName;
+  }
+
+  return { text: textMap, color: colorMap };
+}
+
+/**
+ * Generate all theme CSS files
+ */
+export function generateAllThemes(
+  options: GeneratorOptions,
+): Map<string, string> {
+  const { useNewNames = false, themes = [...AVAILABLE_THEMES] } = options;
+  const files = new Map<string, string>();
+
+  // Always generate base kumo theme
+  if (themes.includes("kumo")) {
+    files.set(
+      "theme-kumo.css",
+      generateKumoThemeCSS(THEME_CONFIG, useNewNames),
+    );
+  }
+
+  // Generate override themes
+  for (const themeName of themes) {
+    if (themeName !== "kumo") {
+      files.set(
+        `theme-${themeName}.css`,
+        generateThemeOverrideCSS(THEME_CONFIG, themeName, useNewNames),
+      );
+    }
+  }
+
+  return files;
+}
+
+/**
+ * List all tokens with their current and new names
+ * Useful for documentation and migration planning
+ */
+export function listAllTokens(config: ThemeConfig): Array<{
+  type: "text" | "color" | "typography";
+  currentName: string;
+  newName: string;
+  themes: string[];
+}> {
+  const tokens: Array<{
+    type: "text" | "color" | "typography";
+    currentName: string;
+    newName: string;
+    themes: string[];
+  }> = [];
+
+  for (const [tokenName, def] of Object.entries(config.text)) {
+    tokens.push({
+      type: "text",
+      currentName: tokenName,
+      newName: def.newName,
+      themes: Object.keys(def.theme),
+    });
+  }
+
+  for (const [tokenName, def] of Object.entries(config.color)) {
+    tokens.push({
+      type: "color",
+      currentName: tokenName,
+      newName: def.newName,
+      themes: Object.keys(def.theme),
+    });
+  }
+
+  if (config.typography) {
+    for (const [tokenName, def] of Object.entries(config.typography)) {
+      tokens.push({
+        type: "typography",
+        currentName: tokenName,
+        newName: def.newName,
+        themes: Object.keys(def.theme),
+      });
+    }
+  }
+
+  return tokens;
+}

package/scripts/theme-generator/index.ts

@@ -0,0 +1,159 @@
+#!/usr/bin/env node
+/**
+ * Kumo Theme Generator CLI
+ *
+ * Generates theme CSS files from the centralized configuration.
+ *
+ * Usage:
+ *   pnpm codegen:themes           # Generate all themes
+ *   pnpm codegen:themes --list    # List all tokens
+ *   pnpm codegen:themes --dry-run # Preview without writing
+ */
+
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { fileURLToPath } from "node:url";
+import {
+  generateAllThemes,
+  listAllTokens,
+  getTokenRenameMap,
+} from "./generate-css.js";
+import { THEME_CONFIG, AVAILABLE_THEMES } from "./config.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const STYLES_DIR = path.resolve(__dirname, "../../src/styles");
+
+function parseArgs(args: string[]) {
+  return {
+    list: args.includes("--list"),
+    dryRun: args.includes("--dry-run"),
+    useNewNames: args.includes("--use-new-names"),
+    renameMap: args.includes("--rename-map"),
+    help: args.includes("--help") || args.includes("-h"),
+  };
+}
+
+function printHelp() {
+  console.log(`
+Kumo Theme Generator
+
+Usage:
+  tsx scripts/kumo-theme-generator/index.ts [options]
+
+Options:
+  --list          List all tokens with their current and new names
+  --dry-run       Preview generated CSS without writing files
+  --use-new-names Generate CSS using new token names (for migration)
+  --rename-map    Output JSON mapping of old names to new names
+  --help, -h      Show this help message
+
+Output:
+  Generates theme CSS files in src/styles/:
+  - theme-kumo.css     Base theme with all tokens
+  - theme-fedramp.css  FedRAMP theme overrides
+`);
+}
+
+function printTokenList() {
+  const tokens = listAllTokens(THEME_CONFIG);
+
+  console.log("\n=== Text Tokens ===\n");
+  console.log("Current Name".padEnd(25) + "New Name".padEnd(20) + "Themes");
+  console.log("-".repeat(60));
+
+  for (const token of tokens.filter((t) => t.type === "text")) {
+    console.log(
+      token.currentName.padEnd(25) +
+        token.newName.padEnd(20) +
+        token.themes.join(", "),
+    );
+  }
+
+  console.log("\n=== Color Tokens ===\n");
+  console.log("Current Name".padEnd(25) + "New Name".padEnd(20) + "Themes");
+  console.log("-".repeat(60));
+
+  for (const token of tokens.filter((t) => t.type === "color")) {
+    console.log(
+      token.currentName.padEnd(25) +
+        token.newName.padEnd(20) +
+        token.themes.join(", "),
+    );
+  }
+
+  const typographyTokens = tokens.filter((t) => t.type === "typography");
+  if (typographyTokens.length > 0) {
+    console.log("\n=== Typography Tokens ===\n");
+    console.log("Current Name".padEnd(25) + "New Name".padEnd(20) + "Themes");
+    console.log("-".repeat(60));
+
+    for (const token of typographyTokens) {
+      console.log(
+        token.currentName.padEnd(25) +
+          token.newName.padEnd(20) +
+          token.themes.join(", "),
+      );
+    }
+  }
+
+  console.log(`\nTotal: ${tokens.length} tokens`);
+  console.log(`Available themes: ${AVAILABLE_THEMES.join(", ")}`);
+}
+
+function printRenameMap() {
+  const map = getTokenRenameMap(THEME_CONFIG);
+  console.log(JSON.stringify(map, null, 2));
+}
+
+async function main() {
+  const args = parseArgs(process.argv.slice(2));
+
+  if (args.help) {
+    printHelp();
+    process.exit(0);
+  }
+
+  if (args.list) {
+    printTokenList();
+    process.exit(0);
+  }
+
+  if (args.renameMap) {
+    printRenameMap();
+    process.exit(0);
+  }
+
+  console.log("Kumo Theme Generator\n");
+  console.log(`Output directory: ${STYLES_DIR}`);
+  console.log(`Using new names: ${args.useNewNames}`);
+  console.log("");
+
+  const files = generateAllThemes({
+    outputDir: STYLES_DIR,
+    useNewNames: args.useNewNames,
+  });
+
+  for (const [filename, content] of files) {
+    const filepath = path.join(STYLES_DIR, filename);
+
+    if (args.dryRun) {
+      console.log(`\n=== ${filename} ===\n`);
+      console.log(content);
+    } else {
+      fs.writeFileSync(filepath, content, "utf-8");
+      console.log(`  Wrote ${filename}`);
+    }
+  }
+
+  if (!args.dryRun) {
+    console.log("\nTheme generation complete!");
+    console.log(
+      "\nTip: Run with --dry-run to preview changes without writing files",
+    );
+  }
+}
+
+main().catch((err) => {
+  console.error("Error:", err);
+  process.exit(1);
+});