diff --git a/CMakeLists.txt b/CMakeLists.txt index 921cb3a..e0ab362 100644 --- a/CMakeLists.txt +++ b/CMakeLists.txt @@ -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 diff --git a/assets/Suplexmentary Comic NC.ttf b/assets/Suplexmentary Comic NC.ttf new file mode 100644 index 0000000..65b1e6f Binary files /dev/null and b/assets/Suplexmentary Comic NC.ttf differ diff --git a/assets/components/prompt.rml b/assets/components/prompt.rml deleted file mode 100644 index 3de53ea..0000000 --- a/assets/components/prompt.rml +++ /dev/null @@ -1,30 +0,0 @@ - diff --git a/assets/config_menu.rml b/assets/config_menu.rml index 0666d77..8d582dc 100644 --- a/assets/config_menu.rml +++ b/assets/config_menu.rml @@ -29,7 +29,6 @@ - diff --git a/assets/config_menu/controls.rml b/assets/config_menu/controls.rml index d947ae8..3a8371e 100644 --- a/assets/config_menu/controls.rml +++ b/assets/config_menu/controls.rml @@ -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'" > @@ -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'" > diff --git a/assets/recomp.rcss b/assets/recomp.rcss index eed389c..488f346 100644 --- a/assets/recomp.rcss +++ b/assets/recomp.rcss @@ -57,7 +57,7 @@ h3, .tab { font-weight: 400; } -body, .config-debug__select-wrapper select, .config-debug__select-wrapper input, .config-description__contents, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .config__wrapper p { +.config-debug__select-wrapper select, .config-debug__select-wrapper input, .config-description__contents, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .config__wrapper p, body { font-size: 20dp; letter-spacing: 0dp; line-height: 20dp; @@ -184,7 +184,7 @@ h3, .tab { font-weight: 400; } -body, .config-debug__select-wrapper select, .config-debug__select-wrapper input, .config-description__contents, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .config__wrapper p { +.config-debug__select-wrapper select, .config-debug__select-wrapper input, .config-description__contents, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .config__wrapper p, body { font-size: 20dp; letter-spacing: 0dp; line-height: 20dp; @@ -252,6 +252,12 @@ body, .config-debug__select-wrapper select, .config-debug__select-wrapper input, /* @include set-color(COLOR); */ +body { + box-sizing: border-box; + color: Text; + font-family: "Suplexmentary Comic NC"; +} + /* stylelint-disable color-no-hex */ /* stylelint-disable selector-max-id */ * { @@ -261,12 +267,11 @@ body, .config-debug__select-wrapper select, .config-debug__select-wrapper input, hr { display: block; padding: 1.5dp; - background: #08070D; + background: Background1; } body { color: #fff; - font-family: LatoLatin; font-size: 20dp; font-style: normal; font-weight: normal; @@ -281,8 +286,8 @@ div#window { box-sizing: border-box; width: 100%; height: 100%; - border-color: rgba(255, 255, 255, 0.2); - background-color: #121018; + border-color: Border; + background-color: Background2; } div#content { @@ -368,12 +373,12 @@ scrollbarvertical, scrollbarhorizontal { border: 0; } scrollbarvertical slidertrack, scrollbarhorizontal slidertrack { - background: #DABAF7; + background: PrimaryL; opacity: 0.05; } scrollbarvertical sliderbar, scrollbarhorizontal sliderbar { border-radius: 5dp; - background: #DABAF7; + background: PrimaryL; opacity: 0.1; } scrollbarvertical sliderbar:hover:not(:active), scrollbarhorizontal sliderbar:hover:not(:active) { @@ -415,7 +420,7 @@ scrollbarhorizontal sliderbar { bottom: 0; left: 0; padding: 64dp; - background-color: rgba(255, 255, 255, 0.1); + background-color: BorderSoft; } .centered-page__modal { @@ -429,8 +434,8 @@ scrollbarhorizontal sliderbar { margin: auto; border-width: 1.1dp; border-radius: 16dp; - border-color: rgba(255, 255, 255, 0.2); - background: rgba(8, 7, 13, 0.9); + border-color: Border; + background: ModalOverlay; } .centered-page__modal > .tabs { display: flex; @@ -473,7 +478,7 @@ scrollbarhorizontal sliderbar { } .control-option { - color: #CCCCCC; + color: TextDim; transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out; display: flex; position: relative; @@ -487,23 +492,23 @@ scrollbarhorizontal sliderbar { background-color: rgba(0, 0, 0, 0); } .control-option svg { - image-color: #CCCCCC; + image-color: TextDim; } .control-option svg { transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out; } .control-option:focus-visible:not(:disabled, [disabled]), .control-option:hover:not(:disabled, [disabled]) { - color: #F2F2F2; - background-color: rgba(190, 184, 219, 0.1); + color: Text; + background-color: BGOverlay; } .control-option:focus-visible:not(:disabled, [disabled]) svg, .control-option:hover:not(:disabled, [disabled]) svg { - image-color: #F2F2F2; + image-color: Text; } .control-option:disabled, .control-option[disabled] { opacity: 0.5; } [cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"] { - border-color: #F86039; + border-color: Danger; } [cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"] .control-option__binding-icon { opacity: 0; @@ -512,7 +517,7 @@ scrollbarhorizontal sliderbar { opacity: 1; } [cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"] { - border-color: #F86039; + border-color: Danger; } [cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"] .control-option__binding-icon { opacity: 0; @@ -543,7 +548,7 @@ scrollbarhorizontal sliderbar { } .control-option__binding { - color: #CCCCCC; + color: TextDim; transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out, border-color 0.05s linear-in-out; display: flex; position: relative; @@ -556,35 +561,35 @@ scrollbarhorizontal sliderbar { padding: 8dp; border-width: 1.1dp; border-radius: 8dp; - border-color: rgba(190, 184, 219, 0.1); - background-color: rgba(190, 184, 219, 0.1); + border-color: BGOverlay; + background-color: BGOverlay; } .control-option__binding svg { - image-color: #CCCCCC; + image-color: TextDim; } .control-option__binding svg { transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out; } .control-option__binding:focus, .control-option__binding:hover { - color: #F2F2F2; - border-color: #F2F2F2; - background-color: rgba(255, 255, 255, 0.1); + color: Text; + border-color: Text; + background-color: BorderSoft; } .control-option__binding:focus svg, .control-option__binding:hover svg { - image-color: #F2F2F2; + image-color: Text; } .control-option__binding:active { - color: rgb(244.6, 244.6, 244.6); + color: TextActive; } .control-option__binding:active svg { - image-color: rgb(244.6, 244.6, 244.6); + image-color: TextActive; } .control-option__binding:disabled, .control-option__binding[disabled] { - color: #CCCCCC; + color: TextDim; opacity: 0.5; } .control-option__binding:disabled svg, .control-option__binding[disabled] svg { - image-color: #CCCCCC; + image-color: TextDim; } .control-option__binding:not([disabled]) { cursor: pointer; @@ -623,7 +628,7 @@ scrollbarhorizontal sliderbar { height: 24dp; animation: 1.5s sine-in-out infinite control-option__binding-recording-scale; border-radius: 24dp; - background-color: #F86039; + background-color: Danger; } .control-option__binding-recording .control-option__binding-edge { position: absolute; @@ -636,7 +641,7 @@ scrollbarhorizontal sliderbar { .control-option__binding-recording .control-option__binding-edge > svg.control-option__binding-edge-svg { width: 36dp; height: 36dp; - image-color: #F86039; + image-color: Danger; } /* @@ -661,13 +666,13 @@ scrollbarhorizontal sliderbar { transition: color 0.05s linear-in-out; opacity: 0.9; background-color: rgba(0, 0, 0, 0); - color: rgba(255, 255, 255, 0.6); + color: TextInactive; } .tab:selected { - color: #F2F2F2; + color: Text; } .tab:selected .tab__indicator { - background-color: rgba(255, 255, 255, 0.6); + background-color: BorderSolid; } .tab:selected:hover { cursor: default; @@ -681,7 +686,7 @@ scrollbarhorizontal sliderbar { } .tab:focus, .tab:hover { opacity: 1; - color: #F2F2F2; + color: Text; cursor: pointer; } @@ -710,7 +715,7 @@ scrollbarhorizontal sliderbar { .config__form { border-top-width: 1.1dp; - border-top-color: rgba(255, 255, 255, 0.1); + border-top-color: BorderSoft; display: flex; flex: 1 1 100%; flex-direction: column; @@ -729,7 +734,7 @@ scrollbarhorizontal sliderbar { border-radius: 0dp; border-bottom-right-radius: 16dp; border-bottom-left-radius: 16dp; - background-color: rgba(0, 0, 0, 0.35); + background-color: BGShadow; text-align: left; } .config__wrapper p { @@ -738,10 +743,10 @@ scrollbarhorizontal sliderbar { white-space: pre-line; } .config__wrapper p b { - color: #B97DF2; + color: Primary; } .config__wrapper p i { - color: #E9CD35; + color: Warning; font-style: normal; } @@ -760,18 +765,18 @@ scrollbarhorizontal sliderbar { align-items: center; justify-content: space-between; width: 100%; - background-color: rgba(0, 0, 0, 0.35); + background-color: BGShadow; } .config__header { border-bottom-width: 1.1dp; - border-bottom-color: rgba(255, 255, 255, 0.1); + border-bottom-color: BorderSoft; padding: 12dp 20dp; } .config__footer { border-top-width: 1.1dp; - border-top-color: rgba(255, 255, 255, 0.1); + border-top-color: BorderSoft; padding: 20dp 20dp; border-bottom-right-radius: 16dp; border-bottom-left-radius: 16dp; @@ -805,7 +810,7 @@ scrollbarhorizontal sliderbar { overflow-y: auto; } .config-group__title { - color: #B97DF2; + color: Primary; } .config-group__title--hidden { display: none; @@ -872,12 +877,12 @@ scrollbarhorizontal sliderbar { height: auto; margin: 4dp 12dp 0; padding: 8dp 0; - color: rgba(255, 255, 255, 0.6); + color: TextInactive; tab-index: none; } .config-option__radio-tabs .config-option__tab-label:hover, .config-option__list .config-option__tab-label:hover { - color: #F2F2F2; + color: Text; cursor: pointer; } .config-option__radio-tabs .config-option__checkbox-wrapper, @@ -888,7 +893,7 @@ scrollbarhorizontal sliderbar { margin: 4dp 12dp 0; border-radius: 8dp; opacity: 0.5; - background-color: rgba(190, 184, 219, 0.1); + background-color: BGOverlay; cursor: pointer; } .config-option__radio-tabs .config-option__checkbox-wrapper:hover, @@ -897,7 +902,7 @@ scrollbarhorizontal sliderbar { } .config-option__radio-tabs .config-option__checkbox-wrapper[checked], .config-option__list .config-option__checkbox-wrapper[checked] { - background-color: #3333FF; + background-color: A; } .config-option__radio-tabs .config-option__checkbox, .config-option__list .config-option__checkbox { @@ -916,8 +921,8 @@ scrollbarhorizontal sliderbar { .config-option__radio-tabs input.radio:not(:disabled):checked + .config-option__tab-label, .config-option__list input.radio:not(:disabled):checked + .config-option__tab-label { border-bottom: 1dp; - border-color: #F2F2F2; - color: #F2F2F2; + border-color: Text; + color: Text; } .config-option__radio-tabs input.radio:not(:disabled):checked + .config-option__tab-label:hover, .config-option__list input.radio:not(:disabled):checked + .config-option__tab-label:hover { @@ -927,13 +932,13 @@ scrollbarhorizontal sliderbar { .rmlui-window:not([mouse-active]) .config-option__list input.radio:not(:disabled):focus + .config-option__tab-label { transition: none; animation: blue-pulse 0.75s infinite; - border-color: #17D6E8; - color: #17D6E8; + border-color: Secondary; + color: Secondary; } .config-option__radio-tabs input.radio:not(:disabled):focus + .config-option__tab-label, .config-option__radio-tabs input.radio:not(:disabled):hover + .config-option__tab-label, .config-option__list input.radio:not(:disabled):focus + .config-option__tab-label, .config-option__list input.radio:not(:disabled):hover + .config-option__tab-label { - color: #F2F2F2; + color: Text; } .config-option__radio-tabs input.radio:disabled + .config-option__tab-label, .config-option__list input.radio:disabled + .config-option__tab-label { @@ -948,7 +953,7 @@ scrollbarhorizontal sliderbar { transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out; height: 2dp; margin-top: 8dp; - background-color: rgba(255, 255, 255, 0.2); + background-color: Border; } .config-option__radio-tabs input.range sliderbar, .config-option__list input.range sliderbar { @@ -960,24 +965,24 @@ scrollbarhorizontal sliderbar { margin-left: -8dp; transition: background-color 0.05s linear-in-out; border-radius: 8dp; - background-color: #CCCCCC; + background-color: TextDim; } .rmlui-window:not([mouse-active]) .config-option__radio-tabs input.range sliderbar:focus, .rmlui-window:not([mouse-active]) .config-option__list input.range sliderbar:focus { border-width: 1.1dp; - border-color: #3333FF; + border-color: A; animation: blue-pulse-background 0.75s infinite; } .config-option__radio-tabs input.range sliderbar:hover, .config-option__list input.range sliderbar:hover { - background-color: #F2F2F2; + background-color: Text; cursor: pointer; } .config-option__radio-tabs input.range sliderbar:active, .config-option__radio-tabs input.range slidertrack:active + sliderbar, .config-option__list input.range sliderbar:active, .config-option__list input.range slidertrack:active + sliderbar { - background-color: #17D6E8; + background-color: Secondary; } .config-option__radio-tabs input.range sliderarrowdec, .config-option__radio-tabs input.range sliderarrowinc, @@ -989,7 +994,7 @@ scrollbarhorizontal sliderbar { .config-option__details { height: 18dp; margin: 14dp 12dp 0; - color: #B97DF2; + color: Primary; } .config-option-color { @@ -1012,7 +1017,7 @@ scrollbarhorizontal sliderbar { height: 100%; border-width: 1.1dp; border-radius: 16dp; - border-color: rgba(255, 255, 255, 0.2); + border-color: Border; } .config-option-color__hsv-wrapper { display: flex; @@ -1049,7 +1054,7 @@ scrollbarhorizontal sliderbar { margin: 0 12dp; margin-right: 16dp; padding: 0; - color: #F2F2F2; + color: Text; tab-index: none; } .config-option-range__range-input { @@ -1059,7 +1064,7 @@ scrollbarhorizontal sliderbar { transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out; height: 2dp; margin-top: 8dp; - background-color: rgba(255, 255, 255, 0.2); + background-color: Border; } .config-option-range__range-input sliderbar { transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out; @@ -1070,20 +1075,20 @@ scrollbarhorizontal sliderbar { margin-left: -8dp; transition: background-color 0.05s linear-in-out; border-radius: 8dp; - background-color: #CCCCCC; + background-color: TextDim; } .rmlui-window:not([mouse-active]) .config-option-range__range-input sliderbar:focus { border-width: 1.1dp; - border-color: #3333FF; + border-color: A; animation: blue-pulse-background 0.75s infinite; } .config-option-range__range-input sliderbar:hover { - background-color: #F2F2F2; + background-color: Text; cursor: pointer; } .config-option-range__range-input sliderbar:active, .config-option-range__range-input slidertrack:active + sliderbar { - background-color: #17D6E8; + background-color: Secondary; } .config-option-range__range-input sliderarrowdec, .config-option-range__range-input sliderarrowinc { @@ -1101,7 +1106,7 @@ scrollbarhorizontal sliderbar { margin: 0 12dp; margin-right: 16dp; padding: 0; - color: #F2F2F2; + color: Text; tab-index: none; } @@ -1139,21 +1144,21 @@ scrollbarhorizontal sliderbar { .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper { transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out, border-color 0.05s linear-in-out; border-width: 1.1dp; - border-color: rgba(255, 255, 255, 0.5); + border-color: WhiteA50; position: relative; box-sizing: border-box; flex: 1 1 100%; width: auto; border-radius: 12dp; - background-color: rgba(255, 255, 255, 0.05); + background-color: WhiteA5; } .config-option-dropdown__select svg, .config-option-dropdown__wrapper svg, .config-option-textfield__select svg, .config-option-textfield__wrapper svg { transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out; } .config-option-dropdown__select:hover, .config-option-dropdown__select:focus, .config-option-dropdown__wrapper:hover, .config-option-dropdown__wrapper:focus, .config-option-textfield__select:hover, .config-option-textfield__select:focus, .config-option-textfield__wrapper:hover, .config-option-textfield__wrapper:focus { border-width: 1.1dp; - border-color: rgba(255, 255, 255, 0.8); - background-color: rgba(255, 255, 255, 0.2); + border-color: WhiteA80; + background-color: WhiteA20; } .config-option-dropdown__select selectvalue, .config-option-dropdown__wrapper selectvalue, .config-option-textfield__select selectvalue, .config-option-textfield__wrapper selectvalue { display: inline; @@ -1162,28 +1167,28 @@ scrollbarhorizontal sliderbar { } .config-option-dropdown__select selectbox, .config-option-dropdown__wrapper selectbox, .config-option-textfield__select selectbox, .config-option-textfield__wrapper selectbox { border-width: 1.1dp; - border-color: rgba(255, 255, 255, 0.2); + border-color: Border; margin-top: 2dp; padding: 4dp 0; border-radius: 12dp; - background-color: #191622; + background-color: Background3; } .config-option-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option { transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out; padding: 8dp 12dp; - background-color: rgba(0, 0, 0, 0); - color: #CCCCCC; + background-color: Transparent; + color: TextDim; font-weight: 400; } .config-option-dropdown__select selectbox option:hover, .config-option-dropdown__select selectbox option:focus, .config-option-dropdown__wrapper selectbox option:hover, .config-option-dropdown__wrapper selectbox option:focus, .config-option-textfield__select selectbox option:hover, .config-option-textfield__select selectbox option:focus, .config-option-textfield__wrapper selectbox option:hover, .config-option-textfield__wrapper selectbox option:focus { - background-color: rgba(255, 255, 255, 0.2); + background-color: WhiteA20; } .config-option-dropdown__select selectbox option:hover:not(:checked), .config-option-dropdown__wrapper selectbox option:hover:not(:checked), .config-option-textfield__select selectbox option:hover:not(:checked), .config-option-textfield__wrapper selectbox option:hover:not(:checked) { cursor: pointer; } .config-option-dropdown__select selectbox option:checked, .config-option-dropdown__wrapper selectbox option:checked, .config-option-textfield__select selectbox option:checked, .config-option-textfield__wrapper selectbox option:checked { - background-color: rgba(255, 255, 255, 0.05); - color: #FFFFFF; + background-color: WhiteA5; + color: White; } .config-description { @@ -1194,7 +1199,7 @@ scrollbarhorizontal sliderbar { border-radius: 0dp; border-bottom-right-radius: 16dp; border-bottom-left-radius: 16dp; - background-color: rgba(0, 0, 0, 0.35); + background-color: BGShadow; text-align: left; } .config-description__contents { @@ -1203,10 +1208,10 @@ scrollbarhorizontal sliderbar { white-space: pre-line; } .config-description__contents b { - color: #B97DF2; + color: Primary; } .config-description__contents i { - color: #E9CD35; + color: Warning; font-style: normal; } @@ -1254,7 +1259,7 @@ scrollbarhorizontal sliderbar { width: 100%; margin: auto 0; padding-bottom: 75%; - background-color: rgba(0, 0, 0, 0.35); + background-color: BGShadow; } .input-config__visual { @@ -1266,7 +1271,7 @@ scrollbarhorizontal sliderbar { left: 16dp; flex-direction: column; border-radius: 108dp; - background-color: rgba(255, 255, 255, 0.05); + background-color: WhiteA5; } .input-config__visual-half { @@ -1452,10 +1457,10 @@ scrollbarhorizontal sliderbar { } .input-viz__button { - color: #F2F2F2; + color: Text; } .input-viz__button svg { - image-color: #F2F2F2; + image-color: Text; } .input-viz__button--sm { width: 64dp; @@ -1482,19 +1487,19 @@ scrollbarhorizontal sliderbar { height: 84dp; } .input-viz__button--C svg { - image-color: #E9CD35; + image-color: Warning; } .input-viz__button--A { margin-top: auto; } .input-viz__button--A svg { - image-color: #3333FF; + image-color: A; } .input-viz__button--B svg { - image-color: #45D043; + image-color: Success; } .input-viz__button--Start svg { - image-color: #F86039; + image-color: Danger; } .input-viz__Z { @@ -1502,7 +1507,7 @@ scrollbarhorizontal sliderbar { height: 136dp; } .input-viz__Z svg { - image-color: #E9CD35; + image-color: Warning; } .input-viz__Z > svg { width: 136dp; @@ -1515,7 +1520,7 @@ scrollbarhorizontal sliderbar { position: relative; } .input-viz.input-viz__dpad svg { - image-color: #F2F2F2; + image-color: Text; } .input-viz.input-viz__dpad > svg { width: 192dp; @@ -1530,7 +1535,7 @@ scrollbarhorizontal sliderbar { width: 200dp; height: 200dp; border-radius: 100dp; - background-color: rgba(255, 255, 255, 0.05); + background-color: WhiteA5; } .input-viz__dpad-split, @@ -1605,7 +1610,7 @@ scrollbarhorizontal sliderbar { height: 96dp; } .input-viz__R svg { - image-color: #FFFFFF; + image-color: White; } .input-viz__R > svg { width: 96dp; @@ -1617,7 +1622,7 @@ scrollbarhorizontal sliderbar { height: 136dp; } .input-viz__L svg { - image-color: #17D6E8; + image-color: Secondary; } .input-viz__L > svg { width: 136dp; @@ -1662,9 +1667,9 @@ scrollbarhorizontal sliderbar { } .button { - border-color: rgba(185, 125, 242, 0.8); - background-color: rgba(185, 125, 242, 0.05); - color: #CCCCCC; + border-color: PrimaryA80; + background-color: PrimaryA5; + color: TextDim; transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out; display: block; width: auto; @@ -1674,118 +1679,118 @@ scrollbarhorizontal sliderbar { border-radius: 12dp; } .button:focus, .button:hover { - border-color: #B97DF2; - background-color: rgba(185, 125, 242, 0.3); - color: #F2F2F2; + border-color: Primary; + background-color: PrimaryA30; + color: Text; } .button:disabled, .button[disabled] { - color: rgba(255, 255, 255, 0.6); + color: TextInactive; } .button:active { - background-color: rgba(185, 125, 242, 0.2); - color: rgb(244.6, 244.6, 244.6); + background-color: PrimaryA20; + color: TextActive; } .button--primary { - border-color: rgba(185, 125, 242, 0.8); - background-color: rgba(185, 125, 242, 0.05); - color: #CCCCCC; + border-color: PrimaryA80; + background-color: PrimaryA5; + color: TextDim; } .button--primary:focus, .button--primary:hover { - border-color: #B97DF2; - background-color: rgba(185, 125, 242, 0.3); - color: #F2F2F2; + border-color: Primary; + background-color: PrimaryA30; + color: Text; } .button--primary:disabled, .button--primary[disabled] { - color: rgba(255, 255, 255, 0.6); + color: TextInactive; } .button--primary:active { - background-color: rgba(185, 125, 242, 0.2); - color: rgb(244.6, 244.6, 244.6); + background-color: PrimaryA20; + color: TextActive; } .button--secondary { - border-color: rgba(23, 214, 232, 0.8); - background-color: rgba(23, 214, 232, 0.05); - color: #CCCCCC; + border-color: SecondaryA80; + background-color: SecondaryA5; + color: TextDim; } .button--secondary:focus, .button--secondary:hover { - border-color: #17D6E8; - background-color: rgba(23, 214, 232, 0.3); - color: #F2F2F2; + border-color: Secondary; + background-color: SecondaryA30; + color: Text; } .button--secondary:disabled, .button--secondary[disabled] { - color: rgba(255, 255, 255, 0.6); + color: TextInactive; } .button--secondary:active { - background-color: rgba(23, 214, 232, 0.2); - color: rgb(244.6, 244.6, 244.6); + background-color: SecondaryA20; + color: TextActive; } .button--tertiary { - border-color: rgba(242, 242, 242, 0.8); - background-color: rgba(242, 242, 242, 0.05); - color: #CCCCCC; + border-color: TextA80; + background-color: TextA5; + color: TextDim; } .button--tertiary:focus, .button--tertiary:hover { - border-color: #F2F2F2; - background-color: rgba(242, 242, 242, 0.3); - color: #F2F2F2; + border-color: Text; + background-color: TextA30; + color: Text; } .button--tertiary:disabled, .button--tertiary[disabled] { - color: rgba(255, 255, 255, 0.6); + color: TextInactive; } .button--tertiary:active { - background-color: rgba(242, 242, 242, 0.2); - color: rgb(244.6, 244.6, 244.6); + background-color: TextA20; + color: TextActive; } .button--success { - border-color: rgba(69, 208, 67, 0.8); - background-color: rgba(69, 208, 67, 0.05); - color: #CCCCCC; + border-color: SuccessA80; + background-color: SuccessA5; + color: TextDim; } .button--success:focus, .button--success:hover { - border-color: #45D043; - background-color: rgba(69, 208, 67, 0.3); - color: #F2F2F2; + border-color: Success; + background-color: SuccessA30; + color: Text; } .button--success:disabled, .button--success[disabled] { - color: rgba(255, 255, 255, 0.6); + color: TextInactive; } .button--success:active { - background-color: rgba(69, 208, 67, 0.2); - color: rgb(244.6, 244.6, 244.6); + background-color: SuccessA20; + color: TextActive; } -.button--error { - border-color: rgba(248, 96, 57, 0.8); - background-color: rgba(248, 96, 57, 0.05); - color: #CCCCCC; +.button--danger { + border-color: DangerA80; + background-color: DangerA5; + color: TextDim; } -.button--error:focus, .button--error:hover { - border-color: #F86039; - background-color: rgba(248, 96, 57, 0.3); - color: #F2F2F2; +.button--danger:focus, .button--danger:hover { + border-color: Danger; + background-color: DangerA30; + color: Text; } -.button--error:disabled, .button--error[disabled] { - color: rgba(255, 255, 255, 0.6); +.button--danger:disabled, .button--danger[disabled] { + color: TextInactive; } -.button--error:active { - background-color: rgba(248, 96, 57, 0.2); - color: rgb(244.6, 244.6, 244.6); +.button--danger:active { + background-color: DangerA20; + color: TextActive; } .button--warning { - border-color: rgba(233, 205, 53, 0.8); - background-color: rgba(233, 205, 53, 0.05); - color: #CCCCCC; + border-color: WarningA80; + background-color: WarningA5; + color: TextDim; } .button--warning:focus, .button--warning:hover { - border-color: #E9CD35; - background-color: rgba(233, 205, 53, 0.3); - color: #F2F2F2; + border-color: Warning; + background-color: WarningA30; + color: Text; } .button--warning:disabled, .button--warning[disabled] { - color: rgba(255, 255, 255, 0.6); + color: TextInactive; } .button--warning:active { - background-color: rgba(233, 205, 53, 0.2); - color: rgb(244.6, 244.6, 244.6); + background-color: WarningA20; + color: TextActive; } .button:not([disabled]) { cursor: pointer; @@ -1800,13 +1805,13 @@ scrollbarhorizontal sliderbar { /* */ .icon-button { - color: #CCCCCC; + color: TextDim; transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out, border-color 0.05s linear-in-out; display: flex; align-items: center; @@ -1819,35 +1824,35 @@ scrollbarhorizontal sliderbar { max-height: 53.8dp; border-width: 1.1dp; border-radius: 26.9dp; - border-color: rgba(0, 0, 0, 0); - background-color: rgba(0, 0, 0, 0); + border-color: Transparent; + background-color: Transparent; } .icon-button svg { - image-color: #CCCCCC; + image-color: TextDim; } .icon-button svg { transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out; } .icon-button:focus, .icon-button:hover { - color: #F2F2F2; - background-color: rgba(255, 255, 255, 0.2); + color: Text; + background-color: Border; } .icon-button:focus svg, .icon-button:hover svg { - image-color: #F2F2F2; + image-color: Text; } .icon-button:active { - color: rgb(244.6, 244.6, 244.6); - background-color: rgba(255, 255, 255, 0.1); + color: TextActive; + background-color: BorderSoft; } .icon-button:active svg { - image-color: rgb(244.6, 244.6, 244.6); + image-color: TextActive; } .icon-button:disabled, .icon-button[disabled] { - color: #CCCCCC; + color: TextDim; opacity: 0.5; } .icon-button:disabled svg, .icon-button[disabled] svg { - image-color: #CCCCCC; + image-color: TextDim; } .icon-button:not([disabled]) { cursor: pointer; @@ -1857,70 +1862,70 @@ scrollbarhorizontal sliderbar { height: 32dp; } .icon-button--primary { - border-color: rgba(185, 125, 242, 0.8); - background-color: rgba(185, 125, 242, 0.05); + border-color: PrimaryA80; + background-color: PrimaryA5; } .icon-button--primary:focus, .icon-button--primary:hover { - border-color: #B97DF2; - background-color: rgba(185, 125, 242, 0.3); + border-color: Primary; + background-color: PrimaryA30; } .icon-button--primary:active { - background-color: rgba(185, 125, 242, 0.2); + background-color: PrimaryA20; } .icon-button--secondary { - border-color: rgba(23, 214, 232, 0.8); - background-color: rgba(23, 214, 232, 0.05); + border-color: SecondaryA80; + background-color: SecondaryA5; } .icon-button--secondary:focus, .icon-button--secondary:hover { - border-color: #17D6E8; - background-color: rgba(23, 214, 232, 0.3); + border-color: Secondary; + background-color: SecondaryA30; } .icon-button--secondary:active { - background-color: rgba(23, 214, 232, 0.2); + background-color: SecondaryA20; } .icon-button--tertiary { - border-color: rgba(242, 242, 242, 0.8); - background-color: rgba(242, 242, 242, 0.05); + border-color: TextA80; + background-color: TextA5; } .icon-button--tertiary:focus, .icon-button--tertiary:hover { - border-color: #F2F2F2; - background-color: rgba(242, 242, 242, 0.3); + border-color: Text; + background-color: TextA30; } .icon-button--tertiary:active { - background-color: rgba(242, 242, 242, 0.2); + background-color: TextA20; } .icon-button--success { - border-color: rgba(69, 208, 67, 0.8); - background-color: rgba(69, 208, 67, 0.05); + border-color: SuccessA80; + background-color: SuccessA5; } .icon-button--success:focus, .icon-button--success:hover { - border-color: #45D043; - background-color: rgba(69, 208, 67, 0.3); + border-color: Success; + background-color: SuccessA30; } .icon-button--success:active { - background-color: rgba(69, 208, 67, 0.2); + background-color: SuccessA20; } -.icon-button--error { - border-color: rgba(248, 96, 57, 0.8); - background-color: rgba(248, 96, 57, 0.05); +.icon-button--danger { + border-color: DangerA80; + background-color: DangerA5; } -.icon-button--error:focus, .icon-button--error:hover { - border-color: #F86039; - background-color: rgba(248, 96, 57, 0.3); +.icon-button--danger:focus, .icon-button--danger:hover { + border-color: Danger; + background-color: DangerA30; } -.icon-button--error:active { - background-color: rgba(248, 96, 57, 0.2); +.icon-button--danger:active { + background-color: DangerA20; } .icon-button--warning { - border-color: rgba(233, 205, 53, 0.8); - background-color: rgba(233, 205, 53, 0.05); + border-color: WarningA80; + background-color: WarningA5; } .icon-button--warning:focus, .icon-button--warning:hover { - border-color: #E9CD35; - background-color: rgba(233, 205, 53, 0.3); + border-color: Warning; + background-color: WarningA30; } .icon-button--warning:active { - background-color: rgba(233, 205, 53, 0.2); + background-color: WarningA20; } .launcher { @@ -1930,7 +1935,7 @@ scrollbarhorizontal sliderbar { justify-content: space-between; width: 100%; height: 100%; - background-color: #08070D; + background-color: Background1; } .launcher__vertical-split { @@ -2027,7 +2032,7 @@ scrollbarhorizontal sliderbar { */ .menu-list-item { - color: #CCCCCC; + color: TextDim; display: flex; flex-direction: row; align-items: center; @@ -2039,7 +2044,7 @@ scrollbarhorizontal sliderbar { cursor: pointer; } .menu-list-item svg { - image-color: #CCCCCC; + image-color: TextDim; } .menu-list-item--right { flex-direction: row-reverse; @@ -2050,14 +2055,14 @@ scrollbarhorizontal sliderbar { opacity: 1; } .menu-list-item--right.menu-list-item:focus:not(:disabled, [disabled]), .menu-list-item--right.menu-list-item:hover:not(:disabled, [disabled]) { - decorator: horizontal-gradient(#7A2AC600 #DABAF714); + background-color: WhiteA5; } .menu-list-item:focus:not(:disabled, [disabled]), .menu-list-item:hover:not(:disabled, [disabled]) { - color: #B97DF2; - decorator: horizontal-gradient(#7A2AC614 #DABAF700); + color: Primary; + background-color: WhiteA5; } .menu-list-item:focus:not(:disabled, [disabled]) svg, .menu-list-item:hover:not(:disabled, [disabled]) svg { - image-color: #B97DF2; + image-color: Primary; } .menu-list-item:focus:not(:disabled, [disabled]) .menu-list-item__bullet, .menu-list-item:hover:not(:disabled, [disabled]) .menu-list-item__bullet { opacity: 1; @@ -2097,7 +2102,7 @@ scrollbarhorizontal sliderbar { height: auto; padding: 0; background-color: rgba(0, 0, 0, 0); - color: #CCCCCC; + color: TextDim; text-align: left; cursor: pointer; } @@ -2108,11 +2113,11 @@ scrollbarhorizontal sliderbar { text-align: right; } .subtitle-title[selected] { - color: #F2F2F2; + color: Text; cursor: default; } .subtitle-title:focus:not(:disabled, [disabled]), .subtitle-title:hover:not(:disabled, [disabled], [selected]) { - color: #B97DF2; + color: Primary; } .subtitle-title:disabled, .subtitle-title[disabled] { opacity: 0.5; @@ -2140,16 +2145,16 @@ scrollbarhorizontal sliderbar { height: 72dp; border-radius: 36dp; opacity: 0.9; - background: rgba(0, 0, 0, 0); + background: Transparent; cursor: pointer; } .toggle:hover, .toggle:focus-visible, .toggle:focus { opacity: 1; - background-color: rgba(23, 214, 232, 0.3); + background-color: SecondaryA30; } .toggle:active { opacity: 1; - background-color: rgba(23, 214, 232, 0.05); + background-color: SecondaryA5; } .toggle .toggle__border { position: absolute; @@ -2158,7 +2163,7 @@ scrollbarhorizontal sliderbar { bottom: 1.1dp; left: 1.1dp; border-width: 1.1dp; - border-color: #A2EFF6; + border-color: SecondaryL; display: block; border-radius: 36dp; } @@ -2170,18 +2175,18 @@ scrollbarhorizontal sliderbar { height: 64dp; transform: translateY(-50%); border-radius: 32dp; - background: #25A1AD; + background: SecondaryD; } .toggle--checked .toggle__floater { left: 78dp; } .toggle--checked .toggle__icon.toggle__icon--left { opacity: 0.9; - color: #A2EFF6; + color: SecondaryL; } .toggle--checked .toggle__icon.toggle__icon--right { opacity: 1; - color: #F2F2F2; + color: Text; } .toggle__icons { @@ -2203,11 +2208,11 @@ scrollbarhorizontal sliderbar { justify-content: center; width: 56dp; height: 56dp; - color: #F2F2F2; + color: Text; } .toggle__icon--right { opacity: 1; - color: #A2EFF6; + color: SecondaryL; } .bottom-left { @@ -2224,7 +2229,7 @@ scrollbarhorizontal sliderbar { } .prompt__overlay { - background-color: rgba(190, 184, 219, 0.1); + background-color: BGOverlay; pointer-events: auto; } .prompt__overlay, .prompt__content-wrapper { @@ -2255,8 +2260,8 @@ scrollbarhorizontal sliderbar { margin: auto; border-width: 1.1dp; border-radius: 16dp; - border-color: rgba(255, 255, 255, 0.2); - background: rgba(8, 7, 13, 0.9); + border-color: Border; + background: ModalOverlay; } .prompt__content h3, .prompt__content p { margin: 24dp; @@ -2270,7 +2275,7 @@ scrollbarhorizontal sliderbar { justify-content: center; padding: 24dp 12dp; border-top-width: 1.1dp; - border-top-color: rgba(255, 255, 255, 0.1); + border-top-color: BorderSoft; } .prompt__controls .button { min-width: 233.3333333333dp; @@ -2297,10 +2302,10 @@ scrollbarhorizontal sliderbar { } .config-debug-option { - color: #CCCCCC; + color: TextDim; transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out; border-bottom-width: 1.1dp; - border-bottom-color: rgba(255, 255, 255, 0.1); + border-bottom-color: BorderSoft; display: block; position: relative; flex-direction: column; @@ -2310,17 +2315,17 @@ scrollbarhorizontal sliderbar { background-color: rgba(0, 0, 0, 0); } .config-debug-option svg { - image-color: #CCCCCC; + image-color: TextDim; } .config-debug-option svg { transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out; } .config-debug-option:focus:not(:disabled, [disabled]), .config-debug-option:focus-visible:not(:disabled, [disabled]), .config-debug-option:hover:not(:disabled, [disabled]) { - color: #F2F2F2; - background-color: rgba(190, 184, 219, 0.1); + color: Text; + background-color: BGOverlay; } .config-debug-option:focus:not(:disabled, [disabled]) svg, .config-debug-option:focus-visible:not(:disabled, [disabled]) svg, .config-debug-option:hover:not(:disabled, [disabled]) svg { - image-color: #F2F2F2; + image-color: Text; } .config-debug-option:disabled, .config-debug-option[disabled] { opacity: 0.5; @@ -2396,7 +2401,7 @@ scrollbarhorizontal sliderbar { .config-debug__select-wrapper select { transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out, border-color 0.05s linear-in-out; border-width: 1.1dp; - border-color: rgba(255, 255, 255, 0.5); + border-color: WhiteA50; display: block; position: relative; box-sizing: border-box; @@ -2405,7 +2410,7 @@ scrollbarhorizontal sliderbar { width: auto; height: 48dp; border-radius: 12dp; - background-color: rgba(255, 255, 255, 0.05); + background-color: WhiteA5; cursor: pointer; align-items: center; justify-content: flex-start; @@ -2416,8 +2421,8 @@ scrollbarhorizontal sliderbar { } .config-debug__select-wrapper select:hover, .config-debug__select-wrapper select:focus { border-width: 1.1dp; - border-color: rgba(255, 255, 255, 0.8); - background-color: rgba(255, 255, 255, 0.2); + border-color: WhiteA80; + background-color: WhiteA20; } .config-debug__select-wrapper select selectvalue { display: inline; @@ -2426,8 +2431,8 @@ scrollbarhorizontal sliderbar { } .config-debug__select-wrapper select selectbox { border-width: 1.1dp; - border-color: rgba(255, 255, 255, 0.8); - background-color: #191622; + border-color: WhiteA80; + background-color: Background3; padding: 4dp 0; margin-top: 2dp; border-radius: 12dp; @@ -2435,25 +2440,19 @@ scrollbarhorizontal sliderbar { .config-debug__select-wrapper select selectbox option { transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out; padding: 8dp 12dp; - background-color: rgba(0, 0, 0, 0); - color: #CCCCCC; + background-color: Transparent; + color: TextDim; font-weight: 400; } .config-debug__select-wrapper select selectbox option:hover, .config-debug__select-wrapper select selectbox option:focus { - background-color: rgba(255, 255, 255, 0.2); + background-color: WhiteA20; } .config-debug__select-wrapper select selectbox option:hover:not(:checked) { cursor: pointer; } .config-debug__select-wrapper select selectbox option:checked { - color: #FFFFFF; - background-color: rgba(255, 255, 255, 0.05); -} - -body { - box-sizing: border-box; - color: #F2F2F2; - font-family: LatoLatin; + color: White; + background-color: WhiteA5; } .rmlui-window { @@ -2471,42 +2470,42 @@ body { } button { - background-color: #7A2AC6; + background-color: PrimaryD; } @keyframes blue-pulse { 0% { - color: #17D6E8; + color: Secondary; } 50% { - color: #A2EFF6; + color: SecondaryL; } 100% { - color: #17D6E8; + color: Secondary; } } @keyframes blue-pulse-with-border { 0% { - border-color: #17D6E8; - color: #17D6E8; + border-color: Secondary; + color: Secondary; } 50% { - border-color: #A2EFF6; - color: #A2EFF6; + border-color: SecondaryL; + color: SecondaryL; } 100% { - border-color: #17D6E8; - color: #17D6E8; + border-color: Secondary; + color: Secondary; } } @keyframes blue-pulse-background { 0% { - background-color: #17D6E8; + background-color: Secondary; } 50% { - background-color: #A2EFF6; + background-color: SecondaryL; } 100% { - background-color: #17D6E8; + background-color: Secondary; } } diff --git a/assets/scss/styles/components/Button.scss b/assets/scss/styles/components/Button.scss index d5d1514..b7f8086 100644 --- a/assets/scss/styles/components/Button.scss +++ b/assets/scss/styles/components/Button.scss @@ -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]) { diff --git a/assets/scss/styles/components/ControlOption.scss b/assets/scss/styles/components/ControlOption.scss index 662fd63..16c086e 100644 --- a/assets/scss/styles/components/ControlOption.scss +++ b/assets/scss/styles/components/ControlOption.scss @@ -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; } } } diff --git a/assets/scss/styles/components/IconButton.scss b/assets/scss/styles/components/IconButton.scss index 4e1822a..fc22121 100644 --- a/assets/scss/styles/components/IconButton.scss +++ b/assets/scss/styles/components/IconButton.scss @@ -2,22 +2,22 @@ /* */ -@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); } } diff --git a/assets/scss/styles/components/InputConfig.scss b/assets/scss/styles/components/InputConfig.scss index 71ba960..b2cae6d 100644 --- a/assets/scss/styles/components/InputConfig.scss +++ b/assets/scss/styles/components/InputConfig.scss @@ -195,7 +195,7 @@ $all-inputs: A, } &--Start { - @include set-svgs-color($color-error); + @include set-svgs-color($color-danger); } } diff --git a/assets/scss/styles/components/MenuListItem.scss b/assets/scss/styles/components/MenuListItem.scss index 657f0ef..4fb63aa 100644 --- a/assets/scss/styles/components/MenuListItem.scss +++ b/assets/scss/styles/components/MenuListItem.scss @@ -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; diff --git a/assets/scss/styles/global.scss b/assets/scss/styles/global.scss index 2e98925..08242f4 100644 --- a/assets/scss/styles/global.scss +++ b/assets/scss/styles/global.scss @@ -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; diff --git a/assets/scss/styles/globals/_old.scss b/assets/scss/styles/globals/_old.scss index 706fb94..4343b32 100644 --- a/assets/scss/styles/globals/_old.scss +++ b/assets/scss/styles/globals/_old.scss @@ -13,7 +13,6 @@ hr { body { color: #fff; - font-family: LatoLatin; font-size: 20dp; font-style: normal; font-weight: normal diff --git a/assets/scss/styles/mixins/_typography.scss b/assets/scss/styles/mixins/_typography.scss index fde69e0..384154c 100644 --- a/assets/scss/styles/mixins/_typography.scss +++ b/assets/scss/styles/mixins/_typography.scss @@ -1,5 +1,5 @@ -$font-stack: LatoLatin; +$font-stack: 'Suplexmentary Comic NC'; @mixin set-font-sizing($sz, $spacing) { // font-family: $font-stack; diff --git a/assets/scss/styles/vars/_colors.scss b/assets/scss/styles/vars/_colors.scss index 0b5cfd7..37e3b1e 100644 --- a/assets/scss/styles/vars/_colors.scss +++ b/assets/scss/styles/vars/_colors.scss @@ -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; diff --git a/assets/scss/styles/vars/_gradients.scss b/assets/scss/styles/vars/_gradients.scss index 1cdebd5..b3e2305 100644 --- a/assets/scss/styles/vars/_gradients.scss +++ b/assets/scss/styles/vars/_gradients.scss @@ -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); diff --git a/include/recomp_ui.h b/include/recomp_ui.h index f609a52..1856ab0 100644 --- a/include/recomp_ui.h +++ b/include/recomp_ui.h @@ -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 confirm_action, std::function 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 okay_action, - ButtonVariant okay_variant = ButtonVariant::Error, + ButtonStyle okay_variant = ButtonStyle::Danger, const std::string& return_element_id = "" ); void open_notification( diff --git a/src/main/main.cpp b/src/main/main.cpp index dc6839d..10d2902 100644 --- a/src/main/main.cpp +++ b/src/main/main.cpp @@ -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(); diff --git a/src/main/theme.cpp b/src/main/theme.cpp new file mode 100644 index 0000000..228f7e4 --- /dev/null +++ b/src/main/theme.cpp @@ -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}); +}; + + diff --git a/src/main/theme.h b/src/main/theme.h new file mode 100644 index 0000000..deaa66b --- /dev/null +++ b/src/main/theme.h @@ -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 diff --git a/src/ui/elements/ui_button.cpp b/src/ui/elements/ui_button.cpp index 23bbf7b..c3e51a3 100644 --- a/src/ui/elements/ui_button.cpp +++ b/src/ui/elements/ui_button.cpp @@ -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 callback) { pressed_callbacks.emplace_back(callback); } -}; \ No newline at end of file + + 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 }); + } +}; diff --git a/src/ui/elements/ui_button.h b/src/ui/elements/ui_button.h index 182cda3..0781936 100644 --- a/src/ui/elements/ui_button.h +++ b/src/ui/elements/ui_button.h @@ -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 \ No newline at end of file +} // namespace recompui diff --git a/src/ui/elements/ui_label.cpp b/src/ui/elements/ui_label.cpp index 64a53b8..4138849 100644 --- a/src/ui/elements/ui_label.cpp +++ b/src/ui/elements/ui_label.cpp @@ -7,7 +7,7 @@ namespace recompui { Label::Label(Element *parent, LabelStyle label_style) : Element(parent, 0U, "div", true) { switch (label_style) { case LabelStyle::Annotation: - set_color(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); } -}; \ No newline at end of file +}; diff --git a/src/ui/elements/ui_radio.cpp b/src/ui/elements/ui_radio.cpp index 6cd1423..6759588 100644 --- a/src/ui/elements/ui_radio.cpp +++ b/src/ui/elements/ui_radio.cpp @@ -17,16 +17,16 @@ namespace recompui { set_line_height(20.0f); set_font_weight(400); set_font_style(FontStyle::Normal); - set_border_color(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 }); diff --git a/src/ui/elements/ui_slider.cpp b/src/ui/elements/ui_slider.cpp index c77b45d..702cae1 100644 --- a/src/ui/elements/ui_slider.cpp +++ b/src/ui/elements/ui_slider.cpp @@ -93,11 +93,11 @@ namespace recompui { queue_update(); } else { - circle_element->set_background_color(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(); }); diff --git a/src/ui/elements/ui_style.cpp b/src/ui/elements/ui_style.cpp index 5708ec5..5f2e6dc 100644 --- a/src/ui/elements/ui_style.cpp +++ b/src/ui/elements/ui_style.cpp @@ -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 \ No newline at end of file +} // namespace recompui diff --git a/src/ui/elements/ui_style.h b/src/ui/elements/ui_style.h index 372fa6d..bb6b9de 100644 --- a/src/ui/elements/ui_style.h +++ b/src/ui/elements/ui_style.h @@ -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 \ No newline at end of file +} // namespace recompui diff --git a/src/ui/elements/ui_text_input.cpp b/src/ui/elements/ui_text_input.cpp index b496728..d5ac94d 100644 --- a/src/ui/elements/ui_text_input.cpp +++ b/src/ui/elements/ui_text_input.cpp @@ -33,7 +33,7 @@ namespace recompui { set_attribute("type", "password"); } set_min_width(60.0f); - set_border_color(Color{ 242, 242, 242, 255 }); + set_border_color(ThemeColor::Text); set_border_bottom_width(1.0f); set_padding_bottom(6.0f); set_focusable(true); diff --git a/src/ui/elements/ui_theme.cpp b/src/ui/elements/ui_theme.cpp new file mode 100644 index 0000000..7a66e18 --- /dev/null +++ b/src/ui/elements/ui_theme.cpp @@ -0,0 +1,207 @@ +#include +#include "ui_theme.h" + +using ThemeColor = recompui::ThemeColor; +using ThemeColorArray = std::array; +using ThemeColorNameArray = std::array; + +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]; +} diff --git a/src/ui/elements/ui_theme.h b/src/ui/elements/ui_theme.h new file mode 100644 index 0000000..8d57a79 --- /dev/null +++ b/src/ui/elements/ui_theme.h @@ -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 diff --git a/src/ui/elements/ui_toggle.cpp b/src/ui/elements/ui_toggle.cpp index 983d7ac..7f58c2e 100644 --- a/src/ui/elements/ui_toggle.cpp +++ b/src/ui/elements/ui_toggle.cpp @@ -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 callback) { checked_callbacks.emplace_back(callback); } -}; \ No newline at end of file +}; diff --git a/src/ui/elements/ui_types.h b/src/ui/elements/ui_types.h index 08645ea..726b25c 100644 --- a/src/ui/elements/ui_types.h +++ b/src/ui/elements/ui_types.h @@ -1,5 +1,7 @@ #pragma once +#include +#include #include #include @@ -279,4 +281,4 @@ namespace recompui { Auto }; -} // namespace recompui \ No newline at end of file +} // namespace recompui diff --git a/src/ui/ui_color_hack.cpp b/src/ui/ui_color_hack.cpp index cc9b6fd..edc18e4 100644 --- a/src/ui/ui_color_hack.cpp +++ b/src/ui/ui_color_hack.cpp @@ -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{}; diff --git a/src/ui/ui_config.cpp b/src/ui/ui_config.cpp index f7a00d5..0dbba71 100644 --- a/src/ui/ui_config.cpp +++ b/src/ui/ui_config.cpp @@ -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" ); diff --git a/src/ui/ui_mod_details_panel.cpp b/src/ui/ui_mod_details_panel.cpp index 9606ca3..66d5f22 100644 --- a/src/ui/ui_mod_details_panel.cpp +++ b/src/ui/ui_mod_details_panel.cpp @@ -11,7 +11,7 @@ ModDetailsPanel::ModDetailsPanel(Element *parent) : Element(parent) { set_height(100.0f, Unit::Percent); set_display(Display::Flex); set_flex_direction(FlexDirection::Column); - set_background_color(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(header_container, FlexDirection::Column, JustifyContent::SpaceEvenly); thumbnail_container->set_flex(0.0f, 0.0f); @@ -29,7 +29,7 @@ ModDetailsPanel::ModDetailsPanel(Element *parent) : Element(parent) { thumbnail_image = context.create_element(thumbnail_container, ""); thumbnail_image->set_width(100.0f); thumbnail_image->set_height(100.0f); - thumbnail_image->set_background_color(Color{ 190, 184, 219, 25 }); + thumbnail_image->set_background_color(ThemeColor::BGOverlay); } header_details_container = context.create_element(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(buttons_container, FlexDirection::Row, JustifyContent::FlexStart); enable_container->set_align_items(AlignItems::Center); diff --git a/src/ui/ui_mod_menu.cpp b/src/ui/ui_mod_menu.cpp index ed92a7d..ca18455 100644 --- a/src/ui/ui_mod_menu.cpp +++ b/src/ui/ui_mod_menu.cpp @@ -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(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(this); @@ -78,7 +75,7 @@ ModEntryView::ModEntryView(Element *parent) : Element(parent, Events(EventType:: name_label = context.create_element