From 6cfe2630bc2a41c51930cf5716c46f93f804a812 Mon Sep 17 00:00:00 2001
From: Abbas Anandwala <abbas@10to8.com>
Date: Wed, 17 Dec 2025 16:31:34 +0530
Subject: [PATCH] fix(color): Preserve alpha/opacity in color formatting

---
 utils/color-converter.ts | 35 ++++++++++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/utils/color-converter.ts b/utils/color-converter.ts
index 21ce793dc..babb4834e 100644
--- a/utils/color-converter.ts
+++ b/utils/color-converter.ts
@@ -3,12 +3,24 @@ import { ColorFormat } from "../types";
 import { Hsl } from "culori";
 
 export const formatNumber = (num?: number) => {
-  if (!num) return "0";
-  return num % 1 === 0 ? num : num.toFixed(4);
+  if (num === undefined || num === null) return "0";
+  if (num === 0) return "0";
+  return num % 1 === 0 ? String(num) : num.toFixed(4);
+};
+
+const hasAlpha = (color: { alpha?: number }): boolean => {
+  return color.alpha !== undefined && color.alpha < 1;
 };
 
 export const formatHsl = (hsl: Hsl) => {
-  return `hsl(${formatNumber(hsl.h)} ${formatNumber(hsl.s * 100)}% ${formatNumber(hsl.l * 100)}%)`;
+  const h = formatNumber(hsl.h);
+  const s = formatNumber(hsl.s * 100);
+  const l = formatNumber(hsl.l * 100);
+
+  if (hasAlpha(hsl)) {
+    return `hsl(${h} ${s}% ${l}% / ${formatNumber(hsl.alpha)})`;
+  }
+  return `hsl(${h} ${s}% ${l}%)`;
 };
 
 export const colorFormatter = (
@@ -26,15 +38,28 @@ export const colorFormatter = (
         if (tailwindVersion === "4") {
           return formatHsl(hsl);
         }
-        return `${formatNumber(hsl.h)} ${formatNumber(hsl.s * 100)}% ${formatNumber(hsl.l * 100)}%`;
+        const base = `${formatNumber(hsl.h)} ${formatNumber(hsl.s * 100)}% ${formatNumber(hsl.l * 100)}%`;
+        if (hasAlpha(hsl)) {
+          return `${base} / ${formatNumber(hsl.alpha)}`;
+        }
+        return base;
       }
       case "rgb":
         return culori.formatRgb(color); // e.g., "rgb(64, 128, 192)"
       case "oklch": {
         const oklch = culori.converter("oklch")(color);
-        return `oklch(${formatNumber(oklch.l)} ${formatNumber(oklch.c)} ${formatNumber(oklch.h)})`;
+        const l = formatNumber(oklch.l);
+        const c = formatNumber(oklch.c);
+        const h = formatNumber(oklch.h);
+        if (hasAlpha(oklch)) {
+          return `oklch(${l} ${c} ${h} / ${formatNumber(oklch.alpha)})`;
+        }
+        return `oklch(${l} ${c} ${h})`;
       }
       case "hex":
+        if (hasAlpha(color)) {
+          return culori.formatHex8(color); // e.g., "#4080c0ff"
+        }
         return culori.formatHex(color); // e.g., "#4080c0"
       default:
         return colorValue;