Colour tweaks to provide better contrast (#164)

* Add an outline to focused cards with the full click option enabled

* Add the option for a darker <hr> element

* Update some keyline colours

* Remove some customisable colour variables, adjusted contrasts on high contrast mode

CHANGELOG.md

@@ -8,9 +8,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.2.12...HEAD)
 
 ### Added
+
+- Add the option for a darker `<hr>` element with `tna-hr-dark`
+
 ### Changed
+
+- Added an outline to focused cards with the full click option enabled
+
 ### Deprecated
 ### Removed
+
+- Removed customisable colour variables `$dark-grey`, `$base-font`, `$link-colour` and `$link-colour-visited`
+
 ### Fixed
 
 - Added missing underline to focused buttons using on the `<button>` element

src/nationalarchives/components/card/card.scss

@@ -1,4 +1,6 @@
 @use "sass:math";
+@use "../../variables/borders";
+@use "../../tools/a11y";
 @use "../../tools/colour";
 @use "../../tools/media";
 @use "../../tools/spacing";
@@ -85,6 +87,29 @@
       position: absolute;
       inset: 0;
       z-index: 3;
+
+      border-radius: 0.1px;
+    }
+
+    &:focus-visible,
+    &:active {
+      outline: none;
+
+      &::before {
+        @include a11y.focus-outline;
+      }
+    }
+
+    &:active {
+      &::before {
+        @include a11y.active-outline;
+      }
+    }
+  }
+
+  &--full-click:not(:has(&__image-container)) &__heading-link {
+    &::before {
+      top: -#{borders.$thick-border-width};
     }
   }
 

src/nationalarchives/utilities/_reset.scss

@@ -40,4 +40,8 @@ textarea {
 hr {
   @include colour.colour-border("keyline", 0, solid);
   border-top-width: 1px;
+
+  &.tna-hr-dark {
+    @include colour.colour-border("keyline-dark");
+  }
 }

src/nationalarchives/utilities/colour/colour-combinations.stories.js

@@ -68,6 +68,8 @@ const Template = ({ theme }) => {
               <li>Alpha</li>
             </ul>
           </div>
+          <hr class="tna-!--margin-top-s">
+          <hr class="tna-hr-dark tna-!--margin-top-xs">
           <dl class="tna-dl-chips">
             <dt>Published</dt>
             <dd>

src/nationalarchives/variables/_colour.scss

@@ -3,6 +3,7 @@
 
 $colour-palette-brand: (
   "black": #010101,
+  "dark-grey": #26262a,
   "grey": #8c9694,
   "light-grey": #d9d9d6,
   "white": #fff,
@@ -40,11 +41,6 @@ $colour-palette-brand: (
   @return hex-to-rgb(map.get($colour-palette-brand, $colour), $opacity);
 }
 
-$dark-grey: #26262a !default;
-$base-font: #343338 !default;
-$link-colour: #005fa3 !default;
-$link-colour-visited: #4c2c92 !default;
-
 /*
 =========================================
 LIGHT THEME (DEFAULT)
@@ -53,15 +49,15 @@ LIGHT THEME (DEFAULT)
 $colour-palette-default: (
   "background": #f4f4f4,
   "background-tint": brand-colour("light-grey"),
-  "font-base": $base-font,
+  "font-base": #343338,
   "font-dark": brand-colour("black"),
   "font-light": brand-colour("black", 0.58),
-  "icon-light": hex-to-rgb($base-font, 0.45),
-  "link": $link-colour,
-  "link-visited": $link-colour-visited,
+  "icon-light": hex-to-rgb(#343338, 0.45),
+  "link": #005fa3,
+  "link-visited": #634abb,
   "focus-outline": brand-colour("blue"),
-  "keyline": hex-to-rgb($dark-grey, 0.25),
-  "keyline-dark": $dark-grey,
+  "keyline": brand-colour("dark-grey", 0.25),
+  "keyline-dark": brand-colour("dark-grey"),
   "input-foreground": brand-colour("black"),
   "input-background": brand-colour("white"),
   "input-border": brand-colour("black"),
@@ -78,8 +74,8 @@ $colour-palette-default: (
   "contrast-icon-light": brand-colour("white", 0.45),
   "contrast-link": brand-colour("white"),
   "contrast-link-visited": brand-colour("white"),
-  "contrast-keyline": brand-colour("white", 0.5),
-  "contrast-keyline-dark": brand-colour("white", 0.8),
+  "contrast-keyline": brand-colour("white", 0.3),
+  "contrast-keyline-dark": brand-colour("white", 0.6),
   "contrast-button-text": brand-colour("black"),
   "contrast-button-background": brand-colour("white"),
   "contrast-button-hover-text": brand-colour("white"),
@@ -94,7 +90,7 @@ $colour-palette-default: (
   "accent-icon-light": brand-colour("black", 0.45),
   "accent-link": brand-colour("black"),
   "accent-link-visited": brand-colour("black"),
-  "accent-keyline": brand-colour("black", 0.5),
+  "accent-keyline": brand-colour("black", 0.3),
   "accent-keyline-dark": brand-colour("black", 0.8),
   "accent-button-text": brand-colour("white"),
   "accent-button-background": brand-colour("black"),
@@ -122,7 +118,7 @@ $colour-palette-dark: map.merge(
     "link-visited": #a8f,
     "focus-outline": brand-colour("orange"),
     "keyline": brand-colour("white", 0.25),
-    "keyline-dark": brand-colour("white"),
+    "keyline-dark": brand-colour("white", 0.75),
     "input-foreground": brand-colour("white"),
     "input-background": brand-colour("black"),
     "input-border": brand-colour("white"),
@@ -151,16 +147,17 @@ $colour-palette-high-contrast: map.merge(
     "font-base": brand-colour("black"),
     "font-light": brand-colour("black"),
     "icon-light": brand-colour("black", 0.8),
-    "link": #34d,
-    "link-visited": #848,
+    "link": #202fbc,
+    "link-visited": #6a286b,
     "focus-outline": brand-colour("orange"),
-    "keyline": brand-colour("black"),
+    "keyline": brand-colour("black", 0.8),
     "keyline-dark": brand-colour("black"),
     "contrast-background": brand-colour("black"),
     "contrast-link": brand-colour("blue"),
     "contrast-font-light": brand-colour("white", 0.8),
     "contrast-link-visited": #a8f,
     "accent-font-light": brand-colour("black", 0.8),
+    "button-accented-background": #8f9997,
   )
 ) !default;
 
@@ -176,13 +173,17 @@ $colour-palette-high-contrast-dark: map.merge(
     "font-base": brand-colour("white"),
     "font-light": brand-colour("white"),
     "icon-light": brand-colour("white", 0.8),
-    "keyline": brand-colour("white"),
+    "link": #8fc7ff,
+    "link-visited": #ccb8ff,
+    "keyline": brand-colour("white", 0.8),
+    "keyline-dark": brand-colour("white"),
     "form-error-border": #ff6b6b,
     "form-error-text": #ff6b6b,
     "contrast-background": brand-colour("black"),
     "contrast-link": brand-colour("blue"),
     "contrast-font-light": brand-colour("white", 0.8),
     "contrast-link-visited": #a8f,
     "accent-font-light": brand-colour("black", 0.8),
+    "button-accented-background": #8f9997,
   )
 ) !default;