feat(core): ✨ use filter-invert CSS variable to flip color

This decouple the filter style from the class. Instead, filter-invert can be redefined if needed (e.g. :root.skin-citizen-dark)
StarCitizenTools · Jul 10, 2023 · 2bf2039 · 2bf2039
1 parent 9c59d24
commit 2bf2039
Show file tree

Hide file tree

Showing 34 changed files with 128 additions and 245 deletions.
diff --git a/resources/skins.citizen.styles/common/common.less b/resources/skins.citizen.styles/common/common.less
@@ -109,6 +109,10 @@ td {
 	font-size: 0.875rem;
 }
 
+.mw-indicator {
+	filter: var( --filter-invert );
+}
+
 video {
 	max-width: 100%; // Prevent overflow
 }
@@ -117,8 +121,6 @@ video {
 	color-scheme: dark;
 
 	.mw-indicator {
-		filter: invert( 1 ) hue-rotate( 180deg );
-
 		// Have to hardcode the color since the filter breaks the color
 		a {
 			color: @color-primary;

diff --git a/resources/skins.citizen.styles/common/theme.less b/resources/skins.citizen.styles/common/theme.less
@@ -74,6 +74,8 @@ a {
 	--surface-shadow: var( --color-primary__h ), 50%, 3%;
 	--shadow-strength: 0.8;
 
+	--filter-invert: invert( 1 ) hue-rotate( 180deg );
+
 	// FIXME: Browsers seem to treat GRAD differently, disabling for now
 	// Dark theme usually have an illusion of thicker fonts
 	// So we have to tune it back

diff --git a/resources/skins.citizen.styles/components/Header.less b/resources/skins.citizen.styles/components/Header.less
@@ -44,6 +44,7 @@
 			width: var( --header-icon-size );
 			height: var( --header-icon-size );
 			contain: strict;
+			filter: var( --filter-invert );
 		}
 
 		&Icon,
@@ -127,14 +128,6 @@
 	}
 }
 
-.skin-citizen-dark {
-	.citizen-header__button {
-		&Icon {
-			filter: invert( 1 );
-		}
-	}
-}
-
 // Notifications
 #p-notifications {
 	ul {

diff --git a/resources/skins.citizen.styles/components/Menu.less b/resources/skins.citizen.styles/components/Menu.less
@@ -63,6 +63,7 @@
 		background-repeat: no-repeat;
 		background-size: contain;
 		content: '';
+		filter: var( --filter-invert );
 		opacity: var( --opacity-icon-base );
 	}
 }
@@ -113,14 +114,8 @@
 	&-empty {
 		display: none !important;
 	}
-}
-
-.skin-citizen-dark {
-	.citizen-ui-icon::before {
-		filter: invert( 1 );
-	}
 
-	.mw-portlet a::after {
-		filter: invert( 1 );
+	a::after {
+		filter: var( --filter-invert );
 	}
 }
diff --git a/resources/skins.citizen.styles/components/Pagetools.less b/resources/skins.citizen.styles/components/Pagetools.less
@@ -224,12 +224,6 @@
 	}
 }
 
-.skin-citizen-dark {
-	#ca-ve-edit > a::before {
-		filter: invert( 1 );
-	}
-}
-
 // Checkbox hack
 #page-actions-more,
 #citizen-languages {

diff --git a/resources/skins.citizen.styles/components/TableOfContents.less b/resources/skins.citizen.styles/components/TableOfContents.less
@@ -13,6 +13,7 @@
 			width: 0.875rem;
 			height: 0.875rem;
 			content: '';
+			filter: var( --filter-invert );
 			opacity: var( --opacity-icon-base );
 		}
 
@@ -125,12 +126,6 @@
 	}
 }
 
