1
0
mirror of https://github.com/ppy/osu.git synced 2025-03-23 09:37:22 +08:00

Refactor colors to palette based design

This commit is contained in:
Drew DeVault 2017-01-12 16:38:27 -05:00
parent c222be05c0
commit fa007e632d
26 changed files with 150 additions and 155 deletions

View File

@ -33,14 +33,16 @@ namespace osu.Game.Beatmaps.Drawables
base.Selected();
GainedSelection?.Invoke(this);
background.ColourInfo = OsuColor.BeatmapPanelSelected;
background.ColourInfo = ColourInfo.GradientVertical(
new Color4(20, 43, 51, 255),
new Color4(40, 86, 102, 255));
}
protected override void Deselected()
{
base.Deselected();
background.Colour = OsuColor.BeatmapPanelUnselected;
background.Colour = new Color4(20, 43, 51, 255);
}
protected override bool OnClick(InputState state)
@ -70,7 +72,7 @@ namespace osu.Game.Beatmaps.Drawables
CornerRadius = Content.CornerRadius,
RelativeSizeAxes = Axes.Both,
BlendingMode = BlendingMode.Additive,
Colour = OsuColor.BeatmapPanelUnselected,
Colour = new Color4(20, 43, 51, 255),
},
new FlowContainer
{

View File

@ -139,19 +139,22 @@ namespace osu.Game.Beatmaps.Drawables
new Box
{
RelativeSizeAxes = Axes.Both,
ColourInfo = OsuColor.BeatmapHeaderBackgroundA,
ColourInfo = ColourInfo.GradientHorizontal(
Color4.Black, new Color4(0f, 0f, 0f, 0.9f)),
Width = 0.05f,
},
new Box
{
RelativeSizeAxes = Axes.Both,
ColourInfo = OsuColor.BeatmapHeaderBackgroundB,
ColourInfo = ColourInfo.GradientHorizontal(
new Color4(0f, 0f, 0f, 0.9f), new Color4(0f, 0f, 0f, 0.1f)),
Width = 0.2f,
},
new Box
{
RelativeSizeAxes = Axes.Both,
ColourInfo = OsuColor.BeatmapHeaderBackgroundC,
ColourInfo = ColourInfo.GradientHorizontal(
new Color4(0f, 0f, 0f, 0.1f), new Color4(0, 0, 0, 0)),
Width = 0.05f,
},
}

View File

@ -36,7 +36,7 @@ namespace osu.Game.Beatmaps.Drawables
RelativeSizeAxes = Axes.Both,
Masking = true,
CornerRadius = 10,
BorderColour = OsuColor.PanelBorder,
BorderColour = new Color4(221, 255, 255, 255),
});
}
@ -85,7 +85,7 @@ namespace osu.Game.Beatmaps.Drawables
nestedContainer.EdgeEffect = new EdgeEffect
{
Type = EdgeEffectType.Glow,
Colour = OsuColor.PanelGlowSelected,
Colour = new Color4(130, 204, 255, 150),
Radius = 20,
Roundness = 10,
};
@ -99,7 +99,7 @@ namespace osu.Game.Beatmaps.Drawables
Type = EdgeEffectType.Shadow,
Offset = new Vector2(1),
Radius = 10,
Colour = OsuColor.PanelGlowUnselected,
Colour = Color4.Black.Opacity(100),
};
}

View File

