@nationalarchives/frontend 0.1.15-prerelease → 0.1.17-prerelease

package/nationalarchives/utilities/_global.scss

@@ -1,5 +1,6 @@
 @use "../features";
 @use "../tools/colour";
+@use "../tools/media";
 @use "../variables/typography";
 
 :root {
@@ -19,29 +20,7 @@
 
   @include colour.colour-background("page-background");
 
-  // &--black-accent {
-  //   accent-color: colour.$_tna-black;
-  // }
-
-  // &--yellow-accent {
-  //   accent-color: colour.$_tna-yellow;
-  // }
-
-  // &--pink-accent {
-  //   accent-color: colour.$_tna-pink;
-  // }
-
-  // &--orange-accent {
-  //   accent-color: colour.$_tna-orange;
-  // }
-
-  // &--green-accent {
-  //   accent-color: colour.$_tna-green;
-  // }
-
-  // &--blue-accent {
-  //   accent-color: colour.$_tna-blue;
-  // }
+  accent-color: var(--accent);
 
   &--system-theme {
     @include colour.colour-css-vars;
@@ -83,6 +62,32 @@
     }
   }
 
+  @include colour.accent-css-vars("black"); // TODO: Temp
+
+  // &--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;
@@ -134,17 +139,56 @@ canvas {
 }
 
 hr {
-  margin: 3rem 0;
+  margin: 2rem 0;
 
   border-width: 1px 0 0;
   @include colour.colour-border("keyline");
-  border-style: dashed;
+  border-style: solid;
+
+  // @include colour.on-high-contrast {
+  //   border-style: solid;
+  // }
+}
+
+.tna-section {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+
+  @include media.on-mobile {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+}
+
+.tna-aside {
+  margin-bottom: 2rem;
+  padding: 2rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  @include media.on-mobile {
+    padding: 1rem;
+  }
 
   @include colour.on-high-contrast {
-    border-style: solid;
+    @include colour.colour-border("keyline-dark", 1px);
   }
 }
 
+.tna-background--contrast {
+  @include colour.invert;
+}
+
+.tna-background--accent {
+  @include colour.accent;
+}
+
+.tna-background--accent-light {
+  @include colour.light-accent-background;
+}
+
 .tna-visually-hidden {
   width: 1px !important;
   height: 1px !important;
@@ -163,4 +207,9 @@ hr {
   border: 0 !important;
 
   background-color: transparent !important;
+
+  &::before,
+  &::after {
+    content: "\00a0";
+  }
 }

package/nationalarchives/utilities/_index.scss

@@ -1,4 +1,5 @@
 @forward "debug";
+@forward "font-awesome";
 @forward "global";
 @forward "overrides";
 @forward "typography";

package/nationalarchives/utilities/_overrides.scss

@@ -1,17 +1,62 @@
 @use "../variables/spacing";
+@use "../tools/media";
 
-@each $property in margin, padding {
-  @each $direction in top, bottom {
-    .tna-\!--no-#{$property}-#{$direction},
-    .tna-\!--no-#{$property}-vertical {
-      #{$property}-#{$direction}: 0 !important;
+@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;
+      }
     }
+  }
+}
+
+@include no-spacing-generator;
 
-    @each $size, $amount in spacing.$spacing {
-      .tna-\!--#{$property}-#{$direction}-#{$size},
-      .tna-\!--#{$property}-vertical-#{$size} {
-        #{$property}-#{$direction}: #{$amount}rem !important;
+@include media.on-medium {
+  @include no-spacing-generator("medium");
+}
+
+@include media.on-small {
+  @include no-spacing-generator("small");
+}
+
+@include media.on-tiny {
+  @include no-spacing-generator("tiny");
+}
+
+@mixin overrides($spacing, $suffix: "") {
+  @if $suffix != "" {
+    $suffix: "-" + $suffix;
+  }
+
+  @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}rem !important;
+        }
       }
     }
   }
 }
+
+@include overrides(spacing.$spacing);
+
+@include media.on-medium {
+  @include overrides(spacing.$spacing, "medium");
+}
+
+@include media.on-small {
+  @include overrides(spacing.$spacing-mobile, "small");
+}
+
+@include media.on-tiny {
+  @include overrides(spacing.$spacing-mobile, "tiny");
+}

package/nationalarchives/utilities/_typography.scss

@@ -2,6 +2,7 @@
 @use "../tools/colour";
 @use "../tools/media";
 @use "../tools/typography";
+@use "../variables/grid";
 
 // TODO: Temporary - will eventually bundle font files into package
 @import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@500;700&family=Roboto+Mono:wght@400&display=swap";
@@ -63,7 +64,23 @@ a {
 
   &:hover,
   &:active {
-    text-decoration-thickness: 3.5px;
+    @include typography.interacted-text-decoration;
+  }
+
+  &.tna-chip {
+    // display: block;
+
+    text-decoration: none;
+
+    &,
+    &:link,
+    &:visited {
+      @include colour.colour-font("font-dark");
+    }
+
+    &:hover {
+      @include typography.interacted-text-decoration;
+    }
   }
 }
 
@@ -77,7 +94,7 @@ a {
   }
 
   li::marker {
-    @include colour.colour-font("accent");
+    @include colour.colour-font("accent-background");
     font-weight: 700;
   }
 
@@ -88,7 +105,76 @@ a {
   }
 }
 
