@nationalarchives/frontend 0.1.50 → 0.1.52

package/nationalarchives/tools/_colour.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "sass:list";
+@use "../variables/borders";
 @use "../variables/colour";
 @use "../tools/media";
 
@@ -39,19 +40,17 @@
   }
 }
 
-@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-font($colour, $important: false) {
+  color: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})
+    if($important, !important, null);
 }
 
 @mixin colour-background($colour, $important: false) {
-  background-color: map.get(colour.$colour-palette-default, $colour)
+  background-color: var(
+      --#{$colour},
+      #{map.get(colour.$colour-palette-default, $colour)}
+    )
     if($important, !important, null);
-  background-color: var(--#{$colour}) if($important, !important, null);
 }
 
 @mixin colour-background-brand($brandColour, $important: false) {
@@ -67,35 +66,29 @@
 ) {
   @if $direction != "" {
     @if $width != "" {
-      $property: border-#{$direction};
-      border-#{$direction}: $width
-        map.get(colour.$colour-palette-default, $colour)
-        $style
-        if($important, !important, null);
       border-#{$direction}: $width
-        var(--#{$colour})
+        var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})
         $style
         if($important, !important, null);
     } @else {
-      border-#{$direction}-color: map.get(
-          colour.$colour-palette-default,
-          $colour
+      border-#{$direction}-color: var(
+          --#{$colour},
+          #{map.get(colour.$colour-palette-default, $colour)}
         )
         if($important, !important, null);
-      border-#{$direction}-color: var(--#{$colour})
-        if($important, !important, null);
     }
   } @else {
     @if $width != "" {
       border: $width
-        map.get(colour.$colour-palette-default, $colour)
+        var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})
         $style
         if($important, !important, null);
-      border: $width var(--#{$colour}) $style if($important, !important, null);
     } @else {
-      border-color: map.get(colour.$colour-palette-default, $colour)
+      border-color: var(
+          --#{$colour},
+          #{map.get(colour.$colour-palette-default, $colour)}
+        )
         if($important, !important, null);
-      border-color: var(--#{$colour}) if($important, !important, null);
     }
   }
 }
@@ -103,105 +96,104 @@
 @mixin colour-outline($colour, $width: "", $style: solid, $important: false) {
   @if $width != "" {
     outline: $width
-      map.get(colour.$colour-palette-default, $colour)
+      var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})
       $style
       if($important, !important, null);
-    outline: $width var(--#{$colour}) $style if($important, !important, null);
   } @else {
-    outline-color: map.get(colour.$colour-palette-default, $colour)
+    outline-color: var(
+        --#{$colour},
+        #{map.get(colour.$colour-palette-default, $colour)}
+      )
       if($important, !important, null);
-    outline-color: var(--#{$colour}) if($important, !important, null);
   }
 }
 
 @mixin colour-fill($colour, $important: false) {
-  fill: map.get(colour.$colour-palette-default, $colour)
+  fill: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})
     if($important, !important, null);
-  fill: var(--#{$colour}) if($important, !important, null);
 }
 
 @mixin thick-keyline($direction) {
-  @include colour-border("keyline", 5px, solid, $direction);
+  @include colour-border(
+    "keyline",
+    borders.$thick-border-width,
+    solid,
+    $direction
+  );
 }
 
 @mixin thick-keyline-dark($direction) {
-  @include colour-border("keyline-dark", 5px, solid, $direction);
+  @include colour-border(
+    "keyline-dark",
+    borders.$thick-border-width,
+    solid,
+    $direction
+  );
 }
 
 @mixin thick-keyline-accent($direction) {
-  @include colour-border("accent-background", 5px, solid, $direction);
+  @include colour-border(
+    "accent-background",
+    borders.$thick-border-width,
+    solid,
+    $direction
+  );
 }
 
 @mixin thick-keyline-error($direction) {
-  @include colour-border("form-error", 5px, solid, $direction);
+  @include colour-border(
+    "form-error",
+    borders.$thick-border-width,
+    solid,
+    $direction
+  );
 }
 
 @mixin thick-keyline-brand($direction, $brandColour) {
-  border-#{$direction}: 5px #{brand-colour($brandColour)} solid;
+  border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}
+    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");
+    }
   }
 
