Skip to content

Commit cd591b5

Browse files
authored
docs(material/core): update typography guide (#25745)
1 parent f6c8ce0 commit cd591b5

File tree

1 file changed

+7
-24
lines changed

1 file changed

+7
-24
lines changed

guides/typography.md

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -98,30 +98,9 @@ $my-custom-typography-config: mat.define-typography-config(
9898
);
9999
```
100100

101-
To customize component typography for your entire application, you can pass your custom typography
102-
config to the `core` mixin described in the [theming guide][theming-system].
103-
104-
```scss
105-
@use '@angular/material' as mat;
106-
107-
$my-custom-typography: mat.define-typography-config(
108-
$headline: mat.define-typography-level(3rem, 1, 700),
109-
);
110-
111-
@include mat.core($my-custom-typography);
112-
```
113-
114-
Passing your typography config to `core` mixin will apply your specified values to all Angular
115-
Material components. If a config is not specified, `core` will emit the default Material Design
116-
typography styles.
117-
118101
### Typography configs and theming
119102

120-
In addition to the `core` mixin, you can specify your typography config when including any `theme`
121-
mixin, as described in the [theming guide][theming-system]. Because the `core` mixin always emits
122-
typography styles, specifying a typography config to a theme mixin results in duplicate typography
123-
CSS. You should only provide a typography config when applying your theme if you need to specify
124-
multiple typography styles that are conditionally applied based on your application's behavior.
103+
You can provide a typography config when defining a theme to customize typographic styles. See the [theming guide][theming-system] for details on custom themes.
125104

126105
The following example shows a typical theme definition and a "kids theme" that only applies when
127106
the `".kids-theme"` CSS class is present. You can [see the theming guide for more guidance on
@@ -134,21 +113,25 @@ defining multiple themes](https://material.angular.io/guide/theming#defining-mul
134113

135114
$my-primary: mat.define-palette(mat.$indigo-palette, 500);
136115
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
116+
$my-typography: mat.define-typography-config();
137117

138118
$my-theme: mat.define-light-theme((
139119
color: (
140120
primary: $my-primary,
141121
accent: $my-accent,
142-
)
122+
),
123+
typography: $my-typography,
143124
));
144125

145126
@include mat.all-component-themes($my-theme);
146127

147128
.kids-theme {
148129
$kids-primary: mat.define-palette(mat.$cyan-palette);
149130
$kids-accent: mat.define-palette(mat.$yellow-palette);
131+
132+
// Typography config based on the default, but using "Comic Sans" as the
133+
// default font family for all levels.
150134
$kids-typography: mat.define-typography-config(
151-
// Specify "Comic Sans" as the default font family for all levels.
152135
$font-family: 'Comic Sans',
153136
);
154137

0 commit comments

Comments
 (0)