@nationalarchives/frontend 0.1.19-prerelease → 0.1.21-prerelease

package/nationalarchives/utilities/_typography.scss

@@ -5,6 +5,7 @@
 @use "../tools/typography";
 @use "../variables/assets";
 @use "../variables/grid";
+@use "../variables/typography" as typographyVars;
 
 @import "https://use.typekit.net/hkj3kuz.css";
 
@@ -41,9 +42,14 @@
 
 .tna-template__body {
   color: inherit;
-  @include typography.relative-font-size(18);
-  // line-height: 1.6;
-  line-height: #{math.div(16, 18) * 2};
+  @include typography.relative-font-size(typographyVars.$body-font-size-px);
+  line-height: typographyVars.$body-line-height;
+
+  @include media.on-mobile {
+    @include typography.relative-font-size(
+      typographyVars.$body-font-size-px-mobile
+    );
+  }
 }
 
 h1,
@@ -68,7 +74,7 @@ strong {
 }
 
 p {
-  margin: 0 0 1.5rem;
+  margin: 0 0 1rem;
 
   @include media.on-tiny {
     margin-bottom: 1rem;
@@ -107,6 +113,12 @@ a {
   }
 }
 
+small {
+  @include typography.relative-font-size(
+    typographyVars.$body-font-size-px * 0.85
+  );
+}
+
 .tna-ul,
 .tna-ol {
   margin-top: 0;
@@ -128,17 +140,172 @@ a {
   }
 }
 
+.tna-dl {
+  display: flex;
+  flex-wrap: wrap;
+
+  @include spacing.space-below;
+
+  dt,
+  dd {
+    margin: 0;
+    padding: 0.5rem 1rem;
+
+    position: relative;
+
+    box-sizing: border-box;
+
+    word-wrap: break-word;
+    // word-break: break-all;
+  }
+
+  &--plain {
+    dt {
+      padding-left: 0;
+    }
+
+    dd {
+      padding-right: 0;
+    }
+  }
+
+  dt {
+    width: 25%;
+
+    @include typography.main-font-weight-bold;
+  }
+
+  dd {
+    width: 75%;
+
+    + dd {
+      margin-left: 25%;
+    }
+  }
+
+  &--icon-padding {
+    dt {
+      padding-left: 3rem !important;
+
+      position: relative;
+
+      .fa-solid {
+        overflow: visible;
+
+        position: absolute;
+        top: 50%;
+        left: 1rem;
+
+        @include colour.colour-font("icon-light");
+        text-align: left;
+
+        transform: translateY(-50%);
+      }
+    }
+  }
+
+  &--icon-padding#{&}--plain {
+    dt {
+      padding-left: 2rem !important;
+
+      .fa-solid {
+        left: 0;
+      }
+    }
+  }
+
+  &:not(&--plain) {
+    dt,
+    dd {
+      // padding-left: 1rem;
+      // padding-right: 1rem;
+    }
+
+    dt:first-child,
+    dd:nth-of-type(2n) + dt,
+    dd:nth-of-type(2n + 1) {
+      @include colour.colour-background("background-tint");
+    }
+  }
+
+  @include media.on-small {
+    dt {
+      width: 35%;
+    }
+
+    dd {
+      width: 65%;
+
+      + dd {
+        margin-left: 35%;
+      }
+    }
+  }
+
+  @include media.on-tiny {
+    dt,
+    dd {
+      width: 100%;
+      margin-left: 0;
+    }
+
+    dd {
+      padding-left: 1rem;
+    }
+
+    &--plain {
+      dt {
+        padding-bottom: 0;
+      }
+
+      dd {
+        padding-top: 0;
+        // padding-left: 2rem;
+
+        + dt {
+          // @include colour.colour-border("keyline", 1px, solid, top);
+        }
+      }
+    }
+
+    &:not(&--plain) {
+      dt {
+        @include colour.colour-background("background-tint");
+      }
+
+      dd {
+        background: transparent !important;
+      }
+    }
+  }
+
+  @include colour.on-high-contrast {
+    @include colour.colour-border("keyline-dark", 1px, solid, bottom);
+
+    dt,
+    dd {
+      // padding-left: 0;
+      // padding-right: 0;
+
+      background: transparent !important;
+
+      @include colour.colour-border("keyline-dark", 1px, solid, top);
+    }
+  }
+}
+
 %chip {
   max-width: max-content;
-  padding: 0.375em 0.5rem;
+  padding: 0.125em 0.25rem;
 
   display: block;
 
-  @include colour.colour-font("font-dark");
   @include typography.detail-font-small;
   line-height: 1;
 
   @include colour.accent;
+
+  @include colour.colour-border("accent-background", 0.125rem);
 }
 
 .tna-chip {
@@ -162,36 +329,39 @@ a {
 
 %heading {
   @include colour.colour-font("font-dark");
-  @include typography.heading-font;
-
-  a {
-    display: inline-block;
 
-    &::after {
-      padding-left: 0.25rem;
+  text-wrap: balance;
 
+  &:not(.tna-heading--no-link-arrow) {
+    a {
       display: inline-block;
 
-      font-weight: 700;
+      &::after {
+        padding-left: 0.25rem;
 
-      content: "\203A";
-    }
+        display: inline-block;
 
-    &:hover {
-      &::after {
-        padding-left: 0.5rem;
+        font-weight: 700;
+
+        content: "\203A";
+      }
+
+      &:hover {
+        &::after {
+          padding-left: 0.5rem;
+        }
       }
     }
   }
 }
 
 %heading-xl {
+  @include typography.heading-font;
   @include typography.relative-font-size(64);
   line-height: 1.2;
 
   @include media.on-medium {
-    // @include typography.relative-font-size(42);
-    @include typography.relative-font-size(50);
+    @include typography.relative-font-size(42);
   }
 
   @include media.on-mobile {
@@ -200,12 +370,12 @@ a {
 }
 
 %heading-l {
+  @include typography.heading-font;
   @include typography.relative-font-size(32);
-  line-height: 1.4;
+  line-height: 1.3;
 
   @include media.on-medium {
-    // @include typography.relative-font-size(26);
-    @include typography.relative-font-size(28);
+    @include typography.relative-font-size(26);
   }
 
   @include media.on-mobile {
@@ -214,11 +384,13 @@ a {
 }
 
 %heading-m {
-  @include typography.relative-font-size(20);
+  @include typography.main-font-weight-bold;
+  @include typography.relative-font-size(22);
   line-height: 1.6;
 }
 
 %heading-s {
+  @include typography.main-font-weight-bold;
   @include typography.relative-font-size(18);
   line-height: 1.6;
 }
@@ -245,7 +417,7 @@ a {
 
 .tna-hgroup {
   &__supertitle {
-    margin: 0 0 0.5rem;
+    margin: 0 0 0.25rem;
 
     @extend %chip;
   }
@@ -280,6 +452,11 @@ a {
   margin-top: 3rem;
   margin-bottom: 1rem;
 
+  // &--m,
+  // &--s {
+  //   margin-bottom: 0.5rem;
+  // }
+
   &:first-child {
     margin-top: 0;
   }
@@ -350,8 +527,8 @@ a {
     column-count: 3;
   }
 
-  @include media.on-mobile {
-    column-gap: grid.$gutter-width-mobile;
+  @include media.on-tiny {
+    column-gap: grid.$gutter-width-tiny;
   }
 
   @include media.on-small {

package/nationalarchives/variables/_assets.scss

@@ -1 +1,2 @@
-$tna-font-path: "assets/fonts" !default;
+$tna-font-path: "./assets/fonts" !default;
+$fa-font-path: $tna-font-path !default;

package/nationalarchives/variables/_colour.scss

@@ -25,8 +25,22 @@ $colour-palette-brand: (
   "pastel-blue": #d4e5ef,
 );
 
+@function hex-to-rgb($hex, $opacity: 1) {
+  @if $opacity == 1 {
+    @return rgb(red($hex) green($hex) blue($hex));
+  } @else {
+    @return rgb(red($hex) green($hex) blue($hex) / #{$opacity});
+  }
+}
+
+@function brand-colour($colour, $opacity: 1) {
+  @return hex-to-rgb(map.get($colour-palette-brand, $colour), $opacity);
+}
+
 $dark-grey: #26262a;
-$base-font: #343338;
+$base-font: #343338 !default;
+$link-colour: #1d70ab !default;
+$link-colour-visited: #4c2c92 !default;
 
 /*
 =========================================
@@ -35,45 +49,48 @@ LIGHT THEME (DEFAULT)
 */
 $colour-palette-default: (
   "page-background": #f4f4f4,
+  "background-tint": #d8d8d8,
   "font-base": $base-font,
-  "font-dark": map.get($colour-palette-brand, "black"),
-  "font-light": rgba($base-font, 0.7),
-  "link": #1d70ab,
-  "link-visited": #4c2c92,
-  "focus-outline": map.get($colour-palette-brand, "blue"),
-  "keyline": #ccc,
+  "font-dark": brand-colour("black"),
+  "font-light": hex-to-rgb($base-font, 0.7),
+  "icon-light": hex-to-rgb($base-font, 0.45),
+  "link": $link-colour,
+  "link-visited": $link-colour-visited,
+  "focus-outline": brand-colour("blue"),
+  "keyline": hex-to-rgb($dark-grey, 0.25),
   "keyline-dark": $dark-grey,
-  "button-text": map.get($colour-palette-brand, "white"),
-  "button-background": map.get($colour-palette-brand, "black"),
-  "button-hover-text": map.get($colour-palette-brand, "black"),
-  "button-hover-background": map.get($colour-palette-brand, "white"),
+  "button-text": brand-colour("white"),
+  "button-background": brand-colour("black"),
+  "button-hover-text": brand-colour("black"),
+  "button-hover-background": brand-colour("white"),
   "contrast-background": #1e1e1e,
-  // TODO: #343338 ?
-  "contrast-font-base": map.get($colour-palette-brand, "white"),
-  "contrast-font-dark": map.get($colour-palette-brand, "white"),
-  "contrast-font-light": rgba(map.get($colour-palette-brand, "white"), 0.7),
-  "contrast-link": map.get($colour-palette-brand, "white"),
-  // "contrast-link-visited": #b9f, // Don't show visited state on contrasting backgrounds
-  "contrast-link-visited": map.get($colour-palette-brand, "white"),
-  "contrast-keyline": rgba(map.get($colour-palette-brand, "white"), 0.5),
-  "contrast-keyline-dark": rgba(map.get($colour-palette-brand, "white"), 0.8),
-  "contrast-button-text": map.get($colour-palette-brand, "black"),
-  "contrast-button-background": map.get($colour-palette-brand, "white"),
-  "contrast-button-hover-text": map.get($colour-palette-brand, "white"),
-  "contrast-button-hover-background": map.get($colour-palette-brand, "black"),
+  "contrast-font-base": brand-colour("white"),
+  "contrast-font-dark": brand-colour("white"),
+  // "contrast-font-light": brand-colour("white", 0.7),
+  "contrast-font-light": brand-colour("white", 0.7),
+  "contrast-icon-light": brand-colour("white", 0.45),
+  "contrast-link": brand-colour("white"),
+  "contrast-link-visited": brand-colour("white"),
+  "contrast-keyline": brand-colour("white", 0.5),
+  "contrast-keyline-dark": brand-colour("white", 0.8),
+  "contrast-button-text": brand-colour("black"),
+  "contrast-button-background": brand-colour("white"),
+  "contrast-button-hover-text": brand-colour("white"),
+  "contrast-button-hover-background": brand-colour("black"),
   "accent": map.get($colour-palette-brand, "light-grey"),
   "accent-background": #111,
   "accent-background-light": map.get($colour-palette-brand, "light-grey"),
-  "accent-font-base": map.get($colour-palette-brand, "white"),
-  "accent-font-dark": map.get($colour-palette-brand, "white"),
-  "accent-font-light": rgba(map.get($colour-palette-brand, "white"), 0.7),
-  "accent-link": map.get($colour-palette-brand, "white"),
+  "accent-font-base": brand-colour("white"),
+  "accent-font-dark": brand-colour("white"),
+  "accent-font-light": brand-colour("white", 0.7),
+  "accent-icon-light": brand-colour("white", 0.45),
+  "accent-link": brand-colour("white"),
   "accent-link-visited": #b9f,
-  "accent-keyline": rgba(map.get($colour-palette-brand, "white"), 0.5),
-  "accent-keyline-dark": rgba(map.get($colour-palette-brand, "white"), 0.8),
-  "button-accent-text": map.get($colour-palette-brand, "black"),
-  "button-accent-background": map.get($colour-palette-brand, "grey"),
-);
+  "accent-keyline": brand-colour("white", 0.5),
+  "accent-keyline-dark": brand-colour("white", 0.8),
+  "button-accent-text": brand-colour("black"),
+  "button-accent-background": brand-colour("grey"),
+) !default;
 
 /*
 =========================================
@@ -84,24 +101,26 @@ $colour-palette-dark: map.merge(
   $colour-palette-default,
   (
     "page-background": #111,
-    "font-base": rgba(map.get($colour-palette-brand, "white"), 0.95),
-    "font-dark": map.get($colour-palette-brand, "white"),
-    "font-light": rgba(map.get($colour-palette-brand, "white"), 0.5),
-    "link": map.get($colour-palette-brand, "blue"),
-    "link-visited": map.get($colour-palette-default, "contrast-link-visited"),
-    "keyline": rgba(map.get($colour-palette-brand, "white"), 0.25),
-    "keyline-dark": map.get($colour-palette-brand, "white"),
-    "button-text": map.get($colour-palette-brand, "black"),
-    "button-background": map.get($colour-palette-brand, "white"),
-    "button-hover-text": map.get($colour-palette-brand, "white"),
-    "button-hover-background": map.get($colour-palette-brand, "black"),
+    "background-tint": #333,
+    "font-base": brand-colour("white", 0.95),
+    "font-dark": brand-colour("white"),
+    "font-light": brand-colour("white", 0.5),
+    "icon-light": brand-colour("white", 0.35),
+    "link": brand-colour("blue"),
+    "link-visited": #a8f,
+    "keyline": brand-colour("white", 0.25),
+    "keyline-dark": brand-colour("white"),
+    "button-text": brand-colour("black"),
+    "button-background": brand-colour("white"),
+    "button-hover-text": brand-colour("white"),
+    "button-hover-background": brand-colour("black"),
     "contrast-background": #1e1e1e,
     "contrast-link-visited":
       map.get($colour-palette-default, "contrast-link-visited"),
     // --accent-background-light is the same as --contrast-background on dark themes
-    "accent-background-light": map.get($colour-palette-brand, "grey"),
+    "accent-background-light": brand-colour("grey"),
   )
-);
+) !default;
 
 /*
 =========================================
@@ -111,28 +130,29 @@ LIGHT, HIGH_CONTRAST THEME
 $colour-palette-high-contrast: map.merge(
   $colour-palette-default,
   (
-    "page-background": map.get($colour-palette-brand, "white"),
-    "font-base": map.get($colour-palette-brand, "black"),
-    "font-light": map.get($colour-palette-brand, "black"),
-    "link": map.get($colour-palette-brand, "navy"),
-    "link-visited": map.get($colour-palette-brand, "black"),
-    "focus-outline": map.get($colour-palette-brand, "orange"),
-    "keyline": map.get($colour-palette-brand, "black"),
-    "keyline-dark": map.get($colour-palette-brand, "black"),
+    "page-background": brand-colour("white"),
+    "font-base": brand-colour("black"),
+    "font-light": brand-colour("black"),
+    "icon-light": brand-colour("black", 0.75),
+    "link": brand-colour("navy"),
+    "link-visited": brand-colour("black"),
+    "focus-outline": brand-colour("orange"),
+    "keyline": brand-colour("black"),
+    "keyline-dark": brand-colour("black"),
     "contrast-background": #f4f4f4,
-    "contrast-font-base": map.get($colour-palette-brand, "black"),
-    "contrast-font-dark": map.get($colour-palette-brand, "black"),
-    "contrast-font-light": map.get($colour-palette-brand, "black"),
-    "contrast-link": map.get($colour-palette-brand, "navy"),
-    "contrast-link-visited": map.get($colour-palette-brand, "black"),
-    "contrast-keyline": map.get($colour-palette-brand, "black"),
-    "contrast-keyline-dark": map.get($colour-palette-brand, "black"),
-    "contrast-button-text": map.get($colour-palette-brand, "white"),
-    "contrast-button-background": map.get($colour-palette-brand, "black"),
-    "contrast-button-hover-text": map.get($colour-palette-brand, "black"),
-    "contrast-button-hover-background": map.get($colour-palette-brand, "white"),
+    "contrast-font-base": brand-colour("black"),
+    "contrast-font-dark": brand-colour("black"),
+    "contrast-font-light": brand-colour("black"),
+    "contrast-link": brand-colour("navy"),
+    "contrast-link-visited": brand-colour("black"),
+    "contrast-keyline": brand-colour("black"),
+    "contrast-keyline-dark": brand-colour("black"),
+    "contrast-button-text": brand-colour("white"),
+    "contrast-button-background": brand-colour("black"),
+    "contrast-button-hover-text": brand-colour("black"),
+    "contrast-button-hover-background": brand-colour("white"),
   )
-);
+) !default;
 
 /*
 =========================================
@@ -142,12 +162,13 @@ DARK, HIGH_CONTRAST THEME
 $colour-palette-high-contrast-dark: map.merge(
   $colour-palette-dark,
   (
-    "page-background": map.get($colour-palette-brand, "black"),
-    "font-base": map.get($colour-palette-brand, "white"),
-    "font-light": map.get($colour-palette-brand, "white"),
-    "link": map.get($colour-palette-brand, "white"),
-    "link-visited": map.get($colour-palette-brand, "white"),
-    "keyline": map.get($colour-palette-brand, "white"),
+    "page-background": brand-colour("black"),
+    "font-base": brand-colour("white"),
+    "font-light": brand-colour("white"),
+    "icon-light": brand-colour("white", 0.75),
+    "link": brand-colour("white"),
+    "link-visited": brand-colour("white"),
+    "keyline": brand-colour("white"),
     "contrast-background": #111,
   )
-);
+) !default;

package/nationalarchives/variables/_features.scss

@@ -0,0 +1 @@
+$debug-interactable-areas: false !default;

package/nationalarchives/variables/_grid.scss

@@ -1,9 +1,9 @@
 $largest-container-width: 75.25rem !default;
 
 $gutter-width: 2rem !default;
-$gutter-width-mobile: 1.5rem !default;
+$gutter-width-tiny: 1rem !default;
 
-$column-count: 12 !default;
-$column-count-medium: 6 !default;
-$column-count-small: 4 !default;
-$column-count-tiny: 2 !default;
+$column-count: 12;
+$column-count-medium: 6;
+$column-count-small: 4;
+$column-count-tiny: 2;

package/nationalarchives/variables/_index.scss

@@ -1,5 +1,6 @@
 @use "assets";
 @use "colour";
+@use "features";
 @use "grid";
 @use "media";
 @use "spacing";

package/nationalarchives/variables/_media.scss

@@ -1,40 +1,40 @@
 @use "sass:math";
 @use "./typography";
 
-$-largest-medium-device-px: 1024 !default;
-$-largest-small-device-px: 768 !default;
-$-largest-tiny-device-px: 480 !default;
+$largest-medium-device-px: 1024 !default;
+$largest-small-device-px: 768 !default;
+$largest-tiny-device-px: 480 !default;
 
-$-smallest-large-device-em: #{math.div(
-    $-largest-medium-device-px + 1,
-    typography.$base-font-size-px
+$smallest-large-device-em: #{math.div(
+    $largest-medium-device-px + 1,
+    typography.$relative-1rem-px
   )}em;
-$-largest-medium-device-em: #{math.div(
-    $-largest-medium-device-px,
-    typography.$base-font-size-px
+$largest-medium-device-em: #{math.div(
+    $largest-medium-device-px,
+    typography.$relative-1rem-px
   )}em;
-$-smallest-medium-device-em: #{math.div(
-    $-largest-small-device-px + 1,
-    typography.$base-font-size-px
+$smallest-medium-device-em: #{math.div(
+    $largest-small-device-px + 1,
+    typography.$relative-1rem-px
   )}em;
-$-largest-small-device-em: #{math.div(
-    $-largest-small-device-px,
-    typography.$base-font-size-px
+$largest-small-device-em: #{math.div(
+    $largest-small-device-px,
+    typography.$relative-1rem-px
   )}em;
-$-smallest-small-device-em: #{math.div(
-    $-largest-tiny-device-px + 1,
-    typography.$base-font-size-px
+$smallest-small-device-em: #{math.div(
+    $largest-tiny-device-px + 1,
+    typography.$relative-1rem-px
   )}em;
-$-largest-tiny-device-em: #{math.div(
-    $-largest-tiny-device-px,
-    typography.$base-font-size-px
+$largest-tiny-device-em: #{math.div(
+    $largest-tiny-device-px,
+    typography.$relative-1rem-px
   )}em;
 
-$media-large: "(min-width: #{$-smallest-large-device-em})";
-$media-lt-large: "(max-width: #{$-largest-medium-device-em})";
-$media-medium: "(min-width: #{$-smallest-medium-device-em}) and (max-width: #{$-largest-medium-device-em})";
-$media-gt-mobile: "(min-width: #{$-smallest-medium-device-em})";
-$media-mobile: "(max-width: #{$-largest-small-device-em})";
-$media-small: "(min-width: #{$-smallest-small-device-em}) and (max-width: #{$-largest-small-device-em})";
-$media-gt-tiny: "(min-width: #{$-smallest-small-device-em})";
-$media-tiny: "(max-width: #{$-largest-tiny-device-em})";
+$media-large: "(min-width: #{$smallest-large-device-em})";
+$media-lt-large: "(max-width: #{$largest-medium-device-em})";
+$media-medium: "(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})";
+$media-gt-mobile: "(min-width: #{$smallest-medium-device-em})";
+$media-mobile: "(max-width: #{$largest-small-device-em})";
+$media-small: "(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})";
+$media-gt-tiny: "(min-width: #{$smallest-small-device-em})";
+$media-tiny: "(max-width: #{$largest-tiny-device-em})";