-  --background: var(--page-background);
+  @include colour-background("background");
 }
 
 @mixin plain {
@@ -225,7 +217,7 @@
 
   @include colour-background("background");
 
-  @include colour-font("font-base", false, colour.$colour-palette-dark);
+  @include colour-font("font-base");
 }
 
 @mixin contrast {
@@ -250,7 +242,7 @@
 
     @include colour-background("background");
 
-    @include colour-font("font-base", false, colour.$colour-palette-dark);
+    @include colour-font("font-base");
   }
 }
 
@@ -258,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);
@@ -271,38 +275,19 @@
 
   @include colour-background("background");
 
-  @include colour-font("font-base", false, colour.$colour-palette-dark);
+  @include colour-font("font-base");
 }
 
 @mixin accent {
   @extend %accent;
 }
 
-%tint {
-  @include colour-background("background-tint");
-  @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")};
@@ -319,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")};
@@ -333,22 +315,106 @@
     --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 {
   @extend %accent-light;
 }
 
+%yellow-accent {
+  --accent-background: #{colour.brand-colour("yellow")} !important;
+  --accent-background-light: #{colour.brand-colour("cream")} !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;
+  --accent-icon-light: #{colour.brand-colour("black", 0.45)} !important;
+  --accent-link: #{colour.brand-colour("black")} !important;
+  --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;
+}
+
+@mixin yellow-accent {
+  @extend %yellow-accent;
+}
+
+%accent-lighter-text {
+  --accent-font-base: #{colour.brand-colour("white")} !important;
+  --accent-font-dark: #{colour.brand-colour("white")} !important;
+  --accent-font-light: #{colour.brand-colour("white", 0.7)} !important;
+  --accent-icon-light: #{colour.brand-colour("white", 0.45)} !important;
+  --accent-link: #{colour.brand-colour("white")} !important;
+  --accent-link-visited: #{colour.brand-colour("white")} !important;
+  --accent-keyline: #{colour.brand-colour("white", 0.5)} !important;
+  --accent-keyline-dark: #{colour.brand-colour("white", 0.8)} !important;
+  --button-accent-text: #{colour.brand-colour("white")} !important;
+}
+
+%black-accent {
+  --accent-background: #{colour.brand-colour("black")} !important;
+  --accent-background-light: #{colour.brand-colour("light-grey")} !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;
+}
+
+%pink-accent {
+  --accent-background: #{colour.brand-colour("maroon")} !important;
+  --accent-background-light: #{colour.brand-colour("pastel-pink")} !important;
+  --button-accent-background: #{colour.brand-colour("maroon")} !important;
+}
+
+@mixin pink-accent {
+  @extend %pink-accent;
+  @extend %accent-lighter-text;
+}
+
+%orange-accent {
+  --accent-background: #{colour.brand-colour("chestnut")} !important;
+  --accent-background-light: #{colour.brand-colour("pastel-orange")} !important;
+  --button-accent-background: #{colour.brand-colour("chestnut")} !important;
+}
+
+@mixin orange-accent {
+  @extend %orange-accent;
+  @extend %accent-lighter-text;
+}
+
+%green-accent {
+  --accent-background: #{colour.brand-colour("forest")} !important;
+  --accent-background-light: #{colour.brand-colour("pastel-green")} !important;
+  --button-accent-background: #{colour.brand-colour("forest")} !important;
+}
+
+@mixin green-accent {
+  @extend %green-accent;
+  @extend %accent-lighter-text;
+}
+
+%blue-accent {
+  --accent-background: #{colour.brand-colour("navy")} !important;
+  --accent-background-light: #{colour.brand-colour("pastel-blue")} !important;
+  --button-accent-background: #{colour.brand-colour("navy")} !important;
+}
+
+@mixin blue-accent {
+  @extend %blue-accent;
+  @extend %accent-lighter-text;
+}
+
 @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/_grid.scss

@@ -75,12 +75,14 @@
           margin-left: math.div(100%, $count) * $i;
         }
       }
