Merge pull request #15663 from surajshetty3416/alert-colors

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>

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;
+		}
+	}
+}

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;

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);
-		}
-	}
 }

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";

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);
 		}
 	}
 

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);