REFACTOR: Convert main button styles into a central mixin

app/assets/stylesheets/common/base/discourse.scss

@@ -94,32 +94,6 @@ h6 {
   margin-bottom: 0.5rem;
 }
 
-button {
-  &.ok {
-    background: $success;
-    color: $secondary;
-    .d-icon {
-      color: currentColor;
-    }
-    @include hover {
-      background: lighten($success, 10%);
-      color: $secondary;
-    }
-  }
-
-  &.cancel {
-    background: $danger;
-    color: $secondary;
-    .d-icon {
-      color: currentColor;
-    }
-    @include hover {
-      background: lighten($danger, 10%);
-      color: $secondary;
-    }
-  }
-}
-
 a.cancel {
   margin-left: 1.25em;
   line-height: normal;

app/assets/stylesheets/common/components/buttons.scss

@@ -5,38 +5,68 @@
 // Base
 // --------------------------------------------------
 
-.btn {
+@mixin btn(
+  $text-color: $primary,
+  $bg-color: $primary-low,
+  $icon-color: $primary-high,
+  $hover-text-color: $secondary,
+  $hover-bg-color: $primary-medium,
+  $hover-icon-color: $primary-low
+) {
   display: inline-block;
   margin: 0;
   padding: 6px 12px;
-  font-weight: 500;
+  min-height: 30px;
+  border: none;
+  box-sizing: border-box;
+  font-weight: normal;
+  color: $text-color;
+  background: $bg-color;
   font-size: $font-0;
   line-height: $line-height-small;
   text-align: center;
   cursor: pointer;
   transition: all 0.25s;
-  box-sizing: border-box;
-  min-height: 30px;
   .d-icon {
+    color: $icon-color;
+    margin-right: 0.45em;
     transition: color 0.25s;
-  }
+    line-height: $line-height-medium; // Match button text line-height
-  &:active,
-  &.btn-active {
-    text-shadow: none;
-  }
-  &[disabled],
-  &.disabled {
-    cursor: default;
-    opacity: 0.4;
-  }
-  .d-icon {
-    margin-right: 7px;
   }
   &.no-text {
     .d-icon {
       margin-right: 0;
     }
   }
+  @include hover {
+    background: $hover-bg-color;
+    color: $hover-text-color;
+    .d-icon {
+      color: $hover-icon-color;
+    }
+  }
+  &[href] {
+    color: $text-color;
+  }
+  &:active,
+  &.btn-active {
+    @include linear-gradient(
+      scale-color($bg-color, $lightness: -20%),
+      $bg-color
+    );
+  }
+  &[disabled],
+  &.disabled {
+    opacity: 0.4;
+    &:hover {
+      color: $text-color;
+      background: $bg-color;
+      .d-icon {
+        color: $icon-color;
+      }
+    }
+    cursor: not-allowed;
+  }
 }
 
 .btn.hidden {
@@ -47,117 +77,68 @@
 // --------------------------------------------------
 
 .btn {
-  border: none;
+  @include btn;
-  color: $primary;
-  font-weight: normal;
-  background: $primary-low;
-  .d-icon {
-    color: $primary-high;
-  }
-
-  &[href] {
-    color: $primary;
-    min-height: unset; // ovverides button defaults
-  }
-  @include hover {
-    background: $primary-medium;
-    color: $secondary;
-    .d-icon {
-      color: $secondary-very-high;
-    }
-  }
-  &[disabled],
-  &.disabled {
-    background: $primary-low;
-    .d-icon {
-      color: $primary-medium;
-    }
-    &:hover {
-      color: dark-light-choose($primary-low-mid, $secondary-high);
-      .d-icon {
-        color: $primary-low-mid;
-      }
-    }
-    cursor: not-allowed;
-  }
-
-  .d-icon {
-    line-height: $line-height-medium; // Match button text line-height
-  }
 }
 
 // Primary button
 // --------------------------------------------------
 
 .btn-primary {
-  border: none;
+  @include btn(
-  font-weight: normal;
+    $text-color: $secondary,
-  color: $secondary;
+    $bg-color: $tertiary,
-  background: $tertiary;
+    $icon-color: $secondary,
-  .d-icon {
+    $hover-bg-color: darken($tertiary, 10%),
-    color: currentColor;
+    $hover-icon-color: $secondary
-  }
-  &[href] {
-    color: $secondary;
-  }
-  @include hover {
-    background: dark-light-choose(
-      scale-color($tertiary, $lightness: -20%),
-      scale-color($tertiary, $lightness: 20%)
   );
-    .d-icon {
-      color: currentColor;
-    }
-  }
-  &:active,
-  &.btn-active {
-    @include linear-gradient(
-      scale-color($tertiary, $lightness: -20%),
-      $tertiary
-    );
-  }
-  &[disabled],
-  &.disabled {
-    background: $tertiary;
-    .d-icon {
-      color: currentColor;
-    }
-  }
 }
 
 // Danger button
 // --------------------------------------------------
 
 .btn-danger {
-  color: $secondary;
+  @include btn(
-  font-weight: normal;
+    $text-color: $secondary,
-  background: $danger;
+    $bg-color: $danger,
-  .d-icon {
+    $icon-color: $danger-low,
-    color: $danger-low;
+    $hover-bg-color:
-  }
+      dark-light-choose(
-  &[href] {
-    color: $secondary;
-  }
-  @include hover {
-    background: dark-light-choose(
         scale-color($danger, $lightness: -20%),
         scale-color($danger, $lightness: 20%)
+      ),
+    $hover-icon-color: $danger-low
+  );
+}
+
+// ✘ and ✔ buttons
+// --------------------------------------------------
+
+.btn.cancel {
+  @include btn(
+    $text-color: $secondary,
+    $bg-color: $danger,
+    $icon-color: $secondary,
+    $hover-bg-color:
+      dark-light-choose(
+        scale-color($danger, $lightness: -20%),
+        scale-color($danger, $lightness: 20%)
+      ),
+    $hover-icon-color: $secondary
+  );
+}
+
+.btn.ok {
+  @include btn(
+    $text-color: $secondary,
+    $bg-color: $success,
+    $icon-color: $secondary,
+    $hover-bg-color:
+      dark-light-choose(
+        scale-color($success, $lightness: -20%),
+        scale-color($success, $lightness: 20%)
+      ),
+    $hover-icon-color: $secondary
   );
-    .d-icon {
-      color: $danger-low;
-    }
-  }
-  &:active,
-  &.btn-active {
-    @include linear-gradient(scale-color($danger, $lightness: -20%), $danger);
-  }
-  &[disabled],
-  &.disabled {
-    background: $danger;
-    .d-icon {
-      color: $danger-low;
-    }
-  }
 }
 
 // Social buttons