From b2649eda1ee350c957d4899672ea40c12e817203 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 15 Apr 2021 16:07:03 +0530
Subject: [PATCH] fix: Use css variables for mention colors

---
 frappe/public/scss/common/quill.scss       | 6 +++---
 frappe/public/scss/desk/css_variables.scss | 4 ++++
 frappe/public/scss/desk/dark.scss          | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frappe/public/scss/common/quill.scss b/frappe/public/scss/common/quill.scss
index c4011e2d6b..ce4a10d190 100644
--- a/frappe/public/scss/common/quill.scss
+++ b/frappe/public/scss/common/quill.scss
@@ -119,7 +119,7 @@
 	border: 1px solid var(--border-color);
 	padding: 2px 5px;
 	font-size: var(--text-sm);
-	background-color: var(--fg-color);
+	background-color: var(--user-mention-bg-color);
 }
 
 // table
@@ -174,7 +174,7 @@
 .ql-editor.read-mode {
 	padding: 0;
 	.mention {
-		background-color: var(--control-bg);
+		--user-mention-bg-color: var(--control-bg);
 	}
 }
 
@@ -193,5 +193,5 @@
 }
 
 .mention[data-is-group="true"] {
-	background-color: var(--purple-100) !important;
+	background-color: var(--group-mention-bg-color);
 }
diff --git a/frappe/public/scss/desk/css_variables.scss b/frappe/public/scss/desk/css_variables.scss
index 21b4ac6c1d..5aca23a0b0 100644
--- a/frappe/public/scss/desk/css_variables.scss
+++ b/frappe/public/scss/desk/css_variables.scss
@@ -59,6 +59,10 @@ $input-height: 28px !default;
 	--timeline-content-max-width: 700px;
 	--timeline-left-padding: calc(var(--padding-xl) + var(--timeline-item-icon-size) / 2);
 
+	// mentions
+	--user-mention-bg-color: var(--fg-color);
+	--group-mention-bg-color: var(--bg-purple);
+
 	// skeleton
 	--skeleton-bg: var(--gray-100);
 
diff --git a/frappe/public/scss/desk/dark.scss b/frappe/public/scss/desk/dark.scss
index 743107af47..5817e33ca0 100644
--- a/frappe/public/scss/desk/dark.scss
+++ b/frappe/public/scss/desk/dark.scss
@@ -99,7 +99,7 @@
 	.ql-editor {
 		color: var(--text-on-gray);
 		&.read-mode {
-			span,
+			span:not(.mention),
 			p,
 			u,
 			strong {