From 66adb00e53754454fe8028d4339084691a4508bc Mon Sep 17 00:00:00 2001
From: thecozies <79979276+thecozies@users.noreply.github.com>
Date: Sun, 7 Jan 2024 18:23:05 -0600
Subject: [PATCH] updated button component and colors

---
 assets/config_menu.rml                        |  2 +-
 assets/recomp.rcss                            |  2 +-
 assets/scss/styles/components/Button.scss     | 67 ++++++++++++++-----
 .../scss/styles/components/CenteredPage.scss  |  3 +-
 assets/scss/styles/components/Config.scss     |  2 +-
 assets/scss/styles/vars/_colors.scss          | 25 +++++++
 6 files changed, 82 insertions(+), 19 deletions(-)

diff --git a/assets/config_menu.rml b/assets/config_menu.rml
index 100226f..e7c78f7 100644
--- a/assets/config_menu.rml
+++ b/assets/config_menu.rml
@@ -107,7 +107,7 @@
 							<div class="config__footer">
 								<div>
 									<button
-										class="button"
+										class="button button--secondary"
 										nav-return="rr_manual"
 										data-attrif-disabled="!options_changed"
 										onclick="apply_options"
diff --git a/assets/recomp.rcss b/assets/recomp.rcss
index cdeec70..241ae5c 100644
--- a/assets/recomp.rcss
+++ b/assets/recomp.rcss
@@ -1 +1 @@
-h1{font-size:64dp;letter-spacing:4.48dp;line-height:64dp;font-style:normal;font-weight:700}h2{font-size:48dp;letter-spacing:3.36dp;line-height:48dp;font-style:normal;font-weight:700}h3{font-size:32dp;letter-spacing:2.24dp;line-height:32dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label{font-size:32dp;letter-spacing:3.52dp;line-height:32dp;font-style:normal;font-weight:700}.label-md,.button,.config-option__title,.tab{font-size:24dp;letter-spacing:2.64dp;line-height:24dp;font-style:normal;font-weight:700}.label-sm,.subtitle-title__disclaimer,.config-option__range-label,.config-option__list .config-option__tab-label{font-size:16dp;letter-spacing:2.24dp;line-height:16dp;font-style:normal;font-weight:700;text-transform:uppercase}body{font-size:16dp;letter-spacing:0dp;line-height:16dp;font-style:normal;font-weight:400}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.centered-page__modal{nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.centered-page__modal{focus:auto;tab-index:auto}h1{font-size:64dp;letter-spacing:4.48dp;line-height:64dp;font-style:normal;font-weight:700}h2{font-size:48dp;letter-spacing:3.36dp;line-height:48dp;font-style:normal;font-weight:700}h3{font-size:32dp;letter-spacing:2.24dp;line-height:32dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label{font-size:32dp;letter-spacing:3.52dp;line-height:32dp;font-style:normal;font-weight:700}.label-md,.button,.config-option__title,.tab{font-size:24dp;letter-spacing:2.64dp;line-height:24dp;font-style:normal;font-weight:700}.label-sm,.subtitle-title__disclaimer,.config-option__range-label,.config-option__list .config-option__tab-label{font-size:16dp;letter-spacing:2.24dp;line-height:16dp;font-style:normal;font-weight:700;text-transform:uppercase}body{font-size:16dp;letter-spacing:0dp;line-height:16dp;font-style:normal;font-weight:400}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.centered-page__modal{nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.centered-page__modal{focus:auto;tab-index:auto}*{box-sizing:border-box}hr{display:block;background:#000;padding:1.5dp}body{font-family:chiaro;font-weight:normal;font-style:normal;font-size:20dp;color:#fff}div#window{position:relative;width:100%;height:100%;box-sizing:border-box;background-color:#121018;border-color:rgba(255,255,255,.2)}div#content{z-index:2;width:auto;height:100%;overflow:hidden auto;text-align:center}p{text-align:left}input.submit{margin-left:0}input.text,input.password{box-sizing:border-box;height:31dp;padding:11dp 10dp 0;cursor:text;text-align:left}textarea{padding:14dp 12dp 10dp;cursor:text;text-align:left}input.text,input.password,select,textarea{height:auto}table input.text{box-sizing:border-box;width:100%;margin:0;line-height:1;border-width:1dp;border-color:#000;background-color:#fff;font-size:15dp;decorator:none;height:auto}select{display:inline-block;text-align:left;box-sizing:border-box;vertical-align:center;padding:4dp;border-radius:5dp;background-color:#787878;width:100%}select selectvalue{height:auto}select:hover selectvalue{background-color:#969696}select selectbox,tbody{background-color:#787878}select selectbox option{width:auto;background-color:#787878}select selectbox option:nth-child(even),tr:nth-child(even){background-color:#646464}select selectbox option:checked{font-weight:bold;color:#fff}select selectbox option:hover{background:#969696}input.radio,input.checkbox{flex:0;tab-index:auto;focus:auto;nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto;width:0dp}thead tr{height:35dp}thead td{padding-top:11dp}tbody{margin-left:5dp;margin-right:4dp;padding-top:4dp;padding-bottom:4dp}tbody tr{margin-left:9dp;margin-right:8dp;color:#000}expand{display:block;margin:1dp 0 1dp 5dp;height:17dp;width:17dp}scrollbarvertical{margin-top:-6dp;margin-bottom:-6dp;margin-right:-11dp;width:27dp}scrollbarvertical slidertrack:active{image-color:#aaa}scrollbarvertical sliderbar{margin-left:4dp;width:23dp;min-height:46dp}scrollbarvertical sliderarrowdec,scrollbarvertical sliderarrowinc{width:27dp;height:24dp}scrollbarhorizontal{width:0;height:0}textarea scrollbarvertical{cursor:arrow;margin:10dp 0 4dp 0;width:12dp}textarea scrollbarvertical slidertrack{decorator:none}textarea scrollbarvertical sliderbar{margin-left:2dp;width:10dp;min-height:16dp}textarea scrollbarvertical sliderarrowdec,textarea scrollbarvertical sliderarrowinc{width:0;height:0}textarea scrollbarhorizontal{cursor:arrow;margin-left:7dp;height:12dp}textarea scrollbarhorizontal sliderbar{background-color:rgba(188,0,0,.8);height:8dp;min-width:10dp}textarea scrollbarhorizontal sliderbar:hover{background-color:rgba(184,37,0,.8)}textarea scrollbarhorizontal sliderbar:active{background-color:rgba(119,0,0,.8)}.centered-page{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;padding:32dp}.centered-page__modal{display:flex;flex-direction:column;position:relative;margin:auto;flex:1 1 100%;max-width:1440dp dp;width:100%;height:100%;background:rgba(8,7,13,.72);border-radius:16dp;border-color:rgba(255,255,255,.1);border-width:1dp}.centered-page__modal panels{flex:1 1 100%}.tabs tabs{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.tab{display:block;position:relative;padding:20dp 24dp;background-color:rgba(0,0,0,0);margin:0;color:rgba(255,255,255,.6);transition:color .033s linear-in-out}.tab:selected{color:#f2f2f2}.tab:selected .tab__indicator{background-color:rgba(255,255,255,.6)}.tab:selected:hover{cursor:default}.tab:hover{cursor:pointer}.tab:focus{color:#f2f2f2}.tab__indicator{position:absolute;background-color:rgba(0,0,0,0);right:0;bottom:2dp;left:0;height:2dp}.config__form{border-top-color:rgba(255,255,255,.1);border-top-width:1dp;display:flex;flex-direction:column;justify-content:space-between;flex:1 1 100%;width:100%;height:100%;border-bottom-left-radius:16dp;border-bottom-right-radius:16dp}.config__wrapper{display:flex;flex-direction:column;border-radius:0dp;flex:1 1 100%;height:100%;padding:16dp;text-align:left;background-color:rgba(0,0,0,.35)}.config__footer{border-top-color:rgba(255,255,255,.1);border-top-width:1dp;display:flex;justify-content:flex-end;align-items:center;width:100%;padding:20dp 20dp;background-color:rgba(8,7,13,.72);border-bottom-left-radius:16dp;border-bottom-right-radius:16dp}.config__row{display:flex;flex-direction:row}.config-option{display:flex;flex-direction:column;flex:1;align-items:flex-start;justify-content:space-between;margin:8dp 0 16dp}.config-option__title{padding:0 12dp}.config-option__list{display:flex;padding:0;flex-direction:row;width:100%;align-items:flex-start;justify-content:flex-start}.config-option__list .config-option__tab-label{display:block;padding:12dp 0;margin:0 12dp;margin-right:16dp;color:rgba(255,255,255,.6);tab-index:none;transition:color .033s linear-in-out}.config-option__list .config-option__tab-label:hover{cursor:pointer}.config-option__list input.radio{visibility:hidden;width:0;height:0}.config-option__list input.radio:checked+.config-option__tab-label{border-bottom:1dp;border-color:rgba(255,255,255,.3)}.config-option__list input.radio:checked+.config-option__tab-label:hover{cursor:default}.config-option__list input.radio:focus+.config-option__tab-label{color:#f2f2f2}.config-option__list input.range slidertrack{margin-top:7dp;height:2dp;background-color:rgba(255,255,255,.2)}.config-option__list input.range sliderbar{margin-left:-8dp;margin-right:-6dp;width:16dp;height:16dp;background-color:#ccc;border-radius:8dp;transition:background-color .033s linear-in-out}.config-option__list input.range sliderbar:hover{cursor:pointer;background-color:#f2f2f2}.config-option__list input.range sliderbar:active,.config-option__list input.range slidertrack:active+sliderbar{background-color:#17d6e8}.config-option__list input.range sliderarrowdec,.config-option__list input.range sliderarrowinc{display:none}.config-option__range-wrapper{margin-top:4dp;max-width:360dp}.config-option__range-label{flex:0 0 16dp;display:block;padding:0;margin:0 12dp;margin-right:16dp;color:#f2f2f2;tab-index:none}.button{display:block;padding:16dp 20dp;background-color:rgba(122,42,198,.8);color:#f2f2f2;border-radius:12dp;width:auto;height:auto}.button:focus{background-color:#7a2ac6}.button:disabled,.button[disabled]{opacity:.5;color:rgba(255,255,255,.6)}.button:active{background-color:#6e26b2;color:#f5f5f5}.button__label{width:auto;height:auto}.launcher{display:block;flex-direction:row;justify-content:space-between;position:relative;width:100%;height:100%;background-color:#08070d}.launcher__vertical-split{display:flex;position:absolute;flex-direction:column;align-items:flex-start;justify-content:space-between;top:0;right:50%;bottom:0;left:0}.launcher__vertical-split--right{align-items:flex-end;right:0;left:50%}.launcher__title-quadrant{flex:1 1 auto;padding-top:96dp;padding-left:96dp;width:auto;height:auto}.launcher__title-quadrant--right{padding-right:96dp;padding-left:0}.launcher__content-quadrant{display:flex;position:relative;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:32dp;width:100%;height:auto;flex:1 1 100%}.menu-list-item{display:flex;flex-direction:row;align-items:center;width:100%;height:auto;padding:16dp;border-radius:8dp;background-color:rgba(0,0,0,0);color:#ccc;cursor:pointer}.menu-list-item--right{align-content:flex-end;flex-direction:row-reverse}.menu-list-item--right .menu-list-item__bullet{opacity:1;margin-left:12dp}.menu-list-item--right.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item--right.menu-list-item:hover:not(:disabled,[disabled]){decorator:gradient(horizontal #7A2AC600 #DABAF714)}.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item:hover:not(:disabled,[disabled]){color:#b97df2;decorator:gradient(horizontal #7A2AC614 #DABAF700)}.menu-list-item:focus:not(:disabled,[disabled]) .menu-list-item__bullet,.menu-list-item:hover:not(:disabled,[disabled]) .menu-list-item__bullet{opacity:1}.menu-list-item:disabled,.menu-list-item[disabled]{opacity:.5;tab-index:none;cursor:default}.menu-list-item__bullet{opacity:0;margin-right:12dp}.subtitle-title{display:block;position:relative;width:auto;height:auto;flex-direction:column;align-items:flex-start;align-content:flex-start;background-color:rgba(0,0,0,0);color:#ccc;cursor:pointer;text-align:left;padding:0}.subtitle-title--right{align-content:flex-end}.subtitle-title--right,.subtitle-title--right>*{text-align:right}.subtitle-title[selected]{color:#f2f2f2;cursor:default}.subtitle-title:focus:not(:disabled,[disabled]),.subtitle-title:hover:not(:disabled,[disabled],[selected]){color:#b97df2}.subtitle-title:disabled,.subtitle-title[disabled]{opacity:.5;cursor:default;tab-index:none}.subtitle-title h3{margin-bottom:6dp}.subtitle-title h1{margin-top:6dp}.subtitle-title__disclaimer{margin-top:16dp}body{box-sizing:border-box;color:#f2f2f2;font-family:chiaro}*,*:before,*:after{box-sizing:border-box}button{background-color:#7a2ac6}
+h1{font-size:64dp;letter-spacing:4.48dp;line-height:64dp;font-style:normal;font-weight:700}h2{font-size:48dp;letter-spacing:3.36dp;line-height:48dp;font-style:normal;font-weight:700}h3{font-size:32dp;letter-spacing:2.24dp;line-height:32dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label,.button{font-size:32dp;letter-spacing:3.52dp;line-height:32dp;font-style:normal;font-weight:700}.label-md,.config-option__title,.tab{font-size:24dp;letter-spacing:2.64dp;line-height:24dp;font-style:normal;font-weight:700}.label-sm,.subtitle-title__disclaimer,.config-option__range-label,.config-option__list .config-option__tab-label{font-size:16dp;letter-spacing:2.24dp;line-height:16dp;font-style:normal;font-weight:700;text-transform:uppercase}body{font-size:16dp;letter-spacing:0dp;line-height:16dp;font-style:normal;font-weight:400}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.centered-page__modal{nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.centered-page__modal{focus:auto;tab-index:auto}h1{font-size:64dp;letter-spacing:4.48dp;line-height:64dp;font-style:normal;font-weight:700}h2{font-size:48dp;letter-spacing:3.36dp;line-height:48dp;font-style:normal;font-weight:700}h3{font-size:32dp;letter-spacing:2.24dp;line-height:32dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label,.button{font-size:32dp;letter-spacing:3.52dp;line-height:32dp;font-style:normal;font-weight:700}.label-md,.config-option__title,.tab{font-size:24dp;letter-spacing:2.64dp;line-height:24dp;font-style:normal;font-weight:700}.label-sm,.subtitle-title__disclaimer,.config-option__range-label,.config-option__list .config-option__tab-label{font-size:16dp;letter-spacing:2.24dp;line-height:16dp;font-style:normal;font-weight:700;text-transform:uppercase}body{font-size:16dp;letter-spacing:0dp;line-height:16dp;font-style:normal;font-weight:400}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.centered-page__modal{nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.centered-page__modal{focus:auto;tab-index:auto}*{box-sizing:border-box}hr{display:block;background:#000;padding:1.5dp}body{font-family:chiaro;font-weight:normal;font-style:normal;font-size:20dp;color:#fff}div#window{position:relative;width:100%;height:100%;box-sizing:border-box;background-color:#121018;border-color:rgba(255,255,255,.2)}div#content{z-index:2;width:auto;height:100%;overflow:hidden auto;text-align:center}p{text-align:left}input.submit{margin-left:0}input.text,input.password{box-sizing:border-box;height:31dp;padding:11dp 10dp 0;cursor:text;text-align:left}textarea{padding:14dp 12dp 10dp;cursor:text;text-align:left}input.text,input.password,select,textarea{height:auto}table input.text{box-sizing:border-box;width:100%;margin:0;line-height:1;border-width:1dp;border-color:#000;background-color:#fff;font-size:15dp;decorator:none;height:auto}select{display:inline-block;text-align:left;box-sizing:border-box;vertical-align:center;padding:4dp;border-radius:5dp;background-color:#787878;width:100%}select selectvalue{height:auto}select:hover selectvalue{background-color:#969696}select selectbox,tbody{background-color:#787878}select selectbox option{width:auto;background-color:#787878}select selectbox option:nth-child(even),tr:nth-child(even){background-color:#646464}select selectbox option:checked{font-weight:bold;color:#fff}select selectbox option:hover{background:#969696}input.radio,input.checkbox{flex:0;tab-index:auto;focus:auto;nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto;width:0dp}thead tr{height:35dp}thead td{padding-top:11dp}tbody{margin-left:5dp;margin-right:4dp;padding-top:4dp;padding-bottom:4dp}tbody tr{margin-left:9dp;margin-right:8dp;color:#000}expand{display:block;margin:1dp 0 1dp 5dp;height:17dp;width:17dp}scrollbarvertical{margin-top:-6dp;margin-bottom:-6dp;margin-right:-11dp;width:27dp}scrollbarvertical slidertrack:active{image-color:#aaa}scrollbarvertical sliderbar{margin-left:4dp;width:23dp;min-height:46dp}scrollbarvertical sliderarrowdec,scrollbarvertical sliderarrowinc{width:27dp;height:24dp}scrollbarhorizontal{width:0;height:0}textarea scrollbarvertical{cursor:arrow;margin:10dp 0 4dp 0;width:12dp}textarea scrollbarvertical slidertrack{decorator:none}textarea scrollbarvertical sliderbar{margin-left:2dp;width:10dp;min-height:16dp}textarea scrollbarvertical sliderarrowdec,textarea scrollbarvertical sliderarrowinc{width:0;height:0}textarea scrollbarhorizontal{cursor:arrow;margin-left:7dp;height:12dp}textarea scrollbarhorizontal sliderbar{background-color:rgba(188,0,0,.8);height:8dp;min-width:10dp}textarea scrollbarhorizontal sliderbar:hover{background-color:rgba(184,37,0,.8)}textarea scrollbarhorizontal sliderbar:active{background-color:rgba(119,0,0,.8)}.centered-page{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;padding:32dp}.centered-page__modal{display:flex;flex-direction:column;position:relative;margin:auto;flex:1 1 100%;max-width:1440dp dp;width:100%;height:100%;background:rgba(8,7,13,.72);border-radius:16dp;border-color:rgba(0,0,0,.35);border-width:1dp}.centered-page__modal panels{flex:1 1 100%}.tabs tabs{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.tab{display:block;position:relative;padding:20dp 24dp;background-color:rgba(0,0,0,0);margin:0;color:rgba(255,255,255,.6);transition:color .033s linear-in-out}.tab:selected{color:#f2f2f2}.tab:selected .tab__indicator{background-color:rgba(255,255,255,.6)}.tab:selected:hover{cursor:default}.tab:hover{cursor:pointer}.tab:focus{color:#f2f2f2}.tab__indicator{position:absolute;background-color:rgba(0,0,0,0);right:0;bottom:2dp;left:0;height:2dp}.config__form{border-top-color:rgba(255,255,255,.1);border-top-width:1dp;display:flex;flex-direction:column;justify-content:space-between;flex:1 1 100%;width:100%;height:100%;border-bottom-left-radius:16dp;border-bottom-right-radius:16dp}.config__wrapper{display:flex;flex-direction:column;border-radius:0dp;flex:1 1 100%;height:100%;padding:16dp;text-align:left;background-color:rgba(0,0,0,.35)}.config__footer{border-top-color:rgba(255,255,255,.1);border-top-width:1dp;display:flex;justify-content:flex-end;align-items:center;width:100%;padding:20dp 20dp;background-color:rgba(0,0,0,.35);border-bottom-left-radius:16dp;border-bottom-right-radius:16dp}.config__row{display:flex;flex-direction:row}.config-option{display:flex;flex-direction:column;flex:1;align-items:flex-start;justify-content:space-between;margin:8dp 0 16dp}.config-option__title{padding:0 12dp}.config-option__list{display:flex;padding:0;flex-direction:row;width:100%;align-items:flex-start;justify-content:flex-start}.config-option__list .config-option__tab-label{display:block;padding:12dp 0;margin:0 12dp;margin-right:16dp;color:rgba(255,255,255,.6);tab-index:none;transition:color .033s linear-in-out}.config-option__list .config-option__tab-label:hover{cursor:pointer}.config-option__list input.radio{visibility:hidden;width:0;height:0}.config-option__list input.radio:checked+.config-option__tab-label{border-bottom:1dp;border-color:rgba(255,255,255,.3)}.config-option__list input.radio:checked+.config-option__tab-label:hover{cursor:default}.config-option__list input.radio:focus+.config-option__tab-label{color:#f2f2f2}.config-option__list input.range slidertrack{margin-top:7dp;height:2dp;background-color:rgba(255,255,255,.2)}.config-option__list input.range sliderbar{margin-left:-8dp;margin-right:-6dp;width:16dp;height:16dp;background-color:#ccc;border-radius:8dp;transition:background-color .033s linear-in-out}.config-option__list input.range sliderbar:hover{cursor:pointer;background-color:#f2f2f2}.config-option__list input.range sliderbar:active,.config-option__list input.range slidertrack:active+sliderbar{background-color:#17d6e8}.config-option__list input.range sliderarrowdec,.config-option__list input.range sliderarrowinc{display:none}.config-option__range-wrapper{margin-top:4dp;max-width:360dp}.config-option__range-label{flex:0 0 16dp;display:block;padding:0;margin:0 12dp;margin-right:16dp;color:#f2f2f2;tab-index:none}.button{background-color:rgba(185,125,242,.05);color:#ccc;border-color:rgba(185,125,242,.8);display:block;padding:24dp;border-radius:12dp;border-width:1dp;width:auto;height:auto}.button:focus{color:#f2f2f2;border-color:#b97df2;background-color:rgba(185,125,242,.3)}.button:disabled,.button[disabled]{color:rgba(255,255,255,.6)}.button:active{background-color:rgba(185,125,242,.2);color:#f5f5f5}.button--secondary{background-color:rgba(23,214,232,.05);color:#ccc;border-color:rgba(23,214,232,.8)}.button--secondary:focus{color:#f2f2f2;border-color:#17d6e8;background-color:rgba(23,214,232,.3)}.button--secondary:disabled,.button--secondary[disabled]{color:rgba(255,255,255,.6)}.button--secondary:active{background-color:rgba(23,214,232,.2);color:#f5f5f5}.button--tertiary{background-color:rgba(242,242,242,.05);color:#ccc;border-color:rgba(242,242,242,.8)}.button--tertiary:focus{color:#f2f2f2;border-color:#f2f2f2;background-color:rgba(242,242,242,.3)}.button--tertiary:disabled,.button--tertiary[disabled]{color:rgba(255,255,255,.6)}.button--tertiary:active{background-color:rgba(242,242,242,.2);color:#f5f5f5}.button--success{background-color:rgba(69,208,67,.05);color:#ccc;border-color:rgba(69,208,67,.8)}.button--success:focus{color:#f2f2f2;border-color:#45d043;background-color:rgba(69,208,67,.3)}.button--success:disabled,.button--success[disabled]{color:rgba(255,255,255,.6)}.button--success:active{background-color:rgba(69,208,67,.2);color:#f5f5f5}.button--error{background-color:rgba(248,96,57,.05);color:#ccc;border-color:rgba(248,96,57,.8)}.button--error:focus{color:#f2f2f2;border-color:#f86039;background-color:rgba(248,96,57,.3)}.button--error:disabled,.button--error[disabled]{color:rgba(255,255,255,.6)}.button--error:active{background-color:rgba(248,96,57,.2);color:#f5f5f5}.button--warning{background-color:rgba(233,205,53,.05);color:#ccc;border-color:rgba(233,205,53,.8)}.button--warning:focus{color:#f2f2f2;border-color:#e9cd35;background-color:rgba(233,205,53,.3)}.button--warning:disabled,.button--warning[disabled]{color:rgba(255,255,255,.6)}.button--warning:active{background-color:rgba(233,205,53,.2);color:#f5f5f5}.button:disabled,.button[disabled]{opacity:.5}.button__label{width:auto;height:auto}.launcher{display:block;flex-direction:row;justify-content:space-between;position:relative;width:100%;height:100%;background-color:#08070d}.launcher__vertical-split{display:flex;position:absolute;flex-direction:column;align-items:flex-start;justify-content:space-between;top:0;right:50%;bottom:0;left:0}.launcher__vertical-split--right{align-items:flex-end;right:0;left:50%}.launcher__title-quadrant{flex:1 1 auto;padding-top:96dp;padding-left:96dp;width:auto;height:auto}.launcher__title-quadrant--right{padding-right:96dp;padding-left:0}.launcher__content-quadrant{display:flex;position:relative;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:32dp;width:100%;height:auto;flex:1 1 100%}.menu-list-item{display:flex;flex-direction:row;align-items:center;width:100%;height:auto;padding:16dp;border-radius:8dp;background-color:rgba(0,0,0,0);color:#ccc;cursor:pointer}.menu-list-item--right{align-content:flex-end;flex-direction:row-reverse}.menu-list-item--right .menu-list-item__bullet{opacity:1;margin-left:12dp}.menu-list-item--right.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item--right.menu-list-item:hover:not(:disabled,[disabled]){decorator:gradient(horizontal #7A2AC600 #DABAF714)}.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item:hover:not(:disabled,[disabled]){color:#b97df2;decorator:gradient(horizontal #7A2AC614 #DABAF700)}.menu-list-item:focus:not(:disabled,[disabled]) .menu-list-item__bullet,.menu-list-item:hover:not(:disabled,[disabled]) .menu-list-item__bullet{opacity:1}.menu-list-item:disabled,.menu-list-item[disabled]{opacity:.5;tab-index:none;cursor:default}.menu-list-item__bullet{opacity:0;margin-right:12dp}.subtitle-title{display:block;position:relative;width:auto;height:auto;flex-direction:column;align-items:flex-start;align-content:flex-start;background-color:rgba(0,0,0,0);color:#ccc;cursor:pointer;text-align:left;padding:0}.subtitle-title--right{align-content:flex-end}.subtitle-title--right,.subtitle-title--right>*{text-align:right}.subtitle-title[selected]{color:#f2f2f2;cursor:default}.subtitle-title:focus:not(:disabled,[disabled]),.subtitle-title:hover:not(:disabled,[disabled],[selected]){color:#b97df2}.subtitle-title:disabled,.subtitle-title[disabled]{opacity:.5;cursor:default;tab-index:none}.subtitle-title h3{margin-bottom:6dp}.subtitle-title h1{margin-top:6dp}.subtitle-title__disclaimer{margin-top:16dp}body{box-sizing:border-box;color:#f2f2f2;font-family:chiaro}*,*:before,*:after{box-sizing:border-box}button{background-color:#7a2ac6}
diff --git a/assets/scss/styles/components/Button.scss b/assets/scss/styles/components/Button.scss
index 09ba050..5232940 100644
--- a/assets/scss/styles/components/Button.scss
+++ b/assets/scss/styles/components/Button.scss
@@ -1,32 +1,69 @@
 @use 'sass:color';
 
+@mixin create-button-variation($base-col) {
+    background-color: rgba($base-col, 0.05);
+    color: $color-text-dim;
+    border-color: rgba($base-col, 0.8);
+
+    &:focus {
+        color: $color-text;
+        border-color: $base-col;
+        background-color: rgba($base-col, 0.3);
+    }
+
+    &:disabled,&[disabled] {
+        color: $color-text-inactive;
+    }
+
+    &:active {
+        background-color: rgba($base-col, 0.2);
+        color: color.scale($color-text, $lightness: 20%);
+    }
+}
+
 .button {
-    @extend %label-md;
+    @extend %label-lg;
+    @include create-button-variation($color-primary);
+
     display: block;
-    padding: 16dp 20dp;
-    background-color: rgba($color-primary-d, 0.8);
-    color: $color-text;
+    padding: space(24);
+
     border-radius: $border-radius-md;
+    border-width: space(1);
     width: auto;
     height: auto;
 
+    // Setting it by default for convenience
+    // &--primary {
+    //     @include create-button-variation($color-primary);
+    // }
+
+    &--secondary {
+        @include create-button-variation($color-secondary);
+    }
+
+    &--tertiary {
+        @include create-button-variation($color-text);
+    }
+
+    &--success {
+        @include create-button-variation($color-success);
+    }
+
+    &--error {
+        @include create-button-variation($color-error);
+    }
+
+    &--warning {
+        @include create-button-variation($color-warning);
+    }
+
     &:not([disabled]) {
         @extend %nav-all;
     }
 
-    &:focus {
-        // color: $color-primary-l;
-        background-color: $color-primary-d;
-    }
-
     &:disabled,&[disabled] {
         opacity: 0.5;
-        color: $color-text-inactive;
-    }
-
-    &:active {
-        background-color: color.scale($color-primary-d, $lightness: -10%);
-        color: color.scale($color-text, $lightness: 20%);
     }
 
     &__label {
diff --git a/assets/scss/styles/components/CenteredPage.scss b/assets/scss/styles/components/CenteredPage.scss
index 5bc06c3..323cb76 100644
--- a/assets/scss/styles/components/CenteredPage.scss
+++ b/assets/scss/styles/components/CenteredPage.scss
@@ -5,6 +5,7 @@ $base-height: 1080;
 
 .centered-page {
     display: flex;
+    // visibility: hidden;
     position: absolute;
     top: 0;
     right: 0;
@@ -25,7 +26,7 @@ $base-height: 1080;
     height: 100%;
     background: $color-bg-shadow-2;
     border-radius: $border-radius-modal;
-    border-color: $color-border-soft;
+    border-color: $color-bg-shadow;
     border-width: space(1);
 }
 
diff --git a/assets/scss/styles/components/Config.scss b/assets/scss/styles/components/Config.scss
index 025767a..794b1ef 100644
--- a/assets/scss/styles/components/Config.scss
+++ b/assets/scss/styles/components/Config.scss
@@ -29,7 +29,7 @@
     align-items: center;
     width: 100%;
     padding: space(20) space(20);
-    background-color: $color-bg-shadow-2;
+    background-color: $color-bg-shadow;
     border-bottom-left-radius: $border-radius-modal;
     border-bottom-right-radius: $border-radius-modal;
 }
diff --git a/assets/scss/styles/vars/_colors.scss b/assets/scss/styles/vars/_colors.scss
index 00ab971..cb83ceb 100644
--- a/assets/scss/styles/vars/_colors.scss
+++ b/assets/scss/styles/vars/_colors.scss
@@ -12,20 +12,45 @@ $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-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-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-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-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-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-primary-a50: rgba(185, 125, 242, 0.5000);
+$color-secondary-a50: rgba(23, 214, 232, 0.5000);
+$color-warning-a50: rgba(233, 205, 53, 0.5000);
+$color-error-a50: rgba(248, 96, 57, 0.5000);
+$color-success-a50: rgba(69, 208, 67, 0.5000);