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 <juderamond@gmail.com>

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