@nationalarchives/frontend 0.2.12 → 0.2.13

package/nationalarchives/utilities/_reset.scss

@@ -40,4 +40,8 @@ textarea {
 hr {
   @include colour.colour-border("keyline", 0, solid);
   border-top-width: 1px;
+
+  &.tna-hr-dark {
+    @include colour.colour-border("keyline-dark");
+  }
 }

package/nationalarchives/utilities/tables/_index.scss

@@ -1,5 +1,6 @@
 @use "sass:math";
 @use "sass:selector";
+@use "../../tools/a11y";
 @use "../../tools/colour";
 @use "../../tools/grid";
 @use "../../tools/media";
@@ -23,6 +24,15 @@
     caption-side: bottom;
 
     @include typography.font-size(16);
+
+    &--scroll {
+      min-width: calc(320px - #{grid.gutter-width()});
+      max-width: calc(100vw - #{grid.gutter-width()});
+
+      &::after {
+        content: " (scroll to see more)";
+      }
+    }
   }
 
   &__head {
@@ -92,6 +102,14 @@
   position: relative;
   left: -#{grid.gutter-width()};
 
+  &[tabindex="0"] {
+    border-radius: 0.1px;
+
+    // &:active {
+    //   @include a11y.focus-outline;
+    // }
+  }
+
   @include media.on-tiny {
     padding-right: grid.gutter-width-tiny();
     padding-left: grid.gutter-width-tiny();

package/nationalarchives/variables/_colour.scss

@@ -3,6 +3,7 @@
 
 $colour-palette-brand: (
   "black": #010101,
+  "dark-grey": #26262a,
   "grey": #8c9694,
   "light-grey": #d9d9d6,
   "white": #fff,
@@ -40,11 +41,6 @@ $colour-palette-brand: (
   @return hex-to-rgb(map.get($colour-palette-brand, $colour), $opacity);
 }
 
-$dark-grey: #26262a !default;
-$base-font: #343338 !default;
-$link-colour: #005fa3 !default;
-$link-colour-visited: #4c2c92 !default;
-
 /*
 =========================================
 LIGHT THEME (DEFAULT)
@@ -53,15 +49,15 @@ LIGHT THEME (DEFAULT)
 $colour-palette-default: (
   "background": #f4f4f4,
   "background-tint": brand-colour("light-grey"),
-  "font-base": $base-font,
+  "font-base": #343338,
   "font-dark": brand-colour("black"),
   "font-light": brand-colour("black", 0.58),
-  "icon-light": hex-to-rgb($base-font, 0.45),
-  "link": $link-colour,
-  "link-visited": $link-colour-visited,
+  "icon-light": hex-to-rgb(#343338, 0.45),
+  "link": #005fa3,
+  "link-visited": #634abb,
   "focus-outline": brand-colour("blue"),
-  "keyline": hex-to-rgb($dark-grey, 0.25),
-  "keyline-dark": $dark-grey,
+  "keyline": brand-colour("dark-grey", 0.25),
+  "keyline-dark": brand-colour("dark-grey"),
   "input-foreground": brand-colour("black"),
   "input-background": brand-colour("white"),
   "input-border": brand-colour("black"),
@@ -78,8 +74,8 @@ $colour-palette-default: (
   "contrast-icon-light": brand-colour("white", 0.45),
   "contrast-link": brand-colour("white"),
   "contrast-link-visited": brand-colour("white"),
-  "contrast-keyline": brand-colour("white", 0.5),
-  "contrast-keyline-dark": brand-colour("white", 0.8),
+  "contrast-keyline": brand-colour("white", 0.3),
+  "contrast-keyline-dark": brand-colour("white", 0.6),
   "contrast-button-text": brand-colour("black"),
   "contrast-button-background": brand-colour("white"),
   "contrast-button-hover-text": brand-colour("white"),
@@ -94,7 +90,7 @@ $colour-palette-default: (
   "accent-icon-light": brand-colour("black", 0.45),
   "accent-link": brand-colour("black"),
   "accent-link-visited": brand-colour("black"),
-  "accent-keyline": brand-colour("black", 0.5),
+  "accent-keyline": brand-colour("black", 0.3),
   "accent-keyline-dark": brand-colour("black", 0.8),
   "accent-button-text": brand-colour("white"),
   "accent-button-background": brand-colour("black"),
@@ -122,7 +118,7 @@ $colour-palette-dark: map.merge(
     "link-visited": #a8f,
     "focus-outline": brand-colour("orange"),
     "keyline": brand-colour("white", 0.25),
-    "keyline-dark": brand-colour("white"),
+    "keyline-dark": brand-colour("white", 0.75),
     "input-foreground": brand-colour("white"),
     "input-background": brand-colour("black"),
     "input-border": brand-colour("white"),
@@ -151,16 +147,17 @@ $colour-palette-high-contrast: map.merge(
     "font-base": brand-colour("black"),
     "font-light": brand-colour("black"),
     "icon-light": brand-colour("black", 0.8),
-    "link": #34d,
-    "link-visited": #848,
+    "link": #202fbc,
+    "link-visited": #6a286b,
     "focus-outline": brand-colour("orange"),
-    "keyline": brand-colour("black"),
+    "keyline": brand-colour("black", 0.8),
     "keyline-dark": brand-colour("black"),
     "contrast-background": brand-colour("black"),
     "contrast-link": brand-colour("blue"),
     "contrast-font-light": brand-colour("white", 0.8),
     "contrast-link-visited": #a8f,
     "accent-font-light": brand-colour("black", 0.8),
+    "button-accented-background": #8f9997,
   )
 ) !default;
 
@@ -176,7 +173,10 @@ $colour-palette-high-contrast-dark: map.merge(
     "font-base": brand-colour("white"),
     "font-light": brand-colour("white"),
     "icon-light": brand-colour("white", 0.8),
-    "keyline": brand-colour("white"),
+    "link": #8fc7ff,
+    "link-visited": #ccb8ff,
+    "keyline": brand-colour("white", 0.8),
+    "keyline-dark": brand-colour("white"),
     "form-error-border": #ff6b6b,
     "form-error-text": #ff6b6b,
     "contrast-background": brand-colour("black"),
@@ -184,5 +184,6 @@ $colour-palette-high-contrast-dark: map.merge(
     "contrast-font-light": brand-colour("white", 0.8),
     "contrast-link-visited": #a8f,
     "accent-font-light": brand-colour("black", 0.8),
+    "button-accented-background": #8f9997,
   )
 ) !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -47,15 +47,15 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@mdx-js/react": "^3.0.0",
-    "@storybook/addon-a11y": "^8.2.9",
-    "@storybook/addon-docs": "^8.2.9",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/addon-mdx-gfm": "^8.2.9",
-    "@storybook/html": "^8.2.9",
-    "@storybook/html-webpack5": "^8.2.9",
-    "@storybook/test": "^8.2.9",
+    "@storybook/addon-a11y": "^8.3.0",
+    "@storybook/addon-docs": "^8.3.0",
+    "@storybook/addon-essentials": "^8.3.0",
+    "@storybook/addon-interactions": "^8.3.0",
+    "@storybook/addon-links": "^8.3.0",
+    "@storybook/addon-mdx-gfm": "^8.3.0",
+    "@storybook/html": "^8.3.0",
+    "@storybook/html-webpack5": "^8.3.0",
+    "@storybook/test": "^8.3.0",
     "@storybook/test-runner": "^0.19.1",
     "axe-playwright": "^2.0.1",
     "babel-jest": "^29.7.0",
@@ -63,7 +63,7 @@
     "chromatic": "^11.3.1",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.1",
-    "diff": "^6.0.0",
+    "diff": "^7.0.0",
     "eslint": "^8.52.0",
     "eslint-plugin-storybook": "^0.8.0",
     "glob": "^11.0.0",
@@ -76,7 +76,7 @@
     "sass": "^1.77.6",
     "sass-loader": "^16.0.1",
     "simple-nunjucks-loader": "^3.2.0",
-    "storybook": "^8.2.9",
+    "storybook": "^8.3.0",
     "style-loader": "^4.0.0",
     "stylelint": "^16.8.1",
     "stylelint-config-standard-scss": "^13.0.0",