v5: Underline links

This PR changes the $link-text-decoration from none to underline to help improve link discovery. It also includes a fix to the docs sidebar to override that for our desired look. I've kind of missed underlines on our links throughout the docs at least, so this feels like a win-win to me.

With the work done in #30262, this also doesn't affect any existing Bootstrap component. All the components you'd expect will nullify the underline thanks to the changes from that PR.

Fixes #15304 (closed).

---

Let me know your thoughts @patrickhlauke and @twbs/css-review.

Preview: https://deploy-preview-30389--twbs-bootstrap.netlify.com/

scss/_buttons.scss

@@ -21,7 +21,7 @@
 
   &:hover {
     color: $body-color;
-    text-decoration: none;
+    text-decoration: if($link-hover-decoration == underline, none, null);
   }
 
   &:focus,

scss/_buttons.scss

@@ -21,7 +21,7 @@
 
   &:hover {
     color: $body-color;
-    text-decoration: none;
+    text-decoration: if($link-hover-decoration == underline, none, null);
   }
 
   &:focus,

scss/_dropdown.scss

@@ -150,7 +150,7 @@
   &:hover,
   &:focus {
     color: $dropdown-link-hover-color;
-    text-decoration: none;
+    text-decoration: if($link-hover-decoration == underline, none, null);
     @include gradient-bg($dropdown-link-hover-bg);
   }
 

scss/_nav.scss

@@ -18,7 +18,7 @@
 
   &:hover,
   &:focus {
-    text-decoration: none;
+    text-decoration: if($link-hover-decoration == underline, none, null);
   }
 
   // Disabled state lightens text

scss/_pagination.scss

@@ -14,7 +14,7 @@
   &:hover {
     z-index: 2;
     color: $pagination-hover-color;
-    text-decoration: none;
+    text-decoration: if($link-hover-decoration == underline, none, null);
     background-color: $pagination-hover-bg;
     border-color: $pagination-hover-border-color;
   }

scss/_variables.scss

@@ -249,9 +249,9 @@ $body-text-align:           null !default;
 // Style anchor elements.
 
 $link-color:                              $primary !default;
-$link-decoration:                         none !default;
+$link-decoration:                         underline !default;
 $link-hover-color:                        darken($link-color, 15%) !default;
-$link-hover-decoration:                   underline !default;
+$link-hover-decoration:                   null !default;
 // Darken percentage for links with `.text-*` class (e.g. `.text-success`)
 $emphasized-link-hover-darken-percentage: 15% !default;
 

site/assets/scss/_sidebar.scss

@@ -24,6 +24,7 @@
   padding: .25rem .625rem .25rem .5rem;
   font-weight: 600;
   color: rgba($black, .65);
+  text-decoration: none;
   @include border-radius(.25rem);
 
   > * { pointer-events: none; }
@@ -31,7 +32,6 @@
   &:hover,
   &:focus {
     color: rgba($black, .85);
-    text-decoration: none;
     background-color: rgba($bd-purple-bright, .1);
   }
 }
@@ -64,12 +64,12 @@
     padding: .25rem .5rem;
     @include font-size(.875rem);
     color: rgba($black, .65);
+    text-decoration: none;
     @include border-radius(.25rem);
 
     &:hover,
     &:focus {
       color: rgba($black, .85);
-      text-decoration: none;
       background-color: rgba($bd-purple-bright, .1);
     }
   }

site/assets/scss/_toc.scss

-// stylelint-disable selector-max-type, selector-max-combinators, selector-max-compound-selectors
+// stylelint-disable selector-max-type, selector-max-compound-selectors
 
 .bd-toc nav {
   padding-top: .125em;
@@ -14,6 +14,10 @@
     list-style-type: disc;
   }
 
+  a:not(:hover) {
+    text-decoration: none;
+  }
+
   a code {
     font: inherit;
   }