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 11:27pm

[thetaPC]

Was never used

[thetaPC]

Cleaned up the layout and added ripple demos at full trigger to make it easier to debug.

[thetaPC]

This can be tested manually by commenting out the disconnection flag.

[thetaPC]

While consolidating the ripple-effect theme files, the only difference in the rippleAnimation keyframe between ionic and ios/md was the easing curve:

• ios/md used cubic-bezier(0.4, 0, 0.2, 1) directly
• ionic used $ion-transition-curve-expressive

That ionic variable is defined as var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1)), so it resolves to the exact same curve by default. All three themes animate identically.

I chose to hardcode cubic-bezier(0.4, 0, 0.2, 1) in the consolidated file rather than introduce a --ion-ripple-effect-* token for it, because:

1. No visual difference to express. A token's purpose is to let a value vary per theme or be customized. Here the value is identical across all three themes, so a token would add public API surface and a recipe/token entry in every theme file for zero behavioral gain.
2. Consistency cost. If we tokenized this easing, we'd owe matching tokens for the other keyframe easings (fadeInAnimation/fadeOutAnimation both use linear) to avoid an arbitrary split — more surface area, still no visual difference.

If we ever need the ripple easing to be theme-customizable, then we can create the token at that time.