@nationalarchives/frontend 0.1.48 → 0.1.50

package/nationalarchives/tools/_media.scss

@@ -1,63 +1,86 @@
+@use "sass:math";
 @use "../variables/media";
+@use "../variables/typography";
 
-//   0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)
-//   |         .     |         |      |
-//   |-TINY----------|-SMALL---|-MED--|-LARGE------------------------
-//   |         .     |         |      |
-//   |<------------->|         |      |            on-tiny
-//   |<----------------------->|      |            on-mobile
-//   |<------------------------------>|            on-smaller-than-large
-//   |         .     |<------->|      |            on-small
-//   |         .     |<-------------------------   on-larger-than-tiny
-//   |         .     |         |<---->|            on-medium
-//   |         .     |         |<---------------   on-larger-than-mobile
-//   |         .     |         |      |<--------   on-large
-//   |<------->.     |         |      |            Smallest device
+$smallest-large-device-em: #{math.div(
+    media.$largest-medium-device-px + 1,
+    typography.$relative-1rem-px
+  )}em;
+$largest-medium-device-em: #{math.div(
+    media.$largest-medium-device-px,
+    typography.$relative-1rem-px
+  )}em;
+$smallest-medium-device-em: #{math.div(
+    media.$largest-small-device-px + 1,
+    typography.$relative-1rem-px
+  )}em;
+$largest-small-device-em: #{math.div(
+    media.$largest-small-device-px,
+    typography.$relative-1rem-px
+  )}em;
+$smallest-small-device-em: #{math.div(
+    media.$largest-tiny-device-px + 1,
+    typography.$relative-1rem-px
+  )}em;
+$largest-tiny-device-em: #{math.div(
+    media.$largest-tiny-device-px,
+    typography.$relative-1rem-px
+  )}em;
 
+$media-large: "(min-width: #{$smallest-large-device-em})";
+$media-lt-large: "(max-width: #{$largest-medium-device-em})";
+$media-medium: "(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})";
+$media-gt-mobile: "(min-width: #{$smallest-medium-device-em})";
+$media-mobile: "(max-width: #{$largest-small-device-em})";
+$media-small: "(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})";
+$media-gt-tiny: "(min-width: #{$smallest-small-device-em})";
+$media-tiny: "(max-width: #{$largest-tiny-device-em})";
+
+// https://nationalarchives.github.io/design-system/styles/media/#media-queries
 @mixin on-large() {
-  @media #{media.$media-large} {
+  @media #{$media-large} {
     @content;
   }
 }
 
 @mixin on-medium() {
-  @media #{media.$media-medium} {
+  @media #{$media-medium} {
     @content;
   }
 }
 
 @mixin on-small() {
-  @media #{media.$media-small} {
+  @media #{$media-small} {
     @content;
   }
 }
 
 @mixin on-tiny() {
-  @media #{media.$media-tiny} {
+  @media #{$media-tiny} {
     @content;
   }
 }
 
 @mixin on-larger-than-mobile() {
-  @media #{media.$media-gt-mobile} {
+  @media #{$media-gt-mobile} {
     @content;
   }
 }
 
 @mixin on-larger-than-tiny() {
-  @media #{media.$media-gt-tiny} {
+  @media #{$media-gt-tiny} {
     @content;
   }
 }
 
 @mixin on-smaller-than-large() {
-  @media #{media.$media-lt-large} {
+  @media #{$media-lt-large} {
     @content;
   }
 }
 
 @mixin on-mobile() {
-  @media #{media.$media-mobile} {
+  @media #{$media-mobile} {
     @content;
   }
 }

package/nationalarchives/tools/_spacing.scss

@@ -1,9 +1,15 @@
 @use "sass:map";
+@use "sass:math";
 @use "../variables/spacing";
+@use "../variables/typography";
 @use "../tools/media";
 
