diff --git a/guides/theming.md b/guides/theming.md index a065446f80c5..45f09e3a46da 100644 --- a/guides/theming.md +++ b/guides/theming.md @@ -96,7 +96,9 @@ $candy-app-theme: mat-light-theme(( primary: $candy-app-primary, accent: $candy-app-accent, warn: $candy-app-warn, - ) + ), + typography: mat-typography-config(), + density: 0, // Defaults to 0 if omitted, but shown for completeness. )); // Include theme styles for core and each component used in your app. @@ -155,7 +157,8 @@ $candy-app-theme: mat-light-theme(( color: ( primary: $candy-app-primary, accent: $candy-app-accent, - ) + ), + typography: mat-typography-config() )); // Include the default theme styles (color and default density) @@ -242,7 +245,8 @@ $candy-app-theme: mat-light-theme(( color: ( primary: $candy-app-primary, accent: $candy-app-accent, - ) + ), + typography: mat-typography-config() )); // Include the theme styles for only specified components. diff --git a/guides/typography.md b/guides/typography.md index bc7f3930f1b6..d5790fecc7ce 100644 --- a/guides/typography.md +++ b/guides/typography.md @@ -67,10 +67,12 @@ creating a custom theme, you can create a custom **typography configuration**. // Define a custom typography config that overrides the font-family as well as the // `headlines` and `body-1` levels. -$custom-typography: mat-typography-config( - $font-family: 'Roboto, monospace', - $headline: mat-typography-level(32px, 48px, 700), - $body-1: mat-typography-level(16px, 24px, 500) +$custom-typography-theme: ( + typography: mat-typography-config( + $font-family: 'Roboto, monospace', + $headline: mat-typography-level(32px, 48px, 700), + $body-1: mat-typography-level(16px, 24px, 500) + ) ); ``` @@ -86,13 +88,13 @@ different Sass mixins. ```scss // Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.). -@include mat-base-typography($custom-typography); +@include mat-base-typography($custom-typography-theme); // Override typography for a specific Angular Material components. -@include mat-checkbox-typography($custom-typography); +@include mat-checkbox-typography($custom-typography-theme); // Override typography for all Angular Material, including mat-base-typography and all components. -@include angular-material-typography($custom-typography); +@include angular-material-typography($custom-typography-theme); ``` If you're using Material's theming, you can also pass in your typography config to the @@ -100,7 +102,7 @@ If you're using Material's theming, you can also pass in your typography config ```scss // Override the typography in the core CSS. -@include mat-core($custom-typography); +@include mat-core($custom-typography-theme); ``` For more details about the typography functions and default config, see the diff --git a/src/material-experimental/README.md b/src/material-experimental/README.md index cf40fae63223..c8a3cb8afe4c 100644 --- a/src/material-experimental/README.md +++ b/src/material-experimental/README.md @@ -61,9 +61,14 @@ be included in the pre-built CSS mixin and will need to be explicitly included. color: ( primary: $my-primary, accent: $my-accent - ) + ), + // Using `mat-mdc-typography-config` rather than `mat-typography-config` generates a typography + // config directly from the official Material Design styles. This includes using `rem`-based + // measurements rather than `px`-based ones as the spec recommends. + typography: mat-mdc-typography-config(), + // The density level to use in this theme, defaults to 0 if not specified. + density: 0 )); @include angular-material-mdc-theme($my-theme); - @include angular-material-mdc-typography(); ```