@Tsevener or @Dmantena would you mind helping me track down where some of the elements from this page show up in the app? or do you know a way I can investigate myself? Thanks for your help!

• popoverBackground
• animationBackground
• tertiaryText
• cardBackground
• selectedCardBackground
• blurEffectStyle
• distanceBorder
• descriptionBackground
• inputAccessoryBackground
• inputAccessoryButtonTint
• depthMarker
• overlayText

EDIT: also curious about secondaryAction

In T299793#7869142, @cmadeo wrote:

@Tsevener or @Dmantena would you mind helping me track down where some of the elements from this page show up in the app? or do you know a way I can investigate myself? Thanks for your help!

• popoverBackground
• animationBackground
• tertiaryText
• cardBackground
• selectedCardBackground
• blurEffectStyle
• distanceBorder
• descriptionBackground
• inputAccessoryBackground
• inputAccessoryButtonTint
• depthMarker
• overlayText

EDIT: also curious about secondaryAction

@cmadeo The most straightforward way would be to use project search, either in Xcode or just on the web with Github. Generally, searching for one of these theme attributes surfaces the file name and UI element it's used within, so it should be fairly clear how it's being used in the app but if a particular one isn't clear let us know.

On Github:

• Go to https://github.com/wikimedia/wikipedia-ios
• In the top left search box, paste in the theme element name (e.g. animationBackground) and tap enter. It should search for and return all instances of it within the iOS repository, indicating the file and UI element it's used in
• Alternatively, just paste this link into a browser and replace the last query string with the theme element name: https://github.com/wikimedia/wikipedia-ios/search?q=themeElementYouWantToSearchFor

With Xcode:

• Open the project in Xcode
• In the Xcode menu bar, tap Find > Find in Project
• Enter the theme element name in the selected search box, and in the sidebar all the uses of it will be displayed. Tap one you're interested in.
• You can even change the color here (to say UIColor.red if it's a Swift file or [UIColor redColor] if it's an Objective-C file) and run it in the Simulator if it's not entirely clear by name what it's being used for.

Hope this helps.

Hi @cmadeo! Thanks for breaking this down into a list of colors and placements that need to be changed, that's very helpful! We had a question from engineering sync. I was hoping we'd be able to delete some colors that we no longer need - are the colors listed here under changes and the "Proposed designs" screenshot considered an exhaustive list? We just wanted to make sure we were referencing the correct thing before attempting to delete colors in Theme.swift.

Talk page engineering work needing updates after this work is implemented:

• Coffee roll container background color
• Talk page view background color

Currently, they are using special case values.

In T299793#8089210, @Tsevener wrote:

Hi @cmadeo! Thanks for breaking this down into a list of colors and placements that need to be changed, that's very helpful! We had a question from engineering sync. I was hoping we'd be able to delete some colors that we no longer need - are the colors listed here under changes and the "Proposed designs" screenshot considered an exhaustive list? We just wanted to make sure we were referencing the correct thing before attempting to delete colors in Theme.swift.

Oh gosh, Toni I'm sorry I missed this! We should be good to delete any colors that are not shown in the screenshot.

In T299793#8236964, @Dmantena wrote:

Talk page engineering work needing updates after this work is implemented:

• Coffee roll container background color
• Talk page view background color

Currently, they are using special case values.

Noted, @OTichonova and I can update the Figma file / this ticket :)

@cmadeo @OTichonova Hi y'all -

I'm taking another look at this stuff, and had a question for you. As I understand it, the ask is to update the color names, delete any colors no longer used, and change which colors our semantic names (diffStrikethroughColor, etc) point to.

While we're here, would it be possible to reduce the number of semantic names we have? These are the ones we currently have named things like baseBackground, cardBorder, depthMarker, diffHighlightAdd, diffStrikethroughColor, etc. We spin up a new one for each unique combination of theme colors , and often they seem hyper-specific to the feature, which feels incorrect.

I currently can count about 65 semantic names that we have in Theme.swift. Your Proposed Designs screenshot has 13 (using the row names a semantic names). I'm not sure how to go about this, but if we could finish this task by reducing those semantic names in Theme.swift down to your 13, that would be great.

Let me know what you think. If you agree, I think what we would need from y'all in that case is which of the 13 semantic names an old semantic name should be instead, like:

Requirement:
Delete diffMoveParagraphBackground semantic name, and use Mid-background from Proposed designs screenshot instead in its place

Execution:
We would delete diffMoveParagraphBackground from Theme.swift, and change this line to shadedBackgroundView.backgroundColor = theme.colors.midBackground.

(diffMoveParagraphBackground is only used once throughout the whole app, so it is an excellent candidate for deleting).

@OTichonova could we have another name for the new colors named orange and purple? As there are iOS system colors with the same names, it can get a little confusing.

Sorry to jump in! @Mazevedo we could call these colors: color-orange and color-purple (sorry I should have put these in the table instead to match Codex). Alternatively we could use color-orange-600 / color-purple-600 or orange600/purple600

App PR - https://github.com/wikimedia/wikipedia-ios/pull/4482
Components PR - https://github.com/wikimedia/wikipedia-ios-components/pull/4

In T299793#8654577, @cmadeo wrote:

Sorry to jump in! @Mazevedo we could call these colors: color-orange and color-purple (sorry I should have put these in the table instead to match Codex). Alternatively we could use color-orange-600 / color-purple-600 or orange600/purple600

Thanks Carolyn!

Hi @OTichonova and @cmadeo 👋 We have an Experimental build with this color update - Wikipedia Experimental 7.2.0 (2) from last Friday, March 03. A lot of stuff changed, so feel free to bring up anything that looks off. Let me know if you can't find this version, and I'll create a new build.

Thank you so much @Mazevedo! I'll start reviewing tomorrow!

@Mazevedo so sorry for the delay, I've put together this spreadsheet with some tweaks: https://docs.google.com/spreadsheets/d/15h96GgzhPEA6Hv6SxPfKeE_AINtimNZD4C1mIgkm64s/edit?usp=sharing

Hi @cmadeo! I got a new build with the updates from design feedback -Wikipedia Experimental 7.3.0 (15). Let me know if there's something else I can update! (CC @OTichonova in case she wants to check as well)

Hi @Mazevedo so sorry for the delay! The updates are looking great. The one outstanding update would be to utilize 'base background' instead of 'mid background' on default and sepia for filled button backgrounds (please see the spreadsheet for more details)

Hi @cmadeo! Thanks for reviewing it. Let me know if this is how the button backgrounds should look like (here using 'base background')

@Mazevedo perfection, thank you!

@Mazevedo, @Dmantena + @Tsevener:

@cmadeo design has already tested this quite a bit, but assigning to you in case you want one final look (in TestFlight 7.3.0). I don't think we need @ABorbaWMF to look at this explicitly since we only changed colors, but feel free to assign him if you think we should.