@digdir/designsystemet 1.13.2 → 1.14.0

package/dist/src/tokens/generate-config.js

@@ -1,321 +1,178 @@
-// src/tokens/generate-config.ts
-import path2 from "path";
-import pc2 from "picocolors";
-
-// src/utils/filesystem.ts
-import fs from "fs/promises";
-import path from "path";
+import { dsfs } from "../utils/filesystem.js";
 import pc from "picocolors";
-var FileSystem = class {
-  isInitialized = false;
-  dry = false;
-  verbose = false;
-  /** Default working directory is where the process was started */
-  workingDir = process.cwd();
-  outDir = this.workingDir;
-  /** Initialize the file system */
-  init({ dry, outdir, verbose }) {
-    if (this.isInitialized) {
-      console.warn(pc.yellow("FileSystem is already initialized. Ignoring subsequent init call."));
-      return;
-    }
-    if (dry) {
-      console.log(pc.blue("Initializing FileSystem in dry-run mode. No files will be written."));
-    }
-    this.dry = dry ?? false;
-    this.verbose = verbose ?? false;
-    this.outDir = outdir ? path.isAbsolute(outdir) ? outdir : path.join(this.workingDir, outdir) : this.workingDir;
-    if (this.verbose) {
-      console.log(
-        `FileSystem initialized with workingDir: ${pc.green(this.workingDir)}, outDir: ${pc.green(this.outDir)}`
-      );
-    }
-    this.isInitialized = true;
-  }
-  /**
-   * Creates a directory if it does not already exist.
-   *
-   * @param dir - The path of the directory to create.
-   *
-   * @returns A promise that resolves when the operation is complete.
-   * If the directory already exists or `dry` is `true`, the promise resolves immediately.
-   */
-  mkdir = async (dir) => {
-    if (this.dry) {
-      console.log(`${pc.blue("mkdir")} ${dir}`);
-      return Promise.resolve();
-    }
-    const exists = await fs.access(dir, fs.constants.F_OK).then(() => true).catch(() => false);
-    if (exists) {
-      return Promise.resolve();
-    }
-    return fs.mkdir(dir, { recursive: true });
-  };
-  writeFile = async (path3, data) => {
-    if (this.dry) {
-      console.log(`${pc.blue("writeFile")} ${path3}`);
-      return Promise.resolve();
-    }
-    return fs.writeFile(path3, data, { encoding: "utf-8" }).catch((error) => {
-      console.error(pc.red(`Error writing file: ${path3}`));
-      console.error(pc.red(error));
-      throw error;
-    });
-  };
-  cp = async (src, dest, filter) => {
-    if (this.dry) {
-      console.log(`${pc.blue("cp")} ${src} ${dest}`);
-      return Promise.resolve();
-    }
-    return fs.cp(src, dest, { recursive: true, filter });
-  };
-  copyFile = async (src, dest) => {
-    if (this.dry) {
-      console.log(`${pc.blue("copyFile")} ${src} to ${dest}`);
-      return Promise.resolve();
-    }
-    return fs.copyFile(src, dest);
-  };
-  cleanDir = async (dir) => {
-    if (this.dry) {
-      console.log(`${pc.blue("cleanDir")} ${dir}`);
-      return Promise.resolve();
-    }
-    console.log(`
-\u{1F525} Cleaning dir ${pc.red(`${dir.trim()}`)} `);
-    return fs.rm(dir, { recursive: true, force: true });
-  };
-  readFile = async (path3, allowFileNotFound) => {
-    if (this.dry) {
-      console.log(`${pc.blue("readFile")} ${path3}`);
-    }
-    try {
-      return await fs.readFile(path3, "utf-8");
-    } catch (error) {
-      if (allowFileNotFound && error.code === "ENOENT") {
-        return "";
-      }
-      throw error;
-    }
-  };
-  readdir = async (path3) => {
-    if (this.dry) {
-      console.log(`${pc.blue("readdir")} ${path3}`);
-    }
-    try {
-      return await fs.readdir(path3);
-    } catch (error) {
-      if (error.code === "ENOENT") {
-        return [];
-      }
-      throw error;
-    }
-  };
-  writeFiles = async (files, outDir, log) => {
-    for (const { destination: filename, output } of files) {
-      if (filename) {
-        const filePath = path.join(outDir, filename);
-        const fileDir = path.dirname(filePath);
-        if (log) {
-          console.log(filename);
-        }
-        await this.mkdir(fileDir);
-        await this.writeFile(filePath, output);
-      }
-    }
-  };
-};
-var dsfs = new FileSystem();
-
-// src/tokens/generate-config.ts
+import path from "node:path";
+//#region src/tokens/generate-config.ts
+/**
+* Reads a JSON file and returns its content as an object
+*/
 async function readJsonFile(filePath) {
-  try {
-    const content = await dsfs.readFile(filePath);
-    return JSON.parse(content);
-  } catch (err) {
-    throw new Error(`Failed to read token file at ${filePath}: ${err instanceof Error ? err.message : String(err)}`);
-  }
+	try {
+		const content = await dsfs.readFile(filePath);
+		return JSON.parse(content);
+	} catch (err) {
+		throw new Error(`Failed to read token file at ${filePath}: ${err instanceof Error ? err.message : String(err)}`);
+	}
 }
