1894820 - moz-button type=icon background color differs from type=default

Status: RESOLVED DUPLICATE of bug 1896140

(Toolkit :: UI Widgets, defect, P3)

Description

[Mark Striemer [:mstriemer]]

The button background color is determined by a color-mix() that includes the currentColor. Because of this, the color needs to be --button-text-color for the background color to be the expected value

The type=icon styles should be updated so they set fill: var(--icon-color) instead of using color: var(--icon-color)

Comment 1

[Mark Striemer [:mstriemer]]

Another option may be to update the --button-background-color token to use --button-text-color instead of currentColor

color-mix(in srgb, var(--button-text-color) 7%, transparent)

Recomp discussed this and it probably makes sense to stick with just modifying moz-button for now

Comment 2

[Mark Striemer [:mstriemer]]

Looks like bug 1896140 identified an a11y issue stemming from using a different colour for the text as well. The solution there is to stop using --icon-color entirely and instead use the button text colour for the fill which solves this issue as well.