@conscience-technology/ctds 0.1.12 → 0.1.13

package/assets/components/Spinner/lottieColor.ts

@@ -8,34 +8,49 @@
 
 export type Rgb = [number, number, number];
 
+/** oklch(L C H) → sRGB [r,g,b] 0~1. L은 0~1, C는 0~0.4, H는 degree.
+ *  CTDS 토큰이 전부 oklch라 브라우저 Canvas 미지원을 우회하기 위해 수동 변환. */
+function oklchToRgb(L: number, C: number, Hdeg: number): Rgb {
+  const H = (Hdeg * Math.PI) / 180;
+  const a = C * Math.cos(H);
+  const b = C * Math.sin(H);
+  // OKLab → linear sRGB (Björn Ottosson)
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+  const r = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+  const g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+  const bl = -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s;
+  // linear → sRGB gamma
+  const toSrgb = (x: number) => {
+    const c = Math.max(0, Math.min(1, x));
+    return c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+  };
+  return [toSrgb(r), toSrgb(g), toSrgb(bl)];
+}
+
 /** CSS 색 문자열 → [r,g,b] 0~1 정규화. 서버에서는 null 반환.
- *  getComputedStyle이 oklch()를 그대로 반환하는 브라우저가 많아, Canvas 2D fillStyle에
- *  던져 브라우저가 sRGB hex로 정규화해주는 트릭을 사용. Canvas가 못 받으면 "#000"이 유지되므로
- *  rgb() 폴백 파싱. */
+ *  oklch()는 수동 변환(브라우저 Canvas가 oklch 입력을 받지 못하는 경우가 많음).
+ *  rgb()/rgba()/#hex는 그대로 파싱. */
 export function parseCssColor(css: string): Rgb | null {
   if (typeof document === "undefined") return null;
-  const canvas = document.createElement("canvas");
-  canvas.width = canvas.height = 1;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) return null;
-  // 센티넬로 "#000"을 먼저 넣고 입력 시도 — Canvas가 입력을 못 받으면 "#000"이 그대로 유지됨.
-  ctx.fillStyle = "#000";
-  try {
-    ctx.fillStyle = css;
-  } catch {
-    // 일부 브라우저는 invalid color 시 예외 throw
-  }
-  const normalized = ctx.fillStyle as string;
-  const hex = /^#([0-9a-f]{6})$/i.exec(normalized);
-  if (hex) {
-    const n = parseInt(hex[1], 16);
-    return [((n >> 16) & 0xff) / 255, ((n >> 8) & 0xff) / 255, (n & 0xff) / 255];
-  }
-  // Canvas가 못 받으면 rgba()/rgb() 문자열일 수 있음 → 숫자 파싱
-  const m = normalized.match(/-?\d+(\.\d+)?/g);
-  if (m && m.length >= 3 && !normalized.startsWith("oklch") && !normalized.startsWith("color(")) {
-    return [+m[0] / 255, +m[1] / 255, +m[2] / 255];
+  const trimmed = css.trim();
+  // oklch(L C H) 또는 oklch(L C H / A) — 수동 변환
+  const oklchMatch = /^oklch\(\s*([^\s,/)]+)[\s,]+([^\s,/)]+)[\s,]+([^\s,/)]+)/i.exec(trimmed);
+  if (oklchMatch) {
+    const parsePart = (s: string, scale: number) =>
+      s.endsWith("%") ? (parseFloat(s) / 100) * scale : parseFloat(s);
+    const L = parsePart(oklchMatch[1], 1);
+    const C = parsePart(oklchMatch[2], 0.4);
+    const H = parseFloat(oklchMatch[3]);
+    if ([L, C, H].every((v) => Number.isFinite(v))) return oklchToRgb(L, C, H);
   }
+  // rgb() / rgba() / #hex — 숫자 파싱 (CSS Typed OM 없이 간단히)
+  const m = trimmed.match(/-?\d+(\.\d+)?/g);
+  if (m && m.length >= 3) return [+m[0] / 255, +m[1] / 255, +m[2] / 255];
   return null;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conscience-technology/ctds",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "CTDS — 하이브리드 디자인 시스템 설치 · 온보딩 CLI",
   "type": "module",
   "bin": {