Apply core changes on button styles (#373)

* Apply core changes on button styles

* Load more dependencies

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Versions and bullets are arranged chronologically from latest to oldest.
 
+## Unreleased
+
+- Fixed button colors.
+
 ## v1.10.4
 
 - Fixed broken StructuredDiscussions styles. (https://github.com/femiwiki/FemiwikiSkin/issues/365, https://github.com/femiwiki/FemiwikiSkin/issues/366)

resources/skins.femiwiki.moduleSkinStyles/mediawiki.ui.button.less

@@ -1,41 +1,31 @@
 @import '../variables.less';
+@import 'mediawiki.mixins.less';
+@import 'mediawiki.ui/mixins.buttons.less';
+@import 'mediawiki.ui/variables.less';
 
-// @See https://github.com/femiwiki/FemiwikiSkin/issues/161
+// https://github.com/femiwiki/FemiwikiSkin/issues/161
 .mw-ui-button {
   border-radius: 0;
   &.mw-ui-progressive {
-    background-color: @color-progressive;
-    border-color: @color-progressive;
-
-    &:hover {
-      background-color: @color-primary4;
-      border-color: @color-primary4;
-    }
-
-    &:focus {
-      box-shadow: inset 0 0 0 1px @color-progressive, inset 0 0 0 2px #fff;
-    }
-
-    &:active,
-    &.is-on {
-      background-color: @color-primary5;
-      border-color: @color-primary5;
-    }
+    .mw-ui-button-colors-primary(@color-progressive, @color-primary4, @color-primary5 );
 
     &.mw-ui-quiet {
       color: @color-progressive;
 
+      input[type='checkbox']:hover + &,
       &:hover {
         color: @color-primary4;
       }
 
-      &:active {
-        color: @color-primary5;
-      }
-
+      input[type='checkbox']:focus + &,
       &:focus {
         color: @color-progressive;
       }
+
+      input[type='checkbox']:active + &,
+      &:active {
+        color: @color-primary5;
+      }
     }
   }
 }