TMS-1164: Small modifications for button hovers

Author: eebbi

assets/styles/base/_typography.scss

@@ -26,28 +26,6 @@ a {
         outline: .15rem dotted;
         outline-offset: .2rem;
     }
-
-    &.has-background-primary {
-        &:hover,
-        &:focus {
-            background-color: $link-hover !important; // sass-lint:disable-line no-important
-        }
-
-        &:active {
-            background-color: $link-active !important; // sass-lint:disable-line no-important
-        }
-    }
-
-    &.has-background-accent {
-        &:hover,
-        &:focus {
-            background-color: $link-hover !important; // sass-lint:disable-line no-important
-        }
-
-        &:active {
-            background-color: $link-active !important; // sass-lint:disable-line no-important
-        }
-    }
 }
 
 .has-text-paragraph {

assets/styles/helpers/_button.scss

@@ -137,7 +137,11 @@ $button-transition-speed: $speed !default;
     &.is-outlined {
         &,
         &:active,
-        &.is-active {
+        &.is-active,
+        &:hover,
+        &.is-hovered,
+        &:focus,
+        &.is-focused {
             background-color: transparent;
             border-color: $button-border-invert;
             color: $button-text-invert;
@@ -153,7 +157,11 @@ $button-transition-speed: $speed !default;
     &.is-borderless {
         &,
         &:active,
-        &.is-active {
+        &.is-active,
+        &:hover,
+        &.is-hovered,
+        &:focus,
+        &.is-focused {
             background-color: $button-background-primary;
             border-color: transparent;
             color: $button-text-primary;
@@ -180,9 +188,9 @@ $button-transition-speed: $speed !default;
         &.is-hovered,
         &:focus,
         &.is-focused {
-            // background-color: $button-background-primary;
-            // border-color: $button-border-primary;
-            // color: $button-text-primary;
+            background-color: $button-background-invert;
+            border-color: $button-border-invert;
+            color: $button-text-invert;
 
             .icon {
                 fill: currentColor !important;
@@ -195,24 +203,40 @@ $button-transition-speed: $speed !default;
         }
 
         &.is-borderless {
-            background-color: $button-background-invert;
-            border-color: transparent;
-            color: $button-text-invert;
+            &,
+            &:active,
+            &.is-active,
+            &:hover,
+            &.is-hovered,
+            &:focus,
+            &.is-focused {
+                background-color: $button-background-invert;
+                border-color: transparent;
+                color: $button-text-invert;
 
-            .icon {
-                fill: currentColor !important;
+                .icon {
+                    fill: currentColor !important;
+                }
             }
 
             @extend .button-states;
         }
 
         &.is-outlined {
-            background-color: transparent;
-            border-color: $button-text-primary;
-            color: $button-text-primary;
+            &,
+            &:active,
+            &.is-active,
+            &:hover,
+            &.is-hovered,
+            &:focus,
+            &.is-focused {
+                background-color: transparent;
+                border-color: $button-text-primary;
+                color: $button-text-primary;
 
-            .icon {
-                fill: currentColor !important;
+                .icon {
+                    fill: currentColor !important;
+                }
             }
 
             @extend .button-states;

assets/styles/theme-kokemus.scss

@@ -40,7 +40,7 @@ $colors: (
 );
 
 $button-colors: (
-    "primary": ($primary, $color-white, $primary, $color-white),
+    "primary": ($primary, $primary-invert, $primary, $primary-invert),
     "secondary": ($secondary, $secondary-invert, $secondary, $secondary-invert),
 );
 

assets/styles/themes/_theme-kokemus-overrides.scss

@@ -27,7 +27,6 @@
         &:hover,
         &:focus {
             color: $primary-invert !important;
-            background-color: $primary !important;
         }
     }
 
@@ -120,10 +119,10 @@
 
         &:hover,
         &:focus {
-            color: $black !important;
+            color: darken($primary, 70%) !important;
 
             .icon {
-                fill: $black !important;
+                fill: darken($primary, 70%) !important;
             }
         }
     }