@nationalarchives/frontend 0.1.21-prerelease → 0.1.22-prerelease

package/nationalarchives/utilities/_lists.scss

@@ -0,0 +1,181 @@
+@use "../tools/colour";
+@use "../tools/media";
+@use "../tools/spacing";
+@use "../tools/typography";
+
+.tna-ul,
+.tna-ol {
+  margin: 1rem 0;
+  padding: 0 0 0 2rem;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  li::marker {
+    @include colour.colour-font("accent-background");
+    font-weight: 700;
+  }
+
+  &--plain {
+    padding-left: 0;
+
+    list-style: none;
+  }
+}
+
+.tna-dl {
+  margin: 1rem 0;
+
+  display: flex;
+  flex-wrap: wrap;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  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: 30%;
+
+    @include typography.main-font-weight-bold;
+  }
+
+  dd {
+    width: 70%;
+
+    + dd {
+      margin-left: 30%;
+    }
+  }
+
+  &--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;
+      }
+    }
+
+    dd {
+      padding-left: 2rem;
+    }
+  }
+
+  &:not(&--plain) {
+    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);
+    }
+  }
+}

package/nationalarchives/utilities/_typography.scss

@@ -14,6 +14,7 @@
   src: url("#{assets.$tna-font-path}/OpenSans-Medium.ttf");
   font-weight: normal;
   font-style: normal;