+/**
+* Extract the base hex color from a color scale (color.12)
+*/
 function extractBaseColor(colorScale) {
-  if ("12" in colorScale && typeof colorScale["12"] === "object" && "$value" in colorScale["12"]) {
-    const token = colorScale["12"];
-    if (token.$type === "color") {
-      return token.$value;
-    }
-  }
-  return null;
+	if ("12" in colorScale && typeof colorScale["12"] === "object" && "$value" in colorScale["12"]) {
+		const token = colorScale["12"];
+		if (token.$type === "color") return token.$value;
+	}
+	return null;
 }
+/**
+* Discovers theme names from the primitives/modes/color-scheme/light/
+*/
 async function discoverThemes(tokensDir) {
-  const lightModePath = path2.join(tokensDir, "themes");
-  try {
-    const files = await dsfs.readdir(lightModePath);
-    const themes = files.filter((file) => file.endsWith(".json")).map((file) => file.replace(".json", ""));
-    return themes;
-  } catch {
-    throw new Error(`Could not find themes. Make sure ${pc2.blue(lightModePath)} exists and contains theme JSON files.`);
-  }
+	const lightModePath = path.join(tokensDir, "themes");
+	try {
+		return (await dsfs.readdir(lightModePath)).filter((file) => file.endsWith(".json")).map((file) => file.replace(".json", ""));
+	} catch {
+		throw new Error(`Could not find themes. Make sure ${pc.blue(lightModePath)} exists and contains theme JSON files.`);
+	}
 }
+/**
+* Reads token information for a specific theme from primitives/modes/color-scheme/light/<theme>.json
+*/
 async function readThemeTokens(tokensDir, themeName) {
-  const themePath = path2.join(tokensDir, "primitives", "modes", "color-scheme", "light", `${themeName}.json`);
-  return readJsonFile(themePath);
+	return readJsonFile(path.join(tokensDir, "primitives", "modes", "color-scheme", "light", `${themeName}.json`));
 }
+/**
+* Reads the theme configuration from themes/<theme>.json
+*/
 async function readThemeConfig(tokensDir, themeName) {
-  const themeConfigPath = path2.join(tokensDir, "themes", `${themeName}.json`);
-  try {
-    return await readJsonFile(themeConfigPath);
-  } catch {
-    return null;
-  }
+	const themeConfigPath = path.join(tokensDir, "themes", `${themeName}.json`);
+	try {
+		return await readJsonFile(themeConfigPath);
+	} catch {
+		return null;
+	}
 }
+/**
+* Extract border-radius base value from theme config
+*/
 function extractBorderRadius(themeConfig) {
-  if (!themeConfig || !("border-radius" in themeConfig)) {
-    return void 0;
-  }
-  const borderRadius = themeConfig["border-radius"];
-  if ("base" in borderRadius && typeof borderRadius.base === "object" && "$value" in borderRadius.base) {
-    const token = borderRadius.base;
-    return Number(token.$value);
-  }
-  return void 0;
+	if (!themeConfig || !("border-radius" in themeConfig)) return;
+	const borderRadius = themeConfig["border-radius"];
+	if ("base" in borderRadius && typeof borderRadius.base === "object" && "$value" in borderRadius.base) {
+		const token = borderRadius.base;
+		return Number(token.$value);
+	}
 }
