Angular Material 18 Project Typography Hierarchy
Angular Material 18 Project uses typography-hierarchy mixin to style app, emitting CSS classes for native header elements and type scale levels. Read typescale properties through get-theme-typography SCSS function or CSS Variables.
Angular Material 18 Project
We will simply use the project from my earlier article Angular Material Theming with CSS Variables. You can clone it from GitHub.
The typography-hierarchy mixin
typography-hierarchy mixin includes CSS classes for styling your application. These CSS classes correspond to the typography levels in your typography config. This mixin also emits styles for native header elements scoped within the .mat-typography CSS class.
Let's include it in src/styles.scss:
:root {
@include mat.all-component-themes($angular-material-theming-css-vars-theme);
@include mat....