call to_string on colors coming into style

[adhami3310]

fixes #5835

[greptile-apps]

Greptile Overview

Summary

This PR fixes issue #5835 by adding proper handling for rx.Color objects in the style system. The fix prevents rx.Color objects from being passed directly to emotion CSS-in-JS, which was causing compatibility issues.

• Added import for Color from reflex.constants.colors and LiteralColorVar from reflex.vars.color
• Implemented special case handling in convert_item() function to detect Color instances and convert them to proper CSS color strings using LiteralColorVar.create(style_item).to_string(use_json=False)
• The fix ensures rx.Color objects are properly serialized to CSS color values like var(--red-7) before being processed by emotion

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The fix is targeted and minimal, addressing a specific compatibility issue between rx.Color objects and emotion CSS-in-JS. The change follows established patterns in the codebase and uses existing infrastructure (LiteralColorVar) appropriately. The fix is well-contained within the convert_item function and doesn't affect other functionality.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
reflex/style.py	5/5	Added Color import and special handling in convert_item to convert Color objects to string format using LiteralColorVar

Sequence Diagram

sequenceDiagram
    participant User
    participant Component
    participant Style
    participant ConvertItem
    participant Color
    participant LiteralColorVar
    participant CSS

    User->>Component: rx.button("Click me", bg_color=rx.color("red"))
    Component->>Style: Style processing with Color object
    Style->>ConvertItem: convert_item(Color("red"))
    ConvertItem->>Color: isinstance(style_item, Color) check
    Color-->>ConvertItem: True
    ConvertItem->>LiteralColorVar: LiteralColorVar.create(color)
    LiteralColorVar->>LiteralColorVar: to_string(use_json=False)
    LiteralColorVar-->>ConvertItem: "var(--red-7)" string
    ConvertItem-->>Style: (string_value, None)
    Style-->>Component: Processed style
    Component->>CSS: Render with CSS color value

Loading

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[codspeed-hq]

CodSpeed Performance Report

Merging #5836 will not alter performance

_{Comparing call-to_string-on-colors-coming-into-style (133a4f9) with main (d18256a)}

Summary

✅ 8 untouched