@fakhrirafiki/theme-engine 0.4.5 → 0.4.7

package/dist/index.js

@@ -3983,6 +3983,29 @@ function ThemeScript({ presetStorageKey = "theme-preset", defaultPreset }) {
             if (rgb) return toTriplet(rgbToHsl(rgb.r, rgb.g, rgb.b));
           }
 
+          // Any other CSS color (e.g. oklch(...), named colors) -> resolve via computed styles.
+          try {
+            const probe = document.createElement('span');
+            probe.style.color = trimmed;
+            probe.style.position = 'absolute';
+            probe.style.left = '-9999px';
+            probe.style.top = '-9999px';
+            probe.style.visibility = 'hidden';
+            document.documentElement.appendChild(probe);
+            const computed = getComputedStyle(probe).color; // rgb(...) or rgba(...)
+            probe.remove();
+
+            const match = computed && computed.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/i);
+            if (match) {
+              const r = clamp(parseFloat(match[1]) || 0, 0, 255);
+              const g = clamp(parseFloat(match[2]) || 0, 0, 255);
+              const b = clamp(parseFloat(match[3]) || 0, 0, 255);
+              return toTriplet(rgbToHsl(r, g, b));
+            }
+          } catch (e) {
+            // ignore and fall through
+          }
+
           return value;
         }
 
@@ -4255,7 +4278,31 @@ function normalizeColorValueToHslTriplet(value) {
   if (parsedHsl) return formatHSL(parsedHsl, false);
   const parsedRgb = parseHex(trimmed);
   if (parsedRgb) return formatHSL(rgbToHsl(parsedRgb), false);
-  return value;
+  if (typeof document !== "undefined") {
+    try {
+      if (trimmed.startsWith("var(")) return trimmed;
+      const probe = document.createElement("span");
+      probe.style.color = trimmed;
+      probe.style.position = "absolute";
+      probe.style.left = "-9999px";
+      probe.style.top = "-9999px";
+      probe.style.visibility = "hidden";
+      document.documentElement.appendChild(probe);
+      const computed = getComputedStyle(probe).color;
+      probe.remove();
+      const match = computed.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
+      if (match) {
+        const r = Number(match[1]);
+        const g = Number(match[2]);
+        const b = Number(match[3]);
+        if (Number.isFinite(r) && Number.isFinite(g) && Number.isFinite(b)) {
+          return formatHSL(rgbToHsl({ r, g, b }), false);
+        }
+      }
+    } catch {
+    }
+  }
+  return trimmed;
 }
 function ThemeProvider({
   children,

package/dist/index.mjs

@@ -3940,6 +3940,29 @@ function ThemeScript({ presetStorageKey = "theme-preset", defaultPreset }) {
             if (rgb) return toTriplet(rgbToHsl(rgb.r, rgb.g, rgb.b));
           }
 
+          // Any other CSS color (e.g. oklch(...), named colors) -> resolve via computed styles.
+          try {
+            const probe = document.createElement('span');
+            probe.style.color = trimmed;
+            probe.style.position = 'absolute';
+            probe.style.left = '-9999px';
+            probe.style.top = '-9999px';
+            probe.style.visibility = 'hidden';
+            document.documentElement.appendChild(probe);
+            const computed = getComputedStyle(probe).color; // rgb(...) or rgba(...)
+            probe.remove();
+
+            const match = computed && computed.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/i);
+            if (match) {
+              const r = clamp(parseFloat(match[1]) || 0, 0, 255);
+              const g = clamp(parseFloat(match[2]) || 0, 0, 255);
+              const b = clamp(parseFloat(match[3]) || 0, 0, 255);
+              return toTriplet(rgbToHsl(r, g, b));
+            }
+          } catch (e) {
+            // ignore and fall through
+          }
+
           return value;
         }
 
@@ -4212,7 +4235,31 @@ function normalizeColorValueToHslTriplet(value) {
   if (parsedHsl) return formatHSL(parsedHsl, false);
   const parsedRgb = parseHex(trimmed);
   if (parsedRgb) return formatHSL(rgbToHsl(parsedRgb), false);
-  return value;
+  if (typeof document !== "undefined") {
+    try {
+      if (trimmed.startsWith("var(")) return trimmed;
+      const probe = document.createElement("span");
+      probe.style.color = trimmed;
+      probe.style.position = "absolute";
+      probe.style.left = "-9999px";
+      probe.style.top = "-9999px";
+      probe.style.visibility = "hidden";
+      document.documentElement.appendChild(probe);
+      const computed = getComputedStyle(probe).color;
+      probe.remove();
+      const match = computed.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
+      if (match) {
+        const r = Number(match[1]);
+        const g = Number(match[2]);
+        const b = Number(match[3]);
+        if (Number.isFinite(r) && Number.isFinite(g) && Number.isFinite(b)) {
+          return formatHSL(rgbToHsl({ r, g, b }), false);
+        }
+      }
+    } catch {
+    }
+  }
+  return trimmed;
 }
 function ThemeProvider({
   children,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fakhrirafiki/theme-engine",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "description": "Elegant theming system with smooth transitions, custom presets, semantic accent colors, and complete shadcn/ui support for modern React applications",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",