Skip to content

Commit 1fe61cf

Browse files
adhami3310adhami3310
authored
revert color handling (#5844)
1 parent 6ea6c04 commit 1fe61cf

File tree

7 files changed

+34
-143
lines changed

7 files changed

+34
-143
lines changed

‎reflex/constants/colors.py‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,4 @@ def __format__(self, format_spec: str) -> str:
9696
Returns:
9797
The formatted color.
9898
"""
99-
from reflex.vars import LiteralColorVar
100-
101-
return LiteralColorVar.create(self).__format__(format_spec)
99+
return format_color(self.color, self.shade, self.alpha)

‎reflex/style.py‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,13 @@
77

88
from reflex import constants
99
from reflex.components.core.breakpoints import Breakpoints, breakpoints_values
10-
from reflex.constants.colors import Color
1110
from reflex.event import EventChain, EventHandler, EventSpec, run_script
1211
from reflex.utils import format
1312
from reflex.utils.exceptions import ReflexError
1413
from reflex.utils.imports import ImportVar
1514
from reflex.utils.types import typehint_issubclass
1615
from reflex.vars import VarData
1716
from reflex.vars.base import LiteralVar, Var
18-
from reflex.vars.color import LiteralColorVar
1917
from reflex.vars.function import FunctionVar
2018
from reflex.vars.object import ObjectVar
2119

@@ -134,9 +132,6 @@ def convert_item(
134132
if isinstance(style_item, Var):
135133
return style_item, style_item._get_all_var_data()
136134

137-
if isinstance(style_item, Color):
138-
return LiteralColorVar.create(style_item).to_string(use_json=False), None
139-
140135
# Otherwise, convert to Var to collapse VarData encoded in f-string.
141136
new_var = LiteralVar.create(style_item)
142137
var_data = new_var._get_all_var_data() if new_var is not None else None

‎reflex/utils/serializers.py‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -413,8 +413,8 @@ def serialize_decimal(value: decimal.Decimal) -> float:
413413
return float(value)
414414

415415

416-
@serializer(to=dict)
417-
def serialize_color(color: Color) -> dict:
416+
@serializer(to=str)
417+
def serialize_color(color: Color) -> str:
418418
"""Serialize a color.
419419
420420
Args:
@@ -423,11 +423,7 @@ def serialize_color(color: Color) -> dict:
423423
Returns:
424424
The serialized color.
425425
"""
426-
return {
427-
"color": color.color,
428-
"shade": color.shade,
429-
"alpha": color.alpha,
430-
}
426+
return color.__format__("")
431427

432428

433429
with contextlib.suppress(ImportError):

‎reflex/vars/color.py‎

Lines changed: 2 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -10,72 +10,14 @@
1010
VarData,
1111
cached_property_no_lock,
1212
get_python_literal,
13-
transform,
1413
)
15-
from reflex.vars.number import BooleanVar, NumberVar, ternary_operation
16-
from reflex.vars.object import LiteralObjectVar
14+
from reflex.vars.number import ternary_operation
1715
from reflex.vars.sequence import ConcatVarOperation, LiteralStringVar, StringVar
1816

1917

20-
@transform
21-
def evaluate_color(js_dict: Var[dict]) -> Var[Color]:
22-
"""Evaluate a color var.
23-
24-
Args:
25-
js_dict: The color var as a dict.
26-
27-
Returns:
28-
The color var as a string.
29-
"""
30-
js_color_dict = js_dict.to(dict)
31-
str_part = ConcatVarOperation.create(
32-
LiteralStringVar.create("var(--"),
33-
js_color_dict.color,
34-
LiteralStringVar.create("-"),
35-
ternary_operation(
36-
js_color_dict.alpha,
37-
LiteralStringVar.create("a"),
38-
LiteralStringVar.create(""),
39-
),
40-
js_color_dict.shade.to_string(use_json=False),
41-
LiteralStringVar.create(")"),
42-
)
43-
return js_dict._replace(
44-
_js_expr=f"Object.assign(new String({str_part!s}), {js_dict!s})",
45-
_var_type=Color,
46-
)
47-
48-
4918
class ColorVar(StringVar[Color], python_types=Color):
5019
"""Base class for immutable color vars."""
5120

52-
@property
53-
def color(self) -> StringVar:
54-
"""Get the color of the color var.
55-
56-
Returns:
57-
The color of the color var.
58-
"""
59-
return self.to(dict).color.to(str)
60-
61-
@property
62-
def alpha(self) -> BooleanVar:
63-
"""Get the alpha of the color var.
64-
65-
Returns:
66-
The alpha of the color var.
67-
"""
68-
return self.to(dict).alpha.to(bool)
69-
70-
@property
71-
def shade(self) -> NumberVar:
72-
"""Get the shade of the color var.
73-
74-
Returns:
75-
The shade of the color var.
76-
"""
77-
return self.to(dict).shade.to(int)
78-
7921

8022
@dataclasses.dataclass(
8123
eq=False,
@@ -150,7 +92,7 @@ def _cached_var_name(self) -> str:
15092
if isinstance(shade, Var)
15193
else LiteralStringVar.create(str(shade))
15294
)
153-
string_part = str(
95+
return str(
15496
ConcatVarOperation.create(
15597
LiteralStringVar.create("var(--"),
15698
self._var_value.color,
@@ -160,14 +102,6 @@ def _cached_var_name(self) -> str:
160102
LiteralStringVar.create(")"),
161103
)
162104
)
163-
dict_part = LiteralObjectVar.create(
164-
{
165-
"color": self._var_value.color,
166-
"alpha": self._var_value.alpha,
167-
"shade": self._var_value.shade,
168-
}
169-
)
170-
return f"Object.assign(new String({string_part!s}), {dict_part!s})"
171105

172106
@cached_property_no_lock
173107
def _cached_get_all_var_data(self) -> VarData | None:

‎tests/units/components/core/test_colors.py‎

Lines changed: 22 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -32,36 +32,24 @@ def create_color_var(color):
3232
@pytest.mark.parametrize(
3333
("color", "expected", "expected_type"),
3434
[
35-
(
36-
create_color_var(rx.color("mint")),
37-
'Object.assign(new String("var(--mint-7)"), ({ ["color"] : "mint", ["alpha"] : false, ["shade"] : 7 }))',
38-
Color,
39-
),
40-
(
41-
create_color_var(rx.color("mint", 3)),
42-
'Object.assign(new String("var(--mint-3)"), ({ ["color"] : "mint", ["alpha"] : false, ["shade"] : 3 }))',
43-
Color,
44-
),
45-
(
46-
create_color_var(rx.color("mint", 3, True)),
47-
'Object.assign(new String("var(--mint-a3)"), ({ ["color"] : "mint", ["alpha"] : true, ["shade"] : 3 }))',
48-
Color,
49-
),
35+
(create_color_var(rx.color("mint")), '"var(--mint-7)"', Color),
36+
(create_color_var(rx.color("mint", 3)), '"var(--mint-3)"', Color),
37+
(create_color_var(rx.color("mint", 3, True)), '"var(--mint-a3)"', Color),
5038
(
5139
create_color_var(rx.color(ColorState.color, ColorState.shade)),
52-
f'Object.assign(new String(("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-"+(((__to_string) => __to_string.toString())({color_state_name!s}.shade{FIELD_MARKER}))+")")), ({{ ["color"] : {color_state_name!s}.color{FIELD_MARKER}, ["alpha"] : false, ["shade"] : {color_state_name!s}.shade{FIELD_MARKER} }}))',
40+
f'("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-"+(((__to_string) => __to_string.toString())({color_state_name!s}.shade{FIELD_MARKER}))+")")',
5341
Color,
5442
),
5543
(
5644
create_color_var(
5745
rx.color(ColorState.color, ColorState.shade, ColorState.alpha)
5846
),
59-
f'Object.assign(new String(("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-"+({color_state_name!s}.alpha{FIELD_MARKER} ? "a" : "")+(((__to_string) => __to_string.toString())({color_state_name!s}.shade{FIELD_MARKER}))+")")), ({{ ["color"] : {color_state_name!s}.color{FIELD_MARKER}, ["alpha"] : {color_state_name!s}.alpha{FIELD_MARKER}, ["shade"] : {color_state_name!s}.shade{FIELD_MARKER} }}))',
47+
f'("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-"+({color_state_name!s}.alpha{FIELD_MARKER} ? "a" : "")+(((__to_string) => __to_string.toString())({color_state_name!s}.shade{FIELD_MARKER}))+")")',
6048
Color,
6149
),
6250
(
6351
create_color_var(color_with_fstring),
64-
f'Object.assign(new String(("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-"+(((__to_string) => __to_string.toString())({color_state_name!s}.shade{FIELD_MARKER}))+")")), ({{ ["color"] : {color_state_name!s}.color{FIELD_MARKER}, ["alpha"] : false, ["shade"] : {color_state_name!s}.shade{FIELD_MARKER} }}))',
52+
f'("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-"+(((__to_string) => __to_string.toString())({color_state_name!s}.shade{FIELD_MARKER}))+")")',
6553
Color,
6654
),
6755
(
@@ -71,18 +59,18 @@ def create_color_var(color):
7159
ColorState.shade,
7260
)
7361
),
74-
f'Object.assign(new String(("var(--"+({color_state_name!s}.color_part{FIELD_MARKER}+"ato")+"-"+(((__to_string) => __to_string.toString())({color_state_name!s}.shade{FIELD_MARKER}))+")")), ({{ ["color"] : ({color_state_name!s}.color_part{FIELD_MARKER}+"ato"), ["alpha"] : false, ["shade"] : {color_state_name!s}.shade{FIELD_MARKER} }}))',
62+
f'("var(--"+({color_state_name!s}.color_part{FIELD_MARKER}+"ato")+"-"+(((__to_string) => __to_string.toString())({color_state_name!s}.shade{FIELD_MARKER}))+")")',
7563
Color,
7664
),
7765
(
7866
create_color_var(f"{rx.color(ColorState.color, ColorState.shade)}"),
79-
f'Object.assign(new String(("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-"+(((__to_string) => __to_string.toString())({color_state_name!s}.shade{FIELD_MARKER}))+")")), ({{ ["color"] : {color_state_name!s}.color{FIELD_MARKER}, ["alpha"] : false, ["shade"] : {color_state_name!s}.shade{FIELD_MARKER} }}))',
80-
Color,
67+
f'("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-"+{color_state_name!s}.shade{FIELD_MARKER}+")")',
68+
str,
8169
),
8270
(
8371
create_color_var(f"{color_with_fstring}"),
84-
f'Object.assign(new String(("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-"+(((__to_string) => __to_string.toString())({color_state_name!s}.shade{FIELD_MARKER}))+")")), ({{ ["color"] : {color_state_name!s}.color{FIELD_MARKER}, ["alpha"] : false, ["shade"] : {color_state_name!s}.shade{FIELD_MARKER} }}))',
85-
Color,
72+
f'("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-"+{color_state_name!s}.shade{FIELD_MARKER}+")")',
73+
str,
8674
),
8775
],
8876
)
@@ -96,11 +84,11 @@ def test_color(color, expected, expected_type: type[str] | type[Color]):
9684
[
9785
(
9886
rx.cond(True, rx.color("mint"), rx.color("tomato", 5)),
99-
'(true ? Object.assign(new String("var(--mint-7)"), ({ ["color"] : "mint", ["alpha"] : false, ["shade"] : 7 })) : Object.assign(new String("var(--tomato-5)"), ({ ["color"] : "tomato", ["alpha"] : false, ["shade"] : 5 })))',
87+
'(true ? "var(--mint-7)" : "var(--tomato-5)")',
10088
),
10189
(
10290
rx.cond(True, rx.color(ColorState.color), rx.color(ColorState.color, 5)),
103-
f'(true ? Object.assign(new String(("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-7)")), ({{ ["color"] : {color_state_name!s}.color{FIELD_MARKER}, ["alpha"] : false, ["shade"] : 7 }})) : Object.assign(new String(("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-5)")), ({{ ["color"] : {color_state_name!s}.color{FIELD_MARKER}, ["alpha"] : false, ["shade"] : 5 }})))',
91+
f'(true ? ("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-7)") : ("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-5)"))',
10492
),
10593
(
10694
rx.match(
@@ -109,9 +97,9 @@ def test_color(color, expected, expected_type: type[str] | type[Color]):
10997
("second", rx.color("tomato", 5)),
11098
rx.color(ColorState.color, 2),
11199
),
112-
'(() => { switch (JSON.stringify("condition")) {case JSON.stringify("first"): return (Object.assign(new String("var(--mint-7)"), ({ ["color"] : "mint", ["alpha"] : false, ["shade"] : 7 })));'
113-
' break;case JSON.stringify("second"): return (Object.assign(new String("var(--tomato-5)"), ({ ["color"] : "tomato", ["alpha"] : false, ["shade"] : 5 }))); break;default: '
114-
f'return (Object.assign(new String(("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-2)")), ({{ ["color"] : {color_state_name!s}.color{FIELD_MARKER}, ["alpha"] : false, ["shade"] : 2 }}))); break;}};}})()',
100+
'(() => { switch (JSON.stringify("condition")) {case JSON.stringify("first"): return ("var(--mint-7)");'
101+
' break;case JSON.stringify("second"): return ("var(--tomato-5)"); break;default: '
102+
f'return (("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-2)")); break;}};}})()',
115103
),
116104
(
117105
rx.match(
@@ -121,9 +109,9 @@ def test_color(color, expected, expected_type: type[str] | type[Color]):
121109
rx.color(ColorState.color, 2),
122110
),
123111
'(() => { switch (JSON.stringify("condition")) {case JSON.stringify("first"): '
124-
f'return (Object.assign(new String(("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-7)")), ({{ ["color"] : {color_state_name!s}.color{FIELD_MARKER}, ["alpha"] : false, ["shade"] : 7 }}))); break;case JSON.stringify("second"): '
125-
f'return (Object.assign(new String(("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-5)")), ({{ ["color"] : {color_state_name!s}.color{FIELD_MARKER}, ["alpha"] : false, ["shade"] : 5 }}))); break;default: '
126-
f'return (Object.assign(new String(("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-2)")), ({{ ["color"] : {color_state_name!s}.color{FIELD_MARKER}, ["alpha"] : false, ["shade"] : 2 }}))); break;}};}})()',
112+
f'return (("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-7)")); break;case JSON.stringify("second"): '
113+
f'return (("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-5)")); break;default: '
114+
f'return (("var(--"+{color_state_name!s}.color{FIELD_MARKER}+"-2)")); break;}};}})()',
127115
),
128116
],
129117
)
@@ -134,18 +122,9 @@ def test_color_with_conditionals(cond_var, expected):
134122
@pytest.mark.parametrize(
135123
("color", "expected"),
136124
[
137-
(
138-
create_color_var(rx.color("red")),
139-
'Object.assign(new String("var(--red-7)"), ({ ["color"] : "red", ["alpha"] : false, ["shade"] : 7 }))',
140-
),
141-
(
142-
create_color_var(rx.color("green", shade=1)),
143-
'Object.assign(new String("var(--green-1)"), ({ ["color"] : "green", ["alpha"] : false, ["shade"] : 1 }))',
144-
),
145-
(
146-
create_color_var(rx.color("blue", alpha=True)),
147-
'Object.assign(new String("var(--blue-a7)"), ({ ["color"] : "blue", ["alpha"] : true, ["shade"] : 7 }))',
148-
),
125+
(create_color_var(rx.color("red")), '"var(--red-7)"'),
126+
(create_color_var(rx.color("green", shade=1)), '"var(--green-1)"'),
127+
(create_color_var(rx.color("blue", alpha=True)), '"var(--blue-a7)"'),
149128
("red", '"red"'),
150129
("green", '"green"'),
151130
("blue", '"blue"'),

‎tests/units/components/test_component.py‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2143,10 +2143,9 @@ def add_style(self): # pyright: ignore [reportIncompatibleMethodOverride]
21432143
)
21442144
assert "useText" in page._get_all_hooks_internal()
21452145
assert "useParent" in page._get_all_hooks_internal()
2146-
str_page = str(page)
21472146
assert (
2148-
str_page.count(
2149-
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}+"%") }})'
2147+
str(page).count(
2148+
f'css:({{ ["fakeParent"] : "parent", ["color"] : "var(--plum-10)", ["fake"] : "text", ["margin"] : ({test_state.get_name()}.num{FIELD_MARKER}+"%") }})'
21502149
)
21512150
== 1
21522151
)

‎tests/units/utils/test_serializers.py‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -186,15 +186,9 @@ class BaseSubclass(Base):
186186
[datetime.timedelta(1, 1, 1), datetime.timedelta(1, 1, 2)],
187187
["1 day, 0:00:01.000001", "1 day, 0:00:01.000002"],
188188
),
189-
(Color(color="slate", shade=1), {"color": "slate", "alpha": False, "shade": 1}),
190-
(
191-
Color(color="orange", shade=1, alpha=True),
192-
{"color": "orange", "alpha": True, "shade": 1},
193-
),
194-
(
195-
Color(color="accent", shade=1, alpha=True),
196-
{"color": "accent", "alpha": True, "shade": 1},
197-
),
189+
(Color(color="slate", shade=1), "var(--slate-1)"),
190+
(Color(color="orange", shade=1, alpha=True), "var(--orange-a1)"),
191+
(Color(color="accent", shade=1, alpha=True), "var(--accent-a1)"),
198192
(decimal.Decimal("123.456"), 123.456),
199193
(decimal.Decimal("-0.5"), -0.5),
200194
(decimal.Decimal(0), 0.0),
@@ -233,11 +227,7 @@ def test_serialize(value: Any, expected: str):
233227
True,
234228
),
235229
(datetime.date(2021, 1, 1), '"2021-01-01"', True),
236-
(
237-
Color(color="slate", shade=1),
238-
'Object.assign(new String("var(--slate-1)"), ({ ["color"] : "slate", ["alpha"] : false, ["shade"] : 1 }))',
239-
True,
240-
),
230+
(Color(color="slate", shade=1), '"var(--slate-1)"', True),
241231
(BaseSubclass, '"BaseSubclass"', True),
242232
(Path(), '"."', True),
243233
(decimal.Decimal("123.456"), "123.456", True),

0 commit comments

Comments
 (0)