Contrast and colour fixes (#115)

* Fix tna-template--black-accent class * Better support for high contrast mode * Tidy up colour functions, remove old mixins * Fix form error colour on error summary component * Increase Storybook test timeout * Split up colour combination stories * Try multiple test runners * Build Storybook for tests only on CI * Build Storybook for tests only on CI * Use npm install rather than npm ci for some actions * Use SWC as a builder * Switch back to npm ci
nationalarchives · Apr 4, 2024 · 74c4722 · 74c4722
1 parent 3b73536
commit 74c4722
Show file tree

Hide file tree

Showing 16 changed files with 248 additions and 242 deletions.
diff --git a/.github/actions/storybook-tests/action.yml b/.github/actions/storybook-tests/action.yml
@@ -14,7 +14,7 @@ runs:
       run: npm ci
       shell: bash
     - name: Build Storybook
-      run: npm run build:storybook --test
+      run: npm run build:storybook:tests
       shell: bash
     - name: Start Storybook
       run: npm start &

diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
@@ -23,7 +23,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build Storybook
-        run: npm run build:storybook
+        run: npm run build:storybook:tests
       - uses: chromaui/action@v1
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -14,7 +14,7 @@ module.exports = {
   ],
   framework: {
     name: "@storybook/html-webpack5",
-    options: {},
+    options: { builder: { useSWC: true } },
   },
   staticDirs: ["../src/nationalarchives/assets"],
   webpackFinal: async (config, { configType }) => {

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -6,7 +6,6 @@ import Cookies from "../src/nationalarchives/lib/cookies.mjs";
 
 document.documentElement.classList.add(
   "tna-template",
-  "tna-template--light-theme",
   "tna-template--yellow-accent",
 );
 if (window.self !== window.top) {

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,9 +9,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 ### Changed
+
+- Better support for colour themes and high contrast options
+
 ### Deprecated
+
+- Removed `tna-template--light-theme` option - `tna-template` is light by default
+- Removed `accent-background` and `dark` mixins from colour tools
+
 ### Removed
 ### Fixed
+
+- Fix incorrect `tna-template--black-accent` class
+- Removed all redundant high contrast classes
+
 ### Security
 
 ## [0.1.51](https://github.com/nationalarchives/tna-frontend/compare/v0.1.50...v0.1.51) - 2024-04-04

diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "start": "storybook dev -p 6006",
     "build:storybook": "storybook build -o storybook --webpack-stats-json",
+    "build:storybook:tests": "storybook build -o storybook --webpack-stats-json --test",
     "build:package": "./tasks/build-package.sh",
     "compile:sass": "sass --style=compressed --embed-sources src/nationalarchives:package/nationalarchives",
     "compile:scripts": "webpack",
@@ -14,7 +15,7 @@
     "test:html": "node tasks/generate-fixture-html.js && html-validate fixtures-html",
     "test:lint": "prettier --check '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint 'src/**/*.scss' && eslint 'src/**/*.{js,mjs}'",
     "test:package": "node tasks/test-package.js",
-    "test:storybook": "test-storybook --maxWorkers=1",
+    "test:storybook": "test-storybook",
     "test:unit": "jest --verbose",
     "update:fixtures": "node tasks/update-fixtures.js"
   },

diff --git a/src/nationalarchives/components/global-header/README.md b/src/nationalarchives/components/global-header/README.md
@@ -12,7 +12,7 @@ Use the cookie banner from TNA Frontend in your service.
 
 ### HTML
 
-1. Add the classes `tna-template` and `tna-template--light-theme` to your `<html>` element
+1. Add the classes `tna-template` to your `<html>` element
 1. Add the class `tna-template__body` to your `<body>` element
 1. Add the HTML for the header and footer to the appropriate part of your page (HTML found below)
 1. Change the `#main-content` in the `href` of the skip link to the ID of your `<main>` element

diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss
@@ -9,27 +9,19 @@
   padding-top: spacing.space(1);
 
   @include colour.contrast;
-  background: #010101;
-
-  .tna-template--light-theme & {
-    background: linear-gradient(
-      0deg,
-      rgb(34 34 34 / 100%) 0%,
-      rgb(0 0 0 / 100%) 100%
-    );
+  background: linear-gradient(
+    0deg,
+    rgb(34 34 34 / 100%) 0%,
+    rgb(0 0 0 / 100%) 100%
+  );
+
+  .tna-template--dark-theme & {
+    background: colour.brand-colour("black");
   }
 
   .tna-template--system-theme & {
-    @media (prefers-color-scheme: light) {
-      background: linear-gradient(
-        0deg,
-        rgb(34 34 34 / 100%) 0%,
-        rgb(0 0 0 / 100%) 100%
-      );
-    }
-
     @media (prefers-color-scheme: dark) {
-      background: #010101;
+      background: colour.brand-colour("black");
     }
   }
 
@@ -388,9 +380,11 @@
     }
   }
 
-  @include colour.on-high-contrast {
+  @include colour.on-high-contrast-and-forced-colours {
+    @include colour.colour-border("keyline", 1px, solid, bottom);
+
     &__top-navigation-link {
-      @include colour.colour-font("link");
+      @include colour.colour-font("link", true);
     }
   }
 }
diff --git a/src/nationalarchives/components/header/header.scss b/src/nationalarchives/components/header/header.scss
@@ -10,23 +10,19 @@
 
   position: relative;
 
-  background-color: colour.brand-colour("black");
-
-  .tna-template--light-theme & {
-    background: linear-gradient(
-      0deg,
-      rgb(34 34 34 / 100%) 0%,
-      rgb(0 0 0 / 100%) 100%
-    );
+  background: linear-gradient(
+    0deg,
+    rgb(34 34 34 / 100%) 0%,
+    rgb(0 0 0 / 100%) 100%
+  );
+
+  .tna-template--dark-theme & {
+    background: colour.brand-colour("black");
   }
 
   .tna-template--system-theme & {
-    @media (prefers-color-scheme: light) {
-      background: linear-gradient(
-        0deg,
-        rgb(34 34 34 / 100%) 0%,
-        rgb(0 0 0 / 100%) 100%
-      );
+    @media (prefers-color-scheme: dark) {
+      background: colour.brand-colour("black");
     }
   }
 
@@ -481,22 +477,7 @@
     }
   }
 
-  // @include colour.on-high-contrast {
-  //   &::after {
-  //     @include colour.colour-border("keyline-dark");
-  //   }
-
-  //   @include media.on-larger-than-mobile {
-  //     &__navigation-item-link {
-  //       &:hover,
-  //       &--selected {
-  //         &,
-  //         &:link,
-  //         &:visited {
-  //           @include colour.colour-border("keyline-dark");
-  //         }
-  //       }
-  //     }
-  //   }
-  // }
+  @include colour.on-high-contrast-and-forced-colours {
+    @include colour.colour-border("keyline", 1px, solid, bottom);
+  }
 }
