govuk_publishing_components 16.29.0 → 17.0.0

data/app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss

@@ -2,56 +2,56 @@
   @include govuk-text-colour;
   display: flex;
   flex-wrap: wrap;
-  margin: $gutter-half 0 0 0;
+  margin: govuk-spacing(3) 0 0 0;
   padding: 0;
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     margin-right: -25px;
   }
 }
 
 .gem-c-highlight-boxes__item-wrapper {
-  @include core-19;
-  @include box-sizing(border-box);
+  @include govuk-font(19);
+  box-sizing: border-box;
   list-style-type: none;
-  padding: ($gutter / 6) $gutter-one-third ($gutter-half + $gutter-one-third) 0;
+  padding: govuk-spacing(1) govuk-spacing(2) govuk-spacing(5) 0;
   width: 100%;
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     width: 50%;
-    padding: ($gutter / 6) ($gutter-half + $gutter-one-third) ($gutter-half + $gutter-one-third) 0;
+    padding: govuk-spacing(1) govuk-spacing(5) govuk-spacing(5) 0;
   }
 
-  @include media(desktop) {
+  @include govuk-media-query($from: desktop) {
     width: (1 / 3) * 100%;
-    padding: ($gutter / 6) ($gutter-half + $gutter-one-third) ($gutter-half + $gutter-one-third) 0;
+    padding: govuk-spacing(1) govuk-spacing(5) govuk-spacing(5) 0;
   }
 }
 
 .gem-c-highlight-boxes__item-wrapper--half-width {
-  @include media(desktop) {
+  @include govuk-media-query($from: desktop) {
     width: 50%;
-    padding: ($gutter / 6) ($gutter-half + $gutter-one-third) ($gutter-half + $gutter-one-third) 0;
+    padding: govuk-spacing(1) govuk-spacing(5) govuk-spacing(5) 0;
   }
 }
 
 .gem-c-highlight-boxes__item {
-  @include box-sizing(border-box);
-  border: 1px solid $grey-2;
-  padding: $gutter-half * 1.5;
+  box-sizing: border-box;
+  border: 1px solid govuk-colour("grey-2");
+  padding: govuk-spacing(3) * 1.5;
   height: 100%;
-  box-shadow: 7px 7px 0 $white, 8px 8px 0 $grey-2;
+  box-shadow: 7px 7px 0 govuk-colour("white"), 8px 8px 0 govuk-colour("grey-2");
 }
 
 .gem-c-highlight-boxes--inverse {
-  background-color: $govuk-blue;
+  background-color: govuk-colour("blue");
   border: 0;
-  color: $white;
+  color: govuk-colour("white");
 }
 
 .gem-c-highlight-boxes__title {
   @extend %govuk-link;
-  @include bold-19;
+  @include govuk-font(19, $weight: bold);
   display: block;
   text-decoration: underline;
   margin-bottom: 5px;
@@ -61,7 +61,7 @@
   &:link,
   &:visited,
   &:hover {
-    color: $white;
+    color: govuk-colour("white");
   }
 
   &:active,
@@ -71,15 +71,15 @@
 }
 
 .gem-c-highlight-boxes__title--featured {
-  @include bold-24;
+  @include govuk-font(24, $weight: bold);
 }
 
 .gem-c-highlight-boxes__description {
-  margin: 0 0 $gutter-one-third 0;
+  margin: 0 0 govuk-spacing(2) 0;
 }
 
 .gem-c-highlight-boxes__metadata {
-  margin: 0 $gutter-half 0 0;
-  @include core-16;
+  margin: 0 govuk-spacing(3) 0 0;
+  @include govuk-font(16);
   display: inline-block;
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_inverse-header.scss

@@ -1,14 +1,14 @@
 .gem-c-inverse-header {
   width: 100%;
-  background-color: $govuk-blue;
-  color: $white;
-  margin-bottom: $gutter;
-  padding: 0 $gutter $gutter;
+  background-color: govuk-colour("blue");
+  color: govuk-colour("white");
+  margin-bottom: govuk-spacing(6);
+  padding: 0 govuk-spacing(6) govuk-spacing(6);
   box-sizing: border-box;
 }
 
 .gem-c-inverse-header a {
-  color: $white;
+  color: govuk-colour("white");
 }
 
 
@@ -18,7 +18,7 @@
   .gem-c-inverse-header__supplement,
   .publication-header__last-changed {
     @include govuk-font($size: 16, $line-height: 1.5);
-    color: $white;
+    color: govuk-colour("white");
     margin: 0;
   }
 }
@@ -26,9 +26,9 @@
 .gem-c-inverse-header--full-width {
   padding-left: 0;
   padding-right: 0;
-  padding-bottom: $gutter-half;
+  padding-bottom: govuk-spacing(3);
 }
 
 .gem-c-inverse-header--padding-top {
-  padding-top: $gutter-half;
+  padding-top: govuk-spacing(3);
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_lead-paragraph.scss

@@ -1,6 +1,6 @@
 .gem-c-lead-paragraph {
   @include govuk-text-colour;
-  @include core-24;
+  @include govuk-font(24);
   margin-top: 0;
   @include responsive-bottom-margin;
   // Ensure the text has a line-length of around 60 characters
@@ -8,5 +8,5 @@
 }
 
 .gem-c-lead-paragraph--inverse {
-  color: $white;
+  color: govuk-colour("white");
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_metadata.scss

@@ -1,8 +1,8 @@
 .gem-c-metadata {
   @include govuk-text-colour;
-  @include core-16;
+  @include govuk-font(16);
   @include responsive-bottom-margin;
-  @extend %contain-floats;
+  @include govuk-clearfix;
 
   a {
     @include govuk-link-common;
@@ -33,13 +33,13 @@
   margin-top: .5em;
   line-height: normal;
 
-  @include media(tablet) {
-    @include box-sizing(border-box);
+  @include govuk-media-query($from: tablet) {
+    box-sizing: border-box;
     float: left;
     clear: left;
     width: 30%;
     max-width: 11em;
-    padding-right: $gutter-one-third;
+    padding-right: govuk-spacing(2);
     margin-top: 0;
   }
 }
@@ -48,8 +48,8 @@
   float: right;
   clear: right;
 
-  @include media(tablet) {
-    padding-left: $gutter-one-third;
+  @include govuk-media-query($from: tablet) {
+    padding-left: govuk-spacing(2);
     padding-right: 0;
   }
 }
@@ -58,7 +58,7 @@
   margin: 0;
   line-height: normal;
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     float: left;
     width: 70%;
   }

data/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss

@@ -4,7 +4,7 @@
   line-height: (15 / 13);
   font-weight: 400;
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     font-size: 18px;
     line-height: 20px;
   }
@@ -14,7 +14,7 @@
   text-transform: none;
   text-decoration: none;
   display: block;
-  color: $black;
+  color: govuk-colour("black");
   height: auto;
   width: auto;
 
@@ -29,11 +29,11 @@
 
 .gem-c-organisation-logo__crest {
   // Default brand colour
-  border-left: 2px solid $black;
+  border-left: 2px solid govuk-colour("black");
   padding-top: 20px;
   padding-left: 6px;
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     padding-top: 25px;
     padding-left: 7px;
   }
@@ -48,13 +48,13 @@
 .gem-c-organisation-logo__name {
   position: relative;
   top: 3px;
-  font-family: $helvetica-regular;
+  font-family: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
 }
 
 .gem-c-organisation-logo__link {
   @include govuk-link-common;
   @include govuk-link-style-text;
-  font-family: $helvetica-regular;
+  font-family: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
 
   &:hover,
   &:focus {
@@ -67,15 +67,15 @@
   background: image-url("crests/#{$crest}_13px.png") no-repeat 5px 0;
   background-size: auto 20px;
 
-  @include device-pixel-ratio {
+  @include govuk-device-pixel-ratio {
     background-image: image-url("crests/#{$crest}_13px_x2.png");
   }
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     background: image-url("crests/#{$crest}_18px.png") no-repeat 6px 0;
     background-size: auto 26px;
 
-    @include device-pixel-ratio {
+    @include govuk-device-pixel-ratio {
       background-image: image-url("crests/#{$crest}_18px_x2.png");
     }
   }
@@ -85,7 +85,7 @@
   padding-top: 25px;
   background-size: auto 25px;
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     padding-top: 35px;
     background-size: auto 34px;
   }

data/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss

@@ -1,9 +1,6 @@
 .gem-c-pagination {
   display: block;
-  margin-top: $gutter;
-  margin-bottom: $gutter;
-  margin-left: -$gutter-half;
-  margin-right: -$gutter-half;
+  margin: govuk-spacing(6) (- govuk-spacing(3) );
 }
 
 .gem-c-pagination__list {
@@ -12,26 +9,26 @@
 }
 
 .gem-c-pagination__item {
-  @include core-16($line-height: (20 / 16));
+  @include govuk-font($size: 16, $line-height: (20 / 16));
   list-style: none;
 }
 
 .gem-c-pagination__link {
   @extend %govuk-link;
   display: block;
-  padding: $gutter-half;
+  padding: govuk-spacing(3);
   text-decoration: none;
 
   &:hover,
   &:active,
   &:visited,
   &:focus {
-    color: $link-colour;
+    color: $govuk-link-colour;
   }
 
   &:hover,
   &:active {
-    background-color: $canvas-colour;
+    background-color: govuk-colour("grey-4");
   }
 }
 
@@ -44,12 +41,12 @@
 }
 
 .gem-c-pagination__link-text {
-  @include bold-19;
-  margin-left: $gutter / 3;
+  @include govuk-font(19, $weight: bold);
+  margin-left: govuk-spacing(2);
 }
 
 .gem-c-pagination__link-icon {
-  @include core-24($line-height: (33.75 / 27));
+  @include govuk-font($size: 24, $line-height: (33.75 / 27));
   display: inline-block;
   margin-bottom: 1px;
   height: .482em;
@@ -60,9 +57,9 @@
   display: inline-block;
   margin-top: .1em;
   text-decoration: underline;
-  margin-left: $gutter;
+  margin-left: govuk-spacing(5);
 
-  @include media(mobile) {
-    margin-left: $gutter-half + 9;
+  @include govuk-media-query($from: tablet) {
+    margin-left: govuk-spacing(6);
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss

@@ -1,27 +1,27 @@
 .gem-c-related-navigation {
   @include govuk-text-colour;
-  border-top: 2px solid $govuk-blue;
+  border-top: 2px solid govuk-colour("blue");
 }
 
 .gem-c-related-navigation__main-heading {
-  @include bold-19;
-  margin-top: $gutter-half;
-  margin-bottom: $gutter-one-third;
+  @include govuk-font(19, $weight: bold);
+  margin-top: govuk-spacing(3);
+  margin-bottom: govuk-spacing(2);
 }
 
 .gem-c-related-navigation__sub-heading {
-  @include core-16;
-  border-top: 1px solid $border-colour;
+  @include govuk-font(16);
+  border-top: 1px solid govuk-colour("grey-2");
   margin: 0;
-  padding-top: $gutter-half;
+  padding-top: govuk-spacing(3);
 }
 
 .gem-c-related-navigation__sub-heading--footer {
-  @include bold-19;
+  @include govuk-font(19, $weight: bold);
   border-top: 0;
   padding-top: 0;
-  margin-top: $gutter-half;
-  margin-bottom: $gutter-one-third;
+  margin-top: govuk-spacing(3);
+  margin-bottom: govuk-spacing(2);
 }
 
 .gem-c-related-navigation__main-heading  + .gem-c-related-navigation__sub-heading {
@@ -30,21 +30,21 @@
 }
 
 .gem-c-related-navigation__sub-heading--other {
-  @include bold-19;
+  @include govuk-font(19, $weight: bold);
   border-top: 0;
   padding-top: 0;
 }
 
 .gem-c-related-navigation__nav-section {
-  margin-bottom: $gutter;
+  margin-bottom: govuk-spacing(6);
 }
 
 .gem-c-related-navigation__link {
   list-style-type: none;
-  margin-top: $gutter-half;
+  margin-top: govuk-spacing(3);
   @include govuk-font($size: 16, $weight: regular, $line-height: 1.5);
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     margin-top: 5px;
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss

@@ -8,27 +8,27 @@ $share-button-height: 32px;
 }
 
 .gem-c-share-links__list-item {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
   position: relative;
   display: inline-block;
   min-height: $share-button-height;
-  padding-left: ($share-button-width + $gutter-one-third);
-  margin-bottom: $gutter-one-third;
+  padding-left: ($share-button-width + govuk-spacing(2));
+  margin-bottom: govuk-spacing(2);
   font-size: $share-button-height / 2;
   line-height: $share-button-height;
 }
 
 .gem-c-share-links__link {
   @extend %govuk-link;
-  @include bold-16;
-  margin-right: $gutter;
+  @include govuk-font(16, $weight: bold);
+  margin-right: govuk-spacing(6);
   text-decoration: none;
 }
 
 .gem-c-share-links__title {
   @include govuk-text-colour;
   @include govuk-font($size: 16, $line-height: 1.5);
-  margin: 0 0 $gutter-one-third 0;
+  margin: 0 0 govuk-spacing(2) 0;
 }
 
 .gem-c-share-links__link-icon {
@@ -44,12 +44,12 @@ $share-button-height: 32px;
   .gem-c-share-links__link {
     display: inline-block;
     margin-right: 0;
-    margin-left: $gutter;
+    margin-left: govuk-spacing(6);
   }
 
   .gem-c-share-links__list-item {
     padding-left: 0;
-    padding-right: ($share-button-width + $gutter-one-third);
+    padding-right: ($share-button-width + govuk-spacing(2));
   }
 
   .gem-c-share-links__link-icon {