Add dark button color variants

src/newsreader/scss/components/post/_post.scss

@@ -87,7 +87,7 @@
   }
 
   &__close-button {
-    background-color: $blue;
+    background-color: var(--info-color);
     color: var(--font-color);
 
     // TODO add mixin for default font awesome padding

src/newsreader/scss/elements/button/_button.scss

@@ -16,30 +16,17 @@
 
   &--success, &--confirm {
     color: $white !important;
-    background-color: $green; // TODO add dark variant
+    background-color: var(--confirm-color);
-
-    &:hover {
-      background-color: lighten($green, +5%);
-    }
   }
 
   &--error, &--cancel {
     color: $white !important;
-    background-color: $red; // TODO add dark variant
+    background-color: var(--danger-color);
-
-    &:hover {
-      background-color: lighten($red, +5%);
-    }
-
   }
 
   &--primary {
     color: $white !important;
-    background-color: $blue; // TODO add dark variant
+    background-color: var(--info-color);
-
-    &:hover {
-      background-color: lighten($blue, 5%);
-    }
   }
 
   &--reddit {
@@ -61,7 +48,7 @@
   }
 
   &--disabled {
-    color: $font-color !important;
+    color: var(--font-color) !important;
-    background-color: $gray !important; // TODO add dark variant
+    background-color: $gray !important;
   }
 }

src/newsreader/scss/elements/button/_read-button.scss

@@ -4,7 +4,7 @@
   color: var(--font-color);
 
   // TODO add dark colored confirm green #007965
-  background-color: $green;
+  background-color: var(--confirm-color);
 
   // TODO add mixin for default font awesome padding
   & i {

src/newsreader/scss/partials/_colors.scss

@@ -27,7 +27,7 @@ $checkbox-blue: rgba(34, 170, 253, 1);
 // White theme
 $background-color: $white;
 
-$font-color: rgba(48, 51, 53, 1);
+$font-color: rgba(83, 87, 91, 1);
 $link-color: darken($azureish-white, 30%);
 $read-color: darken($gainsboro, 10%);
 
@@ -35,6 +35,11 @@ $accent-color: $gainsboro;
 $lighter-accent-color: $gainsboro;
 $lightest-accent-color: $orange;
 
+$confirm-color: rgba(89, 181, 128, 1);
+$danger-color: rgba(237, 118, 105, 1);
+$warning-color: rgba(255, 218, 119, 1);
+$info-color: rgba(40, 171, 185, 1);
+
 // Dark theme
 $dark-background-color: rgba(29, 45, 80, 1);
 
@@ -45,3 +50,8 @@ $dark-read-color: darken($dark-font-color, 20%);
 $dark-accent-color: rgba(19, 59, 92, 1);
 $dark-lighter-accent-color: rgba(30, 95, 116, 1);
 $dark-lightest-accent-color: rgba(252, 218, 183, 1);
+
+$dark-confirm-color: rgba(0, 121, 101, 1);
+$dark-danger-color: rgba(175, 45, 45, 1);
+$dark-warning-color: rgba(238, 187, 77, 1);
+$dark-info-color: rgba(31, 111, 139, 1);

src/newsreader/scss/partials/_root.scss

@@ -9,6 +9,11 @@
   --lighter-accent-color: #{$lighter-accent-color};
   --lightest-accent-color: #{$lightest-accent-color};
 
+  --confirm-color: #{$confirm-color};
+  --danger-color: #{$danger-color};
+  --warning-color: #{$warning-color};
+  --info-color: #{$info-color};
+
   &.dark-theme {
     --background-color: #{$dark-background-color};
 
@@ -19,6 +24,11 @@
     --accent-color: #{$dark-accent-color};
     --lighter-accent-color: #{$dark-lighter-accent-color};
     --lightest-accent-color: #{$dark-lightest-accent-color};
+
+    --confirm-color: #{$dark-confirm-color};
+    --danger-color: #{$dark-danger-color};
+    --warning-color: #{$dark-warning-color};
+    --info-color: #{$dark-info-color};
   }
 
   color: var(--font-color);