File size: 4,862 Bytes
b376f12 eb379b7 b376f12 |
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 |
"""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_700",
# 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",
)
|