feat(title): add recipe and tokens

[thetaPC]

Issue number: resolves internal

---

What is the current behavior?

ion-title does not fragment styles based on themes.

What is the new behavior?

• Migrates ion-title to Modular Ionic: one token-driven stylesheet, IonTitleRecipe and IonTitleConfig, and per-theme token defaults for ios, md and ionic.
• Adds a hue prop (bold by default, or subtle). The ionic theme now applies color, matching ios and md.
• The ionic title's padding moves from the toolbar into the title's tokens, so an ionic title outside a toolbar now gets the same inline padding as ios and md.
• size accepts medium, which is the default from the new IonTitle.size config. The header's condense effect also reads that config, so a title made large through it condenses. Size classes are now title-size-small, title-size-medium and title-size-large, and toolbar's matching classes are toolbar-title-size-*.
• Replaces --color with --ion-title-color, which also reaches the copy of a large title shown during the iOS page transition.
• Removes runtime theme branching (getIonTheme and the theme virtual prop) and the title-rtl class.
• Removes the iOS toolbar's large title rule and its title-large order value. The rule's selector can't reach the slotted title, so it never applied, and the title already computes order: 0. Rendering doesn't change.
• Adds a dynamicFontMax token helper, and rounds scaled sizes in dynamicFontMin and dynamicFontMax.
• Snapshot changes: the ionic title-color screenshots now show colored titles. In header's "root iOS header in an MD app" screenshot, the title follows the page's theme: an ancestor mode attribute now only affects behavior, as it already does for every migrated component.

Does this introduce a breaking change?

• Yes
• No

ion-title CSS variables and classes are replaced by token-driven custom properties and prop-named classes. Use the global token for theme-wide styling, or the CSS variable for component-specific overrides.

1. Color

Old	Token (global)	CSS variable (component-specific)
--color	IonTitle.color	--ion-title-color

2. Size classes

Old	New
title-default	title-size-medium
title-small	title-size-small
title-large	title-size-large
toolbar-title-default	toolbar-title-size-medium
toolbar-title-small	toolbar-title-size-small
toolbar-title-large	toolbar-title-size-large

3. RTL class: title-rtl is removed. Use ion-title:dir(rtl) instead.

4. Theme classes: remove any instances that target ion-title.md or ion-title.ios.

Other information

Left for the parents

Some ion-title styles still live in, or depend on, its parents. They move with that parent's work, so they aren't part of this PR.

• Toolbar titlePlacement: the text-align rules in toolbar.ionic.scss, and the iOS title's own centering in title.scss (marked with TODOs). A follow-up PR stacked on this one makes titlePlacement work in every theme and removes both.
• Header scroll effects: the rules in header.common.scss that hide and fade the title as the large title collapses. They depend on the header's scroll state and include its condense motion, so they move in the header migration (FW-6843).

How to test

Open each before and after link side by side.

Check	Before	After	What to look for
Color, ionic theme	before	after	Before, every title is dark gray. After, each title is drawn in the color it names, as in ios and md
Hue, every theme	none, new page	ios, md and ionic	The bold titles use the full color, and the subtle titles a muted one. ios uses the same hue colors as md, so its screenshots only cover md
No theme	before	after	Before, titles use the md styles. After, they render as plain text with no padding, which is how a migrated component looks without a theme
Basic, ios theme	before	after	Looks the same on both
Basic, md theme	before	after	Looks the same on both
Basic, ionic theme	before	after	Looks the same on both, including the titles' padding, which now comes from the title instead of the toolbar

[vercel]

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

Project	Deployment	Actions	Updated
ionic-framework	Ready	Preview	Oct 12, 2026 3:38pm UTC

[thetaPC]

The title in this snapshot now follows the page's md theme instead of the header's mode="ios", since migrated components take their look from the theme and mode only affects behavior; the header itself is still visible, which is what the test checks.