+/**
+* Extract font family from theme config
+*/
 function extractFontFamily(themeConfig) {
-  if (!themeConfig || !("font-family" in themeConfig)) {
-    return void 0;
-  }
-  const fontFamily = themeConfig["font-family"];
-  if (typeof fontFamily === "object" && "$value" in fontFamily) {
-    const token = fontFamily;
-    const value = token.$value;
-    if (value.startsWith("{") && value.endsWith("}")) {
-      return void 0;
-    }
-    return value;
-  }
-  return void 0;
+	if (!themeConfig || !("font-family" in themeConfig)) return;
+	const fontFamily = themeConfig["font-family"];
+	if (typeof fontFamily === "object" && "$value" in fontFamily) {
+		const value = fontFamily.$value;
+		if (value.startsWith("{") && value.endsWith("}")) return;
+		return value;
+	}
 }
+/**
+* Reads the typography configuration from primitives/modes/typography/primary/<theme>.json
+*/
 async function readTypographyConfig(tokensDir, themeName) {
-  const typographyConfigPath = path2.join(
-    tokensDir,
-    "primitives",
-    "modes",
-    "typography",
-    "primary",
-    `${themeName}.json`
-  );
-  try {
-    return await readJsonFile(typographyConfigPath);
-  } catch {
-    return null;
-  }
+	const typographyConfigPath = path.join(tokensDir, "primitives", "modes", "typography", "primary", `${themeName}.json`);
+	try {
+		return await readJsonFile(typographyConfigPath);
+	} catch {
+		return null;
+	}
 }
+/**
+* Extract font family from typography primitives
+*/
 function extractFontFamilyFromPrimitives(typographyConfig, themeName) {
-  if (!typographyConfig) {
-    return void 0;
-  }
-  const themeTypography = typographyConfig[themeName];
-  if (!themeTypography || !("font-family" in themeTypography)) {
-    return void 0;
-  }
-  const fontFamily = themeTypography["font-family"];
-  if (typeof fontFamily === "object" && "$value" in fontFamily) {
-    const token = fontFamily;
-    return token.$value;
-  }
-  return void 0;
+	if (!typographyConfig) return;
+	const themeTypography = typographyConfig[themeName];
+	if (!themeTypography || !("font-family" in themeTypography)) return;
+	const fontFamily = themeTypography["font-family"];
+	if (typeof fontFamily === "object" && "$value" in fontFamily) return fontFamily.$value;
 }
+/**
+* Categorizes colors into main, support, and neutral based on color names
+*/
 function categorizeColors(themeTokens, themeName) {
-  const main = {};
-  const support = {};
-  let neutral = null;
-  const builtInColors = ["neutral", "info", "success", "warning", "danger"];
-  const specialKeys = ["link"];
-  const themeColors = themeTokens[themeName];
-  if (!themeColors) {
-    return { main, support, neutral };
-  }
-  for (const [colorName, colorValue] of Object.entries(themeColors)) {
-    if (specialKeys.includes(colorName)) {
-      continue;
-    }
-    if (typeof colorValue === "object" && !("$value" in colorValue)) {
-      const baseColor = extractBaseColor(colorValue);
-      if (baseColor) {
-        if (colorName === "neutral") {
-          neutral = baseColor;
-        } else if (builtInColors.includes(colorName)) {
-        } else if (colorName === "accent") {
-          main[colorName] = baseColor;
-        } else {
-          support[colorName] = baseColor;
-        }
-      }
-    }
-  }
-  return { main, support, neutral };
+	const main = {};
+	const support = {};
+	let neutral = null;
+	const builtInColors = [
+		"neutral",
+		"info",
+		"success",
+		"warning",
+		"danger"
+	];
+	const specialKeys = ["link"];
+	const themeColors = themeTokens[themeName];
+	if (!themeColors) return {
+		main,
+		support,
+		neutral
+	};
+	for (const [colorName, colorValue] of Object.entries(themeColors)) {
+		if (specialKeys.includes(colorName)) continue;
+		if (typeof colorValue === "object" && !("$value" in colorValue)) {
+			const baseColor = extractBaseColor(colorValue);
+			if (baseColor) if (colorName === "neutral") neutral = baseColor;
+			else if (builtInColors.includes(colorName)) {} else if (colorName === "accent") main[colorName] = baseColor;
+			else support[colorName] = baseColor;
+		}
+	}
+	return {
+		main,
+		support,
+		neutral
+	};
 }
