mirror of
https://github.com/izzy2lost/BanjoRecomp.git
synced 2026-06-19 01:16:11 -07:00
Refactor color usage for full theming support from one source of truth (#1)
* 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
@@ -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
|
||||
|
||||
Binary file not shown.
@@ -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>
|
||||
@@ -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"> -->
|
||||
|
||||
@@ -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" />
|
||||
|
||||
+265
-266
File diff suppressed because it is too large
Load Diff
@@ -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]) {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -195,7 +195,7 @@ $all-inputs: A,
|
||||
}
|
||||
|
||||
&--Start {
|
||||
@include set-svgs-color($color-error);
|
||||
@include set-svgs-color($color-danger);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -13,7 +13,6 @@ hr {
|
||||
|
||||
body {
|
||||
color: #fff;
|
||||
font-family: LatoLatin;
|
||||
font-size: 20dp;
|
||||
font-style: normal;
|
||||
font-weight: normal
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
$font-stack: LatoLatin;
|
||||
$font-stack: 'Suplexmentary Comic NC';
|
||||
|
||||
@mixin set-font-sizing($sz, $spacing) {
|
||||
// font-family: $font-stack;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
+5
-13
@@ -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(
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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});
|
||||
};
|
||||
|
||||
|
||||
@@ -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
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user