Prepare form controls for use in settings

[frenzibyte]

This applies visual and audible changes, and adds new features for form controls to be ready for use in settings overlay. Changes are summarized as such:

• All disabled form controls match sliders visually (dark background and greyed content).
• Checkbox nubs are replaced with switch buttons.
• Sliders properly support percentage and custom label and tooltip formatting display.

Before	After

Video preview:

preview

CleanShot.2025-12-22.at.20.23.22.mp4

[bdach]

only interested in structure, will leave it to @peppy to assess visuals

[peppy]

Can you explain what "doesn't make sense" about this one? Every other form control has its nested element still respond to hover and show animations and tinting changes, except for this.

(I came here because I noticed the hover effect was not working in the first place, FWIW)

[frenzibyte]

It felt odd to make it respond to hover if clicking inside and clicking outside of the switch does the exact same thing, but I don't feel strongly about it.

[peppy]

The new switch control didn't match the colouring of the slider bar, so I made it match:

diff --git a/osu.Game/Graphics/UserInterfaceV2/FormCheckBox.cs b/osu.Game/Graphics/UserInterfaceV2/FormCheckBox.cs
index 78feee871d..886166d00b 100644
--- a/osu.Game/Graphics/UserInterfaceV2/FormCheckBox.cs
+++ b/osu.Game/Graphics/UserInterfaceV2/FormCheckBox.cs
@@ -176,9 +176,6 @@ private void updateState()
 
         private partial class FormSwitchButton : SwitchButton
         {
-            // it doesn't make sense for this to show hover state or respond to input.
-            // FormCheckBox already handles all of that.
-            public override bool PropagatePositionalInputSubTree => false;
         }
     }
 }
diff --git a/osu.Game/Graphics/UserInterfaceV2/SwitchButton.cs b/osu.Game/Graphics/UserInterfaceV2/SwitchButton.cs
index fe72775bb5..7b577220b5 100644
--- a/osu.Game/Graphics/UserInterfaceV2/SwitchButton.cs
+++ b/osu.Game/Graphics/UserInterfaceV2/SwitchButton.cs
@@ -23,9 +23,9 @@ public partial class SwitchButton : Checkbox
         private const float padding = 1.25f;
 
         private readonly Box fill;
-        private readonly Container switchContainer;
-        private readonly Drawable switchCircle;
-        private readonly CircularContainer circularContainer;
+        private readonly Container nubContainer;
+        private readonly Drawable nub;
+        private readonly CircularContainer content;
 
         [Resolved]
         private OverlayColourProvider colourProvider { get; set; } = null!;
@@ -37,7 +37,7 @@ public SwitchButton()
         {
             Size = new Vector2(45, 20);
 
-            InternalChild = circularContainer = new CircularContainer
+            InternalChild = content = new CircularContainer
             {
                 RelativeSizeAxes = Axes.Both,
                 BorderColour = Color4.White,
@@ -55,15 +55,14 @@ public SwitchButton()
                     {
                         RelativeSizeAxes = Axes.Both,
                         Padding = new MarginPadding(border_thickness + padding),
-                        Child = switchContainer = new Container
+                        Child = nubContainer = new Container
                         {
                             RelativeSizeAxes = Axes.Both,
-                            Child = switchCircle = new CircularContainer
+                            Child = nub = new Circle
                             {
                                 RelativeSizeAxes = Axes.Both,
                                 FillMode = FillMode.Fit,
                                 Masking = true,
-                                Child = new Box { RelativeSizeAxes = Axes.Both }
                             }
                         }
                     }
@@ -90,7 +89,7 @@ protected override void LoadComplete()
 
         private void updateState()
         {
-            switchCircle.MoveToX(Current.Value ? switchContainer.DrawWidth - switchCircle.DrawWidth : 0, 200, Easing.OutQuint);
+            nub.MoveToX(Current.Value ? nubContainer.DrawWidth - nub.DrawWidth : 0, 200, Easing.OutQuint);
             fill.FadeTo(Current.Value ? 1 : 0, 250, Easing.OutQuint);
 
             updateColours();
@@ -120,32 +119,33 @@ protected override void OnUserChange(bool value)
 
         private void updateColours()
         {
-            ColourInfo targetSwitchColour;
-            ColourInfo targetBorderColour;
+            ColourInfo borderColour;
+            ColourInfo switchColour;
 
             if (Current.Disabled)
             {
-                if (Current.Value)
-                    targetBorderColour = colourProvider.Dark1.Opacity(0.5f);
-                else
-                    targetBorderColour = colourProvider.Background2.Opacity(0.5f);
-
-                targetSwitchColour = colourProvider.Dark1.Opacity(0.5f);
-                fill.Colour = colourProvider.Background5;
+                borderColour = colourProvider.Dark2;
+                switchColour = colourProvider.Dark1;
+                fill.Colour = colourProvider.Dark3;
             }
             else
             {
-                if (Current.Value)
-                    targetBorderColour = IsHovered ? colourProvider.Highlight1.Lighten(0.3f) : colourProvider.Highlight1;
-                else
-                    targetBorderColour = IsHovered ? colourProvider.Background1 : colourProvider.Background2;
+                bool hover = IsHovered && !Current.Disabled;
+
+                borderColour = hover ? colourProvider.Highlight1.Opacity(0.5f) : colourProvider.Highlight1.Opacity(0.3f);
+                switchColour = hover ? colourProvider.Highlight1 : colourProvider.Light4;
+
+                if (!Current.Value)
+                {
+                    borderColour = borderColour.MultiplyAlpha(0.8f);
+                    switchColour = switchColour.MultiplyAlpha(0.8f);
+                }
 
-                targetSwitchColour = colourProvider.Highlight1;
-                fill.Colour = colourProvider.Background4;
+                fill.Colour = colourProvider.Background6;
             }
 
-            switchContainer.FadeColour(targetSwitchColour, 250, Easing.OutQuint);
-            circularContainer.TransformTo(nameof(BorderColour), targetBorderColour, 250, Easing.OutQuint);
+            nubContainer.FadeColour(switchColour, 250, Easing.OutQuint);
+            content.TransformTo(nameof(BorderColour), borderColour, 250, Easing.OutQuint);
         }
     }
 }

@frenzibyte please confirm you're okay with the change and commit if so. Note that this also re-enables the hover effects as I pointed out in my review.

[frenzibyte]

I have few concerns with this change:

• Representing the checked-on state with a darker background than disabled feels almost back-to-front to me.
• The checkbox being checked-on while diasbled/non-interactive looks broken visually.

However, after playing around with it I couldn't come up with anything that's still on the same palette as the slider so I gave up on point number one. As for point number 2, I replaced the background colour Dark3 for Dark5 and it looks as such now:

Dark3	Dark5

I've pushed the changes above with that included.

[peppy]

@frenzibyte tests do not pass

[frenzibyte]

Had to cache colour provider in tournaments client, and adjust at least the background colour in the setup screen to fit well after this change.