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

feat: style is now a struct

Browse source
This commit is contained in:
Sara Gerretsen 2025-10-26 21:11:54 +01:00
parent 7260454211
commit c372a4db3a
4 changed files with 76 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
elements.cpp
View file

@ -7,13 +7,13 @@ void TextButton(Clay_String text, Clay_Color color, OnHoveredFn onHovered, intpt
Clay_Color hovered{ cera::ToHoveredColor(color) };
CLAY_AUTO_ID({
.layout = {
.padding = cera::buttonPadding,
.padding = theme->buttonPadding,
.childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER },
},
.backgroundColor = Clay_Hovered()
? hovered
: color,
.cornerRadius = cera::buttonRadii,
.cornerRadius = theme->buttonRadii,
.border = {
cera::ToHoveredColor(Clay_Hovered() ? hovered : color),
CLAY_BORDER_ALL(2)
@ -21,7 +21,7 @@ void TextButton(Clay_String text, Clay_Color color, OnHoveredFn onHovered, intpt
}) {
Clay_OnHover(onHovered, onHoveredData);
cera::Body(text, {
.textColor = cera::textColor,
.textColor = theme->textColor,
.textAlignment = CLAY_TEXT_ALIGN_CENTER,
});
}
@ -56,16 +56,16 @@ void Toggle(Clay_String label, Clay_Color selected, bool &state) {
},
.backgroundColor = (state
? selected
: cera::color::transparent
: color::transparent
),
.cornerRadius = cera::buttonRadii,
.cornerRadius = theme->buttonRadii,
.border = {
color,
CLAY_BORDER_OUTSIDE(3)
},
}) { }
Body(label, {
.textColor = cera::textColor
.textColor = theme->textColor
});
}
}
@ -78,7 +78,7 @@ void Body(Clay_String string, Clay_TextElementConfig baseCfg) {
void Header(Clay_String string, size_t header, Clay_TextElementConfig baseCfg) {
baseCfg.fontId = cera::FONT_BOLD;
baseCfg.fontSize = cera::headerSizes[(header)-1];
baseCfg.fontSize = theme->headerSizes[(header)-1];
CLAY_TEXT(string, CLAY_TEXT_CONFIG(baseCfg));
}
}

4
elements.h
View file

@ -8,8 +8,8 @@ namespace cera {
typedef void(*OnHoveredFn)(Clay_ElementId element, Clay_PointerData pointer, intptr_t data);
void TextButton(Clay_String text, Clay_Color color, OnHoveredFn onHovered, intptr_t onHoveredData = 0);
void Toggle(Clay_String label, Clay_Color selected, bool &state);
void Body(Clay_String string, Clay_TextElementConfig baseCfg = {.textColor = cera::textColor});
void Header(Clay_String string, size_t header, Clay_TextElementConfig baseCfg = {.textColor = cera::textColor});
void Body(Clay_String string, Clay_TextElementConfig baseCfg = {.textColor = theme->textColor});
void Header(Clay_String string, size_t header, Clay_TextElementConfig baseCfg = {.textColor = theme->textColor});
}
#endif // !ELEMENTS_H

22
style.cpp
View file

