From 9004a58c00d42ee60664adc213c820c6a1fb54ef Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Mon, 10 Apr 2023 09:46:52 -0700
Subject: [PATCH] Improve colored links interaction with link utilities
 (#38398)

* Fix missing paren in colored links color

* Restore important flag on colored links color and text-decoration-color for better interaction with link utilities

* Mention in migration guide
---
 scss/helpers/_colored-links.scss   | 18 +++++++++---------
 site/content/docs/5.3/migration.md |  4 ++++
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss
index 6d3595af71..306a04eddc 100644
--- a/scss/helpers/_colored-links.scss
+++ b/scss/helpers/_colored-links.scss
@@ -1,17 +1,17 @@
-// stylelint-disable function-name-case
+// stylelint-disable function-name-case, declaration-no-important
 
 // 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} {
-    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));
+    color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) !important;
+    text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) !important;
 
     @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));
-        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));
+        color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) !important;
+        text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) !important;
       }
     }
   }
@@ -19,14 +19,14 @@
 
 // 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));
+  color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) !important;
+  text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) !important;
 
   @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));
+      color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) !important;
+      text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) !important;
     }
   }
 }
diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
index 19270b1cce..99575b561b 100644
--- a/site/content/docs/5.3/migration.md
+++ b/site/content/docs/5.3/migration.md
@@ -11,6 +11,10 @@ toc: true
 
 If you're migrating from our previous alpha releases of v5.3.0, please review their changes in addition to this section.
 
+### Helpers
+
+- [Colored links]({{< docsref "/helpers/colored-links" >}}) once again have `!important` so they work better with our newly added link utilities.
+
 ### Utilities
 
 - Added new `.d-inline-grid` [display utility]({{< docsref "/utilities/display" >}}).