Darken tinted background, fix search field borders (#78)

CHANGELOG.md

@@ -10,13 +10,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 ### Changed
 
+- The default cookie banner colour is dark on light but can be changed with a `style` attribute or classes such as `tna-cookie-banner--contrast`
+- The card style of `boxed` has been changed to `contrast` in line with other components
+- The background tint colour on the light theme is slightly darker for better contrast with the page background
 - Set smaller minimum width for search field inputs
 - Added more space between the text and chevron in a heading link
 - Split out Font Awesome into a separate CSS file
 - Change the default `htmlLang` from `en-GB` to `en`
 
 ### Deprecated
 ### Removed
+
+- Removed option for `tna-search-field--no-border` - borders are dictated by the background colours and page theme
+
 ### Fixed
 ### Security
 

src/nationalarchives/components/search-field/search-field.scss

@@ -26,21 +26,25 @@
     border-width: forms.$form-field-border-width 0
       forms.$form-field-border-width forms.$form-field-border-width;
     border-radius: 0;
-  }
-
-  &__button {
-  }
 
-  &--no-border &__input {
-    margin-right: forms.$form-field-border-width;
+    .tna-template--dark-theme &,
+    .tna-background-contrast & {
+      margin-right: forms.$form-field-border-width;
 
-    border-width: 0;
+      border-width: 0;
+    }
 
-    @include colour.on-high-contrast-and-forced-colours {
+    .tna-template--dark-theme .tna-background-accent &,
+    .tna-template--dark-theme .tna-background-accent-light &,
+    .tna-template--light-theme.tna-template--high-contrast-theme
+      .tna-background-contrast
+      & {
       margin-right: 0;
 
-      border-width: forms.$form-field-border-width 0
-        forms.$form-field-border-width forms.$form-field-border-width;
+      border-width: forms.$form-field-border-width;
     }
   }
+
+  &__button {
+  }
 }

src/nationalarchives/lib/cookies.mjs

@@ -47,6 +47,8 @@ export default class Cookies {
   secure = true;
   /** @protected */
   policiesKey = "";
+  /** @protected */
+  events = null;
 
   /**
    * Create a cookie handler.

src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js

@@ -1068,7 +1068,6 @@ const Template = ({ theme, accent }) => {
                   headingSize: "l",
                   id: "search1",
                   name: "q",
-                  formGroupClasses: "tna-search-field--no-border",
                 },
               })}
               ${TextInput({

src/nationalarchives/variables/_colour.scss

@@ -49,7 +49,7 @@ LIGHT THEME (DEFAULT)
 */
 $colour-palette-default: (
   "page-background": #f4f4f4,
-  "background-tint": #ededed,
+  "background-tint": #e4e4e4,
   "font-base": $base-font,
   "font-dark": brand-colour("black"),
   "font-light": brand-colour("black", 0.58),