+@function space($size) {
+  @return #{$size * spacing.$spacing-unit-px}px;
+}
+
 %space-above {
-  margin-top: 2rem;
+  margin-top: space(2);
 
   &:first-child {
     margin-top: 0;
@@ -11,7 +17,7 @@
 }
 
 %space-only-above {
-  margin: 2rem 0 0;
+  margin: #{space(2)} 0 0;
 
   &:first-child {
     margin-top: 0;
@@ -26,14 +32,6 @@
   }
 }
 
-@function space($size) {
-  @return map.get(spacing.$spacing, $size);
-}
-
-@function space-mobile($size) {
-  @return map.get(spacing.$spacing-mobile, $size);
-}
-
 @mixin no-spacing-generator($suffix: "") {
   @if $suffix != "" {
     $suffix: "-" + $suffix;
@@ -66,7 +64,7 @@
       @each $size, $amount in spacing.$spacing {
         @if $direction == all {
           .tna-\!--#{$property}-#{$size} {
-            #{$property}: #{$amount} !important;
+            #{$property}: #{space($amount)} !important;
           }
         } @else {
           $combined-direction: "";
@@ -78,11 +76,11 @@
           @if $combined-direction {
             .tna-\!--#{$property}-#{$direction}-#{$size},
             .tna-\!--#{$property}-#{$combined-direction}-#{$size} {
-              #{$property}-#{$direction}: #{$amount} !important;
+              #{$property}-#{$direction}: #{space($amount)} !important;
             }
           } @else {
             .tna-\!--#{$property}-#{$direction}-#{$size} {
-              #{$property}-#{$direction}: #{$amount} !important;
+              #{$property}-#{$direction}: #{space($amount)} !important;
             }
           }
         }
@@ -96,7 +94,7 @@
         @each $size, $amount in spacing.$spacing-mobile {
           @if $direction == all {
             .tna-\!--#{$property}-#{$size} {
-              #{$property}: #{$amount} !important;
+              #{$property}: #{space($amount)} !important;
             }
           } @else {
             $combined-direction: "";
@@ -108,11 +106,11 @@
             @if $combined-direction {
               .tna-\!--#{$property}-#{$direction}-#{$size},
               .tna-\!--#{$property}-#{$combined-direction}-#{$size} {
-                #{$property}-#{$direction}: #{$amount} !important;
+                #{$property}-#{$direction}: #{space($amount)} !important;
               }
             } @else {
               .tna-\!--#{$property}-#{$direction}-#{$size} {
-                #{$property}-#{$direction}: #{$amount} !important;
+                #{$property}-#{$direction}: #{space($amount)} !important;
               }
             }
           }

package/nationalarchives/tools/_typography.scss

@@ -1,15 +1,20 @@
 @use "sass:math";
-@use "colour";
 @use "../variables/typography";
+@use "colour";
+@use "media";
 
-@mixin relative-font-size($fontSizePx) {
-  font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;
+@mixin relative-font-size($font-size-px) {
+  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;
 }
 
 @mixin main-font-weight {
   font-weight: typography.$main-font-weight;
 }
 
+@mixin main-font-weight-medium {
+  font-weight: typography.$main-font-weight-medium;
+}
+
 @mixin main-font-weight-bold {
   font-weight: typography.$main-font-weight-bold;
 }
@@ -46,10 +51,53 @@
   @include detail-font;
   @include relative-font-size(14);
   text-transform: uppercase;
-  line-height: #{math.div(typography.$relative-1rem-px, 14)};
+  line-height: 1.1;
 }
 
 @mixin interacted-text-decoration {
   text-decoration: underline;
   text-decoration-thickness: typography.$interactive-text-decoration-thickness;
 }
+
+@mixin heading-generator(
+  $font-size-default,
+  $font-size-medium,
+  $font-size-small,
+  $font-size-tiny,
+  $line-height
+) {
+  @include relative-font-size($font-size-default);
+  line-height: $line-height;
+
+  $small-and-tiny-identical: $font-size-small == $font-size-tiny;
+  $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and
+    $small-and-tiny-identical;
+  $all-identical: $font-size-default == $font-size-medium and
+    $medium-small-and-tiny-identical and $small-and-tiny-identical;
+
+  @if $all-identical != true {
+    @if $medium-small-and-tiny-identical != true {
+      @include media.on-medium {
+        @include relative-font-size($font-size-medium);
+      }
+
+      @if $small-and-tiny-identical != true {
+        @include media.on-small {
+          @include relative-font-size($font-size-small);
+        }
+
+        @include media.on-tiny {
+          @include relative-font-size($font-size-tiny);
+        }
+      } @else {
+        @include media.on-mobile {
+          @include relative-font-size($font-size-small);
+        }
+      }
+    } @else {
+      @include media.on-smaller-than-large {
+        @include relative-font-size($font-size-medium);
+      }
+    }
+  }
+}

package/nationalarchives/utilities/_a11y.scss

@@ -20,10 +20,10 @@
 
   background-color: transparent !important;
 
-  &::before,
-  &::after {
-    content: "\00a0";
-  }
+  // &::before,
+  // &::after {
+  //   content: "\00a0";
+  // }
 }
 
 *:focus {
@@ -36,7 +36,8 @@
   @include a11y.active-outline;
 }
 
