From 315e637bf5b7ce702916e5af26911c1391abdd1c Mon Sep 17 00:00:00 2001
From: Rob Parrett <robparrett@gmail.com>
Date: Wed, 28 Feb 2024 10:21:09 -0700
Subject: [PATCH] Add tinting to the border in `ui_texture_slice` example
 (#11901)

# Objective

This is just a cool property of the full-white border texture we added
for this example that I think would be nice to show off.

## Solution

Add a tint to the border on hover / click.


![screenshot-100](https://github.com/bevyengine/bevy/assets/200550/a436c383-2cda-4578-999d-b89d244c993d)
---
 examples/ui/ui_texture_slice.rs | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/examples/ui/ui_texture_slice.rs b/examples/ui/ui_texture_slice.rs
index 33ea98eb6f..baf3608e64 100644
--- a/examples/ui/ui_texture_slice.rs
+++ b/examples/ui/ui_texture_slice.rs
@@ -14,20 +14,26 @@ fn main() {
 }
 
 fn button_system(
-    interaction_query: Query<(&Interaction, &Children), (Changed<Interaction>, With<Button>)>,
+    mut interaction_query: Query<
+        (&Interaction, &Children, &mut BackgroundColor),
+        (Changed<Interaction>, With<Button>),
+    >,
     mut text_query: Query<&mut Text>,
 ) {
-    for (interaction, children) in &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();
+                color.0 = LegacyColor::GOLD;
             }
             Interaction::Hovered => {
                 text.sections[0].value = "Hover".to_string();
+                color.0 = LegacyColor::ORANGE;
             }
             Interaction::None => {
                 text.sections[0].value = "Button".to_string();
+                color.0 = LegacyColor::WHITE;
             }
         }
     }
@@ -71,6 +77,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                 ..default()
                             },
                             image: image.clone().into(),
+                            // When combined with an image, this tints the image.
+                            background_color: LegacyColor::WHITE.into(),
                             ..default()
                         },
                         ImageScaleMode::Sliced(slicer.clone()),