feat(skeleton-text): add recipe and tokens

[thetaPC]

Issue number: resolves internal

---

What is the current behavior?

ion-skeleton-text is not integrated with the Modular Ionic token system.

What is the new behavior?

• Migrates ion-skeleton-text to Modular Ionic, consolidating its styles into a single token-driven stylesheet.
• Adds IonSkeletonTextRecipe plus per-theme token defaults in the ios, md, and ionic theme files.
• Replaces --background and --background-rgb with per-state background tokens. Each state (resting and animated) exposes an RGB channel and an alpha, so the resting fill and the animated shimmer can be recolored and have their opacity set independently (--ion-skeleton-text-default-background-rgb / -alpha and --ion-skeleton-text-animated-background-rgb / -alpha).
• Renames --border-radius to --ion-skeleton-text-border-radius, and adds --ion-skeleton-text-line-height and --ion-skeleton-text-margin-top / --ion-skeleton-text-margin-bottom tokens.
• Removes the runtime theme branching (getIonTheme and the theme virtual prop); visual differences now come entirely from tokens.
• Rounds a slotted skeleton to match its media parent: ion-thumbnail sets the radius on ::slotted(ion-skeleton-text), and ion-avatar does the same through its existing --border-radius.

Does this introduce a breaking change?

• Yes
• No

This PR introduces breaking changes to how ion-skeleton-text is styled.

Migration Path:

1. Background: --background and --background-rgb are replaced with per-state RGB and alpha variables. The single --background-rgb previously tinted both the resting fill and the shimmer, so set both state variables to recolor both. --background (the resolved resting color) has no one-to-one replacement; set the resting RGB and alpha instead.

Old	Token (global)	CSS variable (component-specific)
--background-rgb	IonSkeletonText.default.background.rgb	--ion-skeleton-text-default-background-rgb
--background-rgb	IonSkeletonText.animated.background.rgb	--ion-skeleton-text-animated-background-rgb

2. Border radius

Old	Token (global)	CSS variable (component-specific)
--border-radius	IonSkeletonText.border.radius	--ion-skeleton-text-border-radius

3. Theme classes: Remove any instances that target the theme classes: ion-skeleton-text.md, ion-skeleton-text.ios

Other information

Previews

• Skeleton Text: basic
• Skeleton Text: custom

[vercel]

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

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

[thetaPC]

This will eventually look like @include border-radius(var(--ion-avatar-border-radius, revert-layer)); when avatar is migrated.

[thetaPC]

Deleted snapshots because they didn't differ in behavior when it came to modes or direction.

[thetaPC]

Now using setContent and simplified it to show one of each use case that the basic test page is showing.

[thetaPC]

Now using setContent and simplified it to show one of each use case that the custom test page is showing.

[thetaPC]

Since animations are turned off on e2e, it was easier to test out in a spec.

[thetaPC]

I decided to split the background into two states and also introduced alpha. This would allow further flexibility for devs to customize their skeletons.

[ShaneK]

Looks good to me! Awesome work 🎉

[brandyscarney]

Is this the desired way to add variables instead of a vars file?

[thetaPC]

Yes, at least in my opinion. The goal is to limit the need for variables, and only use them if they are going to be constantly used throughout or the value is very complex.

[brandyscarney]

I think this kind of goes against how we've been separating out constants into interfaces files. I would expect the variables to be in vars files still.

[thetaPC]

I went with plural (*.vars.scss) since it sounded weird singular. But let me know if it should be singular like the interfaces file and I'll change it. 0ed659d