Skip to content

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

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.

Sign up for GitHub

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
Feb 3, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 16 additions & 9 deletions guides/typography.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
|------------------------------------------|----------------|-----------------|
Expand All @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions guides/v15-mdc-migration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down