Skip to content

Commit 72148c0

Browse files
crisbetojelbourn
authored andcommitted
feat(typography): allow typography config to be passed via mat-core (#5625)
Allows for the typography config to be specified optionally through the `mat-core` mixin, avoiding some of the extra bloat that comes from overriding the typography after a theme is defined. Fixes #5589.
1 parent 5bc97ec commit 72148c0

File tree

3 files changed

+15
-3
lines changed

3 files changed

+15
-3
lines changed

guides/typography.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,14 @@ different SASS mixins.
8484
@include angular-material-typography($custom-typography);
8585
```
8686

87+
If you're using Material's theming, you can also pass in your typography config to the
88+
`mat-core` mixin:
89+
90+
```scss
91+
// Override the typography in the core CSS.
92+
@include mat-core($custom-typography);
93+
```
94+
8795
For more details about the typography functions and default config, see the
8896
[source](https://github.com/angular/material2/blob/master/src/lib/core/typography/_typography.scss).
8997

src/lib/core/_core.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
@import 'typography/all-typography';
1212

1313
// Mixin that renders all of the core styles that are not theme-dependent.
14-
@mixin mat-core() {
14+
@mixin mat-core($typography-config: null) {
1515
// Provides external CSS classes for each elevation value. Each CSS class is formatted as
1616
// `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
1717
// elevated.
@@ -21,7 +21,7 @@
2121
}
2222
}
2323

24-
@include angular-material-typography();
24+
@include angular-material-typography($typography-config);
2525
@include mat-ripple();
2626
@include mat-option();
2727
@include mat-optgroup();

src/lib/core/typography/_all-typography.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,11 @@
3030

3131

3232
// Includes all of the typographic styles.
33-
@mixin angular-material-typography($config: mat-typography-config()) {
33+
@mixin angular-material-typography($config: null) {
34+
@if $config == null {
35+
$config: mat-typography-config();
36+
}
37+
3438
@include mat-base-typography($config);
3539
@include mat-autocomplete-typography($config);
3640
@include mat-button-typography($config);

0 commit comments

Comments
 (0)