Prototyping changing colours of the File upload component to make it consistent with the new brand

Author: CharlotteDowns

packages/govuk-frontend/src/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,26 +101,26 @@
     // 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;
 
     @include govuk-media-query($from: tablet) {
       padding: (govuk-spacing(4) + $govuk-border-width - $file-upload-border-width);
     }
 
     .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 {