feat(note): add recipe and tokens by thetaPC · Pull Request #31729 · ionic-team/ionic-framework

thetaPC · 2026-11-11T00:57:40Z

Issue number: internal

What is the current behavior?

ion-note does not fragment styles based on themes.

What is the new behavior?

Migrates ion-note to a single stylesheet driven by theme tokens
Adds IonNoteRecipe / IonNoteConfig and the note tokens for the ionic, ios and md themes
Adds a hue property. It defaults to "bold"
A colored note now uses the color's foreground variant instead of base, matching ion-text and ion-title
Removes the theme virtual prop

Does this introduce a breaking change?

Yes
No

This PR introduces breaking changes to how ion-note is styled. Use the global token for theme-wide styling, or the CSS variable for component-specific overrides.

Replaced CSS variables

Old (9.x) New token (global) New CSS variable (component-specific)

--color IonNote.hue.bold.default.color --ion-note-hue-bold-default-color

A note with hue="subtle" reads IonNote.hue.subtle.default.color, or --ion-note-hue-subtle-default-color.

Colors: When color is set, the note color reads from a token instead of --ion-color-base. A bold note now uses the color's foreground variant, which is darker so the text stays readable on the page. To revert, set IonNote.hue.bold.semantic.default.color to var(--ion-color-base).

Hue	Token (global)	CSS variable (component-specific)
`bold`	`IonNote.hue.bold.semantic.default.color`	`--ion-note-hue-bold-semantic-default-color`
`subtle`	`IonNote.hue.subtle.semantic.default.color`	`--ion-note-hue-subtle-semantic-default-color`

Mode classes: Remove any instances that target the mode classes: ion-note.md, ion-note.ios.

Other information

Left for the parents

item.md.scss still sets the margin, align-self, font size and padding of a slotted ion-note. Those rules move with the item migration.

Known gaps

In the ios and md high-contrast palettes, the uncolored note is a different gray than on next, because the high-contrast text color steps are reversed. ionic-modular has the same values. Tracked as a follow-up
Bold and subtle look the same, because the palette's subtle foreground matches bold's. ion-text and ion-title are the same

How to test

Check	Before	After	What to look for
ios	Before	After	The gray notes look the same. The blue Primary note and yellow Warning note are slightly darker
md	Before	After	Same as ios
ionic	Before	After	Same as ios
md dark	Before	After	The gray notes look the same. The Primary and Warning notes are slightly darker

vercel · 2026-11-11T00:57:45Z

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

Project	Deployment	Actions	Updated
ionic-framework	Ready	Preview	Nov 12, 2026 11:48pm UTC

thetaPC · 2026-11-11T00:58:08Z

      await expect(note).toHaveScreenshot(screenshot(`note-diff`));
    });
