docs(material/core): show typography as part of the theme (#21810)

also recommend the mdc typography for the mdc components

Author: mmalerba

Diff for: guides/theming.md

@@ -96,7 +96,9 @@ $candy-app-theme: mat-light-theme((
     primary: $candy-app-primary,
     accent: $candy-app-accent,
     warn: $candy-app-warn,  
-  )
+  ),
+  typography: mat-typography-config(),
+  density: 0, // Defaults to 0 if omitted, but shown for completeness.
 ));
 
 // Include theme styles for core and each component used in your app.
@@ -155,7 +157,8 @@ $candy-app-theme:   mat-light-theme((
   color: (
     primary: $candy-app-primary,
     accent: $candy-app-accent,
-  )
+  ),
+  typography: mat-typography-config()
 ));
 
 // Include the default theme styles (color and default density)
@@ -242,7 +245,8 @@ $candy-app-theme:   mat-light-theme((
   color: (
     primary: $candy-app-primary,
     accent: $candy-app-accent,
-  )
+  ),
+  typography: mat-typography-config()
 ));
 
 // Include the theme styles for only specified components.

Diff for: guides/typography.md

@@ -67,10 +67,12 @@ creating a custom theme, you can create a custom **typography configuration**.
 
 // Define a custom typography config that overrides the font-family as well as the
 // `headlines` and `body-1` levels.
-$custom-typography: mat-typography-config(
-  $font-family: 'Roboto, monospace',
-  $headline: mat-typography-level(32px, 48px, 700),
-  $body-1: mat-typography-level(16px, 24px, 500)
+$custom-typography-theme: (
+    typography: mat-typography-config(
+        $font-family: 'Roboto, monospace', 
+        $headline: mat-typography-level(32px, 48px, 700),
+        $body-1: mat-typography-level(16px, 24px, 500)
+    )
 );
 ```
 
@@ -86,21 +88,21 @@ different Sass mixins.
 
 ```scss
 // Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
-@include mat-base-typography($custom-typography);
+@include mat-base-typography($custom-typography-theme);
 
 // Override typography for a specific Angular Material components.
-@include mat-checkbox-typography($custom-typography);
+@include mat-checkbox-typography($custom-typography-theme);
 
 // Override typography for all Angular Material, including mat-base-typography and all components.
-@include angular-material-typography($custom-typography);
+@include angular-material-typography($custom-typography-theme);
 ```
 
 If you're using Material's theming, you can also pass in your typography config to the
 `mat-core` mixin:
 
 ```scss
 // Override the typography in the core CSS.
-@include mat-core($custom-typography);
+@include mat-core($custom-typography-theme);
 ```
 
 For more details about the typography functions and default config, see the

Diff for: src/material-experimental/README.md

@@ -61,9 +61,14 @@ be included in the pre-built CSS mixin and will need to be explicitly included.
     color: (
       primary: $my-primary, 
       accent: $my-accent
-    )
+    ),
+    // Using `mat-mdc-typography-config` rather than `mat-typography-config` generates a typography
+    // config directly from the official Material Design styles. This includes using `rem`-based
+    // measurements rather than `px`-based ones as the spec recommends. 
+    typography: mat-mdc-typography-config(),
+    // The density level to use in this theme, defaults to 0 if not specified.
+    density: 0
   ));
 
   @include angular-material-mdc-theme($my-theme);
-  @include angular-material-mdc-typography();
 ```