color table, string_pos_offset

src/app/app.meta.c

@@ -80,7 +80,7 @@ void mt_app(ma_arena_t *arena) {
         { page_up    PageUp      XXX       1   VK_INSERT   XXX      }
         { page_down  PageDown    XXX       1   VK_PRIOR    XXX      }
     ));
-    mtt_serialb(c, h, keys, s8_lit("app_key"));
+    mtt_serial_enum(c, h, keys, s8_lit("app_key"));
 
     ///////////////////////////////
     // generate mappings

src/meta/meta_table_format.c

@@ -169,7 +169,7 @@ fn ast_t *mt_kv(ma_arena_t *arena, s8_t key, s8_t value) {
     return n;
 }
 
-fn void mtt_serialb(sb8_t *c, sb8_t *h, ast_t *table, s8_t decl) {
+fn void mtt_serial_enum(sb8_t *c, sb8_t *h, ast_t *table, s8_t decl) {
     s8_t name_t = s8_printf(c->arena, "%S_t", decl);
 
     ///////////////////////////////

src/ui/ui.c

@@ -201,6 +201,7 @@ fn ui_box_t *ui_build_box_from_string(ui_code_loc_t loc, ui_box_flags_t flags, s
         r2f32_t rect = ui_next_rect(ui_top_lop(), &ui->top->rect, string_size);
         ui_set_rect(box, rect, ui_top_lop());
     }
+    box->string_pos_offset = ui_top_string_pos_offset();
     return box;
 }
 
@@ -268,41 +269,70 @@ fn ui_signal_t ui_signal_from_box(ui_box_t *box) {
     return result;
 }
 
-fn void ui_text_input_draw(ui_box_t *box) {
+fn v2f32_t ui_aligned_text_pos(f32 offset, ui_text_align_t text_align, r2f32_t rect, s8_t string) {
-    r2f32_t rect = box->full_rect;
+    v2f32_t string_size = rn_measure_string(rn_state.main_font, string);
-    f32 appear_t = f32_ease_out_n(f32_clamp01(box->appear_t*8), 10);
+    v2f32_t rect_size = r2f32_get_size(rect);
+    v2f32_t rect_string_diff = v2f32_sub(rect_size, string_size);
+    v2f32_t center_pos = v2f32_divs(rect_string_diff, 2);
+    v2f32_t pos_in_rect = v2f32(0, center_pos.y);
+    if (text_align == ui_text_align_center) {
+        pos_in_rect = center_pos;
+    }
+    v2f32_t pos = v2f32_add(pos_in_rect, rect.min);
+    pos.x += offset;
+    return pos;
+}
 
+typedef struct ui_draw_compute_t ui_draw_compute_t;
+struct ui_draw_compute_t {
+    r2f32_t rect;
+    v4f32_t background_color;
+    v4f32_t border_color;
+    v4f32_t text_color;
+};
+
+fn ui_draw_compute_t ui_draw_compute(ui_box_t *box) {
+    ui_draw_compute_t co = {0};
+
+    co.rect = box->full_rect;
+    f32 appear_t = f32_ease_out_n(f32_clamp01(box->appear_t*8), 10);
     if (!ui_id_is_null(box->id)) {
-        v2f32_t size = v2f32_divs(r2f32_get_size(rect), 2);
+        v2f32_t size = v2f32_muls(r2f32_get_size(co.rect), 0.15f);
-        r2f32_t smaller_rect = r2f32_shrink(rect, size);
+        r2f32_t smaller_rect = r2f32_shrink(co.rect, size);
-        rect = r2f32_lerp(smaller_rect, rect, appear_t);
+        co.rect = r2f32_lerp(smaller_rect, co.rect, appear_t);
     }
 
-    v4f32_t background_color = box->background_color;
+    co.background_color = box->background_color;
-    v4f32_t text_color = box->text_color;
+    co.text_color = box->text_color;
-    v4f32_t border_color = box->border_color;
+    co.border_color = box->border_color;
     if (ui_is_active_box(box)) {
         f32 active_t = f32_ease_out_n(box->active_t, 50.f);
         active_t = f32_clamp01(active_t);
-        background_color = v4f32_lerp(background_color, box->bg_active_color, 1.0);
+        co.background_color = v4f32_lerp(co.background_color, box->bg_active_color, 1.0);
-        text_color = v4f32_lerp(text_color, box->text_active_color, active_t);
+        co.text_color = v4f32_lerp(co.text_color, box->text_active_color, active_t);
     } else if (ui_is_hot_box(box)) {
         f32 hot_t = f32_ease_out_n(box->hot_t, 3.f);
         hot_t = f32_clamp01(hot_t);
-        background_color = v4f32_lerp(background_color, box->bg_hot_color, hot_t);
+        co.background_color = v4f32_lerp(co.background_color, box->bg_hot_color, hot_t);
-        text_color = v4f32_lerp(background_color, box->text_hot_color, hot_t);
+        co.text_color = v4f32_lerp(co.background_color, box->text_hot_color, hot_t);
     } else if (ui_is_focused_box(box)) {
-        background_color = v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.6f, 0.95f, 1.0f});
+        co.background_color = ui_color_table[ui_color_focused_rect_color];
-        text_color = v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.6f, 0.7f, 1.0f});
+        box->flags.draw_rect = true;
+        // co.text_color = v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.6f, 0.7f, 1.0f});
     }
 