@ -46,10 +46,10 @@ namespace osu.Game.Beatmaps.Formats
public virtual void ApplyColours(Beatmap b)
{
List<Color4> colours = b.ComboColors ?? new List<Color4> {
OsuColor.Combo1,
OsuColor.Combo2,
OsuColor.Combo3,
OsuColor.Combo4,
new Color4(17, 136, 170, 255),
new Color4(102, 136, 0, 255),
new Color4(204, 102, 0, 255),
new Color4(121, 9, 13, 255),
};
if (colours.Count == 0) return;

View File

@ -1,67 +0,0 @@
using System;
using OpenTK.Graphics;
using osu.Framework.Graphics.Colour;
namespace osu.Game.Graphics
{
public static class OsuColor
{
public static Color4 Opacity(this Color4 color, float a) => new Color4(color.R, color.G, color.B, a);
public static Color4 Opacity(this Color4 color, byte a) => new Color4(color.R, color.G, color.B, a / 255f);
public static Color4 Gray(float amt) => new Color4(amt, amt, amt, 1f);
public static Color4 Gray(byte amt) => new Color4(amt, amt, amt, 255);
public static readonly Color4 OsuPink = new Color4(255, 102, 170, 255);
public static readonly Color4 BeatmapPanelUnselected = new Color4(20, 43, 51, 255);
public static readonly ColourInfo BeatmapPanelSelected = ColourInfo.GradientVertical(
new Color4(20, 43, 51, 255),
new Color4(40, 86, 102, 255));
public static readonly ColourInfo BeatmapHeaderBackgroundA =
ColourInfo.GradientHorizontal(Color4.Black, new Color4(0f, 0f, 0f, 0.9f));
public static readonly ColourInfo BeatmapHeaderBackgroundB =
ColourInfo.GradientHorizontal(new Color4(0f, 0f, 0f, 0.9f), new Color4(0f, 0f, 0f, 0.1f));
public static readonly ColourInfo BeatmapHeaderBackgroundC =
ColourInfo.GradientHorizontal(new Color4(0f, 0f, 0f, 0.1f), new Color4(0, 0, 0, 0));
public static readonly Color4 PanelBorder = new Color4(221, 255, 255, 255);
public static readonly Color4 PanelGlowSelected = new Color4(130, 204, 255, 150);
public static readonly Color4 PanelGlowUnselected = new Color4(0, 0, 0, 100);
public static readonly Color4 Combo1 = new Color4(17, 136, 170, 255);
public static readonly Color4 Combo2 = new Color4(102, 136, 0, 255);
public static readonly Color4 Combo3 = new Color4(204, 102, 0, 255);
public static readonly Color4 Combo4 = new Color4(121, 9, 13, 255);
public static readonly Color4 BackButtonLeft = new Color4(195, 40, 140, 255);
public static readonly Color4 BackButtonRight = new Color4(238, 51, 153, 255);
public static readonly Color4 Button = new Color4(14, 132, 165, 255);
public static readonly Color4 PlayButton = new Color4(238, 51, 153, 255);
public static readonly Color4 MusicControllerBackground = new Color4(150, 150, 150, 255);
public static readonly Color4 MusicControllerProgress = new Color4(255, 204, 34, 255);
public static readonly Color4 CheckBoxHover = new Color4(255, 221, 238, 255);
public static readonly Color4 CheckBoxGlow = new Color4(187, 17, 119, 0);
public static readonly Color4 DropDownBackground = new Color4(0, 0, 0, 128);
public static readonly Color4 DropDownHover = new Color4(187, 17, 119, 255);
public static readonly Color4 OptionSectionHeader = new Color4(247, 198, 35, 255);
public static readonly Color4 SidebarButtonBackground = new Color4(60, 60, 60, 255);
public static readonly Color4 SidebarButtonSelectionIndicator = new Color4(247, 198, 35, 255);
public static readonly Color4 SliderbarBackground = new Color4(255, 102, 170, 255);
public static readonly Color4 SliderbarNub = new Color4(255, 102, 170, 255);
public static readonly Color4 ToolbarModeButtonIcon = new Color4(255, 194, 224, 255);
public static readonly Color4 ToolbarModeButtonIconActiveGlow = new Color4(255, 194, 224, 100);
public static readonly Color4 BeatmapInfoWedgeBorder = new Color4(221, 255, 255, 255);
public static readonly Color4 BeatmapInfoWedgeGlow = new Color4(130, 204, 255, 150);
}
}

View File

@ -0,0 +1,57 @@
using System;
using OpenTK.Graphics;
using osu.Framework.Graphics.Colour;
namespace osu.Game.Graphics
{
public static class OsuColour
{
public static Color4 Opacity(this Color4 color, float a) => new Color4(color.R, color.G, color.B, a);
public static Color4 Opacity(this Color4 color, byte a) => new Color4(color.R, color.G, color.B, a / 255f);
public static Color4 Gray(float amt) => new Color4(amt, amt, amt, 1f);
public static Color4 Gray(byte amt) => new Color4(amt, amt, amt, 255);
private static Color4 FromHex(string hex)
{
return new Color4(
Convert.ToByte(hex.Substring(1, 2), 16),
Convert.ToByte(hex.Substring(3, 2), 16),
Convert.ToByte(hex.Substring(5, 2), 16),
255);
}
// See https://github.com/ppy/osu-web/blob/master/resources/assets/less/colors.less
public static readonly Color4 PurpleLighter = FromHex(@"eeeeff");
public static readonly Color4 PurpleLight = FromHex(@"aa88ff");
public static readonly Color4 Purple = FromHex(@"8866ee");
public static readonly Color4 PurpleDark = FromHex(@"6644cc");
public static readonly Color4 PurpleDarker = FromHex(@"441188");
public static readonly Color4 PinkLighter = FromHex(@"ffddee");
public static readonly Color4 PinkLight = FromHex(@"ff99cc");
public static readonly Color4 Pink = FromHex(@"ff66aa");
public static readonly Color4 PinkDark = FromHex(@"cc5288");
public static readonly Color4 PinkDarker = FromHex(@"bb1177");
public static readonly Color4 BlueLighter = FromHex(@"ddffff");
public static readonly Color4 BlueLight = FromHex(@"99eeff");
public static readonly Color4 Blue = FromHex(@"66ccff");
public static readonly Color4 BlueDark = FromHex(@"44aadd");
public static readonly Color4 BlueDarker = FromHex(@"2299bb");
public static readonly Color4 YellowLighter = FromHex(@"ffffdd");
public static readonly Color4 YellowLight = FromHex(@"ffdd55");
public static readonly Color4 Yellow = FromHex(@"ffcc22");
public static readonly Color4 YellowDark = FromHex(@"eeaa00");
public static readonly Color4 YellowDarker = FromHex(@"cc6600");
public static readonly Color4 GreenLighter = FromHex(@"eeffcc");
public static readonly Color4 GreenLight = FromHex(@"b3d944");
public static readonly Color4 Green = FromHex(@"88b300");
public static readonly Color4 GreenDark = FromHex(@"668800");
public static readonly Color4 GreenDarker = FromHex(@"445500");
public static readonly Color4 Red = FromHex(@"fc4549");
}
}

View File

@ -46,7 +46,7 @@ namespace osu.Game.Graphics.UserInterface
leftBox = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = OsuColor.BackButtonLeft,
Colour = OsuColour.PinkDark,
Shear = new Vector2(shear, 0),
},
icon = new TextAwesome
@ -67,7 +67,7 @@ namespace osu.Game.Graphics.UserInterface
{
rightBox = new Box
{
Colour = OsuColor.BackButtonRight,
Colour = OsuColour.Pink,
Origin = Anchor.TopLeft,
Anchor = Anchor.TopLeft,
RelativeSizeAxes = Axes.Both,

View File

@ -12,7 +12,7 @@ namespace osu.Game.Graphics.UserInterface
public OsuButton()
{
Height = 25;
Colour = OsuColor.Button;
Colour = OsuColour.BlueDark;
}
}
}

