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

3 files changed, 19 insertions, 14 deletions

diff --git a/resources/src/mediawiki.widgets/MediaSearch/mw.widgets.MediaResultWidget.css b/resources/src/mediawiki.widgets/MediaSearch/mw.widgets.MediaResultWidget.css
index 2a47fa2d37ab..e0c3d5e98287 100644
--- 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 4a59dae2b4a0..3d59f67f80a6 100644
--- 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 bbffe28920e7..c47cc60d44a6 100644
--- 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 {