visuals.py

"""The visual identity for Wisp's floral code playground."""

import gradio as gr


def make_theme():
    # Keep the paper palette consistent even when the host prefers dark mode.
    colors = {
        "body_background_fill": "#f8f6ef",
        "body_text_color": "#233c33",
        "body_text_color_subdued": "#647168",
        "background_fill_primary": "#fffdf7",
        "background_fill_secondary": "#f1f0e7",
        "border_color_primary": "#d8dcd1",
        "border_color_accent": "#387153",
        "block_background_fill": "#fffdf7",
        "block_border_color": "#d8dcd1",
        "block_label_background_fill": "#fffdf7",
        "block_label_text_color": "#324d40",
        "block_title_text_color": "#324d40",
        "input_background_fill": "#fffdf7",
        "input_background_fill_focus": "#ffffff",
        "input_background_fill_hover": "#fffdf7",
        "input_border_color": "#d8dcd1",
        "input_border_color_focus": "#387153",
        "input_placeholder_color": "#788379",
        "code_background_fill": "#e8eddf",
        "button_primary_background_fill": "#285740",
        "button_primary_background_fill_hover": "#183f2b",
        "button_primary_border_color": "#285740",
        "button_primary_border_color_hover": "#183f2b",
        "button_primary_text_color": "#ffffff",
        "button_primary_text_color_hover": "#ffffff",
        "button_secondary_background_fill": "#fffdf7",
        "button_secondary_background_fill_hover": "#edf0e4",
        "button_secondary_border_color": "#d8dcd1",
        "button_secondary_border_color_hover": "#387153",
        "button_secondary_text_color": "#324d40",
        "button_secondary_text_color_hover": "#233c33",
        "checkbox_background_color": "#fffdf7",
        "checkbox_background_color_selected": "#285740",
        "checkbox_border_color": "#98a99a",
        "checkbox_border_color_selected": "#285740",
        "checkbox_label_background_fill": "#fffdf7",
        "checkbox_label_background_fill_hover": "#edf0e4",
        "checkbox_label_background_fill_selected": "#e5ecda",
        "checkbox_label_border_color": "#d8dcd1",
        "checkbox_label_border_color_hover": "#98a99a",
        "checkbox_label_border_color_selected": "#387153",
        "checkbox_label_text_color": "#324d40",
        "checkbox_label_text_color_selected": "#233c33",
        "slider_color": "#387153",
    }
    both_modes = {key: value for key, value in colors.items()}
    both_modes.update({f"{key}_dark": value for key, value in colors.items()})
    return gr.themes.Base(
        primary_hue="green", secondary_hue="pink", neutral_hue="stone",
        font=["Arial", "Helvetica", "sans-serif"],
        font_mono=["SFMono-Regular", "Consolas", "Liberation Mono", "monospace"],
        radius_size="sm",
    ).set(**both_modes)