From cc14d0df505307be22edb454ac77f370973b0afa Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Wed, 15 Jan 2025 17:07:25 +0000 Subject: [PATCH] Improve high contrast support for hero, cards and lists --- CHANGELOG.md | 1 + .../components/card/card.scss | 12 ++++++- .../components/hero/hero.scss | 18 ---------- .../colour/colour-combinations.stories.js | 3 ++ .../utilities/colour/colour-themes.stories.js | 34 +++++++++++++++++-- .../utilities/lists/_index.scss | 32 +++++++++++++++-- tasks/test-package.js | 2 +- 7 files changed, 77 insertions(+), 25 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a99f7d05..d92634ef 100644 --- 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 index 6f6488b9..ef613e4a 100644 --- 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 index 6cbb3fb4..cc1d73c8 100644 --- 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 index 39fbd7c3..cbb27407 100644 --- 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 }) => { +
    +
  1. Alpha
    2. +
diff --git a/src/nationalarchives/utilities/colour/colour-themes.stories.js b/src/nationalarchives/utilities/colour/colour-themes.stories.js index 21d8b057..ea59d30d 100644 --- 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 }) => {

Lorem ipsum link

-
+

Descriptions

@@ -344,7 +344,7 @@ const Template = ({ theme, accent }) => {
Lorem ipsum
-
+

Descriptions

@@ -357,7 +357,33 @@ const Template = ({ theme, accent }) => {
Lorem ipsum
-
+
+

+ Descriptions +

+
+
Alpha
+
Lorem ipsum
+
Beta
+
Lorem ipsum
+
Gamma
+
Lorem ipsum
+
+
+
+

+ Descriptions +

+
+
Alpha
+
Lorem ipsum
+
Beta
+
Lorem ipsum
+
Gamma
+
Lorem ipsum
+
+
+

Descriptions

@@ -378,6 +404,8 @@ const Template = ({ theme, accent }) => {
LC 4
+
+

Categories

diff --git a/src/nationalarchives/utilities/lists/_index.scss b/src/nationalarchives/utilities/lists/_index.scss index 277a8152..0199f0d3 100644 --- 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 index 3dc063fe..4092eea2 100644 --- 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);