docs: mention that typography hierarchy isn't included by default (#26563)

crisbeto · crisbeto · commit 57331b553177 · 2023-02-03T13:54:32.000+01:00
We no longer include the typography hierarchy automatically. These changes update the docs to mention it. Fixes #26524. (cherry picked from commit e6536b7)
diff --git a/guides/typography.md b/guides/typography.md
@@ -164,10 +164,20 @@ $kids-typography: mat.define-typography-config(
 
 ## Using typography styles in your application
 
-In addition to styles shared between components, the `core` mixin includes CSS classes for styling
-your application. These CSS classes correspond to the typography levels in your typography config.
-This mixin also emits styles for native header elements scoped within the `.mat-typography` CSS
-class. The table below lists the CSS classes emitted and the native elements styled.
+In addition to styles shared between components, the `typography-hierarchy` mixin includes CSS
+classes for styling your application. These CSS classes correspond to the typography levels in your
+typography config. This mixin also emits styles for native header elements scoped within the
+`.mat-typography` CSS class.
+
+```scss
+@use '@angular/material' as mat;
+
+// Use the default configuration.
+$my-typography: mat.define-typography-config();
+@include mat.typography-hierarchy($my-typography);
+```
+
+The table below lists the CSS classes emitted and the native elements styled.
 
 | CSS class                                | Level name     | Native elements |
 |------------------------------------------|----------------|-----------------|
@@ -194,11 +204,8 @@ typography level. The `.mat-h5` style uses the `body-2` level with the font-size
 
 The `button` and `input` typography levels do not map to CSS classes.
 
-You can also manually emit the CSS rules for these CSS classes and native elements by calling the `typography-hierarchy`
-mixin. This mixin accepts a typography config and a CSS selector under which the styles are scopes (defaulting to
-`.mat-typography`).
-
-The following example demonstrates usage of the typography styles emitted by the `core` mixin.
+The following example demonstrates usage of the typography styles emitted by the
+`typography-hierarchy` mixin.
 
 ```html
 <body>
diff --git a/guides/v15-mdc-migration.md b/guides/v15-mdc-migration.md
@@ -159,6 +159,9 @@ DOM and CSS of the components, you may need to tweak some of your application's
   instead of `mat-button`. However, not all elements in the previous implementation have an
   equivalent element in the new implementation.
 
+* The styles associated with the `mat-typography` class are no longer generated automatically. You
+  have to include them using the `mat.typography-hierarchy` mixin.
+
 ### Theming
 
 * Default typography levels defined by `mat.define-typography-config` have been updated to reflect
