colbrush 1.0.0

package/dist/cli.js

@@ -0,0 +1,375 @@
+#!/usr/bin/env node
+
+// src/node/parseFlags.ts
+function parseFlags(argv = process.argv.slice(2)) {
+  const out = { _: [] };
+  for (const s of argv) {
+    const m = /^--([^=]+)=(.*)$/.exec(s);
+    if (m) out[m[1]] = m[2];
+    else if (s.startsWith("--")) out[s.slice(2)] = true;
+    else out._.push(s);
+  }
+  return out;
+}
+
+// src/constants/regex.ts
+var variableRegex = /(--color-[\w-]+):\s*(#[0-9a-fA-F]{3,8})/g;
+var variationRegex = /^--(.+?)-(50|100|200|300|400|500|600|700|800|900)$/i;
+
+// src/node/applyThemes.ts
+import fs from "fs";
+import postcss, { Rule } from "postcss";
+import safeParser from "postcss-safe-parser";
+
+// src/utils/core/colorScale.ts
+import Color from "colorjs.io";
+
+// src/constants/variation.ts
+var DEFAULT_KEYS = [
+  "50",
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900"
+];
+var DEFAULT_SCALE = {
+  "50": { dL: 0.36, cMul: 0.95 },
+  "100": { dL: 0.28, cMul: 0.96 },
+  "200": { dL: 0.18, cMul: 0.98 },
+  "300": { dL: 0.08, cMul: 0.99 },
+  "400": { dL: 0.02, cMul: 1 },
+  "500": { dL: 0, cMul: 1 },
+  "600": { dL: -0.05, cMul: 0.98 },
+  "700": { dL: -0.15, cMul: 0.94 },
+  "800": { dL: -0.22, cMul: 0.9 },
+  "900": { dL: -0.3, cMul: 0.88 }
+};
+
+// src/utils/core/colorScale.ts
+var CLAMP01 = (x) => Math.max(0, Math.min(1, x));
+function hexToOKLCH(hex) {
+  const c = new Color(hex);
+  const o = c.to("oklch");
+  return { l: o.l, c: o.c, h: o.h ?? 0 };
+}
+function oklchToHex(l, c, h) {
+  const color = new Color("oklch", [l, c, h]);
+  const srgb = color.to("srgb");
+  const r = CLAMP01(srgb.r), g = CLAMP01(srgb.g), b = CLAMP01(srgb.b);
+  return new Color("srgb", [r, g, b]).toString({ format: "hex" });
+}
+function buildScaleFromBaseHex(baseHex, opts) {
+  const keys = opts?.keys ?? DEFAULT_KEYS;
+  const cMin = opts?.cMin ?? 0.02;
+  const cMax = opts?.cMax ?? 0.4;
+  const lockHue = true;
+  const base = hexToOKLCH(baseHex);
+  const out = {};
+  for (const k of keys) {
+    const pat = DEFAULT_SCALE[k] ?? DEFAULT_SCALE["500"];
+    const L = CLAMP01(base.l + pat.dL);
+    const C = Math.max(cMin, Math.min(cMax, base.c * pat.cMul));
+    const H = lockHue ? base.h : base.h;
+    out[k] = oklchToHex(L, C, H);
+  }
+  return out;
+}
+
+// src/node/applyThemes.ts
+var CSS_PATH = "src/index.css";
+function toThemeColor(hex, _vision) {
+  return hex;
+}
+function loadRoot(cssPath = CSS_PATH) {
+  const css = fs.readFileSync(cssPath, "utf8");
+  return postcss().process(css, { parser: safeParser }).root;
+}
+function getExistingKeysForToken(root, token) {
+  const keys = /* @__PURE__ */ new Set();
+  root.walkDecls((d) => {
+    if (!d.prop.startsWith("--")) return;
+    const m = d.prop.match(variationRegex);
+    if (!m) return;
+    const [, t, k] = m;
+    if (t === token) keys.add(k);
+  });
+  return Array.from(keys);
+}
+function upsertBlock(root, selector, kv) {
+  let rule;
+  root.walkRules((r) => {
+    if (r.selector === selector) rule = r;
+  });
+  if (!rule) {
+    rule = new Rule({ selector });
+    root.append(rule);
+  }
+  const remain = new Map(Object.entries(kv));
+  rule.walkDecls((d) => {
+    if (remain.has(d.prop)) {
+      d.value = remain.get(d.prop);
+      remain.delete(d.prop);
+    }
+  });
+  for (const [prop, value] of remain) rule.append({ prop, value });
+}
+function applyThemes(input, cssPath = CSS_PATH) {
+  const root = loadRoot(cssPath);
+  const selector = `[data-theme='${input.vision}']`;
+  const varsForTheme = {};
+  for (const [varName, val] of Object.entries(input.variables)) {
+    const rich = typeof val === "string" ? inferRich(varName, val) : val;
+    const m = varName.match(variationRegex);
+    const isPattern = !!m;
+    if (isPattern) {
+      const [, token] = m;
+      const keys = rich.keys && rich.keys.length ? rich.keys : getExistingKeysForToken(root, token).length ? getExistingKeysForToken(root, token) : Array.from(DEFAULT_KEYS);
+      if (rich.scale !== false) {
+        const scaleMap = buildScaleFromBaseHex(rich.base, {
+          keys
+        });
+        for (const k of keys) {
+          const hex = scaleMap[k];
+          varsForTheme[`--${token}-${k}`] = toThemeColor(
+            hex,
+            input.vision
+          );
+        }
+      } else {
+        varsForTheme[varName] = toThemeColor(rich.base, input.vision);
+      }
+    } else {
+      varsForTheme[varName] = toThemeColor(rich.base, input.vision);
+    }
+  }
+  upsertBlock(root, selector, varsForTheme);
+  fs.writeFileSync(cssPath, root.toString(), "utf8");
+  console.log(`\u2705 [${input.vision}] theme updated in ${cssPath}`);
+}
+function inferRich(varName, baseHex) {
+  return variationRegex.test(varName) ? { base: baseHex, scale: true } : { base: baseHex, scale: false };
+}
+
+// src/node/colorTransform.ts
+import chroma from "chroma-js";
+import blinder from "color-blind";
+var THRESHOLD = 10;
+var CANDIDATE_COUNT = 10;
+var HUE_STEP = 180;
+function generateCandidates(hex) {
+  const [baseHue] = chroma(hex).hcl();
+  const candidates = [];
+  candidates[0] = hex;
+  for (let i = 1; i <= CANDIDATE_COUNT / 2; i++) {
+    candidates[i * 2 - 1] = chroma(hex).set("hcl.h", (baseHue + HUE_STEP / CANDIDATE_COUNT * i) % 360).hex();
+    candidates[i * 2] = chroma(hex).set("hcl.h", (baseHue - HUE_STEP / CANDIDATE_COUNT * i + 360) % 360).hex();
+  }
+  return candidates;
+}
+function findOptimalColorCombination(colorKeys, baseColorsArray, candidateList, vision) {
+  const n = baseColorsArray.length;
+  let bestColors = null;
+  let minDeltaSum = Infinity;
+  let blind;
+  switch (vision) {
+    // 적색맹
+    case "protanopia":
+      blind = blinder.protanopia;
+      break;
+    // 녹색맹 
+    case "deuteranopia":
+      blind = blinder.deuteranopia;
+      break;
+    // 청색맹
+    case "tritanopia":
+      blind = blinder.tritanopia;
+      break;
+    default:
+      throw new Error("Invalid color blindness option");
+  }
+  function dfs(index, currentColors, totalDelta) {
+    if (index === n) {
+      if (isValidColors(currentColors, blind)) {
+        if (totalDelta < minDeltaSum) {
+          minDeltaSum = totalDelta;
+          bestColors = [...currentColors];
+        }
+      }
+      return;
+    }
+    for (const candidate of candidateList[index]) {
+      const delta = chroma.deltaE(baseColorsArray[index], candidate);
+      if (totalDelta + delta > minDeltaSum) continue;
+      currentColors.push(candidate);
+      dfs(index + 1, currentColors, totalDelta + delta);
+      currentColors.pop();
+    }
+  }
+  dfs(0, [], 0);
+  const finalColors = bestColors ?? [...baseColorsArray];
+  return colorKeys.reduce((acc, key, idx) => {
+    acc[key] = finalColors[idx];
+    return acc;
+  }, {});
+}
+async function requestColorTransformation(variables) {
+  const scaleGroups = {};
+  const filteredVariables = {};
+  for (const key in variables) {
+    if (variables[key].scale) {
+      const prefixMatch = key.match(/^(--[\w-]+)-\d+$/);
+      if (!prefixMatch) {
+        filteredVariables[key] = variables[key];
+        continue;
+      }
+      const prefix = prefixMatch[1];
+      if (!scaleGroups[prefix]) scaleGroups[prefix] = [];
+      scaleGroups[prefix].push(key);
+    } else {
+      filteredVariables[key] = variables[key];
+    }
+  }
+  for (const prefix in scaleGroups) {
+    const keys = scaleGroups[prefix];
+    const middleKey = getMiddleScaleKey(keys);
+    if (middleKey) {
+      filteredVariables[middleKey] = variables[middleKey];
+    }
+  }
+  const colorKeys = Object.keys(filteredVariables);
+  const baseColorsArray = Object.values(filteredVariables).map((v) => v.base);
+  const candidateList = baseColorsArray.map((color) => {
+    return generateCandidates(color);
+  });
+  const colors_d = findOptimalColorCombination(colorKeys, baseColorsArray, candidateList, "deuteranopia");
+  const colors_p = findOptimalColorCombination(colorKeys, baseColorsArray, candidateList, "protanopia");
+  const colors_t = findOptimalColorCombination(colorKeys, baseColorsArray, candidateList, "tritanopia");
+  const visions = ["deuteranopia", "protanopia", "tritanopia"];
+  const colorsMap = {
+    deuteranopia: colors_d,
+    protanopia: colors_p,
+    tritanopia: colors_t
+  };
+  const themes = visions.map((vision) => ({
+    vision,
+    variables: Object.entries(colorsMap[vision]).reduce((acc, [varName, baseHex]) => {
+      acc[varName] = inferRich(varName, baseHex);
+      return acc;
+    }, {})
+  }));
+  return { themes };
+}
+function getMiddleScaleKey(keys) {
+  const scaleNumbers = keys.map((k) => {
+    const m = k.match(/\d+$/);
+    return m ? parseInt(m[0], 10) : null;
+  }).filter((n) => n !== null);
+  if (scaleNumbers.length === 0) return null;
+  scaleNumbers.sort((a, b) => a - b);
+  const midIndex = Math.floor(scaleNumbers.length / 2);
+  const midNumber = scaleNumbers[midIndex];
+  const middleKey = keys.find((k) => k.endsWith(midNumber.toString())) || null;
+  return middleKey;
+}
+function isValidColors(colors, blind) {
+  for (let i = 0; i < colors.length; i++) {
+    for (let j = i + 1; j < colors.length; j++) {
+      if (chroma.deltaE(blind(colors[i]), blind(colors[j])) < THRESHOLD) return false;
+    }
+  }
+  return true;
+}
+
+// src/node/runThemeApply.ts
+import fs2 from "fs";
+
+// src/node/removeExistingThemeBlocks.ts
+function removeExistingThemeBlocks(content) {
+  const visions = ["protanopia", "deuteranopia", "tritanopia"];
+  let cleaned = content;
+  for (const vision of visions) {
+    const pattern = new RegExp(
+      `\\/\\*\\s*${vision} theme start\\s*\\*\\/[^]*?\\/\\*\\s*${vision} theme end\\s*\\*\\/`,
+      "gm"
+    );
+    cleaned = cleaned.replace(pattern, "");
+  }
+  return cleaned.trim();
+}
+
+// src/node/runThemeApply.ts
+function isBlackOrWhite(hexColor) {
+  const hex = hexColor.toLowerCase().replace("#", "");
+  const fullHex = hex.length === 3 ? hex.split("").map((char) => char + char).join("") : hex;
+  const r = parseInt(fullHex.substr(0, 2), 16);
+  const g = parseInt(fullHex.substr(2, 2), 16);
+  const b = parseInt(fullHex.substr(4, 2), 16);
+  const isWhite = r >= 250 && g >= 250 && b >= 250;
+  const isBlack = r <= 10 && g <= 10 && b <= 10;
+  return isWhite || isBlack;
+}
+function calculateScale(varName, hexColor) {
+  if (isBlackOrWhite(hexColor)) {
+    return false;
+  }
+  return /\d+$/.test(varName);
+}
+async function runThemeApply(cssPath) {
+  if (!fs2.existsSync(cssPath)) {
+    throw new Error(`\u274C CSS \uD30C\uC77C\uC774 \uC874\uC7AC\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4: ${cssPath}`);
+  }
+  let content = fs2.readFileSync(cssPath, "utf8");
+  content = removeExistingThemeBlocks(content);
+  const variables = {};
+  let match;
+  while ((match = variableRegex.exec(content)) !== null) {
+    const [, key, value] = match;
+    const cleanKey = key.trim();
+    const cleanValue = value.trim();
+    const scale = calculateScale(cleanKey, cleanValue);
+    const rich = {
+      base: cleanValue,
+      scale
+    };
+    variables[cleanKey] = rich;
+  }
+  const visions = ["deuteranopia", "protanopia", "tritanopia"];
+  try {
+    const algorithmResult = await requestColorTransformation(variables);
+    for (const themeData of algorithmResult.themes) {
+      await applyThemes(themeData, cssPath);
+    }
+  } catch (error) {
+    console.log("\u{1F680} ~ runThemeApply ~ error:", error);
+    for (const vision of visions) {
+      await applyThemes({ vision, variables }, cssPath);
+    }
+  }
+  console.log(`\u2705 ${cssPath}\uC5D0 \uC0C9\uB9F9 \uD14C\uB9C8\uAC00 \uC801\uC6A9\uB418\uC5C8\uC2B5\uB2C8\uB2E4`);
+}
+
+// src/cli.ts
+async function main() {
+  const flags = parseFlags();
+  const cmd = flags._[0] ?? "generate";
+  const cssPath = typeof flags.css === "string" ? flags.css : "src/index.css";
+  if (cmd === "generate") {
+    await runThemeApply(cssPath);
+    process.exit(0);
+  }
+  console.log(`\uC0AC\uC6A9 \uBC29\uBC95:
+    - cb-theme generate [--css=src/index.css]
+        CSS \uD30C\uC77C\uC5D0\uC11C \uC0C9\uC0C1 \uBCC0\uC218\uB4E4\uC744 \uCD94\uCD9C\uD558\uACE0, \uC0C9\uB9F9 \uD14C\uB9C8\uB97C \uC790\uB3D9 \uC0DD\uC131\uD558\uC5EC \uAC19\uC740 CSS \uD30C\uC77C\uC5D0 \uC801\uC6A9\uD569\uB2C8\uB2E4.
+        (\uAE30\uBCF8 \uACBD\uB85C\uB294 src/index.css)
+`);
+  process.exit(1);
+}
+main().catch((e) => {
+  console.error("\u274C CLI failed:", e);
+  process.exit(1);
+});