Remove unnecessary duplicated use of govuk-font

alphagov · Sep 27, 2023 · 539c64d · 539c64d
1 parent ca02f0d
commit 539c64d
Show file tree

Hide file tree

Showing 14 changed files with 65 additions and 59 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss b/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss
@@ -9,9 +9,11 @@
   $govuk-small-checkboxes-size: 24px;
   $govuk-checkboxes-label-padding-left-right: govuk-spacing(3);
 
-  .govuk-checkboxes__item {
+  .govuk-checkboxes {
     @include govuk-font($size: 19);
+  }
 
+  .govuk-checkboxes__item {
     display: block;
     position: relative;
 
@@ -142,7 +144,6 @@
 
   .govuk-checkboxes__divider {
     $govuk-divider-size: $govuk-checkboxes-size !default;
-    @include govuk-font($size: 19);
     @include govuk-text-colour;
     width: $govuk-divider-size;
     margin-bottom: govuk-spacing(2);

diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/_index.scss b/packages/govuk-frontend/src/govuk/components/error-summary/_index.scss
@@ -2,6 +2,7 @@
 
 @include govuk-exports("govuk/component/error-summary") {
   .govuk-error-summary {
+    @include govuk-font($size: 19);
     @include govuk-text-colour;
     @include govuk-responsive-padding(4);
     @include govuk-responsive-margin(8, "bottom");
@@ -14,15 +15,14 @@
   }
 
   .govuk-error-summary__title {
-    @include govuk-font($size: 24, $weight: bold);
+    @include govuk-typography-responsive($size: 24);
+    @include govuk-typography-weight-bold;
 
     margin-top: 0;
     @include govuk-responsive-margin(4, "bottom");
   }
 
   .govuk-error-summary__body {
-    @include govuk-font($size: 19);
-
     p {
       margin-top: 0;
       @include govuk-responsive-margin(4, "bottom");

diff --git a/packages/govuk-frontend/src/govuk/components/fieldset/_index.scss b/packages/govuk-frontend/src/govuk/components/fieldset/_index.scss
@@ -35,24 +35,27 @@
   }
 
   // Modifiers that make legends look more like their equivalent headings
+  .govuk-fieldset__legend--xl,
+  .govuk-fieldset__legend--l,
+  .govuk-fieldset__legend--m {
+    @include govuk-typography-weight-bold;
+    margin-bottom: govuk-spacing(3);
+  }
 
   .govuk-fieldset__legend--xl {
-    @include govuk-font($size: 48, $weight: bold);
-    margin-bottom: govuk-spacing(3);
+    @include govuk-typography-responsive($size: 48);
   }
 
   .govuk-fieldset__legend--l {
-    @include govuk-font($size: 36, $weight: bold);
-    margin-bottom: govuk-spacing(3);
+    @include govuk-typography-responsive($size: 36);
   }
 
   .govuk-fieldset__legend--m {
-    @include govuk-font($size: 24, $weight: bold);
-    margin-bottom: govuk-spacing(3);
+    @include govuk-typography-responsive($size: 24);
   }
 
   .govuk-fieldset__legend--s {
-    @include govuk-font($size: 19, $weight: bold);
+    @include govuk-typography-weight-bold;
   }
 
   // When the legend contains an H1, we want the H1 to inherit all styles from

diff --git a/packages/govuk-frontend/src/govuk/components/header/_index.scss b/packages/govuk-frontend/src/govuk/components/header/_index.scss
@@ -62,7 +62,8 @@
   }
 
   .govuk-header__product-name {
-    @include govuk-font($size: 24, $line-height: 1);
+    @include govuk-typography-responsive($size: 24, $override-line-height: 1);
+    @include govuk-typography-weight-regular;
     display: inline-table;
   }
 
@@ -74,7 +75,6 @@
     // - all links get a 3px underline regardless of text size, as there are
     //   multiple grouped elements close to one another and having slightly
     //   different underline widths looks unbalanced
-    @include govuk-typography-common;
     @include govuk-link-style-inverse;
 
     text-decoration: none;
@@ -96,8 +96,7 @@
   .govuk-header__link--homepage {
     // Font size needs to be set on the link so that the box sizing is correct
     // in Firefox
-    @include govuk-font($size: false, $weight: bold);
-
+    @include govuk-typography-weight-bold;
     display: inline-block;
     margin-right: govuk-spacing(2);
     font-size: 30px; // We don't have a mixin that produces 30px font size
@@ -135,7 +134,8 @@
   .govuk-header__service-name {
     display: inline-block;
     margin-bottom: govuk-spacing(2);
-    @include govuk-font($size: 24, $weight: bold);
+    @include govuk-typography-responsive($size: 24);
+    @include govuk-typography-weight-bold;
   }
 
   .govuk-header__logo,
@@ -248,7 +248,8 @@
     }
 
     a {
-      @include govuk-font($size: 16, $weight: bold);
+      @include govuk-typography-responsive($size: 16);
+      @include govuk-typography-weight-bold;
       white-space: nowrap;
     }
   }

diff --git a/packages/govuk-frontend/src/govuk/components/label/_index.scss b/packages/govuk-frontend/src/govuk/components/label/_index.scss
@@ -9,24 +9,27 @@
   }
 
   // Modifiers that make labels look more like their equivalent headings
+  .govuk-label--xl,
+  .govuk-label--l,
+  .govuk-label--m {
+    @include govuk-typography-weight-bold;
+    margin-bottom: govuk-spacing(3);
+  }
 
   .govuk-label--xl {
-    @include govuk-font($size: 48, $weight: bold);
-    margin-bottom: govuk-spacing(3);
+    @include govuk-typography-responsive($size: 48);
   }
 
   .govuk-label--l {
-    @include govuk-font($size: 36, $weight: bold);
-    margin-bottom: govuk-spacing(3);
+    @include govuk-typography-responsive($size: 36);
   }
 
   .govuk-label--m {
-    @include govuk-font($size: 24, $weight: bold);
-    margin-bottom: govuk-spacing(2);
+    @include govuk-typography-responsive($size: 24);
   }
 
   .govuk-label--s {
-    @include govuk-font($size: 19, $weight: bold);
+    @include govuk-typography-weight-bold;
   }
 
   // When the label is nested inside a heading, override the heading so that it

diff --git a/packages/govuk-frontend/src/govuk/components/notification-banner/_index.scss b/packages/govuk-frontend/src/govuk/components/notification-banner/_index.scss
@@ -24,12 +24,12 @@
   }
 
   .govuk-notification-banner__title {
-    @include govuk-font($size: 19, $weight: bold);
-
+    // Set the size again because this element is a heading and the user agent
+    // font size overrides the inherited font size
+    @include govuk-typography-responsive($size: 19);
+    @include govuk-typography-weight-bold;
     margin: 0;
-
     padding: 0;
-
     color: govuk-colour("white");
   }
 
@@ -65,7 +65,8 @@
   }
 
   .govuk-notification-banner__heading {
-    @include govuk-font($size: 24, $weight: bold);
+    @include govuk-typography-responsive($size: 24);
+    @include govuk-typography-weight-bold;
 
     margin: 0 0 govuk-spacing(3) 0;
 

diff --git a/packages/govuk-frontend/src/govuk/components/pagination/_index.scss b/packages/govuk-frontend/src/govuk/components/pagination/_index.scss
@@ -148,7 +148,7 @@
   }
 
   .govuk-pagination__link-label {
-    @include govuk-font($size: 19, $weight: "regular");
+    @include govuk-typography-weight-regular;
     @include govuk-link-decoration;
     display: inline-block;
     padding-left: govuk-spacing(6);

diff --git a/packages/govuk-frontend/src/govuk/components/panel/_index.scss b/packages/govuk-frontend/src/govuk/components/panel/_index.scss
@@ -1,6 +1,6 @@
 @include govuk-exports("govuk/component/panel") {
   .govuk-panel {
-    @include govuk-font($size: 19);
+    @include govuk-font($size: 36);
 
     box-sizing: border-box;
 
@@ -40,17 +40,13 @@
   }
 
   .govuk-panel__title {
+    @include govuk-typography-responsive($size: 48);
+    @include govuk-typography-weight-bold;
     margin-top: 0;
     margin-bottom: govuk-spacing(6);
-
-    @include govuk-font($size: 48, $weight: bold);
   }
 
   .govuk-panel__title:last-child {
     margin-bottom: 0;
   }
-
-  .govuk-panel__body {
-    @include govuk-font($size: 36);
-  }
 }
diff --git a/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss b/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss
@@ -17,7 +17,7 @@
   }
 
   .govuk-phase-banner__content__tag {
-    @include govuk-font($size: 16);
+    @include govuk-typography-responsive($size: 16);
     margin-right: govuk-spacing(2);
 
     // When forced colour mode is active, for example to provide high contrast,

diff --git a/packages/govuk-frontend/src/govuk/components/radios/_index.scss b/packages/govuk-frontend/src/govuk/components/radios/_index.scss
@@ -12,9 +12,11 @@
   // So for the circular radios we bump the default to make it look visually consistent.
   $govuk-radios-focus-width: $govuk-focus-width + 1px;
 
-  .govuk-radios__item {
+  .govuk-radios {
     @include govuk-font($size: 19);
+  }
 
+  .govuk-radios__item {
     display: block;
     position: relative;
 
@@ -158,7 +160,6 @@
 
   .govuk-radios__divider {
     $govuk-divider-size: $govuk-radios-size !default;
-    @include govuk-font($size: 19);
     @include govuk-text-colour;
     width: $govuk-divider-size;
     margin-bottom: govuk-spacing(2);

diff --git a/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss b/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss
@@ -172,6 +172,7 @@
 
   // Additional block for the summary card
   .govuk-summary-card {
+    @include govuk-font($size: 19, $weight: bold);
     @include govuk-responsive-margin(6, "bottom");
     border: 1px solid $govuk-border-colour;
   }
@@ -192,7 +193,9 @@
   }
 
   .govuk-summary-card__title {
-    @include govuk-font($size: 19, $weight: bold);
+    // Set the size again because this element is a heading and the user agent
+    // font size overrides the inherited font size
+    @include govuk-typography-responsive($size: 19);
     margin: govuk-spacing(1) govuk-spacing(4) govuk-spacing(2) 0;
 
     @include govuk-media-query($from: "tablet") {
@@ -201,7 +204,6 @@
   }
 
   .govuk-summary-card__actions {
-    @include govuk-font($size: 19, $weight: bold);
     display: flex;
     flex-wrap: wrap;
     row-gap: 10px;

diff --git a/packages/govuk-frontend/src/govuk/components/table/_index.scss b/packages/govuk-frontend/src/govuk/components/table/_index.scss
@@ -43,23 +43,21 @@
   }
 
   // Modifiers that make captions look more like their equivalent headings
+  .govuk-table__caption--xl,
+  .govuk-table__caption--l,
+  .govuk-table__caption--m {
+    margin-bottom: govuk-spacing(3);
+  }
 
   .govuk-table__caption--xl {
-    @include govuk-font($size: 48, $weight: bold);
-    margin-bottom: govuk-spacing(3);
+    @include govuk-typography-responsive($size: 48);
   }
 
   .govuk-table__caption--l {
-    @include govuk-font($size: 36, $weight: bold);
-    margin-bottom: govuk-spacing(3);
+    @include govuk-typography-responsive($size: 36);
   }
 
   .govuk-table__caption--m {
-    @include govuk-font($size: 24, $weight: bold);
-    margin-bottom: govuk-spacing(3);
-  }
-
-  .govuk-table__caption--s {
-    @include govuk-font($size: 19, $weight: bold);
+    @include govuk-typography-responsive($size: 24);
   }
 }
diff --git a/packages/govuk-frontend/src/govuk/components/tabs/_index.scss b/packages/govuk-frontend/src/govuk/components/tabs/_index.scss
@@ -2,10 +2,13 @@
   .govuk-tabs {
     @include govuk-responsive-margin(1, "top");
     @include govuk-responsive-margin(6, "bottom");
+    @include govuk-font($size: 19);
   }
 
   .govuk-tabs__title {
-    @include govuk-font($size: 19);
+    // Set the size again because this element is a heading and the user agent
+    // font size overrides the inherited font size
+    @include govuk-typography-responsive($size: 19);
     @include govuk-text-colour;
     margin-bottom: govuk-spacing(2);
   }
@@ -18,7 +21,6 @@
   }
 
   .govuk-tabs__list-item {
-    @include govuk-font($size: 19);
     margin-left: govuk-spacing(5);
 
     &::before {

diff --git a/packages/govuk-frontend/src/govuk/components/warning-text/_index.scss b/packages/govuk-frontend/src/govuk/components/warning-text/_index.scss
@@ -1,13 +1,12 @@
 @include govuk-exports("govuk/component/warning-text") {
   .govuk-warning-text {
-    position: relative;
+    @include govuk-font($size: 19, $weight: bold);
     @include govuk-responsive-margin(6, "bottom");
+    position: relative;
     padding: govuk-spacing(2) 0;
   }
 
   .govuk-warning-text__icon {
-    @include govuk-font($size: false, $weight: bold);
-
     box-sizing: border-box;
 
     display: inline-block;
@@ -52,7 +51,6 @@
   }
 
   .govuk-warning-text__text {
-    @include govuk-font($size: 19, $weight: bold);
     @include govuk-text-colour;
     display: block;
     padding-left: 45px;