From 6d037d4e9f6268863f51d506b1b15b4c190820f0 Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Mon, 3 Jun 2024 21:19:51 +0300
Subject: [PATCH] styles: Apply inversion on certain OOUI icons and indicators

In order for most OOUI grayscale icons and indicators to be inverted
correctly, we need to apply the inversion to a limited number of
elements by a general class.
Applying here to keep OOUI library MediaWiki agnostic.

Bug: T365764
Depends-On: Ib183cd7c28ea3fb68a6614b38362325560b426f8
Change-Id: I437db61c34cdcce8d3602b1354fa4addc98530fd
---
 .../CSSCustomProperties.less                  | 93 ++++++++++++-------
 1 file changed, 57 insertions(+), 36 deletions(-)

diff --git a/resources/skins.minerva.base.styles/CSSCustomProperties.less b/resources/skins.minerva.base.styles/CSSCustomProperties.less
index e21ceec7e..d18e5e032 100644
--- a/resources/skins.minerva.base.styles/CSSCustomProperties.less
+++ b/resources/skins.minerva.base.styles/CSSCustomProperties.less
@@ -29,33 +29,6 @@
 	// </T361717>
 }
 
-/**
-* == Forced night mode ==
-* Applies the night mode color palette per the users explicit preference,
-* regardless of system settings.
-*/
-html.skin-theme-clientpref-night {
-	color-scheme: dark;
-	.mixin-night-mode-palette();
-	// T363911 Temporarily override Codex variable for Vector night mode release
-	// Remove after task has been resolved and new color is available in Codex.
-	--color-link-red: #b97876;
-}
-
-/**
-* == Auto night mode ==
-* Applies the night mode color palette only in response to system settings.
-*/
-@media ( prefers-color-scheme: dark ) {
-	html.skin-theme-clientpref-os {
-		color-scheme: light dark;
-		.mixin-night-mode-palette();
-		// T363911 Temporarily override Codex variable for Vector night mode release
-		// Remove after task has been resolved and new color is available in Codex.
-		--color-link-red: #b97876;
-	}
-}
-
 /**
 * == Night-mode helpers ==
 * The following classes are provided to help third-parties deal with night mode when using the
@@ -92,16 +65,64 @@ html.skin-theme-clientpref-night {
 	color: @color-base;
 }
 
-// T365102 invert class specifically for image related elements
-html.skin-theme-clientpref-night .skin-invert-image img,
-html.skin-theme-clientpref-night .skin-invert {
-	filter: invert( 1 ) hue-rotate( 180deg );
-}
+/**
+* == Forced night mode ==
+* Applies the night mode color palette per the users explicit preference,
+* regardless of system settings.
+*/
+html.skin-theme-clientpref-night {
+	color-scheme: dark;
+	.mixin-night-mode-palette();
+	// T363911 Temporarily override Codex variable for Vector night mode release
+	// Remove after task has been resolved and new color is available in Codex.
+	--color-link-red: #b97876;
 
-@media ( prefers-color-scheme: dark ) {
-	// T365102 invert class specifically for image related elements
-	html.skin-theme-clientpref-os .skin-invert-image img,
-	html.skin-theme-clientpref-os .skin-invert {
+	.skin-invert,
+	.skin-invert-image img,
+	/* Special treatment of inverted OOUI icons, see T365764 */
+	.oo-ui-iconElement-icon:not( .oo-ui-image-progressive ):not( .oo-ui-image-destructive ):not( .oo-ui-checkboxInputWidget-checkIcon ),
+	.oo-ui-indicatorElement-indicator {
 		filter: invert( 1 ) hue-rotate( 180deg );
 	}
+
+	/* Do not apply invert to elements that are inside a notheme or a skin-invert class to avoid inversion in light theme or
+	double inversion in an already inverted element */
+	.skin-invert,
+	.notheme {
+		.oo-ui-iconElement-icon:not( .oo-ui-image-progressive ):not( .oo-ui-image-destructive ):not( .oo-ui-checkboxInputWidget-checkIcon ),
+		.oo-ui-indicatorElement-indicator {
+			filter: none !important;
+		}
+	}
+}
+
+/**
+* == Auto night mode ==
+* Applies the night mode color palette only in response to system settings.
+*/
+@media ( prefers-color-scheme: dark ) {
+	html.skin-theme-clientpref-os {
+		color-scheme: light dark;
+		.mixin-night-mode-palette();
+		// T363911 Temporarily override Codex variable for Vector night mode release
+		// Remove after task has been resolved and new color is available in Codex.
+		--color-link-red: #b97876;
+
+		.skin-invert,
+		.skin-invert-image img,
+		.oo-ui-iconElement-icon:not( .oo-ui-image-progressive ):not( .oo-ui-image-destructive ):not( .oo-ui-checkboxInputWidget-checkIcon ),
+		.oo-ui-indicatorElement-indicator {
+			filter: invert( 1 ) hue-rotate( 180deg );
+		}
+
+		/* Do not apply invert to elements that are inside a notheme or a skin-invert class to avoid inversion in light theme or
+		double inversion in an already inverted element */
+		.skin-invert,
+		.notheme {
+			.oo-ui-iconElement-icon:not( .oo-ui-image-progressive ):not( .oo-ui-image-destructive ):not( .oo-ui-checkboxInputWidget-checkIcon ),
+			.oo-ui-indicatorElement-indicator {
+				filter: none !important;
+			}
+		}
+	}
 }