From d9cb1d7762899ae0360dca56724b3c118df05207 Mon Sep 17 00:00:00 2001
From: Andy Sellick <andy.sellick@digital.cabinet-office.gov.uk>
Date: Mon, 28 Oct 2019 09:19:37 +0000
Subject: [PATCH 1/8] Update media queries

---
 app/assets/stylesheets/components/_banner.scss            | 4 ++--
 .../stylesheets/components/_contents-list-with-body.scss  | 6 +++---
 app/assets/stylesheets/components/_download-link.scss     | 2 +-
 app/assets/stylesheets/components/_figure.scss            | 8 ++++----
 .../stylesheets/components/_important-metadata.scss       | 2 +-
 .../stylesheets/helpers/_content-bottom-margin.scss       | 2 +-
 app/assets/stylesheets/helpers/_parts.scss                | 6 +++---
 .../helpers/_publisher-metadata-with-logo.scss            | 2 +-
 app/assets/stylesheets/mixins/_margins.scss               | 4 ++--
 app/assets/stylesheets/views/_consultation.scss           | 2 +-
 app/assets/stylesheets/views/_detailed-guide.scss         | 2 +-
 app/assets/stylesheets/views/_document-collection.scss    | 2 +-
 app/assets/stylesheets/views/_html-publication.scss       | 4 ++--
 13 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/app/assets/stylesheets/components/_banner.scss b/app/assets/stylesheets/components/_banner.scss
index d869f2984..5127f85b2 100644
--- a/app/assets/stylesheets/components/_banner.scss
+++ b/app/assets/stylesheets/components/_banner.scss
@@ -8,13 +8,13 @@
   padding: govuk-spacing(3);
   clear: both;
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     padding: govuk-spacing(4) govuk-spacing(6);
   }
 }
 
 .app-c-banner--aside {
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     padding: govuk-spacing(6);
   }
 }
diff --git a/app/assets/stylesheets/components/_contents-list-with-body.scss b/app/assets/stylesheets/components/_contents-list-with-body.scss
index fbabb6598..663334483 100644
--- a/app/assets/stylesheets/components/_contents-list-with-body.scss
+++ b/app/assets/stylesheets/components/_contents-list-with-body.scss
@@ -2,7 +2,7 @@
   margin: 0 auto;
   padding: 0;
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     max-width: 1024px;
   }
 
@@ -31,7 +31,7 @@
   width: 100%;
   z-index: 1;
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     padding-left: govuk-spacing(2);
   }
 
@@ -40,7 +40,7 @@
     padding: govuk-spacing(3);
     width: percentage(2 / 3);
 
-    @include media(tablet) {
+    @include govuk-media-query($from: tablet) {
       padding: govuk-spacing(4);
     }
   }
diff --git a/app/assets/stylesheets/components/_download-link.scss b/app/assets/stylesheets/components/_download-link.scss
index 7ab54482c..c79c275d0 100644
--- a/app/assets/stylesheets/components/_download-link.scss
+++ b/app/assets/stylesheets/components/_download-link.scss
@@ -8,7 +8,7 @@
     @include govuk-focused-text;
   }
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     margin-top: govuk-spacing(6);
   }
 
diff --git a/app/assets/stylesheets/components/_figure.scss b/app/assets/stylesheets/components/_figure.scss
index f32c836a3..9ac48b018 100644
--- a/app/assets/stylesheets/components/_figure.scss
+++ b/app/assets/stylesheets/components/_figure.scss
@@ -10,7 +10,7 @@
   display: block;
   width: 100%;
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     float: left;
     width: 50%;
   }
@@ -20,7 +20,7 @@
   @include core-16;
 
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     @include core-14;
 
     display: block;
@@ -32,7 +32,7 @@
     width: 50%;
   }
 
-  @include media(mobile) {
+  @include govuk-media-query($until: tablet) {
     margin-top: govuk-spacing(2);
   }
 }
