Page MenuHomePhabricator

Improve wikitable borders
Closed, ResolvedPublic

Description

Wikitable borders use static gray color from our styleguide.
When wikitables cells use background colors, our grey borders don't work well with colors editors have chosen.

E.g.

image.png (732×1 px, 389 KB)

Solution

Let's use rgba with alpha so the border colors can be the darker shades of whatever colors editors have decided to use in each table.
if we use rgba(0,0,0,0.2) for border here's how the same table looks like

Note: this has no impact on tables without colors

image.png (726×1 px, 391 KB)

Developer notes

Use variables consistent with the style guide @ https://phabricator.wikimedia.org/source/wikimedia-ui-base/browse/master/wikimedia-ui-base.css
If a variable doesn't exist, make sure the name is consistent and ideally sync with @Volker_E to get it accessible from core.
Be sure to look at the conversation in comments beginning: https://phabricator.wikimedia.org/T168029#3355785

Event Timeline

Jdlrobson subscribed.

Should be relatively simple, but to be more specific we use border: 1px solid @grayLight; for wikitables
What is the new variable name..?

@Jdlrobson not sure. we don't have alpha channel in color guide yet. is there a way to take current variable and reduce alpha?

if that's possible then we can do --wmui-color-base10 or the equivalent of darkest grey/black in mwui and reduce the alpha to 0.2

cc @Volker_E for visibility

@Jdlrobson @Nirzar We've already got rgba() vars in WikimediUI Base (https://phabricator.wikimedia.org/source/wikimedia-ui-base/browse/master/wikimedia-ui-base.css) – I'd suggest to put a specific one in for the currently identified use case into the Base file. Also please consider to have a

border-color: @fallback;
border-color: @rgba;

structure for addressing older browsers.

ovasileva triaged this task as Medium priority.Jun 20 2017, 12:10 PM

Change 373614 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Lighten table border color

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

Change 373614 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Fade table border color

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

Sorry, this is completely my fault for not following up on the styleguide grey > rgba conversion conversation and as a result the grey is not the correct one.

can we use following grey (whatever the styleguide name is) for border color

#54595D
rgba(84,89,93,0.3)

Happy to have a fixed rgba() value instead of a LESS function here! :)
Will put it into WikimediaUI Base after my return and in the meantime use fixed value in MinervaNeue.

Change 374414 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Switch to @colorGray5 for wikitable borders

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

Change 374414 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Switch to @colorGray5 for wikitable borders

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