From 345b0b2452f84a1db115906d5af72ef0652302ea Mon Sep 17 00:00:00 2001
From: Andrew Hosgood <andrew.hosgood@nationalarchives.gov.uk>
Date: Tue, 21 Nov 2023 10:54:38 +0000
Subject: [PATCH] Remove loads of comments

---
 .storybook/preview.js                         |  5 +-
 .storybook/storybook.scss                     |  2 -
 .storybook/viewports.js                       | 42 ---------------
 src/nationalarchives/all.mjs                  | 11 ----
 .../components/button/button.scss             | 10 ----
 .../components/card/card.scss                 | 17 ------
 .../components/checkboxes/checkboxes.scss     |  8 ---
 .../components/date-search/date-search.scss   |  1 -
 .../components/filters/filters.scss           |  8 ---
 .../components/gallery/gallery.scss           | 11 ----
 .../components/gallery/gallery.stories.js     | 18 +++----
 .../components/header/header.scss             | 21 ++++----
 .../components/header/header.stories.js       | 41 --------------
 .../components/message/message.scss           |  7 +--
 .../components/picture/picture.mjs            |  4 --
 .../components/radios/radios.scss             |  2 -
 .../components/search-field/search-field.scss |  2 -
 .../components/select/select.scss             |  1 -
 .../components/text-input/text-input.scss     |  1 -
 .../text-input/text-input.stories.js          | 24 ++++-----
 .../components/textarea/textarea.scss         |  9 ++--
 src/nationalarchives/prototype-kit.scss       |  9 ----
 .../colour-schemes/colour-schemes.stories.js  | 36 ++++++-------
 .../stories/utilities/overrides/overrides.mdx | 53 -------------------
 .../typography/typography.stories.js          |  6 ---
 src/nationalarchives/tools/_colour.scss       |  5 --
 src/nationalarchives/tools/_typography.scss   |  1 -
 src/nationalarchives/variables/_colour.scss   |  1 -
 .../variables/_typography.scss                |  2 +-
 29 files changed, 54 insertions(+), 304 deletions(-)
 delete mode 100644 src/nationalarchives/stories/utilities/overrides/overrides.mdx

diff --git a/.storybook/preview.js b/.storybook/preview.js
index cf2cb800..265b55c0 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -2,7 +2,6 @@ import "../src/nationalarchives/all.scss";
 import { a11yConfig } from "./storybook-config";
 import { customViewports } from "./viewports";
 import Cookies from "../src/nationalarchives/lib/cookies.mjs";
