Update file upload to use govuk-palette colours

[domoscargin]

Maps all colours in the file upload component to one of the colours or colour variants in the new _govuk-palette, based on the mapping document.

Closes #6330

[github-actions]

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index d50977fb6..ca8016ba9 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -3466,7 +3466,8 @@ screen and (forced-colors:active) {
     display: block;
     margin-bottom: 10px;
     padding: 15px 10px;
-    background-color: #fff;
+    color: #fff;
+    background-color: #1d70b8;
     text-align: left;
     word-wrap: break-word;
     overflow-wrap: break-word
@@ -3482,7 +3483,7 @@ screen and (forced-colors:active) {
     width: 100%;
     padding: 18px;
     border: 2px solid #cecece;
-    background-color: #f3f3f3;
+    background-color: #fff;
     cursor: pointer
 }
 
@@ -3493,19 +3494,19 @@ screen and (forced-colors:active) {
 }
 
 .govuk-file-upload-button .govuk-file-upload-button__pseudo-button {
-    background-color: #fff
+    background-color: #f3f3f3
 }
 
 .govuk-file-upload-button:hover {
-    background-color: #d8d8d8
+    border-color: #858686
 }
 
 .govuk-file-upload-button:hover .govuk-file-upload-button__pseudo-button {
-    background-color: #dbdbdb
+    background-color: #cecece
 }
 
 .govuk-file-upload-button:hover .govuk-file-upload-button__status {
-    background-color: #d2e2f1
+    background-color: #1d70b8
 }
 
 .govuk-file-upload-button:active,
@@ -3513,7 +3514,7 @@ screen and (forced-colors:active) {
     border: 2px solid #0b0c0c;
     outline: 3px solid #fd0;
     outline-offset: 0;
-    background-color: #d8d8d8;
+    background-color: #f3f3f3;
     box-shadow: inset 0 0 0 2px
 }
 
@@ -3527,7 +3528,7 @@ screen and (forced-colors:active) {
 .govuk-file-upload-button:focus:hover .govuk-file-upload-button__pseudo-button {
     border-color: #fd0;
     outline: 3px solid transparent;
-    background-color: #f3f3f3;
+    background-color: #cecece;
     box-shadow: inset 0 0 0 1px #fd0
 }
 
@@ -3541,8 +3542,8 @@ screen and (forced-colors:active) {
 }
 
 .govuk-file-upload-button--empty .govuk-file-upload-button__status {
-    color: #0c2d4a;
-    background-color: #bbd4ea
+    color: #0b0c0c;
+    background-color: #d2e2f1
 }
 
 .govuk-file-upload-button--empty:active,
@@ -3562,23 +3563,10 @@ screen and (forced-colors:active) {
     border-color: #0b0c0c
 }
 
-.govuk-file-upload-button--dragging.govuk-file-upload-button {
-    background-color: #d8d8d8
-}
-
 .govuk-file-upload-button--dragging.govuk-file-upload-button--empty {
     background-color: #f3f3f3
 }
 
-.govuk-file-upload-button--dragging.govuk-file-upload-button--empty .govuk-file-upload-button__pseudo-button,
-.govuk-file-upload-button--dragging.govuk-file-upload-button--empty:not(:disabled) .govuk-file-upload-button__status {
-    background-color: #fff
-}
-
-.govuk-file-upload-button--dragging .govuk-file-upload-button__pseudo-button {
-    background-color: #dbdbdb
-}
-
 .govuk-file-upload-button:disabled {
     pointer-events: none;
     opacity: .5;
@@ -3590,7 +3578,7 @@ screen and (forced-colors:active) {
 }
 
 .govuk-file-upload-button:disabled .govuk-file-upload-button__status {
-    background-color: #bbd4ea
+    background-color: #d2e2f1
 }
 
 .govuk-footer {

---

Action run for 6716235

[github-actions]

Other changes to npm package

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 eff168781..1a307993d 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
@@ -7,7 +7,7 @@
   $component-padding: govuk-spacing(1);
   $empty-button-background-colour: govuk-colour("white");
   $empty-pseudo-button-background-colour: govuk-colour("black", $variant: "tint-95");
-  $empty-status-background-colour: govuk-tint(govuk-colour("blue"), 70%);
+  $empty-status-background-colour: govuk-colour("blue", $variant: "tint-80");
 
   .govuk-file-upload {
     @include govuk-font($size: 19);
@@ -82,7 +82,8 @@
     display: block;
     margin-bottom: govuk-spacing(2);
     padding: govuk-spacing(3) govuk-spacing(2);
-    background-color: govuk-colour("white");
+    color: govuk-colour("white");
+    background-color: govuk-colour("blue");
     text-align: left;
     @include govuk-text-break-word;
   }
@@ -101,7 +102,7 @@
     // align the padding to be same as notification banner and error summary accounting for the thicker borders
     padding: (govuk-spacing(3) + $govuk-border-width - $file-upload-border-width);
     border: $file-upload-border-width govuk-colour("black", $variant: "tint-80") solid;
-    background-color: govuk-colour("black", $variant: "tint-95");
+    background-color: govuk-colour("white");
     cursor: pointer;
 
     @media #{govuk-from-breakpoint(tablet)} {
@@ -109,18 +110,18 @@
     }
 
     .govuk-file-upload-button__pseudo-button {
-      background-color: govuk-colour("white");
+      background-color: govuk-colour("black", $variant: "tint-95");
     }
 
     &:hover {
-      background-color: govuk-tint(govuk-colour("black", $variant: "tint-80"), 20%);
+      border-color: govuk-colour("black", $variant: "tint-50");
 
       .govuk-file-upload-button__pseudo-button {
-        background-color: govuk-shade(govuk-colour("black", $variant: "tint-95"), 10%);
+        background-color: govuk-colour("black", $variant: "tint-80");
       }
 
       .govuk-file-upload-button__status {
-        background-color: govuk-tint(govuk-colour("blue"), 80%);
+        background-color: govuk-colour("blue");
       }
     }
 
@@ -130,7 +131,7 @@
       outline: $govuk-focus-width solid $govuk-focus-colour;
       // Ensure outline appears outside of the element
       outline-offset: 0;
-      background-color: govuk-tint(govuk-colour("black", $variant: "tint-80"), 20%);
+      background-color: govuk-colour("black", $variant: "tint-95");
       // Double the border by adding its width again. Use `box-shadow` for this
       // instead of changing `border-width` - this is for consistency with
       // components such as textarea where we avoid changing `border-width` as
@@ -146,7 +147,7 @@
       &:hover .govuk-file-upload-button__pseudo-button {
         border-color: $govuk-focus-colour;
         outline: 3px solid transparent;
-        background-color: govuk-colour("black", $variant: "tint-95");
+        background-color: govuk-colour("black", $variant: "tint-80");
         box-shadow: inset 0 0 0 1px $govuk-focus-colour;
       }
     }
@@ -161,7 +162,7 @@
     }
 
     .govuk-file-upload-button__status {
-      color: govuk-shade(govuk-colour("blue"), 60%);
+      color: govuk-colour("black");
       background-color: $empty-status-background-colour;
     }
 
@@ -171,7 +172,7 @@
       background-color: govuk-colour("black", $variant: "tint-95");
 
       .govuk-file-upload-button__status {
-        background-color: govuk-tint(govuk-colour("blue"), 80%);
+        background-color: govuk-colour("blue", $variant: "tint-80");
       }
     }
   }
