Page MenuHomePhabricator

Agora .mw-ui-input focus indicator uses a different blue from colorProgressive
Closed, ResolvedPublic

Description

The comment for the "left bar" focus indicator recently merged to core in the style guide (http://tools.wmflabs.org/styleguide/desktop/section-1.html) is "When focused a progressive highlight appears to the left of the field."

But the hardcoded color for the left box-shadow in resources/src/mediawiki.ui/components/inputs.less is #5088f7, which isn't colorProgressive (#347bff). It's lighter and more washed-out.

Flow originally used #347bff for the focus indicator. Shahyar's prototype of new UI ideas used #5088f7, Flow switched to that value in April with template rendering, and that's been the color ever since. FWIW both the .png in the Trello card https://trello.com/c/8FOi1X1x/16-basic-input-field and the original Agora_specs.pdf use #4C85FB without actually specifying a color.

If we want a different color for the focus indicator we should derive it from colorProgressive using LESS color operations, and modify the comment in the CSS.


Version: unspecified
Severity: minor

Details

Reference
bz69040

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 3:30 AM
bzimport set Reference to bz69040.
Spage created this task.Aug 2 2014, 4:22 AM

Change 156839 had a related patch set uploaded by Jdlrobson:
Use correct progressive color on inputs

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

Change 156839 merged by jenkins-bot:
Use correct progressive color on inputs

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