Spaces:
Running
Running
File size: 2,541 Bytes
e1e9580 | 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 | """
Custom Gradio Theme for Security Auditor
Based on design mockups in assets/ folder
"""
import gradio as gr
def create_security_auditor_theme():
"""
Create Anthropic.com-inspired theme for Security Auditor.
Color Palette:
- Background: Light cream #faf9f6 (Anthropic-inspired)
- Primary Text: Dark slate #131314
- Accent: Warm terracotta #d97757
- Cards: Pure white #ffffff
- Borders: Light gray #e5e7eb
Design Philosophy:
- Minimalist, clean aesthetic with generous whitespace
- Neutral palette with warm accents
- Subtle borders, no heavy shadows
- Accessibility-focused
"""
theme = gr.themes.Soft(
primary_hue=gr.themes.colors.orange,
secondary_hue=gr.themes.colors.neutral,
neutral_hue=gr.themes.colors.neutral,
font=[
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"sans-serif"
],
font_mono=[
"ui-monospace",
"SF Mono",
"Monaco",
"Cascadia Code",
"monospace"
]
).set(
# Background colors
body_background_fill="#faf9f6", # Light cream
body_background_fill_dark="#131314", # Dark mode fallback
# Block/Card styling
block_background_fill="#ffffff",
block_border_width="1px",
block_border_color="#e5e7eb",
block_shadow="none", # Minimal shadows
block_radius="8px", # Smaller radius for cleaner look
# Button styling - Anthropic style
button_primary_background_fill="#d97757", # Warm terracotta
button_primary_background_fill_hover="#cc6944", # Darker terracotta
button_primary_text_color="#ffffff",
button_primary_border_color="#d97757",
button_secondary_background_fill="transparent", # Minimal secondary
button_secondary_background_fill_hover="rgba(217, 119, 87, 0.1)",
button_secondary_text_color="#131314",
button_secondary_border_color="#e5e7eb",
# Input styling
input_background_fill="#ffffff",
input_border_width="1px",
input_border_color="#e5e7eb",
input_shadow="none",
input_radius="6px",
# Text colors
body_text_color="#131314", # Dark slate
body_text_color_subdued="#6b7280", # Medium gray
# Link colors
link_text_color="#d97757",
link_text_color_hover="#cc6944"
)
return theme
|