mirror/BanjoRecomp
1
0
Fork 0
mirror of https://github.com/BanjoRecomp/BanjoRecomp synced 2026-05-23 06:34:20 -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
CMakeLists.txt
+2
View File
@@ -153,6 +153,7 @@ set (SOURCES
${CMAKE_SOURCE_DIR}/src/main/register_overlays.cpp
${CMAKE_SOURCE_DIR}/src/main/register_patches.cpp
${CMAKE_SOURCE_DIR}/src/main/rt64_render_context.cpp
${CMAKE_SOURCE_DIR}/src/main/theme.cpp
${CMAKE_SOURCE_DIR}/src/game/input.cpp
${CMAKE_SOURCE_DIR}/src/game/controls.cpp
@@ -193,6 +194,7 @@ set (SOURCES
${CMAKE_SOURCE_DIR}/src/ui/elements/ui_span.cpp
${CMAKE_SOURCE_DIR}/src/ui/elements/ui_style.cpp
${CMAKE_SOURCE_DIR}/src/ui/elements/ui_text_input.cpp
${CMAKE_SOURCE_DIR}/src/ui/elements/ui_theme.cpp
${CMAKE_SOURCE_DIR}/src/ui/elements/ui_toggle.cpp
${CMAKE_SOURCE_DIR}/rsp/n_aspMain.cpp
assets/Suplexmentary Comic NC.ttf
BIN
View File
Binary file not shown.
assets/components/prompt.rml
-30
View File
@@ -1,30 +0,0 @@
<template name="prompt">
<head>
</head>
<body class="prompt">
<div class="prompt__overlay" />
<div class="prompt__content-wrapper" data-if="promptOpen">
<div class="prompt__content">
<h3>{{ promptHeader }}</h3>
<p>{{ promptContent }}</p>
<div class="prompt__controls">
<button
autofocus="true"
id="prompt__confirm-button"
class="button button--success"
style="nav-left: none; nav-right: #prompt__cancel-button"
>
<div class="button__label" id="prompt__confirm-button-label">{{ promptConfirmLabel }}</div>
</button>
<button
id="prompt__cancel-button"
class="button button--error"
style="nav-right: none; nav-left: #prompt__confirm-button"
>
<div class="button__label" id="prompt__cancel-button-label">{{ promptCancelLabel }}</div>
</button>
</div>
</div>
</div>
</body>
</template>
assets/config_menu.rml
-1
View File
@@ -29,7 +29,6 @@
<link type="text/template" href="config_menu/sound.rml" />
<link type="text/template" href="config_menu/mods.rml" />
<link type="text/template" href="config_menu/debug.rml" />
<link type="text/template" href="components/prompt.rml" />
</head>
<body class="window">
<!-- <handle move_target="#document"> -->
assets/config_menu/controls.rml
+2 -2
View File
@@ -71,7 +71,7 @@
data-event-blur="set_input_row_focus(-1)"
data-event-focus="set_input_row_focus(i)"
data-event-click="clear_input_bindings(i)"
class="icon-button icon-button--error"
class="icon-button icon-button--danger"
data-attr-style="i == 0 ? 'nav-up:#cont_kb_toggle' : 'nav-up:auto'"
>
<svg src="icons/Trash.svg" />
@@ -81,7 +81,7 @@
data-event-blur="set_input_row_focus(-1)"
data-event-focus="set_input_row_focus(i)"
data-event-click="reset_single_input_binding_to_default(i)"
class="icon-button icon-button--error"
class="icon-button icon-button--danger"
data-attr-style="i == 0 ? 'nav-up:#cont_kb_toggle' : 'nav-up:auto'"
>
<svg src="icons/Reset.svg" />
assets/recomp.rcss
+265 -266
View File
File diff suppressed because it is too large Load Diff
assets/scss/styles/components/Button.scss
+14 -14
View File
@@ -1,13 +1,13 @@
@use 'sass:color';
@mixin create-button-variation($base-col) {
border-color: rgba($base-col, 0.8);
background-color: rgba($base-col, 0.05);
@mixin create-button-variation($base-col, $base-col-05, $base-col-20, $base-col-30, $base-col-80) {
border-color: $base-col-80;
background-color: $base-col-05;
color: $color-text-dim;
&:focus, &:hover {
border-color: $base-col;
background-color: rgba($base-col, 0.3);
background-color: $base-col-30;
color: $color-text;
}
@@ -16,15 +16,15 @@
}
&:active {
background-color: rgba($base-col, 0.2);
color: color.scale($color-text, $lightness: 20%);
background-color: $base-col-20;
color: $color-text-active;
}
}
.button {
@extend %label-md;
@extend %nav-all;
@include create-button-variation($color-primary);
@include create-button-variation($color-primary, $color-primary-a5, $color-primary-a20, $color-primary-a30, $color-primary-a80);
@include trans-colors;
display: block;
@@ -38,7 +38,7 @@
// Setting it by default for convenience
&--primary {
@include create-button-variation($color-primary);
@include create-button-variation($color-primary, $color-primary-a5, $color-primary-a20, $color-primary-a30, $color-primary-a80);
}
&--large {
@@ -46,23 +46,23 @@
}
&--secondary {
@include create-button-variation($color-secondary);
@include create-button-variation($color-secondary, $color-secondary-a5, $color-secondary-a20, $color-secondary-a30, $color-secondary-a80);
}
&--tertiary {
@include create-button-variation($color-text);
@include create-button-variation($color-text, $color-text-a5, $color-text-a20, $color-text-a30, $color-text-a80);
}
&--success {
@include create-button-variation($color-success);
@include create-button-variation($color-success, $color-success-a5, $color-success-a20, $color-success-a30, $color-success-a80);
}
&--error {
@include create-button-variation($color-error);
&--danger {
@include create-button-variation($color-danger, $color-danger-a5, $color-danger-a20, $color-danger-a30, $color-danger-a80);
}
&--warning {
@include create-button-variation($color-warning);
@include create-button-variation($color-warning, $color-warning-a5, $color-warning-a20, $color-warning-a30, $color-warning-a80);
}
&:not([disabled]) {
assets/scss/styles/components/ControlOption.scss
+4 -4
View File
@@ -31,7 +31,7 @@
@each $slot in $valid-binding-slots {
// global attr -> this active row -> binding slot
[cur-binding-slot="#{$slot}"] & .control-option__binding[bind-slot="#{$slot}"] {
border-color: $color-error;
border-color: $color-danger;
.control-option__binding-icon {
opacity: 0;
@@ -93,7 +93,7 @@
}
&:active {
@include set-color(color.scale($color-text, $lightness: 20%));
@include set-color($color-text-active);
}
&:disabled, &[disabled] {
@@ -145,7 +145,7 @@
height: space($rec-size);
animation: 1.5s sine-in-out infinite control-option__binding-recording-scale;
border-radius: space($rec-size);
background-color: $color-error;
background-color: $color-danger;
}
.control-option__binding-edge {
@@ -164,7 +164,7 @@
> svg.control-option__binding-edge-svg {
width: space($edge-size);
height: space($edge-size);
image-color: $color-error;
image-color: $color-danger;
}
}
}
assets/scss/styles/components/IconButton.scss
+14 -14
View File
@@ -2,22 +2,22 @@
/*
<button
class="icon-button icon-button--error"
class="icon-button icon-button--danger"
>
<svg src="icons/Trash.svg" />
</button>
*/
@mixin create-icon-button-variation($base-col) {
border-color: rgba($base-col, 0.8);
background-color: rgba($base-col, 0.05);
@mixin create-icon-button-variation($base-col, $base-col-05, $base-col-20, $base-col-30, $base-col-80) {
border-color: $base-col-80;
background-color: $base-col-05;
&:focus, &:hover {
border-color: $base-col;
background-color: rgba($base-col, 0.3);
background-color: $base-col-30;
}
&:active {
background-color: rgba($base-col, 0.2);
background-color: $base-col-20;
}
}
@@ -47,7 +47,7 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
}
&:active {
@include set-color(color.scale($color-text, $lightness: 20%));
@include set-color($color-text-active);
background-color: $color-border-soft;
}
@@ -67,26 +67,26 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
}
&--primary {
@include create-icon-button-variation($color-primary);
@include create-icon-button-variation($color-primary, $color-primary-a5, $color-primary-a20, $color-primary-a30, $color-primary-a80);
}
&--secondary {
@include create-icon-button-variation($color-secondary);
@include create-icon-button-variation($color-secondary, $color-secondary-a5, $color-secondary-a20, $color-secondary-a30, $color-secondary-a80);
}
&--tertiary {
@include create-icon-button-variation($color-text);
@include create-icon-button-variation($color-text, $color-text-a5, $color-text-a20, $color-text-a30, $color-text-a80);
}
&--success {
@include create-icon-button-variation($color-success);
@include create-icon-button-variation($color-success, $color-success-a5, $color-success-a20, $color-success-a30, $color-success-a80);
}
&--error {
@include create-icon-button-variation($color-error);
&--danger {
@include create-icon-button-variation($color-danger, $color-danger-a5, $color-danger-a20, $color-danger-a30, $color-danger-a80);
}
&--warning {
@include create-icon-button-variation($color-warning);
@include create-icon-button-variation($color-warning, $color-warning-a5, $color-warning-a20, $color-warning-a30, $color-warning-a80);
}
}
assets/scss/styles/components/InputConfig.scss
+1 -1
View File
@@ -195,7 +195,7 @@ $all-inputs: A,
}
&--Start {
@include set-svgs-color($color-error);
@include set-svgs-color($color-danger);
}
}
assets/scss/styles/components/MenuListItem.scss
+4 -2
View File
@@ -35,14 +35,16 @@
&.menu-list-item:focus:not(:disabled, [disabled]),
&.menu-list-item:hover:not(:disabled, [disabled]) {
decorator: $primary-rl-fade;
// decorator: $primary-rl-fade;
background-color: $color-white-a5;
}
}
&:focus:not(:disabled, [disabled]),
&:hover:not(:disabled, [disabled]) {
@include set-color($color-primary);
decorator: $primary-lr-fade;
// decorator: $primary-lr-fade;
background-color: $color-white-a5;
.menu-list-item__bullet {
opacity: 1;
assets/scss/styles/global.scss
+8 -6
View File
@@ -1,10 +1,4 @@
@import "./base";
@import "./globals/old";
@import "./globals/scrollbars";
@import "./components/components";
@import "./pages/pages";
$font-size: 20dp;
body
{
@@ -14,6 +8,14 @@ body
font-family: $font-stack;
}
@import "./globals/old";
@import "./globals/scrollbars";
@import "./components/components";
@import "./pages/pages";
$font-size: 20dp;
.rmlui-window {
opacity: 1;
assets/scss/styles/globals/_old.scss
-1
View File
@@ -13,7 +13,6 @@ hr {
body {
color: #fff;
font-family: LatoLatin;
font-size: 20dp;
font-style: normal;
font-weight: normal
assets/scss/styles/mixins/_typography.scss
+1 -1
View File
@@ -1,5 +1,5 @@
$font-stack: LatoLatin;
$font-stack: 'Suplexmentary Comic NC';
@mixin set-font-sizing($sz, $spacing) {
// font-family: $font-stack;
assets/scss/styles/vars/_colors.scss
+81 -69
View File
@@ -1,71 +1,83 @@
/* stylelint-disable color-no-hex, color-hex-length */
$color-background-1: #08070D;
$color-background-2: #121018;
$color-background-3: #191622;
$color-bg-overlay: rgba(190, 184, 219, 0.1000);
$color-modal-overlay: rgba(8, 7, 13, 0.9000);
$color-bg-shadow: rgba(0, 0, 0, 0.3500);
$color-bg-shadow-2: rgba(8, 7, 13, 0.7200);
$color-text: #F2F2F2;
$color-text-dim: #CCCCCC;
$color-text-inactive: rgba(255, 255, 255, 0.6000);
$color-primary: #B97DF2;
$color-primary-l: #DABAF7;
$color-primary-d: #7A2AC6;
$color-primary-a5: rgba(185, 125, 242, 0.0500);
$color-primary-a20: rgba(185, 125, 242, 0.2000);
$color-primary-a30: rgba(185, 125, 242, 0.3000);
$color-primary-a50: rgba(185, 125, 242, 0.5000);
$color-primary-a80: rgba(185, 125, 242, 0.8000);
$color-secondary: #17D6E8;
$color-secondary-l: #A2EFF6;
$color-secondary-d: #25A1AD;
$color-secondary-a5: rgba(23, 214, 232, 0.0500);
$color-secondary-a20: rgba(23, 214, 232, 0.2000);
$color-secondary-a30: rgba(23, 214, 232, 0.3000);
$color-secondary-a50: rgba(23, 214, 232, 0.5000);
$color-secondary-a80: rgba(23, 214, 232, 0.8000);
$color-warning: #E9CD35;
$color-warning-l: #F9E57C;
$color-warning-d: #C5AA16;
$color-warning-a5: rgba(233, 205, 53, 0.0500);
$color-warning-a20: rgba(233, 205, 53, 0.2000);
$color-warning-a30: rgba(233, 205, 53, 0.3000);
$color-warning-a50: rgba(233, 205, 53, 0.5000);
$color-warning-a80: rgba(233, 205, 53, 0.8000);
$color-error: #F86039;
$color-error-l: #FE8667;
$color-error-d: #B23919;
$color-error-a5: rgba(248, 96, 57, 0.0500);
$color-error-a20: rgba(248, 96, 57, 0.2000);
$color-error-a30: rgba(248, 96, 57, 0.3000);
$color-error-a50: rgba(248, 96, 57, 0.5000);
$color-error-a80: rgba(248, 96, 57, 0.8000);
$color-success: #45D043;
$color-success-l: #AAEAA9;
$color-success-d: #2CA72A;
$color-success-a5: rgba(69, 208, 67, 0.0500);
$color-success-a20: rgba(69, 208, 67, 0.2000);
$color-success-a30: rgba(69, 208, 67, 0.3000);
$color-success-a50: rgba(69, 208, 67, 0.5000);
$color-success-a80: rgba(69, 208, 67, 0.8000);
$color-border: rgba(255, 255, 255, 0.2000);
$color-border-soft: rgba(255, 255, 255, 0.1000);
$color-border-hard: rgba(255, 255, 255, 0.3000);
$color-border-solid: rgba(255, 255, 255, 0.6000);
$color-transparent: rgba(0, 0, 0, 0.0000);
$color-a: #3333FF;
$color-a-l: #B2B2FF;
$color-a-d: #2020AC;
$color-a-a5: rgba(51, 51, 255, 0.0500);
$color-a-a20: rgba(51, 51, 255, 0.2000);
$color-a-a30: rgba(51, 51, 255, 0.3000);
$color-a-a50: rgba(51, 51, 255, 0.5000);
$color-a-a80: rgba(51, 51, 255, 0.8000);
$color-white: #FFFFFF;
$color-white-a5: rgba(255, 255, 255, 0.0500);
$color-white-a20: rgba(255, 255, 255, 0.2000);
$color-white-a30: rgba(255, 255, 255, 0.3000);
$color-white-a50: rgba(255, 255, 255, 0.5000);
$color-white-a80: rgba(255, 255, 255, 0.8000);
$color-background-1: Background1;
$color-background-2: Background2;
$color-background-3: Background3;
$color-bg-overlay: BGOverlay;
$color-modal-overlay: ModalOverlay;
$color-bg-shadow: BGShadow;
$color-bg-shadow-2: BGShadow2;
$color-text: Text;
$color-text-active: TextActive;
$color-text-dim: TextDim;
$color-text-inactive: TextInactive;
$color-text-a5: TextA5;
$color-text-a20: TextA20;
$color-text-a30: TextA30;
$color-text-a50: TextA50;
$color-text-a80: TextA80;
$color-primary: Primary;
$color-primary-l: PrimaryL;
$color-primary-d: PrimaryD;
$color-primary-a5: PrimaryA5;
$color-primary-a20: PrimaryA20;
$color-primary-a30: PrimaryA30;
$color-primary-a50: PrimaryA50;
$color-primary-a80: PrimaryA80;
$color-secondary: Secondary;
$color-secondary-l: SecondaryL;
$color-secondary-d: SecondaryD;
$color-secondary-a5: SecondaryA5;
$color-secondary-a20: SecondaryA20;
$color-secondary-a30: SecondaryA30;
$color-secondary-a50: SecondaryA50;
$color-secondary-a80: SecondaryA80;
$color-warning: Warning;
$color-warning-l: WarningL;
$color-warning-d: WarningD;
$color-warning-a5: WarningA5;
$color-warning-a20: WarningA20;
$color-warning-a30: WarningA30;
$color-warning-a50: WarningA50;
$color-warning-a80: WarningA80;
$color-danger: Danger;
$color-danger-l: DangerL;
$color-danger-d: DangerD;
$color-danger-a5: DangerA5;
$color-danger-a20: DangerA20;
$color-danger-a30: DangerA30;
$color-danger-a50: DangerA50;
$color-danger-a80: DangerA80;
$color-success: Success;
$color-success-l: SuccessL;
$color-success-d: SuccessD;
$color-success-a5: SuccessA5;
$color-success-a20: SuccessA20;
$color-success-a30: SuccessA30;
$color-success-a50: SuccessA50;
$color-success-a80: SuccessA80;
$color-border: Border;
$color-border-soft: BorderSoft;
$color-border-hard: BorderHard;
$color-border-solid: BorderSolid;
$color-transparent: Transparent;
$color-a: A;
$color-a-l: AL;
$color-a-d: AD;
$color-a-a5: AA5;
$color-a-a20: AA20;
$color-a-a30: AA30;
$color-a-a50: AA50;
$color-a-a80: AA80;
$color-white: White;
$color-white-a5: WhiteA5;
$color-white-a20: WhiteA20;
$color-white-a30: WhiteA30;
$color-white-a50: WhiteA50;
$color-white-a80: WhiteA80;
$color-bw-05: BW05;
$color-bw-10: BW10;
$color-bw-25: BW25;
$color-bw-50: BW50;
$color-bw-75: BW75;
$color-bw-90: BW90;
assets/scss/styles/vars/_gradients.scss
+4 -2
View File
@@ -3,5 +3,7 @@
// $primary-lr-fade: linear-gradient(90deg, rgba($color-primary-l, 0.08) 0%, rgba($color-primary-l, 0.00) 100%);
// $primary-rl-fade: linear-gradient(90deg, rgba($color-primary-l, 0.00) 0%, rgba($color-primary-l, 0.08) 100%);
$primary-lr-fade: horizontal-gradient(#{$color-primary-d}14 #{$color-primary-l}00);
$primary-rl-fade: horizontal-gradient(#{$color-primary-d}00 #{$color-primary-l}14);
// $primary-lr-fade: horizontal-gradient(#{$color-primary-d}14 #{$color-primary-l}00);
// $primary-rl-fade: horizontal-gradient(#{$color-primary-d}00 #{$color-primary-l}14);
$primary-lr-fade: horizontal-gradient(#ff000014 #ff000000);
$primary-rl-fade: horizontal-gradient(#ff000000 #ff000014);
include/recomp_ui.h
+5 -13
View File
@@ -13,6 +13,8 @@
#include "../src/ui/util/hsv.h"
#include "../src/ui/util/bem.h"
#include "../src/ui/elements/ui_button.h"
#include "../src/ui/elements/ui_theme.h"
#include "../src/ui/core/ui_context.h"
@@ -75,16 +77,6 @@ namespace recompui {
void set_config_tabset_mod_nav();
void focus_mod_configure_button();
enum class ButtonVariant {
Primary,
Secondary,
Tertiary,
Success,
Error,
Warning,
NumVariants,
};
void init_styling(const std::filesystem::path& rcss_file);
void init_prompt_context();
void open_choice_prompt(
@@ -94,8 +86,8 @@ namespace recompui {
const std::string& cancel_label_text,
std::function<void()> confirm_action,
std::function<void()> cancel_action,
ButtonVariant confirm_variant = ButtonVariant::Success,
ButtonVariant cancel_variant = ButtonVariant::Error,
ButtonStyle confirm_variant = ButtonStyle::Success,
ButtonStyle cancel_variant = ButtonStyle::Danger,
bool focus_on_cancel = true,
const std::string& return_element_id = ""
);
@@ -104,7 +96,7 @@ namespace recompui {
const std::string& content_text,
const std::string& okay_label_text,
std::function<void()> okay_action,
ButtonVariant okay_variant = ButtonVariant::Error,
ButtonStyle okay_variant = ButtonStyle::Danger,
const std::string& return_element_id = ""
);
void open_notification(
src/main/main.cpp
+2
View File
@@ -29,6 +29,7 @@
#include "banjo_game.h"
#include "recomp_data.h"
#include "ovl_patches.hpp"
#include "theme.h"
#include "librecomp/game.hpp"
#include "librecomp/mods.hpp"
#include "librecomp/helpers.hpp"
@@ -602,6 +603,7 @@ int main(int argc, char** argv) {
REGISTER_FUNC(recomp_get_analog_inverted_axes);
recompui::register_ui_exports();
recomputil::register_data_api_exports();
recomptheme::set_custom_theme();
banjo::register_bk_overlays();
banjo::register_bk_patches();
src/main/theme.cpp
+88
View File
@@ -0,0 +1,88 @@
#include "recomp_ui.h"
#include "theme.h"
void recomptheme::set_custom_theme() {
recompui::set_theme_color(recompui::ThemeColor::Background1, recompui::Color{2, 7, 18, 255});
recompui::set_theme_color(recompui::ThemeColor::Background2, recompui::Color{7, 15, 34, 255});
recompui::set_theme_color(recompui::ThemeColor::Background3, recompui::Color{18, 24, 38, 255});
recompui::set_theme_color(recompui::ThemeColor::BGOverlay, recompui::Color{182, 194, 221, 26});
recompui::set_theme_color(recompui::ThemeColor::ModalOverlay, recompui::Color{2, 7, 18, 229});
recompui::set_theme_color(recompui::ThemeColor::BGShadow, recompui::Color{0, 0, 0, 89});
recompui::set_theme_color(recompui::ThemeColor::BGShadow2, recompui::Color{2, 7, 18, 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});
};
src/main/theme.h
+6
View File
@@ -0,0 +1,6 @@
#pragma once
namespace recomptheme {
// Applies custom themes. recompui::apply_color_hack MUST be called after.
void set_custom_theme();
} // namespace recomptheme
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
);
}