Skip to content

feat(material/core): add mixins for Material Design typography#32959

Merged
andrewseguin merged 1 commit intoangular:mainfrom
mikzat:main
Mar 23, 2026
Merged

feat(material/core): add mixins for Material Design typography#32959
andrewseguin merged 1 commit intoangular:mainfrom
mikzat:main

Conversation

@mikzat
Copy link
Copy Markdown
Contributor

@mikzat mikzat commented Mar 20, 2026 •
edited by andrewseguin
Loading

Angular provides CSS system variables for Material typography, but the variable for "font" is not able to set letter-spacing, which requires users to remember to set letter-spacing separately:

  .mat-font-body-sm {
    font: var(--mat-sys-body-small);
    letter-spacing: var(--mat-sys-body-small-tracking);
  }

This change introduces typography mixins that ensure that both properties are set together, so the above snippet becomes:

  .mat-font-body-sm {
    @include typography.body-small();
  }

End-users can apply these mixins from the mat. entrypoint with a typography- prefix:

  .mat-font-body-sm {
    @include mat.typography-body-small();
  }

@pullapprove pullapprove Bot requested review from crisbeto and ok7sai March 20, 2026 22:26
@angular-robot angular-robot Bot added detected: feature PR contains a feature commit area: material/core labels Mar 20, 2026
@andrewseguin andrewseguin added target: major This PR is targeted for the next major release dev-app preview When applied, previews of the dev-app are deployed to Firebase docs: preview When applied, a preview of the documentation site is deployed to Firebase labels Mar 20, 2026
@ok7sai ok7sai requested a review from andrewseguin March 20, 2026 22:35
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Mar 20, 2026

Deployed dev-app for 8d3ba6c to: https://ng-dev-previews-comp--pr-angular-components-32959-dev-w27na8v1.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Mar 20, 2026

Deployed docs-preview for 8d3ba6c to: https://ng-dev-previews-comp--pr-angular-components-32959-docs-9y7jc320.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

@andrewseguin andrewseguin added the action: merge The PR is ready for merge by the caretaker label Mar 23, 2026
@andrewseguin andrewseguin merged commit a46b0a1 into angular:main Mar 23, 2026
9 of 12 checks passed
@andrewseguin
Copy link
Copy Markdown
Contributor

andrewseguin commented Mar 23, 2026

This PR was merged into the repository. The changes were merged into the following branches:

@angular-automatic-lock-bot
Copy link
Copy Markdown

angular-automatic-lock-bot Bot commented Apr 23, 2026

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot Bot locked and limited conversation to collaborators Apr 23, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@andrewseguin andrewseguin andrewseguin approved these changes

@crisbeto crisbeto Awaiting requested review from crisbeto

@ok7sai ok7sai Awaiting requested review from ok7sai

Assignees

No one assigned

Labels

action: merge The PR is ready for merge by the caretaker area: material/core detected: feature PR contains a feature commit dev-app preview When applied, previews of the dev-app are deployed to Firebase docs: preview When applied, a preview of the documentation site is deployed to Firebase target: major This PR is targeted for the next major release

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@mikzat @andrewseguin