Change Details

**Background** The amount of colors in the Android app has expanded over the past years. The introduction of [theme guidelines](https://www.mediawiki.org/wiki/Wikimedia_Apps/Android_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](https://doc.wikimedia.org/codex/main/design-tokens/color.html) 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](https://doc.wikimedia.org/codex/main/design-tokens/color.html) and [iOS](https://www.figma.com/file/bgDCK2F4Km6nJvgKzDyl5J/iOS-Component-Audit?t=PqzGxhlvyaWJSOYn-6) - 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** | {F36886954} | [[ https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=0%3A1 | Figma ]] 1. Create new color and style names based on [Master/Color](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=101%3A106&t=sNGtxdu87YYOqJmv-4) and [Master/Style](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=214%3A204&t=sNGtxdu87YYOqJmv-4) 2. Create new color and style **group** names based on [Master/Color](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=101%3A106&t=sNGtxdu87YYOqJmv-4) and [Master/Style](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=214%3A204&t=sNGtxdu87YYOqJmv-4) 3. [Theme guidelines](https://www.mediawiki.org/wiki/Wikimedia_Apps/Android_theme_guidelines) have been updated with a column: **Map to**. Map the old to the new color groups on [Figma](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=101%3A106&t=TLgzJ5nxUtR7jZFw-4). 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. 4. 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. 5. 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](https://wikimedia.slack.com/archives/C03DKGSEPL2/p1677083846710499) or T90948) - The only colors that should be used in the code are listed on [Master/Color](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=101%3A106&t=sNGtxdu87YYOqJmv-4) - [Master/System](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=214%3A62&t=sNGtxdu87YYOqJmv-4) can be ignored, these are colors only used for design work outside the app/code.

**Background** The amount of colors in the Android app has expanded over the past years. The introduction of [theme guidelines](https://www.mediawiki.org/wiki/Wikimedia_Apps/Android_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](https://doc.wikimedia.org/codex/main/design-tokens/color.html) 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](https://doc.wikimedia.org/codex/main/design-tokens/color.html) and [iOS](https://www.figma.com/file/bgDCK2F4Km6nJvgKzDyl5J/iOS-Component-Audit?t=PqzGxhlvyaWJSOYn-6) - 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** | {F36886954} | [[ https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=0%3A1 | Figma ]] 1. Create new color and style names based on [Master/Color](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=101%3A106&t=sNGtxdu87YYOqJmv-4) and [Master/Style](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=214%3A204&t=sNGtxdu87YYOqJmv-4) 2. Create new color and style **group** names based on [Master/Color](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=101%3A106&t=sNGtxdu87YYOqJmv-4) and [Master/Style](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=214%3A204&t=sNGtxdu87YYOqJmv-4) 3. [Theme guidelines](https://www.mediawiki.org/wiki/Wikimedia_Apps/Android_theme_guidelines) have been updated with a column: **Map to**. Map the old to the new color groups on [Figma](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=101%3A106&t=TLgzJ5nxUtR7jZFw-4). 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. 4. 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. 5. 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](https://wikimedia.slack.com/archives/C03DKGSEPL2/p1677083846710499) or T90948) - The only colors that should be used in the code are listed on [Master/Color](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=101%3A106&t=sNGtxdu87YYOqJmv-4) - [Master/System](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=214%3A62&t=sNGtxdu87YYOqJmv-4) 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)

**Background** The amount of colors in the Android app has expanded over the past years. The introduction of [theme guidelines](https://www.mediawiki.org/wiki/Wikimedia_Apps/Android_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](https://doc.wikimedia.org/codex/main/design-tokens/color.html) 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](https://doc.wikimedia.org/codex/main/design-tokens/color.html) and [iOS](https://www.figma.com/file/bgDCK2F4Km6nJvgKzDyl5J/iOS-Component-Audit?t=PqzGxhlvyaWJSOYn-6) - 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** | {F36886954} | [[ https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=0%3A1 | Figma ]] 1. Create new color and style names based on [Master/Color](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=101%3A106&t=sNGtxdu87YYOqJmv-4) and [Master/Style](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=214%3A204&t=sNGtxdu87YYOqJmv-4) 2. Create new color and style **group** names based on [Master/Color](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=101%3A106&t=sNGtxdu87YYOqJmv-4) and [Master/Style](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=214%3A204&t=sNGtxdu87YYOqJmv-4) 3. [Theme guidelines](https://www.mediawiki.org/wiki/Wikimedia_Apps/Android_theme_guidelines) have been updated with a column: **Map to**. Map the old to the new color groups on [Figma](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=101%3A106&t=TLgzJ5nxUtR7jZFw-4). 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. 4. 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. 5. 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](https://wikimedia.slack.com/archives/C03DKGSEPL2/p1677083846710499) or T90948) - The only colors that should be used in the code are listed on [Master/Color](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=101%3A106&t=sNGtxdu87YYOqJmv-4) - [Master/System](https://www.figma.com/file/BfCOChPCWprYX66icOQ18w/Theme---Master?node-id=214%3A62&t=sNGtxdu87YYOqJmv-4) 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)