Page MenuHomePhabricator
Create Task
Maniphest T317800

[Icons] Bring mediawiki-ui-icon colors in line with Codex
Closed, ResolvedPublic
Actions

Description

Styles for mw-ui-icon are inconsistent with Codex. We can update these now with no need for a feature flag.

TODO

We will align the following:

  • Align Hover background colors (Core change)
  • Align Icon glyph colors to #222 (Vector change)

QA

Details

SubjectRepoBranchLines +/-
MediaWiki UI: Bring colors in line with latest Codexmediawiki/coremaster+2 -2
mediawiki.ui: Update hover background color of quiet icon buttonsmediawiki/coremaster+3 -4
Icons: Globally set icon colors to `@opacity-icon-base`mediawiki/skins/Vectormaster+8 -9
mediawiki.skin.variables: Add Opacities to skin.defaults variablesmediawiki/skins/Vectormaster+16 -0
Customize query in gerrit

Related Objects
Search...

Event Timeline

Jdlrobson created this task.Sep 14 2022, 6:43 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 14 2022, 6:43 PM
Jdlrobson added a parent task: T314323: [EPIC, Visual refinements] Standardize icon buttons & links (Vector 2022).Sep 14 2022, 6:43 PM
Jdlrobson mentioned this in T314323: [EPIC, Visual refinements] Standardize icon buttons & links (Vector 2022).
Jdlrobson triaged this task as Medium priority.Sep 14 2022, 6:45 PM
Jdlrobson updated the task description. (Show Details)
gerritbot added a comment.Sep 14 2022, 6:47 PM

Change 832002 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] MediaWiki UI: Bring colors in line with latest Codex

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

gerritbot added a project: Patch-For-Review.Sep 14 2022, 6:47 PM
Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Sep 14 2022, 6:47 PM
gerritbot added a comment.Sep 14 2022, 8:54 PM

Change 832351 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Icons: Set icon colors from #000 to #202122

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

Jdlrobson claimed this task.Sep 14 2022, 11:46 PM
Jdlrobson added a project: Design-System-Team.Sep 15 2022, 4:32 PM
Jdlrobson moved this task from Upcoming to Blocked on Others on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Sep 15 2022, 5:12 PM
gerritbot added a comment.Sep 17 2022, 5:37 AM

Change 832719 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/skins/Vector@master] mediawiki.skin.variables: Add Opacities to skin.defaults variables

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

gerritbot added a comment.Sep 19 2022, 3:09 PM

Change 832719 merged by jenkins-bot:

[mediawiki/skins/Vector@master] mediawiki.skin.variables: Add Opacities to skin.defaults variables

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

ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.2; 2022-09-19).Sep 19 2022, 4:00 PM
gerritbot added a comment.Sep 20 2022, 12:35 AM

Change 832351 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Icons: Globally set icon colors to `@opacity-icon-base`

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

Jdlrobson reassigned this task from Jdlrobson to • alexhollender_WMF.EditedSep 20 2022, 4:12 PM
Jdlrobson moved this task from Blocked on Others to Design Review on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.

The new colors (for icons) should be available on the beta cluster now.

Still working on the hover colors.

• alexhollender_WMF added a comment.Sep 20 2022, 4:33 PM
In T317800#8248519, @Jdlrobson wrote:

The new colors (for icons) should be available on the beta cluster now.

On beta it seems that all icons are now #222222. They should be #202122.

Volker_E subscribed.Sep 20 2022, 7:13 PM

@alexhollender_WMF With the current icon system, where the icons start from fill color #000 we can only achieve approximations. #222 is – in balancing code complexity and maintenance – the closest. In the past we set out to call this acceptable.

• alexhollender_WMF added a subscriber: bmartinezcalvo.Sep 21 2022, 12:32 PM
In T317800#8248971, @Volker_E wrote:

@alexhollender_WMF With the current icon system, where the icons start from fill color #000 we can only achieve approximations. #222 is – in balancing code complexity and maintenance – the closest. In the past we set out to call this acceptable.

thanks for clarifying. @bmartinezcalvo should we update this in Figma to avoid potential confusion?

• alexhollender_WMF updated the task description. (Show Details)Sep 21 2022, 12:32 PM
• alexhollender_WMF reassigned this task from • alexhollender_WMF to Jdlrobson.Sep 21 2022, 5:26 PM
• alexhollender_WMF moved this task from Design Review to Needs More Work on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.
• alexhollender_WMF subscribed.
Jdlrobson reassigned this task from Jdlrobson to Volker_E.Sep 21 2022, 8:08 PM
Jdlrobson moved this task from Needs More Work to Blocked on Others on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.
Jdlrobson mentioned this in T314488: Revise the appearance of the sticky header's "Add topic" button (activated state).Sep 21 2022, 8:11 PM
Volker_E added a comment.Sep 21 2022, 11:48 PM

