From 6dd278c5387d37013f16fbe7ae75ecfad2aa694c Mon Sep 17 00:00:00 2001
From: tegwick <bernd.worsch@gmail.com>
Date: Mon, 27 Oct 2025 22:33:51 +0100
Subject: [PATCH] feat: implement UI theme CSS generation for editor interface
 styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added UI theme CSS generation to _generate_layered_css method
- UI themes now style editor control panels, buttons, frames, and textareas
- Editor elements styled with CSS classes:
  - .markitect-control-panel (floating editor panel)
  - .markitect-editor-button (action buttons)
  - .markitect-section-frame (editing section borders)
  - .markitect-edit-textarea (text editing areas)

UI Theme Examples:
- Greyscale: Clean grey interface with subtle shadows
- Electric: Cyberpunk cyan/navy with glowing effects
- Psychedelic: Rainbow gradient panels with hot pink accents
- Standard: Professional clean interface (default)

All UI themes properly inherit from theme properties:
- editor_panel_bg, editor_panel_border
- editor_button_bg/hover/active
- editor_text_color, editor_focus_color, editor_shadow

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 markitect/clean_document_manager.py | 37 ++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/markitect/clean_document_manager.py b/markitect/clean_document_manager.py
index 0c2f7910..95e76d18 100644
--- a/markitect/clean_document_manager.py
+++ b/markitect/clean_document_manager.py
@@ -297,7 +297,42 @@ class CleanDocumentManager:
                 opacity: 0.8;
             }}"""
 
-        return f"<style>{base_css}{heading_css}{text_css}{element_css}{link_css}{accent_css}</style>"
+        # UI theme styling for editor interface elements
+        ui_css = ""
+        if props.get('editor_panel_bg'):
+            ui_css = f"""
+            .markitect-edit-mode .markitect-control-panel {{
+                background: {props['editor_panel_bg']};
+                border: 1px solid {props.get('editor_panel_border', '#dee2e6')};
+                box-shadow: 0 4px 12px {props.get('editor_shadow', 'rgba(0,0,0,0.1)')};
+                color: {props.get('editor_text_color', '#212529')};
+            }}
+            .markitect-edit-mode .markitect-editor-button {{
+                background: {props.get('editor_button_bg', '#ffffff')};
+                color: {props.get('editor_text_color', '#212529')};
+                border: 1px solid {props.get('editor_panel_border', '#dee2e6')};
+            }}
+            .markitect-edit-mode .markitect-editor-button:hover {{
+                background: {props.get('editor_button_hover', '#e9ecef')};
+            }}
+            .markitect-edit-mode .markitect-editor-button:active,
+            .markitect-edit-mode .markitect-editor-button.active {{
+                background: {props.get('editor_button_active', '#dee2e6')};
+            }}
+            .markitect-edit-mode .markitect-section-frame {{
+                border: 2px solid {props.get('editor_focus_color', '#0066cc')};
+                box-shadow: 0 0 0 3px {props.get('editor_focus_color', '#0066cc')}33;
+            }}
+            .markitect-edit-mode .markitect-edit-textarea {{
+                border: 1px solid {props.get('editor_panel_border', '#dee2e6')};
+                color: {props.get('editor_text_color', '#212529')};
+            }}
+            .markitect-edit-mode .markitect-edit-textarea:focus {{
+                border-color: {props.get('editor_focus_color', '#0066cc')};
+                box-shadow: 0 0 0 2px {props.get('editor_focus_color', '#0066cc')}33;
+            }}"""
+
+        return f"<style>{base_css}{heading_css}{text_css}{element_css}{link_css}{accent_css}{ui_css}</style>"
 
     def _get_legacy_template_css(self, template: str) -> str:
         """Legacy CSS generation - kept for backward compatibility."""