View File

@ -18,7 +18,7 @@ namespace osu.Game.Modes.Objects
public bool NewCombo { get; set; }
public Color4 Colour = OsuColor.Combo1;
public Color4 Colour = new Color4(17, 136, 170, 255);
public double Duration => EndTime - StartTime;

View File

@ -46,7 +46,7 @@ namespace osu.Game.Overlays
{
Depth = float.MaxValue,
RelativeSizeAxes = Axes.Both,
Colour = OsuColor.Gray(0.1f).Opacity(0.4f),
Colour = OsuColour.Gray(0.1f).Opacity(0.4f),
},
content = new Container
{

View File

@ -171,7 +171,7 @@ namespace osu.Game.Overlays
Origin = Anchor.BottomCentre,
Anchor = Anchor.BottomCentre,
Height = 10,
Colour = OsuColor.MusicControllerProgress,
Colour = OsuColour.Yellow,
SeekRequested = seek
}
};
@ -393,7 +393,7 @@ namespace osu.Game.Overlays
{
sprite = new Sprite
{
Colour = OsuColor.MusicControllerBackground,
Colour = OsuColour.Gray(150),
FillMode = FillMode.Fill,
},
new Box

View File

@ -148,11 +148,11 @@ namespace osu.Game.Overlays.Options
Masking = true;
Colour = OsuColor.OsuPink;
Colour = OsuColour.Pink;
EdgeEffect = new EdgeEffect
{
Colour = OsuColor.CheckBoxGlow,
Colour = OsuColour.PinkDarker,
Type = EdgeEffectType.Glow,
Radius = 10,
Roundness = 8,
@ -179,13 +179,13 @@ namespace osu.Game.Overlays.Options
{
if (value)
{
FadeColour(OsuColor.CheckBoxHover, 500, EasingTypes.OutQuint);
FadeColour(OsuColour.PinkLighter, 500, EasingTypes.OutQuint);
FadeGlowTo(1, 500, EasingTypes.OutQuint);
}
else
{
FadeGlowTo(0, 500);
FadeColour(OsuColor.OsuPink, 500);
FadeColour(OsuColour.Pink, 500);
}
}
}

View File

@ -131,8 +131,8 @@ namespace osu.Game.Overlays.Options
private class StyledDropDownComboBox : DropDownComboBox
{
protected override Color4 BackgroundColour => OsuColor.DropDownBackground;
protected override Color4 BackgroundColourHover => OsuColor.DropDownHover;
protected override Color4 BackgroundColour => Color4.Black.Opacity(0.5f);
protected override Color4 BackgroundColourHover => OsuColour.PinkDarker;
private SpriteText label;
protected override string Label
@ -161,9 +161,9 @@ namespace osu.Game.Overlays.Options
private class StyledDropDownMenuItem<U> : DropDownMenuItem<U>
{
protected override Color4 BackgroundColour => OsuColor.DropDownBackground;
protected override Color4 BackgroundColourSelected => OsuColor.DropDownBackground;
protected override Color4 BackgroundColourHover => OsuColor.DropDownHover;
protected override Color4 BackgroundColour => Color4.Black.Opacity(0.5f);
protected override Color4 BackgroundColourSelected => Color4.Black.Opacity(0.5f);
protected override Color4 BackgroundColourHover => OsuColour.PinkDarker;
public StyledDropDownMenuItem(string text, U value) : base(text, value)
{

View File

@ -51,7 +51,7 @@ namespace osu.Game.Overlays.Options
new SpriteText
{
TextSize = headerSize,
Colour = OsuColor.OptionSectionHeader,
Colour = OsuColour.Pink,
Text = Header,
},
content = new FlowContainer

View File

@ -59,7 +59,7 @@ namespace osu.Game.Overlays.Options
{
RelativeSizeAxes = Axes.Both,
BlendingMode = BlendingMode.Additive,
Colour = OsuColor.SidebarButtonBackground,
Colour = OsuColour.Gray(60),
Alpha = 0,
},
new Container
@ -88,7 +88,7 @@ namespace osu.Game.Overlays.Options
Width = 5,
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
Colour = OsuColor.SidebarButtonSelectionIndicator
Colour = OsuColour.Pink
}
};
}

View File

@ -85,7 +85,7 @@ namespace osu.Game.Overlays.Options
RelativeSizeAxes = Axes.None,
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Colour = OsuColor.OsuPink,
Colour = OsuColour.Pink,
},
rightBox = new Box
{
@ -93,7 +93,7 @@ namespace osu.Game.Overlays.Options
RelativeSizeAxes = Axes.None,
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
Colour = OsuColor.SliderbarBackground,
Colour = OsuColour.Pink,
Alpha = 0.5f,
},
nub = new Container
@ -105,13 +105,13 @@ namespace osu.Game.Overlays.Options
AutoSizeAxes = Axes.None,
RelativeSizeAxes = Axes.None,
Masking = true,
BorderColour = OsuColor.SliderbarNub,
BorderColour = OsuColour.Pink,
BorderThickness = 3,
Children = new[]
{
new Box
{
Colour = OsuColor.SliderbarNub.Opacity(0),
Colour = OsuColour.Pink.Opacity(0),
RelativeSizeAxes = Axes.Both
}
}