@@ -40,7 +40,7 @@
 .app-c-figure__figcaption-text {
   margin-bottom: 0;
 
-  @include media(desktop, tablet) {
+  @include govuk-media-query($from: tablet) {
     margin-bottom: govuk-spacing(2);
   }
 }
diff --git a/app/assets/stylesheets/components/_important-metadata.scss b/app/assets/stylesheets/components/_important-metadata.scss
index d90184bf1..2eb1621fe 100644
--- a/app/assets/stylesheets/components/_important-metadata.scss
+++ b/app/assets/stylesheets/components/_important-metadata.scss
@@ -3,7 +3,7 @@
   color: govuk-colour("white");
   padding: govuk-spacing(3);
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     overflow: auto;
     padding: govuk-spacing(4) govuk-spacing(6);
   }
diff --git a/app/assets/stylesheets/helpers/_content-bottom-margin.scss b/app/assets/stylesheets/helpers/_content-bottom-margin.scss
index d7f904a86..dd2d99e1c 100644
--- a/app/assets/stylesheets/helpers/_content-bottom-margin.scss
+++ b/app/assets/stylesheets/helpers/_content-bottom-margin.scss
@@ -1,7 +1,7 @@
 .content-bottom-margin {
   margin-bottom: govuk-spacing(4);
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     @include responsive-bottom-margin;
   }
 }
diff --git a/app/assets/stylesheets/helpers/_parts.scss b/app/assets/stylesheets/helpers/_parts.scss
index 3ac49a6dd..1a5326ea2 100644
--- a/app/assets/stylesheets/helpers/_parts.scss
+++ b/app/assets/stylesheets/helpers/_parts.scss
@@ -4,7 +4,7 @@
     margin-bottom: govuk-spacing(6);
     padding-bottom: govuk-spacing(3);
 
