From 104e43cca424607b90d9be5863801797116c1438 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= <gael.poupard@orange.com>
Date: Mon, 6 Apr 2020 17:05:55 +0200
Subject: [PATCH] feat(colored links): restrict to primary and light, and
 ensure contrasts

---
 scss/helpers/_colored-links.scss              | 23 ++++++++++++++-----
 .../content/docs/4.3/helpers/colored-links.md |  7 ++----
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss
index 4eea8d333e..8a5a6eb440 100644
--- a/scss/helpers/_colored-links.scss
+++ b/scss/helpers/_colored-links.scss
@@ -1,12 +1,23 @@
 @each $color, $value in $theme-colors {
-  .link-#{$color} {
-    color: $value;
+  // Boosted mod: restrict to primary and light and ensure contrast
+  @if ($value == $primary) or ($value == $light) {
+    $contrast: color-contrast($value);
 
-    @if $emphasized-link-hover-darken-percentage != 0 {
-      &:hover,
-      &:focus {
-        color: darken($value, $emphasized-link-hover-darken-percentage);
+    .link-#{$color} {
+      color: $value;
+      background-color: $contrast;
+
+      @if $emphasized-link-hover-darken-percentage != 0 {
+        &:hover,
+        &:focus {
+          @if $contrast == $white {
+            color: darken($value, $emphasized-link-hover-darken-percentage);
+          } @else {
+            color: lighten($value, $emphasized-link-hover-darken-percentage);
+          }
+        }
       }
     }
   }
+  // End mod
 }
diff --git a/site/content/docs/4.3/helpers/colored-links.md b/site/content/docs/4.3/helpers/colored-links.md
index f75cae4275..c43ec46ec4 100644
--- a/site/content/docs/4.3/helpers/colored-links.md
+++ b/site/content/docs/4.3/helpers/colored-links.md
@@ -9,9 +9,6 @@ toc: false
 You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors#colors" >}}), these classes have a `:hover` and `:focus` state.
 
 {{< example >}}
-{{< colored-links.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-<a href="#" class="link-{{ .name }}">{{ .name | title }} link</a>
-{{- end -}}
-{{< /colored-links.inline >}}
+<a href="#" class="link-primary">Primary link</a>
+<a href="#" class="link-light">Light link</a>
 {{< /example >}}