View File

@ -95,7 +95,7 @@ namespace osu.Game.Overlays
},
new SpriteText
{
Colour = OsuColor.OsuPink,
Colour = OsuColour.Pink,
Text = "Change the way osu! behaves",
TextSize = 18,
Margin = new MarginPadding { Left = CONTENT_MARGINS, Bottom = 30 },

View File

@ -66,7 +66,7 @@ namespace osu.Game.Overlays.Toolbar
solidBackground = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = OsuColor.Gray(0.1f),
Colour = OsuColour.Gray(0.1f),
Alpha = alpha_normal,
},
gradientBackground = new Box
@ -76,7 +76,7 @@ namespace osu.Game.Overlays.Toolbar
Alpha = 0,
Height = 90,
ColourInfo = ColourInfo.GradientVertical(
OsuColor.Gray(0.1f).Opacity(0.5f), OsuColor.Gray(0.1f).Opacity(0)),
OsuColour.Gray(0.1f).Opacity(0.5f), OsuColour.Gray(0.1f).Opacity(0)),
},
new FlowContainer
{

View File

@ -70,7 +70,7 @@ namespace osu.Game.Overlays.Toolbar
HoverBackground = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = OsuColor.Gray(80).Opacity(180),
Colour = OsuColour.Gray(80).Opacity(180),
BlendingMode = BlendingMode.Additive,
Alpha = 0,
},
@ -174,7 +174,7 @@ namespace osu.Game.Overlays.Toolbar
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = OsuColor.Gray(30)
Colour = OsuColour.Gray(30)
},
new Triangles
{

View File

@ -35,7 +35,7 @@ namespace osu.Game.Overlays.Toolbar
DrawableIcon.EdgeEffect = new EdgeEffect
{
Type = EdgeEffectType.Glow,
Colour = OsuColor.ToolbarModeButtonIconActiveGlow,
Colour = new Color4(255, 194, 224, 100),
Radius = 15,
Roundness = 15,
};
@ -43,7 +43,7 @@ namespace osu.Game.Overlays.Toolbar
else
{
DrawableIcon.Masking = false;
DrawableIcon.Colour = OsuColor.ToolbarModeButtonIcon;
DrawableIcon.Colour = new Color4(255, 194, 224, 255);
}
}
}

