US198282 set hover/focus for accordion header to underline/blue border

Author: chrisdo1

elements/pfe-accordion/src/pfe-accordion-header.scss

@@ -19,6 +19,7 @@
     &[aria-expanded="true"]::after {
         @include pfe-chevron-expanded-true;
     }
+
     &[aria-expanded="false"]::after {
         @include pfe-chevron-expanded-false;
     }
@@ -70,9 +71,6 @@
   transition: transform 0.3s #{pfe-var(animation-timing)};
 }
 
-
-
-
 /// ===========================================================================
 /// COLOR OVERRIDES
 /// ===========================================================================

elements/pfe-sass/mixins/_mixins.scss

@@ -260,7 +260,7 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b
 @mixin pfe-trigger-button($theme: light, $align: left) {
     --pfe-accordion--main:               transparent;
     --pfe-accordion--aux:                #{pfe-color(surface--lightest--text)};
-    --pfe-accordion--focus:              #{pfe-color(surface--lightest--link--focus)};
+    --pfe-accordion--focus:              #{pfe-color(surface--lightest--link)};
     --pfe-accordion--border-left:        #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} transparent;
     --pfe-accordion--border-right:       #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;
     --pfe-accordion--border-bottom:  0px;
@@ -287,6 +287,7 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b
         outline: none;
         border-left-color:  var(--pfe-accordion--focus);
         z-index: 2;
+        text-decoration: underline;
     }
 
     &::-moz-focus-inner {
@@ -327,21 +328,21 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b
 @mixin pfe-trigger-color-light {
     --pfe-accordion--main:         transparent;
     --pfe-accordion--aux:          #{pfe-color(surface--lightest--text)};
-    --pfe-accordion--focus:        #{pfe-color(surface--lightest--link--focus)};
+    --pfe-accordion--focus:        #{pfe-color(surface--lightest--link)};
     --pfe-accordion--border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
 }
 
 @mixin pfe-trigger-color-light-expanded {
     --pfe-accordion--main:              #{pfe-color(surface--lightest)};
     --pfe-accordion--aux:               #{pfe-color(surface--lightest--text)};
-    --pfe-accordion--focus:             #{pfe-color(surface--lightest--link--focus)};
+    --pfe-accordion--focus:             #{pfe-color(surface--lightest--link)};
     --pfe-accordion--border-left:       #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)};
-    --pfe-accordion--border-right:      #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
+    --pfe-accordion--border-right:      #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest-link)};
 }
 @mixin pfe-trigger-color-lightest {
   --pfe-accordion--main:          #{pfe-color(surface--lightest)};
   --pfe-accordion--aux:           #{pfe-color(surface--lightest--text)};
-  --pfe-accordion--focus:         #{pfe-color(surface--lightest--link--focus)};
+  --pfe-accordion--focus:         #{pfe-color(surface--lightest--link)};
   --pfe-accordion--border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
 }
 
@@ -350,21 +351,21 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b
 @mixin pfe-trigger-color-dark {
     --pfe-accordion--main:         transparent;
     --pfe-accordion--aux:          #{pfe-color(surface--darkest--text)};
-    --pfe-accordion--focus:        #{pfe-color(surface--darker--link--focus)};
+    --pfe-accordion--focus:        #{pfe-color(surface--lightest)};
 }
 
 @mixin pfe-trigger-color-dark-expanded {
     --pfe-accordion--main:         #{pfe-color(surface--darker)};
     --pfe-accordion--aux:          #{pfe-color(surface--darkest--text)};
-    --pfe-accordion--focus:        #{pfe-color(surface--darkest--link--focus)};
+    --pfe-accordion--focus:        #{pfe-color(surface--lightest)};
     --pfe-accordion--border-left:  #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};
     --pfe-accordion--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};
 }
 
 @mixin pfe-trigger-color-darkest {
     --pfe-accordion--main:         #{pfe-color(surface--darkest)};
     --pfe-accordion--aux:          #{pfe-color(surface--darkest--text)};
-    --pfe-accordion--focus:        #{pfe-color(surface--darker--link--focus)};
+    --pfe-accordion--focus:        #{pfe-color(surface--lightest)};
 }
 
 @mixin pfe-trigger-color-darkest-expanded {