-.skin-citizen-dark {
-	.citizen-toc__top::before {
-		filter: invert( 1 );
-	}
-}
-
 // Move down when site header is hidden
 @media ( max-width: ( @width-breakpoint-tablet ) ) {
 	.citizen-toc {

diff --git a/resources/skins.citizen.styles/skinning/interface-edit-section-links.less b/resources/skins.citizen.styles/skinning/interface-edit-section-links.less
@@ -26,6 +26,10 @@
 		border-radius: var( --border-radius--small );
 		font-size: 0.875rem;
 
+		&::before {
+			filter: var( --filter-invert );
+		}
+
 		&:hover {
 			background-color: var( --background-color-quiet--hover );
 		}
@@ -75,10 +79,3 @@
 	/* @noflip */
 	margin-left: 0;
 }
-
-.skin-citizen-dark {
-	// Flip icon for dark mode
-	.mw-editsection > a::before {
-		filter: invert( 1 );
-	}
-}
diff --git a/skinStyles/extensions/Cargo/ext.cargo.main.less b/skinStyles/extensions/Cargo/ext.cargo.main.less
@@ -77,13 +77,10 @@ div.cargoReplacementTableInfo {
 	background-color: transparent;
 }
 
-/* Flip icons in dark mode */
-.skin-citizen-dark {
-	.cargoQueryTooltipIcon,
-	.addButton,
-	.deleteButton {
-		filter: invert( 1 ) hue-rotate( 180deg );
-	}
+.cargoQueryTooltipIcon,
+.addButton,
+.deleteButton {
+	filter: var( --filter-invert );
 }
 
 div.specialCargoQuery-extraPane {

diff --git a/skinStyles/extensions/DiscussionTools/ext.discussionTools.init.styles.less b/skinStyles/extensions/DiscussionTools/ext.discussionTools.init.styles.less
@@ -68,10 +68,7 @@
 			background-repeat: no-repeat;
 			background-size: 1.125rem;
 			content: '';
-
-			.skin-citizen-dark & {
-				filter: invert( 1 );
-			}
+			filter: var( --filter-invert );
 		}
 
 		&[ data-mw-subscribed='1' ]::before {

diff --git a/skinStyles/extensions/Echo/ext.echo.styles.badge.less b/skinStyles/extensions/Echo/ext.echo.styles.badge.less
@@ -20,6 +20,7 @@
 		background-position: center;
 		background-repeat: no-repeat;
 		background-size: var( --header-icon-size );
+		filter: var( --filter-invert );
 		opacity: var( --opacity-icon-base );
 
 		&:hover {
@@ -44,6 +45,8 @@
 			border-color: var( --color-destructive );
 			border-radius: var( --border-radius--pill );
 			background-color: var( --color-destructive );
+			// Re-invert indicator color
+			filter: var( --filter-invert );
 			font-size: 0.65rem;
 		}
 
@@ -90,18 +93,3 @@
 		background-color: var( --background-color-quiet--active );
 	}
 }
-
-// Dark mode icon
-.skin-citizen-dark {
-	#pt-notifications-alert,
-	#pt-notifications-notice {
-		.mw-echo-notifications-badge {
-			filter: invert( 1 ) hue-rotate( 180deg );
-
-			// Re-invert indicator color
-			&::after {
-				filter: invert( 1 ) hue-rotate( 180deg );
-			}
-		}
-	}
-}
diff --git a/skinStyles/extensions/Graph/ext.graph.styles.less b/skinStyles/extensions/Graph/ext.graph.styles.less
@@ -13,12 +13,9 @@
 		overflow: auto;
 		min-width: auto !important;
 		max-width: 100%;
-	}
 
-	/* dark mode */
-	&-dark {
-		.mw-graph canvas {
-			filter: invert( 1 ) hue-rotate( 180deg );
+		canvas {
+			filter: var( --filter-invert );
 		}
 	}
 }

diff --git a/skinStyles/extensions/Lingo/ext.Lingo.less b/skinStyles/extensions/Lingo/ext.Lingo.less
@@ -31,10 +31,8 @@
 	}
 }
 
-.skin-citizen-dark {
-	.mw-lingo-definition-link {
-		& > a::before {
-			filter: invert( 1 );
-		}
+.mw-lingo-definition-link {
+	& > a::before {
+		filter: var( --filter-invert );
 	}
 }
diff --git a/skinStyles/extensions/MsUpload/ext.MsUpload.less b/skinStyles/extensions/MsUpload/ext.MsUpload.less
@@ -112,18 +112,14 @@
 	&-bottom #msupload-files {
 		background-image: url( data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E upload %3C/title%3E%3Cpath d='M17 12v5H3v-5H1v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z'/%3E%3Cpath d='M10 1 5 7h4v8h2V7h4z'/%3E%3C/svg%3E%0A );
 	}
+
+	&-container.start-loading,
+	&-select,
+	&-bottom #msupload-files {
+		filter: var( --filter-invert );
+	}
 }
 
 .drop-over {
 	background-color: var( --background-color-success );
 }
-
-.skin-citizen-dark {
-	#msupload {
-		&-container.start-loading,
-		&-select,
-		&-bottom #msupload-files {
-			filter: invert( 1 ) hue-rotate( 180deg );
-		}
-	}
-}
diff --git a/skinStyles/extensions/Score/ext.score.popup.less b/skinStyles/extensions/Score/ext.score.popup.less
@@ -8,6 +8,6 @@
  * Date: 2023-06-10
  */
 
