Sara/dice-gui
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: redesigned styling system

Browse source
This commit is contained in:
Sara 2025-09-16 21:49:42 +02:00
parent 89f21718ca
commit 0ee1962a16
1 changed files with 64 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
src/style.h
View file

@ -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