@nationalarchives/frontend 0.1.23-prerelease → 0.1.24-prerelease

package/nationalarchives/utilities/_colour.scss

@@ -0,0 +1,100 @@
+@use "../tools/colour";
+
+:root {
+  @include colour.colour-css-vars;
+}
+
+.tna-template {
+  @include colour.colour-background("page-background");
+
+  accent-color: var(--accent);
+
+  &--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) 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 {
+      @include colour.colour-css-vars-high-contrast-dark;
+    }
+  }
+
+  &--black-accent {
+    @include colour.accent-css-vars("black");
+  }
+
+  &--yellow-accent {
+    @include colour.accent-css-vars("yellow");
+  }
+
+  &--pink-accent {
+    @include colour.accent-css-vars("pink");
+  }
+
+  &--orange-accent {
+    @include colour.accent-css-vars("orange");
+  }
+
+  &--green-accent {
+    @include colour.accent-css-vars("green");
+  }
+
+  &--blue-accent {
+    @include colour.accent-css-vars("blue");
+  }
+
+  @media (prefers-reduced-motion) {
+    * {
+      animation: none !important;
+      transition: none !important;
+    }
+  }
+}
+
+.tna-background {
+  &-tint {
+    @include colour.tint;
+  }
+
+  &-contrast {
+    @include colour.contrast;
+  }
+
+  &-accent {
+    @include colour.accent;
+  }
+
+  &-accent-light {
+    @include colour.accent-light;
+  }
+}

package/nationalarchives/utilities/_global.scss

@@ -3,10 +3,6 @@
 @use "../tools/spacing";
 @use "../variables/typography";
 
-:root {
-  @include colour.colour-css-vars;
-}
-
 .tna-template {
   min-width: 320px;
   width: 100%;
@@ -23,81 +19,6 @@
   -webkit-overflow-scrolling: touch;
 
   font-size: #{typography.$relative-1rem-px}px;
-
-  @include colour.colour-background("page-background");
-
-  accent-color: var(--accent);
-
-  &--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) 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 {
-      @include colour.colour-css-vars-high-contrast-dark;
-    }
-  }
-
-  &--black-accent {
-    @include colour.accent-css-vars("black");
-  }
-
-  &--yellow-accent {
-    @include colour.accent-css-vars("yellow");
-  }
-
-  &--pink-accent {
-    @include colour.accent-css-vars("pink");
-  }
-
-  &--orange-accent {
-    @include colour.accent-css-vars("orange");
-  }
-
-  &--green-accent {
-    @include colour.accent-css-vars("green");
-  }
-
-  &--blue-accent {
-    @include colour.accent-css-vars("blue");
-  }
-
-  @media (prefers-reduced-motion) {
-    * {
-      animation: none !important;
-      transition: none !important;
-    }
-  }
 }
 
 .tna-template__body {
@@ -109,7 +30,7 @@
     display: flex;
     flex-direction: column;
 
-    #main-content[role="main"] {
+    #main-content {
       flex: 1;
     }
   }
@@ -121,6 +42,7 @@ picture,
 video,
 canvas {
   max-width: 100%;
+  height: auto;
 
   display: block;
 }
@@ -169,21 +91,3 @@ hr {
     padding: 1rem;
   }
 }
-
-.tna-background {
-  &--contrast {
-    @include colour.invert;
-  }
-
-  &--accent {
-    @include colour.accent;
-  }
-
-  &--accent-light {
-    @include colour.light-accent-background;
-  }
-
-  &--tint {
-    @include colour.tint-background;
-  }
-}

package/nationalarchives/utilities/_index.scss

@@ -1,4 +1,5 @@
 @use "a11y";
+@use "colour";
 @use "columns";
 @use "debug";
 @use "global";

package/nationalarchives/utilities/_overrides.scss

@@ -1,52 +1,32 @@
-@use "../variables/spacing";
+@use "sass:map";
 @use "../tools/media";
+@use "../tools/spacing";
 
