src/themes/carbon.py

"""IBM Carbon theme for gradio demos.

This version builds on top of the Carbon theme 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

carbon_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",
    ),
    text_size=gr.themes.Size(lg="28px", md="20px", sm="16px", xl="36px", xs="14px", xxl="42px", xxs="12px"),
    spacing_size=gr.themes.Size(lg="8px", md="6px", sm="4px", xl="10px", xs="2px", xxl="16px", xxs="1px"),
    radius_size=gr.themes.Size(lg="8px", md="6px", sm="4px", xl="10px", xs="2px", xxl="16px", xxs="1px"),
    font=["IBM Plex Sans", "ui-sans-serif", "system-ui", "sans-serif"],
    font_mono=["IBM Plex Mono", "ui-monospace", "Consolas", "monospace"],
).set(
    body_text_color="*neutral_800",  # Carbon primary text color #161616
    body_text_color_dark="*neutral_50",
    body_text_size="*text_sm",
    body_text_color_subdued="*neutral_300",
    body_text_color_subdued_dark="*neutral_500",
    body_text_weight="300",
    # Attributes to create cool gray 10 background color and white block background color
    embed_radius="*radius_md",
    background_fill_primary="*neutral_100",  # Coolgray10 background
    block_background_fill="white",
    block_border_color="*neutral_200",  # The border color around an block
    block_label_background_fill="white",  # The background color for the block label
    block_label_border_color="*neutral_100",  # The border color for the block label
    background_fill_secondary="*background_fill_primary",
    background_fill_secondary_dark="*neutral_950",
    border_color_accent="*neutral_100",
    border_color_accent_dark="*neutral_800",
    border_color_primary="*neutral_300",
    border_color_primary_dark="*neutral_800",
    # 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
    shadow_drop="*block_label_shadow",
    shadow_drop_lg="0px 1px 2px 0px rgba(0, 0, 0, 0.07)",
    shadow_inset="0px 2px 4px 0px rgba(0, 0, 0, 0.07) inset, 0px 0px 3px 0px rgba(0, 0, 0, 0.00) inset",
    shadow_spread="1px",
    chatbot_text_size="*text_sm",  # make it larger
    checkbox_background_color_hover="*neutral_50",
    checkbox_background_color_hover_dark="*neutral_50",
    checkbox_background_color_selected="*neutral_800",
    checkbox_background_color_selected_dark="*neutral_800",
    checkbox_border_color_selected="*neutral_950",
    checkbox_border_color_selected_dark="*neutral_950",
    checkbox_label_border_width="1px",
    checkbox_label_border_width_dark="1px",
    checkbox_label_padding="*spacing_xs",
    checkbox_label_text_size="*text_xs",
    input_background_fill="white",
    input_background_fill_dark="*neutral_800",
    input_border_color_focus="*primary_500",
    input_border_width="1px",
    input_border_width_dark="1px",
    input_padding="*spacing_lg",
    input_text_size="*text_sm",  # text size for the input filed
    button_large_padding="*spacing_sm",
    button_small_padding="*spacing_xxs",
    button_primary_border_color_dark="*primary_600",
    button_primary_border_color_hover_dark="*primary_700",
    button_primary_shadow="*shadow_drop",
    button_primary_shadow_hover="*shadow_drop_lg",
    button_secondary_background_fill="white",
    button_secondary_background_fill_hover="*neutral_600",
    button_secondary_border_color="*neutral_800",
    button_secondary_border_color_hover_dark="*neutral_700",
    button_secondary_shadow_hover="*shadow_drop_lg",
)