IconButton: color override not applied for medium size

[cbix]

Description

Works:

<IconButton icon={InboxIcon} aria-label="Notifications" size="small" sx={{ color: 'green' }} />
<IconButton icon={InboxIcon} aria-label="Notifications" size="large" sx={{ color: 'green' }} />

Doesn't work:

<IconButton icon={InboxIcon} aria-label="Notifications" size="medium" sx={{ color: 'green' }} />
<IconButton icon={InboxIcon} aria-label="Notifications" sx={{ color: 'green' }} />

The default style rule takes precedence over the override in this case:

.bIJAok[data-component="IconButton"][data-no-visuals] {
    color: var(--fgColor-muted, var(--color-fg-muted, #656d76));
}
.bIJAok[data-no-visuals] {
    color: green;
}

While for small/large buttons it has extra specificity:

.LLQDD[data-size="small"][data-no-visuals] {
    color: green;
}
.LLQDD[data-component="IconButton"][data-no-visuals] {
    color: var(--fgColor-muted, var(--color-fg-muted, #656d76));
}

Steps to reproduce

1. Render a default IconButton with a color override

Version

v36.27.0

Browser

Chrome

[lesliecdubs]

Hi, thanks for reporting this!

I'm tagging this into our design team's board to confirm whether this is expected/desired behavior or not.

[tallys]

@lesliecdubs this is a css specificity issue, no objection to fixing for consistency 👍