hmn
/
orca
5
Fork 2
Code Issues 21 Pull Requests 1 Packages Projects Releases Wiki Activity

Light UI theme

This commit is contained in:
Ilia Demianenko 2023-09-07 13:52:49 -07:00 committed by MartinFouilleul
parent 907f33bc27
commit b4797dcd2d
3 changed files with 660 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
samples/ui/src/main.c
View File

@ -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
{

580
src/ui/ui.c
View File

@ -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 }
};

178
src/ui/ui.h
View File

@ -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())