[Design System] Update color values to match Figma

[alpavanoglu]

Refs #p1702909565644119/1702665510.828399-slack-C04TXQU42HM
Figma File: LyzJJa6ANKToUswWmRrZee-fi-102_186

Testing Steps:

1. Install and login Jetpack
2. Navigate to "Design System" and check if Secondary, Tertiary and Quaternary background color values match the designs on both themes.
3. Make sure "Divider" color is removed from Color.xcassets in Design System Module

Regression Notes

1. Potential unintended areas of impact
   The callsites for the changed values.

2. What I did to test those areas of impact (or what existing automated tests I relied on)
   Manually tested them.

3. What automated tests I added (or what prevented me from doing so)

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding unit tests for my changes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

UI Changes testing checklist:

• Portrait and landscape orientations.
• Light and dark modes.
• Fonts: Larger, smaller and bold text.
• High contrast.
• VoiceOver.
• Languages with large words or with letters/accents not frequently used in English.
• Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
• iPhone and iPad.
• Multi-tasking: Split view and Slide over. (iPad)

[dangermattic]

	1 Warning
⚠️	View files have been modified, but no screenshot is included in the pull request. Consider adding some for clarity.

Generated by 🚫 Danger

[wpmobilebot]

📲 You can test the changes from this Pull Request in WordPress Alpha by scanning the QR code below to install the corresponding build.

	App Name	WordPress Alpha
	Configuration	Release-Alpha
	Build Number	pr22402-1afcf93
	Version	24.0
	Bundle ID	org.wordpress.alpha
	Commit	1afcf93
	App Center Build	WPiOS - One-Offs #8652

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[wpmobilebot]

📲 You can test the changes from this Pull Request in Jetpack Alpha by scanning the QR code below to install the corresponding build.

	App Name	Jetpack Alpha
	Configuration	Release-Alpha
	Build Number	pr22402-1afcf93
	Version	24.0
	Bundle ID	com.jetpack.alpha
	Commit	1afcf93
	App Center Build	jetpack-installable-builds #7680

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[mokagio]

I'm going to bump this to the next release because we'll be code freezing 24.1 today and this hasn't been reviewed yet.

If these changes cannot wait two weeks and it's important that it makes it into this release, let me know and we'll organize a new beta once ready.

[salimbraksa]

nit: it would be great to keep this property for convenience, similar to UIColor.separator.

public static var divider: Color {
   return Background.tertiary
}

[alpavanoglu]

Hmm. Do you mean to keep this but use the background tertiary as its value? I am not sure about it. Reason being is that on Figma design will mention Background.tertiary and most likely the developer will use that value. If we use another naming even for convenience, that could break the sync between platforms. After all the whole point is that the names on Android, iOS and Figma to fully match. Wdyt?

[salimbraksa]

Hey @alpavanoglu -- the hex value of background tertiary is just #C2. Maybe that's a typo?

[alpavanoglu]

Hey @alpavanoglu -- the hex value of background tertiary is just #C2. Maybe that's a typo?

I feel like this has happened before. I think when it is a repeating hex value like #C2C2C2, it shortens the value automatically. I'll look into it again. Idk if it intentional by Xcode or not. Maybe I mis-remember it. In any case the value should show on the gallery.

[salimbraksa]

I feel like this has happened before. I think when it is a repeating hex value like #C2C2C2

Yes I guess so, not sure if Xcode supports that behavior. However, on Figma, the hex value is #C2C2C6

[peril-wordpress-mobile]

	Warnings
⚠️	This PR is assigned to a milestone which is closing in less than 4 days Please, make sure to get it merged by then or assign it to a later expiring milestone

Generated by 🚫 dangerJS

[mokagio]

I'm going to bump this to the next release because we'll be code freezing 24.2 today and this hasn't been reviewed yet.

If these changes cannot wait two weeks and it's important that it makes it into this release, let me know and we'll organize a new beta once ready.

[salimbraksa]

LGTM! 🚀