Apply more fixes for forced color mode (#128)

nationalarchives · May 30, 2024 · 3b264e2 · 3b264e2
1 parent 9846fa5
commit 3b264e2
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,9 +9,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 ### Changed
+
+- Theme selector is hidden when forced colors mode is enabled
+
 ### Deprecated
 ### Removed
 ### Fixed
+
+- Fixed styling for compound filters in forced colors mode
+
 ### Security
 
 ## [0.1.57](https://github.com/nationalarchives/tna-frontend/compare/v0.1.56...v0.1.57) - 2024-05-30

diff --git a/src/nationalarchives/components/compound-filters/compound-filters.scss b/src/nationalarchives/components/compound-filters/compound-filters.scss
@@ -55,7 +55,6 @@
     &::after {
       content: "";
 
-      width: 2px;
       height: 1rem;
       margin-left: -1px;
 
@@ -65,7 +64,7 @@
       top: 0.25rem;
       left: 50%;
 
-      @include colour.colour-background("font-base");
+      @include colour.colour-border("font-base", 2px, solid, left);
     }
 
     &::before {

diff --git a/src/nationalarchives/components/footer/footer.scss b/src/nationalarchives/components/footer/footer.scss
@@ -21,6 +21,10 @@
     .tna-button {
       @include typography.main-font-weight-bold;
     }
+
+    @include colour.on-forced-colours {
+      display: none;
+    }
   }
 
   &__theme-selector-button {

diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss
@@ -400,9 +400,10 @@
       height: auto;
 
       line-height: 2;
+      @include typography.relative-font-size(18);
+      @include typography.main-font-weight-bold;
 
       border: none;
-      @include typography.relative-font-size(18);
     }
 
     &__hamburger {

diff --git a/src/nationalarchives/components/header/header.scss b/src/nationalarchives/components/header/header.scss
@@ -424,8 +424,7 @@
         &,
         &:hover {
           &::after {
-            width: 0.5rem;
-            height: auto;
+            @include colour.colour-border("keyline", 0.5rem, solid, left);
           }
         }
       }
@@ -491,4 +490,20 @@
   @include colour.on-high-contrast-and-forced-colours {
     @include colour.colour-border("keyline", 1px, solid, bottom);
   }
+
+  @include colour.on-forced-colours {
+    &__navigation-toggle-button {
+      height: auto;
+
+      line-height: 2;
+      @include typography.relative-font-size(18);
+      @include typography.main-font-weight-bold;
+
+      border: none;
+    }
+
+    &__hamburger {
+      display: none;
+    }
+  }
 }
diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss
@@ -350,6 +350,7 @@
 %black-accent {
   --accent-background: #{colour.brand-colour("black")} !important;
   --accent-background-light: #{colour.brand-colour("light-grey")} !important;
+  --accent-border: #{colour.brand-colour("black")} !important;
   --button-accent-text: #{colour.brand-colour("black")} !important;
   --button-accent-background: #{colour.brand-colour("grey")} !important;
 }