Page MenuHomePhabricator

Consolidate color resources and styles throughout the app.
Closed, ResolvedPublic5 Estimated Story Points

Description

Our colors.xml file contains about 100 separate color values! We should consolidate these and use them more consistently throughout the app, with the goal of:

  • Better adhering to the Wikipedia brand and our standardized UX guidelines.
  • Better adhering to Android guidelines of using theme styles with "primary" and "secondary" colors, etc.
  • For future features, know exactly which colors to use for which components, without requiring additional design input.

Colors updated to adhere with current palette https://phabricator.wikimedia.org/M82 – plus new dark mode additions

NOTE: See parent task T172984 for the full color dark and light scheme.

Event Timeline

@Dbrant, @MBinder_WMF, I recommend this task be moved to product backlog. The true aim of this task is to choose a palette which will have a prominent user facing effect. This happens to be easier to do by consolidating the existing colors which is the chore portion.

Change 306008 had a related patch set uploaded (by Dbrant):
Introduce Foundation colors, and consolidate non-grays.

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

Change 306008 merged by jenkins-bot:
Introduce Foundation colors, and consolidate non-grays.

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

Change 335458 had a related patch set uploaded (by Niedzielski):
Update: palette

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

@Dbrant @Niedzielski – fyi I updated the file to reflect some refinements to hex codes and the naming scheme that were made to the color palette after this ticket was initiated:
{F5454490}

Most notably the coding of colors were reversed so for example B0 is now black, and B100 is white.

@RHo is the blue accent correct? I thought it should be accent-color-90 not 70. Just to double check, I should update red 90 from #fee7e6 to #ffe7e6? I had yellow 90 and yellow 30 swapped so that will be fixed

derp, sorry @Niedzielski – you are correct on both counts, it should be accent-color-90 not 70, and red 90 is actually #FEE7E6 following the related ticket.
Updated again:

Change 335718 had a related patch set uploaded (by Niedzielski):
Fix: swap yellow90 and yellow30

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

Change 335718 merged by jenkins-bot:
Fix: swap yellow90 and yellow30

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