-    rn_draw_rect(rect, background_color);
+    return co;
-    rn_draw_rect_border(rect, border_color, box->border_thickness);
+}
+
+fn void ui_text_input_draw(ui_box_t *box) {
+    ui_draw_compute_t co = ui_draw_compute(box);
+
+    rn_draw_rect(co.rect, co.background_color);
 
     ui_text_input_t *ti = box->text_input;
     s8_t string = s8(ti->str, ti->len);
-    v2f32_t pos = ui_aligned_text_pos(box->text_align, rect, string);
+    v2f32_t pos = ui_aligned_text_pos(box->string_pos_offset, box->text_align, co.rect, string);
-    rn_draw_string(rn_state.main_font, pos, text_color, string);
+    rn_draw_string(rn_state.main_font, pos, co.text_color, string);
 
     ti->caret = ui_caret_clamp(ti->caret, 0, (i32)ti->len);
     {
@@ -311,13 +341,29 @@ fn void ui_text_input_draw(ui_box_t *box) {
 
         v2f32_t size_min = rn_measure_string(rn_state.main_font, string_min);
         v2f32_t size_max = rn_measure_string(rn_state.main_font, string_max);
-        r2f32_t selection_rect = r2f32(rect.min.x + size_min.x, rect.min.y, rect.min.x + size_max.x, rect.min.y + ui_em(1));
+        r2f32_t selection_rect = r2f32(co.rect.min.x + size_min.x, co.rect.min.y, co.rect.min.x + size_max.x, co.rect.min.y + ui_em(1));
         rn_draw_rect(selection_rect, v4f32(1,1,1,0.5f));
 
 
         v2f32_t size_front = ti->caret.ifront == 0 ? size_min : size_max;
-        r2f32_t caret_rect = r2f32(rect.min.x + size_front.x, rect.min.y, rect.min.x + size_front.x + 1, rect.min.y + ui_em(1));
+        r2f32_t caret_rect = r2f32(co.rect.min.x + size_front.x, co.rect.min.y, co.rect.min.x + size_front.x + 1, co.rect.min.y + ui_em(1));
-        rn_draw_rect(caret_rect, text_color);
+        rn_draw_rect(caret_rect, co.text_color);
+    }
+    rn_draw_rect_border(co.rect, co.border_color, box->border_thickness);
+}
+
+fn void ui_default_draw_box(ui_box_t *box) {
+    ui_draw_compute_t co = ui_draw_compute(box);
+
+    if (box->flags.draw_rect) {
+        rn_draw_rect(co.rect, co.background_color);
+    }
+    if (box->flags.draw_border) {
+        rn_draw_rect_border(co.rect, co.border_color, box->border_thickness);
+    }
+    if (box->flags.draw_text) {
+        v2f32_t text_pos = ui_aligned_text_pos(box->string_pos_offset, box->text_align, co.rect, box->string);
+        rn_draw_string(rn_state.main_font, text_pos, co.text_color, box->string);
     }
 }
 
@@ -466,14 +512,14 @@ fn ui_signal_t ui__begin_expander(ui_code_loc_t loc, char *str, ...) {
     if ( box->expanded) box->string = s8_printf(tcx.temp, "* %S", box->string);
     if (!box->expanded) box->string = s8_printf(tcx.temp, "> %S", box->string);
     if (box->expanded) {
-        r2f32_cut_left(&ui->top->rect, ui_em(0.5f));
+        ui_push_string_pos_offset(ui_top_string_pos_offset() + ui_em(0.5f));
         ui_push_id(box->id);
     }
     return signal;
 }
 
 fn void ui_end_expander(void) {
-    r2f32_add_left(&ui->top->rect, ui_em(0.5f));
+    ui_pop_string_pos_offset();
     ui_pop_id();
 }
 
@@ -588,60 +634,6 @@ fn void ui_end_build(void) {
     }
 }
 
