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
- Create new color and style names based on Master/Color and Master/Style
- Create new color and style group names based on Master/Color and Master/Style
- Theme guidelines have been updated with a column: Map to. Map the old to the new color groups on Figma.
- 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.
- 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.
- 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)