From 3e16793615c68e07a12e7e9e4bc32c775c30525e Mon Sep 17 00:00:00 2001 From: tegwick Date: Mon, 27 Oct 2025 23:00:42 +0100 Subject: [PATCH] feat: implement systematic CSS naming convention for editor elements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Naming Convention: SCOPE-COMPONENT-ELEMENT-SUBELEMENT - ui = User Interface (editor controls, panels, buttons) - dc = Document Content (typography, layout) - md = Mode (light/dark color schemes) - br = Branding (accent colors, corporate styling) New CSS Classes: - ui-edit-floater-panel (main floating control panel) - ui-edit-floater-header (panel header area) - ui-edit-floater-actions (button container) - ui-edit-floater-status (status display) - ui-edit-button (all action buttons) - ui-edit-button-accept (save/accept buttons) - ui-edit-button-cancel (cancel buttons) - ui-edit-button-reset (reset buttons) - ui-edit-section-frame (editable section borders) - ui-edit-textarea-main (text editing areas) Updated Theme CSS: - All UI themes now target systematic class names - Granular control over specific button types - Consistent theming across all editor components - Better separation of concerns (panel vs buttons vs textareas) Benefits: - Easy theme targeting with predictable class names - Scalable for future UI components - Clear hierarchy and naming consistency - Maintainable and extensible architecture 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- markitect/clean_document_manager.py | 59 ++++++++++++++++++++--------- 1 file changed, 42 insertions(+), 17 deletions(-) diff --git a/markitect/clean_document_manager.py b/markitect/clean_document_manager.py index 388cdf6a..32e92668 100644 --- a/markitect/clean_document_manager.py +++ b/markitect/clean_document_manager.py @@ -301,33 +301,46 @@ class CleanDocumentManager: ui_css = "" if props.get('editor_panel_bg'): ui_css = f""" - .markitect-edit-mode #markitect-global-controls {{ + .markitect-edit-mode .ui-edit-floater-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 .control-btn {{ + .markitect-edit-mode .ui-edit-floater-header {{ + color: {props.get('editor_text_color', '#212529')}; + }} + .markitect-edit-mode .ui-edit-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 .control-btn:hover {{ + .markitect-edit-mode .ui-edit-button:hover {{ background: {props.get('editor_button_hover', '#e9ecef')}; }} - .markitect-edit-mode .control-btn:active, - .markitect-edit-mode .control-btn.active {{ + .markitect-edit-mode .ui-edit-button:active, + .markitect-edit-mode .ui-edit-button.active {{ background: {props.get('editor_button_active', '#dee2e6')}; }} - .markitect-edit-mode .markitect-section-editable {{ + .markitect-edit-mode .ui-edit-button-accept {{ + background: {props.get('editor_button_bg', '#4caf50')}; + }} + .markitect-edit-mode .ui-edit-button-cancel {{ + background: {props.get('editor_button_bg', '#f44336')}; + }} + .markitect-edit-mode .ui-edit-button-reset {{ + background: {props.get('editor_button_bg', '#ff9800')}; + }} + .markitect-edit-mode .ui-edit-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 textarea {{ + .markitect-edit-mode .ui-edit-textarea {{ border: 1px solid {props.get('editor_panel_border', '#dee2e6')}; color: {props.get('editor_text_color', '#212529')}; + background: {props.get('editor_button_bg', '#ffffff')}; }} - .markitect-edit-mode textarea:focus {{ + .markitect-edit-mode .ui-edit-textarea:focus {{ border-color: {props.get('editor_focus_color', '#0066cc')}; box-shadow: 0 0 0 2px {props.get('editor_focus_color', '#0066cc')}33; }}""" @@ -1021,7 +1034,7 @@ class DOMRenderer { return; } - const sectionElement = event.target.closest('.markitect-section-editable'); + const sectionElement = event.target.closest('.ui-edit-section'); if (!sectionElement) return; const sectionId = sectionElement.getAttribute('data-section-id'); @@ -1057,6 +1070,7 @@ class DOMRenderer { `; const textarea = document.createElement('textarea'); + textarea.className = 'ui-edit-textarea ui-edit-textarea-main'; textarea.value = content; textarea.style.cssText = ` flex: 1; @@ -1085,6 +1099,16 @@ class DOMRenderer { const createButton = (text, color, handler) => { const btn = document.createElement('button'); btn.textContent = text; + + // Add CSS classes based on button type + btn.className = 'ui-edit-button'; + if (text.includes('Accept')) { + btn.className += ' ui-edit-button-accept'; + } else if (text.includes('Cancel')) { + btn.className += ' ui-edit-button-cancel'; + } else if (text.includes('Reset')) { + btn.className += ' ui-edit-button-reset'; + } btn.style.cssText = ` padding: 8px 12px; border: none; @@ -1145,7 +1169,7 @@ class DOMRenderer { } setupSectionElement(element) { - element.className = 'markitect-section-editable'; + element.className = 'ui-edit-section ui-edit-section-frame'; element.style.cssText = ` margin: 16px 0; padding: 12px; @@ -1327,16 +1351,17 @@ class MarkitectCleanEditor { addGlobalControls() { // Create floating control panel const panel = document.createElement('div'); - panel.id = 'markitect-global-controls'; + panel.id = 'ui-edit-floater'; + panel.className = 'ui-edit-floater-panel'; panel.innerHTML = ` -
+

📝 Editor

-
Ready
+
Ready
-
- - - +
+ + +
`;