@@ -182,22 +183,9 @@
 
     // extra specificity to apply when
     // empty
-    &.govuk-file-upload-button {
-      background-color: govuk-tint(govuk-colour("black", $variant: "tint-80"), 20%);
-    }
-
     &.govuk-file-upload-button--empty {
       background-color: govuk-colour("black", $variant: "tint-95");
     }
-
-    &.govuk-file-upload-button--empty:not(:disabled) .govuk-file-upload-button__status,
-    &.govuk-file-upload-button--empty .govuk-file-upload-button__pseudo-button {
-      background-color: govuk-colour("white");
-    }
-
-    .govuk-file-upload-button__pseudo-button {
-      background-color: govuk-shade(govuk-colour("black", $variant: "tint-95"), 10%);
-    }
   }
 
   .govuk-file-upload-button:disabled {

---

Action run for 6716235

[github-actions]

📋 Stats

File sizes

File	Size	Percentage change
dist/govuk-frontend-development.min.css	128.71 KiB	-0.3%
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	128.7 KiB	-0.3%

No changes to module sizes.

---

Action run for 6716235

[owenatgov]

This looks good but there are a few things missing here from the original file upload exploration that we're present in the colour mapping doc. See alphagov/govuk-design-system#4900 and the prototype PR #6306 (which is a bit messy because I had some trouble rebasing things)

[romaricpascal]

Let's merge this 🥳