Update canva_theme.py

canva_theme.py

@@ -3,21 +3,20 @@ from __future__ import annotations
 from gradio.themes.base import Base
 from gradio.themes.utils import fonts
 
-# Import our custom colors with the exact names we defined
 from colors import (
-    neutral,  # This was defined as neutral = Color(...)
-    purple,   # This was defined as purple = Color(...)
-    blue,     # This was defined as blue = Color(...)
-    green,    # This was defined as green = Color(...)
-    red,      # This was defined as red = Color(...)
-    yellow,   # This was defined as yellow = Color(...)
-    white,    # This was defined as white = {...}
-    black,    # This was defined as black = {...}
-    grey      # This was defined as grey = {...}
+    purple,  # Primary brand color
+    blue,    # Secondary color
+    green,   # Success states
+    red,     # Error states
+    yellow,  # Warning states
+    white,   # Light theme backgrounds
+    black,   # Dark theme backgrounds
+    grey,    # UI element colors
+    purpleA, # Alpha variations of purple
+    gradients # Brand gradients
 )
 from sizes import spacing_md, radius_sm, text_md
 
-
 class CanvaTheme(Base):
     def __init__(
         self,
@@ -34,7 +33,7 @@ class CanvaTheme(Base):
         super().__init__(
             primary_hue=purple,
             secondary_hue=blue,
-            neutral_hue=neutral,
+            neutral_hue=grey,  # Using grey instead of neutral
             spacing_size=spacing_md,
             radius_size=radius_sm,
             text_size=text_md,
@@ -43,23 +42,23 @@ class CanvaTheme(Base):
         )
 
         super().set(
-            # Colors from our colors.py
+            # Colors using grey for UI elements
             body_background_fill=white["white"],
-            body_background_fill_dark=neutral.c950,
+            body_background_fill_dark=black["black"],
             background_fill_primary=white["white"],
-            background_fill_primary_dark=neutral.c900,
-            background_fill_secondary=neutral.c50,
-            background_fill_secondary_dark=neutral.c800,
+            background_fill_primary_dark=grey["greyUltraDark"],
+            background_fill_secondary=grey["greyLight"],
+            background_fill_secondary_dark=grey["greyDark"],
             
             # Border colors
-            border_color_primary=neutral.c200,
-            border_color_primary_dark=neutral.c700,
+            border_color_primary=grey["greyLight"],
+            border_color_primary_dark=grey["greyDark"],
             
             # 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,
+            body_text_color=black["black"],
+            body_text_color_dark=white["white"],
+            body_text_color_subdued=grey["greyDark"],
+            body_text_color_subdued_dark=grey["greyLight"],
             
             # Button styling
             button_primary_background_fill=purple.c500,
@@ -69,36 +68,36 @@ class CanvaTheme(Base):
             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,
+            button_secondary_background_fill=grey["greyLight"],
+            button_secondary_background_fill_dark=grey["greyDark"],
+            button_secondary_background_fill_hover=grey["greyUltraLight"],
+            button_secondary_background_fill_hover_dark=grey["greyUltraDark"],
+            button_secondary_text_color=black["black"],
+            button_secondary_text_color_dark=white["white"],
             
             # 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_background_fill=grey["greyLight"],
+            input_background_fill_dark=grey["greyDark"],
+            input_border_color=grey["greyLight"],
+            input_border_color_dark=grey["greyDark"],
             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,
+            block_label_background_fill_dark=grey["greyUltraDark"],
+            block_title_text_color=grey["greyDark"],
+            block_title_text_color_dark=grey["greyLight"],
             
             # 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
+            # Border radius
             radius_sm=radius_sm.md,
             radius_md=radius_sm.lg,
             radius_lg=radius_sm.xl,
             
-            # Link colors using our purple
+            # Link colors
             link_text_color=purple.c500,
             link_text_color_dark=purple.c400,
             link_text_color_hover=purple.c600,
@@ -106,7 +105,7 @@ class CanvaTheme(Base):
             
             # Error states
             error_background_fill=red.c50,
-            error_background_fill_dark=neutral.c900,
+            error_background_fill_dark=grey["greyUltraDark"],
             error_text_color=red.c600,
             error_text_color_dark=red.c200,
             error_border_color=red.c500,
@@ -120,7 +119,7 @@ class CanvaTheme(Base):
             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,
+            button_primary_border_color=purpleA["purpleA00"],
+            button_secondary_border_color=grey["greyLight"],
+            button_secondary_border_color_dark=grey["greyDark"],
         )