View File

@ -53,7 +53,7 @@ namespace osu.Game.Overlays.Toolbar
EdgeEffect = new EdgeEffect
{
Type = EdgeEffectType.Glow,
Colour = OsuColor.ToolbarModeButtonIconActiveGlow,
Colour = new Color4(255, 194, 224, 100),
Radius = 15,
Roundness = 15,
},

View File

@ -42,7 +42,7 @@ namespace osu.Game.Overlays.Toolbar
Add(StateBackground = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = OsuColor.Gray(150).Opacity(180),
Colour = OsuColour.Gray(150).Opacity(180),
BlendingMode = BlendingMode.Additive,
Depth = 2,
Alpha = 0,

View File

@ -72,7 +72,7 @@ namespace osu.Game.Screens.Menu
{
RelativeSizeAxes = Axes.Both,
Size = new Vector2(2, 1),
Colour = OsuColor.Gray(50),
Colour = OsuColour.Gray(50),
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
},

View File

@ -30,12 +30,12 @@ namespace osu.Game.Screens.Select
{
Shear = wedged_container_shear;
Masking = true;
BorderColour = OsuColor.BeatmapInfoWedgeBorder;
BorderColour = new Color4(221, 255, 255, 255);
BorderThickness = 2.5f;
EdgeEffect = new EdgeEffect
{
Type = EdgeEffectType.Glow,
Colour = OsuColor.BeatmapInfoWedgeGlow,
Colour = new Color4(130, 204, 255, 150),
Radius = 20,
Roundness = 15,
};
@ -94,53 +94,53 @@ namespace osu.Game.Screens.Select
},
},
// Text for beatmap info
new FlowContainer
{
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
Direction = FlowDirection.VerticalOnly,
Margin = new MarginPadding { Top = 10, Left = 25, Right = 10, Bottom = 40 },
AutoSizeAxes = Axes.Both,
Children = new[]
{
new SpriteText
{
Font = @"Exo2.0-MediumItalic",
Text = beatmapSetInfo.Metadata.Artist + " -- " + beatmapSetInfo.Metadata.Title,
TextSize = 28,
Shadow = true,
},
new SpriteText
{
Font = @"Exo2.0-MediumItalic",
Text = beatmapInfo.Version,
TextSize = 17,
Shadow = true,
},
new FlowContainer
new FlowContainer
{
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
Direction = FlowDirection.VerticalOnly,
Margin = new MarginPadding { Top = 10, Left = 25, Right = 10, Bottom = 40 },
AutoSizeAxes = Axes.Both,
Children = new[]
{
new SpriteText
{
Font = @"Exo2.0-MediumItalic",
Text = beatmapSetInfo.Metadata.Artist + " -- " + beatmapSetInfo.Metadata.Title,
TextSize = 28,
Shadow = true,
},
new SpriteText
{
Font = @"Exo2.0-MediumItalic",
Text = beatmapInfo.Version,
TextSize = 17,
Shadow = true,
},
new FlowContainer
{
Margin = new MarginPadding { Top = 10 },
Direction = FlowDirection.HorizontalOnly,
AutoSizeAxes = Axes.Both,
Children = new []
{
new SpriteText
{
Font = @"Exo2.0-Medium",
Text = "mapped by ",
TextSize = 15,
Shadow = true,
new SpriteText
{
Font = @"Exo2.0-Medium",
Text = "mapped by ",
TextSize = 15,
Shadow = true,
},
new SpriteText
{
Font = @"Exo2.0-Bold",
Text = beatmapSetInfo.Metadata.Author,
TextSize = 15,
Shadow = true,
new SpriteText
{
Font = @"Exo2.0-Bold",
Text = beatmapSetInfo.Metadata.Author,
TextSize = 15,
Shadow = true,
},
}
}
}
}
}
}
}
}).Preload(game, delegate(Drawable d)

View File

@ -143,7 +143,7 @@ namespace osu.Game.Screens.Select
RelativeSizeAxes = Axes.Y,
Width = 100,
Text = "Play",
Colour = OsuColor.PlayButton,
Colour = OsuColour.Pink,
Action = start
},
}

View File

@ -231,7 +231,7 @@
<Compile Include="Configuration\ScreenshotFormat.cs" />
<Compile Include="Configuration\FrameSync.cs" />
<Compile Include="Configuration\ConfineMouseMode.cs" />
<Compile Include="Graphics\OsuColor.cs" />
<Compile Include="Graphics\OsuColour.cs" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="$(SolutionDir)\osu-framework\osu.Framework\osu.Framework.csproj">