Enable dark mode for echo overlay

Bug: T366322
Depends-on: I01cdde979b2ddf64d54013466a3fe51a493860cc
Change-Id: I90f2c3c5098a418a7e40204c9b2384711b6ddce3

modules/echo.variables.less

@@ -1,15 +1,15 @@
 // = Echo variables
-@grey-light: #72777d;
+@grey-light: @color-placeholder;
 
 @badge-padding: 0.12em;
 @badge-icon-size: 1.1em;
 @badge-distance-adjustment: 1em;
 
-@notification-item-background-read: #eaecf0;
+@notification-item-background-read: @background-color-neutral;
 
 @notification-background-unseen: #dce8ff;
 @notification-background-unread: @background-color-base;
-@notification-background-read: #eaecf0;
+@notification-background-read: @background-color-neutral;
 
 @badge-counter-background-seen: @grey-light;
 
@@ -32,4 +32,4 @@
 @specialpage-width: 1000px;
 /* stylelint-enable plugin/no-unsupported-browser-features */
 
-@background-color-popup-confirmation: #202122;
+@background-color-popup-confirmation: @color-notice;

modules/nojs/mw.echo.special.less

@@ -117,7 +117,7 @@ ul.mw-echo-special-notifications {
 	overflow-y: auto;
 
 	.mw-echo-notification {
-		background-color: #f8f9fa;
+		background-color: @background-color-neutral-subtle;
 
 		&:hover {
 			background-color: #eaecf0;

modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less

@@ -41,7 +41,7 @@
 	&-group {
 		cursor: default;
 		padding: @bundle-group-padding;
-		background-color: #f8f9fa;
+		background-color: @background-color-neutral-subtle;
 		box-shadow: inset 0 2px 0 0 rgba( 0, 0, 0, 0.05 );
 	}
 

modules/styles/mw.echo.ui.NotificationItemWidget.less

@@ -25,22 +25,33 @@
 		cursor: inherit;
 	}
 
-	&:hover {
-		text-decoration: none;
-		background-color: #ececec;
-	}
-
 	&:focus {
 		text-decoration: none;
 		box-shadow: @box-shadow-inset-medium @box-shadow-color-progressive--focus;
 		outline: @outline-base--focus;
 	}
 
+	&:hover {
+		text-decoration: none;
+		// FIXME: Non-standard design token. Replace with a standard token and revise skin-theme rules.
+		background-color: #ececec;
+
+		.skin-theme-clientpref-night & {
+			background-color: @background-color-interactive-subtle;
+		}
+
+		.skin-theme-clientpref-os & {
+			@media ( prefers-color-scheme: dark ) {
+				background-color: @background-color-interactive-subtle;
+			}
+		}
+	}
+
 	&-unread {
 		background-color: @background-color-base;
 
 		&:hover {
-			background-color: #f8f9fa;
+			background-color: @background-color-interactive-subtle;
 		}
 	}
 

modules/ui/mw.echo.ui.NotificationItemWidget.js

@@ -39,10 +39,18 @@
 		} );
 
 		let $icon;
+		const iconUrl = this.model.getIconURL();
 		// Icon
-		if ( this.model.getIconURL() ) {
+		if ( iconUrl ) {
+			// Only invert non colored images
+			/* eslint-disable es-x/no-array-prototype-includes */
+			const invertIconClass =
+				iconUrl.includes( 'progressive' ) ||
+				iconUrl.includes( 'constructive' ) ||
+				iconUrl.includes( 'failure' ) ? '' : 'skin-invert';
+			/* eslint-disable-next-line mediawiki/class-doc */
 			$icon = $( '<div>' )
-				.addClass( 'mw-echo-ui-notificationItemWidget-icon' )
+				.addClass( `mw-echo-ui-notificationItemWidget-icon ${ invertIconClass }` )
 				.append( $( '<img>' ).attr( {
 					src: this.model.getIconURL(),
 					role: 'presentation',

modules/ui/mw.echo.ui.js

@@ -8,6 +8,6 @@
 		 * @property {jQuery}
 		 */
 		$overlay: $( '<div>' )
-			.addClass( 'mw-echo-ui-overlay notheme' )
+			.addClass( 'mw-echo-ui-overlay' )
 	};
 }() );