[EuiTab] Icons on selected tabs don't inherit the primary color as the text does

[prgueza]

Describe the bug

Icons on selected tabs don't inherit the primary color as the text and the bottom border (box-shadow) do. Not 100% sure if this is a bug or the expected behaviour, but it feels a bit unnatural.

Environment and versions

• EUI version: 84.0.0
• React version: 17
• Kibana version (if applicable):
• Browser: Google Chrome (Version 114.0.5735.198 (Official Build) (arm64))
• Operating System: Mac OS Ventura 3.14

To Reproduce

Steps to reproduce the behavior:

1. Set up a tabs component where the tabs use icons
2. Click on any tab with an icon
3. Check that the icon color doesn't change accordingly

Expected behavior

The icon on selected tabs uses the primary color as the text and the bottom border (box-shadow) do.

Minimum reproducible sandbox

https://codesandbox.io/s/gr57c3?file=/demo.js

[cee-chen]

It looks like icons did inherit the color in EUI v60 (https://eui.elastic.co/v60.0.0/#/navigation/tabs#tabbed-content), so this did regress at some point, likely due to an Emotion conversion. Thanks for the report @prgueza, I'll look into a fix!

[prgueza]

I was happy opening a pull request myself, but if you have the time to look in to it, all yours by all means! 😄