Improve high contrast support for hero, cards and lists

nationalarchives · Jan 15, 2025 · cc14d0d · cc14d0d
1 parent d3e2ece
commit cc14d0d
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Markers for ordered and unordered lists have changed from the accent colour to the light font colour
 - `tna.pref.prefers-contrast` reports `normal` rather than a blank string in the analytics library when the user has no specific contrast preference
+- Improvements to high contrast support for hero components, cards components and lists
 
 ### Deprecated
 ### Removed

diff --git a/src/nationalarchives/components/card/card.scss b/src/nationalarchives/components/card/card.scss
@@ -198,8 +198,18 @@
     padding-left: spacing.space(1);
   }
 
+  @include colour.on-high-contrast-and-forced-colours {
+    padding-bottom: spacing.space(1);
+
+    &__heading,
+    &__body {
+      padding-right: spacing.space(1);
+      padding-left: spacing.space(1);
+    }
+  }
+
   @include media.on-larger-than-mobile {
-    @include horizontal-card-layout("--horizontal", 2);
+    @include horizontal-card-layout("--horizontal", 1.5);
 
     &--horizontal-small-image {
       grid-template-columns: max(10rem, 25%) 1fr;

diff --git a/src/nationalarchives/components/hero/hero.scss b/src/nationalarchives/components/hero/hero.scss
@@ -321,22 +321,4 @@ $shift-units: 5 !default;
       padding-bottom: spacing.space(2);
     }
   }
-
-  @include colour.on-high-contrast-and-forced-colours {
-    &__information,
-    &__content-inner {
-      @include colour.colour-border("keyline-dark", 1px);
-    }
-
-    @include media.on-mobile {
-      &__inner {
-        @include colour.colour-border("keyline-dark", 1px);
-        border-top: 0;
-      }
-
-      &__content-inner {
-        border: none;
-      }
-    }
-  }
 }
diff --git a/src/nationalarchives/utilities/colour/colour-combinations.stories.js b/src/nationalarchives/utilities/colour/colour-combinations.stories.js
@@ -67,6 +67,9 @@ const Template = ({ theme }) => {
             <ul class="tna-ul">
               <li>Alpha</li>
             </ul>
+            <ol class="tna-ol tna-!--no-margin-top">
+              <li>Alpha</li>
+            </ol>
           </div>
           <hr class="tna-!--margin-top-s">
           <hr class="tna-hr-dark tna-!--margin-top-xs">

diff --git a/src/nationalarchives/utilities/colour/colour-themes.stories.js b/src/nationalarchives/utilities/colour/colour-themes.stories.js
@@ -331,7 +331,7 @@ const Template = ({ theme, accent }) => {
           </hgroup>
           <p>Lorem ipsum <a href="#">link</a></p>
         </div>
-        <div class="tna-column tna-column--width-1-2 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
+        <div class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
           <h3 class="tna-heading-m">
             Descriptions
           </h3>
@@ -344,7 +344,7 @@ const Template = ({ theme, accent }) => {
             <dd>Lorem ipsum</dd>
           </dl>
         </div>
-        <div class="tna-column tna-column--width-1-2 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
+        <div class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
           <h3 class="tna-heading-m">
             Descriptions
           </h3>
@@ -357,7 +357,33 @@ const Template = ({ theme, accent }) => {
             <dd>Lorem ipsum</dd>
           </dl>
         </div>
-        <div class="tna-column tna-column--full tna-!--margin-top-m">
+        <div class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
+          <h3 class="tna-heading-m">
+            Descriptions
+          </h3>
+          <dl class="tna-dl tna-dl--stacked">
+            <dt>Alpha</dt>
+            <dd>Lorem ipsum</dd>
+            <dt>Beta</dt>
+            <dd>Lorem ipsum</dd>
+            <dt>Gamma</dt>
+            <dd>Lorem ipsum</dd>
+          </dl>
+        </div>
+        <div class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
+          <h3 class="tna-heading-m">
+            Descriptions
+          </h3>
+          <dl class="tna-dl tna-dl--stacked tna-dl--plain">
+            <dt>Alpha</dt>
+            <dd>Lorem ipsum</dd>
+            <dt>Beta</dt>
+            <dd>Lorem ipsum</dd>
+            <dt>Gamma</dt>
+            <dd>Lorem ipsum</dd>
+          </dl>
+        </div>
+        <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
           <h3 class="tna-heading-m">
             Descriptions
           </h3>
@@ -378,6 +404,8 @@ const Template = ({ theme, accent }) => {
             </dt>
             <dd>LC 4</dd>
           </dl>
+        </div>
+        <div class="tna-column tna-column--full tna-!--margin-top-m">
           <h2 class="tna-heading-l">
             Categories
           </h2>

diff --git a/src/nationalarchives/utilities/lists/_index.scss b/src/nationalarchives/utilities/lists/_index.scss
@@ -40,7 +40,11 @@ ol {
   > li {
     &::marker {
       @include colour.colour-font("font-light");
-      @include typography.main-font-weight-bold;
+      @include typography.main-font-weight-medium;
+
+      @include colour.on-high-contrast {
+        @include colour.colour-font("font-dark");
+      }
     }
   }
 
@@ -56,7 +60,6 @@ ol {
   &--dashed {
     > li::marker {
       content: "—  ";
-      @include colour.colour-font("font-light");
       @include typography.main-font-weight;
     }
   }
@@ -142,6 +145,24 @@ ol {
       background: transparent !important;
     }
   }
+
+  @include colour.on-high-contrast-and-forced-colours {
+    dd {
+      border-top: none !important;
+    }
+
+    &.tna-dl--plain {
+      dt {
+        padding-top: spacing.space(0.5) !important;
+      }
+    }
+
+    &.tna-dl--stacked:not(.tna-dl--plain) {
+      dt {
+        padding-bottom: 0 !important;
+      }
+    }
+  }
 }
 
 .tna-dl {
@@ -274,6 +295,13 @@ ol {
 
       @include colour.colour-border("keyline-dark", 1px, solid, top);
     }
+
+    &--plain {
+      dt,
+      dd {
+        padding-top: spacing.space(0.5);
+      }
+    }
   }
 }
 

diff --git a/tasks/test-package.js b/tasks/test-package.js
@@ -372,7 +372,7 @@ const testFileSizes = (files) => {
     try {
       const fileStats = fs.statSync(`package/nationalarchives/${file}`);
       console.log(
-        `  ${file.padEnd(longestFilenameToCheckSize)}     ${Math.round(fileStats.size / 1000)} KB`,
+        `  ${file.padEnd(longestFilenameToCheckSize)}     ${Math.round(fileStats.size / 1000)} KB (${fileStats.size} bytes)`,
       );
     } catch (err) {
       console.error(err);