Boilerplate discourse code is using an !important, please remove this so I can override it… without also having to use an important. Buttons should have a focus/hover state for accessibility.
AI-generated summary
The discussion revolves around removing !important from the btn-transparent class in Discourse’s boilerplate code to allow customization of button hover, focus, and active states. king_laurel reports that transparent buttons remain fully transparent on hover and focus, preventing visual feedback essential for accessibility. They argue that the !important declaration restricts styling overrides and want the background and icon colors to change on interaction. jordan.vidrine acknowledges the issue and notes that while the icon color does change, the background remains transparent due to the button’s design. awesomerobot supports the change, confirming that removing !important is acceptable and has opened a pull request to address it.
Hey there! These transparent buttons force transparency because they should remain transparent. Can you point me to where you are trying to change that functionality? Is the button staying transparent on hover for you at the moment as well?
Yes, they are forcing transparency even on hover and active. We do not want transparent buttons and want buttons to have a hover/focus and active state.
Screenshot shows btn location, but this is true for all buttons:
I have brought back the focus ring but I expect the background color and icon color to change as well so a user can tell when their mouse is hovering it.
The icon color does change on hover, but the background will not change as it is a transparent button.
I will loop in more input here. It’s possible we might need to change this.
We want the background and color to change, so having the important restricts us. I also try to never use important in codes unless I absolutely have to, so I would prefer not to have to fight to override boilerplate code.
1 Like
Looks like removing !important is ok here, I’ve opened a pull request for it DEV: remove !important from btn-transparent background by awesomerobot · Pull Request #29809 · discourse/discourse · GitHub
5 Likes