@nationalarchives/frontend 0.1.59 → 0.1.60

package/nationalarchives/tools/_colour.scss

@@ -353,6 +353,8 @@
   --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-background: #{colour.brand-colour("black")} !important;
+  --button-text: #{colour.brand-colour("white")} !important;
   --button-accent-text: #{colour.brand-colour("white")} !important;
 }
 
@@ -361,8 +363,6 @@
   --accent-background-light: #{colour.brand-colour("light-grey")} !important;
   --accent-border: #{colour.brand-colour("black")} !important;
   --accent-list-marker: #{colour.brand-colour("black")} !important;
-  --button-background: #{colour.brand-colour("light-grey")} !important;
-  --button-text: #{colour.brand-colour("black")} !important;
   --button-accent-text: #{colour.brand-colour("black")} !important;
   --button-accent-background: #{colour.brand-colour("grey")} !important;
 }

package/nationalarchives/tools/_typography.scss

@@ -3,10 +3,15 @@
 @use "colour";
 @use "media";
 
-@mixin relative-font-size($font-size-px) {
+@mixin font-size($font-size-px) {
   font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;
 }
 
+@mixin relative-font-size($font-size-px) {
+  @warn "relative-font-size() will soon be deprecated in favour of font-size().";
+  @include font-size($font-size-px);
+}
+
 @mixin main-font-weight {
   font-weight: typography.$main-font-weight;
 }
@@ -49,7 +54,7 @@
 
 @mixin detail-font-small {
   @include detail-font;
-  @include relative-font-size(14);
+  @include font-size(14);
   line-height: 1.1;
   text-transform: uppercase;
 }
@@ -72,30 +77,30 @@
   $all-identical: $font-size-default == $font-size-medium and
     $medium-small-and-tiny-identical and $small-and-tiny-identical;
   line-height: $line-height;
-  @include relative-font-size($font-size-default);
+  @include font-size($font-size-default);
 
   @if $all-identical != true {
     @if $medium-small-and-tiny-identical != true {
       @include media.on-medium {
-        @include relative-font-size($font-size-medium);
+        @include font-size($font-size-medium);
       }
 
       @if $small-and-tiny-identical != true {
         @include media.on-small {
-          @include relative-font-size($font-size-small);
+          @include font-size($font-size-small);
         }
 
         @include media.on-tiny {
-          @include relative-font-size($font-size-tiny);
+          @include font-size($font-size-tiny);
         }
       } @else {
         @include media.on-mobile {
-          @include relative-font-size($font-size-small);
+          @include font-size($font-size-small);
         }
       }
     } @else {
       @include media.on-smaller-than-large {
-        @include relative-font-size($font-size-medium);
+        @include font-size($font-size-medium);
       }
     }
   }

package/nationalarchives/utilities/_forms.scss

@@ -86,7 +86,7 @@ select {
   &__hint {
     margin-top: 0;
 
-    @include typography.relative-font-size(16);
+    @include typography.font-size(16);
     @include colour.colour-font("font-light");
   }
 

package/nationalarchives/utilities/_tables.scss

@@ -19,7 +19,7 @@
 
     caption-side: bottom;
 
-    @include typography.relative-font-size(16);
+    @include typography.font-size(16);
   }
 
   &__head {

package/nationalarchives/utilities/_typography.scss

@@ -19,13 +19,11 @@
 
 .tna-template__body {
   color: inherit;
-  @include typography.relative-font-size(typographyVars.$body-font-size-px);
+  @include typography.font-size(typographyVars.$body-font-size-px);
   line-height: typographyVars.$body-line-height;
 
   @include media.on-mobile {
-    @include typography.relative-font-size(
-      typographyVars.$body-font-size-px-mobile
-    );
+    @include typography.font-size(typographyVars.$body-font-size-px-mobile);
   }
 }
 
@@ -68,9 +66,7 @@ a {
 }
 
 small {
-  @include typography.relative-font-size(
-    typographyVars.$body-font-size-px * 0.85
-  );
+  @include typography.font-size(typographyVars.$body-font-size-px * 0.85);
 }
 
 %chip {
@@ -376,7 +372,7 @@ small {
   &__citation {
     margin-top: spacing.space(1);
 
-    @include typography.relative-font-size(16);
+    @include typography.font-size(16);
 
     &::before {
       content: "\2014" " ";
@@ -394,11 +390,11 @@ small {
 .tna-large-paragraph {
   @include spacing.space-above;
 
-  @include typography.relative-font-size(22);
+  @include typography.font-size(22);
   @include colour.colour-font("font-dark");
 
   @include media.on-mobile {
-    @include typography.relative-font-size(20);
+    @include typography.font-size(20);
   }
 }
 
@@ -407,11 +403,11 @@ small {
 
   @include typography.detail-font;
   @include colour.colour-font("font-dark");
-  @include typography.relative-font-size(30);
+  @include typography.font-size(30);
   line-height: math.div(50, 30);
 
   @include media.on-mobile {
-    @include typography.relative-font-size(24);
+    @include typography.font-size(24);
     line-height: 2;
   }
 
@@ -425,6 +421,6 @@ small {
   }
 
   &--small {
-    @include typography.relative-font-size(24);
+    @include typography.font-size(24);
   }
 }

package/nationalarchives/variables/_a11y.scss

@@ -1,2 +1,3 @@
 $focus-outline-width: 5px !default;
 $focus-outline-offset: 2px !default;
+$focus-outline-padding: $focus-outline-width + $focus-outline-offset;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.59",
+  "version": "0.1.60",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -47,15 +47,15 @@
     "@babel/core": "^7.24.5",
     "@babel/preset-env": "^7.24.5",
     "@mdx-js/react": "^3.0.0",
-    "@storybook/addon-a11y": "^8.1.8",
-    "@storybook/addon-docs": "^8.1.8",
-    "@storybook/addon-essentials": "^8.1.8",
-    "@storybook/addon-interactions": "^8.1.8",
-    "@storybook/addon-links": "^8.1.8",
-    "@storybook/addon-mdx-gfm": "^8.1.8",
-    "@storybook/html": "^8.1.8",
-    "@storybook/html-webpack5": "^8.1.8",
-    "@storybook/test": "^8.1.8",
+    "@storybook/addon-a11y": "^8.1.10",
+    "@storybook/addon-docs": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-mdx-gfm": "^8.1.10",
+    "@storybook/html": "^8.1.10",
+    "@storybook/html-webpack5": "^8.1.10",
+    "@storybook/test": "^8.1.10",
     "@storybook/test-runner": "^0.18.2",
     "axe-playwright": "^2.0.1",
     "babel-jest": "^29.7.0",
@@ -73,10 +73,10 @@
     "node-self": "^1.0.2",
     "nunjucks": "^3.2.3",
     "prettier": "^3.0.1",
-    "sass": "^1.77.0",
+    "sass": "^1.77.6",
     "sass-loader": "^14.2.1",
     "simple-nunjucks-loader": "^3.2.0",
-    "storybook": "^8.1.8",
+    "storybook": "^8.1.10",
     "style-loader": "^4.0.0",
     "stylelint": "^16.5.0",
     "stylelint-config-standard-scss": "^13.0.0",