theme.py

"""
Soft Professional Tech Theme for Sequential Thinking MCP App
Clean, modern aesthetic with teal-gray accents, soft gradients, and professional typography.
"""

from typing import Iterable
from gradio.themes import Soft
from gradio.themes.utils import colors, fonts, sizes

# Primary accent color - Teal Gray
# A sophisticated blue-teal that works well in both light and dark modes
colors.teal_gray = colors.Color(
    name="teal_gray",
    c50="#e8f1f4",   # Lightest - backgrounds
    c100="#cddde3",  # Light accents
    c200="#a8c3cf",  # Subtle highlights
    c300="#7da6b8",  # Secondary text
    c400="#588aa2",  # Primary buttons
    c500="#3d6e87",  # Base accent color
    c600="#335b70",  # Hover states
    c700="#2b495a",  # Dark mode accents
    c800="#2c5364",  # Dark backgrounds
    c900="#233f4b",  # Darker backgrounds
    c950="#1b323c",  # Darkest
)

# Cancel/destructive action color - Muted Red Gray
# Less aggressive than pure red, better for professional UIs
colors.red_gray = colors.Color(
    name="red_gray",
    c50="#f7eded",
    c100="#f5dcdc",
    c200="#efb4b4",
    c300="#e78f8f",
    c400="#d96a6a",  # Cancel button background
    c500="#c65353",  # Cancel button hover
    c600="#b24444",
    c700="#8f3434",  # Dark mode cancel
    c800="#732d2d",
    c900="#5f2626",
    c950="#4d2020",
)


class SoftProfessionalTheme(Soft):
    """
    Soft Professional Tech Theme
    
    A clean, modern theme with teal-gray accents, soft gradients,
    and professional typography. Suitable for chat apps, dashboards,
    and any professional-grade Gradio application.
    """
    def __init__(
            self,
            *,
            primary_hue: colors.Color | str = colors.gray,
            secondary_hue: colors.Color | str = colors.teal_gray,
            neutral_hue: colors.Color | str = colors.slate,
            text_size: sizes.Size | str = sizes.text_md,
            font: fonts.Font | str | Iterable[fonts.Font | str] = (
                fonts.GoogleFont("Inconsolata"),
                "Arial",
                "sans-serif",
            ),
            font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
                fonts.GoogleFont("IBM Plex Mono"),
                "ui-monospace",
                "monospace",
            ),
    ):
        super().__init__(
            primary_hue=primary_hue,
            secondary_hue=secondary_hue,
            neutral_hue=neutral_hue,
            text_size=text_size,
            font=font,
            font_mono=font_mono,
        )
        super().set(
            # === BACKGROUNDS ===
            # Soft diagonal gradient for body - creates depth without distraction
            body_background_fill="linear-gradient(135deg, *primary_200, *primary_100)",
            body_background_fill_dark="linear-gradient(135deg, *primary_900, *primary_800)",
            background_fill_primary="*primary_50",
            background_fill_primary_dark="*primary_900",

            # === PRIMARY BUTTONS ===
            # Teal-gray gradient buttons with proper hover states
            button_primary_text_color="white",
            button_primary_text_color_hover="black",
            button_primary_background_fill="linear-gradient(90deg, *secondary_400, *secondary_400)",
            button_primary_background_fill_hover="linear-gradient(90deg, *secondary_300, *secondary_300)",
            button_primary_background_fill_dark="linear-gradient(90deg, *secondary_600, *secondary_800)",
            button_primary_background_fill_hover_dark="linear-gradient(90deg, *secondary_500, *secondary_500)",
            button_primary_shadow="*shadow_drop_lg",

            # === SECONDARY BUTTONS ===
            # Subtle gray gradient for secondary actions
            button_secondary_text_color="black",
            button_secondary_text_color_hover="white",
            button_secondary_background_fill="linear-gradient(90deg, *primary_300, *primary_300)",
            button_secondary_background_fill_hover="linear-gradient(90deg, *primary_400, *primary_400)",
            button_secondary_background_fill_dark="linear-gradient(90deg, *primary_500, *primary_600)",
            button_secondary_background_fill_hover_dark="linear-gradient(90deg, *primary_500, *primary_500)",

            # === CANCEL/STOP BUTTONS ===
            # Muted red-gray for less aggressive cancel actions
            button_cancel_background_fill=f"linear-gradient(90deg, {colors.red_gray.c400}, {colors.red_gray.c500})",
            button_cancel_background_fill_dark=f"linear-gradient(90deg, {colors.red_gray.c700}, {colors.red_gray.c800})",
            button_cancel_background_fill_hover=f"linear-gradient(90deg, {colors.red_gray.c500}, {colors.red_gray.c600})",
            button_cancel_background_fill_hover_dark=f"linear-gradient(90deg, {colors.red_gray.c800}, {colors.red_gray.c900})",
            button_cancel_text_color="white",
            button_cancel_text_color_dark="white",
            button_cancel_text_color_hover="white",
            button_cancel_text_color_hover_dark="white",

            # === SLIDERS ===
            slider_color="*secondary_300",
            slider_color_dark="*secondary_600",

            # === BLOCKS & CONTAINERS ===
            block_title_text_weight="600",
            block_border_width="3px",
            block_shadow="*shadow_drop_lg",
            block_label_background_fill="*primary_200",

            # === BUTTONS GENERAL ===
            button_large_padding="11px",

            # === ACCENTS ===
            color_accent_soft="*primary_100",
        )


# Export theme instance for easy import
soft_professional_theme = SoftProfessionalTheme()