Upload app.py

app.py

@@ -1218,7 +1218,7 @@ async def run_stage2_analysis_v2(
                 typography_preview_html = generate_typography_preview_html(desktop_typo_dict, primary_font)
             except Exception as preview_err:
                 state.log(f"   ⚠️ Preview generation failed: {str(preview_err)[:50]}")
-                typography_preview_html = "<div style='padding:20px;background:#f5f5f5;'>Preview unavailable</div>"
+                typography_preview_html = "<div class='placeholder-msg'>Preview unavailable</div>"
             
         except Exception as format_err:
             state.log(f"   ⚠️ Formatting failed: {str(format_err)[:100]}")
@@ -1452,23 +1452,31 @@ def format_scores_dashboard_v2(rule_results, final_synthesis, best_practices) ->
             return "#ef4444"  # Red
     
     html = f"""
-    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 20px 0;">
-        <div style="background: linear-gradient(135deg, {score_color(overall)}22 0%, {score_color(overall)}11 100%); 
-                    border: 2px solid {score_color(overall)}; border-radius: 12px; padding: 20px; text-align: center;">
+    <style>
+        .scores-grid {{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 20px 0; }}
+        .score-card {{ border-radius: 12px; padding: 20px; text-align: center; }}
+        .score-card-secondary {{ background: #f8fafc; border: 1px solid #e2e8f0; }}
+        .score-card .score-label {{ font-size: 12px; color: #64748b; margin-top: 4px; }}
+        .dark .score-card-secondary {{ background: #1e293b !important; border-color: #475569 !important; }}
+        .dark .score-card .score-label {{ color: #94a3b8 !important; }}
+    </style>
+    <div class="scores-grid">
+        <div class="score-card" style="background: linear-gradient(135deg, {score_color(overall)}22 0%, {score_color(overall)}11 100%);
+                    border: 2px solid {score_color(overall)};">
             <div style="font-size: 32px; font-weight: 700; color: {score_color(overall)};">{overall}</div>
-            <div style="font-size: 12px; color: #64748b; margin-top: 4px;">OVERALL</div>
+            <div class="score-label">OVERALL</div>
         </div>
-        <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; text-align: center;">
+        <div class="score-card score-card-secondary">
             <div style="font-size: 24px; font-weight: 600; color: {score_color(accessibility)};">{accessibility}</div>
-            <div style="font-size: 12px; color: #64748b; margin-top: 4px;">Accessibility</div>
+            <div class="score-label">Accessibility</div>
         </div>
-        <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; text-align: center;">
+        <div class="score-card score-card-secondary">
             <div style="font-size: 24px; font-weight: 600; color: {score_color(consistency)};">{consistency}</div>
-            <div style="font-size: 12px; color: #64748b; margin-top: 4px;">Consistency</div>
+            <div class="score-label">Consistency</div>
         </div>
-        <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; text-align: center;">
+        <div class="score-card score-card-secondary">
             <div style="font-size: 24px; font-weight: 600; color: {score_color(organization)};">{organization}</div>
-            <div style="font-size: 12px; color: #64748b; margin-top: 4px;">Organization</div>
+            <div class="score-label">Organization</div>
         </div>
     </div>
     """
@@ -1516,24 +1524,22 @@ def format_priority_actions_v2(rule_results, final_synthesis, best_practices) ->
         icon = "🔴" if impact == "high" else "🟡" if impact == "medium" else "🟢"
         
         html_items.append(f"""
-        <div style="background: white; border: 1px solid #e2e8f0; border-left: 4px solid {border_color}; 
-                    border-radius: 8px; padding: 16px; margin-bottom: 12px;">
+        <div class="priority-action-card" style="border-left: 4px solid {border_color};">
             <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                 <div>
-                    <div style="font-weight: 600; color: #1e293b; margin-bottom: 4px;">
+                    <div class="priority-action-title">
                         {icon} {action.get('action', 'N/A')}
                     </div>
-                    <div style="font-size: 13px; color: #64748b;">
+                    <div class="priority-action-detail">
                         {action.get('details', '')}
                     </div>
                 </div>
                 <div style="display: flex; gap: 8px;">
-                    <span style="background: {impact_bg}; color: {impact_text}; padding: 4px 8px; 
+                    <span style="background: {impact_bg}; color: {impact_text}; padding: 4px 8px;
                                  border-radius: 12px; font-size: 11px; font-weight: 600;">
                         {impact.upper()}
                     </span>
-                    <span style="background: #f1f5f9; color: #475569; padding: 4px 8px; 
-                                 border-radius: 12px; font-size: 11px;">
+                    <span class="priority-effort-badge">
                         {action.get('effort', '?')}
                     </span>
                 </div>
@@ -1542,8 +1548,21 @@ def format_priority_actions_v2(rule_results, final_synthesis, best_practices) ->
         """)
     
     return f"""
-    <div style="margin: 20px 0;">
-        <h3 style="margin-bottom: 16px; color: #1e293b;">🎯 Priority Actions</h3>
+    <style>
+        .priority-actions-wrap {{ margin: 20px 0; }}
+        .priority-actions-wrap h3 {{ margin-bottom: 16px; color: #1e293b; }}
+        .priority-action-card {{ background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; margin-bottom: 12px; }}
+        .priority-action-title {{ font-weight: 600; color: #1e293b; margin-bottom: 4px; }}
+        .priority-action-detail {{ font-size: 13px; color: #64748b; }}
+        .priority-effort-badge {{ background: #f1f5f9; color: #475569; padding: 4px 8px; border-radius: 12px; font-size: 11px; }}
+        .dark .priority-actions-wrap h3 {{ color: #f1f5f9 !important; }}
+        .dark .priority-action-card {{ background: #1e293b !important; border-color: #475569 !important; }}
+        .dark .priority-action-title {{ color: #f1f5f9 !important; }}
+        .dark .priority-action-detail {{ color: #94a3b8 !important; }}
+        .dark .priority-effort-badge {{ background: #334155 !important; color: #cbd5e1 !important; }}
+    </style>
+    <div class="priority-actions-wrap">
+        <h3>🎯 Priority Actions</h3>
         {''.join(html_items)}
     </div>
     """
@@ -1827,8 +1846,8 @@ def format_llm_color_recommendations_html(final_recs: dict, semantic_analysis: d
     
     if not final_recs:
         return '''
-        <div style="padding: 20px; background: #f0f0f0 !important; border-radius: 8px; text-align: center;">
-            <p style="color: #666 !important;">No LLM recommendations available yet. Run analysis first.</p>
+        <div class="placeholder-msg" style="text-align: center;">
+            <p>No LLM recommendations available yet. Run analysis first.</p>
         </div>
         '''
     
@@ -1837,9 +1856,13 @@ def format_llm_color_recommendations_html(final_recs: dict, semantic_analysis: d
     
     if not color_recs and not aa_fixes:
         return '''
-        <div style="padding: 20px; background: #d4edda !important; border-radius: 8px; border: 1px solid #28a745;">
-            <p style="color: #155724 !important; margin: 0;">✅ No color changes recommended. Your colors look good!</p>
+        <div class="llm-no-recs" style="padding: 20px; border-radius: 8px; border: 1px solid #28a745; background: #d4edda;">
+            <p style="margin: 0; color: #155724;">✅ No color changes recommended. Your colors look good!</p>
         </div>
+        <style>
+            .dark .llm-no-recs { background: #14532d !important; border-color: #22c55e !important; }
+            .dark .llm-no-recs p { color: #86efac !important; }
+        </style>
         '''
     
     # Build recommendations HTML
@@ -1930,9 +1953,13 @@ def format_llm_color_recommendations_html(final_recs: dict, semantic_analysis: d
     
     if not recs_html:
         return '''
-        <div style="padding: 20px; background: #d4edda !important; border-radius: 8px; border: 1px solid #28a745;">
-            <p style="color: #155724 !important; margin: 0;">✅ No color changes recommended. Your colors look good!</p>
+        <div class="llm-no-recs" style="padding: 20px; border-radius: 8px; border: 1px solid #28a745; background: #d4edda;">
+            <p style="margin: 0; color: #155724;">✅ No color changes recommended. Your colors look good!</p>
         </div>
+        <style>
+            .dark .llm-no-recs { background: #14532d !important; border-color: #22c55e !important; }
+            .dark .llm-no-recs p { color: #86efac !important; }
+        </style>
         '''
     
     html = f'''
@@ -2042,6 +2069,19 @@ def format_llm_color_recommendations_html(final_recs: dict, semantic_analysis: d
             color: #991b1b !important;
             font-weight: 500;
         }}
+
+        /* Dark mode */
+        .dark .llm-recs-container {{ background: #0f172a !important; }}
+        .dark .llm-rec-row {{ background: #1e293b !important; border-color: #475569 !important; }}
+        .dark .llm-rec-row.aa-fix {{ background: #450a0a !important; }}
+        .dark .llm-rec-row.keep {{ background: #14532d !important; }}
+        .dark .rec-label {{ color: #94a3b8 !important; }}
+        .dark .rec-hex {{ color: #cbd5e1 !important; }}
+        .dark .rec-arrow {{ color: #94a3b8 !important; }}
+        .dark .rec-role {{ color: #f1f5f9 !important; }}
+        .dark .rec-rationale {{ color: #94a3b8 !important; }}
+        .dark .rec-issue {{ color: #fca5a5 !important; }}
+        .dark .rec-action.keep {{ background: #14532d !important; color: #86efac !important; }}
     </style>
     
     <div class="llm-recs-container">
@@ -3029,6 +3069,7 @@ def create_ui():
     }
     th {
         background: #f1f5f9;
+        color: #1e293b;
         padding: 12px;
         text-align: left;
         font-weight: 600;
@@ -3036,9 +3077,27 @@ def create_ui():
     }
     td {
         padding: 12px;
+        color: #1e293b;
         border-bottom: 1px solid #e2e8f0;
     }
-    
+
+    /* Placeholder messages */
+    .placeholder-msg {
+        padding: 20px;
+        background: #f5f5f5;
+        border-radius: 8px;
+        color: #666;
+    }
+    .placeholder-msg.placeholder-lg {
+        padding: 40px;
+        text-align: center;
+    }
+
+    /* Progress bar */
+    .progress-bar {
+        background: #e2e8f0;
+    }
+
     /* Dark mode adjustments */
     .dark .stage-header {
         background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%);
@@ -3047,13 +3106,265 @@ def create_ui():
     .dark .stage-header h2 {
         color: #f1f5f9;
     }
+    .dark .stage-header-subtitle,
+    .dark .tip-text {
+        color: #94a3b8 !important;
+    }
     .dark .benchmark-card {
         background: #1e293b;
         border-color: #334155;
     }
     .dark .action-item {
         background: #1e293b;
-        border-color: #334155;
+        border-color: #475569;
+        color: #e2e8f0;
+    }
+    /* Dark mode: Placeholder messages */
+    .dark .placeholder-msg {
+        background: #1e293b !important;
+        color: #94a3b8 !important;
+    }
+    /* Dark mode: Progress bar */
+    .dark .progress-bar {
+        background: #334155 !important;
+    }
+    /* Dark mode: Gradio Dataframe tables */
+    .dark table th {
+        background: #1e293b !important;
+        color: #e2e8f0 !important;
+        border-bottom-color: #475569 !important;
+    }
+    .dark table td {
+        color: #e2e8f0 !important;
+        border-bottom-color: #334155 !important;
+    }
+    .dark table tr {
+        background: #0f172a !important;
+    }
+    .dark table tr:nth-child(even) {
+        background: #1e293b !important;
+    }
+    /* Dark mode: HTML preview tables (typography, benchmarks) */
+    .dark .typography-preview {
+        background: #1e293b !important;
+    }
+    .dark .typography-preview th {
+        background: #334155 !important;
+        color: #e2e8f0 !important;
+        border-bottom-color: #475569 !important;
+    }
+    .dark .typography-preview td {
+        color: #e2e8f0 !important;
+    }
+    .dark .typography-preview .meta-row {
+        background: #1e293b !important;
+        border-top-color: #334155 !important;
+    }
+    .dark .typography-preview .scale-name,
+    .dark .typography-preview .scale-label {
+        color: #f1f5f9 !important;
+        background: #475569 !important;
+    }
+    .dark .typography-preview .meta {
+        color: #cbd5e1 !important;
+    }
+    .dark .typography-preview .preview-cell {
+        background: #0f172a !important;
+        border-bottom-color: #334155 !important;
+    }
+    .dark .typography-preview .preview-text {
+        color: #f1f5f9 !important;
+    }
+    .dark .typography-preview tr:hover .preview-cell {
+        background: #1e293b !important;
+    }
+
+    /* Dark mode: Colors AS-IS preview */
+    .dark .colors-asis-header {
+        color: #e2e8f0 !important;
+        background: #1e293b !important;
+    }
+    .dark .colors-asis-preview {
+        background: #0f172a !important;
+    }
+    .dark .color-row-asis {
+        background: #1e293b !important;
+        border-color: #475569 !important;
+    }
+    .dark .color-name-asis {
+        color: #f1f5f9 !important;
+    }
+    .dark .frequency {
+        color: #cbd5e1 !important;
+    }
+    .dark .color-meta-asis .aa-pass {
+        color: #22c55e !important;
+        background: #14532d !important;
+    }
+    .dark .color-meta-asis .aa-fail {
+        color: #f87171 !important;
+        background: #450a0a !important;
+    }
+    .dark .context-badge {
+        background: #334155 !important;
+        color: #e2e8f0 !important;
+    }
+
+    /* Dark mode: Color ramps preview */
+    .dark .color-ramps-preview {
+        background: #0f172a !important;
+    }
+    .dark .ramps-header-info {
+        color: #e2e8f0 !important;
+        background: #1e293b !important;
+    }
+    .dark .ramp-header {
+        background: #1e293b !important;
+    }
+    .dark .ramp-header-label {
+        color: #cbd5e1 !important;
+    }
+    .dark .color-row {
+        background: #1e293b !important;
+        border-color: #475569 !important;
+    }
+    .dark .color-name {
+        color: #f1f5f9 !important;
+        background: #475569 !important;
+    }
+    .dark .color-hex {
+        color: #cbd5e1 !important;
+    }
+
+    /* Dark mode: Spacing preview */
+    .dark .spacing-asis-preview {
+        background: #0f172a !important;
+    }
+    .dark .spacing-row-asis {
+        background: #1e293b !important;
+    }
+    .dark .spacing-label {
+        color: #f1f5f9 !important;
+    }
+
+    /* Dark mode: Radius preview */
+    .dark .radius-asis-preview {
+        background: #0f172a !important;
+    }
+    .dark .radius-item {
+        background: #1e293b !important;
+    }
+    .dark .radius-label {
+        color: #f1f5f9 !important;
+    }
+
+    /* Dark mode: Shadows preview */
+    .dark .shadows-asis-preview {
+        background: #0f172a !important;
+    }
+    .dark .shadow-item {
+        background: #1e293b !important;
+    }
+    .dark .shadow-box {
+        background: #334155 !important;
+    }
+    .dark .shadow-label {
+        color: #f1f5f9 !important;
+    }
+    .dark .shadow-value {
+        color: #94a3b8 !important;
+    }
+
+    /* Dark mode: Semantic color ramps */
+    .dark .sem-ramps-preview {
+        background: #0f172a !important;
+    }
+    .dark .sem-category {
+        background: #1e293b !important;
+        border-color: #475569 !important;
+    }
+    .dark .sem-cat-title {
+        color: #f1f5f9 !important;
+        border-bottom-color: #475569 !important;
+    }
+    .dark .sem-color-row {
+        background: #0f172a !important;
+        border-color: #334155 !important;
+    }
+    .dark .sem-role {
+        color: #f1f5f9 !important;
+    }
+    .dark .sem-hex {
+        color: #cbd5e1 !important;
+    }
+    .dark .llm-rec {
+        background: #422006 !important;
+        border-color: #b45309 !important;
+    }
+    .dark .rec-label {
+        color: #fbbf24 !important;
+    }
+    .dark .rec-issue {
+        color: #fde68a !important;
+    }
+    .dark .rec-arrow {
+        color: #fbbf24 !important;
+    }
+    .dark .llm-summary {
+        background: #1e3a5f !important;
+        border-color: #3b82f6 !important;
+    }
+    .dark .llm-summary h4 {
+        color: #93c5fd !important;
+    }
+    .dark .llm-summary ul,
+    .dark .llm-summary li {
+        color: #bfdbfe !important;
+    }
+
+    /* Dark mode: Score badges */
+    .dark .score-badge.high { background: #14532d; color: #86efac; }
+    .dark .score-badge.medium { background: #422006; color: #fde68a; }
+    .dark .score-badge.low { background: #450a0a; color: #fca5a5; }
+
+    /* Dark mode: Benchmark & action cards */
+    .dark .benchmark-card.selected {
+        border-color: #3b82f6;
+        background: #1e3a5f;
+    }
+    .dark .action-item.high-priority {
+        border-left-color: #ef4444;
+    }
+    .dark .action-item.medium-priority {
+        border-left-color: #f59e0b;
+    }
+
+    /* Dark mode: Gradio markdown rendered tables */
+    .dark .prose table th,
+    .dark .markdown-text table th {
+        background: #1e293b !important;
+        color: #e2e8f0 !important;
+        border-color: #475569 !important;
+    }
+    .dark .prose table td,
+    .dark .markdown-text table td {
+        color: #e2e8f0 !important;
+        border-color: #334155 !important;
+    }
+    .dark .prose table tr,
+    .dark .markdown-text table tr {
+        background: #0f172a !important;
+    }
+    .dark .prose table tr:nth-child(even),
+    .dark .markdown-text table tr:nth-child(even) {
+        background: #1e293b !important;
+    }
+
+    /* Dark mode: Generic text in HTML components */
+    .dark .gradio-html p,
+    .dark .gradio-html span,
+    .dark .gradio-html div {
+        color: #e2e8f0;
     }
     """
     
@@ -3182,42 +3493,42 @@ def create_ui():
                 with gr.Tab("🔤 Typography"):
                     gr.Markdown("*Actual typography rendered with the detected font*")
                     stage1_typography_preview = gr.HTML(
-                        value="<div style='padding: 20px; background: #f5f5f5; border-radius: 8px; color: #666;'>Typography preview will appear after extraction...</div>",
+                        value="<div class='placeholder-msg'>Typography preview will appear after extraction...</div>",
                         label="Typography Preview"
                     )
                 
                 with gr.Tab("🎨 Colors"):
                     gr.Markdown("*All detected colors (AS-IS — no generated ramps)*")
                     stage1_colors_preview = gr.HTML(
-                        value="<div style='padding: 20px; background: #f5f5f5; border-radius: 8px; color: #666;'>Colors preview will appear after extraction...</div>",
+                        value="<div class='placeholder-msg'>Colors preview will appear after extraction...</div>",
                         label="Colors Preview"
                     )
                 
                 with gr.Tab("🧠 Semantic Colors"):
                     gr.Markdown("*Colors categorized by usage: Brand, Text, Background, Border, Feedback*")
                     stage1_semantic_preview = gr.HTML(
-                        value="<div style='padding: 20px; background: #f5f5f5; border-radius: 8px; color: #666;'>Semantic color analysis will appear after extraction...</div>",
+                        value="<div class='placeholder-msg'>Semantic color analysis will appear after extraction...</div>",
                         label="Semantic Colors Preview"
                     )
                 
                 with gr.Tab("📏 Spacing"):
                     gr.Markdown("*All detected spacing values*")
                     stage1_spacing_preview = gr.HTML(
-                        value="<div style='padding: 20px; background: #f5f5f5; border-radius: 8px; color: #666;'>Spacing preview will appear after extraction...</div>",
+                        value="<div class='placeholder-msg'>Spacing preview will appear after extraction...</div>",
                         label="Spacing Preview"
                     )
                 
                 with gr.Tab("🔘 Radius"):
                     gr.Markdown("*All detected border radius values*")
                     stage1_radius_preview = gr.HTML(
-                        value="<div style='padding: 20px; background: #f5f5f5; border-radius: 8px; color: #666;'>Radius preview will appear after extraction...</div>",
+                        value="<div class='placeholder-msg'>Radius preview will appear after extraction...</div>",
                         label="Radius Preview"
                     )
                 
                 with gr.Tab("🌑 Shadows"):
                     gr.Markdown("*All detected box shadow values*")
                     stage1_shadows_preview = gr.HTML(
-                        value="<div style='padding: 20px; background: #f5f5f5; border-radius: 8px; color: #666;'>Shadows preview will appear after extraction...</div>",
+                        value="<div class='placeholder-msg'>Shadows preview will appear after extraction...</div>",
                         label="Shadows Preview"
                     )
             
@@ -3235,7 +3546,7 @@ def create_ui():
             gr.HTML("""
             <div class="stage-header">
                 <h2>🧠 Stage 2: Multi-Agent Analysis</h2>
-                <p style="color: #64748b; margin-top: 4px;">Rule Engine + Benchmark Research + LLM Agents</p>
+                <p class="stage-header-subtitle" style="color: #64748b; margin-top: 4px;">Rule Engine + Benchmark Research + LLM Agents</p>
             </div>
             """)
             
@@ -3282,7 +3593,7 @@ def create_ui():
                 )
                 
                 gr.Markdown("""
-                <small style="color: #64748b;">
+                <small class="tip-text" style="color: #64748b;">
                 💡 <b>Tip:</b> Select 2-4 benchmarks for best results. More benchmarks = longer analysis time.
                 <br>
                 📦 Results are cached for 24 hours to speed up subsequent analyses.
@@ -3322,7 +3633,7 @@ def create_ui():
             gr.Markdown("## 📊 Analysis Results")
             
             scores_dashboard = gr.HTML(
-                value="<div style='padding: 40px; background: #f8fafc; border-radius: 12px; text-align: center; color: #94a3b8;'>Scores will appear after analysis...</div>",
+                value="<div class='placeholder-msg placeholder-lg'>Scores will appear after analysis...</div>",
                 label="Scores"
             )
             
@@ -3330,7 +3641,7 @@ def create_ui():
             # PRIORITY ACTIONS
             # =============================================================
             priority_actions_html = gr.HTML(
-                value="<div style='padding: 20px; background: #f8fafc; border-radius: 8px; color: #94a3b8;'>Priority actions will appear after analysis...</div>",
+                value="<div class='placeholder-msg'>Priority actions will appear after analysis...</div>",
                 label="Priority Actions"
             )
             
@@ -3363,7 +3674,7 @@ def create_ui():
             
             with gr.Accordion("👁️ Typography Visual Preview", open=True):
                 stage2_typography_preview = gr.HTML(
-                    value="<div style='padding: 20px; background: #f5f5f5; border-radius: 8px; color: #666;'>Typography preview will appear after analysis...</div>",
+                    value="<div class='placeholder-msg'>Typography preview will appear after analysis...</div>",
                     label="Typography Preview"
                 )
             
@@ -3410,7 +3721,7 @@ def create_ui():
                 """)
                 
                 llm_color_recommendations = gr.HTML(
-                    value="<div style='padding: 20px; background: #f5f5f5; border-radius: 8px; color: #666;'>LLM recommendations will appear after analysis...</div>",
+                    value="<div class='placeholder-msg'>LLM recommendations will appear after analysis...</div>",
                     label="LLM Recommendations"
                 )
                 
@@ -3426,7 +3737,7 @@ def create_ui():
             # Visual Preview
             with gr.Accordion("👁️ Color Ramps Visual Preview (Semantic Groups)", open=True):
                 stage2_color_ramps_preview = gr.HTML(
-                    value="<div style='padding: 20px; background: #f5f5f5; border-radius: 8px; color: #666;'>Color ramps preview will appear after analysis...</div>",
+                    value="<div class='placeholder-msg'>Color ramps preview will appear after analysis...</div>",
                     label="Color Ramps Preview"
                 )