Optimise header styles

nationalarchives · Oct 16, 2023 · d921ec9 · d921ec9
1 parent 204cdda
commit d921ec9
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 108 deletions.
diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss
@@ -94,7 +94,7 @@
   }
 
   .tna-background--accent &--accent {
-    @include colour.fixed;
+    @include colour.plain;
 
     @include colour.colour-background("page-background");
 

diff --git a/src/nationalarchives/components/header/header.scss b/src/nationalarchives/components/header/header.scss
@@ -47,10 +47,6 @@
 .tna-header {
   @include colour.invert;
 
-  color: colour.brand-colour("white");
-
-  background-color: colour.brand-colour("black");
-
   &__exit {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
@@ -148,22 +144,10 @@
 
     &:hover {
       text-decoration: none;
-    }
-
-    // &--href {
-    //   &:hover {
-    //       outline: 0.375rem #fff solid;
-    //       outline-offset: 1px;
-
-    //     // .tna-logo__background {
-    //     //   fill: #fff;
-    //     // }
 
-    //     // .tna-logo__foreground {
-    //     //   fill: #000;
-    //     // }
-    //   }
-    // }
+      @include colour.colour-outline("font-dark", 0.375rem, solid);
+      outline-offset: 1px;
+    }
   }
 
   .tna-logo {
@@ -173,18 +157,8 @@
     display: inline-block;
   }
 
-  &__logo-link--href:hover .tna-logo {
-    outline: 0.375rem #fff solid;
-    outline-offset: 1px;
-  }
-
-  &__logo-link--href:active .tna-logo,
-  &__logo-link--href:focus .tna-logo {
-    outline: none;
-  }
-
   .tna-logo__foreground {
-    fill: #fff;
+    @include colour.colour-fill("font-dark");
   }
 
   .tna-logo__background {
@@ -210,7 +184,7 @@
 
     display: block;
 
-    background-color: #fff;
+    @include colour.colour-background("font-dark");
 
     transition: height 1ms 200ms;
 
@@ -289,50 +263,6 @@
     }
   }
 
-  &--yellow,
-  &--pink,
-  &--orange,
-  &--green,
-  &--blue {
-    color: colour.brand-colour("black");
-
-    .tna-header__logo-link {
-      &:hover {
-        .tna-logo {
-          outline-color: #000;
-        }
-      }
-    }
-
-    .tna-logo__foreground {
-      fill: #000;
-    }
-
-    .tna-header__hamburger {
-      background-color: colour.brand-colour("black");
-    }
-  }
-
-  &--yellow {
-    background-color: colour.brand-colour("yellow");
-  }
-
-  &--pink {
-    background-color: colour.brand-colour("pink");
-  }
-
-  &--orange {
-    background-color: colour.brand-colour("orange");
-  }
-
-  &--green {
-    background-color: colour.brand-colour("green");
-  }
-
-  &--blue {
-    background-color: colour.brand-colour("blue");
-  }
-
   &__navigation {
     display: flex;
     flex-direction: column-reverse;
@@ -377,6 +307,11 @@
         @include typography.interacted-text-decoration;
       }
     }
+
+    .fa-solid,
+    .fa-brands {
+      margin-right: 0.375rem;
+    }
   }
 
   &__navigation-items {
@@ -520,7 +455,7 @@
 
     &__navigation-item-link {
       padding-right: gridVars.$gutter-width-tiny;
-      padding-left: gridVars.$gutter-width-tiny + 1rem;
+      padding-left: gridVars.$gutter-width-tiny + 0.5rem;
 
       display: block;
 
@@ -577,4 +512,8 @@
       line-height: 1.25;
     }
   }
+
+  &--accent {
+    @include colour.accent;
+  }
 }
diff --git a/src/nationalarchives/components/header/header.stories.js b/src/nationalarchives/components/header/header.stories.js
@@ -66,10 +66,12 @@ Standard.args = {
     {
       text: "Top item 2",
       href: "#/top-2",
+      icon: "phone",
     },
     {
       text: "Top item 3",
       href: "#/top-3",
+      brandIcon: "github",
     },
   ],
   navigation: [

diff --git a/src/nationalarchives/components/header/macro-options.json b/src/nationalarchives/components/header/macro-options.json
@@ -80,6 +80,18 @@
         "type": "string",
         "required": false,
         "description": ""
+      },
+      {
+        "name": "icon",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "brandIcon",
+        "type": "string",
+        "required": false,
+        "description": ""
       }
     ]
   },

