feat(ras-acc): dynamically set otp email text color

[chickenn00dle]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

PR 2 of 4

This PR adds onto the work in #3032 by adjusting email text, button, and social icon color for the default email template to either white or black depending on background color:

Note: The changes only apply to the one time password email for the time being. Once that email is fully updated, I will get a PR up to update the remaining templates.

How to test the changes in this Pull Request:

1. Go to the WP Customizer and set a dark custom primary and secondary color
2. With these changes checked out, go to Newspack > Engagment > Show Advanced Settings and select the one-time password email under Transactional Email Content section
3. Trash the post (so that we can force our updated template to be used on next otp sign in attempt)
4. As a logged out user, select the sign in link and attempt to login via email to trigger an otp email
5. Check the otp email and confirm all of the text is properly contrasting
6. Repeat the above steps with light custom colors in customizer

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[adekbadek]

Two issues with the template file:

1. the $email_html is not updated along with the $post_content changes
2. there's a hard-coded OTP code with 895671 value (instead of a placeholder)

[chickenn00dle]

Thanks for the review @adekbadek!

the $email_html is not updated along with the $post_content changes

I've updated the email html and did some formatting to hopefully make parsing the email a bit easier.

there's a hard-coded OPT code with 895671 value (instead of a placeholder)

Good catch. Fixed in 6510cc3

I also made some additional changes to how we set colors in the default block in e574d6c and e4c8473. I realized the previous method would not allow the email template to update when theme colors were changed since the block colors were being explicitly set as hex values.

Unfortunately, it looks like we will not be able to use a dynamic approach for social icons without some changes in the newsletter plugin first since newsletters pretty strictly decides on a colorsheme for social icon images when generating the email html markup. (at least I wasn't able to find a straightforward way without having to make changes in newsletters)

So I've reverted the icons to use the default layout and colorscheme for the time being. I will try to address them in a follow-up PR once I've worked out all of the other design bits for emails:

[matticbot]

🎉 This PR is included in version 3.6.0-epic-ras-acc.8 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 3.9.0-epic-ras-acc.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 4.1.0-epic-ras-acc.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 4.2.0-epic-ras-acc.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 4.4.0-epic-ras-acc.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