Improve contrast ratio of close_button.vue when used with .gl-close-btn-color-inherit

@tauriedavis started a discussion in gitlab-org/gitlab-ui!2132 (merged):

Is there more work being done on the close icon? I noticed the hover state doesn't have much contrast. Since it matches broadcast messages, I'm going to move forward but might be worth an issue to look deeper into if there isn't one already.

When using the close button in components like token and broadcast, we're applying the .gl-close-btn-color-inherit class (introduced in gitlab-org/gitlab-ui!2178 (diffs)), which leverages mix-blend-mode: luminosity to achieve the desired style.

Depending on the color of the background element, the contrast ratio between the close button's background and the x icon may not be desirable.

Possible approach

Define a more granular set of styles that cater specifically for various states (i.e. dark and light text)