Varia: Improving notices colors

varia/sass/vendors/woocommerce/elements/_notices.scss

@@ -4,9 +4,28 @@
 
 body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
 
+	.woocommerce-notice--message,
+	.woocommerce-notice--info {
+		color: map-deep-get($config-global, "color", "alert", "info");
+	}
+
+	.woocommerce-notice--success {
+		color: map-deep-get($config-global, "color", "alert", "success");
+	}
+
+	.woocommerce-notice--error {
+		color: map-deep-get($config-global, "color", "alert", "error");
+	}
+
+	.woocommerce-notice--warning {
+		color: map-deep-get($config-global, "color", "alert", "warning");
+	}
+
 	.woocommerce-message,
+	.woocommerce-info,
+	.woocommerce-success,
 	.woocommerce-error,
-	.woocommerce-info {
+	.woocommerce-warning {
 		padding: map-deep-get($config-global, "spacing", "unit") map-deep-get($config-global, "spacing", "vertical") map-deep-get($config-global, "spacing", "unit") #{2 * map-deep-get($config-global, "spacing", "vertical")};
 		margin-bottom: map-deep-get($config-global, "spacing", "vertical");
 		background-color: map-deep-get($config-global, "color", "background", "light");
@@ -14,7 +33,15 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 		border-top-color: map-deep-get($config-global, "color", "primary", "default");
 	}
 
-	.woocommerce-message {
+	.woocommerce-message,
+	.woocommerce-info {
+		border-top-color: map-deep-get($config-global, "color", "alert", "info");
+		&:before {
+			color: map-deep-get($config-global, "color", "alert", "info");
+		}
+	}
+
+	.woocommerce-success {
 		border-top-color: map-deep-get($config-global, "color", "alert", "success");
 		&:before {
 			color: map-deep-get($config-global, "color", "alert", "success");
@@ -28,10 +55,10 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 		}
 	}
 
-	.woocommerce-info {
-		border-top-color: map-deep-get($config-global, "color", "primary", "default");
+	.woocommerce-warning {
+		border-top-color: map-deep-get($config-global, "color", "alert", "warning");
 		&:before {
-			color: map-deep-get($config-global, "color", "primary", "default");
+			color: map-deep-get($config-global, "color", "alert", "warning");
 		}
 	}
 }

varia/sass/vendors/woocommerce/pages/_checkout.scss

@@ -28,6 +28,10 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 			padding: map-deep-get($config-global, "spacing", "unit");
 			text-transform: none;
 
+			&.email {
+				word-break: break-word;
+			}
+
 			&:not(:last-child) {
 				border-right: 1px solid map-deep-get($config-global, "color", "border", "default");
 			}

varia/style-woocommerce.css

@@ -311,9 +311,28 @@ body[class*="woocommerce"] #page .woocommerce-breadcrumb a {
 /**
  * Notices
  */
+body[class*="woocommerce"] #page .woocommerce-notice--message,
+body[class*="woocommerce"] #page .woocommerce-notice--info {
+	color: skyblue;
+}
+
+body[class*="woocommerce"] #page .woocommerce-notice--success {
+	color: yellowgreen;
+}
+
+body[class*="woocommerce"] #page .woocommerce-notice--error {
+	color: salmon;
+}
+
+body[class*="woocommerce"] #page .woocommerce-notice--warning {
+	color: gold;
+}
+
 body[class*="woocommerce"] #page .woocommerce-message,
+body[class*="woocommerce"] #page .woocommerce-info,
+body[class*="woocommerce"] #page .woocommerce-success,
 body[class*="woocommerce"] #page .woocommerce-error,
-body[class*="woocommerce"] #page .woocommerce-info {
+body[class*="woocommerce"] #page .woocommerce-warning {
 	padding: 16px 32px 16px 64px;
 	margin-bottom: 32px;
 	background-color: #FAFAFA;
@@ -321,11 +340,21 @@ body[class*="woocommerce"] #page .woocommerce-info {
 	border-top-color: blue;
 }
 
-body[class*="woocommerce"] #page .woocommerce-message {
+body[class*="woocommerce"] #page .woocommerce-message,
+body[class*="woocommerce"] #page .woocommerce-info {
+	border-top-color: skyblue;
+}
+
+body[class*="woocommerce"] #page .woocommerce-message:before,
+body[class*="woocommerce"] #page .woocommerce-info:before {
+	color: skyblue;
+}
+
+body[class*="woocommerce"] #page .woocommerce-success {
 	border-top-color: yellowgreen;
 }
 
-body[class*="woocommerce"] #page .woocommerce-message:before {
+body[class*="woocommerce"] #page .woocommerce-success:before {
 	color: yellowgreen;
 }
 
@@ -337,12 +366,12 @@ body[class*="woocommerce"] #page .woocommerce-error:before {
 	color: salmon;
 }
 
-body[class*="woocommerce"] #page .woocommerce-info {
-	border-top-color: blue;
+body[class*="woocommerce"] #page .woocommerce-warning {
+	border-top-color: gold;
 }
 
-body[class*="woocommerce"] #page .woocommerce-info:before {
-	color: blue;
+body[class*="woocommerce"] #page .woocommerce-warning:before {
+	color: gold;
 }
 
 /**
@@ -1536,6 +1565,10 @@ body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li {
 	text-transform: none;
 }
 
+body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li.email {
+	word-break: break-word;
+}
+
 body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li:not(:last-child) {
 	border-right: 1px solid #DDDDDD;
 }