Prototyping changing colours of File upload

[CharlotteDowns]

These colour changes to the component make it consistent with the new brand.

This pull request is tied to Prototype solutions for enhanced file upload #4900

[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 0b5d4028a..220324298 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
 }
 
@@ -3480,7 +3481,7 @@ screen and (forced-colors:active) {
     width: 100%;
     padding: 18px;
     border: 2px solid #cecece;
-    background-color: #f3f3f3;
+    background-color: #fff;
     cursor: pointer
 }
 
@@ -3491,19 +3492,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: #c1c3c5
+    border-color: #858686
 }
 
 .govuk-file-upload-button:hover .govuk-file-upload-button__pseudo-button {
-    background-color: #dbdad9
+    background-color: #cecece
 }
 
 .govuk-file-upload-button:hover .govuk-file-upload-button__status {
-    background-color: #d2e2f1
+    background-color: #1d70b8
 }
 
 .govuk-file-upload-button:active,
@@ -3511,7 +3512,7 @@ screen and (forced-colors:active) {
     border: 2px solid #0b0c0c;
     outline: 3px solid #fd0;
     outline-offset: 0;
-    background-color: #c1c3c5;
+    background-color: #f3f3f3;
     box-shadow: inset 0 0 0 2px
 }
 
@@ -3525,7 +3526,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
 }
 
@@ -3539,8 +3540,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,
@@ -3560,23 +3561,10 @@ screen and (forced-colors:active) {
     border-color: #0b0c0c
 }
 
-.govuk-file-upload-button--dragging.govuk-file-upload-button {
-    background-color: #c1c3c5
-}
-
 .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;
@@ -3588,7 +3576,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 ba57081

[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 0ba2d9e4e..e53e36380 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/_index.scss
@@ -6,7 +6,7 @@
   $file-upload-border-width: 2px;
   $component-padding: govuk-spacing(1);
   $empty-button-background-colour: govuk-colour("white");
-  $empty-status-background-colour: govuk-tint(govuk-colour("blue"), 70%);
+  $empty-status-background-colour: govuk-colour("blue", $variant: "tint-80");
   $empty-pseudo-button-background-colour: govuk-colour("black", $variant: "tint-95");
 
   .govuk-file-upload {
@@ -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;
   }
 
@@ -100,7 +101,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)} {
@@ -108,18 +109,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("mid-grey"), 20%);
+      border-color: govuk-colour("black", $variant: "tint-50");
 
       .govuk-file-upload-button__pseudo-button {
-        background-color: govuk-shade(govuk-colour("light-grey"), 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");
       }
     }
 
@@ -129,7 +130,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("mid-grey"), 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
@@ -145,7 +146,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;
       }
     }
@@ -160,7 +161,7 @@
     }
 
     .govuk-file-upload-button__status {
-      color: govuk-shade(govuk-colour("blue"), 60%);
+      color: govuk-colour("black");
       background-color: $empty-status-background-colour;
     }
 
@@ -170,7 +171,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");
       }
     }
   }
@@ -181,22 +182,9 @@
 
     // extra specificity to apply when
     // empty
-    &.govuk-file-upload-button {
-      background-color: govuk-tint(govuk-colour("mid-grey"), 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 ba57081

[github-actions]

📋 Stats

File sizes

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

No changes to module sizes.

---

Action run for ba57081

[CharlotteDowns]

@owenatgov was it correct to base this branch off of your branch? We seem to have some tests failing, I'm assuming because they can't register the new palette. Something for office hours on Monday perhaps.

[CharlotteDowns]

The secondary button shadow needs to be Black Tint 50% #858686 not #929292.