mirror/BanjoRecomp
1
0
Fork 0
mirror of https://github.com/BanjoRecomp/BanjoRecomp synced 2026-06-12 04:57:11 -04:00
Code Issues Packages Projects Releases Wiki Activity

Refactor color usage for full theming support from one source of truth (#1)

Browse Source 
* Refactor color usage for full theming support from one source of truth

* remove unused components

* remove old commented out font families

* override custom theme in main.cpp
This commit is contained in:
thecozies
2025-07-06 13:56:28 -05:00
committed by GitHub
parent 086a968ead
commit 71dfde0270
39 changed files with 1018 additions and 630 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ui/elements/ui_button.cpp
+63 -46
View File
@@ -20,53 +20,14 @@ namespace recompui {
set_font_style(FontStyle::Normal);
set_font_weight(700);
set_cursor(Cursor::Pointer);
set_color(Color{ 204, 204, 204, 255 });
set_color(ThemeColor::Text);
set_tab_index(TabIndex::Auto);
hover_style.set_color(Color{ 242, 242, 242, 255 });
focus_style.set_color(Color{ 242, 242, 242, 255 });
disabled_style.set_color(Color{ 204, 204, 204, 128 });
hover_disabled_style.set_color(Color{ 242, 242, 242, 128 });
hover_style.set_color(ThemeColor::Text);
focus_style.set_color(ThemeColor::Text);
disabled_style.set_color(ThemeColor::TextDim, 128);
hover_disabled_style.set_color(ThemeColor::Text, 128);
const uint8_t border_opacity = 204;
const uint8_t background_opacity = 13;
const uint8_t border_hover_opacity = 255;
const uint8_t background_hover_opacity = 76;
switch (style) {
case ButtonStyle::Primary: {
set_border_color({ 185, 125, 242, border_opacity });
set_background_color({ 185, 125, 242, background_opacity });
hover_style.set_border_color({ 185, 125, 242, border_hover_opacity });
hover_style.set_background_color({ 185, 125, 242, background_hover_opacity });
focus_style.set_border_color({ 185, 125, 242, border_hover_opacity });
focus_style.set_background_color({ 185, 125, 242, background_hover_opacity });
disabled_style.set_border_color({ 185, 125, 242, border_opacity / 4 });
disabled_style.set_background_color({ 185, 125, 242, background_opacity / 4 });
hover_disabled_style.set_border_color({ 185, 125, 242, border_hover_opacity / 4 });
hover_disabled_style.set_background_color({ 185, 125, 242, background_hover_opacity / 4 });
break;
}
case ButtonStyle::Secondary: {
set_border_color({ 23, 214, 232, border_opacity });
set_background_color({ 23, 214, 232, background_opacity });
hover_style.set_border_color({ 23, 214, 232, border_hover_opacity });
hover_style.set_background_color({ 23, 214, 232, background_hover_opacity });
focus_style.set_border_color({ 23, 214, 232, border_hover_opacity });
focus_style.set_background_color({ 23, 214, 232, background_hover_opacity });
disabled_style.set_border_color({ 23, 214, 232, border_opacity / 4 });
disabled_style.set_background_color({ 23, 214, 232, background_opacity / 4 });
hover_disabled_style.set_border_color({ 23, 214, 232, border_hover_opacity / 4 });
hover_disabled_style.set_background_color({ 23, 214, 232, background_hover_opacity / 4 });
break;
}
default:
assert(false && "Unknown button style.");
break;
}
add_style(&hover_style, hover_state);
add_style(&focus_style, focus_state);
add_style(&disabled_style, disabled_state);
add_style(&hover_disabled_style, { hover_state, disabled_state });
apply_button_style(style);
// transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
}
@@ -111,4 +72,60 @@ namespace recompui {
void Button::add_pressed_callback(std::function<void()> callback) {
pressed_callbacks.emplace_back(callback);
}
};
void Button::apply_button_style(ButtonStyle new_style) {
style = new_style;
switch (style) {
case ButtonStyle::Primary: {
apply_theme_style(ThemeColor::Primary);
break;
}
case ButtonStyle::Secondary: {
apply_theme_style(ThemeColor::Secondary);
break;
}
case ButtonStyle::Tertiary: {
apply_theme_style(ThemeColor::Text);
break;
}
case ButtonStyle::Success: {
apply_theme_style(ThemeColor::Success);
break;
}
case ButtonStyle::Warning: {
apply_theme_style(ThemeColor::Warning);
break;
}
case ButtonStyle::Danger: {
apply_theme_style(ThemeColor::Danger);
break;
}
default:
assert(false && "Unknown button style.");
break;
}
}
void Button::apply_theme_style(recompui::ThemeColor color) {
const uint8_t border_opacity = 204;
const uint8_t background_opacity = 13;
const uint8_t border_hover_opacity = 255;
const uint8_t background_hover_opacity = 77;
set_border_color(color, border_opacity);
set_background_color(color, background_opacity);
hover_style.set_border_color(color, border_hover_opacity);
hover_style.set_background_color(color, background_hover_opacity);
focus_style.set_border_color(color, border_hover_opacity);
focus_style.set_background_color(color, background_hover_opacity);
disabled_style.set_border_color(color, border_opacity / 4);
disabled_style.set_background_color(color, background_opacity / 4);
hover_disabled_style.set_border_color(color, border_hover_opacity / 4);
hover_disabled_style.set_background_color(color, background_hover_opacity / 4);
add_style(&hover_style, hover_state);
add_style(&focus_style, focus_state);
add_style(&disabled_style, disabled_state);
add_style(&hover_disabled_style, { hover_state, disabled_state });
}
};
src/ui/elements/ui_button.h
+9 -2
View File
@@ -6,7 +6,11 @@ namespace recompui {
enum class ButtonStyle {
Primary,
Secondary
Secondary,
Tertiary,
Success,
Warning,
Danger,
};
class Button : public Element {
@@ -28,6 +32,9 @@ namespace recompui {
Style* get_focus_style() { return &focus_style; }
Style* get_disabled_style() { return &disabled_style; }
Style* get_hover_disabled_style() { return &hover_disabled_style; }
void apply_button_style(ButtonStyle new_style);
private:
void apply_theme_style(recompui::ThemeColor color);
};
} // namespace recompui
} // namespace recompui
src/ui/elements/ui_label.cpp
+2 -2
View File
@@ -7,7 +7,7 @@ namespace recompui {
Label::Label(Element *parent, LabelStyle label_style) : Element(parent, 0U, "div", true) {
switch (label_style) {
case LabelStyle::Annotation:
set_color(Color{ 185, 125, 242, 255 });
set_color(ThemeColor::Primary);
set_font_size(18.0f);
set_letter_spacing(2.52f);
set_line_height(18.0f);
@@ -40,4 +40,4 @@ namespace recompui {
set_text(text);
}
};
};
src/ui/elements/ui_radio.cpp
+6 -6
View File
@@ -17,16 +17,16 @@ namespace recompui {
set_line_height(20.0f);
set_font_weight(400);
set_font_style(FontStyle::Normal);
set_border_color(Color{ 242, 242, 242, 0 });
set_border_color(ThemeColor::Text, 0);
set_border_bottom_width(1.0f);
set_color(Color{ 255, 255, 255, 153 });
set_color(ThemeColor::TextInactive);
set_padding_bottom(8.0f);
set_text_transform(TextTransform::Uppercase);
set_height_auto();
hover_style.set_color(Color{ 255, 255, 255, 204 });
checked_style.set_color(Color{ 255, 255, 255, 255 });
checked_style.set_border_color(Color{ 242, 242, 242, 255 });
pulsing_style.set_border_color(Color{ 23, 214, 232, 244 });
hover_style.set_color(ThemeColor::WhiteA80);
checked_style.set_color(ThemeColor::White);
checked_style.set_border_color(ThemeColor::Text);
pulsing_style.set_border_color(ThemeColor::SecondaryA80);
add_style(&hover_style, { hover_state });
add_style(&checked_style, { checked_state });
src/ui/elements/ui_slider.cpp
+6 -6
View File
@@ -93,11 +93,11 @@ namespace recompui {
queue_update();
}
else {
circle_element->set_background_color(Color{ 204, 204, 204, 255 });
circle_element->set_background_color(ThemeColor::TextDim);
}
}
else {
circle_element->set_background_color(Color{ 102, 102, 102, 255 });
circle_element->set_background_color(ThemeColor::BW25);
}
break;
case EventType::Navigate:
@@ -118,12 +118,12 @@ namespace recompui {
if (enable_active) {
set_cursor(Cursor::Pointer);
set_focusable(true);
circle_element->set_background_color(Color{ 204, 204, 204, 255 });
circle_element->set_background_color(ThemeColor::TextDim);
}
else {
set_cursor(Cursor::None);
set_focusable(false);
circle_element->set_background_color(Color{ 102, 102, 102, 255 });
circle_element->set_background_color(ThemeColor::BW25);
}
}
break;
@@ -162,7 +162,7 @@ namespace recompui {
bar_element->set_width(100.0f, Unit::Percent);
bar_element->set_height(2.0f);
bar_element->set_margin_top(8.0f);
bar_element->set_background_color(Color{ 255, 255, 255, 50 });
bar_element->set_background_color(ThemeColor::WhiteA20);
bar_element->add_pressed_callback([this](float x, float y){ bar_pressed(x, y); focus(); });
bar_element->add_dragged_callback([this](float x, float y, recompui::DragPhase phase){ bar_dragged(x, y, phase); focus(); });
@@ -173,7 +173,7 @@ namespace recompui {
circle_element->set_margin_top(-7.0f);
circle_element->set_margin_right(-8.0f);
circle_element->set_margin_left(-8.0f);
circle_element->set_background_color(Color{ 204, 204, 204, 255 });
circle_element->set_background_color(ThemeColor::TextDim);
circle_element->set_border_radius(8.0f);
circle_element->add_pressed_callback([this](float, float){ focus(); });
circle_element->add_dragged_callback([this](float x, float y, recompui::DragPhase phase){ circle_dragged(x, y, phase); focus(); });
src/ui/elements/ui_style.cpp
+38 -1
View File
@@ -388,11 +388,24 @@ namespace recompui {
set_property(Rml::PropertyId::BorderBottomRightRadius, Rml::Property(radius, to_rml(unit)));
}
static Color get_theme_color_with_opacity(ThemeColor color, int opacity) {
Color theme_color = get_theme_color(color);
if (opacity == recompui::ThemeDefaultOpacity) {
opacity = theme_color.a; // Use the existing opacity if not specified.
}
theme_color.a = opacity;
return theme_color;
}
void Style::set_background_color(const Color &color) {
Rml::Property property(Rml::Colourb(color.r, color.g, color.b, color.a), Rml::Unit::COLOUR);
set_property(Rml::PropertyId::BackgroundColor, property);
}
void Style::set_background_color(recompui::ThemeColor color, int opacity) {
set_background_color(get_theme_color_with_opacity(color, opacity));
}
void Style::set_border_color(const Color &color) {
Rml::Property property(Rml::Colourb(color.r, color.g, color.b, color.a), Rml::Unit::COLOUR);
set_property(Rml::PropertyId::BorderTopColor, property);
@@ -401,31 +414,55 @@ namespace recompui {
set_property(Rml::PropertyId::BorderRightColor, property);
}
void Style::set_border_color(recompui::ThemeColor color, int opacity) {
set_border_color(get_theme_color_with_opacity(color, opacity));
}
void Style::set_border_left_color(const Color &color) {
Rml::Property property(Rml::Colourb(color.r, color.g, color.b, color.a), Rml::Unit::COLOUR);
set_property(Rml::PropertyId::BorderLeftColor, property);
}
void Style::set_border_left_color(recompui::ThemeColor color, int opacity) {
set_border_left_color(get_theme_color_with_opacity(color, opacity));
}
void Style::set_border_top_color(const Color &color) {
Rml::Property property(Rml::Colourb(color.r, color.g, color.b, color.a), Rml::Unit::COLOUR);
set_property(Rml::PropertyId::BorderTopColor, property);
}
void Style::set_border_top_color(recompui::ThemeColor color, int opacity) {
set_border_top_color(get_theme_color_with_opacity(color, opacity));
}
void Style::set_border_right_color(const Color &color) {
Rml::Property property(Rml::Colourb(color.r, color.g, color.b, color.a), Rml::Unit::COLOUR);
set_property(Rml::PropertyId::BorderRightColor, property);
}
void Style::set_border_right_color(recompui::ThemeColor color, int opacity) {
set_border_right_color(get_theme_color_with_opacity(color, opacity));
}
void Style::set_border_bottom_color(const Color &color) {
Rml::Property property(Rml::Colourb(color.r, color.g, color.b, color.a), Rml::Unit::COLOUR);
set_property(Rml::PropertyId::BorderBottomColor, property);
}
void Style::set_border_bottom_color(recompui::ThemeColor color, int opacity) {
set_border_bottom_color(get_theme_color_with_opacity(color, opacity));
}
void Style::set_color(const Color &color) {
Rml::Property property(Rml::Colourb(color.r, color.g, color.b, color.a), Rml::Unit::COLOUR);
set_property(Rml::PropertyId::Color, property);
}
void Style::set_color(recompui::ThemeColor color, int opacity) {
set_color(get_theme_color_with_opacity(color, opacity));
}
void Style::set_cursor(Cursor cursor) {
switch (cursor) {
case Cursor::None:
@@ -609,4 +646,4 @@ namespace recompui {
}
} // namespace recompui
} // namespace recompui
src/ui/elements/ui_style.h
+11 -1
View File
@@ -6,8 +6,11 @@
#include "../core/ui_resource.h"
#include "ui_types.h"
#include "ui_theme.h"
namespace recompui {
const int ThemeDefaultOpacity = -1; // Represents using the theme color's existing opacity.
class ContextId;
class Style {
friend class Element; // For access to property_map without making it visible to element subclasses.
@@ -66,6 +69,13 @@ namespace recompui {
void set_border_right_color(const Color &color);
void set_border_bottom_color(const Color &color);
void set_color(const Color &color);
void set_background_color(recompui::ThemeColor color, int opacity = ThemeDefaultOpacity);
void set_border_color(recompui::ThemeColor color, int opacity = ThemeDefaultOpacity);
void set_border_left_color(recompui::ThemeColor color, int opacity = ThemeDefaultOpacity);
void set_border_top_color(recompui::ThemeColor color, int opacity = ThemeDefaultOpacity);
void set_border_right_color(recompui::ThemeColor color, int opacity = ThemeDefaultOpacity);
void set_border_bottom_color(recompui::ThemeColor color, int opacity = ThemeDefaultOpacity);
void set_color(recompui::ThemeColor color, int opacity = ThemeDefaultOpacity);
void set_cursor(Cursor cursor);
void set_opacity(float opacity);
void set_display(Display display);
@@ -105,4 +115,4 @@ namespace recompui {
ResourceId get_resource_id() { return resource_id; }
};
} // namespace recompui
} // namespace recompui
src/ui/elements/ui_text_input.cpp
+1 -1
View File
@@ -33,7 +33,7 @@ namespace recompui {
set_attribute("type", "password");
}
set_min_width(60.0f);
set_border_color(Color{ 242, 242, 242, 255 });
set_border_color(ThemeColor::Text);
set_border_bottom_width(1.0f);
set_padding_bottom(6.0f);
set_focusable(true);
src/ui/elements/ui_theme.cpp
+207
View File
@@ -0,0 +1,207 @@
#include <array>
#include "ui_theme.h"
using ThemeColor = recompui::ThemeColor;
using ThemeColorArray = std::array<recompui::Color, (std::size_t)(ThemeColor::size)>;
using ThemeColorNameArray = std::array<const char *, (std::size_t)(ThemeColor::size)>;
constexpr ThemeColorArray get_default_theme_color_array() {
ThemeColorArray colors;
colors[(std::size_t)ThemeColor::Background1] = recompui::Color{2, 7, 18, 255};
colors[(std::size_t)ThemeColor::Background2] = recompui::Color{7, 15, 34, 255};
colors[(std::size_t)ThemeColor::Background3] = recompui::Color{18, 24, 38, 255};
colors[(std::size_t)ThemeColor::BGOverlay] = recompui::Color{182, 194, 221, 26};
colors[(std::size_t)ThemeColor::ModalOverlay] = recompui::Color{2, 7, 18, 229};
colors[(std::size_t)ThemeColor::BGShadow] = recompui::Color{0, 0, 0, 89};
colors[(std::size_t)ThemeColor::BGShadow2] = recompui::Color{2, 7, 18, 184};
colors[(std::size_t)ThemeColor::Text] = recompui::Color{242, 242, 242, 255};
colors[(std::size_t)ThemeColor::TextActive] = recompui::Color{245, 245, 245, 255};
colors[(std::size_t)ThemeColor::TextDim] = recompui::Color{204, 204, 204, 255};
colors[(std::size_t)ThemeColor::TextInactive] = recompui::Color{255, 255, 255, 153};
colors[(std::size_t)ThemeColor::TextA5] = recompui::Color{242, 242, 242, 13};
colors[(std::size_t)ThemeColor::TextA20] = recompui::Color{242, 242, 242, 51};
colors[(std::size_t)ThemeColor::TextA30] = recompui::Color{242, 242, 242, 77};
colors[(std::size_t)ThemeColor::TextA50] = recompui::Color{242, 242, 242, 128};
colors[(std::size_t)ThemeColor::TextA80] = recompui::Color{242, 242, 242, 204};
colors[(std::size_t)ThemeColor::Primary] = recompui::Color{29, 93, 226, 255};
colors[(std::size_t)ThemeColor::PrimaryL] = recompui::Color{167, 191, 241, 255};
colors[(std::size_t)ThemeColor::PrimaryD] = recompui::Color{0, 38, 117, 255};
colors[(std::size_t)ThemeColor::PrimaryA5] = recompui::Color{29, 93, 226, 13};
colors[(std::size_t)ThemeColor::PrimaryA20] = recompui::Color{29, 93, 226, 51};
colors[(std::size_t)ThemeColor::PrimaryA30] = recompui::Color{29, 93, 226, 77};
colors[(std::size_t)ThemeColor::PrimaryA50] = recompui::Color{29, 93, 226, 128};
colors[(std::size_t)ThemeColor::PrimaryA80] = recompui::Color{29, 93, 226, 204};
colors[(std::size_t)ThemeColor::Secondary] = recompui::Color{247, 158, 8, 255};
colors[(std::size_t)ThemeColor::SecondaryL] = recompui::Color{255, 215, 148, 255};
colors[(std::size_t)ThemeColor::SecondaryD] = recompui::Color{224, 141, 0, 255};
colors[(std::size_t)ThemeColor::SecondaryA5] = recompui::Color{247, 158, 8, 13};
colors[(std::size_t)ThemeColor::SecondaryA20] = recompui::Color{247, 158, 8, 51};
colors[(std::size_t)ThemeColor::SecondaryA30] = recompui::Color{247, 158, 8, 77};
colors[(std::size_t)ThemeColor::SecondaryA50] = recompui::Color{247, 158, 8, 128};
colors[(std::size_t)ThemeColor::SecondaryA80] = recompui::Color{247, 158, 8, 204};
colors[(std::size_t)ThemeColor::Warning] = recompui::Color{255, 254, 0, 255};
colors[(std::size_t)ThemeColor::WarningL] = recompui::Color{255, 254, 143, 255};
colors[(std::size_t)ThemeColor::WarningD] = recompui::Color{197, 163, 2, 255};
colors[(std::size_t)ThemeColor::WarningA5] = recompui::Color{255, 254, 0, 13};
colors[(std::size_t)ThemeColor::WarningA20] = recompui::Color{255, 254, 0, 51};
colors[(std::size_t)ThemeColor::WarningA30] = recompui::Color{255, 254, 0, 77};
colors[(std::size_t)ThemeColor::WarningA50] = recompui::Color{255, 254, 0, 128};
colors[(std::size_t)ThemeColor::WarningA80] = recompui::Color{255, 254, 0, 204};
colors[(std::size_t)ThemeColor::Danger] = recompui::Color{255, 53, 31, 255};
colors[(std::size_t)ThemeColor::DangerL] = recompui::Color{255, 149, 138, 255};
colors[(std::size_t)ThemeColor::DangerD] = recompui::Color{163, 16, 0, 255};
colors[(std::size_t)ThemeColor::DangerA5] = recompui::Color{255, 53, 31, 13};
colors[(std::size_t)ThemeColor::DangerA20] = recompui::Color{255, 53, 31, 51};
colors[(std::size_t)ThemeColor::DangerA30] = recompui::Color{255, 53, 31, 77};
colors[(std::size_t)ThemeColor::DangerA50] = recompui::Color{255, 53, 31, 128};
colors[(std::size_t)ThemeColor::DangerA80] = recompui::Color{255, 53, 31, 204};
colors[(std::size_t)ThemeColor::Success] = recompui::Color{40, 238, 32, 255};
colors[(std::size_t)ThemeColor::SuccessL] = recompui::Color{155, 247, 151, 255};
colors[(std::size_t)ThemeColor::SuccessD] = recompui::Color{18, 157, 12, 255};
colors[(std::size_t)ThemeColor::SuccessA5] = recompui::Color{40, 238, 32, 13};
colors[(std::size_t)ThemeColor::SuccessA20] = recompui::Color{40, 238, 32, 51};
colors[(std::size_t)ThemeColor::SuccessA30] = recompui::Color{40, 238, 32, 77};
colors[(std::size_t)ThemeColor::SuccessA50] = recompui::Color{40, 238, 32, 128};
colors[(std::size_t)ThemeColor::SuccessA80] = recompui::Color{40, 238, 32, 204};
colors[(std::size_t)ThemeColor::Border] = recompui::Color{255, 255, 255, 51};
colors[(std::size_t)ThemeColor::BorderSoft] = recompui::Color{255, 255, 255, 26};
colors[(std::size_t)ThemeColor::BorderHard] = recompui::Color{255, 255, 255, 77};
colors[(std::size_t)ThemeColor::BorderSolid] = recompui::Color{255, 255, 255, 153};
colors[(std::size_t)ThemeColor::Transparent] = recompui::Color{0, 0, 0, 0};
colors[(std::size_t)ThemeColor::A] = recompui::Color{51, 51, 255, 255};
colors[(std::size_t)ThemeColor::AL] = recompui::Color{178, 178, 255, 255};
colors[(std::size_t)ThemeColor::AD] = recompui::Color{32, 32, 172, 255};
colors[(std::size_t)ThemeColor::AA5] = recompui::Color{51, 51, 255, 13};
colors[(std::size_t)ThemeColor::AA20] = recompui::Color{51, 51, 255, 51};
colors[(std::size_t)ThemeColor::AA30] = recompui::Color{51, 51, 255, 77};
colors[(std::size_t)ThemeColor::AA50] = recompui::Color{51, 51, 255, 128};
colors[(std::size_t)ThemeColor::AA80] = recompui::Color{51, 51, 255, 204};
colors[(std::size_t)ThemeColor::White] = recompui::Color{255, 255, 255, 255};
colors[(std::size_t)ThemeColor::WhiteA5] = recompui::Color{255, 255, 255, 13};
colors[(std::size_t)ThemeColor::WhiteA20] = recompui::Color{255, 255, 255, 51};
colors[(std::size_t)ThemeColor::WhiteA30] = recompui::Color{255, 255, 255, 77};
colors[(std::size_t)ThemeColor::WhiteA50] = recompui::Color{255, 255, 255, 128};
colors[(std::size_t)ThemeColor::WhiteA80] = recompui::Color{255, 255, 255, 204};
colors[(std::size_t)ThemeColor::BW05] = recompui::Color{13, 13, 13, 255};
colors[(std::size_t)ThemeColor::BW10] = recompui::Color{26, 26, 26, 255};
colors[(std::size_t)ThemeColor::BW25] = recompui::Color{64, 64, 64, 255};
colors[(std::size_t)ThemeColor::BW50] = recompui::Color{128, 128, 128, 255};
colors[(std::size_t)ThemeColor::BW75] = recompui::Color{191, 191, 191, 255};
colors[(std::size_t)ThemeColor::BW90] = recompui::Color{229, 229, 229, 255};
return colors;
}
constexpr ThemeColorNameArray get_default_theme_color_names() {
ThemeColorNameArray names = {};
names[(std::size_t)ThemeColor::Background1] = "Background1";
names[(std::size_t)ThemeColor::Background2] = "Background2";
names[(std::size_t)ThemeColor::Background3] = "Background3";
names[(std::size_t)ThemeColor::BGOverlay] = "BGOverlay";
names[(std::size_t)ThemeColor::ModalOverlay] = "ModalOverlay";
names[(std::size_t)ThemeColor::BGShadow] = "BGShadow";
names[(std::size_t)ThemeColor::BGShadow2] = "BGShadow2";
names[(std::size_t)ThemeColor::Text] = "Text";
names[(std::size_t)ThemeColor::TextActive] = "TextActive";
names[(std::size_t)ThemeColor::TextDim] = "TextDim";
names[(std::size_t)ThemeColor::TextInactive] = "TextInactive";
names[(std::size_t)ThemeColor::TextA5] = "TextA5";
names[(std::size_t)ThemeColor::TextA20] = "TextA20";
names[(std::size_t)ThemeColor::TextA30] = "TextA30";
names[(std::size_t)ThemeColor::TextA50] = "TextA50";
names[(std::size_t)ThemeColor::TextA80] = "TextA80";
names[(std::size_t)ThemeColor::Primary] = "Primary";
names[(std::size_t)ThemeColor::PrimaryL] = "PrimaryL";
names[(std::size_t)ThemeColor::PrimaryD] = "PrimaryD";
names[(std::size_t)ThemeColor::PrimaryA5] = "PrimaryA5";
names[(std::size_t)ThemeColor::PrimaryA20] = "PrimaryA20";
names[(std::size_t)ThemeColor::PrimaryA30] = "PrimaryA30";
names[(std::size_t)ThemeColor::PrimaryA50] = "PrimaryA50";
names[(std::size_t)ThemeColor::PrimaryA80] = "PrimaryA80";
names[(std::size_t)ThemeColor::Secondary] = "Secondary";
names[(std::size_t)ThemeColor::SecondaryL] = "SecondaryL";
names[(std::size_t)ThemeColor::SecondaryD] = "SecondaryD";
names[(std::size_t)ThemeColor::SecondaryA5] = "SecondaryA5";
names[(std::size_t)ThemeColor::SecondaryA20] = "SecondaryA20";
names[(std::size_t)ThemeColor::SecondaryA30] = "SecondaryA30";
names[(std::size_t)ThemeColor::SecondaryA50] = "SecondaryA50";
names[(std::size_t)ThemeColor::SecondaryA80] = "SecondaryA80";
names[(std::size_t)ThemeColor::Warning] = "Warning";
names[(std::size_t)ThemeColor::WarningL] = "WarningL";
names[(std::size_t)ThemeColor::WarningD] = "WarningD";
names[(std::size_t)ThemeColor::WarningA5] = "WarningA5";
names[(std::size_t)ThemeColor::WarningA20] = "WarningA20";
names[(std::size_t)ThemeColor::WarningA30] = "WarningA30";
names[(std::size_t)ThemeColor::WarningA50] = "WarningA50";
names[(std::size_t)ThemeColor::WarningA80] = "WarningA80";
names[(std::size_t)ThemeColor::Danger] = "Danger";
names[(std::size_t)ThemeColor::DangerL] = "DangerL";
names[(std::size_t)ThemeColor::DangerD] = "DangerD";
names[(std::size_t)ThemeColor::DangerA5] = "DangerA5";
names[(std::size_t)ThemeColor::DangerA20] = "DangerA20";
names[(std::size_t)ThemeColor::DangerA30] = "DangerA30";
names[(std::size_t)ThemeColor::DangerA50] = "DangerA50";
names[(std::size_t)ThemeColor::DangerA80] = "DangerA80";
names[(std::size_t)ThemeColor::Success] = "Success";
names[(std::size_t)ThemeColor::SuccessL] = "SuccessL";
names[(std::size_t)ThemeColor::SuccessD] = "SuccessD";
names[(std::size_t)ThemeColor::SuccessA5] = "SuccessA5";
names[(std::size_t)ThemeColor::SuccessA20] = "SuccessA20";
names[(std::size_t)ThemeColor::SuccessA30] = "SuccessA30";
names[(std::size_t)ThemeColor::SuccessA50] = "SuccessA50";
names[(std::size_t)ThemeColor::SuccessA80] = "SuccessA80";
names[(std::size_t)ThemeColor::Border] = "Border";
names[(std::size_t)ThemeColor::BorderSoft] = "BorderSoft";
names[(std::size_t)ThemeColor::BorderHard] = "BorderHard";
names[(std::size_t)ThemeColor::BorderSolid] = "BorderSolid";
names[(std::size_t)ThemeColor::Transparent] = "Transparent";
names[(std::size_t)ThemeColor::A] = "A";
names[(std::size_t)ThemeColor::AL] = "AL";
names[(std::size_t)ThemeColor::AD] = "AD";
names[(std::size_t)ThemeColor::AA5] = "AA5";
names[(std::size_t)ThemeColor::AA20] = "AA20";
names[(std::size_t)ThemeColor::AA30] = "AA30";
names[(std::size_t)ThemeColor::AA50] = "AA50";
names[(std::size_t)ThemeColor::AA80] = "AA80";
names[(std::size_t)ThemeColor::White] = "White";
names[(std::size_t)ThemeColor::WhiteA5] = "WhiteA5";
names[(std::size_t)ThemeColor::WhiteA20] = "WhiteA20";
names[(std::size_t)ThemeColor::WhiteA30] = "WhiteA30";
names[(std::size_t)ThemeColor::WhiteA50] = "WhiteA50";
names[(std::size_t)ThemeColor::WhiteA80] = "WhiteA80";
names[(std::size_t)ThemeColor::BW05] = "BW05";
names[(std::size_t)ThemeColor::BW10] = "BW10";
names[(std::size_t)ThemeColor::BW25] = "BW25";
names[(std::size_t)ThemeColor::BW50] = "BW50";
names[(std::size_t)ThemeColor::BW75] = "BW75";
names[(std::size_t)ThemeColor::BW90] = "BW90";
return names;
}
static ThemeColorArray theme_colors = get_default_theme_color_array();
static ThemeColorNameArray theme_color_names = get_default_theme_color_names();
void recompui::set_theme_color(ThemeColor color, const recompui::Color &value) {
theme_colors[(std::size_t)color] = value;
}
const recompui::Color &recompui::get_theme_color(recompui::ThemeColor color) {
return theme_colors[(std::size_t)color];
}
const char *recompui::get_theme_color_name(recompui::ThemeColor color) {
return theme_color_names[(std::size_t)color];
}
src/ui/elements/ui_theme.h
+95
View File
@@ -0,0 +1,95 @@
#pragma once
#include "ui_types.h"
namespace recompui {
enum class ThemeColor {
Background1,
Background2,
Background3,
BGOverlay,
ModalOverlay,
BGShadow,
BGShadow2,
Text,
TextActive,
TextDim,
TextInactive,
TextA5,
TextA20,
TextA30,
TextA50,
TextA80,
Primary,
PrimaryL,
PrimaryD,
PrimaryA5,
PrimaryA20,
PrimaryA30,
PrimaryA50,
PrimaryA80,
Secondary,
SecondaryL,
SecondaryD,
SecondaryA5,
SecondaryA20,
SecondaryA30,
SecondaryA50,
SecondaryA80,
Warning,
WarningL,
WarningD,
WarningA5,
WarningA20,
WarningA30,
WarningA50,
WarningA80,
Danger,
DangerL,
DangerD,
DangerA5,
DangerA20,
DangerA30,
DangerA50,
DangerA80,
Success,
SuccessL,
SuccessD,
SuccessA5,
SuccessA20,
SuccessA30,
SuccessA50,
SuccessA80,
Border,
BorderSoft,
BorderHard,
BorderSolid,
Transparent,
A,
AL,
AD,
AA5,
AA20,
AA30,
AA50,
AA80,
White,
WhiteA5,
WhiteA20,
WhiteA30,
WhiteA50,
WhiteA80,
BW05,
BW10,
BW25,
BW50,
BW75,
BW90,
size,
};
const char *get_theme_color_name(recompui::ThemeColor color);
void set_theme_color(ThemeColor color, const recompui::Color &value);
const recompui::Color &get_theme_color(recompui::ThemeColor color);
} // namespace recompui
src/ui/elements/ui_toggle.cpp
+18 -18
View File
@@ -15,19 +15,19 @@ namespace recompui {
set_opacity(0.9f);
set_cursor(Cursor::Pointer);
set_border_width(2.0f);
set_border_color(Color{ 177, 76, 34, 255 });
set_background_color(Color{ 0, 0, 0, 0 });
checked_style.set_border_color(Color{ 34, 177, 76, 255 });
hover_style.set_border_color(Color{ 177, 76, 34, 255 });
hover_style.set_background_color(Color{ 206, 120, 68, 76 });
focus_style.set_border_color(Color{ 177, 76, 34, 255 });
focus_style.set_background_color(Color{ 206, 120, 68, 76 });
checked_hover_style.set_border_color(Color{ 34, 177, 76, 255 });
checked_hover_style.set_background_color(Color{ 68, 206, 120, 76 });
checked_focus_style.set_border_color(Color{ 34, 177, 76, 255 });
checked_focus_style.set_background_color(Color{ 68, 206, 120, 76 });
disabled_style.set_border_color(Color{ 177, 76, 34, 128 });
checked_disabled_style.set_border_color(Color{ 34, 177, 76, 128 });
set_border_color(ThemeColor::DangerD);
set_background_color(ThemeColor::Transparent);
checked_style.set_border_color(ThemeColor::Success);
hover_style.set_border_color(ThemeColor::DangerD);
hover_style.set_background_color(ThemeColor::DangerA30);
focus_style.set_border_color(ThemeColor::DangerD);
focus_style.set_background_color(ThemeColor::DangerA30);
checked_hover_style.set_border_color(ThemeColor::Success);
checked_hover_style.set_background_color(ThemeColor::SuccessA30);
checked_focus_style.set_border_color(ThemeColor::Success);
checked_focus_style.set_background_color(ThemeColor::SuccessA30);
disabled_style.set_border_color(ThemeColor::DangerD, 128);
checked_disabled_style.set_border_color(ThemeColor::SuccessD, 128);
add_style(&checked_style, checked_state);
add_style(&hover_style, hover_state);
add_style(&focus_style, focus_state);
@@ -44,10 +44,10 @@ namespace recompui {
floater->set_width(80.0f);
floater->set_height(64.0f);
floater->set_border_radius(32.0f);
floater->set_background_color(Color{ 177, 76, 34, 255 });
floater_checked_style.set_background_color(Color{ 34, 177, 76, 255 });
floater_disabled_style.set_background_color(Color{ 177, 76, 34, 128 });
floater_disabled_checked_style.set_background_color(Color{ 34, 177, 76, 128 });
floater->set_background_color(ThemeColor::DangerD);
floater_checked_style.set_background_color(ThemeColor::Success);
floater_disabled_style.set_background_color(ThemeColor::DangerD, 128);
floater_disabled_checked_style.set_background_color(ThemeColor::SuccessD, 128);
floater->add_style(&floater_checked_style, checked_state);
floater->add_style(&floater_disabled_style, disabled_state);
floater->add_style(&floater_disabled_checked_style, { checked_state, disabled_state });
@@ -158,4 +158,4 @@ namespace recompui {
void Toggle::add_checked_callback(std::function<void(bool)> callback) {
checked_callbacks.emplace_back(callback);
}
};
};
src/ui/elements/ui_types.h
+3 -1
View File
@@ -1,5 +1,7 @@
#pragma once
#include <string>
#include <string_view>
#include <stdint.h>
#include <variant>
@@ -279,4 +281,4 @@ namespace recompui {
Auto
};
} // namespace recompui
} // namespace recompui
src/ui/ui_color_hack.cpp
+9
View File
@@ -37,6 +37,13 @@ namespace recompui {
html_colours["aqua"] = Rml::Colourb(0, 255, 255);
html_colours["transparent"] = Rml::Colourb(0, 0, 0, 0);
html_colours["whitesmoke"] = Rml::Colourb(245, 245, 245);
for (std::size_t i = 0; i < (std::size_t)recompui::ThemeColor::size; i++) {
const char *color_name = recompui::get_theme_color_name((recompui::ThemeColor)i);
const recompui::Color color_value = recompui::get_theme_color((recompui::ThemeColor)i);
Rml::String color_name_lower = Rml::StringUtilities::ToLower(color_name);
html_colours[color_name_lower] = Rml::Colourb(color_value.r, color_value.g, color_value.b, color_value.a);
}
}
PropertyParserColorHack::~PropertyParserColorHack() {}
@@ -166,6 +173,8 @@ namespace recompui {
PropertyParserColorHack* new_parser = new PropertyParserColorHack();
// Copy the allocated object into the color parser pointer to overwrite its vtable.
memcpy((void*)Rml::StyleSheetSpecification::GetParser("color"), (void*)new_parser, sizeof(*new_parser));
// TODO: Register the new parser with RmlUi when RmlUi supports custom parsers overrides.
// Rml::StyleSheetSpecification::RegisterParser("color", new_parser);
}
ColourMap PropertyParserColorHack::html_colours{};
src/ui/ui_config.cpp
+4 -4
View File
@@ -200,8 +200,8 @@ void close_config_menu() {
graphics_model_handle.DirtyAllVariables();
close_config_menu_impl();
},
recompui::ButtonVariant::Success,
recompui::ButtonVariant::Error,
recompui::ButtonStyle::Success,
recompui::ButtonStyle::Danger,
true,
"config__close-menu-button"
);
@@ -221,8 +221,8 @@ void banjo::open_quit_game_prompt() {
ultramodern::quit();
},
[]() {},
recompui::ButtonVariant::Error,
recompui::ButtonVariant::Tertiary,
recompui::ButtonStyle::Danger,
recompui::ButtonStyle::Tertiary,
true,
"config__quit-game-button"
);
src/ui/ui_mod_details_panel.cpp
+6 -6
View File
@@ -11,7 +11,7 @@ ModDetailsPanel::ModDetailsPanel(Element *parent) : Element(parent) {
set_height(100.0f, Unit::Percent);
set_display(Display::Flex);
set_flex_direction(FlexDirection::Column);
set_background_color(Color{ 190, 184, 219, 25 });
set_background_color(ThemeColor::BGOverlay);
ContextId context = get_current_context();
@@ -19,9 +19,9 @@ ModDetailsPanel::ModDetailsPanel(Element *parent) : Element(parent) {
header_container->set_flex(0.0f, 0.0f);
header_container->set_padding(16.0f);
header_container->set_gap(16.0f);
header_container->set_background_color(Color{ 0, 0, 0, 89 });
header_container->set_background_color(ThemeColor::BGShadow);
header_container->set_border_bottom_width(1.1f);
header_container->set_border_bottom_color(Color{ 255, 255, 255, 25 });
header_container->set_border_bottom_color(ThemeColor::BorderSoft);
{
thumbnail_container = context.create_element<Container>(header_container, FlexDirection::Column, JustifyContent::SpaceEvenly);
thumbnail_container->set_flex(0.0f, 0.0f);
@@ -29,7 +29,7 @@ ModDetailsPanel::ModDetailsPanel(Element *parent) : Element(parent) {
thumbnail_image = context.create_element<Image>(thumbnail_container, "");
thumbnail_image->set_width(100.0f);
thumbnail_image->set_height(100.0f);
thumbnail_image->set_background_color(Color{ 190, 184, 219, 25 });
thumbnail_image->set_background_color(ThemeColor::BGOverlay);
}
header_details_container = context.create_element<Container>(header_container, FlexDirection::Column, JustifyContent::SpaceEvenly);
@@ -56,8 +56,8 @@ ModDetailsPanel::ModDetailsPanel(Element *parent) : Element(parent) {
buttons_container->set_padding(16.0f);
buttons_container->set_justify_content(JustifyContent::SpaceBetween);
buttons_container->set_border_top_width(1.1f);
buttons_container->set_border_top_color(Color{ 255, 255, 255, 25 });
buttons_container->set_background_color(Color{ 0, 0, 0, 89 });
buttons_container->set_border_top_color(ThemeColor::BorderSoft);
buttons_container->set_background_color(ThemeColor::BGShadow);
{
enable_container = context.create_element<Container>(buttons_container, FlexDirection::Row, JustifyContent::FlexStart);
enable_container->set_align_items(AlignItems::Center);
src/ui/ui_mod_menu.cpp
+15 -18
View File
@@ -27,9 +27,6 @@ static bool is_mod_enabled_or_auto(const std::string &mod_id) {
}
// ModEntryView
#define COL_TEXT_DEFAULT 242, 242, 242
#define COL_TEXT_DIM 204, 204, 204
#define COL_SECONDARY 23, 214, 232
constexpr float modEntryHeight = 120.0f;
constexpr float modEntryPadding = 4.0f;
@@ -45,17 +42,17 @@ ModEntryView::ModEntryView(Element *parent) : Element(parent, Events(EventType::
set_height_auto();
set_padding(modEntryPadding);
set_border_left_width(2.0f);
set_border_color(Color{ COL_TEXT_DEFAULT, 12 });
set_background_color(Color{ COL_TEXT_DEFAULT, 12 });
set_border_color(ThemeColor::BorderSoft);
set_background_color(ThemeColor::BorderSoft);
set_cursor(Cursor::Pointer);
set_color(Color{ COL_TEXT_DEFAULT, 255 });
set_color(ThemeColor::Text);
checked_style.set_border_color(Color{ COL_TEXT_DEFAULT, 160 });
checked_style.set_color(Color{ 255, 255, 255, 255 });
checked_style.set_background_color(Color{ 26, 24, 32, 255 });
hover_style.set_border_color(Color{ COL_TEXT_DEFAULT, 64 });
checked_hover_style.set_border_color(Color{ COL_TEXT_DEFAULT, 255 });
pulsing_style.set_border_color(Color{ 23, 214, 232, 244 });
checked_style.set_border_color(ThemeColor::BorderSolid);
checked_style.set_color(ThemeColor::White);
checked_style.set_background_color(recompui::ThemeColor::Background3);
hover_style.set_border_color(ThemeColor::BorderHard);
checked_hover_style.set_border_color(ThemeColor::Text);
pulsing_style.set_border_color(ThemeColor::SecondaryA80);
{
thumbnail_image = context.create_element<Image>(this, "");
@@ -63,7 +60,7 @@ ModEntryView::ModEntryView(Element *parent) : Element(parent, Events(EventType::
thumbnail_image->set_height(modEntryHeight);
thumbnail_image->set_min_width(modEntryHeight);
thumbnail_image->set_min_height(modEntryHeight);
thumbnail_image->set_background_color(Color{ 190, 184, 219, 25 });
thumbnail_image->set_background_color(ThemeColor::BGOverlay);
body_container = context.create_element<Element>(this);
@@ -78,7 +75,7 @@ ModEntryView::ModEntryView(Element *parent) : Element(parent, Events(EventType::
name_label = context.create_element<Label>(body_container, LabelStyle::Normal);
description_label = context.create_element<Label>(body_container, LabelStyle::Small);
description_label->set_margin_top(4.0f);
description_label->set_color(Color{ COL_TEXT_DIM, 255 });
description_label->set_color(ThemeColor::TextDim);
} // body_container
} // this
@@ -653,7 +650,7 @@ ModMenu::ModMenu(Element *parent) : Element(parent) {
list_container->set_flex_basis(100.0f);
list_container->set_align_items(AlignItems::Center);
list_container->set_height(100.0f, Unit::Percent);
list_container->set_background_color(Color{ 0, 0, 0, 89 });
list_container->set_background_color(ThemeColor::BGShadow);
list_container->set_border_bottom_left_radius(16.0f);
{
list_scroll_container = context.create_element<ScrollContainer>(list_container, ScrollDirection::Vertical);
@@ -676,9 +673,9 @@ ModMenu::ModMenu(Element *parent) : Element(parent) {
footer_container = context.create_element<Container>(this, FlexDirection::Row, JustifyContent::FlexStart);
footer_container->set_width(100.0f, recompui::Unit::Percent);
footer_container->set_align_items(recompui::AlignItems::Center);
footer_container->set_background_color(Color{ 0, 0, 0, 89 });
footer_container->set_background_color(ThemeColor::BGShadow);
footer_container->set_border_top_width(1.1f);
footer_container->set_border_top_color(Color{ 255, 255, 255, 25 });
footer_container->set_border_top_color(ThemeColor::BorderSoft);
footer_container->set_padding(20.0f);
footer_container->set_gap(20.0f);
footer_container->set_border_bottom_left_radius(16.0f);
@@ -691,7 +688,7 @@ ModMenu::ModMenu(Element *parent) : Element(parent) {
Element* footer_spacer = context.create_element<Element>(footer_container);
footer_spacer->set_flex(1.0f, 0.0f);
refresh_button = context.create_element<Button>(footer_container, "Refresh", recompui::ButtonStyle::Primary);
refresh_button = context.create_element<Button>(footer_container, "Refresh", recompui::ButtonStyle::Tertiary);
refresh_button->add_pressed_callback([this](){ refresh_mods(true); });
refresh_button->set_nav_manual(NavDirection::Up, mod_tab_id);
src/ui/ui_prompt.cpp
+13 -87
View File
@@ -61,10 +61,10 @@ void recompui::init_prompt_context() {
Element* window = context.create_element<Element>(context.get_root_element());
window->set_display(Display::Flex);
window->set_flex_direction(FlexDirection::Column);
window->set_background_color({0, 0, 0, 0});
window->set_background_color(ThemeColor::Transparent);
Element* prompt_overlay = context.create_element<Element>(window);
prompt_overlay->set_background_color(Color{ 190, 184, 219, 25 });
prompt_overlay->set_background_color(ThemeColor::BGOverlay);
prompt_overlay->set_position(Position::Absolute);
prompt_overlay->set_top(0);
prompt_overlay->set_right(0);
@@ -93,8 +93,8 @@ void recompui::init_prompt_context() {
prompt_content->set_margin_auto();
prompt_content->set_border_width(1.1, Unit::Dp);
prompt_content->set_border_radius(16, Unit::Dp);
prompt_content->set_border_color(Color{ 255, 255, 255, 51 });
prompt_content->set_background_color(Color{ 8, 7, 13, 229 });
prompt_content->set_border_color(ThemeColor::WhiteA20);
prompt_content->set_background_color(ThemeColor::ModalOverlay);
prompt_state.prompt_header = context.create_element<Label>(prompt_content, "", LabelStyle::Large);
prompt_state.prompt_header->set_margin(24, Unit::Dp);
@@ -113,103 +113,29 @@ void recompui::init_prompt_context() {
prompt_state.prompt_controls->set_padding_left(12, Unit::Dp);
prompt_state.prompt_controls->set_padding_right(12, Unit::Dp);
prompt_state.prompt_controls->set_border_top_width(1.1, Unit::Dp);
prompt_state.prompt_controls->set_border_top_color({ 255, 255, 255, 25 });
prompt_state.prompt_controls->set_border_top_color(ThemeColor::BorderSoft);
prompt_state.confirm_button = context.create_element<Button>(prompt_state.prompt_controls, "", ButtonStyle::Primary);
prompt_state.confirm_button = context.create_element<Button>(prompt_state.prompt_controls, "", ButtonStyle::Success);
prompt_state.confirm_button->set_min_width(185.0f, Unit::Dp);
prompt_state.confirm_button->set_margin_top(0);
prompt_state.confirm_button->set_margin_bottom(0);
prompt_state.confirm_button->set_margin_left(12, Unit::Dp);
prompt_state.confirm_button->set_margin_right(12, Unit::Dp);
prompt_state.confirm_button->set_text_align(TextAlign::Center);
prompt_state.confirm_button->set_color(Color{ 204, 204, 204, 255 });
prompt_state.confirm_button->add_pressed_callback(run_confirm_callback);
Style* confirm_hover_style = prompt_state.confirm_button->get_hover_style();
confirm_hover_style->set_border_color(Color{ 69, 208, 67, 255 });
confirm_hover_style->set_background_color(Color{ 69, 208, 67, 76 });
confirm_hover_style->set_color(Color{ 242, 242, 242, 255 });
Style* confirm_focus_style = prompt_state.confirm_button->get_focus_style();
confirm_focus_style->set_border_color(Color{ 69, 208, 67, 255 });
confirm_focus_style->set_background_color(Color{ 69, 208, 67, 76 });
confirm_focus_style->set_color(Color{ 242, 242, 242, 255 });
prompt_state.cancel_button = context.create_element<Button>(prompt_state.prompt_controls, "", ButtonStyle::Primary);
prompt_state.cancel_button = context.create_element<Button>(prompt_state.prompt_controls, "", ButtonStyle::Danger);
prompt_state.cancel_button->set_min_width(185.0f, Unit::Dp);
prompt_state.cancel_button->set_margin_top(0);
prompt_state.cancel_button->set_margin_bottom(0);
prompt_state.cancel_button->set_margin_left(12, Unit::Dp);
prompt_state.cancel_button->set_margin_right(12, Unit::Dp);
prompt_state.cancel_button->set_text_align(TextAlign::Center);
prompt_state.cancel_button->set_color(Color{ 204, 204, 204, 255 });
prompt_state.cancel_button->add_pressed_callback(run_cancel_callback);
Style* cancel_hover_style = prompt_state.cancel_button->get_hover_style();
cancel_hover_style->set_border_color(Color{ 248, 96, 57, 255 });
cancel_hover_style->set_background_color(Color{ 248, 96, 57, 76 });
cancel_hover_style->set_color(Color{ 242, 242, 242, 255 });
Style* cancel_focus_style = prompt_state.cancel_button->get_focus_style();
cancel_focus_style->set_border_color(Color{ 248, 96, 57, 255 });
cancel_focus_style->set_background_color(Color{ 248, 96, 57, 76 });
cancel_focus_style->set_color(Color{ 242, 242, 242, 255 });
context.close();
}
void style_button(recompui::Button* button, recompui::ButtonVariant variant) {
recompui::Color button_color{};
switch (variant) {
case recompui::ButtonVariant::Primary:
button_color = { 185, 125, 242, 255 };
break;
case recompui::ButtonVariant::Secondary:
button_color = { 23, 214, 232, 255 };
break;
case recompui::ButtonVariant::Tertiary:
button_color = { 242, 242, 242, 255 };
break;
case recompui::ButtonVariant::Success:
button_color = { 69, 208, 67, 255 };
break;
case recompui::ButtonVariant::Error:
button_color = { 248, 96, 57, 255 };
break;
case recompui::ButtonVariant::Warning:
button_color = { 233, 205, 53, 255 };
break;
default:
assert(false);
break;
}
recompui::Color border_color = button_color;
recompui::Color background_color = button_color;
border_color.a = 0.8f * 255;
background_color.a = 0.05f * 255;
button->set_border_color(border_color);
button->set_background_color(background_color);
recompui::Color hover_border_color = button_color;
recompui::Color hover_background_color = button_color;
hover_border_color.a = 255;
hover_background_color.a = 0.3f * 255;
recompui::Style* hover_style = button->get_hover_style();
hover_style->set_border_color(hover_border_color);
hover_style->set_background_color(hover_background_color);
recompui::Style* focus_style = button->get_focus_style();
focus_style->set_border_color(hover_border_color);
focus_style->set_background_color(hover_background_color);
recompui::Color disabled_color { 255, 255, 255, 0.6f * 255 };
recompui::Style* disabled_style = button->get_disabled_style();
disabled_style->set_color(disabled_color);
}
// Must be called while prompt_state.mutex is locked.
void show_prompt(std::function<void()>& prev_cancel_action, bool focus_on_cancel) {
if (focus_on_cancel) {
@@ -237,8 +163,8 @@ void recompui::open_choice_prompt(
const std::string& cancel_label_text,
std::function<void()> confirm_action,
std::function<void()> cancel_action,
ButtonVariant confirm_variant,
ButtonVariant cancel_variant,
ButtonStyle confirm_variant,
ButtonStyle cancel_variant,
bool focus_on_cancel,
const std::string& return_element_id
) {
@@ -261,8 +187,8 @@ void recompui::open_choice_prompt(
prompt_state.cancel_action = cancel_action;
prompt_state.return_element_id = return_element_id;
style_button(prompt_state.confirm_button, confirm_variant);
style_button(prompt_state.cancel_button, cancel_variant);
prompt_state.confirm_button->apply_button_style(confirm_variant);
prompt_state.cancel_button->apply_button_style(cancel_variant);
prompt_state.ui_context.close();
@@ -278,7 +204,7 @@ void recompui::open_info_prompt(
const std::string& content_text,
const std::string& okay_label_text,
std::function<void()> okay_action,
ButtonVariant okay_variant,
ButtonStyle okay_variant,
const std::string& return_element_id
) {
std::lock_guard lock{ prompt_state.mutex };
@@ -299,7 +225,7 @@ void recompui::open_info_prompt(
prompt_state.cancel_action = okay_action;
prompt_state.return_element_id = return_element_id;
style_button(prompt_state.cancel_button, okay_variant);
prompt_state.cancel_button->apply_button_style(okay_variant);
prompt_state.ui_context.close();
src/ui/ui_state.cpp
+5 -4
View File
@@ -198,7 +198,7 @@ public:
recompui::register_custom_elements();
Rml::Initialise();
// Apply the hack to replace RmlUi's default color parser with one that conforms to HTML5 alpha parsing for SASS compatibility
recompui::apply_color_hack();
@@ -220,6 +220,7 @@ public:
{"LatoLatin-Italic.ttf", false},
{"LatoLatin-Bold.ttf", false},
{"LatoLatin-BoldItalic.ttf", false},
{"Suplexmentary Comic NC.ttf", false},
{"NotoEmoji-Regular.ttf", true},
{"promptfont/promptfont.ttf", false},
};
@@ -913,7 +914,7 @@ void recompui::drop_files(const std::list<std::filesystem::path> &file_list) {
return lhs.empty() ? rhs : lhs + '\n' + rhs;
});
recompui::open_info_prompt("Error Installing Mods", error_label, "OK", {}, recompui::ButtonVariant::Tertiary);
recompui::open_info_prompt("Error Installing Mods", error_label, "OK", {}, recompui::ButtonStyle::Tertiary);
std::vector<std::string> dummy_error_messages{};
ModInstaller::cancel_mod_installation(result, dummy_error_messages);
return;
@@ -1001,8 +1002,8 @@ void recompui::drop_files(const std::list<std::filesystem::path> &file_list) {
ModInstaller::cancel_mod_installation(result, error_messages);
// TODO show errors
},
recompui::ButtonVariant::Success,
recompui::ButtonVariant::Error,
recompui::ButtonStyle::Success,
recompui::ButtonStyle::Danger,
true,
""
);
src/ui/ui_utils.cpp
+6 -1
View File
@@ -1,6 +1,7 @@
#include "ultramodern/ultramodern.hpp"
#include "ui_utils.h"
#include "elements/ui_theme.h"
recompui::Color recompui::lerp_color(const recompui::Color& a, const recompui::Color& b, float factor) {
return recompui::Color{
@@ -16,5 +17,9 @@ recompui::Color recompui::get_pulse_color(uint32_t pulse_milliseconds) {
uint32_t anim_offset = millis % pulse_milliseconds;
float factor = std::abs((2.0f * anim_offset / pulse_milliseconds) - 1.0f);
return lerp_color(Color{ 23, 214, 232, 255 }, Color{ 162, 239, 246, 255 }, factor);
return lerp_color(
recompui::get_theme_color(ThemeColor::Secondary),
recompui::get_theme_color(ThemeColor::SecondaryL),
factor
);
}