refactor(button): add ripple effect to ionic theme (#29754)

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>

core/src/components/ripple-effect/ripple-effect.ionic.scss

@@ -0,0 +1,48 @@
+@use "./ripple-effect.common" as common;
+
+// Ionic Ripple Effect
+// --------------------------------------------------
+
+.ripple-effect {
+  animation-name: rippleAnimation, fadeInAnimation;
+}
+
+.fade-out {
+  animation-name: fadeOutAnimation;
+}
+
+@keyframes rippleAnimation {
+  from {
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+    transform: scale(1);
+  }
+
+  to {
+    transform: translate(var(--translate-end)) scale(var(--final-scale, 1));
+  }
+}
+
+@keyframes fadeInAnimation {
+  from {
+    animation-timing-function: linear;
+
+    opacity: 0;
+  }
+
+  to {
+    opacity: var(--ripple-opacity, 0.16);
+  }
+}
+
+@keyframes fadeOutAnimation {
+  from {
+    animation-timing-function: linear;
+
+    opacity: var(--ripple-opacity, 0.16);
+  }
+
+  to {
+    opacity: 0;
+  }
+}

core/src/components/ripple-effect/ripple-effect.tsx

@@ -9,7 +9,11 @@ import { getIonTheme } from '../../global/ionic-global';
  */
 @Component({
   tag: 'ion-ripple-effect',
-  styleUrl: 'ripple-effect.scss',
+  styleUrls: {
+    ios: 'ripple-effect.common.scss',
+    md: 'ripple-effect.common.scss',
+    ionic: 'ripple-effect.ionic.scss',
+  },
   shadow: true,
 })
 export class RippleEffect implements ComponentInterface {