Changes for GOV.UK Frontend 6.0.0

lfdebrux · lfdebrux · commit 0bb24279a978 · 2026-03-16T13:48:42.000+02:00
- Remove references to the `$govuk-new-typography-scale` feature flag
- Use the `govuk-colour` function to access tints and shades
- Update any light blue, turquoise or pink tags
- Use `govuk-functional-colour` to access functional colours
- Remove rebrand switch from template
- Move rebranded assets
diff --git a/app/components/form_status_tag_component/view.rb b/app/components/form_status_tag_component/view.rb
@@ -8,7 +8,7 @@ def initialize(status: :draft)
     def status_colour
       {
         draft: "yellow",
-        live: "turquoise",
+        live: "teal",
         archived: "orange",
       }[@status]
     end
diff --git a/app/components/header_component/_index.scss b/app/components/header_component/_index.scss
@@ -12,12 +12,12 @@
 }
 
 .govuk-header {
-  &.app-header--pink {
-    border-top: 10px solid govuk-colour("pink");
+  &.app-header--magenta {
+    border-top: 10px solid govuk-colour("magenta");
   }
 
-  &.app-header--turquoise {
-    border-top: 10px solid govuk-colour("turquoise");
+  &.app-header--teal {
+    border-top: 10px solid govuk-colour("teal");
   }
 
   &.app-header--yellow {
diff --git a/app/components/header_component/view.rb b/app/components/header_component/view.rb
@@ -22,9 +22,9 @@ def app_header_class_for_environment
     def colour_for_environment
       case environment_name
       when "Local"
-        "pink"
+        "magenta"
       when "Development"
-        "turquoise"
+        "teal"
       when "Staging"
         "yellow"
       else
diff --git a/app/components/markdown_editor_component/_index.scss b/app/components/markdown_editor_component/_index.scss
@@ -3,7 +3,7 @@
 }
 
 .app-markdown-editor__preview-area {
-  border: 2px solid $govuk-border-colour;
+  border: 2px solid govuk-functional-colour(border);
   padding: 30px;
   margin: 0 0 1em;
 }
@@ -44,7 +44,7 @@
 
   &:focus-within {
     box-shadow: inset 0 0 0 2px;
-    outline: 3px solid $govuk-focus-colour;
+    outline: 3px solid govuk-functional-colour(focus);
     outline-offset: 0;
   }
 }
diff --git a/app/components/metrics_summary_component/_index.scss b/app/components/metrics_summary_component/_index.scss
@@ -21,8 +21,8 @@
       flex-flow: column nowrap;
       justify-content: space-between;
 
-      border-top: $govuk-border-width solid $govuk-border-colour;
-      border-bottom: $govuk-border-width solid $govuk-border-colour;
+      border-top: $govuk-border-width solid govuk-functional-colour(border);
+      border-bottom: $govuk-border-width solid govuk-functional-colour(border);
     }
   }
 }
diff --git a/app/components/page_list_component/_index.scss b/app/components/page_list_component/_index.scss
@@ -22,6 +22,6 @@
 
 .app-page_list__route-text--error {
   @include govuk-responsive-margin(2, "bottom");
-  color: $govuk-error-colour;
+  color: govuk-functional-colour(error);
   font-weight: 700;
 }
diff --git a/app/components/scrolling_wrapper_component/_index.scss b/app/components/scrolling_wrapper_component/_index.scss
@@ -3,7 +3,7 @@
 }
 
 .app-scrolling-wrapper:focus-visible {
-  outline: $govuk-focus-width solid $govuk-focus-colour;
+  outline: $govuk-focus-width solid govuk-functional-colour(focus);
   outline-offset: $govuk-focus-width;
   box-shadow: 0 0 0 $govuk-focus-width;
 }
