Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[SPIKE] Explore usage of custom properties #4909

Draft
wants to merge 33 commits into
base: main
Choose a base branch
from
Draft

[SPIKE] Explore usage of custom properties #4909

wants to merge 33 commits into from

Conversation

romaricpascal
Copy link
Member

PR collecting different pieces of work to explore CSS custom properties as part of #4900.

@github-actions GitHub Actions
Copy link

github-actions bot commented Mar 28, 2024 •
edited

📋 Stats

File sizes

File Size
dist/govuk-frontend-development.min.css 112.43 KiB
dist/govuk-frontend-development.min.js 42.21 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js 87.21 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs 81.95 KiB
packages/govuk-frontend/dist/govuk/all.mjs 4.17 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs 359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css 112.41 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js 42.2 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs 5.55 KiB

Modules

File Size (bundled) Size (minified)
all.mjs 77.67 KiB 40.19 KiB
accordion.mjs 22.71 KiB 12.85 KiB
button.mjs 5.98 KiB 2.69 KiB
character-count.mjs 22.4 KiB 9.92 KiB
checkboxes.mjs 5.83 KiB 2.83 KiB
error-summary.mjs 7.89 KiB 3.46 KiB
exit-this-page.mjs 17.1 KiB 9.26 KiB
header.mjs 4.46 KiB 2.6 KiB
notification-banner.mjs 6.26 KiB 2.62 KiB
password-input.mjs 15.15 KiB 7.25 KiB
radios.mjs 4.83 KiB 2.38 KiB
skip-link.mjs 4.39 KiB 2.18 KiB
tabs.mjs 10.13 KiB 6.11 KiB

View stats and visualisations on the review app

Action run for ebbfca6

@github-actions GitHub Actions
Copy link

github-actions bot commented Mar 28, 2024 •
edited

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 2c37191c5..e83928383 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -4,11 +4,69 @@
     --govuk-frontend-version: "development";
     --govuk-frontend-breakpoint-mobile: 20rem;
     --govuk-frontend-breakpoint-tablet: 40.0625rem;
-    --govuk-frontend-breakpoint-desktop: 48.0625rem
+    --govuk-frontend-breakpoint-desktop: 48.0625rem;
+    --govuk-font-family: GDS Transport, arial, sans-serif;
+    color-scheme: light;
+    --govuk-brand-colour: #1d70b8;
+    --govuk-text-colour: #0b0c0c;
+    --govuk-canvas-background-colour: #f3f2f1;
+    --govuk-body-background-colour: #fff;
+    --govuk-print-text-colour: #000;
+    --govuk-secondary-text-colour: #505a5f;
+    --govuk-focus-colour: #fd0;
+    --govuk-focus-text-colour: #0b0c0c;
+    --govuk-error-colour: #d4351c;
+    --govuk-success-colour: #00703c;
+    --govuk-border-colour: #b1b4b6;
+    --govuk-input-border-colour: #0b0c0c;
+    --govuk-hover-colour: #f3f2f1;
+    --govuk-link-colour: #1d70b8;
+    --govuk-link-visited-colour: #4c2c92;
+    --govuk-link-hover-colour: #003078;
+    --govuk-link-active-colour: #0b0c0c
+}
+
+@media screen and (prefers-color-scheme:dark) {
+    @supports (color-scheme:dark) {
+        :root:not(.govuk-theme--light) {
+            color-scheme: dark;
+            --govuk-canvas-background-colour: #333;
+            --govuk-body-background-colour: #222;
+            --govuk-text-colour: #fff;
+            --govuk-secondary-text-colour: #ccc;
+            --govuk-link-colour: #add8e6;
+            --govuk-link-visited-colour: #ffb6c1;
+            --govuk-link-hover-colour: #0ff;
+            --govuk-link-active-colour: #fff
+        }
+    }
+}
+
+@media screen {
+    @supports (color-scheme:dark) {
+        .govuk-theme--dark {
+            color-scheme: dark;
+            --govuk-canvas-background-colour: #333;
+            --govuk-body-background-colour: #222;
+            --govuk-text-colour: #fff;
+            --govuk-secondary-text-colour: #ccc;
+            --govuk-link-colour: #add8e6;
+            --govuk-link-visited-colour: #ffb6c1;
+            --govuk-link-hover-colour: #0ff;
+            --govuk-link-active-colour: #fff
+        }
+    }
+}
+
+@media print {
+    :root {
+        --govuk-text-colour: #000;
+        --govuk-font-family: sans-serif
+    }
 }
 
 .govuk-link {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-decoration: underline;
@@ -33,10 +91,20 @@
     font-display: fallback
 }
 
