Global links underlined by default (#3166)

* a links underline, a.quite added * added styles to omit header/footer * added default link styles for headlines and lockup area * minor :hover style alignment on cards-horiz, marquee-anchors, brick * removed dubs underline on links * removed styles overrides to support double in horiz-card, marquee-anch, brick * [MWPW-145672] Remove Gnav global link styles * [MWPW-161624] Link farm double underline on focus * Ensure sub text in anchors is underlined correctly * Ensure sub text in anchors is underlined correctly --------- Co-authored-by: thi64146 <thi64146@adobe.com>
adobecom · Nov 12, 2024 · 5d2107e · 5d2107e
1 parent 45f953f
commit 5d2107e
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 9 deletions.
diff --git a/libs/blocks/card-horizontal/card-horizontal.css b/libs/blocks/card-horizontal/card-horizontal.css
@@ -10,6 +10,7 @@
 
 .card-horizontal a {
   color: var(--text-color);
+  text-decoration: none;
 }
 
 .card-horizontal a:focus {

diff --git a/libs/blocks/global-footer/global-footer.css b/libs/blocks/global-footer/global-footer.css
@@ -11,6 +11,10 @@
   list-style-type: none;
 }
 
+.global-footer a {
+  text-decoration: unset;
+}
+
 .global-footer a:hover {
   text-decoration: none;
 }

diff --git a/libs/blocks/marquee-anchors/marquee-anchors.css b/libs/blocks/marquee-anchors/marquee-anchors.css
@@ -74,6 +74,7 @@ html {
   cursor: pointer;
   position: relative;
   color: var(--text-color);
+  text-decoration: none;
 }
 
 .marquee-anchors .links .anchor-link .heading-xs {

diff --git a/libs/blocks/text/link-farms.css b/libs/blocks/text/link-farms.css
@@ -37,8 +37,9 @@
   text-decoration: underline;
 }
 
-.link-farm.text-block a:hover {
+.link-farm.text-block a:is(:hover, :focus) {
   text-decoration-style: double;
+  outline-offset: 3px;
 }
 
 

diff --git a/libs/styles/iconography.css b/libs/styles/iconography.css
@@ -50,6 +50,12 @@ dealing w/ groups of media and associated text
 
 .lockup-area > * { line-height: 0; }
 
+.lockup-area a { text-decoration: none; }
+
+.lockup-area a:hover,
+.lockup-area a:focus,
+.lockup-area a:active { text-decoration: underline; }
+
 .center .lockup-area { justify-content: center; }
 .right .lockup-area { justify-content: flex-end; }
 

diff --git a/libs/styles/styles.css b/libs/styles/styles.css
@@ -737,6 +737,10 @@ header.global-navigation.has-promo {
   min-height: calc(var(--global-height-nav) + var(--global-height-navPromo));
 }
 
+header.global-navigation a {
+  text-decoration: unset;
+}
+
 @media (min-width: 900px) {
   header.global-navigation.has-breadcrumbs {
     padding-bottom: var(--global-height-breadcrumbs);
@@ -805,25 +809,46 @@ a.fragment {
 
 a {
   color: var(--link-color);
-  text-decoration: none;
+  text-decoration: underline;
 }
 
-a:hover {
-  text-decoration: underline;
+a:hover,
+a:focus,
+a:active {
   color: var(--link-hover-color);
 }
 
+a:has(> sub:only-child) { text-decoration: unset; }
+a > sub:only-child { text-decoration: underline; }
+
+/* Links Quiet */
+a.quiet,
+a.quiet:hover,
+a.quiet:focus,
+a.quiet:active {
+  text-decoration: none;
+}
+
 /* Links Static */
 a.static,
-a.static:hover {
+a.static:hover,
+a.static:focus,
+a.static:active  {
   color: var(--text-color);
-  text-decoration: underline;
 }
 
 .dark a.static,
-.dark a.static:hover {
+.dark a.static:hover,
+.dark a.static:focus,
+.dark a.static:active {
   color: var(--color-white);
-  text-decoration: underline;
+}
+
+:is(h1, h2, h3, h4, h5, h6) a,
+:is(h1, h2, h3, h4, h5, h6) a:hover,
+:is(h1, h2, h3, h4, h5, h6) a:focus,
+:is(h1, h2, h3, h4, h5, h6) a:active {
+  color: currentColor;
 }
 
 /* Buttons */
@@ -833,7 +858,6 @@ a.static:hover {
 
 .static-links a:not([class*="button"]) {
   color: inherit;
-  text-decoration: underline;
 }
 
 .copy-link {