bug(mat-checkbox): Inconsistent disabled styles

[JohnKis]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/components-issue-svwzok?file=src%2Fapp%2Fexample-component.html

Steps to reproduce:

1. Open the StackBlitz example above

Expected Behavior

The disabled styles of form controls should be consistent.

Actual Behavior

The disabled styles are inconsistent. The label of disabled checkboxes are rgba(0,0,0,.54) so as the frame if it's checked but the background colour is #b0b0b0. Radios use rgba(0,0,0,.38) both on the radio button and the label regardless whether they are checked or not. Disabled slide-toggles just have their opacity set as .38 resulting in yet another shade on the label.

Environment

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

[crisbeto]

Is the Stackblitz link correct? It doesn't have any checkboxes.

[JohnKis]

Apparently it wasn't. Might have forgot to save it. I've updated the original message with the correct url.

[angular-automatic-lock-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.}