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.

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

• I agree to follow this project's Code of Conduct