From b3dee825e8cf5bcd4a4d56b703ddbd1ccfb867c4 Mon Sep 17 00:00:00 2001
From: Luke Street <luke@street.dev>
Date: Mon, 27 Apr 2026 00:44:01 -0600
Subject: [PATCH] Improve button/option style

---
 files.cmake                 |  2 ++
 src/dusk/ui/button.cpp      | 32 +++++++++-----------------------
 src/dusk/ui/game_option.cpp |  7 +++----
 3 files changed, 14 insertions(+), 27 deletions(-)

diff --git a/files.cmake b/files.cmake
index 7799564f90..0a8df25f3b 100644
--- a/files.cmake
+++ b/files.cmake
@@ -1464,6 +1464,8 @@ set(DUSK_FILES
         src/dusk/imgui/ImGuiAchievements.cpp
         src/dusk/ui/button.hpp
         src/dusk/ui/button.cpp
+        src/dusk/ui/control_surface.hpp
+        src/dusk/ui/control_surface.cpp
         src/dusk/ui/disc_state.hpp
         src/dusk/ui/disc_state.cpp
         src/dusk/ui/element.hpp
diff --git a/src/dusk/ui/button.cpp b/src/dusk/ui/button.cpp
index 69049dc1bf..da513129d7 100644
--- a/src/dusk/ui/button.cpp
+++ b/src/dusk/ui/button.cpp
@@ -1,5 +1,6 @@
 #include "button.hpp"
 
+#include "control_surface.hpp"
 #include "element.hpp"
 #include "focus_border.hpp"
 #include "label.hpp"
@@ -12,15 +13,15 @@
 namespace dusk::ui {
 namespace {
 
-theme::Color variant_color(ButtonVariant variant) {
+ControlSurfaceTone control_surface_tone(ButtonVariant variant) {
     switch (variant) {
     case ButtonVariant::Primary:
-        return theme::Primary;
+        return ControlSurfaceTone::Primary;
     case ButtonVariant::Secondary:
-        return theme::Secondary;
+        return ControlSurfaceTone::Secondary;
     case ButtonVariant::Quiet:
     default:
-        return theme::Elevated;
+        return ControlSurfaceTone::Quiet;
     }
 }
 
@@ -103,11 +104,11 @@ void Button::ProcessEvent(Rml::Event& event) {
         apply_style();
         break;
     case Rml::EventId::Mouseover:
-        m_focused = true;
+        m_hovered = true;
         apply_style();
         break;
     case Rml::EventId::Mouseout:
-        m_focused = false;
+        m_hovered = false;
         apply_style();
         break;
     default:
@@ -135,23 +136,8 @@ void Button::apply_style() {
     }
 
     const bool active = m_hovered || m_focused;
-    const bool isBasic = m_variant == ButtonVariant::Quiet;
-    const Color color = variant_color(m_variant);
-
-    int borderOpacity = isBasic ? 0 : 190;
-    int backgroundOpacity = isBasic ? 0 : 28;
-    int backgroundHoverOpacity = 116;
-    int borderHoverOpacity = isBasic ? backgroundHoverOpacity : 255;
-
-    if (m_variant == ButtonVariant::Quiet) {
-        backgroundHoverOpacity = 68;
-        borderHoverOpacity = 150;
-    }
-
-    m_element->SetProperty("border-color",
-                           rgba(color, active ? borderHoverOpacity : borderOpacity));
-    m_element->SetProperty("background-color",
-                           rgba(color, active ? backgroundHoverOpacity : backgroundOpacity));
+    apply_control_surface_style(m_element, control_surface_style(control_surface_tone(m_variant)),
+                                active);
     m_element->SetProperty("color", rgba(active ? TextActive : Text));
     m_label->SetProperty("color", rgba(active ? TextActive : Text));
     set_focus_border_visible(m_element, m_focused);
diff --git a/src/dusk/ui/game_option.cpp b/src/dusk/ui/game_option.cpp
index 2ada2374d9..8962e47442 100644
--- a/src/dusk/ui/game_option.cpp
+++ b/src/dusk/ui/game_option.cpp
@@ -1,5 +1,6 @@
 #include "game_option.hpp"
 
+#include "control_surface.hpp"
 #include "element.hpp"
 #include "focus_border.hpp"
 #include "label.hpp"
@@ -166,10 +167,8 @@ void GameOption::apply_style() {
     }
 
     const bool active = m_hovered || m_focused;
-    m_element->SetProperty("background-color", active ? theme::rgba(theme::Primary, 52) :
-                                                        theme::rgba(theme::Primary, 0));
-    m_element->SetProperty("border-color", active ? theme::rgba(theme::Primary, 220) :
-                                                    theme::rgba(theme::ElevatedBorder, 42));
+    apply_control_surface_style(m_element, control_surface_style(ControlSurfaceTone::Quiet),
+                                active);
     m_element->SetProperty("color",
                            active ? theme::rgba(theme::TextActive) : theme::rgba(theme::TextDim));
     m_title->SetProperty("color",