[brandyscarney]

Issue number: internal

---

What is the current behavior?

ion-gallery reads the theme and adds it as a class on its host, and its gap is hardcoded to 16px in both the gap prop default and the stylesheet, so a theme can't change it.

What is the new behavior?

• Migrates ion-gallery to Modular Ionic: removes the theme virtual prop and the theme class on the host.
• Adds IonGalleryRecipe with a gap token, exposed as --ion-gallery-gap. The ionic, ios and md themes set it to var(--ion-spacing-lg) (16px), so the default gap doesn't change.
• gap no longer defaults to '16px'. When it's unset, invalid, or a breakpoint map leaves out the active breakpoint, the gallery uses the theme's gap. A gap value still overrides the theme.
• Removes the 16px fallbacks on --internal-gallery-gap in gallery.scss and gallery-item.scss, so masonry items also use the theme's gap for the space between stacked items.
• Renames gallery-interface.ts to gallery.interface.ts and gallery-constants.ts to gallery.constant.ts, and renames the exported types to IonGalleryColumns, IonGalleryGap and IonGalleryBreakpointValues. DEFAULT_GAP is removed.
• Adds spec and e2e tests for the theme's gap: when gap is unset, for breakpoints a gap map doesn't set, and in each theme.

Does this introduce a breaking change?

• Yes
• No

ion-gallery hasn't been in a release yet, so removing theme, renaming the types and changing the gap default aren't breaking.

Other information

ion-gallery-item has no recipe because its stylesheet only has layout rules. The masonry spacing between its items comes from the gallery's gap.

How to test

Check	Before	After	What to look for
Basic	gallery-item PR	this PR	A grid of colored square tiles. The 16px gap between tiles should match.
Layouts	gallery-item PR	this PR	Uniform items stay square. Masonry items stack with even gaps and no gap under the last item in each column.
Wrapper	gallery-item PR	this PR	Items wrapped in <figure> line up with the others and keep the same size and gap.
Theme's gap		this PR	In the console, run document.querySelector('ion-gallery').style.setProperty('--ion-gallery-gap', '40px'). The gap on the first gallery should grow to 40px.

Swap ionic:theme and ionic:mode to ios or md to check the other themes.

[vercel]

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

Project	Deployment	Actions	Updated
ionic-framework	Ready	Preview	Oct 20, 2026 8:00pm UTC