-.tna-heading {
+%chip {
+  max-width: max-content;
+  padding: 0.375em 0.5rem;
+
+  // display: inline-block;
+  display: block;
+
+  @include colour.colour-font("font-dark");
+  @include typography.detail-font-small;
+  line-height: 1;
+
+  @include colour.accent;
+}
+
+.tna-chip {
+  @extend %chip;
+}
+
+.tna-chip-list {
+  padding-left: 0;
+
+  display: flex;
+  flex-wrap: wrap;
+
+  list-style: none;
+
+  &__item {
+    margin: 0 1rem 1rem 0;
+
+    display: inline-block;
+  }
+}
+
+%heading-xl {
+  @include typography.relative-font-size(64);
+  line-height: 1.2;
+
+  @include media.on-medium {
+    @include typography.relative-font-size(42);
+  }
+
+  @include media.on-mobile {
+    @include typography.relative-font-size(36);
+  }
+}
+
+%heading-l {
+  @include typography.relative-font-size(32);
+  line-height: 1.4;
+
+  @include media.on-medium {
+    @include typography.relative-font-size(26);
+  }
+
+  @include media.on-mobile {
+    @include typography.relative-font-size(24);
+  }
+}
+
+%heading-m {
+  @include typography.relative-font-size(20);
+  line-height: 1.6;
+}
+
+%heading-s {
+  @include typography.relative-font-size(18);
+  line-height: 1.6;
+}
+
+%heading {
   margin-bottom: 1rem;
 
   @include colour.colour-font("font-dark");
@@ -98,99 +184,91 @@ a {
     margin-bottom: 0;
   }
 
-  &--xl {
-    @include typography.relative-font-size(64);
-    line-height: 1;
+  a {
+    &::after {
+      padding-left: 0.25rem;
+
+      display: inline-block;
 
-    @include media.on-medium {
-      @include typography.relative-font-size(42);
+      font-weight: 700;
+
+      content: "\203A";
     }
 
-    @include media.on-mobile {
-      @include typography.relative-font-size(36);
+    &:hover {
+      &::after {
+        transform: translateX(0.25rem);
+      }
     }
   }
+}
 
-  &--l {
-    @include typography.relative-font-size(32);
-    line-height: 1.2;
+.tna-heading {
+  @extend %heading;
+  // @extend %heading-l;
 
-    @include media.on-medium {
-      @include typography.relative-font-size(26);
-    }
+  &--xl {
+    @extend %heading-xl;
+  }
 
-    @include media.on-mobile {
-      @include typography.relative-font-size(24);
-    }
+  &--l {
+    @extend %heading-l;
   }
 
   &--m {
-    @include typography.relative-font-size(20);
-    line-height: 1.4;
+    @extend %heading-m;
   }
 
   &--s {
-    @include typography.relative-font-size(18);
-    line-height: 1.6;
+    @extend %heading-s;
   }
 }
 
 .tna-hgroup {
   margin-bottom: 1rem;
 
-  &:last-child {
-    margin-bottom: 0;
-  }
-
   &__supertitle {
     margin: 0 0 0.5rem;
 
-    @include colour.colour-font("font-base");
-    @include typography.detail-font;
-
-    .tna-hgroup & {
-      // margin: 0;
-    }
+    @extend %chip;
   }
 
   &__title {
     margin: 0;
 
-    @include colour.colour-font("font-dark");
+    display: block;
 
-    .tna-hgroup__supertitle {
-      display: block;
+    @extend %heading;
+    // @extend %heading-l;
+  }
 
-      @include colour.colour-font("font-base");
-    }
+  &--xl &__title {
+    @extend %heading-xl;
   }
 
-  &--xl {
-    .tna-hgroup__title {
-      @include typography.relative-font-size(64);
-      line-height: 1;
-    }
+  &--l &__title {
+    @extend %heading-l;
   }
 
-  &--l {
-    .tna-hgroup__title {
-      @include typography.relative-font-size(32);
-      line-height: 1.2;
-    }
+  &--m &__title {
+    @extend %heading-m;
   }
 
-  &--m {
-    .tna-hgroup__title {
-      @include typography.relative-font-size(20);
-      line-height: 1.4;
-    }
+  &--s &__title {
+    @extend %heading-s;
   }
+}
 
-  &--s {
-    .tna-hgroup__title {
-      @include typography.relative-font-size(18);
-      line-height: 1.6;
-    }
+.tna-heading,
+.tna-hgroup {
+  margin-top: 3rem;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
   }
 }
 
@@ -198,20 +276,19 @@ a {
   margin: 0 0 2rem;
   padding: 1rem 1rem 1rem 2rem;
 
-  border-left: 0.35rem solid;
-  @include colour.colour-border("keyline");
+  @include colour.colour-border("accent-background", 0.35rem, solid, left);
 
-  quotes: "“" "”" "‘" "’";
+  // quotes: "“" "”" "‘" "’";
 
   &:last-child {
     margin-bottom: 0;
   }
 
-  &::before {
-    float: left;
+  // &::before {
+  //   float: left;
 
-    content: open-quote;
-  }
+  //   content: open-quote;
+  // }
 
   &__quote {
     font-weight: 700;
@@ -229,3 +306,64 @@ a {
     }
   }
 }
+
+.tna-scene-setter {
+  @include typography.detail-font;
+  @include colour.colour-font("font-dark");
+  @include typography.relative-font-size(30);
+  line-height: math.div(50, 30);
+
+  @include media.on-mobile {
+    @include typography.relative-font-size(24);
+    line-height: 2;
+  }
+
+  a {
+    color: inherit;
+    text-decoration-thickness: 2px;
+
+    &:hover {
+      text-decoration-thickness: 4.5px;
+    }
+  }
+}
+
+.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 @@
-$tna-assets-path: "/assets" !default;
+$tna-font-path: "assets/fonts" !default;