Page MenuHomePhabricator

Reduce and update colors in the Android app
Closed, ResolvedPublic

Description

Background

The amount of colors in the Android app has expanded over the past years. The introduction of theme guidelines has helped but has not solved the issues of a smooth design/engineering handover yet. In the meantime, the design system team efforts have been increased, and the work on Codex resulted in creating new color specifications and names.

Goals

  • More efficient design/development handoff. Using exact group names means “guess the color” is a thing of the past.
  • Align colors groups and specifications with Codex and iOS
  • Reduce the number of colors used in the app
  • Create a system to design for all themes on Figma efficiently

What has changed?

  • Color names and values
  • Color group names and values
  • Gradient, Overlay, and Shadow names and values

Instructions

  1. Create new color and style names based on Master/Color and Master/Style
  2. Create new color and style group names based on Master/Color and Master/Style
  3. Theme guidelines have been updated with a column: Map to. Map the old to the new color groups on Figma.
  4. Make sure to clean up legacy colors/styles. If you find colors in the code that have yet to be mapped to the new color groups, please try to map them to the best of your knowledge.
  5. Review the main screens of the app. If you see situations where colors/styles aren’t working, make adjustments based on the new color group set or take screenshots of the things that are not working.
  6. Move this task to design signoff for further review.

Notes

  • As this is a more significant undertaking, this will likely take a few rounds of design/engineering signoff; let’s embrace the journey.
  • Diff colors (addition/removal) might change in the upcoming weeks as there are some efforts to consolidate colors across platforms (see Slack or T90948)
  • The only colors that should be used in the code are listed on Master/Color
  • Master/System can be ignored, these are colors only used for design work outside the app/code.

APK: https://github.com/wikimedia/apps-android-wikipedia/pull/3871 (Working in progress)

Event Timeline

scblr renamed this task from Reduce and update colors used in the Android app to Reduce and update colors in the Android app.Feb 28 2023, 2:02 PM
scblr removed a project: Design.
LGoto triaged this task as Medium priority.Feb 28 2023, 5:22 PM
scblr removed scblr as the assignee of this task.Mar 6 2023, 9:36 AM

Hi @scblr

Here are the colors that have been used somewhere else in the app, would you please help me to define the replacements?

You can download the working-in-progress APK from the ticket description as well.

<color name="accent30">#2a4b8d</color>
 - Used in some button color states.

<color name="accent20">#223966</color>
 - Used in the image tags -> progress bar complete circle.

<color name="red90">#FFe7e6</color>
 - Used in suggested edits edit quality circle.

<color name="red50">#d33</color>
 - Used in suggested edits edit quality circle and diff text.

<color name="green90">#d5fdf4</color>
 - Used in suggested edits edit quality circle.

<color name="yellow90">#fef6e7</color>
 - Used in suggested edits edit quality circle.

<color name="find_in_page">#FFFF00</color>
 - Used in the find-in-page function.

<color name="find_in_page_active">#FF9632</color>
 - Used in the find-in-page function.

<color name="black54">#8A000000</color>
- Used in the reading list and news image header gradient color.

<color name="black38">#61000000</color>
- Used in the app navigation icon, gradient color, and some background color.

<color name="black26">#42000000</color>
- Used in the gallery toolbar gradient color and the theme fitting room "dim image" button disable state.

<color name="black12">#1F000000</color>
- Used in divider color (light theme).

<color name="white70">#B3ffffff</color>
- Used in some license icons (in the gallery or edit article description).

<color name="white50">#80ffffff</color>
 - Used in the app navigation icon (dark theme).

<color name="white20">#33ffffff</color>
- Used in divider color (dark theme).

<color name="white15">#26ffffff</color>
- Used in small tooltip button background.

Hey @cooltey - thanks for the list.

I haven’t checked out the APK yet, so take these suggestions/guesses below with a grain of salt.

Hope it helps to associate the right color groups.

<color name="accent30">#2a4b8d</color>
 - Used in some button color states.

progressive

<color name="accent20">#223966</color>
 - Used in the image tags -> progress bar complete circle.

progressive