-.tna-\!--no-focus-style {
+.tna-\!--no-focus-style,
+*[tabindex="-1"]:focus {
   &:focus {
     outline: none;
   }

package/nationalarchives/utilities/_areas.scss

@@ -3,22 +3,22 @@
 @use "../tools/spacing";
 
 .tna-section {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
+  padding-top: spacing.space(3);
+  padding-bottom: spacing.space(3);
 
   @include media.on-mobile {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
+    padding-top: spacing.space(2);
+    padding-bottom: spacing.space(2);
   }
 }
 
 .tna-aside {
-  padding: 2rem;
+  padding: spacing.space(2);
 
   @include spacing.space-above;
 
   @include media.on-mobile {
-    padding: 1rem;
+    padding: spacing.space(1);
   }
 
   @include colour.on-high-contrast {
@@ -26,6 +26,6 @@
   }
 
   &--tight {
-    padding: 1rem;
+    padding: spacing.space(1);
   }
 }

package/nationalarchives/utilities/_colour.scss

@@ -1,15 +1,15 @@
 @use "../tools/colour";
 
-// :root {
-//   @include colour.colour-css-vars;
-// }
-
 .tna-template {
   @include colour.colour-background("page-background");
 
-  &--system-theme {
+  &--system-theme,
+  &--light-theme {
     @include colour.colour-css-vars;
+    // @include colour.light;
+  }
 
+  &--system-theme {
     @media (prefers-color-scheme: dark) {
       @include colour.colour-css-vars-dark;
     }
@@ -27,9 +27,9 @@
     }
   }
 
-  &--light-theme {
-    @include colour.colour-css-vars;
-  }
+  // &--light-theme {
+  //   @include colour.colour-css-vars;
+  // }
 
   &--dark-theme {
     @include colour.colour-css-vars-dark;
@@ -48,30 +48,56 @@
   }
 
   &--yellow-accent {
-    @include colour.accent-css-vars("yellow");
+    --accent-background: #{colour.brand-colour("yellow")} !important;
+    --accent-background-light: #{colour.brand-colour("cream")} !important;
+    // --accent-font-base: #{colour.brand-colour("black")} !important;
+    // --accent-font-dark: #{colour.brand-colour("black")} !important;
+    // --accent-font-light: #{colour.brand-colour("black", 0.7)} !important;
+    // --accent-icon-light: #{colour.brand-colour("black", 0.45)} !important;
+    // --accent-link: #{colour.brand-colour("black")} !important;
+    // --accent-link-visited: #{colour.brand-colour("black")} !important;
+    // --accent-keyline: #{colour.brand-colour("black", 0.5)} !important;
+    // --accent-keyline-dark: #{colour.brand-colour("black", 0.8)} !important;
+    --button-accent-background: #{colour.brand-colour("yellow")} !important;
+  }
+
+  &--pink-accent,
+  &--orange-accent,
+  &--green-accent,
+  &--blue-accent {
+    --accent-font-base: #{colour.brand-colour("white")} !important;
+    --accent-font-dark: #{colour.brand-colour("white")} !important;
+    --accent-font-light: #{colour.brand-colour("white", 0.7)} !important;
+    --accent-icon-light: #{colour.brand-colour("white", 0.45)} !important;
+    --accent-link: #{colour.brand-colour("white")} !important;
+    --accent-link-visited: #{colour.brand-colour("white")} !important;
+    --accent-keyline: #{colour.brand-colour("white", 0.5)} !important;
+    --accent-keyline-dark: #{colour.brand-colour("white", 0.8)} !important;
+    --button-accent-text: #{colour.brand-colour("white")} !important;
   }
 
   &--pink-accent {
-    @include colour.accent-css-vars("pink");
+    --accent-background: #{colour.brand-colour("maroon")} !important;
+    --accent-background-light: #{colour.brand-colour("pastel-pink")} !important;
+    --button-accent-background: #{colour.brand-colour("maroon")} !important;
   }
 
   &--orange-accent {
-    @include colour.accent-css-vars("orange");
+    --accent-background: #{colour.brand-colour("chestnut")} !important;
+    --accent-background-light: #{colour.brand-colour("pastel-orange")} !important;
+    --button-accent-background: #{colour.brand-colour("chestnut")} !important;
   }
 
   &--green-accent {
-    @include colour.accent-css-vars("green");
+    --accent-background: #{colour.brand-colour("forest")} !important;
+    --accent-background-light: #{colour.brand-colour("pastel-green")} !important;
+    --button-accent-background: #{colour.brand-colour("forest")} !important;
   }
 
   &--blue-accent {
-    @include colour.accent-css-vars("blue");
-  }
-
-  @media (prefers-reduced-motion) {
-    * {
-      animation: none !important;
-      transition: none !important;
-    }
+    --accent-background: #{colour.brand-colour("navy")} !important;
+    --accent-background-light: #{colour.brand-colour("pastel-blue")} !important;
+    --button-accent-background: #{colour.brand-colour("navy")} !important;
   }
 }
 

package/nationalarchives/utilities/_columns.scss

@@ -1,8 +1,8 @@
+@use "../tools/grid";
 @use "../tools/media";
-@use "../variables/grid";
 
 .tna-columns {
-  column-gap: grid.$gutter-width;
+  column-gap: grid.gutter-width();
 
   &--2 {
     column-count: 2;
@@ -13,7 +13,7 @@
   }
 
   @include media.on-tiny {
-    column-gap: grid.$gutter-width-tiny;
+    column-gap: grid.gutter-width-tiny();
   }
 
   @include media.on-small {

package/nationalarchives/utilities/_forms.scss

@@ -15,7 +15,7 @@ select {
     @include spacing.space-above;
 
     &--error {
-      padding-left: 1rem;
+      padding-left: spacing.space(1);
 
       @include colour.thick-keyline-error(left);
     }
@@ -32,7 +32,7 @@ select {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 0.5rem;
+    gap: spacing.space(0.5);
   }
 
   &__group--inline,
@@ -50,7 +50,7 @@ select {
   }
 
   &__legend {
-    margin-bottom: 0.5rem;
+    margin-bottom: spacing.space(0.5);
   }
 
   &__heading {

package/nationalarchives/utilities/_lists.scss

@@ -5,8 +5,8 @@
 
 .tna-ul,
 .tna-ol {
-  margin: 1rem 0 0;
-  padding: 0 0 0 2rem;
+  margin: spacing.space(1) 0 0;
+  padding: 0 0 0 spacing.space(2);
 
   &:first-child {
     margin-top: 0;
@@ -37,7 +37,7 @@
   }
 
   dd {
-    padding-left: 1rem;
+    padding-left: spacing.space(1);
   }
 
   &.tna-dl--plain {
@@ -82,7 +82,7 @@
   dt,
   dd {
     margin: 0;
-    padding: 0.5rem 1rem;
+    padding: spacing.space(0.5) spacing.space(1);
 
     position: relative;
 
@@ -128,7 +128,7 @@
 
         position: absolute;
         top: 50%;
-        left: 1rem;
+        left: spacing.space(1);
 
         @include colour.colour-font("icon-light");
         text-align: left;
@@ -140,17 +140,17 @@
 
   &--icon-padding#{&}--plain {
     dt {
-      padding-left: 2rem !important;
+      padding-left: spacing.space(2) !important;
 
       .fa-solid {
-        margin-top: -0.25rem;
+        margin-top: -#{spacing.space(0.25)};
 
         left: 0;
       }
     }
 
     dd {
-      padding-left: 2rem;
+      padding-left: spacing.space(2);
     }
   }
 

package/nationalarchives/utilities/_reset.scss

@@ -3,6 +3,11 @@
 * {
   margin: 0;
   padding: 0;
+
+  @media (prefers-reduced-motion) {
+    animation: none !important;
+    transition: none !important;
+  }
 }
 
 img,

package/nationalarchives/utilities/_tables.scss

@@ -1,10 +1,10 @@
 @use "sass:math";
 @use "sass:selector";
 @use "../tools/colour";
+@use "../tools/grid";
 @use "../tools/media";
 @use "../tools/spacing";
 @use "../tools/typography";
-@use "../variables/grid";
 
 .tna-table {
   width: 100%;
@@ -19,7 +19,7 @@
   }
 
   &__caption {
-    padding: 1rem 0;
+    padding: spacing.space(1) 0;
 
     caption-side: bottom;
 
@@ -50,7 +50,7 @@
 
   &__header,
   &__cell {
-    padding: 0.25rem 1rem;
+    padding: spacing.space(0.25) spacing.space(1);
 
     @include colour.colour-border("keyline", 1px, solid, bottom);
 
@@ -78,7 +78,7 @@
 
   p {
     + p {
-      margin-top: 0.25rem;
+      margin-top: spacing.space(0.25);
     }
   }
 }
@@ -86,18 +86,18 @@
 .tna-table-wrapper {
   width: 100%;
   @include spacing.space-above;
-  padding-left: grid.$gutter-width;
-  padding-right: grid.$gutter-width;
+  padding-left: grid.gutter-width();
+  padding-right: grid.gutter-width();
 
   position: relative;
-  left: -#{grid.$gutter-width};
+  left: -#{grid.gutter-width()};
 
   overflow: auto;
 
   @include media.on-tiny {
-    padding-left: grid.$gutter-width-tiny;
-    padding-right: grid.$gutter-width-tiny;
+    padding-left: grid.gutter-width-tiny();
+    padding-right: grid.gutter-width-tiny();
 
-    left: -#{grid.$gutter-width-tiny};
+    left: -#{grid.gutter-width-tiny()};
   }
 }