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

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)

Author: crisbeto

src/material/schematics/ng-add/theming/create-custom-theme.ts

@@ -7,7 +7,7 @@
  */
 
 /** Create custom theme for the given application configuration. */
-export function createCustomTheme(userPaletteChoice: string) {
+export function createCustomTheme(userPaletteChoice: string): string {
   const colorPalettes = new Map<string, {primary: string; tertiary: string}>([
     ['azure-blue', {primary: 'azure', tertiary: 'blue'}],
     ['rose-red', {primary: 'rose', tertiary: 'red'}],
@@ -31,7 +31,9 @@ html {
     typography: Roboto,
     density: 0,
   ));
+}
 
+body {
   // Default the application to a light color theme. This can be changed to
   // \`dark\` to enable the dark color theme, or to \`light dark\` to defer to the
   // user's system settings.
@@ -43,5 +45,9 @@ html {
   background-color: var(--mat-sys-surface);
   color: var(--mat-sys-on-surface);
   font: var(--mat-sys-body-medium);
-}`;
+
+  // Reset the user agent margin.
+  margin: 0;
+}
+`;
 }