[Woo POS] [Design System] Apply straightforward color updates

[jaclync]

Part of #15061

⚠️ Currently based on #15063, only review this PR if the base PR has been approved without pending changes

• ⚠️ Merge conflicts with trunk on previews from environment object, will address these when the base PR is merged

Description

This PR applies a few straightforward color updates to replace the previous POS color usage so that a few previous POS colors can be removed. The remaining colors will be replaced when components are created/updated:

• posCartItemOutline - will be removed when the item/product card design is implemented in [Woo POS][Design System] Update product card design #15072
• posPrimaryButtonBackground, posSecondaryButtonForeground, posTextButtonForeground, posTextButtonForegroundPressed, posTextButtonDisabled, posBackgroundButtonDisabled will be removed when button component is implemented in [Woo POS][Design System] Create/adjust components for buttons #15067
• posDarkGray - will be removed when the disabled floating control design is ready and implemented in [Woo POS][Design System] Create/update floating control component #15070

Color Scheme Updates:

• Renamed 3 text color properties in Color+POSColorPalette.swift to replace the previous corresponding text colors:

  • posTextPrimary to posPrimaryText
  • posTextSecondary to posSecondaryText
  • posTextTertiary to posTertiaryText

• Updated color references in CardReaderConnectionStatusView.swift:

  • Changed Color(.wooCommerceEmerald(.shade40)) to Color.posSuccess for circle icons
  • Changed Color(.wooCommercePurple(.shade60)) to .posPrimaryText for disconnected font color

Background Color Updates:

• Updated background colors in various views to use new color constants based on design:
  • Changed Color.posPrimaryBackground to Color.posSurface in PointOfSaleCardPresentPaymentFoundMultipleReadersView.swift
  • Changed Color.posSecondaryBackground to Constants.backgroundColor in multiple views including ItemListErrorCardView.swift, ParentProductCardView.swift, SimpleProductCardView.swift, and VariationCardView.swift [1] [2] [3] [4]

Other Changes:

• Added a new backgroundColor constant in PointOfSaleItemListCardConstants.swift to centralize background color usage
• Updated foreground colors for text and icons to use new color constants in ItemListView.swift and ItemRowView.swift [1] [2] [3]

Steps to reproduce

The color changes are quite scattered (I could make smaller PRs for each smaller part, but I thought it's more efficient to change a bunch with reasonable diffs so that the reviewer(s) don't have to test it many times.

I'd suggest testing the PR by launching POS, adding some product/variation(s) to cart, checking out, paying with a card & cash, emailing receipt, and starting a new order. Other things to test:

• Tap on the products banner or notice
• Tap on the floating control at the bottom
• Connect/disconnect reaader

Testing information

Screenshots

Simulator.Screen.Recording.-.iPad.Pro.11-inch.M4.-.2025-02-06.at.16.31.41.mp4

Simulator.Screen.Recording.-.iPad.Pro.11-inch.M4.-.2025-02-06.at.16.33.10.mp4

---

• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

Reviewer (or Author, in the case of optional code reviews):

Please make sure these conditions are met before approving the PR, or request changes if the PR needs improvement:

• The PR is small and has a clear, single focus, or a valid explanation is provided in the description. If needed, please request to split it into smaller PRs.
• Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
• Manual Testing: The author listed all the tests they ran, including smoke tests when needed (e.g., for refactorings). The reviewer confirmed that the PR works as expected on all devices (phone/tablet) and no regressions are added.

[wpmobilebot]

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

	App Name	WooCommerce iOS
	Build Number	pr15068-b2529ec
	Version	21.6
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	b2529ec
	App Center Build	WooCommerce - Prototype Builds #12826

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

[jaclync]

@iamgabrielma @joshheald @staskus 👋 If you think the PR should be merged to a feature branch, please let me know. I personally prefer merging to trunk so that we can catch any unexpected issues earlier with more devs working on other parts of the app and we won't end up with a giant PR. Additionally, there are 0/few production usage of POS and I think it's safe to apply design changes incrementally as long as the PRs don't introduce UI/UX issues. However, if you have concerns over shipping it (I will also only merge this PR after the release 21.7 code freeze is cut), I'm happy to create a feature branch and merge this PR to it.

[iamgabrielma]

These looks good! I haven't seen anything off while testing the normal cash/card/receipt flows, agree that we should make these in trunk rather than feature branch, so it's easier to catch if there's something off either with the colours or design-wise.

🚢

[iamgabrielma]

nit: 👀 was this a SwiftUI import maybe?