[Brand Updates] POS theme updates

[hichamboushaba]

Part of: woocommerce/woomobile-private#382

Description

This PR updates the POS theme colors to match the new brand, it introduces a new accent color that uses purple_40 in light theme and purple_30 in dark theme, and updates the different components to use it.

Note: If we are worried this update might break something, I'm fine with dropping it of the project.

Steps to reproduce

1. Use a tablet.
2. Open the More menu, and tap on "Point of Sale mode"
3. Check different screens on different themes.

Testing information

• Confirm the new colors matches the new brand.

Tested using iPad Air simulator, iOS 18.1

Screenshots

Before	After

---

• 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	pr14756-65b865c
	Version	21.2
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	65b865c
	App Center Build	WooCommerce - Prototype Builds #12281

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

[hichamboushaba]

For the regular app theme, the primary button uses purple_40 in all themes, this is to give a better contrast with the white text (more context here p1734705352565459/1727138732.960149-slack-C07E7D0R761), but for POS, I noticed the button text is black, so for now, it will use purple_30 in dark theme.

Was the usage of black text here a design decision or just a dev choice? Personally, I think white looks better and gives a better contrast, but that's just a thought.

Black	White

[hichamboushaba]

The POSSecondaryButtonStyle was referencing posPrimaryButtonBackground. When I first changed posPrimaryButtonBackground to use a single color for both themes, I added this property. However, I later modified the primary button background again (see the comment above), so this property isn't strictly necessary now. Still, in my opinion, retaining it could enhance clarity and help decouple the components. Let me know your thoughts.

[hichamboushaba]

I updated this to match the updated app accent, which is purple_40 in light theme and purple_30 in dark theme.
This matches the color we use in the last Figma playground files (rNAclWFAdQRw7EXEcsNVai-fi-2533_5542) where we are are using purple_40 on light theme.

[staskus]

Thanks, @hichamboushaba for the changes! We'll make sure we're aligned with the decisions before merging. Feel free to leave it for us to finish & merge.