@nationalarchives/frontend 0.1.23-prerelease → 0.1.25-prerelease

package/nationalarchives/tools/_colour.scss

@@ -53,14 +53,7 @@
     --accent-link-visited: #{brand-colour("white")} !important;
     --accent-keyline: #{brand-colour("white", 0.5)} !important;
     --accent-keyline-dark: #{brand-colour("white", 0.8)} !important;
-
-    @if $colour == "black" {
-      // --accent: #{brand-colour("light-grey")} !important;
-      // --accent-background: #{brand-colour("black")} !important;
-      // --accent-background-light: #{brand-colour("light-grey")} !important;
-      // --button-accent-text: #{brand-colour("black")} !important;
-      // --button-accent-background: #{brand-colour("grey")} !important;
-    } @else {
+    @if $colour != "black" {
       --button-accent-text: #{brand-colour("white")} !important;
       @if $colour == "pink" {
         --accent: #{brand-colour("pink")} !important;
@@ -204,7 +197,7 @@
   @extend %plain;
 }
 
-%invert {
+%contrast {
   --background: var(--contrast-background);
   --font-base: var(--contrast-font-base);
   --font-dark: var(--contrast-font-dark);
@@ -224,11 +217,11 @@
   @include colour-font("font-base", false, colour.$colour-palette-dark);
 }
 
-@mixin invert {
-  @extend %invert;
+@mixin contrast {
+  @extend %contrast;
 }
 
-%invert-on-mobile {
+%contrast-on-mobile {
   @include media.on-mobile {
     --background: var(--contrast-background);
     --font-base: var(--contrast-font-base);
@@ -250,8 +243,8 @@
   }
 }
 
-@mixin invert-on-mobile {
-  @extend %invert-on-mobile;
+@mixin contrast-on-mobile {
+  @extend %contrast-on-mobile;
 }
 
 %accent {
@@ -274,12 +267,13 @@
   @extend %accent;
 }
 
-%tint-background {
+%tint {
   @include colour-background("background-tint");
+  @include colour-font("font-base");
 }
 
-@mixin tint-background {
-  @extend %tint-background;
+@mixin tint {
+  @extend %tint;
 }
 
 %accent-background {
@@ -290,7 +284,7 @@
   @extend %accent-background;
 }
 
-%light-accent-background {
+%accent-light {
   --background: var(--accent-background-light);
   --font-base: #{map.get(colour.$colour-palette-default, "font-base")};
   --font-dark: #{map.get(colour.$colour-palette-default, "font-dark")};
@@ -314,10 +308,11 @@
     )};
 
   @include colour-background("background");
+  @include colour-font("font-base");
 }
 
-@mixin light-accent-background {
-  @extend %light-accent-background;
+@mixin accent-light {
+  @extend %accent-light;
 }
 
 @mixin on-high-contrast {

package/nationalarchives/tools/_spacing.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../variables/spacing";
+@use "../tools/media";
 
 %space-above {
   margin-top: 2rem;
@@ -13,10 +14,98 @@
   @extend %space-above;
 }
 
-@function spacing($size) {
+@function space($size) {
   @return map.get(spacing.$spacing, $size);
 }
 
-@function spacing-mobile($size) {
+@function space-mobile($size) {
   @return map.get(spacing.$spacing-mobile, $size);
 }
+
+@mixin no-spacing-generator($suffix: "") {
+  @if $suffix != "" {
+    $suffix: "-" + $suffix;
+  }
+  @each $property in margin, padding {
+    @each $direction in top, bottom {
+      $combined-direction: "";
+      @if $direction == top or $direction == bottom {
+        $combined-direction: vertical;
+      } @else if $direction == right or $direction == left {
+        $combined-direction: horizontal;
+      }
+      @if $combined-direction {
+        .tna-\!--no-#{$property}-#{$direction}#{$suffix},
+        .tna-\!--no-#{$property}-#{$combined-direction}#{$suffix} {
+          #{$property}-#{$direction}: 0 !important;
+        }
+      } @else {
+        .tna-\!--no-#{$property}-#{$direction}#{$suffix} {
+          #{$property}-#{$direction}: 0 !important;
+        }
+      }
+    }
+  }
+}
+
+@mixin spacing-generator($suffix: "") {
+  @each $property in margin, padding {
+    @each $direction in top, bottom {
+      @each $size, $amount in spacing.$spacing {
+        @if $direction == all {
+          .tna-\!--#{$property}-#{$size} {
+            #{$property}: #{$amount} !important;
+          }
+        } @else {
+          $combined-direction: "";
+          @if $direction == top or $direction == bottom {
+            $combined-direction: vertical;
+          } @else if $direction == right or $direction == left {
+            $combined-direction: horizontal;
+          }
+          @if $combined-direction {
+            .tna-\!--#{$property}-#{$direction}-#{$size},
+            .tna-\!--#{$property}-#{$combined-direction}-#{$size} {
+              #{$property}-#{$direction}: #{$amount} !important;
+            }
+          } @else {
+            .tna-\!--#{$property}-#{$direction}-#{$size} {
+              #{$property}-#{$direction}: #{$amount} !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @include media.on-mobile {
+    @each $property in margin, padding {
+      @each $direction in top, bottom {
+        @each $size, $amount in spacing.$spacing-mobile {
+          @if $direction == all {
+            .tna-\!--#{$property}-#{$size} {
+              #{$property}: #{$amount} !important;
+            }
+          } @else {
+            $combined-direction: "";
+            @if $direction == top or $direction == bottom {
+              $combined-direction: vertical;
+            } @else if $direction == right or $direction == left {
+              $combined-direction: horizontal;
+            }
+            @if $combined-direction {
+              .tna-\!--#{$property}-#{$direction}-#{$size},
+              .tna-\!--#{$property}-#{$combined-direction}-#{$size} {
+                #{$property}-#{$direction}: #{$amount} !important;
+              }
+            } @else {
+              .tna-\!--#{$property}-#{$direction}-#{$size} {
+                #{$property}-#{$direction}: #{$amount} !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/nationalarchives/tools/_typography.scss

@@ -12,30 +12,37 @@
 }
 
 @mixin main-font-weight {
-  font-weight: typography.$font-weight-main;
+  font-weight: typography.$main-font-weight;
 }
 
 @mixin main-font-weight-bold {
-  font-weight: typography.$font-weight-main-bold;
+  font-weight: typography.$main-font-weight-bold;
 }
 
 @mixin main-font {
-  font-family: typography.$font-family-main;
+  font-family: typography.$main-font-family;
   @include main-font-weight;
 }
 
 @mixin heading-font {
-  font-family: typography.$font-family-heading;
-  font-weight: typography.$font-weight-heading;
+  font-family: typography.$heading-font-family;
+  font-weight: typography.$heading-font-weight;
+}
+
+@mixin detail-font-weight {
+  font-weight: typography.$detail-font-weight;
+}
+
+@mixin detail-font-weight-bold {
+  font-weight: typography.$detail-font-weight-bold;
 }
 
 @mixin detail-font {
-  font-family: typography.$font-family-detail;
-  font-weight: typography.$font-weight-detail;
+  font-family: typography.$detail-font-family;
+  @include detail-font-weight;
 }
 
 @mixin detail-font-small {
-  @include colour.colour-font("font-dark");
   @include detail-font;
   @include relative-font-size(14);
   text-transform: uppercase;

package/nationalarchives/utilities/_a11y.scss

@@ -1,6 +1,7 @@
 @use "../tools/colour";
 
-.tna-visually-hidden {
+.tna-visually-hidden,
+.tna-\!--visually-hidden {
   width: 1px !important;
   height: 1px !important;
   margin: 0 !important;

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,7 +1,9 @@
 @use "a11y";
+@use "colour";
 @use "columns";
 @use "debug";
 @use "global";
 @use "lists";
 @use "overrides";
+@use "tables";
 @use "typography";

package/nationalarchives/utilities/_lists.scss

@@ -22,6 +22,11 @@
 
     list-style: none;
   }
+
+  .tna-ul,
+  .tna-ol {
+    margin-top: 0;
+  }
 }
 
 .tna-dl {

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/_tables.scss

@@ -0,0 +1,86 @@
+@use "sass:math";
+@use "sass:selector";
+@use "../tools/colour";
+@use "../tools/media";
+@use "../tools/spacing";
+@use "../tools/typography";
+@use "../variables/assets";
+@use "../variables/grid";
+
+.tna-table {
+  width: 100%;
+  @include spacing.space-above;
+
+  border-collapse: collapse;
+
+  text-align: left;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &__caption {
+    text-align: left;
+
+    @include typography.main-font-weight-bold;
+  }
+
+  &__head {
+  }
+
+  &__header {
+  }
+
+  &__body {
+  }
+
+  &__row {
+  }
+
+  &__cell {
+  }
+
+  &__header,
+  &__cell {
+    padding: 0.25rem 1rem;
+
+    @include colour.colour-border("keyline", 1px, solid, bottom);
+
+    &:first-child {
+      padding-left: 0;
+    }
+
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+
+  &__head &__header {
+    @include colour.colour-border("keyline-dark", 0.25rem, solid, bottom);
+  }
+
+  p {
+    + p {
+      margin-top: 0.25rem;
+    }
+  }
+}
+
+.tna-table-wrapper {
+  width: 100%;
+  @include spacing.space-above;
+  padding-left: grid.$gutter-width;
+  padding-right: grid.$gutter-width;
+
+  position: relative;
+  left: -#{grid.$gutter-width};
+
+  overflow: auto;
+
+  @include media.on-tiny {
+    padding-left: grid.$gutter-width-tiny;
+    padding-right: grid.$gutter-width-tiny;
+
+    left: -#{grid.$gutter-width-tiny};
+  }
+}