More improvements to high contrast mode and colour combinations (#130)

nationalarchives · Jun 3, 2024 · 1e20179 · 1e20179
1 parent 1fa2225
commit 1e20179
Show file tree

Hide file tree

Showing 16 changed files with 94 additions and 54 deletions.
diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss
@@ -2,6 +2,7 @@
 
 @use "../src/nationalarchives/tools/colour";
 @use "../src/nationalarchives/tools/media";
+@use "../src/nationalarchives/tools/spacing";
 @use "../src/nationalarchives/tools/typography";
 
 @import "https://use.typekit.net/kaq6qqh.css";
@@ -217,6 +218,12 @@
     border-right: rgb(0 0 0/0.25) 1px solid;
     border-bottom: rgb(0 0 0/0.25) 1px solid;
 
+    .accent-border-example {
+      padding-left: spacing.space(1);
+
+      @include colour.thick-keyline-accent(left);
+    }
+
     &:first-child {
       min-width: 7rem;
       padding: 1rem;

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,12 +12,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Theme selector is hidden when forced colors mode is enabled
 - The markup for a chip list has been updated
+- Better colours and contrasts for coloured elements within contrast and accent blocks
 
 ### Deprecated
 ### Removed
+
+- Removed external icon from header exit link
+
 ### Fixed
 
 - Fixed styling for compound filters in forced colors mode
+- Fixed colour for header exit link in light high contrast mode
 
 ### Security
 

diff --git a/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss b/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss
@@ -91,6 +91,16 @@
     }
   }
 
+  @include colour.on-high-contrast {
+    &__link {
+      &,
+      &:link,
+      &:visited {
+        @include colour.colour-font("link");
+      }
+    }
+  }
+
   @include media.on-print {
     &__item {
       display: flex !important;

diff --git a/src/nationalarchives/components/footer/footer.scss b/src/nationalarchives/components/footer/footer.scss
@@ -220,23 +220,27 @@
     }
   }
 
-  @include colour.on-high-contrast-and-forced-colours {
-    &__inner {
-      @include colour.colour-border("keyline", 1px, solid, top);
+  @include colour.on-high-contrast {
+    &__theme-selector {
+      @include colour.colour-border("keyline", 1px, solid, bottom);
     }
+  }
+
+  @include colour.on-high-contrast-and-forced-colours {
+    @include colour.thick-keyline-dark(top);
 
     &__navigation {
       &-block {
         &-items {
-          @include colour.colour-border("keyline-dark", 4px, solid, top);
+          @include colour.thick-keyline-dark(top);
         }
       }
     }
 
     &__mailing-list {
       background-color: transparent;
 
-      @include colour.colour-border("keyline-dark", 1px, solid);
+      @include colour.colour-border("keyline-dark", 1px);
     }
   }
 }
diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss
@@ -15,6 +15,8 @@
     rgb(0 0 0 / 100%) 100%
   );
 
+  @include colour.colour-font("font-base");
+
   @include media.hide-on-print;
 
   .tna-template--dark-theme & {
@@ -45,6 +47,12 @@
     text-decoration: none;
 
     &--link {
+      &,
+      &:link,
+      &:visited {
+        @include colour.colour-font("font-base");
+      }
+
       &:hover {
         text-decoration: none;
 
@@ -178,6 +186,12 @@
 
     @include colour.colour-border("keyline", 0.5px, solid, bottom);
 
+    &,
+    &:link,
+    &:visited {
+      @include colour.colour-font("font-base");
+    }
+
     &:hover {
       @include typography.interacted-text-decoration;
     }
@@ -389,10 +403,6 @@
 
   @include colour.on-high-contrast-and-forced-colours {
     @include colour.colour-border("keyline", 1px, solid, bottom);
-
-    &__top-navigation-link {
-      @include colour.colour-font("link", true);
-    }
   }
 
   @include colour.on-forced-colours {

diff --git a/src/nationalarchives/components/global-header/global-header.stories.js b/src/nationalarchives/components/global-header/global-header.stories.js
@@ -350,8 +350,8 @@ Mobile.play = async ({ args, canvasElement, step }) => {
   //   await userEvent.click($navigationToggle);
   // });
 
+  // TODO
   // await step("Press the escape key", async () => {
-  //   // TODO
   //   await expect($navigationItems).not.toBeVisible();
   //   await expect($navigationToggle).toBeVisible();
   //   await expect($navigationToggle).toHaveAttribute("aria-expanded", "false");

diff --git a/src/nationalarchives/components/header/fixtures.json b/src/nationalarchives/components/header/fixtures.json
@@ -40,7 +40,7 @@
           "target": "_blank"
         }
       },
-      "html": "<header class=\"tna-header\" data-module=\"tna-header\"><div class=\"tna-header__exit\"><div class=\"tna-container\"><div class=\"tna-column tna-column--full\"><a href=\"#\" class=\"tna-header__exit-link\" target=\"_blank\">Go to the current National Archives website<i class=\"fa-solid fa-arrow-up-right-from-square\" aria-hidden=\"true\"></i></a></div></div></div><div class=\"tna-container tna-header__contents\"><div class=\"tna-column tna-header__logo\"><a href=\"#/\" class=\"tna-header__logo-contents tna-header__logo-contents--link\" title=\"The National Archives - Beta\"><svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" class=\"tna-logo\" viewBox=\"0 0 160 160\" width=\"96\" height=\"96\"><title>The National Archives</title><path fill=\"transparent\" d=\"M0 0h160v160H0z\" class=\"tna-logo__background\"/><g class=\"tna-logo__foreground\" fill=\"currentColor\"><path d=\"M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z\"/><path d=\"M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z\"/></g></svg><span class=\"tna-header__logo-strapline\">Beta</span></a></div><div class=\"tna-column tna-header__navigation-toggle\"><button class=\"tna-header__navigation-toggle-button\" type=\"button\" aria-controls=\"tna-header__navigation\" hidden>Menu<span class=\"tna-header__hamburger\"></span></button></div><nav class=\"tna-column tna-column--flex-1 tna-column--full-small tna-column--full-tiny tna-header__navigation\" id=\"tna-header__navigation\" aria-label=\"Primary\"><ul class=\"tna-header__navigation-items\"><li class=\"tna-header__navigation-item\"><a href=\"#/alpha\" class=\"tna-header__navigation-item-link tna-header__navigation-item-link--selected\" tabindex=\"0\" aria-current=\"page\">Alpha</a></li><li class=\"tna-header__navigation-item\"><a href=\"#/beta\" class=\"tna-header__navigation-item-link\" tabindex=\"0\">Beta</a></li><li class=\"tna-header__navigation-item\"><a href=\"#/gamma\" class=\"tna-header__navigation-item-link\" tabindex=\"0\">Gamma</a></li></ul><ul class=\"tna-header__top-navigation-items\"><li class=\"tna-header__top-navigation-item\"><a href=\"#/top-1\" class=\"tna-header__top-navigation-item-link\" tabindex=\"0\">Top item 1</a></li><li class=\"tna-header__top-navigation-item\"><a href=\"#/top-2\" class=\"tna-header__top-navigation-item-link\" tabindex=\"0\"><i class=\"fa-solid fa-phone\" aria-hidden=\"true\"></i>Top item 2</a></li></ul></nav></div></header>"
+      "html": "<header class=\"tna-header\" data-module=\"tna-header\"><div class=\"tna-header__exit\"><div class=\"tna-container\"><div class=\"tna-column tna-column--full\"><a href=\"#\" class=\"tna-header__exit-link\" target=\"_blank\" title=\"Go to the current National Archives website (opens in new tab)\">Go to the current National Archives website</a></div></div></div><div class=\"tna-container tna-header__contents\"><div class=\"tna-column tna-header__logo\"><a href=\"#/\" class=\"tna-header__logo-contents tna-header__logo-contents--link\" title=\"The National Archives - Beta\"><svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" class=\"tna-logo\" viewBox=\"0 0 160 160\" width=\"96\" height=\"96\"><title>The National Archives</title><path fill=\"transparent\" d=\"M0 0h160v160H0z\" class=\"tna-logo__background\"/><g class=\"tna-logo__foreground\" fill=\"currentColor\"><path d=\"M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z\"/><path d=\"M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z\"/></g></svg><span class=\"tna-header__logo-strapline\">Beta</span></a></div><div class=\"tna-column tna-header__navigation-toggle\"><button class=\"tna-header__navigation-toggle-button\" type=\"button\" aria-controls=\"tna-header__navigation\" hidden>Menu<span class=\"tna-header__hamburger\"></span></button></div><nav class=\"tna-column tna-column--flex-1 tna-column--full-small tna-column--full-tiny tna-header__navigation\" id=\"tna-header__navigation\" aria-label=\"Primary\"><ul class=\"tna-header__navigation-items\"><li class=\"tna-header__navigation-item\"><a href=\"#/alpha\" class=\"tna-header__navigation-item-link tna-header__navigation-item-link--selected\" tabindex=\"0\" aria-current=\"page\">Alpha</a></li><li class=\"tna-header__navigation-item\"><a href=\"#/beta\" class=\"tna-header__navigation-item-link\" tabindex=\"0\">Beta</a></li><li class=\"tna-header__navigation-item\"><a href=\"#/gamma\" class=\"tna-header__navigation-item-link\" tabindex=\"0\">Gamma</a></li></ul><ul class=\"tna-header__top-navigation-items\"><li class=\"tna-header__top-navigation-item\"><a href=\"#/top-1\" class=\"tna-header__top-navigation-item-link\" tabindex=\"0\">Top item 1</a></li><li class=\"tna-header__top-navigation-item\"><a href=\"#/top-2\" class=\"tna-header__top-navigation-item-link\" tabindex=\"0\"><i class=\"fa-solid fa-phone\" aria-hidden=\"true\"></i>Top item 2</a></li></ul></nav></div></header>"
     }
   ]
 }
diff --git a/src/nationalarchives/components/header/header.scss b/src/nationalarchives/components/header/header.scss
@@ -44,7 +44,7 @@
     &,
     &:link,
     &:visited {
-      color: #fff;
+      @include colour.colour-font("font-base");
     }
 
     &:hover {
@@ -488,7 +488,10 @@
   }
 
   @include colour.on-high-contrast-and-forced-colours {
-    @include colour.colour-border("keyline", 1px, solid, bottom);
+    &,
+    &__exit {
+      @include colour.colour-border("keyline", 1px, solid, bottom);
+    }
   }
 
   @include colour.on-forced-colours {

diff --git a/src/nationalarchives/components/header/template.njk b/src/nationalarchives/components/header/template.njk
@@ -8,11 +8,8 @@
   <div class="tna-header__exit">
     <div class="tna-container">
       <div class="tna-column tna-column--full">
-        <a href="{{ params.exit.href }}" class="tna-header__exit-link"{%- if params.exit.target %} target="{{ params.exit.target }}"{% endif %}>
+        <a href="{{ params.exit.href }}" class="tna-header__exit-link"{%- if params.exit.target %} target="{{ params.exit.target }}" title="{{ params.exit.text }} (opens in new tab)"{% endif %}>
           {{ params.exit.text }}
-          {%- if params.exit.target == "_blank" -%}
-          <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
-          {%- endif -%}
         </a>
       </div>
     </div>

diff --git a/src/nationalarchives/components/phase-banner/phase-banner.scss b/src/nationalarchives/components/phase-banner/phase-banner.scss
@@ -30,4 +30,8 @@
   &--accent {
     @include colour.accent;
   }
+
+  @include colour.on-high-contrast-and-forced-colours {
+    @include colour.colour-border("keyline", 1px, solid, bottom);
+  }
 }
diff --git a/src/nationalarchives/components/picture/picture.scss b/src/nationalarchives/components/picture/picture.scss
@@ -81,15 +81,6 @@
 
       @include typography.relative-font-size(14);
     }
-
-    // TODO
-    // @if grid.$gutter-width-tiny != 1.5rem {
-    //   &__caption,
-    //   &__transcript {
-    //     padding-right: grid.$gutter-width-tiny;
-    //     padding-left: grid.$gutter-width-tiny;
-    //   }
-    // }
   }
 
   @include colour.on-high-contrast-and-forced-colours {

diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js
@@ -62,12 +62,14 @@ const Template = ({ theme }) => {
         `${blockOutput}<div class="tna-colour-contrast-demo__example tna-template ${theme} ${accent}">
       <div class="tna-template__body">
         <div class="tna-colour-contrast-demo__example-content ${block}">
-          <h1 class="tna-heading-s">Heading</h1>
-          <p>Text / <span class="dark-text">Dark</span> / <span class="light-text">Light</span> / <i class="fa-solid fa-heart" aria-hidden="true"></i> <i class="fa-solid fa-heart light-icon" aria-hidden="true"></i></p>
-          <p><a href="#">Link</a> / <a href="#" class="tna-colour-contrast-demo__link--visited">Link (visited)</a></p>
-          <ul class="tna-ul">
-            <li>Alpha</li>
-          </ul>
+          <div class="accent-border-example">
+            <h1 class="tna-heading-s">Heading</h1>
+            <p>Text / <span class="dark-text">Dark</span> / <span class="light-text">Light</span> / <i class="fa-solid fa-heart" aria-hidden="true"></i> <i class="fa-solid fa-heart light-icon" aria-hidden="true"></i></p>
+            <p><a href="#">Link</a> / <a href="#" class="tna-colour-contrast-demo__link--visited">Link (visited)</a></p>
+            <ul class="tna-ul">
+              <li>Alpha</li>
+            </ul>
+          </div>
           <dl class="tna-dl-chips">
             <dt>Published</dt>
             <dd>

diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss
@@ -172,6 +172,7 @@
   --button-background: var(--contrast-button-background);
   --button-hover-text: var(--contrast-button-hover-text);
   --button-hover-background: var(--contrast-button-hover-background);
+  --accent-list-marker: var(--accent-border);
 
   @include colour-background("background");
 
@@ -197,6 +198,7 @@
     --button-background: var(--contrast-button-background);
     --button-hover-text: var(--contrast-button-hover-text);
     --button-hover-background: var(--contrast-button-hover-background);
+    --accent-list-marker: var(--accent-border);
 
     @include colour-background("background");
 
@@ -230,6 +232,8 @@
   --link-visited: var(--accent-link);
   --keyline: var(--accent-keyline);
   --keyline-dark: var(--accent-keyline-dark);
+  --accent-list-marker: var(--accent-font-base);
+  --accent-border: var(--accent-font-dark);
 
   @include colour-background("background");
 
@@ -261,6 +265,8 @@
       colour.$colour-palette-default,
       "button-hover-background"
     )};
+  --accent-border: var(--font-base);
+  --accent-list-marker: var(--font-base);
 
   .tna-template--system-theme & {
     @media (prefers-color-scheme: dark) {
@@ -318,7 +324,8 @@
 %yellow-accent {
   --accent-background: #{colour.brand-colour("yellow")} !important;
   --accent-background-light: #{colour.brand-colour("cream")} !important;
-  --accent-border: #{colour.brand-colour("brown")} !important;
+  --accent-border: #{colour.brand-colour("yellow")} !important;
+  --accent-list-marker: #{colour.brand-colour("brown")} !important;
   --accent-font-base: #{colour.brand-colour("black")} !important;
   --accent-font-dark: #{colour.brand-colour("black")} !important;
   --accent-font-light: #{colour.brand-colour("black", 0.7)} !important;
@@ -351,61 +358,66 @@
   --accent-background: #{colour.brand-colour("black")} !important;
   --accent-background-light: #{colour.brand-colour("light-grey")} !important;
   --accent-border: #{colour.brand-colour("black")} !important;
+  --accent-list-marker: #{colour.brand-colour("black")} !important;
   --button-accent-text: #{colour.brand-colour("black")} !important;
   --button-accent-background: #{colour.brand-colour("grey")} !important;
 }
 
 @mixin black-accent {
-  @extend %black-accent;
   @extend %accent-lighter-text;
+  @extend %black-accent;
 }
 
 %pink-accent {
   --accent-background: #{colour.brand-colour("maroon")} !important;
   --accent-background-light: #{colour.brand-colour("pastel-pink")} !important;
   --accent-border: #{colour.brand-colour("pink")} !important;
+  --accent-list-marker: #{colour.brand-colour("pink")} !important;
   --button-accent-background: #{colour.brand-colour("maroon")} !important;
 }
 
 @mixin pink-accent {
-  @extend %pink-accent;
   @extend %accent-lighter-text;
+  @extend %pink-accent;
 }
 
 %orange-accent {
   --accent-background: #{colour.brand-colour("chestnut")} !important;
   --accent-background-light: #{colour.brand-colour("pastel-orange")} !important;
   --accent-border: #{colour.brand-colour("orange")} !important;
+  --accent-list-marker: #{colour.brand-colour("orange")} !important;
   --button-accent-background: #{colour.brand-colour("chestnut")} !important;
 }
 
 @mixin orange-accent {
-  @extend %orange-accent;
   @extend %accent-lighter-text;
+  @extend %orange-accent;
 }
 
 %green-accent {
   --accent-background: #{colour.brand-colour("forest")} !important;
   --accent-background-light: #{colour.brand-colour("pastel-green")} !important;
   --accent-border: #{colour.brand-colour("green")} !important;
+  --accent-list-marker: #{colour.brand-colour("green")} !important;
   --button-accent-background: #{colour.brand-colour("forest")} !important;
 }
 
 @mixin green-accent {
-  @extend %green-accent;
   @extend %accent-lighter-text;
+  @extend %green-accent;
 }
 
 %blue-accent {
   --accent-background: #{colour.brand-colour("navy")} !important;
   --accent-background-light: #{colour.brand-colour("pastel-blue")} !important;
   --accent-border: #{colour.brand-colour("blue")} !important;
+  --accent-list-marker: #{colour.brand-colour("blue")} !important;
   --button-accent-background: #{colour.brand-colour("navy")} !important;
 }
 
 @mixin blue-accent {
-  @extend %blue-accent;
   @extend %accent-lighter-text;
+  @extend %blue-accent;
 }
 
 @mixin on-high-contrast {