Page MenuHomePhabricator

Quiet default buttons have invalid hover styles
Closed, ResolvedPublicBUG REPORT

Description

In mostly a volunteer capacity, I'm working on a gadget / user script that uses the Codex design library in its current form straight from GitHub and I noticed an issue with some buttons.

The hover styles for action="default" type="quiet" buttons are invalid:

.cdx-button--type-quiet:not([disabled]):hover{background-color:rgba(0,24,73,7/255)}

That is, 7/255 is not a valid CSS number.

You can verify this issue on the Codex demo page.

I had a quick look at the Codex code myself to see if I can offer a patch, but while I can reproduce the problem there as well, I'm not sure what causes it. The strange thing is that the styles in the design-tokens directory are perfectly fine and valid.

How exactly is the CSS produced that ends up in vue-components/dist/codex.style.css?

Event Timeline

Ooo, interesting...I think this might be a bug in wikimedia-ui-base, because this is broken on the OOUI demo page in the same way. It looks like this line was changed 6 months ago. I would also have assumed that Less would compute that value on compile. Wrapping it in calc(), as was done in wikimedia-ui-base.css in that patch I linked to, fixes the issue.

Paging @Volker_E: should wrapping the calculation in parentheses be sufficient in Less, or do we just need to add calc in the variable definition here?

In terms of how the compiled CSS file is generated:

Change 746833 had a related patch set uploaded (by Eric Gardner; author: VolkerE):

[design/codex@main] Button, tokens: Make Button component use Codex tokens

https://gerrit.wikimedia.org/r/746833

Change 746833 merged by jenkins-bot:

[design/codex@main] Button, tokens: Make Button component use Codex tokens

https://gerrit.wikimedia.org/r/746833

https://phabricator.wikimedia.org/T307631 closed as a duplicate of this issue.

Line 146 of ./resources/lib/ooui/oojs-ui-core-wikimediaui.css

background-color: rgba(0, 24, 73, 7/255);

This is not CSS. It looks like LESS, and it is being delivered client-side for web browsers to process, and it doesn't render correctly. This is not the only CSS/LESS issue, but is one of the first I stumbled upon [May 3rd, 2022] while working on trying to fix something else.

sibling task

I thought this problem and T307631 have the same base reason because they have appeared at the same time and mentioned exactly the same code rgba(0,24,73,7/255), but I see the button on the demo page linked in the task behaving well, so probably they are separate, so I will unmerge the merged task.

So, is this task solved, or is the behavior got fixed only in the demo?

Volker_E claimed this task.

@Jack_who_built_the_house The origin for the non-working value was the same for both tasks. This is actually successfully resolved. The sibling task will be with the coming WikimediaUI Base and stream-through OOUI release.