call to_string on colors coming into style (#5836)

* call to_string on colors coming into style

* fix unit tests

Author: adhami3310

reflex/style.py

@@ -7,13 +7,15 @@
 
 from reflex import constants
 from reflex.components.core.breakpoints import Breakpoints, breakpoints_values
+from reflex.constants.colors import Color
 from reflex.event import EventChain, EventHandler, EventSpec, run_script
 from reflex.utils import format
 from reflex.utils.exceptions import ReflexError
 from reflex.utils.imports import ImportVar
 from reflex.utils.types import typehint_issubclass
 from reflex.vars import VarData
 from reflex.vars.base import LiteralVar, Var
+from reflex.vars.color import LiteralColorVar
 from reflex.vars.function import FunctionVar
 from reflex.vars.object import ObjectVar
 
@@ -132,6 +134,9 @@ def convert_item(
     if isinstance(style_item, Var):
         return style_item, style_item._get_all_var_data()
 
+    if isinstance(style_item, Color):
+        return LiteralColorVar.create(style_item).to_string(use_json=False), None
+
     # Otherwise, convert to Var to collapse VarData encoded in f-string.
     new_var = LiteralVar.create(style_item)
     var_data = new_var._get_all_var_data() if new_var is not None else None

tests/units/components/test_component.py

@@ -2146,7 +2146,7 @@ def add_style(self):  # pyright: ignore [reportIncompatibleMethodOverride]
     str_page = str(page)
     assert (
         str_page.count(
-            f'css:({{ ["fakeParent"] : "parent", ["color"] : Object.assign(new String("var(--plum-10)"), ({{ ["color"] : "plum", ["alpha"] : false, ["shade"] : 10 }})), ["fake"] : "text", ["margin"] : ({test_state.get_name()}.num{FIELD_MARKER}+"%") }})'
+            f'css:({{ ["fakeParent"] : "parent", ["color"] : (((__to_string) => __to_string.toString())(Object.assign(new String("var(--plum-10)"), ({{ ["color"] : "plum", ["alpha"] : false, ["shade"] : 10 }})))), ["fake"] : "text", ["margin"] : ({test_state.get_name()}.num{FIELD_MARKER}+"%") }})'
         )
         == 1
     )