diff --git a/includes/templates/reader-activation-emails/otp.php b/includes/templates/reader-activation-emails/otp.php index 5c58ad37b6..40eb15cb07 100644 --- a/includes/templates/reader-activation-emails/otp.php +++ b/includes/templates/reader-activation-emails/otp.php @@ -9,56 +9,63 @@ // phpcs:disable WordPressVIPMinimum.Security.Mustache.OutputNotation -[ 'primary_color' => $primary_color, 'secondary_color' => $secondary_color ] = newspack_get_theme_colors(); -[ 'block_markup' => $social_links, 'html_markup' => $social_links_html ] = newspack_get_social_markup(); - -$post_content = ' - -
+[ + 'primary_color' => $primary_color, + 'primary_text_color' => $primary_text_color, + 'secondary_color' => $secondary_color, + 'secondary_text_color' => $secondary_text_color, +] = newspack_get_theme_colors(); + +[ + 'block_markup' => $social_links, + 'html_markup' => $social_links_html +] = newspack_get_social_markup( $primary_text_color ); + +$post_content = + // Main body. + ' +

' . __( 'Sign in', 'newspack' ) . '

-

' . __( 'Use the following code to login to your account:', 'newspack' ) . '

-

*MAGIC_LINK_OTP*

-

' . __( 'You can also log into your account by clicking the following button:', 'newspack' ) . '

- -
-
' . sprintf( /* Translators: s: site title. */ __( 'Continue to %s', 'newspack' ), '*SITE_TITLE*' ) . '
+
+
Continue to *SITE_TITLE*
-

' . __( 'Or copy and paste the link in your browser:', 'newspack' ) . ' *MAGIC_LINK_URL*

-

' . __( 'If you did not request this code, please ignore this email.', 'newspack' ) . '

- + ' . - -
-
    ' . $social_links . '
+ // Footer. + ' +
+ +
    ' . $social_links . '
-

' . sprintf( /* Translators: 1: site title 2: site base address. */ __( '%1$s - %2$s', 'newspack' ), '*SITE_TITLE*', '*SITE_ADDRESS*' ) . '
' . sprintf( /* Translators: 1: link to site url. */ __( 'You received this email because you requested to sign in to %s', 'newspack' ), '*SITE_URL*' ) . '

'; $email_html = ' - Sign in +
acof-flag

' . __( 'Sign in', 'newspack' ) . '

' . __( 'Use the following code to login to your account:', 'newspack' ) . '

895671

' . __( 'You can also log into your account by clicking the following button:', 'newspack' ) . '

' . __( 'Or copy and paste the link in your browser:', 'newspack' ) . ' *MAGIC_LINK_URL*

' . __( 'If you did not request this code, please ignore this email.', 'newspack' ) . '

' . $social_links_html . '

' . sprintf( /* Translators: 1: site title 2: site base address. */ __( '%1$s - %2$s', 'newspack' ), '*SITE_TITLE*', '*SITE_ADDRESS*' ) . '
' . sprintf( /* Translators: s: link to site url. */ __( 'You received this email because you requested to sign in to %s', 'newspack' ), '*SITE_URL*' ) . '

'; + .has-vivid-purple-color { color: #9b51e0; }
acof-flag

' . __( 'Sign in', 'newspack' ) . '

' . __( 'Use the following code to login to your account:', 'newspack' ) . '

895671

' . __( 'You can also log into your account by clicking the following button:', 'newspack' ) . '

' . __( 'Or copy and paste the link in your browser:', 'newspack' ) . ' *MAGIC_LINK_URL*

' . __( 'If you did not request this code, please ignore this email.', 'newspack' ) . '

' . $social_links_html . '

' . sprintf( /* Translators: 1: site title 2: site base address. */ __( '%1$s - %2$s', 'newspack' ), '*SITE_TITLE*', '*SITE_ADDRESS*' ) . '
' . sprintf( /* Translators: s: link to site url. */ __( 'You received this email because you requested to sign in to %s', 'newspack' ), '*SITE_URL*' ) . '

