Problems with styling in chakra

[Alek99]

Describe the bug A clear and concise description of what the bug is.

I was trying to apply this style to a chakra button. What I found is that the styling for focus is not what it should be and styling for active is very odd as well. I think this may be a problem with chakra itself see this issue that has a pr merged but I don't this its totally resolved.

@kbrgl and I are finding it hard to style chakra components in more advanced use cases especially when trying to transfer styles from Figma to Pynecone. Maybe it is time to look a more unsettled headless library for our base components?

ACCENT_BUTTON = {
    "justify_content": "center",
    "align_items": "center",
    "isolation": "isolate",
    "border_radius": 10,
    "font_family": SANS,
    "font_style": "normal",
    "font_weight": 600,
    "color": "#F5EFFE",
    "background": "radial-gradient(82.06% 100% at 50% 100%, rgba(52, 46, 92, 0.8) 0%, rgba(234, 228, 253, 0) 100%), #7E69E0",
    "box_shadow": "0px 4px 10px -2px rgba(3, 3, 11, 0.32), 0px 4px 8px 0px rgba(3, 3, 11, 0.24), 0px 2px 3px 0px rgba(3, 3, 11, 0.10), 0px 0px 0px 1px rgba(32, 17, 126, 0.56), 0px -20px 12px -4px rgba(86, 70, 237, 0.32) inset, 0px 12px 12px -2px rgba(149, 128, 247, 0.16) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.16) inset;",
    "_hover": { 
        "background": "radial-gradient(82.06% 100% at 50.00% 100.00%, rgba(52, 46, 92, 0.90) 0%, rgba(234, 228, 253, 0.00) 100%), #9580F7);",
        "box_shadow":  "0px 4px 10px -2px rgba(3, 3, 11, 0.28), 0px 4px 8px 0px rgba(3, 3, 11, 0.24), 0px 2px 3px 0px rgba(3, 3, 11, 0.12), 0px 0px 0px 1px rgba(32, 17, 126, 0.64), 0px -20px 20px -4px rgba(86, 70, 237, 0.66) inset, 0px 12px 12px -2px #9580F7 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.20) inset;",
    },
    "_active": {
        "background": "radial-gradient(82.06% 100% at 50.00% 100.00%, rgba(52, 46, 92, 0.80) 0%, rgba(234, 228, 253, 0.00) 100%), #7E69E0);",
        "box_shadow": "0px 4px 10px -2px rgba(3, 3, 11, 0.12), 0px 4px 8px 0px rgba(3, 3, 11, 0.12), 0px 2px 3px 0px rgba(3, 3, 11, 0.10), 0px 0px 0px 2px rgba(149, 128, 247, 0.60), 0px -20px 12px -4px rgba(126, 105, 224, 0.60) inset, 0px 12px 12px -2px rgba(86, 70, 237, 0.12) inset, 0px 0px 0px 1px rgba(32, 17, 126, 0.40) inset;"
    }
}

[FHU-yezi]

Maybe you can try Tailwind CSS to set hover styles.

[danik292]

Radial gradients works properly?

[Alek99]

Radial gradients works properly?

Yes they should work we use them on reflex.dev

[danik292]

I think it's chakra problem not reflex problem

[rohitsathish]

I'm currently unable to set the height or other styles to buttons. Is this a similar issue related to chakra?

[picklelo]

@rohitsathish Could you share what code you're trying to run?

[rohitsathish]

@rohitsathish Could you share what code you're trying to run?

Sure

Tailwind classes don't seem to work on chakra buttons, here the border colors show up but not the height adjustments -

def test():
    return rx.box(
        rx.button(
            rx.icon(tag="moon"),
            on_click=rx.toggle_color_mode,
            class_name="h-1/2 border-green-500 border-2",
            #style={"height": "50%", "width": "auto"},
        ),
        class_name="h-20 border-blue-500 border-2"
    )

But using style directly produces the expected behaviour, so I assume its a problem with chakra and tailwind -

def test():
    return rx.box(
        rx.button(
            rx.icon(tag="moon"),
            on_click=rx.toggle_color_mode,
            class_name="h-1/2 border-green-500 border-2",
            style={"height": "50%", "width": "auto"},
        ),
        class_name="h-20 border-blue-500 border-2"
    )

[picklelo]

The new Radix components should be preferred now.