Merge branch 'main' of github.com:nationalarchives/tna-frontend into …

…feature/search-components

.stylelintrc

@@ -17,6 +17,15 @@
         "selector-class-pattern": null,
         "plugin/selector-bem-pattern": {
             "preset": "bem"
-        }
+        },
+        "color-function-notation": [
+            "modern",
+            {
+                "ignore": [
+                    "with-var-inside"
+                ]
+            }
+        ],
+        "scss/operator-no-newline-after": null
     }
 }

CHANGELOG.md

@@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `typography.$base-font-size-px` is now `typography.$relative-1rem-px`
 - `xl` and `l` headings are Supria Sans and `m` and `s` are Open Sans
 - Card heading size defaults to `s`
+- Updated app icons and favicon
 
 ### Deprecated
 ### Removed

src/nationalarchives/tools/_colour.scss

@@ -2,8 +2,8 @@
 @use "../variables/colour";
 @use "../tools/media";
 
-@function brand-colour($colour) {
-  @return map.get(colour.$colour-palette-brand, $colour);
+@function brand-colour($colour, $opacity: 1) {
+  @return colour.brand-colour($colour, $opacity);
 }
 
 @mixin colour-css-vars() {
@@ -37,22 +37,22 @@
     --accent-background-light: #{brand-colour("cream")} !important;
     --accent-font-base: #{brand-colour("black")} !important;
     --accent-font-dark: #{brand-colour("black")} !important;
-    --accent-font-light: #{rgba(brand-colour("black"), 0.7)} !important;
-    --accent-icon-light: #{rgba(brand-colour("black"), 0.45)} !important;
+    --accent-font-light: #{brand-colour("black", 0.7)} !important;
+    --accent-icon-light: #{brand-colour("black", 0.45)} !important;
     --accent-link: #{brand-colour("black")} !important;
     --accent-link-visited: #{brand-colour("black")} !important;
-    --accent-keyline: #{rgba(brand-colour("black"), 0.5)} !important;
-    --accent-keyline-dark: #{rgba(brand-colour("black"), 0.8)} !important;
+    --accent-keyline: #{brand-colour("black", 0.5)} !important;
+    --accent-keyline-dark: #{brand-colour("black", 0.8)} !important;
     --button-accent-background: #{brand-colour("yellow")} !important;
   } @else {
     --accent-font-base: #{brand-colour("white")} !important;
     --accent-font-dark: #{brand-colour("white")} !important;
-    --accent-font-light: #{rgba(brand-colour("white"), 0.7)} !important;
-    --accent-icon-light: #{rgba(brand-colour("white"), 0.45)} !important;
+    --accent-font-light: #{brand-colour("white", 0.7)} !important;
+    --accent-icon-light: #{brand-colour("white", 0.45)} !important;
     --accent-link: #{brand-colour("white")} !important;
     --accent-link-visited: #{brand-colour("white")} !important;
-    --accent-keyline: #{rgba(brand-colour("white"), 0.5)} !important;
-    --accent-keyline-dark: #{rgba(brand-colour("white"), 0.8)} !important;
+    --accent-keyline: #{brand-colour("white", 0.5)} !important;
+    --accent-keyline-dark: #{brand-colour("white", 0.8)} !important;
 
     @if $colour == "black" {
       // --accent: #{brand-colour("light-grey")} !important;