[less] Normalize focus styles in Blink based browsers

Normalizing focus styles in Blink based browsers and aligning to
Design Style Guide components.

Bug: T245887
Change-Id: I4d571dcbbada5edffbfee631c8b438cf7c8d273a

resources/skins.vector.styles/common/normalize.less

@@ -4,9 +4,17 @@
  *
  */
 
+@import '../../../variables.less';
+
 html,
 body {
 	height: 100%;
 	margin: 0;
 	padding: 0;
 }
+
+// Support Blink based browsers.
+// They use `outline` for focus styles, we're only amending the color here, see T245887.
+:focus {
+	outline-color: @outline-color-base--focus;
+}

variables.less

@@ -47,6 +47,8 @@
 @background-color-frameless--hover: rgba( 0, 24, 73, 7/255 ); // equivalent to @wmui-color-base90 on white
 @color-primary: #36c; // wikimedia-ui-base.less
 
+@outline-color-base--focus: @color-primary;
+
 @font-size-base: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
 @font-size-reset: @font-size-root;
 @font-size-heading-1: 1.8em;