@nationalarchives/frontend 0.1.20-prerelease → 0.1.22-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";
 
@@ -13,6 +14,7 @@
   src: url("#{assets.$tna-font-path}/OpenSans-Medium.ttf");
   font-weight: normal;
   font-style: normal;
+  // font-display: swap;
 }
 
 @font-face {
@@ -20,6 +22,7 @@
   src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf");
   font-weight: bold;
   font-style: normal;
+  // font-display: swap;
 }
 
 @font-face {
@@ -27,6 +30,7 @@
   src: url("#{assets.$tna-font-path}/RobotoMono-Regular.ttf");
   font-weight: normal;
   font-style: normal;
+  // font-display: swap;
 }
 
 .tna-template {
@@ -41,9 +45,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,14 +77,10 @@ strong {
 }
 
 p {
-  margin: 0 0 1.5rem;
+  margin: 1rem 0 0;
 
-  @include media.on-tiny {
-    margin-bottom: 1rem;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
+  &:first-child {
+    margin-top: 0;
   }
 }
 
@@ -91,107 +96,114 @@ 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;
-    }
-  }
 }
 
-.tna-ul,
-.tna-ol {
-  margin-top: 0;
-  margin-right: 0;
-  margin-left: 0;
-  padding: 0 0 0 2rem;
+small {
+  @include typography.relative-font-size(
+    typographyVars.$body-font-size-px * 0.85
+  );
+}
 
-  @include spacing.space-below;
+.tna-chip-list {
+  @include spacing.space-above;
+  margin-bottom: 0;
+  padding-left: 0;
 
-  li::marker {
-    @include colour.colour-font("accent-background");
-    font-weight: 700;
-  }
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
 
-  &--plain {
-    padding-left: 0;
+  list-style: none;
 
-    list-style: none;
+  &__item {
   }
 }
 
 %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 {
   @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;
+    }
   }
 }
 
 %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;
+
+        display: inline-block;
 
-      content: "\203A";
-    }
+        font-weight: 700;
 
-    &:hover {
-      &::after {
-        padding-left: 0.5rem;
+        content: "\203A";
+      }
+
+      &:hover {
+        &::after {
+          padding-left: 0.5rem;
+        }
       }
     }
   }
 }
 
 %heading-xl {
+  @extend %heading;
+
+  @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 +212,14 @@ a {
 }
 
 %heading-l {
+  @extend %heading;
+
+  @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,38 +228,72 @@ a {
 }
 
 %heading-m {
-  @include typography.relative-font-size(20);
+  @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.5rem;
+    margin: 0 0 0.25rem;
 
     @extend %chip;
   }
@@ -254,51 +302,34 @@ a {
     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;
-
-  &: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;
   }
@@ -322,7 +353,7 @@ a {
   @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);
@@ -338,43 +369,3 @@ a {
     }
   }
 }
-
-.tna-columns {
-  column-gap: grid.$gutter-width;
-
-  &--2 {
-    column-count: 2;
-  }
-
-  &--3 {
-    column-count: 3;
-  }
-
-  @include media.on-mobile {
-    column-gap: grid.$gutter-width-mobile;
-  }
-
-  @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/_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,12 @@ 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"),
-    "contrast-background": #111,
+    "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": brand-colour("black"),
   )
-);
+) !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";