src/ui/theme.py

"""Gradio theme + global CSS for the recipe-card look."""
from __future__ import annotations

import gradio as gr

theme = gr.themes.Soft(
    primary_hue="orange",
    neutral_hue="stone",
    font=[gr.themes.GoogleFont("Inter"), "sans-serif"],
    font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "monospace"],
)


CSS = """
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');

/* ---------------------------------------------------------------------------
   Force a warm light palette regardless of the browser/system dark mode.
   We pin the parchment background, so we must also pin DARK text colours via
   Gradio's CSS variables — otherwise dark-mode users get white text on the
   light background and it disappears.
--------------------------------------------------------------------------- */
.gradio-container, .gradio-container.dark {
  background: #f5ecd9 !important;
  color-scheme: light !important;

  --body-text-color: #4a3722;
  --body-text-color-subdued: #7a5a35;
  --block-title-text-color: #6b4a2a;
  --block-label-text-color: #6b4a2a;
  --block-info-text-color: #7a5a35;
  --block-background-fill: #fffbf0;
  --input-background-fill: #fffbf0;
  --border-color-primary: #d8c9ad;
  --color-accent-soft: #fbe2d2;
}

/* Blanket dark text for native Gradio text elements (covers dark mode) */
.gradio-container,
.gradio-container .prose,
.gradio-container label,
.gradio-container .gr-text,
.gradio-container span,
.gradio-container p,
.gradio-container .gr-check-radio label,
.gradio-container .wrap,
.gradio-container .gr-form,
.gradio-container .tab-nav button,
.gradio-container .gr-accordion,
.gradio-container input,
.gradio-container textarea {
  color: #4a3722 !important;
}

.gradio-container .prose h1,
.gradio-container .prose h2,
.gradio-container .prose h3 { font-family: 'Lora', serif !important; color: #6b4a2a !important; }

/* Tabs: dark labels, terracotta active */
.gradio-container .tab-nav button { color: #6b4a2a !important; }
.gradio-container .tab-nav button.selected {
  color: #a85c2a !important; border-bottom-color: #a85c2a !important;
}

/* Native blocks (inputs, radio, checkbox, number) on warm cards */
.gradio-container .block,
.gradio-container .form,
.gradio-container input[type="text"],
.gradio-container input[type="number"] {
  background: #fffbf0 !important;
  border-color: #d8c9ad !important;
}

/* Generic container shared by every HTMLComponent */
.cwm-card {
  border: 1px solid #d8c9ad;
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: 0 8px 24px rgba(107, 74, 42, 0.08);
}
button.primary, .gr-button-primary {
  background: #a85c2a !important;
  color: #fffbf0 !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  padding: 12px 22px !important;
}
"""