@nationalarchives/frontend 0.2.11 → 0.2.13

package/nationalarchives/utilities/typography/_index.scss

@@ -54,6 +54,7 @@ a {
   }
 
   &:hover,
+  &:focus-visible,
   &:active {
     @include typography.interacted-text-decoration;
   }
@@ -85,7 +86,8 @@ small {
   @at-root #{selector.unify("a", &)} {
     text-decoration: underline;
 
-    &:hover {
+    &:hover,
+    &:focus-visible {
       @include typography.interacted-text-decoration;
 
       .fa-solid {
@@ -464,7 +466,8 @@ small {
   a {
     text-decoration-thickness: 1.5px;
 
-    &:hover {
+    &:hover,
+    &:focus-visible {
       @include typography.interacted-text-decoration;
     }
   }

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.11",
+  "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.6",
-    "@storybook/addon-docs": "^8.2.6",
-    "@storybook/addon-essentials": "^8.2.6",
-    "@storybook/addon-interactions": "^8.2.6",
-    "@storybook/addon-links": "^8.2.6",
-    "@storybook/addon-mdx-gfm": "^8.2.6",
-    "@storybook/html": "^8.2.6",
-    "@storybook/html-webpack5": "^8.2.6",
-    "@storybook/test": "^8.2.6",
+    "@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": "^5.1.0",
+    "diff": "^7.0.0",
     "eslint": "^8.52.0",
     "eslint-plugin-storybook": "^0.8.0",
     "glob": "^11.0.0",
@@ -74,9 +74,9 @@
     "nunjucks": "^3.2.3",
     "prettier": "^3.0.1",
     "sass": "^1.77.6",
-    "sass-loader": "^14.2.1",
+    "sass-loader": "^16.0.1",
     "simple-nunjucks-loader": "^3.2.0",
-    "storybook": "^8.2.6",
+    "storybook": "^8.3.0",
     "style-loader": "^4.0.0",
     "stylelint": "^16.8.1",
     "stylelint-config-standard-scss": "^13.0.0",