add brand color picker

apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/border.tsx

@@ -21,23 +21,21 @@ export const Border = () => {
     const [activeTab, setActiveTab] = useState('all');
     const { boxState, handleBoxChange, handleUnitChange, handleIndividualChange } =
         useBoxControl('border');
-    const [borderColor, setBorderColor] = useState(
-        Color.from(
-            editorEngine.style.selectedStyle?.styles.computed.borderColor ?? '#080808',
-        ).toHex(),
-    );
+    const [borderColor, setBorderColor] = useState<string>('#080808');
 
     useEffect(() => {
-        setBorderColor(
-            Color.from(
-                editorEngine.style.selectedStyle?.styles.computed.borderColor ?? '#080808',
-            ).toHex(),
-        );
+        const color = editorEngine.style.selectedStyle?.styles.computed.borderColor;        
+        if (color) {
+            setBorderColor(
+                Color.from(
+                    color ?? '#080808',
+                ).toHex(),
+            );
+        }
     }, [editorEngine.style.selectedStyle?.styles.computed.borderColor]);
 
     const handleColorChange = (color: string) => {
         setBorderColor(color);
-        editorEngine.style.update('borderColor', color);
     };
 
     const borderStyle = {
@@ -122,7 +120,7 @@ export const Border = () => {
                         (boxState.borderLeftWidth.num ?? 0) > 0)
                 ) && (
                     <div className="mt-3">
-                        <InputColor color={borderColor} onColorChange={handleColorChange} />
+                        <InputColor color={borderColor} elementStyleKey="borderColor" onColorChange={handleColorChange} />
                     </div>
                 )}
             </DropdownMenuContent>

apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/color-background.tsx

@@ -6,26 +6,43 @@ import { Popover, PopoverContent, PopoverTrigger } from '@onlook/ui/popover';
 import { Color } from '@onlook/utility';
 import { useEffect, useState } from 'react';
 import { ColorPickerContent } from '../inputs/color-picker';
-
+import { useColorUpdate } from '../hooks/use-color-update';
+import type { TailwindColor } from '@onlook/models';
 export const ColorBackground = () => {
-    const [tempColor, setTempColor] = useState('#000000');
+    const [tempColor, setTempColor] = useState<Color>(Color.from('#000000'));
+
+    const { handleColorUpdate } = useColorUpdate({
+        elementStyleKey: 'backgroundColor'
+    });
 
     const editorEngine = useEditorEngine();
 
     useEffect(() => {
-        setTempColor(
-            editorEngine.style.selectedStyle?.styles.computed.backgroundColor ?? '#000000',
-        );
+        const color = editorEngine.style.selectedStyle?.styles.computed.backgroundColor;
+        if (color) {
+            setTempColor(Color.from(color));
+        }
     }, [editorEngine.style.selectedStyle?.styles.computed.backgroundColor]);
 
-    const handleColorChange = (newColor: Color) => {
-        setTempColor(newColor.toHex());
+    const handleColorChange = (newColor: Color | TailwindColor) => {
+        try {
+            setTempColor(newColor instanceof Color ? newColor : Color.from(newColor.lightColor));
+        } catch (error) {
+            console.error('Error converting color:', error);
+        }
     };
 
-    const handleColorChangeEnd = (newColor: Color) => {
-        const hexColor = newColor.toHex();
-        setTempColor(hexColor);
-        editorEngine.style.update('backgroundColor', hexColor);
+    const handleColorChangeEnd = (newColor: Color | TailwindColor) => {
+        try {
+            if (newColor instanceof Color) {
+                setTempColor(newColor);
+            } else {
+                setTempColor(Color.from(newColor.lightColor));
+            }
+            handleColorUpdate(newColor);
+        } catch (error) {
+            console.error('Error converting color:', error);
+        }
     };
 
     return (
@@ -36,7 +53,7 @@ export const ColorBackground = () => {
                         <Icons.PaintBucket className="h-2 w-2" />
                         <div
                             className="h-[4px] w-6 rounded-full bg-current"
-                            style={{ backgroundColor: tempColor }}
+                            style={{ backgroundColor: tempColor?.toHex() }}
                         />
                     </div>
                 </PopoverTrigger>
@@ -46,7 +63,7 @@ export const ColorBackground = () => {
                     align="start"
                 >
                     <ColorPickerContent
-                        color={Color.from(tempColor)}
+                        color={tempColor}
                         onChange={handleColorChange}
                         onChangeEnd={handleColorChangeEnd}
                     />

apps/web/client/src/app/project/[id]/_components/editor-bar/hooks/use-color-update.ts

@@ -0,0 +1,48 @@
+import { useEditorEngine } from '@/components/store/editor';
+import { DEFAULT_COLOR_NAME } from '@onlook/constants';
+import type { TailwindColor } from '@onlook/models/style';
+import { Color } from '@onlook/utility';
+import { useCallback } from 'react';
+
+interface ColorUpdateOptions {
+    elementStyleKey: string;
+    onValueChange?: (key: string, value: string) => void;
+}
+
+
+export const useColorUpdate = ({ elementStyleKey, onValueChange }: ColorUpdateOptions) => {
+    const editorEngine = useEditorEngine();
+
+    const handleColorUpdate = useCallback(
+        (newValue: Color | TailwindColor) => {
+            try {
+                if (newValue instanceof Color) {
+                    // Handle direct Color object updates
+                    const valueString = newValue.toHex();
+                    editorEngine.style.update(elementStyleKey, valueString);
+                    onValueChange?.(elementStyleKey, valueString);
+                } else {
+                    // Handle custom color updates
+                    let colorValue = newValue.originalKey;
+
+                    // Handle default color case
+                    if (colorValue.endsWith(DEFAULT_COLOR_NAME)) {
+                        colorValue = colorValue.split(`-${DEFAULT_COLOR_NAME}`)?.[0] ?? '';
+                    }
+
+                    // Update the style with custom color
+                    editorEngine.style.updateCustom(elementStyleKey, colorValue);
+                    onValueChange?.(elementStyleKey, newValue.lightColor);
+                }
+            } catch (error) {
+                console.error('Error updating color:', error);
+                // You might want to add error handling UI feedback here
+            }
+        },
+        [editorEngine.style, elementStyleKey, onValueChange]
+    );
+
+    return {
+        handleColorUpdate
+    };
+}; 

apps/web/client/src/app/project/[id]/_components/editor-bar/hooks/use-text-control.ts

@@ -84,7 +84,6 @@ export const useTextControl = () => {
             ...prev,
             textColor,
         }));
-        editorEngine.style.update('color', textColor);
     };
 
     return {