-
-    test('should render color correctly', async ({ page }) => {


Moved to the hue tests

thetaPC · 2026-11-11T00:58:16Z

Moved to the hue tests

ShaneK

Just one small wording nit, otherwise looks good!

ShaneK · 2026-11-12T17:59:11Z

+3. Mode classes (`ion-note.md`, `ion-note.ios`) are no longer supported. <sup>[3](#version-10x-note-mode-classes)</sup>
+
+<h5 id="version-10x-note-replaced-css-variables">Replaced CSS variables</h5>
+
+Use the new token structure for global styles, or the corresponding CSS variable for component-specific overrides:
+
+| Old (9.x) | New token (global) | New CSS variable (component-specific) |
+|---|---|---|
+| `--color` | `IonNote.hue.bold.default.color` | `--ion-note-hue-bold-default-color` |
+
+> [!NOTE]
+> A note with `hue="subtle"` reads `IonNote.hue.subtle.default.color` for global styles, or `--ion-note-hue-subtle-default-color` for component-specific styles.
+
+<h5 id="version-10x-note-hue">New <code>hue</code> property and color tokens</h5>
+
+A new `hue` property selects between vibrant and muted color variants. It defaults to `"bold"`.
+
+When `color` is set, a bold note now uses the color's `foreground` variant instead of `base`, which is darker so the text stays readable on the page. To revert to the previous appearance, set `IonNote.hue.bold.semantic.default.color` to `var(--ion-color-base)` for global styles, or `--ion-note-hue-bold-semantic-default-color` for component-specific styles.
+
+When `color` is set, the note color now reads from a token instead of `--ion-color-base` directly. Global overrides should use the theme tokens; component-specific overrides use the corresponding CSS variables:
+
+| Hue | Token (global) | CSS variable (component-specific) |
+|---|---|---|
+| `bold` | `IonNote.hue.bold.semantic.default.color` | `--ion-note-hue-bold-semantic-default-color` |
+| `subtle` | `IonNote.hue.subtle.semantic.default.color` | `--ion-note-hue-subtle-semantic-default-color` |
+
+<h5 id="version-10x-note-mode-classes">Mode classes</h5>
+
+Remove any instances that target the mode classes: `ion-note.md`, `ion-note.ios`.


Suggested change

3. Mode classes (`ion-note.md`, `ion-note.ios`) are no longer supported. <sup>[3](#version-10x-note-mode-classes)</sup>

<h5 id="version-10x-note-replaced-css-variables">Replaced CSS variables</h5>

Use the new token structure for global styles, or the corresponding CSS variable for component-specific overrides:

| Old (9.x) | New token (global) | New CSS variable (component-specific) |

|---|---|---|

| `--color` | `IonNote.hue.bold.default.color` | `--ion-note-hue-bold-default-color` |

> [!NOTE]

> A note with `hue="subtle"` reads `IonNote.hue.subtle.default.color` for global styles, or `--ion-note-hue-subtle-default-color` for component-specific styles.

<h5 id="version-10x-note-hue">New <code>hue</code> property and color tokens</h5>

A new `hue` property selects between vibrant and muted color variants. It defaults to `"bold"`.

When `color` is set, a bold note now uses the color's `foreground` variant instead of `base`, which is darker so the text stays readable on the page. To revert to the previous appearance, set `IonNote.hue.bold.semantic.default.color` to `var(--ion-color-base)` for global styles, or `--ion-note-hue-bold-semantic-default-color` for component-specific styles.

When `color` is set, the note color now reads from a token instead of `--ion-color-base` directly. Global overrides should use the theme tokens; component-specific overrides use the corresponding CSS variables:

| Hue | Token (global) | CSS variable (component-specific) |

|---|---|---|

| `bold` | `IonNote.hue.bold.semantic.default.color` | `--ion-note-hue-bold-semantic-default-color` |

| `subtle` | `IonNote.hue.subtle.semantic.default.color` | `--ion-note-hue-subtle-semantic-default-color` |

<h5 id="version-10x-note-mode-classes">Mode classes</h5>

Remove any instances that target the mode classes: `ion-note.md`, `ion-note.ios`.

3. Theme classes (`ion-note.md`, `ion-note.ios`) are no longer supported. <sup>[3](#version-10x-note-theme-classes)</sup>

<h5 id="version-10x-note-replaced-css-variables">Replaced CSS variables</h5>

Use the new token structure for global styles, or the corresponding CSS variable for component-specific overrides:

| Old (9.x) | New token (global) | New CSS variable (component-specific) |

|---|---|---|

| `--color` | `IonNote.hue.bold.default.color` | `--ion-note-hue-bold-default-color` |

> [!NOTE]

> A note with `hue="subtle"` reads `IonNote.hue.subtle.default.color` for global styles, or `--ion-note-hue-subtle-default-color` for component-specific styles.

<h5 id="version-10x-note-hue">New <code>hue</code> property and color tokens</h5>

A new `hue` property selects between vibrant and muted color variants. It defaults to `"bold"`.

When `color` is set, a bold note now uses the color's `foreground` variant instead of `base`, which is darker so the text stays readable on the page. To revert to the previous appearance, set `IonNote.hue.bold.semantic.default.color` to `var(--ion-color-base)` for global styles, or `--ion-note-hue-bold-semantic-default-color` for component-specific styles.

When `color` is set, the note color now reads from a token instead of `--ion-color-base` directly. Global overrides should use the theme tokens; component-specific overrides use the corresponding CSS variables:

| Hue | Token (global) | CSS variable (component-specific) |

|---|---|---|

| `bold` | `IonNote.hue.bold.semantic.default.color` | `--ion-note-hue-bold-semantic-default-color` |

| `subtle` | `IonNote.hue.subtle.semantic.default.color` | `--ion-note-hue-subtle-semantic-default-color` |

<h5 id="version-10x-note-theme-classes">Theme classes</h5>

Remove any instances that target the theme classes: `ion-note.md`, `ion-note.ios`.

Nit: Every other component in here says "Theme classes" with a -theme-classes anchor, so I think note should match? The removed class came from getIonTheme too, so theme is the accurate word. This renames the list item, the heading and the anchor together so the link still works.

Thanks, but "mode classes" is intentional here. BREAKING.md compares against v9, where these classes come from mode, not the theme (example). #31723 already renamed the other components to "Mode classes"; this branch is just based on an older ionic-modular, so they still show "Theme classes" here. I reverted the rename.

Co-authored-by: Shane <[email protected]>

This reverts commit f11a991.

feat(note): add recipe and tokens

e0f6306

thetaPC added this pull request to stack #31730 November 11, 2026 00:57

github-actions Bot added package: core @ionic/core package package: angular @ionic/angular package package: vue @ionic/vue package labels Nov 11, 2026

thetaPC commented Nov 11, 2026

View reviewed changes

vercel Bot deployed to Preview November 11, 2026 01:00

View deployment

thetaPC marked this pull request as ready for review November 12, 2026 03:43

thetaPC requested a review from a team as a code owner November 12, 2026 03:43

thetaPC requested a review from brandyscarney November 12, 2026 03:43

brandyscarney approved these changes Nov 12, 2026

View reviewed changes

ShaneK approved these changes Nov 12, 2026

View reviewed changes

thetaPC and others added 2 commits November 12, 2026 10:14

docs(note): call the removed classes theme classes

f11a991

Co-authored-by: Shane <[email protected]>

Revert "docs(note): call the removed classes theme classes"

e2cd08e

This reverts commit f11a991.

vercel Bot deployed to Preview November 12, 2026 18:25

View deployment

Merge branch 'FW-6855-tests' into FW-6855

842c283

github-actions Bot added the package: react @ionic/react package label Nov 12, 2026

vercel Bot deployed to Preview November 12, 2026 20:57

View deployment

Merge branch 'FW-6855-tests' into FW-6855

ff4e849

github-actions Bot removed the package: react @ionic/react package label Nov 12, 2026

vercel Bot deployed to Preview November 12, 2026 23:48

View deployment

thetaPC merged commit 3cff351 into ionic-modular Nov 13, 2026
54 checks passed

thetaPC deleted the FW-6855 branch November 13, 2026 00:03

Navigation Menu

Repository navigation

feat(note): add recipe and tokens - #31729

feat(note): add recipe and tokens#31729
thetaPC merged 5 commits into
FW-6855-testsfrom
FW-6855

thetaPC commented Nov 11, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Nov 11, 2026 •

edited

Loading

Uh oh!

thetaPC Nov 11, 2026

Uh oh!

thetaPC Nov 11, 2026

Uh oh!

ShaneK left a comment

Uh oh!

ShaneK Nov 12, 2026

Uh oh!

thetaPC Nov 12, 2026

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

thetaPC commented Nov 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Left for the parents

Known gaps

How to test

Uh oh!

vercel Bot commented Nov 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thetaPC Nov 11, 2026

Choose a reason for hiding this comment

Uh oh!

thetaPC Nov 11, 2026

Choose a reason for hiding this comment

Uh oh!

ShaneK left a comment

Choose a reason for hiding this comment

Uh oh!

ShaneK Nov 12, 2026

Choose a reason for hiding this comment

Uh oh!

thetaPC Nov 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

thetaPC commented Nov 11, 2026 •

edited

Loading

vercel Bot commented Nov 11, 2026 •

edited

Loading