bug(Material): theme-overrrides typography not working

[mattiLeBlanc]

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

I am trying to override my theme variables:

 @include mat.theme-overrides(
    (
      background: #000,
      on-surface: #fff,
      label-large: 600 1.25rem/1.5rem "Inter Tight",
    )
  );

and the label-large does not get changed.
When I look at the generated styles:

--mat-sys-label-large-font: Inter Tight;
    --mat-sys-label-large-line-height: 1.25rem;
    --mat-sys-label-large-size: 0.875rem;
    --mat-sys-label-large-tracking: 0.006rem;
    --mat-sys-label-large-weight: 500;

they dont match my label-large overrides.

I can't provide a map like this either:

@include mat.theme-overrides((
  label-large: (
    font: 'Inter Tight',
    weight: 600,
    size: 1.25rem,
    line-height: 1.5rem,
  ),

Reproduction

I tried creating a stackblitz but the starter is not using SCSS and stackblitz now turned into this new system Bolt. I tried creating an app but it took ages and it broke.

I hope my issue can just b traced by looking at the supported theme-overrides

Looking at the file _m3-tokes.sss
I see

'label-large',
'label-large-font',
'label-large-line-height',
'label-large-size',
'label-large-tracking',
'label-large-weight',
'label-large-weight-prominent',

When I use label-large-size: 1.25, in my override, it works. But the label-large: 600 1.25rem/1.5rem "Inter Tight", doesnt work.

Expected Behavior

apply label-large and other overrides

Actual Behavior

Some default value is used unless I specifically mention each font property separately for the button:

.mat-mdc-unelevated-button {
transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
height: var(--mdc-filled-button-container-height, 40px);
font-family: var(--mdc-filled-button-label-text-font, var(--mat-sys-label-large-font));
font-size: var(--mdc-filled-button-label-text-size, var(--mat-sys-label-large-size)); <=== --mat-sys-label-large-size would be 0.875rem
letter-spacing: var(--mdc-filled-button-label-text-tracking, var(--mat-sys-label-large-tracking));
text-transform: var(--mdc-filled-button-label-text-transform);
font-weight: var(--mdc-filled-button-label-text-weight, var(--mat-sys-label-large-weight));
padding: 0 var(--mat-filled-button-horizontal-padding, 24px);
}

Environment

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

[andrewseguin]

This is working as expected, since the Material components all rely on the individual typography system tokens like label-large-weight, and label-large-size. The overrides can be used to define these typography tokens at a high level.

I agree the ergonomics is not great here. It would have been better I think if we relied on the font shorthand string, making it easier to override and understand.

This is likely a change we'll make either in an upcoming minor or major.

[mattiLeBlanc]

@andrewseguin I agree, if we would have to override each property separately, whilst also having the short hand which works for mosts major part of the styling, there can be some confusion.

I must say now I am getting used to the new system, I like the fine grained control we now have to change size of complex elements like form-fields and such.
Great work by the Angular team.