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?
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;