fix(button): use correct styles for the focused state and clear color

Author: brandyscarney

core/src/components/button/button.common.scss

@@ -96,7 +96,7 @@
 :host(.button-clear) {
   --border-width: 0;
   --background: transparent;
-  --color: #{ion-color(primary, base)};
+  --color: #{ion-color(primary, foreground)};
 }
 
 // Block Button
@@ -289,7 +289,7 @@ ion-ripple-effect {
 // Clear Button with Color
 :host(.button-clear.ion-color) .button-native {
   background: transparent;
-  color: current-color(base);
+  color: current-color(foreground);
 }
 
 // Button in Toolbar

core/src/components/button/button.ionic.scss

@@ -45,8 +45,7 @@
 :host(.button-solid) {
   --background-activated: #{globals.ion-color(primary, shade)};
   --background-hover: #{globals.ion-color(primary, contrast)};
-  --background-focused: #{globals.ion-color(primary, contrast)};
-  --background-focused-opacity: 0.24;
+  --background-focused: transparent;
   --background-hover-opacity: 0.08;
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
@@ -217,16 +216,6 @@
   outline-offset: globals.$ion-border-size-050;
 }
 
-/**
- * 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: globals.current-color(contrast);
-}
-
 // Button: Activated
 // --------------------------------------------------