RCFilters: Align remaining outdated greys to WikimediaUI palette ones

Replacing abandoned grey colors with appropriate colors from WikimediaUI
color palette.

Additional changes:
* Also simplified selector specificity in one case as OOUI code has already
changed.

Bug: T172850
Change-Id: I01e84d9a4d03ba894cbb67114821036b0ffe1ddb

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
index 3b90f06..5a885ec 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
@@ -8,19 +8,18 @@
 }
 
 // This is a general mixin for a color circle
-.mw-rcfilters-mixin-circle( @color: white, @diameter: 2em, @padding: 0.5em, @border: false ) {
-       border-radius: 50%;
+.mw-rcfilters-mixin-circle( @color: #fff, @diameter: 2em, @padding: 0.5em, @border: false ) {
+       background-color: @color;
+       .box-sizing( border-box );
        min-width: @diameter;
        width: @diameter;
        min-height: @diameter;
        height: @diameter;
        margin: @padding;
-       .box-sizing( border-box );
-
-       background-color: @color;
+       border-radius: 50%;
 
-       & when (@border = true) {
-               border: 1px solid #565656;
+       & when ( @border = true ) {
+               border: 1px solid #54595d;
        }
 }
 

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less
index 964f27e..c09ca1e 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less
@@ -8,8 +8,7 @@
                padding: 0 0.75em;
                // Use a high specificity to override OOUI
                .oo-ui-optionWidget.oo-ui-labelElement &-title.oo-ui-labelElement-label {
-                       // TODO: Unify colors with official design palette
-                       color: #555a5d;
+                       color: #54595d;
                        .box-sizing( border-box );
                        display: inline-block;
                        line-height: normal;

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less
index 667f528..0adec46 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less
@@ -38,7 +38,7 @@
 
                                .mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true );
                                // Override border to dashed
-                               border: 1px dashed #565656;
+                               border: 1px dashed #54595d;
 
                                &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
                                &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less
index 86bfafb..75ea061 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less
@@ -6,11 +6,11 @@
        .box-sizing( border-box );
 
        &:not( :last-child ) {
-               border-bottom: solid 1px #eaecf0; // Base 80 AAA
+               border-bottom: 1px solid #eaecf0; // Base80 AAA
        }
 
        &-view-namespaces {
-               border-top: 5px solid #ccc;
+               border-top: 5px solid #c8ccd1;
 
                &:first-child,
                &.mw-rcfilters-ui-itemMenuOptionWidget-identifier-subject + &.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk {
@@ -19,7 +19,7 @@
        }
 
        &:hover {
-               background-color: #fbfbfb;
+               background-color: #f8f9fa;
        }
 
        .mw-rcfilters-ui-table {
@@ -37,7 +37,7 @@
                        color: #222;
                }
                &-desc {
-                       color: #464a4f;
+                       color: #54595d;
                        white-space: normal;
                }
        }

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less
index 8c54089..24e062e 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less
@@ -11,7 +11,7 @@
        &-noresults {
                display: none;
                padding: 0.5em;
-               color: #666;
+               color: #54595d;
 
                .oo-ui-menuSelectWidget-invisible & {
                        display: inline-block;

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 1fb2fca..26ea64c 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less
@@ -2,7 +2,7 @@
 
 .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;
@@ -26,7 +26,7 @@
        // 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 {
+       .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined &-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
                background-color: #eaf3ff;
                border-color: #36c;
        }