Update colored links, add new `.link-body-emphasis` helper (#37833)

* Rewrite colored links to use color property again instead of --bs-link-color-rgb value because nav links and more do not set --bs-link-color-rgb

* Update bundlewatch

* Document it

Co-authored-by: Julien Déramond <[email protected]>

3 files changed, 25 insertions, 5 deletions

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index cc16c47b7..5525f13d5 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -26,11 +26,11 @@
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "32.0 kB"
+      "maxSize": "32.25 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "30.0 kB"
+      "maxSize": "30.25 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",
diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss
index 06c8ce412..6d3595af7 100644
--- a/scss/helpers/_colored-links.scss
+++ b/scss/helpers/_colored-links.scss
@@ -3,16 +3,30 @@
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in $theme-colors {
   .link-#{$color} {
-    --#{$prefix}link-color-rgb: #{to-rgb($value)};
-    text-decoration-color: RGBA(to-rgb($value), var(--#{$prefix}link-underline-opacity, 1));
+    color: RGBA(var(--#{$prefix}#{$color}-rgb, var(--#{$prefix}link-opacity, 1)));
+    text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1));
 
     @if $link-shade-percentage != 0 {
       &:hover,
       &:focus {
         $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
-        --#{$prefix}link-color-rgb: #{to-rgb($hover-color)};
+        color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1));
         text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1));
       }
     }
   }
 }
+
+// One-off special link helper as a bridge until v6
+.link-body-emphasis {
+  color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1));
+  text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1));
+
+  @if $link-shade-percentage != 0 {
+    &:hover,
+    &:focus {
+      color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75));
+      text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75));
+    }
+  }
+}
diff --git a/site/content/docs/5.3/helpers/colored-links.md b/site/content/docs/5.3/helpers/colored-links.md
index 9cdd0fad0..6a3dbe4b7 100644
--- a/site/content/docs/5.3/helpers/colored-links.md
+++ b/site/content/docs/5.3/helpers/colored-links.md
@@ -10,12 +10,17 @@ toc: true
 
 You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
 
+{{< callout info >}}
+**Heads up!** `.link-body-emphasis` is currently the only colored link that adapts to color modes. It's treated as a special case until v6 arrives and we can more thoroughly rebuild our theme colors for color modes. Until then, it's a unique, high-contrast link color with custom `:hover` and `:focus` styles. However, it still responds to the new link utilities.
+{{< /callout >}}
+
 {{< example >}}
 {{< colored-links.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
 <p><a href="#" class="link-{{ .name }}">{{ .name | title }} link</a></p>
 {{- end -}}
 {{< /colored-links.inline >}}
+<p><a href="#" class="link-body-emphasis">Emphasis link</a></p>
 {{< /example >}}
 
 {{< callout info >}}
@@ -34,4 +39,5 @@ Colored links can also be modified by our [link utilities]({{< docsref "/utiliti
 <p><a href="#" class="link-{{ .name }} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">{{ .name | title }} link</a></p>
 {{- end -}}
 {{< /colored-links.inline >}}
+<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>
 {{< /example >}}