Update TODO

TODO.md

@@ -94,8 +94,10 @@
 - Input propagation
   - ~~Pass input to widgets.~~
   - Add element focus logic, make them focusable with action inputs.
-- Basic input elements (button, text field, toggle).
+- Basic input elements (~~button~~, text field, toggle).
 - Styling
-  - Add style settings for UI panels (for buttons, labels, etc.).
+  - ~~Style sheet~~
+  - ~~Add style settings for UI panels (for buttons, labels, etc.).~~
+  - Animated styles
   - Find a way to reference external assets in the style (fonts, textures).
   - Create a default style for widgets.

Voile/Source/UI/Containers/Container.cs

@@ -142,10 +142,7 @@ public abstract class Container : UIElement, IParentableElement
 
     public override void Render(RenderSystem renderer, Style style)
     {
-        var backgroundColor = style.BackgroundColor;
+        RenderStyleBox(renderer, style);
-
-        renderer.SetTransform(GlobalPosition, Vector2.Zero);
-        renderer.DrawRectangle(new Vector2(Size.Width, Size.Height), backgroundColor);
 
         foreach (var child in Children)
         {

Voile/Source/UI/Style.cs

@@ -44,6 +44,9 @@ public class StyleSheet : TextDataResource
         {"Label", new Style()
         {
             TextColor = Color.FromHexString("#161616"),
+            BackgroundColor = Color.DarkRed,
+            BorderSize = new Margin(2.0f),
+            BorderColor = Color.Red
         }},
         { "Button", new Style()
         {

Voile/Source/UI/UIElement.cs

@@ -110,6 +110,60 @@ public abstract class UIElement : IElement, IRenderableElement, IResizeableEleme
     public abstract void Render(RenderSystem renderer, Style style);
     protected abstract void OnUpdate();
 
+    /// <summary>
+    /// Renders a stylebox from a given style.
+    /// </summary>
+    /// <param name="renderer"></param>
+    /// <param name="style"></param>
+    protected void RenderStyleBox(RenderSystem renderer, Style style)
+    {
+        var backgroundColor = style.BackgroundColor;
+        var borderColor = style.BorderColor;
+        var borderSize = style.BorderSize;
+
+        renderer.SetTransform(GlobalPosition, Vector2.Zero);
+
+        renderer.DrawRectangle(new Vector2(Size.Width, Size.Height), backgroundColor);
+
+        if (borderSize.Left > 0)
+        {
+            renderer.SetTransform(GlobalPosition, Vector2.Zero);
+            renderer.DrawRectangle(
+                new Vector2(borderSize.Left, Size.Height),
+                borderColor
+            );
+        }
+
+        if (borderSize.Top > 0)
+        {
+            renderer.SetTransform(GlobalPosition, Vector2.Zero);
+            renderer.DrawRectangle(
+                new Vector2(Size.Width, borderSize.Top),
+                borderColor
+            );
+        }
+
+        if (borderSize.Right > 0)
+        {
+            var rightX = GlobalPosition.X + Size.Width - borderSize.Right;
+            renderer.SetTransform(new Vector2(rightX, GlobalPosition.Y), Vector2.Zero);
+            renderer.DrawRectangle(
+                new Vector2(borderSize.Right, Size.Height),
+                borderColor
+            );
+        }
+
+        if (borderSize.Bottom > 0)
+        {
+            var bottomY = GlobalPosition.Y + Size.Height - borderSize.Bottom;
+            renderer.SetTransform(new Vector2(GlobalPosition.X, bottomY), Vector2.Zero);
+            renderer.DrawRectangle(
+                new Vector2(Size.Width, borderSize.Bottom),
+                borderColor
+            );
+        }
+    }
+
     public void DrawSize(RenderSystem renderer)
     {
         renderer.SetTransform(GlobalPosition, Vector2.Zero);

Voile/Source/UI/Widgets/Button.cs

@@ -85,8 +85,10 @@ public class Button : Widget
         _padding = style.Padding;
         var textColor = style.TextColor;
 
-        renderer.SetTransform(GlobalPosition, Vector2.Zero);
+        // renderer.SetTransform(GlobalPosition, Vector2.Zero);
-        renderer.DrawRectangle(new Vector2(Size.Width, Size.Height), backgroundColor);
+        // renderer.DrawRectangle(new Vector2(Size.Width, Size.Height), backgroundColor);
+
+        RenderStyleBox(renderer, style);
 
         var textPosition = new Vector2(GlobalPosition.X + Padding.Left, GlobalPosition.Y + Padding.Top);
         renderer.SetTransform(textPosition, Vector2.Zero);

Voile/Source/UI/Widgets/Label.cs

@@ -52,7 +52,7 @@ public class Label : Widget
 
     public override void Render(RenderSystem renderer, Style style)
     {
-        // TODO: use style here.
+        RenderStyleBox(renderer, style);
 
         renderer.SetTransform(GlobalPosition, Vector2.Zero);
         renderer.DrawText(_suitableFont, _text, style.TextColor);