From 6f3a945f344f0a26bb99d4ea3c70300c2e61a506 Mon Sep 17 00:00:00 2001
From: dnesov <contact.dnesov@gmail.com>
Date: Sun, 29 Jun 2025 19:38:10 +0200
Subject: [PATCH] Update TODO

---
 TODO.md                                 |  6 ++-
 Voile/Source/UI/Containers/Container.cs |  5 +--
 Voile/Source/UI/Style.cs                |  3 ++
 Voile/Source/UI/UIElement.cs            | 54 +++++++++++++++++++++++++
 Voile/Source/UI/Widgets/Button.cs       |  6 ++-
 Voile/Source/UI/Widgets/Label.cs        |  2 +-
 6 files changed, 67 insertions(+), 9 deletions(-)

diff --git a/TODO.md b/TODO.md
index dbf4869..b0efb2e 100644
--- a/TODO.md
+++ b/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.
diff --git a/Voile/Source/UI/Containers/Container.cs b/Voile/Source/UI/Containers/Container.cs
index 11f3e3b..8afb8b7 100644
--- a/Voile/Source/UI/Containers/Container.cs
+++ b/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;
-
-        renderer.SetTransform(GlobalPosition, Vector2.Zero);
-        renderer.DrawRectangle(new Vector2(Size.Width, Size.Height), backgroundColor);
+        RenderStyleBox(renderer, style);
 
         foreach (var child in Children)
         {
diff --git a/Voile/Source/UI/Style.cs b/Voile/Source/UI/Style.cs
index 8a409f6..726b27f 100644
--- a/Voile/Source/UI/Style.cs
+++ b/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()
         {
diff --git a/Voile/Source/UI/UIElement.cs b/Voile/Source/UI/UIElement.cs
index 477a51c..c3a02ab 100644
--- a/Voile/Source/UI/UIElement.cs
+++ b/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);
diff --git a/Voile/Source/UI/Widgets/Button.cs b/Voile/Source/UI/Widgets/Button.cs
index ec28466..c07ba4a 100644
--- a/Voile/Source/UI/Widgets/Button.cs
+++ b/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.DrawRectangle(new Vector2(Size.Width, Size.Height), backgroundColor);
+        // renderer.SetTransform(GlobalPosition, Vector2.Zero);
+        // 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);
diff --git a/Voile/Source/UI/Widgets/Label.cs b/Voile/Source/UI/Widgets/Label.cs
index ae04d5f..e834ff9 100644
--- a/Voile/Source/UI/Widgets/Label.cs
+++ b/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);