More pagination examples, tweak dark theme colours (#42)

* More pagination examples, tweak dark theme colours

* Push all changes to Chromatic on PR

* Add header outline in high contrast mode

* Adjust high contrast dark mode background

* Fix spacing classes in example

* Fix spacing classes in example

.github/workflows/pull-request.yml

@@ -29,4 +29,4 @@ jobs:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           storybookBuildDir: storybook
           exitZeroOnChanges: true
-          onlyChanged: true
+          onlyChanged: false

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Tweaked dark theme colours
 - `tna-visually-hidden` could instead use the class `tna-!--visually-hidden` (will deprecate one of these in the future)
 - Changed Node version from `lts/hydrogen` to `lts/iron`
 - Update the `spacing` and `spacing-mobile` functions in `spacing` to `space` and `space-mobile`

src/nationalarchives/components/header/header.scss

@@ -338,6 +338,10 @@
     }
   }
 
+  &--accent {
+    @include colour.accent;
+  }
+
   @include media.on-larger-than-mobile {
     .tna-header__navigation-toggle {
       display: none;
@@ -508,7 +512,38 @@
     }
   }
 
-  &--accent {
-    @include colour.accent;
+  @include colour.on-high-contrast {
+    position: relative;
+
+    &::after {
+      position: absolute;
+      inset: auto 0 0;
+      z-index: 1;
+
+      @include colour.colour-border("keyline-dark", 1px, solid, bottom);
+
+      content: "";
+    }
+
+    &__navigation {
+      position: relative;
+      z-index: 2;
+    }
+
+    @include media.on-larger-than-mobile {
+      &__navigation-item-link {
+        border: 1px transparent solid;
+        border-bottom: none;
+
+        &:hover,
+        &--selected {
+          &,
+          &:link,
+          &:visited {
+            @include colour.colour-border("keyline-dark");
+          }
+        }
+      }
+    }
   }
 }