In wikimedia-ui-base, we have:
@opacity-icon-base: 0.87; // = `#222` on `background-color: #fff`, closest to `#202122` @opacity-icon-base--hover: 0.74; // = `#424242` on `background-color: #fff`, closest to `#404244` @opacity-icon-base--selected: 1; @opacity-icon-accessory: 0.67; // = `#555`, closest to `#54595d` on background-color `#fff`.
According to the comments, these opacities are meant to mimic colors from the color palette when applied to pure black (#000) icons. However, WVUI uses SVG icons with configurable colors, so it would be relatively easy to use actual colors here instead.
I propose we:
- Remove the iconColor prop from the Icon component
- Always use currentColor in the SVG output by the Icon component
- Have callers control the icon color using CSS (by setting the text color) instead
- Replace existing opacity rules applied to icons with color rules
- Define @color-icon-base etc analogous to @opacity-icon-base etc
My main open question is how we should handle the default icon color (#202122, AKA @wmui-color-base10). We could:
- Leave it up to callers to apply the correct text color to their icons
- It would be easy to forget to do this, and accidentally end up with pure black icons
- Components that use standalone icons would have to include color: @color-icon-base; rules for their icons, duplicating this rule all over the place
- In places where icons are used as part of text, their color wouldn't need to be styled separately, because the text will already have a color applied to it (which is typically also #202122)
- Set color: @color-icon-base; as a default CSS rule in the Icon component
- Callers wouldn't need to do anything to get the default icon color
- In places where icons are used as part of text, their color would need to be styled separately, because the icons wouldn't inherit the text color
- Components that change the text color in their slots (e.g. progressive/destructive buttons) would have to be aware of icons, and write CSS that targets any icons that may be put in their slots to separately override their colors, because the text color rule wouldn't inherit
