From b01fa2261a12979509f6da1fbecca5ccdc40759d Mon Sep 17 00:00:00 2001 From: Max Amundsen Date: Wed, 4 Mar 2026 00:36:18 -0500 Subject: [PATCH] Update theme to look gooder --- src/main.cpp | 28 ++++++++++++++++++---- src/ui/ui_core.cpp | 56 +++++++++++++++++++++---------------------- src/ui/ui_widgets.cpp | 2 +- 3 files changed, 53 insertions(+), 33 deletions(-) diff --git a/src/main.cpp b/src/main.cpp index 7617f6d..1f072ed 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -134,12 +134,17 @@ struct AppState { static void build_browser_panel(B32 show) { if (!show) return; + Clay_Color bp_top = g_theme.bg_medium; + Clay_Color bp_bot = {(float)Max((int)bp_top.r-8,0), (float)Max((int)bp_top.g-8,0), (float)Max((int)bp_top.b-8,0), 255}; + CustomGradientData *bp_grad = alloc_gradient(bp_top, bp_bot); + CLAY(CLAY_ID("BrowserPanel"), .layout = { .sizing = { .width = CLAY_SIZING_FIXED(uis(200)), .height = CLAY_SIZING_GROW() }, .layoutDirection = CLAY_TOP_TO_BOTTOM, }, - .backgroundColor = g_theme.bg_medium, + .backgroundColor = bp_top, + .custom = { .customData = bp_grad }, .border = { .color = g_theme.border, .width = { .right = 1 } } ) { { @@ -167,12 +172,17 @@ static void build_browser_panel(B32 show) { } static void build_main_panel(AppState *app) { + Clay_Color mp_top = g_theme.bg_light; + Clay_Color mp_bot = {(float)Max((int)mp_top.r-8,0), (float)Max((int)mp_top.g-8,0), (float)Max((int)mp_top.b-8,0), 255}; + CustomGradientData *mp_grad = alloc_gradient(mp_top, mp_bot); + CLAY(CLAY_ID("MainPanel"), .layout = { .sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_GROW() }, .layoutDirection = CLAY_TOP_TO_BOTTOM, }, - .backgroundColor = g_theme.bg_light + .backgroundColor = mp_top, + .custom = { .customData = mp_grad } ) { { S32 sel = 0; @@ -462,12 +472,17 @@ static void build_main_panel(AppState *app) { static void build_right_panel(AppState *app) { static const char *right_tabs[] = { "Properties", "MIDI Devices" }; + Clay_Color rp_top = g_theme.bg_medium; + Clay_Color rp_bot = {(float)Max((int)rp_top.r-8,0), (float)Max((int)rp_top.g-8,0), (float)Max((int)rp_top.b-8,0), 255}; + CustomGradientData *rp_grad = alloc_gradient(rp_top, rp_bot); + CLAY(CLAY_ID("RightPanel"), .layout = { .sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_GROW() }, .layoutDirection = CLAY_TOP_TO_BOTTOM, }, - .backgroundColor = g_theme.bg_medium + .backgroundColor = rp_top, + .custom = { .customData = rp_grad } ) { ui_tab_bar("RightTabs", right_tabs, 2, &app->right_panel_tab); @@ -660,12 +675,17 @@ static void build_right_panel(AppState *app) { static void build_log_panel(B32 show) { if (!show) return; + Clay_Color lp_top = g_theme.bg_medium; + Clay_Color lp_bot = {(float)Max((int)lp_top.r-8,0), (float)Max((int)lp_top.g-8,0), (float)Max((int)lp_top.b-8,0), 255}; + CustomGradientData *lp_grad = alloc_gradient(lp_top, lp_bot); + CLAY(CLAY_ID("LogPanel"), .layout = { .sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIXED(uis(180)) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, }, - .backgroundColor = g_theme.bg_medium, + .backgroundColor = lp_top, + .custom = { .customData = lp_grad }, .border = { .color = g_theme.border, .width = { .top = 1 } } ) { { diff --git a/src/ui/ui_core.cpp b/src/ui/ui_core.cpp index b77480e..0a34814 100644 --- a/src/ui/ui_core.cpp +++ b/src/ui/ui_core.cpp @@ -27,51 +27,51 @@ void ui_set_theme(S32 theme_id) { switch (theme_id) { default: case 0: // Dark - g_theme.bg_dark = Clay_Color{ 30, 30, 33, 255}; - g_theme.bg_medium = Clay_Color{ 41, 41, 43, 255}; - g_theme.bg_light = Clay_Color{ 51, 51, 56, 255}; - g_theme.bg_lighter = Clay_Color{ 56, 56, 61, 255}; - g_theme.border = Clay_Color{ 56, 56, 61, 255}; - g_theme.text = Clay_Color{224, 224, 224, 255}; - g_theme.text_dim = Clay_Color{112, 112, 112, 255}; + g_theme.bg_dark = Clay_Color{ 26, 26, 26, 255}; + g_theme.bg_medium = Clay_Color{ 36, 36, 36, 255}; + g_theme.bg_light = Clay_Color{ 46, 46, 46, 255}; + g_theme.bg_lighter = Clay_Color{ 54, 54, 54, 255}; + g_theme.border = Clay_Color{ 52, 52, 52, 255}; + g_theme.text = Clay_Color{220, 220, 220, 255}; + g_theme.text_dim = Clay_Color{105, 105, 105, 255}; g_theme.accent = Clay_Color{ 87, 138, 176, 255}; g_theme.accent_hover = Clay_Color{102, 153, 191, 255}; g_theme.button_text = Clay_Color{224, 224, 224, 255}; - g_theme.disabled_bg = Clay_Color{ 50, 50, 50, 255}; - g_theme.disabled_text = Clay_Color{100, 100, 100, 255}; - g_theme.title_bar = Clay_Color{ 26, 26, 28, 255}; - g_theme.scrollbar_bg = Clay_Color{ 26, 26, 28, 255}; - g_theme.scrollbar_grab = Clay_Color{ 61, 61, 66, 255}; + g_theme.disabled_bg = Clay_Color{ 44, 44, 44, 255}; + g_theme.disabled_text = Clay_Color{ 90, 90, 90, 255}; + g_theme.title_bar = Clay_Color{ 22, 22, 22, 255}; + g_theme.scrollbar_bg = Clay_Color{ 22, 22, 22, 255}; + g_theme.scrollbar_grab = Clay_Color{ 58, 58, 58, 255}; g_theme.shadow = Clay_Color{ 0, 0, 0, 30}; g_theme.tab_active_top = Clay_Color{ 70, 120, 160, 255}; g_theme.tab_active_bottom= Clay_Color{ 30, 55, 80, 255}; - g_theme.tab_inactive = Clay_Color{ 45, 45, 48, 255}; - g_theme.tab_inactive_hover= Clay_Color{ 55, 55, 60, 255}; + g_theme.tab_inactive = Clay_Color{ 40, 40, 40, 255}; + g_theme.tab_inactive_hover= Clay_Color{ 50, 50, 50, 255}; g_theme.tab_text = Clay_Color{240, 240, 240, 255}; g_theme.corner_radius = 4.0f; break; case 1: // Light - g_theme.bg_dark = Clay_Color{210, 210, 215, 255}; - g_theme.bg_medium = Clay_Color{230, 230, 233, 255}; - g_theme.bg_light = Clay_Color{242, 242, 245, 255}; - g_theme.bg_lighter = Clay_Color{248, 248, 250, 255}; - g_theme.border = Clay_Color{190, 190, 195, 255}; - g_theme.text = Clay_Color{ 30, 30, 35, 255}; - g_theme.text_dim = Clay_Color{120, 120, 130, 255}; + g_theme.bg_dark = Clay_Color{195, 193, 190, 255}; + g_theme.bg_medium = Clay_Color{212, 210, 207, 255}; + g_theme.bg_light = Clay_Color{225, 223, 220, 255}; + g_theme.bg_lighter = Clay_Color{232, 230, 227, 255}; + g_theme.border = Clay_Color{178, 176, 173, 255}; + g_theme.text = Clay_Color{ 35, 33, 30, 255}; + g_theme.text_dim = Clay_Color{115, 113, 108, 255}; g_theme.accent = Clay_Color{ 50, 110, 170, 255}; g_theme.accent_hover = Clay_Color{ 65, 125, 185, 255}; g_theme.button_text = Clay_Color{255, 255, 255, 255}; - g_theme.disabled_bg = Clay_Color{195, 195, 200, 255}; - g_theme.disabled_text = Clay_Color{150, 150, 155, 255}; - g_theme.title_bar = Clay_Color{220, 220, 225, 255}; - g_theme.scrollbar_bg = Clay_Color{220, 220, 225, 255}; - g_theme.scrollbar_grab = Clay_Color{180, 180, 185, 255}; + g_theme.disabled_bg = Clay_Color{185, 183, 180, 255}; + g_theme.disabled_text = Clay_Color{145, 143, 140, 255}; + g_theme.title_bar = Clay_Color{202, 200, 197, 255}; + g_theme.scrollbar_bg = Clay_Color{202, 200, 197, 255}; + g_theme.scrollbar_grab = Clay_Color{168, 166, 163, 255}; g_theme.shadow = Clay_Color{ 0, 0, 0, 18}; g_theme.tab_active_top = Clay_Color{ 70, 130, 180, 255}; g_theme.tab_active_bottom= Clay_Color{ 50, 100, 150, 255}; - g_theme.tab_inactive = Clay_Color{218, 218, 222, 255}; - g_theme.tab_inactive_hover= Clay_Color{205, 205, 210, 255}; + g_theme.tab_inactive = Clay_Color{205, 203, 200, 255}; + g_theme.tab_inactive_hover= Clay_Color{195, 193, 190, 255}; g_theme.tab_text = Clay_Color{255, 255, 255, 255}; g_theme.corner_radius = 4.0f; break; diff --git a/src/ui/ui_widgets.cpp b/src/ui/ui_widgets.cpp index 40803d7..6c5408b 100644 --- a/src/ui/ui_widgets.cpp +++ b/src/ui/ui_widgets.cpp @@ -1332,7 +1332,7 @@ S32 ui_tab_bar(const char *id, const char **labels, S32 count, S32 *selected) { CLAY(row_eid, .layout = { .sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIT() }, - .padding = { 0, 0, uip(4), 0 }, + .padding = { 0, 0, 0, 0 }, .layoutDirection = CLAY_LEFT_TO_RIGHT, }, .backgroundColor = g_theme.bg_medium,