Merge pull request #116 from devgeniem/TMS-1164

TMS-1164: Remove color changing on button hover & focus

Author: eebbi

CHANGELOG.MD

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- TMS-1164: Remove color changing for button hover-styles
+
 ## [1.19.0] - 2025-12-17
 
 - TMS-1226: Change focus order on events-search form

assets/styles/layouts/_subpages.scss

@@ -11,24 +11,13 @@
             h3 {
                 color: $white;
             }
-
-            &:focus,
-            &:hover {
-                h3 {
-                    color: $heading;
-                }
-
-                svg.icon {
-                    fill: $heading !important;
-                }
-            }
         }
 
         &:not(.has-background-image) {
             &:hover,
             &:focus {
-                background-color: $primary-invert !important;
-                color: $color-black !important;
+                background-color: $primary !important;
+                color: $color-white !important;
                 border-color: $primary !important;
             }
         }

assets/styles/overrides/_button.scss

@@ -14,57 +14,19 @@
             }
         }
 
-        &:hover,
-        &:focus {
-            border-color: $primary !important;
+        &.is-outlined {
+            color: $primary !important;
+
+            .icon {
+                fill: $primary !important;
+            }
         }
     }
 
     &.is-secondary {
         color: $secondary !important;
     }
 
-    &.is-primary,
-    &.is-secondary {
-        &.is-outlined {
-            &.is-hovered,
-            &:hover {
-                color: $primary !important;
-                background-color: $primary-invert !important;
-                border-color: $primary !important;
-                text-decoration: underline !important;
-
-                .icon {
-                    fill: $primary !important;
-                }
-            }
-
-            &.is-active,
-            &:active,
-            &.is-focused,
-            &:focus {
-                color: $secondary-invert !important;
-                background-color: $tertiary !important;
-                border-color: $tertiary !important;
-
-                .icon {
-                    fill: $secondary-invert !important;
-                }
-            }
-        }
-        &.is-inverted{
-            &:hover,
-            &:focus {
-                color: $primary-invert !important;
-                background-color: $primary !important;
-                border-color: $primary !important;
-                .icon {
-                    fill: $primary-invert !important;
-                }
-            }
-        }
-    }
-
     &.is-secondary-invert {
         &.is-outlined {
             color: $secondary-invert !important;
@@ -73,19 +35,6 @@
             .icon {
                 fill: $secondary-invert !important;
             }
-
-
-            &.is-hovered,
-            &:hover {
-                color: $secondary-invert !important;
-                background-color: $tertiary !important;
-                border-color: $secondary-invert !important;
-                text-decoration: underline !important;
-
-                .icon {
-                    fill: $secondary-invert !important;
-                }
-            }
         }
     }
 

assets/styles/overrides/_colors.scss

@@ -11,18 +11,6 @@
             .icon {
                 fill: $secondary-invert !important;
             }
-
-            &.is-hovered,
-            &:hover,
-            &.is-focused,
-            &:focus {
-                color: $primary !important;
-                border-color: $primary !important;
-
-                .icon {
-                    fill: $primary !important;
-                }
-            }
         }
     }
 }

assets/styles/overrides/_grid.scss

@@ -11,15 +11,6 @@
             color: $white !important;
             background-color: $primary !important;
             border-color: $primary !important;
-
-            &.is-hovered,
-            &:hover,
-            &.is-focused,
-            &:focus {
-                color: $primary !important;
-                background-color: $primary-invert !important;
-                border-color: $primary !important;
-            }
         }
 
         &.has-colors-primary {
@@ -56,15 +47,6 @@
                     color: $primary-invert !important;
                     background-color: transparent !important;
                     border-color: $primary-invert !important;
-
-                    &.is-hovered,
-                    &:hover,
-                    &.is-focused,
-                    &:focus {
-                        color: $primary !important;
-                        background-color: $primary-invert !important;
-                        border-color: $primary !important;
-                    }
                 }
             }
         }

assets/styles/ui-components/_pill.scss

@@ -15,42 +15,16 @@
     border-color: $black !important;
     text-transform: uppercase;
 
-    &:hover,
-    &:focus {
-        @include pill-hover-focus;
-    }
-
     &.is-primary-invert {
         color: $black !important;
         border-color: $black !important;
-
-        &:hover,
-        &:focus {
-            @include pill-hover-focus;
-        }
     }
 
     &.is-active {
         @include pill-hover-focus;
 
-        &:hover,
-        &:focus {
-            color: $black !important;
-        }
-
         .icon {
             fill: currentColor !important;
         }
-
-        &:not(span) {
-            &:hover,
-            &:focus {
-                color: $black !important;
-
-                .icon {
-                    fill: currentColor !important;
-                }
-            }
-        }
     }
 }