Calcite-components: Bug: calcite-pick-list and calcite-value-list dark theme text isn't visible

[bcree11]

Summary

When dark theme is used for calcite-pick-list and calcite-value-list label text is not visible, description is barely visible, and action icons are also barely visible.

Actual Behavior

Expected Behavior

To be able to clearly see the text and actions on each item. I noticed that mix-blend-mode: multiply on label and calcite-action is causing this issue. Removing it makes the text and icon viewable.

After removing mix-blend-mode:

Reproduction Steps

https://esri.github.io/calcite-components/?path=/story/app-components-pick-list--basic&knob-dir=ltr&knob-disabled=&knob-filterEnabled=&knob-loading=&knob-multiple=&knob-theme=dark

[caripizza]

Hi @bcree11, I reproduced this issue in the components' stories, per your link example. However, I can't repro this issue in the component demos/html - the labels appear visible as do the icons. I'm wondering if this is just a Storybook-related issue due to the components sitting in an iframe. Can you please clarify for me if you have reproducible steps in a non-Storybook environment?

[caripizza]

Closing for now, if we have some repro steps in a non-Storybook environment we can re-open this one.

[Csmith246]

@caripizza Here's an example of the issue in a non-storybook environment: https://codepen.io/csmith55/pen/oNzKoKd?editors=1000. I'm loading the calcite resources from the unpkg CDN here

[caripizza]

@Csmith246 isn't it still sitting in an iframe?

[Csmith246]

@caripizza That is true for CodePen. I just copy/pasted that code to my machine and ran it locally. I'm getting the same thing. Here's a screenshot:

In this context, it's definitely outside of an Iframe

[caripizza]

Aha - thanks for that @Csmith246. Confirmed the bug on my end too in the current v1.0.0-beta.48 release. Looks like specifically it was in the calcite-pick-list-item component, and it was fixed in this commit a couple weeks ago (ie., Alan removed the mix-blend-mode: multiply styles), so I'm thinking the next release should include the fix:
https://github.com/Esri/calcite-components/commit/1e3f17c61c382c8a338ed298149e7a5caddffa59#diff-09662305e87ed34c93da0a2d36016063cdde0eba67926b49a3b43799e72585f4L47:~:mix-blend-mode:%20multiply;

[Csmith246]

@caripizza We're still experiencing this issue in our codebase. Could we open this issue until the fix is published and confirmed?

[caripizza]

@Csmith246 @bcree11 based on what I'm seeing this should now be resolved in the latest release of @Esri/[email protected], can you please check on your end when you have a moment?

[Csmith246]

Looks like it's fixed in the latest version. Thanks!