Update canva_theme.py

canva_theme.py

@@ -5,15 +5,14 @@ from gradio.themes.utils import fonts
 
 from colors import (
     purple,  # Primary brand color
-    blue,    # Secondary color
+    blue,    # Secondary brand color
+    grey,    # Neutral shades
     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
+    white,   # White with alpha variations
+    black,   # Black with alpha variations
+    purple_alpha  # Purple with alpha variations
 )
 from sizes import spacing_md, radius_sm, text_md
 
@@ -33,7 +32,7 @@ class CanvaTheme(Base):
         super().__init__(
             primary_hue=purple,
             secondary_hue=blue,
-            neutral_hue=grey,  # Using grey instead of neutral
+            neutral_hue=grey,
             spacing_size=spacing_md,
             radius_size=radius_sm,
             text_size=text_md,
@@ -42,51 +41,51 @@ class CanvaTheme(Base):
         )
 
         super().set(
-            # Colors using grey for UI elements
-            body_background_fill=white["white"],
-            body_background_fill_dark=black["black"],
-            background_fill_primary=white["white"],
-            background_fill_primary_dark=grey["greyUltraDark"],
-            background_fill_secondary=grey["greyLight"],
-            background_fill_secondary_dark=grey["greyDark"],
+            # Colors
+            body_background_fill=white.c50,
+            body_background_fill_dark=black.c50,
+            background_fill_primary=white.c50,
+            background_fill_primary_dark=black.c100,
+            background_fill_secondary=grey.c50,
+            background_fill_secondary_dark=grey.c800,
             
             # Border colors
-            border_color_primary=grey["greyLight"],
-            border_color_primary_dark=grey["greyDark"],
+            border_color_primary=grey.c200,
+            border_color_primary_dark=grey.c700,
             
             # Text colors
-            body_text_color=black["black"],
-            body_text_color_dark=white["white"],
-            body_text_color_subdued=grey["greyDark"],
-            body_text_color_subdued_dark=grey["greyLight"],
+            body_text_color=black.c50,
+            body_text_color_dark=white.c50,
+            body_text_color_subdued=grey.c500,
+            body_text_color_subdued_dark=grey.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_primary_text_color=white.c50,
+            button_primary_text_color_dark=white.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"],
+            button_secondary_background_fill=grey.c50,
+            button_secondary_background_fill_dark=grey.c800,
+            button_secondary_background_fill_hover=grey.c100,
+            button_secondary_background_fill_hover_dark=grey.c700,
+            button_secondary_text_color=black.c50,
+            button_secondary_text_color_dark=white.c50,
             
             # Input styling
-            input_background_fill=grey["greyLight"],
-            input_background_fill_dark=grey["greyDark"],
-            input_border_color=grey["greyLight"],
-            input_border_color_dark=grey["greyDark"],
+            input_background_fill=grey.c50,
+            input_background_fill_dark=grey.c800,
+            input_border_color=grey.c200,
+            input_border_color_dark=grey.c700,
             input_border_width="1px",
             
             # Block styling
-            block_label_background_fill=white["white"],
-            block_label_background_fill_dark=grey["greyUltraDark"],
-            block_title_text_color=grey["greyDark"],
-            block_title_text_color_dark=grey["greyLight"],
+            block_label_background_fill=white.c50,
+            block_label_background_fill_dark=grey.c800,
+            block_title_text_color=grey.c500,
+            block_title_text_color_dark=grey.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)",
@@ -105,7 +104,7 @@ class CanvaTheme(Base):
             
             # Error states
             error_background_fill=red.c50,
-            error_background_fill_dark=grey["greyUltraDark"],
+            error_background_fill_dark=black.c100,
             error_text_color=red.c600,
             error_text_color_dark=red.c200,
             error_border_color=red.c500,
@@ -116,10 +115,14 @@ class CanvaTheme(Base):
             button_secondary_text_color_selected=green.c700,
             
             # Alpha transparencies
-            overlay_background_fill=black["blackA50"],
+            overlay_background_fill=black.c400,  # Using 50% alpha black
             
-            # Additional button states using alpha colors
-            button_primary_border_color=purpleA["purpleA00"],
-            button_secondary_border_color=grey["greyLight"],
-            button_secondary_border_color_dark=grey["greyDark"],
+            # Additional button states
+            button_primary_border_color=purple_alpha.c950,  # Transparent
+            button_secondary_border_color=grey.c200,
+            button_secondary_border_color_dark=grey.c700,
+            
+            # Additional states using alpha colors
+            shadow_spread_dark=black.c950,
+            block_background_fill_dark=black.c100,
         )