Sitelet https://github.com/angular/components/issues/31611
Skip to content

bug(theming): Custom theme created using ng-add reduces overall font-size #31611

Description

@shhdharmen

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

Not sure exactly, but 20.1.0

Description

With version 20.1.1, ng-add commands add below line in scss file, which causes overall font-sizes to be reduced.

font: var(--mat-sys-body-medium);

I think this go introduced with #31522

Reproduction

StackBlitz link: https://stackblitz.com/edit/4fzceyzs?file=src%2Fstyles.scss
Steps to reproduce:

  1. Observe the buttons' font-sizes, it's not same as what is given in docsite example https://material.angular.dev/components/button/overview#button-overview
  2. Comment the line font: var(--mat-sys-body-medium); to see that font-sizes are back to normal

Expected Behavior

Font-size should be same as what is given in docsite when we run ng-add.

Actual Behavior

Font-sizes are not same as what is given in docsite when we run ng-add.

Environment

  • Angular: 20.1.0
  • CDK/Material: 20.1.3 (on stackblitz it's 20.1.0, but the content of styles.scss is same as the content of file which is generated using 20.1.3)
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): macOS

Activity

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

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: ng-generateSchematics that generate code in user projects

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions