Dark mode tweaks (#79)

* Keep header accent colour on high contrast

* Fix missing picture border in high contrast

* Add extra line to tabs in high contrast

* Update README.md

* Update README.md

* Update CHANGELOG.md

CHANGELOG.md

@@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 ### Changed
 
+- Tab elements in high contrast mode have an extra keyline to help with visibility
+- The header element no longer uses background tint in high contrast mode
 - The default cookie banner colour is dark on light but can be changed with a `style` attribute or classes such as `tna-cookie-banner--contrast`
 - The card style of `boxed` has been changed to `contrast` in line with other components
 - The background tint colour on the light theme is slightly darker for better contrast with the page background
@@ -24,6 +26,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Removed option for `tna-search-field--no-border` - borders are dictated by the background colours and page theme
 
 ### Fixed
+
+- Picture elements in high contrast mode have improved borders with no gaps
+
 ### Security
 
 ## [0.1.35](https://github.com/nationalarchives/tna-frontend/compare/v0.1.34...v0.1.35) - 2024-01-16

README.md

@@ -5,7 +5,6 @@
 [![Main build status](https://img.shields.io/github/actions/workflow/status/nationalarchives/tna-frontend/tests.yml?style=flat-square&event=push&branch=main)](https://github.com/nationalarchives/tna-frontend/actions/workflows/tests.yml?query=branch%3Amain)
 [![Latest release](https://img.shields.io/github/v/release/nationalarchives/tna-frontend?style=flat-square&logo=github&logoColor=white&sort=semver)](https://github.com/nationalarchives/tna-frontend/releases)
 [![NPM version](https://img.shields.io/npm/v/@nationalarchives/frontend?style=flat-square&logo=npm&logoColor=white)](https://www.npmjs.com/package/@nationalarchives/frontend)
-[![Node version](https://img.shields.io/node/v-lts/@nationalarchives/frontend?style=flat-square&logo=nodedotjs&logoColor=white)](https://github.com/nationalarchives/tna-frontend/blob/main/.nvmrc)
 [![Licence](https://img.shields.io/github/license/nationalarchives/tna-frontend?style=flat-square)](https://github.com/nationalarchives/tna-frontend/blob/main/LICENCE)
 
 TNA Frontend contains the code you need to start building a user interface for National Archives platforms and services.

src/nationalarchives/components/cookie-banner/README.md

@@ -1,4 +1,10 @@
-# The National Archives Cookie Banner
+<img src="../../assets/images/tna-square-logo.svg" alt="The National Archives logo" title="The National Archives" width="100" />
+
+# TNA Frontend Cookie Banner
+
+[![Latest release](https://img.shields.io/github/v/release/nationalarchives/tna-frontend?style=flat-square&logo=github&logoColor=white&sort=semver)](https://github.com/nationalarchives/tna-frontend/releases)
+[![NPM version](https://img.shields.io/npm/v/@nationalarchives/frontend-cookie-banner?style=flat-square&logo=npm&logoColor=white)](https://www.npmjs.com/package/@nationalarchives/frontend-cookie-banner)
+[![Licence](https://img.shields.io/github/license/nationalarchives/tna-frontend?style=flat-square)](https://github.com/nationalarchives/tna-frontend/blob/main/LICENCE)
 
 Use the cookie banner from TNA Frontend in your service.
 

src/nationalarchives/components/header/header.scss

@@ -63,16 +63,6 @@
     background-color: colour.brand-colour("black");
   }
 
-  .tna-template--system-theme & {
-    @media (prefers-contrast: more) and (prefers-color-scheme: light) {
-      @include colour.colour-background("background-tint");
-    }
-  }
-
-  .tna-template--high-contrast-theme:not(.tna-template--dark-theme) & {
-    @include colour.colour-background("background-tint");
-  }
-
   &__exit {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;

src/nationalarchives/components/picture/picture.scss

@@ -92,10 +92,11 @@
 
   @include colour.on-high-contrast-and-forced-colours {
     @include colour.colour-border("keyline-dark", 1px);
-    border-bottom-width: 0;
 
     &__caption {
-      padding: 1rem;
+      margin: 0;
+
+      border: none;
     }
   }
 }

src/nationalarchives/components/tabs/tabs.scss

@@ -131,13 +131,8 @@
   }
 
   @include colour.on-high-contrast-and-forced-colours {
-    &__list-item-link {
-      padding-right: 1rem;
-      padding-left: 1rem;
-
-      overflow: hidden;
-
-      @include colour.colour-border("keyline-dark", 1px);
+    &__list {
+      @include colour.colour-border("keyline-dark", 1px, solid, bottom);
     }
   }
 

tasks/generate-cookie-banner-assets.js

@@ -22,7 +22,8 @@ const html = nunjucks
       allowInsecure: false,
     },
   })
-  .trim();
+  .trim()
+  .replace(/ " /g, '" ');
 
 fs.readFile(
   "src/nationalarchives/components/cookie-banner/README.md",