| """Shared visual language for the atlas and annotation workspace.""" |
| from html import escape |
| from pathlib import Path |
|
|
| import gradio as gr |
|
|
| APP_CSS = (Path(__file__).resolve().parent / "app.css").read_text() |
|
|
|
|
| def atlas_theme(): |
| green = gr.themes.colors.Color( |
| c50="#f1f6ed", c100="#e0eedc", c200="#c5ddc8", c300="#a4cebb", |
| c400="#72b295", c500="#40916f", c600="#287557", c700="#1d5c45", |
| c800="#173c30", c900="#102e24", c950="#0b211a") |
| stone = gr.themes.colors.Color( |
| c50="#fafbf6", c100="#f3f5ec", c200="#e1e7d9", c300="#cfd9c8", |
| c400="#9dac97", c500="#72816d", c600="#586b55", c700="#40543f", |
| c800="#2c422e", c900="#1c3222", c950="#112317") |
| theme = gr.themes.Base(primary_hue=green, secondary_hue=green, neutral_hue=stone, |
| font=["Arial", "Helvetica", "sans-serif"], |
| font_mono=["ui-monospace", "Consolas", "monospace"]) |
| theme.set( |
| body_background_fill="#fcfcf8", body_text_color="#173c30", body_text_color_subdued="#647467", |
| background_fill_primary="#ffffff", background_fill_secondary="#f3f5ec", |
| border_color_primary="#dbe3d3", border_color_accent="#72b295", |
| color_accent="#287557", color_accent_soft="#e0eedc", |
| link_text_color="#287557", link_text_color_hover="#173c30", link_text_color_visited="#287557", |
| block_background_fill="#f7f8f0", block_border_color="#dbe3d3", block_border_width="1px", |
| block_label_background_fill="#f7f8f0", block_label_text_color="#52694f", |
| block_title_text_color="#254735", block_label_text_size="12px", block_title_text_size="13px", |
| block_label_text_weight="500", block_title_text_weight="600", |
| block_radius="14px", block_padding="16px", layout_gap="18px", |
| input_background_fill="#ffffff", input_border_color="#cfdcc9", input_border_width="1px", |
| input_border_color_focus="#40916f", input_border_color_hover="#9db89d", |
| input_placeholder_color="#788673", input_radius="10px", input_padding="12px 14px", |
| input_shadow_focus="0 0 0 3px #40916f20", |
| button_primary_background_fill="#245d45", button_primary_background_fill_hover="#173c30", |
| button_primary_border_color="#245d45", button_primary_border_color_hover="#173c30", |
| button_primary_text_color="#ffffff", button_primary_text_color_hover="#ffffff", |
| button_secondary_background_fill="#edf3e7", button_secondary_background_fill_hover="#deead6", |
| button_secondary_border_color="#cfdcc9", button_secondary_text_color="#315641", |
| button_large_radius="12px", button_small_radius="20px", button_border_width="1px", |
| checkbox_label_background_fill="#ffffff", checkbox_label_background_fill_selected="#deead6", |
| checkbox_label_border_color="#dbe3d3", checkbox_label_border_color_selected="#86b396", |
| checkbox_label_text_color_selected="#254735", checkbox_background_color_selected="#287557", |
| checkbox_border_color_selected="#287557", slider_color="#40916f", |
| table_border_color="#dbe3d3", table_even_background_fill="#ffffff", |
| table_odd_background_fill="#f4f7ee", table_text_color="#254735", table_radius="12px", |
| table_row_focus="#e0eedc", accordion_text_color="#315641", |
| panel_background_fill="#f7f8f0", panel_border_color="#dbe3d3", |
| code_background_fill="#edf2e6", block_shadow="none", |
| ) |
| |
| for name in list(vars(theme)): |
| if name.endswith("_dark") and hasattr(theme, name[:-5]): |
| setattr(theme, name, getattr(theme, name[:-5])) |
| return theme |
|
|
|
|
| def section_header(number, title, description): |
| return (f'<header class="workspace-heading"><span class="workspace-step">{escape(number)}</span>' |
| f'<div><h2>{escape(title)}</h2><p>{escape(description)}</p></div></header>') |
|
|
