search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.18k stars 325 forks source link

DRAFT: dark mode palette #4931

Closed christopherthomasdesign closed 6 months ago

christopherthomasdesign commented 7 months ago

Draft PR for sharing very early ideas on a dark mode palette.

Please see https://github.com/alphagov/govuk-design-system/issues/3663 for more context.

Note that this is not a commitment from the Design System team to roll out dark mode across GOV.UK any time soon! It's part of a series of experiments we're doing to potentially support embedded web views within the One Login app.

github-actions[bot] commented 7 months ago

:clipboard: Stats

File sizes

File Size
dist/govuk-frontend-development.min.css 113.18 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 113.17 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 4672a717df89617e31d0d7f0b8ccbdd95199a830

github-actions[bot] commented 7 months ago

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..0aede7d75 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -57,18 +57,21 @@
 }

 .govuk-link:link {
-    color: #1d70b8
+    color: #3892e0
 }

 .govuk-link:visited {
-    color: #4c2c92
+    color: #9d80db
 }

 .govuk-link:hover {
-    color: #003078
+    color: #5ca5e6
+}
+
+.govuk-link:active {
+    color: #fff
 }

-.govuk-link:active,
 .govuk-link:focus {
     color: #0b0c0c
 }
@@ -86,15 +89,21 @@

 .govuk-link--muted:link,
 .govuk-link--muted:visited {
-    color: #505a5f
+    color: #ccc
 }

 .govuk-link--muted:active,
