from __future__ import annotations from collections.abc import Iterable from gradio.themes.base import Base from gradio.themes.utils import colors, fonts, sizes class Neon(Base): def __init__( self, *, primary_hue: colors.Color | str = colors.lime, secondary_hue: colors.Color | str = colors.cyan, neutral_hue: colors.Color | str = colors.neutral, spacing_size: sizes.Size | str = sizes.spacing_lg, radius_size: sizes.Size | str = sizes.radius_xxl, text_size: sizes.Size | str = sizes.text_md, font: fonts.Font | str | Iterable[fonts.Font | str] = ( fonts.LocalFont("Lexend"), "ui-sans-serif", "system-ui", "sans-serif", ), font_mono: fonts.Font | str | Iterable[fonts.Font | str] = ( fonts.LocalFont("Space Mono", weights=(400,)), "ui-monospace", "Consolas", "monospace", ), ): super().__init__( primary_hue=primary_hue, secondary_hue=secondary_hue, neutral_hue=neutral_hue, spacing_size=spacing_size, radius_size=radius_size, text_size=text_size, font=font, font_mono=font_mono, ) self.name = "neon" super().set( # Body body_background_fill="*neutral_100", body_background_fill_dark="*neutral_950", body_text_color="*neutral_800", body_text_color_dark="*neutral_200", body_text_color_subdued="*neutral_500", body_text_color_subdued_dark="*neutral_400", # Backgrounds background_fill_primary="*neutral_100", background_fill_primary_dark="*neutral_900", background_fill_secondary="*neutral_200", background_fill_secondary_dark="*neutral_800", # Shadows - bottom-edge style like raised buttons shadow_drop="none", shadow_drop_lg="none", shadow_spread="0px", # Blocks block_background_fill="white", block_background_fill_dark="*neutral_900", block_border_width="2px", block_border_color="*neutral_300", block_border_color_dark="*neutral_700", block_shadow="0px 3px 0px 0px *neutral_300", block_shadow_dark="0px 3px 0px 0px *neutral_800", block_label_background_fill="*primary_200", block_label_background_fill_dark="*primary_800", block_label_text_color="*primary_800", block_label_text_color_dark="*primary_200", block_label_text_weight="600", block_label_text_size="*text_md", block_label_padding="*spacing_sm *spacing_lg", block_label_radius="0 0 calc(*radius_sm - 1px) 0", block_title_background_fill="*primary_200", block_title_background_fill_dark="*primary_800", block_title_text_color="*primary_800", block_title_text_color_dark="*primary_200", block_title_text_weight="600", block_title_padding="*spacing_sm *spacing_lg", block_title_radius="*radius_sm", # Inputs input_background_fill="white", input_background_fill_dark="*neutral_800", input_border_color="*neutral_300", input_border_color_dark="*neutral_600", input_border_width="2px", input_shadow="none", input_shadow_focus="none", input_border_color_focus="*primary_500", input_border_color_focus_dark="*primary_400", input_background_fill_focus="*primary_50", input_background_fill_focus_dark="*neutral_700", # Buttons - raised with bottom shadow, press down on click button_border_width="2px", button_transform_hover="translateY(-2px)", button_transform_active="translateY(1px)", button_transition="all 0.1s ease", button_primary_background_fill="*primary_400", button_primary_background_fill_dark="*primary_500", button_primary_background_fill_hover="*primary_400", button_primary_background_fill_hover_dark="*primary_500", button_primary_text_color="*primary_950", button_primary_text_color_dark="*primary_950", button_primary_border_color="*primary_500", button_primary_border_color_dark="*primary_600", button_primary_shadow="0px 4px 0px 0px *primary_600", button_primary_shadow_hover="0px 6px 0px 0px *primary_600", button_primary_shadow_active="0px 2px 0px 0px *primary_600", button_primary_shadow_dark="0px 4px 0px 0px *primary_700", button_primary_shadow_hover_dark="0px 6px 0px 0px *primary_700", button_primary_shadow_active_dark="0px 2px 0px 0px *primary_700", button_secondary_background_fill="white", button_secondary_background_fill_dark="*neutral_800", button_secondary_background_fill_hover="white", button_secondary_background_fill_hover_dark="*neutral_800", button_secondary_text_color="*neutral_700", button_secondary_text_color_dark="*neutral_200", button_secondary_border_color="*neutral_300", button_secondary_border_color_dark="*neutral_600", button_secondary_shadow="0px 4px 0px 0px *neutral_300", button_secondary_shadow_hover="0px 6px 0px 0px *neutral_300", button_secondary_shadow_active="0px 2px 0px 0px *neutral_300", button_secondary_shadow_dark="0px 4px 0px 0px *neutral_700", button_secondary_shadow_hover_dark="0px 6px 0px 0px *neutral_700", button_secondary_shadow_active_dark="0px 2px 0px 0px *neutral_700", button_cancel_background_fill=colors.red.c400, button_cancel_background_fill_dark=colors.red.c500, button_cancel_background_fill_hover=colors.red.c400, button_cancel_background_fill_hover_dark=colors.red.c500, button_cancel_text_color="white", button_cancel_text_color_dark="white", button_cancel_border_color=colors.red.c500, button_cancel_border_color_dark=colors.red.c600, button_cancel_shadow=f"0px 4px 0px 0px {colors.red.c600}", button_cancel_shadow_hover=f"0px 6px 0px 0px {colors.red.c600}", button_cancel_shadow_active=f"0px 2px 0px 0px {colors.red.c600}", button_cancel_shadow_dark=f"0px 4px 0px 0px {colors.red.c700}", button_cancel_shadow_hover_dark=f"0px 6px 0px 0px {colors.red.c700}", button_cancel_shadow_active_dark=f"0px 2px 0px 0px {colors.red.c700}", # Checkboxes checkbox_background_color_selected="*primary_500", checkbox_background_color_selected_dark="*primary_400", checkbox_border_color="*neutral_400", checkbox_border_color_dark="*neutral_500", checkbox_border_color_selected="*primary_600", checkbox_border_color_selected_dark="*primary_500", checkbox_border_width="2px", checkbox_shadow="none", checkbox_label_background_fill="white", checkbox_label_background_fill_dark="*neutral_800", checkbox_label_background_fill_hover="*primary_50", checkbox_label_background_fill_hover_dark="*neutral_700", checkbox_label_background_fill_selected="*primary_300", checkbox_label_background_fill_selected_dark="*primary_700", checkbox_label_text_color_selected="*primary_900", checkbox_label_text_color_selected_dark="*primary_100", checkbox_label_border_width="2px", checkbox_label_border_color="*neutral_300", checkbox_label_border_color_dark="*neutral_600", checkbox_label_border_color_selected="*primary_500", checkbox_label_border_color_selected_dark="*primary_500", checkbox_label_shadow="0px 4px 0px 0px *neutral_300", checkbox_label_shadow_hover="0px 6px 0px 0px *neutral_300", checkbox_label_shadow_active="0px 2px 0px 0px *neutral_300", checkbox_label_shadow_dark="0px 4px 0px 0px *neutral_700", checkbox_label_shadow_hover_dark="0px 6px 0px 0px *neutral_700", checkbox_label_shadow_active_dark="0px 2px 0px 0px *neutral_700", # Slider slider_color="*primary_500", slider_color_dark="*primary_400", # Color accents color_accent="*secondary_500", color_accent_soft="*secondary_100", color_accent_soft_dark="*secondary_900", # Tables table_even_background_fill="*neutral_50", table_even_background_fill_dark="*neutral_800", table_odd_background_fill="white", table_odd_background_fill_dark="*neutral_900", table_border_color="*neutral_300", table_border_color_dark="*neutral_600", # Panels panel_border_width="2px", panel_border_color="*neutral_300", panel_border_color_dark="*neutral_700", # Loader loader_color="*primary_500", loader_color_dark="*primary_400", )