DRAFT: dark mode palette

packages/govuk-frontend/src/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;
 

packages/govuk-frontend/src/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");

packages/govuk-frontend/src/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;
   }

packages/govuk-frontend/src/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;
     }
 

packages/govuk-frontend/src/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;
   }

packages/govuk-frontend/src/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
     appearance: none;

packages/govuk-frontend/src/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");
     }
   }
 

packages/govuk-frontend/src/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;

packages/govuk-frontend/src/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 {

packages/govuk-frontend/src/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);

packages/govuk-frontend/src/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 {

packages/govuk-frontend/src/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,17 +83,21 @@ $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
 ///
 /// Used to highlight success messages and banners
 ///
 /// @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,25 +135,25 @@ $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;