<color name="red90">#FFe7e6</color>
 - Used in suggested edits edit quality circle.
  • Remove the fill color in the circle
  • We won’t need red90 anymore for now
  • Here’s the design on Figma without the fill (icon and circle stroke uses the success, warning and destructive color group, but no fill)
<color name="red50">#d33</color>
 - Used in suggested edits edit quality circle and diff text.

destructive

<color name="green90">#d5fdf4</color>
 - Used in suggested edits edit quality circle.
  • Remove the fill color in the circle
  • We won’t need green90 anymore for now
  • Here’s the design on Figma without the fill (icon and circle stroke uses the success, warning and destructive color group, but no fill)
<color name="yellow90">#fef6e7</color>
 - Used in suggested edits edit quality circle.
  • Remove the fill color in the circle
  • We won’t need yellow90 anymore for now
  • Here’s the design on Figma without the fill (icon and circle stroke use success, warning and destructive color group, but no fill)
<color name="find_in_page">#FFFF00</color>
 - Used in the find-in-page function.

highlight

<color name="find_in_page_active">#FF9632</color>
 - Used in the find-in-page function.

focus

<color name="black54">#8A000000</color>
- Used in the reading list and news image header gradient color.

overlay

<color name="black38">#61000000</color>
- Used in the app navigation icon, gradient color, and some background color.
  • This is e.g. used for the disabled state in the navigation, right?
  • If yes, use placeholder
<color name="black26">#42000000</color>
- Used in the gallery toolbar gradient color and the theme fitting room "dim image" button disable state.

overlay

<color name="black12">#1F000000</color>
- Used in divider color (light theme).

border

<color name="white70">#B3ffffff</color>
- Used in some license icons (in the gallery or edit article description).

placeholder

<color name="white50">#80ffffff</color>
 - Used in the app navigation icon (dark theme).

placeholder

<color name="white20">#33ffffff</color>
- Used in divider color (dark theme).

border

<color name="white15">#26ffffff</color>
- Used in small tooltip button background.

background

Thanks, @scblr.

The updates are almost completed and you are welcome to do the first round review of the colors, please download the APK from the ticket description to see the changes.

I have noticed the color looks weird in the Sepia theme 🤔

Two questions:

1. The last unchanged color group:

<item name="color_group_67">@color/red90</item>

Which has been used in the diff text, do you have any replacement for this color group? Thanks!

2. The circular progress bar in suggested edits.

Since there is no filling color in the circle, does that mean the circle will always be a full circle? (100% progress in ProgressBar)?

Thanks @cooltey 👍

The updates are almost completed and you are welcome to do the first round review of the colors, please download the APK from the ticket description to see the changes.

Ok thanks – will look into it later today or tomorrow.

I have noticed the color looks weird in the Sepia theme 🤔

Ok, I’ll keep an eye on that.

1. The last unchanged color group:

<item name="color_group_67">@color/red90</item>

Which has been used in the diff text, do you have any replacement for this color group? Thanks!

Yes, diff colors have been updated (and might soon change since we want to standardize them across projects).

Please use the highlight color group for now.

2. The circular progress bar in suggested edits.

Since there is no filling color in the circle, does that mean the circle will always be a full circle? (100% progress in ProgressBar)?

No, the circle still indicates the edit quality from 10%-100% with the stroke/border of the circle.

The circles continue to have a stroke/border in the color groups success, warning, and destructive. Just the fhe fill of the circle is removed or transparent. Or if you really need a fill for the circle you can set it to paper to match the card’s background color.

Thanks, @scblr

I have noticed the color looks weird in the Sepia theme 🤔

Ok, I’ll keep an eye on that.

👍

1. The last unchanged color group:

<item name="color_group_67">@color/red90</item>

Which has been used in the diff text, do you have any replacement for this color group? Thanks!

Yes, diff colors have been updated (and might soon change since we want to standardize them across projects).

Please use the highlight color group for now.

Done.

2. The circular progress bar in suggested edits.

Since there is no filling color in the circle, does that mean the circle will always be a full circle? (100% progress in ProgressBar)?

No, the circle still indicates the edit quality from 10%-100% with the stroke/border of the circle.

