Skip to content

fix(material/schematics): set generated font family on body #31618

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 30, 2025

Conversation

crisbeto
Copy link
Member

The custom theme that we generate during ng add adds changes the font on the html element which is problematic, because it affects all the components where we use rem units. These changes move the styles to the body to resolve the issue.

I've also changed the selector for the variables from html to :root. In practice they're the same, but :root seems to be the standard target for global variables.

Fixes #31611.

@crisbeto crisbeto requested a review from andrewseguin July 30, 2025 07:25
@crisbeto crisbeto requested a review from a team as a code owner July 30, 2025 07:25
@crisbeto crisbeto added the target: patch This PR is targeted for the next patch release label Jul 30, 2025
@crisbeto crisbeto requested review from ok7sai and removed request for a team July 30, 2025 07:25
@mmalerba
Copy link
Contributor

FYI I remember something in g3 treating :root specially even though it theoretically should be the same as html. I guess you can always try a presubmit and see what happens though

@crisbeto
Copy link
Member Author

Are we syncing this into g3? I thought we only had ng add externally.

The custom theme that we generate during `ng add` adds changes the `font` on the `html` element which is problematic, because it affects all the components where we use `rem` units. These changes move the styles to the `body` to resolve the issue.

I've also changed the selector for the variables from `html` to `:root`. In practice they're the same, but `:root` seems to be the standard target for global variables.

Fixes angular#31611.
@crisbeto crisbeto force-pushed the 31611/ng-generate-theme branch from 47c4968 to 0113a64 Compare July 30, 2025 16:51
@andrewseguin andrewseguin added the action: merge The PR is ready for merge by the caretaker label Jul 30, 2025
@crisbeto crisbeto removed the request for review from ok7sai July 30, 2025 16:57
@crisbeto crisbeto merged commit 8576ccf into angular:main Jul 30, 2025
25 checks passed
@crisbeto
Copy link
Member Author

The changes were merged into the following branches: main, 20.1.x

crisbeto added a commit that referenced this pull request Jul 30, 2025
The custom theme that we generate during `ng add` adds changes the `font` on the `html` element which is problematic, because it affects all the components where we use `rem` units. These changes move the styles to the `body` to resolve the issue.

I've also changed the selector for the variables from `html` to `:root`. In practice they're the same, but `:root` seems to be the standard target for global variables.

Fixes #31611.

(cherry picked from commit 8576ccf)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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