feat: update to latest version of the carbon theme

Signed-off-by: Graham White <[email protected]>

src/themes/carbon.py

@@ -48,32 +48,81 @@ theme = gr.themes.Base(
         c900="#21272A",
         c950="#121619",
     ),
-    text_size=sizes.text_lg,
-    spacing_size=sizes.spacing_md,
-    radius_size=sizes.radius_md,
-    font=["IBM Plex Sans", "ui-sans-serif", "system-ui", "sans-serif"],
-    font_mono=["IBM Plex Mono", "ui-monospace", "Consolas", "monospace"],
+    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_lg,  # 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(
-    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",
+    # Colors
     background_fill_primary="*neutral_100",  # Coolgray10 background
+    background_fill_primary_dark="*neutral_950",  # Coolgray95 background for dark mode
+    slider_color="*primary_600",  # Blue60
+    slider_color_dark="*primary_500",  # Blue50
+    # 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_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
+    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="600",
+    block_title_text_color="black",
+    block_title_text_color_dark="white",
     block_label_margin="*spacing_md",
-    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",
+    # Inputs
+    input_background_fill="white",
+    input_border_color="*neutral_100",
+    input_shadow="*shadow_drop",
+    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",
+    button_primary_background_fill="*primary_600",
+    button_primary_background_fill_hover="*primary_500",
+    button_primary_background_fill_hover_dark="*primary_500",
+    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",
@@ -83,37 +132,15 @@ theme = gr.themes.Base(
     # 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 related font
     chatbot_text_size="*text_md",  # 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",
+    # 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
 )