@alexhollender_WMF Just for completion and general visibility: The implementation in Codex follows the text color and is #202122 in such case.
Technically we couldn't do this back then and opacity just makes icons reach same R, G and B channel numbers, so #222 is closest and it's barely noticeable for normal pair of eyes. So while Codex outputs #202122, OOUI/MediaWiki won't be able to provide the same in close future.
it's a small detail to know for designers, it's still better to keep the icons in Figma in #202122 with a note about implementation details IMO.

Volker_E updated the task description. (Show Details)Sep 21 2022, 11:49 PM
gerritbot added a comment.Sep 22 2022, 8:18 AM

Change 833994 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] mediawiki.ui: Update hover background color of quiet icon buttons

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

gerritbot added a comment.Sep 22 2022, 4:08 PM

Change 833994 merged by jenkins-bot:

[mediawiki/core@master] mediawiki.ui: Update hover background color of quiet icon buttons

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

ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.3; 2022-09-26); removed MW-1.40-notes (1.40.0-wmf.2; 2022-09-19).Sep 22 2022, 5:00 PM
Jdlrobson moved this task from Blocked on Others to Design Review on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Sep 22 2022, 5:26 PM
gerritbot added a comment.Sep 22 2022, 7:11 PM

Change 832002 abandoned by Jdlrobson:

[mediawiki/core@master] MediaWiki UI: Bring colors in line with latest Codex

Reason:

https://gerrit.wikimedia.org/r/c/mediawiki/core/+/833994

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

Maintenance_bot removed a project: Patch-For-Review.Sep 22 2022, 7:30 PM
gerritbot added a comment.Sep 22 2022, 7:48 PM

Change 832002 restored by Jdlrobson:

[mediawiki/core@master] MediaWiki UI: Bring colors in line with latest Codex

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

gerritbot added a project: Patch-For-Review.Sep 22 2022, 7:48 PM

Change 832002 abandoned by Jdlrobson:

[mediawiki/core@master] MediaWiki UI: Bring colors in line with latest Codex

Reason:

See https://gerrit.wikimedia.org/r/c/mediawiki/core/+/832328

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

Volker_E renamed this task from [Icons] Bring mw-ui-icon colors in line with Codex to [Icons] Bring mediawiki-ui-icon colors in line with Codex.Sep 23 2022, 7:53 AM
Volker_E updated the task description. (Show Details)
• alexhollender_WMF added a comment.Sep 26 2022, 5:25 PM

@Jdlrobson @Volker_E this is difficult to measure (it computes as rgba(0, 24, 73, 0.027), and I can't figure out how to convert that to HEX. When I take a screenshot and sample it I get #F9FAFB, which is off ever so slightly: #F9FAFB vs. #F9FAFA.

image.png (296×352 px, 9 KB)

Jdlrobson removed a project: Web-Team-Backlog (Kanbanana-2022-23-Q1).Sep 27 2022, 7:50 PM
Jdlrobson added a subscriber: NBaca-WMF.

@Volker_E @NHillard-WMF I'm moving this off the board as I think we're done here from the web team side, but could you also get an answer to Alex (and document it in the styleguide) so we have a better shared understanding of these slight differences before resolving this ticket?

Jdlrobson moved this task from Incoming to Visual Enhancements / Layout on the Desktop Improvements (Vector 2022) board.Sep 28 2022, 5:15 PM
Volker_E added a comment.Oct 5 2022, 8:09 AM
In T317800#8261722, @alexhollender_WMF wrote:

@Jdlrobson @Volker_E this is difficult to measure (it computes as rgba(0, 24, 73, 0.027), and I can't figure out how to convert that to HEX. When I take a screenshot and sample it I get #F9FAFB, which is off ever so slightly: #F9FAFB vs. #F9FAFA.

image.png (296×352 px, 9 KB)

Long story short: You can't rely on browsers for color perfection, due to their different rendering engines and slight vagueness in rounding up/down. Chrome gives me #f9fafa

image.png (1×1 px, 453 KB)
.

Jdlrobson closed this task as Resolved.Oct 5 2022, 7:23 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson removed a subtask: T319260: IP masking: Last modified bar: Minerva uses non-standard version of mw-ui-icon (Codex).Nov 23 2022, 4:08 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL