src/themes/research_monochrome.py

"""IBM Research Monochrome theme for gradio demos.

This version is a variation of CarbonSoft style, where the primary button is dark gray to create monochrome style. This
version uses the style from Research demos such as Bee to make it more playful with rounded corners, a larger font
family to enhance readability, and the IBM Cool Gray color palette for better consistency with other IBM Research demos,
such as Bee.
"""

import gradio as gr
from gradio.themes.utils import sizes

theme = gr.themes.Base(
    primary_hue=gr.themes.Color(
        c100="#EDF5FF",
        c200="#D0E2FF",
        c300="#A6C8FF",
        c400="#78A9FF",
        c50="#F9F9FB",
        c500="#4589FF",
        c600="#0F62FE",
        c700="#0043CE",
        c800="#002D9C",
        c900="#001D6C",
        c950="#001141",
    ),
    secondary_hue=gr.themes.Color(
        c100="#EDF5FF",
        c200="#D0E2FF",
        c300="#A6C8FF",
        c400="#78A9FF",
        c50="#F9F9FB",
        c500="#4589FF",
        c600="#0F62FE",
        c700="#0043CE",
        c800="#002D9C",
        c900="#001D6C",
        c950="#001141",
    ),
    neutral_hue=gr.themes.Color(
        c100="#F2F4F8",
        c200="#DDE1E6",
        c300="#C1C7CD",
        c400="#A2A9B0",
        c50="#F9F9FB",
        c500="#878D96",
        c600="#697077",
        c700="#4D5358",
        c800="#393939",
        c900="#21272A",
        c950="#121619",
    ),
    spacing_size=sizes.spacing_md,  # change spacing to default size
    radius_size=sizes.radius_md,  # change spacing to default size and Keep Radius to make demo feel more playful
    text_size=sizes.text_md,  # change fontsize to default size
    #   spacing_size: sizes.Size | str = sizes.spacing_md,  #change spacing to default size
    #         radius_size: sizes.Size | str = sizes.radius_md, #change spacing to default size and Keep Radius to make
    #                                                           demo feel more playful
    #         text_size: sizes.Size | str = sizes.text_lg, #change fontsize to default size
    font=gr.themes.GoogleFont("IBM Plex Sans"),  # update font
    font_mono=gr.themes.GoogleFont("IBM Plex Mono"),  # update font
).set(
    # Colors
    background_fill_primary="*neutral_100",  # Coolgray10 background
    background_fill_primary_dark="*neutral_950",  # Coolgray95 background for dark mode
    # Change blue to black to create monochrome style
    slider_color="*neutral_900",
    slider_color_dark="*primary_500",
    # Shadows
    shadow_drop="0 1px 4px 0 rgb(0 0 0 / 0.1)",
    shadow_drop_lg="0 2px 5px 0 rgb(0 0 0 / 0.1)",
    # Block Labels
    block_background_fill="white",
    block_label_background_fill="white",  # same color as blockback gound fill
    block_label_radius="*radius_md",
    block_label_text_size="*text_md",
    block_label_text_weight="600",
    block_label_text_color="black",
    block_label_text_color_dark="white",
    block_title_radius="*block_label_radius",
    block_title_background_fill="*block_label_background_fill",
    block_title_text_weight="400",
    block_title_text_color="black",
    block_title_text_color_dark="white",
    block_label_margin="*spacing_md",
    # Inputs
    input_background_fill="white",
    input_background_fill_dark="*block-background-fill",
    input_border_color="*neutral_100",
    input_shadow="*shadow_drop",
    input_shadow_dark="0 1px 4px #000",
    input_shadow_focus="*shadow_drop_lg",
    checkbox_shadow="none",
    # Buttons
    shadow_spread="6px",
    button_primary_shadow="*shadow_drop_lg",
    button_primary_shadow_hover="*shadow_drop_lg",
    button_primary_shadow_active="*shadow_inset",
    button_secondary_shadow="*shadow_drop_lg",
    button_secondary_shadow_hover="*shadow_drop_lg",
    button_secondary_shadow_active="*shadow_inset",
    checkbox_label_shadow="*shadow_drop_lg",
    # Change blue to black to create monochrome style
    button_primary_background_fill="*neutral_900",
    button_primary_background_fill_dark="*neutral_600",
    button_primary_background_fill_hover="*neutral_700",
    button_primary_background_fill_hover_dark="*primary_500",  # hover to be blue
    button_primary_text_color="white",
    button_secondary_background_fill="white",
    button_secondary_background_fill_hover="*neutral_100",
    button_secondary_background_fill_dark="*neutral_800",  # Secondary cool gray 80
    button_secondary_background_fill_hover_dark="*primary_500",
    button_secondary_text_color="*neutral_800",
    button_cancel_background_fill="*button_secondary_background_fill",
    button_cancel_background_fill_hover="*button_secondary_background_fill_hover",
    button_cancel_background_fill_hover_dark="*button_secondary_background_fill_hover",
    button_cancel_text_color="*button_secondary_text_color",
    checkbox_label_background_fill_selected="*primary_200",
    checkbox_label_background_fill_selected_dark="*primary_500",
    checkbox_border_width="1px",
    checkbox_border_color="*neutral_200",
    checkbox_background_color_dark="*neutral_700",  # Jan 18 test to fix checkbox, radio button background color
    checkbox_background_color_selected="*primary_600",
    checkbox_background_color_selected_dark="*primary_500",
    checkbox_border_color_focus="*primary_600",
    checkbox_border_color_focus_dark="*primary_500",
    checkbox_border_color_selected="*primary_600",
    checkbox_border_color_selected_dark="*primary_500",
    checkbox_label_text_color_selected="black",
    # Borders
    block_border_width="1px",  # test example border
    panel_border_width="1px",
    # Chatbubble related colors
    # light
    # color_accent = "*secondary_400",
    border_color_accent_subdued="*color_accent_soft",  # chatbubble human border color, use Blue 20 as an accent color
    color_accent_soft="*secondary_200",  # chatbubble human color
    # darkmode
    # chatbubble human border color in darkmode, use Blue 20 as an accent color
    border_color_accent_subdued_dark="*secondary_500",
    color_accent_soft_dark="*secondary_500",  # chatbubble human color in dark mode
    # Chatbot related font
    chatbot_text_size="*text_md",  # make it larger
    # additional dark mode related tweaks:
    # block_background_fill_dark="*neutral_950", # Jan 18 test coolgray95 background for dark mode
    block_label_background_fill_dark="*neutral_800",  # same color as blockback gound fill
    block_title_background_fill_dark="*block_label_background_fill",
    # input_background_fill_dark="*neutral_800", #This attribute help match fill color cool gray 80 to match background
    #                                             however cause the problem for the general theme.
    #  input_shadow_dark="*shadow_drop", #Test if it could make the border without the color
    # input_border_color_dark="*neutral_200",#add attribute for border Jan 18
    checkbox_border_color_dark="*neutral_600",  # Jan 18 test to fix border
)