diff --git a/guides/typography.md b/guides/typography.md index 9c8926fa0051..89ca28cacb72 100644 --- a/guides/typography.md +++ b/guides/typography.md @@ -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). diff --git a/src/lib/core/_core.scss b/src/lib/core/_core.scss index cec85a1e74d3..90e9e2474732 100644 --- a/src/lib/core/_core.scss +++ b/src/lib/core/_core.scss @@ -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. @@ -21,7 +21,7 @@ } } - @include angular-material-typography(); + @include angular-material-typography($typography-config); @include mat-ripple(); @include mat-option(); @include mat-optgroup(); diff --git a/src/lib/core/typography/_all-typography.scss b/src/lib/core/typography/_all-typography.scss index f7c7bebb40c2..015c2a90b22b 100644 --- a/src/lib/core/typography/_all-typography.scss +++ b/src/lib/core/typography/_all-typography.scss @@ -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);