File size: 5,673 Bytes
a1a5a09 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | """
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()
|