Added accent color button styles to labs email template

refs https://github.com/TryGhost/Team/issues/928

- duplicated email template so email-cta changes can go into the labs version
- added `accentContrastColor` to template settings for using white/black depending on the accent color
- added `.gh-btn-accent` styles to the email template (email-cta card already uses those for the button)

core/server/services/mega/post-email-serializer.js

@@ -1,8 +1,10 @@
 const _ = require('lodash');
 const juice = require('juice');
 const template = require('./template');
+const labsTemplate = require('./template-labs');
 const settingsCache = require('../../../shared/settings-cache');
 const urlUtils = require('../../../shared/url-utils');
+const labs = require('../../../shared/labs');
 const moment = require('moment-timezone');
 const cheerio = require('cheerio');
 const api = require('../../api');
@@ -10,6 +12,7 @@ const {URL} = require('url');
 const mobiledocLib = require('../../lib/mobiledoc');
 const htmlToText = require('html-to-text');
 const {isUnsplashImage, isLocalContentImage} = require('@tryghost/kg-default-cards/lib/utils');
+const {textColorForBackgroundColor} = require('@tryghost/color-utils');
 const logging = require('@tryghost/logging');
 
 const ALLOWED_REPLACEMENTS = ['first_name'];
@@ -154,7 +157,8 @@ const getTemplateSettings = async () => {
         bodyFontCategory: settingsCache.get('newsletter_body_font_category'),
         showBadge: settingsCache.get('newsletter_show_badge'),
         footerContent: settingsCache.get('newsletter_footer_content'),
-        accentColor: settingsCache.get('accent_color')
+        accentColor: settingsCache.get('accent_color'),
+        accentContrastColor: textColorForBackgroundColor(settingsCache.get('accent_color')).hex()
     };
 
     if (templateSettings.headerImage) {
@@ -244,7 +248,9 @@ const serialize = async (postModel, options = {isBrowserPreview: false, apiVersi
 
     const templateSettings = await getTemplateSettings();
 
-    let htmlTemplate = template({post, site: getSite(), templateSettings});
+    const render = labs.isSet('emailCardSegments') ? labsTemplate : template;
+
+    let htmlTemplate = render({post, site: getSite(), templateSettings});
 
     if (options.isBrowserPreview) {
         const previewUnsubscribeUrl = createUnsubscribeUrl(null);

package.json

@@ -54,6 +54,7 @@
     "@tryghost/admin-api-schema": "2.5.0",
     "@tryghost/bookshelf-plugins": "0.1.4",
     "@tryghost/bootstrap-socket": "0.2.9",
+    "@tryghost/color-utils": "^0.1.0",
     "@tryghost/config-url-helpers": "0.1.0",
     "@tryghost/constants": "0.1.8",
     "@tryghost/debug": "0.1.3",

yarn.lock

@@ -640,6 +640,13 @@
   dependencies:
     long-timeout "^0.1.1"
 
+"@tryghost/color-utils@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@tryghost/color-utils/-/color-utils-0.1.0.tgz#8a1be31f197d5ad899961b24e3db440038eae876"
+  integrity sha512-FzBH6vazZYNo+FfyltXcRq4vTiBcz0o3Em7iFETQIaMPHVSIBsPjXy5Vvhm7LaT+tyyZInXCsogfKlXynPVOqQ==
+  dependencies:
+    color "^3.2.1"
+
 "@tryghost/config-url-helpers@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@tryghost/config-url-helpers/-/config-url-helpers-0.1.0.tgz#10cb3930c19a72e4967b52c6d6450a05449a3f9d"
@@ -2313,7 +2320,7 @@ color-string@^1.6.0:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
-color@^3.1.3:
+color@^3.1.3, color@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
   integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==