Adding success and error colored buttons

src/base.scss

@@ -15,7 +15,13 @@
     --secondary: #d8701b;
     --on-secondary: black;
     --error: rgb(255, 0, 0);
-    --primary-transparent: #196eb917
+    --on-error: white;
+    
+    --primary-transparent: #196eb917;
+
+    --success: #28a745;
+    --on-success: white;
+
 }
 
 $primary: var(--primary) !default;
@@ -27,6 +33,9 @@ $on-secondary: var(--on-secondary) !default;
 $error: var(--error) !default;
 $on-error: var(--on-error) !default;
 
+$success: var(--success) !default;
+$on-success: var(--on-success) !default;
+
 @import "./base/_global.scss";
 @import "./base/_btn.scss";
 @import "./base/_modal.scss";

src/base/_btn.scss

@@ -20,9 +20,9 @@
     @include btn-flat();
 }
 
-.btn-primary {
-    background: $primary !important;
-    color: $on-primary !important;
+@mixin btn-color($background, $text) {
+    background: $background !important;
+    color: $text !important;
 
     &:hover {
         filter: brightness(.95);
@@ -33,19 +33,21 @@
     }
 }
 
+
+.btn-primary {
+    @include btn-color($primary, $on-primary);
+}
+
 .btn-secondary {
+    @include btn-color($secondary, $on-secondary);
+}
 
-    background: $secondary !important;
-    color: $on-primary !important;
+.btn-success {
+    @include btn-color($success, $on-success );
+}
 
-
-    &:hover {
-        filter: brightness(.95);
-    }
-
-    &:active {
-        filter: brightness(1.05);
-    }
+.btn-error {
+    @include btn-color($error, $on-error );
 }
 
 .btn-icon {