widgets: Replace outdated colors with WikimediaUI palette ones

Replacing outdated colors in core widgets with WikimediaUI color
palette ones. Also increasing contrast in one case ensuring
WCAG 2.0 level AA conformance.

Bug: T172850
Change-Id: Ic7cf0842275529372cdfbfddad4eb63fec4847ce

diff --git a/resources/src/mediawiki.widgets/MediaSearch/mw.widgets.MediaResultWidget.css b/resources/src/mediawiki.widgets/MediaSearch/mw.widgets.MediaResultWidget.css
index 2a47fa2..e0c3d5e 100644 (file)
--- a/resources/src/mediawiki.widgets/MediaSearch/mw.widgets.MediaResultWidget.css
+++ b/resources/src/mediawiki.widgets/MediaSearch/mw.widgets.MediaResultWidget.css
@@ -16,7 +16,7 @@
 }
 
 .mw-widget-mediaResultWidget-error {
-       background-color: #f3f3f3;
+       background-color: #f8f9fa;
 }
 
 .mw-widget-mediaResultWidget-thumbnail {
@@ -43,12 +43,17 @@
        bottom: 0;
        left: 0;
        right: 0;
-       box-shadow: inset 0 0 0 1px #ccc;
+       box-shadow: inset 0 0 0 1px #c8ccd1;
 }
 
 .mw-widget-mediaResultWidget.oo-ui-optionWidget-highlighted,
 .mw-widget-mediaResultWidget.oo-ui-optionWidget-selected {
-       box-shadow: 0 0 0.3em #a7dcff, 0 0 0 #fff;
+       box-shadow: 0 0 2px #36c;
+}
+
+.mw-widget-mediaResultWidget.oo-ui-optionWidget-highlighted .mw-widget-mediaResultWidget-overlay,
+.mw-widget-mediaResultWidget.oo-ui-optionWidget-selected .mw-widget-mediaResultWidget-overlay {
+       box-shadow: inset 0 0 0 1px #36c;
 }
 
 .mw-widget-mediaResultWidget-error .mw-widget-mediaResultWidget-thumbnail {

diff --git a/resources/src/mediawiki.widgets/mw.widgets.StashedFileWidget.less b/resources/src/mediawiki.widgets/mw.widgets.StashedFileWidget.less
index 4a59dae..3d59f67 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.StashedFileWidget.less
+++ b/resources/src/mediawiki.widgets/mw.widgets.StashedFileWidget.less
@@ -23,7 +23,7 @@
 .mw-widgets-stashedFileWidget-info {
        height: 2.4em;
        background-color: #fff;
-       border: 1px solid #ccc;
+       border: 1px solid #c8ccd1;
        border-radius: 2px;
        width: 100%;
        display: table-cell;
@@ -49,7 +49,7 @@
                        float: left;
                }
                > .mw-widgets-stashedFileWidget-fileType {
-                       color: #888;
+                       color: #72777d;
                        float: right;
                }
        }
@@ -77,14 +77,14 @@
 
        &.oo-ui-widget-disabled {
                .mw-widgets-stashedFileWidget-info {
-                       color: #ccc;
+                       background-color: #eaecf0;
+                       color: #72777d;
+                       border-color: #c8ccd1;
                        text-shadow: 0 1px 1px #fff;
-                       border-color: #ddd;
-                       background-color: #f3f3f3;
 
                        > .oo-ui-iconElement-icon,
                        > .oo-ui-indicatorElement-indicator {
-                               opacity: 0.2;
+                               opacity: 0.15;
                        }
                }
        }
@@ -96,7 +96,7 @@
        text-align: left;
        padding: 0;
        background-color: #fff;
-       border: 1px solid #ccc;
+       border: 1px solid #c8ccd1;
        margin-bottom: 0.5em;
        vertical-align: middle;
        overflow: hidden;
@@ -115,7 +115,7 @@
 
                > .mw-widgets-stashedFileWidget-noThumbnail-icon {
                        opacity: 0.4;
-                       background-color: #ccc;
+                       background-color: #c8ccd1;
                        height: 5.5em;
                        width: 5.5em;
                }
@@ -157,7 +157,7 @@
        }
 
        .mw-widgets-stashedFileWidget-label {
-               color: #ccc;
+               color: #c8ccd1;
                right: 0.5em;
        }
 

diff --git a/resources/src/mediawiki.widgets/mw.widgets.TitleWidget.less b/resources/src/mediawiki.widgets/mw.widgets.TitleWidget.less
index bbffe28..c47cc60 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.TitleWidget.less
+++ b/resources/src/mediawiki.widgets/mw.widgets.TitleWidget.less
@@ -10,7 +10,7 @@
                line-height: normal;
 
                &-description {
-                       color: #888;
+                       color: #72777d;
                }
        }
 
@@ -37,7 +37,7 @@
                                        height: 3.75em;
                                        left: 0;
                                        &:not( .mw-widget-titleOptionWidget-hasImage ) {
-                                               background-color: #ccc;
+                                               background-color: #c8ccd1;
                                                opacity: 0.4;
                                        }
                                        &.mw-widget-titleOptionWidget-hasImage {