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
No response
Description
When defining the density via mat.theme, e.g.
@include mat.theme(
(
color: (
theme-type: light,
primary: mat.$azure-palette,
tertiary: mat.$blue-palette,
),
typography: Roboto,
density: (
scale: 0,
),
)
);
the button height is 40px (--mdc-text-button-container-height
).
However, using the mat.all-component-densities(0)
mixin results in button height equals to 36px.
Similar issue applies to other densities - setting the density through the mixin results in different height values than setting it through the mat.theme
mixin.
Reproduction
StackBlitz link: https://stackblitz.com/edit/czrubf43?file=src%2Fstyles.scss
Steps to reproduce:
- inspect the button height without setting the density. Height is 40px
- set the density height with the dropdown to 0. Height changes to 36px.
changing density through the dropdown adds respectively classes to the body: .density0, .density-1 ... .density-5
the scss for those is (see styles.scss)
.body {
&.density0 {
@include mat.all-component-densities(0);
}
...
&.density-5 {
@include mat.all-component-densities(-5);
}
}
Expected Behavior
densities (component heights) set through mat.all-component-densities(0)
should be the same when set through
mat.theme((density: 0))
Actual Behavior
densities (component heights) set through mat.all-component-densities(0)
are different when set through
mat.theme((density: 0))
Environment
- Angular: 19.2.5
- CDK/Material: 19.2.5
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS