fix(TabInfoButton): [EMU-7334] Increase contrast

[kimkwanka]

What this PR does

This PR increases the contrast ratio between TabInfoButton and background as user testing showed that it's really hard to see.

Before

After

Why is this needed?

Solves:
EMU-7334

Checklist:

• I reviewed my own code
• The changes align with the designs I received
  Or give a reason why this does not apply:
• I have attached screenshot(s), video(s) or gif(s) showing that the solution is working as expected
  Or give a reason why this does not apply:
• I have updated the task(s) status on Linear
• All new media is optimized (images, gifs, videos)

Browser support

My code works in the following browsers:

• Firefox
• Chrome
• Safari
• [xw] Edge

[diogomateus]

Not necessary as part of this PR but if you want, you can also replace this inline SVG with
<InfoInfo color="grey-400" size={20 /* or other */} />

[kimkwanka]

Sounds nifty, but how would I then give it hover states and similar? I tried manipulating it with

svg {
 fill: SOMECOLOR
}

to no avail :/
Looks like the fill is set to "currentColor" at all times

[kimkwanka]

Nvm, I need to use svg -> path instead.

[diogomateus]

You can then remove the svg fill color as the Icon component captures the button color (that's what currentColor is doing):

.button {
  color: $ds-primary-400;
  
  &:hover {   
    color: $ds-primary-300;
  }
}

[kimkwanka]

Ah cool 👍 Will keep that in mind and use it in the future! Here however, for better a11y, I wrapped the icon in a real button and just tweaked the original custom css instead of creating 2 new classes (one for the wrapping button and one for the icon itself).