@nationalarchives/frontend 0.1.51 → 0.1.53

package/nationalarchives/tools/_colour.scss

@@ -1,5 +1,5 @@
-@use "sass:map";
 @use "sass:list";
+@use "sass:map";
 @use "../variables/borders";
 @use "../variables/colour";
 @use "../tools/media";
@@ -154,65 +154,43 @@
     solid;
 }
 
+// Use light theme colours (except for "form-error")
 %light {
   @include colour-css-vars("form-error");
 
   @media (prefers-contrast: more) {
     @include colour-css-vars-high-contrast("form-error");
   }
-
-  .tna-template--high-contrast-theme & {
-    @include colour-css-vars-high-contrast("form-error");
-  }
 }
 
 @mixin light {
   @extend %light;
 }
 
-%dark {
-  @include colour-css-vars-dark("form-error");
+// Remove accent and contrast values (except for "form-error")
+%plain {
+  @include colour-css-vars("form-error");
 
   @media (prefers-contrast: more) {
-    @include colour-css-vars-high-contrast-dark("form-error");
-  }
-
-  .tna-template--high-contrast-theme & {
-    @include colour-css-vars-high-contrast-dark("form-error");
+    @include colour-css-vars-high-contrast("form-error");
   }
-}
-
-@mixin dark {
-  @extend %dark;
-}
 
-%plain {
   .tna-template--system-theme & {
-    @extend %light;
-
     @media (prefers-color-scheme: dark) {
-      @include colour-css-vars-dark;
+      @include colour-css-vars-dark("form-error");
     }
 
     @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
-      @include colour-css-vars-high-contrast-dark;
+      @include colour-css-vars-high-contrast-dark("form-error");
     }
   }
 
-  .tna-template--light-theme & {
-    @include colour-css-vars;
-  }
-
   .tna-template--dark-theme & {
-    @include colour-css-vars-dark;
-  }
-
-  .tna-template--high-contrast-theme & {
-    @include colour-css-vars-high-contrast;
-  }
+    @include colour-css-vars-dark("form-error");
 
-  .tna-template--high-contrast-theme.tna-template--dark-theme & {
-    @include colour-css-vars-high-contrast-dark;
+    @media (prefers-contrast: more) {
+      @include colour-css-vars-high-contrast-dark("form-error");
+    }
   }
 
   @include colour-background("background");
@@ -272,6 +250,18 @@
   @extend %contrast-on-mobile;
 }
 
+%tint {
+  --background: var(--background-tint);
+
+  @include colour-background("background");
+
+  @include colour-font("font-base");
+}
+
+@mixin tint {
+  @extend %tint;
+}
+
 %accent {
   --background: var(--accent-background);
   --font-base: var(--accent-font-base);
@@ -292,34 +282,12 @@
   @extend %accent;
 }
 
-%tint {
-  --background: var(--background-tint);
-
-  @include colour-background("background");
-
-  @include colour-font("font-base");
-}
-
-@mixin tint {
-  @extend %tint;
-}
-
-%accent-background {
-  @include colour-background("accent-background");
-}
-
-@mixin accent-background {
-  @extend %accent-background;
-}
-
 %accent-light {
   --background: var(--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")};
   --icon-light: #{map.get(colour.$colour-palette-default, "icon-light")};
-  // --link: #{map.get(colour.$colour-palette-default, "link")};
-  // --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")};
@@ -336,9 +304,6 @@
       "button-hover-background"
     )};
 
