Page MenuHomePhabricator

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

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

Volker_E created this task.Oct 6 2016, 12:57 AM
Restricted Application added a project: UI-Standardization. · View Herald TranscriptOct 6 2016, 12:57 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Volker_E added a comment.EditedOct 6 2016, 1:18 AM

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.

Volker_E updated the task description. (Show Details)Oct 6 2016, 3:59 AM
matmarex removed a subscriber: matmarex.Oct 6 2016, 4:57 PM

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 Volker_E as the assignee of this task.Jun 19 2020, 4:22 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!)