Prototype new colour palette

owenatgov · owenatgov · commit 521768490ba4 · 2025-10-14T15:16:46.000+01:00
diff --git a/packages/govuk-frontend-review/src/stylesheets/full-page-examples/campaign-page.scss b/packages/govuk-frontend-review/src/stylesheets/full-page-examples/campaign-page.scss
@@ -48,7 +48,7 @@
   margin-bottom: govuk-spacing(8);
   padding: govuk-spacing(4) govuk-spacing(4) govuk-spacing(2);
   border: 1px solid $govuk-border-colour;
-  background-color: govuk-colour("light-grey");
+  background-color: govuk-colour("black", $variant: "tint-95");
 }
 
 .app-nhs-box {
diff --git a/packages/govuk-frontend-review/src/stylesheets/full-page-examples/search.scss b/packages/govuk-frontend-review/src/stylesheets/full-page-examples/search.scss
@@ -64,5 +64,5 @@
 }
 
 .app-next-page:hover {
-  background-color: govuk-colour("light-grey");
+  background-color: govuk-colour("black", $variant: "tint-95");
 }
diff --git a/packages/govuk-frontend-review/src/stylesheets/partials/_code.scss b/packages/govuk-frontend-review/src/stylesheets/partials/_code.scss
@@ -11,7 +11,7 @@
   overflow-x: auto;
   border: $govuk-focus-width solid transparent;
   outline: 1px solid transparent;
-  background-color: govuk-colour("light-grey");
+  background-color: govuk-colour("black", $variant: "tint-95");
   @include govuk-responsive-margin(4, "bottom");
 
   &:focus {
diff --git a/packages/govuk-frontend-review/src/stylesheets/partials/_feature-flag-banner.scss b/packages/govuk-frontend-review/src/stylesheets/partials/_feature-flag-banner.scss
@@ -1,5 +1,5 @@
 .app-feature-flag-banner {
   padding: govuk-spacing(4) 0;
-  border-bottom: 1px solid govuk-colour("mid-grey");
-  background-color: govuk-colour("light-grey");
+  border-bottom: 1px solid govuk-colour("black", $variant: "tint-80");
+  background-color: govuk-colour("black", $variant: "tint-95");
 }
diff --git a/packages/govuk-frontend/src/govuk/components/accordion/_index.scss b/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-hover-colour: govuk-colour("black", $variant: "tint-95");
   $govuk-accordion-icon-focus-colour: $govuk-focus-colour;
   $govuk-accordion-bottom-border-width: 1px;
 
diff --git a/packages/govuk-frontend/src/govuk/components/button/_index.scss b/packages/govuk-frontend/src/govuk/components/button/_index.scss
@@ -37,7 +37,7 @@ $govuk-inverse-button-text-colour: $govuk-brand-colour !default;
   $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
 
   // Secondary button variables
-  $govuk-secondary-button-colour: govuk-colour("light-grey");
+  $govuk-secondary-button-colour: govuk-colour("black", $variant: "tint-95");
   $govuk-secondary-button-text-colour: govuk-colour("black");
   $govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%);
   $govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%);
diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/_index.scss b/packages/govuk-frontend/src/govuk/components/file-upload/_index.scss
@@ -6,8 +6,8 @@
   $file-upload-border-width: 2px;
   $component-padding: govuk-spacing(1);
   $empty-button-background-colour: govuk-colour("white");
-  $empty-pseudo-button-background-colour: govuk-colour("light-grey");
   $empty-status-background-colour: govuk-tint(govuk-colour("blue"), 70%);
+  $empty-pseudo-button-background-colour: govuk-colour("black", $variant: "tint-95");
 
   .govuk-file-upload {
     @include govuk-font($size: 19);
@@ -100,8 +100,8 @@
     width: 100%;
     // 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("mid-grey") solid;
-    background-color: govuk-colour("light-grey");
+    border: $file-upload-border-width govuk-colour("black", $variant: "tint-80") solid;
+    background-color: govuk-colour("black", $variant: "tint-95");
     cursor: pointer;
 
     @media #{govuk-from-breakpoint(tablet)} {
@@ -146,7 +146,7 @@
       &:hover .govuk-file-upload-button__pseudo-button {
         border-color: $govuk-focus-colour;
         outline: 3px solid transparent;
-        background-color: govuk-colour("light-grey");
+        background-color: govuk-colour("black", $variant: "tint-95");
         box-shadow: inset 0 0 0 1px $govuk-focus-colour;
       }
     }
@@ -168,7 +168,7 @@
     &:hover,
     &:focus,
     &:active {
-      background-color: govuk-colour("light-grey");
+      background-color: govuk-colour("black", $variant: "tint-95");
 
       .govuk-file-upload-button__status {
         background-color: govuk-tint(govuk-colour("blue"), 80%);
@@ -187,7 +187,7 @@
     }
 
     &.govuk-file-upload-button--empty {
-      background-color: govuk-colour("light-grey");
+      background-color: govuk-colour("black", $variant: "tint-95");
     }
 
     &.govuk-file-upload-button--empty:not(:disabled) .govuk-file-upload-button__status,
@@ -196,7 +196,7 @@
     }
 
     .govuk-file-upload-button__pseudo-button {
-      background-color: govuk-shade(govuk-colour("light-grey"), 10%);
+      background-color: govuk-shade(govuk-colour("black", $variant: "tint-95"), 10%);
     }
   }
 
