bug(theming): Custom typography not applied to all typography levels

[mishrc]

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

When defining a custom typography with mat.define-typography-config and adding a default font-family for all levels it won't be properly applied to all levels.

I've created a reproduction in this Stackblitz.

Reproduction

Steps to reproduce:

1. Create a custom typography config with mat.define-typography-config
2. Define a custom default font-family like so:

$custom-typography-config: mat.define-typography-config(
  $font-family: "Source Sans Pro",
  $headline-1:
    mat.define-typography-level(
      $font-size: 42px,
      $line-height: 46px,
    ),
  $headline-2:
    mat.define-typography-level(
      $font-size: 42px,
      $line-height: 46px,
    ),
  $headline-3:
    mat.define-typography-level(
      $font-size: 42px,
      $line-height: 46px,
    ),
  $headline-4:
    mat.define-typography-level(
      $font-size: 42px,
      $line-height: 46px,
    ),
  $headline-5:
    mat.define-typography-level(
      $font-size: 42px,
      $line-height: 46px,
    ),
  $headline-6:
    mat.define-typography-level(
      $font-size: 34px,
      $line-height: 41px,
    ),
  $subtitle-1:
    mat.define-typography-level(
      $font-size: 28px,
      $line-height: 36px,
    ),
  $subtitle-2:
    mat.define-typography-level(
      $font-size: 22px,
      $line-height: 29px,
    ),
  $body-1:
    mat.define-typography-level(
      $font-size: 14px,
      $line-height: 22px,
    ),
  $body-2:
    mat.define-typography-level(
      $font-size: 14px,
      $line-height: 22px,
      $font-weight: bold,
    ),
  $caption:
    mat.define-typography-level(
      $font-size: 12px,
      $line-height: 22px,
    ),
  $button:
    mat.define-typography-level(
      $font-size: 12px,
      $line-height: 22px,
    ),
);

3. Add mat-select with a view options to your application and wrap it in a mat-form-field
4. Now the font-family won't be applied to the select's label and option labels.
5. When adding $font-family: "Source Sans Pro" to every single mat.define-typography-level (like in the code below) it works.

$custom-typography-config: mat.define-typography-config(
  $font-family: "Source Sans Pro",
  $headline-1:
    mat.define-typography-level(
      $font-family: "Source Sans Pro",
      $font-size: 42px,
      $line-height: 46px,
    ),
  $headline-2:
    mat.define-typography-level(
      $font-family: "Source Sans Pro",
      $font-size: 42px,
      $line-height: 46px,
    ),
  $headline-3:
    mat.define-typography-level(
      $font-family: "Source Sans Pro",
      $font-size: 42px,
      $line-height: 46px,
    ),
  $headline-4:
    mat.define-typography-level(
      $font-family: "Source Sans Pro",
      $font-size: 42px,
      $line-height: 46px,
    ),
  $headline-5:
    mat.define-typography-level(
      $font-family: "Source Sans Pro",
      $font-size: 42px,
      $line-height: 46px,
    ),
  $headline-6:
    mat.define-typography-level(
      $font-family: "Source Sans Pro",
      $font-size: 34px,
      $line-height: 41px,
    ),
  $subtitle-1:
    mat.define-typography-level(
      $font-family: "Source Sans Pro",
      $font-size: 28px,
      $line-height: 36px,
    ),
  $subtitle-2:
    mat.define-typography-level(
      $font-family: "Source Sans Pro",
      $font-size: 22px,
      $line-height: 29px,
    ),
  $body-1:
    mat.define-typography-level(
      $font-family: "Source Sans Pro",
      $font-size: 14px,
      $line-height: 22px,
    ),
  $body-2:
    mat.define-typography-level(
      $font-family: "Source Sans Pro",
      $font-size: 14px,
      $line-height: 22px,
      $font-weight: bold,
    ),
  $caption:
    mat.define-typography-level(
      $font-family: "Source Sans Pro",
      $font-size: 12px,
      $line-height: 22px,
    ),
  $button:
    mat.define-typography-level(
      $font-family: "Source Sans Pro",
      $font-size: 12px,
      $line-height: 22px,
    ),
);

Expected Behavior

The default $font-family config should be applied on all other typography levels

Actual Behavior

The default $font-family config is not applied to all typography levels

Environment

• Angular: 15.0.2
• CDK/Material: 15.0.4
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}