@nationalarchives/frontend 0.1.17-prerelease → 0.1.19-prerelease

package/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js

@@ -1,14 +1,17 @@
 import SkipLink from "../../../components/skip-link/template.njk";
-import Header from "../../../components/header/template.njk";
 import Breadcrumbs from "../../../components/breadcrumbs/template.njk";
 import Button from "../../../components/button/template.njk";
 import Card from "../../../components/card/template.njk";
+import Footer from "../../../components/footer/template.njk";
+import CookieBanner from "../../../components/cookie-banner/template.njk";
+import Gallery from "../../../components/gallery/template.njk";
+import Header from "../../../components/header/template.njk";
 import Hero from "../../../components/hero/template.njk";
 import IndexGrid from "../../../components/index-grid/template.njk";
 import Message from "../../../components/message/template.njk";
+import PhaseBanner from "../../../components/phase-banner/template.njk";
 import Picture from "../../../components/picture/template.njk";
 import Tabs from "../../../components/tabs/template.njk";
-import Footer from "../../../components/footer/template.njk";
 
 const argTypes = {
   theme: {
@@ -34,20 +37,16 @@ export default {
 
 const Template = ({ theme, accent }) => {
   const cardDefaultOptions = {
-    heading: {
-      supertitle: "Card supertitle",
-      title: "Card title",
-      level: 3,
-      size: "m",
-      singleSentence: false,
-    },
+    supertitle: "Card supertitle",
+    title: "Card title",
+    headingLevel: 3,
+    headingSize: "m",
     href: "#",
-    image: {
-      src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-      alt: "The National Archives office",
-      width: 1996,
-      height: 1331,
-    },
+    imageSrc:
+      "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+    imageAlt: "The National Archives office",
+    imageWidth: 1996,
+    imageHeight: 1331,
     label: "New",
     body: "<p>Card body</p>",
     actions: [
@@ -87,11 +86,23 @@ const Template = ({ theme, accent }) => {
       : ""
   }">
   <div class="tna-template__body tna-template__body--padded">
+    ${CookieBanner({
+      params: {
+        cookiesUrl: "#",
+      },
+    })}
     ${SkipLink({
       params: {
         href: "main-content",
       },
     })}
+    ${PhaseBanner({
+      params: {
+        phase: "beta",
+        message:
+          'This is a new service - <a href="#">give us your feedback</a> to help improve it.',
+      },
+    })}
     ${Header({
       params: {
         logo: {
@@ -113,7 +124,6 @@ const Template = ({ theme, accent }) => {
             href: "#/gamma",
           },
         ],
-        colour: "yellow",
       },
     })}
     ${Breadcrumbs({
@@ -161,10 +171,10 @@ const Template = ({ theme, accent }) => {
             <p class="tna-hgroup__supertitle">TNA colour theme</p>
             <h2 class="tna-hgroup__title">Heading</h2>
           </hgroup>
-          <p class="tna-p">This is some body text <a href="#">link</a>.</p>
-          <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
-          <p class="tna-p">Donec ac tellus in dui rutrum maximus. Aliquam vel euismod eros. Integer ut magna velit. Fusce sed dui sit amet metus eleifend dictum quis vitae mi. Aenean sagittis euismod purus, in accumsan metus venenatis nec. Nullam nec velit felis. Sed nec felis eu nisl varius dictum eu quis nisl.</p>
-          <p class="tna-p">Donec dapibus est arcu, vel pellentesque risus pellentesque eget.</p>
+          <p>This is some body text <a href="#">link</a>.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          <p>Donec ac tellus in dui rutrum maximus. Aliquam vel euismod eros. Integer ut magna velit. Fusce sed dui sit amet metus eleifend dictum quis vitae mi. Aenean sagittis euismod purus, in accumsan metus venenatis nec. Nullam nec velit felis. Sed nec felis eu nisl varius dictum eu quis nisl.</p>
+          <p>Donec dapibus est arcu, vel pellentesque risus pellentesque eget.</p>
           <ul class="tna-ul">
             <li>Alpha</li>
             <li>Beta</li>
@@ -206,14 +216,20 @@ const Template = ({ theme, accent }) => {
                 brandIcon: "twitter",
               },
             })}
+            ${Button({
+              params: {
+                text: "Plain button",
+                plain: true,
+              },
+            })}
           </div>
         </div>
         <div class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny">
           <div class="tna-aside tna-background--contrast tna-!--margin-top-l-small tna-!--margin-top-xl-tiny">
-            <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
           </div>
           <div class="tna-aside tna-background--accent">
-            <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
           </div>
         </div>
       </div>
@@ -223,40 +239,39 @@ const Template = ({ theme, accent }) => {
           <h1 class="tna-heading tna-heading--xl">
             This is a heading (XL)
           </h1>
-          <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
           <h2 class="tna-heading tna-heading--l">
             This is a heading (L)
           </h2>
-          <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
           <h3 class="tna-heading tna-heading--m">
             This is a heading (M)
           </h3>
-          <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
-          <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
           <h4 class="tna-heading tna-heading--s">
             This is a heading (S)
           </h4>
-          <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
           <hgroup class="tna-hgroup tna-hgroup--xl">
             <p class="tna-hgroup__supertitle">Supertitle</p>
             <h2 class="tna-hgroup__title">This is a heading (XL)</h2>
           </hgroup>
-          <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
           <hgroup class="tna-hgroup tna-hgroup--l">
             <p class="tna-hgroup__supertitle">Supertitle</p>
             <h2 class="tna-hgroup__title">This is a heading (L)</h2>
           </hgroup>
-          <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
           <hgroup class="tna-hgroup tna-hgroup--m">
             <p class="tna-hgroup__supertitle">Supertitle</p>
             <h2 class="tna-hgroup__title">This is a heading (M)</h2>
           </hgroup>
-          <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
           <hgroup class="tna-hgroup tna-hgroup--s">
             <p class="tna-hgroup__supertitle">Supertitle</p>
             <h2 class="tna-hgroup__title">This is a heading (S)</h2>
           </hgroup>
-          <p class="tna-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis. Sed odio libero, sodales eleifend lorem sit amet, feugiat consequat nibh.</p>
           <p class="tna-scene-setter">
             We are the official archive of England and Wales. Discover 1,000 years of history through <a href="#">fascinating stories</a> from the past or <a href="#">start your own research</a> and <a href="#">search our catalogue</a> of 32 million records. <a href="#">Plan a visit</a> to access original historic documents from our collections then enjoy the grounds, café, and <a href="#">free exhibitions</a>.
           </p>
@@ -269,14 +284,17 @@ const Template = ({ theme, accent }) => {
           <h2 class="tna-heading tna-heading--l">
             <a href="#">Reaerching with The National Archives</a>
           </h2>
-          <p class="tna-p">Lorem ipsum <a href="#">link</a></p>
+          <p>Lorem ipsum <a href="#">link</a></p>
           <hgroup class="tna-hgroup tna-hgroup--l">
             <p class="tna-hgroup__supertitle">Supertitle</p>
             <h2 class="tna-hgroup__title">
               <a href="#">Reaerching with The National Archives</a>
             </h2>
           </hgroup>
-          <p class="tna-p">Lorem ipsum <a href="#">link</a></p>
+          <p>Lorem ipsum <a href="#">link</a></p>
+          <h2 class="tna-heading tna-heading--l">
+            Categories
+          </h2>
           <ul class="tna-chip-list">
             <li class="tna-chip-list__item">
               <a href="#" class="tna-chip">Chip 1</a>
@@ -308,25 +326,36 @@ const Template = ({ theme, accent }) => {
         </div>
       </div>
       <hr>
-      <div class="tna-container">
+      <div class="tna-container tna-section tna-!--padding-bottom-s">
         <div class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny">
           ${Card({
-            params: { ...cardDefaultOptions },
+            params: {
+              ...cardDefaultOptions,
+              classes: "tna-!--margin-bottom-m",
+            },
           })}
         </div>
         <div class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny">
           ${Card({
-            params: { ...cardDefaultOptions, style: "boxed" },
+            params: {
+              ...cardDefaultOptions,
+              style: "boxed",
+              classes: "tna-!--margin-bottom-m",
+            },
           })}
         </div>
         <div class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny">
           ${Card({
-            params: { ...cardDefaultOptions, style: "accent" },
+            params: {
+              ...cardDefaultOptions,
+              style: "accent",
+              classes: "tna-!--margin-bottom-m",
+            },
           })}
         </div>
       </div>
       <hr>
-      <div class="tna-container">
+      <div class="tna-container tna-section">
         <div class="tna-column tna-column--width-2-3 tna-column--full-medium tna-column--full-small tna-column--full-tiny">
           ${Card({
             params: {
@@ -357,7 +386,7 @@ const Template = ({ theme, accent }) => {
         </div>
       </div>
       <hr>
-      <div class="tna-container">
+      <div class="tna-container tna-section">
         <div class="tna-column tna-column--full">
           ${Tabs({
             params: {
@@ -385,7 +414,7 @@ const Template = ({ theme, accent }) => {
         </div>
       </div>
       <hr>
-      <div class="tna-container">
+      <div class="tna-container tna-section">
         <div class="tna-column tna-column--full">
           ${Picture({
             params: {
@@ -401,11 +430,108 @@ const Template = ({ theme, accent }) => {
           })}
         </div>
       </div>
-      <hr>
+      ${Gallery({
+        params: {
+          heading: { title: "My gallery", level: 3 },
+          items: [
+            {
+              src: "https://picsum.photos/id/1/800/600",
+              alt: "",
+              width: 800,
+              height: 600,
+            },
+            {
+              src: "https://picsum.photos/id/2/600/800",
+              alt: "",
+              width: 600,
+              height: 800,
+              description: "Image description",
+            },
+            {
+              src: "https://picsum.photos/id/3/800/800",
+              alt: "",
+              width: 800,
+              height: 800,
+              tabs: [
+                {
+                  id: "gallery-tabs-3-1",
+                  title: "Transcript",
+                  body: "<p>TEST TRANSCRIPT</p>",
+                },
+                {
+                  id: "gallery-tabs-3-2",
+                  title: "Translation",
+                  body: "<p>TEST TRANSLATION</p>",
+                },
+              ],
+            },
+            {
+              src: "https://picsum.photos/id/4/800/600",
+              alt: "",
+              width: 800,
+              height: 600,
+              description: "Image description",
+              tabs: [
+                {
+                  id: "gallery-tabs-4-1",
+                  title: "Transcript",
+                  body: "<p>TEST TRANSCRIPT</p>",
+                },
+                {
+                  id: "gallery-tabs-4-2",
+                  title: "Translation",
+                  body: "<p>TEST TRANSLATION</p>",
+                },
+              ],
+            },
+          ],
+          classes: "tna-gallery--demo",
+        },
+      })}
+      <div class="tna-section">
+        ${IndexGrid({
+          params: {
+            heading: { title: "My dogs 1", level: 3, href: "#" },
+            items: Array(12)
+              .fill({
+                ...{
+                  href: "#",
+                  src: "https://picsum.photos/id/237/800/600",
+                  alt: "Photo of a puppy",
+                  width: "800",
+                  height: "600",
+                  title: "Cat",
+                  subtitle: "4 photos",
+                },
+              })
+              .map((item, index) => {
+                const pseudoRandom = ((index * 29) % 8) + 1;
+                return {
+                  ...item,
+                  href: `#/category-${index}`,
+                  title: `Category #${index + 101}`,
+                  subtitle: `${pseudoRandom} photos`,
+                };
+              }),
+            columns: 4,
+            columnsMedium: 3,
+            columnsSmall: 2,
+            columnsTiny: 1,
+          },
+        })}
+        <div class="tna-container">
+          <div class="tna-column tna-column--full">
+            <div class="tna-button-group">
+              <a href="#" class="tna-button">Primary button</a>
+              <a href="#" class="tna-button tna-button--accent">Accent button</a>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="tna-section tna-background--contrast">
         ${IndexGrid({
           params: {
-            heading: { title: "My dogs", href: "#" },
+            heading: { title: "My dogs 2", level: 3, href: "#" },
             items: Array(12)
               .fill({
                 ...{
@@ -445,7 +571,7 @@ const Template = ({ theme, accent }) => {
       <div class="tna-section tna-background--accent-light">
         ${IndexGrid({
           params: {
-            heading: { title: "My dogs", href: "#" },
+            heading: { title: "My dogs 3", level: 3, href: "#" },
             items: Array(12)
               .fill({
                 ...{
@@ -485,7 +611,7 @@ const Template = ({ theme, accent }) => {
       <div class="tna-section tna-background--accent">
         ${IndexGrid({
           params: {
-            heading: { title: "My dogs", href: "#" },
+            heading: { title: "My dogs 4", level: 3, href: "#" },
             items: Array(12)
               .fill({
                 ...{
@@ -529,32 +655,32 @@ const Template = ({ theme, accent }) => {
           {
             text: "Twitter",
             href: "#",
-            image: "./images/footer/twitter.svg",
+            brandIcon: "twitter",
           },
           {
             text: "YouTube",
             href: "#",
-            image: "./images/footer/youtube.svg",
+            brandIcon: "youtube",
           },
           {
             text: "Facebook",
             href: "#",
-            image: "./images/footer/facebook.svg",
+            brandIcon: "facebook",
           },
           {
             text: "Flickr",
             href: "#",
-            image: "./images/footer/flickr.svg",
+            brandIcon: "flickr",
           },
           {
             text: "Instagram",
             href: "#",
-            image: "./images/footer/instagram.svg",
+            brandIcon: "instagram",
           },
           {
             text: "RSS",
             href: "#",
-            image: "./images/footer/rss.svg",
+            icon: "rss",
           },
         ],
         navigation: [

package/nationalarchives/stories/utilities/typography/heading-groups.stories.js

@@ -21,9 +21,9 @@ const Template = ({
   singleSentence
     ? `<hgroup class="tna-hgroup tna-hgroup--${size}">
   <h${level} class="tna-hgroup__title">
-    <span class="tna-hgroup__supertitle">${supertitle}</span>
-    <span class="tna-hgroup__title">${title}</span>
-  </h${level}>
+  <span class="tna-hgroup__supertitle">${supertitle}</span>
+  <span class="tna-hgroup__title">${title}</span>
+</h${level}>
 </hgroup>`
     : `<hgroup class="tna-hgroup tna-hgroup--${size}">
   <p class="tna-hgroup__supertitle">${supertitle}</p>

package/nationalarchives/stories/utilities/typography/typography.stories.js

@@ -8,7 +8,7 @@ export default {
 };
 
 const ParagraphTemplate = ({ paragraphs }) =>
-  paragraphs.map((paragraph) => `<p class="tna-p">${paragraph}</p>`).join("");
+  paragraphs.map((paragraph) => `<p>${paragraph}</p>`).join("");
 export const Paragraph = ParagraphTemplate.bind({});
 Paragraph.args = {
   paragraphs: [

package/nationalarchives/templates/layouts/_generic.njk

@@ -1,5 +1,6 @@
 {# Based on https://github.com/alphagov/govuk-frontend/blob/8b6bf304b9fc891f64459c25a08f3d623f3fea72/packages/govuk-frontend/src/govuk/template.njk #}
-{% from "./components/skip-link/macro.njk" import tnaSkipLink -%}
+{% from "nationalarchives/components/cookie-banner/macro.njk" import tnaCookieBanner -%}
+{% from "nationalarchives/components/skip-link/macro.njk" import tnaSkipLink -%}
 <!DOCTYPE html>
 <html lang="{{ htmlLang | default('en-GB') }}" class="tna-template {{ htmlClasses }}">
   <head>
@@ -24,7 +25,11 @@
   </head>
     <body class="tna-template__body {{ bodyClasses }}" {%- for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
     {% block bodyStart %}
-      {% block cookies %}{% endblock %}
+      {% block cookies %}
+      {{ tnaCookieBanner({
+        url: '#'
+      }) }}
+      {% endblock %}
       
       {% block skipLink %}
       {{ tnaSkipLink({

package/nationalarchives/tools/_colour.scss

@@ -86,13 +86,18 @@
   }
 }
 
-@mixin colour-font($colour, $important: false) {
-  color: map.get(colour.$colour-palette-default, $colour);
+@mixin colour-font(
+  $colour,
+  $important: false,
+  $default-palette: colour.$colour-palette-default
+) {
+  color: map.get($default-palette, $colour) if($important, !important, null);
   color: var(--#{$colour}) if($important, !important, null);
 }
 
 @mixin colour-background($colour, $important: false) {
-  background-color: map.get(colour.$colour-palette-default, $colour);
+  background-color: map.get(colour.$colour-palette-default, $colour)
+    if($important, !important, null);
   background-color: var(--#{$colour}) if($important, !important, null);
 }
 
@@ -150,10 +155,14 @@
   fill: var(--#{$colour}) if($important, !important, null);
 }
 
-@mixin fixed {
+%fixed {
   @include colour-css-vars;
 
-  // @include colour-font("font-base");
+  @include colour-font("font-base");
+}
+
+@mixin fixed {
+  @extend %fixed;
 }
 
 %invert {
@@ -164,10 +173,14 @@
   --link-visited: var(--contrast-link-visited);
   --keyline: var(--contrast-keyline);
   --keyline-dark: var(--contrast-keyline-dark);
+  --button-text: var(--contrast-button-text);
+  --button-background: var(--contrast-button-background);
+  --button-hover-text: var(--contrast-button-hover-text);
+  --button-hover-background: var(--contrast-button-hover-background);
 
   @include colour-background("contrast-background");
 
-  @include colour-font("font-base");
+  @include colour-font("font-base", false, colour.$colour-palette-dark);
 }
 
 @mixin invert {
@@ -183,10 +196,14 @@
     --link-visited: var(--contrast-link-visited);
     --keyline: var(--contrast-keyline);
     --keyline-dark: var(--contrast-keyline-dark);
+    --button-text: var(--contrast-button-text);
+    --button-background: var(--contrast-button-background);
+    --button-hover-text: var(--contrast-button-hover-text);
+    --button-hover-background: var(--contrast-button-hover-background);
 
     @include colour-background("contrast-background");
 
-    @include colour-font("font-base");
+    @include colour-font("font-base", false, colour.$colour-palette-dark);
   }
 }
 
@@ -195,17 +212,17 @@
 }
 
 %accent {
-  --font-base: var(--accent-font-base, var(--accent-font-base));
-  --font-dark: var(--accent-font-dark, var(--accent-font-dark));
-  --font-light: var(--accent-font-light, var(--accent-font-light));
-  --link: var(--accent-link, var(--accent-link));
-  --link-visited: var(--accent-link-visited, var(--accent-link-visited));
-  --keyline: var(--accent-keyline, var(--accent-keyline));
-  --keyline-dark: var(--accent-keyline-dark, var(--accent-keyline-dark));
+  --font-base: var(--accent-font-base);
+  --font-dark: var(--accent-font-dark);
+  --font-light: var(--accent-font-light);
+  --link: var(--accent-link);
+  --link-visited: var(--accent-link-visited);
+  --keyline: var(--accent-keyline);
+  --keyline-dark: var(--accent-keyline-dark);
 
   @include colour-background("accent-background");
 
-  @include colour-font("font-base");
+  @include colour-font("font-base", false, colour.$colour-palette-dark);
 }
 
 @mixin accent {
@@ -222,6 +239,27 @@
 
 %light-accent-background {
   @include colour-background("accent-background-light");
+
+  --font-base: #{map.get(colour.$colour-palette-default, "font-base")};
+  --font-dark: #{map.get(colour.$colour-palette-default, "font-dark")};
+  --font-light: #{map.get(colour.$colour-palette-default, "font-light")};
+  --link: #{map.get(colour.$colour-palette-default, "font-dark")};
+  --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
+  --keyline: #{map.get(colour.$colour-palette-default, "keyline")};
+  --keyline-dark: #{map.get(colour.$colour-palette-default, "keyline-dark")};
+  --button-text: #{map.get(colour.$colour-palette-default, "button-text")};
+  --button-background: #{map.get(
+      colour.$colour-palette-default,
+      "button-background"
+    )};
+  --button-hover-text: #{map.get(
+      colour.$colour-palette-default,
+      "button-hover-text"
+    )};
+  --button-hover-background: #{map.get(
+      colour.$colour-palette-default,
+      "button-hover-background"
+    )};
 }
 
 @mixin light-accent-background {
@@ -233,8 +271,8 @@
     @content;
   }
 
-  @media (prefers-contrast: more) {
-    .tna-template--system-theme & {
+  .tna-template--system-theme & {
+    @media (prefers-contrast: more) {
       @content;
     }
   }

package/nationalarchives/tools/_index.scss

@@ -1,4 +1,5 @@
-@forward "colour";
-@forward "grid";
-@forward "media";
-@forward "typography";
+@use "colour";
+@use "grid";
+@use "media";
+@use "spacing";
+@use "typography";

package/nationalarchives/tools/_spacing.scss

@@ -0,0 +1,22 @@
+@use "sass:map";
+@use "../variables/spacing";
+
+%space-below {
+  margin-bottom: 2rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+@mixin space-below {
+  @extend %space-below;
+}
+
+@function spacing($size) {
+  @return map.get(spacing.$spacing, $size);
+}
+
+@function spacing-mobile($size) {
+  @return map.get(spacing.$spacing-mobile, $size);
+}

package/nationalarchives/tools/_typography.scss

@@ -33,10 +33,6 @@
   font-weight: typography.$font-weight-detail;
 }
 
-@mixin detail-font-weight-bold {
-  font-weight: typography.$font-weight-detail-bold;
-}
-
 @mixin detail-font-small {
   @include detail-font;
   @include relative-font-size(14);

package/nationalarchives/utilities/_a11y.scss

@@ -0,0 +1,24 @@
+.tna-visually-hidden {
+  width: 1px !important;
+  height: 1px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+
+  position: absolute !important;
+  top: -9999px !important;
+  left: -9999px !important;
+  z-index: -1 !important;
+
+  overflow: hidden !important;
+
+  clip: rect(0, 0, 0, 0) !important;
+
+  border: 0 !important;
+
+  background-color: transparent !important;
+
+  &::before,
+  &::after {
+    content: "\00a0";
+  }
+}