diff --git a/app/components/task_list_component/view.rb b/app/components/task_list_component/view.rb
@@ -64,7 +64,7 @@ def get_status_colour
 
       {
         completed: nil,
-        in_progress: "light-blue",
+        in_progress: "teal",
         cannot_start: nil,
         not_started: "blue",
         optional: "grey",
diff --git a/app/frontend/entrypoints/application.scss b/app/frontend/entrypoints/application.scss
@@ -1,6 +1,5 @@
 $govuk-assets-path: "@govuk/assets/";
 $govuk-global-styles: true;
-$govuk-new-typography-scale: true;
 
 @import "pkg:govuk-frontend";
 @import "pkg:dfe-autocomplete";
diff --git a/app/frontend/styles/_app_filter.scss b/app/frontend/styles/_app_filter.scss
@@ -2,11 +2,11 @@
   form {
     margin: govuk-spacing(3);
     padding: govuk-spacing(3) 0;
-    background: govuk-colour("light-grey");
+    background: govuk-colour("black", $variant: "tint-95");
   }
 
   .govuk-hint {
-    color: $govuk-text-colour;
+    color: govuk-functional-colour(text);
   }
 
   .autocomplete__input {
diff --git a/app/frontend/styles/_app_preview_area.scss b/app/frontend/styles/_app_preview_area.scss
@@ -1,5 +1,5 @@
 .app-preview-area {
-  border: 2px solid $govuk-border-colour;
+  border: 2px solid govuk-functional-colour(border);
   padding: 30px;
   margin: 0 0 1em;
 }
diff --git a/app/frontend/styles/_app_summary_card.scss b/app/frontend/styles/_app_summary_card.scss
@@ -27,7 +27,7 @@
   }
 
   .govuk-summary-list__row--error {
-    border-left: 5px solid $govuk-error-colour;
+    border-left: 5px solid govuk-functional-colour(error);
 
     padding-left: govuk-spacing(2);
 
@@ -45,7 +45,7 @@
 
   .govuk-summary-list__value--error {
     @include govuk-responsive-margin(1, "bottom");
-    color: $govuk-error-colour;
+    color: govuk-functional-colour(error);
     font-weight: 700;
   }
 
diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"class="govuk-template govuk-template--rebranded">
+<html lang="en"class="govuk-template govuk-template">
   <head>
     <meta charset="utf-8">
     <title><%= page_title %></title>
@@ -9,14 +9,14 @@
     <%= csp_meta_tag %>
 
     <meta name="theme-color" content="#1d70b8">
-    <link rel="icon" sizes="48x48" href="<%= vite_asset_path "#{govuk_assets_path}/rebrand/images/favicon.ico" %>">
-    <link rel="icon" sizes="any" href="<%= vite_asset_path "#{govuk_assets_path}/rebrand/images/favicon.svg" %>" type="image/svg+xml">
-    <link rel="mask-icon" href="<%= vite_asset_path "#{govuk_assets_path}/rebrand/images/govuk-icon-mask.svg" %>" color="#1d70b8">
-    <link rel="apple-touch-icon" href="<%= vite_asset_path "#{govuk_assets_path}/rebrand/images/govuk-icon-180.png"%>">
+    <link rel="icon" sizes="48x48" href="<%= vite_asset_path "#{govuk_assets_path}/images/favicon.ico" %>">
+    <link rel="icon" sizes="any" href="<%= vite_asset_path "#{govuk_assets_path}/images/favicon.svg" %>" type="image/svg+xml">
+    <link rel="mask-icon" href="<%= vite_asset_path "#{govuk_assets_path}/images/govuk-icon-mask.svg" %>" color="#1d70b8">
+    <link rel="apple-touch-icon" href="<%= vite_asset_path "#{govuk_assets_path}/images/govuk-icon-180.png"%>">
     <%# This manifest file and the icons it references are currently being served from the `public` folder. %>
     <%# TODO: update the build to either generate the manifest with references to fingerprinted assets, or automatically copy the manifest and its dependencies to `public`. %>
-    <link rel="manifest" href="/rebrand/manifest.json">
-    <meta property="og:image" content="<%= vite_asset_path "#{govuk_assets_path}/rebrand/images/govuk-opengraph-image.png" %>">
+    <link rel="manifest" href="/manifest.json">
+    <meta property="og:image" content="<%= vite_asset_path "#{govuk_assets_path}/images/govuk-opengraph-image.png" %>">
 
     <%= vite_stylesheet_tag 'application.scss' %>
   </head>
diff --git a/public/images/favicon.ico b/public/images/favicon.ico
diff --git a/public/images/favicon.svg b/public/images/favicon.svg
diff --git a/public/images/govuk-crest.svg b/public/images/govuk-crest.svg
diff --git a/public/images/govuk-icon-180.png b/public/images/govuk-icon-180.png
diff --git a/public/images/govuk-icon-192.png b/public/images/govuk-icon-192.png
diff --git a/public/images/govuk-icon-512.png b/public/images/govuk-icon-512.png
diff --git a/public/images/govuk-icon-mask.svg b/public/images/govuk-icon-mask.svg
diff --git a/public/images/govuk-opengraph-image.png b/public/images/govuk-opengraph-image.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/spec/components/form_status_tag_component/view_spec.rb b/spec/components/form_status_tag_component/view_spec.rb
@@ -24,8 +24,8 @@
       expect(page).to have_text("Live")
     end
 
-    it "renders status in turquoise" do
-      expect(page).to have_css(".govuk-tag--turquoise")
+    it "renders status in teal" do
+      expect(page).to have_css(".govuk-tag--teal")
     end
   end
 
@@ -46,7 +46,7 @@
   describe "string status" do
     it "accepts status as a string" do
       expect(described_class.new(status: "draft").status_colour).to eq "yellow"
-      expect(described_class.new(status: "live").status_colour).to eq "turquoise"
+      expect(described_class.new(status: "live").status_colour).to eq "teal"
     end
   end
 end
diff --git a/spec/components/header_component/view_spec.rb b/spec/components/header_component/view_spec.rb
@@ -57,8 +57,8 @@
 
   describe "#app_header_class_for_environment" do
     [
-      { colour: "pink" },
-      { colour: "turquoise" },
+      { colour: "magenta" },
+      { colour: "teal" },
       { colour: "yellow" },
     ].each do |scenario|
       context "when colour_for_environment is #{scenario[:colour]}" do
@@ -85,8 +85,8 @@
 
   describe "#colour_for_environment" do
     [
-      { friendly_environment_name: "Local", expected_result: "pink" },
-      { friendly_environment_name: "Development", expected_result: "turquoise" },
+      { friendly_environment_name: "Local", expected_result: "magenta" },
+      { friendly_environment_name: "Development", expected_result: "teal" },
       { friendly_environment_name: "Staging", expected_result: "yellow" },
       { friendly_environment_name: "Production", expected_result: "blue" },
       { friendly_environment_name: "User research", expected_result: "blue" },
@@ -111,8 +111,8 @@
     end
 
     [
-      { friendly_environment_name: "Local", colour_for_environment: "pink" },
-      { friendly_environment_name: "Development", colour_for_environment: "turquoise" },
+      { friendly_environment_name: "Local", colour_for_environment: "magenta" },
+      { friendly_environment_name: "Development", colour_for_environment: "teal" },
       { friendly_environment_name: "Staging", colour_for_environment: "yellow" },
       { friendly_environment_name: "User research", colour_for_environment: "blue" },
     ].each do |scenario|
diff --git a/spec/components/task_list_component/view_spec.rb b/spec/components/task_list_component/view_spec.rb
@@ -283,8 +283,8 @@
     context "when status is in_progress" do
       let(:status) { :in_progress }
 
-      it "returns blue" do
-        expect(row.get_status_colour).to eq("light-blue")
+      it "returns teal" do
+        expect(row.get_status_colour).to eq("teal")
       end
     end
 
diff --git a/spec/features/form/archive_a_form_spec.rb b/spec/features/form/archive_a_form_spec.rb
@@ -24,7 +24,7 @@
   def given_i_am_viewing_a_live_form
     visit live_form_path(form.id)
     expect(page.find("h1")).to have_text form.name
-    expect(page).to have_css ".govuk-tag.govuk-tag--turquoise", text: "Live"
+    expect(page).to have_css ".govuk-tag.govuk-tag--teal", text: "Live"
     expect_page_to_have_no_axe_errors(page)
   end
 
diff --git a/spec/features/form/make_changes_live_spec.rb b/spec/features/form/make_changes_live_spec.rb
@@ -31,7 +31,7 @@
 def given_i_am_viewing_a_live_form
   visit live_form_path(form.id)
   expect(page.find("h1")).to have_text form.name
-  expect(page).to have_css ".govuk-tag.govuk-tag--turquoise", text: "Live"
+  expect(page).to have_css ".govuk-tag.govuk-tag--teal", text: "Live"
   expect_page_to_have_no_axe_errors(page)
 end
 
diff --git a/spec/views/forms/_made_live_form.html.erb_spec.rb b/spec/views/forms/_made_live_form.html.erb_spec.rb
@@ -55,7 +55,7 @@
   describe "form status tag" do
     context "when the form is live" do
       it "renders the live tag" do
-        expect(rendered).to have_css(".govuk-tag.govuk-tag--turquoise", text: "Live")
+        expect(rendered).to have_css(".govuk-tag.govuk-tag--teal", text: "Live")
       end
     end
 
diff --git a/spec/views/forms/live/show_form.html.erb_spec.rb b/spec/views/forms/live/show_form.html.erb_spec.rb
@@ -14,7 +14,7 @@
   end
 
   it "renders the live tag" do
-    expect(rendered).to have_css(".govuk-tag.govuk-tag--turquoise", text: "Live")
+    expect(rendered).to have_css(".govuk-tag.govuk-tag--teal", text: "Live")
   end
 
   it "contains a link to preview the live form" do
diff --git a/spec/views/forms/live/show_pages.html.erb_spec.rb b/spec/views/forms/live/show_pages.html.erb_spec.rb
@@ -18,6 +18,6 @@
   end
 
   it "rendered live tag" do
-    expect(rendered).to have_css(".govuk-tag.govuk-tag--turquoise", text: "Live")
+    expect(rendered).to have_css(".govuk-tag.govuk-tag--teal", text: "Live")
   end
 end
diff --git a/spec/views/groups/show.html.erb_spec.rb b/spec/views/groups/show.html.erb_spec.rb
@@ -125,8 +125,8 @@
 
       expect(status_tags).to eq [
         [{ text: "Draft", colour: "yellow" }],
-        [{ text: "Live", colour: "turquoise" }],
-        [{ text: "Draft", colour: "yellow" }, { text: "Live", colour: "turquoise" }],
+        [{ text: "Live", colour: "teal" }],
+        [{ text: "Draft", colour: "yellow" }, { text: "Live", colour: "teal" }],
       ]
     end
   end

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ def initialize(status: :draft)`
`8`	`8`	`def status_colour`
`9`	`9`	`{`
`10`	`10`	`draft: "yellow",`
`11`		`- live: "turquoise",`
	`11`	`+ live: "teal",`
`12`	`12`	`archived: "orange",`
`13`	`13`	`}[@status]`
`14`	`14`	`end`
Original file line number	Diff line number	Diff line change
`@@ -12,12 +12,12 @@`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`.govuk-header {`
`15`		`- &.app-header--pink {`
`16`		`- border-top: 10px solid govuk-colour("pink");`
	`15`	`+ &.app-header--magenta {`
	`16`	`+ border-top: 10px solid govuk-colour("magenta");`
`17`	`17`	`}`
`18`	`18`
`19`		`- &.app-header--turquoise {`
`20`		`- border-top: 10px solid govuk-colour("turquoise");`
	`19`	`+ &.app-header--teal {`
	`20`	`+ border-top: 10px solid govuk-colour("teal");`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`&.app-header--yellow {`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`}`
`4`	`4`
`5`	`5`	`.app-markdown-editor__preview-area {`
`6`		`- border: 2px solid $govuk-border-colour;`
	`6`	`+ border: 2px solid govuk-functional-colour(border);`
`7`	`7`	`padding: 30px;`
`8`	`8`	`margin: 0 0 1em;`
`9`	`9`	`}`
`@@ -44,7 +44,7 @@`
`44`	`44`
`45`	`45`	`&:focus-within {`
`46`	`46`	`box-shadow: inset 0 0 0 2px;`
`47`		`- outline: 3px solid $govuk-focus-colour;`
	`47`	`+ outline: 3px solid govuk-functional-colour(focus);`
`48`	`48`	`outline-offset: 0;`
`49`	`49`	`}`
`50`	`50`	`}`
Original file line number	Diff line number	Diff line change
`@@ -21,8 +21,8 @@`
`21`	`21`	`flex-flow: column nowrap;`
`22`	`22`	`justify-content: space-between;`
`23`	`23`
`24`		`- border-top: $govuk-border-width solid $govuk-border-colour;`
`25`		`- border-bottom: $govuk-border-width solid $govuk-border-colour;`
	`24`	`+ border-top: $govuk-border-width solid govuk-functional-colour(border);`
	`25`	`+ border-bottom: $govuk-border-width solid govuk-functional-colour(border);`
`26`	`26`	`}`
`27`	`27`	`}`
`28`	`28`	`}`
Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,6 @@`
`22`	`22`
`23`	`23`	`.app-page_list__route-text--error {`
`24`	`24`	`@include govuk-responsive-margin(2, "bottom");`
`25`		`- color: $govuk-error-colour;`
	`25`	`+ color: govuk-functional-colour(error);`
`26`	`26`	`font-weight: 700;`
`27`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`}`
`4`	`4`
`5`	`5`	`.app-scrolling-wrapper:focus-visible {`
`6`		`- outline: $govuk-focus-width solid $govuk-focus-colour;`
	`6`	`+ outline: $govuk-focus-width solid govuk-functional-colour(focus);`
`7`	`7`	`outline-offset: $govuk-focus-width;`
`8`	`8`	`box-shadow: 0 0 0 $govuk-focus-width;`
`9`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,7 @@ def get_status_colour`
`64`	`64`
`65`	`65`	`{`
`66`	`66`	`completed: nil,`
`67`		`- in_progress: "light-blue",`
	`67`	`+ in_progress: "teal",`
`68`	`68`	`cannot_start: nil,`
`69`	`69`	`not_started: "blue",`
`70`	`70`	`optional: "grey",`
Original file line number	Diff line number	Diff line change
`@@ -2,11 +2,11 @@`
`2`	`2`	`form {`
`3`	`3`	`margin: govuk-spacing(3);`
`4`	`4`	`padding: govuk-spacing(3) 0;`
`5`		`- background: govuk-colour("light-grey");`
	`5`	`+ background: govuk-colour("black", $variant: "tint-95");`
`6`	`6`	`}`
`7`	`7`
`8`	`8`	`.govuk-hint {`
`9`		`- color: $govuk-text-colour;`
	`9`	`+ color: govuk-functional-colour(text);`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`.autocomplete__input {`