fix remaining issues with background color in examples (#14115)

# Objective

- Fixes #14097

## Solution

- Switching the uses of `UiImage` in examples to `BackgroundColor` when
needed

examples/state/computed_states.rs

@@ -224,20 +224,19 @@ fn menu(
     tutorial_state: Res<State<TutorialState>>,
     mut next_tutorial: ResMut<NextState<TutorialState>>,
     mut interaction_query: Query<
-        (&Interaction, &mut UiImage, &MenuButton),
+        (&Interaction, &mut BackgroundColor, &MenuButton),
         (Changed<Interaction>, With<Button>),
     >,
 ) {
-    for (interaction, mut image, menu_button) in &mut interaction_query {
+    for (interaction, mut color, menu_button) in &mut interaction_query {
-        let color = &mut image.color;
         match *interaction {
             Interaction::Pressed => {
                 *color = if menu_button == &MenuButton::Tutorial
                     && tutorial_state.get() == &TutorialState::Active
                 {
-                    PRESSED_ACTIVE_BUTTON
+                    PRESSED_ACTIVE_BUTTON.into()
                 } else {
-                    PRESSED_BUTTON
+                    PRESSED_BUTTON.into()
                 };
 
                 match menu_button {
@@ -255,18 +254,18 @@ fn menu(
                 if menu_button == &MenuButton::Tutorial
                     && tutorial_state.get() == &TutorialState::Active
                 {
-                    *color = HOVERED_ACTIVE_BUTTON;
+                    *color = HOVERED_ACTIVE_BUTTON.into();
                 } else {
-                    *color = HOVERED_BUTTON;
+                    *color = HOVERED_BUTTON.into();
                 }
             }
             Interaction::None => {
                 if menu_button == &MenuButton::Tutorial
                     && tutorial_state.get() == &TutorialState::Active
                 {
-                    *color = ACTIVE_BUTTON;
+                    *color = ACTIVE_BUTTON.into();
                 } else {
-                    *color = NORMAL_BUTTON;
+                    *color = NORMAL_BUTTON.into();
                 }
             }
         }

examples/state/custom_transitions.rs

@@ -142,22 +142,21 @@ mod custom_transitions {
 fn menu(
     mut next_state: ResMut<NextState<AppState>>,
     mut interaction_query: Query<
-        (&Interaction, &mut UiImage),
+        (&Interaction, &mut BackgroundColor),
         (Changed<Interaction>, With<Button>),
     >,
 ) {
-    for (interaction, mut image) in &mut interaction_query {
+    for (interaction, mut color) in &mut interaction_query {
-        let color = &mut image.color;
         match *interaction {
             Interaction::Pressed => {
-                *color = PRESSED_BUTTON;
+                *color = PRESSED_BUTTON.into();
                 next_state.set(AppState::InGame);
             }
             Interaction::Hovered => {
-                *color = HOVERED_BUTTON;
+                *color = HOVERED_BUTTON.into();
             }
             Interaction::None => {
-                *color = NORMAL_BUTTON;
+                *color = NORMAL_BUTTON.into();
             }
         }
     }

examples/state/states.rs

@@ -95,21 +95,21 @@ fn setup_menu(mut commands: Commands) {
 fn menu(
     mut next_state: ResMut<NextState<AppState>>,
     mut interaction_query: Query<
-        (&Interaction, &mut UiImage),
+        (&Interaction, &mut BackgroundColor),
         (Changed<Interaction>, With<Button>),
     >,
 ) {
-    for (interaction, mut image) in &mut interaction_query {
+    for (interaction, mut color) in &mut interaction_query {
         match *interaction {
             Interaction::Pressed => {
-                image.color = PRESSED_BUTTON;
+                *color = PRESSED_BUTTON.into();
                 next_state.set(AppState::InGame);
             }
             Interaction::Hovered => {
-                image.color = HOVERED_BUTTON;
+                *color = HOVERED_BUTTON.into();
             }
             Interaction::None => {
-                image.color = NORMAL_BUTTON;
+                *color = NORMAL_BUTTON.into();
             }
         }
     }

examples/state/sub_states.rs

@@ -63,22 +63,21 @@ fn main() {
 fn menu(
     mut next_state: ResMut<NextState<AppState>>,
     mut interaction_query: Query<
-        (&Interaction, &mut UiImage),
+        (&Interaction, &mut BackgroundColor),
         (Changed<Interaction>, With<Button>),
     >,
 ) {
-    for (interaction, mut image) in &mut interaction_query {
+    for (interaction, mut color) in &mut interaction_query {
-        let color = &mut image.color;
         match *interaction {
             Interaction::Pressed => {
-                *color = PRESSED_BUTTON;
+                *color = PRESSED_BUTTON.into();
                 next_state.set(AppState::InGame);
             }
             Interaction::Hovered => {
-                *color = HOVERED_BUTTON;
+                *color = HOVERED_BUTTON.into();
             }
             Interaction::None => {
-                *color = NORMAL_BUTTON;
+                *color = NORMAL_BUTTON.into();
             }
         }
     }

examples/stress_tests/many_buttons.rs

@@ -100,12 +100,15 @@ fn main() {
 struct IdleColor(Color);
 
 fn button_system(
-    mut interaction_query: Query<(&Interaction, &mut UiImage, &IdleColor), Changed<Interaction>>,
+    mut interaction_query: Query<
+        (&Interaction, &mut BackgroundColor, &IdleColor),
+        Changed<Interaction>,
+    >,
 ) {
-    for (interaction, mut image, &IdleColor(idle_color)) in interaction_query.iter_mut() {
+    for (interaction, mut color, &IdleColor(idle_color)) in interaction_query.iter_mut() {
-        image.color = match interaction {
+        *color = match interaction {
             Interaction::Hovered => ORANGE_RED.into(),
-            _ => idle_color,
+            _ => idle_color.into(),
         };
     }
 }

examples/ui/button.rs

@@ -19,27 +19,32 @@ const PRESSED_BUTTON: Color = Color::srgb(0.35, 0.75, 0.35);
 
 fn button_system(
     mut interaction_query: Query<
-        (&Interaction, &mut UiImage, &mut BorderColor, &Children),
+        (
+            &Interaction,
+            &mut BackgroundColor,
+            &mut BorderColor,
+            &Children,
+        ),
         (Changed<Interaction>, With<Button>),
     >,
     mut text_query: Query<&mut Text>,
 ) {
-    for (interaction, mut image, mut border_color, children) in &mut interaction_query {
+    for (interaction, mut color, mut border_color, children) in &mut interaction_query {
         let mut text = text_query.get_mut(children[0]).unwrap();
         match *interaction {
             Interaction::Pressed => {
                 text.sections[0].value = "Press".to_string();
-                image.color = PRESSED_BUTTON;
+                *color = PRESSED_BUTTON.into();
                 border_color.0 = RED.into();
             }
             Interaction::Hovered => {
                 text.sections[0].value = "Hover".to_string();
-                image.color = HOVERED_BUTTON;
+                *color = HOVERED_BUTTON.into();
                 border_color.0 = Color::WHITE;
             }
             Interaction::None => {
                 text.sections[0].value = "Button".to_string();
-                image.color = NORMAL_BUTTON;
+                *color = NORMAL_BUTTON.into();
                 border_color.0 = Color::BLACK;
             }
         }

examples/ui/display_and_visibility.rs

@@ -460,13 +460,13 @@ fn buttons_handler<T>(
 }
 
 fn text_hover(
-    mut button_query: Query<(&Interaction, &mut UiImage, &Children), Changed<Interaction>>,
+    mut button_query: Query<(&Interaction, &mut BackgroundColor, &Children), Changed<Interaction>>,
     mut text_query: Query<&mut Text>,
 ) {
-    for (interaction, mut image, children) in button_query.iter_mut() {
+    for (interaction, mut color, children) in button_query.iter_mut() {
         match interaction {
             Interaction::Hovered => {
-                image.color = Color::BLACK.with_alpha(0.6);
+                *color = Color::BLACK.with_alpha(0.6).into();
                 for &child in children {
                     if let Ok(mut text) = text_query.get_mut(child) {
                         // Bypass change detection to avoid recomputation of the text when only changing the color
@@ -475,7 +475,7 @@ fn text_hover(
                 }
             }
             _ => {
-                image.color = Color::BLACK.with_alpha(0.5);
+                *color = Color::BLACK.with_alpha(0.5).into();
                 for &child in children {
                     if let Ok(mut text) = text_query.get_mut(child) {
                         text.bypass_change_detection().sections[0].style.color =

examples/ui/size_constraints.rs

@@ -245,7 +245,7 @@ fn spawn_button(
                     margin: UiRect::horizontal(Val::Px(2.)),
                     ..Default::default()
                 },
-                background_color: if active {
+                border_color: if active {
                     ACTIVE_BORDER_COLOR
                 } else {
                     INACTIVE_BORDER_COLOR
@@ -359,7 +359,7 @@ fn update_buttons(
 fn update_radio_buttons_colors(
     mut event_reader: EventReader<ButtonActivatedEvent>,
     button_query: Query<(Entity, &Constraint, &Interaction)>,
-    mut image_query: Query<&mut UiImage>,
+    mut border_query: Query<&mut BorderColor>,
     mut color_query: Query<&mut BackgroundColor>,
     mut text_query: Query<&mut Text>,
     children_query: Query<&Children>,
@@ -382,7 +382,7 @@ fn update_radio_buttons_colors(
                     )
                 };
 
-                image_query.get_mut(id).unwrap().color = border_color;
+                border_query.get_mut(id).unwrap().0 = border_color;
                 for &child in children_query.get(id).into_iter().flatten() {
                     color_query.get_mut(child).unwrap().0 = inner_color;
                     for &grandchild in children_query.get(child).into_iter().flatten() {

examples/ui/ui_texture_atlas_slice.rs

@@ -19,26 +19,31 @@ fn main() {
 
 fn button_system(
     mut interaction_query: Query<
-        (&Interaction, &mut TextureAtlas, &Children, &mut UiImage),
+        (
+            &Interaction,
+            &mut TextureAtlas,
+            &Children,
+            &mut BackgroundColor,
+        ),
         (Changed<Interaction>, With<Button>),
     >,
     mut text_query: Query<&mut Text>,
 ) {
-    for (interaction, mut atlas, children, mut image) in &mut interaction_query {
+    for (interaction, mut atlas, children, mut color) in &mut interaction_query {
         let mut text = text_query.get_mut(children[0]).unwrap();
         match *interaction {
             Interaction::Pressed => {
                 text.sections[0].value = "Press".to_string();
                 atlas.index = (atlas.index + 1) % 30;
-                image.color = GOLD.into();
+                *color = GOLD.into();
             }
             Interaction::Hovered => {
                 text.sections[0].value = "Hover".to_string();
-                image.color = ORANGE.into();
+                *color = ORANGE.into();
             }
             Interaction::None => {
                 text.sections[0].value = "Button".to_string();
-                image.color = Color::WHITE;
+                *color = Color::BLACK.into();
             }
         }
     }

examples/ui/ui_texture_slice.rs

@@ -19,25 +19,25 @@ fn main() {
 
 fn button_system(
     mut interaction_query: Query<
-        (&Interaction, &Children, &mut UiImage),
+        (&Interaction, &Children, &mut BackgroundColor),
         (Changed<Interaction>, With<Button>),
     >,
     mut text_query: Query<&mut Text>,
 ) {
-    for (interaction, children, mut image) in &mut interaction_query {
+    for (interaction, children, mut color) in &mut interaction_query {
         let mut text = text_query.get_mut(children[0]).unwrap();
         match *interaction {
             Interaction::Pressed => {
                 text.sections[0].value = "Press".to_string();
-                image.color = GOLD.into();
+                *color = GOLD.into();
             }
             Interaction::Hovered => {
                 text.sections[0].value = "Hover".to_string();
-                image.color = ORANGE.into();
+                *color = ORANGE.into();
             }
             Interaction::None => {
                 text.sections[0].value = "Button".to_string();
-                image.color = Color::WHITE;
+                *color = Color::BLACK.into();
             }
         }
     }