-.govuk-link--muted:focus,
-.govuk-link--muted:hover,
+.govuk-link--muted:hover {
+    color: #fff
+}
+
+.govuk-link--muted:focus {
+    color: #0b0c0c
+}
+
 .govuk-link--text-colour:link,
 .govuk-link--text-colour:visited {
-    color: #0b0c0c
+    color: #fff
 }

 @media print {
@@ -106,12 +115,12 @@
 }

 .govuk-link--text-colour:hover {
-    color: rgba(11, 12, 12, .99)
+    color: hsla(0, 0%, 100%, .99)
 }

 .govuk-link--text-colour:active,
 .govuk-link--text-colour:focus {
-    color: #0b0c0c
+    color: #fff
 }

 @media print {
@@ -142,14 +151,17 @@

 .govuk-link--no-visited-state:link,
 .govuk-link--no-visited-state:visited {
-    color: #1d70b8
+    color: #3892e0
 }

 .govuk-link--no-visited-state:hover {
-    color: #003078
+    color: #5ca5e6
+}
+
+.govuk-link--no-visited-state:active {
+    color: #fff
 }

-.govuk-link--no-visited-state:active,
 .govuk-link--no-visited-state:focus {
     color: #0b0c0c
 }
@@ -172,7 +184,7 @@
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: #fff;
     margin-top: 0;
     margin-bottom: 15px;
     padding-left: 0;
@@ -248,7 +260,7 @@
 }

 .govuk-heading-xl {
-    color: #0b0c0c;
+    color: #fff;
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -288,7 +300,7 @@
 }

 .govuk-heading-l {
-    color: #0b0c0c;
+    color: #fff;
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -328,7 +340,7 @@
 }

 .govuk-heading-m {
-    color: #0b0c0c;
+    color: #fff;
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -368,7 +380,7 @@
 }

 .govuk-heading-s {
-    color: #0b0c0c;
+    color: #fff;
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -416,7 +428,7 @@
     line-height: 1.1111111111;
     display: block;
     margin-bottom: 5px;
-    color: #505a5f
+    color: #ccc
 }

 @media print {
@@ -448,7 +460,7 @@
     line-height: 1.1111111111;
     display: block;
     margin-bottom: 5px;
-    color: #505a5f
+    color: #ccc
 }

 @media print {
@@ -485,7 +497,7 @@
     font-size: 1rem;
     line-height: 1.25;
     display: block;
-    color: #505a5f
+    color: #ccc
 }

 @media print {
@@ -510,7 +522,7 @@

 .govuk-body-l,
 .govuk-body-lead {
-    color: #0b0c0c;
+    color: #fff;
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -558,7 +570,7 @@

 .govuk-body,
 .govuk-body-m {
-    color: #0b0c0c;
+    color: #fff;
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -605,7 +617,7 @@
 }

 .govuk-body-s {
-    color: #0b0c0c;
+    color: #fff;
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -644,7 +656,7 @@
 }

 .govuk-body-xs {
-    color: #0b0c0c;
+    color: #fff;
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -873,7 +885,7 @@

 .govuk-form-group--error {
     padding-left: 15px;
-    border-left: 5px solid #d4351c
+    border-left: 5px solid #e96753
 }

 .govuk-form-group--error .govuk-form-group {
@@ -1069,7 +1081,7 @@
 }

 .govuk-template {
-    background-color: #f3f2f1;
+    background-color: #263136;
     -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
     text-size-adjust: 100%
@@ -1093,7 +1105,7 @@

 .govuk-template__body {
     margin: 0;
-    background-color: #fff
+    background-color: #1e1f21
 }

 .govuk-width-container {
@@ -1165,7 +1177,7 @@
     font-weight: 700;
     font-size: 1.125rem;
     line-height: 1.1111111111;
-    color: #0b0c0c;
+    color: #fff;
     display: block;
     margin-bottom: 0;
     padding-top: 15px
@@ -1244,7 +1256,7 @@
     margin-bottom: 9px;
     padding: 5px 2px 5px 0;
     border-width: 0;
-    color: #1d70b8;
+    color: #3892e0;
     background: none;
     cursor: pointer;
     -webkit-appearance: none
@@ -1282,22 +1294,22 @@
 }

 .govuk-frontend-supported .govuk-accordion__show-all:hover {
-    color: #0b0c0c;
-    background: #f3f2f1;
-    box-shadow: 0 -2px #f3f2f1, 0 4px #f3f2f1
+    color: #fff;
+    background: #0b0c0c;
+    box-shadow: 0 -2px #0b0c0c, 0 4px #0b0c0c
 }

 .govuk-frontend-supported .govuk-accordion__show-all:hover .govuk-accordion__section-toggle-text {
-    color: #0b0c0c
+    color: #fff
 }

 .govuk-frontend-supported .govuk-accordion__show-all:hover .govuk-accordion-nav__chevron {
-    color: #0b0c0c;
-    background: #0b0c0c
+    color: #fff;
+    background: #fff
 }

 .govuk-frontend-supported .govuk-accordion__show-all:hover .govuk-accordion-nav__chevron:after {
-    color: #f3f2f1
+    color: #0b0c0c
 }

 .govuk-frontend-supported .govuk-accordion__show-all:focus {
@@ -1311,7 +1323,7 @@
 }

 .govuk-frontend-supported .govuk-accordion__show-all:focus .govuk-accordion-nav__chevron {
-    background: #0b0c0c
+    background: #fff
 }

 .govuk-frontend-supported .govuk-accordion__show-all:focus .govuk-accordion-nav__chevron:after {
@@ -1357,7 +1369,7 @@
     border: 0;
     border-top: 1px solid #b1b4b6;
     border-bottom: 10px solid transparent;
-    color: #0b0c0c;
+    color: #fff;
     background: none;
     text-align: left;
     cursor: pointer;
@@ -1371,26 +1383,26 @@
 }

 .govuk-frontend-supported .govuk-accordion__section-button:active {
-    color: #0b0c0c;
+    color: #fff;
     background: none
 }

 .govuk-frontend-supported .govuk-accordion__section-button:hover {
-    color: #0b0c0c;
-    background: #f3f2f1
+    color: #fff;
+    background: #0b0c0c
 }

 .govuk-frontend-supported .govuk-accordion__section-button:hover .govuk-accordion__section-toggle-text {
-    color: #0b0c0c
+    color: #fff
 }

 .govuk-frontend-supported .govuk-accordion__section-button:hover .govuk-accordion-nav__chevron {
-    color: #0b0c0c;
-    background: #0b0c0c
+    color: #fff;
+    background: #fff
 }

 .govuk-frontend-supported .govuk-accordion__section-button:hover .govuk-accordion-nav__chevron:after {
-    color: #f3f2f1
+    color: #0b0c0c
 }

 .govuk-frontend-supported .govuk-accordion__section-button:focus {
@@ -1410,8 +1422,8 @@
 }

 .govuk-frontend-supported .govuk-accordion__section-button:focus .govuk-accordion-nav__chevron {
-    color: #0b0c0c;
-    background: #0b0c0c
+    color: #fff;
+    background: #fff
 }

 .govuk-frontend-supported .govuk-accordion__section-button:focus .govuk-accordion-nav__chevron:after {
@@ -1467,7 +1479,7 @@
     font-size: 1rem;
     line-height: 1.25;
     font-weight: 400;
-    color: #1d70b8
+    color: #3892e0
 }

 @media (min-width:40.0625em) {
@@ -1513,7 +1525,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 #3892e0
     }

     .govuk-frontend-supported .govuk-accordion__section-header:hover .govuk-accordion__section-button {
@@ -1572,7 +1584,7 @@

 .govuk-back-link:link,
 .govuk-back-link:visited {
-    color: #0b0c0c
+    color: #fff
 }

 @media print {
@@ -1584,12 +1596,12 @@
 }

 .govuk-back-link:hover {
-    color: rgba(11, 12, 12, .99)
+    color: hsla(0, 0%, 100%, .99)
 }

 .govuk-back-link:active,
 .govuk-back-link:focus {
-    color: #0b0c0c
+    color: #fff
 }

 @media print {
@@ -1613,7 +1625,7 @@
     transform: rotate(225deg);
     border: solid;
     border-width: 1px 1px 0 0;
-    border-color: #505a5f
+    border-color: #ccc
 }

 @supports (border-width:max(0px)) {
@@ -1661,7 +1673,7 @@
     font-weight: 400;
     font-size: .875rem;
     line-height: 1.1428571429;
-    color: #0b0c0c;
+    color: #fff;
     margin-top: 15px;
     margin-bottom: 10px
 }
@@ -1721,7 +1733,7 @@
     transform: rotate(45deg);
     border: solid;
     border-width: 1px 1px 0 0;
-    border-color: #505a5f
+    border-color: #ccc
 }

 @supports (border-width:max(0px)) {
@@ -1776,7 +1788,7 @@

 .govuk-breadcrumbs__link:link,
 .govuk-breadcrumbs__link:visited {
-    color: #0b0c0c
+    color: #fff
 }

 @media print {
@@ -1788,12 +1800,12 @@
 }

 .govuk-breadcrumbs__link:hover {
-    color: rgba(11, 12, 12, .99)
+    color: hsla(0, 0%, 100%, .99)
 }

 .govuk-breadcrumbs__link:active,
 .govuk-breadcrumbs__link:focus {
-    color: #0b0c0c
+    color: #fff
 }

 @media print {
@@ -1859,8 +1871,8 @@
     border: 2px solid transparent;
     border-radius: 0;
     color: #fff;
-    background-color: #00703c;
-    box-shadow: 0 2px 0 #002d18;
+    background-color: #00a357;
+    box-shadow: 0 2px 0 #006234;
     text-align: center;
     vertical-align: top;
     cursor: pointer;
@@ -1908,7 +1920,7 @@
 }

 .govuk-button:hover {
-    background-color: #005a30
+    background-color: #008246
 }

 .govuk-button:active {
@@ -1948,13 +1960,13 @@
 }

 .govuk-button[disabled]:hover {
-    background-color: #00703c;
+    background-color: #00a357;
     cursor: not-allowed
 }

 .govuk-button[disabled]:active {
     top: 0;
-    box-shadow: 0 2px 0 #002d18
+    box-shadow: 0 2px 0 #006234
 }

 .govuk-button--secondary {
@@ -2068,7 +2080,7 @@
     margin-top: 0;
     margin-bottom: 15px;
     clear: both;
-    color: #d4351c
+    color: #e96753
 }

 @media print {
@@ -2099,7 +2111,7 @@
     font-size: 1rem;
     line-height: 1.25;
     margin-bottom: 15px;
-    color: #505a5f
+    color: #ccc
 }

 @media print {
@@ -2138,7 +2150,7 @@
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: #fff;
     display: block;
     margin-bottom: 5px
 }
@@ -2250,8 +2262,10 @@
     margin-bottom: 20px;
     padding: 5px;
     resize: vertical;
-    border: 2px solid #0b0c0c;
+    border: 2px solid #fff;
     border-radius: 0;
+    color: #fff;
+    background-color: #1e1f21;
     -webkit-appearance: none
 }

@@ -2295,11 +2309,11 @@
 }

 .govuk-textarea--error {
-    border-color: #d4351c
+    border-color: #e96753
 }

 .govuk-textarea--error:focus {
-    border-color: #0b0c0c
+    border-color: #fff
 }

 .govuk-character-count {
@@ -2359,7 +2373,7 @@
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: #fff;
     box-sizing: border-box;
     display: table;
     max-width: 100%;
@@ -2568,7 +2582,7 @@ screen and (forced-colors:active) {
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: #fff;
     width: 40px;
     margin-bottom: 10px;
     text-align: center
@@ -2679,8 +2693,8 @@ screen and (forced-colors:active) {

 .govuk-cookie-banner {
     padding-top: 20px;
-    border-bottom: 10px solid transparent;
-    background-color: #f3f2f1
+    border-bottom: 1px solid #b1b4b6;
+    background-color: #263136
 }

 .govuk-cookie-banner[hidden] {
@@ -2711,8 +2725,10 @@ screen and (forced-colors:active) {
     height: 2.5rem;
     margin-top: 0;
     padding: 5px;
-    border: 2px solid #0b0c0c;
+    border: 2px solid #fff;
     border-radius: 0;
+    color: #fff;
+    background-color: #1e1f21;
     -webkit-appearance: none;
     appearance: none
 }
@@ -2761,11 +2777,11 @@ screen and (forced-colors:active) {
 }

 .govuk-input--error {
-    border-color: #d4351c
+    border-color: #e96753
 }

 .govuk-input--error:focus {
-    border-color: #0b0c0c
+    border-color: #fff
 }

 .govuk-input--extra-letter-spacing {
@@ -2838,7 +2854,7 @@ screen and (forced-colors:active) {
     min-width: 2.5rem;
     height: 2.5rem;
     padding: 5px;
-    border: 2px solid #0b0c0c;
+    border: 2px solid #fff;
     background-color: #f3f2f1;
     text-align: center;
     white-space: nowrap;
@@ -2935,7 +2951,7 @@ screen and (forced-colors:active) {
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: #fff;
     margin-bottom: 20px;
     display: block
 }
@@ -3022,12 +3038,12 @@ screen and (forced-colors:active) {
     .govuk-details__summary {
         position: relative;
         padding-left: 25px;
-        color: #1d70b8;
+        color: #3892e0;
         cursor: pointer
     }

     .govuk-details__summary:hover {
-        color: #003078
+        color: #5ca5e6
     }

     .govuk-details__summary:focus {
@@ -3104,10 +3120,10 @@ screen and (forced-colors:active) {
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: #fff;
     padding: 15px;
     margin-bottom: 30px;
-    border: 5px solid #d4351c
+    border: 5px solid #e96753
 }

 @media print {
@@ -3221,15 +3237,15 @@ screen and (forced-colors:active) {

 .govuk-error-summary__list a:link,
 .govuk-error-summary__list a:visited {
-    color: #d4351c
+    color: #e96753
 }

 .govuk-error-summary__list a:hover {
-    color: #942514
+    color: #c43019
 }

 .govuk-error-summary__list a:active {
-    color: #d4351c
+    color: #e96753
 }

 .govuk-error-summary__list a:focus {
@@ -3319,7 +3335,7 @@ screen and (forced-colors:active) {
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: #fff;
     max-width: 100%;
     margin-left: -5px;
     padding: 5px
@@ -3348,18 +3364,18 @@ screen and (forced-colors:active) {

 .govuk-file-upload::-webkit-file-upload-button {
     -webkit-appearance: button;
-    color: inherit;
+    color: #0b0c0c;
     font: inherit
 }

 .govuk-file-upload:focus {
     outline: 3px solid #fd0;
-    box-shadow: inset 0 0 0 4px #0b0c0c
+    box-shadow: inset 0 0 0 4px #fff
 }

 .govuk-file-upload:focus-within {
     outline: 3px solid #fd0;
-    box-shadow: inset 0 0 0 4px #0b0c0c
+    box-shadow: inset 0 0 0 4px #fff
 }

 .govuk-file-upload:disabled {
@@ -3377,8 +3393,8 @@ screen and (forced-colors:active) {
     padding-top: 25px;
     padding-bottom: 15px;
     border-top: 1px solid #b1b4b6;
-    color: #0b0c0c;
-    background: #f3f2f1
+    color: #fff;
+    background: #263136
 }

 @media print {
@@ -3443,7 +3459,7 @@ screen and (forced-colors:active) {

 .govuk-footer__link:link,
 .govuk-footer__link:visited {
-    color: #0b0c0c
+    color: #fff
 }

 @media print {
@@ -3455,12 +3471,12 @@ screen and (forced-colors:active) {
 }

 .govuk-footer__link:hover {
-    color: rgba(11, 12, 12, .99)
+    color: hsla(0, 0%, 100%, .99)
 }

 .govuk-footer__link:active,
 .govuk-footer__link:focus {
-    color: #0b0c0c
+    color: #fff
 }

 @media print {
@@ -3628,7 +3644,7 @@ only screen and (min-resolution:2dppx) {
     font-weight: 400;
     font-size: .875rem;
     line-height: 1;
-    border-bottom: 10px solid #fff;
+    border-bottom: 10px solid #1e1f21;
     color: #fff;
     background: #0b0c0c
 }
@@ -4053,7 +4069,7 @@ only screen and (min-resolution:2dppx) {
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: #fff;
     padding: 15px;
     margin-top: 20px;
     margin-bottom: 20px;
@@ -4175,9 +4191,9 @@ only screen and (min-resolution:2dppx) {
 }

 .govuk-notification-banner__content {
-    color: #0b0c0c;
+    color: #fff;
     padding: 15px;
-    background-color: #fff
+    background-color: #1e1f21
 }

 @media print {
@@ -4257,34 +4273,37 @@ only screen and (min-resolution:2dppx) {

 .govuk-notification-banner__link:link,
 .govuk-notification-banner__link:visited {
-    color: #1d70b8
+    color: #3892e0
 }

 .govuk-notification-banner__link:hover {
-    color: #003078
+    color: #5ca5e6
+}
+
+.govuk-notification-banner__link:active {
+    color: #fff
 }

-.govuk-notification-banner__link:active,
 .govuk-notification-banner__link:focus {
     color: #0b0c0c
 }

 .govuk-notification-banner--success {
-    border-color: #00703c;
-    background-color: #00703c
+    border-color: #00a357;
+    background-color: #00a357
 }

 .govuk-notification-banner--success .govuk-notification-banner__link:link,
 .govuk-notification-banner--success .govuk-notification-banner__link:visited {
-    color: #00703c
+    color: #00a357
 }

 .govuk-notification-banner--success .govuk-notification-banner__link:hover {
-    color: #004e2a
+    color: #00723d
 }

 .govuk-notification-banner--success .govuk-notification-banner__link:active {
-    color: #00703c
+    color: #00a357
 }

 .govuk-notification-banner--success .govuk-notification-banner__link:focus {
@@ -4362,7 +4381,7 @@ only screen and (min-resolution:2dppx) {
 .govuk-pagination__item:hover,
 .govuk-pagination__next:hover,
 .govuk-pagination__prev:hover {
-    background-color: #f3f2f1
+    background-color: #0b0c0c
 }

 .govuk-pagination__item {
@@ -4405,11 +4424,11 @@ only screen and (min-resolution:2dppx) {
 .govuk-pagination__item--current {
     font-weight: 700;
     outline: 1px solid transparent;
-    background-color: #1d70b8
+    background-color: #3892e0
 }

 .govuk-pagination__item--current:hover {
-    background-color: #1d70b8
+    background-color: #3892e0
 }

 .govuk-pagination__item--current .govuk-pagination__link:link,
@@ -4428,7 +4447,7 @@ only screen and (min-resolution:2dppx) {

 .govuk-pagination__item--ellipses {
     font-weight: 700;
-    color: #505a5f
+    color: #ccc
 }

 .govuk-pagination__item--ellipses:hover {
@@ -4490,7 +4509,7 @@ only screen and (min-resolution:2dppx) {
 .govuk-pagination__icon {
     width: .9375rem;
     height: .8125rem;
-    color: #505a5f;
+    color: #ccc;
     fill: currentcolor;
     forced-color-adjust: auto
 }
@@ -4781,7 +4800,7 @@ only screen and (min-resolution:2dppx) {
     font-weight: 400;
     font-size: .875rem;
     line-height: 1.1428571429;
-    color: #0b0c0c;
+    color: #fff;
     display: table;
     margin: 0
 }
@@ -4953,7 +4972,7 @@ screen and (forced-colors:active) {
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: #fff;
     width: 40px;
     margin-bottom: 10px;
     text-align: center
@@ -5077,9 +5096,9 @@ screen and (forced-colors:active) {
     max-width: 100%;
     height: 2.5rem;
     padding: 5px;
-    border: 2px solid #0b0c0c;
-    color: #0b0c0c;
-    background-color: #fff
+    border: 2px solid #fff;
+    color: #fff;
+    background-color: #1e1f21
 }

 @media print {
@@ -5122,11 +5141,11 @@ screen and (forced-colors:active) {
 }

 .govuk-select--error {
-    border-color: #d4351c
+    border-color: #e96753
 }

 .govuk-select--error:focus {
-    border-color: #0b0c0c
+    border-color: #fff
 }

 .govuk-skip-link {
@@ -5178,7 +5197,7 @@ screen and (forced-colors:active) {

 .govuk-skip-link:link,
 .govuk-skip-link:visited {
-    color: #0b0c0c
+    color: #fff
 }

 @media print {
@@ -5190,12 +5209,12 @@ screen and (forced-colors:active) {
 }

 .govuk-skip-link:hover {
-    color: rgba(11, 12, 12, .99)
+    color: hsla(0, 0%, 100%, .99)
 }

 .govuk-skip-link:active,
 .govuk-skip-link:focus {
-    color: #0b0c0c
+    color: #fff
 }

 @media print {
@@ -5244,7 +5263,7 @@ screen and (forced-colors:active) {
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: #fff;
     margin: 0 0 20px
 }

@@ -5471,7 +5490,7 @@ screen and (forced-colors:active) {
     font-weight: 700;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: #fff;
     margin: 5px 20px 10px 0
 }

@@ -5600,7 +5619,7 @@ screen and (-ms-high-contrast:active) {
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.25;
-    color: #0b0c0c;
+    color: #fff;
     width: 100%;
     margin-bottom: 20px;
     border-spacing: 0;
@@ -5770,7 +5789,7 @@ screen and (-ms-high-contrast:active) {
     font-size: 1rem;
     line-height: 1.25;
     font-weight: 400;
-    color: #0b0c0c;
+    color: #fff;
     margin-bottom: 10px
 }

@@ -5806,7 +5825,7 @@ screen and (-ms-high-contrast:active) {
 }

 .govuk-tabs__list-item:before {
-    color: #0b0c0c;
+    color: #fff;
     content: "—";
     margin-left: -25px;
     padding-right: 5px
@@ -5853,18 +5872,21 @@ screen and (-ms-high-contrast:active) {
 }

 .govuk-tabs__tab:link {
-    color: #1d70b8
+    color: #3892e0
 }

 .govuk-tabs__tab:visited {
-    color: #4c2c92
+    color: #9d80db
 }

 .govuk-tabs__tab:hover {
-    color: #003078
+    color: #5ca5e6
+}
+
+.govuk-tabs__tab:active {
+    color: #fff
 }

-.govuk-tabs__tab:active,
 .govuk-tabs__tab:focus {
     color: #0b0c0c
 }
@@ -5900,7 +5922,7 @@ screen and (-ms-high-contrast:active) {
         margin-left: 0;
         padding: 10px 20px;
         float: left;
-        background-color: #f3f2f1;
+        background-color: #263136;
         text-align: center
     }

@@ -5915,7 +5937,7 @@ screen and (-ms-high-contrast:active) {
         padding: 14px 19px 16px;
         border: 1px solid #b1b4b6;
         border-bottom: 0;
-        background-color: #fff
+        background-color: #1e1f21
     }

     .govuk-frontend-supported .govuk-tabs__list-item--selected .govuk-tabs__tab {
@@ -5928,7 +5950,7 @@ screen and (-ms-high-contrast:active) {

     .govuk-frontend-supported .govuk-tabs__tab:link,
     .govuk-frontend-supported .govuk-tabs__tab:visited {
-        color: #0b0c0c
+        color: #fff
     }
 }

@@ -5942,12 +5964,12 @@ screen and (-ms-high-contrast:active) {

 @media (min-width:40.0625em) {
     .govuk-frontend-supported .govuk-tabs__tab:hover {
-        color: rgba(11, 12, 12, .99)
+        color: hsla(0, 0%, 100%, .99)
     }

     .govuk-frontend-supported .govuk-tabs__tab:active,
     .govuk-frontend-supported .govuk-tabs__tab:focus {
-        color: #0b0c0c
+        color: #fff
     }
 }

@@ -6039,13 +6061,13 @@ screen and (-ms-high-contrast:active) {
 }

 .govuk-task-list__item--with-link:hover {
-    background: #f3f2f1
+    background: #0b0c0c
 }

 .govuk-task-list__name-and-hint {
     display: table-cell;
     vertical-align: top;
-    color: #0b0c0c
+    color: #fff
 }

 @media print {
@@ -6059,7 +6081,7 @@ screen and (-ms-high-contrast:active) {
     padding-left: 10px;
     text-align: right;
     vertical-align: top;
-    color: #0b0c0c
+    color: #fff
 }

 @media print {
@@ -6069,7 +6091,7 @@ screen and (-ms-high-contrast:active) {
 }

 .govuk-task-list__status--cannot-start-yet {
-    color: #505a5f
+    color: #ccc
 }

 .govuk-task-list__link:after {
@@ -6084,7 +6106,7 @@ screen and (-ms-high-contrast:active) {

 .govuk-task-list__hint {
     margin-top: 5px;
-    color: #505a5f
+    color: #ccc
 }

 .govuk-warning-text {
@@ -6134,10 +6156,10 @@ screen and (-ms-high-contrast:active) {
     min-width: 35px;
     min-height: 35px;
     margin-top: -7px;
-    border: 3px solid #0b0c0c;
+    border: 3px solid #fff;
     border-radius: 50%;
-    color: #fff;
-    background: #0b0c0c;
+    color: #1e1f21;
+    background: #fff;
     font-size: 30px;
     line-height: 29px;
     text-align: center;
@@ -6162,7 +6184,7 @@ screen and (-ms-high-contrast:active) {
 }

 .govuk-warning-text__text {
-    color: #0b0c0c;
+    color: #fff;
     display: block;
     padding-left: 45px
 }

Action run for 4672a717df89617e31d0d7f0b8ccbdd95199a830

github-actions[bot] commented 7 months ago

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..ada7927b3 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: govuk-colour("white");
+  $govuk-accordion-hover-colour: govuk-colour("black");
   $govuk-accordion-icon-focus-colour: $govuk-focus-colour;
   $govuk-accordion-bottom-border-width: 1px;

diff --git a/packages/govuk-frontend/dist/govuk/components/button/_index.scss b/packages/govuk-frontend/dist/govuk/components/button/_index.scss
index 0df98a4f8..a19d767a9 100644
--- a/packages/govuk-frontend/dist/govuk/components/button/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/button/_index.scss
@@ -6,8 +6,10 @@
 ///
 /// @type Colour
 /// @access public
+///
+/// Same green as govuk-success-colour

-$govuk-button-background-colour: govuk-colour("green") !default;
+$govuk-button-background-colour: #00a357 !default;

 /// Button component text colour
 ///
@@ -34,7 +36,7 @@ $govuk-inverse-button-text-colour: $govuk-brand-colour !default;
   $govuk-button-colour: $govuk-button-background-colour;
   $govuk-button-text-colour: $govuk-button-text-colour;
   $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);
-  $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
+  $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 40%);

   // Secondary button variables
   $govuk-secondary-button-colour: govuk-colour("light-grey");
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..72f26c2f3 100644
--- a/packages/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss
@@ -9,7 +9,7 @@

     // Visually separate the cookie banner from content underneath
     // when user changes colours in their browser.
-    border-bottom: $border-bottom-width solid transparent;
+    border-bottom: 1px solid $govuk-border-colour;

     background-color: $govuk-canvas-background-colour;
   }
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss b/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
index 5735689b0..f1011f82d 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
@@ -19,7 +19,7 @@
     // https://bugs.webkit.org/show_bug.cgi?id=224746
     &::-webkit-file-upload-button {
       -webkit-appearance: button;
-      color: inherit;
+      color: govuk-colour("black");
       font: inherit;
     }

diff --git a/packages/govuk-frontend/dist/govuk/components/header/_index.scss b/packages/govuk-frontend/dist/govuk/components/header/_index.scss
index 858595250..7689e0720 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/header/_index.scss
@@ -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 $govuk-body-background-colour;
     color: $govuk-header-text;
     background: $govuk-header-background;
   }
diff --git a/packages/govuk-frontend/dist/govuk/components/input/_index.scss b/packages/govuk-frontend/dist/govuk/components/input/_index.scss
index 694a0d214..651ba66bc 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/input/_index.scss
@@ -13,8 +13,10 @@
     padding: govuk-spacing(1);
     // setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
     // as background-color and color need to always be set together, color should not be set either
-    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+    border: $govuk-border-width-form-element solid govuk-colour("white");
     border-radius: 0;
+    color: $govuk-text-colour;
+    background-color: $govuk-body-background-colour;

     // Disable inner shadow and remove rounded corners
     -webkit-appearance: none;
diff --git a/packages/govuk-frontend/dist/govuk/components/pagination/_index.scss b/packages/govuk-frontend/dist/govuk/components/pagination/_index.scss
index 5f74f5bf6..6da49a195 100644
--- a/packages/govuk-frontend/dist/govuk/components/pagination/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/pagination/_index.scss
@@ -32,7 +32,7 @@
     float: left; // Float is ignored if flex is active for prev/next links

     &:hover {
-      background-color: govuk-colour("light-grey");
+      background-color: govuk-colour("black");
     }
   }

diff --git a/packages/govuk-frontend/dist/govuk/components/select/_index.scss b/packages/govuk-frontend/dist/govuk/components/select/_index.scss
index af2261030..59843a277 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/select/_index.scss
@@ -21,7 +21,7 @@
     // Default user agent colours for selects can have low contrast,
     // and may look disabled (#2435)
     color: $govuk-text-colour;
-    background-color: govuk-colour("white");
+    background-color: $govuk-body-background-colour;

     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/_index.scss b/packages/govuk-frontend/dist/govuk/components/tabs/_index.scss
index a0e628067..c4fc9d1ed 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/_index.scss
@@ -66,7 +66,7 @@
         padding: govuk-spacing(2) govuk-spacing(4);

         float: left;
-        background-color: govuk-colour("light-grey");
+        background-color: $govuk-canvas-background-colour;
         text-align: center;

         &::before {
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..06b9f2abb 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: govuk-colour("black");

   .govuk-task-list {
     @include govuk-font($size: 19);
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/_index.scss b/packages/govuk-frontend/dist/govuk/components/textarea/_index.scss
index 3945df09d..5e6bb9e52 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/_index.scss
@@ -18,6 +18,9 @@
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
     border-radius: 0;

+    color: $govuk-text-colour;
+    background-color: $govuk-body-background-colour;
+
     -webkit-appearance: none;

     &:focus {
diff --git a/packages/govuk-frontend/dist/govuk/settings/_colours-applied.scss b/packages/govuk-frontend/dist/govuk/settings/_colours-applied.scss
index cb82b867d..74dc1ffb3 100644
--- a/packages/govuk-frontend/dist/govuk/settings/_colours-applied.scss
+++ b/packages/govuk-frontend/dist/govuk/settings/_colours-applied.scss
@@ -20,7 +20,7 @@ $govuk-brand-colour: govuk-colour("blue") !default;
 /// @type Colour
 /// @access public

-$govuk-text-colour: govuk-colour("black") !default;
+$govuk-text-colour: #ffffff !default;

 /// Canvas background colour
 ///
@@ -30,14 +30,14 @@ $govuk-text-colour: govuk-colour("black") !default;
 /// @type Colour
 /// @access public

-$govuk-canvas-background-colour: govuk-colour("light-grey") !default;
+$govuk-canvas-background-colour: #263136 !default;

 /// Body background colour
 ///
 /// @type Colour
 /// @access public

-$govuk-body-background-colour: govuk-colour("white") !default;
+$govuk-body-background-colour: #1e1f21 !default;

 /// Text colour for print media
 ///
@@ -55,7 +55,7 @@ $govuk-print-text-colour: #000000 !default;
 /// @type Colour
 /// @access public

-$govuk-secondary-text-colour: govuk-colour("dark-grey") !default;
+$govuk-secondary-text-colour: #cccccc !default;

 /// Focus colour
 ///
@@ -83,8 +83,10 @@ $govuk-focus-text-colour: govuk-colour("black") !default;
 ///
 /// @type Colour
 /// @access public
+///
+/// Increased the luminance of existing red until it reached 5:1 contrast

-$govuk-error-colour: govuk-colour("red") !default;
+$govuk-error-colour: #e96753 !default;

 /// Success colour
 ///
@@ -92,8 +94,10 @@ $govuk-error-colour: govuk-colour("red") !default;
 ///
 /// @type Colour
 /// @access public
+///
+/// Increased the luminance of existing green until it reached 5:1 contrast

-$govuk-success-colour: govuk-colour("green") !default;
+$govuk-success-colour: #00a357 !default;

 /// Border colour
 ///
@@ -111,7 +115,7 @@ $govuk-border-colour: govuk-colour("mid-grey") !default;
 /// @type Colour
 /// @access public

-$govuk-input-border-colour: govuk-colour("black") !default;
+$govuk-input-border-colour: govuk-colour("white") !default;

 /// Input hover colour
 ///
@@ -131,27 +135,27 @@ $govuk-hover-colour: govuk-colour("mid-grey") !default;
 /// @type Colour
 /// @access public

-$govuk-link-colour: govuk-colour("blue") !default;
+$govuk-link-colour: #3892e0 !default;

 /// Visited link colour
 ///
 /// @type Colour
 /// @access public

-$govuk-link-visited-colour: govuk-colour("purple") !default;
+$govuk-link-visited-colour: #9d80db !default;

 /// Link hover colour
 ///
 /// @type Colour
 /// @access public

-$govuk-link-hover-colour: govuk-colour("dark-blue") !default;
+$govuk-link-hover-colour: #5ca5e6 !default;

 /// Active link colour
 ///
 /// @type Colour
 /// @access public

-$govuk-link-active-colour: govuk-colour("black") !default;
+$govuk-link-active-colour: govuk-colour("white") !default;

 /*# sourceMappingURL=_colours-applied.scss.map */

Action run for 4672a717df89617e31d0d7f0b8ccbdd95199a830

romaricpascal commented 6 months ago

Closing this one now the spike is completed. We can reopen if we decide to explore further 😊