From 7a14a33f55550538ed953425d87b6f14ae2e0bec Mon Sep 17 00:00:00 2001 From: thecozies <79979276+thecozies@users.noreply.github.com> Date: Sat, 12 Jul 2025 14:21:33 -0500 Subject: [PATCH] recompui::theme namespace + border constants --- assets/recomp.rcss | 40 +++--- assets/scss/styles/vars/_borders.scss | 6 +- src/main/theme.cpp | 166 +++++++++++------------ src/ui/elements/ui_button.cpp | 30 ++--- src/ui/elements/ui_button.h | 2 +- src/ui/elements/ui_icon_button.cpp | 48 ++++--- src/ui/elements/ui_icon_button.h | 2 +- src/ui/elements/ui_label.cpp | 2 +- src/ui/elements/ui_radio.cpp | 12 +- src/ui/elements/ui_slider.cpp | 14 +- src/ui/elements/ui_style.cpp | 66 +++++++-- src/ui/elements/ui_style.h | 20 ++- src/ui/elements/ui_text_input.cpp | 2 +- src/ui/elements/ui_theme.cpp | 13 +- src/ui/elements/ui_theme.h | 184 ++++++++++++++------------ src/ui/elements/ui_toggle.cpp | 53 ++++---- src/ui/ui_color_hack.cpp | 6 +- src/ui/ui_mod_details_panel.cpp | 16 +-- src/ui/ui_mod_menu.cpp | 30 ++--- src/ui/ui_prompt.cpp | 16 +-- src/ui/ui_utils.cpp | 4 +- 21 files changed, 405 insertions(+), 327 deletions(-) diff --git a/assets/recomp.rcss b/assets/recomp.rcss index ffbc1e2..71cd243 100644 --- a/assets/recomp.rcss +++ b/assets/recomp.rcss @@ -433,7 +433,7 @@ scrollbarhorizontal sliderbar { height: 100%; margin: auto; border-width: 1.1dp; - border-radius: 16dp; + border-radius: 24dp; border-color: Border; background: ModalOverlay; } @@ -488,7 +488,7 @@ scrollbarhorizontal sliderbar { width: 100%; height: auto; padding: 4dp 16dp 4dp 20dp; - border-radius: 8dp; + border-radius: 12dp; background-color: rgba(0, 0, 0, 0); } .control-option svg { @@ -560,7 +560,7 @@ scrollbarhorizontal sliderbar { margin: 0 4dp; padding: 8dp; border-width: 1.1dp; - border-radius: 8dp; + border-radius: 12dp; border-color: BGOverlay; background-color: BGOverlay; } @@ -722,8 +722,8 @@ scrollbarhorizontal sliderbar { justify-content: space-between; width: 100%; height: 100%; - border-bottom-right-radius: 16dp; - border-bottom-left-radius: 16dp; + border-bottom-right-radius: 24dp; + border-bottom-left-radius: 24dp; } .config__wrapper { @@ -732,8 +732,8 @@ scrollbarhorizontal sliderbar { height: auto; padding: 16dp; border-radius: 0dp; - border-bottom-right-radius: 16dp; - border-bottom-left-radius: 16dp; + border-bottom-right-radius: 24dp; + border-bottom-left-radius: 24dp; background-color: BGShadow; text-align: left; } @@ -778,8 +778,8 @@ scrollbarhorizontal sliderbar { border-top-width: 1.1dp; border-top-color: BorderSoft; padding: 20dp 20dp; - border-bottom-right-radius: 16dp; - border-bottom-left-radius: 16dp; + border-bottom-right-radius: 24dp; + border-bottom-left-radius: 24dp; } .config__header-left { @@ -891,7 +891,7 @@ scrollbarhorizontal sliderbar { width: 32dp; height: 32dp; margin: 4dp 12dp 0; - border-radius: 8dp; + border-radius: 12dp; opacity: 0.5; background-color: BGOverlay; cursor: pointer; @@ -1016,7 +1016,7 @@ scrollbarhorizontal sliderbar { width: 88dp; height: 100%; border-width: 1.1dp; - border-radius: 16dp; + border-radius: 24dp; border-color: Border; } .config-option-color__hsv-wrapper { @@ -1149,7 +1149,7 @@ scrollbarhorizontal sliderbar { box-sizing: border-box; flex: 1 1 100%; width: auto; - border-radius: 12dp; + border-radius: 18dp; background-color: WhiteA5; } .config-option-dropdown__select svg, .config-option-dropdown__wrapper svg, .config-option-textfield__select svg, .config-option-textfield__wrapper svg { @@ -1170,7 +1170,7 @@ scrollbarhorizontal sliderbar { border-color: Border; margin-top: 2dp; padding: 4dp 0; - border-radius: 12dp; + border-radius: 18dp; background-color: Background3; } .config-option-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option { @@ -1197,8 +1197,8 @@ scrollbarhorizontal sliderbar { height: auto; padding: 16dp; border-radius: 0dp; - border-bottom-right-radius: 16dp; - border-bottom-left-radius: 16dp; + border-bottom-right-radius: 24dp; + border-bottom-left-radius: 24dp; background-color: BGShadow; text-align: left; } @@ -1254,7 +1254,7 @@ scrollbarhorizontal sliderbar { height: auto; padding: 23dp; border-width: 1.1dp; - border-radius: 12dp; + border-radius: 18dp; } .button:focus, .button:hover { border-color: Primary; @@ -1617,7 +1617,7 @@ scrollbarhorizontal sliderbar { width: 100%; height: auto; padding: 16dp; - border-radius: 8dp; + border-radius: 12dp; background-color: rgba(0, 0, 0, 0); cursor: pointer; } @@ -1837,7 +1837,7 @@ scrollbarhorizontal sliderbar { height: auto; margin: auto; border-width: 1.1dp; - border-radius: 16dp; + border-radius: 24dp; border-color: Border; background: ModalOverlay; } @@ -1987,7 +1987,7 @@ scrollbarhorizontal sliderbar { flex: 1 1 100%; width: auto; height: 48dp; - border-radius: 12dp; + border-radius: 18dp; background-color: WhiteA5; cursor: pointer; align-items: center; @@ -2013,7 +2013,7 @@ scrollbarhorizontal sliderbar { background-color: Background3; padding: 4dp 0; margin-top: 2dp; - border-radius: 12dp; + border-radius: 18dp; } .config-debug__select-wrapper select selectbox option { transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out; diff --git a/assets/scss/styles/vars/_borders.scss b/assets/scss/styles/vars/_borders.scss index 5088285..6cb1db2 100644 --- a/assets/scss/styles/vars/_borders.scss +++ b/assets/scss/styles/vars/_borders.scss @@ -1,8 +1,8 @@ -$border-radius-sm: 8dp; -$border-radius-md: 12dp; +$border-radius-sm: 12dp; +$border-radius-md: 18dp; // modals/pages -$border-radius-lg: 16dp; +$border-radius-lg: 24dp; $border-radius-modal: $border-radius-lg; diff --git a/src/main/theme.cpp b/src/main/theme.cpp index 2df0dfb..8d6139c 100644 --- a/src/main/theme.cpp +++ b/src/main/theme.cpp @@ -2,87 +2,91 @@ #include "theme.h" void recomptheme::set_custom_theme() { - recompui::set_theme_color(recompui::ThemeColor::Background1, recompui::Color{10, 10, 11, 255}); - recompui::set_theme_color(recompui::ThemeColor::Background2, recompui::Color{19, 20, 21, 255}); - recompui::set_theme_color(recompui::ThemeColor::Background3, recompui::Color{27, 27, 29, 255}); - recompui::set_theme_color(recompui::ThemeColor::BGOverlay, recompui::Color{199, 200, 204, 26}); - recompui::set_theme_color(recompui::ThemeColor::ModalOverlay, recompui::Color{10, 10, 11, 229}); - recompui::set_theme_color(recompui::ThemeColor::BGShadow, recompui::Color{0, 0, 0, 89}); - recompui::set_theme_color(recompui::ThemeColor::BGShadow2, recompui::Color{10, 10, 11, 184}); - recompui::set_theme_color(recompui::ThemeColor::Text, recompui::Color{242, 242, 242, 255}); - recompui::set_theme_color(recompui::ThemeColor::TextActive, recompui::Color{245, 245, 245, 255}); - recompui::set_theme_color(recompui::ThemeColor::TextDim, recompui::Color{204, 204, 204, 255}); - recompui::set_theme_color(recompui::ThemeColor::TextInactive, recompui::Color{255, 255, 255, 153}); - recompui::set_theme_color(recompui::ThemeColor::TextA5, recompui::Color{242, 242, 242, 13}); - recompui::set_theme_color(recompui::ThemeColor::TextA20, recompui::Color{242, 242, 242, 51}); - recompui::set_theme_color(recompui::ThemeColor::TextA30, recompui::Color{242, 242, 242, 77}); - recompui::set_theme_color(recompui::ThemeColor::TextA50, recompui::Color{242, 242, 242, 128}); - recompui::set_theme_color(recompui::ThemeColor::TextA80, recompui::Color{242, 242, 242, 204}); - recompui::set_theme_color(recompui::ThemeColor::Primary, recompui::Color{29, 93, 226, 255}); - recompui::set_theme_color(recompui::ThemeColor::PrimaryL, recompui::Color{167, 191, 241, 255}); - recompui::set_theme_color(recompui::ThemeColor::PrimaryD, recompui::Color{0, 38, 117, 255}); - recompui::set_theme_color(recompui::ThemeColor::PrimaryA5, recompui::Color{29, 93, 226, 13}); - recompui::set_theme_color(recompui::ThemeColor::PrimaryA20, recompui::Color{29, 93, 226, 51}); - recompui::set_theme_color(recompui::ThemeColor::PrimaryA30, recompui::Color{29, 93, 226, 77}); - recompui::set_theme_color(recompui::ThemeColor::PrimaryA50, recompui::Color{29, 93, 226, 128}); - recompui::set_theme_color(recompui::ThemeColor::PrimaryA80, recompui::Color{29, 93, 226, 204}); - recompui::set_theme_color(recompui::ThemeColor::Secondary, recompui::Color{247, 158, 8, 255}); - recompui::set_theme_color(recompui::ThemeColor::SecondaryL, recompui::Color{255, 215, 148, 255}); - recompui::set_theme_color(recompui::ThemeColor::SecondaryD, recompui::Color{224, 141, 0, 255}); - recompui::set_theme_color(recompui::ThemeColor::SecondaryA5, recompui::Color{247, 158, 8, 13}); - recompui::set_theme_color(recompui::ThemeColor::SecondaryA20, recompui::Color{247, 158, 8, 51}); - recompui::set_theme_color(recompui::ThemeColor::SecondaryA30, recompui::Color{247, 158, 8, 77}); - recompui::set_theme_color(recompui::ThemeColor::SecondaryA50, recompui::Color{247, 158, 8, 128}); - recompui::set_theme_color(recompui::ThemeColor::SecondaryA80, recompui::Color{247, 158, 8, 204}); - recompui::set_theme_color(recompui::ThemeColor::Warning, recompui::Color{255, 254, 0, 255}); - recompui::set_theme_color(recompui::ThemeColor::WarningL, recompui::Color{255, 254, 143, 255}); - recompui::set_theme_color(recompui::ThemeColor::WarningD, recompui::Color{197, 163, 2, 255}); - recompui::set_theme_color(recompui::ThemeColor::WarningA5, recompui::Color{255, 254, 0, 13}); - recompui::set_theme_color(recompui::ThemeColor::WarningA20, recompui::Color{255, 254, 0, 51}); - recompui::set_theme_color(recompui::ThemeColor::WarningA30, recompui::Color{255, 254, 0, 77}); - recompui::set_theme_color(recompui::ThemeColor::WarningA50, recompui::Color{255, 254, 0, 128}); - recompui::set_theme_color(recompui::ThemeColor::WarningA80, recompui::Color{255, 254, 0, 204}); - recompui::set_theme_color(recompui::ThemeColor::Danger, recompui::Color{255, 53, 31, 255}); - recompui::set_theme_color(recompui::ThemeColor::DangerL, recompui::Color{255, 149, 138, 255}); - recompui::set_theme_color(recompui::ThemeColor::DangerD, recompui::Color{163, 16, 0, 255}); - recompui::set_theme_color(recompui::ThemeColor::DangerA5, recompui::Color{255, 53, 31, 13}); - recompui::set_theme_color(recompui::ThemeColor::DangerA20, recompui::Color{255, 53, 31, 51}); - recompui::set_theme_color(recompui::ThemeColor::DangerA30, recompui::Color{255, 53, 31, 77}); - recompui::set_theme_color(recompui::ThemeColor::DangerA50, recompui::Color{255, 53, 31, 128}); - recompui::set_theme_color(recompui::ThemeColor::DangerA80, recompui::Color{255, 53, 31, 204}); - recompui::set_theme_color(recompui::ThemeColor::Success, recompui::Color{40, 238, 32, 255}); - recompui::set_theme_color(recompui::ThemeColor::SuccessL, recompui::Color{155, 247, 151, 255}); - recompui::set_theme_color(recompui::ThemeColor::SuccessD, recompui::Color{18, 157, 12, 255}); - recompui::set_theme_color(recompui::ThemeColor::SuccessA5, recompui::Color{40, 238, 32, 13}); - recompui::set_theme_color(recompui::ThemeColor::SuccessA20, recompui::Color{40, 238, 32, 51}); - recompui::set_theme_color(recompui::ThemeColor::SuccessA30, recompui::Color{40, 238, 32, 77}); - recompui::set_theme_color(recompui::ThemeColor::SuccessA50, recompui::Color{40, 238, 32, 128}); - recompui::set_theme_color(recompui::ThemeColor::SuccessA80, recompui::Color{40, 238, 32, 204}); - recompui::set_theme_color(recompui::ThemeColor::Border, recompui::Color{255, 255, 255, 51}); - recompui::set_theme_color(recompui::ThemeColor::BorderSoft, recompui::Color{255, 255, 255, 26}); - recompui::set_theme_color(recompui::ThemeColor::BorderHard, recompui::Color{255, 255, 255, 77}); - recompui::set_theme_color(recompui::ThemeColor::BorderSolid, recompui::Color{255, 255, 255, 153}); - recompui::set_theme_color(recompui::ThemeColor::Transparent, recompui::Color{0, 0, 0, 0}); - recompui::set_theme_color(recompui::ThemeColor::A, recompui::Color{51, 51, 255, 255}); - recompui::set_theme_color(recompui::ThemeColor::AL, recompui::Color{178, 178, 255, 255}); - recompui::set_theme_color(recompui::ThemeColor::AD, recompui::Color{32, 32, 172, 255}); - recompui::set_theme_color(recompui::ThemeColor::AA5, recompui::Color{51, 51, 255, 13}); - recompui::set_theme_color(recompui::ThemeColor::AA20, recompui::Color{51, 51, 255, 51}); - recompui::set_theme_color(recompui::ThemeColor::AA30, recompui::Color{51, 51, 255, 77}); - recompui::set_theme_color(recompui::ThemeColor::AA50, recompui::Color{51, 51, 255, 128}); - recompui::set_theme_color(recompui::ThemeColor::AA80, recompui::Color{51, 51, 255, 204}); - recompui::set_theme_color(recompui::ThemeColor::White, recompui::Color{255, 255, 255, 255}); - recompui::set_theme_color(recompui::ThemeColor::WhiteA5, recompui::Color{255, 255, 255, 13}); - recompui::set_theme_color(recompui::ThemeColor::WhiteA20, recompui::Color{255, 255, 255, 51}); - recompui::set_theme_color(recompui::ThemeColor::WhiteA30, recompui::Color{255, 255, 255, 77}); - recompui::set_theme_color(recompui::ThemeColor::WhiteA50, recompui::Color{255, 255, 255, 128}); - recompui::set_theme_color(recompui::ThemeColor::WhiteA80, recompui::Color{255, 255, 255, 204}); - recompui::set_theme_color(recompui::ThemeColor::BW05, recompui::Color{13, 13, 13, 255}); - recompui::set_theme_color(recompui::ThemeColor::BW10, recompui::Color{26, 26, 26, 255}); - recompui::set_theme_color(recompui::ThemeColor::BW25, recompui::Color{64, 64, 64, 255}); - recompui::set_theme_color(recompui::ThemeColor::BW50, recompui::Color{128, 128, 128, 255}); - recompui::set_theme_color(recompui::ThemeColor::BW75, recompui::Color{191, 191, 191, 255}); - recompui::set_theme_color(recompui::ThemeColor::BW90, recompui::Color{229, 229, 229, 255}); + recompui::theme::set_theme_color(recompui::theme::color::Background1, recompui::Color{10, 10, 11, 255}); + recompui::theme::set_theme_color(recompui::theme::color::Background2, recompui::Color{19, 20, 21, 255}); + recompui::theme::set_theme_color(recompui::theme::color::Background3, recompui::Color{27, 27, 29, 255}); + recompui::theme::set_theme_color(recompui::theme::color::BGOverlay, recompui::Color{199, 200, 204, 26}); + recompui::theme::set_theme_color(recompui::theme::color::ModalOverlay, recompui::Color{10, 10, 11, 229}); + recompui::theme::set_theme_color(recompui::theme::color::BGShadow, recompui::Color{0, 0, 0, 89}); + recompui::theme::set_theme_color(recompui::theme::color::BGShadow2, recompui::Color{10, 10, 11, 184}); + recompui::theme::set_theme_color(recompui::theme::color::Text, recompui::Color{242, 242, 242, 255}); + recompui::theme::set_theme_color(recompui::theme::color::TextActive, recompui::Color{245, 245, 245, 255}); + recompui::theme::set_theme_color(recompui::theme::color::TextDim, recompui::Color{204, 204, 204, 255}); + recompui::theme::set_theme_color(recompui::theme::color::TextInactive, recompui::Color{255, 255, 255, 153}); + recompui::theme::set_theme_color(recompui::theme::color::TextA5, recompui::Color{242, 242, 242, 13}); + recompui::theme::set_theme_color(recompui::theme::color::TextA20, recompui::Color{242, 242, 242, 51}); + recompui::theme::set_theme_color(recompui::theme::color::TextA30, recompui::Color{242, 242, 242, 77}); + recompui::theme::set_theme_color(recompui::theme::color::TextA50, recompui::Color{242, 242, 242, 128}); + recompui::theme::set_theme_color(recompui::theme::color::TextA80, recompui::Color{242, 242, 242, 204}); + recompui::theme::set_theme_color(recompui::theme::color::Primary, recompui::Color{29, 93, 226, 255}); + recompui::theme::set_theme_color(recompui::theme::color::PrimaryL, recompui::Color{167, 191, 241, 255}); + recompui::theme::set_theme_color(recompui::theme::color::PrimaryD, recompui::Color{0, 38, 117, 255}); + recompui::theme::set_theme_color(recompui::theme::color::PrimaryA5, recompui::Color{29, 93, 226, 13}); + recompui::theme::set_theme_color(recompui::theme::color::PrimaryA20, recompui::Color{29, 93, 226, 51}); + recompui::theme::set_theme_color(recompui::theme::color::PrimaryA30, recompui::Color{29, 93, 226, 77}); + recompui::theme::set_theme_color(recompui::theme::color::PrimaryA50, recompui::Color{29, 93, 226, 128}); + recompui::theme::set_theme_color(recompui::theme::color::PrimaryA80, recompui::Color{29, 93, 226, 204}); + recompui::theme::set_theme_color(recompui::theme::color::Secondary, recompui::Color{247, 158, 8, 255}); + recompui::theme::set_theme_color(recompui::theme::color::SecondaryL, recompui::Color{255, 215, 148, 255}); + recompui::theme::set_theme_color(recompui::theme::color::SecondaryD, recompui::Color{224, 141, 0, 255}); + recompui::theme::set_theme_color(recompui::theme::color::SecondaryA5, recompui::Color{247, 158, 8, 13}); + recompui::theme::set_theme_color(recompui::theme::color::SecondaryA20, recompui::Color{247, 158, 8, 51}); + recompui::theme::set_theme_color(recompui::theme::color::SecondaryA30, recompui::Color{247, 158, 8, 77}); + recompui::theme::set_theme_color(recompui::theme::color::SecondaryA50, recompui::Color{247, 158, 8, 128}); + recompui::theme::set_theme_color(recompui::theme::color::SecondaryA80, recompui::Color{247, 158, 8, 204}); + recompui::theme::set_theme_color(recompui::theme::color::Warning, recompui::Color{255, 254, 0, 255}); + recompui::theme::set_theme_color(recompui::theme::color::WarningL, recompui::Color{255, 254, 143, 255}); + recompui::theme::set_theme_color(recompui::theme::color::WarningD, recompui::Color{197, 163, 2, 255}); + recompui::theme::set_theme_color(recompui::theme::color::WarningA5, recompui::Color{255, 254, 0, 13}); + recompui::theme::set_theme_color(recompui::theme::color::WarningA20, recompui::Color{255, 254, 0, 51}); + recompui::theme::set_theme_color(recompui::theme::color::WarningA30, recompui::Color{255, 254, 0, 77}); + recompui::theme::set_theme_color(recompui::theme::color::WarningA50, recompui::Color{255, 254, 0, 128}); + recompui::theme::set_theme_color(recompui::theme::color::WarningA80, recompui::Color{255, 254, 0, 204}); + recompui::theme::set_theme_color(recompui::theme::color::Danger, recompui::Color{255, 53, 31, 255}); + recompui::theme::set_theme_color(recompui::theme::color::DangerL, recompui::Color{255, 149, 138, 255}); + recompui::theme::set_theme_color(recompui::theme::color::DangerD, recompui::Color{163, 16, 0, 255}); + recompui::theme::set_theme_color(recompui::theme::color::DangerA5, recompui::Color{255, 53, 31, 13}); + recompui::theme::set_theme_color(recompui::theme::color::DangerA20, recompui::Color{255, 53, 31, 51}); + recompui::theme::set_theme_color(recompui::theme::color::DangerA30, recompui::Color{255, 53, 31, 77}); + recompui::theme::set_theme_color(recompui::theme::color::DangerA50, recompui::Color{255, 53, 31, 128}); + recompui::theme::set_theme_color(recompui::theme::color::DangerA80, recompui::Color{255, 53, 31, 204}); + recompui::theme::set_theme_color(recompui::theme::color::Success, recompui::Color{40, 238, 32, 255}); + recompui::theme::set_theme_color(recompui::theme::color::SuccessL, recompui::Color{155, 247, 151, 255}); + recompui::theme::set_theme_color(recompui::theme::color::SuccessD, recompui::Color{18, 157, 12, 255}); + recompui::theme::set_theme_color(recompui::theme::color::SuccessA5, recompui::Color{40, 238, 32, 13}); + recompui::theme::set_theme_color(recompui::theme::color::SuccessA20, recompui::Color{40, 238, 32, 51}); + recompui::theme::set_theme_color(recompui::theme::color::SuccessA30, recompui::Color{40, 238, 32, 77}); + recompui::theme::set_theme_color(recompui::theme::color::SuccessA50, recompui::Color{40, 238, 32, 128}); + recompui::theme::set_theme_color(recompui::theme::color::SuccessA80, recompui::Color{40, 238, 32, 204}); + recompui::theme::set_theme_color(recompui::theme::color::Border, recompui::Color{255, 255, 255, 51}); + recompui::theme::set_theme_color(recompui::theme::color::BorderSoft, recompui::Color{255, 255, 255, 26}); + recompui::theme::set_theme_color(recompui::theme::color::BorderHard, recompui::Color{255, 255, 255, 77}); + recompui::theme::set_theme_color(recompui::theme::color::BorderSolid, recompui::Color{255, 255, 255, 153}); + recompui::theme::set_theme_color(recompui::theme::color::Transparent, recompui::Color{0, 0, 0, 0}); + recompui::theme::set_theme_color(recompui::theme::color::A, recompui::Color{51, 51, 255, 255}); + recompui::theme::set_theme_color(recompui::theme::color::AL, recompui::Color{178, 178, 255, 255}); + recompui::theme::set_theme_color(recompui::theme::color::AD, recompui::Color{32, 32, 172, 255}); + recompui::theme::set_theme_color(recompui::theme::color::AA5, recompui::Color{51, 51, 255, 13}); + recompui::theme::set_theme_color(recompui::theme::color::AA20, recompui::Color{51, 51, 255, 51}); + recompui::theme::set_theme_color(recompui::theme::color::AA30, recompui::Color{51, 51, 255, 77}); + recompui::theme::set_theme_color(recompui::theme::color::AA50, recompui::Color{51, 51, 255, 128}); + recompui::theme::set_theme_color(recompui::theme::color::AA80, recompui::Color{51, 51, 255, 204}); + recompui::theme::set_theme_color(recompui::theme::color::White, recompui::Color{255, 255, 255, 255}); + recompui::theme::set_theme_color(recompui::theme::color::WhiteA5, recompui::Color{255, 255, 255, 13}); + recompui::theme::set_theme_color(recompui::theme::color::WhiteA20, recompui::Color{255, 255, 255, 51}); + recompui::theme::set_theme_color(recompui::theme::color::WhiteA30, recompui::Color{255, 255, 255, 77}); + recompui::theme::set_theme_color(recompui::theme::color::WhiteA50, recompui::Color{255, 255, 255, 128}); + recompui::theme::set_theme_color(recompui::theme::color::WhiteA80, recompui::Color{255, 255, 255, 204}); + recompui::theme::set_theme_color(recompui::theme::color::BW05, recompui::Color{13, 13, 13, 255}); + recompui::theme::set_theme_color(recompui::theme::color::BW10, recompui::Color{26, 26, 26, 255}); + recompui::theme::set_theme_color(recompui::theme::color::BW25, recompui::Color{64, 64, 64, 255}); + recompui::theme::set_theme_color(recompui::theme::color::BW50, recompui::Color{128, 128, 128, 255}); + recompui::theme::set_theme_color(recompui::theme::color::BW75, recompui::Color{191, 191, 191, 255}); + recompui::theme::set_theme_color(recompui::theme::color::BW90, recompui::Color{229, 229, 229, 255}); + + recompui::theme::border::radius_sm = 12.0f; + recompui::theme::border::radius_md = 18.0f; + recompui::theme::border::radius_lg = 24.0f; }; diff --git a/src/ui/elements/ui_button.cpp b/src/ui/elements/ui_button.cpp index 8d8ec7e..c2c9389 100644 --- a/src/ui/elements/ui_button.cpp +++ b/src/ui/elements/ui_button.cpp @@ -12,20 +12,20 @@ namespace recompui { set_text(text); set_display(Display::Block); set_padding(23.0f); - set_border_width(1.1f); - set_border_radius(12.0f); + set_border_width(theme::border::width); + set_border_radius(theme::border::radius_md); set_font_size(28.0f); set_letter_spacing(3.08f); set_line_height(28.0f); set_font_style(FontStyle::Normal); set_font_weight(700); set_cursor(Cursor::Pointer); - set_color(ThemeColor::Text); + set_color(theme::color::Text); set_tab_index(TabIndex::Auto); - 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); + hover_style.set_color(theme::color::Text); + focus_style.set_color(theme::color::Text); + disabled_style.set_color(theme::color::TextDim, 128); + hover_disabled_style.set_color(theme::color::Text, 128); apply_button_style(style); @@ -77,31 +77,31 @@ namespace recompui { style = new_style; switch (style) { case ButtonStyle::Primary: { - apply_theme_style(ThemeColor::Primary); + apply_theme_style(theme::color::Primary); break; } case ButtonStyle::Secondary: { - apply_theme_style(ThemeColor::Secondary); + apply_theme_style(theme::color::Secondary); break; } case ButtonStyle::Tertiary: { - apply_theme_style(ThemeColor::Text); + apply_theme_style(theme::color::Text); break; } case ButtonStyle::Success: { - apply_theme_style(ThemeColor::Success); + apply_theme_style(theme::color::Success); break; } case ButtonStyle::Warning: { - apply_theme_style(ThemeColor::Warning); + apply_theme_style(theme::color::Warning); break; } case ButtonStyle::Danger: { - apply_theme_style(ThemeColor::Danger); + apply_theme_style(theme::color::Danger); break; } case ButtonStyle::Basic: { - apply_theme_style(ThemeColor::Text, true); + apply_theme_style(theme::color::Text, true); break; } default: @@ -110,7 +110,7 @@ namespace recompui { } } - void Button::apply_theme_style(recompui::ThemeColor color, bool is_basic) { + void Button::apply_theme_style(recompui::theme::color color, bool is_basic) { const uint8_t border_opacity = is_basic ? 0 : 204; const uint8_t background_opacity = is_basic ? 0 : 13; const uint8_t background_hover_opacity = 77; diff --git a/src/ui/elements/ui_button.h b/src/ui/elements/ui_button.h index d305e61..b4398c3 100644 --- a/src/ui/elements/ui_button.h +++ b/src/ui/elements/ui_button.h @@ -35,7 +35,7 @@ namespace recompui { Style* get_hover_disabled_style() { return &hover_disabled_style; } void apply_button_style(ButtonStyle new_style); private: - void apply_theme_style(recompui::ThemeColor color, bool is_basic = false); + void apply_theme_style(recompui::theme::color color, bool is_basic = false); }; } // namespace recompui diff --git a/src/ui/elements/ui_icon_button.cpp b/src/ui/elements/ui_icon_button.cpp index 2cf1ba9..df5d479 100644 --- a/src/ui/elements/ui_icon_button.cpp +++ b/src/ui/elements/ui_icon_button.cpp @@ -2,14 +2,12 @@ #include -namespace recompui { - // Borders add width to the button, so this subtracts from the base size to bring it back to the expected size. - static const float border_width_thickness = 1.1f; - +namespace recompui { IconButton::IconButton(Element *parent, const std::string &svg_src, ButtonStyle style, IconButtonSize size) : Element(parent, Events(EventType::Click, EventType::Hover, EventType::Enable, EventType::Focus), "button") { this->style = style; this->size = size; - float float_size_internal = static_cast(size) - (border_width_thickness * 2.0f); + // Borders add width to the button, so this subtracts from the base size to bring it back to the expected size. + float float_size_internal = static_cast(size) - (theme::border::width * 2.0f); enable_focus(); @@ -22,20 +20,20 @@ namespace recompui { set_height(float_size_internal); set_min_height(float_size_internal); set_max_height(float_size_internal); - set_border_width(border_width_thickness); + set_border_width(theme::border::width); set_border_radius(float_size_internal * 0.5f); - set_border_color(ThemeColor::Transparent); + set_border_color(theme::color::Transparent); set_cursor(Cursor::Pointer); - set_color(ThemeColor::TextDim); + set_color(theme::color::TextDim); set_tab_index(TabIndex::Auto); - hover_style.set_color(ThemeColor::Text); - focus_style.set_color(ThemeColor::Text); - disabled_style.set_color(ThemeColor::TextDim); + hover_style.set_color(theme::color::Text); + focus_style.set_color(theme::color::Text); + disabled_style.set_color(theme::color::TextDim); disabled_style.set_cursor(Cursor::None); disabled_style.set_opacity(0.5f); - hover_disabled_style.set_color(ThemeColor::TextDim); + hover_disabled_style.set_color(theme::color::TextDim); float icon_size = 0; switch (size) { @@ -61,7 +59,7 @@ namespace recompui { svg = context.create_element(this, svg_src); svg->set_width(icon_size); - svg->set_color(ThemeColor::TextDim); + svg->set_color(theme::color::TextDim); apply_button_style(style); @@ -81,7 +79,7 @@ namespace recompui { { bool hover_active = std::get(e.variant).active && is_enabled(); set_style_enabled(hover_state, hover_active); - svg->set_color(hover_active ? ThemeColor::Text : ThemeColor::TextDim); + svg->set_color(hover_active ? theme::color::Text : theme::color::TextDim); } break; case EventType::Enable: @@ -91,12 +89,12 @@ namespace recompui { if (enable_active) { set_cursor(Cursor::Pointer); set_focusable(true); - svg->set_color(ThemeColor::TextDim); + svg->set_color(theme::color::TextDim); } else { set_cursor(Cursor::None); set_focusable(false); - svg->set_color(ThemeColor::TextDim); + svg->set_color(theme::color::TextDim); } } break; @@ -104,7 +102,7 @@ namespace recompui { { bool focus_active = std::get(e.variant).active; set_style_enabled(focus_state, focus_active); - svg->set_color(focus_active ? ThemeColor::Text : ThemeColor::TextDim); + svg->set_color(focus_active ? theme::color::Text : theme::color::TextDim); } break; case EventType::Update: @@ -123,31 +121,31 @@ namespace recompui { style = new_style; switch (style) { case ButtonStyle::Primary: { - apply_theme_style(ThemeColor::Primary); + apply_theme_style(theme::color::Primary); break; } case ButtonStyle::Secondary: { - apply_theme_style(ThemeColor::Secondary); + apply_theme_style(theme::color::Secondary); break; } case ButtonStyle::Tertiary: { - apply_theme_style(ThemeColor::Text); + apply_theme_style(theme::color::Text); break; } case ButtonStyle::Success: { - apply_theme_style(ThemeColor::Success); + apply_theme_style(theme::color::Success); break; } case ButtonStyle::Warning: { - apply_theme_style(ThemeColor::Warning); + apply_theme_style(theme::color::Warning); break; } case ButtonStyle::Danger: { - apply_theme_style(ThemeColor::Danger); + apply_theme_style(theme::color::Danger); break; } case ButtonStyle::Basic: { - apply_theme_style(ThemeColor::Text, true); + apply_theme_style(theme::color::Text, true); break; } default: @@ -156,7 +154,7 @@ namespace recompui { } } - void IconButton::apply_theme_style(recompui::ThemeColor color, bool is_basic) { + void IconButton::apply_theme_style(recompui::theme::color color, bool is_basic) { const uint8_t background_opacity = is_basic ? 0 : 13; const uint8_t border_opacity = is_basic ? 0 : 204; const uint8_t background_hover_opacity = 77; diff --git a/src/ui/elements/ui_icon_button.h b/src/ui/elements/ui_icon_button.h index f8cead5..22b2084 100644 --- a/src/ui/elements/ui_icon_button.h +++ b/src/ui/elements/ui_icon_button.h @@ -37,7 +37,7 @@ namespace recompui { Style* get_hover_disabled_style() { return &hover_disabled_style; } void apply_button_style(ButtonStyle new_style); private: - void apply_theme_style(recompui::ThemeColor color, bool is_basic = false); + void apply_theme_style(recompui::theme::color color, bool is_basic = false); }; } // namespace recompui diff --git a/src/ui/elements/ui_label.cpp b/src/ui/elements/ui_label.cpp index 4138849..8b905da 100644 --- a/src/ui/elements/ui_label.cpp +++ b/src/ui/elements/ui_label.cpp @@ -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(ThemeColor::Primary); + set_color(theme::color::Primary); set_font_size(18.0f); set_letter_spacing(2.52f); set_line_height(18.0f); diff --git a/src/ui/elements/ui_radio.cpp b/src/ui/elements/ui_radio.cpp index 6759588..a128224 100644 --- a/src/ui/elements/ui_radio.cpp +++ b/src/ui/elements/ui_radio.cpp @@ -17,16 +17,16 @@ namespace recompui { set_line_height(20.0f); set_font_weight(400); set_font_style(FontStyle::Normal); - set_border_color(ThemeColor::Text, 0); + set_border_color(theme::color::Text, 0); set_border_bottom_width(1.0f); - set_color(ThemeColor::TextInactive); + set_color(theme::color::TextInactive); set_padding_bottom(8.0f); set_text_transform(TextTransform::Uppercase); set_height_auto(); - 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); + hover_style.set_color(theme::color::WhiteA80); + checked_style.set_color(theme::color::White); + checked_style.set_border_color(theme::color::Text); + pulsing_style.set_border_color(theme::color::SecondaryA80); add_style(&hover_style, { hover_state }); add_style(&checked_style, { checked_state }); diff --git a/src/ui/elements/ui_slider.cpp b/src/ui/elements/ui_slider.cpp index 702cae1..333c86e 100644 --- a/src/ui/elements/ui_slider.cpp +++ b/src/ui/elements/ui_slider.cpp @@ -93,11 +93,11 @@ namespace recompui { queue_update(); } else { - circle_element->set_background_color(ThemeColor::TextDim); + circle_element->set_background_color(theme::color::TextDim); } } else { - circle_element->set_background_color(ThemeColor::BW25); + circle_element->set_background_color(theme::color::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(ThemeColor::TextDim); + circle_element->set_background_color(theme::color::TextDim); } else { set_cursor(Cursor::None); set_focusable(false); - circle_element->set_background_color(ThemeColor::BW25); + circle_element->set_background_color(theme::color::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(ThemeColor::WhiteA20); + bar_element->set_background_color(theme::color::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,8 +173,8 @@ 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(ThemeColor::TextDim); - circle_element->set_border_radius(8.0f); + circle_element->set_background_color(theme::color::TextDim); + circle_element->set_border_radius(theme::border::radius_sm); 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(); }); circle_element->set_cursor(Cursor::Pointer); diff --git a/src/ui/elements/ui_style.cpp b/src/ui/elements/ui_style.cpp index 5f2e6dc..9029271 100644 --- a/src/ui/elements/ui_style.cpp +++ b/src/ui/elements/ui_style.cpp @@ -388,7 +388,7 @@ namespace recompui { set_property(Rml::PropertyId::BorderBottomRightRadius, Rml::Property(radius, to_rml(unit))); } - static Color get_theme_color_with_opacity(ThemeColor color, int opacity) { + static Color get_theme_color_with_opacity(theme::color 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. @@ -402,7 +402,7 @@ namespace recompui { set_property(Rml::PropertyId::BackgroundColor, property); } - void Style::set_background_color(recompui::ThemeColor color, int opacity) { + void Style::set_background_color(recompui::theme::color color, int opacity) { set_background_color(get_theme_color_with_opacity(color, opacity)); } @@ -414,7 +414,7 @@ namespace recompui { set_property(Rml::PropertyId::BorderRightColor, property); } - void Style::set_border_color(recompui::ThemeColor color, int opacity) { + void Style::set_border_color(recompui::theme::color color, int opacity) { set_border_color(get_theme_color_with_opacity(color, opacity)); } @@ -423,7 +423,7 @@ namespace recompui { set_property(Rml::PropertyId::BorderLeftColor, property); } - void Style::set_border_left_color(recompui::ThemeColor color, int opacity) { + void Style::set_border_left_color(recompui::theme::color color, int opacity) { set_border_left_color(get_theme_color_with_opacity(color, opacity)); } @@ -432,7 +432,7 @@ namespace recompui { set_property(Rml::PropertyId::BorderTopColor, property); } - void Style::set_border_top_color(recompui::ThemeColor color, int opacity) { + void Style::set_border_top_color(recompui::theme::color color, int opacity) { set_border_top_color(get_theme_color_with_opacity(color, opacity)); } @@ -441,7 +441,7 @@ namespace recompui { set_property(Rml::PropertyId::BorderRightColor, property); } - void Style::set_border_right_color(recompui::ThemeColor color, int opacity) { + void Style::set_border_right_color(recompui::theme::color color, int opacity) { set_border_right_color(get_theme_color_with_opacity(color, opacity)); } @@ -450,7 +450,7 @@ namespace recompui { set_property(Rml::PropertyId::BorderBottomColor, property); } - void Style::set_border_bottom_color(recompui::ThemeColor color, int opacity) { + void Style::set_border_bottom_color(recompui::theme::color color, int opacity) { set_border_bottom_color(get_theme_color_with_opacity(color, opacity)); } @@ -459,10 +459,19 @@ namespace recompui { set_property(Rml::PropertyId::Color, property); } - void Style::set_color(recompui::ThemeColor color, int opacity) { + void Style::set_color(recompui::theme::color color, int opacity) { set_color(get_theme_color_with_opacity(color, opacity)); } + void Style::set_image_color(const Color &color) { + Rml::Property property(Rml::Colourb(color.r, color.g, color.b, color.a), Rml::Unit::COLOUR); + set_property(Rml::PropertyId::ImageColor, property); + } + + void Style::set_image_color(recompui::theme::color color, int opacity) { + set_image_color(get_theme_color_with_opacity(color, opacity)); + } + void Style::set_cursor(Cursor cursor) { switch (cursor) { case Cursor::None: @@ -645,5 +654,46 @@ namespace recompui { set_property(Rml::PropertyId::Focus, focusable ? Rml::Style::Focus::Auto : Rml::Style::Focus::None); } + Rml::TransformPtr Style::get_existing_transform() { + if (property_map.find(Rml::PropertyId::Transform) != property_map.end()) { + auto curTransform = property_map[Rml::PropertyId::Transform].Get(); + if (curTransform != nullptr) { + return curTransform; + } + } + + return nullptr; + } + + void Style::set_or_add_transformation(const Rml::TransformPrimitive& primitive) { + Rml::TransformPtr transform = Rml::MakeShared(); + Rml::TransformPtr existing_transform = get_existing_transform(); + bool added_new = false; + if (existing_transform != nullptr) { + auto& primitives = existing_transform->GetPrimitives(); + for (int i = 0; i < primitives.size(); i++) { + if (primitives[i].type == primitive.type) { + transform->AddPrimitive(primitive); + added_new = true; + } else { + transform->AddPrimitive(primitives[i]); + } + } + } + + if (!added_new) { + transform->AddPrimitive(primitive); + } + + set_property(Rml::PropertyId::Transform, Rml::Property(Rml::Variant(std::move(transform)), Rml::Unit::TRANSFORM)); + } + + void Style::set_translate_2D(float x, float y, Unit unit) { + set_or_add_transformation(Rml::Transforms::Translate2D(x, y, to_rml(unit))); + } + + void Style::set_scale_2D(float scale_x, float scale_y) { + set_or_add_transformation(Rml::Transforms::Scale2D(scale_x, scale_y)); + } } // namespace recompui diff --git a/src/ui/elements/ui_style.h b/src/ui/elements/ui_style.h index bb6b9de..f656bf5 100644 --- a/src/ui/elements/ui_style.h +++ b/src/ui/elements/ui_style.h @@ -17,6 +17,8 @@ namespace recompui { friend class ContextId; private: std::map property_map; + Rml::TransformPtr get_existing_transform(); + void set_or_add_transformation(const Rml::TransformPrimitive& primitive); protected: virtual void set_property(Rml::PropertyId property_id, const Rml::Property &property); ResourceId resource_id = ResourceId::null(); @@ -69,13 +71,15 @@ 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_image_color(const Color &color); + void set_background_color(recompui::theme::color color, int opacity = ThemeDefaultOpacity); + void set_border_color(recompui::theme::color color, int opacity = ThemeDefaultOpacity); + void set_border_left_color(recompui::theme::color color, int opacity = ThemeDefaultOpacity); + void set_border_top_color(recompui::theme::color color, int opacity = ThemeDefaultOpacity); + void set_border_right_color(recompui::theme::color color, int opacity = ThemeDefaultOpacity); + void set_border_bottom_color(recompui::theme::color color, int opacity = ThemeDefaultOpacity); + void set_color(recompui::theme::color color, int opacity = ThemeDefaultOpacity); + void set_image_color(recompui::theme::color color, int opacity = ThemeDefaultOpacity); void set_cursor(Cursor cursor); void set_opacity(float opacity); void set_display(Display display); @@ -104,6 +108,8 @@ namespace recompui { void set_drag(Drag drag); void set_tab_index(TabIndex focus); void set_font_family(std::string_view family); + void set_translate_2D(float x, float y, Unit unit = Unit::Dp); + void set_scale_2D(float scale_x, float scale_y); virtual void set_nav_auto(NavDirection dir); virtual void set_nav_none(NavDirection dir); virtual void set_nav(NavDirection dir, Element* element); diff --git a/src/ui/elements/ui_text_input.cpp b/src/ui/elements/ui_text_input.cpp index d5ac94d..c21cafe 100644 --- a/src/ui/elements/ui_text_input.cpp +++ b/src/ui/elements/ui_text_input.cpp @@ -33,7 +33,7 @@ namespace recompui { set_attribute("type", "password"); } set_min_width(60.0f); - set_border_color(ThemeColor::Text); + set_border_color(theme::color::Text); set_border_bottom_width(1.0f); set_padding_bottom(6.0f); set_focusable(true); diff --git a/src/ui/elements/ui_theme.cpp b/src/ui/elements/ui_theme.cpp index 7a66e18..47ce48c 100644 --- a/src/ui/elements/ui_theme.cpp +++ b/src/ui/elements/ui_theme.cpp @@ -1,10 +1,15 @@ #include #include "ui_theme.h" -using ThemeColor = recompui::ThemeColor; +using ThemeColor = recompui::theme::color; using ThemeColorArray = std::array; using ThemeColorNameArray = std::array; +float recompui::theme::border::radius_sm = 8.0f; +float recompui::theme::border::radius_md = 12.0f; +float recompui::theme::border::radius_lg = 16.0f; +float recompui::theme::border::width = 1.1f; + constexpr ThemeColorArray get_default_theme_color_array() { ThemeColorArray colors; @@ -194,14 +199,14 @@ constexpr ThemeColorNameArray get_default_theme_color_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) { +void recompui::theme::set_theme_color(recompui::theme::color color, const recompui::Color &value) { theme_colors[(std::size_t)color] = value; } -const recompui::Color &recompui::get_theme_color(recompui::ThemeColor color) { +const recompui::Color &recompui::theme::get_theme_color(recompui::theme::color color) { return theme_colors[(std::size_t)color]; } -const char *recompui::get_theme_color_name(recompui::ThemeColor color) { +const char *recompui::theme::get_theme_color_name(recompui::theme::color color) { return theme_color_names[(std::size_t)color]; } diff --git a/src/ui/elements/ui_theme.h b/src/ui/elements/ui_theme.h index 8d57a79..de5c96d 100644 --- a/src/ui/elements/ui_theme.h +++ b/src/ui/elements/ui_theme.h @@ -3,93 +3,103 @@ #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, + namespace theme { + enum class color { + 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, - }; + 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 border { + extern float radius_sm; + extern float radius_md; + extern float radius_lg; + extern float width; + } + + const char *get_theme_color_name(theme::color color); + void set_theme_color(theme::color color, const recompui::Color &value); + const recompui::Color &get_theme_color(theme::color color); + + } // namespace theme } // namespace recompui diff --git a/src/ui/elements/ui_toggle.cpp b/src/ui/elements/ui_toggle.cpp index b1813fd..7588e27 100644 --- a/src/ui/elements/ui_toggle.cpp +++ b/src/ui/elements/ui_toggle.cpp @@ -5,29 +5,34 @@ #include namespace recompui { + static constexpr float toggle_height = 72.0f; + static constexpr float toggle_width = 162.0f; + + static constexpr float toggle_floater_height = 64.0f; + static constexpr float toggle_floater_width = 80.0f; Toggle::Toggle(Element *parent) : Element(parent, Events(EventType::Click, EventType::Focus, EventType::Hover, EventType::Enable), "button") { enable_focus(); - set_width(162.0f); - set_height(72.0f); - set_border_radius(36.0f); + set_width(toggle_width); + set_height(toggle_height); + set_border_radius(toggle_height * 0.5f); set_opacity(0.9f); set_cursor(Cursor::Pointer); - set_border_width(2.0f); - set_border_color(ThemeColor::BW50); - set_background_color(ThemeColor::Transparent); - checked_style.set_border_color(ThemeColor::Primary); - hover_style.set_border_color(ThemeColor::BW50); - hover_style.set_background_color(ThemeColor::WhiteA5); - focus_style.set_border_color(ThemeColor::BW50); - focus_style.set_background_color(ThemeColor::WhiteA5); - checked_hover_style.set_border_color(ThemeColor::Primary); - checked_hover_style.set_background_color(ThemeColor::PrimaryA30); - checked_focus_style.set_border_color(ThemeColor::Primary); - checked_focus_style.set_background_color(ThemeColor::PrimaryA30); - disabled_style.set_border_color(ThemeColor::BW50, 128); - checked_disabled_style.set_border_color(ThemeColor::PrimaryD, 128); + set_border_width(theme::border::width); + set_border_color(theme::color::BW50); + set_background_color(theme::color::Transparent); + checked_style.set_border_color(theme::color::Primary); + hover_style.set_border_color(theme::color::BW50); + hover_style.set_background_color(theme::color::WhiteA5); + focus_style.set_border_color(theme::color::BW50); + focus_style.set_background_color(theme::color::WhiteA5); + checked_hover_style.set_border_color(theme::color::Primary); + checked_hover_style.set_background_color(theme::color::PrimaryA30); + checked_focus_style.set_border_color(theme::color::Primary); + checked_focus_style.set_background_color(theme::color::PrimaryA30); + disabled_style.set_border_color(theme::color::BW50, 128); + checked_disabled_style.set_border_color(theme::color::PrimaryD, 128); add_style(&checked_style, checked_state); add_style(&hover_style, hover_state); add_style(&focus_style, focus_state); @@ -41,13 +46,13 @@ namespace recompui { floater = context.create_element(this); floater->set_position(Position::Relative); floater->set_top(2.0f); - floater->set_width(80.0f); - floater->set_height(64.0f); - floater->set_border_radius(32.0f); - floater->set_background_color(ThemeColor::TextDim); - floater_checked_style.set_background_color(ThemeColor::Primary); - floater_disabled_style.set_background_color(ThemeColor::TextDim, 128); - floater_disabled_checked_style.set_background_color(ThemeColor::PrimaryD, 128); + floater->set_width(toggle_floater_width); + floater->set_height(toggle_floater_height); + floater->set_border_radius(toggle_height * 0.5f); + floater->set_background_color(theme::color::TextDim); + floater_checked_style.set_background_color(theme::color::Primary); + floater_disabled_style.set_background_color(theme::color::TextDim, 128); + floater_disabled_checked_style.set_background_color(theme::color::PrimaryD, 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 }); diff --git a/src/ui/ui_color_hack.cpp b/src/ui/ui_color_hack.cpp index edc18e4..fccb283 100644 --- a/src/ui/ui_color_hack.cpp +++ b/src/ui/ui_color_hack.cpp @@ -38,9 +38,9 @@ namespace recompui { 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); + for (std::size_t i = 0; i < (std::size_t)recompui::theme::color::size; i++) { + const char *color_name = recompui::theme::get_theme_color_name((recompui::theme::color)i); + const recompui::Color color_value = recompui::theme::get_theme_color((recompui::theme::color)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); } diff --git a/src/ui/ui_mod_details_panel.cpp b/src/ui/ui_mod_details_panel.cpp index 66d5f22..da6760b 100644 --- a/src/ui/ui_mod_details_panel.cpp +++ b/src/ui/ui_mod_details_panel.cpp @@ -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(ThemeColor::BGOverlay); + set_background_color(theme::color::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(ThemeColor::BGShadow); - header_container->set_border_bottom_width(1.1f); - header_container->set_border_bottom_color(ThemeColor::BorderSoft); + header_container->set_background_color(theme::color::BGShadow); + header_container->set_border_bottom_width(theme::border::width); + header_container->set_border_bottom_color(theme::color::BorderSoft); { thumbnail_container = context.create_element(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(thumbnail_container, ""); thumbnail_image->set_width(100.0f); thumbnail_image->set_height(100.0f); - thumbnail_image->set_background_color(ThemeColor::BGOverlay); + thumbnail_image->set_background_color(theme::color::BGOverlay); } header_details_container = context.create_element(header_container, FlexDirection::Column, JustifyContent::SpaceEvenly); @@ -55,9 +55,9 @@ ModDetailsPanel::ModDetailsPanel(Element *parent) : Element(parent) { buttons_container->set_flex(0.0f, 0.0f); 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(ThemeColor::BorderSoft); - buttons_container->set_background_color(ThemeColor::BGShadow); + buttons_container->set_border_top_width(theme::border::width); + buttons_container->set_border_top_color(theme::color::BorderSoft); + buttons_container->set_background_color(theme::color::BGShadow); { enable_container = context.create_element(buttons_container, FlexDirection::Row, JustifyContent::FlexStart); enable_container->set_align_items(AlignItems::Center); diff --git a/src/ui/ui_mod_menu.cpp b/src/ui/ui_mod_menu.cpp index 350680a..2b4ee8e 100644 --- a/src/ui/ui_mod_menu.cpp +++ b/src/ui/ui_mod_menu.cpp @@ -42,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(ThemeColor::BorderSoft); - set_background_color(ThemeColor::BorderSoft); + set_border_color(theme::color::BorderSoft); + set_background_color(theme::color::BorderSoft); set_cursor(Cursor::Pointer); - set_color(ThemeColor::Text); + set_color(theme::color::Text); - 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); + checked_style.set_border_color(theme::color::BorderSolid); + checked_style.set_color(theme::color::White); + checked_style.set_background_color(recompui::theme::color::Background3); + hover_style.set_border_color(theme::color::BorderHard); + checked_hover_style.set_border_color(theme::color::Text); + pulsing_style.set_border_color(theme::color::SecondaryA80); { thumbnail_image = context.create_element(this, ""); @@ -60,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(ThemeColor::BGOverlay); + thumbnail_image->set_background_color(theme::color::BGOverlay); body_container = context.create_element(this); @@ -75,7 +75,7 @@ ModEntryView::ModEntryView(Element *parent) : Element(parent, Events(EventType:: name_label = context.create_element