From 41b0b6c43468df81a5785e9777fbc2251ff62630 Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Thu, 11 Jun 2020 17:39:50 -0700
Subject: [PATCH] [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 | 8 ++++++++
 variables.less                                      | 2 ++
 2 files changed, 10 insertions(+)

diff --git a/resources/skins.vector.styles/common/normalize.less b/resources/skins.vector.styles/common/normalize.less
index cdd5331..a9241c5 100644
--- a/resources/skins.vector.styles/common/normalize.less
+++ b/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;
+}
diff --git a/variables.less b/variables.less
index 7212117..0206dc6 100644
--- a/variables.less
+++ b/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;