Skip to content

Commit ee36960

Browse files
committed
Add link color rgb vars, document usage in Reboot docs
Fixes #37081
1 parent d34ced2 commit ee36960

File tree

3 files changed

+12
-3
lines changed

3 files changed

+12
-3
lines changed

scss/_reboot.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -241,11 +241,11 @@ sup { top: -.5em; }
241241
// Links
242242

243243
a {
244-
color: var(--#{$prefix}link-color);
244+
color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
245245
text-decoration: $link-decoration;
246246

247247
&:hover {
248-
color: var(--#{$prefix}link-hover-color);
248+
color: rgba(var(--#{$prefix}link-hover-color-rgb), var(--#{$prefix}link-opacity, 1));
249249
text-decoration: $link-hover-decoration;
250250
}
251251
}

scss/_root.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,8 @@
7171
--#{$prefix}heading-color: #{$headings-color};
7272
--#{$prefix}link-color: #{$link-color};
7373
--#{$prefix}link-hover-color: #{$link-hover-color};
74+
--#{$prefix}link-color-rgb: #{to-rgb($link-color)};
75+
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
7476

7577
--#{$prefix}code-color: #{$code-color};
7678
--#{$prefix}highlight-bg: #{$mark-bg};

site/content/docs/5.2/content/reboot.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,12 +97,19 @@ All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-
9797

9898
## Links
9999

100-
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.
100+
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.
101101

102102
{{< example >}}
103103
<a href="#">This is an example link</a>
104104
{{< /example >}}
105105

106+
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:
107+
108+
{{< example >}}
109+
<a href="#" style="--bs-link-opacity: .5">This is an example link</a>
110+
{{< /example >}}
111+
112+
106113
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.
107114

108115
{{< example >}}

0 commit comments

Comments
 (0)