update nav border and underline colour for light and dark mode

Author: chris-lawton

tbx/static_src/sass/config/_variables.scss

@@ -42,7 +42,6 @@ $color--grey-10: #e6e6e6;
 $color--grey-20: #ccc;
 $color--grey-30: #b3b3b3;
 $color--grey-40: #999;
-$color--grey-45: #989b9b;
 $color--grey-50: #808080;
 $color--grey-60: #666;
 $color--grey-70: #4d4d4d;
@@ -60,14 +59,14 @@ $color--earth-streamfield-background: #e6e3df;
     --color--background: #{$color--eclipse};
     --color--footer-background: #{$color--dark-background};
     --color--nav-text: #{$color--grey-5};
-    --color--nav-border: #{color.adjust($color--eclipse, $alpha: -0.5)};
+    --color--nav-border: #{color.adjust($color--eclipse, $alpha: -0.3)};
     --color--light-background-text: #{$color--eclipse};
     --color--heading: #{$color--white};
     --color--heading-50: #{color.adjust($color--white, $alpha: -0.5)};
     --color--text: #{$color--grey-20};
     --color--text-50: #{color.adjust($color--grey-20, $alpha: -0.5)};
     --color--link: #{$color--white};
-    --color--link-underline: #{$color--grey-45};
+    --color--link-underline: #{color.adjust($color--white, $alpha: -0.5)};
     --color--link-interaction: #{$color--white};
     --color--streamfield-background: #{$color--mid-grey};
     --color--decoration: #{$color--grey-50};
@@ -180,13 +179,14 @@ $color--earth-streamfield-background: #e6e3df;
     // redeclare any base variables that are different in light mode (these ones don't change with the theme)
     --color--background: #{$color--white};
     --color--nav-text: #{$color--eclipse};
+    --color--nav-border: #{color.adjust($color--white, $alpha: -0.3)};
     --color--heading: #{$color--eclipse};
     --color--heading-50: #{color.adjust($color--eclipse, $alpha: -0.5)};
     --color--text: #{$color--grey-70};
     --color--text-50: #{color.adjust($color--grey-70, $alpha: -0.5)};
     --color--decoration: #{$color--eclipse};
     --color--link: #{$color--eclipse};
-    --color--link-underline: #{$color--eclipse};
+    --color--link-underline: #{color.adjust($color--eclipse, $alpha: -0.5)};
     --color--link-interaction: #{$color--eclipse};
     --color--streamfield-background: #{$color--grey-5};
 }