feat(links): adjusts styling of link components

affects: @buildit/gravity-ui-web

Some of the legacy styles that apply or override colors on hyperlinks needed updating to work
properly with the new color system and match the target designs. This change also adds some
previously missing :focus styles (which use the same appearance as :hover) for better
accessbility.

packages/gravity-ui-web/src/sass/03-elements/_inline-text.scss

@@ -1,22 +1,19 @@
-a {
-  font-weight: grav-font-weight('primary', 'bold');
-
-  &[href] {
-    &:link {
-      @include grav-color-grp-b-apply('color', 'control', true);
-    }
+a[href] {
+  &:link {
+    @include grav-color-grp-b-apply('color', 'control', true);
+  }
 
-    &:visited {
-      @include grav-color-grp-b-apply('color', 'control-alt', true);
-    }
+  &:visited {
+    @include grav-color-grp-b-apply('color', 'control-alt', true);
+  }
 
-    &:hover {
-      @include grav-color-grp-b-apply('color', 'control-emphasis', true);
-    }
+  &:hover,
+  &:focus {
+    @include grav-color-grp-b-apply('color', 'control-emphasis', true);
+  }
 
-    &:active {
-      @include grav-color-grp-b-apply('color', 'control-active', true);
-    }
+  &:active {
+    @include grav-color-grp-b-apply('color', 'control-active', true);
   }
 }
 

packages/gravity-ui-web/src/sass/05-components/01-atoms/10-navigation/_00-nav-link.scss

@@ -1,19 +1,28 @@
 .grav-c-nav-link {
   display: inline-block;
   padding: $grav-sp-inset-squished-xs;
-  color: currentColor;
   text-decoration: none;
   white-space: nowrap;
 
   &[href] {
-    &:link,
     &:visited {
-      color: currentColor;
+      // Make visited links use some color as non-visited ones
+      @include grav-color-grp-b-apply('color', 'control', true);
     }
 
     &:hover,
-    &:active {
-      @include grav-color-grp-b-apply('color', 'neutral-emphasis', true);
+    &:focus {
+      // Need to re-instate the hover/focus color since the previous block
+      // that overrides the usual visited color will otherwise still apply.
+      // This is because these selectors have a higher specificity that
+      // the ones that apply the basic <a> styles.
+      @include grav-color-grp-b-apply('color', 'control-emphasis', true);
     }
   }
+
+  // Placeholder nav links are used to highlight the
+  // current page, so we want them to appear bold
+  &:not([href]) {
+    font-weight: grav-font-weight('primary', 'bold');
+  }
 }

packages/gravity-ui-web/src/sass/05-components/03-organisms/00-page-structure/_00-page-header.scss

@@ -24,19 +24,12 @@ body > header {
   .grav-c-logo {
     display: block;
     max-height: 33px; // Otherwise IE11 makes it 150px tall :-(
-    fill: currentColor;
 
     @media (min-width: $grav-page-heading-trigger-breakpoint) {
       width: 100%;
     }
   }
 
-
-  /* stylelint-disable-next-line selector-max-compound-selectors */
-  a:hover .grav-c-logo {
-    @include grav-color-grp-b-apply('fill', 'neutral-emphasis', true);
-  }
-
   .grav-c-toggle-menu {
     flex-shrink: 0;
 
@@ -84,6 +77,20 @@ body > header {
 
   a {
     display: block;
+
+    &:visited {
+      // Make visited logo link use some color as non-visited one
+      @include grav-color-grp-b-apply('color', 'control', true);
+    }
+
+    &:hover,
+    &:focus {
+      // Need to re-instate the hover/focus color since the previous block
+      // that overrides the usual visited color will otherwise still apply.
+      // This is because these selectors have a higher specificity that
+      // the ones that apply the basic <a> styles.
+      @include grav-color-grp-b-apply('color', 'control-emphasis', true);
+    }
   }
 
   @media (min-width: $grav-page-heading-trigger-breakpoint) {

packages/gravity-ui-web/src/sass/05-components/03-organisms/_card-basic.scss

@@ -60,11 +60,14 @@
     }
   }
 
-  > a:hover::after {
-    opacity: 0.75;
-  }
+  > a:hover,
+  > a:focus {
+    &::after {
+      opacity: 0.75;
+    }
 
-  > a:hover > svg {
-    opacity: 1;
+    > svg {
+      opacity: 1;
+    }
   }
 }