colbrush 1.4.0 → 1.6.0

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

@@ -118,9 +118,8 @@ var SvgLogo = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    width: 39,
-    height: 40,
     fill: "none",
+    viewBox: "0 0 39 40",
     ...props,
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "#CE78A9", d: "m.5 17.805 1.516-3.514 16.812-7.924-1.309 3.308z" }),
@@ -184,9 +183,8 @@ var SvgUs = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    width: 28,
-    height: 21,
     fill: "none",
+    viewBox: "0 0 28 21",
     ...props,
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { clipPath: "url(#a)", filter: "url(#b)", children: [
@@ -263,9 +261,8 @@ var SvgKr = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 17,
     fill: "none",
+    viewBox: "0 0 24 17",
     ...props,
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { clipPath: "url(#a)", filter: "url(#b)", children: [
@@ -384,9 +381,8 @@ var SvgX = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    width: 30,
-    height: 30,
     fill: "none",
+    viewBox: "0 0 30 30",
     ...props,
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -648,7 +644,7 @@ function ThemeSwitcher({ options }) {
       {
         role: "menu",
         "aria-label": "Select theme",
-        className: "fixed bottom-[100px] right-[25px] flex-col bg-[#ffffff] rounded-[18px] w-[220px] gap-[11px]",
+        className: "fixed bottom-[100px] right-[25px] flex-col bg-[#ffffff] rounded-[18px] w-[220px] gap-[11px] filter drop-shadow-[0_0_1.3px_rgba(0,0,0,0.25)]",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: list.map((opt) => {
             const Icon = THEME_ICON[opt.key];
@@ -693,7 +689,7 @@ function ThemeSwitcher({ options }) {
               className: `hover:cursor-pointer flex text-[18px] text-[#3D4852] gap-[8px] items-center justify-center`,
               onClick: () => updateLanguage("Korean"),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Us_default, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Us_default, { width: 20 }),
                 "English"
               ]
             }
@@ -703,7 +699,7 @@ function ThemeSwitcher({ options }) {
               className: `hover:cursor-pointer flex text-[18px] text-[#3D4852] gap-[8px] items-center justify-center `,
               onClick: () => updateLanguage("English"),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Kr_default, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Kr_default, { width: 20 }),
                 "Korean"
               ]
             }

package/dist/client.js

@@ -96,9 +96,8 @@ var SvgLogo = (props) => /* @__PURE__ */ jsxs(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    width: 39,
-    height: 40,
     fill: "none",
+    viewBox: "0 0 39 40",
     ...props,
     children: [
       /* @__PURE__ */ jsx2("path", { fill: "#CE78A9", d: "m.5 17.805 1.516-3.514 16.812-7.924-1.309 3.308z" }),
@@ -162,9 +161,8 @@ var SvgUs = (props) => /* @__PURE__ */ jsxs2(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    width: 28,
-    height: 21,
     fill: "none",
+    viewBox: "0 0 28 21",
     ...props,
     children: [
       /* @__PURE__ */ jsxs2("g", { clipPath: "url(#a)", filter: "url(#b)", children: [
@@ -241,9 +239,8 @@ var SvgKr = (props) => /* @__PURE__ */ jsxs3(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 17,
     fill: "none",
+    viewBox: "0 0 24 17",
     ...props,
     children: [
       /* @__PURE__ */ jsxs3("g", { clipPath: "url(#a)", filter: "url(#b)", children: [
@@ -362,9 +359,8 @@ var SvgX = (props) => /* @__PURE__ */ jsxs4(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    width: 30,
-    height: 30,
     fill: "none",
+    viewBox: "0 0 30 30",
     ...props,
     children: [
       /* @__PURE__ */ jsx5(
@@ -626,7 +622,7 @@ function ThemeSwitcher({ options }) {
       {
         role: "menu",
         "aria-label": "Select theme",
-        className: "fixed bottom-[100px] right-[25px] flex-col bg-[#ffffff] rounded-[18px] w-[220px] gap-[11px]",
+        className: "fixed bottom-[100px] right-[25px] flex-col bg-[#ffffff] rounded-[18px] w-[220px] gap-[11px] filter drop-shadow-[0_0_1.3px_rgba(0,0,0,0.25)]",
         children: [
           /* @__PURE__ */ jsx10("div", { children: list.map((opt) => {
             const Icon = THEME_ICON[opt.key];
@@ -671,7 +667,7 @@ function ThemeSwitcher({ options }) {
               className: `hover:cursor-pointer flex text-[18px] text-[#3D4852] gap-[8px] items-center justify-center`,
               onClick: () => updateLanguage("Korean"),
               children: [
-                /* @__PURE__ */ jsx10(Us_default, {}),
+                /* @__PURE__ */ jsx10(Us_default, { width: 20 }),
                 "English"
               ]
             }
@@ -681,7 +677,7 @@ function ThemeSwitcher({ options }) {
               className: `hover:cursor-pointer flex text-[18px] text-[#3D4852] gap-[8px] items-center justify-center `,
               onClick: () => updateLanguage("English"),
               children: [
-                /* @__PURE__ */ jsx10(Kr_default, {}),
+                /* @__PURE__ */ jsx10(Kr_default, { width: 20 }),
                 "Korean"
               ]
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colbrush",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "A React theme switching library that makes it easy to apply color-blind accessible UI themes",
   "homepage": "https://colbrush.vercel.app",
   "repository": {
@@ -72,8 +72,9 @@
     "typescript": "^5.8.3"
   },
   "scripts": {
-    "svgr": "svgr src/assets --out-dir src/icons --typescript --expand-props end --svgo-config svgo.config.js",
+    "svgr": "svgr src/assets --out-dir src/icons --config-file svgr.config.cjs",
     "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",
+    "build:icons": "svgr src/assets --out-dir src/icons",
     "build": "pnpm svgr && tsup --config tsup.config.ts && pnpm build:css",
     "dev": "tsup --config tsup.config.ts --watch",
     "lint": "eslint ."