+/**
+* Generates a config file from existing design tokens
+*/
 async function generateConfigFromTokens(options) {
-  const { tokensDir } = options;
-  console.log(`
-Reading tokens from ${pc2.blue(tokensDir)}`);
-  const themes = await discoverThemes(tokensDir);
-  if (themes.length === 0) {
-    throw new Error(`
-No themes found in ${pc2.blue(tokensDir)}`);
-  }
-  console.log(`
-Found ${pc2.green(String(themes.length))} theme(s): ${themes.map((t) => pc2.cyan(t)).join(", ")}`);
-  const config = {
-    outDir: tokensDir,
-    themes: {}
-  };
-  for (const themeName of themes) {
-    console.log(`
-Processing theme ${pc2.cyan(themeName)}...`);
-    const themeTokens = await readThemeTokens(tokensDir, themeName);
-    const themeConfig = await readThemeConfig(tokensDir, themeName);
-    const typographyConfig = await readTypographyConfig(tokensDir, themeName);
-    const { main, support, neutral } = categorizeColors(themeTokens, themeName);
-    if (Object.keys(main).length === 0) {
-      console.warn(pc2.yellow(`
-Warning: No main colors found for theme ${themeName}`));
-    }
-    if (!neutral) {
-      console.warn(pc2.yellow(`
-Warning: No neutral color found for theme ${themeName}`));
-      continue;
-    }
-    const borderRadius = extractBorderRadius(themeConfig);
-    const fontFamily = extractFontFamily(themeConfig) ?? extractFontFamilyFromPrimitives(typographyConfig, themeName);
-    config.themes[themeName] = {
-      colors: {
-        main,
-        support,
-        neutral
-      },
-      borderRadius,
-      typography: fontFamily ? { fontFamily } : void 0
-    };
-    console.log(
-      `
-\u2705 Main colors: ${Object.keys(main).map((c) => pc2.cyan(c)).join(", ") || pc2.dim("none")}`
-    );
-    console.log(
-      `
-\u2705 Support colors: ${Object.keys(support).map((c) => pc2.cyan(c)).join(", ") || pc2.dim("none")}`
-    );
-    console.log(`
-\u2705 Neutral: ${pc2.cyan(neutral)}`);
-    if (borderRadius !== void 0) {
-      console.log(`
-\u2705 Border radius: ${pc2.cyan(String(borderRadius))}`);
-    }
-    if (fontFamily) {
-      console.log(`
-\u2705 Font family: ${pc2.cyan(fontFamily)}`);
-    }
-  }
-  return config;
+	const { tokensDir } = options;
+	console.log(`\nReading tokens from ${pc.blue(tokensDir)}`);
+	const themes = await discoverThemes(tokensDir);
+	if (themes.length === 0) throw new Error(`\nNo themes found in ${pc.blue(tokensDir)}`);
+	console.log(`\nFound ${pc.green(String(themes.length))} theme(s): ${themes.map((t) => pc.cyan(t)).join(", ")}`);
+	const config = {
+		outDir: tokensDir,
+		themes: {}
+	};
+	for (const themeName of themes) {
+		console.log(`\nProcessing theme ${pc.cyan(themeName)}...`);
+		const themeTokens = await readThemeTokens(tokensDir, themeName);
+		const themeConfig = await readThemeConfig(tokensDir, themeName);
+		const typographyConfig = await readTypographyConfig(tokensDir, themeName);
+		const { main, support, neutral } = categorizeColors(themeTokens, themeName);
+		if (Object.keys(main).length === 0) console.warn(pc.yellow(`\nWarning: No main colors found for theme ${themeName}`));
+		if (!neutral) {
+			console.warn(pc.yellow(`\nWarning: No neutral color found for theme ${themeName}`));
+			continue;
+		}
+		const borderRadius = extractBorderRadius(themeConfig);
+		const fontFamily = extractFontFamily(themeConfig) ?? extractFontFamilyFromPrimitives(typographyConfig, themeName);
+		config.themes[themeName] = {
+			colors: {
+				main,
+				support,
+				neutral
+			},
+			borderRadius,
+			typography: fontFamily ? { fontFamily } : void 0
+		};
+		console.log(`\n✅ Main colors: ${Object.keys(main).map((c) => pc.cyan(c)).join(", ") || pc.dim("none")}`);
+		console.log(`\n✅ Support colors: ${Object.keys(support).map((c) => pc.cyan(c)).join(", ") || pc.dim("none")}`);
+		console.log(`\n✅ Neutral: ${pc.cyan(neutral)}`);
+		if (borderRadius !== void 0) console.log(`\n✅ Border radius: ${pc.cyan(String(borderRadius))}`);
+		if (fontFamily) console.log(`\n✅ Font family: ${pc.cyan(fontFamily)}`);
+	}
+	return config;
 }
-export {
-  generateConfigFromTokens
-};
+//#endregion
+export { generateConfigFromTokens };