Fixed the element color refresh to default color when color is deleted from brand panel

apps/studio/src/lib/editor/engine/style/index.ts

@@ -80,6 +80,22 @@ export class StyleManager {
     update(style: string, value: string) {
         const styleObj = { [style]: value };
         const action = this.getUpdateStyleAction(styleObj);
+
+        if (!value) {
+            const updatedTargets = action.targets.map((target) => ({
+                ...target,
+                change: {
+                    ...target.change,
+                    update: {
+                        [style]: {
+                            value: '',
+                            type: StyleChangeType.Value,
+                        },
+                    },
+                },
+            }));
+            action.targets = updatedTargets;
+        }
         this.editorEngine.action.run(action);
         this.updateStyleNoAction(styleObj);
     }

apps/studio/src/lib/editor/engine/theme/index.ts

@@ -335,6 +335,8 @@ export class ThemeManager {
 
             // Refresh colors after deletion
             this.scanConfig();
+
+            await this.editorEngine.webviews.reloadWebviews();
         } catch (error) {
             console.error('Error deleting color:', error);
         }
@@ -376,10 +378,10 @@ export class ThemeManager {
                 });
 
                 // Refresh colors after update
-                this.scanConfig();
+                await this.scanConfig();
 
                 // Force a theme refresh for all frames
-                await this.editorEngine.webviews.reloadWebviews();
+                this.editorEngine.webviews.reloadWebviews();
             }
         } catch (error) {
             console.error('Error updating color:', error);

apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/index.tsx

@@ -108,6 +108,21 @@ const ColorInput = observer(
 
         // Update color state when getColor changes
         const [color, setColor] = useState(getColor);
+
+        useEffect(() => {
+            const styles = editorEngine.style.selectedStyle?.styles || {};
+            const currentValue = elementStyle.getValue(styles);
+
+            if (currentValue && !currentValue.startsWith('#')) {
+                const colorExists = editorEngine.theme.getColorByName(currentValue);
+
+                if (!colorExists) {
+                    const defaultColor = Color.from(elementStyle.defaultValue);
+                    sendStyleUpdate(defaultColor);
+                }
+            }
+        }, [editorEngine.theme.colorGroups, editorEngine.theme.colorDefaults]);
+
         useEffect(() => {
             if (!isFocused) {
                 setColor(getColor);