fix(button): use proper colors for the button states in the ionic theme (#30339)

Issue number: internal

---------

## What is the current behavior?
The focused and hover states are appearing as an overlay of the contrast
color on the buttons.

## What is the new behavior?
- Updates hover and focus states to match Figma designs
- Focus background should not change from the default
- Hover background should be the shade for solid buttons, and use
neutral subtlest for clear and outline buttons
- Updates the clear button to use the new `foreground` variant

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

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

@@ -44,10 +44,9 @@
 
 :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-hover-opacity: 0.08;
+  --background-hover: #{globals.ion-color(primary, shade)};
+  --background-focused: transparent;
+  --background-hover-opacity: 1;
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
 }
@@ -58,10 +57,10 @@
 :host(.button-outline) {
   --border-width: #{globals.$ion-border-size-025};
   --border-style: #{globals.$ion-border-style-solid};
-  --background-activated: #{globals.$ion-primitives-neutral-200};
+  --background-activated: #{globals.$ion-bg-neutral-subtlest-press};
   --background-focused: transparent;
-  --background-hover: #{globals.ion-color(primary, base)};
-  --background-hover-opacity: 0.04;
+  --background-hover: #{globals.$ion-bg-neutral-subtlest-press};
+  --background-hover-opacity: 1;
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
 }
@@ -70,10 +69,10 @@
 // --------------------------------------------------
 
 :host(.button-clear) {
-  --background-activated: #{globals.$ion-primitives-neutral-200};
+  --background-activated: #{globals.$ion-bg-neutral-subtlest-press};
   --background-focused: transparent;
-  --background-hover: #{globals.ion-color(primary, base)};
-  --background-hover-opacity: 0.04;
+  --background-hover: #{globals.$ion-bg-neutral-subtlest-press};
+  --background-hover-opacity: 1;
   --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
 // --------------------------------------------------
 
@@ -239,6 +228,15 @@
   background: transparent;
 }
 
+// Button: Hover
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+  :host(.button-solid.ion-color:hover) .button-native::after {
+    background: globals.current-color(shade);
+  }
+}
+
 // Button: Disabled
 // --------------------------------------------------