Can we define custom levels of typography in Angular material typography

Question

As per angular material typography there are 13 defined levels for typography: Documentation.

For example display-4, display-3, display-2, headline, title, etc.

By default these level has some predefined font-size, line-height and letter-spacing. We can customize font for each level as below:

@import '~@angular/material/theming';

// 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)
  $caption: mat-typography-level(10px, 16px, 400),
);

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

For example if I have caption-large level in my project styleguide how can I add that level to customization function?

I can do this by defining my own CSS classes, but is there any sophisticated way to do that?

Answer 1

You can't do this out of the box with Angular. You need two steps.

1. Define a new level. In my case it was label:

$label: mat.define-typography-level(20px, 27px, 400, $font-family: 'Roboto, "Helvetica Neue", sans-serif');

2. Merge this level with sass "map.merge ()" into the existing config:

$typography-config: map.merge(
    mat.define-typography-config(
        $font-family: 'Roboto, "Helvetica Neue", sans-serif',
        $display-4: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
        $display-3: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
        $display-2: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
        $display-1: mat.define-typography-level(34px, 40px, 400),
        $headline: mat.define-typography-level(20px, 27px, 500),
        $title: mat.define-typography-level(20px, 27px, 400),
        $subheading-1: mat.define-typography-level(15px, 17px, 400),
        $subheading-2: mat.define-typography-level(16px, 21px, 500),
        $body-1: mat.define-typography-level(16px, 21px, 400),
        $body-2: mat.define-typography-level(16px, 25px, 500),
        $caption: mat.define-typography-level(14px, 21px, 400),
        $button: mat.define-typography-level(16px, 21px, 400),
        $input: mat.define-typography-level(inherit, 1.125, 400),
    ),
    (
        "label": $label,
    )
);

3. Finally, you have to apply them:

$app-theme: mat.define-light-theme(
    (
        typography: $typography-config,
    )
);
@include mat.all-component-typographies($typography-config);

These can then be used like:

@mixin typography($theme) {
    $typography-config: mat.get-typography-config($theme);
    
    .mat-form-field-appearance-legacy .mat-form-field-label {
        @include mat.typography-level($typography-config, 'label');
    }
}
@include typography($app-theme);