-    @include media(tablet) {
+    @include govuk-media-query($from: tablet) {
       margin-top: 0;
       margin-bottom: 0;
       padding-bottom: govuk-spacing(3);
@@ -17,7 +17,7 @@
     margin-bottom: 0;
     @include core-19;
 
-    @include media(tablet) {
+    @include govuk-media-query($from: tablet) {
       @include core-16;
     }
 
@@ -36,7 +36,7 @@
     margin-bottom: govuk-spacing(3);
     margin-top: govuk-spacing(3);
 
-    @include media(tablet) {
+    @include govuk-media-query($from: tablet) {
       margin-bottom: govuk-spacing(4);
       margin-top: govuk-spacing(4);
     }
diff --git a/app/assets/stylesheets/helpers/_publisher-metadata-with-logo.scss b/app/assets/stylesheets/helpers/_publisher-metadata-with-logo.scss
index a315a28e3..e6f1ae07a 100644
--- a/app/assets/stylesheets/helpers/_publisher-metadata-with-logo.scss
+++ b/app/assets/stylesheets/helpers/_publisher-metadata-with-logo.scss
@@ -17,7 +17,7 @@
     padding-bottom: govuk-spacing(3);
     padding-top: govuk-spacing(3);
 
-    @include media(tablet) {
+    @include govuk-media-query($from: tablet) {
       float: right;
     }
   }
diff --git a/app/assets/stylesheets/mixins/_margins.scss b/app/assets/stylesheets/mixins/_margins.scss
index 9767b6614..cddca903f 100644
--- a/app/assets/stylesheets/mixins/_margins.scss
+++ b/app/assets/stylesheets/mixins/_margins.scss
@@ -1,7 +1,7 @@
 @mixin responsive-bottom-margin {
   margin-bottom: govuk-spacing(3);
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     margin-bottom: govuk-spacing(8);
   }
 }
@@ -9,7 +9,7 @@
 @mixin responsive-top-margin {
   margin-top: govuk-spacing(3);
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     margin-top: govuk-spacing(8);
   }
 }
diff --git a/app/assets/stylesheets/views/_consultation.scss b/app/assets/stylesheets/views/_consultation.scss
index 325cef0fe..15510d390 100644
--- a/app/assets/stylesheets/views/_consultation.scss
+++ b/app/assets/stylesheets/views/_consultation.scss
@@ -8,7 +8,7 @@
   .original-consultation {
     border-top: 1px solid $border-colour;
 
-    @include media(tablet) {
+    @include govuk-media-query($from: tablet) {
       padding-top: govuk-spacing(6);
     }
   }
diff --git a/app/assets/stylesheets/views/_detailed-guide.scss b/app/assets/stylesheets/views/_detailed-guide.scss
index 7c41d4f2c..19f8e59e0 100644
--- a/app/assets/stylesheets/views/_detailed-guide.scss
+++ b/app/assets/stylesheets/views/_detailed-guide.scss
@@ -15,7 +15,7 @@
   .logo-image {
     max-width: 70%;
 
-    @include media(tablet) {
+    @include govuk-media-query($from: tablet) {
       margin-top: 45px;
       max-width: 100%;
     }
diff --git a/app/assets/stylesheets/views/_document-collection.scss b/app/assets/stylesheets/views/_document-collection.scss
index d0a72990f..585fb6e86 100644
--- a/app/assets/stylesheets/views/_document-collection.scss
+++ b/app/assets/stylesheets/views/_document-collection.scss
@@ -7,7 +7,7 @@
     margin-top: govuk-spacing(6);
     margin-bottom: govuk-spacing(3);
 
-    @include media(desktop) {
+    @include govuk-media-query($from: desktop) {
       margin-top: govuk-spacing(8);
       margin-bottom: govuk-spacing(4);
     }
diff --git a/app/assets/stylesheets/views/_html-publication.scss b/app/assets/stylesheets/views/_html-publication.scss
index c157d4766..233b93db3 100644
--- a/app/assets/stylesheets/views/_html-publication.scss
+++ b/app/assets/stylesheets/views/_html-publication.scss
@@ -46,7 +46,7 @@
     padding: 0 15px;
     box-sizing: border-box;
 
-    @include media(desktop) {
+    @include govuk-media-query($from: desktop) {
       width: 75%;
       float: right;
     }
@@ -64,7 +64,7 @@
     display: none;
   }
 
-  @include media(false, $desktop-breakpoint) {
+  @include govuk-media-query($until: desktop) {
     .govuk-sticky-element--enabled {
       position: static;
     }

From 40d9a01cb3401a91e6be7837eb8d71422f929245 Mon Sep 17 00:00:00 2001
From: Andy Sellick <andy.sellick@digital.cabinet-office.gov.uk>
Date: Mon, 28 Oct 2019 09:22:07 +0000
Subject: [PATCH 2/8] Update border colour

---
 app/assets/stylesheets/components/_figure.scss                  | 2 +-
 app/assets/stylesheets/components/_published-dates.scss         | 2 +-
 .../stylesheets/helpers/_publisher-metadata-with-logo.scss      | 2 +-
 app/assets/stylesheets/views/_consultation.scss                 | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/components/_figure.scss b/app/assets/stylesheets/components/_figure.scss
index 9ac48b018..a974bfa04 100644
--- a/app/assets/stylesheets/components/_figure.scss
+++ b/app/assets/stylesheets/components/_figure.scss
@@ -2,7 +2,7 @@
   @extend %contain-floats;
   @include responsive-bottom-margin;
 
-  border-top: 1px solid $border-colour;
+  border-top: 1px solid $govuk-border-colour;
   padding-top: govuk-spacing(3);
 }
 
diff --git a/app/assets/stylesheets/components/_published-dates.scss b/app/assets/stylesheets/components/_published-dates.scss
index 10b124218..189d6d0cf 100644
--- a/app/assets/stylesheets/components/_published-dates.scss
+++ b/app/assets/stylesheets/components/_published-dates.scss
@@ -38,5 +38,5 @@
 
 .app-c-published-dates--history {
   padding-top: govuk-spacing(2);
-  border-top: 1px solid $border-colour;
+  border-top: 1px solid $govuk-border-colour;
 }
diff --git a/app/assets/stylesheets/helpers/_publisher-metadata-with-logo.scss b/app/assets/stylesheets/helpers/_publisher-metadata-with-logo.scss
index e6f1ae07a..65d591332 100644
--- a/app/assets/stylesheets/helpers/_publisher-metadata-with-logo.scss
+++ b/app/assets/stylesheets/helpers/_publisher-metadata-with-logo.scss
@@ -3,7 +3,7 @@
 // formats so they may ultimately become component styles.
 .metadata-logo-wrapper {
   @include govuk-clearfix;
-  border-top: 1px solid $border-colour;
+  border-top: 1px solid $govuk-border-colour;
   margin-left: govuk-spacing(3);
   margin-right: govuk-spacing(3);
 
diff --git a/app/assets/stylesheets/views/_consultation.scss b/app/assets/stylesheets/views/_consultation.scss
index 15510d390..9df576799 100644
--- a/app/assets/stylesheets/views/_consultation.scss
+++ b/app/assets/stylesheets/views/_consultation.scss
@@ -6,7 +6,7 @@
   }
 
   .original-consultation {
-    border-top: 1px solid $border-colour;
+    border-top: 1px solid $govuk-border-colour;
 
     @include govuk-media-query($from: tablet) {
       padding-top: govuk-spacing(6);

From 117869bd0434884374314e68c9b506d6511cae62 Mon Sep 17 00:00:00 2001
From: Andy Sellick <andy.sellick@digital.cabinet-office.gov.uk>
Date: Mon, 28 Oct 2019 09:25:17 +0000
Subject: [PATCH 3/8] Update font mixins

---
 app/assets/stylesheets/components/_banner.scss          | 8 ++++----
 app/assets/stylesheets/components/_download-link.scss   | 2 +-
 app/assets/stylesheets/components/_error-message.scss   | 6 +-----
 app/assets/stylesheets/components/_figure.scss          | 4 ++--
 app/assets/stylesheets/components/_published-dates.scss | 2 +-
 app/assets/stylesheets/helpers/_parts.scss              | 6 +++---
 app/assets/stylesheets/views/_coming-soon.scss          | 2 +-
 app/assets/stylesheets/views/_consultation.scss         | 2 +-
 app/assets/stylesheets/views/_document-collection.scss  | 2 +-
 app/assets/stylesheets/views/_guide.scss                | 2 +-
 app/assets/stylesheets/views/_html-publication.scss     | 2 +-
 app/assets/stylesheets/views/_unpublishing.scss         | 2 +-
 12 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/app/assets/stylesheets/components/_banner.scss b/app/assets/stylesheets/components/_banner.scss
index 5127f85b2..dcdc15ba4 100644
--- a/app/assets/stylesheets/components/_banner.scss
+++ b/app/assets/stylesheets/components/_banner.scss
@@ -1,6 +1,6 @@
 .app-c-banner {
   @include responsive-bottom-margin;
-  @include core-19;
+  @include govuk-font(19);
   @include white-links;
   direction: ltr;
   background: $govuk-blue;
@@ -20,16 +20,16 @@
 }
 
 .app-c-banner__text {
-  @include core-24;
+  @include govuk-font(24);
 }
 
 .app-c-banner__title {
-  @include bold-27;
+  @include govuk-font(27, $weight: bold);
   margin-bottom: govuk-spacing(2);
 }
 
 .app-c-banner__desc {
-  @include core-19;
+  @include govuk-font(19);
   // Ensure the text has a line-length of around 60 characters
   max-width: 30em;
   padding-top: govuk-spacing(2);
diff --git a/app/assets/stylesheets/components/_download-link.scss b/app/assets/stylesheets/components/_download-link.scss
index c79c275d0..fb628ac28 100644
--- a/app/assets/stylesheets/components/_download-link.scss
+++ b/app/assets/stylesheets/components/_download-link.scss
@@ -1,6 +1,6 @@
 .app-c-download-link {
   display: inline-block;
-  @include bold-19;
+  @include govuk-font(19, $weight: bold);
   margin-top: govuk-spacing(3);
   margin-bottom: govuk-spacing(3);
 
diff --git a/app/assets/stylesheets/components/_error-message.scss b/app/assets/stylesheets/components/_error-message.scss
index b43448de5..835cb9b28 100644
--- a/app/assets/stylesheets/components/_error-message.scss
+++ b/app/assets/stylesheets/components/_error-message.scss
@@ -2,12 +2,8 @@
 
 .app-c-error-message {
   display: block;
-
   margin-bottom: $app-spacing-scale-3;
-
   clear: both;
-
   color: $app-error-colour;
-
-  @include bold-19;
+  @include govuk-font(19, $weight: bold);
 }
diff --git a/app/assets/stylesheets/components/_figure.scss b/app/assets/stylesheets/components/_figure.scss
index a974bfa04..07cde2eef 100644
--- a/app/assets/stylesheets/components/_figure.scss
+++ b/app/assets/stylesheets/components/_figure.scss
@@ -17,11 +17,11 @@
 }
 
 .app-c-figure__figcaption {
-  @include core-16;
+  @include govuk-font(16);
 
 
   @include govuk-media-query($from: tablet) {
-    @include core-14;
+    @include govuk-font(14);
 
     display: block;
     vertical-align: top;
diff --git a/app/assets/stylesheets/components/_published-dates.scss b/app/assets/stylesheets/components/_published-dates.scss
index 189d6d0cf..5775c0a73 100644
--- a/app/assets/stylesheets/components/_published-dates.scss
+++ b/app/assets/stylesheets/components/_published-dates.scss
@@ -33,7 +33,7 @@
 
 .app-c-published-dates__change-date {
   display: block;
-  @include bold-16;
+  @include govuk-font(16, $weight: bold);
 }
 
 .app-c-published-dates--history {
diff --git a/app/assets/stylesheets/helpers/_parts.scss b/app/assets/stylesheets/helpers/_parts.scss
index 1a5326ea2..ead7ea2c4 100644
--- a/app/assets/stylesheets/helpers/_parts.scss
+++ b/app/assets/stylesheets/helpers/_parts.scss
@@ -15,10 +15,10 @@
 
   .part-navigation {
     margin-bottom: 0;
-    @include core-19;
+    @include govuk-font(19);
 
     @include govuk-media-query($from: tablet) {
-      @include core-16;
+      @include govuk-font(16);
     }
 
     li {
@@ -32,7 +32,7 @@
   }
 
   .part-title {
-    @include bold-27;
+    @include govuk-font(27, $weight: bold);
     margin-bottom: govuk-spacing(3);
     margin-top: govuk-spacing(3);
 
diff --git a/app/assets/stylesheets/views/_coming-soon.scss b/app/assets/stylesheets/views/_coming-soon.scss
index d32bc6c63..8df2d3f34 100644
--- a/app/assets/stylesheets/views/_coming-soon.scss
+++ b/app/assets/stylesheets/views/_coming-soon.scss
@@ -1,6 +1,6 @@
 .coming-soon {
   .summary {
-    @include core-24;
+    @include govuk-font(24);
     margin-bottom: govuk-spacing(3);
   }
 }
diff --git a/app/assets/stylesheets/views/_consultation.scss b/app/assets/stylesheets/views/_consultation.scss
index 9df576799..dade8f20a 100644
--- a/app/assets/stylesheets/views/_consultation.scss
+++ b/app/assets/stylesheets/views/_consultation.scss
@@ -2,7 +2,7 @@
   @include sidebar-with-body;
 
   .consultation-date {
-    @include bold-19;
+    @include govuk-font(19, $weight: bold);
   }
 
   .original-consultation {
diff --git a/app/assets/stylesheets/views/_document-collection.scss b/app/assets/stylesheets/views/_document-collection.scss
index 585fb6e86..4cb17e224 100644
--- a/app/assets/stylesheets/views/_document-collection.scss
+++ b/app/assets/stylesheets/views/_document-collection.scss
@@ -3,7 +3,7 @@
   @include sidebar-with-body;
 
   .group-title {
-    @include bold-27;
+    @include govuk-font(27, $weight: bold);
     margin-top: govuk-spacing(6);
     margin-bottom: govuk-spacing(3);
 
diff --git a/app/assets/stylesheets/views/_guide.scss b/app/assets/stylesheets/views/_guide.scss
index 92f31fbb5..34d6192e5 100644
--- a/app/assets/stylesheets/views/_guide.scss
+++ b/app/assets/stylesheets/views/_guide.scss
@@ -18,7 +18,7 @@
   // https://github.com/alphagov/static/blob/f44470edc4e4159ea37481985c641034741623ac/app/assets/stylesheets/helpers/_text.scss#L38
   .govuk-govspeak {
     h2 {
-      @include bold-24;
+      @include govuk-font(24, $weight: bold);
     }
   }
 }
diff --git a/app/assets/stylesheets/views/_html-publication.scss b/app/assets/stylesheets/views/_html-publication.scss
index 233b93db3..2ee6818c2 100644
--- a/app/assets/stylesheets/views/_html-publication.scss
+++ b/app/assets/stylesheets/views/_html-publication.scss
@@ -25,7 +25,7 @@
   }
 
   .publication-header__last-changed {
-    @include core-19;
+    @include govuk-font(19);
     margin-top: govuk-spacing(3);
   }
 
diff --git a/app/assets/stylesheets/views/_unpublishing.scss b/app/assets/stylesheets/views/_unpublishing.scss
index 915a49154..174baad63 100644
--- a/app/assets/stylesheets/views/_unpublishing.scss
+++ b/app/assets/stylesheets/views/_unpublishing.scss
@@ -4,7 +4,7 @@
 
   .summary,
   .alternative {
-    @include core-19;
+    @include govuk-font(19);
     margin-bottom: govuk-spacing(3);
   }
 }

From 8a7e47d5e36c18cc7749813be8a283dd6ee75a8d Mon Sep 17 00:00:00 2001
From: Andy Sellick <andy.sellick@digital.cabinet-office.gov.uk>
Date: Mon, 28 Oct 2019 09:30:08 +0000
Subject: [PATCH 4/8] Update colours

---
 app/assets/stylesheets/components/_banner.scss                | 4 ++--
 .../stylesheets/components/_contents-list-with-body.scss      | 2 +-
 app/assets/stylesheets/components/_important-metadata.scss    | 2 +-
 app/assets/stylesheets/components/helpers/_variables.scss     | 4 ++--
 app/assets/stylesheets/helpers/_parts.scss                    | 2 +-
 app/assets/stylesheets/mixins/_white-links.scss               | 4 ++--
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/components/_banner.scss b/app/assets/stylesheets/components/_banner.scss
index dcdc15ba4..55c773b78 100644
--- a/app/assets/stylesheets/components/_banner.scss
+++ b/app/assets/stylesheets/components/_banner.scss
@@ -3,8 +3,8 @@
   @include govuk-font(19);
   @include white-links;
   direction: ltr;
-  background: $govuk-blue;
-  color: $white;
+  background: $govuk-brand-colour;
+  color: govuk-colour("white");
   padding: govuk-spacing(3);
   clear: both;
 
diff --git a/app/assets/stylesheets/components/_contents-list-with-body.scss b/app/assets/stylesheets/components/_contents-list-with-body.scss
index 663334483..513bdf73d 100644
--- a/app/assets/stylesheets/components/_contents-list-with-body.scss
+++ b/app/assets/stylesheets/components/_contents-list-with-body.scss
@@ -21,7 +21,7 @@
 }
 
 .app-c-contents-list-with-body__link-wrapper.govuk-sticky-element--stuck-to-window {
-  background-color: $panel-colour;
+  background-color: govuk-colour("mid-grey", $legacy: "grey-3");
   bottom: -1px; // 'Fix' for anomalous 1px margin which sporadically appears below this element.
   left: 0;
   margin: 0;
diff --git a/app/assets/stylesheets/components/_important-metadata.scss b/app/assets/stylesheets/components/_important-metadata.scss
index 2eb1621fe..36c68d014 100644
--- a/app/assets/stylesheets/components/_important-metadata.scss
+++ b/app/assets/stylesheets/components/_important-metadata.scss
@@ -1,5 +1,5 @@
 .app-c-important-metadata {
-  background: $govuk-blue;
+  background: $govuk-brand-colour;
   color: govuk-colour("white");
   padding: govuk-spacing(3);
 
diff --git a/app/assets/stylesheets/components/helpers/_variables.scss b/app/assets/stylesheets/components/helpers/_variables.scss
index e2fe0d9c1..10f4887c2 100644
--- a/app/assets/stylesheets/components/helpers/_variables.scss
+++ b/app/assets/stylesheets/components/helpers/_variables.scss
@@ -10,8 +10,8 @@ $app-spacing-scale-6: 40px;
 $app-spacing-scale-7: 50px;
 $app-spacing-scale-8: 60px;
 
-$app-text-colour: $text-colour;
-$app-secondary-text-colour: $grey-1;
+$app-text-colour: $govuk-text-colour;
+$app-secondary-text-colour: govuk-colour("dark-grey", $legacy: "grey-1");
 
 // Border widths
 $app-border-width-mobile: 4px;
diff --git a/app/assets/stylesheets/helpers/_parts.scss b/app/assets/stylesheets/helpers/_parts.scss
index ead7ea2c4..310af2d2e 100644
--- a/app/assets/stylesheets/helpers/_parts.scss
+++ b/app/assets/stylesheets/helpers/_parts.scss
@@ -10,7 +10,7 @@
       padding-bottom: govuk-spacing(3);
     }
 
-    border-bottom: 1px solid $grey-2;
+    border-bottom: 1px solid govuk-colour("mid-grey", $legacy: "grey-2");
   }
 
   .part-navigation {
diff --git a/app/assets/stylesheets/mixins/_white-links.scss b/app/assets/stylesheets/mixins/_white-links.scss
index b9c42dfa6..e65590e69 100644
--- a/app/assets/stylesheets/mixins/_white-links.scss
+++ b/app/assets/stylesheets/mixins/_white-links.scss
@@ -2,11 +2,11 @@
   a,
   a:visited,
   a:hover {
-    color: $white;
+    color: govuk-colour("white");
     text-decoration: underline;
   }
 
   a:active {
-    color: $link-active-colour;
+    color: $govuk-link-active-colour;
   }
 }

From a1acb592d8a8361b812c2f5d1da7445587d34e7e Mon Sep 17 00:00:00 2001
From: Andy Sellick <andy.sellick@digital.cabinet-office.gov.uk>
Date: Mon, 28 Oct 2019 10:42:56 +0000
Subject: [PATCH 5/8] Update misc toolkit references

- change device pixel ratio mixin
- update organisation colours mixin
- use govuk-clearfix
---
 app/assets/stylesheets/components/_figure.scss         |  2 +-
 app/assets/stylesheets/components/_print-link.scss     |  2 +-
 .../stylesheets/helpers/_organisation-links.scss       | 10 +++++++---
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/components/_figure.scss b/app/assets/stylesheets/components/_figure.scss
index 07cde2eef..e4755661e 100644
--- a/app/assets/stylesheets/components/_figure.scss
+++ b/app/assets/stylesheets/components/_figure.scss
@@ -1,5 +1,5 @@
 .app-c-figure {
-  @extend %contain-floats;
+  @include govuk-clearfix;
   @include responsive-bottom-margin;
 
   border-top: 1px solid $govuk-border-colour;
diff --git a/app/assets/stylesheets/components/_print-link.scss b/app/assets/stylesheets/components/_print-link.scss
index 89f1eabc4..078f08bde 100644
--- a/app/assets/stylesheets/components/_print-link.scss
+++ b/app/assets/stylesheets/components/_print-link.scss
@@ -7,7 +7,7 @@
     padding: 0.5em 0.5em 0.5em 38px;
     margin-left: -10px;
 
-    @include device-pixel-ratio() {
+    @include govuk-device-pixel-ratio($ratio: 2) {
       background-image: image-url("icon-print-2x.png");
       background-size: 16px 18px;
     }
diff --git a/app/assets/stylesheets/helpers/_organisation-links.scss b/app/assets/stylesheets/helpers/_organisation-links.scss
index d5d6bc5db..7af3f64c3 100644
--- a/app/assets/stylesheets/helpers/_organisation-links.scss
+++ b/app/assets/stylesheets/helpers/_organisation-links.scss
@@ -1,8 +1,12 @@
+@import "govuk/settings/colours-palette";
+@import "govuk/settings/colours-organisations";
+@import "govuk/helpers/colour";
+
 @mixin organisation-links {
-  @each $organisation in $all-organisation-brand-colours {
-    .#{nth($organisation, 1)}-brand-colour {
+  @each $organisation in map-keys($govuk-colours-organisations) {
+    .#{$organisation}-brand-colour {
       a {
-        color: nth($organisation, 3);
+        color: govuk-organisation-colour($organisation);
 
         &:focus {
           color: $govuk-focus-text-colour;

From e988581deb067438c8c4f1f93867ff1c0b05d73b Mon Sep 17 00:00:00 2001
From: Andy Sellick <andy.sellick@digital.cabinet-office.gov.uk>
Date: Mon, 28 Oct 2019 12:35:37 +0000
Subject: [PATCH 6/8] Remove toolkit imports

---
 app/assets/stylesheets/application.scss | 5 -----
 app/assets/stylesheets/print.scss       | 3 ---
 2 files changed, 8 deletions(-)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index c4675b49e..4062beffc 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -3,11 +3,6 @@
 $govuk-use-legacy-palette: true;
 $govuk-typography-use-rem: false;
 
-// govuk_frontend_toolkit dependencies
-@import "typography";
-@import "colours";
-@import "grid_layout";
-
 // Components from govuk_publishing_components gem
 @import 'govuk_publishing_components/all_components';
 
diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss
index a2000b43f..f29683709 100644
--- a/app/assets/stylesheets/print.scss
+++ b/app/assets/stylesheets/print.scss
@@ -1,5 +1,2 @@
-// govuk_frontend_toolkit imports
-@import 'typography';
-
 @import 'govuk_publishing_components/all_components_print';
 @import 'print/html-publication';

From 112742a7534f2bdf373f058aff18ece1b3270047 Mon Sep 17 00:00:00 2001
From: Andy Sellick <andy.sellick@digital.cabinet-office.gov.uk>
Date: Tue, 29 Oct 2019 14:16:03 +0000
Subject: [PATCH 7/8] Use govuk-error-colour for errors

---
 app/assets/stylesheets/components/_error-message.scss     | 2 +-
 app/assets/stylesheets/components/helpers/_variables.scss | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/components/_error-message.scss b/app/assets/stylesheets/components/_error-message.scss
index 835cb9b28..f2e37e523 100644
--- a/app/assets/stylesheets/components/_error-message.scss
+++ b/app/assets/stylesheets/components/_error-message.scss
@@ -4,6 +4,6 @@
   display: block;
   margin-bottom: $app-spacing-scale-3;
   clear: both;
-  color: $app-error-colour;
+  color: $govuk-error-colour;
   @include govuk-font(19, $weight: bold);
 }
diff --git a/app/assets/stylesheets/components/helpers/_variables.scss b/app/assets/stylesheets/components/helpers/_variables.scss
index 10f4887c2..254d8ae2f 100644
--- a/app/assets/stylesheets/components/helpers/_variables.scss
+++ b/app/assets/stylesheets/components/helpers/_variables.scss
@@ -20,5 +20,3 @@ $app-border-width-form-element: 2px;
 
 // Focus
 $app-focus-width: 3px;
-
-$app-error-colour: $red;

From dd1385947718862dd93a56dd4cb0ee89c4a6f0d8 Mon Sep 17 00:00:00 2001
From: Andy Sellick <andy.sellick@digital.cabinet-office.gov.uk>
Date: Tue, 29 Oct 2019 14:19:02 +0000
Subject: [PATCH 8/8] Use govuk-frontend spacing

---
 .../stylesheets/components/_error-message.scss       |  2 +-
 .../stylesheets/components/helpers/_variables.scss   | 12 ------------
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/components/_error-message.scss b/app/assets/stylesheets/components/_error-message.scss
index f2e37e523..de055fdad 100644
--- a/app/assets/stylesheets/components/_error-message.scss
+++ b/app/assets/stylesheets/components/_error-message.scss
@@ -2,7 +2,7 @@
 
 .app-c-error-message {
   display: block;
-  margin-bottom: $app-spacing-scale-3;
+  margin-bottom: govuk-spacing(3);
   clear: both;
   color: $govuk-error-colour;
   @include govuk-font(19, $weight: bold);
diff --git a/app/assets/stylesheets/components/helpers/_variables.scss b/app/assets/stylesheets/components/helpers/_variables.scss
index 254d8ae2f..4933f358f 100644
--- a/app/assets/stylesheets/components/helpers/_variables.scss
+++ b/app/assets/stylesheets/components/helpers/_variables.scss
@@ -1,15 +1,3 @@
-// Forked from GOV.UK Frontend, namespace changed to ensure no conflicts.
-
-$app-spacing-scale-0: 0;
-$app-spacing-scale-1: 5px;
-$app-spacing-scale-2: 10px;
-$app-spacing-scale-3: 15px;
-$app-spacing-scale-4: 20px;
-$app-spacing-scale-5: 30px;
-$app-spacing-scale-6: 40px;
-$app-spacing-scale-7: 50px;
-$app-spacing-scale-8: 60px;
-
 $app-text-colour: $govuk-text-colour;
 $app-secondary-text-colour: govuk-colour("dark-grey", $legacy: "grey-1");