zephr/ui: replace styling ui through function arguments with a generic UiStyle struct

game.c

@@ -444,7 +444,11 @@ void draw_bg(void) {
   set_height_constraint(&board_con, window_size.height, UI_CONSTRAINT_FIXED);
 
   // bg
-  draw_quad(&board_con, game.palette.bg_color, 0, ALIGN_TOP_LEFT);
+  UiStyle style = {
+    .bg_color = game.palette.bg_color,
+    .align = ALIGN_TOP_LEFT
+  };
+  draw_quad(&board_con, style);
 
   GlyphInstanceList batch;
   new_glyph_instance_list(&batch, 32);
@@ -475,11 +479,20 @@ void draw_quit_dialog(void) {
   set_y_constraint(&dialog_con, 0, UI_CONSTRAINT_FIXED);
   set_width_constraint(&dialog_con, 1.f, UI_CONSTRAINT_RELATIVE);
   set_height_constraint(&dialog_con, 1.f, UI_CONSTRAINT_RELATIVE);
-  draw_quad(&dialog_con, ColorRGBA(0, 0, 0, 200), 0, ALIGN_CENTER);
+  UiStyle style = {
+    .bg_color = ColorRGBA(0, 0, 0, 200),
+    .align = ALIGN_CENTER,
+  };
+  draw_quad(&dialog_con, style);
 
   set_width_constraint(&dialog_con, 0.4f, UI_CONSTRAINT_RELATIVE);
   set_height_constraint(&dialog_con, 0.2f, UI_CONSTRAINT_RELATIVE);
-  draw_quad(&dialog_con, ColorRGBA(135, 124, 124, 255), 8, ALIGN_CENTER);
+  style = (UiStyle){
+    .bg_color = ColorRGBA(135, 124, 124, 255),
+    .border_radius = 8,
+    .align = ALIGN_CENTER,
+  };
+  draw_quad(&dialog_con, style);
 
   UIConstraints text_con = default_constraints;
   set_parent_constraint(&text_con, &dialog_con);
@@ -494,13 +507,19 @@ void draw_quit_dialog(void) {
   set_height_constraint(&btn_con, 0.25f, UI_CONSTRAINT_RELATIVE);
   set_y_constraint(&btn_con, -0.10f, UI_CONSTRAINT_RELATIVE);
   set_x_constraint(&btn_con, -0.20f, UI_CONSTRAINT_RELATIVE);
-  if (draw_button(&btn_con, mult_color(COLOR_WHITE, 0.9f), "Yes", btn_con.height * 0.20f, ALIGN_BOTTOM_CENTER, BUTTON_STATE_ACTIVE)) {
+  style = (UiStyle){
+    .bg_color = mult_color(COLOR_WHITE, 0.9f),
+    .fg_color = COLOR_BLACK,
+    .border_radius = btn_con.height * 0.2f,
+    .align = ALIGN_BOTTOM_CENTER,
+  };
+  if (draw_button(&btn_con, "Yes", style, BUTTON_STATE_ACTIVE)) {
     zephr_quit();
   }
 
   set_y_constraint(&btn_con, -0.10f, UI_CONSTRAINT_RELATIVE);
   set_x_constraint(&btn_con, 0.20f, UI_CONSTRAINT_RELATIVE);
-  if (draw_button(&btn_con, mult_color(COLOR_WHITE, 0.9f), "No", btn_con.height * 0.20f, ALIGN_BOTTOM_CENTER, BUTTON_STATE_ACTIVE)) {
+  if (draw_button(&btn_con, "No", style, BUTTON_STATE_ACTIVE)) {
     game.quit_dialog = false;
   }
 }
@@ -511,13 +530,22 @@ void draw_help_dialog(void) {
   set_height_constraint(&dialog_con, 1.f, UI_CONSTRAINT_RELATIVE);
   set_x_constraint(&dialog_con, 0, UI_CONSTRAINT_FIXED);
   set_y_constraint(&dialog_con, 0, UI_CONSTRAINT_FIXED);
-  draw_quad(&dialog_con, ColorRGBA(0, 0, 0, 200), 0, ALIGN_CENTER);
+  UiStyle style = {
+    .bg_color = ColorRGBA(0, 0, 0, 200),
+    .align = ALIGN_CENTER,
+  };
+  draw_quad(&dialog_con, style);
 
   UIConstraints content_card_con = default_constraints;
   set_parent_constraint(&content_card_con, &dialog_con);
   set_width_constraint(&content_card_con, 0.4f, UI_CONSTRAINT_RELATIVE);
   set_height_constraint(&content_card_con, 0.33f, UI_CONSTRAINT_RELATIVE);
-  draw_quad(&content_card_con, ColorRGBA(135, 124, 124, 255), 8, ALIGN_CENTER);
+  style = (UiStyle){
+    .bg_color = ColorRGBA(135, 124, 124, 255),
+    .border_radius = 8,
+    .align = ALIGN_CENTER,
+  };
+  draw_quad(&content_card_con, style);
 
   UIConstraints text_con = default_constraints;
   set_parent_constraint(&text_con, &content_card_con);
@@ -538,7 +566,13 @@ void draw_help_dialog(void) {
   set_height_constraint(&btn_con, 1, UI_CONSTRAINT_ASPECT_RATIO);
   set_y_constraint(&btn_con, -24, UI_CONSTRAINT_RELATIVE_PIXELS);
   set_x_constraint(&btn_con, 24, UI_CONSTRAINT_RELATIVE_PIXELS);
-  if (draw_icon_button(&btn_con, mult_color(COLOR_WHITE, 0.8f), game.icon_textures[CLOSE_ICON], btn_con.height * 0.20f, ALIGN_TOP_RIGHT, BUTTON_STATE_ACTIVE)) {
+  style = (UiStyle){
+    .bg_color = mult_color(COLOR_WHITE, 0.8f),
+    .fg_color = ColorRGBA(232, 28, 36, 255),
+    .border_radius = btn_con.height * 0.2f,
+    .align = ALIGN_TOP_RIGHT,
+  };
+  if (draw_icon_button(&btn_con, game.icon_textures[CLOSE_ICON], style, BUTTON_STATE_ACTIVE)) {
     game.help_dialog = false;
   }
 }
@@ -549,13 +583,22 @@ void draw_settings_dialog(void) {
   set_height_constraint(&dialog_con, 1.f, UI_CONSTRAINT_RELATIVE);
   set_x_constraint(&dialog_con, 0, UI_CONSTRAINT_FIXED);
   set_y_constraint(&dialog_con, 0, UI_CONSTRAINT_FIXED);
-  draw_quad(&dialog_con, ColorRGBA(0, 0, 0, 200), 0, ALIGN_CENTER);
+  UiStyle style = {
+    .bg_color = ColorRGBA(0, 0, 0, 200),
+    .align = ALIGN_CENTER,
+  };
+  draw_quad(&dialog_con, style);
 
   UIConstraints content_card_con = default_constraints;
   set_parent_constraint(&content_card_con, &dialog_con);
   set_width_constraint(&content_card_con, 0.55f, UI_CONSTRAINT_RELATIVE);
   set_height_constraint(&content_card_con, 0.6f, UI_CONSTRAINT_RELATIVE);
-  draw_quad(&content_card_con, ColorRGBA(135, 124, 124, 255), 8, ALIGN_CENTER);
+  style = (UiStyle){
+    .bg_color = ColorRGBA(135, 124, 124, 255),
+    .border_radius = 8,
+    .align = ALIGN_CENTER,
+  };
+  draw_quad(&content_card_con, style);
 
   UIConstraints text_con = default_constraints;
   set_parent_constraint(&text_con, &content_card_con);
@@ -621,7 +664,13 @@ void draw_settings_dialog(void) {
   set_y_constraint(&btn_con, 400, UI_CONSTRAINT_RELATIVE_PIXELS);
   set_width_constraint(&btn_con, 150, UI_CONSTRAINT_RELATIVE_PIXELS);
   set_height_constraint(&btn_con, 0.35f, UI_CONSTRAINT_ASPECT_RATIO);
-  if (draw_button(&btn_con, ColorRGBA(201, 146, 126, 255), "Reset", 8.f, ALIGN_TOP_CENTER, BUTTON_STATE_ACTIVE)) {
+  style = (UiStyle){
+    .bg_color = ColorRGBA(201, 146, 126, 255),
+    .fg_color = COLOR_BLACK,
+    .border_radius = 8,
+    .align = ALIGN_TOP_CENTER,
+  };
+  if (draw_button(&btn_con, "Reset", style, BUTTON_STATE_ACTIVE)) {
     reset_palette();
   }
 
@@ -629,7 +678,13 @@ void draw_settings_dialog(void) {
   set_height_constraint(&btn_con, 1, UI_CONSTRAINT_ASPECT_RATIO);
   set_y_constraint(&btn_con, -24, UI_CONSTRAINT_RELATIVE_PIXELS);
   set_x_constraint(&btn_con, 24, UI_CONSTRAINT_RELATIVE_PIXELS);
-  if (draw_icon_button(&btn_con, mult_color(COLOR_WHITE, 0.8f), game.icon_textures[CLOSE_ICON], btn_con.height * 0.20f, ALIGN_TOP_RIGHT, BUTTON_STATE_ACTIVE)) {
+  style = (UiStyle){
+    .bg_color = mult_color(COLOR_WHITE, 0.8f),
+    .fg_color = ColorRGBA(232, 28, 36, 255),
+    .border_radius = btn_con.height * 0.2f,
+    .align = ALIGN_TOP_RIGHT,
+  };
+  if (draw_icon_button(&btn_con, game.icon_textures[CLOSE_ICON], style, BUTTON_STATE_ACTIVE)) {
     game.settings_dialog = false;
   }
 }
@@ -640,13 +695,22 @@ void draw_game_over(void) {
   set_height_constraint(&dialog_con, 1.f, UI_CONSTRAINT_RELATIVE);
   set_x_constraint(&dialog_con, 0, UI_CONSTRAINT_FIXED);
   set_y_constraint(&dialog_con, 0, UI_CONSTRAINT_FIXED);
-  draw_quad(&dialog_con, ColorRGBA(0, 0, 0, (u8)game.game_over_bg_opacity), 0, ALIGN_CENTER);
+  UiStyle style = {
+    .bg_color = ColorRGBA(0, 0, 0, (u8)game.game_over_bg_opacity),
+    .align = ALIGN_CENTER,
+  };
+  draw_quad(&dialog_con, style);
 
   UIConstraints content_card_con = default_constraints;
   set_parent_constraint(&content_card_con, &dialog_con);
   set_width_constraint(&content_card_con, 0.3f, UI_CONSTRAINT_RELATIVE);
   set_height_constraint(&content_card_con, 0.2f, UI_CONSTRAINT_RELATIVE);
-  draw_quad(&content_card_con, ColorRGBA(135, 124, 124, (u8)game.game_over_opacity), 8, ALIGN_CENTER);
+  style = (UiStyle){
+    .bg_color = ColorRGBA(135, 124, 124, (u8)game.game_over_opacity),
+    .border_radius = 8,
+    .align = ALIGN_CENTER,
+  };
+  draw_quad(&content_card_con, style);
 
   UIConstraints text_con = default_constraints;
   set_parent_constraint(&text_con, &content_card_con);
@@ -662,7 +726,12 @@ void draw_game_over(void) {
   set_y_constraint(&btn_con, -24, UI_CONSTRAINT_RELATIVE_PIXELS);
   set_width_constraint(&btn_con, 0.30f, UI_CONSTRAINT_RELATIVE);
   set_height_constraint(&btn_con, 0.3f, UI_CONSTRAINT_ASPECT_RATIO);
-  if (draw_button(&btn_con, ColorRGBA(201, 146, 126, (u8)game.game_over_opacity), "Try Again", 8.f, ALIGN_BOTTOM_CENTER, btn_state)) {
+  style = (UiStyle){
+    .bg_color = ColorRGBA(201, 146, 126, (u8)game.game_over_opacity),
+    .border_radius = 8,
+    .align = ALIGN_BOTTOM_CENTER,
+  };
+  if (draw_button(&btn_con, "Try Again", style, btn_state)) {
     reset_game();
   }
 }
@@ -681,12 +750,18 @@ void draw_ui(void) {
   set_width_constraint(&btn_con, icon_btn_width, UI_CONSTRAINT_RELATIVE_PIXELS);
   set_height_constraint(&btn_con, 1, UI_CONSTRAINT_ASPECT_RATIO);
 
-  if (draw_icon_button(&btn_con, ColorRGBA(201, 146, 126, 255), game.icon_textures[HELP_ICON], btn_con.height * 0.15f, ALIGN_TOP_RIGHT, bg_btns_state)) {
+  UiStyle style = {
+    .bg_color = ColorRGBA(201, 146, 126, 255),
+    .fg_color = ColorRGBA(40, 92, 100, 255),
+    .border_radius = btn_con.height * 0.15f,
+    .align = ALIGN_TOP_RIGHT,
+  };
+  if (draw_icon_button(&btn_con, game.icon_textures[HELP_ICON], style, bg_btns_state)) {
     game.help_dialog = true;
   }
 
   set_x_constraint(&btn_con, -icon_btn_offset - icon_btn_width - icon_btns_padding, UI_CONSTRAINT_RELATIVE_PIXELS);
-  if (draw_icon_button(&btn_con, ColorRGBA(201, 146, 126, 255), game.icon_textures[SETTINGS_ICON], btn_con.height * 0.15f, ALIGN_TOP_RIGHT, bg_btns_state)) {
+  if (draw_icon_button(&btn_con, game.icon_textures[SETTINGS_ICON], style, bg_btns_state)) {
     game.settings_dialog = true;
   }
 
@@ -694,7 +769,13 @@ void draw_ui(void) {
   set_y_constraint(&btn_con, -0.05f, UI_CONSTRAINT_RELATIVE);
   set_width_constraint(&btn_con, 200, UI_CONSTRAINT_RELATIVE_PIXELS);
   set_height_constraint(&btn_con, 65, UI_CONSTRAINT_RELATIVE_PIXELS);
-  if (draw_button(&btn_con, ColorRGBA(201, 172, 126, 255), "New Game", btn_con.height * 0.25f, ALIGN_BOTTOM_CENTER, bg_btns_state)) {
+  style = (UiStyle) {
+    .bg_color = ColorRGBA(201, 172, 126, 255),
+    .fg_color = COLOR_BLACK,
+    .border_radius = btn_con.height * 0.25f,
+    .align = ALIGN_BOTTOM_CENTER,
+  };
+  if (draw_button(&btn_con, "New Game", style, bg_btns_state)) {
     reset_game();
   }
 
@@ -721,8 +802,12 @@ void draw_board(void) {
   set_y_constraint(&board_con, 0.05f, UI_CONSTRAINT_RELATIVE);
   set_height_constraint(&board_con, 0.6f, UI_CONSTRAINT_RELATIVE);
   set_width_constraint(&board_con, 1, UI_CONSTRAINT_ASPECT_RATIO);
-  const float board_border_radius = board_con.width * 0.02f;
+  UiStyle style = {
-  draw_quad(&board_con, game.palette.board_bg_color, board_border_radius, ALIGN_CENTER);
+    .bg_color = game.palette.board_bg_color,
+    .border_radius = board_con.width * 0.02f,
+    .align = ALIGN_CENTER,
+  };
+  draw_quad(&board_con, style);
 
   // empty tiles
   const float tile_padding = board_con.width * 0.02f;
@@ -734,11 +819,16 @@ void draw_board(void) {
   set_height_constraint(&empty_tile_con, tile_height, UI_CONSTRAINT_FIXED);
   set_width_constraint(&empty_tile_con, 1, UI_CONSTRAINT_ASPECT_RATIO);
 
+  style = (UiStyle){
+    .bg_color = mult_color(game.palette.board_bg_color, 0.85f),
+    .border_radius = tile_board_radius,
+    .align = ALIGN_TOP_LEFT,
+  };
   for (int i = 0; i < 4; i++) {
     set_y_constraint(&empty_tile_con, (tile_height + tile_padding) * i + tile_padding, UI_CONSTRAINT_FIXED);
     for (int j = 0; j < 4; j++) {
       set_x_constraint(&empty_tile_con, (tile_height + tile_padding) * j + tile_padding, UI_CONSTRAINT_FIXED);
-      draw_quad(&empty_tile_con, mult_color(game.palette.board_bg_color, 0.85f), tile_board_radius, ALIGN_TOP_LEFT);
+      draw_quad(&empty_tile_con, style);
     }
   }
 
@@ -754,6 +844,11 @@ void draw_board(void) {
     for (int j = 0; j < 4; j++) {
       Tile *tile = &game.board[i][j];
       Color tile_color = get_tile_color(tile->value);
+      UiStyle style = {
+        .bg_color = tile_color,
+        .border_radius = tile_board_radius,
+        .align = ALIGN_TOP_LEFT,
+      };
       char value[16];
       sprintf(value, "%d", tile->value);
       f32 tile_y_pos = (f32)((tile_height + tile_padding) * i + tile_padding + game.board[i][j].anim_y_offset_relative * board_con.height);
@@ -762,7 +857,7 @@ void draw_board(void) {
       set_y_constraint(&tile_con, tile_y_pos, UI_CONSTRAINT_FIXED);
       set_x_constraint(&tile_con, tile_x_pos, UI_CONSTRAINT_FIXED);
       if (tile->value > 0) {
-        draw_quad(&tile_con, tile_color, tile_board_radius, ALIGN_TOP_LEFT);
+        draw_quad(&tile_con, style);
 
         // value text
         set_parent_constraint(&text_con, &tile_con);
@@ -777,13 +872,18 @@ void draw_board(void) {
   if (game.spawning_new_tile) {
     // spawning tile
     Color tile_color = get_tile_color(game.spawning_tile_value);
+    UiStyle style = {
+      .bg_color = tile_color,
+      .border_radius = tile_board_radius,
+      .align = ALIGN_TOP_LEFT,
+    };
     f32 tile_x_pos = (f32)((tile_height + tile_padding) * game.spawning_tile_coords.y + tile_padding) + tile_height / 2 - game.spawning_tile_scale * tile_height / 2;
     f32 tile_y_pos = (f32)((tile_height + tile_padding) * game.spawning_tile_coords.x + tile_padding) + tile_height / 2 - game.spawning_tile_scale * tile_height / 2;
     set_x_constraint(&tile_con, tile_x_pos, UI_CONSTRAINT_FIXED);
     set_y_constraint(&tile_con, tile_y_pos, UI_CONSTRAINT_FIXED);
     set_height_constraint(&tile_con, tile_height * game.spawning_tile_scale, UI_CONSTRAINT_FIXED);
     set_width_constraint(&tile_con, 1, UI_CONSTRAINT_ASPECT_RATIO);
-    draw_quad(&tile_con, tile_color, tile_board_radius, ALIGN_TOP_LEFT);
+    draw_quad(&tile_con, style);
     // value text
     set_parent_constraint(&text_con, &tile_con);
     set_x_constraint(&text_con, 0, UI_CONSTRAINT_FIXED);
@@ -944,7 +1044,7 @@ void update_positions(f64 delta_t) {
 
 
 void handle_keyboard_input(ZephrEvent e) {
-  bool can_move = !game.quit_dialog && !game.help_dialog && !game.animating;
+  bool can_move = !game.quit_dialog && !game.help_dialog && !game.settings_dialog && !game.animating;
 
   if (e.key.mods & ZEPHR_KEY_MOD_CTRL && e.key.code == ZEPHR_KEYCODE_Q) {
     game_attempt_quit();

ui.c

@@ -216,35 +216,34 @@ bool inside_rect(Rect *rect, Vec2 *point) {
   return false;
 }
 
-void draw_quad(UIConstraints *constraints, const Color color, float border_radius, Alignment align) {
+void draw_quad(UIConstraints *constraints, const UiStyle style) {
   use_shader(ui_shader);
 
-  set_vec4f(ui_shader, "aColor", color.r / 255.f, color.g / 255.f, color.b / 255.f, color.a / 255.f);
+  set_vec4f(ui_shader, "aColor", style.bg_color.r / 255.f, style.bg_color.g / 255.f, style.bg_color.b / 255.f, style.bg_color.a / 255.f);
   set_float(ui_shader, "uiWidth", constraints->width);
   set_float(ui_shader, "uiHeight", constraints->height);
-  set_float(ui_shader, "borderRadius", border_radius);
+  set_float(ui_shader, "borderRadius", style.border_radius);
   set_mat4f(ui_shader, "projection", (float *)zephr_ctx->projection.m);
 
-  Vec2f pos = { 0.f, 0.f };
+  Rect rect = {0};
-  Sizef size = { 0.f, 0.f };
 
-  apply_constraints(constraints, &pos, &size);
+  apply_constraints(constraints, &rect.pos, &rect.size);
-  apply_alignment(align, constraints, &pos, size);
+  apply_alignment(style.align, constraints, &rect.pos, rect.size);
 
   // set the positions after applying alignment so children can use them
-  constraints->x = pos.x;
+  constraints->x = rect.pos.x;
-  constraints->y = pos.y;
+  constraints->y = rect.pos.y;
 
   Matrix4x4 model = identity();
-  apply_translation(&model, (Vec2f){-size.width / 2.f, -size.height / 2.f});
+  apply_translation(&model, (Vec2f){-rect.size.width / 2.f, -rect.size.height / 2.f});
   apply_scale(&model, constraints->scale);
-  apply_translation(&model, (Vec2f){size.width / 2.f, size.height / 2.f});
+  apply_translation(&model, (Vec2f){rect.size.width / 2.f, rect.size.height / 2.f});
 
-  apply_translation(&model, (Vec2f){-size.width / 2.f, -size.height / 2.f});
+  apply_translation(&model, (Vec2f){-rect.size.width / 2.f, -rect.size.height / 2.f});
   apply_rotation(&model, to_radians(constraints->rotation));
-  apply_translation(&model, (Vec2f){size.width / 2.f, size.height / 2.f});
+  apply_translation(&model, (Vec2f){rect.size.width / 2.f, rect.size.height / 2.f});
 
-  apply_translation(&model, pos);
+  apply_translation(&model, rect.pos);
 
   set_mat4f(ui_shader, "model", (float *)model.m);
 
@@ -252,14 +251,14 @@ void draw_quad(UIConstraints *constraints, const Color color, float border_radiu
 
   float vertices[6][4] = {
     // bottom left tri
-    {0,              0 + size.height, 0.0, 1.0},
+    {0,                   0 + rect.size.height, 0.0, 1.0},
-    {0,              0,               0.0, 0.0},
+    {0,                   0,                    0.0, 0.0},
-    {0 + size.width, 0,               1.0, 0.0},
+    {0 + rect.size.width, 0,                    1.0, 0.0},
 
     // top right tri
-    {0,              0 + size.height, 0.0, 1.0},
+    {0,                   0 + rect.size.height, 0.0, 1.0},
-    {0 + size.width, 0,               1.0, 0.0},
+    {0 + rect.size.width, 0,                    1.0, 0.0},
-    {0 + size.width, 0 + size.height, 1.0, 1.0},
+    {0 + rect.size.width, 0 + rect.size.height, 1.0, 1.0},
   };
 
   glBindBuffer(GL_ARRAY_BUFFER, ui_vbo);
@@ -271,7 +270,7 @@ void draw_quad(UIConstraints *constraints, const Color color, float border_radiu
   glBindVertexArray(0);
 }
 
-void draw_circle(UIConstraints *constraints, const Color color, Alignment align) {
+void draw_circle(UIConstraints *constraints, const UiStyle style) {
   float radius = 0.f;
 
   if (constraints->width > constraints->height) {
@@ -279,13 +278,17 @@ void draw_circle(UIConstraints *constraints, const Color color, Alignment align)
   } else {
     radius = constraints->width / 2.f;
   }
-  draw_quad(constraints, color, radius, align);
+
+  UiStyle new_style = style;
+  new_style.border_radius = radius;
+
+  draw_quad(constraints, new_style);
 }
 
-void draw_triangle(UIConstraints *constraints, const Color color, Alignment align) {
+void draw_triangle(UIConstraints *constraints, const UiStyle style) {
   use_shader(ui_shader);
 
-  set_vec4f(ui_shader, "aColor", color.r / 255.f, color.g / 255.f, color.b / 255.f, color.a / 255.f);
+  set_vec4f(ui_shader, "aColor", style.bg_color.r / 255.f, style.bg_color.g / 255.f, style.bg_color.b / 255.f, style.bg_color.a / 255.f);
   set_float(ui_shader, "borderRadius", 0.f);
   set_mat4f(ui_shader, "projection", (float *)zephr_ctx->projection.m);
 
@@ -293,7 +296,7 @@ void draw_triangle(UIConstraints *constraints, const Color color, Alignment alig
   Sizef size = { 0.f, 0.f };
 
   apply_constraints(constraints, &pos, &size);
-  apply_alignment(align, constraints, &pos, size);
+  apply_alignment(style.align, constraints, &pos, size);
 
   // set the positions after applying alignment so children can use them
   constraints->x = pos.x;
@@ -390,16 +393,15 @@ void draw_texture(UIConstraints *constraints, const TextureId texture_id, const
   set_bool(ui_shader, "hasTexture", false);
 }
 
-bool draw_button_with_location(const char *file, int line, UIConstraints *constraints, const Color color, const char *text, f32 radius, Alignment align, ButtonState state) {
+bool draw_button_with_location(const char *file, int line, UIConstraints *constraints, const char *text, UiStyle style, ButtonState state) {
   UiIdHash hash = core_fnv_hash32(file, strlen(file), CORE_FNV_HASH32_INIT);
   hash = core_fnv_hash32(&line, sizeof(line), hash);
 
-  Color text_color = COLOR_BLACK;
+  style.fg_color.a = style.bg_color.a;
-  text_color.a = color.a;
   Rect rect = {0};
 
   apply_constraints(constraints, &rect.pos, &rect.size);
-  apply_alignment(align, constraints, &rect.pos, rect.size);
+  apply_alignment(style.align, constraints, &rect.pos, rect.size);
 
   bool is_hovered = inside_rect(&rect, &zephr_ctx->mouse.pos);
   bool left_mouse_pressed = zephr_ctx->mouse.pressed && zephr_ctx->mouse.button == ZEPHR_MOUSE_BUTTON_LEFT;
@@ -424,23 +426,22 @@ bool draw_button_with_location(const char *file, int line, UIConstraints *constr
     zephr_set_cursor(ZEPHR_CURSOR_HAND);
 
     if (left_mouse_pressed) {
-      Color new_color = mult_color(color, 0.8f);
+      style.bg_color = mult_color(style.bg_color, 0.8f);
-      draw_quad(constraints, new_color, radius, align);
+      draw_quad(constraints, style);
     } else {
-      Color new_color = mult_color(color, 0.9f);
+      style.bg_color = mult_color(style.bg_color, 0.9f);
-      draw_quad(constraints, new_color, radius, align);
+      draw_quad(constraints, style);
     }
   } else if (state == BUTTON_STATE_DISABLED) {
     if (is_hovered) {
       zephr_set_cursor(ZEPHR_CURSOR_DISABLED);
     }
 
-    Color new_color = color;
+    style.bg_color.a = 100;
-    new_color.a = 100;
+    style.fg_color.a = 100;
-    text_color.a = 100;
+    draw_quad(constraints, style);
-    draw_quad(constraints, new_color, radius, align);
   } else {
-    draw_quad(constraints, color, radius, align);
+    draw_quad(constraints, style);
   }
 
   if (text) {
@@ -455,7 +456,7 @@ bool draw_button_with_location(const char *file, int line, UIConstraints *constr
 
     // TODO: need to adjust the font size based on the text height
 
-    draw_text(text, font_size, text_constraints, text_color, ALIGN_CENTER);
+    draw_text(text, font_size, text_constraints, style.fg_color, ALIGN_CENTER);
   }
 
   if (clicked && state == BUTTON_STATE_ACTIVE) {
@@ -465,17 +466,16 @@ bool draw_button_with_location(const char *file, int line, UIConstraints *constr
   return false;
 }
 
-bool draw_icon_button_with_location(const char *file, int line, UIConstraints *constraints, Color btn_color, const TextureId icon_tex_id, f32 radius, Alignment align, ButtonState state) {
+bool draw_icon_button_with_location(const char *file, int line, UIConstraints *constraints, const TextureId icon_tex_id, UiStyle style, ButtonState state) {
   CORE_DEBUG_ASSERT(icon_tex_id, "draw_icon_button() requires that you provide an icon texture");
 
   UiIdHash hash = core_fnv_hash32(file, strlen(file), CORE_FNV_HASH32_INIT);
   hash = core_fnv_hash32(&line, sizeof(line), hash);
 
   Rect rect = {0};
-  Color icon_color = COLOR_WHITE;
 
   apply_constraints(constraints, &rect.pos, &rect.size);
-  apply_alignment(align, constraints, &rect.pos, rect.size);
+  apply_alignment(style.align, constraints, &rect.pos, rect.size);
 
   bool is_hovered = inside_rect(&rect, &zephr_ctx->mouse.pos);
   bool left_mouse_pressed = zephr_ctx->mouse.pressed && zephr_ctx->mouse.button == ZEPHR_MOUSE_BUTTON_LEFT;
@@ -500,22 +500,22 @@ bool draw_icon_button_with_location(const char *file, int line, UIConstraints *c
     zephr_set_cursor(ZEPHR_CURSOR_HAND);
 
     if (left_mouse_pressed) {
-      btn_color = mult_color(btn_color, 0.8f);
+      style.bg_color = mult_color(style.bg_color, 0.8f);
-      icon_color = mult_color(icon_color, 0.8f);
+      style.fg_color = mult_color(style.fg_color, 0.8f);
     } else {
-      btn_color = mult_color(btn_color, 0.9f);
+      style.bg_color = mult_color(style.bg_color, 0.9f);
-      icon_color = mult_color(icon_color, 0.9f);
+      style.fg_color = mult_color(style.fg_color, 0.9f);
     }
   } else if (state == BUTTON_STATE_DISABLED) {
     if (is_hovered) {
       zephr_set_cursor(ZEPHR_CURSOR_DISABLED);
     }
 
-    icon_color.a = 100;
+    style.fg_color.a = 100;
-    btn_color.a = 100;
+    style.bg_color.a = 100;
   }
 
-  draw_quad(constraints, btn_color, radius, align);
+  draw_quad(constraints, style);
 
   UIConstraints icon_constraints = default_constraints;
 
@@ -524,7 +524,7 @@ bool draw_icon_button_with_location(const char *file, int line, UIConstraints *c
   set_y_constraint(&icon_constraints, 0, UI_CONSTRAINT_RELATIVE_PIXELS);
   set_width_constraint(&icon_constraints, constraints->width * 0.8f, UI_CONSTRAINT_FIXED);
   set_height_constraint(&icon_constraints, constraints->height * 0.8f, UI_CONSTRAINT_FIXED);
-  draw_texture(&icon_constraints, icon_tex_id, icon_color, 0, ALIGN_CENTER);
+  draw_texture(&icon_constraints, icon_tex_id, style.fg_color, 0, ALIGN_CENTER);
 
   if (clicked && state == BUTTON_STATE_ACTIVE) {
     return true;
@@ -613,12 +613,17 @@ f32 draw_color_picker_slider_with_location(const char *file, int line, UIConstra
   set_width_constraint(&triangle_con, 14, UI_CONSTRAINT_RELATIVE_PIXELS);
   set_height_constraint(&triangle_con, 0.5f, UI_CONSTRAINT_ASPECT_RATIO);
   triangle_con.y += -(triangle_con.height / 2.f);
-  draw_triangle(&triangle_con, COLOR_BLACK, ALIGN_TOP_LEFT);
+  UiStyle tri_style = {
+    .bg_color = COLOR_BLACK,
+    .border_radius = 0,
+    .align = ALIGN_TOP_LEFT,
+  };
+  draw_triangle(&triangle_con, tri_style);
 
   set_x_constraint(&triangle_con, 1, UI_CONSTRAINT_RELATIVE);
   triangle_con.x -= triangle_con.height / 2;
   set_rotation_constraint(&triangle_con, 90);
-  draw_triangle(&triangle_con, COLOR_BLACK, ALIGN_TOP_LEFT);
+  draw_triangle(&triangle_con, tri_style);
 
   return slider_selection;
 }
@@ -708,22 +713,27 @@ Vec2f draw_color_picker_canvas_with_location(const char* file, int line, UIConst
   triangle_con.x -= triangle_con.height;
   triangle_con.y -= triangle_con.height * 2;
   set_rotation_constraint(&triangle_con, 0);
-  draw_triangle(&triangle_con, COLOR_WHITE, ALIGN_TOP_LEFT);
+  UiStyle tri_style = {
+    .bg_color = COLOR_WHITE,
+    .border_radius = 0,
+    .align = ALIGN_TOP_LEFT,
+  };
+  draw_triangle(&triangle_con, tri_style);
 
   triangle_con.x += triangle_con.height * 2;
   triangle_con.y += triangle_con.height * 2;
   set_rotation_constraint(&triangle_con, 90);
-  draw_triangle(&triangle_con, COLOR_WHITE, ALIGN_TOP_LEFT);
+  draw_triangle(&triangle_con, tri_style);
 
   triangle_con.x -= triangle_con.height * 2;
   triangle_con.y += triangle_con.height * 2;
   set_rotation_constraint(&triangle_con, 180);
-  draw_triangle(&triangle_con, COLOR_WHITE, ALIGN_TOP_LEFT);
+  draw_triangle(&triangle_con, tri_style);
 
   triangle_con.x -= triangle_con.height * 2;
   triangle_con.y -= triangle_con.height * 2;
   set_rotation_constraint(&triangle_con, 270);
-  draw_triangle(&triangle_con, COLOR_WHITE, ALIGN_TOP_LEFT);
+  draw_triangle(&triangle_con, tri_style);
 
   return canvas_pos;
 }
@@ -736,7 +746,12 @@ void draw_color_picker_popup(UIConstraints *picker_button_con) {
   set_y_constraint(&popup_con, picker_button_con->height + 20, UI_CONSTRAINT_FIXED);
   set_width_constraint(&popup_con, 450, UI_CONSTRAINT_RELATIVE_PIXELS);
   set_height_constraint(&popup_con, 480, UI_CONSTRAINT_RELATIVE_PIXELS);
-  draw_quad(&popup_con, mult_color(COLOR_WHITE, 0.94f), 8, ALIGN_TOP_LEFT);
+  UiStyle popup_style = {
+    .bg_color = mult_color(COLOR_WHITE, 0.94f),
+    .border_radius = 8,
+    .align = ALIGN_TOP_LEFT,
+  };
+  draw_quad(&popup_con, popup_style);
 
   UIConstraints color_slider_con = default_constraints;
   set_parent_constraint(&color_slider_con, &popup_con);
@@ -757,15 +772,23 @@ void draw_color_picker_popup(UIConstraints *picker_button_con) {
   set_y_constraint(&button_con, -0.05f, UI_CONSTRAINT_RELATIVE);
   set_width_constraint(&button_con, 0.43f, UI_CONSTRAINT_RELATIVE);
   set_height_constraint(&button_con, 0.3f, UI_CONSTRAINT_ASPECT_RATIO);
-  if (draw_button(&button_con, *zephr_ctx->ui.popup_revert_color, "Revert", 4, ALIGN_BOTTOM_LEFT, BUTTON_STATE_ACTIVE)) {
+  UiStyle button_style = {
+    .bg_color = *zephr_ctx->ui.popup_revert_color,
+    .fg_color = COLOR_BLACK,
+    .border_radius = 4,
+    .align = ALIGN_BOTTOM_LEFT,
+  };
+  if (draw_button(&button_con, "Revert", button_style, BUTTON_STATE_ACTIVE)) {
     zephr_ctx->ui.popup_open = false;
   }
 
   Color selected_color = hsv2rgb(slider_selection * 360.f, canvas_pos.x, 1.0f - canvas_pos.y);
 
+  button_style.align = ALIGN_BOTTOM_RIGHT;
   set_x_constraint(&button_con, -0.04f, UI_CONSTRAINT_RELATIVE);
   set_y_constraint(&button_con, -0.05f, UI_CONSTRAINT_RELATIVE);
-  if (draw_button(&button_con, selected_color, "Apply", 4, ALIGN_BOTTOM_RIGHT, BUTTON_STATE_ACTIVE)) {
+  button_style.bg_color = selected_color;
+  if (draw_button(&button_con, "Apply", button_style, BUTTON_STATE_ACTIVE)) {
     *zephr_ctx->ui.popup_revert_color = selected_color;
     zephr_ctx->ui.popup_open = false;
   }
@@ -803,7 +826,12 @@ void draw_color_picker(UIConstraints *constraints, Color *color, Alignment align
     display_color.a = 100;
   }
 
-  draw_quad(&con, display_color, con.width * 0.08f, align);
+  UiStyle style = {
+    .bg_color = display_color,
+    .border_radius = con.width * 0.08f,
+    .align = align,
+  };
+  draw_quad(&con, style);
 
   if (is_hovered && state == BUTTON_STATE_ACTIVE && zephr_ctx->mouse.released && zephr_ctx->mouse.button == ZEPHR_MOUSE_BUTTON_LEFT) {
     zephr_ctx->ui.popup_open = true;

ui.h

@@ -55,6 +55,13 @@ typedef enum ButtonState {
   BUTTON_STATE_DISABLED,
 } ButtonState;
 
+typedef struct UiStyle {
+  Color bg_color;
+  Color fg_color;
+  f32 border_radius;
+  Alignment align;
+} UiStyle;
+
 int init_ui(const char* font_path);
 void set_parent_constraint(UIConstraints *constraints, UIConstraints *parent_constraints);
 void set_x_constraint(UIConstraints *constraints, float value, UIConstraint type);
@@ -62,16 +69,16 @@ void set_y_constraint(UIConstraints *constraints, float value, UIConstraint type
 void set_width_constraint(UIConstraints *constraints, float value, UIConstraint type);
 void set_height_constraint(UIConstraints *constraints, float value, UIConstraint type);
 void set_rotation_constraint(UIConstraints *constraints, float angle_d);
-void apply_constraints(UIConstraints *constraints, Vec2f *pos, Sizef *size);
+void apply_constraints(UIConstraints *constraints, Vec2f *pos, Sizef *size);                // internal
-void apply_alignment(Alignment align, UIConstraints *constraints, Vec2f *pos, Sizef size);
+void apply_alignment(Alignment align, UIConstraints *constraints, Vec2f *pos, Sizef size);  // internal
-bool inside_rect(Rect *rect, Vec2 *point);
+bool inside_rect(Rect *rect, Vec2 *point);                                                  // internal
-void draw_quad(UIConstraints *constraints, const Color color, float border_radius, Alignment align);
+void draw_quad(UIConstraints *constraints, const UiStyle style);
-void draw_circle(UIConstraints *constraints, const Color color, Alignment align);
+void draw_circle(UIConstraints *constraints, const UiStyle style);
-void draw_triangle(UIConstraints *constraints, const Color color, Alignment align);
+void draw_triangle(UIConstraints *constraints, const UiStyle style);
-bool draw_button_with_location(const char* file, int line, UIConstraints *constraints, Color color, const char *text, f32 radius, Alignment align, ButtonState state);
+bool draw_button_with_location(const char* file, int line, UIConstraints *constraints, const char *text, UiStyle style, ButtonState state);
-bool draw_icon_button_with_location(const char* fie, int line, UIConstraints *constraints, Color color, const TextureId icon_tex_id, f32 radius, Alignment align, ButtonState state);
+bool draw_icon_button_with_location(const char* file, int line, UIConstraints *constraints, const TextureId icon_tex_id, UiStyle style, ButtonState state);
 void draw_color_picker_popup(UIConstraints *picker_button_con);
 void draw_color_picker(UIConstraints *constraints, Color *color, Alignment align, ButtonState state);
 
-#define draw_button(constraints, color, text, radius, align, state) draw_button_with_location(__FILE__, __LINE__, constraints, color, text, radius, align, state)
+#define draw_button(constraints, text, style, state) draw_button_with_location(__FILE__, __LINE__, constraints, text, style, state)
-#define draw_icon_button(constraints, color, icon_tex_id, radius, align, state) draw_icon_button_with_location(__FILE__, __LINE__, constraints, color, icon_tex_id, radius, align, state)
+#define draw_icon_button(constraints, icon_tex_id, style, state) draw_icon_button_with_location(__FILE__, __LINE__, constraints, icon_tex_id, style, state)