Skip to content

fix(material/toolbar): reset heading typography styles inside toolbar - #33319

Open
EduardF1 wants to merge 2 commits into
angular:mainfrom
EduardF1:fix/mat-toolbar-heading-typography-specificity
Open

EduardF1 wants to merge 2 commits into
angular:mainfrom
EduardF1:fix/mat-toolbar-heading-typography-specificity

Conversation

@EduardF1

@EduardF1 EduardF1 commented May 30, 2026 •

Copy link
Copy Markdown

Fixes #26261

Summary

Headings (h1 to h6) placed inside mat-toolbar inherit the .mat-typography heading styles instead of the toolbar's own title typography, so they get the hierarchy font size and a bottom margin. The toolbar rule .mat-toolbar h1 and the typography rule .mat-typography h1 have the same specificity (0-1-1), so the winner depends on CSS load order, and in the common setup (mat-typography on body, component styles loaded earlier) the typography rule wins.

Change

src/material/toolbar/toolbar.scss:

  • The toolbar title typography tokens (font-family, font-size, line-height, font-weight, letter-spacing) now live on .mat-toolbar itself.
  • Headings are reset through a doubled class selector, .mat-toolbar.mat-toolbar h1, ... h6 (specificity 0-2-1), with font: inherit, letter-spacing: inherit and margin: 0, so they always take the toolbar typography regardless of stylesheet order.

Before / after

  • Before (issue repro, mat-typography on body, <h1> inside <mat-toolbar>): the heading renders at the .mat-typography h1 size with a bottom margin.
  • After: the heading renders with the toolbar title typography and no margin.

Compatibility note

The heading selector moves from specificity 0-1-1 to 0-2-1. Application styles that override heading typography inside a toolbar with a single-class selector (for example .app-header h1 { font-size: 24px }) will need a stronger selector or the --mat-toolbar-title-text-size token override. There is no API change.

Validation

@pullapprove
pullapprove Bot requested review from adolgachev and crisbeto May 30, 2026 00:07
@google-cla

google-cla Bot commented May 30, 2026

Copy link
Copy Markdown

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@EduardF1
EduardF1 force-pushed the fix/mat-toolbar-heading-typography-specificity branch from 9ad657b to ddd97d7 Compare May 31, 2026 11:02
@EduardF1

Copy link
Copy Markdown
Author

Update: I have already signed the Google CLA with fischerszavarduard@gmail.com, and I have now rewritten this PR commit so the author/committer email matches that signed address. The cla/google check is still failing. Could a maintainer please re-run or investigate?

@EduardF1
EduardF1 force-pushed the fix/mat-toolbar-heading-typography-specificity branch from ddd97d7 to d41d7b7 Compare June 4, 2026 00:12
@EduardF1

EduardF1 commented Jun 4, 2026

Copy link
Copy Markdown
Author

Ah, the \cla/google\ check is still failing despite my earlier re-write to match my signed CLA email. I'll wait for a maintainer to investigate or manually approve. Thank you!

@EduardF1
EduardF1 force-pushed the fix/mat-toolbar-heading-typography-specificity branch from d41d7b7 to 41cdd0a Compare June 10, 2026 07:25
@EduardF1

Copy link
Copy Markdown
Author

@googlebot I signed it!

Heading elements (h1-h6) placed inside mat-toolbar were inheriting
mat-typography margins and font sizes, which overrode the toolbar's
intended styles.

Reset the heading margin to 0 and inherit the toolbar font using a
doubled `.mat-toolbar` selector so the styles take precedence over
`.mat-typography` heading rules.

Fixes angular#26261
@EduardF1
EduardF1 force-pushed the fix/mat-toolbar-heading-typography-specificity branch from 41cdd0a to 40839d0 Compare June 30, 2026 12:46
@pullapprove
pullapprove Bot requested a review from andrewseguin June 30, 2026 12:46

This branch has not been deployed

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug(mat-toolbar): mat-toolbar styles for elements like h1, h2, ... are not taking precedence over mat-typography

2 participants