[SPIKE] Set media overrides in functional colours map; support @media (prefers-contrast: more)

[36degrees]

Spiking a couple of things we could do, building on top of the work in #6427:

• defining media-specific overrides within the functional-colours map, making them configurable
• using this new functionality to set the text colour to #000 and to darken the border colour from a 80% tint to a 50% tint of black if the "prefers-contrast: more" media query applies (this has recently been flagged as low contrast in border colour ratio with body-background is too low #6776)

[github-actions]

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index d4b9533e4..470b83b65 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -27,9 +27,16 @@
     --govuk-surface-border-colour: #8eb8dc
 }
 
-@media print {
+@media (print) {
+    :root {
+        --govuk-text-colour: #000
+    }
+}
+
+@media (prefers-contrast:more) {
     :root {
-        --govuk-text-colour: var(--govuk-print-text-colour, #000)
+        --govuk-text-colour: #000;
+        --govuk-border-colour: #858686
     }
 }
 

---

Action run for 377390f

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/custom-properties/_functional-colours.scss b/packages/govuk-frontend/dist/govuk/custom-properties/_functional-colours.scss
index 261a800dd..a2b2271e5 100644
--- a/packages/govuk-frontend/dist/govuk/custom-properties/_functional-colours.scss
+++ b/packages/govuk-frontend/dist/govuk/custom-properties/_functional-colours.scss
@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "sass:meta";
+
 @import "../settings/custom-properties";
 @import "../settings/colours-functional";
 @import "../tools/exports";
@@ -9,11 +12,14 @@
     @if $govuk-output-custom-properties {
       @each $name, $value in $govuk-functional-colours {
         --govuk-#{$name}-colour: #{_govuk-resolve-colour($value)};
-      }
 
-      @media print {
-        // Use 'true black' to avoid printers using colour ink to print body text
-        --govuk-text-colour: #{govuk-functional-colour("print-text")};
+        @if meta.type-of($value) == "map" and map.has-key($value, "media") {
+          @each $query, $media-value in map.get($value, "media") {
+            @media (#{$query}) {
+              --govuk-#{$name}-colour: #{_govuk-resolve-colour($media-value)};
+            }
+          }
+        }
       }
     }
   }
diff --git a/packages/govuk-frontend/dist/govuk/settings/_colours-functional.scss b/packages/govuk-frontend/dist/govuk/settings/_colours-functional.scss
index 24baac277..81492e971 100644
--- a/packages/govuk-frontend/dist/govuk/settings/_colours-functional.scss
+++ b/packages/govuk-frontend/dist/govuk/settings/_colours-functional.scss
@@ -19,7 +19,11 @@ $govuk-default-functional-colours: (
       name: "blue"
     ),
     "text": (
-      name: "black"
+      name: "black",
+      media: (
+        print: #000000,
+        "prefers-contrast: more": #000000
+      )
     ),
     // The background colour of the template. This is intended to be the same
     // as `surface-background` for the purposes of making the Footer and Cookie
@@ -59,7 +63,13 @@ $govuk-default-functional-colours: (
     // Used in for example borders, separators, rules and keylines.
     "border": (
         name: "black",
-        variant: "tint-80"
+        variant: "tint-80",
+        media: (
+          "prefers-contrast: more": (
+            name: "black",
+            variant: "tint-50"
+          )
+        )
       ),
     // Used for form inputs and controls
     "input-border": (

---

Action run for 377390f

[github-actions]

📋 Stats

File sizes

File	Size	Percentage change
dist/govuk-frontend-development.min.css	119.86 KiB	0.1%
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	119.85 KiB	0.1%

No changes to module sizes.

---

Action run for 377390f

[romaricpascal]

suggestion If we modify _govuk-resolve-colour we may be able to define it as 'print-text' rather than #000000 until we remove print-text from the codebase.