What would my Angular m2 Theme look like in m3?

The angular material documentation does not really give examples how a fully customized theme would look like and I already asked on reddit so I'm trying here now.

How would my M2 Theme look like in M3? I at least got the colors down in some way. But I have no idea how to customize the typography!

M2 Theme (@angular/material v16):

@use "@angular/material" as mat;
@use "colors" as color;

@include mat.core();

$my-custom-typography-config-mobile: mat.define-typography-config(
$font-family: 'FiraSans, Roboto, "Helvetica Neue", sans-serif',
$headline-1:
mat.define-typography-level(
$font-size: 106px,
$line-height: 106px,
$font-weight: 300,
$letter-spacing: -0.05em,
),
$headline-2:
mat.define-typography-level(
$font-size: 50px,
$line-height: 50px,
$font-weight: 400,
$letter-spacing: -0.02em,
),
$headline-3:
mat.define-typography-level(
$font-size: 38px,
$line-height: 42px,
$font-weight: 400,
$letter-spacing: -0.005em,
),
$headline-4:
mat.define-typography-level(
$font-size: 20px,
$line-height: 24px,
$font-weight: 400,
$letter-spacing: normal,
),
$headline-5:
mat.define-typography-level(
$font-size: 32px,
$line-height: 34px,
$font-weight: 400,
$letter-spacing: normal,
),
$headline-6:
mat.define-typography-level(
$font-size: 28px,
$line-height: 32px,
$font-weight: 800,
$letter-spacing: normal,
),
$subtitle-1:
mat.define-typography-level(
$font-size: 20px,
$line-height: 22px,
$font-weight: 400,
$letter-spacing: normal,
),
$subtitle-2:
mat.define-typography-level(
$font-size: 16px,
$line-height: 18px,
$font-weight: 500,
$letter-spacing: normal,
),
$body-1:
mat.define-typography-level(
$font-size: 16px,
$line-height: 18px,
$font-weight: 400,
$letter-spacing: normal,
),
$body-2:
mat.define-typography-level(
$font-size: 16px,
$line-height: 26px,
$font-weight: 300,
$letter-spacing: normal,
),
$caption:
mat.define-typography-level(
$font-size: 12px,
$line-height: 12px,
$font-weight: 400,
$letter-spacing: normal,
),
$button:
mat.define-typography-level(
$font-size: 16px,
$line-height: 16px,
$font-weight: 500,
$letter-spacing: normal,
),
);

@include mat.typography-hierarchy($my-custom-typography-config-mobile);

$primary-palette: (
// lighter
300: color.$primary-light,
// default
600: color.$primary-default,
// darker
900: color.$primary-dark,
contrast: (
// light contrast color
300: rgba(color.$text-light, 0.95),
// medium contrast color
600: rgba(color.$text-light, 0.95),
// bold contrast color
900: rgba(color.$text-light, 0.95)
)
);

$secondary-palette: (
// lighter
300: color.$secondary-dark,
// default
600: color.$secondary-default,
// darker
900: color.$secondary-darker,
contrast: (
// light contrast color
300: rgba(color.$text-light, 0.95),
// medium contrast color
600: rgba(color.$text-light, 0.95),
// bold contrast color
900: rgba(color.$text-light, 0.95)
)
);

$Frontend-primary: mat.define-palette(
$primary-palette,
600,
300,
900
);
$Frontend-accent: mat.define-palette(
$secondary-palette,
600,
300,
900
);

$Frontend-warn: mat.define-palette(mat.$red-palette);

$Frontend-theme-mobile: mat.define-light-theme(
(
color: (
primary: $Frontend-primary,
accent: $Frontend-accent,
warn: $Frontend-warn,
),
typography: $my-custom-typography-config-mobile,
density: 0,
)
);

@include mat.all-component-themes($Frontend-theme-mobile);

