From 700469f27ed929cb1dd5fe45412913cba86a2ca5 Mon Sep 17 00:00:00 2001
From: Theodore Brown <theodorejb@outlook.com>
Date: Wed, 23 Aug 2023 10:24:43 -0500
Subject: [PATCH] Fix missing active state for outline buttons

Resolves #39085
---
 scss/_buttons.scss        | 14 +++++++++++++-
 scss/mixins/_buttons.scss |  8 ++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index e14a184384dc..fa6425a70d18 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -147,7 +147,19 @@
 
 @each $color, $value in $theme-colors {
   .btn-outline-#{$color} {
-    @include button-outline-variant($value);
+    @if $color == "light" {
+      @include button-outline-variant(
+        $value,
+        $active-background: shade-color($value, $btn-active-bg-shade-amount)
+      );
+    } @else if $color == "dark" {
+      @include button-outline-variant(
+        $value,
+        $active-background: tint-color($value, $btn-active-bg-tint-amount)
+      );
+    } @else {
+      @include button-outline-variant($value);
+    }
   }
 }
 // scss-docs-end btn-variant-loops
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index cf087fda7809..04977bc9285d 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -39,15 +39,15 @@
 @mixin button-outline-variant(
   $color,
   $color-hover: color-contrast($color),
-  $active-background: $color,
-  $active-border: $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)),
+  $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: #{$active-background};
-  --#{$prefix}btn-hover-border-color: #{$active-border};
+  --#{$prefix}btn-hover-bg: #{$color};
+  --#{$prefix}btn-hover-border-color: #{$color};
   --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
   --#{$prefix}btn-active-color: #{$active-color};
   --#{$prefix}btn-active-bg: #{$active-background};