'; return array( 'post_title' => __( 'Sign in', 'newspack' ), diff --git a/includes/util.php b/includes/util.php index 55d293b5fd..248b6f3a8e 100644 --- a/includes/util.php +++ b/includes/util.php @@ -495,16 +495,78 @@ function newspack_get_countries() { return $countries_options; } +/** + * Pick either white or black, whatever has sufficient contrast with the color being passed to it. + * (Copied from the Newspack theme: https://github.com/Automattic/newspack-theme/blob/6dc4e89a65c465abdd207d990e313921f2972a9a/newspack-theme/inc/template-functions.php#L547) + * + * @param string $hex Hexidecimal value of the color to adjust. + * + * @return string Either black or white hexidecimal values. + * + * @ref https://stackoverflow.com/questions/1331591/given-a-background-color-black-or-white-text + */ +function newspack_get_color_contrast( $hex ) { + // hex RGB. + $r1 = hexdec( substr( $hex, 1, 2 ) ); + $g1 = hexdec( substr( $hex, 3, 2 ) ); + $b1 = hexdec( substr( $hex, 5, 2 ) ); + // Black RGB. + $black_color = '#000'; + $r2_black_color = hexdec( substr( $black_color, 1, 2 ) ); + $g2_black_color = hexdec( substr( $black_color, 3, 2 ) ); + $b2_black_color = hexdec( substr( $black_color, 5, 2 ) ); + // Calc contrast ratio. + $l1 = 0.2126 * pow( $r1 / 255, 2.2 ) + + 0.7152 * pow( $g1 / 255, 2.2 ) + + 0.0722 * pow( $b1 / 255, 2.2 ); + $l2 = 0.2126 * pow( $r2_black_color / 255, 2.2 ) + + 0.7152 * pow( $g2_black_color / 255, 2.2 ) + + 0.0722 * pow( $b2_black_color / 255, 2.2 ); + $contrast_ratio = 0; + if ( $l1 > $l2 ) { + $contrast_ratio = (int) ( ( $l1 + 0.05 ) / ( $l2 + 0.05 ) ); + } else { + $contrast_ratio = (int) ( ( $l2 + 0.05 ) / ( $l1 + 0.05 ) ); + } + if ( $contrast_ratio > 5 ) { + // If contrast is more than 5, return black color. + return 'black'; + } else { + // if not, return white color. + return 'white'; + } +} + +/** + * Get theme primary and secondary colors or defaults if none present. + * + * @return array An array containing primary and secondary colors. + */ +function newspack_get_theme_colors() { + $primary_color = get_theme_mod( 'primary_color_hex', '#3366ff' ); + $secondary_color = get_theme_mod( 'secondary_color_hex', '#f0f0f0' ); + + return [ + 'primary_color' => $primary_color, + 'secondary_color' => $secondary_color, + 'primary_text_color' => newspack_get_color_contrast( $primary_color ), + 'secondary_text_color' => newspack_get_color_contrast( $secondary_color ), + ]; +} + /** * Get block and html markup for social media services. * + * @param string $color The color to use for the social media icons. + * * @return array An array containing block and html markup for social media services. */ -function newspack_get_social_markup() { +function newspack_get_social_markup( $color = 'white' ) { $cm = Configuration_Managers::configuration_manager_class_for_plugin_slug( 'wordpress_seo' ); $social_urls = []; if ( ! is_wp_error( $cm ) ) { $social_urls = [ + // TODO: Add more social media services here. 'facebook' => $cm->get_option( 'facebook_site' ), 'twitter' => $cm->get_option( 'twitter_site' ), 'instagram' => $cm->get_option( 'instagram_url' ), @@ -517,7 +579,7 @@ function newspack_get_social_markup() { foreach ( $social_urls as $service => $url ) { if ( ! empty( $url ) && ! is_wp_error( $url ) ) { $block_markup .= ''; - $html_markup .= '