fix: style panel not detecting applied text color (shows "None")

Author: Nithishvb

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

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;
+    });
+}