Fix outline button hover color to match regular buttons

Previously the hover state was the same as the non-hover state for regular buttons, which could cause confusion when a hovered outline button is near a regular button.
twbs · Sep 22, 2024 · dff2049 · dff2049
1 parent c7fa104
commit dff2049
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -159,11 +159,13 @@
     @if $color == "light" {
       @include button-outline-variant(
         $value,
+        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
         $active-background: shade-color($value, $btn-active-bg-shade-amount)
       );
     } @else if $color == "dark" {
       @include button-outline-variant(
         $value,
+        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
         $active-background: tint-color($value, $btn-active-bg-tint-amount)
       );
     } @else {

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
@@ -38,16 +38,19 @@
 // scss-docs-start btn-outline-variant-mixin
 @mixin button-outline-variant(
   $color,
-  $color-hover: color-contrast($color),
-  $active-background: if($color-hover == $color-contrast-light, shade-color($color, $btn-active-bg-shade-amount), tint-color($color, $btn-active-bg-tint-amount)),
+  $color-contrast: color-contrast($color),
+  $hover-background: if($color-contrast == $color-contrast-light, shade-color($color, $btn-hover-bg-shade-amount), tint-color($color, $btn-hover-bg-tint-amount)),
+  $hover-border: $hover-background,
+  $hover-color: color-contrast($hover-background),
+  $active-background: if($color-contrast == $color-contrast-light, shade-color($color, $btn-active-bg-shade-amount), tint-color($color, $btn-active-bg-tint-amount)),
   $active-border: $active-background,
   $active-color: color-contrast($active-background)
 ) {
   --#{$prefix}btn-color: #{$color};
   --#{$prefix}btn-border-color: #{$color};
-  --#{$prefix}btn-hover-color: #{$color-hover};
-  --#{$prefix}btn-hover-bg: #{$color};
-  --#{$prefix}btn-hover-border-color: #{$color};
+  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: #{$hover-border};
   --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
   --#{$prefix}btn-active-color: #{$active-color};
   --#{$prefix}btn-active-bg: #{$active-background};