Spaces:
Running
Running
File size: 6,972 Bytes
ef3faba 6997fc5 ef3faba 6997fc5 ef3faba |
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 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 |
"""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=["IBM Plex Sans", "ui-sans-serif", "system-ui", "sans-serif"], # update font
font_mono=["IBM Plex Mono", "ui-monospace", "Consolas", "monospace"], # 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
)
|