Angular Material 18 typescale levels

Question

I upgraded to Angular 18 (and adjusted the theming styles to the Material 3 SCSS API), but I can't figure out how to define typography scale levels (font sizes) with the new API. It used to be done like this:

$my-custom-typography-config: mat.m2-define-typography-config(
  $headline-1: mat.m2-define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
  $headline-2: mat.m2-define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
  $headline-3: mat.m2-define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
  $headline-4: mat.m2-define-typography-level(34px, 40px, 400),
  $headline-5: mat.m2-define-typography-level(24px, 32px, 400),
  // ...
);

But i can't find anything similar in the new theming docs. The best I've found is this: https://material.angular.io/guide/typography#type-scale-levels but it doesn't provide an example.

How can I do this?

Stipitate

Answer 1

The doc around this is still missing but if you set your theme to use the system variables with use-system-variables you'll get a set of tokens to set all the size you want (see the source).

$my-theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    density: (
      scale: 0,
    ),
    typography: (
      use-system-variables: true, // this here
    ),
  )
);

:root {
  @include mat.all-component-themes($my-theme);
  @include mat.system-level-typography($my-theme);
}

And here is the list with the current default values

    --sys-body-large: 400 1rem / 1.5rem Roboto, sans-serif;
    --sys-body-large-font: Roboto, sans-serif;
    --sys-body-large-line-height: 1.5rem;
    --sys-body-large-size: 1rem;
    --sys-body-large-tracking: 0.031rem;
    --sys-body-large-weight: 400;
    --sys-body-medium: 400 0.875rem / 1.25rem Roboto, sans-serif;
    --sys-body-medium-font: Roboto, sans-serif;
    --sys-body-medium-line-height: 1.25rem;
    --sys-body-medium-size: 0.875rem;
    --sys-body-medium-tracking: 0.016rem;
    --sys-body-medium-weight: 400;
    --sys-body-small: 400 0.75rem / 1rem Roboto, sans-serif;
    --sys-body-small-font: Roboto, sans-serif;
    --sys-body-small-line-height: 1rem;
    --sys-body-small-size: 0.75rem;
    --sys-body-small-tracking: 0.025rem;
    --sys-body-small-weight: 400;
    --sys-display-large: 400 3.562rem / 4rem Roboto, sans-serif;
    --sys-display-large-font: Roboto, sans-serif;
    --sys-display-large-line-height: 4rem;
    --sys-display-large-size: 3.562rem;
    --sys-display-large-tracking: -0.016rem;
    --sys-display-large-weight: 400;
    --sys-display-medium: 400 2.812rem / 3.25rem Roboto, sans-serif;
    --sys-display-medium-font: Roboto, sans-serif;
    --sys-display-medium-line-height: 3.25rem;
    --sys-display-medium-size: 2.812rem;
    --sys-display-medium-tracking: 0rem;
    --sys-display-medium-weight: 400;
    --sys-display-small: 400 2.25rem / 2.75rem Roboto, sans-serif;
    --sys-display-small-font: Roboto, sans-serif;
    --sys-display-small-line-height: 2.75rem;
    --sys-display-small-size: 2.25rem;
    --sys-display-small-tracking: 0rem;
    --sys-display-small-weight: 400;
    --sys-headline-large: 400 2rem / 2.5rem Roboto, sans-serif;
    --sys-headline-large-font: Roboto, sans-serif;
    --sys-headline-large-line-height: 2.5rem;
    --sys-headline-large-size: 2rem;
    --sys-headline-large-tracking: 0rem;
    --sys-headline-large-weight: 400;
    --sys-headline-medium: 400 1.75rem / 2.25rem Roboto, sans-serif;
    --sys-headline-medium-font: Roboto, sans-serif;
    --sys-headline-medium-line-height: 2.25rem;
    --sys-headline-medium-size: 1.75rem;
    --sys-headline-medium-tracking: 0rem;
    --sys-headline-medium-weight: 400;
    --sys-headline-small: 400 1.5rem / 2rem Roboto, sans-serif;
    --sys-headline-small-font: Roboto, sans-serif;
    --sys-headline-small-line-height: 2rem;
    --sys-headline-small-size: 1.5rem;
    --sys-headline-small-tracking: 0rem;
    --sys-headline-small-weight: 400;
    --sys-label-large: 500 0.875rem / 1.25rem Roboto, sans-serif;
    --sys-label-large-font: Roboto, sans-serif;
    --sys-label-large-line-height: 1.25rem;
    --sys-label-large-size: 0.875rem;
    --sys-label-large-tracking: 0.006rem;
    --sys-label-large-weight: 500;
    --sys-label-large-weight-prominent: 700;
    --sys-label-medium: 500 0.75rem / 1rem Roboto, sans-serif;
    --sys-label-medium-font: Roboto, sans-serif;
    --sys-label-medium-line-height: 1rem;
    --sys-label-medium-size: 0.75rem;
    --sys-label-medium-tracking: 0.031rem;
    --sys-label-medium-weight: 500;
    --sys-label-medium-weight-prominent: 700;
    --sys-label-small: 500 0.688rem / 1rem Roboto, sans-serif;
    --sys-label-small-font: Roboto, sans-serif;
    --sys-label-small-line-height: 1rem;
    --sys-label-small-size: 0.688rem;
    --sys-label-small-tracking: 0.031rem;
    --sys-label-small-weight: 500;
    --sys-title-large: 400 1.375rem / 1.75rem Roboto, sans-serif;
    --sys-title-large-font: Roboto, sans-serif;
    --sys-title-large-line-height: 1.75rem;
    --sys-title-large-size: 1.375rem;
    --sys-title-large-tracking: 0rem;
    --sys-title-large-weight: 400;
    --sys-title-medium: 500 1rem / 1.5rem Roboto, sans-serif;
    --sys-title-medium-font: Roboto, sans-serif;
    --sys-title-medium-line-height: 1.5rem;
    --sys-title-medium-size: 1rem;
    --sys-title-medium-tracking: 0.009rem;
    --sys-title-medium-weight: 500;
    --sys-title-small: 500 0.875rem / 1.25rem Roboto, sans-serif;
    --sys-title-small-font: Roboto, sans-serif;
    --sys-title-small-line-height: 1.25rem;
    --sys-title-small-size: 0.875rem;
    --sys-title-small-tracking: 0.006rem;
    --sys-title-small-weight: 500;

Balustrade

dang this kind of sucks as an upgrade. I'll try it, thanks – Stipitate

I agree, I think it's too early to adapt material 3, I spent half a day trying to figure out anything but at the end I got more questions than what I started with, I was hoping things will get easier with the new version, but it feels like it's just more complicated – Shock

it works but I don't like it. hope it changes in some minor version of Angular 18 – Stipitate

I am not sure why did they release so raw version of Material 3 integration. It should be somewhere in dev preview or experimental stage only. – Faubion

How can you set custom typography values that can be referenced throughout the app? – Dealer

I see the system variables but where did you get the values for each? – Dealer

Answer 2

If you don't want granular level control then you can use typography along with theme set up

@use "@angular/material" as mat;
@include mat.core();

$light-theme: mat.define-theme(
 (
  color: (
    theme-type: light,
    primary: $azure-palette,
    tertiary: $azure-palette
  ),
  typography: (
    brand-family: "your-font",
    plain-family: "your-font",
    bold-weight: 500,
    medium-weight: 400,
    regular-weight: 200
  ),
  density: (
    scale: 0
  )
 )
 );

Nowak