TMS-1164: Button hover styles

Author: eebbi

assets/styles/settings/_settings.scss

@@ -7,8 +7,8 @@ $colors: (
 ) !default;
 
 $button-colors: (
-    "primary": ($primary, $color-white, $text, $text),
-    "secondary": ($secondary, $secondary-invert, $color-white, $color-black),
+    "primary": ($black, $white, $black, $white),
+    "secondary": ($black, $color-white, $black, $color-white),
 ) !default;
 
 $navbar-colors: (

assets/styles/settings/brand/_typography.scss

@@ -160,7 +160,7 @@ h4,
 $link-outline-color: $color-milavida-black;
 
 main {
-    a:not(.pill):not(.button) {
+    a:not(.pill):not(.button):not(.post-link) {
         text-underline-offset: .125rem;
 
         &:focus {

assets/styles/ui-components/_button.scss

@@ -37,50 +37,67 @@ $button-secondary-border-color: $button-primary-border-color;
     }
 
     &.is-primary {
-        background-color: $primary !important;
-        color: $primary-invert !important;
-        border-color: $primary-invert !important;
-
+        &,
         &:hover,
-        &:focus {
-            color: $primary-invert !important;
+        &.is-hovered,
+        &:focus,
+        &.is-focused,
+        &:active {
             background-color: $primary !important;
+            color: $primary-invert !important;
             border-color: $primary-invert !important;
 
             .icon {
                 fill: $primary-invert !important;
             }
         }
-
-        .icon {
-            fill: $primary-invert !important;
-        }
     }
 
     &.is-primary.is-inverted,
     &.is-primary-invert {
-        border-color: $primary !important;
-        background-color: $primary-invert !important;
-        color: $primary !important;
+        &,
+        &:hover,
+        &.is-hovered,
+        &:focus,
+        &.is-focused,
+        &:active {
+            border-color: $primary !important;
+            background-color: $primary-invert !important;
+            color: $primary !important;
 
-        .icon {
-            fill: currentColor !important;
-            color: inherit;
+            .icon {
+                fill: currentColor !important;
+                color: inherit;
+            }
         }
     }
 
     &.is-secondary {
-        background-color: $primary-invert !important;
-        color: $primary !important;
+        &,
+        &:hover,
+        &.is-hovered,
+        &:focus,
+        &.is-focused,
+        &:active {
+            background-color: $primary-invert !important;
+            color: $primary !important;
 
-        .icon {
-            fill: currentColor !important;
+            .icon {
+                fill: currentColor !important;
+            }
         }
     }
 
     &.is-outlined {
-        border-color: $primary-invert !important;
-        background-color: transparent !important;
-        color: $primary-invert !important;
+        &,
+        &:hover,
+        &.is-hovered,
+        &:focus,
+        &.is-focused,
+        &:active {
+            border-color: $primary-invert !important;
+            background-color: transparent !important;
+            color: $primary-invert !important;
+        }
     }
 }