+    }
 
-      &--no-margin-right-#{$suffix} {
+    @if $suffix != "" {
+      &--no-margin-right#{$suffix} {
         margin-right: 0;
       }
 
-      &--no-margin-left-#{$suffix} {
+      &--no-margin-left#{$suffix} {
         margin-left: 0;
       }
     }

package/nationalarchives/utilities/_colour.scss

@@ -1,103 +1,50 @@
 @use "../tools/colour";
 
 .tna-template {
-  @include colour.colour-background("page-background");
+  @include colour.light;
 
-  &--system-theme,
-  &--light-theme {
-    @include colour.colour-css-vars;
-    // @include colour.light;
-  }
+  @include colour.colour-background("background");
 
   &--system-theme {
     @media (prefers-color-scheme: dark) {
       @include colour.colour-css-vars-dark;
     }
 
-    @media (prefers-contrast: more) {
-      @include colour.colour-css-vars-high-contrast;
-
-      * {
-        background-image: none !important;
-      }
-    }
-
     @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
       @include colour.colour-css-vars-high-contrast-dark;
     }
   }
 
-  // &--light-theme {
-  //   @include colour.colour-css-vars;
-  // }
-
   &--dark-theme {
     @include colour.colour-css-vars-dark;
-  }
-
-  &--high-contrast-theme {
-    @include colour.colour-css-vars-high-contrast;
 
-    * {
-      background-image: none !important;
-    }
-
-    &.tna-template--dark-theme {
+    @media (prefers-contrast: more) {
       @include colour.colour-css-vars-high-contrast-dark;
     }
   }
 
-  &--yellow-accent {
-    --accent-background: #{colour.brand-colour("yellow")} !important;
-    --accent-background-light: #{colour.brand-colour("cream")} !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;
-    // --accent-icon-light: #{colour.brand-colour("black", 0.45)} !important;
-    // --accent-link: #{colour.brand-colour("black")} !important;
-    // --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-background: #{colour.brand-colour("yellow")} !important;
-  }
-
-  &--pink-accent,
-  &--orange-accent,
-  &--green-accent,
-  &--blue-accent {
-    --accent-font-base: #{colour.brand-colour("white")} !important;
-    --accent-font-dark: #{colour.brand-colour("white")} !important;
-    --accent-font-light: #{colour.brand-colour("white", 0.7)} !important;
-    --accent-icon-light: #{colour.brand-colour("white", 0.45)} !important;
-    --accent-link: #{colour.brand-colour("white")} !important;
-    --accent-link-visited: #{colour.brand-colour("white")} !important;
-    --accent-keyline: #{colour.brand-colour("white", 0.5)} !important;
-    --accent-keyline-dark: #{colour.brand-colour("white", 0.8)} !important;
-    --button-accent-text: #{colour.brand-colour("white")} !important;
+  &--black-accent {
+    @include colour.black-accent;
   }
 
   &--pink-accent {
-    --accent-background: #{colour.brand-colour("maroon")} !important;
-    --accent-background-light: #{colour.brand-colour("pastel-pink")} !important;
-    --button-accent-background: #{colour.brand-colour("maroon")} !important;
+    @include colour.pink-accent;
   }
 
   &--orange-accent {
-    --accent-background: #{colour.brand-colour("chestnut")} !important;
-    --accent-background-light: #{colour.brand-colour("pastel-orange")} !important;
-    --button-accent-background: #{colour.brand-colour("chestnut")} !important;
+    @include colour.orange-accent;
+  }
+
+  &--yellow-accent {
+    @include colour.yellow-accent;
   }
 
   &--green-accent {
-    --accent-background: #{colour.brand-colour("forest")} !important;
-    --accent-background-light: #{colour.brand-colour("pastel-green")} !important;
-    --button-accent-background: #{colour.brand-colour("forest")} !important;
+    @include colour.green-accent;
   }
 
   &--blue-accent {
-    --accent-background: #{colour.brand-colour("navy")} !important;
-    --accent-background-light: #{colour.brand-colour("pastel-blue")} !important;
-    --button-accent-background: #{colour.brand-colour("navy")} !important;
+    @include colour.blue-accent;
   }
 }
 
@@ -128,3 +75,29 @@
     @include colour.colour-border("keyline-dark", 1px);
   }
 }
