fix(button): update colors for ionic theme (#30764)

Issue number: internal

---------
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- fix outline and clear colors and ripple-effect;

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

[clear](https://ionic-framework-git-rou-12076-ionic1.vercel.app/src/components/button/test/clear?ionic:theme=ionic)

[outline](https://ionic-framework-git-rou-12076-ionic1.vercel.app/src/components/button/test/outline?ionic:theme=ionic)
[test
theme](https://ionic-framework-git-rou-12076-ionic1.vercel.app/src/components/button/test/theme-ionic?ionic:theme=ionic)

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Maria Hutt <maria.hutt@outsystems.com>

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

@@ -59,9 +59,9 @@
 :host(.button-outline) {
   --border-width: #{globals.$ion-border-size-025};
   --border-style: #{globals.$ion-border-style-solid};
-  --background-activated: #{globals.$ion-bg-neutral-subtlest-press};
+  --background-activated: #{globals.ion-color(primary, shade, $subtle: true)};
   --background-focused: transparent;
-  --background-hover: #{globals.$ion-bg-neutral-subtlest-press};
+  --background-hover: #{globals.ion-color(primary, shade, $subtle: true)};
   --background-hover-opacity: 1;
   --border-color: #{globals.ion-color(primary, base)};
   --color: #{globals.ion-color(primary, base)};
@@ -69,13 +69,20 @@
   --ripple-color: var(--background-activated);
 }
 
+// Warning Outline Button - use foreground color for text and border
+:host(.button-outline.ion-color-warning) .button-native {
+  border-color: globals.ion-color(warning, foreground);
+
+  color: globals.ion-color(warning, foreground);
+}
+
 // Clear Button
 // --------------------------------------------------
 
 :host(.button-clear) {
-  --background-activated: #{globals.$ion-bg-neutral-subtlest-press};
+  --background-activated: #{globals.ion-color(primary, shade, $subtle: true)};
   --background-focused: transparent;
-  --background-hover: #{globals.$ion-bg-neutral-subtlest-press};
+  --background-hover: #{globals.ion-color(primary, shade, $subtle: true)};
   --background-hover-opacity: 1;
   --color: #{globals.ion-color(primary, foreground)};
   --ripple-opacity: var(--background-activated-opacity, 1);
@@ -91,7 +98,7 @@
 
 :host(.button-outline.ion-color) ion-ripple-effect,
 :host(.button-clear.ion-color) ion-ripple-effect {
-  color: globals.$ion-primitives-neutral-200;
+  color: globals.current-color(shade, $subtle: true);
 }
 
 // Button Sizes
@@ -211,8 +218,15 @@
   background: globals.current-color(shade);
 }
 
+:host(.button-outline.ion-color.ion-activated) .button-native::after,
+:host(.button-clear.ion-color.ion-activated) .button-native::after {
+  background: globals.current-color(shade, $subtle: true);
+}
+
 :host(.ion-activated) .button-native:has(ion-ripple-effect)::after,
-:host(.button-solid.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after {
+:host(.button-solid.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after,
+:host(.button-outline.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after,
+:host(.button-clear.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after {
   background: transparent;
 }
 
@@ -223,6 +237,11 @@
   :host(.button-solid.ion-color:hover) .button-native::after {
     background: globals.current-color(shade);
   }
+
+  :host(.button-outline.ion-color:hover) .button-native::after,
+  :host(.button-clear.ion-color:hover) .button-native::after {
+    background: globals.current-color(shade, $subtle: true);
+  }
 }
 
 // Button: Disabled

core/src/components/button/test/theme-ionic/index.html

@@ -56,7 +56,8 @@
             <ion-select-option value="primary">Primary</ion-select-option>
             <ion-select-option value="success">Success</ion-select-option>
             <ion-select-option value="warning">Warning</ion-select-option>
-            <ion-select-option value="neutral">Neutral</ion-select-option>
+            <ion-select-option value="medium">Medium</ion-select-option>
+            <ion-select-option value="danger">Danger</ion-select-option>
           </ion-select>
         </p>