[WIP] rx.color (#2443)

* Color module intial commit

* Improvments

* Update reflex/constants/colors.py

Co-authored-by: Masen Furer <m_github@0x26.net>

* Comments+tests

* Fix import

---------

Co-authored-by: Alek Petuskey <alekpetuskey@aleks-mbp.lan>
Co-authored-by: Masen Furer <m_github@0x26.net>
Co-authored-by: Alek Petuskey <alekpetuskey@Aleks-MacBook-Pro.local>

reflex/__init__.py

@@ -9,6 +9,7 @@ from __future__ import annotations
 import importlib
 from typing import Type
 
+from reflex.constants.colors import Color as color
 from reflex.page import page as page
 from reflex.utils import console
 from reflex.utils.format import to_snake_case

reflex/constants/colors.py

@@ -0,0 +1,54 @@
+"""The colors used in Reflex are a wrapper around https://www.radix-ui.com/colors."""
+from dataclasses import dataclass
+from typing import Literal
+
+ColorType = Literal[
+    "gray",
+    "mauve",
+    "slate",
+    "sage",
+    "olive",
+    "sand",
+    "tomato",
+    "red",
+    "ruby",
+    "crimson",
+    "pink",
+    "plum",
+    "purple",
+    "violet",
+    "iris",
+    "indigo",
+    "blue",
+    "cyan",
+    "teal",
+    "jade",
+    "green",
+    "grass",
+    "brown",
+    "orange",
+    "sky",
+    "mint",
+    "lime",
+    "yellow",
+    "amber",
+    "gold",
+    "bronze",
+    "gray",
+]
+
+ShadeType = Literal[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+
+
+@dataclass
+class Color:
+    """A color in the Reflex color palette."""
+
+    # The color palette to use
+    color: ColorType
+
+    # The shade of the color to use
+    shade: ShadeType = 7
+
+    # Whether to use the alpha variant of the color
+    alpha: bool = False

reflex/utils/serializers.py

@@ -8,6 +8,7 @@ from datetime import date, datetime, time, timedelta
 from typing import Any, Callable, Dict, List, Set, Tuple, Type, Union, get_type_hints
 
 from reflex.base import Base
+from reflex.constants.colors import Color
 from reflex.utils import exceptions, format, types
 
 # Mapping from type to a serializer.
@@ -230,6 +231,22 @@ def serialize_datetime(dt: Union[date, datetime, time, timedelta]) -> str:
     return str(dt)
 
 
+@serializer
+def serialize_color(color: Color) -> SerializedType:
+    """Serialize a color.
+
+    Args:
+        color: The color to serialize.
+
+    Returns:
+        The serialized color.
+    """
+    if color.alpha:
+        return f"var(--{color.color}-a{color.shade})"
+    else:
+        return f"var(--{color.color}-{color.shade})"
+
+
 try:
     from pandas import DataFrame
 

tests/utils/test_serializers.py

@@ -5,6 +5,7 @@ from typing import Any, Dict, List, Type
 import pytest
 
 from reflex.base import Base
+from reflex.constants.colors import Color as color
 from reflex.utils import serializers
 from reflex.vars import Var
 
@@ -169,6 +170,8 @@ class BaseSubclass(Base):
             [datetime.timedelta(1, 1, 1), datetime.timedelta(1, 1, 2)],
             '["1 day, 0:00:01.000001", "1 day, 0:00:01.000002"]',
         ),
+        (color("slate", shade=1), "var(--slate-1)"),
+        (color("orange", shade=1, alpha=True), "var(--orange-a1)"),
     ],
 )
 def test_serialize(value: Any, expected: str):