The circles continue to have a stroke/border in the color groups success, warning, and destructive. Just the fhe fill of the circle is removed or transparent. Or if you really need a fill for the circle you can set it to paper to match the card’s background color.

Got it and updated it!

@cooltey looks good so far. I think items have the wrong color group assigned yet. As a reference, I designed the main screen in the apps in the new color groups:

https://www.figma.com/file/RnkoK5dDw3lCOEUooZS4jB/Android-App-Library?node-id=1651%3A1468

You can check out the color groups by clicking (or cmd clicking) an element:

CleanShot 2023-03-14 at 10.42.31@2x.png (2×3 px, 1 MB)

Make sure that the placeholder color group has the right colors:

CleanShot 2023-03-14 at 11.22.46@2x.png (398×2 px, 56 KB)


To make your life a little easier (🙃) here are a few things that I spotted right away:

1)

Screenshot_20230314-102951.png (2×1 px, 245 KB)

button-text: progressive
button-background: background

2)

Screenshot_20230314-103137.png (2×1 px, 236 KB)

back-icon: primary (see T330879, all icons in the app bar use primary)
text-input-cursor: placeholder
text-input-bottom-line: placeholder
text-input-icon: placeholder

For more details, see text input specs on Figma

3)

Screenshot_20230314-103234.png (2×1 px, 254 KB)

app-bar-icon-right: primary (see T330879, all icons in the app bar use primary)
suggested-edits-task-icon: progressive (100% opacity)

4) Again, all text and icons in the app bar use primary (T330879)

Screenshot_20230314-103334.png (2×1 px, 224 KB)

5)

Screenshot_20230314-103421.png (2×1 px, 500 KB)

bell-icon: primary (see T330879, all icons in the app bar use primary)
magnifying-glass-icon: placeholder
microphone-icon: placeholder
got-it-button-text: secondary (see button definitions in T331450)
explore-feed-header-icons: primary (for all icons used in the header section of the explore feed)
more-text-color: placeholder (see T330804)

6)

Screenshot_20230314-103512.png (2×1 px, 515 KB)

navigation-background-color: paper (see T330804)

7)

Screenshot_20230314-103542.png (2×1 px, 483 KB)

reading-list-header icons: primary
reading-list-description/date: secondary

8)

Screenshot_20230314-103557.png (2×1 px, 310 KB)

app-bar-icons: primary
icons-next-to-history: primary
all-search-bar-icons: placeholder
date-header: primary (and type style h4, see T330753)

9)

Screenshot_20230314-103906.png (2×1 px, 146 KB)

app-bar-icons: primary (as usual)
your-languages-text: primary (and type style h4, see T330753)
list-number-icons: placeholder
list-drag-icons: placeholder
add-language-icon: progressive

10)

Screenshot_20230314-103842.png (2×1 px, 268 KB)

byte-added-indicator: success (the color used on the screenshot is green600 instead of green700 for light and sepia theme. green600 is only used in the dark/black theme, see Figma)

Screenshot_20230314-103821 copy.png (2×1 px, 306 KB)

app-bar-icons: primary (as usual)
search-bar-icons: placeholder (as usual)
more-icons-unread: primary

Screenshot_20230314-103821.png (2×1 px, 263 KB)

Do you use opacity for the read state? If possible, use the inactive color group for text and icons in read state.

13)

CleanShot 2023-03-14 at 11.21.16@2x.png (1×1 px, 241 KB)

reply-icon, reply-number and date use: placeholder

14)

Screenshot_20230314-103708.png (2×1 px, 334 KB)

app-bar-icons: primary (as usual)
tab-active-border-bottom: progressive
tab-inactive-text: placeholder
tan-inactive-border-bottom: placeholder
all-search-bar-icons: placeholder (as usual)
search-bar-text: secondary (as usual)

Do you use opacity for the read state? If possible, use the inactive color group for text and icons in read state (same style as for talk page read).

15)

Screenshot_20230314-112747.png (2×1 px, 283 KB)

more-icon-unread + date-unread: primary

16) Make sure to apply the new shadow definitions. E.g. there’s no shadow (only a border) in the dark and black theme:

{F36912495}

Hi @scblr

Every item you have mentioned has been addressed. Please download the latest APK from the ticket description, thanks!

Hey @cooltey – I think we almost have it! Only a few things left to tune:

1) Use the inactive color group for the bottom-border in the "default" and "filled" states. My bad; I was unclear before.

Screenshot_20230320-160110 copy.png (2×1 px, 173 KB)

2) When an input field is in the active state, it uses the progressivecolor group for border-bottom

Screenshot_20230320-141937.png (2×1 px, 149 KB)

3) In addition to the border-bottom: input fields have a 0.5dp border-top/left/right in the `border-color group

ImplementationvsDesign (Figma)
Screenshot_20230320-155156.png (2×1 px, 266 KB)
CleanShot 2023-03-20 at 15.53.13@2x.png (2×2 px, 143 KB)

3) Can you update the color groups in this illustration as a test? I created it, so it works in all themes:

Screenshot_20230320-143814 copy.png (2×1 px, 404 KB)

4) Use placeholder color group for secondary text buttons (see T331450)

Screenshot_20230320-160922.png (2×1 px, 291 KB)
Screenshot_20230320-160932.png (2×1 px, 161 KB)

5) Use success color group here:

Screenshot_20230320-161534.png (2×1 px, 459 KB)

6) Use 0.5dp borders for lists like this and border color group here:

Screenshot_20230320-161920.png (2×1 px, 171 KB)

7) border color group does not translate correctly into all themes yet. E.g.

  • Sepia uses the same value as in light theme (#EAECF0) for the search field, but it should use #E1DAD1.
    Screenshot_20230320-162517.png (2×1 px, 210 KB)
  • Same goes for all card borders
    Screenshot_20230320-162517.png (2×1 px, 210 KB)

Please make sure to use the correct values for the border group:

CleanShot 2023-03-20 at 16.24.17@2x.png (858×3 px, 126 KB)

8) Remove shadows from all cards in dark theme and use 0.5 dp border in border color group (Figma)

Screenshot_20230320-162749.png (2×1 px, 223 KB)

Hey @cooltey – I think we almost have it! Only a few things left to tune:

1) Use the inactive color group for the bottom-border in the "default" and "filled" states. My bad; I was unclear before.

Done.

2) When an input field is in the active state, it uses the progressivecolor group for border-bottom

Done.

3) In addition to the border-bottom: input fields have a 0.5dp border-top/left/right in the `border-color group

Looks like the input field component is not able to adjust or add a border to it.

3) Can you update the color groups in this illustration as a test? I created it, so it works in all themes:

Screenshot_20230320-143814 copy.png (2×1 px, 404 KB)

I tried to apply tint color to the illustration (new imported) and here is how it goes:

Screenshot_20230320-164452_Wikipedia Dev.jpg (2×1 px, 78 KB)

4) Use placeholder color group for secondary text buttons (see T331450)

Screenshot_20230320-160922.png (2×1 px, 291 KB)
Screenshot_20230320-160932.png (2×1 px, 161 KB)

Done. (It was the placeholder color group already)

5) Use success color group here:

Screenshot_20230320-161534.png (2×1 px, 459 KB)

Done.

6) Use 0.5dp borders for lists like this and border color group here:

Screenshot_20230320-161920.png (2×1 px, 171 KB)

Done.

7) border color group does not translate correctly into all themes yet. E.g.

  • Sepia uses the same value as in light theme (#EAECF0) for the search field, but it should use #E1DAD1.
    Screenshot_20230320-162517.png (2×1 px, 210 KB)
  • Same goes for all card borders
    Screenshot_20230320-162517.png (2×1 px, 210 KB)

Please make sure to use the correct values for the border group:

CleanShot 2023-03-20 at 16.24.17@2x.png (858×3 px, 126 KB)

8) Remove shadows from all cards in dark theme and use 0.5 dp border in border color group (Figma)

Screenshot_20230320-162749.png (2×1 px, 223 KB)

Looks like 7) and 8) are not feasible because the com.google.android.material.card.MaterialCardView only allows to set the elevation (shadow) but no color to it.