-.skin-citizen-dark .mw-ext-score img {
-	filter: hue-rotate( 180deg ) invert( 1 );
+.mw-ext-score img {
+	filter: var( --filter-invert );
 }
diff --git a/skinStyles/extensions/SemanticMediaWiki/ext.smw.style.less b/skinStyles/extensions/SemanticMediaWiki/ext.smw.style.less
@@ -645,10 +645,7 @@ input:checked + .smw-indicator-accordion-tab-label::after {
 }
 */
 
-// Dark theme icon
 // It is not great but it works
-.skin-citizen-dark {
-	*[ class^='smw-icon-' ] {
-		filter: invert( 1 ) hue-rotate( 180deg );
-	}
+*[ class^='smw-icon-' ] {
+	filter: var( --filter-invert );
 }
diff --git a/skinStyles/extensions/TabberNeue/ext.tabberNeue.legacy.less b/skinStyles/extensions/TabberNeue/ext.tabberNeue.legacy.less
@@ -79,17 +79,10 @@
 						opacity: var( --opacity-icon-base--active );
 					}
 				}
-			}
-		}
-	}
-}
 
-.skin-citizen-dark {
-	.tabber__header {
-		&__prev,
-		&__next {
-			&::after {
-				filter: invert( 1 );
+				&::after {
+					filter: var( --filter-invert );
+				}
 			}
 		}
 	}

diff --git a/skinStyles/extensions/UniversalLanguageSelector/ext.uls.common.less b/skinStyles/extensions/UniversalLanguageSelector/ext.uls.common.less
@@ -34,6 +34,7 @@
 
 .uls-icon-back {
 	border-right: 0; // filter invert does not like it
+	filter: var( --filter-invert );
 	opacity: var( --opacity-icon-base );
 
 	&:hover {
@@ -45,10 +46,6 @@
 	}
 }
 
-.skin-citizen-dark .uls-icon-back {
-	filter: invert( 1 ) hue-rotate( 180deg );
-}
-
 .uls-menu .uls-no-results-view {
 	.uls-no-found-more {
 		background-color: var( --color-surface-1 );

diff --git a/skinStyles/extensions/UniversalLanguageSelector/ext.uls.compactlinks.less b/skinStyles/extensions/UniversalLanguageSelector/ext.uls.compactlinks.less
@@ -14,11 +14,9 @@
 	background-color: var( --color-surface-4 );
 }
 
-.skin-citizen-dark {
-	#p-lang .mw-interlanguage-selector,
-	#p-lang .mw-interlanguage-selector:active {
-		filter: invert( 1 ) hue-rotate( 180deg );
-	}
+#p-lang .mw-interlanguage-selector,
+#p-lang .mw-interlanguage-selector:active {
+	filter: var( --filter-invert );
 }
 
 .interlanguage-uls-menu {

diff --git a/skinStyles/extensions/UniversalLanguageSelector/ext.uls.displaysettings.less b/skinStyles/extensions/UniversalLanguageSelector/ext.uls.displaysettings.less
@@ -16,12 +16,10 @@
 	color: var( --color-base );
 }
 
-.skin-citizen-dark .uls-ime-disable-link {
-	filter: invert( 1 ) hue-rotate( 180deg );
-}
-
-.skin-citizen-dark .uls-ime-more-settings-link {
-	filter: invert( 1 ) hue-rotate( 180deg );
+.uls-ime-disable-link,
+.uls-ime-more-settings-link,
+.ime-checked .ime-perime-help {
+	filter: var( --filter-invert );
 }
 
 .uls-ime-menu-settings-item > a:hover {
@@ -46,10 +44,6 @@
 	color: var( --color-primary );
 }
 
-.skin-citizen-dark .ime-checked .ime-perime-help {
-	filter: invert( 1 ) hue-rotate( 180deg );
-}
-
 /* ext.uls.displaysettings.less */
 .ext-uls-sub-panel {
 	border-top-color: var( --border-color-base );

diff --git a/skinStyles/extensions/UniversalLanguageSelector/ext.uls.interface.less b/skinStyles/extensions/UniversalLanguageSelector/ext.uls.interface.less
@@ -18,16 +18,10 @@
 		&:hover {
 			color: var( --color-base );
 		}
-	}
-}
 
-.skin-citizen-dark {
-	#uls-settings-block {
-		> button {
-			&.display-settings-block,
-			&.input-settings-block {
-				filter: invert( 1 ) hue-rotate( 180deg );
-			}
+		&.display-settings-block,
+		&.input-settings-block {
+			filter: var( --filter-invert );
 		}
 	}
 }
diff --git a/skinStyles/extensions/UniversalLanguageSelector/ext.uls.interlanguage.less b/skinStyles/extensions/UniversalLanguageSelector/ext.uls.interlanguage.less
@@ -9,11 +9,9 @@
 */
 
 #p-lang .uls-settings-trigger {
+	filter: var( --filter-invert );
+
 	&:focus {
 		outline-color: var( --color-primary );
 	}
 }
-
-.skin-citizen-dark #p-lang .uls-settings-trigger {
-	filter: invert( 1 ) hue-rotate( 180deg );
-}