Create canva_theme.py

canva_theme.py

@@ -0,0 +1,114 @@
+from __future__ import annotations
+
+from gradio.themes.base import Base
+from gradio.themes.utils import fonts
+
+from colors import purple, neutral, blue, green, red, white, black, purpleA  # Import our custom colors
+from sizes import spacing_md, radius_sm, text_md  # Import our custom sizes
+
+class CanvaTheme(Base):
+    def __init__(
+        self,
+        *,
+        font: fonts.Font | str = fonts.LocalFont(
+            "CanvaSans",
+            weights=[400, 500, 700],  # Regular, Medium, Bold weights
+        ),
+        font_mono: fonts.Font | str = fonts.GoogleFont(
+            "JetBrains Mono",
+            weights=[400, 700]  # Regular and Bold weights
+        ),
+    ):
+        super().__init__(
+            primary_hue=purple,
+            secondary_hue=blue,
+            neutral_hue=neutral,
+            spacing_size=spacing_md,
+            radius_size=radius_sm,
+            text_size=text_md,
+            font=font,
+            font_mono=font_mono,
+        )
+
+        super().set(
+            # Colors from our colors.py
+            body_background_fill=white["white"],
+            body_background_fill_dark=neutral.c950,
+            background_fill_primary=white["white"],
+            background_fill_primary_dark=neutral.c900,
+            background_fill_secondary=neutral.c50,
+            background_fill_secondary_dark=neutral.c800,
+            
+            # Border colors
+            border_color_primary=neutral.c200,
+            border_color_primary_dark=neutral.c700,
+            
+            # Text colors
+            body_text_color=neutral.c900,
+            body_text_color_dark=neutral.c50,
+            body_text_color_subdued=neutral.c500,
+            body_text_color_subdued_dark=neutral.c400,
+            
+            # Button styling
+            button_primary_background_fill=purple.c500,
+            button_primary_background_fill_dark=purple.c600,
+            button_primary_background_fill_hover=purple.c600,
+            button_primary_background_fill_hover_dark=purple.c700,
+            button_primary_text_color=white["white"],
+            button_primary_text_color_dark=white["white"],
+            
+            button_secondary_background_fill=neutral.c50,
+            button_secondary_background_fill_dark=neutral.c800,
+            button_secondary_background_fill_hover=neutral.c100,
+            button_secondary_background_fill_hover_dark=neutral.c700,
+            button_secondary_text_color=neutral.c900,
+            button_secondary_text_color_dark=neutral.c50,
+            
+            # Input styling
+            input_background_fill=neutral.c50,
+            input_background_fill_dark=neutral.c800,
+            input_border_color=neutral.c200,
+            input_border_color_dark=neutral.c700,
+            input_border_width="1px",
+            
+            # Block styling
+            block_label_background_fill=white["white"],
+            block_label_background_fill_dark=neutral.c900,
+            block_title_text_color=neutral.c500,
+            block_title_text_color_dark=neutral.c400,
+            
+            # Shadow effects
+            shadow_drop="0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+            shadow_drop_lg="0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+            
+            # Border radius from our sizes.py
+            radius_sm=radius_sm.md,
+            radius_md=radius_sm.lg,
+            radius_lg=radius_sm.xl,
+            
+            # Link colors using our purple
+            link_text_color=purple.c500,
+            link_text_color_dark=purple.c400,
+            link_text_color_hover=purple.c600,
+            link_text_color_hover_dark=purple.c500,
+            
+            # Error states
+            error_background_fill=red.c50,
+            error_background_fill_dark=neutral.c900,
+            error_text_color=red.c600,
+            error_text_color_dark=red.c200,
+            error_border_color=red.c500,
+            error_border_color_dark=red.c600,
+            
+            # Success states
+            button_secondary_background_fill_selected=green.c50,
+            button_secondary_text_color_selected=green.c700,
+            
+            # Alpha transparencies
+            overlay_background_fill=black["blackA50"],
+            
+            # Additional button states using alpha colors
+            button_primary_border_color=purpleA["purpleA0"],
+            button_secondary_border_color=neutral.c200,
+            button_secondary_border_color_dark=neutral.c700,
+        )