-@mixin no-spacing-generator($suffix: "") {
-  @if $suffix != "" {
-    $suffix: "-" + $suffix;
-  }
-
-  @each $property in margin, padding {
-    @each $direction in top, bottom {
-      .tna-\!--no-#{$property}-#{$direction}#{$suffix},
-      .tna-\!--no-#{$property}-vertical#{$suffix} {
-        #{$property}-#{$direction}: 0 !important;
-      }
-    }
+@mixin hide-on($suffix) {
+  .tna-\!--hide-on-#{$suffix} {
+    display: none;
   }
 }
 
-@mixin overrides($spacing, $suffix: "") {
-  @if $suffix != "" {
-    $suffix: "-" + $suffix;
-  }
+@include spacing.no-spacing-generator;
+@include spacing.spacing-generator;
 
-  @each $property in margin, padding {
-    @each $direction in top, bottom {
-      @each $size, $amount in $spacing {
-        .tna-\!--#{$property}-#{$direction}-#{$size}#{$suffix},
-        .tna-\!--#{$property}-vertical-#{$size}#{$suffix} {
-          #{$property}-#{$direction}: #{$amount} !important;
-        }
-      }
-    }
-  }
+@include media.on-large {
+  @include spacing.no-spacing-generator("large");
+  @include hide-on("large");
 }
 
-@include no-spacing-generator;
-@include overrides(spacing.$spacing);
-
 @include media.on-medium {
-  @include no-spacing-generator("medium");
-  @include overrides(spacing.$spacing, "medium");
+  @include spacing.no-spacing-generator("medium");
+  @include hide-on("medium");
 }
 
 @include media.on-small {
-  @include no-spacing-generator("small");
-  @include overrides(spacing.$spacing-mobile, "small");
+  @include spacing.no-spacing-generator("small");
+  @include hide-on("small");
 }
 
 @include media.on-tiny {
-  @include no-spacing-generator("tiny");
-  @include overrides(spacing.$spacing-mobile, "tiny");
+  @include spacing.no-spacing-generator("tiny");
+  @include hide-on("tiny");
 }

package/nationalarchives/utilities/_typography.scss

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:selector";
 @use "../tools/colour";
 @use "../tools/media";
 @use "../tools/spacing";
@@ -7,30 +8,41 @@
 @use "../variables/grid";
 @use "../variables/typography" as typographyVars;
 
