bug(mat-divider): Incorrect color token on Material 3 Theme

[pmpak]

trafficstars

Is this a regression?

• [X] Yes, this behavior used to work in the previous version

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 the outline token instead of the outline-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 the outline-variant role from the theme, and also have mat-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 the outline-variant token, but it would be nice if there is no need for style changes.

Reproduction

StackBlitz links:

• Angular Material 18.1.x: https://stackblitz.com/edit/mwztdu?file=package.json
• Angular Material 18.0.x: https://stackblitz.com/edit/mwztdu-iaag8z?file=package.json

Steps to reproduce:

1. Open the example using Angular Material 18.1.x. Observe that the dividers take their color from the outline token.
2. Open the example using Angular Material 18.0.x. Observe that the dividers take their color from the outline-variant token.

Expected Behavior

Divider uses the outline-variant color token

Actual Behavior

Divider uses the outline color token

Environment

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

[crisbeto]

Sounds like it's due to #28995 cc @DBowen33 and @andrewseguin

[behzadmehrabi]

Faced the same issue. I think the divider color is just way too dark and doesn't match the spec.

[vulture9]

Yes correct current divider match color 'outline' where according to specs should be outline-variant

[aastrouski]

Doesn't match the spec:

[andrewseguin]

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

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}