-  @include colour-background("background");
-  @include colour-font("font-base");
-
   .tna-template--system-theme & {
     @media (prefers-color-scheme: dark) {
       --link: #{map.get(colour.$colour-palette-default, "link")};
@@ -350,6 +315,9 @@
     --link: #{map.get(colour.$colour-palette-default, "link")};
     --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
   }
+
+  @include colour-background("background");
+  @include colour-font("font-base");
 }
 
 @mixin accent-light {
@@ -367,8 +335,8 @@
   --accent-link-visited: #{colour.brand-colour("black")} !important;
   --accent-keyline: #{colour.brand-colour("black", 0.5)} !important;
   --accent-keyline-dark: #{colour.brand-colour("black", 0.8)} !important;
-  --button-accent-text: #{colour.brand-colour("black")} !important;
-  --button-accent-background: #{colour.brand-colour("yellow")} !important;
+  --button-accent-text: #{colour.brand-colour("white")} !important;
+  --button-accent-background: #{colour.brand-colour("brown")} !important;
 }
 
 @mixin yellow-accent {
@@ -444,15 +412,9 @@
 }
 
 @mixin on-high-contrast {
-  .tna-template--high-contrast-theme & {
+  @media (prefers-contrast: more) {
     @content;
   }
-
-  .tna-template--system-theme & {
-    @media (prefers-contrast: more) {
-      @content;
-    }
-  }
 }
 
 @mixin on-forced-colours {

package/nationalarchives/tools/_typography.scss

@@ -21,14 +21,14 @@
 
 @mixin main-font($bold: false) {
   font-family: typography.$main-font-family;
+  font-style: normal;
+  font-optical-sizing: auto;
+  font-variation-settings: "wdth" 100;
   @if $bold {
     @include main-font-weight-bold;
   } @else {
     @include main-font-weight;
   }
-  font-optical-sizing: auto;
-  font-style: normal;
-  font-variation-settings: "wdth" 100;
 }
 
 @mixin heading-font {
@@ -38,20 +38,20 @@
 
 @mixin detail-font($bold: false) {
   font-family: typography.$detail-font-family;
+  font-style: normal;
+  font-optical-sizing: auto;
   @if $bold {
     font-weight: typography.$detail-font-weight-bold;
   } @else {
     font-weight: typography.$detail-font-weight;
   }
-  font-optical-sizing: auto;
-  font-style: normal;
 }
 
 @mixin detail-font-small {
   @include detail-font;
   @include relative-font-size(14);
-  text-transform: uppercase;
   line-height: 1.1;
+  text-transform: uppercase;
 }
 
 @mixin interacted-text-decoration {
@@ -66,14 +66,13 @@
   $font-size-tiny,
   $line-height
 ) {
-  @include relative-font-size($font-size-default);
-  line-height: $line-height;
-
   $small-and-tiny-identical: $font-size-small == $font-size-tiny;
   $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and
     $small-and-tiny-identical;
   $all-identical: $font-size-default == $font-size-medium and
     $medium-small-and-tiny-identical and $small-and-tiny-identical;
+  line-height: $line-height;
+  @include relative-font-size($font-size-default);
 
   @if $all-identical != true {
     @if $medium-small-and-tiny-identical != true {

package/nationalarchives/utilities/_a11y.scss

@@ -7,18 +7,18 @@
   margin: 0 !important;
   padding: 0 !important;
 
+  overflow: hidden !important;
+
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
   z-index: -1 !important;
 
-  overflow: hidden !important;
-
-  clip: rect(0, 0, 0, 0) !important;
+  background-color: transparent !important;
 
   border: 0 !important;
 
-  background-color: transparent !important;
+  clip: rect(0, 0, 0, 0) !important;
 
   // &::before,
   // &::after {

package/nationalarchives/utilities/_colour.scss

@@ -1,41 +1,20 @@
 @use "../tools/colour";
 
 .tna-template {
-  @include colour.colour-background("background");
-
-  &--system-theme,
-  &--light-theme {
-    @include colour.colour-css-vars;
+  @include colour.light;
 
-    @media (prefers-contrast: more) {
-      @include colour.colour-css-vars-high-contrast;
-    }
-  }
+  @include colour.colour-background("background");
 
   &--system-theme {
-    // @include colour.colour-css-vars;
-
     @media (prefers-color-scheme: dark) {
       @include colour.colour-css-vars-dark;
     }
 
-    // @media (prefers-contrast: more) {
-    //   @include colour.colour-css-vars-high-contrast;
-    // }
-
     @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
       @include colour.colour-css-vars-high-contrast-dark;
     }
   }
 
-  // &--light-theme {
-  //   @include colour.colour-css-vars;
-
-  //   @media (prefers-contrast: more) {
-  //     @include colour.colour-css-vars-high-contrast;
-  //   }
-  // }
-
   &--dark-theme {
     @include colour.colour-css-vars-dark;
 
@@ -44,19 +23,7 @@
     }
   }
 
-  // &--high-contrast-theme {
-  //   @include colour.colour-css-vars-high-contrast;
-
-  //   * {
-  //     background-image: none !important;
-  //   }
-
-  //   &.tna-template--dark-theme {
-  //     @include colour.colour-css-vars-high-contrast-dark;
-  //   }
-  // }
-
-  &--black--accent {
+  &--black-accent {
     @include colour.black-accent;
   }
 

package/nationalarchives/utilities/_debug.scss

@@ -19,6 +19,8 @@
       0 0 0.5rem #f0a !important;
 
     &::after {
+      content: "";
+
       width: 20px;
       height: 20px;
 
@@ -39,8 +41,6 @@
         0 0 0.5rem #0f3 !important;
 
       transform: translateX(-50%) translateY(-50%);
-
-      content: "";
     }
 
     &:not(.tna-checkboxes__item-label, .tna-radios__item-label) {

package/nationalarchives/utilities/_global.scss

@@ -1,4 +1,12 @@
 .tna-template {
+  /*
+   * ------------------------------------------
+   * A minimum page width of 320px is needed in
+   * order to meet the WCAG AA success criteria
+   * for 1.4.10 (Reflow)
+   * https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
+   * ------------------------------------------
+   */
   min-width: 320px;
   width: 100%;
   height: 100%;

package/nationalarchives/utilities/_imports.scss

@@ -0,0 +1,57 @@
+@use "../variables/assets";
+@use "../variables/typography";
+@use "../lib/functions";
+
+@if typography.$use-local-fonts {
+  @font-face {
+    font-family: typography.$main-font-family-name;
+    src: url("#{assets.$tna-font-path}/#{typography.$main-font-file}");
+    font-weight: typography.$main-font-weight;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: typography.$main-font-family-name;
+    src: url("#{assets.$tna-font-path}/#{typography.$main-font-file-medium}");
+    font-weight: typography.$main-font-weight-medium;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: typography.$main-font-family-name;
+    src: url("#{assets.$tna-font-path}/#{typography.$main-font-file-bold}");
+    font-weight: typography.$main-font-weight-bold;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: typography.$detail-font-family-name;
+    src: url("#{assets.$tna-font-path}/#{typography.$detail-font-file}");
+    font-weight: typography.$detail-font-weight;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: typography.$detail-font-family-name;
+    src: url("#{assets.$tna-font-path}/#{typography.$detail-font-file-bold}");
+    font-weight: typography.$detail-font-weight-bold;
+    font-style: normal;
+    font-display: swap;
+  }
+} @else {
+  $main-font-family-name: functions.str-replace(
+    typography.$main-font-family-name,
+    " ",
+    "+"
+  );
+  $detail-font-family-name: functions.str-replace(
+    typography.$detail-font-family-name,
+    " ",
+    "+"
+  );
+  @import url("https://fonts.googleapis.com/css2?family=#{$main-font-family-name}:wght@#{typography.$main-font-weight}..#{typography.$main-font-weight-bold}&family=#{$detail-font-family-name}:wght@#{typography.$detail-font-weight}..#{typography.$detail-font-weight-bold}&display=swap"); /* stylelint-disable-line */
+}

package/nationalarchives/utilities/_index.scss

@@ -5,6 +5,7 @@
 @use "debug";
 @use "forms";
 @use "global";
+@use "imports";
 @use "lists";
 @use "overrides";
 @use "reset";

package/nationalarchives/utilities/_lists.scss

@@ -4,28 +4,45 @@
 @use "../tools/typography";
 
 .tna-ul,
-.tna-ol {
-  margin: spacing.space(1) 0 0;
-  padding: 0 0 0 spacing.space(2);
+.tna-ul ul {
+  list-style-type: disc;
+}
 
-  &:first-child {
+.tna-ul,
+.tna-ol {
+  ul,
+  ol {
     margin-top: 0;
   }
 
-  li::marker {
-    @include colour.colour-font("accent-background");
-    font-weight: 700;
-  }
+  &,
+  & ul,
+  & ol {
+    margin: spacing.space(1) 0 0;
+    padding: 0 0 0 spacing.space(2);
 
-  &--plain {
-    padding-left: 0;
+    &--plain {
+      padding-left: 0;
 
-    list-style: none;
-  }
+      &,
+      & ul,
+      & ol {
+        list-style: none;
+      }
+    }
 
-  .tna-ul,
-  .tna-ol {
-    margin-top: 0;
+    &:first-child {
+      margin-top: 0;
+    }
+
+    li::marker {
+      @include colour.colour-font("accent-background");
+      font-weight: 700;
+
+      .tna-background-accent & {
+        @include colour.colour-font("font-dark");
+      }
+    }
   }
 }
 
@@ -64,9 +81,9 @@
     }
 
     dd {
-      background: transparent !important;
-
       margin-left: 0;
+
+      background: transparent !important;
     }
   }
 }
@@ -86,10 +103,10 @@
     margin: 0;
     padding: spacing.space(0.5) spacing.space(1);
 
-    position: relative;
-
     box-sizing: border-box;
 
+    position: relative;
+
     word-wrap: break-word;
   }
 

package/nationalarchives/utilities/_tables.scss

@@ -8,12 +8,12 @@
 
 .tna-table {
   width: 100%;
-  @include spacing.space-above;
-
-  border-collapse: collapse;
 
   text-align: left;
 
+  border-collapse: collapse;
+  @include spacing.space-above;
+
   &:first-child {
     margin-top: 0;
   }
@@ -85,18 +85,18 @@
 
 .tna-table-wrapper {
   width: 100%;
-  @include spacing.space-above;
-  padding-left: grid.gutter-width();
   padding-right: grid.gutter-width();
+  padding-left: grid.gutter-width();
+
+  overflow: auto;
 
   position: relative;
   left: -#{grid.gutter-width()};
-
-  overflow: auto;
+  @include spacing.space-above;
 
   @include media.on-tiny {
-    padding-left: grid.gutter-width-tiny();
     padding-right: grid.gutter-width-tiny();
+    padding-left: grid.gutter-width-tiny();
 
     left: -#{grid.gutter-width-tiny()};
   }

package/nationalarchives/utilities/_typography.scss

@@ -1,57 +1,20 @@
 @use "sass:math";
 @use "sass:selector";
-@use "../variables/assets";
 @use "../variables/typography" as typographyVars;
 @use "../tools/colour";
 @use "../tools/media";
 @use "../tools/spacing";
 @use "../tools/typography";
 
-@if typographyVars.$use-local-fonts {
-  @font-face {
-    font-family: "Open Sans";
-    src: url("#{assets.$tna-font-path}/OpenSans-Regular.ttf");
-    font-weight: typographyVars.$main-font-weight;
-    font-style: normal;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: "Open Sans";
-    src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf");
-    font-weight: typographyVars.$main-font-weight-bold;
-    font-style: normal;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: "Roboto Mono";
-    src: url("#{assets.$tna-font-path}/RobotoMono-Regular.ttf");
-    font-weight: typographyVars.$detail-font-weight;
-    font-style: normal;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: "Roboto Mono";
-    src: url("#{assets.$tna-font-path}/RobotoMono-Medium.ttf");
-    font-weight: typographyVars.$detail-font-weight-bold;
-    font-style: normal;
-    font-display: swap;
-  }
-} @else {
-  @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&family=Roboto+Mono:wght@100..700&display=swap"); /* stylelint-disable-line */
-}
-
 .tna-template {
   @include colour.colour-font("font-base");
   @include typography.main-font;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
+  direction: ltr;
   text-rendering: optimizeLegibility;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
-  direction: ltr;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
 }
 
 .tna-template__body {
@@ -121,6 +84,7 @@ small {
   @include colour.colour-font("font-base");
   @include typography.detail-font-small;
   line-height: 1;
+  text-align: center;
 }
 
 %chip-plain {
@@ -227,13 +191,13 @@ small {
       display: inline-block;
 
       &::after {
+        content: "\203A";
+
         padding-left: spacing.space(0.5);
 
         display: inline-block;
 
         font-weight: 700;
-
-        content: "\203A";
       }
 
       &:hover {

package/nationalarchives/variables/_colour.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "sass:map";
 
 $colour-palette-brand: (
@@ -27,9 +28,11 @@ $colour-palette-brand: (
 
 @function hex-to-rgb($hex, $opacity: 1) {
   @if $opacity == 1 {
-    @return rgb(red($hex) green($hex) blue($hex));
+    @return rgb(color.red($hex) color.green($hex) color.blue($hex));
   } @else {
-    @return rgb(red($hex) green($hex) blue($hex) / #{$opacity});
+    @return rgb(
+      color.red($hex) color.green($hex) color.blue($hex) / #{$opacity}
+    );
   }
 }
 
@@ -136,6 +139,7 @@ $colour-palette-high-contrast: map.merge(
   $colour-palette-default,
   (
     "background": brand-colour("white"),
+    "background-tint": #f4f4f4,
     "font-base": brand-colour("black"),
     "font-light": brand-colour("black"),
     "icon-light": brand-colour("black", 0.75),
@@ -148,6 +152,7 @@ $colour-palette-high-contrast: map.merge(
     "contrast-font-base": brand-colour("black"),
     "contrast-font-dark": brand-colour("black"),
     "contrast-font-light": brand-colour("black"),
+    "contrast-icon-light": brand-colour("black", 0.45),
     "contrast-link": #34d,
     "contrast-link-visited": #848,
     "contrast-keyline": brand-colour("black"),