updated button component and colors

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"

assets/scss/styles/components/Button.scss

@@ -1,32 +1,69 @@
 @use 'sass:color';
 
-.button {
+@mixin create-button-variation($base-col) {
-    @extend %label-md;
+    background-color: rgba($base-col, 0.05);
-    display: block;
+    color: $color-text-dim;
-    padding: 16dp 20dp;
+    border-color: rgba($base-col, 0.8);
-    background-color: rgba($color-primary-d, 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-lg;
+    @include create-button-variation($color-primary);
+
+    display: block;
+    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 {

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);
 }
 

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;
 }

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);