feat(colored links): restrict to primary and light, and ensure contrasts

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
 }

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 >}}