From 377eb881983aff2330052e0480dd9b834ecccde4 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 20 Jan 2022 09:29:29 +0530
Subject: [PATCH] fix: Update alert colors according to the new design

---
 frappe/public/js/frappe/ui/messages.js       |  2 +-
 frappe/public/scss/common/alert.scss         | 12 ++++++++
 frappe/public/scss/common/css_variables.scss | 10 ++++++
 frappe/public/scss/desk/dark.scss            | 32 ++++++--------------
 frappe/public/scss/desk/index.scss           |  1 +
 frappe/public/scss/desk/toast.scss           | 12 ++++----
 frappe/public/scss/website/index.scss        |  3 +-
 7 files changed, 42 insertions(+), 30 deletions(-)
 create mode 100644 frappe/public/scss/common/alert.scss

diff --git a/frappe/public/js/frappe/ui/messages.js b/frappe/public/js/frappe/ui/messages.js
index 17845c0787..0e0b6527e6 100644
--- a/frappe/public/js/frappe/ui/messages.js
+++ b/frappe/public/js/frappe/ui/messages.js
@@ -390,7 +390,7 @@ frappe.show_alert = frappe.toast = function(message, seconds=7, actions={}) {
 	const indicator = message.indicator || 'blue';
 
 	const div = $(`
-		<div class="alert desk-alert ${indicator}">
+		<div class="alert desk-alert ${indicator}" role="alert">
 			<div class="alert-message-container">
 				<div class="alert-title-container">
 					<div>${frappe.utils.icon(icon, 'lg')}</div>
diff --git a/frappe/public/scss/common/alert.scss b/frappe/public/scss/common/alert.scss
new file mode 100644
index 0000000000..ba026fa48a
--- /dev/null
+++ b/frappe/public/scss/common/alert.scss
@@ -0,0 +1,12 @@
+// Color overrides for https://getbootstrap.com/docs/4.0/components/alerts
+$alert-types: info, success, warning, danger;
+
+.alert {
+	@each $alert-type in $alert-types {
+		&.alert-#{$alert-type} {
+			color: var(--alert-text-#{$alert-type});
+			background-color: var(--alert-bg-#{$alert-type});
+			border: none;
+		}
+	}
+}
\ No newline at end of file
diff --git a/frappe/public/scss/common/css_variables.scss b/frappe/public/scss/common/css_variables.scss
index e5a0052f04..5cc030516f 100644
--- a/frappe/public/scss/common/css_variables.scss
+++ b/frappe/public/scss/common/css_variables.scss
@@ -189,6 +189,16 @@
 	--text-on-pink: var(--pink-500);
 	--text-on-cyan: var(--cyan-600);
 
+	// alert colors
+	--alert-text-danger: var(--red-600);
+	--alert-text-warning: var(--yellow-700);
+	--alert-text-info: var(--blue-700);
+	--alert-text-success: var(--green-700);
+	--alert-bg-danger: var(--red-50);
+	--alert-bg-warning: var(--yellow-50);
+	--alert-bg-info: var(--blue-50);
+	--alert-bg-success: var(--green-50);
+
 	// Layout Colors
 	--bg-color: var(--gray-50);
 	--fg-color: white;
diff --git a/frappe/public/scss/desk/dark.scss b/frappe/public/scss/desk/dark.scss
index d2c2c70fda..8cab845d35 100644
--- a/frappe/public/scss/desk/dark.scss
+++ b/frappe/public/scss/desk/dark.scss
@@ -63,6 +63,16 @@
 	--text-on-light-gray: var(--gray-100);
 	--text-on-purple: var(--purple-100);
 
+	// alert colors
+	--alert-text-danger: var(--red-300);
+	--alert-text-warning: var(--yellow-300);
+	--alert-text-info: var(--blue-300);
+	--alert-text-success: var(--green-300);
+	--alert-bg-danger: var(--red-900);
+	--alert-bg-warning: var(--yellow-900);
+	--alert-bg-info: var(--blue-900);
+	--alert-bg-success: var(--green-900);
+
 	--sidebar-select-color: var(--gray-800);
 
 	--scrollbar-thumb-color: var(--gray-600);
@@ -166,26 +176,4 @@
 		color: var(--text-color);
 		background: var(--gray-500);
 	}
-
-	.desk-alert {
-		&.red {
-			--toast-bg: var(--red-900);
-		}
-
-		&.yellow {
-			--toast-bg: var(--yellow-900);
-		}
-
-		&.orange {
-			--toast-bg: var(--orange-900);
-		}
-
-		&.blue {
-			--toast-bg: var(--blue-900);
-		}
-
-		&.green {
-			--toast-bg: var(--green-900);
-		}
-	}
 }
diff --git a/frappe/public/scss/desk/index.scss b/frappe/public/scss/desk/index.scss
index 1d1124bd58..5d712f7ad6 100644
--- a/frappe/public/scss/desk/index.scss
+++ b/frappe/public/scss/desk/index.scss
@@ -2,6 +2,7 @@
 @import "../common/mixins.scss";
 @import "../common/global.scss";
 @import "../common/icons.scss";
+@import "../common/alert.scss";
 
 @import "~bootstrap/scss/bootstrap";
 @import "global";
diff --git a/frappe/public/scss/desk/toast.scss b/frappe/public/scss/desk/toast.scss
index 18d7ef9944..862b42cd76 100644
--- a/frappe/public/scss/desk/toast.scss
+++ b/frappe/public/scss/desk/toast.scss
@@ -11,23 +11,23 @@
 
 .desk-alert {
 	&.red {
-		--toast-bg: var(--red-100);
+		--toast-bg: var(--alert-bg-danger);
 	}
 
 	&.yellow {
-		--toast-bg: var(--yellow-50);
+		--toast-bg: var(--alert-bg-warning);
 	}
 
 	&.orange {
-		--toast-bg: var(--orange-50);
+		--toast-bg: var(--alert-bg-warning);
 	}
 
 	&.blue {
-		--toast-bg: var(--blue-50);
+		--toast-bg: var(--alert-bg-info);
 	}
 
 	&.green {
-		--toast-bg: var(--green-50);
+		--toast-bg: var(--alert-bg-success);
 	}
 
 	box-shadow: var(--modal-shadow);
@@ -66,7 +66,7 @@
 		.alert-subtitle {
 			font-size: var(--text-md);
 			padding-left: 34px;
-			color: var(--text-muted);
+			color: var(--text-light);
 		}
 	}
 
diff --git a/frappe/public/scss/website/index.scss b/frappe/public/scss/website/index.scss
index 69a7b205c4..970e9cab88 100644
--- a/frappe/public/scss/website/index.scss
+++ b/frappe/public/scss/website/index.scss
@@ -4,6 +4,7 @@
 @import "../common/mixins";
 @import "../common/global";
 @import "../common/icons";
+@import "../common/alert";
 @import 'base';
 @import "../common/flex";
 @import "../common/buttons";
@@ -137,7 +138,7 @@ body {
 	a {
 		color: var(--text-color)
 	}
-	
+
 	li.disabled {
 		a {
 			color: var(--text-muted);