sparkle-design-cli 1.1.1 → 1.1.2

package/lib/generate-css.js

@@ -3,6 +3,7 @@
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import { oklch } from 'culori';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -188,67 +189,27 @@ function hexToRgba(hex) {
  */
 function hexToOklch(hex) {
         // #を削除
-        hex = hex.replace('#', '');
+        const cleanHex = hex.replace('#', '');
 
         // 3桁の場合は6桁に拡張
-        if (hex.length === 3) {
-                hex = hex
-                        .split('')
-                        .map((char) => char + char)
-                        .join('');
-        }
-
-        const r = parseInt(hex.substring(0, 2), 16) / 255;
-        const g = parseInt(hex.substring(2, 4), 16) / 255;
-        const b = parseInt(hex.substring(4, 6), 16) / 255;
+        const fullHex = cleanHex.length === 3
+                ? cleanHex.split('').map(char => char + char).join('')
+                : cleanHex;
 
-        // sRGBからLinear RGBに変換
-        function srgbToLinear(c) {
-                return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-        }
-
-        const linearR = srgbToLinear(r);
-        const linearG = srgbToLinear(g);
-        const linearB = srgbToLinear(b);
-
-        // Linear RGBからXYZ（D65）への変換
-        const x = linearR * 0.4124564 + linearG * 0.3575761 + linearB * 0.1804375;
-        const y = linearR * 0.2126729 + linearG * 0.7151522 + linearB * 0.0721750;
-        const z = linearR * 0.0193339 + linearG * 0.1191920 + linearB * 0.9503041;
-
-        // XYZからOKLabへの変換
-        function f(t) {
-                const c1 = 0.8359375;      // 3^3/29^3
-                const c2 = 0.2109375;      // 1/3^3
-                const c3 = 29 / (6 ** 3);  // 29/6^3
+        // culoriを使用してHEXからOKLCHに変換
+        const oklchColor = oklch(`#${fullHex}`);
 
-                return t > c1 ? Math.cbrt(t) : c2 * t + c3;
+        if (!oklchColor) {
+                console.warn(`⚠️ 色の変換に失敗しました: ${hex}`);
+                return `oklch(0 0 0)`;
         }
 
-        const l = 0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z;
-        const m = 0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z;
-        const s = 0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z;
-
-        const fL = f(l);
-        const fM = f(m);
-        const fS = f(s);
-
-        const L = 0.2104542553 * fL + 0.7936177850 * fM - 0.0040720468 * fS;
-        const a = 1.9779984951 * fL - 2.4285922050 * fM + 0.4505937099 * fS;
-        const b_lab = 0.0259040371 * fL + 0.7827717662 * fM - 0.8086757660 * fS;
-
-        // OKLabからOKLCHへの変換
-        const lightness = L;
-        const chroma = Math.sqrt(a * a + b_lab * b_lab);
-        let hue = Math.atan2(b_lab, a) * 180 / Math.PI;
-        if (hue < 0) hue += 360;
-
-        // 精度を調整して出力（少数点以下4桁で丸める）
-        const l_rounded = Math.round(lightness * 10000) / 10000;
-        const c_rounded = Math.round(chroma * 10000) / 10000;
-        const h_rounded = chroma < 0.0001 ? 0 : Math.round(hue * 10) / 10;
+        // 精度を調整して出力
+        const l = Math.round((oklchColor.l || 0) * 10000) / 10000;
+        const c = Math.round((oklchColor.c || 0) * 10000) / 10000;
+        const h = oklchColor.h ? Math.round(oklchColor.h * 10) / 10 : 0;
 
-        return `oklch(${l_rounded} ${c_rounded} ${h_rounded})`;
+        return `oklch(${l} ${c} ${h})`;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkle-design-cli",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Sparkle Design CSS Generator - デザインシステムCSSを設定ファイルから生成するツール",
   "main": "lib/generate-css.js",
   "type": "module",
@@ -24,10 +24,10 @@
   "author": "Goodpatch Inc. <sparkle-design@goodpatch.com>",
   "license": "MIT",
   "devDependencies": {
-    "power-assert": "^1.6.1",
+    "@eslint/js": "^8.57.0",
     "eslint": "^8.57.0",
-    "prettier": "^3.2.5",
-    "@eslint/js": "^8.57.0"
+    "power-assert": "^1.6.1",
+    "prettier": "^3.2.5"
   },
   "files": [
     "bin/",
@@ -35,5 +35,8 @@
     "templates/",
     "README.md",
     "LICENSE"
-  ]
+  ],
+  "dependencies": {
+    "culori": "^4.0.2"
+  }
 }