Skip to content

Commit

Permalink
feat(typography): allow typography config to be passed via mat-core (#…
Browse files Browse the repository at this point in the history
…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.
  • Loading branch information
crisbeto authored and jelbourn committed Jul 11, 2017
1 parent 5bc97ec commit 72148c0
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 3 deletions.
8 changes: 8 additions & 0 deletions guides/typography.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,14 @@ different SASS mixins.
@include angular-material-typography($custom-typography);
```

If you're using Material's theming, you can also pass in your typography config to the
`mat-core` mixin:

```scss
// Override the typography in the core CSS.
@include mat-core($custom-typography);
```

For more details about the typography functions and default config, see the
[source](https://github.com/angular/material2/blob/master/src/lib/core/typography/_typography.scss).

Expand Down
4 changes: 2 additions & 2 deletions src/lib/core/_core.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
@import 'typography/all-typography';

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

@include angular-material-typography();
@include angular-material-typography($typography-config);
@include mat-ripple();
@include mat-option();
@include mat-optgroup();
Expand Down
6 changes: 5 additions & 1 deletion src/lib/core/typography/_all-typography.scss
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,11 @@


// Includes all of the typographic styles.
@mixin angular-material-typography($config: mat-typography-config()) {
@mixin angular-material-typography($config: null) {
@if $config == null {
$config: mat-typography-config();
}

@include mat-base-typography($config);
@include mat-autocomplete-typography($config);
@include mat-button-typography($config);
Expand Down

0 comments on commit 72148c0

Please sign in to comment.