Update canva_theme.py

canva_theme.py

@@ -1,14 +1,15 @@
 from __future__ import annotations
 
 from gradio.themes.base import Base
-from gradio.themes.utils import fonts
+from gradio.themes.utils import colors, fonts, sizes
 
+# Import our custom colors
 from colors import (
-    purple,
-    blue,
-    grey,
-    green,
-    red,
+    purple as custom_purple,
+    blue as custom_blue,
+    grey as custom_grey,
+    green as custom_green,
+    red as custom_red,
     white,
     black,
     purple_alpha
@@ -19,12 +20,12 @@ class CanvaTheme(Base):
     def __init__(
         self,
         *,
-        primary_hue: colors.Color = purple,
-        secondary_hue: colors.Color = blue,
-        neutral_hue: colors.Color = grey,
-        text_size: sizes.Size = text_md,
-        spacing_size: sizes.Size = spacing_md,
-        radius_size: sizes.Size = radius_sm,
+        primary_hue: colors.Color | str = colors.purple,  # Using Gradio's purple
+        secondary_hue: colors.Color | str = colors.blue,  # Using Gradio's blue
+        neutral_hue: colors.Color | str = colors.gray,    # Using Gradio's gray
+        text_size: sizes.Size | str = sizes.text_md,
+        spacing_size: sizes.Size | str = sizes.spacing_md,
+        radius_size: sizes.Size | str = sizes.radius_sm,
         font: fonts.Font | str | Iterable[fonts.Font | str] = (
             fonts.LocalFont("CanvaSans", weights=[400, 500, 700]),
             "ui-sans-serif",
@@ -60,27 +61,27 @@ class CanvaTheme(Base):
             
             # Block colors
             block_background_fill=white.c50,
-            block_background_fill_dark=grey.c800,
-            block_border_color=grey.c200,
-            block_border_color_dark=grey.c700,
-            block_title_text_color=grey.c500,
-            block_title_text_color_dark=grey.c400,
+            block_background_fill_dark=custom_grey.c800,
+            block_border_color=custom_grey.c200,
+            block_border_color_dark=custom_grey.c700,
+            block_title_text_color=custom_grey.c500,
+            block_title_text_color_dark=custom_grey.c400,
             
             # Input colors
-            input_background_fill=grey.c50,
-            input_background_fill_dark=grey.c800,
-            input_border_color=grey.c200,
-            input_border_color_dark=grey.c700,
+            input_background_fill=custom_grey.c50,
+            input_background_fill_dark=custom_grey.c800,
+            input_border_color=custom_grey.c200,
+            input_border_color_dark=custom_grey.c700,
             input_border_width="1px",
             
             # Button colors
-            button_primary_background_fill=purple.c500,
-            button_primary_background_fill_dark=purple.c600,
+            button_primary_background_fill=custom_purple.c500,
+            button_primary_background_fill_dark=custom_purple.c600,
             button_primary_text_color=white.c50,
             button_primary_text_color_dark=white.c50,
             
-            button_secondary_background_fill=grey.c50,
-            button_secondary_background_fill_dark=grey.c800,
+            button_secondary_background_fill=custom_grey.c50,
+            button_secondary_background_fill_dark=custom_grey.c800,
             button_secondary_text_color=black.c50,
             button_secondary_text_color_dark=white.c50,
             
@@ -89,6 +90,6 @@ class CanvaTheme(Base):
             shadow_inset="0 2px 4px 0 rgb(0 0 0 / 0.05) inset",
             
             # Link colors
-            link_text_color=purple.c500,
-            link_text_color_dark=purple.c400,
+            link_text_color=custom_purple.c500,
+            link_text_color_dark=custom_purple.c400,
         )