From 9d4b4ed7590244bea4a0ea47fddb998017f0e7b8 Mon Sep 17 00:00:00 2001
From: Nithishvb <Nithishvb@users.noreply.github.com>
Date: Fri, 25 Apr 2025 23:44:47 +0530
Subject: [PATCH] fix: style panel not detecting applied text color (shows
 "None")

---
 .../EditPanel/StylesTab/single/ColorInput/index.tsx    |  9 +++++++--
 packages/utility/src/color.ts                          | 10 ++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/index.tsx b/apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/index.tsx
index 78ac6f98a..0c83acd09 100644
--- a/apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/index.tsx
+++ b/apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/index.tsx
@@ -4,7 +4,7 @@ import { invokeMainChannel } from '@/lib/utils';
 import type { ColorItem } from '@/routes/editor/LayersPanel/BrandTab/ColorPanel/ColorPalletGroup';
 import { DEFAULT_COLOR_NAME, MainChannels } from '@onlook/models/constants';
 import { Icons } from '@onlook/ui/icons';
-import { Color, isColorEmpty } from '@onlook/utility';
+import { Color, isColorEmpty, resolveCssVariables } from '@onlook/utility';
 import { observer } from 'mobx-react-lite';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { BrandPopoverPicker } from './ColorBrandPicker';
@@ -98,12 +98,17 @@ const ColorInput = observer(
             }
             const newValue = elementStyle.getValue(editorEngine.style.selectedStyle?.styles);
 
+            const resolvedValue = resolveCssVariables(
+                newValue,
+                editorEngine.style.selectedStyle.styles,
+            );
+
             const color = editorEngine.theme.getColorByName(newValue);
             if (color) {
                 return Color.from(color);
             }
 
-            return Color.from(newValue);
+            return Color.from(resolvedValue);
         }, [editorEngine.style.selectedStyle?.styles, elementStyle, isFocused, editorEngine.theme]);
 
         // Update color state when getColor changes
diff --git a/packages/utility/src/color.ts b/packages/utility/src/color.ts
index 84edc3f31..d20b3c9b5 100644
--- a/packages/utility/src/color.ts
+++ b/packages/utility/src/color.ts
@@ -337,3 +337,13 @@ function rgb2hsv({ r, g, b }: { r: number; g: number; b: number }): {
     const h = c && (v === r ? (g - b) / c : v === g ? 2 + (b - r) / c : 4 + (r - g) / c);
     return { h: (h < 0 ? h + 6 : h) / 6, s: v && c / v, v };
 }
+
+export function resolveCssVariables(
+    valueWithVars: string,
+    styleRecord: Record<string, string>,
+    fallback = '1',
+): string {
+    return valueWithVars.replace(/var\((--[^)]+)\)/g, (_, varName: string) => {
+        return styleRecord[varName] ?? fallback;
+    });
+}