@nationalarchives/frontend 0.16.0 → 0.17.0

package/nationalarchives/tools/_colour.scss

@@ -141,77 +141,80 @@ $base-colours: (
   fill: colour-var($colour) if($important, !important, null);
 }
 
-@mixin thick-keyline($direction: "") {
+@mixin thick-keyline($direction: "", $veryThick: false) {
+  $border-width: borders.$thick-border-width;
+  @if $veryThick {
+    $border-width: borders.$very-thick-border-width;
+  }
   @if $direction != "" {
-    @include colour-border(
-      "keyline",
-      borders.$thick-border-width,
-      solid,
-      $direction
-    );
+    @include colour-border("keyline", $border-width, solid, $direction);
   } @else {
-    @include colour-border("keyline", borders.$thick-border-width, solid);
+    @include colour-border("keyline", $border-width, solid);
   }
 }
 
-@mixin thick-keyline-dark($direction: "") {
+@mixin thick-keyline-dark($direction: "", $veryThick: false) {
+  $border-width: borders.$thick-border-width;
+  @if $veryThick {
+    $border-width: borders.$very-thick-border-width;
+  }
   @if $direction != "" {
-    @include colour-border(
-      "keyline-dark",
-      borders.$thick-border-width,
-      solid,
-      $direction
-    );
+    @include colour-border("keyline-dark", $border-width, solid, $direction);
   } @else {
-    @include colour-border("keyline-dark", borders.$thick-border-width, solid);
+    @include colour-border("keyline-dark", $border-width, solid);
   }
 }
 
-@mixin thick-keyline-accent($direction: "") {
+@mixin thick-keyline-accent($direction: "", $veryThick: false) {
+  $border-width: borders.$thick-border-width;
+  @if $veryThick {
+    $border-width: borders.$very-thick-border-width;
+  }
   @if $direction != "" {
-    @include colour-border(
-      "accent-border",
-      borders.$thick-border-width,
-      solid,
-      $direction
-    );
+    @include colour-border("accent-border", $border-width, solid, $direction);
   } @else {
-    @include colour-border("accent-border", borders.$thick-border-width, solid);
+    @include colour-border("accent-border", $border-width, solid);
   }
 }
 
-@mixin thick-keyline-error($direction: "") {
+@mixin thick-keyline-error($direction: "", $veryThick: false) {
+  $border-width: borders.$thick-border-width;
+  @if $veryThick {
+    $border-width: borders.$very-thick-border-width;
+  }
   @if $direction != "" {
     @include colour-border(
       "form-error-border",
-      borders.$thick-border-width,
+      $border-width,
       solid,
       $direction
     );
   } @else {
-    @include colour-border(
-      "form-error-border",
-      borders.$thick-border-width,
-      solid
-    );
+    @include colour-border("form-error-border", $border-width, solid);
   }
 }
 
-@mixin thick-keyline-brand($direction: "", $brandColour) {
+@mixin thick-keyline-brand($direction: "", $brandColour, $veryThick: false) {
+  $border-width: borders.$thick-border-width;
+  @if $veryThick {
+    $border-width: borders.$very-thick-border-width;
+  }
   @if $direction != "" {
-    border-#{$direction}: borders.$thick-border-width
-      #{brand-colour($brandColour)}
-      solid;
+    border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;
   } @else {
-    border: borders.$thick-border-width #{brand-colour($brandColour)} solid;
+    border: $border-width #{brand-colour($brandColour)} solid;
   }
 }
 
-@mixin thick-keyline-transparent($direction: "") {
+@mixin thick-keyline-transparent($direction: "", $veryThick: false) {
+  $border-width: borders.$thick-border-width;
+  @if $veryThick {
+    $border-width: borders.$very-thick-border-width;
+  }
   @if $direction != "" {
-    border-#{$direction}: borders.$thick-border-width transparent solid;
+    border-#{$direction}: $border-width transparent solid;
   } @else {
-    border: borders.$thick-border-width transparent solid;
+    border: $border-width transparent solid;
   }
 }
 

package/nationalarchives/utilities/typography/_index.scss

@@ -23,6 +23,10 @@
   @include typography.font-size(typographyVars.$body-font-size-px);
   line-height: typographyVars.$body-line-height;
 
+  @include media.on-medium {
+    @include typography.font-size(typographyVars.$body-font-size-px-medium);
+  }
+
   @include media.on-mobile {
     @include typography.font-size(typographyVars.$body-font-size-px-mobile);
   }

package/nationalarchives/variables/_borders.scss

@@ -1,2 +1,3 @@
 $thick-border-width: 5px !default;
+$very-thick-border-width: 8px !default;
 $rounded-border-radius: 4px !default;

package/nationalarchives/variables/_typography.scss

@@ -23,7 +23,8 @@ $relative-1rem-px: 16; // 16px = 1rem
  */
 $use-local-fonts: false !default;
 
-$body-font-size-px: 18 !default;
+$body-font-size-px: 19 !default;
+$body-font-size-px-medium: 18 !default;
 $body-font-size-px-mobile: 17 !default;
 $body-line-height: 1.75 !default;
 
@@ -89,12 +90,12 @@ $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-font-size-medium: $heading-m-font-size-default !default;
+$heading-m-font-size-small: 21 !default;
+$heading-m-font-size-tiny: $heading-m-font-size-small !default;
 $heading-m-line-height: 1.6 !default;
 
-$heading-s-font-size-default: 18 !default;
+$heading-s-font-size-default: 19 !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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -57,16 +57,16 @@
     "@storybook/html": "^8.5.8",
     "@storybook/html-webpack5": "^8.5.8",
     "@storybook/test": "^8.5.8",
-    "@storybook/test-runner": "^0.21.0",
+    "@storybook/test-runner": "^0.22.0",
     "axe-playwright": "^2.0.3",
     "babel-jest": "^29.7.0",
-    "babel-loader": "^9.2.1",
+    "babel-loader": "^10.0.0",
     "chromatic": "^11.12.5",
-    "copy-webpack-plugin": "^12.0.2",
+    "copy-webpack-plugin": "^13.0.0",
     "css-loader": "^7.1.2",
     "diff": "^7.0.0",
     "eslint": "^8.57.1",
-    "eslint-plugin-storybook": "^0.11.1",
+    "eslint-plugin-storybook": "^0.12.0",
     "glob": "^11.0.0",
     "html-validate": "^9.1.3",
     "jest-environment-jsdom": "^29.7.0",