fix: carbon theme sizing and more design feedback

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

src/app.css

@@ -4,7 +4,7 @@ footer {
 }
 /* Make the text in the input box and chat label bigger */
 textarea, .wrapper > label {
-    font-size: 20px;
+    font-size: var(--text-md)
 }
 .input-container {
     align-items: center;
@@ -31,9 +31,11 @@ textarea, .wrapper > label {
     height: 42px;
     width: 42px;
     margin-right: 1rem;
-    margin-bottom: -6px;
     filter: invert(0%) sepia(0%) saturate(7459%) hue-rotate(154deg) brightness(96%) contrast(100%);
 }
+.gr_title h1 {
+    margin: auto !important;
+}
 /* Color the Granite icon in white for dark mode */
 @media (prefers-color-scheme: dark) {
     .gr_title img {
@@ -55,6 +57,6 @@ textarea, .wrapper > label {
     margin-bottom: auto;
 }
 /* Centre the values in advanced settings */
-.tab-like-container > input {
-    margin-top: 0.15rem;
+.tab-like-container  {
+    align-items: center;
 }

src/app.py

@@ -10,7 +10,7 @@ import spaces
 import torch
 from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
 
-from themes.carbon import carbon_theme
+from themes.carbon import theme
 
 today_date = datetime.today().strftime("%B %-d, %Y")  # noqa: DTZ002
 
@@ -125,9 +125,7 @@ max_new_tokens_slider = gr.Slider(
 )
 chat_interface_accordion = gr.Accordion(label="Advanced Settings", open=False)
 
-with gr.Blocks(
-    fill_height=True, css_paths=css_file_path, head_paths=head_file_path, theme=carbon_theme, title=TITLE
-) as demo:
+with gr.Blocks(fill_height=True, css_paths=css_file_path, head_paths=head_file_path, theme=theme, title=TITLE) as demo:
     gr.HTML(
         f"<img src='https://www.ibm.com/granite/docs/images/granite-pictogram.svg'/><h1>{TITLE}</h1>",
         elem_classes=["gr_title"],

src/themes/carbon.py

@@ -6,8 +6,9 @@ Bee.
 """
 
 import gradio as gr
+from gradio.themes.utils import sizes
 
-carbon_theme = gr.themes.Base(
+theme = gr.themes.Base(
     primary_hue=gr.themes.Color(
         c100="#EDF5FF",
         c200="#D0E2FF",
@@ -47,9 +48,9 @@ carbon_theme = gr.themes.Base(
         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"),
+    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"],
 ).set(
@@ -66,6 +67,7 @@ carbon_theme = gr.themes.Base(
     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_margin="*spacing_md",
     background_fill_secondary="*background_fill_primary",
     background_fill_secondary_dark="*neutral_950",
     border_color_accent="*neutral_100",
@@ -85,7 +87,7 @@ carbon_theme = gr.themes.Base(
     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
+    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",