Added newsletter customisation data to the preview template (#16527)

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

In order to render the preview correctly and use the new design settings
we need to expose them to the template. Unfortuantely we've had to
duplicate all of the code from the backend here, long term we should try
and pull the newsletter email rendering into a component that can be
shared between the server & client.

ghost/admin/app/components/modals/newsletters/edit/preview-labs.hbs

@@ -6,6 +6,19 @@
             </p>
             <p><span class="dark">To:</span> Jamie Larson &lt;jamie@example.com&gt;</p>
         </div>
+
+        <ul>
+            <li>accentColor: {{this.accentColor}}</li>
+            <li>backgroundColor: {{this.backgroundColor}}</li>
+            <li>backgroundColorIsDark: {{this.backgroundColorIsDark}}</li>
+            <li>borderColor: {{this.borderColor}}</li>
+            <li>secondaryBorderColor: {{this.secondaryBorderColor}}</li>
+            <li>titleColor: {{this.titleColor}}</li>
+            <li>textColor: {{this.textColor}}</li>
+            <li>secondaryTextColor: {{this.secondaryTextColor}}</li>
+            <li>linkColor: {{this.linkColor}}</li>
+        </ul>
+
         <div class="gh-members-emailpreview-contents">
             {{#if @newsletter.headerImage}}
                 <div class="gh-members-emailpreview-header-image">

ghost/admin/app/components/modals/newsletters/edit/preview-labs.js

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import moment from 'moment-timezone';
 import {htmlSafe} from '@ember/template';
 import {inject as service} from '@ember/service';
+import {textColorForBackgroundColor} from '@tryghost/color-utils';
 
 export default class EditNewsletterPreview extends Component {
     @service ghostPaths;
@@ -9,6 +10,80 @@ export default class EditNewsletterPreview extends Component {
     @service settings;
     @service membersUtils;
 
+    get accentColor() {
+        return this.settings.accentColor;
+    }
+
+    get backgroundColor() {
+        const value = this.args.newsletter.backgroundColor;
+
+        const validHex = /#([0-9a-f]{3}){1,2}$/i;
+
+        if (validHex.test(value)) {
+            return value;
+        }
+
+        if (value === 'dark') {
+            return '#15212a';
+        }
+
+        return '#ffffff';
+    }
+
+    get backgroundColorIsDark() {
+        return textColorForBackgroundColor(this.backgroundColor).hex().toLowerCase() === '#ffffff';
+    }
+
+    get borderColor() {
+        const value = this.args.newsletter.borderColor;
+
+        const validHex = /#([0-9a-f]{3}){1,2}$/i;
+
+        if (validHex.test(value)) {
+            return value;
+        }
+
+        if (value === 'dark') {
+            return '#15212a';
+        }
+
+        if (value === 'accent') {
+            return this.accentColor;
+        }
+
+        return null;
+    }
+
+    get secondaryBorderColor() {
+        return textColorForBackgroundColor(this.backgroundColor).alpha(0.12).toString();
+    }
+
+    get titleColor() {
+        const value = this.args.newsletter.titleColor;
+
+        const validHex = /#([0-9a-f]{3}){1,2}$/i;
+
+        if (validHex.test(value)) {
+            return value;
+        }
+
+        if (value === 'accent') {
+            return this.accentColor;
+        }
+
+        const backgroundColor = this.backgroundColor;
+        return textColorForBackgroundColor(backgroundColor).hex();
+    }
+    get textColor() {
+        return textColorForBackgroundColor(this.backgroundColor).hex();
+    }
+    get secondaryTextColor() {
+        return textColorForBackgroundColor(this.backgroundColor).alpha(0.45).toString();
+    }
+    get linkColor() {
+        return this.backgroundIsDark ? '#ffffff' : this.accentColor;
+    }
+
     get showHeader() {
         return (this.args.newsletter.showHeaderIcon && this.settings.icon)
             || this.headerTitle;