1791074 - HCM: Hovered buttons and primary buttons have a border-color that doesn't match the background-color, making them look fuzzy

Status: NEW

(Toolkit :: Themes, defect, P3)

Description

[Shane Hughes [:aminomancer]]

Attachment: fuzzyHCMBorders.gif

Normally in system pages, dialogs, etc. (that load common.css), hovered buttons have transparent borders.

In a default light HCM theme, a regular button will have a 'ghost button' appearance: a dark (ButtonText) border, a light (ButtonFace) background-color, and dark (ButtonText) text. Hovering it will basically invert these colors. But that means the border is not the same color as the background, causing the button edges to look fuzzy and weird. The same thing is true for primary buttons, but in reverse.

So in HCM, border-color should always be ButtonText. In the 'ghost button' state, that makes the border the same color as the text. In the hovered state (or unhovered for primary buttons), that makes the border the same color as the solid background.

To implement that, we can add the following rules to this ruleset:

--in-content-button-border-color-hover: ButtonText;
--in-content-primary-button-border-color: ButtonText;

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:dao, could you have a look please?

For more information, please visit auto_nag documentation.