@media (min-width: 768px) {
$my-custom-typography-config: mat.define-typography-config(
$font-family: 'FiraSans, Roboto, "Helvetica Neue", sans-serif',
$headline-1:
mat.define-typography-level(
$font-size: 112px,
$line-height: 112px,
$font-weight: 300,
$letter-spacing: -0.05em,
),
$headline-2:
mat.define-typography-level(
$font-size: 56px,
$line-height: 56px,
$font-weight: 400,
$letter-spacing: -0.02em,
),
$headline-3:
mat.define-typography-level(
$font-size: 45px,
$line-height: 48px,
$font-weight: 400,
$letter-spacing: -0.005em,
),
$headline-4:
mat.define-typography-level(
$font-size: 40px,
$line-height: 46px,
$font-weight: 400,
$letter-spacing: normal,
),
$headline-5:
mat.define-typography-level(
$font-size: 32px,
$line-height: 34px,
$font-weight: 400,
$letter-spacing: normal,
),
$headline-6:
mat.define-typography-level(
$font-size: 35px,
$line-height: 35px,
$font-weight: 800,
$letter-spacing: normal,
),
$subtitle-1:
mat.define-typography-level(
$font-size: 20px,
$line-height: 26px,
$font-weight: 400,
$letter-spacing: normal,
),
$subtitle-2:
mat.define-typography-level(
$font-size: 16px,
$line-height: 20px,
$font-weight: 500,
$letter-spacing: normal,
),
$body-1:
mat.define-typography-level(
$font-size: 16px,
$line-height: 20px,
$font-weight: 400,
$letter-spacing: normal,
),
$body-2:
mat.define-typography-level(
$font-size: 18px,
$line-height: 26px,
$font-weight: 300,
$letter-spacing: normal,
),
$caption:
mat.define-typography-level(
$font-size: 12px,
$line-height: 12px,
$font-weight: 400,
$letter-spacing: normal,
),
$button:
mat.define-typography-level(
$font-size: 18px,
$line-height: 18px,
$font-weight: 500,
$letter-spacing: normal,
),
);

$Frontend-theme: mat.define-light-theme(
(
color: (
primary: $Frontend-primary,
accent: $Frontend-accent,
warn: $Frontend-warn,
),
typography: $my-custom-typography-config,
density: 0,
)
);

@include mat.all-component-typographies($Frontend-theme);
}


My M3 theme so far in @angular/material v18 (it is completely missing typographies... and media queries):

@use 'sass:map';
@use '@angular/material/' as mat;

@include mat.core();

$_palettes: (
primary: (
0: #000000,
10: #001c38,
20: #00315b,
25: #003d6e,
30: #004881,
35: #025494,
40: #1d60a1,
50: #3e79bc,
60: #5b93d7,
70: #76aef4,
80: #a2c9ff,
90: #d3e4ff,
95: #eaf1ff,
98: #f8f9ff,
99: #fdfcff,
100: #ffffff,
),
secondary: (
0: #000000,
10: #251a00,
20: #3e2e00,
25: #4b3900,
30: #594400,
35: #684f00,
40: #765a00,
50: #947200,
60: #b48b00,
70: #d4a500,
80: #f3c02a,
90: #ffdf95,
95: #ffefd1,
98: #fff8f1,
99: #fffbff,
100: #ffffff,
),
tertiary: (
0: #000000,
10: #341000,
20: #562000,
25: #682800,
30: #7a3000,
35: #8d3900,
40: #9d430a,
50: #bd5b24,
60: #dd743b,
70: #fe8d52,
80: #ffb693,
90: #ffdbcb,
95: #ffede6,
98: #fff8f6,
99: #fffbff,
100: #ffffff,
),
neutral: (
0: #000000,
4: #0a0b0b,
6: #101111,
10: #1a1c1c,
12: #1e2020,
17: #292b2b,
20: #2f3131,
22: #333535,
24: #383a3a,
25: #3a3c3c,
30: #454747,
35: #515353,
40: #5d5f5f,
50: #767777,
60: #909191,
70: #aaabab,
80: #c6c6c7,
87: #dadada,
90: #e2e2e2,
92: #e8e8e8,
94: #eeeeee,
95: #f1f1f1,
96: #f4f4f4,
98: #f9f9f9,
99: #fcfcfc,
100: #ffffff,
),
neutral-variant: (
0: #000000,
10: #161c24,
20: #2b3139,
25: #363c45,
30: #414750,
35: #4d535c,
40: #595f68,
50: #727781,
60: #8c919b,
70: #a6abb6,
80: #c1c7d2,
90: #dee2ee,
95: #ecf1fc,
98: #f8f9ff,
99: #fdfcff,
100: #ffffff,
),
error: (
0: #000000,
10: #410002,
20: #690005,
25: #7e0007,
30: #93000a,
35: #a80710,
40: #ba1a1a,
50: #de3730,
60: #ff5449,
70: #ff897d,
80: #ffb4ab,
90: #ffdad6,
95: #ffedea,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
);

$_rest: (
secondary: map.get($_palettes, secondary),
neutral: map.get($_palettes, neutral),
neutral-variant: map.get($_palettes, neutral-variant),
error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_secondary: map.merge(map.get($_palettes, secondary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);


$light-theme: mat.define-theme(
(
color: (
theme-type: light,
primary: $_primary,
tertiary: $_tertiary,
),
typography: (
plain-family: Roboto,
brand-family: Open Sans,
bold-weight: 900,
medium-weight: 500,
regular-weight: 300,
),
)
);

Continue reading...