Page MenuHomePhabricator

Automation support to prevent close (indistinguishable) colors from being added to CSS/Less
Closed, DeclinedPublic

Description

Stylelint offers the option [[ http://stylelint.io/user-guide/rules/no-indistinguishable-colors/ | no-indistinguishable-colors ]], which allows to set a threshold for separate colors being included in CSS/Less code. From a UI Standardization point that seems incredibly helpful as it should help prevent “having 5 shades of pale light blue, for example, [when] you probably wanted just one”.

A threshold of 2 seems useful.
It returns the following linting feedback (test run on current Echo codebase at threshold 2):

modules/nojs/mw.echo.special.less
121:22 ✖ Unexpected indistinguishable colors "#f6f6f6" and "#f1f1f1" no-indistinguishable-colors

modules/styles/mw.echo.ui.NotificationItemWidget.less
247:21 ✖ Unexpected indistinguishable colors "#ececec" and "#f1f1f1" no-indistinguishable-colors
253:22 ✖ Unexpected indistinguishable colors "#fafafa" and "#f1f1f1" no-indistinguishable-colors
253:22 ✖ Unexpected indistinguishable colors "#fafafa" and "#fff" no-indistinguishable-colors

With threshold 1 it just returned:

modules/styles/mw.echo.ui.NotificationItemWidget.less
253:22 ✖ Unexpected indistinguishable colors "#fafafa" and "#fff" no-indistinguishable-colors

The only caveat that I've run into, it doesn't seem to take opacity in rgba notation into full account and therefore also leads to

377:10 ✖ Unexpected indistinguishable colors "#000" and "rgba( 0, 0, 0, 0.1 )" no-indistinguishable-colors

I need to look closer how we can best-address this, but from first test runs this addition to our general stylelint configurations is a “go”!

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

allowEquivalentNotation could be the solution to the caveat mentioned in the task description, although https://github.com/SlexAxton/css-colorguard/issues/32 says something a little different.

This really cool, and should be helpful to us.

allowEquivalentNotation could be the solution to the caveat mentioned in the task description, although https://github.com/SlexAxton/css-colorguard/issues/32 says something a little different.

Yep, this wont help. The README has a warning about the transparency issue too.


The new version (1.0.0) of color-diff supports better comparison for colors with transparency. Unfortunately, colorguard is stuck on the old. Do you want to try bumping the version and see if we get better results?

Volker_E triaged this task as Medium priority.Dec 15 2016, 6:11 PM
Aklapper removed a subscriber: Nirzar.

This task has been assigned to the same task owner for more than two years. Resetting task assignee due to inactivity, to decrease task cookie-licking and to get a slightly more realistic overview of plans. Please feel free to assign this task to yourself again if you still realistically work or plan to work on this task - it would be welcome!

For tips how to manage individual work in Phabricator (noisy notifications, lists of task, etc.), see https://phabricator.wikimedia.org/T228575#6237124 for available options.
(For the records, two emails were sent to assignee addresses before resetting assignees. See T228575 for more info and for potential feedback. Thanks!)

This is no longer necessary, as we're actively implementing Codex design tokens across the board instead of hardcoded values where such issue needs to and would be preventable.