feat(thumbnail): add recipe and tokens

[thetaPC]

Issue number: resolves internal

---

What is the current behavior?

ion-thumbnail is already a single SCSS file (no per-theme fragmentation), but its styles are hardcoded rather than driven by the Modular Ionic token system. The TSX also still calls getIonTheme and applies a theme class to the host even though all three themes render identically.

In addition, --size controls both width and height with a single token, so non-square thumbnails are not possible without a separate width/height override.

What is the new behavior?

• Defined TypeScript Interface: Added a new thumbnail.interfaces.ts with the IonThumbnailRecipe type.
• Defined Theme Defaults: Added per-theme token defaults in ios, md, and ionic theme files.
• Split --size into --width + --height: Non-square thumbnails are now possible.
• Public CSS variables: Replaced --size / --border-radius with the namespaced --ion-thumbnail-width, --ion-thumbnail-height, and --ion-thumbnail-border-radius.
• Removed theme classes: Thumbnails won't render with a theme defined as a class.
• Updated consumers internally: ion-item-divider, ion-item (ios + md theme files) now set --ion-thumbnail-width and --ion-thumbnail-height directly instead of --size.

Does this introduce a breaking change?

• Yes
• No

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

Migration Path:

1. CSS Variable Replacements: --size and --border-radius have been removed. Use the new token structure:

--size -> IonThumbnail.width + IonThumbnail.height
--border-radius -> IonThumbnail.border.radius

Code that previously relied on a single --size override must now set both --ion-thumbnail-width and --ion-thumbnail-height:

// Before
<ion-thumbnail style="--size: 48px"></ion-thumbnail>

// After
<ion-thumbnail style="--ion-thumbnail-width: 48px; --ion-thumbnail-height: 48px"></ion-thumbnail>

If per-component customization is needed, the CSS variables can be used directly.

--size -> --ion-thumbnail-width / --ion-thumbnail-height
--border-radius -> --ion-thumbnail-border-radius

Note: slotted thumbnails inside ion-item and ion-item-divider continue to render at their previous sizes — these components have been updated internally to set the new variables.

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

Other information

Preview:

• Thumbnail: basic

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	May 23, 2026 2:49am

[thetaPC]

The themes/ directory (generated by npm run build.themes and dynamically imported by scripts.js at runtime as /themes/{theme}/default.tokens.js) wasn't being copied into the Vercel output, so the token modules 404'd in deployed previews while working fine locally where the dev server serves it from core/.

[thetaPC]

If these tokens are not set then default to the size that was set prior like the original --ion-thumbnail-width/--ion-thumbnail-height.