bug(Theming Angular Material): Custom typography not applied to standard typography levels in mat.core-theme() or all-component-themes()

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Tried to change the font-family so that e.g. body-1 everywhere has font family Arial. But it only changed the font-family in mat components, not outside in normal divs.

$my-typography: mat.define-typography-config(
  $font-family: 'Arial',
);
$my-theme: mat.define-light-theme((
  typography: $my-typography,
  color: (
    primary: $dicey-primary,
    accent: $dicey-accent,
    warn: $dicey-warn,
  ))
);
@include mat.all-component-themes($my-theme);

Similar problem was reported here, but not solved: https://github.com/angular/components/issues/23683#issue-1015421891

---

It works when I do it with all-component-typographies:

$my-typography: mat.define-typography-config(
  $font-family: 'Arial',
);
@include mat.all-component-typographies($my-typography);

Reproduction

Steps to reproduce:

1. Add custom theme with typography
2. See if body tag font-family changes

Expected Behavior

Bodys font family changes to custom font family

Actual Behavior

The body font family is standard Roboto

Environment

• Angular: 13.1.2
• CDK/Material: 13.1.1
• Browser(s): Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

[umutesen]

So I think the problem is that you need to pass in your custom typography to the mat.core mixin. Here’s a config that worked for me both for the headline and the “Some text” under it.

$candy-app-primary: mat.define-palette(mat.$indigo-palette);
$candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$candy-app-theme: mat.define-light-theme((
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent
  ),
  typography: mat.define-typography-config(
    $font-family: 'Arial',
  ),
));

@include mat.core($candy-app-theme);
@include mat.all-component-themes($candy-app-theme);

Alternatively you can include the all-component-typographies like you mentioned above since that’s what mat.core does internally anyway.

mat-core does not appear to allow any parameters on v15:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Only 0 arguments allowed, but 1 was passed. ┌──> src/styles.scss 33│ @include mat.core($my-theme);

[steffenhees]

Yes, that are all nice workarounds. I already mentioned that it works with all-component-typographies. But the bug is, that it is not working with all-component-themes. And this has to be fixed. Please.

I just tried out the kids-theme example on the website , and this is not working either.