@nationalarchives/frontend 0.1.50 → 0.1.51

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

@@ -21,12 +21,12 @@ const Template = () => {
 
   const accents = [
     "",
-    // "tna-template--black-accent",
-    "tna-template--yellow-accent",
-    "tna-template--pink-accent",
-    "tna-template--orange-accent",
-    "tna-template--green-accent",
-    "tna-template--blue-accent",
+    "tna-accent-black",
+    "tna-accent-yellow",
+    "tna-accent-pink",
+    "tna-accent-orange",
+    "tna-accent-green",
+    "tna-accent-blue",
   ];
 
   const blocks = [
@@ -63,8 +63,7 @@ const Template = () => {
         .replace(/tna-template--/g, "")
         .replace(/-theme/g, "")}</strong></p>
       <p>Accent: <strong>${
-        accent.replace(/tna-template--/g, "").replace(/-accent/g, "") ||
-        "[none]"
+        accent.replace(/tna-accent-/g, "") || "[none]"
       }</strong></p>
     </div>
     ${blocks.reduce(

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

@@ -194,15 +194,13 @@ const Template = ({ theme, accent }) => {
     <main class="tna-main" id="main-content">
       ${Hero({
         params: {
-          heading: "Title",
-          body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
+          content: `<h1 class="tna-heading-xl">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>`,
           imageSrc:
             "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
           imageAlt: "The National Archives office",
           imageWidth: 499,
           imageHeight: 333,
           imageCaption: "An interesting photo by a famous photographer ©2023",
-          classes: "tna-hero--demo",
         },
       })}
       <div class="tna-container tna-section">
@@ -465,7 +463,6 @@ const Template = ({ theme, accent }) => {
           imageWidth: 499,
           imageHeight: 333,
           imageCaption: "An interesting photo by a famous photographer ©2023",
-          classes: "tna-hero--demo",
         },
       })}
       <div class="tna-section tna-!--padding-bottom-s">

package/nationalarchives/tools/_a11y.scss

@@ -8,6 +8,10 @@
     solid
   );
   outline-offset: a11y.$focus-outline-offset;
+
+  transition:
+    outline 100ms,
+    outline-offset 100ms;
 }
 
 @mixin active-outline {

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,41 +96,62 @@
 @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;
 }
 
 %light {
@@ -201,7 +215,7 @@
     @include colour-css-vars-high-contrast-dark;
   }
 
-  --background: var(--page-background);
+  @include colour-background("background");
 }
 
 @mixin plain {
@@ -225,7 +239,7 @@
 
   @include colour-background("background");
 
-  @include colour-font("font-base", false, colour.$colour-palette-dark);
+  @include colour-font("font-base");
 }
 
 @mixin contrast {
@@ -250,7 +264,7 @@
 
     @include colour-background("background");
 
-    @include colour-font("font-base", false, colour.$colour-palette-dark);
+    @include colour-font("font-base");
   }
 }
 
@@ -271,7 +285,7 @@
 
   @include colour-background("background");
 
-  @include colour-font("font-base", false, colour.$colour-palette-dark);
+  @include colour-font("font-base");
 }
 
 @mixin accent {
@@ -279,7 +293,10 @@
 }
 
 %tint {
-  @include colour-background("background-tint");
+  --background: var(--background-tint);
+
+  @include colour-background("background");
+
   @include colour-font("font-base");
 }
 
@@ -339,6 +356,93 @@
   @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 & {
     @content;

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,26 +1,27 @@
 @use "../tools/colour";
 
 .tna-template {
-  @include colour.colour-background("page-background");
+  @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;
+    }
   }
 
   &--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;
-
-      * {
-        background-image: none !important;
-      }
-    }
+    // @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;
@@ -29,75 +30,54 @@
 
   // &--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;
-  }
-
-  &--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;
+  // &--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 {
+    @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 +108,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),

package/nationalarchives/variables/_index.scss

@@ -1,5 +1,6 @@
 @use "a11y";
 @use "assets";
+@use "borders";
 @use "colour";
 @use "features";
 @use "forms";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.50",
+  "version": "0.1.51",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -79,7 +79,7 @@
     "style-loader": "^3.3.1",
     "stylelint": "^16.0.2",
     "stylelint-config-standard-scss": "^13.0.0",
-    "stylelint-selector-bem-pattern": "^3.0.0",
+    "stylelint-selector-bem-pattern": "^4.0.0",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4"
   }