-@import "https://use.typekit.net/hkj3kuz.css";
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("#{assets.$tna-font-path}/OpenSans-Medium.ttf");
-  font-weight: normal;
-  font-style: normal;
-  // font-display: swap;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf");
-  font-weight: bold;
-  font-style: normal;
-  // font-display: swap;
-}
-
-@font-face {
-  font-family: "Roboto Mono";
-  src: url("#{assets.$tna-font-path}/RobotoMono-Regular.ttf");
-  font-weight: normal;
-  font-style: normal;
-  // font-display: swap;
+@if typographyVars.$use-local-fonts {
+  @font-face {
+    font-family: "Open Sans";
+    src: url("#{assets.$tna-font-path}/OpenSans-Regular.ttf");
+    font-weight: typographyVars.$main-font-weight;
+    font-style: normal;
+    // font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Open Sans";
+    src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf");
+    font-weight: typographyVars.$main-font-weight-bold;
+    font-style: normal;
+    // font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Roboto Mono";
+    src: url("#{assets.$tna-font-path}/RobotoMono-Regular.ttf");
+    font-weight: typographyVars.$detail-font-weight;
+    font-style: normal;
+    // font-display: swap;
+  }
+
+  @font-face {
+    font-family: "Roboto Mono";
+    src: url("#{assets.$tna-font-path}/RobotoMono-Medium.ttf");
+    font-weight: typographyVars.$detail-font-weight-bold;
+    font-style: normal;
+    // font-display: swap;
+  }
+} @else {
+  // @import "https://use.typekit.net/hkj3kuz.css";
+  @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@#{typographyVars.$main-font-weight};#{typographyVars.$main-font-weight-bold}&family=Roboto+Mono:wght@#{typographyVars.$detail-font-weight};#{typographyVars.$detail-font-weight-bold}&display=swap"); /* stylelint-disable-line */
 }
 
 .tna-template {
@@ -66,12 +78,6 @@ ol {
   margin-top: 0;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
 strong {
   @include typography.main-font-weight-bold;
 }
@@ -89,9 +95,13 @@ p {
 }
 
 a {
-  @include colour.colour-font("link");
   text-decoration-thickness: 1.5px;
 
+  &,
+  &:link {
+    @include colour.colour-font("link");
+  }
+
   &:visited {
     @include colour.colour-font("link-visited");
   }
@@ -100,6 +110,28 @@ a {
   &:active {
     @include typography.interacted-text-decoration;
   }
+
+  &.tna-link--no-visited-state {
+    &:visited {
+      @include colour.colour-font("link");
+    }
+  }
+
+  @include colour.on-high-contrast {
+    &:active {
+      box-shadow: none;
+    }
+
+    &:hover:not(:focus) {
+      box-shadow: 0 0 0 0.3125rem var(--link);
+    }
+  }
+
+  // &[target="_blank"]:not([title*="opens in a new"]) {
+  //   &::after {
+  //     content: "" / " (opens in a new window)"
+  //   }
+  // }
 }
 
 small {
@@ -108,6 +140,47 @@ small {
   );
 }
 
+// .tna-detail[title][data-type] {
+//   padding: 0 0.375rem;
+
+//   display: inline-flex;
+//   flex-flow: row nowrap;
+//   align-items: baseline;
+//   gap: 0.5rem;
+
+//   vertical-align: baseline;
+
+//   background-color: #ccc;
+
+//   &::after {
+//     @include colour.colour-font("font-base");
+//     @include typography.detail-font-small;
+//     vertical-align: baseline;
+
+//     content: attr(data-type) / "";
+//   }
+
+//   &[data-type="misc"] {
+//     background-color: #f28482;
+//   }
+
+//   &[data-type="loc"] {
+//     background-color: #edae49;
+//   }
+
+//   &[data-type="per"] {
+//     background-color: #b5e2fa;
+//   }
+
+//   @at-root #{selector.unify("a", &)} {
+//     @include colour.colour-font("font-base");
+
+//     &::after {
+//       text-decoration: none;
+//     }
+//   }
+// }
+
 .tna-chip-list {
   @include spacing.space-above;
   margin-bottom: 0;
@@ -129,6 +202,7 @@ small {
 
   display: block;
 
+  @include colour.colour-font("font-dark");
   @include typography.detail-font-small;
   line-height: 1;
 
@@ -141,32 +215,34 @@ small {
   @extend %chip;
 
   &--plain {
+    padding: 0;
+
     color: inherit;
 
     background-color: transparent;
 
-    border-color: transparent;
+    border: none;
   }
-}
 
-a.tna-chip {
-  text-decoration: none;
+  @at-root #{selector.unify("a", &)} {
+    text-decoration: none;
 
-  &,
-  &:link,
-  &:visited {
-    @include colour.colour-font("font-dark");
-  }
-
-  &:hover {
-    @include typography.interacted-text-decoration;
-  }
-
-  &--plain {
     &,
     &:link,
     &:visited {
-      color: inherit;
+      @include colour.colour-font("font-dark");
+    }
+
+    &:hover {
+      @include typography.interacted-text-decoration;
+    }
+
+    &--plain {
+      &,
+      &:link,
+      &:visited {
+        color: inherit;
+      }
     }
   }
 }
@@ -174,12 +250,13 @@ a.tna-chip {
 %heading {
   @include colour.colour-font("font-dark");
 
-  text-wrap: balance;
-
   &:not(.tna-heading--no-link-arrow) {
     a {
       display: inline-block;
 
+      text-wrap: balance;
+      // text-decoration-thickness: .1em;
+
       &::after {
         padding-left: 0.25rem;
 
@@ -191,6 +268,8 @@ a.tna-chip {
       }
 
       &:hover {
+        // text-decoration-thickness: .15em;
+
         &::after {
           padding-left: 0.5rem;
         }
@@ -304,6 +383,16 @@ a.tna-chip {
     margin: 0 0 0.25rem;
 
     @extend %chip;
+
+    &--plain {
+      padding: 0;
+
+      color: inherit;
+
+      background-color: transparent;
+
+      border: none;
+    }
   }
 
   &__title {
@@ -336,7 +425,7 @@ a.tna-chip {
   margin-left: 0;
   padding: 1rem 1rem 1rem 2rem;
 
-  @include colour.colour-border("accent-background", 0.35rem, solid, left);
+  @include colour.colour-border("accent-background", 0.375rem, solid, left);
 
   &__quote {
     font-weight: 700;
@@ -358,7 +447,8 @@ a.tna-chip {
 .tna-large-paragraph {
   @include spacing.space-above;
 
-  @include typography.relative-font-size(20);
+  @include typography.relative-font-size(22);
+  @include colour.colour-font("font-dark");
 }
 
 .tna-scene-setter {
@@ -382,4 +472,8 @@ a.tna-chip {
       text-decoration-thickness: 4.5px;
     }
   }
+
+  &--small {
+    @include typography.relative-font-size(24);
+  }
 }

package/nationalarchives/variables/_colour.scss

@@ -39,7 +39,7 @@ $colour-palette-brand: (
 
 $dark-grey: #26262a;
 $base-font: #343338 !default;
-$link-colour: #1d70ab !default;
+$link-colour: brand-colour("navy") !default;
 $link-colour-visited: #4c2c92 !default;
 
 /*
@@ -49,7 +49,7 @@ LIGHT THEME (DEFAULT)
 */
 $colour-palette-default: (
   "page-background": #f4f4f4,
-  "background-tint": #d8d8d8,
+  "background-tint": #e2e2e2,
   "font-base": $base-font,
   "font-dark": brand-colour("black"),
   "font-light": hex-to-rgb($base-font, 0.7),
@@ -100,7 +100,7 @@ DARK THEME
 $colour-palette-dark: map.merge(
   $colour-palette-default,
   (
-    "page-background": #111,
+    "page-background": #222,
     "background-tint": #333,
     "font-base": brand-colour("white", 0.95),
     "font-dark": brand-colour("white"),
@@ -114,7 +114,7 @@ $colour-palette-dark: map.merge(
     "button-background": brand-colour("white"),
     "button-hover-text": brand-colour("white"),
     "button-hover-background": brand-colour("black"),
-    "contrast-background": #1e1e1e,
+    "contrast-background": #111,
     "contrast-link-visited":
       map.get($colour-palette-default, "contrast-link-visited"),
     // --accent-background-light is the same as --contrast-background on dark themes
@@ -134,8 +134,8 @@ $colour-palette-high-contrast: map.merge(
     "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"),
+    "link": #34d,
+    "link-visited": #848,
     "focus-outline": brand-colour("orange"),
     "keyline": brand-colour("black"),
     "keyline-dark": brand-colour("black"),
@@ -162,11 +162,12 @@ DARK, HIGH_CONTRAST THEME
 $colour-palette-high-contrast-dark: map.merge(
   $colour-palette-dark,
   (
+    "page-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"),
+    "link": #69f,
+    "link-visited": #a6c,
     "keyline": brand-colour("white"),
     "contrast-background": brand-colour("black"),
   )

package/nationalarchives/variables/_spacing.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 $spacing: (
   "xs": 0.5rem,
   "s": 1rem,
@@ -5,13 +7,16 @@ $spacing: (
   "l": 3rem,
   "xl": 5rem,
   "xxl": 8rem,
-);
+) !default;
 
-$spacing-mobile: (
-  "xs": 0.5rem,
-  "s": 0.75rem,
-  "m": 1.5rem,
-  "l": 2rem,
-  "xl": 3rem,
-  "xxl": 5rem,
-);
+$spacing-mobile: map.merge(
+  $spacing,
+  (
+    "xs": 0.5rem,
+    "s": 0.75rem,
+    "m": 1.5rem,
+    "l": 2rem,
+    "xl": 3rem,
+    "xxl": 5rem,
+  )
+) !default;