Fix and Polish Feathers Toggle Switch (#23830)

# Objective

This is a continuation of #23820
for toggle switches to fix their clicking behavior and add more style
tokens. Again, adding the `ActivateOnPress` component will change its
state instantly on mouse-press rather than mouse-release.

Styling is also changed for visibility and disambiguation.

---

## Showcase

### Before

<img width="120" height="31" alt="Screenshot 2026-04-16 at 1 53 12 PM"
src="https://github.com/user-attachments/assets/22fd0374-76cb-40bb-9428-cbd7c69f2e50"
/>

### After

<img width="159" height="31" alt="Screenshot 2026-04-16 at 3 32 21 PM"
src="https://github.com/user-attachments/assets/ecb5bee6-0dbd-4598-8487-cdb333575f78"
/>

(Not pictured: new intermediate styling for mouse press)

Author: jordanhalase

crates/bevy_feathers/src/controls/toggle_switch.rs

@@ -18,8 +18,10 @@ use bevy_input_focus::tab_navigation::TabIndex;
 use bevy_picking::{hover::Hovered, PickingSystems};
 use bevy_reflect::{prelude::ReflectDefault, Reflect};
 use bevy_scene::prelude::*;
-use bevy_ui::{BorderRadius, Checked, InteractionDisabled, Node, PositionType, UiRect, Val};
-use bevy_ui_widgets::Checkbox;
+use bevy_ui::{
+    BorderRadius, Checked, InteractionDisabled, Node, PositionType, Pressed, UiRect, Val,
+};
+use bevy_ui_widgets::{ActivateOnPress, Checkbox};
 
 use crate::{
     constants::size,
@@ -69,10 +71,12 @@ pub fn toggle_switch() -> impl Scene {
                 top: Val::Px(0.),
                 bottom: Val::Px(0.),
                 width: Val::Percent(50.),
+                border: UiRect::all(Val::Px(2.0)),
                 border_radius: BorderRadius::all(Val::Px(3.0)),
             }
             ToggleSwitchSlide
-            ThemeBackgroundColor(tokens::SWITCH_SLIDE)
+            ThemeBackgroundColor(tokens::SWITCH_SLIDE_BG)
+            ThemeBorderColor(tokens::SWITCH_SLIDE_BORDER)
         )]
     }
 }
@@ -114,11 +118,13 @@ pub fn toggle_switch_bundle<B: Bundle>(overrides: B) -> impl Bundle {
                 top: Val::Px(0.),
                 bottom: Val::Px(0.),
                 width: Val::Percent(50.),
+                border: UiRect::all(Val::Px(2.0)),
                 border_radius: BorderRadius::all(Val::Px(3.0)),
                 ..Default::default()
             },
             ToggleSwitchSlide,
-            ThemeBackgroundColor(tokens::SWITCH_SLIDE),
+            ThemeBackgroundColor(tokens::SWITCH_SLIDE_BG),
+            ThemeBorderColor(tokens::SWITCH_SLIDE_BORDER)
         )],
     )
 }
@@ -129,38 +135,62 @@ fn update_switch_styles(
             Entity,
             Has<InteractionDisabled>,
             Has<Checked>,
+            Has<Pressed>,
+            Has<ActivateOnPress>,
             &Hovered,
             &ThemeBackgroundColor,
             &ThemeBorderColor,
         ),
         (
             With<ToggleSwitchOutline>,
-            Or<(Changed<Hovered>, Added<Checked>, Added<InteractionDisabled>)>,
+            Or<(
+                Changed<Hovered>,
+                Added<Checked>,
+                Added<Pressed>,
+                Added<InteractionDisabled>,
+            )>,
         ),
     >,
     q_children: Query<&Children>,
