Improve link styles for background variants

assets/components/atoms/link/link-bg-variants.twig

@@ -0,0 +1,5 @@
+<p><strong class="pr-3">Dark:</strong> <span class="p-3 d-inline-block bg-dark"><a href="#">Teaching & PhD</a></span></p>
+<p><strong class="pr-3">Danger:</strong> <span class="p-3 d-inline-block bg-danger"><a href="#">Teaching & PhD</a></span></p>
+<p><strong class="pr-3">Success:</strong> <span class="p-3 d-inline-block bg-success"><a href="#">Teaching & PhD</a></span></p>
+<p><strong class="pr-3">Info:</strong> <span class="p-3 d-inline-block bg-info"><a href="#">Teaching & PhD</a></span></p>
+<p><strong class="pr-3">Warning:</strong> <span class="p-3 d-inline-block bg-warning"><a href="#">Teaching & PhD</a></span></p>

assets/components/atoms/link/link.scss

@@ -23,6 +23,27 @@ a {
       text-decoration-color: $body-color;
     }
   }
+
+  .text-white &,
+  &.text-white {
+    text-decoration-color: currentcolor;
+
+    @include hover-focus-active {
+      text-decoration-color: transparent;
+    }
+  }
+
+  // add styles for background color variants
+  @each $color, $value in $theme-colors {
+    .bg-#{$color} & {
+      color: color-yiq($value);
+      text-decoration-color: currentcolor;
+
+      @include hover-focus-active {
+        text-decoration-color: transparent;
+      }
+    }
+  }
 }
 
 a,
@@ -39,9 +60,6 @@ a:active {
   @include text-emphasis-variant-decoration(".text-#{$color}", $value);
 }
 
-// Special case for white links.
-@include text-emphasis-variant-decoration(".text-white", $white);
-
 // The link pretty allows you to have more cross-browser friendly link styles and the fancy focus box.
 // Removed in July 2023, text-decoration color is now well supported by all major broswers: https://caniuse.com/mdn-css_properties_text-decoration-color
 /*

assets/components/atoms/link/link.twig

@@ -1,2 +1,3 @@
 <p><strong class="pr-3">Regular link:</strong> <a href="#">Teaching & PhD</a></p>
-<p class="mt-4"><strong class="pr-3">Dark link:</strong> <span class="p-3 bg-dark"><a class="text-white" href="#">Teaching & PhD</a></span></p>
+<p><strong class="pr-3">Light background:</strong> <span class="p-3 d-inline-block bg-gray-100"><a href="#">Teaching & PhD</a></span></p>
+<p><strong class="pr-3">Dark background:</strong> <span class="p-3 d-inline-block bg-gray-600"><a class="text-white" href="#">Teaching & PhD</a></span></p>

assets/components/atoms/link/link.yml

@@ -15,6 +15,9 @@ notes: >
   The `link-collapse` class sets the link to have a red triangle and special
   styles.
 variants:
+  - name: bg-variants
+    title: Background variants
+    notes:
   - name: icon
     title: Icon
     notes: |