Closed pmpak closed 2 weeks ago
Sounds like it's due to #28995 cc @DBowen33 and @andrewseguin
Faced the same issue. I think the divider color is just way too dark and doesn't match the spec.
Yes correct current divider match color 'outline' where according to specs should be outline-variant
Doesn't match the spec:
It's true that the divider no longer matches the spec. However this is because the spec is out of date with internal Google guidelines that govern contrast ratios for non-text elements. This change to darken the outline was made to ensure the divider is accessible for all users. The workaround of overriding the divider is recommended if it appears too dark in your application
Is this a regression?
The previous version in which this bug was not present was
18.0.x
Description
In Angular Material 18.1.x, when using a Material 3 theme, the
mat-divider
component uses theoutline
token instead of theoutline-variant
as specified by the Material 3 guidelines. This change caused sections in our application to appear more prominent than expected. Additionally, this creates inconsistency in places where we combine custom styles that set the color of outlines by using theoutline-variant
role from the theme, and also havemat-dividers
within.I understand that the change from #28995 is to achieve better color contrast. However, this deviates from the specification, which explains that dividers are decorative elements and have no minimum contrast requirements.
https://m3.material.io/components/divider/accessibility https://m3.material.io/components/divider/specs#f7d1605e-1629-404c-86a5-0ef6848ce520
A potential workaround can be to use the
--mat-divider-color
property and set color to theoutline-variant
token, but it would be nice if there is no need for style changes.Reproduction
StackBlitz links:
Steps to reproduce:
outline
token.outline-variant
token.Expected Behavior
Divider uses the
outline-variant
color tokenActual Behavior
Divider uses the
outline
color tokenEnvironment
Angular CLI: 18.1.2 Node: 18.20.3 Package Manager: yarn 1.22.19 OS: linux x64
Angular: 18.1.2 ... animations, cdk, cli, common, compiler, compiler-cli, core ... forms, localize, material, material-experimental ... material-moment-adapter, platform-browser ... platform-browser-dynamic, router
Package Version
@angular-devkit/architect 0.1801.2 @angular-devkit/build-angular 18.1.2 @angular-devkit/core 18.1.2 @angular-devkit/schematics 18.1.2 @schematics/angular 18.1.2 rxjs 7.4.0 typescript 5.4.5 zone.js 0.14.6