docs-bug(Typography): Confusion under what element add @mat.theme((...)), html or body

[stasberkov]

Documentation Feedback

Your guide https://material.angular.dev/guide/theming#getting-started suggests adding @mat.theme right under html element. While your examples on https://material.angular.dev/components/categories pages have @mat.theme under body element.

This causes significant difference: placing @mat.theme under html adds 13px font-size (by default it is 16px) that makes text labels tangibly smaller (since body text is set as 0.875rem).

Fonts in your https://material.angular.dev/components/categories pages looks way larger than if you place @mat.theme under html element.

Please resolve the confusion (fix documentation guide or the examples), what is the correct place for @mat.theme: html or body.

Affected documentation page

https://material.angular.dev/guide/theming#getting-started

[andrewseguin]

Can you provide more info about how the font size is changing between the two? I couldnt find a difference on the docs site when changing html to body. The mat.theme mixin is just adding variables - I don't follow how it is changing the font size

[stasberkov]

You are right. My bad. This is ag-grid's ag-theme-material that did the change.

[angular-automatic-lock-bot]

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.}