X-Git-Url: https://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.rcfilters%2Fstyles%2Fmw.rcfilters.ui.TagItemWidget.less;h=e9c982a86ce07534345dcc006256c51c85dd39f7;hb=5905218e6971afafb46a4b880d676fe7bdea1b39;hp=1fb2fca6638e7ad731e10eef6125a8573bacbfd6;hpb=d5a7166771613dfe4ed9fb75fa5efeced6134bd1;p=lhc%2Fweb%2Fwiklou.git

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less
index 1fb2fca663..e9c982a86c 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less
@@ -1,15 +1,17 @@
+@import 'mediawiki.ui/variables';
 @import 'mw.rcfilters.mixins';
+@import 'mw.rcfilters.variables';
 
 .mw-rcfilters-ui-tagItemWidget {
 	// Background and color of the capsule widget need a bit
-	// more specificity to override ooui internals
+	// more specificity to override OOUI internals
 	&.oo-ui-flaggedElement-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled {
 		// Muted state
-		background-color: #eaecf0;
-		border-color: #c8ccd1;
+		background-color: @colorGray14;
+		border-color: @colorGray12;
 
 		.oo-ui-labelElement-label {
-			color: #72777d;
+			color: @colorGray7;
 		}
 		.oo-ui-buttonWidget {
 			opacity: @muted-opacity;
@@ -18,7 +20,7 @@
 
 	&.oo-ui-flaggedElement-invalid.oo-ui-tagItemWidget.oo-ui-widget-enabled {
 		.oo-ui-labelElement-label {
-			color: #b32424;
+			color: @colorDestructiveActive;
 		}
 	}
 
@@ -26,14 +28,14 @@
 	// the white background
 	// The specificity is fixed in the patch: https://gerrit.wikimedia.org/r/#/c/349525/
 	// and will be available in the next OOUI release.
-	.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle &-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
-		background-color: #eaf3ff;
-		border-color: #36c;
+	.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined &-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
+		background-color: @background-color-primary;
+		border-color: @colorProgressive;
 	}
 
 	&-popup-content {
 		padding: 0.5em;
-		color: #54595d;
+		color: @colorGray5;
 	}
 
 	&.oo-ui-labelElement .oo-ui-labelElement-label {
@@ -56,23 +58,23 @@
 			top: 50%;
 		}
 
-		&[data-color='c1']:before {
+		&[ data-color='c1' ]:before {
 			.mw-rcfilters-mixin-circle( @highlight-c1, 10px, ~'-5px 0.5em 0 0' );
 		}
 
-		&[data-color='c2']:before {
+		&[ data-color='c2' ]:before {
 			.mw-rcfilters-mixin-circle( @highlight-c2, 10px, ~'-5px 0.5em 0 0' );
 		}
 
-		&[data-color='c3']:before {
+		&[ data-color='c3' ]:before {
 			.mw-rcfilters-mixin-circle( @highlight-c3, 10px, ~'-5px 0.5em 0 0' );
 		}
 
-		&[data-color='c4']:before {
+		&[ data-color='c4' ]:before {
 			.mw-rcfilters-mixin-circle( @highlight-c4, 10px, ~'-5px 0.5em 0 0' );
 		}
 
-		&[data-color='c5']:before {
+		&[ data-color='c5' ]:before {
 			.mw-rcfilters-mixin-circle( @highlight-c5, 10px, ~'-5px 0.5em 0 0' );
 		}
 	}