+
+.tna-accent {
+  &-black {
+    @include colour.black-accent;
+  }
+
+  &-pink {
+    @include colour.pink-accent;
+  }
+
+  &-orange {
+    @include colour.orange-accent;
+  }
+
+  &-yellow {
+    @include colour.yellow-accent;
+  }
+
+  &-green {
+    @include colour.green-accent;
+  }
+
+  &-blue {
+    @include colour.blue-accent;
+  }
+}

package/nationalarchives/utilities/_lists.scss

@@ -59,6 +59,8 @@
   &:not(.tna-dl--plain) {
     dt {
       @include colour.colour-background("background-tint");
+
+      @include colour.colour-font("font-base");
     }
 
     dd {
@@ -158,7 +160,7 @@
     dt:first-child,
     dd:nth-of-type(2n) + dt,
     dd:nth-of-type(2n + 1) {
-      @include colour.colour-background("background-tint");
+      @include colour.tint;
     }
   }
 

package/nationalarchives/utilities/_reset.scss

@@ -8,6 +8,10 @@
     animation: none !important;
     transition: none !important;
   }
+
+  @media (prefers-contrast: more) {
+    background-image: none !important;
+  }
 }
 
 img,

package/nationalarchives/utilities/_typography.scss

@@ -150,6 +150,30 @@ small {
     @extend %chip-plain;
   }
 
+  &--black {
+    @include colour.black-accent;
+  }
+
+  &--pink {
+    @include colour.pink-accent;
+  }
+
+  &--orange {
+    @include colour.orange-accent;
+  }
+
+  &--yellow {
+    @include colour.yellow-accent;
+  }
+
+  &--green {
+    @include colour.green-accent;
+  }
+
+  &--blue {
+    @include colour.blue-accent;
+  }
+
   &:not(#{&}--plain) {
     @extend %chip-accent;
   }
@@ -404,6 +428,10 @@ small {
 
   @include typography.relative-font-size(22);
   @include colour.colour-font("font-dark");
+
+  @include media.on-mobile {
+    @include typography.relative-font-size(20);
+  }
 }
 
 .tna-scene-setter {

package/nationalarchives/variables/_borders.scss

@@ -0,0 +1 @@
+$thick-border-width: 5px !default;

package/nationalarchives/variables/_colour.scss

@@ -48,7 +48,7 @@ LIGHT THEME (DEFAULT)
 =========================================
 */
 $colour-palette-default: (
-  "page-background": #f4f4f4,
+  "background": #f4f4f4,
   "background-tint": brand-colour("light-grey"),
   "font-base": $base-font,
   "font-dark": brand-colour("black"),
@@ -102,7 +102,7 @@ DARK THEME
 $colour-palette-dark: map.merge(
   $colour-palette-default,
   (
-    "page-background": #212223,
+    "background": #212223,
     "background-tint": #323334,
     "font-base": brand-colour("white", 0.95),
     "font-dark": brand-colour("white"),
@@ -135,7 +135,7 @@ LIGHT, HIGH_CONTRAST THEME
 $colour-palette-high-contrast: map.merge(
   $colour-palette-default,
   (
-    "page-background": brand-colour("white"),
+    "background": brand-colour("white"),
     "font-base": brand-colour("black"),
     "font-light": brand-colour("black"),
     "icon-light": brand-colour("black", 0.75),
@@ -167,7 +167,7 @@ DARK, HIGH_CONTRAST THEME
 $colour-palette-high-contrast-dark: map.merge(
   $colour-palette-dark,
   (
-    "page-background": #111,
+    "background": #111,
     "font-base": brand-colour("white"),
     "font-light": brand-colour("white"),
     "icon-light": brand-colour("white", 0.75),