Update styles to use design system

Changes made:
- Explicitly adding the focus state multiple times
- Adding a class to hang the focus state off where necessary
- Removing "@include core-16" as it isn't needed and it introduces line spacing that makes the focus state overlap
- Removing an explicitly set link colour that overrode the focus state
- Adding breathing space to the print link

Gemfile

@@ -12,10 +12,8 @@ gem 'rails-i18n', '>= 4.0.4'
 gem 'rails_translation_manager', '~> 0.1.0'
 gem 'sass-rails', '~> 5.0'
 gem 'uglifier', '>= 1.3.0'
-
 gem 'gds-api-adapters', '~> 60.0'
 gem 'govuk_ab_testing', '~> 2.4'
-
 gem 'govuk_app_config', '~> 2.0'
 gem 'govuk_frontend_toolkit', '~> 8.2.0'
 gem 'govuk_publishing_components', '~> 19.0.0'

Gemfile.lock

@@ -392,4 +392,4 @@ RUBY VERSION
    ruby 2.6.3p62
 
 BUNDLED WITH
-   2.0.2
+   1.17.3

app/assets/stylesheets/application.scss

@@ -3,14 +3,14 @@
 $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';
 
-// // govuk_frontend_toolkit imports
-// @import 'colours';
-// @import 'shims';
-// @import 'typography';
-
 // government-frontend mixins
 @import 'mixins/margins';
 @import 'mixins/white-links';

app/assets/stylesheets/components/_back-to-top.scss

@@ -1,9 +1,12 @@
 .app-c-back-to-top {
-  @include core-16;
   display: inline-block;
   margin-bottom: govuk-spacing(3);
   margin-left: govuk-spacing(3);
   margin-right: govuk-spacing(3);
+
+  &:focus {
+    @include govuk-focused-text;
+  }
 }
 
 .app-c-back-to-top__icon {
@@ -12,3 +15,4 @@
   width: .8em;
   height: .968em;
 }
+

app/assets/stylesheets/components/_contents-list-with-body.scss

@@ -36,7 +36,6 @@
   }
 
   .app-c-back-to-top {
-    color: $link-colour;
     margin-bottom: 0;
     padding: govuk-spacing(3);
     width: percentage(2 / 3);
@@ -46,15 +45,4 @@
     }
   }
 
-  .app-c-back-to-top:focus {
-    outline: 0;
-  }
-
-  .app-c-back-to-top:hover {
-    color: $link-hover-colour;
-  }
-
-  .app-c-back-to-top:active {
-    color: $link-active-colour;
-   }
 }

app/assets/stylesheets/components/_download-link.scss

@@ -4,9 +4,14 @@
   margin-top: govuk-spacing(3);
   margin-bottom: govuk-spacing(3);
 
+  &:focus {
+    @include govuk-focused-text;
+  }
+
   @include media(tablet) {
     margin-top: govuk-spacing(6);
   }
+
 }
 
 .app-c-download-link__icon {

app/assets/stylesheets/components/_important-metadata.scss

@@ -1,5 +1,4 @@
 .app-c-important-metadata {
-  @include core-16;
   @include white-links;
   background: $govuk-blue;
   color: $white;
@@ -30,4 +29,8 @@
 
 .app-c-important-metadata__definition {
   font-weight: bold;
+
+  a:focus {
+    @include govuk-focused-text;
+  }
 }

app/assets/stylesheets/components/_print-link.scss

@@ -3,8 +3,9 @@
   margin-bottom: 2em;
 
   .app-c-print-link__link {
-    background: image-url("icon-print.png") no-repeat 0 50%;
-    padding: 0.5em 0 0.5em 28px;
+    background: image-url("icon-print.png") no-repeat 10px 50%;
+    padding: 0.5em 0.5em 0.5em 38px;
+    margin-left: -10px;
 
     @include device-pixel-ratio() {
       background-image: image-url("icon-print-2x.png");

app/assets/stylesheets/components/_published-dates.scss

@@ -1,16 +1,26 @@
 .app-c-published-dates {
-  @include core-16;
   direction: ltr;
+  line-height: 1.45em;
 }
 
 .app-c-published-dates__toggle {
   display: none;
 
+  &:focus {
+    @include govuk-focused-text;
+  }
+
   .js-enabled & {
     display: inline-block;
   }
 }
 
+.app-c-published-dates__history-link {
+  &:focus {
+    @include govuk-focused-text;
+  }
+}
+
 .app-c-published-dates__change-history {
   margin: 20px 0;
 }

app/assets/stylesheets/components/_publisher-metadata.scss

@@ -1,12 +1,15 @@
 .app-c-publisher-metadata {
   @include responsive-bottom-margin;
-  @include core-16;
   direction: ltr;
   padding-top: govuk-spacing(3);
 }
 
 .app-c-publisher-metadata__other a {
   font-weight: bold;
+
+  &:focus {
+    @include govuk-focused-text;
+  }
 }
 
 .app-c-publisher-metadata__term {

app/assets/stylesheets/components/helpers/_variables.scss

@@ -20,6 +20,5 @@ $app-border-width-form-element: 2px;
 
 // Focus
 $app-focus-width: 3px;
-$app-focus-colour: $focus-colour;
 
 $app-error-colour: $red;

app/assets/stylesheets/helpers/_parts.scss

@@ -27,6 +27,10 @@
 
       a {
         display: block;
+
+        &:focus {
+          @include govuk-focused-text;
+        }
       }
     }
   }

app/views/components/_published-dates.html.erb

@@ -14,7 +14,7 @@
   <% if last_updated %>
     <% if published %><br /><% end %>Last updated <%= last_updated %>
     <% if link_to_history && history.empty? %>
-      &mdash; <a href="#history"><%= t('components.published_dates.see_all_updates', locale: :en) %></a>
+      &mdash; <a href="#history" class="app-c-published-dates__history-link"><%= t('components.published_dates.see_all_updates', locale: :en) %></a>
     <% elsif history.any? %>
       <a href="#full-history"
       class="app-c-published-dates__toggle"