“Components”: Clarify focus state of “Links” (wikimedia#385)

Integrating recent changes in Vector skin with outline-color in
https://phabricator.wikimedia.org/T245887

components/links.html

@@ -109,11 +109,11 @@ <h2>States of links</h2>
 							<img src="../img/components/links_states.svg" alt="links states">
 							<figcaption class="figure__caption"></figcaption>
 						</figure>
-						<p>Links don't feature a disabled state. Consider using <a href="buttons.html#type-quiet-buttons">quiet buttons</a> for those applications instead.</p>
+						<p>Links focus outline is the default browser focus, here Blink based browsers only with outline color amendment to <span class="color-hint" style="--color-hint: #36c;" title="#36c">Accent50</span>. This varies in different browsers.<br>Links don't feature a disabled state. Consider using <a href="buttons.html#type-quiet-buttons">quiet buttons</a> for those applications instead.</p>
 					</section>
 					<section id="types">
 						<h2>Types</h2>
-						<p>By default links are only underlined on interaction (hover, active).</p>
+						<p>By default, links are only underlined on interaction (hover, active).</p>
 
 						<h3>Underlined links</h3>
 						<p>To suit user preference and for accessibility reasons MediaWiki also provides a setting to always underline links.</p>

css/build/wmui-style-guide.css

@@ -764,6 +764,11 @@ sup {
 	clear: both;
 }
 /* ::: Text-formatting ::: */
+/* Support Blink based browsers. */
+/* They use `outline` for focus styles, we're only amending the color here, see T245887. */
+:focus {
+	outline-color: #36c;
+}
 .is-complementary,
 .is-subtle {
 	color: #72777d;

css/wmui-style-guide.dev.css

@@ -13,6 +13,7 @@
 	--width-site-desktop-wide: 1140px;
 	--border-color-heading: var( --wmui-color-base80 );
 	--border-width-heading: 3px;
+	--outline-color-base--focus: var( --color-primary--focus );
 	/* HACK; Add Georgia to serif fallback as long as WikimediaUI Base isn't updated */
 	--font-family-serif--fallback: Georgia, serif; /* stylelint-disable-line value-keyword-case */
 	--font-weight-base: 400;
@@ -283,6 +284,12 @@ sup {
 }
 
 /* ::: Text-formatting ::: */
+/* Support Blink based browsers. */
+/* They use `outline` for focus styles, we're only amending the color here, see T245887. */
+:focus {
+	outline-color: var( --outline-color-base--focus );
+}
+
 .is-complementary,
 .is-subtle {
 	color: var( --color-base--subtle );