colbrush 1.5.0 → 1.7.0

package/dist/chunk-EFIJAMPH.js

@@ -0,0 +1,104 @@
+// src/react/ThemeProvider.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var THEME_KEYS = [
+  "default",
+  "protanopia",
+  "deuteranopia",
+  "tritanopia"
+];
+var THEME_LABEL = {
+  English: {
+    default: "default",
+    protanopia: "protanopia",
+    deuteranopia: "deuteranopia",
+    tritanopia: "tritanopia"
+  },
+  Korean: {
+    default: "\uAE30\uBCF8",
+    protanopia: "\uC801\uC0C9\uB9F9",
+    deuteranopia: "\uB179\uC0C9\uB9F9",
+    tritanopia: "\uCCAD\uC0C9\uB9F9"
+  }
+};
+var getThemeOptions = (lang) => THEME_KEYS.map((key) => ({ key, label: THEME_LABEL[lang][key] }));
+var KEY = "theme";
+var LANG_KEY = "theme_lang";
+var ThemeContext = createContext({
+  theme: "default",
+  language: "English",
+  updateTheme: () => {
+  },
+  updateLanguage: () => {
+  },
+  simulationFilter: "none",
+  setSimulationFilter: () => {
+  }
+});
+var useTheme = () => useContext(ThemeContext);
+function normalizeToKey(value) {
+  if (!value) return "default";
+  if (THEME_KEYS.includes(value))
+    return value;
+  const reverse = {};
+  ["English", "Korean"].forEach((lang) => {
+    Object.entries(THEME_LABEL[lang]).forEach(
+      ([k, label]) => {
+        reverse[label] = k;
+      }
+    );
+  });
+  return reverse[value] ?? "default";
+}
+function ThemeProvider({ children }) {
+  const [theme, setTheme] = useState("default");
+  const [simulationFilter, setSimulationFilter] = useState("none");
+  const [language, setLanguage] = useState("English");
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const storedTheme = normalizeToKey(localStorage.getItem(KEY));
+    const storedLang = localStorage.getItem(LANG_KEY) || "English";
+    setTheme(storedTheme);
+    setLanguage(storedLang);
+    document.documentElement.setAttribute("data-theme", storedTheme);
+  }, []);
+  const updateTheme = (k) => {
+    setTheme(k);
+    if (typeof window !== "undefined") {
+      localStorage.setItem(KEY, k);
+      document.documentElement.setAttribute("data-theme", k);
+    }
+  };
+  const updateLanguage = (t) => {
+    setLanguage(t);
+    if (typeof window !== "undefined") {
+      localStorage.setItem(LANG_KEY, t);
+    }
+  };
+  const value = useMemo(
+    () => ({
+      theme,
+      language,
+      updateTheme,
+      updateLanguage,
+      simulationFilter,
+      setSimulationFilter
+    }),
+    [theme, language, simulationFilter]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+var THEMES = THEME_LABEL;
+
+export {
+  getThemeOptions,
+  useTheme,
+  ThemeProvider,
+  THEMES
+};

package/dist/cli.cjs

@@ -75,16 +75,17 @@ var DEFAULT_SCALE = {
 
 // src/core/utils/colorScale.ts
 var CLAMP01 = (x) => Math.max(0, Math.min(1, x));
+var Color = import_colorjs.default.default ?? import_colorjs.default;
 function hexToOKLCH(hex) {
-  const c = new import_colorjs.default(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 import_colorjs.default("oklch", [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 import_colorjs.default("srgb", [r, g, b]).toString({ format: "hex" });
+  return new Color("srgb", [r, g, b]).toString({ format: "hex" });
 }
 function buildScaleFromBaseHex(baseHex, opts) {
   const keys = opts?.keys ?? DEFAULT_KEYS;
@@ -190,72 +191,48 @@ function inferRich(varName, baseHex) {
 
 // src/cli/colorTransform.ts
 var import_chroma_js = __toESM(require("chroma-js"), 1);
-var import_color_blind = __toESM(require("color-blind"), 1);
-var THRESHOLD = 10;
-var CANDIDATE_COUNT = 10;
-var HUE_STEP = 180;
-function generateCandidates(hex) {
-  const [baseHue] = (0, import_chroma_js.default)(hex).hcl();
-  const candidates = [];
-  candidates[0] = hex;
-  for (let i = 1; i <= CANDIDATE_COUNT / 2; i++) {
-    candidates[i * 2 - 1] = (0, import_chroma_js.default)(hex).set("hcl.h", (baseHue + HUE_STEP / CANDIDATE_COUNT * i) % 360).hex();
-    candidates[i * 2] = (0, import_chroma_js.default)(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 = import_color_blind.default.protanopia;
-      break;
-    // 녹색맹
-    case "deuteranopia":
-      blind = import_color_blind.default.deuteranopia;
-      break;
-    // 청색맹
-    case "tritanopia":
-      blind = import_color_blind.default.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;
+var ALPHA = 1.5;
+function colorTranslate(colorKeys, baseColorsArray, vision) {
+  const labArray = baseColorsArray.map((hex) => (0, import_chroma_js.default)(hex).lab());
+  const newLabArray = labArray.map((lab) => {
+    const newLab = [...lab];
+    switch (vision) {
+      case "protanopia":
+        newLab[2] += ALPHA * lab[1];
+        break;
+      case "deuteranopia":
+        newLab[2] += ALPHA * lab[1];
+        break;
+      case "tritanopia":
+        newLab[1] += ALPHA * 0.2 * lab[2];
+        break;
     }
-    for (const candidate of candidateList[index]) {
-      const delta = import_chroma_js.default.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 newLab;
+  });
+  const newColorArray = newLabArray.map((lab) => import_chroma_js.default.lab(lab[0], lab[1], lab[2]).hex());
   return colorKeys.reduce(
     (acc, key, idx) => {
-      acc[key] = finalColors[idx];
+      acc[key] = newColorArray[idx];
       return acc;
     },
     {}
   );
 }
+function buildThemeForVision(colorKeys, baseColorsArray, vision) {
+  const colors = colorTranslate(
+    colorKeys,
+    baseColorsArray,
+    vision
+  );
+  const variables = Object.entries(colors).reduce(
+    (acc, [varName, baseHex]) => {
+      acc[varName] = inferRich(varName, baseHex);
+      return acc;
+    },
+    {}
+  );
+  return { vision, variables };
+}
 function prepareCandidates(variables, progress) {
   const scaleGroups = {};
   const filteredVariables = {};
@@ -282,30 +259,7 @@ function prepareCandidates(variables, progress) {
   }
   const colorKeys = Object.keys(filteredVariables);
   const baseColorsArray = Object.values(filteredVariables).map((v) => v.base);
-  progress?.startSection("Generate candidates");
-  const candidateList = [];
-  for (let i = 0; i < baseColorsArray.length; i++) {
-    candidateList[i] = generateCandidates(baseColorsArray[i]);
-    progress?.update((i + 1) / baseColorsArray.length * 100);
-  }
-  progress?.finishSection("Done");
-  return { colorKeys, baseColorsArray, candidateList };
-}
-function buildThemeForVision(colorKeys, baseColorsArray, candidateList, vision) {
-  const colors = findOptimalColorCombination(
-    colorKeys,
-    baseColorsArray,
-    candidateList,
-    vision
-  );
-  const variables = Object.entries(colors).reduce(
-    (acc, [varName, baseHex]) => {
-      acc[varName] = inferRich(varName, baseHex);
-      return acc;
-    },
-    {}
-  );
-  return { vision, variables };
+  return { colorKeys, baseColorsArray };
 }
 function getMiddleScaleKey(keys) {
   const scaleNumbers = keys.map((k) => {
@@ -319,15 +273,6 @@ function getMiddleScaleKey(keys) {
   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 (import_chroma_js.default.deltaE(blind(colors[i]), blind(colors[j])) < THRESHOLD)
-        return false;
-    }
-  }
-  return true;
-}
 
 // src/cli/runThemeApply.ts
 var import_node_fs2 = __toESM(require("fs"), 1);
@@ -338,7 +283,7 @@ function removeExistingThemeBlocks(content) {
   let cleaned = content;
   for (const vision of visions) {
     const pattern = new RegExp(
-      `\\/\\*\\s*${vision} theme start\\s*\\*\\/[^]*?\\/\\*\\s*${vision} theme end\\s*\\*\\/`,
+      `\\[data-theme=['"]${vision}['"]\\][^}]*}\\s*`,
       "gm"
     );
     cleaned = cleaned.replace(pattern, "");
@@ -418,7 +363,7 @@ async function runThemeApply(cssPath, progress) {
   progress?.finishSection("Done");
   const visions = ["deuteranopia", "protanopia", "tritanopia"];
   try {
-    const { colorKeys, baseColorsArray, candidateList } = prepareCandidates(
+    const { colorKeys, baseColorsArray } = prepareCandidates(
       variables,
       progress
     );
@@ -429,7 +374,6 @@ async function runThemeApply(cssPath, progress) {
       const themeData = buildThemeForVision(
         colorKeys,
         baseColorsArray,
-        candidateList,
         vision
       );
       progress?.update(70, "Applying CSS...");

package/dist/client.cjs

@@ -60,6 +60,9 @@ var ThemeContext = (0, import_react.createContext)({
   updateTheme: () => {
   },
   updateLanguage: () => {
+  },
+  simulationFilter: "none",
+  setSimulationFilter: () => {
   }
 });
 var useTheme = () => (0, import_react.useContext)(ThemeContext);
@@ -79,6 +82,7 @@ function normalizeToKey(value) {
 }
 function ThemeProvider({ children }) {
   const [theme, setTheme] = (0, import_react.useState)("default");
+  const [simulationFilter, setSimulationFilter] = (0, import_react.useState)("none");
   const [language, setLanguage] = (0, import_react.useState)("English");
   (0, import_react.useEffect)(() => {
     if (typeof window === "undefined") return;
@@ -102,8 +106,15 @@ function ThemeProvider({ children }) {
     }
   };
   const value = (0, import_react.useMemo)(
-    () => ({ theme, language, updateTheme, updateLanguage }),
-    [theme, language]
+    () => ({
+      theme,
+      language,
+      updateTheme,
+      updateLanguage,
+      simulationFilter,
+      setSimulationFilter
+    }),
+    [theme, language, simulationFilter]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value, children });
 }

package/dist/client.d.cts

@@ -3,12 +3,16 @@ import { ReactNode } from 'react';
 
 type TLanguage = 'English' | 'Korean';
 declare const THEME_KEYS: readonly ["default", "protanopia", "deuteranopia", "tritanopia"];
+declare const SIMULATION_KEYS: readonly ["none", "deuteranopia", "protanopia", "tritanopia"];
 type ThemeKey = (typeof THEME_KEYS)[number];
+type SimulationKey = (typeof SIMULATION_KEYS)[number];
 type ThemeContextType = {
     theme: ThemeKey;
     language: TLanguage;
     updateTheme: (k: ThemeKey) => void;
     updateLanguage: (t: TLanguage) => void;
+    simulationFilter: SimulationKey;
+    setSimulationFilter: (value: SimulationKey) => void;
 };
 declare const useTheme: () => ThemeContextType;
 type ThemeProviderProps = {
@@ -16,7 +20,7 @@ type ThemeProviderProps = {
 };
 declare function ThemeProvider({ children }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
 type ThemeType = ThemeKey;
-declare const THEMES: Record<TLanguage, Record<"default" | "protanopia" | "deuteranopia" | "tritanopia", string>>;
+declare const THEMES: Record<TLanguage, Record<"deuteranopia" | "protanopia" | "tritanopia" | "default", string>>;
 
 type Props = {
     options?: {

package/dist/client.d.ts

@@ -3,12 +3,16 @@ import { ReactNode } from 'react';
 
 type TLanguage = 'English' | 'Korean';
 declare const THEME_KEYS: readonly ["default", "protanopia", "deuteranopia", "tritanopia"];
+declare const SIMULATION_KEYS: readonly ["none", "deuteranopia", "protanopia", "tritanopia"];
 type ThemeKey = (typeof THEME_KEYS)[number];
+type SimulationKey = (typeof SIMULATION_KEYS)[number];
 type ThemeContextType = {
     theme: ThemeKey;
     language: TLanguage;
     updateTheme: (k: ThemeKey) => void;
     updateLanguage: (t: TLanguage) => void;
+    simulationFilter: SimulationKey;
+    setSimulationFilter: (value: SimulationKey) => void;
 };
 declare const useTheme: () => ThemeContextType;
 type ThemeProviderProps = {
@@ -16,7 +20,7 @@ type ThemeProviderProps = {
 };
 declare function ThemeProvider({ children }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
 type ThemeType = ThemeKey;
-declare const THEMES: Record<TLanguage, Record<"default" | "protanopia" | "deuteranopia" | "tritanopia", string>>;
+declare const THEMES: Record<TLanguage, Record<"deuteranopia" | "protanopia" | "tritanopia" | "default", string>>;
 
 type Props = {
     options?: {