From 08a46a79a0d1ad75b2b004caffe6aee818ea7503 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 18 Sep 2020 14:11:06 +0530
Subject: [PATCH] feat: flip avatar colors in dark color mode

---
 frappe/public/js/frappe/utils/common.js | 28 ++++-----
 frappe/public/scss/avatar.scss          | 82 ++++++++++++++++++++++---
 2 files changed, 88 insertions(+), 22 deletions(-)

diff --git a/frappe/public/js/frappe/utils/common.js b/frappe/public/js/frappe/utils/common.js
index 4aaf9e93bd..b50a226545 100644
--- a/frappe/public/js/frappe/utils/common.js
+++ b/frappe/public/js/frappe/utils/common.js
@@ -96,26 +96,26 @@ frappe.ui.scroll = function(element, animate, additional_offset) {
 };
 
 frappe.palette = [
-	['--orange-100', '--orange-600'],
-	['--pink-50', '--pink-500'],
-	['--blue-50', '--blue-500'],
-	['--green-50', '--green-500'],
-	['--dark-green-50', '--dark-green-500'],
-	['--red-50', '--red-500'],
-	['--yellow-50', '--yellow-500'],
-	['--purple-50', '--purple-500'],
-	['--gray-50', '--gray-500']
+	['--orange-avatar-bg', '--orange-avatar-color'],
+	['--pink-avatar-bg', '--pink-avatar-color'],
+	['--blue-avatar-bg', '--blue-avatar-color'],
+	['--green-avatar-bg', '--green-avatar-color'],
+	['--dark-green-avatar-bg', '--dark-green-avatar-color'],
+	['--red-avatar-bg', '--red-avatar-color'],
+	['--yellow-avatar-bg', '--yellow-avatar-color'],
+	['--purple-avatar-bg', '--purple-avatar-color'],
+	['--gray-avatar-bg', '--gray-avatar-color0']
 ]
 
-frappe.get_palette = function(txt) {
-	var idx = cint((parseInt(md5(txt).substr(4,2), 16) + 1) / 5.33);
-	return frappe.palette[idx%8];
+frappe.get_palette = function (txt) {
+	var idx = cint((parseInt(md5(txt).substr(4, 2), 16) + 1) / 5.33);
+	return frappe.palette[idx % 8];
 }
 
-frappe.get_abbr = function(txt, max_length) {
+frappe.get_abbr = function (txt, max_length) {
 	if (!txt) return "";
 	var abbr = "";
-	$.each(txt.split(" "), function(i, w) {
+	$.each(txt.split(" "), function (i, w) {
 		if (abbr.length >= (max_length || 2)) {
 			// break
 			return false;
diff --git a/frappe/public/scss/avatar.scss b/frappe/public/scss/avatar.scss
index 3e8dd6da0e..1d24e1693f 100644
--- a/frappe/public/scss/avatar.scss
+++ b/frappe/public/scss/avatar.scss
@@ -1,3 +1,69 @@
+:root {
+	--avatar-frame-color: var(--blue-500);
+	--avatar-frame-bg: var(--blue-100);
+	--avatar-frame-border: var(--blue-100);
+
+	--orange-avatar-bg: var(--orange-100);
+	--orange-avatar-color: var(--orange-600);
+
+	--pink-avatar-bg: var(--pink-50);
+	--pink-avatar-color: var(--pink-500);
+
+	--blue-avatar-bg: var(--blue-50);
+	--blue-avatar-color: var(--blue-500);
+
+	--green-avatar-bg: var(--green-50);
+	--green-avatar-color: var(--green-500);
+
+	--dark-green-avatar-bg: var(--dark-green-50);
+	--dark-green-avatar-color: var(--dark-green-500);
+
+	--red-avatar-bg: var(--red-50);
+	--red-avatar-color: var(--red-500);
+
+	--yellow-avatar-bg: var(--yellow-50);
+	--yellow-avatar-color: var(--yellow-500);
+
+	--purple-avatar-bg: var(--purple-50);
+	--purple-avatar-color: var(--purple-500);
+
+	--gray-avatar-bg: var(--gray-50);
+	--gray-avatar-color: var(--gray-50);
+}
+
+[data-theme="dark"] {
+	--avatar-frame-color: var(--blue-50);
+	--avatar-frame-bg: var(--blue-400);
+	--avatar-frame-border: var(--blue-400);
+
+	--orange-avatar-bg: var(--orange-600);
+	--orange-avatar-color: var(--orange-100);
+
+	--pink-avatar-bg: var(--pink-500);
+	--pink-avatar-color: var(--pink-50);
+
+	--blue-avatar-bg: var(--blue-500);
+	--blue-avatar-color: var(--blue-50);
+
+	--green-avatar-bg: var(--green-500);
+	--green-avatar-color: var(--green-50);
+
+	--dark-green-avatar-bg: var(--dark-green-500);
+	--dark-green-avatar-color: var(--dark-green-50);
+
+	--red-avatar-bg: var(--red-500);
+	--red-avatar-color: var(--red-50);
+
+	--yellow-avatar-bg: var(--yellow-500);
+	--yellow-avatar-color: var(--yellow-50);
+
+	--purple-avatar-bg: var(--purple-500);
+	--purple-avatar-color: var(--purple-50);
+
+	--gray-avatar-bg: var(--gray-50);
+	--gray-avatar-color: var(--gray-50);
+}
+
 .avatar {
 	display: inline-block;
 	vertical-align: middle;
@@ -7,7 +73,7 @@
 	display: inline-block;
 	width: 100%;
 	height: 100%;
-	background-color: var(--blue-100);
+	background-color: var(--avatar-frame-bg);
 	background-size: cover;
 	background-repeat: no-repeat;
 	background-position: center center;
@@ -30,7 +96,7 @@
 	}
 
 	.avatar-empty::after {
-		content: '\002D';
+		content: "\002D";
 		line-height: 28px;
 	}
 }
@@ -48,7 +114,6 @@
 	width: 72px;
 	height: 72px;
 
-
 	.standard-image {
 		font-size: var(--text-2xl);
 	}
@@ -83,8 +148,9 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	background-color: var(--gray-50);
-	color: var(--blue-500);
+	background-color: var(--avatar-frame-bg);
+	color: var(--avatar-frame-color);
+	border: 1px solid var(--avatar-frame-border);
 	font-weight: normal;
 }
 
@@ -116,9 +182,9 @@
 	}
 
 	.avatar {
-		transition: margin .1s ease-in-out;
+		transition: margin 0.1s ease-in-out;
 		.avatar-frame {
-			border: 1px solid var(--fg-color);
+			border: 1px solid var(--avatar-frame-border);
 		}
 
 		&:not(.avatar-extra-count):hover {
@@ -142,4 +208,4 @@
 			margin-right: calc(-1 * var(--margin-sm));
 		}
 	}
-}
\ No newline at end of file
+}