@ -4,22 +4,26 @@
#include <clay/clay.h>
namespace cera {
Style themeDark{};
Style themeLight{};
Style *theme{&themeDark};
Clay_ElementDeclaration ListContainer(Clay_ElementDeclaration baseCfg) {
baseCfg.border = {
.color = panelBorder,
.color = theme->panelBorder,
.width = CLAY_BORDER_ALL(2)
};
baseCfg.cornerRadius = defaultRadiusAll;
baseCfg.cornerRadius = CLAY_CORNER_RADIUS(theme->defaultRadius);
return baseCfg;
}
Clay_ElementDeclaration PanelContainer(Clay_ElementDeclaration baseCfg) {
baseCfg.backgroundColor = panelBackground;
baseCfg.backgroundColor = theme->panelBackground;
baseCfg.border = {
.color = panelBorder,
.color = theme->panelBorder,
.width = CLAY_BORDER_OUTSIDE(2)
};
baseCfg.cornerRadius = defaultRadiusAll;
baseCfg.cornerRadius = CLAY_CORNER_RADIUS(theme->defaultRadius);
baseCfg.layout.padding = CLAY_PADDING_ALL(8);
return baseCfg;
}
@ -27,7 +31,7 @@ Clay_ElementDeclaration PanelContainer(Clay_ElementDeclaration baseCfg) {
Clay_ElementDeclaration LeftPanelContainer(Clay_ElementDeclaration baseCfg) {
baseCfg = PanelContainer(baseCfg);
baseCfg.border.width = { 0, 2, 2, 2, 0 };
baseCfg.cornerRadius = { 0, defaultRadius, 0, defaultRadius };
baseCfg.cornerRadius = { 0, theme->defaultRadius, 0, theme->defaultRadius };
baseCfg.layout.sizing.height = CLAY_SIZING_GROW();
return baseCfg;
}
@ -35,7 +39,7 @@ Clay_ElementDeclaration LeftPanelContainer(Clay_ElementDeclaration baseCfg) {
Clay_ElementDeclaration RightPanelContainer(Clay_ElementDeclaration baseCfg) {
baseCfg = PanelContainer(baseCfg);
baseCfg.border.width = { 2, 0, 2, 2, 0 };
baseCfg.cornerRadius = { defaultRadius, 0, defaultRadius, 0 };
baseCfg.cornerRadius = { theme->defaultRadius, 0, theme->defaultRadius, 0 };
baseCfg.layout.sizing.height = CLAY_SIZING_GROW();
return baseCfg;
}
@ -44,11 +48,11 @@ Clay_ElementDeclaration Window() {
return {
.layout = {
.sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_GROW() },
.padding = CLAY_PADDING_ALL(windowPadding),
.padding = CLAY_PADDING_ALL(theme->windowPadding),
.childGap = 0,
.layoutDirection = CLAY_LEFT_TO_RIGHT
},
.backgroundColor = windowColor
.backgroundColor = theme->windowColor
};
}

112
style.h
View file

@ -5,83 +5,79 @@
#include <stdint.h>
namespace cera {
////////////////////////////////////
// WINDOW STYLE
////////////////////////////////////
struct Style {
////////////////////////////////////
// WINDOW STYLE
////////////////////////////////////
constexpr uint16_t windowPadding{1};
constexpr Clay_Color windowColor{20, 20, 20, 255};
uint16_t windowPadding{1};
Clay_Color windowColor{20, 20, 20, 255};
////////////////////////////////////
// CONTAINER STYLE
////////////////////////////////////
////////////////////////////////////
// CONTAINER STYLE
////////////////////////////////////
constexpr uint16_t containerGap{10};
constexpr double defaultRadius{5.0};
uint16_t containerGap{10};
float defaultRadius{5.0};
constexpr Clay_Color panelBackground{ 0,0,0,0 };
constexpr Clay_Color panelBorder { 150, 150, 150, 150 };
Clay_Color panelBackground{ 0,0,0,0 };
Clay_Color panelBorder { 150, 150, 150, 150 };
constexpr Clay_Padding panelPadding = {
24, 24,
24, 24,
Clay_Padding panelPadding = {
24, 24,
24, 24,
};
////////////////////////////////////
// TEXT STYLE
////////////////////////////////////
float paragraphGap = 10;
uint16_t headerSizes[4]{64, 32, 28, 16};
Clay_Color textColor{170, 170, 170, 255};
////////////////////////////////////
// BUTTONS
////////////////////////////////////
Clay_Color warningButton = {
177, 56, 52, 255
};
Clay_Color proceedButton = {
49, 181, 99, 255
};
Clay_Color actionButton = {
49, 142, 181, 255
};
Clay_Padding buttonPadding = {
24, 24,
4, 4,
};
Clay_CornerRadius buttonRadii = {
3, 3, 3, 3
};
};
extern Style themeDark;
extern Style themeLight;
extern Style *theme;
Clay_ElementDeclaration ListContainer(Clay_ElementDeclaration baseCfg = {});
Clay_ElementDeclaration PanelContainer(Clay_ElementDeclaration baseCfg = {});
Clay_ElementDeclaration LeftPanelContainer(Clay_ElementDeclaration baseCfg = {});
Clay_ElementDeclaration RightPanelContainer(Clay_ElementDeclaration baseCfg = {});
Clay_ElementDeclaration Window();
////////////////////////////////////
// TEXT STYLE
////////////////////////////////////
constexpr float paragraphGap = 10;
constexpr uint16_t baseFontSize = 16;
constexpr uint16_t headerSizes[] = {64, 32, 28, 16};
constexpr Clay_Color textColor{170, 170, 170, 255};
////////////////////////////////////
// BUTTONS
////////////////////////////////////
constexpr Clay_Color warningButton = {
177, 56, 52, 255
};
constexpr Clay_Color proceedButton = {
49, 181, 99, 255
};
constexpr Clay_Color actionButton = {
49, 142, 181, 255
};
constexpr Clay_Padding buttonPadding = {
24, 24,
4, 4,
};
constexpr Clay_CornerRadius buttonRadii = {
3, 3, 3, 3
};
Clay_Color ToHoveredColor(Clay_Color color);
////////////////////////////////////
// COMPILATIONS
// | Functions and expressions that combine styling data from the settings above.
////////////////////////////////////
constexpr Clay_Sizing layoutExpand = {
.width = CLAY_SIZING_GROW(0),
.height = CLAY_SIZING_GROW(0)
};
constexpr Clay_CornerRadius defaultRadiusAll = {
defaultRadius, defaultRadius,
defaultRadius, defaultRadius
};
constexpr uint16_t baseFontSize = 16;
namespace color {
constexpr Clay_Color transparent{ 255, 255, 255, 0 };