From 158285bfffeb30f6635898ab36faa49d6c1a5805 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Mon, 15 Nov 2021 11:37:23 +0100
Subject: [PATCH] Added variable background color to callout on frontend

Refs https://github.com/TryGhost/Team/issues/1206
---
 core/frontend/src/cards/css/callout.css | 42 +++++++++++++++++++++++--
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/core/frontend/src/cards/css/callout.css b/core/frontend/src/cards/css/callout.css
index aba77dffc7..8d1ec46843 100644
--- a/core/frontend/src/cards/css/callout.css
+++ b/core/frontend/src/cards/css/callout.css
@@ -1,10 +1,48 @@
-.kg-callout-card {
+.kg-card-callout {
     display: flex;
-    padding: 16px 24px;
+    padding: 20px 28px;
     background: #f1f3f4;
     border-radius: 3px;
 }
 
+.kg-card-callout-grey {
+    background: #eef0f2;
+}
+
+.kg-card-callout-white {
+    background: #fff;
+    box-shadow: inset 0 0 0 1px #dddedf;
+}
+
+.kg-card-callout-blue {
+    background: #E9F6FB;
+}
+
+.kg-card-callout-green {
+    background: #E8F8EA;
+}
+
+.kg-card-callout-yellow {
+    background: #FCF4E3;
+}
+
+.kg-card-callout-red {
+    background: #FBE9E9;
+}
+
+.kg-card-callout-pink {
+    background: #FCEEF8;
+}
+
+.kg-card-callout-purple {
+    background: #F2EDFC;
+}
+
+.kg-card-callout-accent {
+    background: var(--ghost-accent-color);
+    color: #fff;
+}
+
 .kg-callout-emoji {
     padding-right: 12px;
     line-height: 1.6;