-@media print {
-    .govuk-link {
-        font-family: sans-serif
-    }
+.govuk-link:link {
+    color: var(--govuk-link-colour)
+}
+
+.govuk-link:visited {
+    color: var(--govuk-link-visited-colour)
+}
+
+.govuk-link:hover {
+    color: var(--govuk-link-hover-colour)
+}
+
+.govuk-link:active {
+    color: var(--govuk-link-active-colour)
 }
 
 .govuk-link:hover {
@@ -49,6 +117,7 @@
 
 .govuk-link:focus {
     outline: 3px solid transparent;
+    color: #0b0c0c;
     background-color: #fd0;
     box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
     text-decoration: none;
@@ -56,23 +125,6 @@
     box-decoration-break: clone
 }
 
-.govuk-link:link {
-    color: #1d70b8
-}
-
-.govuk-link:visited {
-    color: #4c2c92
-}
-
-.govuk-link:hover {
-    color: #003078
-}
-
-.govuk-link:active,
-.govuk-link:focus {
-    color: #0b0c0c
-}
-
 @media print {
 
     [href^="/"].govuk-link:after,
@@ -84,74 +136,47 @@
     }
 }
 
-.govuk-link--muted:link,
-.govuk-link--muted:visited {
-    color: #505a5f
+.govuk-link--muted {
+    --govuk-link-colour: var(--govuk-secondary-text-colour);
+    --govuk-link-visited-colour: var(--govuk-secondary-text-colour);
+    --govuk-link-hover-colour: var(--govuk-text-colour);
+    --govuk-link-active-colour: var(--govuk-text-colour)
 }
 
-.govuk-link--muted:active,
-.govuk-link--muted:focus,
-.govuk-link--muted:hover,
-.govuk-link--text-colour:link,
-.govuk-link--text-colour:visited {
-    color: #0b0c0c
-}
-
-@media print {
-
-    .govuk-link--text-colour:link,
-    .govuk-link--text-colour:visited {
-        color: #000
-    }
-}
-
-.govuk-link--text-colour:hover {
-    color: rgba(11, 12, 12, .99)
-}
-
-.govuk-link--text-colour:active,
-.govuk-link--text-colour:focus {
-    color: #0b0c0c
-}
-
-@media print {
-
-    .govuk-link--text-colour:active,
-    .govuk-link--text-colour:focus {
-        color: #000
-    }
+.govuk-link--text-colour {
+    --govuk-link-colour: var(--govuk-text-colour);
+    --govuk-link-visited-colour: var(--govuk-text-colour);
+    --govuk-link-hover-colour: hsl(from var(--govuk-text-colour) h s l/0.99);
+    --govuk-link-active-colour: var(--govuk-text-colour)
 }
 
-.govuk-link--inverse:link,
-.govuk-link--inverse:visited {
-    color: #fff
+.govuk-link--error {
+    --govuk-link-colour: #d4351c;
+    --govuk-link-visited-colour: #d4351c;
+    --govuk-link-hover-colour: #942514;
+    --govuk-link-active-colour: #d4351c
 }
 
-.govuk-link--inverse:active,
-.govuk-link--inverse:hover {
-    color: hsla(0, 0%, 100%, .99)
+.govuk-link--success {
+    --govuk-link-colour: #00703c;
+    --govuk-link-visited-colour: #00703c;
+    --govuk-link-hover-colour: #004e2a;
+    --govuk-link-active-colour: #00703c
 }
 
-.govuk-link--inverse:focus {
-    color: #0b0c0c
+.govuk-link--inverse {
+    --govuk-link-colour: #fff;
+    --govuk-link-visited-colour: #fff;
+    --govuk-link-hover-colour: hsla(0, 0%, 100%, .99);
+    --govuk-link-active-colour: #fff
 }
 
 .govuk-link--no-underline:not(:hover):not(:active) {
     text-decoration: none
 }
 
-.govuk-link--no-visited-state:link,
-.govuk-link--no-visited-state:visited {
-    color: #1d70b8
-}
-
-.govuk-link--no-visited-state:hover {
-    color: #003078
-}
-
-.govuk-link--no-visited-state:active,
-.govuk-link--no-visited-state:focus {
-    color: #0b0c0c
+.govuk-link--no-visited-state {
+    --govuk-link-visited-colour: var(--govuk-link-colour)
 }
 
 .govuk-link-image {
@@ -166,25 +191,19 @@
 }
 
 .govuk-list {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: var(--govuk-text-colour);
     margin-top: 0;
     margin-bottom: 15px;
     padding-left: 0;
     list-style-type: none
 }
 
-@media print {
-    .govuk-list {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-list {
         font-size: 1.1875rem;
@@ -195,8 +214,7 @@
 @media print {
     .govuk-list {
         font-size: 14pt;
-        line-height: 1.15;
-        color: #000
+        line-height: 1.15
     }
 }
 
@@ -248,8 +266,8 @@
 }
 
 .govuk-heading-xl {
-    color: #0b0c0c;
-    font-family: GDS Transport, arial, sans-serif;
+    color: var(--govuk-text-colour);
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 700;
@@ -260,13 +278,6 @@
     margin-bottom: 30px
 }
 
-@media print {
-    .govuk-heading-xl {
-        color: #000;
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-heading-xl {
         font-size: 3rem;
@@ -288,8 +299,8 @@
 }
 
 .govuk-heading-l {
-    color: #0b0c0c;
-    font-family: GDS Transport, arial, sans-serif;
+    color: var(--govuk-text-colour);
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 700;
@@ -300,13 +311,6 @@
     margin-bottom: 20px
 }
 
-@media print {
-    .govuk-heading-l {
-        color: #000;
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-heading-l {
         font-size: 2.25rem;
@@ -328,8 +332,8 @@
 }
 
 .govuk-heading-m {
-    color: #0b0c0c;
-    font-family: GDS Transport, arial, sans-serif;
+    color: var(--govuk-text-colour);
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 700;
@@ -340,13 +344,6 @@
     margin-bottom: 15px
 }
 
-@media print {
-    .govuk-heading-m {
-        color: #000;
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-heading-m {
         font-size: 1.5rem;
@@ -368,8 +365,8 @@
 }
 
 .govuk-heading-s {
-    color: #0b0c0c;
-    font-family: GDS Transport, arial, sans-serif;
+    color: var(--govuk-text-colour);
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 700;
@@ -380,13 +377,6 @@
     margin-bottom: 15px
 }
 
-@media print {
-    .govuk-heading-s {
-        color: #000;
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-heading-s {
         font-size: 1.1875rem;
@@ -408,7 +398,7 @@
 }
 
 .govuk-caption-xl {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -416,13 +406,7 @@
     line-height: 1.1111111111;
     display: block;
     margin-bottom: 5px;
-    color: #505a5f
-}
-
-@media print {
-    .govuk-caption-xl {
-        font-family: sans-serif
-    }
+    color: var(--govuk-secondary-text-colour)
 }
 
 @media (min-width:40.0625em) {
@@ -440,7 +424,7 @@
 }
 
 .govuk-caption-l {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -448,13 +432,7 @@
     line-height: 1.1111111111;
     display: block;
     margin-bottom: 5px;
-    color: #505a5f
-}
-
-@media print {
-    .govuk-caption-l {
-        font-family: sans-serif
-    }
+    color: var(--govuk-secondary-text-colour)
 }
 
 @media (min-width:40.0625em) {
@@ -478,20 +456,14 @@
 }
 
 .govuk-caption-m {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
     display: block;
-    color: #505a5f
-}
-
-@media print {
-    .govuk-caption-m {
-        font-family: sans-serif
-    }
+    color: var(--govuk-secondary-text-colour)
 }
 
 @media (min-width:40.0625em) {
@@ -510,8 +482,8 @@
 
 .govuk-body-l,
 .govuk-body-lead {
-    color: #0b0c0c;
-    font-family: GDS Transport, arial, sans-serif;
+    color: var(--govuk-text-colour);
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -521,15 +493,6 @@
     margin-bottom: 20px
 }
 
-@media print {
-
-    .govuk-body-l,
-    .govuk-body-lead {
-        color: #000;
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
 
     .govuk-body-l,
@@ -558,8 +521,8 @@
 
 .govuk-body,
 .govuk-body-m {
-    color: #0b0c0c;
-    font-family: GDS Transport, arial, sans-serif;
+    color: var(--govuk-text-colour);
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -569,15 +532,6 @@
     margin-bottom: 15px
 }
 
-@media print {
-
-    .govuk-body,
-    .govuk-body-m {
-        color: #000;
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
 
     .govuk-body,
@@ -605,8 +559,8 @@
 }
 
 .govuk-body-s {
-    color: #0b0c0c;
-    font-family: GDS Transport, arial, sans-serif;
+    color: var(--govuk-text-colour);
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -616,13 +570,6 @@
     margin-bottom: 15px
 }
 
-@media print {
-    .govuk-body-s {
-        color: #000;
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-body-s {
         font-size: 1rem;
@@ -644,8 +591,8 @@
 }
 
 .govuk-body-xs {
-    color: #0b0c0c;
-    font-family: GDS Transport, arial, sans-serif;
+    color: var(--govuk-text-colour);
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -655,13 +602,6 @@
     margin-bottom: 15px
 }
 
-@media print {
-    .govuk-body-xs {
-        color: #000;
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-body-xs {
         font-size: .875rem;
@@ -796,7 +736,7 @@
 }
 
 .govuk-button-group .govuk-link {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -809,12 +749,6 @@
     text-align: center
 }
 
-@media print {
-    .govuk-button-group .govuk-link {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-button-group .govuk-link {
         font-size: 1.1875rem;
@@ -1069,7 +1003,7 @@
 }
 
 .govuk-template {
-    background-color: #f3f2f1;
+    background-color: var(--govuk-canvas-background-colour);
     -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
     text-size-adjust: 100%
@@ -1093,7 +1027,7 @@
 
 .govuk-template__body {
     margin: 0;
-    background-color: #fff
+    background-color: var(--govuk-body-background-colour)
 }
 
 .govuk-width-container {
@@ -1159,24 +1093,18 @@
 }
 
 .govuk-accordion__section-button {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 700;
     font-size: 1.125rem;
     line-height: 1.1111111111;
-    color: #0b0c0c;
+    color: var(--govuk-text-colour);
     display: block;
     margin-bottom: 0;
     padding-top: 15px
 }
 
-@media print {
-    .govuk-accordion__section-button {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-accordion__section-button {
         font-size: 1.5rem;
@@ -1187,8 +1115,7 @@
 @media print {
     .govuk-accordion__section-button {
         font-size: 18pt;
-        line-height: 1.15;
-        color: #000
+        line-height: 1.15
     }
 }
 
@@ -1233,7 +1160,7 @@
 }
 
 .govuk-frontend-supported .govuk-accordion__show-all {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -1244,18 +1171,12 @@
     margin-bottom: 9px;
     padding: 5px 2px 5px 0;
     border-width: 0;
-    color: #1d70b8;
+    color: var(--govuk-link-colour);
     background: none;
     cursor: pointer;
     -webkit-appearance: none
 }
 
-@media print {
-    .govuk-frontend-supported .govuk-accordion__show-all {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-frontend-supported .govuk-accordion__show-all {
         font-size: 1.1875rem;
@@ -1282,22 +1203,22 @@
 }
 
 .govuk-frontend-supported .govuk-accordion__show-all:hover {
-    color: #0b0c0c;
-    background: #f3f2f1;
-    box-shadow: 0 -2px #f3f2f1, 0 4px #f3f2f1
+    color: var(--govuk-text-colour);
+    background: var(--govuk-hover-colour);
+    box-shadow: 0 -2px var(--govuk-hover-colour), 0 4px var(--govuk-hover-colour)
 }
 
 .govuk-frontend-supported .govuk-accordion__show-all:hover .govuk-accordion__section-toggle-text {
-    color: #0b0c0c
+    color: var(--govuk-text-colour)
 }
 
 .govuk-frontend-supported .govuk-accordion__show-all:hover .govuk-accordion-nav__chevron {
-    color: #0b0c0c;
-    background: #0b0c0c
+    color: var(--govuk-text-colour);
+    background: var(--govuk-text-colour)
 }
 
 .govuk-frontend-supported .govuk-accordion__show-all:hover .govuk-accordion-nav__chevron:after {
-    color: #f3f2f1
+    color: var(--govuk-hover-colour)
 }
 
 .govuk-frontend-supported .govuk-accordion__show-all:focus {
@@ -1311,7 +1232,7 @@
 }
 
 .govuk-frontend-supported .govuk-accordion__show-all:focus .govuk-accordion-nav__chevron {
-    background: #0b0c0c
+    background: var(--govuk-text-colour)
 }
 
 .govuk-frontend-supported .govuk-accordion__show-all:focus .govuk-accordion-nav__chevron:after {
@@ -1357,7 +1278,7 @@
     border: 0;
     border-top: 1px solid #b1b4b6;
     border-bottom: 10px solid transparent;
-    color: #0b0c0c;
+    color: var(--govuk-text-colour);
     background: none;
     text-align: left;
     cursor: pointer;
@@ -1376,21 +1297,21 @@
 }
 
 .govuk-frontend-supported .govuk-accordion__section-button:hover {
-    color: #0b0c0c;
-    background: #f3f2f1
+    color: var(--govuk-text-colour);
+    background: var(--govuk-hover-colour)
 }
 
 .govuk-frontend-supported .govuk-accordion__section-button:hover .govuk-accordion__section-toggle-text {
-    color: #0b0c0c
+    color: var(--govuk-text-colour)
 }
 
 .govuk-frontend-supported .govuk-accordion__section-button:hover .govuk-accordion-nav__chevron {
-    color: #0b0c0c;
-    background: #0b0c0c
+    color: var(--govuk-text-colour);
+    background: var(--govuk-text-colour)
 }
 
 .govuk-frontend-supported .govuk-accordion__section-button:hover .govuk-accordion-nav__chevron:after {
-    color: #f3f2f1
+    color: var(--govuk-hover-colour)
 }
 
 .govuk-frontend-supported .govuk-accordion__section-button:focus {
@@ -1410,8 +1331,8 @@
 }
 
 .govuk-frontend-supported .govuk-accordion__section-button:focus .govuk-accordion-nav__chevron {
-    color: #0b0c0c;
-    background: #0b0c0c
+    color: var(--govuk-text-colour);
+    background: var(--govuk-text-colour)
 }
 
 .govuk-frontend-supported .govuk-accordion__section-button:focus .govuk-accordion-nav__chevron:after {
@@ -1467,7 +1388,7 @@
     font-size: 1rem;
     line-height: 1.25;
     font-weight: 400;
-    color: #1d70b8
+    color: var(--govuk-link-colour)
 }
 
 @media (min-width:40.0625em) {
@@ -1513,7 +1434,7 @@
 @media (hover:none) {
     .govuk-frontend-supported .govuk-accordion__section-header:hover {
         border-top-color: #b1b4b6;
-        box-shadow: inset 0 3px 0 0 #1d70b8
+        box-shadow: inset 0 3px 0 0 var(--govuk-link-colour)
     }
 
     .govuk-frontend-supported .govuk-accordion__section-header:hover .govuk-accordion__section-button {
@@ -1524,12 +1445,16 @@
 .govuk-back-link {
     font-size: .875rem;
     line-height: 1.1428571429;
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-decoration: underline;
     text-decoration-thickness: max(1px, .0625rem);
     text-underline-offset: .1578em;
+    --govuk-link-colour: var(--govuk-text-colour);
+    --govuk-link-visited-colour: var(--govuk-text-colour);
+    --govuk-link-hover-colour: hsl(from var(--govuk-text-colour) h s l/0.99);
+    --govuk-link-active-colour: var(--govuk-text-colour);
     display: inline-block;
     position: relative;
     margin-top: 15px;
@@ -1547,11 +1472,26 @@
 @media print {
     .govuk-back-link {
         font-size: 14pt;
-        line-height: 1.2;
-        font-family: sans-serif
+        line-height: 1.2
     }
 }
 
+.govuk-back-link:link {
+    color: var(--govuk-link-colour)
+}
+
+.govuk-back-link:visited {
+    color: var(--govuk-link-visited-colour)
+}
+
+.govuk-back-link:hover {
+    color: var(--govuk-link-hover-colour)
+}
+
+.govuk-back-link:active {
+    color: var(--govuk-link-active-colour)
+}
+
 .govuk-back-link:hover {
     text-decoration-thickness: max(3px, .1875rem, .12em);
     -webkit-text-decoration-skip-ink: none;
@@ -1570,36 +1510,6 @@
     box-decoration-break: clone
 }
 
-.govuk-back-link:link,
-.govuk-back-link:visited {
-    color: #0b0c0c
-}
-
-@media print {
-
-    .govuk-back-link:link,
-    .govuk-back-link:visited {
-        color: #000
-    }
-}
-
-.govuk-back-link:hover {
-    color: rgba(11, 12, 12, .99)
-}
-
-.govuk-back-link:active,
-.govuk-back-link:focus {
-    color: #0b0c0c
-}
-
-@media print {
-
-    .govuk-back-link:active,
-    .govuk-back-link:focus {
-        color: #000
-    }
-}
-
 .govuk-back-link:before {
     content: "";
     display: block;
@@ -1613,7 +1523,7 @@
     transform: rotate(225deg);
     border: solid;
     border-width: 1px 1px 0 0;
-    border-color: #505a5f
+    border-color: var(--govuk-secondary-text-colour)
 }
 
 @supports (border-width:max(0px)) {
@@ -1636,18 +1546,11 @@
     left: 0
 }
 
-.govuk-back-link--inverse:link,
-.govuk-back-link--inverse:visited {
-    color: #fff
-}
-
-.govuk-back-link--inverse:active,
-.govuk-back-link--inverse:hover {
-    color: hsla(0, 0%, 100%, .99)
-}
-
-.govuk-back-link--inverse:focus {
-    color: #0b0c0c
+.govuk-back-link--inverse {
+    --govuk-link-colour: #fff;
+    --govuk-link-visited-colour: #fff;
+    --govuk-link-hover-colour: hsla(0, 0%, 100%, .99);
+    --govuk-link-active-colour: #fff
 }
 
 .govuk-back-link--inverse:before {
@@ -1655,23 +1558,17 @@
 }
 
 .govuk-breadcrumbs {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
     font-size: .875rem;
     line-height: 1.1428571429;
-    color: #0b0c0c;
+    color: var(--govuk-text-colour);
     margin-top: 15px;
     margin-bottom: 10px
 }
 
-@media print {
-    .govuk-breadcrumbs {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-breadcrumbs {
         font-size: 1rem;
@@ -1682,8 +1579,7 @@
 @media print {
     .govuk-breadcrumbs {
         font-size: 14pt;
-        line-height: 1.2;
-        color: #000
+        line-height: 1.2
     }
 }
 
@@ -1721,7 +1617,7 @@
     transform: rotate(45deg);
     border: solid;
     border-width: 1px 1px 0 0;
-    border-color: #505a5f
+    border-color: var(--govuk-secondary-text-colour)
 }
 
 @supports (border-width:max(0px)) {
@@ -1742,18 +1638,32 @@
 }
 
 .govuk-breadcrumbs__link {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-decoration: underline;
     text-decoration-thickness: max(1px, .0625rem);
-    text-underline-offset: .1578em
+    text-underline-offset: .1578em;
+    --govuk-link-colour: var(--govuk-text-colour);
+    --govuk-link-visited-colour: var(--govuk-text-colour);
+    --govuk-link-hover-colour: hsl(from var(--govuk-text-colour) h s l/0.99);
+    --govuk-link-active-colour: var(--govuk-text-colour)
 }
 
-@media print {
-    .govuk-breadcrumbs__link {
-        font-family: sans-serif
-    }
+.govuk-breadcrumbs__link:link {
+    color: var(--govuk-link-colour)
+}
+
+.govuk-breadcrumbs__link:visited {
+    color: var(--govuk-link-visited-colour)
+}
+
+.govuk-breadcrumbs__link:hover {
+    color: var(--govuk-link-hover-colour)
+}
+
+.govuk-breadcrumbs__link:active {
+    color: var(--govuk-link-active-colour)
 }
 
 .govuk-breadcrumbs__link:hover {
@@ -1774,36 +1684,6 @@
     box-decoration-break: clone
 }
 
-.govuk-breadcrumbs__link:link,
-.govuk-breadcrumbs__link:visited {
-    color: #0b0c0c
-}
-
-@media print {
-
-    .govuk-breadcrumbs__link:link,
-    .govuk-breadcrumbs__link:visited {
-        color: #000
-    }
-}
-
-.govuk-breadcrumbs__link:hover {
-    color: rgba(11, 12, 12, .99)
-}
-
-.govuk-breadcrumbs__link:active,
-.govuk-breadcrumbs__link:focus {
-    color: #0b0c0c
-}
-
-@media print {
-
-    .govuk-breadcrumbs__link:active,
-    .govuk-breadcrumbs__link:focus {
-        color: #000
-    }
-}
-
 @media (max-width:40.0525em) {
     .govuk-breadcrumbs--collapse-on-mobile .govuk-breadcrumbs__list-item {
         display: none
@@ -1824,19 +1704,15 @@
     }
 }
 
-.govuk-breadcrumbs--inverse,
-.govuk-breadcrumbs--inverse .govuk-breadcrumbs__link:link,
-.govuk-breadcrumbs--inverse .govuk-breadcrumbs__link:visited {
+.govuk-breadcrumbs--inverse {
     color: #fff
 }
 
-.govuk-breadcrumbs--inverse .govuk-breadcrumbs__link:active,
-.govuk-breadcrumbs--inverse .govuk-breadcrumbs__link:hover {
-    color: hsla(0, 0%, 100%, .99)
-}
-
-.govuk-breadcrumbs--inverse .govuk-breadcrumbs__link:focus {
-    color: #0b0c0c
+.govuk-breadcrumbs--inverse .govuk-breadcrumbs__link {
+    --govuk-link-colour: #fff;
+    --govuk-link-visited-colour: #fff;
+    --govuk-link-hover-colour: hsla(0, 0%, 100%, .99);
+    --govuk-link-active-colour: #fff
 }
 
 .govuk-breadcrumbs--inverse .govuk-breadcrumbs__list-item:before {
@@ -1844,7 +1720,7 @@
 }
 
 .govuk-button {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -1867,12 +1743,6 @@
     -webkit-appearance: none
 }
 
-@media print {
-    .govuk-button {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-button {
         font-size: 1.1875rem;
@@ -2058,7 +1928,7 @@
 }
 
 .govuk-error-message {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 700;
@@ -2071,12 +1941,6 @@
     color: #d4351c
 }
 
-@media print {
-    .govuk-error-message {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-error-message {
         font-size: 1.1875rem;
@@ -2092,20 +1956,14 @@
 }
 
 .govuk-hint {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
     margin-bottom: 15px;
-    color: #505a5f
-}
-
-@media print {
-    .govuk-hint {
-        font-family: sans-serif
-    }
+    color: var(--govuk-secondary-text-colour)
 }
 
 @media (min-width:40.0625em) {
@@ -2132,23 +1990,17 @@
 }
 
 .govuk-label {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: var(--govuk-text-colour);
     display: block;
     margin-bottom: 5px
 }
 
-@media print {
-    .govuk-label {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-label {
         font-size: 1.1875rem;
@@ -2159,8 +2011,7 @@
 @media print {
     .govuk-label {
         font-size: 14pt;
-        line-height: 1.15;
-        color: #000
+        line-height: 1.15
     }
 }
 
@@ -2237,7 +2088,7 @@
 }
 
 .govuk-textarea {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -2255,12 +2106,6 @@
     -webkit-appearance: none
 }
 
-@media print {
-    .govuk-textarea {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-textarea {
         font-size: 1.1875rem;
@@ -2353,13 +2198,13 @@
 }
 
 .govuk-fieldset__legend {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: var(--govuk-text-colour);
     box-sizing: border-box;
     display: table;
     max-width: 100%;
@@ -2368,12 +2213,6 @@
     white-space: normal
 }
 
-@media print {
-    .govuk-fieldset__legend {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-fieldset__legend {
         font-size: 1.1875rem;
@@ -2384,8 +2223,7 @@
 @media print {
     .govuk-fieldset__legend {
         font-size: 14pt;
-        line-height: 1.15;
-        color: #000
+        line-height: 1.15
     }
 }
 
@@ -2562,24 +2400,18 @@ screen and (forced-colors:active) {
 }
 
 .govuk-checkboxes__divider {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: var(--govuk-text-colour);
     width: 40px;
     margin-bottom: 10px;
     text-align: center
 }
 
-@media print {
-    .govuk-checkboxes__divider {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-checkboxes__divider {
         font-size: 1.1875rem;
@@ -2590,8 +2422,7 @@ screen and (forced-colors:active) {
 @media print {
     .govuk-checkboxes__divider {
         font-size: 14pt;
-        line-height: 1.15;
-        color: #000
+        line-height: 1.15
     }
 }
 
@@ -2652,11 +2483,11 @@ screen and (forced-colors:active) {
 .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled)+.govuk-checkboxes__label:before {
     outline: 3px dashed transparent;
     outline-offset: 1px;
-    box-shadow: 0 0 0 10px #b1b4b6
+    box-shadow: 0 0 0 10px var(--govuk-hover-colour)
 }
 
 .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus+.govuk-checkboxes__label:before {
-    box-shadow: 0 0 0 3px #fd0, 0 0 0 10px #b1b4b6
+    box-shadow: 0 0 0 3px #fd0, 0 0 0 10px var(--govuk-hover-colour)
 }
 
 @media (-ms-high-contrast:active),
@@ -2680,7 +2511,7 @@ screen and (forced-colors:active) {
 .govuk-cookie-banner {
     padding-top: 20px;
     border-bottom: 10px solid transparent;
-    background-color: #f3f2f1
+    background-color: var(--govuk-canvas-background-colour)
 }
 
 .govuk-cookie-banner[hidden] {
@@ -2700,7 +2531,7 @@ screen and (forced-colors:active) {
 }
 
 .govuk-input {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -2717,12 +2548,6 @@ screen and (forced-colors:active) {
     appearance: none
 }
 
-@media print {
-    .govuk-input {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-input {
         font-size: 1.1875rem;
@@ -2825,7 +2650,7 @@ screen and (forced-colors:active) {
 
 .govuk-input__prefix,
 .govuk-input__suffix {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -2846,14 +2671,6 @@ screen and (forced-colors:active) {
     flex: 0 0 auto
 }
 
-@media print {
-
-    .govuk-input__prefix,
-    .govuk-input__suffix {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
 
     .govuk-input__prefix,
@@ -2929,23 +2746,17 @@ screen and (forced-colors:active) {
 }
 
 .govuk-details {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: var(--govuk-text-colour);
     margin-bottom: 20px;
     display: block
 }
 
-@media print {
-    .govuk-details {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-details {
         font-size: 1.1875rem;
@@ -2956,8 +2767,7 @@ screen and (forced-colors:active) {
 @media print {
     .govuk-details {
         font-size: 14pt;
-        line-height: 1.15;
-        color: #000
+        line-height: 1.15
     }
 }
 
@@ -3022,12 +2832,12 @@ screen and (forced-colors:active) {
     .govuk-details__summary {
         position: relative;
         padding-left: 25px;
-        color: #1d70b8;
+        color: var(--govuk-link-colour);
         cursor: pointer
     }
 
     .govuk-details__summary:hover {
-        color: #003078
+        color: var(--govuk-link-hover-colour)
     }
 
     .govuk-details__summary:focus {
@@ -3098,24 +2908,18 @@ screen and (forced-colors:active) {
 }
 
 .govuk-error-summary {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: var(--govuk-text-colour);
     padding: 15px;
     margin-bottom: 30px;
     border: 5px solid #d4351c
 }
 
-@media print {
-    .govuk-error-summary {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-error-summary {
         font-size: 1.1875rem;
@@ -3126,8 +2930,7 @@ screen and (forced-colors:active) {
 @media print {
     .govuk-error-summary {
         font-size: 14pt;
-        line-height: 1.15;
-        color: #000
+        line-height: 1.15
     }
 }
 
@@ -3188,18 +2991,32 @@ screen and (forced-colors:active) {
 
 .govuk-error-summary__list a {
     font-weight: 700;
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-decoration: underline;
     text-decoration-thickness: max(1px, .0625rem);
-    text-underline-offset: .1578em
+    text-underline-offset: .1578em;
+    --govuk-link-colour: #d4351c;
+    --govuk-link-visited-colour: #d4351c;
+    --govuk-link-hover-colour: #942514;
+    --govuk-link-active-colour: #d4351c
 }
 
-@media print {
-    .govuk-error-summary__list a {
-        font-family: sans-serif
-    }
+.govuk-error-summary__list a:link {
+    color: var(--govuk-link-colour)
+}
+
+.govuk-error-summary__list a:visited {
+    color: var(--govuk-link-visited-colour)
+}
+
+.govuk-error-summary__list a:hover {
+    color: var(--govuk-link-hover-colour)
+}
+
+.govuk-error-summary__list a:active {
+    color: var(--govuk-link-active-colour)
 }
 
 .govuk-error-summary__list a:hover {
@@ -3212,6 +3029,7 @@ screen and (forced-colors:active) {
 
 .govuk-error-summary__list a:focus {
     outline: 3px solid transparent;
+    color: #0b0c0c;
     background-color: #fd0;
     box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
     text-decoration: none;
@@ -3219,23 +3037,6 @@ screen and (forced-colors:active) {
     box-decoration-break: clone
 }
 
-.govuk-error-summary__list a:link,
-.govuk-error-summary__list a:visited {
-    color: #d4351c
-}
-
-.govuk-error-summary__list a:hover {
-    color: #942514
-}
-
-.govuk-error-summary__list a:active {
-    color: #d4351c
-}
-
-.govuk-error-summary__list a:focus {
-    color: #0b0c0c
-}
-
 .govuk-exit-this-page {
     margin-bottom: 30px;
     position: -webkit-sticky;
@@ -3313,24 +3114,18 @@ screen and (forced-colors:active) {
 }
 
 .govuk-file-upload {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: var(--govuk-text-colour);
     max-width: 100%;
     margin-left: -5px;
     padding: 5px
 }
 
-@media print {
-    .govuk-file-upload {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-file-upload {
         font-size: 1.1875rem;
@@ -3341,8 +3136,7 @@ screen and (forced-colors:active) {
 @media print {
     .govuk-file-upload {
         font-size: 14pt;
-        line-height: 1.15;
-        color: #000
+        line-height: 1.15
     }
 }
 
@@ -3368,7 +3162,7 @@ screen and (forced-colors:active) {
 }
 
 .govuk-footer {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -3377,14 +3171,8 @@ screen and (forced-colors:active) {
     padding-top: 25px;
     padding-bottom: 15px;
     border-top: 1px solid #b1b4b6;
-    color: #0b0c0c;
-    background: #f3f2f1
-}
-
-@media print {
-    .govuk-footer {
-        font-family: sans-serif
-    }
+    color: var(--govuk-text-colour);
+    background: var(--govuk-canvas-background-colour)
 }
 
 @media (min-width:40.0625em) {
@@ -3409,66 +3197,50 @@ screen and (forced-colors:active) {
 }
 
 .govuk-footer__link {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-decoration: underline;
     text-decoration-thickness: max(1px, .0625rem);
-    text-underline-offset: .1578em
-}
-
-@media print {
-    .govuk-footer__link {
-        font-family: sans-serif
-    }
-}
-
-.govuk-footer__link:hover {
-    text-decoration-thickness: max(3px, .1875rem, .12em);
-    -webkit-text-decoration-skip-ink: none;
-    text-decoration-skip-ink: none;
-    -webkit-text-decoration-skip: none;
-    text-decoration-skip: none
+    text-underline-offset: .1578em;
+    --govuk-link-colour: var(--govuk-text-colour);
+    --govuk-link-visited-colour: var(--govuk-text-colour);
+    --govuk-link-hover-colour: hsl(from var(--govuk-text-colour) h s l/0.99);
+    --govuk-link-active-colour: var(--govuk-text-colour)
 }
 
-.govuk-footer__link:focus {
-    outline: 3px solid transparent;
-    color: #0b0c0c;
-    background-color: #fd0;
-    box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
-    text-decoration: none;
-    -webkit-box-decoration-break: clone;
-    box-decoration-break: clone
+.govuk-footer__link:link {
+    color: var(--govuk-link-colour)
 }
 
-.govuk-footer__link:link,
 .govuk-footer__link:visited {
-    color: #0b0c0c
+    color: var(--govuk-link-visited-colour)
 }
 
-@media print {
+.govuk-footer__link:hover {
+    color: var(--govuk-link-hover-colour)
+}
 
-    .govuk-footer__link:link,
-    .govuk-footer__link:visited {
-        color: #000
-    }
+.govuk-footer__link:active {
+    color: var(--govuk-link-active-colour)
 }
 
 .govuk-footer__link:hover {
-    color: rgba(11, 12, 12, .99)
+    text-decoration-thickness: max(3px, .1875rem, .12em);
+    -webkit-text-decoration-skip-ink: none;
+    text-decoration-skip-ink: none;
+    -webkit-text-decoration-skip: none;
+    text-decoration-skip: none
 }
 
-.govuk-footer__link:active,
 .govuk-footer__link:focus {
-    color: #0b0c0c
-}
-
-@media print {
-
-    .govuk-footer__link:active,
-    .govuk-footer__link:focus {
-        color: #000
-    }
+    outline: 3px solid transparent;
+    color: #0b0c0c;
+    background-color: #fd0;
+    box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+    text-decoration: none;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone
 }
 
 .govuk-footer__section-break {
@@ -3622,23 +3394,17 @@ only screen and (min-resolution:2dppx) {
 }
 
 .govuk-header {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
     font-size: .875rem;
     line-height: 1;
-    border-bottom: 10px solid #fff;
+    border-bottom: 10px solid var(--govuk-body-background-colour);
     color: #fff;
     background: #0b0c0c
 }
 
-@media print {
-    .govuk-header {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-header {
         font-size: 1rem;
@@ -3655,7 +3421,7 @@ only screen and (min-resolution:2dppx) {
 
 .govuk-header__container--full-width {
     padding: 0 15px;
-    border-color: #1d70b8
+    border-color: var(--govuk-brand-colour)
 }
 
 .govuk-header__container--full-width .govuk-header__menu-button {
@@ -3666,7 +3432,7 @@ only screen and (min-resolution:2dppx) {
     position: relative;
     margin-bottom: -10px;
     padding-top: 10px;
-    border-bottom: 10px solid #1d70b8
+    border-bottom: 10px solid var(--govuk-brand-colour)
 }
 
 .govuk-header__container:after {
@@ -3737,17 +3503,27 @@ only screen and (min-resolution:2dppx) {
 }
 
 .govuk-header__link {
+    --govuk-link-colour: #fff;
+    --govuk-link-visited-colour: #fff;
+    --govuk-link-hover-colour: hsla(0, 0%, 100%, .99);
+    --govuk-link-active-colour: #fff;
     text-decoration: none
 }
 
-.govuk-header__link:link,
+.govuk-header__link:link {
+    color: var(--govuk-link-colour)
+}
+
 .govuk-header__link:visited {
-    color: #fff
+    color: var(--govuk-link-visited-colour)
 }
 
-.govuk-header__link:active,
 .govuk-header__link:hover {
-    color: hsla(0, 0%, 100%, .99)
+    color: var(--govuk-link-hover-colour)
+}
+
+.govuk-header__link:active {
+    color: var(--govuk-link-active-colour)
 }
 
 .govuk-header__link:hover {
@@ -3852,7 +3628,7 @@ only screen and (min-resolution:2dppx) {
 }
 
 .govuk-header__menu-button {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -3872,12 +3648,6 @@ only screen and (min-resolution:2dppx) {
     cursor: pointer
 }
 
-@media print {
-    .govuk-header__menu-button {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-header__menu-button {
         font-size: 1rem;
@@ -4016,7 +3786,7 @@ only screen and (min-resolution:2dppx) {
 
 @media print {
     .govuk-header__navigation-item--active a {
-        color: #1d70b8
+        color: var(--govuk-brand-colour)
     }
 }
 
@@ -4047,13 +3817,13 @@ only screen and (min-resolution:2dppx) {
 }
 
 .govuk-inset-text {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: var(--govuk-text-colour);
     padding: 15px;
     margin-top: 20px;
     margin-bottom: 20px;
@@ -4061,12 +3831,6 @@ only screen and (min-resolution:2dppx) {
     border-left: 10px solid #b1b4b6
 }
 
-@media print {
-    .govuk-inset-text {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-inset-text {
         font-size: 1.1875rem;
@@ -4077,8 +3841,7 @@ only screen and (min-resolution:2dppx) {
 @media print {
     .govuk-inset-text {
         font-size: 14pt;
-        line-height: 1.15;
-        color: #000
+        line-height: 1.15
     }
 }
 
@@ -4099,21 +3862,15 @@ only screen and (min-resolution:2dppx) {
 }
 
 .govuk-notification-banner {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
     margin-bottom: 30px;
-    border: 5px solid #1d70b8;
-    background-color: #1d70b8
-}
-
-@media print {
-    .govuk-notification-banner {
-        font-family: sans-serif
-    }
+    border: 5px solid var(--govuk-brand-colour);
+    background-color: var(--govuk-brand-colour)
 }
 
 @media (min-width:40.0625em) {
@@ -4175,15 +3932,9 @@ only screen and (min-resolution:2dppx) {
 }
 
 .govuk-notification-banner__content {
-    color: #0b0c0c;
+    color: var(--govuk-text-colour);
     padding: 15px;
-    background-color: #fff
-}
-
-@media print {
-    .govuk-notification-banner__content {
-        color: #000
-    }
+    background-color: var(--govuk-body-background-colour)
 }
 
 @media (min-width:40.0625em) {
@@ -4224,18 +3975,29 @@ only screen and (min-resolution:2dppx) {
 }
 
 .govuk-notification-banner__link {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-decoration: underline;
     text-decoration-thickness: max(1px, .0625rem);
-    text-underline-offset: .1578em
+    text-underline-offset: .1578em;
+    --govuk-link-visited-colour: var(--govuk-link-colour)
 }
 
-@media print {
-    .govuk-notification-banner__link {
-        font-family: sans-serif
-    }
+.govuk-notification-banner__link:link {
+    color: var(--govuk-link-colour)
+}
+
+.govuk-notification-banner__link:visited {
+    color: var(--govuk-link-visited-colour)
+}
+
+.govuk-notification-banner__link:hover {
+    color: var(--govuk-link-hover-colour)
+}
+
+.govuk-notification-banner__link:active {
+    color: var(--govuk-link-active-colour)
 }
 
 .govuk-notification-banner__link:hover {
@@ -4248,6 +4010,7 @@ only screen and (min-resolution:2dppx) {
 
 .govuk-notification-banner__link:focus {
     outline: 3px solid transparent;
+    color: #0b0c0c;
     background-color: #fd0;
     box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
     text-decoration: none;
@@ -4255,40 +4018,16 @@ only screen and (min-resolution:2dppx) {
     box-decoration-break: clone
 }
 
-.govuk-notification-banner__link:link,
-.govuk-notification-banner__link:visited {
-    color: #1d70b8
-}
-
-.govuk-notification-banner__link:hover {
-    color: #003078
-}
-
-.govuk-notification-banner__link:active,
-.govuk-notification-banner__link:focus {
-    color: #0b0c0c
-}
-
 .govuk-notification-banner--success {
     border-color: #00703c;
     background-color: #00703c
 }
 
-.govuk-notification-banner--success .govuk-notification-banner__link:link,
-.govuk-notification-banner--success .govuk-notification-banner__link:visited {
-    color: #00703c
-}
-
-.govuk-notification-banner--success .govuk-notification-banner__link:hover {
-    color: #004e2a
-}
-
-.govuk-notification-banner--success .govuk-notification-banner__link:active {
-    color: #00703c
-}
-
-.govuk-notification-banner--success .govuk-notification-banner__link:focus {
-    color: #0b0c0c
+.govuk-notification-banner--success .govuk-notification-banner__link {
+    --govuk-link-colour: #00703c;
+    --govuk-link-visited-colour: #00703c;
+    --govuk-link-hover-colour: #004e2a;
+    --govuk-link-active-colour: #00703c
 }
 
 .govuk-pagination {
@@ -4316,7 +4055,7 @@ only screen and (min-resolution:2dppx) {
 .govuk-pagination__item,
 .govuk-pagination__next,
 .govuk-pagination__prev {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -4330,15 +4069,6 @@ only screen and (min-resolution:2dppx) {
     float: left
 }
 
-@media print {
-
-    .govuk-pagination__item,
-    .govuk-pagination__next,
-    .govuk-pagination__prev {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
 
     .govuk-pagination__item,
@@ -4412,23 +4142,16 @@ only screen and (min-resolution:2dppx) {
     background-color: #1d70b8
 }
 
-.govuk-pagination__item--current .govuk-pagination__link:link,
-.govuk-pagination__item--current .govuk-pagination__link:visited {
-    color: #fff
-}
-
-.govuk-pagination__item--current .govuk-pagination__link:active,
-.govuk-pagination__item--current .govuk-pagination__link:hover {
-    color: hsla(0, 0%, 100%, .99)
-}
-
-.govuk-pagination__item--current .govuk-pagination__link:focus {
-    color: #0b0c0c
+.govuk-pagination__item--current .govuk-pagination__link {
+    --govuk-link-colour: #fff;
+    --govuk-link-visited-colour: #fff;
+    --govuk-link-hover-colour: hsla(0, 0%, 100%, .99);
+    --govuk-link-active-colour: #fff
 }
 
 .govuk-pagination__item--ellipses {
     font-weight: 700;
-    color: #505a5f
+    color: var(--govuk-secondary-text-colour)
 }
 
 .govuk-pagination__item--ellipses:hover {
@@ -4490,7 +4213,7 @@ only screen and (min-resolution:2dppx) {
 .govuk-pagination__icon {
     width: .9375rem;
     height: .8125rem;
-    color: #505a5f;
+    color: var(--govuk-secondary-text-colour);
     fill: currentcolor;
     forced-color-adjust: auto
 }
@@ -4563,7 +4286,7 @@ only screen and (min-resolution:2dppx) {
 }
 
 .govuk-panel {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -4576,12 +4299,6 @@ only screen and (min-resolution:2dppx) {
     text-align: center
 }
 
-@media print {
-    .govuk-panel {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-panel {
         font-size: 2.25rem;
@@ -4675,7 +4392,7 @@ only screen and (min-resolution:2dppx) {
 }
 
 .govuk-tag {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -4692,12 +4409,6 @@ only screen and (min-resolution:2dppx) {
     overflow-wrap: break-word
 }
 
-@media print {
-    .govuk-tag {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-tag {
         font-size: 1.1875rem;
@@ -4775,23 +4486,17 @@ only screen and (min-resolution:2dppx) {
 }
 
 .govuk-phase-banner__content {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
     font-size: .875rem;
     line-height: 1.1428571429;
-    color: #0b0c0c;
+    color: var(--govuk-text-colour);
     display: table;
     margin: 0
 }
 
-@media print {
-    .govuk-phase-banner__content {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-phase-banner__content {
         font-size: 1rem;
@@ -4802,8 +4507,7 @@ only screen and (min-resolution:2dppx) {
 @media print {
     .govuk-phase-banner__content {
         font-size: 14pt;
-        line-height: 1.2;
-        color: #000
+        line-height: 1.2
     }
 }
 
@@ -4947,24 +4651,18 @@ screen and (forced-colors:active) {
 }
 
 .govuk-radios__divider {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: var(--govuk-text-colour);
     width: 40px;
     margin-bottom: 10px;
     text-align: center
 }
 
-@media print {
-    .govuk-radios__divider {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-radios__divider {
         font-size: 1.1875rem;
@@ -4975,8 +4673,7 @@ screen and (forced-colors:active) {
 @media print {
     .govuk-radios__divider {
         font-size: 14pt;
-        line-height: 1.15;
-        color: #000
+        line-height: 1.15
     }
 }
 
@@ -5040,11 +4737,11 @@ screen and (forced-colors:active) {
 .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:not(:disabled)+.govuk-radios__label:before {
     outline: 4px dashed transparent;
     outline-offset: 1px;
-    box-shadow: 0 0 0 10px #b1b4b6
+    box-shadow: 0 0 0 10px var(--govuk-hover-colour)
 }
 
 .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus+.govuk-radios__label:before {
-    box-shadow: 0 0 0 4px 0 0 0 10px #fd0 #b1b4b6
+    box-shadow: 0 0 0 4px #fd0 0 0 0 10px var(--govuk-hover-colour)
 }
 
 @media (-ms-high-contrast:active),
@@ -5066,7 +4763,7 @@ screen and (forced-colors:active) {
 }
 
 .govuk-select {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -5082,12 +4779,6 @@ screen and (forced-colors:active) {
     background-color: #fff
 }
 
-@media print {
-    .govuk-select {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-select {
         font-size: 1.1875rem;
@@ -5142,12 +4833,16 @@ screen and (forced-colors:active) {
     -webkit-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-decoration: underline;
     text-decoration-thickness: max(1px, .0625rem);
     text-underline-offset: .1578em;
+    --govuk-link-colour: var(--govuk-text-colour);
+    --govuk-link-visited-colour: var(--govuk-text-colour);
+    --govuk-link-hover-colour: hsl(from var(--govuk-text-colour) h s l/0.99);
+    --govuk-link-active-colour: var(--govuk-text-colour);
     font-size: .875rem;
     line-height: 1.1428571429;
     display: block;
@@ -5170,42 +4865,6 @@ screen and (forced-colors:active) {
     user-select: text
 }
 
-@media print {
-    .govuk-skip-link {
-        font-family: sans-serif
-    }
-}
-
-.govuk-skip-link:link,
-.govuk-skip-link:visited {
-    color: #0b0c0c
-}
-
-@media print {
-
-    .govuk-skip-link:link,
-    .govuk-skip-link:visited {
-        color: #000
-    }
-}
-
-.govuk-skip-link:hover {
-    color: rgba(11, 12, 12, .99)
-}
-
-.govuk-skip-link:active,
-.govuk-skip-link:focus {
-    color: #0b0c0c
-}
-
-@media print {
-
-    .govuk-skip-link:active,
-    .govuk-skip-link:focus {
-        color: #000
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-skip-link {
         font-size: 1rem;
@@ -5238,22 +4897,16 @@ screen and (forced-colors:active) {
 }
 
 .govuk-summary-list {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: var(--govuk-text-colour);
     margin: 0 0 20px
 }
 
-@media print {
-    .govuk-summary-list {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-summary-list {
         font-size: 1.1875rem;
@@ -5264,8 +4917,7 @@ screen and (forced-colors:active) {
 @media print {
     .govuk-summary-list {
         font-size: 14pt;
-        line-height: 1.15;
-        color: #000
+        line-height: 1.15
     }
 }
 
@@ -5465,22 +5117,16 @@ screen and (forced-colors:active) {
 }
 
 .govuk-summary-card__title {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 700;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: var(--govuk-text-colour);
     margin: 5px 20px 10px 0
 }
 
-@media print {
-    .govuk-summary-card__title {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-summary-card__title {
         font-size: 1.1875rem;
@@ -5491,8 +5137,7 @@ screen and (forced-colors:active) {
 @media print {
     .govuk-summary-card__title {
         font-size: 14pt;
-        line-height: 1.15;
-        color: #000
+        line-height: 1.15
     }
 }
 
@@ -5594,25 +5239,19 @@ screen and (-ms-high-contrast:active) {
 }
 
 .govuk-table {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: var(--govuk-text-colour);
     width: 100%;
     margin-bottom: 20px;
     border-spacing: 0;
     border-collapse: collapse
 }
 
-@media print {
-    .govuk-table {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-table {
         font-size: 1.1875rem;
@@ -5623,8 +5262,7 @@ screen and (-ms-high-contrast:active) {
 @media print {
     .govuk-table {
         font-size: 14pt;
-        line-height: 1.15;
-        color: #000
+        line-height: 1.15
     }
 }
 
@@ -5732,7 +5370,7 @@ screen and (-ms-high-contrast:active) {
 .govuk-tabs {
     margin-top: 5px;
     margin-bottom: 20px;
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -5742,18 +5380,7 @@ screen and (-ms-high-contrast:active) {
 
 @media (min-width:40.0625em) {
     .govuk-tabs {
-        margin-bottom: 30px
-    }
-}
-
-@media print {
-    .govuk-tabs {
-        font-family: sans-serif
-    }
-}
-
-@media (min-width:40.0625em) {
-    .govuk-tabs {
+        margin-bottom: 30px;
         font-size: 1.1875rem;
         line-height: 1.3157894737
     }
@@ -5770,7 +5397,7 @@ screen and (-ms-high-contrast:active) {
     font-size: 1rem;
     line-height: 1.25;
     font-weight: 400;
-    color: #0b0c0c;
+    color: var(--govuk-text-colour);
     margin-bottom: 10px
 }
 
@@ -5784,8 +5411,7 @@ screen and (-ms-high-contrast:active) {
 @media print {
     .govuk-tabs__title {
         font-size: 14pt;
-        line-height: 1.15;
-        color: #000
+        line-height: 1.15
     }
 }
 
@@ -5806,20 +5432,14 @@ screen and (-ms-high-contrast:active) {
 }
 
 .govuk-tabs__list-item:before {
-    color: #0b0c0c;
+    color: var(--govuk-text-colour);
     content: "—";
     margin-left: -25px;
     padding-right: 5px
 }
 
-@media print {
-    .govuk-tabs__list-item:before {
-        color: #000
-    }
-}
-
 .govuk-tabs__tab {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-decoration: underline;
@@ -5829,10 +5449,20 @@ screen and (-ms-high-contrast:active) {
     margin-bottom: 10px
 }
 
-@media print {
-    .govuk-tabs__tab {
-        font-family: sans-serif
-    }
+.govuk-tabs__tab:link {
+    color: var(--govuk-link-colour)
+}
+
+.govuk-tabs__tab:visited {
+    color: var(--govuk-link-visited-colour)
+}
+
+.govuk-tabs__tab:hover {
+    color: var(--govuk-link-hover-colour)
+}
+
+.govuk-tabs__tab:active {
+    color: var(--govuk-link-active-colour)
 }
 
 .govuk-tabs__tab:hover {
@@ -5845,6 +5475,7 @@ screen and (-ms-high-contrast:active) {
 
 .govuk-tabs__tab:focus {
     outline: 3px solid transparent;
+    color: #0b0c0c;
     background-color: #fd0;
     box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
     text-decoration: none;
@@ -5852,23 +5483,6 @@ screen and (-ms-high-contrast:active) {
     box-decoration-break: clone
 }
 
-.govuk-tabs__tab:link {
-    color: #1d70b8
-}
-
-.govuk-tabs__tab:visited {
-    color: #4c2c92
-}
-
-.govuk-tabs__tab:hover {
-    color: #003078
-}
-
-.govuk-tabs__tab:active,
-.govuk-tabs__tab:focus {
-    color: #0b0c0c
-}
-
 .govuk-tabs__panel {
     margin-bottom: 30px
 }
@@ -5915,7 +5529,7 @@ screen and (-ms-high-contrast:active) {
         padding: 14px 19px 16px;
         border: 1px solid #b1b4b6;
         border-bottom: 0;
-        background-color: #fff
+        background-color: var(--govuk-body-background-colour)
     }
 
     .govuk-frontend-supported .govuk-tabs__list-item--selected .govuk-tabs__tab {
@@ -5923,43 +5537,13 @@ screen and (-ms-high-contrast:active) {
     }
 
     .govuk-frontend-supported .govuk-tabs__tab {
+        --govuk-link-colour: var(--govuk-text-colour);
+        --govuk-link-visited-colour: var(--govuk-text-colour);
+        --govuk-link-hover-colour: hsl(from var(--govuk-text-colour) h s l/0.99);
+        --govuk-link-active-colour: var(--govuk-text-colour);
         margin-bottom: 0
     }
 
-    .govuk-frontend-supported .govuk-tabs__tab:link,
-    .govuk-frontend-supported .govuk-tabs__tab:visited {
-        color: #0b0c0c
-    }
-}
-
-@media print and (min-width:40.0625em) {
-
-    .govuk-frontend-supported .govuk-tabs__tab:link,
-    .govuk-frontend-supported .govuk-tabs__tab:visited {
-        color: #000
-    }
-}
-
-@media (min-width:40.0625em) {
-    .govuk-frontend-supported .govuk-tabs__tab:hover {
-        color: rgba(11, 12, 12, .99)
-    }
-
-    .govuk-frontend-supported .govuk-tabs__tab:active,
-    .govuk-frontend-supported .govuk-tabs__tab:focus {
-        color: #0b0c0c
-    }
-}
-
-@media print and (min-width:40.0625em) {
-
-    .govuk-frontend-supported .govuk-tabs__tab:active,
-    .govuk-frontend-supported .govuk-tabs__tab:focus {
-        color: #000
-    }
-}
-
-@media (min-width:40.0625em) {
     .govuk-frontend-supported .govuk-tabs__tab:after {
         content: "";
         position: absolute;
@@ -5986,7 +5570,7 @@ screen and (-ms-high-contrast:active) {
 }
 
 .govuk-task-list {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -5998,12 +5582,6 @@ screen and (-ms-high-contrast:active) {
     list-style-type: none
 }
 
-@media print {
-    .govuk-task-list {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-task-list {
         font-size: 1.1875rem;
@@ -6039,37 +5617,23 @@ screen and (-ms-high-contrast:active) {
 }
 
 .govuk-task-list__item--with-link:hover {
-    background: #f3f2f1
+    background: var(--govuk-hover-colour)
 }
 
-.govuk-task-list__name-and-hint {
+.govuk-task-list__name-and-hint,
+.govuk-task-list__status {
     display: table-cell;
     vertical-align: top;
-    color: #0b0c0c
-}
-
-@media print {
-    .govuk-task-list__name-and-hint {
-        color: #000
-    }
+    color: var(--govuk-text-colour)
 }
 
 .govuk-task-list__status {
-    display: table-cell;
     padding-left: 10px;
-    text-align: right;
-    vertical-align: top;
-    color: #0b0c0c
-}
-
-@media print {
-    .govuk-task-list__status {
-        color: #000
-    }
+    text-align: right
 }
 
 .govuk-task-list__status--cannot-start-yet {
-    color: #505a5f
+    color: var(--govuk-secondary-text-colour)
 }
 
 .govuk-task-list__link:after {
@@ -6084,11 +5648,11 @@ screen and (-ms-high-contrast:active) {
 
 .govuk-task-list__hint {
     margin-top: 5px;
-    color: #505a5f
+    color: var(--govuk-secondary-text-colour)
 }
 
 .govuk-warning-text {
-    font-family: GDS Transport, arial, sans-serif;
+    font-family: var(--govuk-font-family);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -6099,12 +5663,6 @@ screen and (-ms-high-contrast:active) {
     padding: 10px 0
 }
 
-@media print {
-    .govuk-warning-text {
-        font-family: sans-serif
-    }
-}
-
 @media (min-width:40.0625em) {
     .govuk-warning-text {
         font-size: 1.1875rem;
@@ -6134,10 +5692,10 @@ screen and (-ms-high-contrast:active) {
     min-width: 35px;
     min-height: 35px;
     margin-top: -7px;
-    border: 3px solid #0b0c0c;
+    border: 3px solid var(--govuk-text-colour);
     border-radius: 50%;
-    color: #fff;
-    background: #0b0c0c;
+    color: var(--govuk-body-background-colour);
+    background: var(--govuk-text-colour);
     font-size: 30px;
     line-height: 29px;
     text-align: center;
@@ -6162,17 +5720,11 @@ screen and (-ms-high-contrast:active) {
 }
 
 .govuk-warning-text__text {
-    color: #0b0c0c;
+    color: var(--govuk-text-colour);
     display: block;
     padding-left: 45px
 }
 
-@media print {
-    .govuk-warning-text__text {
-        color: #000
-    }
-}
-
 .govuk-clearfix:after {
     content: "";
     display: block;

Action run for ebbfca6

@github-actions GitHub Actions
Copy link

github-actions bot commented Mar 28, 2024 •
edited

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/accordion/_index.scss b/packages/govuk-frontend/dist/govuk/components/accordion/_index.scss
index c6f18932c..559a5c021 100644
--- a/packages/govuk-frontend/dist/govuk/components/accordion/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/accordion/_index.scss
@@ -1,6 +1,6 @@
 @include govuk-exports("govuk/component/accordion") {
-  $govuk-accordion-base-colour: govuk-colour("black");
-  $govuk-accordion-hover-colour: govuk-colour("light-grey");
+  $govuk-accordion-base-colour: var(--govuk-text-colour);
+  $govuk-accordion-hover-colour: var(--govuk-hover-colour);
   $govuk-accordion-icon-focus-colour: $govuk-focus-colour;
   $govuk-accordion-bottom-border-width: 1px;
 
@@ -83,7 +83,7 @@
 
       border-width: 0;
 
-      color: $govuk-link-colour;
+      color: var(--govuk-link-colour);
       background: none;
 
       cursor: pointer;
@@ -194,7 +194,7 @@
       // browser. See https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488
       border-bottom: govuk-spacing(2) solid transparent;
 
-      color: $govuk-text-colour;
+      color: var(--govuk-text-colour);
       background: none;
 
       text-align: left;
@@ -296,7 +296,7 @@
     .govuk-accordion__section-toggle {
       @include govuk-font-size($size: 19);
       @include govuk-typography-weight-regular;
-      color: $govuk-link-colour;
+      color: var(--govuk-link-colour);
     }
 
     // Add space between the icon and text.
@@ -353,7 +353,7 @@
       .govuk-accordion__section-header:hover {
         border-top-color: $govuk-border-colour;
 
-        box-shadow: inset 0 3px 0 0 $govuk-link-colour;
+        box-shadow: inset 0 3px 0 0 var(--govuk-link-colour);
 
         .govuk-accordion__section-button {
           border-top-color: $govuk-border-colour;
diff --git a/packages/govuk-frontend/dist/govuk/components/back-link/_index.scss b/packages/govuk-frontend/dist/govuk/components/back-link/_index.scss
index 62e07a424..bbee3ab05 100644
--- a/packages/govuk-frontend/dist/govuk/components/back-link/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/back-link/_index.scss
@@ -10,7 +10,7 @@
   $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
 
   // Colour of chevron
-  $chevron-border-colour: $govuk-secondary-text-colour;
+  $chevron-border-colour: var(--govuk-secondary-text-colour);
 
   .govuk-back-link {
     @include govuk-font-size($size: $font-size);
diff --git a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/_index.scss b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/_index.scss
index b4fb1fdbf..eb819c322 100644
--- a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/_index.scss
@@ -10,7 +10,7 @@
   $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
 
   // Colour of chevron
-  $chevron-border-colour: $govuk-secondary-text-colour;
+  $chevron-border-colour: var(--govuk-secondary-text-colour);
 
   // Calculated altitude (△↕) of the right-angled isosceles chevron with sides
   // of length 8 (7px + 1px border):
diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss b/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss
index d34fc39f5..330607020 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss
@@ -266,7 +266,7 @@
       // Apply an outline for those modes to use instead.
       outline: $govuk-focus-width dashed transparent;
       outline-offset: 1px;
-      box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
+      box-shadow: 0 0 0 $govuk-hover-width var(--govuk-hover-colour);
     }
 
     // Because we've overridden the border-shadow provided by the focus state,
@@ -282,7 +282,7 @@
       // prettier-ignore
       box-shadow:
         0 0 0 $govuk-focus-width $govuk-focus-colour, // 1
-        0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
+        0 0 0 $govuk-hover-width var(--govuk-hover-colour); // 2
     }
 
     // For devices that explicitly don't support hover, don't provide a hover
diff --git a/packages/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss b/packages/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss
index 5b1129a82..4147e5ff0 100644
--- a/packages/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss
@@ -11,7 +11,7 @@
     // when user changes colours in their browser.
     border-bottom: $border-bottom-width solid transparent;
 
-    background-color: $govuk-canvas-background-colour;
+    background-color: var(--govuk-canvas-background-colour);
   }
 
   // Support older browsers which don't hide elements with the `hidden` attribute
diff --git a/packages/govuk-frontend/dist/govuk/components/details/_index.scss b/packages/govuk-frontend/dist/govuk/components/details/_index.scss
index 296fcfdb0..5987da7ca 100644
--- a/packages/govuk-frontend/dist/govuk/components/details/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/details/_index.scss
@@ -76,11 +76,11 @@
       padding-left: govuk-spacing(4) + $govuk-border-width;
 
       // Style the summary to look like a link...
-      color: $govuk-link-colour;
+      color: var(--govuk-link-colour);
       cursor: pointer;
 
       &:hover {
-        color: $govuk-link-hover-colour;
+        color: var(--govuk-link-hover-colour);
       }
 
       &:focus {
diff --git a/packages/govuk-frontend/dist/govuk/components/footer/_index.scss b/packages/govuk-frontend/dist/govuk/components/footer/_index.scss
index a014f75f4..431ac48e1 100644
--- a/packages/govuk-frontend/dist/govuk/components/footer/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/footer/_index.scss
@@ -1,7 +1,7 @@
 @include govuk-exports("govuk/component/footer") {
-  $govuk-footer-background: $govuk-canvas-background-colour;
+  $govuk-footer-background: var(--govuk-canvas-background-colour);
   $govuk-footer-border: $govuk-border-colour;
-  $govuk-footer-text: $govuk-text-colour;
+  $govuk-footer-text: var(--govuk-text-colour);
 
   // Based on the govuk-crest-2x.png image dimensions.
   $govuk-footer-crest-image-width-2x: 250px;
diff --git a/packages/govuk-frontend/dist/govuk/components/header/_index.scss b/packages/govuk-frontend/dist/govuk/components/header/_index.scss
index 858595250..617a0208a 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/header/_index.scss
@@ -1,6 +1,6 @@
 @include govuk-exports("govuk/component/header") {
   $govuk-header-background: govuk-colour("black");
-  $govuk-header-border-color: $govuk-brand-colour;
+  $govuk-header-border-color: var(--govuk-brand-colour);
   $govuk-header-border-width: govuk-spacing(2);
   $govuk-header-text: govuk-colour("white");
   $govuk-header-link-active: #1d8feb;
@@ -16,7 +16,7 @@
   .govuk-header {
     @include govuk-font($size: 16, $line-height: 1);
 
-    border-bottom: govuk-spacing(2) solid govuk-colour("white");
+    border-bottom: govuk-spacing(2) solid var(--govuk-body-background-colour);
     color: $govuk-header-text;
     background: $govuk-header-background;
   }
@@ -99,6 +99,7 @@
     // - all links get a 3px underline regardless of text size, as there are
     //   multiple grouped elements close to one another and having slightly
     //   different underline widths looks unbalanced
+    @include govuk-link-colours;
     @include govuk-link-style-inverse;
 
     text-decoration: none;
@@ -306,7 +307,7 @@
       // When printing, use the normal blue as this contrasts better with the
       // white printing header
       @include govuk-media-query($media-type: print) {
-        color: $govuk-brand-colour;
+        color: var(--govuk-brand-colour);
       }
 
       // When focussed, the text colour needs to be darker to ensure that colour
diff --git a/packages/govuk-frontend/dist/govuk/components/hint/_index.scss b/packages/govuk-frontend/dist/govuk/components/hint/_index.scss
index 31e1746e0..79c9fb875 100644
--- a/packages/govuk-frontend/dist/govuk/components/hint/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/hint/_index.scss
@@ -4,7 +4,7 @@
 
     margin-bottom: govuk-spacing(3);
 
-    color: $govuk-secondary-text-colour;
+    color: var(--govuk-secondary-text-colour);
   }
 
   // Reduces margin-bottom of hint when used after the default label (no class)
diff --git a/packages/govuk-frontend/dist/govuk/components/notification-banner/_index.scss b/packages/govuk-frontend/dist/govuk/components/notification-banner/_index.scss
index 864ef1acd..9543ddebf 100644
--- a/packages/govuk-frontend/dist/govuk/components/notification-banner/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/notification-banner/_index.scss
@@ -3,9 +3,9 @@
     @include govuk-font($size: 19);
     @include govuk-responsive-margin(8, "bottom");
 
-    border: $govuk-border-width solid $govuk-brand-colour;
+    border: $govuk-border-width solid var(--govuk-brand-colour);
 
-    background-color: $govuk-brand-colour;
+    background-color: var(--govuk-brand-colour);
 
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
@@ -38,7 +38,7 @@
     @include govuk-text-colour;
     padding: govuk-spacing(3);
 
-    background-color: $govuk-body-background-colour;
+    background-color: var(--govuk-body-background-colour);
 
     @include govuk-media-query($from: tablet) {
       padding: $padding-tablet;
diff --git a/packages/govuk-frontend/dist/govuk/components/pagination/_index.scss b/packages/govuk-frontend/dist/govuk/components/pagination/_index.scss
index 5f74f5bf6..5aa1cccb5 100644
--- a/packages/govuk-frontend/dist/govuk/components/pagination/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/pagination/_index.scss
@@ -94,7 +94,7 @@
 
   .govuk-pagination__item--ellipses {
     @include govuk-typography-weight-bold;
-    color: $govuk-secondary-text-colour;
+    color: var(--govuk-secondary-text-colour);
 
     // Remove hover state for ellipsis items as they don't have links within them
     &:hover {
@@ -158,7 +158,7 @@
     // Set size using rems to make the icon scale with text if user resizes text in their browser
     width: govuk-px-to-rem(15px);
     height: govuk-px-to-rem(13px);
-    color: $govuk-secondary-text-colour;
+    color: var(--govuk-secondary-text-colour);
     fill: currentcolor;
     forced-color-adjust: auto;
   }
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/_index.scss b/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
index 51fc8055d..31e4c033e 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
@@ -286,7 +286,7 @@
       // Apply an outline for those modes to use instead.
       outline: $govuk-radios-focus-width dashed transparent;
       outline-offset: 1px;
-      box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
+      box-shadow: 0 0 0 $govuk-hover-width var(--govuk-hover-colour);
     }
 
     // Because we've overridden the border-shadow provided by the focus state,
@@ -302,7 +302,7 @@
       // prettier-ignore
       box-shadow:
         0 0 0 $govuk-radios-focus-width $govuk-focus-colour // 1,
-        0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
+        0 0 0 $govuk-hover-width var(--govuk-hover-colour); // 2
     }
 
     // For devices that explicitly don't support hover, don't provide a hover
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/_index.scss b/packages/govuk-frontend/dist/govuk/components/tabs/_index.scss
index a0e628067..8b97dde93 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/_index.scss
@@ -91,7 +91,7 @@
         border: $border-width solid $govuk-border-colour;
         border-bottom: 0;
 
-        background-color: $govuk-body-background-colour;
+        background-color: var(--govuk-body-background-colour);
 
         .govuk-tabs__tab {
           text-decoration: none;
diff --git a/packages/govuk-frontend/dist/govuk/components/task-list/_index.scss b/packages/govuk-frontend/dist/govuk/components/task-list/_index.scss
index 98fc99a79..db03ff91f 100644
--- a/packages/govuk-frontend/dist/govuk/components/task-list/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/task-list/_index.scss
@@ -1,7 +1,7 @@
 @import "../tag/index";
 
 @include govuk-exports("govuk/component/task-list") {
-  $govuk-task-list-hover-colour: govuk-colour("light-grey");
+  $govuk-task-list-hover-colour: var(--govuk-hover-colour);
 
   .govuk-task-list {
     @include govuk-font($size: 19);
@@ -34,7 +34,7 @@
   // The background hover colour is added to help indicate that the whole row is clickable, rather
   // than just the visible link text.
   .govuk-task-list__item--with-link:hover {
-    background: $govuk-task-list-hover-colour;
+    background: var(--govuk-hover-colour);
   }
 
   .govuk-task-list__name-and-hint {
@@ -52,7 +52,7 @@
   }
 
   .govuk-task-list__status--cannot-start-yet {
-    color: $govuk-secondary-text-colour;
+    color: var(--govuk-secondary-text-colour);
   }
 
   // This adds an empty transparent box covering the whole row, including the task status and
@@ -70,7 +70,7 @@
 
   .govuk-task-list__hint {
     margin-top: govuk-spacing(1);
-    color: $govuk-secondary-text-colour;
+    color: var(--govuk-secondary-text-colour);
   }
 }
 
diff --git a/packages/govuk-frontend/dist/govuk/components/warning-text/_index.scss b/packages/govuk-frontend/dist/govuk/components/warning-text/_index.scss
index d221eecf6..d14e78643 100644
--- a/packages/govuk-frontend/dist/govuk/components/warning-text/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/warning-text/_index.scss
@@ -27,11 +27,11 @@
 
     // When a user customises their colours the background colour will often be removed.
     // Adding a border to the component keeps it's shape as a circle.
-    border: 3px solid $govuk-text-colour;
+    border: 3px solid var(--govuk-text-colour);
     border-radius: 50%;
 
-    color: $govuk-body-background-colour;
-    background: $govuk-text-colour;
+    color: var(--govuk-body-background-colour);
+    background: var(--govuk-text-colour);
 
     font-size: 30px;
     line-height: 29px;
diff --git a/packages/govuk-frontend/dist/govuk/core/_all.scss b/packages/govuk-frontend/dist/govuk/core/_all.scss
index a9c87c554..202f48bec 100644
--- a/packages/govuk-frontend/dist/govuk/core/_all.scss
+++ b/packages/govuk-frontend/dist/govuk/core/_all.scss
@@ -1,4 +1,5 @@
 @import "govuk-frontend-properties";
+@import "theme";
 @import "links";
 @import "lists";
 @import "typography";
diff --git a/packages/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss b/packages/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss
index 88f50e349..2f5df20d6 100644
--- a/packages/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss
+++ b/packages/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss
@@ -7,6 +7,8 @@
   @each $name, $value in $govuk-breakpoints {
     --govuk-frontend-breakpoint-#{$name}: #{govuk-px-to-rem($value)};
   }
+
+  --govuk-font-family: #{$govuk-font-family};
 }
 
 /*# sourceMappingURL=_govuk-frontend-properties.scss.map */
diff --git a/packages/govuk-frontend/dist/govuk/core/_links.scss b/packages/govuk-frontend/dist/govuk/core/_links.scss
index f5047d61c..c2e2c4b9b 100644
--- a/packages/govuk-frontend/dist/govuk/core/_links.scss
+++ b/packages/govuk-frontend/dist/govuk/core/_links.scss
@@ -20,6 +20,14 @@
     @include govuk-link-style-text;
   }
 
+  .govuk-link--error {
+    @include govuk-link-style-error;
+  }
+
+  .govuk-link--success {
+    @include govuk-link-style-success;
+  }
+
   .govuk-link--inverse {
     @include govuk-link-style-inverse;
   }
diff --git a/packages/govuk-frontend/dist/govuk/core/_theme.scss b/packages/govuk-frontend/dist/govuk/core/_theme.scss
new file mode 100644
index 000000000..ae33b69dc
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/core/_theme.scss
@@ -0,0 +1,71 @@
+// This would likely go in a proper 'settings' file
+// and default to `false`.
+$govuk-theme-from-system: true !default;
+
+@mixin _govuk-theme-light() {
+  color-scheme: light;
+
+  --govuk-brand-colour: #{$govuk-brand-colour};
+  --govuk-text-colour: #{$govuk-text-colour};
+  --govuk-canvas-background-colour: #{$govuk-canvas-background-colour};
+  --govuk-body-background-colour: #{$govuk-body-background-colour};
+  --govuk-print-text-colour: #{$govuk-print-text-colour};
+  --govuk-secondary-text-colour: #{$govuk-secondary-text-colour};
+  --govuk-focus-colour: #{$govuk-focus-colour};
+  --govuk-focus-text-colour: #{$govuk-focus-text-colour};
+  --govuk-error-colour: #{$govuk-error-colour};
+  --govuk-success-colour: #{$govuk-success-colour};
+  --govuk-border-colour: #{$govuk-border-colour};
+  --govuk-input-border-colour: #{$govuk-input-border-colour};
+  --govuk-hover-colour: #{$govuk-hover-colour};
+  --govuk-link-colour: #{$govuk-link-colour};
+  --govuk-link-visited-colour: #{$govuk-link-visited-colour};
+  --govuk-link-hover-colour: #{$govuk-link-hover-colour};
+  --govuk-link-active-colour: #{$govuk-link-active-colour};
+}
+
+@mixin _govuk-theme-dark() {
+  @supports (color-scheme: dark) {
+    color-scheme: dark;
+
+    --govuk-canvas-background-colour: #333333;
+    --govuk-body-background-colour: #222222;
+    --govuk-text-colour: #ffffff;
+    --govuk-secondary-text-colour: #cccccc;
+    --govuk-link-colour: #add8e6;
+    --govuk-link-visited-colour: #ffb6c1;
+    --govuk-link-hover-colour: #00ffff;
+    --govuk-link-active-colour: #ffffff;
+  }
+}
+
+@include govuk-exports("govuk/core/theme") {
+  :root {
+    @include _govuk-theme-light;
+
+    @if $govuk-theme-from-system {
+      @include govuk-media-query($media-type: screen, $and: "(prefers-color-scheme: dark)") {
+        &:not(.govuk-theme--light) {
+          @include _govuk-theme-dark;
+        }
+      }
+    }
+  }
+
+  // Prevent dark theme to leak into print if some variables don't get overridden
+  // reducing the risk of printing big areas of black
+  @include govuk-media-query($media-type: screen) {
+    .govuk-theme--dark {
+      @include _govuk-theme-dark;
+    }
+  }
+
+  @include govuk-media-query($media-type: print) {
+    :root {
+      --govuk-text-colour: #{$govuk-print-text-colour};
+      --govuk-font-family: #{$govuk-font-family-print};
+    }
+  }
+}
+
+/*# sourceMappingURL=_theme.scss.map */
diff --git a/packages/govuk-frontend/dist/govuk/core/_typography.scss b/packages/govuk-frontend/dist/govuk/core/_typography.scss
index 5bc6cb4a0..ce227f9b8 100644
--- a/packages/govuk-frontend/dist/govuk/core/_typography.scss
+++ b/packages/govuk-frontend/dist/govuk/core/_typography.scss
@@ -66,7 +66,7 @@
 
     margin-bottom: govuk-spacing(1);
 
-    color: $govuk-secondary-text-colour;
+    color: var(--govuk-secondary-text-colour);
   }
 
   .govuk-caption-l {
@@ -75,7 +75,7 @@
     display: block;
 
     margin-bottom: govuk-spacing(1);
-    color: $govuk-secondary-text-colour;
+    color: var(--govuk-secondary-text-colour);
 
     @include govuk-media-query($from: tablet) {
       margin-bottom: 0;
@@ -87,7 +87,7 @@
 
     display: block;
 
-    color: $govuk-secondary-text-colour;
+    color: var(--govuk-secondary-text-colour);
   }
 
   // Body (paragraphs)
diff --git a/packages/govuk-frontend/dist/govuk/helpers/_links.scss b/packages/govuk-frontend/dist/govuk/helpers/_links.scss
index 2c769d1c5..79554cd8f 100644
--- a/packages/govuk-frontend/dist/govuk/helpers/_links.scss
+++ b/packages/govuk-frontend/dist/govuk/helpers/_links.scss
@@ -11,6 +11,7 @@
 @mixin govuk-link-common {
   @include govuk-typography-common;
   @include govuk-link-decoration;
+  @include govuk-link-colours;
 
   &:hover {
     @include govuk-link-hover-decoration;
@@ -21,6 +22,24 @@
   }
 }
 
+@mixin govuk-link-colours {
+  &:link {
+    color: var(--govuk-link-colour);
+  }
+
+  &:visited {
+    color: var(--govuk-link-visited-colour);
+  }
+
+  &:hover {
+    color: var(--govuk-link-hover-colour);
+  }
+
+  &:active {
+    color: var(--govuk-link-active-colour);
+  }
+}
+
 /// Link decoration
 ///
 /// Provides the text decoration for links, including thickness and underline
@@ -75,27 +94,7 @@
 /// @access public
 
 @mixin govuk-link-style-default {
-  &:link {
-    color: $govuk-link-colour;
-  }
 
-  &:visited {
-    color: $govuk-link-visited-colour;
-  }
-
-  &:hover {
-    color: $govuk-link-hover-colour;
-  }
-
-  &:active {
-    color: $govuk-link-active-colour;
-  }
-
-  // When focussed, the text colour needs to be darker to ensure that colour
-  // contrast is still acceptable
-  &:focus {
-    color: $govuk-focus-text-colour;
-  }
 }
 
 /// Error link styles
@@ -115,24 +114,10 @@
 /// @access public
 
 @mixin govuk-link-style-error {
-  &:link,
-  &:visited {
-    color: $govuk-error-colour;
-  }
-
-  &:hover {
-    color: scale-color($govuk-error-colour, $lightness: -30%);
-  }
-
-  &:active {
-    color: $govuk-error-colour;
-  }
-
-  // When focussed, the text colour needs to be darker to ensure that colour
-  // contrast is still acceptable
-  &:focus {
-    color: $govuk-focus-text-colour;
-  }
+  --govuk-link-colour: #{$govuk-error-colour};
+  --govuk-link-visited-colour: #{$govuk-error-colour};
+  --govuk-link-hover-colour: #{scale-color($govuk-error-colour, $lightness: -30%)};
+  --govuk-link-active-colour: #{$govuk-error-colour};
 }
 
 /// Success link styles
@@ -152,24 +137,10 @@
 /// @access public
 
 @mixin govuk-link-style-success {
-  &:link,
-  &:visited {
-    color: $govuk-success-colour;
-  }
-
-  &:hover {
-    color: scale-color($govuk-success-colour, $lightness: -30%);
-  }
-
-  &:active {
-    color: $govuk-success-colour;
-  }
-
-  // When focussed, the text colour needs to be darker to ensure that colour
-  // contrast is still acceptable
-  &:focus {
-    color: $govuk-focus-text-colour;
-  }
+  --govuk-link-colour: #{$govuk-success-colour};
+  --govuk-link-visited-colour: #{$govuk-success-colour};
+  --govuk-link-hover-colour: #{scale-color($govuk-success-colour, $lightness: -30%)};
+  --govuk-link-active-colour: #{$govuk-success-colour};
 }
 
 /// Muted link styles
@@ -189,21 +160,10 @@
 /// @access public
 
 @mixin govuk-link-style-muted {
-  &:link,
-  &:visited {
-    color: $govuk-secondary-text-colour;
-  }
-
-  &:hover,
-  &:active {
-    color: $govuk-text-colour;
-  }
-
-  // When focussed, the text colour needs to be darker to ensure that colour
-  // contrast is still acceptable
-  &:focus {
-    color: $govuk-focus-text-colour;
-  }
+  --govuk-link-colour: var(--govuk-secondary-text-colour);
+  --govuk-link-visited-colour: var(--govuk-secondary-text-colour);
+  --govuk-link-hover-colour: var(--govuk-text-colour);
+  --govuk-link-active-colour: var(--govuk-text-colour);
 }
 
 /// Text link styles
@@ -223,23 +183,13 @@
 /// @access public
 
 @mixin govuk-link-style-text {
-  &:link,
-  &:visited {
-    @include govuk-text-colour;
-  }
+  --govuk-link-colour: var(--govuk-text-colour);
+  --govuk-link-visited-colour: var(--govuk-text-colour);
 
   // Force a colour change on hover to work around a bug in Safari
   // https://bugs.webkit.org/show_bug.cgi?id=224483
-  &:hover {
-    @if type-of($govuk-text-colour) == color {
-      color: rgba($govuk-text-colour, 0.99);
-    }
-  }
-
-  &:active,
-  &:focus {
-    @include govuk-text-colour;
-  }
+  --govuk-link-hover-colour: #{"hsl(from var(--govuk-text-colour) h s l / 0.99)"};
+  --govuk-link-active-colour: var(--govuk-text-colour);
 }
 
 /// Inverse link styles
@@ -259,21 +209,13 @@
 /// @access public
 
 @mixin govuk-link-style-inverse {
-  &:link,
-  &:visited {
-    color: govuk-colour("white");
-  }
+  --govuk-link-colour: #{govuk-colour("white")};
+  --govuk-link-visited-colour: #{govuk-colour("white")};
 
   // Force a colour change on hover to work around a bug in Safari
   // https://bugs.webkit.org/show_bug.cgi?id=224483
-  &:hover,
-  &:active {
-    color: rgba(govuk-colour("white"), 0.99);
-  }
-
-  &:focus {
-    color: $govuk-focus-text-colour;
-  }
+  --govuk-link-hover-colour: #{rgba(govuk-colour("white"), 0.99)};
+  --govuk-link-active-colour: #{govuk-colour("white")};
 }
 
 /// Default link styles, without a visited state
@@ -297,27 +239,7 @@
 /// @access public
 
 @mixin govuk-link-style-no-visited-state {
-  &:link {
-    color: $govuk-link-colour;
-  }
-
-  &:visited {
-    color: $govuk-link-colour;
-  }
-
-  &:hover {
-    color: $govuk-link-hover-colour;
-  }
-
-  &:active {
-    color: $govuk-link-active-colour;
-  }
-
-  // When focussed, the text colour needs to be darker to ensure that colour
-  // contrast is still acceptable
-  &:focus {
-    color: $govuk-focus-text-colour;
-  }
+  --govuk-link-visited-colour: var(--govuk-link-colour);
 }
 
 /// Remove underline from links
diff --git a/packages/govuk-frontend/dist/govuk/helpers/_typography.scss b/packages/govuk-frontend/dist/govuk/helpers/_typography.scss
index 57b9959e9..b41b308ff 100644
--- a/packages/govuk-frontend/dist/govuk/helpers/_typography.scss
+++ b/packages/govuk-frontend/dist/govuk/helpers/_typography.scss
@@ -13,7 +13,7 @@
 /// @access public
 
 @mixin govuk-typography-common($font-family: $govuk-font-family) {
-  font-family: $font-family;
+  font-family: var(--govuk-font-family);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
@@ -22,10 +22,6 @@
   @if $govuk-include-default-font-face {
     @include _govuk-font-face-gds-transport;
   }
-
-  @include govuk-media-query($media-type: print) {
-    font-family: $govuk-font-family-print;
-  }
 }
 
 /// Text colour helper
@@ -35,11 +31,7 @@
 /// @access public
 
 @mixin govuk-text-colour {
-  color: $govuk-text-colour;
-
-  @include govuk-media-query($media-type: print) {
-    color: $govuk-print-text-colour;
-  }
+  color: var(--govuk-text-colour);
 }
 
 /// Regular font weight helper
diff --git a/packages/govuk-frontend/dist/govuk/objects/_template.scss b/packages/govuk-frontend/dist/govuk/objects/_template.scss
index 00d0d438d..4664d2f0e 100644
--- a/packages/govuk-frontend/dist/govuk/objects/_template.scss
+++ b/packages/govuk-frontend/dist/govuk/objects/_template.scss
@@ -5,7 +5,7 @@
   .govuk-template {
     // Set the overall page background colour to the same colour as used by the
     // footer to give the illusion of a long footer.
-    background-color: $govuk-canvas-background-colour;
+    background-color: var(--govuk-canvas-background-colour);
 
     // Prevent automatic text sizing, as we already cater for small devices and
     // would like the browser to stay on 100% text zoom by default.
@@ -46,7 +46,7 @@
     // own containers.
     margin: 0;
     // Set the overall body of the page back to the typical background colour.
-    background-color: $govuk-body-background-colour;
+    background-color: var(--govuk-body-background-colour);
   }
 }
 
diff --git a/packages/govuk-frontend/dist/govuk/settings/_colours-applied.scss b/packages/govuk-frontend/dist/govuk/settings/_colours-applied.scss
index cb82b867d..7be50bfcd 100644
--- a/packages/govuk-frontend/dist/govuk/settings/_colours-applied.scss
+++ b/packages/govuk-frontend/dist/govuk/settings/_colours-applied.scss
@@ -120,7 +120,7 @@ $govuk-input-border-colour: govuk-colour("black") !default;
 /// @type Colour
 /// @access public
 
-$govuk-hover-colour: govuk-colour("mid-grey") !default;
+$govuk-hover-colour: govuk-colour("light-grey") !default;
 
 // =============================================================================
 // Links

Action run for ebbfca6

36degrees and others added 22 commits April 8, 2024 10:59
@36degrees @romaricpascal
Expose applied colour palette as CSS variables
aac4bd4
@36degrees @romaricpascal
Use css variables for backgrounds and body text
e7d7694
@36degrees @romaricpascal
Fix the header referencing hardcoded white
f32f79f
@36degrees @romaricpascal
Update secondary colour references to use CSS variables
4b6ccfd
@36degrees @romaricpascal
fixup! Use css variables for backgrounds and body text
1f565e2
@36degrees @romaricpascal
Update most link styles to use CSS variables
9859156
@36degrees @romaricpascal
Fake a dark mode in review app
eb3e587
@36degrees @romaricpascal
Fix cookie banner background colour
9a16d63
@36degrees @romaricpascal
Avoid using dark mode when printing
21c7c6c
@36degrees @romaricpascal
Use CSS variables for font and color when printing
7f4b75f
@romaricpascal
Update error-summary to take advantage of link custom properties
e840534
@romaricpascal
Set appropriate color-scheme when using a dark theme
aa4b642 
This swaps browser UI elements like the button of file uploads to their dark theme, enabling better contrast with our text colour in dark mode
@36degrees @romaricpascal
Fix warning text
822ef4b
@36degrees @romaricpascal
Update references to brand colour to use CSS properties
f84f48e 
Excluding button for now as it uses tints and shades.
@36degrees @romaricpascal
Fix focus state for text colour links
a8d9c6c
@36degrees @romaricpascal
Fix hover state for text style links
4b28dd6
@36degrees @romaricpascal
Fix accordion and details
c24ade1
@36degrees @romaricpascal
Update hovery things to use CSS property
8391c10 
This also involves switching the small radios and checkboxes to use light-grey in ‘light mode’ in order to avoid having two different hover colours defined.

This is only because it’s the easier thing to do, not because this is what we should do.
@36degrees @romaricpascal
Revert "Update error-summary to take advantage of link custom propert…
1bf3983 
…ies"

This reverts commit c12bd93.
@36degrees @romaricpascal
Add modifier classes for error and success link styles
b520450
@36degrees @romaricpascal
Simplify link styles using CSS properties
9b2f931
@romaricpascal
Fix older Sass versions confusing native hsl with Sass hsl
3e5403a
@romaricpascal
Extract custom property values for the light scheme into a mixin
aa36128 
This will help when setting them if the use choses to force a light mode
@romaricpascal
Move dark theme colours into their own mixin
9c08702
@romaricpascal
Extract all theme related code in a 'theme' module
88dd1ec 
That'll make things easier to edit in a single place
@romaricpascal
Add media query for setting theme based on system preference
7dba661
@romaricpascal
Add class for overriding system preference with a light theme
2bb3b94
@romaricpascal
Add middleware to review app to set specific theme based on query params
764858c 
No persistence implemented
@romaricpascal
Move color-scheme declarations in mixins
8d83296
@romaricpascal
Add setting to enable/disable setting the theme from system preferences
775a404
@romaricpascal
Condition variables for dark mode to support of color-scheme
e920075 
This ensures that native controls like file inputs will have proper text contrast, as some browsers will change the text of the button based on the colour set on the input, resulting in a white on light grey
@romaricpascal
Merge pull request #4921 from alphagov/spike-css-custom-properties-us…
ebbfca6 
…er-preference

[SPIKE] Allow an app to respect system preference, or override them with app preference it would store
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@romaricpascal @govuk-design-system-ci @36degrees