Hello Figma community! 👋
My team and I are having trouble with icon color overrides. I’ve read up on as many forums similar to this issue, but none seem to have a fix for our situation.
Problem Summary: Icon colors occasionally revert to nested component colors instead of inheriting the main component's color tokens when switching sizes in icon-button instances.
Component Structure:
- Nested component:
.icon-button-configuration- controls button sizing
- Main component:
icon-button- wraps the nested component and manages color variables
Visual of the bug:
In the screens below, I’ve create an instance of the icon-button component and switched the size variant. The icon color sometimes changes back to white (nested component's color) instead of maintaining dark gray (main tonal component's token).
The issue only happens with x-small, small, large, x-large. Icons correctly inherit colors for medium and xx-large sizes.
What We've Tried:
- Ensured all icons have identical structure (this resolved the issue for most community members, but not for us)
- Unlinking icon color in the nested
.icon-button-configuration(testing now)
Has anyone encountered this specific issue with nested icon-button components and found a solution? We're considering rebuilding individual variants for each size/shape/state/etc. combination, but hoping to avoid this tedious approach.
All ideas/suggestions/advice appreciated – thanks! 🙏