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

22
style.cpp
View file

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

112
style.h
View file

@ -5,83 +5,79 @@
#include <stdint.h> #include <stdint.h>
namespace cera { namespace cera {
//////////////////////////////////// struct Style {
// WINDOW STYLE ////////////////////////////////////
//////////////////////////////////// // WINDOW STYLE
////////////////////////////////////
constexpr uint16_t windowPadding{1}; uint16_t windowPadding{1};
constexpr Clay_Color windowColor{20, 20, 20, 255}; Clay_Color windowColor{20, 20, 20, 255};
//////////////////////////////////// ////////////////////////////////////
// CONTAINER STYLE // CONTAINER STYLE
//////////////////////////////////// ////////////////////////////////////
constexpr uint16_t containerGap{10}; uint16_t containerGap{10};
constexpr double defaultRadius{5.0}; float defaultRadius{5.0};
constexpr Clay_Color panelBackground{ 0,0,0,0 }; Clay_Color panelBackground{ 0,0,0,0 };
constexpr Clay_Color panelBorder { 150, 150, 150, 150 }; Clay_Color panelBorder { 150, 150, 150, 150 };
constexpr Clay_Padding panelPadding = { Clay_Padding panelPadding = {
24, 24, 24, 24,
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 ListContainer(Clay_ElementDeclaration baseCfg = {});
Clay_ElementDeclaration PanelContainer(Clay_ElementDeclaration baseCfg = {}); Clay_ElementDeclaration PanelContainer(Clay_ElementDeclaration baseCfg = {});
Clay_ElementDeclaration LeftPanelContainer(Clay_ElementDeclaration baseCfg = {}); Clay_ElementDeclaration LeftPanelContainer(Clay_ElementDeclaration baseCfg = {});
Clay_ElementDeclaration RightPanelContainer(Clay_ElementDeclaration baseCfg = {}); Clay_ElementDeclaration RightPanelContainer(Clay_ElementDeclaration baseCfg = {});
Clay_ElementDeclaration Window(); 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); Clay_Color ToHoveredColor(Clay_Color color);
////////////////////////////////////
// COMPILATIONS
// | Functions and expressions that combine styling data from the settings above.
////////////////////////////////////
constexpr Clay_Sizing layoutExpand = { constexpr Clay_Sizing layoutExpand = {
.width = CLAY_SIZING_GROW(0), .width = CLAY_SIZING_GROW(0),
.height = CLAY_SIZING_GROW(0) .height = CLAY_SIZING_GROW(0)
}; };
constexpr uint16_t baseFontSize = 16;
constexpr Clay_CornerRadius defaultRadiusAll = {
defaultRadius, defaultRadius,
defaultRadius, defaultRadius
};
namespace color { namespace color {
constexpr Clay_Color transparent{ 255, 255, 255, 0 }; constexpr Clay_Color transparent{ 255, 255, 255, 0 };