-    mut q_slide: Query<(&mut Node, &ThemeBackgroundColor), With<ToggleSwitchSlide>>,
+    mut q_slide: Query<
+        (&mut Node, &ThemeBackgroundColor, &ThemeBorderColor),
+        With<ToggleSwitchSlide>,
+    >,
     mut commands: Commands,
 ) {
-    for (switch_ent, disabled, checked, hovered, outline_bg, outline_border) in q_switches.iter() {
+    for (
+        switch_ent,
+        disabled,
+        checked,
+        pressed,
+        activate_on_press,
+        hovered,
+        outline_bg,
+        outline_border,
+    ) in q_switches.iter()
+    {
         let Some(slide_ent) = q_children
             .iter_descendants(switch_ent)
             .find(|en| q_slide.contains(*en))
         else {
             continue;
         };
         // Safety: since we just checked the query, should always work.
-        let (ref mut slide_style, slide_color) = q_slide.get_mut(slide_ent).unwrap();
+        let (ref mut slide_style, slide_bg_color, slide_border_color) =
+            q_slide.get_mut(slide_ent).unwrap();
         set_switch_styles(
             switch_ent,
             slide_ent,
             disabled,
             checked,
+            pressed,
             hovered.0,
+            activate_on_press,
             outline_bg,
             outline_border,
             slide_style,
-            slide_color,
+            slide_bg_color,
+            slide_border_color,
             &mut commands,
         );
     }
@@ -172,24 +202,41 @@ fn update_switch_styles_remove(
             Entity,
             Has<InteractionDisabled>,
             Has<Checked>,
+            Has<Pressed>,
+            Has<ActivateOnPress>,
             &Hovered,
             &ThemeBackgroundColor,
             &ThemeBorderColor,
         ),
         With<ToggleSwitchOutline>,
     >,
     q_children: Query<&Children>,
-    mut q_slide: Query<(&mut Node, &ThemeBackgroundColor), With<ToggleSwitchSlide>>,
+    mut q_slide: Query<
+        (&mut Node, &ThemeBackgroundColor, &ThemeBorderColor),
+        With<ToggleSwitchSlide>,
+    >,
     mut removed_disabled: RemovedComponents<InteractionDisabled>,
     mut removed_checked: RemovedComponents<Checked>,
+    mut remove_pressed: RemovedComponents<Pressed>,
+    mut remove_activate_on_press: RemovedComponents<ActivateOnPress>,
     mut commands: Commands,
 ) {
     removed_disabled
         .read()
         .chain(removed_checked.read())
+        .chain(remove_pressed.read())
+        .chain(remove_activate_on_press.read())
         .for_each(|ent| {
-            if let Ok((switch_ent, disabled, checked, hovered, outline_bg, outline_border)) =
-                q_switches.get(ent)
+            if let Ok((
+                switch_ent,
+                disabled,
+                checked,
+                pressed,
+                activate_on_press,
+                hovered,
+                outline_bg,
+                outline_border,
+            )) = q_switches.get(ent)
             {
                 let Some(slide_ent) = q_children
                     .iter_descendants(switch_ent)
@@ -198,17 +245,21 @@ fn update_switch_styles_remove(
                     return;
                 };
                 // Safety: since we just checked the query, should always work.
-                let (ref mut slide_style, slide_color) = q_slide.get_mut(slide_ent).unwrap();
+                let (ref mut slide_style, slide_bg_color, slide_border_color) =
+                    q_slide.get_mut(slide_ent).unwrap();
                 set_switch_styles(
                     switch_ent,
                     slide_ent,
                     disabled,
                     checked,
+                    pressed,
                     hovered.0,
+                    activate_on_press,
                     outline_bg,
                     outline_border,
                     slide_style,
-                    slide_color,
+                    slide_bg_color,
+                    slide_border_color,
                     &mut commands,
                 );
             }
@@ -220,29 +271,102 @@ fn set_switch_styles(
     slide_ent: Entity,
     disabled: bool,
     checked: bool,
+    pressed: bool,
     hovered: bool,
+    activate_on_press: bool,
     outline_bg: &ThemeBackgroundColor,
     outline_border: &ThemeBorderColor,
     slide_style: &mut Mut<Node>,
-    slide_color: &ThemeBackgroundColor,
+    slide_bg_color: &ThemeBackgroundColor,
+    slide_border_color: &ThemeBorderColor,
     commands: &mut Commands,
 ) {
-    let outline_border_token = match (disabled, hovered) {
-        (true, _) => tokens::SWITCH_BORDER_DISABLED,
-        (false, true) => tokens::SWITCH_BORDER_HOVER,
-        _ => tokens::SWITCH_BORDER,
+    let outline_border_token = if checked {
+        if disabled {
+            tokens::SWITCH_BORDER_CHECKED_DISABLED
+        } else if pressed && !activate_on_press {
+            tokens::SWITCH_BORDER_CHECKED_PRESSED
+        } else if hovered {
+            tokens::SWITCH_BORDER_CHECKED_HOVER
+        } else {
+            tokens::SWITCH_BORDER_CHECKED
+        }
+    } else {
+        if disabled {
+            tokens::SWITCH_BORDER_DISABLED
+        } else if pressed && !activate_on_press {
+            tokens::SWITCH_BORDER_PRESSED
+        } else if hovered {
+            tokens::SWITCH_BORDER_HOVER
+        } else {
+            tokens::SWITCH_BORDER
+        }
     };
 
-    let outline_bg_token = match (disabled, checked) {
-        (true, true) => tokens::SWITCH_BG_CHECKED_DISABLED,
-        (true, false) => tokens::SWITCH_BG_DISABLED,
-        (false, true) => tokens::SWITCH_BG_CHECKED,
-        (false, false) => tokens::SWITCH_BG,
+    let outline_bg_token = if checked {
+        if disabled {
+            tokens::SWITCH_BG_CHECKED_DISABLED
+        } else if pressed && !activate_on_press {
+            tokens::SWITCH_BG_CHECKED_PRESSED
+        } else if hovered {
+            tokens::SWITCH_BG_CHECKED_HOVER
+        } else {
+            tokens::SWITCH_BG_CHECKED
+        }
+    } else {
+        if disabled {
+            tokens::SWITCH_BG_DISABLED
+        } else if pressed && !activate_on_press {
+            tokens::SWITCH_BG_PRESSED
+        } else if hovered {
+            tokens::SWITCH_BG_HOVER
+        } else {
+            tokens::SWITCH_BG
+        }
     };
 
-    let slide_token = match disabled {
-        true => tokens::SWITCH_SLIDE_DISABLED,
-        false => tokens::SWITCH_SLIDE,
+    let slide_border_token = if checked {
+        if disabled {
+            tokens::SWITCH_SLIDE_BORDER_CHECKED_DISABLED
+        } else if pressed && !activate_on_press {
+            tokens::SWITCH_SLIDE_BORDER_CHECKED_PRESSED
+        } else if hovered {
+            tokens::SWITCH_SLIDE_BORDER_CHECKED_HOVER
+        } else {
+            tokens::SWITCH_SLIDE_BORDER_CHECKED
+        }
+    } else {
+        if disabled {
+            tokens::SWITCH_SLIDE_BORDER_DISABLED
+        } else if pressed && !activate_on_press {
+            tokens::SWITCH_SLIDE_BORDER_PRESSED
+        } else if hovered {
+            tokens::SWITCH_SLIDE_BORDER_HOVER
+        } else {
+            tokens::SWITCH_SLIDE_BORDER
+        }
+    };
+
+    let slide_bg_token = if checked {
+        if disabled {
+            tokens::SWITCH_SLIDE_BG_CHECKED_DISABLED
+        } else if pressed && !activate_on_press {
+            tokens::SWITCH_SLIDE_BG_CHECKED_PRESSED
+        } else if hovered {
+            tokens::SWITCH_SLIDE_BG_CHECKED_HOVER
+        } else {
+            tokens::SWITCH_SLIDE_BG_CHECKED
+        }
+    } else {
+        if disabled {
+            tokens::SWITCH_SLIDE_BG_DISABLED
+        } else if pressed && !activate_on_press {
+            tokens::SWITCH_SLIDE_BG_PRESSED
+        } else if hovered {
+            tokens::SWITCH_SLIDE_BG_HOVER
+        } else {
+            tokens::SWITCH_SLIDE_BG
+        }
     };
 
     let slide_pos = match checked {
@@ -269,11 +393,18 @@ fn set_switch_styles(
             .insert(ThemeBorderColor(outline_border_token));
     }
 
-    // Change slide color
-    if slide_color.0 != slide_token {
+    // Change slide background color
+    if slide_bg_color.0 != slide_bg_token {
+        commands
+            .entity(slide_ent)
+            .insert(ThemeBackgroundColor(slide_bg_token));
+    }
+
+    // Change slide border color
+    if slide_border_color.0 != slide_border_token {
         commands
             .entity(slide_ent)
-            .insert(ThemeBackgroundColor(slide_token));
+            .insert(ThemeBorderColor(slide_border_token));
     }
 
     // Change slide position