-// import isChromatic from "chromatic/isChromatic";
 
 document.documentElement.classList.add(
   "tna-template",
@@ -14,9 +13,7 @@ if (window.self !== window.top) {
 document.body.classList.add("tna-template__body");
 
 export const parameters = {
-  actions: {
-    // disable: true,
-  },
+  actions: {},
   viewport: { viewports: customViewports },
   options: { showPanel: true },
   a11y: {
diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss
index de20d0b5..ab4bcb38 100644
--- a/.storybook/storybook.scss
+++ b/.storybook/storybook.scss
@@ -162,7 +162,5 @@
     padding-left: 0.5rem;
 
     @include colour.colour-background("background-tint");
-
-    // @include colour.colour-border("keyline", 1px, solid, top);
   }
 }
diff --git a/.storybook/viewports.js b/.storybook/viewports.js
index 93eec292..e55285c0 100644
--- a/.storybook/viewports.js
+++ b/.storybook/viewports.js
@@ -1,47 +1,5 @@
 export const customViewports = {
   // ...MINIMAL_VIEWPORTS,
-  // largeMin: {
-  //   name: "Smallest large device",
-  //   styles: {
-  //     width: "1025px",
-  //     height: "800px",
-  //   },
-  // },
-  // mediumMax: {
-  //   name: "Largest medium device",
-  //   styles: {
-  //     width: "1024px",
-  //     height: "800px",
-  //   },
-  // },
-  // mediumMin: {
-  //   name: "Smallest medium device",
-  //   styles: {
-  //     width: "769px",
-  //     height: "800px",
-  //   },
-  // },
-  // smallMax: {
-  //   name: "Largest small device",
-  //   styles: {
-  //     width: "768px",
-  //     height: "800px",
-  //   },
-  // },
-  // smallMin: {
-  //   name: "Smallest small device",
-  //   styles: {
-  //     width: "481px",
-  //     height: "800px",
-  //   },
-  // },
-  // tinyMax: {
-  //   name: "Largest tiny device",
-  //   styles: {
-  //     width: "480px",
-  //     height: "800px",
-  //   },
-  // },
   medium: {
     name: "Medium device",
     styles: {
diff --git a/src/nationalarchives/all.mjs b/src/nationalarchives/all.mjs
index 3baf8530..8901a4ed 100644
--- a/src/nationalarchives/all.mjs
+++ b/src/nationalarchives/all.mjs
@@ -32,17 +32,6 @@ window.addEventListener("touchstart", onFirstTouch);
 window.addEventListener("keydown", onKeyDown);
 window.addEventListener("mousedown", onMouseDown);
 
-// if (document.documentElement.classList.contains("tna-template--system-theme")) {
-//   document.documentElement.classList.add(
-//     window.matchMedia("(prefers-color-scheme: dark)").matches
-//       ? "tna-template--dark-theme"
-//       : "tna-template--light-theme",
-//   );
-//   if (window.matchMedia("(prefers-contrast: more)").matches) {
-//     document.documentElement.classList.add("tna-template--high-contrast-theme");
-//   }
-// }
-
 const initAll = (options) => {
   options = typeof options !== "undefined" ? options : {};
   const $scope =
diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss
index d9ac9996..65b03391 100644
--- a/src/nationalarchives/components/button/button.scss
+++ b/src/nationalarchives/components/button/button.scss
@@ -23,11 +23,6 @@
 
   @include colour.colour-border("button-background", 0.25rem);
 
-  // transition:
-  //   color 200ms,
-  //   background-color 200ms,
-  //   border-color 200ms;
-
   cursor: pointer;
 
   &,
@@ -48,11 +43,6 @@
     text-decoration: none;
 
     background: transparent;
-
-    // transition:
-    //   color 50ms,
-    //   background-color 50ms,
-    //   border-color 50ms;
   }
 
   &--plain {
diff --git a/src/nationalarchives/components/card/card.scss b/src/nationalarchives/components/card/card.scss
index c37092a9..645d2051 100644
--- a/src/nationalarchives/components/card/card.scss
+++ b/src/nationalarchives/components/card/card.scss
@@ -61,9 +61,6 @@
   }
 
   &__meta {
-    // margin: 0;
-    // padding: 0;
-
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem 1.5rem;
@@ -72,20 +69,6 @@
 
     list-style: none;
 
-    // &-item {
-    //   display: flex;
-    //   align-items: center;
-
-    //   @include colour.colour-font("font-dark");
-    //   @include typography.detail-font-small;
-
-    //   .fa-solid {
-    //     margin-right: 0.75rem;
-
-    //     @include colour.colour-font("icon-light");
-    //   }
-    // }
-
     + p {
       margin-top: 1rem;
     }
diff --git a/src/nationalarchives/components/checkboxes/checkboxes.scss b/src/nationalarchives/components/checkboxes/checkboxes.scss
index fe1adb7c..a195261a 100644
--- a/src/nationalarchives/components/checkboxes/checkboxes.scss
+++ b/src/nationalarchives/components/checkboxes/checkboxes.scss
@@ -5,8 +5,6 @@
 @use "../../utilities";
 
 .tna-checkboxes {
-  // margin-top: 1rem;
-
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -75,9 +73,6 @@
         left: 1rem;
         z-index: 2;
 
-        // @include colour.colour-border("input-foreground", 0, solid);
-        // border-width: 0 0 forms.$checkbox-checkmark-width
-        //   forms.$checkbox-checkmark-width;
         @include colour.colour-border("input-background", 0, solid);
         border-width: 0 0 forms.$checkbox-checkmark-width
           forms.$checkbox-checkmark-width;
@@ -107,10 +102,7 @@
         height: 0.375rem;
         margin-top: -0.125rem;
 
-        /* stylelint-disable-next-line number-max-precision */
-        // top: 0.46875rem;
         top: 0.75rem;
-        // left: 0.375rem;
         left: 0.75rem;
       }
     }
diff --git a/src/nationalarchives/components/date-search/date-search.scss b/src/nationalarchives/components/date-search/date-search.scss
index 33d7d0e2..b6c06f9a 100644
--- a/src/nationalarchives/components/date-search/date-search.scss
+++ b/src/nationalarchives/components/date-search/date-search.scss
@@ -4,7 +4,6 @@
 
 .tna-date-search {
   max-width: 100%;
-  // margin-top: 1rem;
   padding: 0 0.375rem;
 
   display: block;
diff --git a/src/nationalarchives/components/filters/filters.scss b/src/nationalarchives/components/filters/filters.scss
index 6ea15009..2873e206 100644
--- a/src/nationalarchives/components/filters/filters.scss
+++ b/src/nationalarchives/components/filters/filters.scss
@@ -30,10 +30,6 @@
 
     border-radius: 99rem;
 
-    // transition:
-    //   color 200ms,
-    //   background-color 200ms;
-
     &,
     &:link,
     &:visited {
@@ -44,10 +40,6 @@
       color: #fff;
 
       background-color: #004c7e;
-
-      // transition:
-      //   color 50ms,
-      //   background-color 50ms;
     }
   }
 }
diff --git a/src/nationalarchives/components/gallery/gallery.scss b/src/nationalarchives/components/gallery/gallery.scss
index 93c2b267..6c47fae1 100644
--- a/src/nationalarchives/components/gallery/gallery.scss
+++ b/src/nationalarchives/components/gallery/gallery.scss
@@ -16,7 +16,6 @@
 
   &__items {
     width: 100%;
-    // padding-top: 2rem;
 
     display: flex;
     flex-direction: column;
@@ -106,23 +105,13 @@
 
   @include colour.on-high-contrast {
     &__items {
-      // padding-top: 2rem;
     }
 
     &__item {
-      // padding-bottom: 2rem;
-
-      // @include colour.colour-border("keyline-dark", 1px);
-
       &-index {
-        // padding-top: 0.5rem;
       }
 
       &-description {
-        // margin-bottom: 2rem;
-        // padding: 0 1rem 1rem;
-
-        // border: none;
       }
     }
   }
diff --git a/src/nationalarchives/components/gallery/gallery.stories.js b/src/nationalarchives/components/gallery/gallery.stories.js
index ed7459de..fdaf8b3f 100644
--- a/src/nationalarchives/components/gallery/gallery.stories.js
+++ b/src/nationalarchives/components/gallery/gallery.stories.js
@@ -1,7 +1,5 @@
 import Gallery from "./template.njk";
 import macroOptions from "./macro-options.json";
-// import { expect } from "@storybook/jest";
-// import { within, userEvent } from "@storybook/testing-library";
 
 const argTypes = {
   heading: { control: "object" },
@@ -62,14 +60,14 @@ Standard.args = {
               },
             ]
           : index === 1
-          ? [
-              {
-                id: "tab-1",
-                title: "Transcript",
-                body: "<p>TEST TRANSCRIPT</p>",
-              },
-            ]
-          : null,
+            ? [
+                {
+                  id: "tab-1",
+                  title: "Transcript",
+                  body: "<p>TEST TRANSCRIPT</p>",
+                },
+              ]
+            : null,
     })),
 
   classes: "tna-gallery--demo",
diff --git a/src/nationalarchives/components/header/header.scss b/src/nationalarchives/components/header/header.scss
index 618367a9..503ad82a 100644
--- a/src/nationalarchives/components/header/header.scss
+++ b/src/nationalarchives/components/header/header.scss
@@ -169,7 +169,7 @@
 
     @include colour.colour-background("font-dark");
 
-    transition: height 1ms 100ms;
+    // transition: height 1ms 100ms;
 
     &::before,
     &::after {
@@ -183,10 +183,10 @@
 
       background-color: inherit;
 
-      transition:
-        top 100ms 100ms,
-        bottom 100ms 100ms,
-        transform 100ms;
+      // transition:
+      //   top 100ms 100ms,
+      //   bottom 100ms 100ms,
+      //   transform 100ms;
 
       content: "";
     }
@@ -225,10 +225,10 @@
 
         &::before,
         &::after {
-          transition:
-            top 100ms,
-            bottom 100ms,
-            transform 100ms 100ms;
+          // transition:
+          //   top 100ms,
+          //   bottom 100ms,
+          //   transform 100ms 100ms;
         }
 
         &::before {
@@ -264,8 +264,6 @@
     justify-content: flex-end;
     gap: 0.5rem 1.5rem;
 
-    // order: 1;
-
     list-style: none;
 
     line-height: 1;
@@ -387,7 +385,6 @@
 
     &__navigation-toggle {
       &.tna-column {
-        // padding-right: gridVars.$gutter-width-tiny;
         padding-left: 0;
       }
     }
diff --git a/src/nationalarchives/components/header/header.stories.js b/src/nationalarchives/components/header/header.stories.js
index 0312b36c..111cccf9 100644
--- a/src/nationalarchives/components/header/header.stories.js
+++ b/src/nationalarchives/components/header/header.stories.js
@@ -210,44 +210,3 @@ Mobile.play = async ({ args, canvasElement, step }) => {
 
   $navigationToggle.blur();
 };
-
-// export const NoJavascript = Template.bind({});
-// NoJavascript.args = {
-//   navigation: [
-//     {
-//       text: "Alpha",
-//       href: "#/alpha",
-//       selected: true,
-//     },
-//     {
-//       text: "Beta",
-//       href: "#/beta",
-//     },
-//     {
-//       text: "Gamma",
-//       href: "#/gamma",
-//     },
-//   ],
-//   classes: "tna-header--demo",
-// };
-// NoJavascript.play = async ({ args, canvasElement, step }) => {
-//   document.documentElement.classList.remove("tna-template--js-enabled");
-//   canvasElement.innerHTML = canvasElement.innerHTML;
-//   const $navigationToggleWrapper = canvasElement.querySelector(
-//     `.tna-header__navigation-toggle`,
-//   );
-//   $navigationToggleWrapper.innerHTML = "";
-
-//   const canvas = within(canvasElement);
-
-//   // const $navigationItems = canvasElement.querySelector(
-//   //   `.tna-header__navigation-items`,
-//   // );
-//   // const [$linkA, $linkB, $linkC] = args.navigation.map((navigationItem) =>
-//   //   canvas.getByText(navigationItem.text),
-//   // );
-//   // await expect($navigationItems).toBeVisible();
-//   // await expect($linkA).toBeVisible();
-//   // await expect($linkB).toBeVisible();
-//   // await expect($linkC).toBeVisible();
-// };
diff --git a/src/nationalarchives/components/message/message.scss b/src/nationalarchives/components/message/message.scss
index d248bf2a..80ecf801 100644
--- a/src/nationalarchives/components/message/message.scss
+++ b/src/nationalarchives/components/message/message.scss
@@ -12,15 +12,10 @@
 
   color: colour.brand-colour("black");
 
-  @include colour.colour-background("keyline");
-
-  @include colour.colour-border("keyline-dark", 0.5rem, solid, left);
-
-  // &--yellow {
   background-color: colour.brand-colour("cream");
 
+  @include colour.colour-border("keyline-dark", 0.5rem, solid, left);
   border-left-color: colour.brand-colour("yellow");
-  // }
 
   &__icon {
     margin-right: 1rem;
diff --git a/src/nationalarchives/components/picture/picture.mjs b/src/nationalarchives/components/picture/picture.mjs
index 761a53a2..b6eb4c91 100644
--- a/src/nationalarchives/components/picture/picture.mjs
+++ b/src/nationalarchives/components/picture/picture.mjs
@@ -35,7 +35,6 @@ export class Picture {
 
     this.$transcript.setAttribute("id", uniqueId);
     this.$transcript.setAttribute("hidden", true);
-    // this.$transcript.setAttribute("tabindex", "-1");
   }
 
   handleToggleTranscript() {
@@ -47,9 +46,6 @@ export class Picture {
       this.$transcriptToggle.setAttribute("aria-expanded", true);
       this.$transcriptToggle.innerText = "Close transcript";
       this.$transcript.removeAttribute("hidden");
-      // this.$transcript.setAttribute("tabindex", "0");
-      // this.$transcript.focus();
-      // this.$transcript.setAttribute("tabindex", "-1");
     } else {
       this.$transcriptToggle.classList.remove(transcriptToggleOpenedClass);
       this.$transcriptToggle.setAttribute("aria-expanded", false);
diff --git a/src/nationalarchives/components/radios/radios.scss b/src/nationalarchives/components/radios/radios.scss
index 8de6bd4a..bd689629 100644
--- a/src/nationalarchives/components/radios/radios.scss
+++ b/src/nationalarchives/components/radios/radios.scss
@@ -5,8 +5,6 @@
 @use "../../utilities";
 
 .tna-radios {
-  // margin-top: 1rem;
-
   display: flex;
   flex-direction: column;
   align-items: flex-start;
diff --git a/src/nationalarchives/components/search-field/search-field.scss b/src/nationalarchives/components/search-field/search-field.scss
index 89ac3c3e..522060b7 100644
--- a/src/nationalarchives/components/search-field/search-field.scss
+++ b/src/nationalarchives/components/search-field/search-field.scss
@@ -4,8 +4,6 @@
 
 .tna-search-field {
   &__fields {
-    // margin-top: 1rem;
-
     display: flex;
     align-self: stretch;
   }
diff --git a/src/nationalarchives/components/select/select.scss b/src/nationalarchives/components/select/select.scss
index f52ea9a1..3cb2dc24 100644
--- a/src/nationalarchives/components/select/select.scss
+++ b/src/nationalarchives/components/select/select.scss
@@ -5,7 +5,6 @@
 .tna-select {
   max-width: 100%;
   height: calc(2rem + 6px);
-  // margin-top: 1rem;
   padding: 0 1rem 0 0.5rem;
 
   display: block;
diff --git a/src/nationalarchives/components/text-input/text-input.scss b/src/nationalarchives/components/text-input/text-input.scss
index a005006f..0f892732 100644
--- a/src/nationalarchives/components/text-input/text-input.scss
+++ b/src/nationalarchives/components/text-input/text-input.scss
@@ -4,7 +4,6 @@
 
 .tna-text-input {
   width: 100%;
-  // margin-top: 1rem;
   padding: 0 0.375rem;
 
   display: block;
diff --git a/src/nationalarchives/components/text-input/text-input.stories.js b/src/nationalarchives/components/text-input/text-input.stories.js
index d9187685..2ce0005e 100644
--- a/src/nationalarchives/components/text-input/text-input.stories.js
+++ b/src/nationalarchives/components/text-input/text-input.stories.js
@@ -45,18 +45,18 @@ const argTypes = {
       "country",
       "country-name",
       "postal-code",
-      // "cc-name",
-      // "cc-given-name",
-      // "cc-additional-name",
-      // "cc-family-name",
-      // "cc-number",
-      // "cc-exp",
-      // "cc-exp-month",
-      // "cc-exp-year",
-      // "cc-csc",
-      // "cc-type",
-      // "transaction-currency",
-      // "transaction-amount",
+      "cc-name",
+      "cc-given-name",
+      "cc-additional-name",
+      "cc-family-name",
+      "cc-number",
+      "cc-exp",
+      "cc-exp-month",
+      "cc-exp-year",
+      "cc-csc",
+      "cc-type",
+      "transaction-currency",
+      "transaction-amount",
       "language",
       "bday",
       "bday-day",
diff --git a/src/nationalarchives/components/textarea/textarea.scss b/src/nationalarchives/components/textarea/textarea.scss
index e317fca4..73e98862 100644
--- a/src/nationalarchives/components/textarea/textarea.scss
+++ b/src/nationalarchives/components/textarea/textarea.scss
@@ -2,16 +2,15 @@
 @use "../../tools/colour";
 @use "../../utilities";
 
-.tna-textarea {
-  $textarea-minimum-lines-visible: 5.5;
-  $textarea-line-height: 1.5rem;
-  $textarea-vertical-padding: 0.25rem;
+$textarea-minimum-lines-visible: 5.5 !default;
+$textarea-line-height: 1.5rem !default;
+$textarea-vertical-padding: 0.25rem !default;
 
+.tna-textarea {
   width: 100%;
   min-height: #{($textarea-line-height * $textarea-minimum-lines-visible) + (
       2 * $textarea-vertical-padding
     )};
-  // margin-top: 1rem;
   padding: $textarea-vertical-padding 0.5rem;
 
   display: block;
diff --git a/src/nationalarchives/prototype-kit.scss b/src/nationalarchives/prototype-kit.scss
index e433ddc8..b214fa93 100644
--- a/src/nationalarchives/prototype-kit.scss
+++ b/src/nationalarchives/prototype-kit.scss
@@ -6,12 +6,3 @@
 );
 
 @use "all";
-
-.tna-template__body {
-  // This override is to cancel out specific styles added by govuk-frontend
-  p {
-    // color: inherit;
-    // font-family: inherit;
-    // font-weight: inherit;
-  }
-}
diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
index 778451c8..bd138585 100644
--- a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
+++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
@@ -69,28 +69,28 @@ const Template = ({ theme, accent }) => {
     theme === "system"
       ? "tna-template--system-theme"
       : theme === "light"
-      ? "tna-template--light-theme"
-      : theme === "dark"
-      ? "tna-template--dark-theme"
-      : theme === "light high-contrast"
-      ? "tna-template--light-theme tna-template--high-contrast-theme"
-      : theme === "dark high-contrast"
-      ? "tna-template--dark-theme tna-template--high-contrast-theme"
-      : ""
+        ? "tna-template--light-theme"
+        : theme === "dark"
+          ? "tna-template--dark-theme"
+          : theme === "light high-contrast"
+            ? "tna-template--light-theme tna-template--high-contrast-theme"
+            : theme === "dark high-contrast"
+              ? "tna-template--dark-theme tna-template--high-contrast-theme"
+              : ""
   } ${
     accent === "black"
       ? "tna-template--black-accent"
       : accent === "yellow"
-      ? "tna-template--yellow-accent"
-      : accent === "pink"
-      ? "tna-template--pink-accent"
-      : accent === "orange"
-      ? "tna-template--orange-accent"
-      : accent === "green"
-      ? "tna-template--green-accent"
-      : accent === "blue"
-      ? "tna-template--blue-accent"
-      : ""
+        ? "tna-template--yellow-accent"
+        : accent === "pink"
+          ? "tna-template--pink-accent"
+          : accent === "orange"
+            ? "tna-template--orange-accent"
+            : accent === "green"
+              ? "tna-template--green-accent"
+              : accent === "blue"
+                ? "tna-template--blue-accent"
+                : ""
   }">
   <div class="tna-template__body tna-template__body--padded">
     <!--
diff --git a/src/nationalarchives/stories/utilities/overrides/overrides.mdx b/src/nationalarchives/stories/utilities/overrides/overrides.mdx
deleted file mode 100644
index 638deae3..00000000
--- a/src/nationalarchives/stories/utilities/overrides/overrides.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Meta, Canvas } from "@storybook/blocks";
-import * as OverrideStories from "./overrides.stories";
-
-<Meta of={OverrideStories} />
-
-# Overrides
-
-## Options
-
-`property`:
-
-- `margin`
-- `padding`
-
-`direction`:
-
-- `top`
-- `bottom`
-- `vertical` - `top` and `bottom`
-
-## Removing space
-
-```
-// For all devices
-tna-!--no-[property]-[direction]
-```
-
-`device` options (optional):
-
-- `large`
-- `medium`
-- `small`
-- `tiny`
-
-```
-// For a specific device size
-tna-!--no-[property]-[direction]-[device]
-```
-
-## Adding space
-
-`size` options:
-
-- `xs`
-- `s`
-- `m`
-- `l`
-- `xl`
-- `xxl`
-
-```css
-tna-!--[property]-[direction]-[size]
-```
diff --git a/src/nationalarchives/stories/utilities/typography/typography.stories.js b/src/nationalarchives/stories/utilities/typography/typography.stories.js
index 9394f4da..1e2345fa 100644
--- a/src/nationalarchives/stories/utilities/typography/typography.stories.js
+++ b/src/nationalarchives/stories/utilities/typography/typography.stories.js
@@ -57,12 +57,6 @@ SceneSetterSmall.args = {
   text: `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>.`,
 };
 
-// const TextDetailsTemplate = () =>
-//   `<p>
-//     Typed slip with photographs - 'The <span class="tna-detail" title="Italian (miscellaneous)" data-type="misc">Italian</span> Steamer <span class="tna-detail" title="Aida Lauro (person)" data-type="per">Aida Lauro</span> which ran on the rocks near <span class="tna-detail" title="Cape Cornwall (location)" data-type="loc">Cape Cornwall</span> a few days ago is now a total wreck. After a severe buffeting by heavy seas the ship has broken in two. The photograph shows the <span class="tna-detail" title="Aida Lauro (person)" data-type="per">Aida Lauro</span> broken in two by a severe buffeting from the seas near <a href="#" class="tna-detail" title="Cape Cornwall (location)" data-type="loc">Cape Cornwall</a>.
-//   </p>`;
-// export const TextDetails = TextDetailsTemplate.bind({});
-
 const BlockquoteTemplate = ({
   html,
   author,
diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss
index e93437ed..a8d76d26 100644
--- a/src/nationalarchives/tools/_colour.scss
+++ b/src/nationalarchives/tools/_colour.scss
@@ -32,7 +32,6 @@
 
 @mixin accent-css-vars($colour) {
   @if $colour == "yellow" {
-    // --accent: #{brand-colour("yellow")} !important;
     --accent-background: #{brand-colour("yellow")} !important;
     --accent-background-light: #{brand-colour("cream")} !important;
     --accent-font-base: #{brand-colour("black")} !important;
@@ -56,22 +55,18 @@
     @if $colour != "black" {
       --button-accent-text: #{brand-colour("white")} !important;
       @if $colour == "pink" {
-        // --accent: #{brand-colour("pink")} !important;
         --accent-background: #{brand-colour("maroon")} !important;
         --accent-background-light: #{brand-colour("pastel-pink")} !important;
         --button-accent-background: #{brand-colour("maroon")} !important;
       } @else if $colour == "orange" {
-        // --accent: #{brand-colour("orange")} !important;
         --accent-background: #{brand-colour("chestnut")} !important;
         --accent-background-light: #{brand-colour("pastel-orange")} !important;
         --button-accent-background: #{brand-colour("chestnut")} !important;
       } @else if $colour == "green" {
-        // --accent: #{brand-colour("green")} !important;
         --accent-background: #{brand-colour("forest")} !important;
         --accent-background-light: #{brand-colour("pastel-green")} !important;
         --button-accent-background: #{brand-colour("forest")} !important;
       } @else if $colour == "blue" {
-        // --accent: #{brand-colour("blue")} !important;
         --accent-background: #{brand-colour("navy")} !important;
         --accent-background-light: #{brand-colour("pastel-blue")} !important;
         --button-accent-background: #{brand-colour("navy")} !important;
diff --git a/src/nationalarchives/tools/_typography.scss b/src/nationalarchives/tools/_typography.scss
index a393be58..34b0f76b 100644
--- a/src/nationalarchives/tools/_typography.scss
+++ b/src/nationalarchives/tools/_typography.scss
@@ -47,5 +47,4 @@
   @include relative-font-size(14);
   text-transform: uppercase;
   line-height: #{math.div(typography.$relative-1rem-px, 14)};
-  // line-height: 1;
 }
diff --git a/src/nationalarchives/variables/_colour.scss b/src/nationalarchives/variables/_colour.scss
index 2860dec2..86519867 100644
--- a/src/nationalarchives/variables/_colour.scss
+++ b/src/nationalarchives/variables/_colour.scss
@@ -80,7 +80,6 @@ $colour-palette-default: (
   "contrast-button-background": brand-colour("white"),
   "contrast-button-hover-text": brand-colour("white"),
   "contrast-button-hover-background": brand-colour("black"),
-  // "accent": brand-colour("light-grey"),
   "accent-background": #111,
   "accent-background-light": brand-colour("light-grey"),
   "accent-font-base": brand-colour("white"),
diff --git a/src/nationalarchives/variables/_typography.scss b/src/nationalarchives/variables/_typography.scss
index 6bc1e7b7..76e7b8d0 100644
--- a/src/nationalarchives/variables/_typography.scss
+++ b/src/nationalarchives/variables/_typography.scss
@@ -6,7 +6,7 @@ $relative-1rem-px: 16;
 
 $body-font-size-px: 18 !default;
 $body-font-size-px-mobile: 17 !default;
-$body-line-height: #{math.div(16, 18) * 2} !default; // 1.77777
+$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777
 
 $interactive-text-decoration-thickness: 3.5px !default;