maxamundsen/autosample
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add themes and colors :D

Browse Source
This commit is contained in:
Max Amundsen
2026-03-03 12:12:41 -05:00
parent bae74d7a96
commit 3173fabfc1
9 changed files with 308 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/ui/ui_widgets.cpp
View File

@@ -43,8 +43,14 @@ void ui_widgets_begin_frame(PlatformInput input) {
static Clay_TextElementConfig g_widget_text_config;
static Clay_TextElementConfig g_widget_text_config_dim;
static Clay_TextElementConfig g_widget_text_config_sel;
static Clay_TextElementConfig g_widget_text_config_btn;
static Clay_TextElementConfig g_widget_text_config_tab;
static F32 g_widget_text_configs_scale = 0;
void ui_widgets_theme_changed() {
g_widget_text_configs_scale = 0;
}
static void ensure_widget_text_configs() {
if (g_widget_text_configs_scale == g_ui_scale) return;
g_widget_text_configs_scale = g_ui_scale;
@@ -64,6 +70,18 @@ static void ensure_widget_text_configs() {
g_widget_text_config_sel.textColor = Clay_Color{255, 255, 255, 255};
g_widget_text_config_sel.fontSize = FONT_SIZE_NORMAL;
g_widget_text_config_sel.wrapMode = CLAY_TEXT_WRAP_NONE;
// Button text (always readable on accent background)
g_widget_text_config_btn = {};
g_widget_text_config_btn.textColor = g_theme.button_text;
g_widget_text_config_btn.fontSize = FONT_SIZE_NORMAL;
g_widget_text_config_btn.wrapMode = CLAY_TEXT_WRAP_NONE;
// Tab text (always light — readable on colored tab gradient)
g_widget_text_config_tab = {};
g_widget_text_config_tab.textColor = g_theme.tab_text;
g_widget_text_config_tab.fontSize = FONT_SIZE_NORMAL;
g_widget_text_config_tab.wrapMode = CLAY_TEXT_WRAP_NONE;
}
static Clay_String clay_str(const char *s) {
@@ -111,7 +129,7 @@ B32 ui_button(const char *id, const char *text) {
.backgroundColor = hovered ? g_theme.accent_hover : g_theme.accent,
.cornerRadius = CLAY_CORNER_RADIUS(CORNER_RADIUS_SM)
) {
CLAY_TEXT(clay_str(text), &g_widget_text_config);
CLAY_TEXT(clay_str(text), &g_widget_text_config_btn);
}
return (hovered && g_wstate.mouse_clicked) ? 1 : 0;
@@ -737,6 +755,9 @@ B32 ui_dropdown(const char *id, const char **options, S32 count, S32 *selected)
Clay_Color item_bg = is_item_selected ? g_theme.accent : g_theme.bg_dark;
if (item_hovered) item_bg = g_theme.bg_lighter;
Clay_TextElementConfig *item_text = (is_item_selected && !item_hovered)
? &g_widget_text_config_btn : &g_widget_text_config;
CLAY(item_id,
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIXED(WIDGET_DROPDOWN_ITEM_H) },
@@ -745,7 +766,7 @@ B32 ui_dropdown(const char *id, const char **options, S32 count, S32 *selected)
},
.backgroundColor = item_bg
) {
CLAY_TEXT(clay_str(options[i]), &g_widget_text_config);
CLAY_TEXT(clay_str(options[i]), item_text);
}
if (item_hovered && g_wstate.mouse_clicked) {
@@ -892,7 +913,7 @@ S32 ui_modal(const char *id, const char *title, const char *message,
.backgroundColor = btn_hovered ? g_theme.accent_hover : g_theme.accent,
.cornerRadius = CLAY_CORNER_RADIUS(CORNER_RADIUS_SM)
) {
CLAY_TEXT(clay_str(buttons[i]), &g_widget_text_config);
CLAY_TEXT(clay_str(buttons[i]), &g_widget_text_config_btn);
}
if (btn_hovered && g_wstate.mouse_clicked) {
@@ -1057,7 +1078,7 @@ B32 ui_window(const char *id, const char *title, B32 *open,
.backgroundColor = close_bg,
.cornerRadius = CLAY_CORNER_RADIUS(CORNER_RADIUS_SM)
) {
CLAY_TEXT(CLAY_STRING("x"), &g_widget_text_config);
CLAY_TEXT(CLAY_STRING("x"), &g_widget_text_config_btn);
}
}
@@ -1088,11 +1109,13 @@ B32 ui_window(const char *id, const char *title, B32 *open,
////////////////////////////////
// Tab bar
static CustomGradientData g_tab_gradient = {
CUSTOM_RENDER_VGRADIENT, TAB_ACTIVE_TOP, TAB_ACTIVE_BOTTOM
};
static CustomGradientData g_tab_gradient;
S32 ui_tab_bar(const char *id, const char **labels, S32 count, S32 *selected) {
g_tab_gradient.type = CUSTOM_RENDER_VGRADIENT;
g_tab_gradient.top_color = TAB_ACTIVE_TOP;
g_tab_gradient.bottom_color = TAB_ACTIVE_BOTTOM;
Clay_String id_str = clay_str(id);
Clay_ElementId row_eid = Clay__HashString(id_str, 0);
@@ -1122,7 +1145,7 @@ S32 ui_tab_bar(const char *id, const char **labels, S32 count, S32 *selected) {
.cornerRadius = { .topLeft = TAB_CORNER_RADIUS, .topRight = TAB_CORNER_RADIUS, .bottomLeft = 0, .bottomRight = 0 },
.custom = { .customData = &g_tab_gradient },
) {
CLAY_TEXT(lbl_str, &g_widget_text_config);
CLAY_TEXT(lbl_str, &g_widget_text_config_tab);
}
} else {
Clay_Color bg = hovered ? (Clay_Color)TAB_INACTIVE_HOVER : (Clay_Color)TAB_INACTIVE_BG;