bug(Material): Button 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

20.1.3

Description

@andrewseguin I reported this issue before: #31191

My button filled is not getting the override of label-large since I upgraded to v20.1.7.

Reproduction

I have:

@include mat.theme-overrides((
...
label-large: 600 1.25rem/1.5rem 'Inter Tight',
// for buttons above line doesnt work, not sure anymore where this was happening
label-large-font: 'Inter Tight',
label-large-size: 1.25rem,
label-large-line-height: 1.5rem,
label-large-weight: 600,
...
))

This worked for angular 20.1.3 and below.
label-large works for any component using label-large but for buttons it needed to be defined separately to override the buttons font size.

After upgrading to 20.1.7 none of these overrides work anymore.
--mat-sys-label-large-size is now 0.875 and not 1.25 rem.

The only way I can change the size is using

mat.button-overrides((
filled-label-text-size: 1.25rem
))

affects --mat-button-filled-label-text-size

Expected Behavior

I expect --mat-sys-label-large-size to be 1.25.

Actual Behavior

After upgrading to 20.1.7 none of these overrides work anymore.
--mat-sys-label-large-size is now 0.875 and not 1.25 rem.

Environment

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

[mattiLeBlanc]

I am not sure if we should now use text-label-text-size: 1.25rem for the mat.button-overrides which is not overriding the --mat-sys-label-large-size, but it is only overriding --mat-button-filled-label-text-size.

I downloaded the source and analysed override-theme and I think it is no longer possible to override the label-large on a sys level.
So I guess I have to use text-label-text-size for all button styles in my mat.button-override. Is the correct? Because it doesnt seem to work.
I just want to set ALL buttons text size to a certain rem value, I don't want to do this for all the different button type (filled, outlined, etc). That is why I used the sys value before in my theme override.

Also, will the button class stay stable now? mat-flat-button turned into matButton="filled". I have seen so many changes overtime, would be nice if it starts to stabilise.

[mattiLeBlanc]

