From 0ee1962a16d3ee3f18136c87ec10bec6086a11d7 Mon Sep 17 00:00:00 2001
From: Sara <sara@saragerretsen.nl>
Date: Tue, 16 Sep 2025 21:49:42 +0200
Subject: [PATCH] feat: redesigned styling system

---
 src/style.h | 84 ++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 64 insertions(+), 20 deletions(-)

diff --git a/src/style.h b/src/style.h
index a82c03a..d290fa0 100644
--- a/src/style.h
+++ b/src/style.h
@@ -3,25 +3,16 @@
 
 #include "defs.h"
 #include <clay/clay.h>
+#include <stdint.h>
 
-constexpr float defaultRadius = 5.f;
-constexpr Clay_CornerRadius defaultRadiusAll = {
-	defaultRadius, defaultRadius,
-	defaultRadius, defaultRadius
-};
-constexpr float containerGap = 5.f;
-constexpr float windowPadding = 5.f;
+////////////////////////////////////
+// CONTAINER STYLE
+////////////////////////////////////
 
-
-#define TEXT_BODY\
-	.fontId = FONT_DEFAULT,\
-	.fontSize = 15
-#define TEXT_H1\
-	.fontId = FONT_BOLD,\
-	.fontSize = 20
-
-constexpr Clay_Color windowBackground = {
-	255*0.35, 255*0.35, 255*0.35, 255
+constexpr uint16_t containerGap = 5;
+constexpr Clay_Padding containerPadding = {
+	32, 32,
+	16, 16
 };
 constexpr Clay_Color containerColors[] = {
 	{ 255*0.25, 255*0.25, 255*0.25, 255 },
@@ -29,15 +20,68 @@ constexpr Clay_Color containerColors[] = {
 	{ 255*0.1, 255*0.1, 255*0.1, 255 },
 };
 
+constexpr Clay_Sizing layoutExpand = {
+	.width = CLAY_SIZING_GROW(0),
+	.height = CLAY_SIZING_GROW(0)
+};
+
+constexpr float defaultRadius = 5.f;
+constexpr Clay_CornerRadius defaultRadiusAll = {
+	defaultRadius, defaultRadius,
+	defaultRadius, defaultRadius
+};
+
+#define INNER_CONTAINER(depth_) \
+backgroundColor = containerColors[depth_],\
+.cornerRadius = defaultRadiusAll
+
+
+////////////////////////////////////
+// WINDOW STYLE
+////////////////////////////////////
+
+constexpr float windowPadding = 5;
+constexpr Clay_Color windowBackground = {
+	255*0.35, 255*0.35, 255*0.35, 255
+};
+constexpr Clay_ElementDeclaration windowStyle = {
+	.layout = {
+		.layoutDirection = CLAY_TOP_TO_BOTTOM,
+		.sizing = layoutExpand,
+		.padding = CLAY_PADDING_ALL(windowPadding),
+		.childGap = containerGap,
+	},
+	.backgroundColor = windowBackground
+};
+
+////////////////////////////////////
+// TEXT STYLE
+////////////////////////////////////
+
+constexpr float paragraphGap = 10;
+constexpr uint16_t baseFontSize = 16;
+
 constexpr Clay_Color textColors[] = {
 	{ 250, 250, 250, 255 },
 	{ 250, 250, 250, 255 },
 	{ 250, 250, 250, 255 },
 };
 
-constexpr Clay_Sizing layoutExpand = {
-	.width = CLAY_SIZING_GROW(0),
-	.height = CLAY_SIZING_GROW(0)
+constexpr uint16_t headerSizes[] = {
+	64, 32, 28, 16
 };
 
+#define TEXT_STYLE(color_)\
+	textColor = textColors[color_]
+
+#define BODY(color_)\
+	fontId = FONT_DEFAULT,\
+	.fontSize = baseFontSize,\
+	.TEXT_STYLE(color_)
+
+#define H(level_, color_)\
+	fontId = FONT_BOLD,\
+	.fontSize = headerSizes[(level_)-1],\
+	.TEXT_STYLE(color_)
+
 #endif // !STYLE_H