From 18caff508c0cb45207f63312c03cf92f77f7e276 Mon Sep 17 00:00:00 2001
From: owenatgov <owen.jones@digital.cabinet-office.gov.uk>
Date: Wed, 27 Sep 2023 16:06:38 +0100
Subject: [PATCH 1/3] Remove unnecessary duplicated use of govuk-font

---
 CHANGELOG.md                                   |  1 +
 .../govuk/components/checkboxes/_index.scss    |  4 +---
 .../govuk/components/error-summary/_index.scss |  6 +++---
 .../src/govuk/components/fieldset/_index.scss  | 17 ++++++++++-------
 .../src/govuk/components/header/_index.scss    | 13 +++++++------
 .../src/govuk/components/label/_index.scss     | 17 ++++++++++-------
 .../components/notification-banner/_index.scss | 11 ++++++-----
 .../govuk/components/pagination/_index.scss    |  2 +-
 .../src/govuk/components/panel/_index.scss     | 10 +++-------
 .../govuk/components/phase-banner/_index.scss  |  2 +-
 .../src/govuk/components/radios/_index.scss    |  4 +---
 .../govuk/components/summary-list/_index.scss  |  3 ++-
 .../src/govuk/components/table/_index.scss     | 18 ++++++++----------
 .../src/govuk/components/tabs/_index.scss      |  7 +++++--
 .../govuk/components/warning-text/_index.scss  |  9 +++++----
 15 files changed, 64 insertions(+), 60 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f708f12037..21e1f54f8f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -400,6 +400,7 @@ We’ve made fixes to GOV.UK Frontend in the following pull requests:
 - [#3791: Refactor mobile menu button label/text handling](https://github.com/alphagov/govuk-frontend/pull/3791)
 - [#3862: Fix focus style being overlapped by summary action links](https://github.com/alphagov/govuk-frontend/pull/3862)
 - [#4113: Always set an explicit button `type`](https://github.com/alphagov/govuk-frontend/pull/4113)
+- [#4267: Remove unnecessary duplicated use of govuk-font](https://github.com/alphagov/govuk-frontend/pull/4267)
 
 ## 4.7.0 (Feature release)
 
diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss b/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss
index dacfeb4e91..d64a087530 100644
--- a/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss
+++ b/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss
@@ -10,8 +10,6 @@
   $govuk-checkboxes-label-padding-left-right: govuk-spacing(3);
 
   .govuk-checkboxes__item {
-    @include govuk-font($size: 19);
-
     display: block;
     position: relative;
 
@@ -141,9 +139,9 @@
   // =========================================================
 
   .govuk-checkboxes__divider {
-    $govuk-divider-size: $govuk-checkboxes-size !default;
     @include govuk-font($size: 19);
     @include govuk-text-colour;
+    $govuk-divider-size: $govuk-checkboxes-size !default;
     width: $govuk-divider-size;
     margin-bottom: govuk-spacing(2);
     text-align: center;
diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/_index.scss b/packages/govuk-frontend/src/govuk/components/error-summary/_index.scss
index 34e7aa8688..eed902b8a5 100644
--- 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
index 02278648a2..63bfe77def 100644
--- 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
index e437fc45dd..3e2f64640e 100644
--- 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
index 4c10ce9086..ed7b5ca5c7 100644
--- 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
index 0968f06007..83a4f9dec6 100644
--- 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
index 439e46cf3d..c4a7eda10d 100644
--- 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
index c1653b54fa..de98f9bdd7 100644
--- 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
index ea4b330496..addf4f54f7 100644
--- 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
index 8e62e31d80..6b2e612fc3 100644
--- a/packages/govuk-frontend/src/govuk/components/radios/_index.scss
+++ b/packages/govuk-frontend/src/govuk/components/radios/_index.scss
@@ -13,8 +13,6 @@
   $govuk-radios-focus-width: $govuk-focus-width + 1px;
 
   .govuk-radios__item {
-    @include govuk-font($size: 19);
-
     display: block;
     position: relative;
 
@@ -157,9 +155,9 @@
   // =========================================================
 
   .govuk-radios__divider {
-    $govuk-divider-size: $govuk-radios-size !default;
     @include govuk-font($size: 19);
     @include govuk-text-colour;
+    $govuk-divider-size: $govuk-radios-size !default;
     width: $govuk-divider-size;
     margin-bottom: govuk-spacing(2);
     text-align: center;
diff --git a/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss b/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss
index e24dfa399f..e09ef5a89a 100644
--- a/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss
+++ b/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss
@@ -201,7 +201,8 @@
   }
 
   .govuk-summary-card__actions {
-    @include govuk-font($size: 19, $weight: bold);
+    @include govuk-typography-responsive($size: 19);
+    @include govuk-typography-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
index f4872a1b52..052a5b362e 100644
--- 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
index f5e48d1869..019c56f2a7 100644
--- a/packages/govuk-frontend/src/govuk/components/tabs/_index.scss
+++ b/packages/govuk-frontend/src/govuk/components/tabs/_index.scss
@@ -2,10 +2,14 @@
   .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 and weight 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-regular;
     @include govuk-text-colour;
     margin-bottom: govuk-spacing(2);
   }
@@ -18,7 +22,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
index 59235c0edc..bf0cd8422e 100644
--- 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,15 @@
 @include govuk-exports("govuk/component/warning-text") {
   .govuk-warning-text {
-    position: relative;
+    @include govuk-font($size: 19);
     @include govuk-responsive-margin(6, "bottom");
+    position: relative;
     padding: govuk-spacing(2) 0;
   }
 
   .govuk-warning-text__icon {
-    @include govuk-font($size: false, $weight: bold);
-
+    // We apply this here and not at the parent level because the actual text is
+    // a <strong> and so will always be bold
+    @include govuk-typography-weight-bold;
     box-sizing: border-box;
 
     display: inline-block;
@@ -52,7 +54,6 @@
   }
 
   .govuk-warning-text__text {
-    @include govuk-font($size: 19, $weight: bold);
     @include govuk-text-colour;
     display: block;
     padding-left: 45px;

From 10beebebcb5d4056994413b3df51ff65b3411a95 Mon Sep 17 00:00:00 2001
From: owenatgov <owen.jones@digital.cabinet-office.gov.uk>
Date: Fri, 29 Sep 2023 11:01:02 +0100
Subject: [PATCH 2/3] Add text colour to summary card

---
 .../govuk-frontend/src/govuk/components/summary-list/_index.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss b/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss
index e09ef5a89a..4a10f7132f 100644
--- a/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss
+++ b/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss
@@ -193,6 +193,7 @@
 
   .govuk-summary-card__title {
     @include govuk-font($size: 19, $weight: bold);
+    @include govuk-text-colour;
     margin: govuk-spacing(1) govuk-spacing(4) govuk-spacing(2) 0;
 
     @include govuk-media-query($from: "tablet") {

From 32a6181bc1170da564cf15e82c7e1b120b6fd526 Mon Sep 17 00:00:00 2001
From: owenatgov <owen.jones@digital.cabinet-office.gov.uk>
Date: Fri, 29 Sep 2023 16:08:59 +0100
Subject: [PATCH 3/3] Remove heading class in table docs

This isn't necessary as we already have heading style modifiers for table captions. This does mean it's inconsistent with our docs that say they should correspond with heading typography classes. Suggest we should solve this holistically down the line.
---
 packages/govuk-frontend/src/govuk/components/table/table.yaml   | 2 +-
 .../govuk-frontend/src/govuk/components/table/template.test.js  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/govuk-frontend/src/govuk/components/table/table.yaml b/packages/govuk-frontend/src/govuk/components/table/table.yaml
index e1d271a27d..fb7ff8795f 100644
--- a/packages/govuk-frontend/src/govuk/components/table/table.yaml
+++ b/packages/govuk-frontend/src/govuk/components/table/table.yaml
@@ -132,7 +132,7 @@ examples:
   - name: table with head and caption
     options:
       caption: 'Caption 1: Months and rates'
-      captionClasses: govuk-heading-m
+      captionClasses: govuk-table__caption--m
       firstCellIsHeader: true
       head:
         - text: Month you apply
diff --git a/packages/govuk-frontend/src/govuk/components/table/template.test.js b/packages/govuk-frontend/src/govuk/components/table/template.test.js
index 3a6a66d4fb..aaa61ad85e 100644
--- a/packages/govuk-frontend/src/govuk/components/table/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/table/template.test.js
@@ -36,7 +36,7 @@ describe('Table', () => {
       const $ = render('table', examples['table with head and caption'])
       const $caption = $('.govuk-table__caption')
 
-      expect($caption.hasClass('govuk-heading-m')).toBeTruthy()
+      expect($caption.hasClass('govuk-table__caption--m')).toBeTruthy()
     })
   })