Merge pull request #3981 from alphagov/font-changes

Font changes ahead of apps being made compatible with govuk-frontend v5

CHANGELOG.md

@@ -14,6 +14,7 @@
 * Add the hidden attribute to mobile menu button ([PR #3975](https://github.com/alphagov/govuk_publishing_components/pull/3975))
 * Add tool_name to GA4 feedback component tracking ([PR #3984](https://github.com/alphagov/govuk_publishing_components/pull/3984))
 * Update script snippet in view templates ([PR #3986](https://github.com/alphagov/govuk_publishing_components/pull/3986))
+* Font changes ahead of apps being made compatible with govuk-frontend v5 ([PR #3981](https://github.com/alphagov/govuk_publishing_components/pull/3981))
 
 ## 38.0.1
 

app/assets/stylesheets/component_guide/application.scss

@@ -188,7 +188,7 @@ $gem-guide-border-width: 1px;
   }
 
   &::before {
-    @include govuk-font($size: 14);
+    @include govuk-font($size: 16);
     content: attr(data-content);
     position: absolute;
     top: 0;

app/assets/stylesheets/govuk_publishing_components/components/_button.scss

@@ -104,7 +104,7 @@
 
 @include govuk-media-query($media-type: print) {
   .gem-c-button {
-    @include govuk-font(14);
+    @include govuk-font(16);
     display: inline-block;
     padding: govuk-spacing(1);
     border: solid 1px govuk-colour("black");

app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss

@@ -69,7 +69,7 @@
     table.financial-data {
       .numeric {
         text-align: right;
-        @include govuk-font(14, $weight: regular, $tabular: true);
+        @include govuk-font(16, $weight: regular, $tabular: true);
       }
 
       // make all elements inside thead look the same
@@ -82,10 +82,10 @@
 
       thead th,
       thead td {
-        @include govuk-font(14, $weight: bold, $tabular: true);
+        @include govuk-font(16, $weight: bold, $tabular: true);
 
         &.numeric {
-          @include govuk-font(14, $weight: bold, $tabular: true);
+          @include govuk-font(16, $weight: bold, $tabular: true);
         }
       }
 

app/assets/stylesheets/govuk_publishing_components/components/_govspeak.scss

@@ -86,7 +86,7 @@
 
       .accessibility-warning {
         h2 {
-          @include govuk-font(14);
+          @include govuk-font(16);
         }
 
         .toggler {

app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss

@@ -120,7 +120,7 @@
   padding: 2px 5px 0;
   margin-left: 3px;
   vertical-align: middle;
-  @include govuk-font($size: 14, $weight: "bold");
+  @include govuk-font($size: 16, $weight: "bold");
 }
 
 .gem-c-environment-tag--production {

app/assets/stylesheets/govuk_publishing_components/components/_option-select.scss

@@ -152,7 +152,7 @@
 }
 
 .gem-c-option-select__selected-counter {
-  @include govuk-font($size: 14);
+  @include govuk-font($size: 16);
   color: $govuk-text-colour;
   margin-top: 3px;
 }

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

@@ -2,16 +2,12 @@
 
 // Default logo corresponds with the "medium stacked" Whitehall equivalent
 .gem-c-organisation-logo {
-  font-size: 13px;
+  @include govuk-font($size: 19);
   font-weight: 400;
   line-height: 1.35;
   // When this is a heading the margin needs to be set to stop it from
   // inheriting the browser's default margin:
   margin: 0;
-
-  @include govuk-media-query($from: tablet) {
-    font-size: 18px;
-  }
 }
 
 .gem-c-organisation-logo__container {
@@ -39,13 +35,8 @@
 .gem-c-organisation-logo__crest {
   // Default brand colour
   border-left: 2px solid govuk-colour("black");
-  padding-top: 23px;
-  padding-left: 6px;
-
-  @include govuk-media-query($from: tablet) {
-    padding-top: 28px;
-    padding-left: 7px;
-  }
+  padding-top: 35px;
+  padding-left: 8px;
 
   .brand--executive-office & {
     border-left-width: 0;
@@ -81,80 +72,62 @@
   }
 }
 
-@mixin crest($crest) {
-  background: url("govuk_publishing_components/crests/#{$crest}_13px.png") no-repeat 5px 0;
-  background-size: auto 20px;
-
-  @include govuk-device-pixel-ratio {
-    background-image: url("govuk_publishing_components/crests/#{$crest}_13px_x2.png");
-  }
-
-  @include govuk-media-query($from: tablet) {
-    background: url("govuk_publishing_components/crests/#{$crest}_18px.png") no-repeat 6px 0;
-    background-size: auto 26px;
-
-    @include govuk-device-pixel-ratio {
-      background-image: url("govuk_publishing_components/crests/#{$crest}_18px_x2.png");
-    }
-  }
+@mixin crest($crest, $xpos:0, $ypos:0) {
+  background: url("govuk_publishing_components/crests/#{$crest}_18px_x2.png") no-repeat $xpos $ypos;
+  background-size: auto 32px;
 }
 
 @mixin tall-crest {
-  padding-top: 25px;
-  background-size: auto 25px;
-
-  @include govuk-media-query($from: tablet) {
-    padding-top: 35px;
-    background-size: auto 34px;
-  }
+  padding-top: 39px;
+  background-size: auto 34px;
 }
 
 .gem-c-organisation-logo__crest--dbt {
-  @include crest("dbt_crest");
+  @include crest($crest: "dbt_crest", $xpos: 9px);
 }
 
 .gem-c-organisation-logo__crest--bis {
-  @include crest("bis_crest");
+  @include crest($crest: "bis_crest", $xpos: 9px);
 }
 
 .gem-c-organisation-logo__crest--hmrc {
-  @include crest("hmrc_crest");
+  @include crest($crest: "hmrc_crest", $xpos: 8px);
 }
 
 .gem-c-organisation-logo__crest--ho {
-  @include crest("ho_crest");
+  @include crest($crest: "ho_crest", $xpos: 9px);
   @include tall-crest;
 }
 
 .gem-c-organisation-logo__crest--mod {
-  @include crest("mod_crest");
+  @include crest($crest: "mod_crest", $xpos: 9px);
   @include tall-crest;
 }
 
 .gem-c-organisation-logo__crest--single-identity,
 .gem-c-organisation-logo__crest--eo,
 .gem-c-organisation-logo__crest--org {
-  @include crest("org_crest");
+  @include crest($crest: "org_crest", $xpos: 8px);
 }
 
 .gem-c-organisation-logo__crest--portcullis {
-  @include crest("portcullis");
+  @include crest($crest: "portcullis", $xpos: 9px);
 }
 
 .gem-c-organisation-logo__crest--so {
-  @include crest("so_crest");
+  @include crest($crest: "so_crest", $xpos: 9px);
 }
 
 .gem-c-organisation-logo__crest--ukaea {
-  @include crest("ukaea_crest");
+  @include crest($crest: "ukaea_crest", $xpos: 9px);
 }
 
 .gem-c-organisation-logo__crest--ukho {
-  @include crest("ukho");
+  @include crest($crest: "ukho", $xpos: 8px);
   @include tall-crest;
 }
 
 .gem-c-organisation-logo__crest--wales {
-  @include crest("wales_crest");
+  @include crest($crest: "wales_crest", $xpos: 9px);
   @include tall-crest;
 }

app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss

@@ -25,10 +25,6 @@
   .gem-c-step-nav-related__heading {
     @include govuk-font(19, $weight: bold, $line-height: 1.4);
     margin-top: govuk-spacing(4);
-
-    @include govuk-media-query($until: tablet) {
-      font-size: 19px;
-    }
   }
 
   .gem-c-step-nav-related__pretitle {

app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss

@@ -58,9 +58,7 @@
 .gem-c-subscription-links__item--button {
   cursor: pointer;
   display: none;
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
+  @include govuk-font(19, $weight: bold);
   padding: govuk-spacing(2);
   border: 1px solid $gem-quiet-button-colour;
   background-color: $gem-secondary-button-background-colour;

app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss

@@ -65,7 +65,7 @@
       }
 
       .metadata {
-        @include govuk-font($size: 14);
+        @include govuk-font($size: 16);
       }
 
       .url {
@@ -93,12 +93,12 @@
       }
 
       .opendocument-help {
-        @include govuk-font($size: 14);
+        @include govuk-font($size: 16);
       }
 
       .accessibility-warning {
         h2 {
-          @include govuk-font($size: 14);
+          @include govuk-font($size: 16);
           margin: 0;
         }
         word-break: break-word;

app/assets/stylesheets/govuk_publishing_components/components/govspeak/_fraction.scss

@@ -11,7 +11,7 @@
   .fraction {
     sup,
     sub {
-      @include govuk-font($size: 14);
+      @include govuk-font($size: 16);
     }
 
     img {

app/assets/stylesheets/govuk_publishing_components/components/govspeak/_images.scss

@@ -28,7 +28,7 @@
     }
 
     figcaption {
-      @include govuk-font($size: 14);
+      @include govuk-font($size: 16);
     }
   }
 }

app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss

@@ -39,7 +39,8 @@
     }
 
     td small {
-      font-size: 1em;
+      font-size: 19px;
+      font-size: govuk-px-to-rem(19);
     }
 
     .cell-text-left {