Upload Applio.py

Applio.py

@@ -1,3 +1,4 @@
+
 from typing import Iterable
 import gradio as gr
 
@@ -7,6 +8,8 @@ from gradio.themes.utils import colors, fonts, sizes
 import time
 
 
+
+
 # Applio Theme
 class Applio(Base):
     def __init__(
@@ -54,24 +57,24 @@ class Applio(Base):
 
         super().set(
             # Blaise
-            background_fill_primary="#ffffff",
-            background_fill_primary_dark="#ffffff",
-            background_fill_secondary="#ffffff",
-            background_fill_secondary_dark="#ffffff",
-            block_background_fill="#ffffff",
-            block_background_fill_dark="#ffffff",
-            block_border_color="#3b82f6",
-            block_border_color_dark="#3b82f6",
+            background_fill_primary="#110F0F",
+            background_fill_primary_dark="#110F0F",
+            background_fill_secondary="#110F0F",
+            background_fill_secondary_dark="#110F0F",
+            block_background_fill="*neutral_800",
+            block_background_fill_dark="*neutral_800",
+            block_border_color="*border_color_primary",
+            block_border_color_dark="*border_color_primary",
             block_border_width="1px",
             block_border_width_dark="1px",
-            block_info_text_color="#3b82f6",
-            block_info_text_color_dark="#3b82f6",
+            block_info_text_color="*body_text_color_subdued",
+            block_info_text_color_dark="*body_text_color_subdued",
             block_info_text_size="*text_sm",
             block_info_text_weight="400",
-            block_label_background_fill="#ffffff",
-            block_label_background_fill_dark="#ffffff",
-            block_label_border_color="#3b82f6",
-            block_label_border_color_dark="#3b82f6",
+            block_label_background_fill="*background_fill_primary",
+            block_label_background_fill_dark="*background_fill_secondary",
+            block_label_border_color="*border_color_primary",
+            block_label_border_color_dark="*border_color_primary",
             block_label_border_width="1px",
             block_label_border_width_dark="1px",
             block_label_margin="0",
@@ -79,78 +82,78 @@ class Applio(Base):
             block_label_radius="calc(*radius_lg - 1px) 0 calc(*radius_lg - 1px) 0",
             block_label_right_radius="0 calc(*radius_lg - 1px) 0 calc(*radius_lg - 1px)",
             block_label_shadow="*block_shadow",
-            block_label_text_color="#3b82f6",
-            block_label_text_color_dark="#3b82f6",
+            block_label_text_color="*#110F0F",
+            block_label_text_color_dark="*#110F0F",
             block_label_text_weight="400",
             block_padding="*spacing_xl",
             block_radius="*radius_md",
             block_shadow="none",
             block_shadow_dark="none",
-            block_title_background_fill="#eff6ff",
-            block_title_background_fill_dark="#eff6ff",
+            block_title_background_fill="rgb(255,255,255)",
+            block_title_background_fill_dark="rgb(255,255,255)",
             block_title_border_color="none",
             block_title_border_color_dark="none",
             block_title_border_width="0px",
             block_title_padding="*block_label_padding",
             block_title_radius="*block_label_radius",
-            block_title_text_color="#3b82f6",
-            block_title_text_color_dark="#3b82f6",
+            block_title_text_color="#110F0F",
+            block_title_text_color_dark="#110F0F",
             block_title_text_size="*text_md",
             block_title_text_weight="600",
-            body_background_fill="#ffffff",
-            body_background_fill_dark="#ffffff",
-            body_text_color="#3b82f6",
-            body_text_color_dark="#3b82f6",
-            body_text_color_subdued="#93c5fd",
-            body_text_color_subdued_dark="#93c5fd",
+            body_background_fill="#110F0F",
+            body_background_fill_dark="#110F0F",
+            body_text_color="white",
+            body_text_color_dark="white",
+            body_text_color_subdued="*neutral_400",
+            body_text_color_subdued_dark="*neutral_400",
             body_text_size="*text_md",
             body_text_weight="400",
-            border_color_accent="#2563eb",
-            border_color_accent_dark="#2563eb",
-            border_color_primary="#3b82f6",
-            border_color_primary_dark="#3b82f6",
+            border_color_accent="*neutral_600",
+            border_color_accent_dark="*neutral_600",
+            border_color_primary="*neutral_800",
+            border_color_primary_dark="*neutral_800",
             button_border_width="*input_border_width",
             button_border_width_dark="*input_border_width",
-            button_cancel_background_fill="#93c5fd",
-            button_cancel_background_fill_dark="#93c5fd",
-            button_cancel_background_fill_hover="#bfdbfe",
-            button_cancel_background_fill_hover_dark="#bfdbfe",
-            button_cancel_border_color="#2563eb",
-            button_cancel_border_color_dark="#2563eb",
-            button_cancel_border_color_hover="#1d4ed8",
-            button_cancel_border_color_hover_dark="#1d4ed8",
-            button_cancel_text_color="#3b82f6",
-            button_cancel_text_color_dark="#3b82f6",
-            button_cancel_text_color_hover="#1d4ed8",
-            button_cancel_text_color_hover_dark="#1d4ed8",
+            button_cancel_background_fill="*button_secondary_background_fill",
+            button_cancel_background_fill_dark="*button_secondary_background_fill",
+            button_cancel_background_fill_hover="*button_cancel_background_fill",
+            button_cancel_background_fill_hover_dark="*button_cancel_background_fill",
+            button_cancel_border_color="*button_secondary_border_color",
+            button_cancel_border_color_dark="*button_secondary_border_color",
+            button_cancel_border_color_hover="*button_cancel_border_color",
+            button_cancel_border_color_hover_dark="*button_cancel_border_color",
+            button_cancel_text_color="#110F0F",
+            button_cancel_text_color_dark="#110F0F",
+            button_cancel_text_color_hover="#110F0F",
+            button_cancel_text_color_hover_dark="#110F0F",
             button_large_padding="*spacing_lg calc(2 * *spacing_lg)",
             button_large_radius="*radius_lg",
             button_large_text_size="*text_lg",
             button_large_text_weight="600",
-            button_primary_background_fill="#1e40af",
-            button_primary_background_fill_dark="#1e40af",
-            button_primary_background_fill_hover="#1e3a8a",
-            button_primary_background_fill_hover_dark="#1e3a8a",
-            button_primary_border_color="#1e3a8a",
-            button_primary_border_color_dark="#1e3a8a",
-            button_primary_border_color_hover="#1d4ed8",
-            button_primary_border_color_hover_dark="#1d4ed8",
-            button_primary_text_color="#ffffff",
-            button_primary_text_color_dark="#ffffff",
-            button_primary_text_color_hover="#eff6ff",
-            button_primary_text_color_hover_dark="#eff6ff",
+            button_primary_background_fill="*primary_600",
+            button_primary_background_fill_dark="*primary_600",
+            button_primary_background_fill_hover="*primary_500",
+            button_primary_background_fill_hover_dark="*primary_500",
+            button_primary_border_color="*primary_500",
+            button_primary_border_color_dark="*primary_500",
+            button_primary_border_color_hover="*primary_400",
+            button_primary_border_color_hover_dark="*primary_400",
+            button_primary_text_color="white",
+            button_primary_text_color_dark="white",
+            button_primary_text_color_hover="#110F0F",
+            button_primary_text_color_hover_dark="#110F0F",
             button_secondary_background_fill="transparent",
             button_secondary_background_fill_dark="transparent",
-            button_secondary_background_fill_hover="#3b82f6",
-            button_secondary_background_fill_hover_dark="#3b82f6",
-            button_secondary_border_color="#2563eb",
-            button_secondary_border_color_dark="#2563eb",
-            button_secondary_border_color_hover="#1d4ed8",
-            button_secondary_border_color_hover_dark="#1d4ed8",
-            button_secondary_text_color="#3b82f6",
-            button_secondary_text_color_dark="#3b82f6",
-            button_secondary_text_color_hover="#2563eb",
-            button_secondary_text_color_hover_dark="#2563eb",
+            button_secondary_background_fill_hover="*neutral_800",
+            button_secondary_background_fill_hover_dark="*neutral_800",
+            button_secondary_border_color="*neutral_700",
+            button_secondary_border_color_dark="*neutral_700",
+            button_secondary_border_color_hover="*neutral_600",
+            button_secondary_border_color_hover_dark="*neutral_600",
+            button_secondary_text_color="white",
+            button_secondary_text_color_dark="white",
+            button_secondary_text_color_hover="*button_secondary_text_color",
+            button_secondary_text_color_hover_dark="*button_secondary_text_color",
             button_shadow="none",
             button_shadow_active="*shadow_inset",
             button_shadow_hover="none",
@@ -159,22 +162,22 @@ class Applio(Base):
             button_small_text_size="*text_md",
             button_small_text_weight="400",
             button_transition="0.3s ease all",
-            checkbox_background_color="#2563eb",
-            checkbox_background_color_dark="#2563eb",
-            checkbox_background_color_focus="#3b82f6",
-            checkbox_background_color_focus_dark="#3b82f6",
-            checkbox_background_color_hover="#2563eb",
-            checkbox_background_color_hover_dark="#2563eb",
-            checkbox_background_color_selected="#1d4ed8",
-            checkbox_background_color_selected_dark="#1d4ed8",
-            checkbox_border_color="#3b82f6",
-            checkbox_border_color_dark="#3b82f6",
-            checkbox_border_color_focus="#2563eb",
-            checkbox_border_color_focus_dark="#2563eb",
-            checkbox_border_color_hover="#1d4ed8",
-            checkbox_border_color_hover_dark="#1d4ed8",
-            checkbox_border_color_selected="#1e40af",
-            checkbox_border_color_selected_dark="#1e40af",
+            checkbox_background_color="*neutral_700",
+            checkbox_background_color_dark="*neutral_700",
+            checkbox_background_color_focus="*checkbox_background_color",
+            checkbox_background_color_focus_dark="*checkbox_background_color",
+            checkbox_background_color_hover="*checkbox_background_color",
+            checkbox_background_color_hover_dark="*checkbox_background_color",
+            checkbox_background_color_selected="*secondary_600",
+            checkbox_background_color_selected_dark="*secondary_600",
+            checkbox_border_color="*neutral_700",
+            checkbox_border_color_dark="*neutral_700",
+            checkbox_border_color_focus="*secondary_500",
+            checkbox_border_color_focus_dark="*secondary_500",
+            checkbox_border_color_hover="*neutral_600",
+            checkbox_border_color_hover_dark="*neutral_600",
+            checkbox_border_color_selected="*secondary_600",
+            checkbox_border_color_selected_dark="*secondary_600",
             checkbox_border_radius="*radius_sm",
             checkbox_border_width="*input_border_width",
             checkbox_border_width_dark="*input_border_width",
@@ -194,44 +197,44 @@ class Applio(Base):
             checkbox_label_gap="*spacing_lg",
             checkbox_label_padding="*spacing_md calc(2 * *spacing_md)",
             checkbox_label_shadow="none",
-            checkbox_label_text_color="#3b82f6",
-            checkbox_label_text_color_dark="#3b82f6",
-            checkbox_label_text_color_selected="#2563eb",
-            checkbox_label_text_color_selected_dark="#2563eb",
+            checkbox_label_text_color="*body_text_color",
+            checkbox_label_text_color_dark="*body_text_color",
+            checkbox_label_text_color_selected="*checkbox_label_text_color",
+            checkbox_label_text_color_selected_dark="*checkbox_label_text_color",
             checkbox_label_text_size="*text_md",
             checkbox_label_text_weight="400",
             checkbox_shadow="*input_shadow",
-            color_accent="#3b82f6",
-            color_accent_soft="#eff6ff",
-            color_accent_soft_dark="#2563eb",
+            color_accent="*primary_500",
+            color_accent_soft="*primary_50",
+            color_accent_soft_dark="*neutral_700",
             container_radius="*radius_xl",
             embed_radius="*radius_lg",
-            error_background_fill="#2563eb",
-            error_background_fill_dark="#2563eb",
-            error_border_color="#3b82f6",
-            error_border_color_dark="#3b82f6",
+            error_background_fill="*background_fill_primary",
+            error_background_fill_dark="*background_fill_primary",
+            error_border_color="*border_color_primary",
+            error_border_color_dark="*border_color_primary",
             error_border_width="1px",
             error_border_width_dark="1px",
             error_text_color="#ef4444",
             error_text_color_dark="#ef4444",
             form_gap_width="0px",
-            input_background_fill="#1e40af",
-            input_background_fill_dark="#1e40af",
-            input_background_fill_focus="#2563eb",
-            input_background_fill_focus_dark="#2563eb",
-            input_background_fill_hover="#1e40af",
-            input_background_fill_hover_dark="#1e40af",
-            input_border_color="#3b82f6",
-            input_border_color_dark="#3b82f6",
-            input_border_color_focus="#2563eb",
-            input_border_color_focus_dark="#2563eb",
-            input_border_color_hover="#1d4ed8",
-            input_border_color_hover_dark="#1d4ed8",
+            input_background_fill="*neutral_900",
+            input_background_fill_dark="*neutral_900",
+            input_background_fill_focus="*secondary_600",
+            input_background_fill_focus_dark="*secondary_600",
+            input_background_fill_hover="*input_background_fill",
+            input_background_fill_hover_dark="*input_background_fill",
+            input_border_color="*neutral_700",
+            input_border_color_dark="*neutral_700",
+            input_border_color_focus="*secondary_600",
+            input_border_color_focus_dark="*primary_600",
+            input_border_color_hover="*input_border_color",
+            input_border_color_hover_dark="*input_border_color",
             input_border_width="1px",
             input_border_width_dark="1px",
             input_padding="*spacing_xl",
-            input_placeholder_color="#2563eb",
-            input_placeholder_color_dark="#2563eb",
+            input_placeholder_color="*neutral_500",
+            input_placeholder_color_dark="*neutral_500",
             input_radius="*radius_lg",
             input_shadow="none",
             input_shadow_dark="none",
@@ -240,20 +243,20 @@ class Applio(Base):
             input_text_size="*text_md",
             input_text_weight="400",
             layout_gap="*spacing_xxl",
-            link_text_color="#2563eb",
-            link_text_color_active="#2563eb",
-            link_text_color_active_dark="#2563eb",
-            link_text_color_dark="#2563eb",
-            link_text_color_hover="#1d4ed8",
-            link_text_color_hover_dark="#1d4ed8",
-            link_text_color_visited="#1e40af",
-            link_text_color_visited_dark="#1e40af",
-            loader_color="#3b82f6",
-            loader_color_dark="#3b82f6",
-            panel_background_fill="#ffffff",
-            panel_background_fill_dark="#ffffff",
-            panel_border_color="#3b82f6",
-            panel_border_color_dark="#3b82f6",
+            link_text_color="*secondary_500",
+            link_text_color_active="*secondary_500",
+            link_text_color_active_dark="*secondary_500",
+            link_text_color_dark="*secondary_500",
+            link_text_color_hover="*secondary_400",
+            link_text_color_hover_dark="*secondary_400",
+            link_text_color_visited="*secondary_600",
+            link_text_color_visited_dark="*secondary_600",
+            loader_color="*color_accent",
+            loader_color_dark="*color_accent",
+            panel_background_fill="*background_fill_secondary",
+            panel_background_fill_dark="*background_fill_secondary",
+            panel_border_color="*border_color_primary",
+            panel_border_color_dark="*border_color_primary",
             panel_border_width="1px",
             panel_border_width_dark="1px",
             prose_header_text_weight="600",
@@ -269,18 +272,19 @@ class Applio(Base):
             shadow_spread_dark="1px",
             slider_color="#9E9E9E",
             slider_color_dark="#9E9E9E",
-            stat_background_fill="#3b82f6",
-            stat_background_fill_dark="#3b82f6",
-            table_border_color="#3b82f6",
-            table_border_color_dark="#3b82f6",
-            table_even_background_fill="#eff6ff",
-            table_even_background_fill_dark="#eff6ff",
-            table_odd_background_fill="#bfdbfe",
-            table_odd_background_fill_dark="#bfdbfe",
+            stat_background_fill="*primary_500",
+            stat_background_fill_dark="*primary_500",
+            table_border_color="*neutral_700",
+            table_border_color_dark="*neutral_700",
+            table_even_background_fill="*neutral_950",
+            table_even_background_fill_dark="*neutral_950",
+            table_odd_background_fill="*neutral_900",
+            table_odd_background_fill_dark="*neutral_900",
             table_radius="*radius_lg",
-            table_row_focus="#eff6ff",
-            table_row_focus_dark="#eff6ff",
+            table_row_focus="*color_accent_soft",
+            table_row_focus_dark="*color_accent_soft",
         )
 
 
 applio = Applio()
+