+  // font-display: swap;
 }
 
 @font-face {
@@ -21,6 +22,7 @@
   src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf");
   font-weight: bold;
   font-style: normal;
+  // font-display: swap;
 }
 
 @font-face {
@@ -28,6 +30,7 @@
   src: url("#{assets.$tna-font-path}/RobotoMono-Regular.ttf");
   font-weight: normal;
   font-style: normal;
+  // font-display: swap;
 }
 
 .tna-template {
@@ -74,14 +77,10 @@ strong {
 }
 
 p {
-  margin: 0 0 1rem;
+  margin: 1rem 0 0;
 
-  @include media.on-tiny {
-    margin-bottom: 1rem;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
+  &:first-child {
+    margin-top: 0;
   }
 }
 
@@ -97,20 +96,6 @@ a {
   &:active {
     @include typography.interacted-text-decoration;
   }
-
-  &.tna-chip {
-    text-decoration: none;
-
-    &,
-    &:link,
-    &:visited {
-      @include colour.colour-font("font-dark");
-    }
-
-    &:hover {
-      @include typography.interacted-text-decoration;
-    }
-  }
 }
 
 small {
@@ -119,178 +104,18 @@ small {
   );
 }
 
-.tna-ul,
-.tna-ol {
-  margin-top: 0;
-  margin-right: 0;
-  margin-left: 0;
-  padding: 0 0 0 2rem;
-
-  @include spacing.space-below;
-
-  li::marker {
-    @include colour.colour-font("accent-background");
-    font-weight: 700;
-  }
-
-  &--plain {
-    padding-left: 0;
-
-    list-style: none;
-  }
-}
+.tna-chip-list {
+  @include spacing.space-above;
+  margin-bottom: 0;
+  padding-left: 0;
 
-.tna-dl {
   display: flex;
   flex-wrap: wrap;
+  gap: 1rem;
 
-  @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;
+  list-style: none;
 
-      @include colour.colour-border("keyline-dark", 1px, solid, top);
-    }
+  &__item {
   }
 }
 
@@ -310,20 +135,35 @@ small {
 
 .tna-chip {
   @extend %chip;
-}
 
-.tna-chip-list {
-  padding-left: 0;
+  &--plain {
+    color: inherit;
 
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
+    background-color: transparent;
 
-  list-style: none;
+    border-color: transparent;
+  }
+}
 
-  @include spacing.space-below;
+a.tna-chip {
+  text-decoration: none;
 
-  &__item {
+  &,
+  &:link,
+  &:visited {
+    @include colour.colour-font("font-dark");
+  }
+
+  &:hover {
+    @include typography.interacted-text-decoration;
+  }
+
+  &--plain {
+    &,
+    &:link,
+    &:visited {
+      color: inherit;
+    }
   }
 }
 
@@ -356,6 +196,8 @@ small {
 }
 
 %heading-xl {
+  @extend %heading;
+
   @include typography.heading-font;
   @include typography.relative-font-size(64);
   line-height: 1.2;
@@ -370,6 +212,8 @@ small {
 }
 
 %heading-l {
+  @extend %heading;
+
   @include typography.heading-font;
   @include typography.relative-font-size(32);
   line-height: 1.3;
@@ -384,38 +228,70 @@ small {
 }
 
 %heading-m {
+  @extend %heading;
+
   @include typography.main-font-weight-bold;
   @include typography.relative-font-size(22);
   line-height: 1.6;
+
+  @include media.on-mobile {
+    @include typography.relative-font-size(20);
+  }
 }
 
 %heading-s {
+  @extend %heading;
+
   @include typography.main-font-weight-bold;
   @include typography.relative-font-size(18);
   line-height: 1.6;
 }
 
-.tna-heading {
-  @extend %heading;
+%headings-and-heading-groups {
+  @include spacing.space-above;
+  margin-bottom: 1rem;
+  padding-top: 1rem;
 
-  &--xl {
+  &:first-child {
+    padding-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+}
+
+.tna-heading {
+  &-xl {
     @extend %heading-xl;
+    @extend %headings-and-heading-groups;
   }
 
-  &--l {
+  &-l {
     @extend %heading-l;
+    @extend %headings-and-heading-groups;
   }
 
-  &--m {
+  &-m {
     @extend %heading-m;
+    @extend %headings-and-heading-groups;
   }
 
-  &--s {
+  &-s {
     @extend %heading-s;
+    @extend %headings-and-heading-groups;
   }
 }
 
 .tna-hgroup {
+  &-xl,
+  &-l,
+  &-m,
+  &-s {
+    @extend %headings-and-heading-groups;
+  }
+
   &__supertitle {
     margin: 0 0 0.25rem;
 
@@ -426,56 +302,34 @@ small {
     margin: 0;
 
     display: block;
-
-    @extend %heading;
   }
 
-  &--xl &__title {
+  &-xl &__title {
     @extend %heading-xl;
   }
 
-  &--l &__title {
+  &-l &__title {
     @extend %heading-l;
   }
 
-  &--m &__title {
+  &-m &__title {
     @extend %heading-m;
   }
 
-  &--s &__title {
+  &-s &__title {
     @extend %heading-s;
   }
 }
 
-.tna-heading,
-.tna-hgroup {
-  margin-top: 3rem;
-  margin-bottom: 1rem;
-
-  // &--m,
-  // &--s {
-  //   margin-bottom: 0.5rem;
-  // }
-
-  &:first-child {
-    margin-top: 0;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
 .tna-blockquote {
-  margin-top: 0;
+  @include spacing.space-above;
   margin-right: 0;
+  margin-bottom: 0;
   margin-left: 0;
   padding: 1rem 1rem 1rem 2rem;
 
   @include colour.colour-border("accent-background", 0.35rem, solid, left);
 
-  @include spacing.space-below;
-
   &__quote {
     font-weight: 700;
   }
@@ -499,7 +353,7 @@ small {
   @include typography.relative-font-size(30);
   line-height: math.div(50, 30);
 
-  @include spacing.space-below;
+  @include spacing.space-above;
 
   @include media.on-mobile {
     @include typography.relative-font-size(24);
@@ -515,43 +369,3 @@ small {
     }
   }
 }
-
-.tna-columns {
-  column-gap: grid.$gutter-width;
-
-  &--2 {
-    column-count: 2;
-  }
-
-  &--3 {
-    column-count: 3;
-  }
-
-  @include media.on-tiny {
-    column-gap: grid.$gutter-width-tiny;
-  }
-
-  @include media.on-small {
-    @for $i from 1 through 4 {
-      &--#{$i}-small {
-        column-count: $i;
-      }
-    }
-  }
-
-  @include media.on-tiny {
-    @for $i from 1 through 4 {
-      &--#{$i}-tiny {
-        column-count: $i;
-      }
-    }
-  }
-
-  &__block {
-    break-inside: avoid;
-  }
-
-  &:has(&__block:only-of-type) {
-    column-count: 1;
-  }
-}

package/nationalarchives/variables/_colour.scss

@@ -162,13 +162,12 @@ DARK, HIGH_CONTRAST THEME
 $colour-palette-high-contrast-dark: map.merge(
   $colour-palette-dark,
   (
-    "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,
+    "contrast-background": brand-colour("black"),
   )
 ) !default;

package/nationalarchives/variables/_typography.scss

@@ -9,11 +9,11 @@ $body-line-height: #{math.div(16, 18) * 2} !default; // 1.77777
 $interactive-text-decoration-thickness: 3.5px !default;
 
 $font-family-main: "Open Sans", sans-serif !default;
-$font-weight-main: normal !default;
-$font-weight-main-bold: bold !default;
+$font-weight-main: normal !default; // Defined in utilities/_typography.scss
+$font-weight-main-bold: bold !default; // Defined in utilities/_typography.scss
 
 $font-family-heading: supria-sans-condensed, "Arial Narrow", sans-serif !default;
-$font-weight-heading: 400 !default;
+$font-weight-heading: 500 !default;
 
 $font-family-detail: "Roboto Mono", monospace !default;
 $font-weight-detail: normal !default;