diff --git a/guides/typography.md b/guides/typography.md index 090fcfaaee66..a282b6d0ff3c 100644 --- 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 diff --git a/guides/v15-mdc-migration.md b/guides/v15-mdc-migration.md index 0f799ad065f3..2d2f59394220 100644 --- 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