Light UI theme #83
|
|
@ -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
580
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 }
|
||||
};
|
||||
178
src/ui/ui.h
178
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())
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue