search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.88k stars 1.82k forks source link

[Bug]: theme neutral color token for popover bg when overlapping zoned theming #11347

Open jnm2377 opened 2 years ago

jnm2377 commented 2 years ago

Summary

This issue was brought up when migrating the Carbon tutorial to v11. In the tutorial, we have the header as g100 and the content as white. The UI shell icon buttons all use tooltips (since all our icon only buttons do for a11y). We realized that when the tooltip was showing, the g100 theme tooltip bg color was a light color, which blended in too much with the white bg content.

This might not be the only time something like this happens when zoned themes have popover content that overlap with the different themes.

Screen Shot 2022-04-28 at 1 58 12 PM Screen Shot 2022-04-28 at 1 57 43 PM

One of the options we considered was having a theme neutral color token for these situations. But then also need a way to be able to select that or configure that.

For the time being, we used $gray-20 as the tooltip bg color (per design guidance).

Justification

Better visibility and a11y. When the color blends in too much with one theme, it can be easy to miss the content.

Desired UX and success metrics

No response

Required functionality

Ability to be able to easily configure (via prop or something) a theme neutral bg color

Specific timeline issues / requests

No response

Available extra resources

No response

Code of Conduct

sstrubberg commented 2 years ago

Just chatted about this one in Backlog Cleaning. We decided that this was more of a bug than a feature and prioritized it as such. We want to see if other v11 adopters experience this before prioritizing the work because there will need to be some research sprint(s) to figure out a path forward. Thanks for logging this!