bug(dark theme): dark theme disabled-state styling does not match spec for toggle-button, list-item

[thw0rted]

Reproduction

I'd like to make a StackBlitz to illustrate this but I can't seem to make a dark-theme example. If anybody can give me a sample to fork that uses a dark theme, it'd be dead easy to include some examples of affected components. (Also: should I open a separate ticket to ship at least one dark theme in the prebuilt-themes directory? Seems kind of crazy not to have any.)

Steps to reproduce:

1. Use any dark theme
2. Create a mat-list-item or Toggle-type button, at least
3. Set the disabled attribute on the component
4. Observe that the background is a pretty jarring 100% black

Expected Behavior

The background of disabled controls should comply with the relevant section of the spec:

All disabled components are displayed using 12% White for container outlines and fills and 38% White for content such as labels or icons

Actual Behavior

The background of disabled components uses "black", per here. Of note, just above there the background color of disabled-button is rgba(white, 0.12) which is correct. It's possible that other backgrounds also fail to match spec -- I only started digging because disabled list items look pretty rough.

Environment

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

[jelbourn]

This should get fixed when we publish stable versions of our MDC-based components, which will resolve a wide variety of spec issues.

[Rahkola]

Any update on the publishing of MCD-based components? For now I'm using the following fix - where I apply global styles in my styles.scss file for the dark theme class 'my-dark-mode'.

.my-dark-mode .mat-list-item-disabled {

  background-color: rgba(white, 0.12);

  .mat-list-item-content{
    background-color: rgba(white, 0.38);
    color: rgba(white, 0.38);
  }
}

[zarend]

Hello @thw0rted ,

We published the MDC-based components in v15. Does upgrading to v15 resolve this issue for you?

-Zach

[amysorto]

Closing this issue due to no recent activity, if this is still an issue please create a new issue with a reproduction.

[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.}