diff --git a/src/nationalarchives/components/hero/hero.scss b/src/nationalarchives/components/hero/hero.scss
@@ -244,7 +244,8 @@ $shift-units: 5 !default;
     }
 
     &__content-inner {
-      padding: spacing.space(2) 0;
+      padding-right: 0;
+      padding-left: 0;
     }
 
     &--shifted &__content-inner {

diff --git a/src/nationalarchives/components/search-field/search-field.scss b/src/nationalarchives/components/search-field/search-field.scss
@@ -31,22 +31,39 @@
     border-radius: 0.1px;
 
     .tna-template--dark-theme &,
-    .tna-background-contrast &/*,
-    .tna-background-accent &*/ {
+    .tna-background-contrast & {
       margin-right: forms.$form-field-border-width;
 
       border-width: 0;
     }
 
-    .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
-      & {
+    .tna-template--dark-theme .tna-background-accent-light & {
       margin-right: 0;
 
       border-width: forms.$form-field-border-width;
     }
+
+    @media (prefers-color-scheme: dark) {
+      .tna-template--system-theme & {
+        margin-right: forms.$form-field-border-width;
+
+        border-width: 0;
+      }
+
+      .tna-background-accent-light & {
+        margin-right: 0;
+
+        border-width: forms.$form-field-border-width;
+      }
+    }
+
+    @include colour.on-high-contrast {
+      .tna-background-contrast & {
+        margin-right: 0;
+
+        border-width: forms.$form-field-border-width;
+      }
+    }
   }
 
   &__button {