feat(ripple-effect): add recipe and tokens

[thetaPC]

Issue number: resolves internal

---

What is the current behavior?

ion-ripple-effect fragments its styles across separate theme stylesheets.

What is the new behavior?

• Migrates ion-ripple-effect to Modular Ionic.
• Consolidates ripple-effect.common.scss and ripple-effect.ionic.scss into a single ripple-effect.scss.
• Adds IonRippleEffectRecipe with --ion-ripple-effect-opacity, plus per-theme token defaults in the ios, md, and ionic theme files.
• Renames the previously undocumented --ripple-opacity to --ion-ripple-effect-opacity.
• Prefixes the JS-driven ripple variables --translate-end and --final-scale as --internal-translate-end and --internal-final-scale.
• Removes the theme virtual prop and the getIonTheme runtime read.
• Extracts the scale duration into a SCALE_DURATION constant tied to the $scale-duration Sass variable.
• Adds ION_RIPPLE_EFFECT_TYPES plus the IonRippleEffectType type.

Does this introduce a breaking change?

• Yes
• No

This PR introduces breaking changes to how ion-ripple-effect is styled.

Migration Path:

1. Opacity variable: the previously undocumented --ripple-opacity is renamed.

Old	Token (global)	CSS variable (component-specific)
--ripple-opacity	IonRippleEffect.opacity	--ion-ripple-effect-opacity

2. Theme classes: Remove any instances that target the theme classes: ion-ripple-effect.md, ion-ripple-effect.ios

Other information

Preview

• Ripple Effect: basic

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Jun 9, 2026 9:35pm