-fn v2f32_t ui_aligned_text_pos(ui_text_align_t text_align, r2f32_t rect, s8_t string) {
-    v2f32_t string_size = rn_measure_string(rn_state.main_font, string);
-    v2f32_t rect_size = r2f32_get_size(rect);
-    v2f32_t rect_string_diff = v2f32_sub(rect_size, string_size);
-    v2f32_t center_pos = v2f32_divs(rect_string_diff, 2);
-    v2f32_t pos_in_rect = v2f32(0, center_pos.y);
-    if (text_align == ui_text_align_center) {
-        pos_in_rect = center_pos;
-    }
-    v2f32_t pos = v2f32_add(pos_in_rect, rect.min);
-    return pos;
-}
-
-fn void ui_default_draw_box(ui_box_t *box) {
-    r2f32_t rect = box->full_rect;
-    f32 appear_t = f32_ease_out_n(f32_clamp01(box->appear_t*8), 10);
-
-    if (!ui_id_is_null(box->id)) {
-        v2f32_t size = v2f32_divs(r2f32_get_size(rect), 2);
-        r2f32_t smaller_rect = r2f32_shrink(rect, size);
-        rect = r2f32_lerp(smaller_rect, rect, appear_t);
-    }
-
-    v4f32_t background_color = box->background_color;
-    v4f32_t text_color = box->text_color;
-    v4f32_t border_color = box->border_color;
-    if (ui_is_active_box(box)) {
-        f32 active_t = f32_ease_out_n(box->active_t, 50.f);
-        active_t = f32_clamp01(active_t);
-        background_color = v4f32_lerp(background_color, box->bg_active_color, 1.0);
-        text_color = v4f32_lerp(text_color, box->text_active_color, active_t);
-    } else if (ui_is_hot_box(box)) {
-        f32 hot_t = f32_ease_out_n(box->hot_t, 3.f);
-        hot_t = f32_clamp01(hot_t);
-        background_color = v4f32_lerp(background_color, box->bg_hot_color, hot_t);
-        text_color = v4f32_lerp(background_color, box->text_hot_color, hot_t);
-    } else if (ui_is_focused_box(box)) {
-        background_color = v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.6f, 0.95f, 1.0f});
-        text_color = v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.6f, 0.7f, 1.0f});
-    }
-
-
-    if (box->flags.draw_rect) {
-        rn_draw_rect(rect, background_color);
-    }
-    if (box->flags.draw_border) {
-        rn_draw_rect_border(rect, border_color, box->border_thickness);
-    }
-    if (box->flags.draw_text) {
-        v2f32_t pos = ui_aligned_text_pos(box->text_align, rect, box->string);
-        rn_draw_string(rn_state.main_font, pos, text_color, box->string);
-    }
-}
-
 fn void ui__draw_box(app_frame_t *frame, ui_box_t *box) {
     box->final_rect = r2f32_intersect(box->full_rect, ui->clip_rect);
     if (box->custom_draw) {
@@ -899,6 +891,7 @@ fn void ui_serial_type(void *p, type_t *type) {
 fn void ui_demo_init(ma_arena_t *arena) {
     ui = ma_push_type(arena, ui_t);
     ui->box_arena = ma_push_arena(arena, mib(1));
+    ui_init_colors();
 }
 
 gb i32 ui_g_panel = 1;
@@ -924,7 +917,7 @@ fn void ui_demo_update(app_frame_t *frame, mt_tweak_t *tweak_table, i32 tweak_co
 
         if (ui_g_panel == 1) {
             ui_box_t *scroller_box = ui_boxf((ui_box_flags_t){.draw_rect = true, .clip_rect = true}, "scrollbar");
-            ui_set_rect(scroller_box, r2f32_cut_right(&ui->top->rect, ui_em(0.5f)), ui_lop_cut_right);
+            ui_set_rect(scroller_box, r2f32_cut_right(&ui->top->rect, 10 * frame->dpr), ui_lop_cut_right);
 
             ui_box_t *item_box = ui_boxf((ui_box_flags_t){.draw_rect = true, .clip_rect = true}, "item_box");
             ui_set_rect(item_box, r2f32_cut_left(&ui->top->rect, ui_max), ui_lop_cut_left);
@@ -980,7 +973,8 @@ fn void ui_demo_update(app_frame_t *frame, mt_tweak_t *tweak_table, i32 tweak_co
                 // f32 scroller_second = scrollable_space - scroller_percent;
 
                 r2f32_cut_top(&ui->top->rect, scroller_percent * scroller_box_size);
-                ui_box_t *box = ui_build_box_from_id(UILOC, (ui_box_flags_t){.draw_border = true, .draw_rect = true}, ui_idf("slider"));
+                ui_box_t *box = ui_build_box_from_id(UILOC, (ui_box_flags_t){.draw_rect = true}, ui_idf("slider"));
+                box->background_color = v4f32(1,0,1,1);
                 ui_set_rect(box, r2f32_cut_top(&ui->top->rect, scroller_size * scroller_box_size), ui_lop_cut_top);
                 ui_signal_t signal = ui_signal_from_box(box);
                 if (signal.dragging) {

src/ui/ui.gen.c

@@ -1,4 +1,39 @@
 // automatically generated using: C:\dev\wasm\src/ui/ui.meta.c
+
+type_t type__ui_color_t = { type_kind_enum, s8_const_lit("ui_color_t"), sizeof(ui_color_t),
+    .members = (type_member_t[]){
+        {.name = s8_const_lit("ui_color_rect_color"), .value = ui_color_rect_color},
+        {.name = s8_const_lit("ui_color_rect_hot_color"), .value = ui_color_rect_hot_color},
+        {.name = s8_const_lit("ui_color_rect_active_color"), .value = ui_color_rect_active_color},
+        {.name = s8_const_lit("ui_color_border_color"), .value = ui_color_border_color},
+        {.name = s8_const_lit("ui_color_text_color"), .value = ui_color_text_color},
+        {.name = s8_const_lit("ui_color_text_hot_color"), .value = ui_color_text_hot_color},
+        {.name = s8_const_lit("ui_color_text_active_color"), .value = ui_color_text_active_color},
+        {.name = s8_const_lit("ui_color_focused_rect_color"), .value = ui_color_focused_rect_color},
+    },
+    .count = 8,
+};
+gb v4f32_t ui_color_table[] = {
+{0},
+{0},
+{0},
+{0},
+{0},
+{0},
+{0},
+{0},
+};
+
+fn void ui_init_colors(void) {
+ui_color_table[ui_color_rect_color] = v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.2f, 0.95f, 1.0f});
+ui_color_table[ui_color_rect_hot_color] = v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.5f, 0.95f, 1.0f});
+ui_color_table[ui_color_rect_active_color] = v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.5f, 0.95f, 1.0f});
+ui_color_table[ui_color_border_color] = v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.2f, 0.70f, 1.0f});
+ui_color_table[ui_color_text_color] = v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.2f, 0.70f, 1.0f});
+ui_color_table[ui_color_text_hot_color] = v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.4f, 0.70f, 1.0f});
+ui_color_table[ui_color_text_active_color] = v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.5f, 0.70f, 1.0f});
+ui_color_table[ui_color_focused_rect_color] = v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.6f, 0.95f, 1.0f});
+}
 fn void ui_push_id(ui_id_t v) { ui_id_node_t *n = ma_push_type(tcx.temp, ui_id_node_t); n->value = v; SLLS_PUSH(ui->id_stack, n); }
 fn void ui_pop_id(void) { SLLS_POP(ui->id_stack); }
 fn ui_id_t ui_top_id(void) { return ui->id_stack->value; }
