Add purple accent option

src/nationalarchives/tools/_colour.scss

@@ -462,6 +462,19 @@
   @extend %blue-accent;
 }
 
+%purple-accent {
+  --accent-background: #{colour.brand-colour("purpled")} !important;
+  --accent-background-light: #{colour.brand-colour("pastel-purple")} !important;
+  --accent-border: #{colour.brand-colour("purple")} !important;
+  --accent-list-marker: #{colour.brand-colour("purple")} !important;
+  --button-accented-background: #{colour.brand-colour("purpled")} !important;
+}
+
+@mixin purple-accent {
+  @extend %accent-lighter-text;
+  @extend %purple-accent;
+}
+
 @mixin on-high-contrast {
   @media (prefers-contrast: more) {
     @content;

src/nationalarchives/utilities/colour/_index.scss

@@ -46,6 +46,10 @@
   &--blue-accent {
     @include colour.blue-accent;
   }
+
+  &--purple-accent {
+    @include colour.purple-accent;
+  }
 }
 
 .tna-background {
@@ -100,4 +104,8 @@
   &-blue {
     @include colour.blue-accent;
   }
+
+  &-purple {
+    @include colour.purple-accent;
+  }
 }

src/nationalarchives/utilities/colour/colour-combinations.stories.js

@@ -19,6 +19,7 @@ const accents = [
   "tna-accent-yellow",
   "tna-accent-green",
   "tna-accent-blue",
+  "tna-accent-purple",
   "tna-accent-black",
 ];
 

src/nationalarchives/variables/_colour.scss

@@ -13,18 +13,21 @@ $colour-palette-brand: (
   "orange": #fd3f03,
   "green": #86bc25,
   "blue": #00b0ff,
+  "purple": #ca26d9,
 
   "brown": #654e37,
   "maroon": #9c193a,
   "chestnut": #8f3415,
   "forest": #00623b,
   "navy": #004c7e,
+  "purpled": #4f1655,
 
-  "cream": #f9f7e2,
   "pastel-pink": #fad3d4,
   "pastel-orange": #f9e1bc,
+  "cream": #f9f7e2,
   "pastel-green": #dde5d5,
   "pastel-blue": #d4e5ef,
+  "pastel-purple": #eed6f0,
 );
 
 @function hex-to-rgb($hex, $opacity: 1) {