Introduce basic parts of colour scheme to settings sidebar

osu.Game/Overlays/Settings/SettingsSection.cs

@@ -12,7 +12,6 @@ using osu.Framework.Input.Events;
 using osu.Framework.Localisation;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
-using osuTK.Graphics;
 
 namespace osu.Game.Overlays.Settings
 {
@@ -33,7 +32,7 @@ namespace osu.Game.Overlays.Settings
 
         private const int header_size = 26;
         private const int margin = 20;
-        private const int border_size = 2;
+        private const int border_size = 4;
 
         public bool MatchingFilter
         {
@@ -63,14 +62,14 @@ namespace osu.Game.Overlays.Settings
         }
 
         [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
+        private void load(OverlayColourProvider colourProvider, OsuColour colours)
         {
             AddRangeInternal(new Drawable[]
             {
                 new Box
                 {
                     Name = "separator",
-                    Colour = new Color4(0, 0, 0, 255),
+                    Colour = colourProvider.Background6,
                     RelativeSizeAxes = Axes.X,
                     Height = border_size,
                 },

osu.Game/Overlays/Settings/Sidebar.cs

@@ -4,6 +4,7 @@
 using System;
 using System.Linq;
 using osu.Framework;
+using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
@@ -17,8 +18,9 @@ namespace osu.Game.Overlays.Settings
 {
     public class Sidebar : Container<SidebarButton>, IStateful<ExpandedState>
     {
+        private readonly Box background;
         private readonly FillFlowContainer<SidebarButton> content;
-        public const float DEFAULT_WIDTH = Toolbar.Toolbar.HEIGHT * 1.4f;
+        public const float DEFAULT_WIDTH = 70;
         public const int EXPANDED_WIDTH = 200;
 
         public event Action<ExpandedState> StateChanged;
@@ -30,7 +32,7 @@ namespace osu.Game.Overlays.Settings
             RelativeSizeAxes = Axes.Y;
             InternalChildren = new Drawable[]
             {
-                new Box
+                background = new Box
                 {
                     Colour = OsuColour.Gray(0.02f),
                     RelativeSizeAxes = Axes.Both,
@@ -52,6 +54,12 @@ namespace osu.Game.Overlays.Settings
             };
         }
 
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider)
+        {
+            background.Colour = colourProvider.Background5;
+        }
+
         private ScheduledDelegate expandEvent;
         private ExpandedState state;
 
@@ -80,8 +88,6 @@ namespace osu.Game.Overlays.Settings
         {
             public SidebarScrollContainer()
             {
-                Content.Anchor = Anchor.CentreLeft;
-                Content.Origin = Anchor.CentreLeft;
                 RelativeSizeAxes = Axes.Both;
                 ScrollbarVisible = false;
             }

osu.Game/Overlays/Settings/SidebarButton.cs

@@ -2,12 +2,12 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using osuTK;
-using osuTK.Graphics;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
+using osu.Framework.Input.Events;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Graphics.UserInterface;
@@ -17,11 +17,16 @@ namespace osu.Game.Overlays.Settings
 {
     public class SidebarButton : OsuButton
     {
+        private const double fade_duration = 50;
+
         private readonly ConstrainedIconContainer iconContainer;
         private readonly SpriteText headerText;
-        private readonly Box selectionIndicator;
+        private readonly CircularContainer selectionIndicator;
         private readonly Container text;
 
+        [Resolved]
+        private OverlayColourProvider colourProvider { get; set; }
+
         // always consider as part of flow, even when not visible (for the sake of the initial animation).
         public override bool IsPresent => true;
 
@@ -47,25 +52,15 @@ namespace osu.Game.Overlays.Settings
             {
                 selected = value;
 
-                if (selected)
-                {
-                    selectionIndicator.FadeIn(50);
-                    text.FadeColour(Color4.White, 50);
-                }
-                else
-                {
-                    selectionIndicator.FadeOut(50);
-                    text.FadeColour(OsuColour.Gray(0.6f), 50);
-                }
+                if (IsLoaded)
+                    updateState();
             }
         }
 
         public SidebarButton()
         {
-            Height = Sidebar.DEFAULT_WIDTH;
             RelativeSizeAxes = Axes.X;
-
-            BackgroundColour = Color4.Black;
+            Height = 46;
 
             AddRange(new Drawable[]
             {
@@ -90,21 +85,60 @@ namespace osu.Game.Overlays.Settings
                         },
                     }
                 },
-                selectionIndicator = new Box
+                selectionIndicator = new CircularContainer
                 {
                     Alpha = 0,
-                    RelativeSizeAxes = Axes.Y,
-                    Width = 5,
-                    Anchor = Anchor.CentreRight,
-                    Origin = Anchor.CentreRight,
+                    Width = 3,
+                    Height = 18,
+                    Masking = true,
+                    CornerRadius = 1.5f,
+                    Anchor = Anchor.CentreLeft,
+                    Origin = Anchor.CentreLeft,
+                    Margin = new MarginPadding
+                    {
+                        Left = 9,
+                    },
+                    Child = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Colour = Colour4.White
+                    }
                 },
             });
         }
 
         [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
+        private void load()
         {
-            selectionIndicator.Colour = colours.Yellow;
+            BackgroundColour = colourProvider.Background5;
+            selectionIndicator.Colour = colourProvider.Highlight1;
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+            updateState();
+        }
+
+        protected override bool OnHover(HoverEvent e)
+        {
+            updateState();
+            return false;
+        }
+
+        protected override void OnHoverLost(HoverLostEvent e) => updateState();
+
+        private void updateState()
+        {
+            if (Selected)
+            {
+                text.FadeColour(colourProvider.Content1, fade_duration, Easing.OutQuint);
+                selectionIndicator.FadeIn(fade_duration, Easing.OutQuint);
+                return;
+            }
+
+            text.FadeColour(IsHovered ? colourProvider.Light1 : colourProvider.Light3, fade_duration, Easing.OutQuint);
+            selectionIndicator.FadeOut(fade_duration, Easing.OutQuint);
         }
     }
 }

osu.Game/Overlays/SettingsPanel.cs

@@ -6,7 +6,6 @@ using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
 using osuTK;
-using osuTK.Graphics;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Extensions.IEnumerableExtensions;
@@ -15,7 +14,6 @@ using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Primitives;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Input.Events;
-using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Overlays.Settings;
@@ -64,6 +62,9 @@ namespace osu.Game.Overlays
 
         public IBindable<SettingsSection> CurrentSection = new Bindable<SettingsSection>();
 
+        [Cached]
+        private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Purple);
+
         protected SettingsPanel(bool showSidebar)
         {
             this.showSidebar = showSidebar;
@@ -89,7 +90,7 @@ namespace osu.Game.Overlays
                         Origin = Anchor.TopRight,
                         Scale = new Vector2(2, 1), // over-extend to the left for transitions
                         RelativeSizeAxes = Axes.Both,
-                        Colour = OsuColour.Gray(0.05f),
+                        Colour = colourProvider.Background4,
                         Alpha = 1,
                     },
                     loading = new LoadingLayer
@@ -292,11 +293,12 @@ namespace osu.Game.Overlays
                     Direction = FillDirection.Vertical,
                 };
 
-            public SettingsSectionsContainer()
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
             {
                 HeaderBackground = new Box
                 {
-                    Colour = Color4.Black,
+                    Colour = colourProvider.Background4,
                     RelativeSizeAxes = Axes.Both
                 };
             }