Add link color rgb vars, document usage in Reboot docs

Fixes #37081
twbs · Oct 6, 2022 · e867054 · e867054
1 parent 74d10fc
commit e867054
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -241,11 +241,11 @@ sup { top: -.5em; }
 // Links
 
 a {
-  color: var(--#{$prefix}link-color);
+  color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
   text-decoration: $link-decoration;
 
   &:hover {
-    color: var(--#{$prefix}link-hover-color);
+    color: rgba(var(--#{$prefix}link-hover-color-rgb), var(--#{$prefix}link-opacity, 1));
     text-decoration: $link-hover-decoration;
   }
 }

diff --git a/scss/_root.scss b/scss/_root.scss
@@ -71,6 +71,8 @@
   --#{$prefix}heading-color: #{$headings-color};
   --#{$prefix}link-color: #{$link-color};
   --#{$prefix}link-hover-color: #{$link-hover-color};
+  --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
+  --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
 
   --#{$prefix}code-color: #{$code-color};
   --#{$prefix}highlight-bg: #{$mark-bg};

diff --git a/site/content/docs/5.2/content/reboot.md b/site/content/docs/5.2/content/reboot.md
@@ -97,12 +97,19 @@ All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-
 
 ## Links
 
-Hyperlinks have a default `color` and underline applied. While links change on `:hover`, they don't change based on whether someone `:visited` the link. They also receive no special `:focus` styles.
+Links have a default `color` and underline applied. While links change on `:hover`, they don't change based on whether someone `:visited` the link. They also receive no special `:focus` styles.
 
 {{< example >}}
 <a href="#">This is an example link</a>
 {{< /example >}}
 
+As of v5.3.x, link `color` is set using `rgba()` and new `-rgb` CSS variables, allowing for easy customization of link color opacity. Change the link color opacity with the `--bs-link-opacity` CSS variable:
+
+{{< example >}}
+<a href="#" style="--bs-link-opacity: .5">This is an example link</a>
+{{< /example >}}
+
+
 Placeholder links—those without an `href`—are targeted with a more specific selector and have their `color` and `text-decoration` reset to their default values.
 
 {{< example >}}