fix(button): buttons using fill and color properties now account for hover and focused opacity variables (#23442)

resolves #23441

Author: liamdebeasi

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;
   }
 }

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>

core/src/components/button/test/states/index.html

@@ -89,6 +89,31 @@ <h3>Custom</h3>
         <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 @@ <h3>Custom</h3>
     .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>