From b4797dcd2d23d992bc1b4af61e5b8874e57c1973 Mon Sep 17 00:00:00 2001 From: Ilia Demianenko Date: Thu, 7 Sep 2023 13:52:49 -0700 Subject: [PATCH] Light UI theme --- samples/ui/src/main.c | 1 + src/ui/ui.c | 580 +++++++++++++++++++++++++++++++++++------- src/ui/ui.h | 178 +++++++++++++ 3 files changed, 660 insertions(+), 99 deletions(-) diff --git a/samples/ui/src/main.c b/samples/ui/src/main.c index 9990bfa..f5c582f 100644 --- a/samples/ui/src/main.c +++ b/samples/ui/src/main.c @@ -15,6 +15,7 @@ ORCA_EXPORT void oc_on_init(void) surface = oc_surface_canvas(); canvas = oc_canvas_create(); oc_ui_init(&ui); + oc_ui_set_theme(&OC_UI_LIGHT_THEME); //NOTE: load font { diff --git a/src/ui/ui.c b/src/ui/ui.c index e0a7540..c0a86b1 100644 --- a/src/ui/ui.c +++ b/src/ui/ui.c @@ -15,54 +15,6 @@ //NOTE(ilia): Design system by semi.design: https://semi.design/en-US/start/overview -#define OC_UI_DARK_BLUE_2 { 0.074, 0.361, 0.722, 1 } -#define OC_UI_DARK_BLUE_5 { 0.33, 0.66, 1, 1 } -#define OC_UI_DARK_BLUE_6 { 0.5, 0.757, 1, 1 } -#define OC_UI_DARK_BLUE_7 { 0.66, 0.84, 1, 1 } -#define OC_UI_DARK_GREY_7 { 0.786, 0.792, 0.804, 1 } -#define OC_UI_DARK_GREY_9 { 0.976, 0.976, 0.976, 1 } - -#define OC_UI_DARK_BG_0 { 0.086, 0.086, 0.102, 1 } -#define OC_UI_DARK_TEXT_0 OC_UI_DARK_GREY_9 - -static oc_ui_theme OC_UI_DARK_THEME = { - .white = { 0.894, 0.906, 0.961, 1 }, - .primary = OC_UI_DARK_BLUE_5, - .primaryHover = OC_UI_DARK_BLUE_6, - .primaryActive = OC_UI_DARK_BLUE_7, - .fill0 = { 1, 1, 1, 0.12 }, - .fill1 = { 1, 1, 1, 0.16 }, - .fill2 = { 1, 1, 1, 0.2 }, - .bg0 = OC_UI_DARK_BG_0, - .bg1 = { 0.137, 0.141, 0.161, 1 }, - .bg2 = { 0.208, 0.212, 0.235, 1 }, - .bg3 = { 0.263, 0.267, 0.29, 1 }, - .bg4 = { 0.31, 0.318, 0.349, 1 }, - .text0 = OC_UI_DARK_TEXT_0, - .text1 = { 0.976, 0.976, 0.976, 0.8 }, // OC_UI_DARK_GREY_9 - .text2 = { 0.976, 0.976, 0.976, 0.6 }, // OC_UI_DARK_GREY_9 - .text3 = { 0.976, 0.976, 0.976, 0.35 } // OC_UI_DARK_GREY_9 -}; - -static oc_ui_style OC_UI_STYLE_DEFAULTS = { - .size.width = { .kind = OC_UI_SIZE_CHILDREN, - .value = 0, - .relax = 0 }, - .size.height = { .kind = OC_UI_SIZE_CHILDREN, - .value = 0, - .relax = 0 }, - - .layout = { .axis = OC_UI_AXIS_Y, - .align = { OC_UI_ALIGN_START, - OC_UI_ALIGN_START } }, - .bgColor = OC_UI_DARK_BG_0, - .color = OC_UI_DARK_TEXT_0, - .fontSize = 14, -}; - -#undef OC_UI_DARK_BG_0 -#undef OC_UI_DARK_TEXT_0 - oc_thread_local oc_ui_context oc_uiThreadContext = { 0 }; oc_thread_local oc_ui_context* oc_uiCurrentContext = 0; @@ -76,6 +28,19 @@ void oc_ui_set_context(oc_ui_context* context) oc_uiCurrentContext = context; } +void oc_ui_set_theme(oc_ui_theme* theme) +{ + oc_ui_get_context()->theme = theme; + if(theme == &OC_UI_DARK_THEME) + { + theme->palette = &OC_UI_DARK_PALETTE; + } + if(theme == &OC_UI_LIGHT_THEME) + { + theme->palette = &OC_UI_LIGHT_PALETTE; + } +} + //----------------------------------------------------------------------------- // stacks //----------------------------------------------------------------------------- @@ -461,7 +426,22 @@ oc_ui_box* oc_ui_box_make_str8(oc_str8 string, oc_ui_flags flags) //NOTE: create style and setup non-inherited attributes to default values box->targetStyle = oc_arena_push_type(&ui->frameArena, oc_ui_style); - oc_ui_apply_style_with_mask(box->targetStyle, &OC_UI_STYLE_DEFAULTS, ~0ULL); + oc_ui_style defaultStyle = { + .size.width = { .kind = OC_UI_SIZE_CHILDREN, + .value = 0, + .relax = 0 }, + .size.height = { .kind = OC_UI_SIZE_CHILDREN, + .value = 0, + .relax = 0 }, + + .layout = { .axis = OC_UI_AXIS_Y, + .align = { OC_UI_ALIGN_START, + OC_UI_ALIGN_START } }, + .bgColor = ui->theme->bg0, + .color = ui->theme->text0, + .fontSize = 14, + }; + oc_ui_apply_style_with_mask(box->targetStyle, &defaultStyle, ~0ULL); //NOTE: set tags, before rules and last box box->tags = ui->nextBoxTags; @@ -1550,6 +1530,7 @@ void oc_ui_init(oc_ui_context* ui) ui->init = true; oc_ui_set_context(ui); + oc_ui_set_theme(&OC_UI_DARK_THEME); } void oc_ui_cleanup(void) @@ -1613,6 +1594,7 @@ oc_ui_sig oc_ui_button_behavior(oc_ui_box* box) oc_ui_sig oc_ui_button_str8(oc_str8 label) { oc_ui_context* ui = oc_ui_get_context(); + oc_ui_theme* theme = ui->theme; oc_ui_style defaultStyle = { .size.width = { OC_UI_SIZE_TEXT }, .size.height = { OC_UI_SIZE_TEXT }, @@ -1620,8 +1602,8 @@ oc_ui_sig oc_ui_button_str8(oc_str8 label) .layout.align.y = OC_UI_ALIGN_CENTER, .layout.margin.x = 12, .layout.margin.y = 6, - .color = OC_UI_DARK_THEME.primary, - .bgColor = OC_UI_DARK_THEME.fill0, + .color = theme->primary, + .bgColor = theme->fill0, .roundness = 3 }; oc_ui_style_mask defaultMask = OC_UI_STYLE_SIZE_WIDTH @@ -1638,12 +1620,12 @@ oc_ui_sig oc_ui_button_str8(oc_str8 label) oc_ui_pattern hoverPattern = { 0 }; oc_ui_pattern_push(&ui->frameArena, &hoverPattern, (oc_ui_selector){ .kind = OC_UI_SEL_STATUS, .status = OC_UI_HOVER }); - oc_ui_style hoverStyle = { .bgColor = OC_UI_DARK_THEME.fill1 }; + oc_ui_style hoverStyle = { .bgColor = theme->fill1 }; oc_ui_style_match_before(hoverPattern, &hoverStyle, OC_UI_STYLE_BG_COLOR); oc_ui_pattern activePattern = { 0 }; oc_ui_pattern_push(&ui->frameArena, &activePattern, (oc_ui_selector){ .kind = OC_UI_SEL_STATUS, .status = OC_UI_ACTIVE }); - oc_ui_style activeStyle = { .bgColor = OC_UI_DARK_THEME.fill2 }; + oc_ui_style activeStyle = { .bgColor = theme->fill2 }; oc_ui_style_match_before(activePattern, &activeStyle, OC_UI_STYLE_BG_COLOR); oc_ui_flags flags = OC_UI_FLAG_CLICKABLE @@ -1694,14 +1676,15 @@ void oc_ui_checkbox_draw(oc_ui_box* box, void* data) oc_ui_sig oc_ui_checkbox(const char* name, bool* checked) { oc_ui_context* ui = oc_ui_get_context(); + oc_ui_theme* theme = ui->theme; oc_ui_box* box; if (*checked) { oc_ui_style defaultStyle = { .size.width = { OC_UI_SIZE_PIXELS, 16 }, .size.height = { OC_UI_SIZE_PIXELS, 16 }, - .bgColor = OC_UI_DARK_THEME.primary, - .color = OC_UI_DARK_THEME.white, + .bgColor = theme->primary, + .color = theme->white, .roundness = 3 }; oc_ui_style_mask defaultMask = OC_UI_STYLE_SIZE_WIDTH @@ -1714,12 +1697,12 @@ oc_ui_sig oc_ui_checkbox(const char* name, bool* checked) oc_ui_pattern hoverPattern = { 0 }; oc_ui_pattern_push(&ui->frameArena, &hoverPattern, (oc_ui_selector){ .kind = OC_UI_SEL_STATUS, .status = OC_UI_HOVER }); - oc_ui_style hoverStyle = { .bgColor = OC_UI_DARK_THEME.primaryHover }; + oc_ui_style hoverStyle = { .bgColor = theme->primaryHover }; oc_ui_style_match_before(hoverPattern, &hoverStyle, OC_UI_STYLE_BG_COLOR); oc_ui_pattern activePattern = { 0 }; oc_ui_pattern_push(&ui->frameArena, &activePattern, (oc_ui_selector){ .kind = OC_UI_SEL_STATUS, .status = OC_UI_ACTIVE }); - oc_ui_style activeStyle = { .bgColor = OC_UI_DARK_THEME.primaryActive }; + oc_ui_style activeStyle = { .bgColor = theme->primaryActive }; oc_ui_style_match_before(activePattern, &activeStyle, OC_UI_STYLE_BG_COLOR); oc_ui_flags flags = OC_UI_FLAG_CLICKABLE @@ -1739,7 +1722,7 @@ oc_ui_sig oc_ui_checkbox(const char* name, bool* checked) oc_ui_style defaultStyle = { .size.width = { OC_UI_SIZE_PIXELS, 16 }, .size.height = { OC_UI_SIZE_PIXELS, 16 }, .bgColor = { 0 }, - .borderColor = OC_UI_DARK_THEME.text3, + .borderColor = theme->text3, .borderSize = 1, .roundness = 3 }; @@ -1754,14 +1737,14 @@ oc_ui_sig oc_ui_checkbox(const char* name, bool* checked) oc_ui_pattern hoverPattern = { 0 }; oc_ui_pattern_push(&ui->frameArena, &hoverPattern, (oc_ui_selector){ .kind = OC_UI_SEL_STATUS, .status = OC_UI_HOVER }); - oc_ui_style hoverStyle = { .bgColor = OC_UI_DARK_THEME.fill0, - .borderColor = OC_UI_DARK_THEME.primary }; + oc_ui_style hoverStyle = { .bgColor = theme->fill0, + .borderColor = theme->primary }; oc_ui_style_match_before(hoverPattern, &hoverStyle, OC_UI_STYLE_BG_COLOR | OC_UI_STYLE_BORDER_COLOR); oc_ui_pattern activePattern = { 0 }; oc_ui_pattern_push(&ui->frameArena, &activePattern, (oc_ui_selector){ .kind = OC_UI_SEL_STATUS, .status = OC_UI_ACTIVE }); - oc_ui_style activeStyle = { .bgColor = OC_UI_DARK_THEME.fill1, - .borderColor = OC_UI_DARK_THEME.primary }; + oc_ui_style activeStyle = { .bgColor = theme->fill1, + .borderColor = theme->primary }; oc_ui_style_match_before(activePattern, &activeStyle, OC_UI_STYLE_BG_COLOR | OC_UI_STYLE_BORDER_COLOR); oc_ui_flags flags = OC_UI_FLAG_CLICKABLE @@ -1789,6 +1772,9 @@ oc_ui_sig oc_ui_checkbox(const char* name, bool* checked) //------------------------------------------------------------------------------ oc_ui_box* oc_ui_slider(const char* label, f32* value) { + oc_ui_context* ui = oc_ui_get_context(); + oc_ui_theme* theme = ui->theme; + oc_ui_style_match_before(oc_ui_pattern_all(), &(oc_ui_style){ 0 }, OC_UI_STYLE_LAYOUT); oc_ui_box* frame = oc_ui_box_begin(label, 0); { @@ -1803,14 +1789,14 @@ oc_ui_box* oc_ui_slider(const char* label, f32* value) thumbRatio = oc_min(thumbSize / frame->rect.w, 1.); beforeRatio = (*value) * (1. - thumbRatio); afterRatio = (1. - *value) * (1. - thumbRatio); - trackFillRatio = beforeRatio + thumbRatio; + trackFillRatio = beforeRatio + thumbRatio / 2; } else { thumbRatio = oc_min(thumbSize / frame->rect.h, 1.); beforeRatio = (1. - *value) * (1. - thumbRatio); afterRatio = (*value) * (1. - thumbRatio); - trackFillRatio = thumbRatio + afterRatio; + trackFillRatio = thumbRatio / 2 + afterRatio; } if(frame->rect.w > 0 || frame->rect.h > 0) @@ -1827,7 +1813,7 @@ oc_ui_box* oc_ui_slider(const char* label, f32* value) oc_ui_style trackStyle = { .floating.x = true, .floating.y = true, - .bgColor = OC_UI_DARK_THEME.fill0, + .bgColor = theme->fill0, .roundness = trackThickness / 2 }; trackStyle.size.c[trackAxis] = (oc_ui_size){ OC_UI_SIZE_PARENT, 1 }; trackStyle.size.c[secondAxis] = (oc_ui_size){ OC_UI_SIZE_PIXELS, trackThickness }; @@ -1852,7 +1838,7 @@ oc_ui_box* oc_ui_slider(const char* label, f32* value) .floating.y = true, .floatTarget.x = 0, .floatTarget.y = (thumbSize - trackThickness) / 2, - .bgColor = OC_UI_DARK_THEME.primary, + .bgColor = theme->primary, .roundness = trackThickness / 2 }; oc_ui_style_next(&trackFillStyle, styleFloatMask); oc_ui_box* trackFill = oc_ui_box_make("track_fill", OC_UI_FLAG_DRAW_BACKGROUND); @@ -1866,7 +1852,7 @@ oc_ui_box* oc_ui_slider(const char* label, f32* value) .floating.y = true, .floatTarget.x = (thumbSize - trackThickness) / 2, .floatTarget.y = frame->rect.h * (1 - trackFillRatio), - .bgColor = OC_UI_DARK_THEME.primary, + .bgColor = theme->primary, .roundness = trackThickness / 2 }; oc_ui_style_next(&trackFillStyle, styleFloatMask); oc_ui_box* trackFill = oc_ui_box_make("track_fill", OC_UI_FLAG_DRAW_BACKGROUND); @@ -1880,12 +1866,18 @@ oc_ui_box* oc_ui_slider(const char* label, f32* value) oc_ui_style thumbStyle = { .size.width = (oc_ui_size){ OC_UI_SIZE_PIXELS, thumbSize }, .size.height = (oc_ui_size){ OC_UI_SIZE_PIXELS, thumbSize }, - .bgColor = OC_UI_DARK_THEME.white, + .bgColor = theme->white, + .borderColor = theme->sliderThumbBorder, + .borderSize = 1, .roundness = thumbSize / 2 }; - oc_ui_style_next(&thumbStyle, styleMask); + oc_ui_style_mask thumbMask = OC_UI_STYLE_SIZE + | OC_UI_STYLE_BG_COLOR + | OC_UI_STYLE_BORDER_COLOR + | OC_UI_STYLE_BORDER_SIZE + | OC_UI_STYLE_ROUNDNESS; + oc_ui_style_next(&thumbStyle, thumbMask); - oc_ui_context* ui = oc_ui_get_context(); - oc_ui_style thumbActiveStyle = { .borderColor = OC_UI_DARK_THEME.primary, + oc_ui_style thumbActiveStyle = { .borderColor = theme->primary, .borderSize = 1 }; oc_ui_pattern thumbActivePattern = { 0 }; oc_ui_pattern_push(&ui->frameArena, @@ -1958,6 +1950,8 @@ oc_ui_box* oc_ui_slider(const char* label, f32* value) oc_ui_box* oc_ui_scrollbar(const char* label, f32 thumbRatio, f32* scrollValue) { + oc_ui_context* ui = oc_ui_get_context(); + oc_ui_theme* theme = ui->theme; oc_ui_style_match_before(oc_ui_pattern_all(), &(oc_ui_style){ 0 }, OC_UI_STYLE_LAYOUT); oc_ui_box* frame = oc_ui_box_begin(label, 0); { @@ -1985,7 +1979,7 @@ oc_ui_box* oc_ui_scrollbar(const char* label, f32 thumbRatio, f32* scrollValue) oc_ui_style thumbStyle = trackStyle; thumbStyle.size.c[trackAxis] = (oc_ui_size){ OC_UI_SIZE_PARENT, thumbRatio }; - thumbStyle.bgColor = OC_UI_DARK_THEME.fill2; + thumbStyle.bgColor = theme->fill2; oc_ui_style_mask trackStyleMask = OC_UI_STYLE_SIZE_WIDTH | OC_UI_STYLE_SIZE_HEIGHT @@ -2004,8 +1998,7 @@ oc_ui_box* oc_ui_scrollbar(const char* label, f32 thumbRatio, f32* scrollValue) oc_ui_style_next(&beforeSpacerStyle, OC_UI_STYLE_SIZE); oc_ui_box* beforeSpacer = oc_ui_box_make("before_spacer", 0); - oc_ui_context* ui = oc_ui_get_context(); - oc_ui_style thumbHoverActiveStyle = { .bgColor = OC_UI_DARK_THEME.fill1 }; + oc_ui_style thumbHoverActiveStyle = { .bgColor = theme->fill1 }; oc_ui_pattern thumbHoverPattern = { 0 }; oc_ui_pattern_push(&ui->frameArena, &thumbHoverPattern, @@ -2200,6 +2193,7 @@ void oc_ui_tooltip_arrow_draw(oc_ui_box* box, void* data) void oc_ui_tooltip(const char* label) { oc_ui_context* ui = oc_ui_get_context(); + oc_ui_theme* theme = ui->theme; oc_vec2 p = oc_ui_mouse_position(); @@ -2210,7 +2204,7 @@ void oc_ui_tooltip(const char* label) .floating.x = true, .floating.y = true, .floatTarget = { p.x, p.y + 5}, - .bgColor = OC_UI_DARK_GREY_7 }; + .bgColor = theme->palette->grey7 }; oc_ui_style_mask arrowMask = OC_UI_STYLE_SIZE | OC_UI_STYLE_FLOAT | OC_UI_STYLE_BG_COLOR; @@ -2226,8 +2220,8 @@ void oc_ui_tooltip(const char* label) .floating.x = true, .floating.y = true, .floatTarget = { p.x + 24, p.y }, - .bgColor = OC_UI_DARK_GREY_7, - .color = OC_UI_DARK_THEME.bg0, + .bgColor = theme->palette->grey7, + .color = theme->bg0, .roundness = 6 }; oc_ui_style_mask contentsMask = OC_UI_STYLE_SIZE | OC_UI_STYLE_LAYOUT_MARGINS @@ -2278,6 +2272,7 @@ void oc_ui_menu_bar_end(void) void oc_ui_menu_begin(const char* label) { oc_ui_context* ui = oc_ui_get_context(); + oc_ui_theme* theme = ui->theme; oc_ui_box* container = oc_ui_box_make(label, 0); oc_ui_box_push(container); @@ -2290,12 +2285,12 @@ void oc_ui_menu_begin(const char* label) oc_ui_pattern hoverPattern = { 0 }; oc_ui_pattern_push(&ui->frameArena, &hoverPattern, (oc_ui_selector){ .kind = OC_UI_SEL_STATUS, .status = OC_UI_HOVER }); - oc_ui_style hoverStyle = { .bgColor = OC_UI_DARK_THEME.fill0 }; + oc_ui_style hoverStyle = { .bgColor = theme->fill0 }; oc_ui_style_match_before(hoverPattern, &hoverStyle, OC_UI_STYLE_BG_COLOR); oc_ui_pattern draggingPattern = { 0 }; oc_ui_pattern_push(&ui->frameArena, &draggingPattern, (oc_ui_selector){ .kind = OC_UI_SEL_STATUS, .status = OC_UI_DRAGGING }); - oc_ui_style draggingStyle = { .bgColor = OC_UI_DARK_THEME.fill2 }; + oc_ui_style draggingStyle = { .bgColor = theme->fill2 }; oc_ui_style_match_before(draggingPattern, &draggingStyle, OC_UI_STYLE_BG_COLOR); oc_ui_box* button = oc_ui_box_begin("button", OC_UI_FLAG_CLICKABLE | OC_UI_FLAG_DRAW_BACKGROUND); @@ -2312,7 +2307,6 @@ void oc_ui_menu_begin(const char* label) oc_ui_sig sig = oc_ui_box_sig(button); oc_ui_sig barSig = oc_ui_box_sig(bar); - oc_ui_style style = { .size.width = { OC_UI_SIZE_CHILDREN }, .size.height = { OC_UI_SIZE_CHILDREN }, .floating.x = true, @@ -2322,12 +2316,16 @@ void oc_ui_menu_begin(const char* label) .layout.axis = OC_UI_AXIS_Y, .layout.margin.x = 0, .layout.margin.y = 4, - .bgColor = OC_UI_DARK_THEME.bg1}; + .bgColor = theme->bg1, + .borderColor = theme->elevatedBorder, + .borderSize = 1 }; oc_ui_style_mask mask = OC_UI_STYLE_SIZE | OC_UI_STYLE_FLOAT | OC_UI_STYLE_LAYOUT - | OC_UI_STYLE_BG_COLOR; + | OC_UI_STYLE_BG_COLOR + | OC_UI_STYLE_BORDER_COLOR + | OC_UI_STYLE_BORDER_SIZE; oc_ui_flags flags = OC_UI_FLAG_OVERLAY | OC_UI_FLAG_DRAW_BACKGROUND @@ -2376,6 +2374,7 @@ void oc_ui_menu_end(void) oc_ui_sig oc_ui_menu_button(const char* name) { oc_ui_context* ui = oc_ui_get_context(); + oc_ui_theme* theme = ui->theme; oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_TEXT }, .size.height = { OC_UI_SIZE_TEXT }, @@ -2388,12 +2387,12 @@ oc_ui_sig oc_ui_menu_button(const char* name) oc_ui_pattern hoverPattern = { 0 }; oc_ui_pattern_push(&ui->frameArena, &hoverPattern, (oc_ui_selector){ .kind = OC_UI_SEL_STATUS, .status = OC_UI_HOVER }); - oc_ui_style hoverStyle = { .bgColor = OC_UI_DARK_THEME.fill0 }; + oc_ui_style hoverStyle = { .bgColor = theme->fill0 }; oc_ui_style_match_before(hoverPattern, &hoverStyle, OC_UI_STYLE_BG_COLOR); oc_ui_pattern draggingPattern = { 0 }; oc_ui_pattern_push(&ui->frameArena, &draggingPattern, (oc_ui_selector){ .kind = OC_UI_SEL_STATUS, .status = OC_UI_DRAGGING }); - oc_ui_style draggingStyle = { .bgColor = OC_UI_DARK_THEME.fill2 }; + oc_ui_style draggingStyle = { .bgColor = theme->fill2 }; oc_ui_style_match_before(draggingPattern, &draggingStyle, OC_UI_STYLE_BG_COLOR); oc_ui_flags flags = OC_UI_FLAG_CLICKABLE @@ -2468,24 +2467,25 @@ oc_ui_select_popup_info oc_ui_select_popup(const char* name, oc_ui_select_popup_ oc_ui_select_popup_info result = *info; oc_ui_context* ui = oc_ui_get_context(); + oc_ui_theme* theme = ui->theme; oc_ui_container(name, 0) { oc_ui_pattern hoverPattern = { 0 }; oc_ui_pattern_push(&ui->frameArena, &hoverPattern, (oc_ui_selector){ .kind = OC_UI_SEL_STATUS, .status = OC_UI_HOVER }); - oc_ui_style hoverStyle = { .bgColor = OC_UI_DARK_THEME.fill1 }; + oc_ui_style hoverStyle = { .bgColor = theme->fill1 }; oc_ui_style_match_after(hoverPattern, &hoverStyle, OC_UI_STYLE_BG_COLOR); oc_ui_pattern activePattern = { 0 }; oc_ui_pattern_push(&ui->frameArena, &activePattern, (oc_ui_selector){ .kind = OC_UI_SEL_STATUS, .status = OC_UI_ACTIVE }); - oc_ui_style activeStyle = { .borderColor = OC_UI_DARK_THEME.primary, + oc_ui_style activeStyle = { .borderColor = theme->primary, .borderSize = 1 }; oc_ui_style_match_after(activePattern, &activeStyle, OC_UI_STYLE_BORDER_COLOR | OC_UI_STYLE_BORDER_SIZE); oc_ui_pattern draggingPattern = { 0 }; oc_ui_pattern_push(&ui->frameArena, &draggingPattern, (oc_ui_selector){ .kind = OC_UI_SEL_STATUS, .status = OC_UI_DRAGGING }); - oc_ui_style draggingStyle = { .bgColor = OC_UI_DARK_THEME.fill2, - .borderColor = OC_UI_DARK_THEME.primary, + oc_ui_style draggingStyle = { .bgColor = theme->fill2, + .borderColor = theme->primary, .borderSize = 1 }; oc_ui_style_match_after(draggingPattern, &draggingStyle, OC_UI_STYLE_BG_COLOR | OC_UI_STYLE_BORDER_COLOR | OC_UI_STYLE_BORDER_SIZE); @@ -2512,7 +2512,7 @@ oc_ui_select_popup_info oc_ui_select_popup(const char* name, oc_ui_select_popup_ .size.height = { OC_UI_SIZE_CHILDREN }, .layout.margin.x = 12, .layout.margin.y = 6, - .bgColor = OC_UI_DARK_THEME.fill0, + .bgColor = theme->fill0, .roundness = 3 }, OC_UI_STYLE_SIZE | OC_UI_STYLE_LAYOUT_MARGIN_X @@ -2532,7 +2532,7 @@ oc_ui_select_popup_info oc_ui_select_popup(const char* name, oc_ui_select_popup_ .floating.x = true, .floating.y = true, .floatTarget = { button->rect.w - button->rect.h, 0 }, - .color = OC_UI_DARK_THEME.text2 }, + .color = theme->text2 }, OC_UI_STYLE_SIZE | OC_UI_STYLE_FLOAT | OC_UI_STYLE_COLOR); @@ -2545,6 +2545,7 @@ oc_ui_select_popup_info oc_ui_select_popup(const char* name, oc_ui_select_popup_ //panel oc_ui_box* panel = oc_ui_box_make("panel", OC_UI_FLAG_DRAW_BACKGROUND + | OC_UI_FLAG_DRAW_BORDER | OC_UI_FLAG_BLOCK_MOUSE | OC_UI_FLAG_OVERLAY); @@ -2566,12 +2567,16 @@ oc_ui_select_popup_info oc_ui_select_popup(const char* name, oc_ui_select_popup_ .layout.axis = OC_UI_AXIS_Y, .layout.margin.x = 0, .layout.margin.y = 5, - .bgColor = OC_UI_DARK_THEME.bg3, + .bgColor = theme->bg3, + .borderColor = theme->elevatedBorder, + .borderSize = 1, .roundness = 6 }, OC_UI_STYLE_SIZE | OC_UI_STYLE_FLOAT | OC_UI_STYLE_LAYOUT | OC_UI_STYLE_BG_COLOR + | OC_UI_STYLE_BORDER_COLOR + | OC_UI_STYLE_BORDER_SIZE | OC_UI_STYLE_ROUNDNESS); oc_ui_box_push(panel); @@ -2598,11 +2603,11 @@ oc_ui_select_popup_info oc_ui_select_popup(const char* name, oc_ui_select_popup_ oc_ui_pattern hoverPattern = { 0 }; oc_ui_pattern_push(&ui->frameArena, &hoverPattern, (oc_ui_selector){ .kind = OC_UI_SEL_STATUS, .status = OC_UI_HOVER }); - oc_ui_style_match_before(hoverPattern, &(oc_ui_style){ .bgColor = OC_UI_DARK_THEME.fill0 }, OC_UI_STYLE_BG_COLOR); + oc_ui_style_match_before(hoverPattern, &(oc_ui_style){ .bgColor = theme->fill0 }, OC_UI_STYLE_BG_COLOR); oc_ui_pattern draggingPattern = { 0 }; oc_ui_pattern_push(&ui->frameArena, &draggingPattern, (oc_ui_selector){ .kind = OC_UI_SEL_STATUS, .status = OC_UI_DRAGGING }); - oc_ui_style_match_before(draggingPattern, &(oc_ui_style){ .bgColor = OC_UI_DARK_THEME.fill2 }, OC_UI_STYLE_BG_COLOR); + oc_ui_style_match_before(draggingPattern, &(oc_ui_style){ .bgColor = theme->fill2 }, OC_UI_STYLE_BG_COLOR); oc_ui_box* wrapper = oc_ui_box_begin_str8(info->options[i], OC_UI_FLAG_CLICKABLE | OC_UI_FLAG_DRAW_BACKGROUND); @@ -2610,7 +2615,7 @@ oc_ui_select_popup_info oc_ui_select_popup(const char* name, oc_ui_select_popup_ { oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, checkmarkSize }, .size.height = { OC_UI_SIZE_PIXELS, checkmarkSize }, - .color = OC_UI_DARK_THEME.text2 }, + .color = theme->text2 }, OC_UI_STYLE_SIZE | OC_UI_STYLE_COLOR); oc_ui_box* checkmark = oc_ui_box_make("checkmark", OC_UI_FLAG_DRAW_PROC); oc_ui_box_set_draw_proc(checkmark, oc_ui_select_popup_draw_checkmark, 0); @@ -3285,7 +3290,7 @@ void oc_ui_text_box_render(oc_ui_box* box, void* data) selectBox.x += beforeSelectBox.x + beforeSelectBox.w; selectBox.y += textY; - oc_set_color((oc_color)OC_UI_DARK_BLUE_2); + oc_set_color(ui->theme->palette->blue2); oc_rectangle_fill(selectBox.x, selectBox.y, selectBox.w, lineHeight); oc_set_font(style->font); @@ -3337,12 +3342,13 @@ void oc_ui_text_box_render(oc_ui_box* box, void* data) oc_ui_text_box_result oc_ui_text_box(const char* name, oc_arena* arena, oc_str8 text) { oc_ui_context* ui = oc_ui_get_context(); + oc_ui_theme* theme = ui->theme; oc_ui_text_box_result result = { .text = text }; oc_ui_style frameStyle = { .layout.margin.x = 12, .layout.margin.y = 6, - .bgColor = OC_UI_DARK_THEME.fill0, + .bgColor = theme->fill0, .roundness = 3 }; oc_ui_style_mask frameMask = OC_UI_STYLE_LAYOUT_MARGIN_X | OC_UI_STYLE_LAYOUT_MARGIN_Y @@ -3352,18 +3358,18 @@ oc_ui_text_box_result oc_ui_text_box(const char* name, oc_arena* arena, oc_str8 oc_ui_pattern hoverPattern = { 0 }; oc_ui_pattern_push(&ui->frameArena, &hoverPattern, (oc_ui_selector){ .kind = OC_UI_SEL_STATUS, .status = OC_UI_HOVER }); - oc_ui_style hoverStyle = { .bgColor = OC_UI_DARK_THEME.fill1 }; + oc_ui_style hoverStyle = { .bgColor = theme->fill1 }; oc_ui_style_match_after(hoverPattern, &hoverStyle, OC_UI_STYLE_BG_COLOR); oc_ui_pattern activePattern = { 0 }; oc_ui_pattern_push(&ui->frameArena, &activePattern, (oc_ui_selector){ .kind = OC_UI_SEL_STATUS, .status = OC_UI_ACTIVE }); - oc_ui_style activeStyle = { .borderColor = OC_UI_DARK_THEME.primary, + oc_ui_style activeStyle = { .borderColor = theme->primary, .borderSize = 1 }; oc_ui_style_match_after(activePattern, &activeStyle, OC_UI_STYLE_BORDER_COLOR | OC_UI_STYLE_BORDER_SIZE); oc_ui_pattern draggingPattern = { 0 }; oc_ui_pattern_push(&ui->frameArena, &draggingPattern, (oc_ui_selector){ .kind = OC_UI_SEL_STATUS, .status = OC_UI_DRAGGING }); - oc_ui_style draggingStyle = { .bgColor = OC_UI_DARK_THEME.fill2 }; + oc_ui_style draggingStyle = { .bgColor = theme->fill2 }; oc_ui_style_match_after(draggingPattern, &draggingStyle, OC_UI_STYLE_BG_COLOR); oc_ui_flags frameFlags = OC_UI_FLAG_CLICKABLE @@ -3559,3 +3565,379 @@ oc_ui_text_box_result oc_ui_text_box(const char* name, oc_arena* arena, oc_str8 return (result); } + +//------------------------------------------------------------------------------ +// Themes +//------------------------------------------------------------------------------ + +oc_ui_palette OC_UI_DARK_PALETTE = { + .red0 = { 0.424, 0.035, 0.043, 1 }, + .red1 = { 0.565, 0.067, 0.063, 1 }, + .red2 = { 0.706, 0.125, 0.098, 1 }, + .red3 = { 0.843, 0.200, 0.141, 1 }, + .red4 = { 0.984, 0.286, 0.196, 1 }, + .red5 = { 0.988, 0.447, 0.353, 1 }, + .red6 = { 0.992, 0.600, 0.514, 1 }, + .red7 = { 0.992, 0.745, 0.675, 1 }, + .red8 = { 0.996, 0.878, 0.835, 1 }, + .red9 = { 1.000, 0.953, 0.937, 1 }, + .orange0 = { 0.333, 0.122, 0.012, 1 }, + .orange1 = { 0.502, 0.208, 0.024, 1 }, + .orange2 = { 0.667, 0.314, 0.039, 1 }, + .orange3 = { 0.835, 0.435, 0.059, 1 }, + .orange4 = { 1.000, 0.573, 0.078, 1 }, + .orange5 = { 1.000, 0.682, 0.263, 1 }, + .orange6 = { 1.000, 0.780, 0.447, 1 }, + .orange7 = { 1.000, 0.867, 0.631, 1 }, + .orange8 = { 1.000, 0.937, 0.816, 1 }, + .orange9 = { 1.000, 0.976, 0.929, 1 }, + .amber0 = { 0.318, 0.180, 0.035, 1 }, + .amber1 = { 0.475, 0.294, 0.059, 1 }, + .amber2 = { 0.631, 0.420, 0.086, 1 }, + .amber3 = { 0.792, 0.561, 0.118, 1 }, + .amber4 = { 0.949, 0.718, 0.149, 1 }, + .amber5 = { 0.961, 0.792, 0.314, 1 }, + .amber6 = { 0.969, 0.859, 0.478, 1 }, + .amber7 = { 0.980, 0.918, 0.651, 1 }, + .amber8 = { 0.988, 0.965, 0.824, 1 }, + .amber9 = { 0.996, 0.984, 0.929, 1 }, + .yellow0 = { 0.329, 0.286, 0.012, 1 }, + .yellow1 = { 0.494, 0.424, 0.024, 1 }, + .yellow2 = { 0.659, 0.557, 0.039, 1 }, + .yellow3 = { 0.824, 0.686, 0.059, 1 }, + .yellow4 = { 0.988, 0.808, 0.078, 1 }, + .yellow5 = { 0.992, 0.871, 0.263, 1 }, + .yellow6 = { 0.992, 0.922, 0.443, 1 }, + .yellow7 = { 0.996, 0.961, 0.627, 1 }, + .yellow8 = { 0.996, 0.984, 0.816, 1 }, + .yellow9 = { 1.000, 0.996, 0.925, 1 }, + .lime0 = { 0.192, 0.275, 0.012, 1 }, + .lime1 = { 0.294, 0.412, 0.020, 1 }, + .lime2 = { 0.404, 0.553, 0.035, 1 }, + .lime3 = { 0.518, 0.690, 0.047, 1 }, + .lime4 = { 0.635, 0.827, 0.067, 1 }, + .lime5 = { 0.682, 0.863, 0.227, 1 }, + .lime6 = { 0.741, 0.898, 0.400, 1 }, + .lime7 = { 0.812, 0.929, 0.588, 1 }, + .lime8 = { 0.898, 0.965, 0.788, 1 }, + .lime9 = { 0.953, 0.984, 0.914, 1 }, + .lightGreen0 = { 0.149, 0.239, 0.075, 1 }, + .lightGreen1 = { 0.231, 0.361, 0.114, 1 }, + .lightGreen2 = { 0.318, 0.482, 0.157, 1 }, + .lightGreen3 = { 0.404, 0.600, 0.204, 1 }, + .lightGreen4 = { 0.498, 0.722, 0.251, 1 }, + .lightGreen5 = { 0.592, 0.776, 0.373, 1 }, + .lightGreen6 = { 0.690, 0.831, 0.506, 1 }, + .lightGreen7 = { 0.788, 0.890, 0.655, 1 }, + .lightGreen8 = { 0.894, 0.945, 0.820, 1 }, + .lightGreen9 = { 0.953, 0.973, 0.929, 1 }, + .green0 = { 0.071, 0.235, 0.098, 1 }, + .green1 = { 0.110, 0.353, 0.145, 1 }, + .green2 = { 0.153, 0.467, 0.192, 1 }, + .green3 = { 0.196, 0.584, 0.239, 1 }, + .green4 = { 0.243, 0.702, 0.286, 1 }, + .green5 = { 0.365, 0.761, 0.392, 1 }, + .green6 = { 0.498, 0.820, 0.518, 1 }, + .green7 = { 0.651, 0.882, 0.659, 1 }, + .green8 = { 0.816, 0.941, 0.820, 1 }, + .green9 = { 0.925, 0.969, 0.925, 1 }, + .teal0 = { 0.008, 0.235, 0.224, 1 }, + .teal1 = { 0.016, 0.353, 0.333, 1 }, + .teal2 = { 0.027, 0.467, 0.435, 1 }, + .teal3 = { 0.039, 0.584, 0.533, 1 }, + .teal4 = { 0.055, 0.702, 0.631, 1 }, + .teal5 = { 0.200, 0.761, 0.690, 1 }, + .teal6 = { 0.369, 0.820, 0.757, 1 }, + .teal7 = { 0.557, 0.882, 0.827, 1 }, + .teal8 = { 0.769, 0.941, 0.910, 1 }, + .teal9 = { 0.902, 0.969, 0.957, 1 }, + .cyan0 = { 0.016, 0.204, 0.239, 1 }, + .cyan1 = { 0.027, 0.310, 0.361, 1 }, + .cyan2 = { 0.039, 0.424, 0.482, 1 }, + .cyan3 = { 0.055, 0.537, 0.600, 1 }, + .cyan4 = { 0.075, 0.659, 0.722, 1 }, + .cyan5 = { 0.220, 0.733, 0.776, 1 }, + .cyan6 = { 0.384, 0.804, 0.831, 1 }, + .cyan7 = { 0.569, 0.875, 0.890, 1 }, + .cyan8 = { 0.776, 0.937, 0.945, 1 }, + .cyan9 = { 0.906, 0.969, 0.973, 1 }, + .lightBlue0 = { 0.000, 0.216, 0.380, 1 }, + .lightBlue1 = { 0.000, 0.302, 0.522, 1 }, + .lightBlue2 = { 0.012, 0.400, 0.663, 1 }, + .lightBlue3 = { 0.039, 0.506, 0.800, 1 }, + .lightBlue4 = { 0.075, 0.624, 0.941, 1 }, + .lightBlue5 = { 0.251, 0.706, 0.953, 1 }, + .lightBlue6 = { 0.431, 0.784, 0.965, 1 }, + .lightBlue7 = { 0.616, 0.863, 0.976, 1 }, + .lightBlue8 = { 0.808, 0.933, 0.988, 1 }, + .lightBlue9 = { 0.922, 0.973, 0.996, 1 }, + .blue0 = { 0.020, 0.192, 0.439, 1 }, + .blue1 = { 0.039, 0.275, 0.580, 1 }, + .blue2 = { 0.074, 0.361, 0.722, 1 }, + .blue3 = { 0.114, 0.459, 0.859, 1 }, + .blue4 = { 0.161, 0.565, 1.000, 1 }, + .blue5 = { 0.33, 0.66, 1, 1 }, + .blue6 = { 0.5, 0.757, 1, 1 }, + .blue7 = { 0.66, 0.84, 1, 1 }, + .blue8 = { 0.831, 0.925, 1.000, 1 }, + .blue9 = { 0.937, 0.973, 1.000, 1 }, + .indigo0 = { 0.090, 0.118, 0.396, 1 }, + .indigo1 = { 0.125, 0.161, 0.478, 1 }, + .indigo2 = { 0.161, 0.212, 0.557, 1 }, + .indigo3 = { 0.204, 0.267, 0.639, 1 }, + .indigo4 = { 0.251, 0.325, 0.718, 1 }, + .indigo5 = { 0.373, 0.443, 0.773, 1 }, + .indigo6 = { 0.506, 0.569, 0.831, 1 }, + .indigo7 = { 0.655, 0.706, 0.886, 1 }, + .indigo8 = { 0.820, 0.847, 0.945, 1 }, + .indigo9 = { 0.929, 0.937, 0.973, 1 }, + .violet0 = { 0.251, 0.106, 0.467, 1 }, + .violet1 = { 0.298, 0.141, 0.549, 1 }, + .violet2 = { 0.345, 0.180, 0.627, 1 }, + .violet3 = { 0.392, 0.224, 0.710, 1 }, + .violet4 = { 0.447, 0.275, 0.788, 1 }, + .violet5 = { 0.533, 0.396, 0.831, 1 }, + .violet6 = { 0.635, 0.533, 0.875, 1 }, + .violet7 = { 0.745, 0.678, 0.914, 1 }, + .violet8 = { 0.867, 0.831, 0.957, 1 }, + .violet9 = { 0.945, 0.933, 0.980, 1 }, + .purple0 = { 0.290, 0.063, 0.380, 1 }, + .purple1 = { 0.369, 0.090, 0.463, 1 }, + .purple2 = { 0.451, 0.122, 0.541, 1 }, + .purple3 = { 0.537, 0.157, 0.624, 1 }, + .purple4 = { 0.627, 0.200, 0.702, 1 }, + .purple5 = { 0.710, 0.325, 0.761, 1 }, + .purple6 = { 0.792, 0.471, 0.820, 1 }, + .purple7 = { 0.867, 0.627, 0.882, 1 }, + .purple8 = { 0.937, 0.808, 0.941, 1 }, + .purple9 = { 0.969, 0.922, 0.969, 1 }, + .pink0 = { 0.361, 0.027, 0.188, 1 }, + .pink1 = { 0.502, 0.055, 0.255, 1 }, + .pink2 = { 0.643, 0.090, 0.318, 1 }, + .pink3 = { 0.780, 0.133, 0.380, 1 }, + .pink4 = { 0.922, 0.184, 0.443, 1 }, + .pink5 = { 0.937, 0.337, 0.525, 1 }, + .pink6 = { 0.953, 0.494, 0.624, 1 }, + .pink7 = { 0.969, 0.659, 0.737, 1 }, + .pink8 = { 0.984, 0.827, 0.863, 1 }, + .pink9 = { 0.992, 0.933, 0.945, 1 }, + .grey0 = { 0.110, 0.122, 0.137, 1 }, + .grey1 = { 0.180, 0.196, 0.220, 1 }, + .grey2 = { 0.255, 0.275, 0.298, 1 }, + .grey3 = { 0.333, 0.357, 0.380, 1 }, + .grey4 = { 0.420, 0.439, 0.459, 1 }, + .grey5 = { 0.533, 0.553, 0.573, 1 }, + .grey6 = { 0.655, 0.671, 0.690, 1 }, + .grey7 = { 0.786, 0.792, 0.804, 1 }, + .grey8 = { 0.902, 0.910, 0.918, 1 }, + .grey9 = { 0.976, 0.976, 0.976, 1 }, + .black = { 0, 0, 0, 1 }, + .white = { 1, 1, 1, 1 } +}; + +oc_ui_theme OC_UI_DARK_THEME = { + .white = { 0.894, 0.906, 0.961, 1 }, + .primary = { 0.33, 0.66, 1, 1 }, // blue5 + .primaryHover = { 0.5, 0.757, 1, 1 }, // blue6 + .primaryActive = { 0.66, 0.84, 1, 1 }, // blue7 + .fill0 = { 1, 1, 1, 0.12 }, + .fill1 = { 1, 1, 1, 0.16 }, + .fill2 = { 1, 1, 1, 0.2 }, + .bg0 = { 0.086, 0.086, 0.102, 1 }, + .bg1 = { 0.137, 0.141, 0.161, 1 }, + .bg2 = { 0.208, 0.212, 0.235, 1 }, + .bg3 = { 0.263, 0.267, 0.29, 1 }, + .bg4 = { 0.31, 0.318, 0.349, 1 }, + .text0 = { 0.976, 0.976, 0.976, 1 }, // grey9 + .text1 = { 0.976, 0.976, 0.976, 0.8 }, // grey9 + .text2 = { 0.976, 0.976, 0.976, 0.6 }, // grey9 + .text3 = { 0.976, 0.976, 0.976, 0.35 }, // grey9 + .sliderThumbBorder = { 0, 0, 0, 0.075 }, + .elevatedBorder = { 1, 1, 1, 0.1 } +}; + +oc_ui_palette OC_UI_LIGHT_PALETTE = { + .red0 = { 0.996, 0.949, 0.929, 1 }, + .red1 = { 0.996, 0.867, 0.824, 1 }, + .red2 = { 0.992, 0.718, 0.647, 1 }, + .red3 = { 0.984, 0.565, 0.471, 1 }, + .red4 = { 0.980, 0.400, 0.298, 1 }, + .red5 = { 0.976, 0.224, 0.125, 1 }, + .red6 = { 0.835, 0.145, 0.082, 1 }, + .red7 = { 0.698, 0.078, 0.047, 1 }, + .red8 = { 0.557, 0.031, 0.020, 1 }, + .red9 = { 0.416, 0.004, 0.012, 1 }, + .orange0 = { 1.000, 0.973, 0.918, 1 }, + .orange1 = { 0.996, 0.933, 0.800, 1 }, + .orange2 = { 0.996, 0.851, 0.596, 1 }, + .orange3 = { 0.992, 0.757, 0.396, 1 }, + .orange4 = { 0.992, 0.651, 0.200, 1 }, + .orange5 = { 0.988, 0.533, 0.000, 1 }, + .orange6 = { 0.824, 0.404, 0.000, 1 }, + .orange7 = { 0.659, 0.290, 0.000, 1 }, + .orange8 = { 0.494, 0.192, 0.000, 1 }, + .orange9 = { 0.329, 0.114, 0.000, 1 }, + .amber0 = { 0.996, 0.984, 0.922, 1 }, + .amber1 = { 0.988, 0.961, 0.808, 1 }, + .amber2 = { 0.976, 0.910, 0.620, 1 }, + .amber3 = { 0.965, 0.847, 0.435, 1 }, + .amber4 = { 0.953, 0.776, 0.255, 1 }, + .amber5 = { 0.941, 0.694, 0.078, 1 }, + .amber6 = { 0.784, 0.541, 0.059, 1 }, + .amber7 = { 0.627, 0.400, 0.039, 1 }, + .amber8 = { 0.471, 0.275, 0.024, 1 }, + .amber9 = { 0.314, 0.169, 0.012, 1 }, + .yellow0 = { 1.000, 0.992, 0.918, 1 }, + .yellow1 = { 0.996, 0.984, 0.796, 1 }, + .yellow2 = { 0.992, 0.953, 0.596, 1 }, + .yellow3 = { 0.988, 0.910, 0.396, 1 }, + .yellow4 = { 0.984, 0.855, 0.196, 1 }, + .yellow5 = { 0.980, 0.784, 0.000, 1 }, + .yellow6 = { 0.816, 0.667, 0.000, 1 }, + .yellow7 = { 0.655, 0.545, 0.000, 1 }, + .yellow8 = { 0.490, 0.416, 0.000, 1 }, + .yellow9 = { 0.325, 0.282, 0.000, 1 }, + .lime0 = { 0.949, 0.980, 0.902, 1 }, + .lime1 = { 0.890, 0.965, 0.773, 1 }, + .lime2 = { 0.796, 0.929, 0.557, 1 }, + .lime3 = { 0.718, 0.890, 0.357, 1 }, + .lime4 = { 0.655, 0.855, 0.173, 1 }, + .lime5 = { 0.608, 0.820, 0.000, 1 }, + .lime6 = { 0.494, 0.682, 0.000, 1 }, + .lime7 = { 0.388, 0.545, 0.000, 1 }, + .lime8 = { 0.282, 0.408, 0.000, 1 }, + .lime9 = { 0.184, 0.275, 0.000, 1 }, + .lightGreen0 = { 0.953, 0.973, 0.925, 1 }, + .lightGreen1 = { 0.890, 0.941, 0.816, 1 }, + .lightGreen2 = { 0.784, 0.886, 0.647, 1 }, + .lightGreen3 = { 0.678, 0.827, 0.494, 1 }, + .lightGreen4 = { 0.576, 0.773, 0.357, 1 }, + .lightGreen5 = { 0.482, 0.714, 0.235, 1 }, + .lightGreen6 = { 0.392, 0.596, 0.188, 1 }, + .lightGreen7 = { 0.306, 0.475, 0.149, 1 }, + .lightGreen8 = { 0.224, 0.357, 0.106, 1 }, + .lightGreen9 = { 0.145, 0.239, 0.071, 1 }, + .green0 = { 0.925, 0.969, 0.925, 1 }, + .green1 = { 0.816, 0.941, 0.820, 1 }, + .green2 = { 0.643, 0.878, 0.655, 1 }, + .green3 = { 0.490, 0.820, 0.510, 1 }, + .green4 = { 0.353, 0.761, 0.384, 1 }, + .green5 = { 0.231, 0.702, 0.275, 1 }, + .green6 = { 0.188, 0.584, 0.231, 1 }, + .green7 = { 0.145, 0.467, 0.184, 1 }, + .green8 = { 0.106, 0.349, 0.141, 1 }, + .green9 = { 0.067, 0.235, 0.094, 1 }, + .teal0 = { 0.894, 0.969, 0.957, 1 }, + .teal1 = { 0.753, 0.941, 0.910, 1 }, + .teal2 = { 0.529, 0.878, 0.827, 1 }, + .teal3 = { 0.329, 0.820, 0.757, 1 }, + .teal4 = { 0.153, 0.761, 0.690, 1 }, + .teal5 = { 0.000, 0.702, 0.631, 1 }, + .teal6 = { 0.000, 0.584, 0.537, 1 }, + .teal7 = { 0.000, 0.467, 0.435, 1 }, + .teal8 = { 0.000, 0.349, 0.333, 1 }, + .teal9 = { 0.000, 0.235, 0.227, 1 }, + .cyan0 = { 0.898, 0.969, 0.973, 1 }, + .cyan1 = { 0.761, 0.937, 0.941, 1 }, + .cyan2 = { 0.541, 0.867, 0.886, 1 }, + .cyan3 = { 0.345, 0.796, 0.827, 1 }, + .cyan4 = { 0.173, 0.722, 0.773, 1 }, + .cyan5 = { 0.020, 0.643, 0.714, 1 }, + .cyan6 = { 0.012, 0.525, 0.596, 1 }, + .cyan7 = { 0.004, 0.412, 0.475, 1 }, + .cyan8 = { 0.000, 0.302, 0.357, 1 }, + .cyan9 = { 0.000, 0.196, 0.239, 1 }, + .lightBlue0 = { 0.914, 0.969, 0.992, 1 }, + .lightBlue1 = { 0.788, 0.925, 0.988, 1 }, + .lightBlue2 = { 0.584, 0.847, 0.973, 1 }, + .lightBlue3 = { 0.384, 0.765, 0.961, 1 }, + .lightBlue4 = { 0.188, 0.675, 0.945, 1 }, + .lightBlue5 = { 0.000, 0.584, 0.933, 1 }, + .lightBlue6 = { 0.000, 0.482, 0.792, 1 }, + .lightBlue7 = { 0.000, 0.388, 0.655, 1 }, + .lightBlue8 = { 0.000, 0.294, 0.514, 1 }, + .lightBlue9 = { 0.000, 0.208, 0.373, 1 }, + .blue0 = { 0.918, 0.961, 1.000, 1 }, + .blue1 = { 0.796, 0.906, 0.996, 1 }, + .blue2 = { 0.596, 0.804, 0.992, 1 }, + .blue3 = { 0.396, 0.698, 0.988, 1 }, + .blue4 = { 0.196, 0.584, 0.984, 1 }, + .blue5 = { 0.000, 0.392, 0.980, 1 }, + .blue6 = { 0.000, 0.384, 0.839, 1 }, + .blue7 = { 0.000, 0.310, 0.702, 1 }, + .blue8 = { 0.000, 0.239, 0.561, 1 }, + .blue9 = { 0.000, 0.173, 0.420, 1 }, + .indigo0 = { 0.925, 0.937, 0.973, 1 }, + .indigo1 = { 0.820, 0.847, 0.941, 1 }, + .indigo2 = { 0.655, 0.702, 0.882, 1 }, + .indigo3 = { 0.502, 0.565, 0.827, 1 }, + .indigo4 = { 0.369, 0.435, 0.769, 1 }, + .indigo5 = { 0.247, 0.318, 0.710, 1 }, + .indigo6 = { 0.200, 0.259, 0.631, 1 }, + .indigo7 = { 0.157, 0.204, 0.549, 1 }, + .indigo8 = { 0.122, 0.157, 0.471, 1 }, + .indigo9 = { 0.090, 0.114, 0.388, 1 }, + .violet0 = { 0.953, 0.929, 0.976, 1 }, + .violet1 = { 0.886, 0.820, 0.957, 1 }, + .violet2 = { 0.769, 0.655, 0.914, 1 }, + .violet3 = { 0.651, 0.498, 0.867, 1 }, + .violet4 = { 0.533, 0.357, 0.824, 1 }, + .violet5 = { 0.416, 0.227, 0.780, 1 }, + .violet6 = { 0.341, 0.184, 0.702, 1 }, + .violet7 = { 0.275, 0.145, 0.620, 1 }, + .violet8 = { 0.212, 0.110, 0.541, 1 }, + .violet9 = { 0.157, 0.078, 0.459, 1 }, + .purple0 = { 0.969, 0.914, 0.969, 1 }, + .purple1 = { 0.937, 0.792, 0.941, 1 }, + .purple2 = { 0.867, 0.608, 0.878, 1 }, + .purple3 = { 0.788, 0.435, 0.820, 1 }, + .purple4 = { 0.706, 0.286, 0.761, 1 }, + .purple5 = { 0.620, 0.157, 0.702, 1 }, + .purple6 = { 0.529, 0.118, 0.620, 1 }, + .purple7 = { 0.443, 0.086, 0.541, 1 }, + .purple8 = { 0.361, 0.059, 0.459, 1 }, + .purple9 = { 0.286, 0.039, 0.380, 1 }, + .pink0 = { 0.992, 0.925, 0.937, 1 }, + .pink1 = { 0.984, 0.812, 0.847, 1 }, + .pink2 = { 0.965, 0.627, 0.710, 1 }, + .pink3 = { 0.949, 0.451, 0.588, 1 }, + .pink4 = { 0.929, 0.282, 0.482, 1 }, + .pink5 = { 0.914, 0.118, 0.388, 1 }, + .pink6 = { 0.773, 0.075, 0.337, 1 }, + .pink7 = { 0.635, 0.043, 0.282, 1 }, + .pink8 = { 0.494, 0.020, 0.227, 1 }, + .pink9 = { 0.353, 0.004, 0.169, 1 }, + .grey0 = { 0.976, 0.976, 0.976, 1 }, + .grey1 = { 0.902, 0.910, 0.918, 1 }, + .grey2 = { 0.776, 0.792, 0.804, 1 }, + .grey3 = { 0.655, 0.671, 0.690, 1 }, + .grey4 = { 0.533, 0.553, 0.573, 1 }, + .grey5 = { 0.420, 0.439, 0.459, 1 }, + .grey6 = { 0.333, 0.357, 0.380, 1 }, + .grey7 = { 0.255, 0.275, 0.298, 1 }, + .grey8 = { 0.180, 0.196, 0.220, 1 }, + .grey9 = { 0.110, 0.122, 0.137, 1 }, + .black = { 0, 0, 0, 1 }, + .white = { 1, 1, 1, 1 } +}; + +oc_ui_theme OC_UI_LIGHT_THEME = { + .white = { 1, 1, 1, 1 }, + .primary = { 0.000, 0.392, 0.980, 1 }, // blue5 + .primaryHover = { 0.000, 0.384, 0.839, 1 }, // blue6 + .primaryActive = { 0.000, 0.310, 0.702, 1 }, // blue7 + .fill0 = { 0.180, 0.196, 0.220, 0.05 }, // grey8 + .fill1 = { 0.180, 0.196, 0.220, 0.09 }, // grey8 + .fill2 = { 0.180, 0.196, 0.220, 0.13 }, // grey8 + .bg0 = { 1, 1, 1, 1 }, + .bg1 = { 1, 1, 1, 1 }, + .bg2 = { 1, 1, 1, 1 }, + .bg3 = { 1, 1, 1, 1 }, + .bg4 = { 1, 1, 1, 1 }, + .text0 = { 0.110, 0.122, 0.137, 1 }, // grey9 + .text1 = { 0.110, 0.122, 0.137, 0.8 }, // grey9 + .text2 = { 0.110, 0.122, 0.137, 0.62 }, // grey9 + .text3 = { 0.110, 0.122, 0.137, 0.35 }, // grey9 + .sliderThumbBorder = { 0, 0, 0, 0.075 }, + .elevatedBorder = { 0, 0, 0, 0.075 } +}; \ No newline at end of file diff --git a/src/ui/ui.h b/src/ui/ui.h index 41746ff..bd6c652 100644 --- a/src/ui/ui.h +++ b/src/ui/ui.h @@ -175,6 +175,175 @@ typedef struct oc_ui_style oc_ui_style_mask animationMask; } oc_ui_style; +typedef struct oc_ui_palette +{ + oc_color red0; + oc_color red1; + oc_color red2; + oc_color red3; + oc_color red4; + oc_color red5; + oc_color red6; + oc_color red7; + oc_color red8; + oc_color red9; + oc_color orange0; + oc_color orange1; + oc_color orange2; + oc_color orange3; + oc_color orange4; + oc_color orange5; + oc_color orange6; + oc_color orange7; + oc_color orange8; + oc_color orange9; + oc_color amber0; + oc_color amber1; + oc_color amber2; + oc_color amber3; + oc_color amber4; + oc_color amber5; + oc_color amber6; + oc_color amber7; + oc_color amber8; + oc_color amber9; + oc_color yellow0; + oc_color yellow1; + oc_color yellow2; + oc_color yellow3; + oc_color yellow4; + oc_color yellow5; + oc_color yellow6; + oc_color yellow7; + oc_color yellow8; + oc_color yellow9; + oc_color lime0; + oc_color lime1; + oc_color lime2; + oc_color lime3; + oc_color lime4; + oc_color lime5; + oc_color lime6; + oc_color lime7; + oc_color lime8; + oc_color lime9; + oc_color lightGreen0; + oc_color lightGreen1; + oc_color lightGreen2; + oc_color lightGreen3; + oc_color lightGreen4; + oc_color lightGreen5; + oc_color lightGreen6; + oc_color lightGreen7; + oc_color lightGreen8; + oc_color lightGreen9; + oc_color green0; + oc_color green1; + oc_color green2; + oc_color green3; + oc_color green4; + oc_color green5; + oc_color green6; + oc_color green7; + oc_color green8; + oc_color green9; + oc_color teal0; + oc_color teal1; + oc_color teal2; + oc_color teal3; + oc_color teal4; + oc_color teal5; + oc_color teal6; + oc_color teal7; + oc_color teal8; + oc_color teal9; + oc_color cyan0; + oc_color cyan1; + oc_color cyan2; + oc_color cyan3; + oc_color cyan4; + oc_color cyan5; + oc_color cyan6; + oc_color cyan7; + oc_color cyan8; + oc_color cyan9; + oc_color lightBlue0; + oc_color lightBlue1; + oc_color lightBlue2; + oc_color lightBlue3; + oc_color lightBlue4; + oc_color lightBlue5; + oc_color lightBlue6; + oc_color lightBlue7; + oc_color lightBlue8; + oc_color lightBlue9; + oc_color blue0; + oc_color blue1; + oc_color blue2; + oc_color blue3; + oc_color blue4; + oc_color blue5; + oc_color blue6; + oc_color blue7; + oc_color blue8; + oc_color blue9; + oc_color indigo0; + oc_color indigo1; + oc_color indigo2; + oc_color indigo3; + oc_color indigo4; + oc_color indigo5; + oc_color indigo6; + oc_color indigo7; + oc_color indigo8; + oc_color indigo9; + oc_color violet0; + oc_color violet1; + oc_color violet2; + oc_color violet3; + oc_color violet4; + oc_color violet5; + oc_color violet6; + oc_color violet7; + oc_color violet8; + oc_color violet9; + oc_color purple0; + oc_color purple1; + oc_color purple2; + oc_color purple3; + oc_color purple4; + oc_color purple5; + oc_color purple6; + oc_color purple7; + oc_color purple8; + oc_color purple9; + oc_color pink0; + oc_color pink1; + oc_color pink2; + oc_color pink3; + oc_color pink4; + oc_color pink5; + oc_color pink6; + oc_color pink7; + oc_color pink8; + oc_color pink9; + oc_color grey0; + oc_color grey1; + oc_color grey2; + oc_color grey3; + oc_color grey4; + oc_color grey5; + oc_color grey6; + oc_color grey7; + oc_color grey8; + oc_color grey9; + oc_color black; + oc_color white; +} oc_ui_palette; + +extern oc_ui_palette OC_UI_DARK_PALETTE; +extern oc_ui_palette OC_UI_LIGHT_PALETTE; + typedef struct oc_ui_theme { oc_color white; @@ -193,8 +362,15 @@ typedef struct oc_ui_theme oc_color text1; oc_color text2; oc_color text3; + oc_color sliderThumbBorder; + oc_color elevatedBorder; + + oc_ui_palette *palette; } oc_ui_theme; +extern oc_ui_theme OC_UI_DARK_THEME; +extern oc_ui_theme OC_UI_LIGHT_THEME; + typedef struct oc_ui_tag { u64 hash; @@ -434,6 +610,7 @@ typedef struct oc_ui_context i32 editFirstDisplayedChar; f64 editCursorBlinkStart; + oc_ui_theme* theme; } oc_ui_context; //------------------------------------------------------------------------------------- @@ -447,6 +624,7 @@ ORCA_API void oc_ui_process_event(oc_event* event); ORCA_API void oc_ui_begin_frame(oc_vec2 size, oc_ui_style* defaultStyle, oc_ui_style_mask mask); ORCA_API void oc_ui_end_frame(void); ORCA_API void oc_ui_draw(void); +ORCA_API void oc_ui_set_theme(oc_ui_theme* theme); #define oc_ui_frame(size, style, mask) oc_defer_loop(oc_ui_begin_frame((size), (style), (mask)), oc_ui_end_frame())