I checked the library XML, and the shadow colors are not customizable and the values are private usage for the library itself only.

<color name="cardview_shadow_end_color">#03000000</color>
<color name="cardview_shadow_start_color">#37000000</color>

@cooltey and I just had a call, and this is what we discussed:

Future sprint

  • We tackle illustrations and their corresponding color groups in a later design sprint. @cooltey is still going to talk to Dmitry about adding colors directly to the illustration since illustrations are different from icons (icons: can have any color in a particular theme/illustrations always have the same color in a particular theme)
  • We will also investigate the request of having no shadows for the dark and black theme in a future sprint, see the described issue 👇

8) Remove shadows from all cards in dark theme and use 0.5 dp border in border color group (Figma)

Screenshot_20230320-162749.png (2×1 px, 223 KB)

In this sprint:

  • @cooltey will investigate the search field border color that does not adapt its value in the different themes. It is used in Explore (example below), Search (example below), Notifications, Contributions, Talk, Watchlist, and Revision history. It should use the border color group.
Screenshot_20230321-195100.png (2×1 px, 552 KB)
Screenshot_20230321-195048.png (2×1 px, 145 KB)
  • As a bonus, @cooltey will check if this described issue:

7) border color group does not translate correctly into all themes yet. E.g.

  • Sepia uses the same value as in light theme (#EAECF0) for the search field, but it should use #E1DAD1.
    Screenshot_20230320-162517.png (2×1 px, 210 KB)
  • Same goes for all card borders
    Screenshot_20230320-162517.png (2×1 px, 210 KB)

Please make sure to use the correct values for the border group:

CleanShot 2023-03-20 at 16.24.17@2x.png (858×3 px, 126 KB)

... is related to the search field border color issue.


Thanks for addressing all other issues in T330645#8712411, the changes look good!

Hi @scblr

After digging into the code, I noticed that we have a custom card view and it applies all kinds of custom values to border colors and elevation.

Now it has been updated and now it should be aligned with the design.

Screenshot_20230321-144328_Wikipedia Dev.jpg (2×1 px, 87 KB)
Screenshot_20230321-144323_Wikipedia Dev.jpg (2×1 px, 103 KB)
Screenshot_20230321-144313_Wikipedia Dev.jpg (2×1 px, 88 KB)
Screenshot_20230321-144306_Wikipedia Dev.jpg (2×1 px, 106 KB)

@cooltey = 🤴

It’s ALMOST ready for code signoff. While browsing – I noticed these two last issues:

1) Some elements in the bottom sheet of the article don’t use progressive color group in dark and black mode. It’s some kind of default Android green?

Screenshot_20230322-111826.png (2×1 px, 289 KB)

2) The article view’s background color uses the wrong color group in dark mode only (#2E3136 instead of #212121). Can you set it to paper color group? Thanks!

Screenshot_20230322-112513.png (2×1 px, 872 KB)

That’s it, thanks a lot!

@cooltey = 🤴

It’s ALMOST ready for code signoff. While browsing – I noticed these two last issues:

1) Some elements in the bottom sheet of the article don’t use progressive color group in dark and black mode. It’s some kind of default Android green?

Done

Screenshot_20230322-111826.png (2×1 px, 289 KB)

2) The article view’s background color uses the wrong color group in dark mode only (#2E3136 instead of #212121). Can you set it to paper color group? Thanks!

Screenshot_20230322-112513.png (2×1 px, 872 KB)

That’s it, thanks a lot!

I have created a ticket T332823 to update the background color in mobile-html since this setting is under the mobile-html.

Please download the latest APK from the ticket description to see the changes, thanks!

Thanks @cooltey – I think this is ready to be reviewed by the other engineers.

@ABorbaWMF as this change affects the entire app in all themes, please look out for accessibility issues like insufficient color contrast ratios. Also just in general check the app to see if all looks good. Cooltey and I did several rounds of review, but even then, we probably did not catch them all.

Dbrant subscribed.

Note for QA: this task can be tested by simply navigating through a good fraction of screens throughout the app (in light and dark themes) and verifying that the colors don't look broken.