diff --git a/src/nationalarchives/components/header/template.njk b/src/nationalarchives/components/header/template.njk
@@ -51,6 +51,11 @@
         {%- for item in params.topNavigation -%}
         <li class="tna-header__top-navigation-item">
           <a href="{{ item.href }}" class="tna-header__top-navigation-item-link" tabindex="0" {%- if item.title %} title="{{ item.title }}"{% endif %}>
+            {%- if item.brandIcon -%}
+            <i class="fa-brands fa-{{ item.brandIcon }}"></i>
+            {%- elseif item.icon -%}
+            <i class="fa-solid fa-{{ item.icon }}"></i>
+            {%- endif -%}
             {{ item.text }}
           </a>
         </li>

diff --git a/src/nationalarchives/components/phase-banner/phase-banner.scss b/src/nationalarchives/components/phase-banner/phase-banner.scss
@@ -5,7 +5,7 @@
 @use "../grid";
 
 .tna-phase-banner {
-  @include colour.accent;
+  @include colour.invert;
 
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -28,4 +28,8 @@
 
   &__message {
   }
+
+  &--accent {
+    @include colour.accent;
+  }
 }
diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
@@ -104,6 +104,7 @@ const Template = ({ theme, accent }) => {
         phase: "beta",
         message:
           'This is a new service - <a href="#">give us your feedback</a> to help improve it.',
+        classes: "tna-phase-banner--accent",
       },
     })}
     ${Header({
@@ -129,32 +130,36 @@ const Template = ({ theme, accent }) => {
         ],
       },
     })}
-    ${Breadcrumbs({
-      params: {
-        items: [
-          {
-            text: "Alpha",
-            href: "#/alpha",
-          },
-          {
-            text: "Beta",
-            href: "#/beta",
-          },
-          {
-            text: "Gamma",
-            href: "#/gamma",
-          },
-          {
-            text: "Delta",
-            href: "#/delta",
-          },
-          {
-            text: "Epsilon",
-            href: "#/epsilon",
+    <div class="tna-container">
+      <div class="tna-column tna-column--full">
+        ${Breadcrumbs({
+          params: {
+            items: [
+              {
+                text: "Alpha",
+                href: "#/alpha",
+              },
+              {
+                text: "Beta",
+                href: "#/beta",
+              },
+              {
+                text: "Gamma",
+                href: "#/gamma",
+              },
+              {
+                text: "Delta",
+                href: "#/delta",
+              },
+              {
+                text: "Epsilon",
+                href: "#/epsilon",
+              },
+            ],
           },
-        ],
-      },
-    })}
+        })}
+      </div>
+    </div>
     <main id="main-content" role="main">
       ${Hero({
         params: {

diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss
@@ -164,14 +164,44 @@
   fill: var(--#{$colour}) if($important, !important, null);
 }
 
-%fixed {
-  @include colour-css-vars;
+%plain {
+  .tna-template--system-theme & {
+    @include colour-css-vars;
+
+    @media (prefers-color-scheme: dark) {
+      @include colour-css-vars-dark;
+    }
+
+    @media (prefers-contrast: more) {
+      @include colour-css-vars-high-contrast;
+    }
+
+    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
+      @include colour-css-vars-high-contrast-dark;
+    }
+  }
+
+  .tna-template--light-theme & {
+    @include colour-css-vars;
+  }
+
+  .tna-template--dark-theme & {
+    @include colour-css-vars-dark;
+  }
+
+  .tna-template--high-contrast-theme & {
+    @include colour-css-vars-high-contrast;
+  }
+
+  .tna-template--high-contrast-theme.tna-template--dark-theme & {
+    @include colour-css-vars-high-contrast-dark;
+  }
 
-  @include colour-font("font-base");
+  --background: var(--page-background);
 }
 
-@mixin fixed {
-  @extend %fixed;
+@mixin plain {
+  @extend %plain;
 }
 
 %invert {