@nationalarchives/frontend 0.1.48 → 0.1.49

package/nationalarchives/utilities/_typography.scss

@@ -1,12 +1,11 @@
 @use "sass:math";
 @use "sass:selector";
+@use "../variables/assets";
+@use "../variables/typography" as typographyVars;
 @use "../tools/colour";
 @use "../tools/media";
 @use "../tools/spacing";
 @use "../tools/typography";
-@use "../variables/assets";
-@use "../variables/grid";
-@use "../variables/typography" as typographyVars;
 
 @if typographyVars.$use-local-fonts {
   @font-face {
@@ -14,7 +13,7 @@
     src: url("#{assets.$tna-font-path}/OpenSans-Regular.ttf");
     font-weight: typographyVars.$main-font-weight;
     font-style: normal;
-    // font-display: swap;
+    font-display: swap;
   }
 
   @font-face {
@@ -22,7 +21,7 @@
     src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf");
     font-weight: typographyVars.$main-font-weight-bold;
     font-style: normal;
-    // font-display: swap;
+    font-display: swap;
   }
 
   @font-face {
@@ -30,7 +29,7 @@
     src: url("#{assets.$tna-font-path}/RobotoMono-Regular.ttf");
     font-weight: typographyVars.$detail-font-weight;
     font-style: normal;
-    // font-display: swap;
+    font-display: swap;
   }
 
   @font-face {
@@ -38,7 +37,7 @@
     src: url("#{assets.$tna-font-path}/RobotoMono-Medium.ttf");
     font-weight: typographyVars.$detail-font-weight-bold;
     font-style: normal;
-    // font-display: swap;
+    font-display: swap;
   }
 } @else {
   @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&family=Roboto+Mono:wght@100..700&display=swap"); /* stylelint-disable-line */
@@ -47,7 +46,6 @@
 .tna-template {
   @include colour.colour-font("font-base");
   @include typography.main-font;
-  font-size: #{typographyVars.$relative-1rem-px}px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
@@ -76,7 +74,7 @@ p {
   @include spacing.space-above;
 
   + p {
-    margin-top: 1rem;
+    margin-top: spacing.space(1);
   }
 }
 
@@ -114,11 +112,11 @@ small {
 
 %chip-base {
   max-width: max-content;
-  padding: 0.125em 0.25rem;
+  padding: spacing.space(0.125) spacing.space(0.25);
 
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: spacing.space(0.5);
 
   @include colour.colour-font("font-base");
   @include typography.detail-font-small;
@@ -160,7 +158,7 @@ small {
     @include colour.colour-font("icon-light");
 
     @include colour.on-high-contrast {
-      padding-right: 0.5rem;
+      padding-right: spacing.space(0.5);
 
       color: inherit;
 
@@ -186,7 +184,7 @@ small {
 
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem 1.5rem;
+  gap: spacing.space(0.5) spacing.space(1.5);
 
   list-style: none;
 
@@ -205,7 +203,7 @@ small {
       display: inline-block;
 
       &::after {
-        padding-left: 0.5rem;
+        padding-left: spacing.space(0.5);
 
         display: inline-block;
 
@@ -216,7 +214,7 @@ small {
 
       &:hover {
         &::after {
-          padding-left: 0.75rem;
+          padding-left: spacing.space(0.75);
         }
       }
     }
@@ -231,77 +229,65 @@ small {
   @extend %heading;
 
   @include typography.heading-font;
-  @include typography.relative-font-size(64);
-  line-height: 1.1;
-
-  @include media.on-medium {
-    @include typography.relative-font-size(48);
-  }
-
-  @include media.on-mobile {
-    @include typography.relative-font-size(36);
-  }
+  @include typography.heading-generator(
+    typographyVars.$heading-xl-font-size-default,
+    typographyVars.$heading-xl-font-size-medium,
+    typographyVars.$heading-xl-font-size-small,
+    typographyVars.$heading-xl-font-size-tiny,
+    typographyVars.$heading-xl-line-height
+  );
 }
 
 %heading-l {
   @extend %heading;
 
   @include typography.heading-font;
-  @include typography.relative-font-size(36);
-  line-height: 1.3;
-
-  @include media.on-medium {
-    @include typography.relative-font-size(30);
-  }
-
-  @include media.on-small {
-    @include typography.relative-font-size(28);
-  }
-
-  @include media.on-tiny {
-    @include typography.relative-font-size(25);
-  }
+  @include typography.heading-generator(
+    typographyVars.$heading-l-font-size-default,
+    typographyVars.$heading-l-font-size-medium,
+    typographyVars.$heading-l-font-size-small,
+    typographyVars.$heading-l-font-size-tiny,
+    typographyVars.$heading-l-line-height
+  );
 }
 
 %heading-m {
   @extend %heading;
 
   @include typography.main-font-weight-bold;
-  @include typography.relative-font-size(22);
-  line-height: 1.6;
-
-  @include media.on-medium {
-    @include typography.relative-font-size(21);
-  }
-
-  @include media.on-small {
-    @include typography.relative-font-size(20);
-  }
-
-  @include media.on-tiny {
-    @include typography.relative-font-size(19);
-  }
+  @include typography.heading-generator(
+    typographyVars.$heading-m-font-size-default,
+    typographyVars.$heading-m-font-size-medium,
+    typographyVars.$heading-m-font-size-small,
+    typographyVars.$heading-m-font-size-tiny,
+    typographyVars.$heading-m-line-height
+  );
 }
 
 %heading-s {
   @extend %heading;
 
   @include typography.main-font-weight-bold;
-  @include typography.relative-font-size(18);
-  line-height: 1.6;
+  @include typography.heading-generator(
+    typographyVars.$heading-s-font-size-default,
+    typographyVars.$heading-s-font-size-medium,
+    typographyVars.$heading-s-font-size-small,
+    typographyVars.$heading-s-font-size-tiny,
+    typographyVars.$heading-s-line-height
+  );
 }
 
 %headings-and-heading-groups {
   @include spacing.space-above;
   margin-bottom: 0;
-  padding: 1rem 0 0;
+  padding: spacing.space(1) 0 0;
 
   &:first-child {
     padding-top: 0;
   }
 
   + p {
-    margin-top: 1rem;
+    margin-top: spacing.space(1);
   }
 }
 
@@ -336,7 +322,7 @@ small {
   }
 
   &__supertitle {
-    margin: 0 0 0.25rem;
+    margin: 0 0 spacing.space(0.25);
 
     @extend %chip-base;
 
@@ -377,7 +363,7 @@ small {
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
-  padding: 1rem 1rem 1rem 2rem;
+  padding: spacing.space(1) spacing.space(1) spacing.space(1) spacing.space(2);
 
   @include colour.thick-keyline-accent(left);
 
@@ -389,7 +375,7 @@ small {
     @include typography.relative-font-size(16);
 
     .tna-blockquote & {
-      margin: 1rem 0 0;
+      margin: spacing.space(1) 0 0;
     }
 
     &::before {
@@ -399,7 +385,9 @@ small {
   }
 
   @include media.on-tiny {
-    padding: 0.5rem 0.5rem 0.5rem 1rem;
+    padding: spacing.space(0.5) spacing.space(0.5) spacing.space(0.5) #{spacing.space(
+        1
+      )};
   }
 }
 

package/nationalarchives/variables/_colour.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
 
 $colour-palette-brand: (
-  "black": #000,
+  "black": #010101,
   "grey": #8c9694,
   "light-grey": #d9d9d6,
   "white": #fff,
@@ -37,7 +37,7 @@ $colour-palette-brand: (
   @return hex-to-rgb(map.get($colour-palette-brand, $colour), $opacity);
 }
 
-$dark-grey: #26262a;
+$dark-grey: #26262a !default;
 $base-font: #343338 !default;
 $link-colour: #0062a8 !default;
 $link-colour-visited: #4c2c92 !default;
@@ -80,7 +80,7 @@ $colour-palette-default: (
   "contrast-button-background": brand-colour("white"),
   "contrast-button-hover-text": brand-colour("white"),
   "contrast-button-hover-background": brand-colour("black"),
-  "accent-background": #111,
+  "accent-background": #101112,
   "accent-background-light": #ededed,
   "accent-font-base": brand-colour("white"),
   "accent-font-dark": brand-colour("white"),
@@ -102,8 +102,8 @@ DARK THEME
 $colour-palette-dark: map.merge(
   $colour-palette-default,
   (
-    "page-background": #222,
-    "background-tint": #333,
+    "page-background": #212223,
+    "background-tint": #323334,
     "font-base": brand-colour("white", 0.95),
     "font-dark": brand-colour("white"),
     "font-light": brand-colour("white", 0.51),
@@ -121,7 +121,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": #111,
+    "contrast-background": #101112,
     "contrast-link-visited":
       map.get($colour-palette-default, "contrast-link-visited"),
   )

package/nationalarchives/variables/_grid.scss

@@ -1,7 +1,7 @@
-$largest-container-width: 80rem !default;
+$largest-container-width: 1280px !default;
 
-$gutter-width: 2rem !default;
-$gutter-width-tiny: 1rem !default;
+$gutter-width: 2 !default;
+$gutter-width-tiny: 1 !default;
 
 $column-count: 12;
 $column-count-medium: 6;

package/nationalarchives/variables/_media.scss

@@ -1,40 +1,3 @@
-@use "sass:math";
-@use "./typography";
-
 $largest-medium-device-px: 1024 !default;
 $largest-small-device-px: 768 !default;
 $largest-tiny-device-px: 480 !default;
-
-$smallest-large-device-em: #{math.div(
-    $largest-medium-device-px + 1,
-    typography.$relative-1rem-px
-  )}em;
-$largest-medium-device-em: #{math.div(
-    $largest-medium-device-px,
-    typography.$relative-1rem-px
-  )}em;
-$smallest-medium-device-em: #{math.div(
-    $largest-small-device-px + 1,
-    typography.$relative-1rem-px
-  )}em;
-$largest-small-device-em: #{math.div(
-    $largest-small-device-px,
-    typography.$relative-1rem-px
-  )}em;
-$smallest-small-device-em: #{math.div(
-    $largest-tiny-device-px + 1,
-    typography.$relative-1rem-px
-  )}em;
-$largest-tiny-device-em: #{math.div(
-    $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})";

package/nationalarchives/variables/_spacing.scss

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

package/nationalarchives/variables/_typography.scss

@@ -1,12 +1,10 @@
-@use "sass:math";
+$relative-1rem-px: 16; // 16px = 1rem
 
 $use-local-fonts: false !default;
 
-$relative-1rem-px: 16; // 16px is always 1rem
-
 $body-font-size-px: 18 !default;
 $body-font-size-px-mobile: 17 !default;
-$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777
+$body-line-height: 1.75 !default;
 
 $interactive-text-decoration-thickness: 3.5px !default;
 
@@ -21,3 +19,27 @@ $heading-font-weight: 500 !default;
 $detail-font-family: "Roboto Mono", monospace !default;
 $detail-font-weight: 400 !default;
 $detail-font-weight-bold: 500 !default;
+
+$heading-xl-font-size-default: 64 !default;
+$heading-xl-font-size-medium: 48 !default;
+$heading-xl-font-size-small: 36 !default;
+$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;
+$heading-xl-line-height: 1.1 !default;
+
+$heading-l-font-size-default: 36 !default;
+$heading-l-font-size-medium: 30 !default;
+$heading-l-font-size-small: 28 !default;
+$heading-l-font-size-tiny: 25 !default;
+$heading-l-line-height: 1.3 !default;
+
+$heading-m-font-size-default: 22 !default;
+$heading-m-font-size-medium: 21 !default;
+$heading-m-font-size-small: 20 !default;
+$heading-m-font-size-tiny: 19 !default;
+$heading-m-line-height: 1.6 !default;
+
+$heading-s-font-size-default: 18 !default;
+$heading-s-font-size-medium: $heading-s-font-size-default !default;
+$heading-s-font-size-small: $heading-s-font-size-default !default;
+$heading-s-font-size-tiny: $heading-s-font-size-default !default;
+$heading-s-line-height: 1.6 !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.48",
+  "version": "0.1.49",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",