From 74fe765410a2997e685f4f2c56eadf7a35df7440 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@ghost.org>
Date: Tue, 2 Mar 2021 11:40:45 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Added=20accent=20color=20CSS=20vari?=
 =?UTF-8?q?able=20to=20`{{ghost=5Fhead}}`=20(#12717)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closes https://github.com/TryGhost/Team/issues/508

- if an accent colour is set in site settings, output a `--accent-color` CSS variable in a `<style>` tag through `{{ghost_head}}`
- allows themes to use the accent colour without adding an additional conditional with CSS variable declaration to their default template
---
 core/frontend/helpers/ghost_head.js  | 12 +++++
 test/unit/helpers/ghost_head_spec.js | 65 ++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+)

diff --git a/core/frontend/helpers/ghost_head.js b/core/frontend/helpers/ghost_head.js
index f5ff1a6e3c..4fd446c452 100644
--- a/core/frontend/helpers/ghost_head.js
+++ b/core/frontend/helpers/ghost_head.js
@@ -173,6 +173,18 @@ module.exports = function ghost_head(options) { // eslint-disable-line camelcase
                 }
             }
 
+            if (settingsCache.get('accent_color')) {
+                const accentColor = escapeExpression(settingsCache.get('accent_color'));
+                const styleTag = `<style>:root {--accent-color: ${accentColor};}</style>`;
+                const existingScriptIndex = _.findLastIndex(head, str => str.match(/<\/(style|script)>/));
+
+                if (existingScriptIndex) {
+                    head[existingScriptIndex] = head[existingScriptIndex] + styleTag;
+                } else {
+                    head.push(styleTag);
+                }
+            }
+
             head.push('<meta name="generator" content="Ghost ' +
                 escapeExpression(safeVersion) + '" />');
 
diff --git a/test/unit/helpers/ghost_head_spec.js b/test/unit/helpers/ghost_head_spec.js
index 4f538434c4..2a83d728ac 100644
--- a/test/unit/helpers/ghost_head_spec.js
+++ b/test/unit/helpers/ghost_head_spec.js
@@ -1552,4 +1552,69 @@ describe('{{ghost_head}} helper', function () {
             }).catch(done);
         });
     });
+
+    describe('accent_color', function () {
+        it('includes style tag when set', function (done) {
+            settingsCache.get.withArgs('accent_color').returns('#123456');
+
+            const renderObject = {
+                post: posts[1]
+            };
+
+            helpers.ghost_head(testUtils.createHbsResponse({
+                renderObject: renderObject,
+                locals: {
+                    relativeUrl: '/post/',
+                    context: ['post'],
+                    safeVersion: '0.3'
+                }
+            })).then(function (rendered) {
+                should.exist(rendered);
+                rendered.string.should.containEql('<style>:root {--accent-color: #123456;}</style>');
+                done();
+            }).catch(done);
+        });
+
+        it('does not include style tag when not set', function (done) {
+            settingsCache.get.withArgs('accent_color').returns(null);
+
+            const renderObject = {
+                post: posts[1]
+            };
+
+            helpers.ghost_head(testUtils.createHbsResponse({
+                renderObject: renderObject,
+                locals: {
+                    relativeUrl: '/post/',
+                    context: ['post'],
+                    safeVersion: '0.3'
+                }
+            })).then(function (rendered) {
+                should.exist(rendered);
+                rendered.string.should.not.containEql('--accent-color');
+                done();
+            }).catch(done);
+        });
+
+        it('attaches style tag to existing script/style tag', function (done) {
+            settingsCache.get.withArgs('accent_color').returns('#123456');
+
+            const renderObject = {
+                post: posts[1]
+            };
+
+            helpers.ghost_head(testUtils.createHbsResponse({
+                renderObject: renderObject,
+                locals: {
+                    relativeUrl: '/post/',
+                    context: ['post'],
+                    safeVersion: '0.3'
+                }
+            })).then(function (rendered) {
+                should.exist(rendered);
+                rendered.string.should.match(/[^\s]<style>:root/);
+                done();
+            }).catch(done);
+        });
+    });
 });