Skip to content

feat(text): add recipe and tokens#31170

Open
thetaPC wants to merge 14 commits into
ionic-modularfrom
FW-6861
Open

feat(text): add recipe and tokens#31170
thetaPC wants to merge 14 commits into
ionic-modularfrom
FW-6861

Conversation

@thetaPC
Copy link
Copy Markdown
Contributor

@thetaPC thetaPC commented May 26, 2026

Issue number: resolves internal


What is the current behavior?

ion-text does not fragment styles based on themes. All 3 themes share one style. However, it's not configured to the Modular Ionic.

What is the new behavior?

  • Added per-theme token defaults in ios, md, and ionic theme files.
  • Added a hue prop for selecting between vibrant and muted color variants. Defaults to "bold".
  • Adds IonTextRecipe / IonTextConfig / IonTextHue types.
  • Use foreground for colors.

Does this introduce a breaking change?

  • Yes
  • No

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

Migration Path:

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

  2. Color prop: The color applied by the color prop now reads from --ion-text-hue-{bold,subtle}-semantic-default-color instead of --ion-color-base directly. Consumers who were overriding the color via theme classes or by setting --ion-color-base on ion-text should switch to the new tokens.

Hue Token (global) CSS variable (component-specific)
bold IonText.hue.bold.semantic.default.color --ion-text-hue-bold-semantic-default-color
subtle IonText.hue.subtle.semantic.default.color --ion-text-hue-subtle-semantic-default-color

Other information

Previews

@vercel
Copy link
Copy Markdown

vercel Bot commented May 26, 2026

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

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview, Comment May 29, 2026 9:42pm

Request Review

@github-actions github-actions Bot added package: core @ionic/core package package: angular @ionic/angular package package: vue @ionic/vue package labels May 26, 2026
@thetaPC thetaPC marked this pull request as ready for review May 27, 2026 02:50
@thetaPC thetaPC requested a review from a team as a code owner May 27, 2026 02:50
@thetaPC thetaPC requested a review from brandyscarney May 27, 2026 02:50
Copy link
Copy Markdown
Member

@brandyscarney brandyscarney left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good! I am mostly requesting some additional screenshot tests and for us to either update the subtle colors or create a follow-up ticket.

Comment thread core/src/components/text/text.interfaces.ts
Comment thread core/src/components/text/test/hue/index.html
Comment thread core/src/themes/ionic/default.tokens.ts
Copy link
Copy Markdown
Member

@brandyscarney brandyscarney left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, thanks for making those changes! One comment about some screenshots that got updated but non-blocking.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this going to cause issues being unrelated?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: angular @ionic/angular package package: core @ionic/core package package: vue @ionic/vue package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants