Is there a support for state-based styling in bevy_ui ?

[gauravgandhi1315]

[bastosmichael]

There's no declarative, CSS-style "state → style" system in bevy_ui itself, but the state components exist and you drive the styling with systems or observers.

State components

• bevy_ui has Pressed, InteractionDisabled, Checked/Checkable and Selected/Selectable (crates/bevy_ui/src/interaction_states.rs).
• bevy_picking::hover::Hovered(bool) covers hover. It mirrors CSS :hover, so it is true when a descendant is hovered, and it is only mutated on enter or leave, so change detection works.

Styling pattern

Query for changes and set the colour, as bevy_feathers does for its buttons (crates/bevy_feathers/src/controls/button.rs). update_button_styles runs on Or<(Changed<Hovered>, Added<Pressed>, Added<InteractionDisabled>)>, then matches on (disabled, pressed, hovered) to pick the theme token. update_button_styles_remove re-applies it when Pressed or InteractionDisabled is removed.

Untested sketch (not compiled):

fn style_buttons(
    mut q: Query<(&mut BackgroundColor, &Hovered, Has<Pressed>, Has<InteractionDisabled>),
                 Or<(Changed<Hovered>, Added<Pressed>, Added<InteractionDisabled>)>>,
) {
    for (mut bg, hovered, pressed, disabled) in &mut q {
        bg.0 = match (disabled, pressed, hovered.get()) {
            (true, _, _) => DISABLED, (_, true, _) => PRESSED,
            (_, _, true) => HOVER, _ => NORMAL,
        };
    }
}

(Add a system for the removal case, as feathers does.)

Ready-made options

• bevy_feathers gives styled, themed widgets (ThemeBackgroundColor and similar). Its API is still evolving.
• The observer-based widgets in examples/ui/widgets (standard_widgets_observers.rs), or bevy_ui_widgets for headless behaviour.

Note: this is based on current main, not the 0.20.0 tag, so details may differ from the release. Tell me which version you're on and what states you need, and I'll adjust.