@@ -23,6 +58,10 @@ fn void ui_push_padding(f32 v) { ui_f32_node_t *n = ma_push_type(tcx.temp, ui_f3
 fn void ui_pop_padding(void) { SLLS_POP(ui->padding_stack); }
 fn f32 ui_top_padding(void) { return ui->padding_stack->value; }
 #define ui_set_padding(x) defer_block(ui_push_padding(x), ui_pop_padding())
+fn void ui_push_string_pos_offset(f32 v) { ui_f32_node_t *n = ma_push_type(tcx.temp, ui_f32_node_t); n->value = v; SLLS_PUSH(ui->string_pos_offset_stack, n); }
+fn void ui_pop_string_pos_offset(void) { SLLS_POP(ui->string_pos_offset_stack); }
+fn f32 ui_top_string_pos_offset(void) { return ui->string_pos_offset_stack->value; }
+#define ui_set_string_pos_offset(x) defer_block(ui_push_string_pos_offset(x), ui_pop_string_pos_offset())
 fn void ui_push_background_color(v4f32_t v) { ui_v4f32_node_t *n = ma_push_type(tcx.temp, ui_v4f32_node_t); n->value = v; SLLS_PUSH(ui->background_color_stack, n); }
 fn void ui_pop_background_color(void) { SLLS_POP(ui->background_color_stack); }
 fn v4f32_t ui_top_background_color(void) { return ui->background_color_stack->value; }
@@ -59,6 +98,7 @@ assert(ui->border_thickness_stack == NULL);
 assert(ui->text_align_stack == NULL);
 assert(ui->required_size_stack == NULL);
 assert(ui->padding_stack == NULL);
+assert(ui->string_pos_offset_stack == NULL);
 assert(ui->background_color_stack == NULL);
 assert(ui->bg_hot_color_stack == NULL);
 assert(ui->bg_active_color_stack == NULL);
@@ -72,19 +112,21 @@ ui_push_id(ui_idf("root"));
 ui_push_lop(ui_lop_cut_top);
 ui_push_border_thickness(1.0f);
 ui_push_text_align(ui_text_align_left);
-ui_push_background_color(v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.2f, 0.95f, 1.0f}));
+ui_push_string_pos_offset(0);
-ui_push_bg_hot_color(v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.5f, 0.95f, 1.0f}));
+ui_push_background_color(ui_color_table[ui_color_rect_color]);
-ui_push_bg_active_color(v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.5f, 0.95f, 1.0f}));
+ui_push_bg_hot_color(ui_color_table[ui_color_rect_hot_color]);
-ui_push_border_color(v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.2f, 0.7f, 1.0f}));
+ui_push_bg_active_color(ui_color_table[ui_color_rect_active_color]);
-ui_push_text_color(v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.2f, 0.7f, 1.0f}));
+ui_push_border_color(ui_color_table[ui_color_border_color]);
-ui_push_text_hot_color(v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.4f, 0.7f, 1.0f}));
+ui_push_text_color(ui_color_table[ui_color_text_color]);
-ui_push_text_active_color(v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.5f, 0.7f, 1.0f}));
+ui_push_text_hot_color(ui_color_table[ui_color_text_hot_color]);
+ui_push_text_active_color(ui_color_table[ui_color_text_active_color]);
 }
 fn void ui_pop_init_values(void) {
 ui_pop_id();
 ui_pop_lop();
 ui_pop_border_thickness();
 ui_pop_text_align();
+ui_pop_string_pos_offset();
 ui_pop_background_color();
 ui_pop_bg_hot_color();
 ui_pop_bg_active_color();

src/ui/ui.gen.h

@@ -1,4 +1,15 @@
 // automatically generated using: C:\dev\wasm\src/ui/ui.meta.c
+typedef enum {
+ui_color_rect_color,
+ui_color_rect_hot_color,
+ui_color_rect_active_color,
+ui_color_border_color,
+ui_color_text_color,
+ui_color_text_hot_color,
+ui_color_text_active_color,
+ui_color_focused_rect_color,
+ui_color_count,
+} ui_color_t;
 
 typedef struct ui_id_node_t ui_id_node_t; struct ui_id_node_t { ui_id_t value; ui_id_node_t *next; };
 typedef struct ui_lop_node_t ui_lop_node_t; struct ui_lop_node_t { ui_lop_t value; ui_lop_node_t *next; };
@@ -10,6 +21,7 @@ f32 border_thickness;\
 ui_text_align_t text_align;\
 f32 required_size;\
 f32 padding;\
+f32 string_pos_offset;\
 v4f32_t background_color;\
 v4f32_t bg_hot_color;\
 v4f32_t bg_active_color;\
@@ -25,6 +37,7 @@ ui_f32_node_t *border_thickness_stack;\
 ui_text_align_node_t *text_align_stack;\
 ui_f32_node_t *required_size_stack;\
 ui_f32_node_t *padding_stack;\
+ui_f32_node_t *string_pos_offset_stack;\
 ui_v4f32_node_t *background_color_stack;\
 ui_v4f32_node_t *bg_hot_color_stack;\
 ui_v4f32_node_t *bg_active_color_stack;\

src/ui/ui.h

@@ -162,4 +162,4 @@ fn void ui_set_rect(ui_box_t *box, r2f32_t rect, ui_lop_t lop) { box->rect = box
 
 fn ui_id_t ui_id(s8_t string);
 fn ui_id_t ui_idf(char *str, ...);
-fn v2f32_t ui_aligned_text_pos(ui_text_align_t text_align, r2f32_t rect, s8_t string);
+fn v2f32_t ui_aligned_text_pos(f32 string_pos_offset, ui_text_align_t text_align, r2f32_t rect, s8_t string);

src/ui/ui.meta.c

@@ -1,26 +1,50 @@
-// gb_read_only v4f32_t primary_color_global = v4f32_rgba(245, 238, 230, 255);
+fn void mt_ui_colors(ma_arena_t *arena, sb8_t *c, sb8_t *h) {
-// gb_read_only v4f32_t secondary_color_global = v4f32_rgba(255, 248, 227, 255);
+    ast_t *table = mtt_parse(arena, __FILE__, S8_CODE(
-// gb_read_only v4f32_t accent1_color_global = v4f32_rgba(243, 215, 202, 255);
+    { name                    color                                               }
-// gb_read_only v4f32_t accent2_color_global = v4f32_rgba(230, 164, 180, 255);
+    { rect_color         `v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.2f, 0.95f, 1.0f})` }
+    { rect_hot_color     `v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.5f, 0.95f, 1.0f})` }
+    { rect_active_color  `v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.5f, 0.95f, 1.0f})` }
+    { border_color       `v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.2f, 0.70f, 1.0f})` }
+    { text_color         `v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.2f, 0.70f, 1.0f})` }
+    { text_hot_color     `v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.4f, 0.70f, 1.0f})` }
+    { text_active_color  `v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.5f, 0.70f, 1.0f})` }
+    { focused_rect_color `v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.6f, 0.95f, 1.0f})` }
+    { scroller_color     `v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.6f, 0.95f, 1.0f})` }
+    ));
 
+    mtt_serial_enum(c, h, table, s8_lit("ui_color"));
+
+    sb8_stmtf(c, "gb v4f32_t ui_color_table[] = {");
+    for (ast_t *it = table->first; it; it = it->next) {
+        mt_stmtf(c, it, "{0},");
+    }
+    sb8_stmtf(c, "};\n");
+
+    sb8_stmtf(c, "fn void ui_init_colors(void) {");
+    for (ast_t *it = table->first; it; it = it->next) {
+        mt_stmtf(c, it, "ui_color_table[ui_color_@name] = @color;");
+    }
+    sb8_stmtf(c, "}\n");
+}
 
 fn void mt_ui_stacks(ma_arena_t *arena, sb8_t *c, sb8_t *h) {
     ast_t *table = mtt_parse(arena, __FILE__, S8_CODE(
-        // skip = don't include in ui_box_t as field
+    // skip = don't include in ui_box_t as field
-        { type            name               skip init                                 }
+    { type            name               skip init                                         }
-        { ui_id_t         id                 1    `ui_idf("root")`                     }
+    { ui_id_t         id                 1    `ui_idf("root")`                             }
-        { ui_lop_t        lop                1    ui_lop_cut_top                       }
+    { ui_lop_t        lop                1    ui_lop_cut_top                               }
-        { f32             border_thickness   0    1.0f                                 }
+    { f32             border_thickness   0    1.0f                                         }
-        { ui_text_align_t text_align         0    ui_text_align_left                   }
+    { ui_text_align_t text_align         0    ui_text_align_left                           }
-        { f32             required_size      0    x                                    }
+    { f32             required_size      0    x                                            }
-        { f32             padding            0    x                                    }
+    { f32             padding            0    x                                            }
-        { v4f32_t         background_color   0    `v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.2f, 0.95f, 1.0f})`  }
+    { f32             string_pos_offset  0    0                                            }
-        { v4f32_t         bg_hot_color       0    `v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.5f, 0.95f, 1.0f})`  }
+    { v4f32_t         background_color   0    `ui_color_table[ui_color_rect_color]`        }
-        { v4f32_t         bg_active_color    0    `v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.5f, 0.95f, 1.0f})`  }
+    { v4f32_t         bg_hot_color       0    `ui_color_table[ui_color_rect_hot_color]`    }
-        { v4f32_t         border_color       0    `v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.2f, 0.7f, 1.0f})`   }
+    { v4f32_t         bg_active_color    0    `ui_color_table[ui_color_rect_active_color]` }
-        { v4f32_t         text_color         0    `v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.2f, 0.7f, 1.0f})`   }
+    { v4f32_t         border_color       0    `ui_color_table[ui_color_border_color]`      }
-        { v4f32_t         text_hot_color     0    `v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.4f, 0.7f, 1.0f})`   }
+    { v4f32_t         text_color         0    `ui_color_table[ui_color_text_color]`        }
-        { v4f32_t         text_active_color  0    `v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.5f, 0.7f, 1.0f})`   }
+    { v4f32_t         text_hot_color     0    `ui_color_table[ui_color_text_hot_color]`    }
+    { v4f32_t         text_active_color  0    `ui_color_table[ui_color_text_active_color]` }
     ));
 
     ///////////////////////////////
@@ -124,6 +148,7 @@ fn void mt_ui(ma_arena_t *arena) {
     sb8_printf(h, "// automatically generated using: " __FILE__ "\n");
     sb8_printf(c, "// automatically generated using: " __FILE__ "\n");
 
+    mt_ui_colors(arena, c, h);
     mt_ui_stacks(arena, c, h);
 
     os_write_file(mt_cpath(arena), sb8_serial_end(arena, c));