From 0adbacd4c2049ce04186175195afa09fa0bb6563 Mon Sep 17 00:00:00 2001
From: Jordan Halase <jordanhalase@users.noreply.github.com>
Date: Wed, 2 Jul 2025 18:55:58 -0500
Subject: [PATCH] Set checkbox and radio fill color to gray when disabled in
 core widgets example (#19792)

Simple color change to the core widgets example. This sets the fill
colors of the elements to gray if they are selected but disabled. It was
hard to notice if they were disabled when they were still green.


![disabled_gray](https://github.com/user-attachments/assets/299f0700-9fab-4aa4-9076-f17859a60a5e)
---
 examples/ui/core_widgets.rs | 37 +++++++++++++++++++------------------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/examples/ui/core_widgets.rs b/examples/ui/core_widgets.rs
index 318b824d0e..86aaa820f8 100644
--- a/examples/ui/core_widgets.rs
+++ b/examples/ui/core_widgets.rs
@@ -53,8 +53,9 @@ const HOVERED_BUTTON: Color = Color::srgb(0.25, 0.25, 0.25);
 const PRESSED_BUTTON: Color = Color::srgb(0.35, 0.75, 0.35);
 const SLIDER_TRACK: Color = Color::srgb(0.05, 0.05, 0.05);
 const SLIDER_THUMB: Color = Color::srgb(0.35, 0.75, 0.35);
-const CHECKBOX_OUTLINE: Color = Color::srgb(0.45, 0.45, 0.45);
-const CHECKBOX_CHECK: Color = Color::srgb(0.35, 0.75, 0.35);
+const ELEMENT_OUTLINE: Color = Color::srgb(0.45, 0.45, 0.45);
+const ELEMENT_FILL: Color = Color::srgb(0.35, 0.75, 0.35);
+const ELEMENT_FILL_DISABLED: Color = Color::srgb(0.5019608, 0.5019608, 0.5019608);
 
 /// Marker which identifies buttons with a particular style, in this case the "Demo style".
 #[derive(Component)]
@@ -353,7 +354,7 @@ fn slider(min: f32, max: f32, value: f32, on_change: Callback<In<f32>>) -> impl
                     height: Val::Px(6.0),
                     ..default()
                 },
-                BackgroundColor(SLIDER_TRACK), // Border color for the checkbox
+                BackgroundColor(SLIDER_TRACK), // Border color for the slider
                 BorderRadius::all(Val::Px(3.0)),
             )),
             // Invisible track to allow absolute placement of thumb entity. This is narrower than
@@ -456,7 +457,7 @@ fn update_slider_style2(
 
 fn thumb_color(disabled: bool, hovered: bool) -> Color {
     match (disabled, hovered) {
-        (true, _) => GRAY.into(),
+        (true, _) => ELEMENT_FILL_DISABLED,
 
         (false, true) => SLIDER_THUMB.lighter(0.3),
 
@@ -495,7 +496,7 @@ fn checkbox(
                     border: UiRect::all(Val::Px(2.0)),
                     ..default()
                 },
-                BorderColor::all(CHECKBOX_OUTLINE), // Border color for the checkbox
+                BorderColor::all(ELEMENT_OUTLINE), // Border color for the checkbox
                 BorderRadius::all(Val::Px(3.0)),
                 children![
                     // Checkbox inner
@@ -509,7 +510,7 @@ fn checkbox(
                             top: Val::Px(2.0),
                             ..default()
                         },
-                        BackgroundColor(CHECKBOX_CHECK),
+                        BackgroundColor(ELEMENT_FILL),
                     ),
                 ],
             )),
@@ -525,7 +526,7 @@ fn checkbox(
     )
 }
 
-// Update the checkbox's styles.
+// Update the element's styles.
 fn update_checkbox_or_radio_style(
     mut q_checkbox: Query<
         (Has<Checked>, &Hovered, Has<InteractionDisabled>, &Children),
@@ -635,27 +636,27 @@ fn set_checkbox_or_radio_style(
     mark_bg: &mut BackgroundColor,
 ) {
     let color: Color = if disabled {
-        // If the checkbox is disabled, use a lighter color
-        CHECKBOX_OUTLINE.with_alpha(0.2)
+        // If the element is disabled, use a lighter color
+        ELEMENT_OUTLINE.with_alpha(0.2)
     } else if hovering {
         // If hovering, use a lighter color
-        CHECKBOX_OUTLINE.lighter(0.2)
+        ELEMENT_OUTLINE.lighter(0.2)
     } else {
-        // Default color for the checkbox
-        CHECKBOX_OUTLINE
+        // Default color for the element
+        ELEMENT_OUTLINE
     };
 
-    // Update the background color of the check mark
+    // Update the background color of the element
     border_color.set_all(color);
 
     let mark_color: Color = match (disabled, checked) {
-        (true, true) => CHECKBOX_CHECK.with_alpha(0.5),
-        (false, true) => CHECKBOX_CHECK,
+        (true, true) => ELEMENT_FILL_DISABLED,
+        (false, true) => ELEMENT_FILL,
         (_, false) => Srgba::NONE.into(),
     };
 
     if mark_bg.0 != mark_color {
-        // Update the color of the check mark
+        // Update the color of the element
         mark_bg.0 = mark_color;
     }
 }
@@ -707,7 +708,7 @@ fn radio(asset_server: &AssetServer, value: TrackClick, caption: &str) -> impl B
                     border: UiRect::all(Val::Px(2.0)),
                     ..default()
                 },
-                BorderColor::all(CHECKBOX_OUTLINE), // Border color for the checkbox
+                BorderColor::all(ELEMENT_OUTLINE), // Border color for the radio button
                 BorderRadius::MAX,
                 children![
                     // Radio inner
@@ -722,7 +723,7 @@ fn radio(asset_server: &AssetServer, value: TrackClick, caption: &str) -> impl B
                             ..default()
                         },
                         BorderRadius::MAX,
-                        BackgroundColor(CHECKBOX_CHECK),
+                        BackgroundColor(ELEMENT_FILL),
                     ),
                 ],
             )),