-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Description
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
19.2.17
Description
If you define a mat.theme with a single value for typography, the font is not applying to some headings such as dialog-title. They are using the default Roboto font.
I believe the bug is in line 117 in _m3-system.scss.
If $typography is not a map (@else clause), then only $plain: $typography; is being set, while $brand remains $plain; from line 106, which is (Roboto, sans-serif) (from line 105).
components/src/material/core/tokens/_m3-system.scss
Lines 104 to 118 in 020c6af
| @if ($typography) { | |
| $plain: (Roboto, sans-serif); | |
| $brand: $plain; | |
| $bold: 700; | |
| $medium: 500; | |
| $regular: 400; | |
| @if (meta.type-of($typography) == map) { | |
| $plain: map.get($typography, plain-family); | |
| $brand: map.get($typography, brand-family) or $plain; | |
| $bold: map.get($typography, bold-weight) or $bold; | |
| $medium: map.get($typography, medium-weight) or $medium; | |
| $regular: map.get($typography, regular-weight) or $regular; | |
| } @else { | |
| $plain: $typography; | |
| } |
Reproduction
Steps to reproduce: Define a mat.theme with a single value for typography:
html {
color-scheme: light;
@include mat.theme((
color: $primary-palette,
typography: $my-font, // Should apply to both `plain-family` and `brand-family`, but it's not applying to `brand-family`.
density: 0,
));
}Expected Behavior
https://material.angular.dev/guide/theming#single-font-family-value
If you provide a font family, Angular Material uses it for all the text in its components.
Actual Behavior
The single provided font-family is being applied to all components, but not to some headers like dialog-title,
Environment
- Angular:
20.0.0 - CDK/Material:
20.0.1 - Browser(s):
Chrome
