I have a core component that controls overall share of an element & sizing.

This core component is then used in a component that handles various things like colors and hover states.

For example, I have a core component named “icon-button-core”. This component has a size variant of “lg”, “md”, “sm” whose respectable sizes are “40px”, “32px”, “14px”.

Now in another file (theme file), I create a component called “icon-button” nesting the previous “icon-button-core”. This component has “State” and “Color”.

Upon use, when I change the “size” variant within the nested component “icon-button-core”, it does not update the sizing.