I found another issue. This is no longer working :(

@include mat.theme-overrides(
    (
      // background: #000,
      on-surface: #fff,
      inverse-on-surface: #000,
      // // outline: #fff,
      // primary: colors.get-palette-color(colors.$primary-palette, 80),
      headline-large: 700 2rem/2.5rem Poppins,
      headline-medium: 700 1.5rem/1.7rem Poppins,
      headline-small: 700 1.25rem/1.5rem Poppins,
      // updated
      display-large: 400 3.5rem/4.2rem Poppins,
      display-large-size: 3.5rem,
      display-large-font: Poppins,
      display-large-line-height: 4.2rem,
      display-large-weight: 400,
      // updated
      display-medium: 400 2.75rem/3.3rem Poppins,
      display-small: 600 2rem/2.4rem Poppins,
      // updated
      title-large: 500 2.25rem/3.375rem Poppins,
      title-medium: 500 1.5rem/1.5rem Poppins,
      title-small: 600 1.125rem/1.125rem Poppins,

      /* this no longer works for buttons*/
      label-large: 600 1.25rem/1.5rem 'Inter Tight',
      // for buttons above line doesnt work, not sure anymore where this was happening
      label-large-size: 1.25rem,
      label-large-font: 'Inter Tight',
      label-large-line-height: 1.5rem,
      label-large-weight: 600,

      label-medium: 600 1.125rem/1.34rem 'Inter Tight',
      label-small: 600 1rem/1.2rem 'Inter Tight',
      body-large: 400 1.5rem/1.8rem Inter,
      body-medium: 400 1.25rem / 1.5rem Inter,
      body-small: 400 1rem / 1.2rem Inter,
      // on-surface-variant: light-dark(red, blue),
    )
  );

I define my typography like this:

.headline-lg {
  font: var(--mat-sys-headline-large);
}
.headline-md {
  font: var(--mat-sys-headline-medium);
}
.headline-sm {
  font: var(--mat-sys-headline-small);
}

.display-lg {
  font: var(--mat-sys-display-large);
}
.display-md {
  font: var(--mat-sys-display-medium);
}
.display-sm {
  font: var(--mat-sys-display-small);
}
... etc

and my custom display-large stubbornly uses the values from _md-syst-typescale.scss:

display-large: $regular 3.562rem #{'/'} 4rem $brand,
    display-large-font: $brand,
    display-large-line-height: 4rem,
    display-large-size: 3.562rem,
    display-large-tracking: -0.016rem,
    display-large-weight: $regular,

instead of what I define: `display-large: 400 3.5rem/4.2rem Poppins,`.

I am getting PRETTY annoyed how a minor update on Angular just throws the override system upside down without any documentation.

It is TOTALLY unclear what overrides are available in mat.theme-overrides and apparently some stopped working without notice.
At least when you add an non existing override to @include mat.button-overrides you get a SCSS error with all availalbe keys.

Working Material Theme is a horrible experience. M3 is def an improvement but the documentation is SOOO limited.
I am missing:

• how to easily setup a light and dark theme with a switch option
• how to affect colors like placeholder iin a formfield in a global override so I dont have to use outlined-input-text-placeholder-color: var(--mat-sys-inverse-on-surface), in y `mat.form-field-overrides. I have a dark and light theme but my textfields are for example always white background, so I want dark text, not light gray text when I go into dark mode.

Can I please get some advice/examples how to customise my typography?
After my upgrade to V20.1.7 I have to through my whole app to check what is now visually broken. That is not very acceptable. And mind you that I wasn't doing crazy overrides. I was using mat-theme-override and mat-[component]-overrides only.

[crisbeto]

Sounds like it might be due to recent changes in the system variables cc @andrewseguin

[mattiLeBlanc]

@crisbeto

I have done some more research and testing and I got the following to work for with a light and dark theme:

@mixin apply-theme($primary-palette, $color-scheme) {
  color-scheme: $color-scheme;
  @include mat.theme((
    color: (
      primary: $primary-palette,
    ),
    typography: (
      brand-family: Poppins,
      plain-family: 'Inter Tight',
    ),
    density: 0,
  ));

  @include mat.theme-overrides((
    background: light-dark(red, blue),  // testing to see what changes what 
    on-surface: light-dark(red, blue),    // testing to see what changes what 
    // on-surface: red,
    // inverse-on-surface:red,
    // // outline: #fff,
    // primary: colors.get-palette-color(colors.$primary-palette, 80),
    headline-large: 700 2rem/2.5rem Poppins,
    headline-medium: 700 1.5rem/1.7rem Poppins,
    headline-small: 700 1.25rem/1.5rem Poppins,
    // updated
    // display-large: 400 3.5rem/4.2rem Poppins,
    display-large-size: 3.5rem,
    display-large-font: Poppins,
    display-large-line-height: 4.2rem,
    display-large-weight: 400,
    // updated
    display-medium: 400 2.75rem/3.3rem Poppins,
    display-small: 600 2rem/2.4rem Poppins,
    // updated
    title-large: 500 2.25rem/3.375rem Poppins,
    title-medium: 500 1.5rem/1.5rem Poppins,
    title-small: 600 1.125rem/1.125rem Poppins,

    /* this no longer works for buttons*/
    label-large: 600 1.25rem/1.5rem 'Inter Tight',
    // for buttons above line doesnt work, not sure anymore where this was happening
    label-large-size: 1.25rem,
    label-large-font: 'Inter Tight',
    label-large-line-height: 1.5rem,
    label-large-weight: 600,

    label-medium: 600 1.125rem/1.34rem 'Inter Tight',
    label-small: 600 1rem/1.2rem 'Inter Tight',
    body-large: 400 1.5rem/1.8rem Inter,
    body-medium: 400 1.25rem / 1.5rem Inter,
    body-small: 400 1rem / 1.2rem Inter,
    // on-surface-variant: light-dark(red, blue),
  ));

}

@mixin theme {
  // Light mode - tertiary palette as primary
  &.light-theme {
    @include apply-theme(colors.$light-palette, light);
  }
  // Dark mode - primary palette as primary
  &.dark-theme {
    @include apply-theme(colors.$dark-palette, dark);
  }
}

Before I had the @include mat.theme-overrides defined in the @mixin theme but that didn't seem to work.
Moving the @include mat.theme-overrides into the @apply-theme` mixin fixed the issue of the fonts not being applied.

I am now trying to find nice ways to be able use colors in custom classes like:

[class].bg-primary:not([disabled]) {
    background-color: light-dark(
      get-palette-color($light-palette, 80),
      get-palette-color($dark-palette, 80)
    );
  }

which works very nice.

I am having trouble figuring out what is allowed in the mat.theme-overrides because SCSS will not tell you if you use an incorrect override key. My best bet is look at the variables generated.

Any chance the Documentation about theming can be much more comprehensive ?
Especially on when to use surface or background overrides and other meanings of all the properties we can override in the theme.

[andrewseguin]

It would be helpful if you provide a reproduction of your issues on Stackblitz so we can go through and find the best solutions for your case.

There's quite a lot happening in this issue thread so I'll do my best to address your concerns:

• As mentioned in bug(Material): theme-overrrides typography not working #31191, you are right that it's not ideal font is split up and it causes confusion. Our components do not use the broad tokens like "label-large", but instead the fine-grained system tokens like "label-large-weight". The broad ones are more for your own consumption in custom components. The issue is that font shorthand doesn't include tracking. I'll look into consolidating this in a backwards compatible way for our next major
• Button has many variants, and each variant has its own set of tokens for font. Unfortunately you do need to override each of them individually to affect them all
• I'll make a note to add validation to theme-overrides so it is more clear when a token is misspelled or not applied
• Docs: light and dark mode is explicitly documented. Can you share what gaps are you find here https://material.angular.dev/guide/theming#supporting-light-and-dark-mode
• Docs: I dont follow your placeholder example for using inverse-on-surface. That should be used for things like a snackbar or tooltip. The token is not suitable for switching light/dark mode
• For help understanding when to use different system tokens, check out the extensive docs at https://m3.material.io/styles

[mattiLeBlanc]

@andrewseguin

• on (bug(Material): theme-overrrides typography not working #31191) Acknowledged! Looking forward if the short-hand theme overrides can be applied to items like buttons
• buttons are working again now that I moved the @include mat.theme-overrides into the apply-themes mixin. That actually solved a lot of issues.
• validation to theme-override would be great, that would explain why I am having inverse-on-surface in my theme-override which may not belong there. But I wouldn't know because of the lack of validation.
• Light-dark mode: I understand it a bit better now, but what I am trying to achieve is actually probably abusing the light/dark mode and use it as a theme switch,er like you have in the Mat Angular Components (you can switch themes with different colours).
  Our app has 2 views; a consumer view which is using a black background and teal primary color and we configure mode which uses a white background and a purple primary color.
  I though I light mode would be the theme with white background and dark mode the theme with black background. That is what I have done in the most recent example in my post above.
  However, I understand now that perhaps light and dark mode means just a different contrast ratio of one theme definition, not a switch between 2 themes. I mean it works, but it may not have been designed for that.

But I like that you could use media queries based on the light or dark mode, that is pretty cool. So maybe I am not "abusing" the system that much?

• thanks for the link to Mat3 styles; I found that too but had some trouble understanding how that would work in my app, when to use which overrides on a theme or a component. The theme-overrides validation will help. The components already have their style overrides listed in the Angular Mat Components website.
• Also, will the button class stay stable now? mat-flat-button turned into matButton="filled". I have seen so many changes overtime, would be nice if it starts to stabilise.

I am pretty pleased with the M3 theme system, it has come a long way and promotes less hacky overrides which is great.