Want to change the color depending on the conditions.

[maki8maki]

Describe the bug
I wrote code to change the shade of rx.color used as background of rx.box depending on the conditions, but the background remains white.
When I replaced rx.color("gray", shade=3) with "var(--gray-3)" and rx.color("gray", shade=7) with "var(--gray-7)" it worked fine.

To Reproduce

from typing import List

import reflex as rx


class State(rx.State):
    my_list: List[int] = [i for i in range(90)]


def get_background_color(index: int):
    return rx.cond(index % 2 == 0, rx.color("gray", shade=3), rx.color("gray", shade=7))


def render_box(value: int, index: int):
    return rx.box(
        rx.text(value),
        bg=get_background_color(index),
        width="30px",
        height="30px",
        border=f"1px solid {rx.color('gray', 12)}",
    )


def display():
    return rx.grid(
        rx.foreach(State.my_list, lambda value, index: render_box(value, index)),
        columns="9",
        border=f"1px solid {rx.color('gray', 12)}",
        justify="center",
    )


app = rx.App()


@rx.page()
def index():
    return display()

Screenshots
Current output

Expected output

Specifics (please complete the following information):

• Python Version: 3.12.7
• Reflex Version: 0.6.1
• OS: 14.7 (intel)
• Browser (Optional): Safari 18.0.1

Additional context
This may not be accurate, but I recall that this issue did not occur in previous versions.

[adhami3310]

apparently rx.Color was being treated as an object var instead of being treated as a string, i made some fixes and it should be there for 0.6.4.

the issue that made this appear is that ObjectVar is typically a dict, and as such we don't translate bg to background-color, if you want a workaround, you can do "background-color" in style for now. we should adjust the logic for converting names to only treat object vars with _var_type == dict as style mapping.