From 68c0e7136d3f8aad8a195a0371104f7dd5fa7060 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 21 Jun 2021 13:00:50 -0400
Subject: [PATCH] fix(button): buttons using fill and color properties now
 account for hover and focused opacity variables (#23442)

resolves #23441
---
 core/src/components/button/button.md.scss     | 15 ++++----
 .../components/button/test/outline/index.html |  1 +
 .../components/button/test/states/index.html  | 36 +++++++++++++++++++
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss
index f01520a164..a8493a2dbf 100644
--- a/core/src/components/button/button.md.scss
+++ b/core/src/components/button/button.md.scss
@@ -129,30 +129,29 @@
 // Material Design Button: Hover
 // --------------------------------------------------
 
+/**
+ * Only allow overriding of opacity here
+ * as developers should not be overriding
+ * colors when using the color prop.
+ */
+
 :host(.button-solid.ion-color.ion-focused) .button-native::after {
   background: #{current-color(contrast)};
-
-  opacity: .24;
 }
 
 :host(.button-clear.ion-color.ion-focused) .button-native::after,
 :host(.button-outline.ion-color.ion-focused) .button-native::after {
   background: #{current-color(base)};
-
-  opacity: .12;
 }
 
+
 @media (any-hover: hover) {
   :host(.button-solid.ion-color:hover) .button-native::after {
     background: #{current-color(contrast)};
-
-    opacity: .08;
   }
 
   :host(.button-clear.ion-color:hover) .button-native::after,
   :host(.button-outline.ion-color:hover) .button-native::after {
     background: #{current-color(base)};
-
-    opacity: .04;
   }
 }
diff --git a/core/src/components/button/test/outline/index.html b/core/src/components/button/test/outline/index.html
index 27db3c617a..0383bcb93a 100644
--- a/core/src/components/button/test/outline/index.html
+++ b/core/src/components/button/test/outline/index.html
@@ -90,6 +90,7 @@
         <ion-button fill="outline" class="ion-focused" color="dark">Dark.focused</ion-button>
         <ion-button fill="outline" class="ion-activated ion-focused" color="dark">Dark.activated.focused</ion-button>
       </p>
+
       <p>
         <ion-button fill="outline" disabled>Disabled</ion-button>
         <ion-button fill="outline" color="secondary" disabled>Secondary Disabled</ion-button>
diff --git a/core/src/components/button/test/states/index.html b/core/src/components/button/test/states/index.html
index acfb1e16fd..9bff07e624 100644
--- a/core/src/components/button/test/states/index.html
+++ b/core/src/components/button/test/states/index.html
@@ -89,6 +89,31 @@
         <ion-button class="custom ion-activated" color="warning" fill="outline">Outline</ion-button>
         <ion-button class="custom ion-activated" color="dark" fill="clear">Clear</ion-button>
       </p>
+
+      <div class="custom-variables">
+        <ion-button>Button</ion-button>
+        <ion-button fill="clear">Button</ion-button>
+        <ion-button fill="outline">Button</ion-button>
+
+        <br>
+
+        <ion-button class="ion-focused">Button</ion-button>
+        <ion-button class="ion-focused" fill="clear">Button</ion-button>
+        <ion-button class="ion-focused" fill="outline">Button</ion-button>
+
+        <br>
+
+        <ion-button color="tertiary">Button</ion-button>
+        <ion-button color="tertiary" fill="clear">Button</ion-button>
+        <ion-button color="tertiary" fill="outline">Button</ion-button>
+
+        <br>
+
+        <ion-button color="tertiary" class="ion-focused">Button</ion-button>
+        <ion-button color="tertiary" class="ion-focused" fill="clear">Button</ion-button>
+        <ion-button color="tertiary" class="ion-focused" fill="outline">Button</ion-button>
+      </div>
+
     </ion-content>
   </ion-app>
 
@@ -110,6 +135,17 @@
     .custom {
       --color: red;
     }
+
+    .custom-variables ion-button {
+      --color: black;
+
+      --background: pink;
+      --background-focused: red;
+      --background-hover: green;
+
+      --background-focused-opacity: .5;
+      --background-hover-opacity: .5;
+    }
   </style>
 </body>
 </html>