diff --git a/packages/govuk-frontend/src/govuk/components/input/_index.scss b/packages/govuk-frontend/src/govuk/components/input/_index.scss
@@ -122,7 +122,7 @@
     height: govuk-px-to-rem(40px);
     padding: govuk-spacing(1);
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
-    background-color: govuk-colour("light-grey");
+    background-color: govuk-colour("black", $variant: "tint-95");
     text-align: center;
     white-space: nowrap;
     // Emphasise non-editable status of prefixes and suffixes
diff --git a/packages/govuk-frontend/src/govuk/components/pagination/_index.scss b/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", $variant: "tint-95");
     }
   }
 
diff --git a/packages/govuk-frontend/src/govuk/components/service-navigation/_index.scss b/packages/govuk-frontend/src/govuk/components/service-navigation/_index.scss
@@ -1,6 +1,6 @@
 @include govuk-exports("govuk/component/service-navigation") {
   $govuk-service-navigation-active-link-border-width: govuk-spacing(1);
-  $govuk-service-navigation-background: govuk-colour("light-grey");
+  $govuk-service-navigation-background: govuk-colour("black", $variant: "tint-95");
   $govuk-service-navigation-border-colour: $govuk-border-colour;
 
   // We make the link colour a little darker than normal here so that it has
diff --git a/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss b/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss
@@ -188,7 +188,7 @@
     // Ensures the card header appears separate to the summary list in forced
     // colours mode
     border-bottom: 1px solid transparent;
-    background-color: govuk-colour("light-grey");
+    background-color: govuk-colour("black", $variant: "tint-95");
 
     @media #{govuk-from-breakpoint(tablet)} {
       display: flex;
diff --git a/packages/govuk-frontend/src/govuk/components/tabs/_index.scss b/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-colour("black", $variant: "tint-95");
         text-align: center;
 
         &::before {
diff --git a/packages/govuk-frontend/src/govuk/components/task-list/_index.scss b/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", $variant: "tint-95");
 
   .govuk-task-list {
     @include govuk-font($size: 19);
diff --git a/packages/govuk-frontend/src/govuk/helpers/_colour.scss b/packages/govuk-frontend/src/govuk/helpers/_colour.scss
@@ -19,7 +19,7 @@
 /// @throw if `$colour` is not a colour from the colour palette
 /// @access public
 
-@function govuk-colour($colour, $legacy: false) {
+@function govuk-colour($colour, $legacy: false, $variant: primary) {
   // Output a warning if $legacy is set to anything.
   @if $legacy and _should-warn("legacy-colour-param") {
     @warn _warning-text("legacy-colour-param", "The `$legacy` parameter of " +
@@ -32,11 +32,25 @@
     $colour: quote("#{$colour}");
   }
 
-  @if not map-has-key($govuk-colours, $colour) {
-    @error "Unknown colour `#{$colour}`";
-  }
+  @if map-has-key($govuk-brand-colours, $colour) {
+    $located-colour-palette: map-get($govuk-brand-colours, $colour);
+
+    @if type-of($located-colour-palette) == "color" {
+      @return $located-colour-palette;
+    } @else {
+      @if not map-has-key($located-colour-palette, $variant) {
+        @error "Unknown colour variant `#{$variant}`";
+      }
 
-  @return map-get($govuk-colours, $colour);
+      @return map-get($located-colour-palette, $variant);
+    }
+  } @else {
+    @if not map-has-key($govuk-colours, $colour) {
+      @error "Unknown colour `#{$colour}`";
+    }
+
+    @return map-get($govuk-colours, $colour);
+  }
 }
 
 /// Get the colour for a government organisation
diff --git a/packages/govuk-frontend/src/govuk/helpers/colour.unit.test.js b/packages/govuk-frontend/src/govuk/helpers/colour.unit.test.js
@@ -39,7 +39,7 @@ describe('@function govuk-colour', () => {
     await expect(compileSassString(sass, sassConfig)).resolves.toMatchObject({
       css: outdent`
         .foo {
-          color: #ff0000;
+          color: #ca3535;
         }
       `
     })
@@ -57,7 +57,7 @@ describe('@function govuk-colour', () => {
     await expect(compileSassString(sass, sassConfig)).resolves.toMatchObject({
       css: outdent`
         .foo {
-          color: #ff0000;
+          color: #ca3535;
         }
       `
     })
diff --git a/packages/govuk-frontend/src/govuk/settings/_colours-applied.scss b/packages/govuk-frontend/src/govuk/settings/_colours-applied.scss
@@ -33,11 +33,11 @@ $govuk-text-colour: govuk-colour("black") !default;
 /// version. Use `$govuk-template-background-colour` if you want to change the background of
 /// the `<html>` element and background colour of elements that need to match for visual
 /// continuity.
-$govuk-canvas-background-colour: govuk-colour("light-grey") !default;
+$govuk-canvas-background-colour: govuk-colour("black", $variant: "tint-95") !default;
 
 // Output a deprecation warning if $govuk-canvas-background-colour is being overridden
 // Remove in next major version.
-@if $govuk-canvas-background-colour != govuk-colour("light-grey") {
+@if $govuk-canvas-background-colour != govuk-colour("black", $variant: "tint-95") {
   @include _warning(
     "$govuk-canvas-background-colour",
     "$govuk-canvas-background-colour has been deprecated and will be removed in the next major version."
@@ -52,7 +52,7 @@ $govuk-canvas-background-colour: govuk-colour("light-grey") !default;
 /// @type Colour
 /// @access public
 
-$govuk-template-background-colour: govuk-colour("light-grey") !default;
+$govuk-template-background-colour: govuk-colour("black", $variant: "tint-95") !default;
 
 /// Body background colour
 ///
@@ -77,7 +77,7 @@ $govuk-print-text-colour: #000000 !default;
 /// @type Colour
 /// @access public
 
-$govuk-secondary-text-colour: govuk-colour("dark-grey") !default;
+$govuk-secondary-text-colour: govuk-colour("black", $variant: "tint-25") !default;
 
 /// Focus colour
 ///
@@ -124,7 +124,7 @@ $govuk-success-colour: govuk-colour("green") !default;
 /// @type Colour
 /// @access public
 
-$govuk-border-colour: govuk-colour("mid-grey") !default;
+$govuk-border-colour: govuk-colour("black", $variant: "tint-80") !default;
 
 /// Input border colour
 ///
@@ -142,7 +142,7 @@ $govuk-input-border-colour: govuk-colour("black") !default;
 /// @type Colour
 /// @access public
 
-$govuk-hover-colour: govuk-colour("mid-grey") !default;
+$govuk-hover-colour: govuk-colour("black", $variant: "tint-80") !default;
 
 // =============================================================================
 // Links
@@ -167,7 +167,7 @@ $govuk-link-visited-colour: govuk-colour("purple") !default;
 /// @type Colour
 /// @access public
 
-$govuk-link-hover-colour: govuk-colour("dark-blue") !default;
+$govuk-link-hover-colour: govuk-colour("blue", $variant: "shade-50") !default;
 
 /// Active link colour
 ///
@@ -184,10 +184,10 @@ $govuk-link-active-colour: govuk-colour("black") !default;
 ///
 /// @type Colour
 /// @access private
-$_govuk-rebrand-template-background-colour: govuk-tint($govuk-brand-colour, 95%);
+$_govuk-rebrand-template-background-colour: govuk-colour("blue", $variant: "tint-95");
 
 /// Border colour for areas on a light-blue background
 ///
 /// @type Colour
 /// @access private
-$_govuk-rebrand-border-colour-on-blue-tint-95: govuk-tint($govuk-brand-colour, 50%);
+$_govuk-rebrand-border-colour-on-blue-tint-95: govuk-colour("blue", $variant: "tint-50");
diff --git a/packages/govuk-frontend/src/govuk/settings/_colours-palette.scss b/packages/govuk-frontend/src/govuk/settings/_colours-palette.scss

Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,7 @@`
`48`	`48`	`margin-bottom: govuk-spacing(8);`
`49`	`49`	`padding: govuk-spacing(4) govuk-spacing(4) govuk-spacing(2);`
`50`	`50`	`border: 1px solid $govuk-border-colour;`
`51`		`- background-color: govuk-colour("light-grey");`
	`51`	`+ background-color: govuk-colour("black", $variant: "tint-95");`
`52`	`52`	`}`
`53`	`53`
`54`	`54`	`.app-nhs-box {`
Original file line number	Diff line number	Diff line change
`@@ -64,5 +64,5 @@`
`64`	`64`	`}`
`65`	`65`
`66`	`66`	`.app-next-page:hover {`
`67`		`- background-color: govuk-colour("light-grey");`
	`67`	`+ background-color: govuk-colour("black", $variant: "tint-95");`
`68`	`68`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`.app-feature-flag-banner {`
`2`	`2`	`padding: govuk-spacing(4) 0;`
`3`		`- border-bottom: 1px solid govuk-colour("mid-grey");`
`4`		`- background-color: govuk-colour("light-grey");`
	`3`	`+ border-bottom: 1px solid govuk-colour("black", $variant: "tint-80");`
	`4`	`+ background-color: govuk-colour("black", $variant: "tint-95");`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@`
`32`	`32`	`float: left; // Float is ignored if flex is active for prev/next links`
`33`	`33`
`34`	`34`	`&:hover {`
`35`		`- background-color: govuk-colour("light-grey");`
	`35`	`+ background-color: govuk-colour("black", $variant: "tint-95");`
`36`	`36`	`}`
`37`	`37`	`}`
`38`	`38`