From aff898ad8d12f9e9169e7364a776485c6ea56011 Mon Sep 17 00:00:00 2001
From: Matt Westcott <matt@west.co.tt>
Date: Tue, 29 Jun 2021 17:46:38 +0100
Subject: [PATCH] Prevent comments CSS from overriding custom colours

Fixes #7294. CommentApp/main.scss mistakenly redefined the SCSS colour variables to their Wagtail defaults, overriding the ability to customise them as pe https://docs.wagtail.io/en/stable/advanced_topics/customisation/admin_templates.html#custom-user-interface-colors
---
 .../scss/components/_comments-controls.scss   |  6 +--
 .../_comments-notification-dropdown.scss      |  7 ++-
 client/src/components/CommentApp/main.scss    | 43 +------------------
 3 files changed, 7 insertions(+), 49 deletions(-)

diff --git a/client/scss/components/_comments-controls.scss b/client/scss/components/_comments-controls.scss
index aca755d8b4..02ba6263dc 100644
--- a/client/scss/components/_comments-controls.scss
+++ b/client/scss/components/_comments-controls.scss
@@ -41,7 +41,7 @@
         bottom: 3px;
         width: 52px;
         height: 52px;
-        color: #004345;
+        color: $color-teal-dark;
         transition: color 100ms cubic-bezier(0.4, 0, 0.2, 1);
     }
 
@@ -54,8 +54,8 @@
         box-sizing: border-box;
         border-radius: 50%;
         background-color: $color-salmon;
-        border: 1px solid #007d7e;
-        color: #fff;
+        border: 1px solid $color-teal;
+        color: $color-white;
         font-size: 9px;
         font-weight: 700;
         text-align: center;
diff --git a/client/scss/components/_comments-notification-dropdown.scss b/client/scss/components/_comments-notification-dropdown.scss
index 6c37c48c69..9b47a61647 100644
--- a/client/scss/components/_comments-notification-dropdown.scss
+++ b/client/scss/components/_comments-notification-dropdown.scss
@@ -6,7 +6,6 @@
     align-items: center;
     border: 0;
     background-color: transparent;
-    color: #004345;
 
     &--active,
     &:hover {
@@ -24,7 +23,7 @@
     &__icon {
         width: 15px;
         height: 18px;
-        color: #004345;
+        color: $color-teal-dark;
         transition: color 100ms cubic-bezier(0.4, 0, 0.2, 1);
     }
 }
@@ -34,7 +33,7 @@
     display: none;
     bottom: -92px;
     z-index: 51;
-    background-color: #262626;
+    background-color: $color-text-base;
     padding: 20px;
     border-radius: 6px;
     width: 260px;
@@ -61,6 +60,6 @@
         right: 18px;
         border-style: solid;
         border-width: 0 8px 8px 8px;
-        border-color: transparent transparent #262626 transparent;
+        border-color: transparent transparent $color-text-base transparent;
     }
 }
diff --git a/client/src/components/CommentApp/main.scss b/client/src/components/CommentApp/main.scss
index fa77039d0f..242107db70 100644
--- a/client/src/components/CommentApp/main.scss
+++ b/client/src/components/CommentApp/main.scss
@@ -1,56 +1,15 @@
-$color-teal: #007d7e;
-$color-teal-darker: darken(adjust-hue($color-teal, 1), 4);
-$color-teal-dark: darken(adjust-hue($color-teal, 1), 7);
+@import '../../../scss/settings/variables';
 
-$color-blue: #71b2d4;
-$color-red: #cd3238;
-$color-red-dark: #b4191f;
 $color-red-very-dark: #901419;
-$color-orange: #e9b04d;
-$color-orange-dark: #bb5b03;
-$color-green: #189370;
-$color-green-dark: #157b57;
-$color-salmon: #f37e77;
-$color-salmon-light: #fcf2f2;
-$color-white: #fff;
-$color-black: #000;
 $color-amber-0: #e9b04d;
 $color-amber-1: #faecd5;
 
-// darker to lighter
-$color-grey-1: darken($color-white, 80);
-$color-grey-2: darken($color-white, 70);
 $color-grey-25: #626262;
-$color-grey-3: darken($color-white, 15);
-$color-grey-4: darken($color-white, 10);
-$color-grey-5: darken($color-white, 2);
 $color-grey-7: #f2f2f2;
 $color-grey-8: #fbfbfb;
 
-$color-fieldset-hover: $color-grey-5;
-$color-input-border: $color-grey-4;
-$color-input-focus: lighten(desaturate($color-teal, 40), 72);
-$color-input-focus-border: lighten(saturate($color-teal, 12), 10);
-$color-input-error-bg: lighten(saturate($color-red, 28), 45);
-
-$color-link: $color-teal-darker;
-$color-link-hover: $color-teal-dark;
-
-// The focus outline color is defined without reusing a named color variable
-// because it shouldn’t be reused for anything else in the UI.
-$color-focus-outline: #ffbf47;
-
-$color-text-base: darken($color-white, 85);
-$color-text-input: darken($color-white, 90);
-
 $color-comment-separator: #e6e6e6;
 
-// Color states
-$color-state-live: #59b524;
-$color-state-draft: #808080;
-$color-state-absent: #ff8f11;
-$color-state-live-draft: #43b1b0;
-
 $color-box-background: $color-white;
 $color-box-border: $color-grey-3;
 $color-box-border-focused: $color-grey-2;