Merge pull request #3516 from alphagov/govuk-font-cleanup

Remove unnecessary uses of govuk-font
alphagov · Feb 7, 2024 · 9ae6c3e · 9ae6c3e
2 parents 9516375 + ff0c3a2
commit 9ae6c3e
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 22 deletions.
diff --git a/src/styles/layout/grid-nested-annotate.scss b/src/styles/layout/grid-nested-annotate.scss
@@ -21,16 +21,8 @@ $grid-nested-annotate-row-background-color: #ffffff;
     }
 
     [class^="govuk-grid-column"] > p {
-      @include govuk-font($size: 24);
-      @include govuk-responsive-padding(6);
-
-      display: block;
-      margin: 0;
-
       color: govuk-colour("white");
       background-color: govuk-colour("blue");
-
-      text-align: center;
     }
   }
 }
diff --git a/src/stylesheets/components/_example.scss b/src/stylesheets/components/_example.scss
@@ -7,6 +7,7 @@
 }
 
 .app-example {
+  @include govuk-font-size($size: 16);
   position: relative;
   border-top: 1px solid $govuk-border-colour;
   // Add a 'checkerboard' background
@@ -24,10 +25,6 @@
   background: $govuk-body-background-colour;
 }
 
-.app-example__new-window {
-  @include govuk-font($size: 16);
-}
-
 .app-example__frame {
   display: block;
   width: 100%;
@@ -71,5 +68,4 @@
 
 .app-example__code {
   position: relative;
-  @include govuk-font($size: 19);
 }
diff --git a/src/stylesheets/components/_navigation.scss b/src/stylesheets/components/_navigation.scss
@@ -24,12 +24,11 @@ $navigation-height: 50px;
   position: relative;
 
   @include govuk-media-query($from: tablet) {
-    @include govuk-font(19, $weight: bold, $line-height: $navigation-height);
     box-sizing: border-box;
-    height: $navigation-height;
     height: govuk-px-to-rem($navigation-height);
     padding: 0 govuk-spacing(3);
     float: left;
+    line-height: $navigation-height;
   }
 }
 
@@ -44,7 +43,8 @@ $navigation-height: 50px;
   margin: govuk-spacing(3) 0;
   padding: 0;
   @include govuk-typography-weight-bold; // Override .govuk-link weight
-  font-size: 19px; // We do not have a font mixin that produces 19px on mobile
+  // Type scale doesn't provide 19 across all screen sizes on mobile so we
+  // override it here
   font-size: govuk-px-to-rem(19px);
 
   // Expand the touch area of the link to the full menu width

diff --git a/src/stylesheets/components/_page-navigation.scss b/src/stylesheets/components/_page-navigation.scss
@@ -6,7 +6,7 @@
 }
 
 .app-page-navigation__item {
-  @include govuk-font(19);
+  @include govuk-typography-common;
   margin-bottom: govuk-spacing(2);
 
   @include govuk-media-query($from: tablet) {

diff --git a/src/stylesheets/components/_site-search.scss b/src/stylesheets/components/_site-search.scss
@@ -213,7 +213,7 @@ $icon-size: 40px;
 
 .app-site-search--section {
   display: block;
-  @include govuk-font($size: 16);
+  @include govuk-font-size($size: 16);
   color: $govuk-secondary-text-colour;
 }
 

diff --git a/src/stylesheets/components/_subnav.scss b/src/stylesheets/components/_subnav.scss
@@ -52,8 +52,9 @@
 }
 
 .app-subnav__theme {
+  @include govuk-font-size($size: 19);
+  @include govuk-typography-weight-regular;
   margin: 0;
   padding: govuk-spacing(2) govuk-spacing(3) govuk-spacing(2) 0;
   color: govuk-colour("dark-grey");
-  @include govuk-font(19);
 }
diff --git a/src/stylesheets/components/_tabs.scss b/src/stylesheets/components/_tabs.scss
@@ -22,7 +22,7 @@
 }
 
 .app-tabs__item {
-  @include govuk-font(19);
+  @include govuk-font-size($size: 19);
   display: inline-block;
   position: relative;
   padding: govuk-spacing(4);
@@ -99,8 +99,8 @@
 
   .app-tabs__heading-button {
     @include govuk-link-common;
-    @include govuk-font($size: 19);
     @include govuk-link-decoration;
+    @include govuk-font-size($size: 19);
 
     border: 0;
     outline: 0;

diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss
@@ -114,7 +114,10 @@ $app-code-color: #d13118;
   /// * Liberation Mono - Font for Linux used by GitHub
   pre,
   code {
-    font-family: ui-monospace, Menlo, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
+    // font family in a separate variable to avoid syntax errors when passing
+    // to the common typography mixin
+    $app-code-font: ui-monospace, menlo, "Cascadia Mono", "Segoe UI Mono", consolas, "Liberation Mono", monospace;
+    @include govuk-typography-common($font-family: $app-code-font);
   }
 }